lesson3 jsp

การเขยนโปรแกรมตดตอฐานขอมล

1

การเขยนโปรแกรมตดตอฐานขอมล

ภาษาทใชในการเขยนโปรแกรม .JSP

โปรแกรมทใชในการเขยนโปรแกรม Eclipse

1.โหลดโปรแกรม Eclipse

2.ตดตง AppServ 2.5.10 เพอใชในการเชอมตอ Java eclipse กบ MySQL

-ขนตอนการตดตง AppServ 2.5.10

เมอโหลดมาแลวกใหเปดไฟล Appserv ทโหลดมาจะไดดงรป

กดปม Next >

ตอมากจะแสดง License Agreement ของ AppServ 2.5.10

การเขยนโปรแกรมตดตอฐานขอมล

2

กดปม I Agree

จากนนกจะใหเลอกต าแหนงทจะตดตง เราสามารถเลอกไวทไหนกได แตผมขอเลอกตามทมนใหมา

การเขยนโปรแกรมตดตอฐานขอมล

3

กดปม Next >

จากนนจะแสดง Select Components

การเขยนโปรแกรมตดตอฐานขอมล

4

ใหเลอกเอาทงหมด แลวกดปม Next >

การเขยนโปรแกรมตดตอฐานขอมล

5

ตอมาจะเปนการก าหนดเกยวกบHTTPServer

ServerName : localhost Email: ใส E-mailของคณ Port: 80

จากนนกดปม Next >

การเขยนโปรแกรมตดตอฐานขอมล

6

ตอมาจะเปนการตงคาการใชงานฐานขอมล MySQL

เปนการก าหนดรหสผานใหกบฐานขอมล โดยทงสองชองจะตองตรงกน แลวกดปม Install

การเขยนโปรแกรมตดตอฐานขอมล

7

รอสกคร โปรแกรมก าลงท าการตดตง

การเขยนโปรแกรมตดตอฐานขอมล

8

จากนนถาขน Windows Security Alert ใหกดปม Allow access เลยนะครบ

ตอมาเลอกทงสองอน แลวกด Finish

การเขยนโปรแกรมตดตอฐานขอมล

9

กเสรจสนการตดตง appserv

จากนนใหมาเชควา web server ท างานไดหรอปาวนะครบ

การเขยนโปรแกรมตดตอฐานขอมล

10

โดยใหเปด browser ขนมา แลวพมพ localhost

3.ดาวนโหลดและตดตง Navicat เพอใชจดการฐานขอมล MySQL บน localhost

เวบส าหรบดาวนโหลด http://www.navicat.com/download/download.html

หลงจากทดาวนโหลดโปรแกรมมาแลวกดบเบลคลกไฟลทดาวนโหลด

การเขยนโปรแกรมตดตอฐานขอมล

11

กดปม Next

เลอก I accept the agreement แลวกดปม Next (ลองไมเลอกสพเขาไมใหตดตง)

การเขยนโปรแกรมตดตอฐานขอมล

12

Next ไปเลย

Next ไปเลย

การเขยนโปรแกรมตดตอฐานขอมล

13

Next >

กดปม Install

การเขยนโปรแกรมตดตอฐานขอมล

14

กด Finish จบขนตอนการลง โปรแกรม Navicat

4.โคดในสวนตางๆของโปรแกรม Java Eclipse ทใชเชอมตอกบฐานขอมล (MySQL)

4.1) สรางprojectขนมา 1 project ชอproject วา BookMark

4.2) สรางpackageขนมา 2 packageชอวา Package comment กบ Package controller

-ใน Package comment จะม java class อย ชอ class วา connect มโคดดงน

package comment;

import java.sql.DriverManager;

import java.sql.SQLException;

import java.sql.Statement;

import java.sql.Connection;

import java.util.logging.Level;

import java.util.logging.Logger;

การเขยนโปรแกรมตดตอฐานขอมล

15

public class connect {

public Connection conn =null;

public Statement stmt = null;

public Statement getStatement(){

return stmt;

}

public void createConnection() throws SQLException{

try{

Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection("jdbc:mysql://localhost/book","root","admin");

stmt= conn.createStatement();

System.out.println("Connect success.");

}catch(ClassNotFoundException ex) {

Logger.getLogger(connect.class.getName()).log(Level.SEVERE, null, ex);

System.out.println("Connect Fail.");

}

}

public void closeConnection(){

การเขยนโปรแกรมตดตอฐานขอมล

16

try{

conn.close();

}catch(SQLException ex){

Logger.getLogger(connect.class.getName()).log(Level.SEVERE, null, ex);

}

}

}

-ใน package controller จะมคลาสของ servlet ทตงชอวา loginservlet และมการ import มาจากclass connect ดวย มโคดของคลาส loginservlet ดงน

package com.controller;

import java.io.IOException;

import java.sql.SQLException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import comment.connect;

/*** Servlet implementation class LoginServlet */

การเขยนโปรแกรมตดตอฐานขอมล

17

@WebServlet("/LoginServlet")

public class LoginServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

/*** Default constructor. */

public LoginServlet() {

// TODO Auto-generated constructor stub

}/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

String username = request.getParameter("id");

String password = request.getParameter("password");

