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

กดปุ่ม I Agree
จากนั้นก็จะให้เลือกตาแหน่งที่จะติดตั้ง เราสามารถเลือกไว้ที่ไหนก็ได้แต่ผมขอเลือกตามที่มันให้มา

กดปุ่ม Next >
จากนั้นจะแสดง Select Components

ให้เลือกเอาทั้งหมด แล้วกดปุ่ม Next >

ต่อมาจะเป็นการกาหนดเกี่ยวกับHTTPServer
ServerName : localhost
Email: ใส่ E-mailของคุณ
Port: 80
จากนั้นกดปุ่ม Next >

ต่อมาจะเป็นการตั้งค่าการใช้งานฐานข้อมูล MySQL
เป็นการกาหนดรหัสผ่านให้กับฐานข้อมูล โดยทั้งสองช่องจะต้องตรงกัน แล้วกดปุ่ม Install

รอสักครู่ โปรแกรมกาลังทาการติดตั้ง

จากนั้นถ้าขึ้น Windows Security Alert ให้กดปุ่ม Allow access เลยนะครับ
ต่อมาเลือกทั้งสองอัน แล้วกด Finish

ก็เสร็จสิ้นการติดตั้ง appserv
จากนั้นให้มาเช็คว่า web server ทางานได้หรือป่าวนะครับ

โดยให้เปิด browser ขึ้นมา แล้วพิมพ์localhost
3.ดาวน์โหลดและติดตั้ง Navicat เพื่อใช้จัดการฐานข้อมูล MySQL บน localhost
เว็บสาหรับดาวน์โหลด http://www.navicat.com/download/download.html
หลังจากที่ดาวน์โหลดโปรแกรมมาแล้วก็ดับเบิลคลิกไฟล์ที่ดาวน์โหลด

กดปุ่ม Next
เลือก I accept the agreement แล้วกดปุ่ม Next (ลองไม่เลือกสิพี่เขาไม่ให้ติดตั้ง)

Next ไปเลย
Next ไปเลย

Next >
กดปุ่ม Install

กด 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;

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(){

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 */

@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 {

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>      สมัครสมาชิก</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>
<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>
<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>

<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>

<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.สร้างการเชื่อมต่อฐานข้อมูล

หลังจากเปิดโปรแกรม 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 ขึ้นมา

ซึ่งมีรายละเอียดที่ต้องกาหนด ดังนี้
Enter database name: ตั้งชื่อฐานข้อมูล
Character set: กาหนดชุดตัวอักษร แนะนาเป็น utf8–UTF-8 Unicode
Collation: กาหนด Collation แนะนาเป็น utf8_general_ci
หลังจากกาหนดทุกอย่างเรียบร้อย คลิกปุ่ม OK คุณสร้างฐานข้อมูลใหม่ เรียบร้อย
การสร้างตารางใน Navicat
1.เปิด Navicat ขึ้นมา
คลิกขวาที่ Tables => New Table

จะได้หน้าต่างนี้

lesson3 JSP

More Related Content

What's hot

Viewers also liked

Similar to lesson3 JSP

More from Kukik Kanoknuan

lesson3 JSP