lesson3 JSP
Upcoming SlideShare
Loading in...5
×
 

lesson3 JSP

on

  • 490 views

 

Statistics

Views

Total Views
490
Views on SlideShare
490
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

lesson3 JSP lesson3 JSP Presentation Transcript

  • การเขียนโปรแกรมติดต่อฐานข้อมูล 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