1
การเขี�ยนโปรแกรมติ�ดติ�อฐานขี�อม�ล
ภาษาที่��ใช้�ในการเขี�ยนโปรแกรม .JSP
โปรแกรมที่��ใช้�ในการเขี�ยนโปรแกรม Eclipse
1. โหลดโปรแกรม Eclipse
2. ติ�ดติ �ง AppServ 2.5.10 เ พื่��อใช้�ในการเช้��อมติ�อ Java
eclipse ก บ MySQL
-ขี��นติอนการติ�ดติ��ง AppServ 2.5.10
เม �อโหลดมาแล�วก#ให�เป$ดไฟล' Appserv ที่��โหลดมาจะได�ด�งร�ป
2
กดป*+ม Next >
ติ�อมาก#จะแสดง License Agreement ขีอง AppServ 2.5.10
กดป*+ม I Agree
จากน��นก#จะให�เล อกติ.าแหน�งที่��จะติ�ดติ��ง เราสามารถเล อกไว�ที่��ไหนก#ได� แติ�ผมขีอเล อกติามที่��ม�นให�มา
3
กดป*+ม Next >
จากน��นจะแสดง Select Components
ให�เล อกเอาที่��งหมด แล�วกดป*+ม Next >
ติ�อมาจะเป1นการก.าหนดเก��ยวก�บ HTTPServer
ServerName : localhostEmail: ใส่� E-mail ของคุ�ณPort: 80
4
จากน��นกดป*+ม Next >
ติ�อมาจะเป1นการติ��งค่�าการใช้�งานฐานขี�อม�ล MySQL
เป1นการก.าหนดรห�สผ�านให�ก�บฐานขี�อม�ล โดยที่��งสองช้�องจะติ�องติรงก�น แล�วกดป*+ม Install
รอส�กค่ร� � โปรแกรมก.าล�งที่.าการติ�ดติ��ง
5
จ า ก น�� น ถ� า ขี4� น Windows Security Alert ใ ห� ก ดป*+ม Allow access เลยนะค่ร�บ
ติ�อมาเล อกที่��งสองอ�น แล�วกด Finish
ก#เสร#จส��นการติ�ดติ��ง appserv
จากน��นให�มาเช้#ค่ว�า web server ที่.างานได�หร อป+าวนะค่ร�บ
6
โดยให�เป$ด browser ขี4�นมา แล�วพิ�มพิ' localhost
3. ดาวน#โหลดและติ�ดติ �ง Navicat เพื่��อใช้�จั ดการฐานข�อม'ล MySQL บน localhost
เ ว# บ ส.า ห ร� บ ด า ว น' โ ห ล ด http://www.navicat.com/download/download.html
หล�งจากที่��ดาวน'โหลดโปรแกรมมาแล�วก#ด�บเบ�ลค่ล�กไฟล'ที่��ดาวน'โหลด
7
กดป*+ม Next
เล อก I accept the agreement แล�วกดป*+ม Next (ลองไม�เล อกส�พิ��เขีาไม�ให�ติ�ดติ��ง)
8
Next ไปเลย
Next ไปเลย
9
Next >
กดป*+ม Install
10
กด 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 ม�โค่6ดด�งน��
package comment;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
11
import java.sql.Connection;
import java.util.logging.Level;
import java.util.logging.Logger;
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.");
12
}
}
public void closeConnection(){
try{
conn.close();
}catch(SQLException ex){
Logger.getLogger(connect.class.getName()).log(Level.SEVERE, null, ex);
} }
}-ใน package controller จะม�ค่ลาสขีอง servlet ที่��ติ� �งช้ �อว�า loginservlet และม�การ import มาจาก class connect
ด�วย ม�โค่6ดขีองค่ลาส 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;
13
import comment.connect;
/*** Servlet implementation class LoginServlet */
@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
14
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 {
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"%>
15
<!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>  
;สม�ค่รสมาช้�ก</h1>
<center>
<form action="LoginServlet" method="post" onsubmit="return check()">
<table>
<tr>
<td align="right">User</td>
<td ><input type="text" name="id" ><br></td>
</tr>
<tr>
16
<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>
</tr>
<tr>
17
<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>
18
<td> <textarea name="Address" id="Address"></textarea><br></td>
</tr>
<tr>
<td align="right">จ�งหว�ด </td>
<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>
19
</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>
<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>
20
5.การส่ร�างฐานข�อม'ล MySQL ด�วย Navicat
ขี��นติอนการด.าเน�นการ
1.สร�างการเช้ �อมติ�อฐานขี�อม�ล
หล�งจากเป$ดโปรแกรม Navicat ขี4�นมาแล�ว ค่ล�กที่�� Connectionโปรแกรมจะเป$ดหน�าติ�าง Connection ขี4�นมา ซึ่4�งติ�องป<อนรายละเอ�ยดที่��จ.าเป1น ด�งน��Connection Name: ติ��งช้ �อ Connection จะเป1นอะไรก#ได� ให�จ.าง�ายเขี�าไว�Host name/IP address: ปล�อยให�เป1น localhost
Port: ปล�อยให�เป1น 3306
User name: ป<อน User name ที่��ใช้�ล#อกอ�นเขี�าส�� MySQL
ค่�าด�ฟอลติ' จะเป1น root
Password: ป<อนรห�สผ�าน ที่��ใช้�ล#อกอ�นเขี�าส�� MySQL ถ�าไม�ม�รห�สผ�าน ให�ปล�อยว�างไว�
21
กดป*+ม Test Connection เพิ �อที่ดสอบการเช้ �อมติ�อ ด�ก�อนก#ได� ถ�าโปรแกรมแจ�งว�า Conection Successfully แสดงว�าสามารถเช้ �อมติ�อฐานขี�อม�ลได�แล�ว ก#ให�ค่ล�กป*+ม OK
2.สร�างฐานขี�อม�ล
ด�บเบ�ลค่ล�กที่��ติ�ว connection ที่��สร�างขี4�นมา เพิ �อเช้ �อมติ�อเขี�าใช้�งาน MySQL ค่ล�กขีวา ที่��ติ�ว connection
ค่ล�ก New Database เพิ �อสร�างฐานขี�อม�ล โปรแกรมจะเป$ดไดอะล#อกบ#อก Create New Database ขี4�นมา
ซึ่4�งม�รายละเอ�ยดที่��ติ�องก.าหนด ด�งน��
22
Enter database name: ติ��งช้ �อฐานขี�อม�ลCharacter set: ก.าหนดช้*ดติ�วอ�กษร แนะน.าเป1น utf8–UTF-8 UnicodeCollation: ก.าหนด Collation แนะน.าเป1น utf8_general_ci
หล�งจากก.าหนดที่*กอย�างเร�ยบร�อย ค่ล�กป*+ม OK ค่*ณสร�างฐานขี�อม�ลใหม� เร�ยบร�อย
การส่ร�างติารางใน Navicat
1.เป$ด Navicat ขี4�นมา
ค่ล�กขีวาที่�� Tables => New Table
จะได�หน�าติ�างน��
23
24
25
Top Related