System.out.println("username="+username);

System.out.println("password="+password);

connect db = new connect();

try {

การเขยนโปรแกรมตดตอฐานขอมล

18

db.createConnection();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

4.3) และนจะเปนโคดของ Java.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;สมครสมาชก</h1>

<center>

<form action="LoginServlet" method="post" onsubmit="return check()">

การเขยนโปรแกรมตดตอฐานขอมล

19

<table>

<tr>

<td align="right">User</td>

<td ><input type="text" name="id" ><br></td>

</tr>

<tr>

<td align="right">Password</td>

<td ><input type="password" name="password" ><br></td>

</tr>

<tr>

<td align="center" colspan="2">

<input type="submit" name="ok" value="ตกลง">

<br></td>

<!--

<tr>

<td align="right">ชอ </td>

<td><input type="text" name="Firstname" id="Firstname"> <br> </td>

</tr>

<tr>

<td align="right">สกล</td>

<td><input type="text" name="lastname" id="lastname"><br></td>

การเขยนโปรแกรมตดตอฐานขอมล

20

</tr>

<tr>

<td align="right">เพศ </td>

<td> <input type="radio" checked="checked" name="sex" value="ชาย">ชาย <input type="radio"

name="sex" value="หญง">หญง<br></td>

</tr>

<tr>

<td align="right">ชอบการตนประเภท</td>

<td>

<input type="checkbox" name="cartoon" value="ผจญภย">ผจญภย

<input type="checkbox" name="cartoon" value="โรแมนตก">โรแมนตก

<input type="checkbox" name="cartoon" value="กฬา">กฬา

<input type="checkbox" name="cartoon" value="ตลกขบขน">ตลก

<br></td>

</tr>

<tr>

<td align="right" >ทอย </td>

<td> <textarea name="Address" id="Address"></textarea><br></td>

</tr>

<tr>

<td align="right">จงหวด </td>

การเขยนโปรแกรมตดตอฐานขอมล

21

<td><select name="Province">

<option value="กรณาเลอกจงหวด">กรณาเลอกจงหวด</option>

<option value="เชยงใหม">เชยงใหม </option>

<option value="ขอนแกน">ขอนแกน</option>

<option value="ล าปาง">ล าปาง</option>

<option value="ล าพน">ล าพน</option>

<option value="เชยงราย">เชยงราย</option>

</select> <br> </td>

</tr>

<tr>

<td align="right">โทรศพท</td>

<td><input type="text" name="number" id="number"> <br> </td>

</tr>

<tr>

<td align="right">อเมล</td>

<td><input type="text" name="email" id="email"> <br> </td>

</tr>

<tr>

<td align="right">รปประจ าตว </td>

<td ><input type="file" id="image"> <br></td>

</tr>

<tr>

การเขยนโปรแกรมตดตอฐานขอมล

22

<td align="center" colspan="2">

<input type="submit" name="ok" value="ตกลง">

<input type="reset"name="delete" value="ลบ">

<br></td>

</tr>

-->

</table>

</form>

</center>

</body>

</html>

5.การสรางฐานขอมล MySQL ดวย Navicat

ขนตอนการด าเนนการ

1.สรางการเชอมตอฐานขอมล

การเขยนโปรแกรมตดตอฐานขอมล

23

หลงจากเปดโปรแกรม Navicat ขนมาแลว คลกท Connection โปรแกรมจะเปดหนาตาง Connection ขนมา ซงตองปอนรายละเอยดทจ าเปน ดงน Connection Name: ตงชอ Connection จะเปนอะไรกได ใหจ างายเขาไว Host name/IP address: ปลอยใหเปน localhost Port: ปลอยใหเปน 3306 User name: ปอน User name ทใชลอกอนเขาส MySQL คาดฟอลต จะเปน root Password: ปอนรหสผาน ทใชลอกอนเขาส MySQL ถาไมมรหสผาน ใหปลอยวางไว กดปม Test Connection เพอทดสอบการเชอมตอ ดกอนกได ถาโปรแกรมแจงวา Conection Successfully แสดงวาสามารถเชอมตอฐานขอมลไดแลว กใหคลกปม OK

2.สรางฐานขอมล

ดบเบลคลกทตว connection ทสรางขนมา เพอเชอมตอเขาใชงาน MySQL

คลกขวา ทตว connection

คลก New Database เพอสรางฐานขอมล โปรแกรมจะเปดไดอะลอกบอก Create New Database ขนมา

การเขยนโปรแกรมตดตอฐานขอมล

24

ซงมรายละเอยดทตองก าหนด ดงน

Enter database name: ตงชอฐานขอมล Character set: ก าหนดชดตวอกษร แนะน าเปน utf8–UTF-8 Unicode Collation: ก าหนด Collation แนะน าเปน utf8_general_ci

หลงจากก าหนดทกอยางเรยบรอย คลกปม OK คณสรางฐานขอมลใหม เรยบรอย

การสรางตารางใน Navicat

1.เปด Navicat ขนมา

คลกขวาท Tables => New Table

การเขยนโปรแกรมตดตอฐานขอมล

25

จะไดหนาตางน

การเขยนโปรแกรมตดตอฐานขอมล

26