Javacentrix com chap11-1

บทที่ 11 ร้านค้าออนไลน์ด้วยเทคโนโลยีจาวา
หลังจากที่ได้ศึกษาหลักทฤษฏีและหลักปฏิบัติในเรื่องเกี่ยวกับเซิร์ฟเล็ตและ
JSP แล้ว
เพื่อให้ผู้อ่านได้มองเห็นภาพการพัฒนาระบบงานที่สามารถดึงเอาความสามารถ
ของเทคโนโลยีเหล่านั้นมาใช้ประโยชน์ได้ชัดเจนยิ่งขึ้น
ดังนั้นผู้เขียนจึงได้สร้างตัวอย่างขึ้นมาหนึ่งตัวอย่าง
โดยมีการนำเอารูปแบบต่างๆทั้งเทคโนโลยีจาวา
และเทคโนโลยีสนับสนุนอื่นๆมาทำงานร่วมกัน
เพื่อสร้างเป็นระบบงานให้สามารถทำงานในแบบเว็บแอปพลิเคชั่นในระบบพาณิ
ชย์อิเล็กทรอนิกส์หรืออีคอมเมิรช์ (E-Commerce)
ระบบดังกล่าวเป็นการจัดทำ “ระบบร้านค้าออนไลน์”
โดยมีวัตถุประสงค์ให้ผู้ซื้อสามารถเลือกและสั่งซื้อสินค้าได้ในแบบออนไลน์ผ่าน
การทำงานของเว็บ
และผู้บริหารร้านค้าสามารถดูแลร้านค้าได้ในแบบออนไลน์เช่นเดียวกัน
ซึ่งในเนื้อหามีการลำดับเหตุการณ์เพื่ออธิบายเป็นหมายของการพัฒนาระบบ
จนได้ระบบที่ทำงานได้อย่างสมบูรณ์ในระดับหนึ่ง
ซึ่งผู้อ่านสามารถนำเอาบางส่วนของตัวอย่างไปใช้งาน
หรือปรับปรุงพัฒนาให้เพิ่มความสามารถในการทำงานให้ดียิ่งขึ้นได้ตามความต้
องการ

1. ระบบร้านค้าออนไลน์ (Online Shopping Mall)
เป็นโครงงานที่นำเอาหลักการของเทคโนโลยีจาวามาใช้งาน เพื่อให้ผู้อ่านมองเห็นภาพว่าเทคโนโลยีต่างๆของภาษาจาวา
สามารถนำมาประยุกต์เข้ากันเพื่อให้เกิดเป็นระบบงานได้อย่างไร
ก่อนอื่นผู้เขียนขอนำหลักการในการวิเคราะห์และออกแบบระบบมาใช้งาน เพื่อให้มองเห็นภาพได้ชัดเจนยิ่งขึ้น
โดยขอเล่าความเป็นมาของโครงงาน Online Shop ขึ้นมาก่อนว่าเกิดขึ้นได้อย่างไร
ความเป็นมา
สืบเนื่องจากธุรกิจที่มีการซื้อ-ขายสินค้ากันโดยทั่วไปต้องมีพื้นที่เพื่อนำเสนอตัวสินค้าแก่ลูกค้า เช่น อาคาร ห้องแถว เป็นต้น
และการเปิดบริการก็จำเป็นต้องทำในช่วงเวลาที่ลูกค้าทั่วไปสามารถเยี่ยมชมสินค้าได้ นั่นหมายถึงว่าใน 1 วันหรือ 24
ชั่วโมงจำเป็นต้องมีเวลาปิดบริการเพื่อให้ทั้งเจ้าของกิจการ และลูกค้าหยุดพักผ่อน อีกทั้งสินค้าต่างๆ ก็จำเป็นต้องสั่งจากผู้จำหน่าย
(Suppliers) เข้ามาเพื่อเก็บไว้ให้ลูกค้าได้เข้ามาใช้บริการ และเห็นตัวสินค้าเพื่อเลือกซื้อได้ตามความชอบใน
แต่ในปัจจุบันโลกของคอมพิวเตอร์สามารถเชื่อมโยงได้ด้วยเครือข่ายอินเตอร์เน็ต
และก็มีธุรกรรมที่เกิดขึ้นโดยอาศัยความสามารถของการเชื่อมโยงคอมพิวเตอร์เหล่านี้มาใช้ประโยชน์ เช่นกิจกรรมการซื้อ-
ขายสินค้าในแบบออนไลน์ ที่เราเรียกหรือได้ยินกันติดปากว่า ระบบพาณิชย์อิเล็กทรอนิกส์ (E-Commerce System)
ประโยชน์ของระบบดังกล่าวจากที่ต้องมีพื้นที่หรือบริเวณในการตั้งร้าน
ก็จะเปลี่ยนเป็นพื้นที่ของดิสก์ที่ที่ใช้สำหรับเก็บข้อมูลอิเล็กทรอนิกส์แทน ซึ่งขนาดพื้นที่จากตารางเมตร ก็เปลี่ยนไปเป็น เม็กกะไบต์
ประการต่อมาสินค้าที่ต้องจัดซื้อจากผู้จำหน่าย ในบางที่ก็ไม่จำเป็นต้องจัดซื้อเก็บไว้ในคลังสินค้าในจำนวนเยอะ เพียงแต่นำเอารูป
รายละเอียดของสินค้ามาบันทึกไว้ในรูปแบบอิเล็กทรอนิกส์แล้วจัดเก็บลงในระบบฐานข้อมูลแทน
และลูกค้าก็อาศัยเครือข่ายอินเตอร์เน็ตเข้ามาเรียกดูสินค้าที่ทางร้านจัดเก็บเอาไว้แทน
ประการต่อมาเวลาการให้บริการจากเดิมที่ต้องมีเวลาหยุดพัก ก็สามารถเปิดให้บริการได้ ถึง 24 ชั่วโมงใน 7
วันของสัปดาห์นั่นคือไม่มีเวลาหยุดพัก โดยต้องไม่ต้องมีจ้างพนักงานมาคอยเฝ้าร้าน
ให้เป็นหน้าที่ของระบบงานคอมพิวเตอร์ที่จะเปิดให้บริการและทำงานด้วยระบบอิเล็กทรอนิกส์แทน
แต่ใช้ว่าระบบพาณิชย์อิเล็กทรอนิกส์นี้จะมีแต่สิ่งดีๆนะครับ
อย่างหนึ่งก็คือค่าใช้จ่ายของการพัฒนาระบบเพื่อรองระบบเพื่อรองรับการดำเนินงาน
ซึ่งต้องอาศัยผู้ที่มีความรู้และความเข้าใจในการพัฒนามาช่วยทำให้ความฝันของเจ้าของกิจการเป็นจริงให้ได้
(หนังสือเล่มนี้จะบอกในรายละเอียดของเทคโนโลยีจาวา ที่พึงจะนำมาใช้งานได้)
แน่นอนว่าค่าใช้จ่ายก็จำเป็นต้องเตรียมไว้สำหรับการว่าจ้าง การเช่า การซื้อระบบคอมพิวเตอร์และระบบเครือข่าย
และอีกประการหนึ่งระบบนี้ต้องการลูกค้าที่ค่อนข้างมีความรู้ทางด้านคอมพิวเตอร์ด้วย
เรียกว่าลูกค้าจำเป็นต้องรู้จักการใช้อินเตอร์เน็ต และรู้ว่าจะเข้ามาใช้บริการของทางเจ้าของกิจการได้อย่างไร
และจะเลือกซื้อสินค้าที่มีจำหน่ายได้อย่างไร แน่นอนว่าลูกค้าจำเป็นต้องมีระบบคอมพิวเตอร์เพื่อรองรับการใช้งาน
อาจจะเป็นเจ้าของเอง หรือใช้ตามสถานบริการอินเตอร์เน็ตต่างๆที่เสียค่าบริการก็ได้
เมื่อได้ทราบรายละเอียดลักษณะของร้านค้าออนไลน์แล้ว
ที่นี้ผู้เขียนก็จะยกตัวอย่างเอากิจการประเภทการซื้อขายเครื่องใช้ไฟฟ้าอิเล็กทรอนิกส์ขึ้นมาเป็นตัวอย่าง โดยสมมุติตัวอย่างร้านค้าชื่อ
“มดง่ามออนไลน์” ที่ดำเนินกิจการเกี่ยวกับสินค้าประเภท โทรศัพท์มือถือ คอมพิวเตอร์มือถือ (Handheld) ทีวี รวมถึงเครื่องเล่น
DVD/VCD ด้วย เจ้าของกิจการต้องการให้บริการดังกล่าวผ่านทางบริการออนไลน์หลังจากเปิดบริการด้วยพื้นที่ห้องเช่ามาได้ระยะหนึ่ง
เพราะต้องการรองรับลูกค้าในส่วนที่ใช้งานอินเตอร์เน็ต และเป็นการเปิดบริการด้วยช่องทางการสื่อสารใหม่
ให้กับทั้งลูกค้าเก่าและลูกค้าใหม่ โดยบริการดังกล่าวก็เป็นรูปแบบการนำข้อมูลที่ทางร้านจัดจำหน่ายอยู่
มาจัดเก็บรายละเอียดและรูปภาพลงในระบบคอมพิวเตอร์ และเปิดให้ลูกค้าเยี่ยมชมผ่านทางอินเตอร์เน็ต
ลูกค้าสามารถเรียกดู*(Browse) หรือค้นหา*(Search)สินค้า ได้ตามความพอใจ โดยผู้ที่เป็นลูกค้าเมื่อสามารถเลือกสินค้าได้แล้ว

ก็จะกรอกรายละเอียดข้อมูลส่วนตัว เช่น ชื่อ หมายเลขโทรศัพท์ หมายเลข E-mail ที่อยู่จัดส่ง เพื่อบันทึกคำยืนยันการการสั่งซื้อ
และจัดเก็บไว้บริการหรือตรวจสอบการประกันสินค้าในภายหลัง
ซึ่งจากรายละเอียดข้างต้นนั้น
ทำให้สามารถทราบได้ว่าระบบดังกล่าวจำเป็นต้องมีระบบฐานข้อมูลเข้ามาเกี่ยวข้องเพื่อจัดเก็บข้อมูลสินค้า ประวัติการขาย
ข้อมูลข่าวเกี่ยวกับผลิตภัณฑ์
2. การออกแบบระบบฐานข้อมูล
ส่วนระบบฐานข้อมูล (Database) ในขั้นตอนการพัฒนาระบบงานจริงๆ จำเป็นต้องผ่านการวิเคราะห์และออกแบบ
ผ่านขบวนการนัลมอไลซ์จนได้โครงสร้างที่ดีที่สุด ซึ่งทางผู้เขียนขอลดขั้นตอนดังกล่าวเพื่อไม่ให้เนื้อหาอยู่นอกขอบเขต
ดังนั้นจึงขอสรุปโครงสร้างระบบฐานข้อมูล และคำสั่ง SQL ที่ใช้ในการสร้างเทเบิลต่างในระบบฐานข้อมูล mySQL ดังนี้
เทเบิล Categories สำหรับเก็บรายละเอียดของหมวดสินค้า
ชื่อฟิลด์ ชนิดข้อมูล รายละเอียด
CategoryID SMALLINT กำหนดให้เป็น Primary Key
Description VARCHAR(20) ชื่อหมวดสินค้า เช่น “ทีวี”
จากข้อกำหนดสามารถสร้างคำสั่ง SQL เพื่อสร้างเทเบิล Categories ได้ดังนี้
CREATE TABLE Categories (
CategoryID SMALLINT PRIMARY KEY,
Description VARCHAR(20) NOT NULL )
เทเบิล Brands สำหรับเก็บรายชื่อยี่ห้อสินค้า
BrandID SMALLINT กำหนดให้เป็น Primary Key
Description VARCHAR(20) ชื่อยี่ห้อสินค้า
--
จากข้อกำหนดสามารถสร้างคำสั่ง SQL เพื่อสร้างเทเบิล Brands ได้ดังนี้
CREATE TABLE Brands (
BrandID SMALLINT PRIMARY KEY,
เทเบิล Units สำหรับเก็บรายชื่อหน่วยสินค้า
UnitID SMALLINT กำหนดให้เป็น Primary Key
Description VARCHAR(20) ชื่อหน่วยสินค้า
จากข้อกำหนดสามารถสร้างคำสั่ง SQL เพื่อสร้างเทเบิล Units ได้ดังนี้

CREATE TABLE Units (
UnitID SMALLINT PRIMARY KEY,
เทเบิล Products สำหรับเก็บรายละเอียดของหมวดสินค้า
ProductID INT กำหนดให้เป็น Primary Key
Title VARCHAR(20) รุ่น
BrandID SMALLINT รหัสยี่ห้อสินค้าอ้างถึง Brands
CategoryID SMALLINT รหัสหมวดอ้างถึง Categories
Description TINYTEXT รายละเอียดผลิตภัณฑ์
Price Double ราคาสินค้า
Sale Double ราคาขายลดราคา
UnitID SMALLINT รหัสหน่วยอ้างถึง Units
จากข้อกำหนดสามารถสร้างคำสั่ง SQL เพื่อสร้างเทเบิล Products ได้ดังนี้
CREATE TABLE Products (
ProductID INT PRIMARY KEY,
Title VARCHAR(20) NOT NULL,
BrandID SMALLINT REFERENCES Brands(BrandID)
ON DELETE CASCADE
ON UPDATE CASCADE,
CategoryID SMALLINT REFERENCES Categories(CategoryID)
ON DELETE CASCADE
ON UPDATE CASCADE,
Description TINYTEXT,
Price DOUBLE,
Sale DOUBLE,
UnitID SMALLINT REFERENCES Units(UnitID)
ON DELETE CASCADE
ON UPDATE CASCADE )
เทเบิล Orders สำหรับเก็บทะเบียนการสั่งซื้อสินค้า
OrderID INT กำหนดให้เป็น Primary Key
รูปแบบเพิ่มค่าอัตโนมัติ (Auto)
OnDate DATETIME วันที่สั่งซื้อสินค่า
Name VARCHAR(50) ชื่อผู้ซื้อ
Surname VARCHAR(50) นามสกุล

จากข้อกำหนดสามารถสร้างคำสั่ง SQL เพื่อสร้างเทเบิล Orders ได้ดังนี้
CREATE TABLE Orders (
OrderID INT PRIMARY KEY AUTO_INCREMENT,
OnDate DATETIME NOT NULL,
Name VARCHAR(50) NOT NULL,
Surname VARCHAR(50),
Email VARCHAR(50),
Phone VARCHAR(50),
AddressNo VARCHAR(30),
Street VARCHAR(30),
Tumbol VARCHAR(30),
Amphor VARCHAR(30),
Province VARCHAR(30),
Postal VARCHAR(5) )
เทเบิล OrderDetails สำหรับเก็บรายละเอียดของทะเบียนการสั่งซื้อสินค้า
OrderID Char(2) กำหนดให้เป็น Primary Key
ProductID Char(25) กำหนดให้เป็น Primary Key
รหัสสินค้า อ้างถึง Products
Qty INT ปริมาณการสั่งซื้อ
จากข้อกำหนดสามารถสร้างคำสั่ง SQL เพื่อสร้างเทเบิล OrderDetails ได้ดังนี้
CREATE TABLE OrderDetails (
OrderID INT NOT NULL,
ProductID INT NOT NULL REFERENCES Products(ProductID)
ON DELETE CASCADE
ON UPDATE CASCADE,
Qty INT,
PRIMARY KEY(OrderID, ProductID) )
3. การจัดสร้างระบบฐานข้อมูล
เนื่องจากชุดคำสั่ง SQL ที่ยกตัวอย่างมาในหัวข้อที่ผ่านมาอ้างถึงการนำไปใช้ในระบบฐานข้อมูล mySQL
ดังนั้นสามารถนำไปใช้งานเพื่อส่งให้กับระบบฐานข้อมูลเพื่อสร้างเทเบิลในการใช้งานได้ การสร้างคำสั่ง SQL ในระบบฐานข้อมูล

mySQL หลังที่ได้ทำการติดตั้งโปรแกรมเรียบร้อยแล้ว สามารถเรียกใช้งานผ่านโปรแกรมชื่อ mySQLManager หากเส้นทางติดตั้งคือ
C:Program FilesmySQL ดังนั้นโปรแกรมจะอยู่ที่
C:Program FilesmySQLbinMySqlManager.exe
ซึ่งให้เรียกเมนู Tool -> SQL Query จะปรากฏหน้าต่าง mySQL Query เมื่อต้องการใส่คำสั่ง SQL ให้พิมพ์ลงในช่อง Query
และกดปุ่มดำเนินงานด้านบน (รูปสามเหลี่ยมสีเขียวหัวหันด้านขวา)
ก่อนอื่นสำหรับระบบฐานข้อมูล mySQL ต้องมีการสร้างพื้นที่ใช้งานก่อน
ในการทดสอบของผู้เขียนได้ทำการตั้งชื่อพื้นที่ดังกล่าวว่า shop (ใน mySQL เรียกพื้นที่นี้ว่า database) ดังนั้นคำสั่ง SQL
ที่ใช้ในการรสร้างพื้นที่ชื่อ shop เป็นดังนี้
รูปแบบ
CREATE DATABASE database_name
เมื่อ
database_name คือชื่อพื้นที่ใช้งาน
ตัวอย่าง
CREATE DATABASE shop
คำแนะนำ ในคำสั่ง SQL ตัวอักษรตัวใหญ่หรือตัวเล็กสามารถใช้งานทดแทนกันแต่ แต่ให้ระวังในการตั้งชื่อพื้นที่ใช้งาน ชื่อเทเบิล
ชื่อฟิลด์ต่างๆ หากใช้ตัวอักษรแบบใดแล้ว เมื่อมีการใช้งานจะเป็นต้องอ้างชื่อให้ตรงกันเมื่อมีการอ้างถึงในส่วนของจาวาใดๆ
เมื่อสั่งดำเนินการเรียบร้อยแล้วสามารถตรวจสอบดูว่า เกิดพื้นที่ใช้งาน shop
หรือไม่ด้วยการพิมพ์คำสั่งดูรายชื่อพื้นที่ทำงานของระบบฐานข้อมูล mySQL ทั้งหมดด้วยคำสั่ง
SHOW Databases
ซึ่งผลลัพธ์ของคำสั่งจะปรากฏในแท็บ Results ของหน้าต่างเดียวกัน หลังจากตรวจสอบพบชื่อพื้นที่ใช้งานแล้ว
ให้เปิดพื้นที่การทำงาน shop ด้วยคำสั่ง USE ซึ่งคำสั่งนี้ต้องทำก่อนในครั้งแรกเสมอ เมื่อผู้ใช้ต้องการดำเนินงานใดๆในพื้นที่ใช้งาน
รูปแบบคำสั่งเป็นดังนี้
ใส่คำสั่ง SQL บริเวณนี้
ในแท็บ Query
กดเมื่อต้องการให้คำสั่ง
SQL ดำเนินงาน

รูปแบบ
USE database_name
เมื่อ
database_name คือชื่อพื้นที่ใช้งาน
ตัวอย่าง
USE shop
ขั้นตอนต่อไปคือการสร้างเทเบิลลงในพื้นที่ shop โดยให้ป้อนคำสั่ง SQL
ที่ใช้ในการสร้างเทเบิลซึ่งแสดงไว้ด้านล่างของตารางแสดงรายละเอียดของแต่ละเทเบิล ให้ค่อยๆทำทีละคำสั่งจงครบทั้ง 6
เทเบิลจนครบ หลังจากสร้างเทเบิลเรียบร้อยแล้วสามารถตรวจดูรายชื่อเทเบิลทั้งหมด
หรือตรวจสอบโครงสร้างของแต่ละเทเบิลด้วยรูปแบบคำสั่งดังนี้ คือ
รูปแบบการตรวจสอบรายชื่อเทเบิลทั้งหมด
SHOW tables
รูปแบบการตรวจสอบโครงสร้างของแต่ละเทเบิล
DESC table_name
เมื่อ
table_name คือชื่อเทเบิล
ตัวอย่างการแสดงโครงสร้างของเทเบิล Products
DESC Products
ผลลัพธ์จากตัวอย่าง
Field Type Null Key Default Extra
----- ---- ---- --- ------- -----
OrderID int(11) PRI NULL auto_increment
OnDate datetime 0000-00-00 00:00:00
Name varchar(50)
Surname varchar(50) YES NULL
Email varchar(50) YES NULL
Phone varchar(50) YES NULL
AddressNo varchar(30) YES NULL
Street varchar(30) YES NULL
Tumbol varchar(30) YES NULL
Amphor varchar(30) YES NULL
Province varchar(30) YES NULL
Postal varchar(5) YES NULL
(11 row(s) affected)

หากผู้อ่านต้องการนำเอาชุดคำสั่ง SQL ไปใช้กับระบบฐานข้อมูลอื่นๆ ให้ปรับเปลี่ยนชนิดข้อมูลไปตามฐานข้อมูลนั้นๆได้
โดยศึกษารายละเอียดเพิ่มเติมจากคู่มือการใช้งานของระบบฐานข้อมูลนั้นๆ
4. การกำหนดโครงสร้างเว็บแอปพลิเคชั่นและไลบรารี่ใช้งาน
การทำงานของระบบเว็บแอปพลิเคชั่นในที่นี้ยังคงสร้างและใช้งานบน เว็บเซิร์ฟเวอร์ชื่อ Apache Tomcat
เช่นเดิมเหมือนที่ทดลองตัวอย่างต่างๆที่ผ่านมาในหนังสือ ซึ่งได้ติดตั้งไว้บนระบบในเส้นทาง
C:Program FilesApache Tomcat 4.0
การจัดสร้างระบบผู้เขียนจะทำการสร้างเว็บแอปพลิเคชั่นชื่อ shop ไว้สำหรับทำงานระบบขายสินค้าออนไลน์โดยเฉพาะ
โดยมีการสร้างไดเร็กทรอรี่ตามโครงสร้างดังนี้
shop
WEB-INF
classes
lib
mySQL
tags TLD
images
adm JSP
ก่อนจะกล่าวถึงในส่วนของซอร์สโค้ดที่เกี่ยวข้องกับการจัดสร้าง
ต้องขอทำความเข้าใจเกี่ยวกับการสร้างส่วนติดต่อกับฐานข้อมูล mySQL ด้วย JDBC กันก่อน
ซึ่งการที่จะใช้งานจะต้องอาศัยไดร์เวอร์ที่สอดคล้องกับระบบฐานข้อมูล โดยไดร์เวอร์สำหรับ JDBC
นี้สามารถดาวน์โหลดมาใช้งานได้จากเส้นทางดังนี้
http://www.mysql.com/Downloads/Contrib/
http://mmmysql.sourceforge.net/
เมื่อได้ทำการดาวน์โหลดแล้วจำต้องติดตั้งไดร์เวอร์ลงในตำแหน่งการทำงานที่เหมาะสม ในกรณีที่ทำงานกับเซิร์ฟเล็ตหรือ
JSP นั่นก็คือการติดตั้งลงบนพื้นที่ทำงานของเว็บแอปพลิเคชั่นบนระบบเว็บเซิร์ฟเวิอร์คือ
C:Program FilesApache Tomcat 4.0webappsshoplibmm.mysql-2.0.14-bin.jar
หมายเหตุ ไดร์เวอร์ JDBC ของ mySQL ที่ใช้คือ mm mySQL Drive เวอร์ชัน 2.0.14
การโหลดไดร์เวอร์
เนื่องจากไดร์เวอร์ที่ใช้จะต้องมีการโหลดด้วยการอ้างชื่อที่ถูกต้อง ชื่อที่ใช้สำหรับไดร์เวอร์คือ org.git.mm.mysql.Driver ซึ่ง
ในการโหลดไดร์เวอร์ทำได้โดยการอ้างชื่อในกลุ่มคำสั่ง Class.forName ดังนี้
ตัวอย่างการโหลดไดร์เวอร์ของ mySQL
Class.forName("org.gjt.mm.mysql.Driver");
การเชื่อมโยงไปยังพื้นที่ใช้งาน
การเชื่อมโยงพื้นที่ใช้งาน จากการทดสอบเป็นการติดตั้งระบบฐานข้อมูล mySQL
ไว้ในระบบเครื่องคอมพิวเตอร์เดียวกันกับระบบเว็บเซิร์ฟเวอร์ดังนั้นจึงอ้างผ่านหมายเลข IP ที่ 127.0.0.1 ในพอร์ต 3306

(ผู้ใช้สามารถเปลี่ยนหมายเลขพอร์ตได้จาก mySQL) และพื้นที่ใช้งาน shop โดยยังไม่มีการกำหนดรายชื่อผู้ใช้ และรหัสผ่าน
ดังเส้นทางเชื่อมโยงคือ
เส้นทางเชื่อมโยงไปยังพื้นที่ shop ใน mySQL
jdbc:mysql://127.0.0.1:3306/shop
ตัวอย่างคำสั่งเชื่อมโยง
Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/shop", "", "");
หลังจากนี้แล้วการใช้งานในส่วนของฐานข้อมูลก็เป็นการใช้งานปกติตามที่ได้ให้รายละเอียดไว้ในเนื้อหาไว้ในบทที่ 10
5. ส่วนสนับสนุนการทำงาน
ในการทำงานของส่วนจัดการฐานข้อมูลนี้ มีการสร้างแท็กไลบรารี่เพื่อทำงานติดต่อกับระบบฐานข้อมูล
โดยมีการกำหนดชื่อแท็กไว้ในเอกสาร TLD ชื่อ db-tags.tld ซึ่งบรรจุข้อมูลรายละเอียดเกี่ยวกับแท็กโดยมีรูปแบบการใช้งานดังนี้
การอ้างการใช้งานแท็กในเอกสาร TLD
<%@taglib uri="tags/db-tags.tld" prefix="database" %>
รูปแบบการใช้งานแท็กอ่านข้อมูลจากฐานข้อมูล
<%@taglib uri="tags/db-tags.tld" prefix="database" %>
<database:connection
jdbcdriver=driver_name url=url_info
username=user_name password=password_info>
<database:query sql=select_sql pagesize=page_size current_page=current_page>
<database:column name=column_name />
</database:query>
</database:connection>
เมื่อ
connection คือแท็กสำหรับเปิดเส้นทางการติดต่อกับระบบฐานข้อมูล (แท็กประเภทเปิด-ปิด)
driver_name คือชื่อไดร์เวอร์
url_info คือข้อมูลเส้นทางเชื่อมโยง
user_name คือข้อมูลชื่อผู้ใช้
password_info คือข้อมูลรหัสผ่าน
query คือแท็กสำหรับส่งคำสั่ง SQL (แท็กประเภทเปิด-ปิด)
select_sql คือคำสั่ง SQL ประเภท SELECT สำหรับอ่านข้อมูลจากเทเบิล
page_size คือกำหนดจำนวนแถวการแสดงผลในหนึ่งหน้า
current_page คือระบุหน้าปัจจุบันที่ใช้ในการเรียกดูข้อมูล
column คือแท็กสำหรับอ่านข้อมูลจากผลลัพธ์ (แท็กประเภทแท็กเปล่า)
column_name ชื่อฟิลด์ที่ต้องการอ่านข้อมูล

รูปแบบการใช้งานแท็กการทำงานแบ่งหน้าเอกสาร
<database:pagenavigator sql=select_sql pagesize=page_size
currentpage=current_page uri=current_uri />
เมื่อ
current_uri คือข้อมูล URI หน้าปัจจุบันเพื่อให้สามารถอ้างอิงมาในหน้าเดิมได้
รูปแบบการใช้งานแท็กการส่งคำสั่ง SQL ดำเนินงาน
<database:execute sql=execute_sql />
เมื่อ
execute คือชื่อแท็กสำหรับดำเนินงานคำสั่ง SQL ประเภทจัดการข้อมูล
execute_sql คือคำสั่ง SQL ประเภท INSERT, UPDATE, DELETE, DROP
รูปแบบการใช้งานแท็กการทำงานสร้างช่องเลือกข้อความ (Combobox)
<select name=form_field_name>
<database:combolist sql =select_sql valuefield=value_field
showfield=show_field defaultvalue=default_value />
</select>
เมื่อ
combolist คือชื่อแท็กสำหรับสร้างรายการเลือกข้อความทำงานร่วมกับแท็ก select ในภาษา html
form_field_name คือชื่อฟิลด์สำหรับฟอร์ม html
value_field คือชื่อฟิลด์ที่เป็นส่วนกำหนดค่าในรายการเลือก
คือในแอตทริบิวต์ value ในแท็ก option ของภาษา html
show_field คือชื่อฟิลด์ที่ใช้แสดงในช่องรายการเลือก
คือข้อมูลระหว่างแท็ก option ของภาษา html
default_value คือข้อมูลเริ่มต้น ใช้แสดงเป็นค่าเริ่มต้นในการเลือก

เบื้องหลักการทำงานของแท็กต่างๆ คือสร้างเอกสาร TLD ที่ใช้สำหรับกำหนดชื่อแท็ก ชื่อแอตทริบิวต์
โดยสร้างไว้ในเอกสารชื่อ db-tags.tld บรรจุลงในเส้นทาง
C:Program FilesApache Tomcat 4.0webappsshoptagsdb-tags.tld
เอกสารดังกล่าวมีข้อกำหนดดังรายละเอียดต่อไปนี้
1 <?xml version="1.0" encoding="UTF-8" ?>
2
3 <!DOCTYPE taglib
4 PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
5 "http://java.sun.com/j2ee/dtd/web-jsptaglibrary_1_2.dtd">
6 
7
8 <taglib>
9 <tlibversion>1.0</tlibversion>
10 <jspversion>1.2</jspversion>
11 <shortname>ejp</shortname>
12 <info>A Tag Library from EJP</info>
13
14 <tag>
15 <name>connection</name>
16 <tagclass>DbTags.DbConnection</tagclass>
17 <bodycontent>JSP</bodycontent>
18 <info>Connection to DB through JDBC driver</info>
19 <attribute>
20 <name>jdbcdriver</name>
21 <required>true</required>
22 <rtexprvalue>true</rtexprvalue>
23 </attribute>
24 <attribute>
25 <name>url</name>
28 </attribute>
29 <attribute>
30 <name>username</name>
31 <required>false</required>
33 </attribute>
34 <attribute>
35 <name>password</name>
38 </attribute>
39 </tag>
40
41 <tag>
42 <name>execute</name>
43 <tagclass>DbTags.DbExecute</tagclass>
45 <info>Execute a SQL Statement</info>
46 <attribute>
47 <name>sql</name>
50 </attribute>
51 </tag>
52
53 <tag>
54 <name>query</name>
55 <tagclass>DbTags.DbQuery</tagclass>
57 <info>Query a SQL Statement</info>
58 <attribute>
59 <name>sql</name>
62 </attribute>

63 <attribute>
64 <name>pagesize</name>
67 </attribute>
68 <attribute>
69 <name>currentpage</name>
72 </attribute>
73 </tag>
74
75 <tag>
76 <name>pagenavigator</name>
77 <tagclass>DbTags.DbPageNavigator</tagclass>
79 <info>Show Index of Pages</info>
80 <attribute>
81 <name>sql</name>
84 </attribute>
85 <attribute>
86 <name>uri</name>
89 </attribute>
90 <attribute>
91 <name>pagesize</name>
94 </attribute>
95 <attribute>
96 <name>currentpage</name>
99 </attribute>
100 </tag>
101
102 <tag>
103 <name>column</name>
104 <tagclass>DbTags.DbColumn</tagclass>
105 <bodycontent>EMPTY</bodycontent>
106 <info>Listing all Fields</info>
107 <attribute>
108 <name>name</name>
111 </attribute>
112 </tag>
113
114 <tag>
115 <name>combolist</name>
116 <tagclass>DbTags.DbComboList</tagclass>
117 <bodycontent>EMPTY</bodycontent>
118 <info>List value in combo box</info>
119 <attribute>
120 <name>sql</name>
123 </attribute>
124 <attribute>
125 <name>valuefield</name>
128 </attribute>
129 <attribute>
130 <name>showfield</name>

133 </attribute>
134 <attribute>
135 <name>defaultfield</name>
138 </attribute>
139 </tag>
140
141 </taglib>
สำหรับตัวอย่างซอร์สโค้ดที่ดำเนินงานในแต่ละแท็กทำงานมีดังต่อไปนี้
แท็ก connection ทำงานจากคลาส DbConnection
เพื่อทำการโหลดไดร์เวอร์และทำการเปิดช่องทางการสื่อสารไปยังพื้นที่ใช้งานของระบบฐานข้อมูล
โดยอาศัยข้อมูลที่ผ่านมาทางแอตทริบิวต์
1 package DbTags;
2
3 import javax.servlet.jsp.*;
4 import javax.servlet.jsp.tagext.*;
5 import java.io.*;
6 import java.sql.*;
7
8 public class DbConnection extends BodyTagSupport {
9 private Connection conn;
10 private String driver;
11 private String url, user, password;
12
13 public void setJdbcdriver(String str) {
14 driver = str;
15 }
16 public void setUrl(String str) {
17 url = str;
18 }
19 public void setUsername(String str) {
20 user = str;
21 }
22 public void setPassword(String str) {
23 password = str;
24 }
25 public Connection getConnection() {
26 return conn;
27 }
28 public int doStartTag() {
29 try {
30 JspWriter out = pageContext.getOut();
31 Class.forName(driver); //
32 conn = DriverManager.getConnection(url, user, password); //
33 } catch (ClassNotFoundException ex) {
34 System.err.println(ex.getMessage());
35 } catch (SQLException ex) {
37 }
38 return EVAL_BODY_INCLUDE;
39 }
40 public int doEndTag() {
41 try {
43 if (conn!=null)
44 conn.close();
47 }
48 return EVAL_PAGE;
49 }
50 }

แท็ก query ทำงานจากคลาส DbQuery สำหรับการส่งคำสั่ง SQL ประเภท SELECT ไปยังฐานข้อมูล โดยวางซ้อนไว้ในแท็ก
connection อีกที ซึ่งแท็กนี้จะได้ผลลัพธ์จากการทำงานไว้ในในแท็กภายในอีกชั้นคือแท็ก column แท็ก query
ยังมีรูปแบบการแสดงผลเป็นหน้า โดยแบ่งแต่ละหน้าด้วยแอตทริบิวต์ pagesize และตำแหน่งหน้าปัจจุบันด้วยแอตทริบิวต์
currentpage
1 package DbTags;
2
5 import java.io.*;
7
8 public class DbQuery extends BodyTagSupport {
9 private String sql;
10 private Statement stmt;
11 private ResultSet rs;
12 private int recordcount = 0;
13 private int currentpage = 1;
14 private int pagesize=0;
15 private int recordcounter;
16
17 public void setSql(String str) {
18 sql = str;
19 }
20 public void setPagesize(String str) {
21 try {
22 pagesize = Integer.parseInt(str);
23 }
24 catch (NumberFormatException ex) {
25 pagesize = Integer.MAX_VALUE;
26 }
27 }
28 public void setCurrentpage(String str) {
29 try {
30 currentpage = Integer.parseInt(str);
31 }
33 currentpage = 1;
34 }
35 }
36 public ResultSet getResultSet() {
37 return rs;
38 }
40 try { // DbConnection
41 DbConnection parent = (DbConnection) findAncestorWithClass(this, DbConnection.class);
42 if (parent == null)
43 throw new JspTagException("Cannot found Connection to Database");
44 else {
45 stmt = parent.getConnection().createStatement();
46 rs = stmt.executeQuery(sql);
47 rs.last(); //
48 recordcount = rs.getRow(); //
49 if (currentpage<=1)
50 rs.first();
51 else {
52 int moveposition = ((currentpage-1) * pagesize) + 1;
53 rs.absolute(moveposition);
54 }
55 recordcounter = pagesize;
56 }
57 } catch (JspTagException ex) {
61 }
63 }

64 public int doAfterBody() { //
65 try {
66 if ((rs.next()) && ((--recordcounter)>0))
67 return EVAL_BODY_TAG; //
EVAL_BADY_TAG
68 else
69 return SKIP_BODY; // SKIP_BODY
72 }
73 return SKIP_BODY;
74 }
76 try {
78 if (rs!=null)
79 rs.close();
82 }
84 }
85 }
แท็ก column คือการอ่านผลลัพธ์จากฟิลด์ที่ได้รับจากแท็ก query เพื่อนำมาแสดงในเอกสาร
โดยการอ่านข้อมูลนี้เป็นการดึงผ่านเมธอด getString ซึ่งเป็นรูปแบบข้อความ โดยมีการทำงานตามซอร์สโค้ดดังนี้
1 package DbTags;
2
5 import java.io.*;
7 import EJP.ThaiUtilities;
8
9 public class DbColumn extends BodyTagSupport {
10 private String name;
11
12 public void setName(String str) {
13 name = str;
14 }
16 try {
17 DbQuery parent = (DbQuery) findAncestorWithClass(this, DbQuery.class);
21 ResultSet rs = parent.getResultSet();
22 out.print(rs.getString(name));
25 } catch (IOException ex) {
29 }
30 return SKIP_BODY;
31 }
32 }
แท็กต่อไปคือแท็ก pagenavigator ทำงานจากคลาส DbPageNavigator ซึ่งจะแสดงจำนวนหน้า และลิงก์เชื่อมโยง
ให้ผู้ใช้สามารถเคลื่อนย้านการอ่านข้อมูลไปตามหน้าต่างๆที่ถูกจัดแบ่งไว้ การใช้งานแท็กนี้ต้องผ่านคำสั่ง SQL
ที่เป็นคำสั่งเดียวกับที่ใช้ในแท็ก query
1 package DbTags;
2
5 import java.io.*;

7
8 public class DbPageNavigator extends BodyTagSupport {
11 private ResultSet rs;
12 private String uri;
13 private int recordcount = 0;
14 private int currentpage = 0;
15 private int pagesize=0;
16
18 sql = str;
19 }
20 public void setPagesize(String str) {
21 try {
22 pagesize = Integer.parseInt(str);
23 }
25 pagesize = Integer.MAX_VALUE;
26 }
27 }
28 public void setCurrentpage(String str) {
29 try {
30 currentpage = Integer.parseInt(str);
31 }
33 currentpage = 1;
34 }
35 }
36 public void setUri(String str) {
37 uri = str;
38 }
39 private String changeCurrentPageString(String s, int page) { //
currentpage
40 StringBuffer str = new StringBuffer(s);
41 String word = "currentpage=";
42 int startdigit; int a = 0;
43 startdigit = s.indexOf(word) + word.length() ;
44 if ((a < 10) && (startdigit<=s.length()) && (Character.isDigit(s.charAt(startdigit)))) {
45 str = str.deleteCharAt(startdigit);
46 s = new String(str);
47 startdigit = s.indexOf(word) + word.length() ;
48 a++;
49 }
50 str.insert(startdigit, page);
51 return str.toString();
52 }
54 try {
58 else {
61 rs = stmt.executeQuery(sql);
62 rs.last();
63 recordcount = rs.getRow();
64 //
65 int lastpage = recordcount / pagesize;
66 if ((recordcount % pagesize) > 0.0)
67 lastpage++;
68 if (lastpage>1) { //
69 if (currentpage==1)
70 out.print(" ");
71 else
72 out.print("<A HREF='" + changeCurrentPageString(uri + " ", currentpage-1) +
"'> </A>");
73 for (int i=1; i<=lastpage; i++) {

74 if (i!=currentpage) {
75 uri = changeCurrentPageString(uri + " ", i);
76 out.print(" : <A HREF='" + uri + "'>" + i + "</A>");
77 }
78 else { out.print(" : <B>" + i + "</B>"); }
79 }
80 if (currentpage==lastpage)
81 out.print(" : ");
82 else
83 out.print(" : <A HREF='" + changeCurrentPageString(uri + " ", currentpage + 1) + "'> </A>");
84 }
85 }
92 }
94 }
95 }
แท็ก execute ทำงานโดยอาศัยคลาส DbExecute เพื่อกระทำกรณีคำสั่ง SQL อยู่ในจำพวกการจัดการโครงสร้างต่างๆ เช่น
การเพิ่มข้อมูล การเปลี่ยนแปลงข้อมูล การลบข้อมูล รวมถึงการสร้างเทเบิล การเปลี่ยนแปลงเทเบิล และการลบเทเบิลออกจากระบบ
ด้วยคำสั่ง UPDATE, INSERT, DELETE, DROP, CREATE, ALTER เป็นต้น
1 package DbTags;
2
5 import java.io.*;
7
8 public class DbExecute extends BodyTagSupport {
11 private int row;
12
14 sql = str;
15 }
17 try {
21 else {
23 row = stmt.executeUpdate(sql);
24 }
29 }
31 }
33 try {
35 if (row==0)
36 out.print(" ");
37 else
38 out.print(" ");
41 }

43 }
44 }
นอกจากนี้แล้วยังมีแท็กอีกหนึ่งแท็กที่ช่วยในการที่ถูกใช้สำหรับการดำเนินงานกับฟอร์มประเภทเลือกค่า (Combo Box)
ที่จะส่งรายการข้อมูล และการกำหนดค่าเริ่มต้นของข้อมูล นั่นคือแท็ก combolist ซึ่งดำเนินงานด้วยคลาส DbComboList
โดยมีแอตทริบิวต์ sql ที่รับคำสั่ง SQL ในแบบ SELECT แอตทริบิวต์ showfield, valuefield และ defaultvalue
คือข้อมูลบอกชื่อฟิลด์สำหรับแสดงค่า ฟิลด์สำหรับกำหนดค่า และกำหนดข้อมูลเริ่มต้นให้กับกล่องเลือกค่า
1 package DbTags;
2
5 import java.io.*;
8
9 public class DbComboList extends BodyTagSupport {
11 private String showfield;
12 private String valuefield;
13 private String defaultfield;
14
16 sql = str;
17 }
18 public void setShowfield(String str) {
19 showfield = str;
20 }
21 public void setValuefield(String str) {
22 valuefield = str;
23 }
24 public void setDefaultfield(String str) {
25 defaultfield = str;
26 }
28 try {
32 else {
33 Statement stmt = parent.getConnection().createStatement();
34 ResultSet rs = stmt.executeQuery(sql);
36 String defaultvalue="";
37 DbQuery column = (DbQuery) findAncestorWithClass(this, DbQuery.class);
38 if (column!=null)
39 defaultvalue = column.getResultSet().getString(defaultfield);
40 while (rs.next()) {
41 String show = rs.getString(showfield);
42 String value = rs.getString(valuefield);
43 if (value.equals(defaultvalue))
44 out.println("<option value='" + value + "' selected>" + show+ "</option>");
45 else
46 out.println("<option value='" + value + "'>" + show+ "</option>");
47 }
48 rs.close();
49 }
56 }
58 }
59 }

คลาสทำงานเกี่ยวกับเซสชั่น
คลาสที่สนับสนุนการทำงานต่อไปนี้เป็นคลาสที่ถูกใช้งานเมื่อมีการหยิบสินค้าจากผู้ซื้อ ซึ่งจะเก็บรหัสสินค้า ชื่อสินค้า
ราคาขาย จำนวน เพื่อใช้ในการแสดงรายงานสรุป
จนถึงขั้นตอนสุดท้ายคือเก็บลงสู่ฐานข้อมูลหลังจากได้รับการยืนยันคำสั่งซื้อจากลูกค้า โดยแบบการทำงานออกเป็น 2 คลาสคือ
ProductItem และ Cart ในแพกเกจ ShoppingCart
คลาส ProductItem ทำหน้าที่เก็บรายละเอียดสินค้า คือ รหัส จำนวนการสั่งซื้อ ราคาขาย และชื่อสินค้า ดังมีรายละเอียดดังนี้
1 package ShoppingCart;
2
3 public class ProductItem {
4 public int id; //
5 public byte qty; //
6 public double sale; //
7 public String title; //
8 ProductItem(int p_id, byte p_qty, double p_sale, String p_title) {
9 id = p_id;
10 qty = p_qty;
11 sale = p_sale;
12 title = p_title;
13 }
14 }
คลาส Cart ทำหน้าที่เก็บรายการสินค้าลงในตัวแปรแบบ Vector ที่สามารถเพิ่ม ลบ
หรือเปลี่ยนแปลงรายการสินค้าจากอินสแตน์ของ ProdcutItem ดังมีรายละเอียดดังนี้
1 package ShoppingCart;
2
3 import java.util.*;
4
5 public class Cart {
6 protected Vector this_cart = new Vector();
7
8 public void addProductItem(int p_id, byte p_qty, double p_sale, String p_title) { //
Vector
9 if (p_qty<=0)
10 removeProductItem(p_id);
11 else
12 if (!updateProductItem(p_id, p_qty))
13 this_cart.addElement(new ProductItem(p_id, p_qty, p_sale, p_title));
14 }
15 public void removeProductItem(int p_id) { // Vector id p_id
16 ProductItem item;
17 for (int i=0;i<this_cart.size();i++) { //
18 item = (ProductItem)this_cart.elementAt(i);
19 if (item.id == p_id)
20 this_cart.removeElementAt(i);
21 }
22 }
23 public boolean updateProductItem(int p_id, byte p_qty) { // Vector qty
p_qty
24 ProductItem item;
25 for (int i=0;i<this_cart.size();i++) { //
26 item = (ProductItem)this_cart.elementAt(i);
27 System.err.println(item.id + ":" + p_id);
28 if (item.id == p_id) {
29 item.qty = p_qty;
30 return true;
31 }
32 }
33 return false;
34 }
35 public Vector getCart() { // Vector
36 return this_cart;
37 }
38 }

เอกสาร Style Shet
ในการแสดงผลของเอกสารต่างๆ มีการกำหนดรูปแบบการแสดงผลด้วยเอกสาร Style Sheet เพื่อให้มีลูกเล่นในการแสดงผล
และให้แต่ละหน้ามีการแสดงที่เป็นรูปแบบเดียวกันทั้งหมด จึงมีการสร้างเอกสาร CSS ดังมีรูปแบบต่อไปนี้
body { background-color: #FFFFD9 }
table { border: #0033FF; border-top-width: thin; border-right-width: thin;
border-bottom-width: thin; border-left-width: thin}
th { font-family: Tahoma, "MS Sans Serif", "Microsoft Sans Serif";
font-weight: bolder; color: #333333; background-color: #B7DBFF; font-size: 14px}
td { font-family: Tahoma, "MS Serif", "MS Sans Serif"; font-size: 14px; color: #333333}
.keyfield { font-family: Tahoma, "MS Serif", "MS Sans Serif"; font-size: 12px;
font-weight: bold; color: #CC0000; text-align: center}
.pagenav { font-family: Tahoma, "MS Serif", "MS Sans Serif"; color: #000066;
text-decoration: none; font-size: 12px; background-color: #EEEEEE}
.discount { color: #FF0000; text-decoration: line-through}
เอกสาร CSS นี้บรรจุไว้ในไฟล์ classicstyle.css ในเส้นทางเริ่มต้นของเว็บแอปพลิเคชั่น shop คือ
C:Program FilesApache Tomcat 4.0webappsshopclassicstyle.css
คลาส DbUtilities
คลาสนี้สร้างขึ้นเพื่อทำงานในการสร้างรูปแบบคำสั่ง SQL ประเภท INSERT, DELETE, UPDATE
โดยพิจารณาจากข้อมูลฟอร์มที่ได้รับผ่านมาทางตัวแปร request
ซึ่งการใช้งานผู้ใช้ต้องตั้งชื่อช่องกรอกข้อมูลให้สอดคล้องกับชื่อฟิลด์ในเทเบิล โดยมีรูปแบบดังนี้
หากชื่อฟิลด์เป็นประเภท ตัวเลข ชื่อ Price ควรตั้งชื่อช่องกรอกข้อมูลเป็น COL_INT_Price
หากชื่อฟิลด์เป็นประเภท ข้อความ ชื่อ Name ควรตั้งชื่อช่องกรอกข้อมูลเป็น COL_STR_Name
ซอร์สโค้ดที่ทำงานนี้บรรจุในไฟล์ DbUtilities.java ดังนี้
1 package EJP;
2
3 import java.io.*;
4 import java.util.*;
5 import javax.servlet.http.*;
7
8 public class DbUtilities {
9
10 public static String getDeleteString(HttpServletRequest request, String table) {
11 StringBuffer SQL = new StringBuffer("DELETE FROM " + table + " WHERE ");
12 StringBuffer fields = new StringBuffer();
13 StringBuffer values = new StringBuffer();
14 Enumeration enum = request.getParameterNames();
15 while (enum.hasMoreElements()) {
16 String paramName = (String)enum.nextElement();
17 if (paramName.startsWith("COL_KEY")) {
18 fields.append(paramName.substring(8));
19 values.append(request.getParameter(paramName));
20 }
21 }
22 SQL.append(fields.toString() + " = " + values.toString());
23 return SQL.toString();
24 }
25
26 public static String getUpdateString(HttpServletRequest request, String table) {
27 StringBuffer SQL = new StringBuffer("UPDATE " + table + " SET ");

29 StringBuffer keyfield = new StringBuffer();
30
34 if (paramName.startsWith("COL_KEY")) {
35 keyfield.append(paramName.substring(8));
36 keyfield.append("=");
37 keyfield.append(request.getParameter(paramName));
38 }
39 else if (paramName.startsWith("COL_")) {
41 fields.append(" = ");
42 if (paramName.substring(4, 7).equals("STR"))
43 fields.append("'");
44 fields.append(ThaiUtilities.Unicode2ASCII(request.getParameter(paramName)));
46 fields.append("'");
47 fields.append(",");
48 }
49 }
50 if (fields.length()>0)
51 fields.deleteCharAt(fields.length()-1);
52 SQL.append(fields.toString() + " WHERE " + keyfield.toString());
54
55 }
56
57 public static String getInsertString(HttpServletRequest request, String table) {
58 StringBuffer SQL = new StringBuffer("INSERT INTO " + table);
60 StringBuffer values = new StringBuffer();
64 String fieldName;
65 if (paramName.startsWith("COL_")) {
67 fields.append(",");
69 values.append("'");
70 values.append(ThaiUtilities.Unicode2ASCII(request.getParameter(paramName)));
72 values.append("'");
73 values.append(",");
74 }
75 }
76 if (fields.length()>0)
77 fields.deleteCharAt(fields.length()-1);
78 if (values.length()>0)
79 values.deleteCharAt(values.length()-1);
80 SQL.append("(" + fields.toString() + ")");
81 SQL.append(" VALUES(" + values.toString() + ")");
83 }
84 }
หมายเหตุ คลาส DbUtilities สนับสนุนการทำงานกรณีที่เป็นชนิดตัวเลข และข้อความ หากชนิดข้อมูลนอกเหนือจากนี้เช่น Boolean
หรือ Date, Time สามารถแก้ไขได้ตามความต้องการ
6. ส่วนใช้งานเพื่อบริหารข้อมูล
ส่วนนี้ใช้งานโดยผู้บริหาร นั้นคือสามารถกรอกข้อมูลรายชื่อสินค้าเพิ่มเติม กำหนดราคาขาย
พร้อมทั้งตรวจสอบการสั่งซื้อสินค้าจากคำสั่งซื้อที่เกิดขึ้น การจัดสร้างส่วนนี้เป็นการนำเอาแท็กไลบรารี่มาทำงานรวมกับเอกสาร JSP

โดยมีการกล่าวถึงส่วนติดต่อกับผู้ใช้ผ่านทาง JDBC เพื่อเข้าถึงข้อมูลในเทเบิล และจัดการข้อมูลภายในเทเบิลได้
ซึ่งก่อนที่จะกล่าวถึงรายละเอียดลองมาทำความเข้าใจกับโครงสร้างไดเร็กทรอรี่เพื่อใช้เก็บเอกสาร JSP
และหน้าที่การทำงานของเอกสารที่จะสร้างขึ้นมาดูก่อน โดยกำหนดให้ไดเร็กทรอรี่ใช้งานบรรจุอยู่ในเส้นทางการทำงานย่อยคือ adm
โดยมีรายชื่อไฟล์และรูปแบบการทำงานดังต่อไปนี้
รูปแสดงการอ้างถึงแต่ละเอกสารในส่วนจัดการข้อมูล
ชื่อเอกสาร รายละเอียด
เส้นทางการวางเอกสาร C:Program FilesApache Tomcat 4.0webappsshopadm
menu.txt เอกสารที่บรรจุข้อมูลรายการเมนู ซึ่งมีด้วยกัน 4 เมนูคือ
รายการสั่งซื้อ ซึ่งอ้างไปยังเอกสาร dbOrders.jsp
รายชื่อสินค้า ซึ่งอ้างไปยังเอกสาร dbProducts.jsp
รายชื่อหมวดสินค้า ซึ่งอ้างไปยังเอกสาร dbCategories.jsp
รายชื่อยี่ห้อ ซึ่งอ้างไปยังเอกสาร dbBrands.jsp
รายชื่อหน่วยสินค้า ซึ่งอ้างไปยังเอกสาร dbUnits.jsp
dbOrders.jsp เอกสารจัดการข้อมูลคำสั่งซื้อของลูกค้า ที่รวบรวมคำสั่งซื้อทั้งหมดมาแสดง
และสามารถเปิดแสดงรายละเอียดสินค้าแต่ละคำสั่งซื้อของลูกค้าจากเอกสาร
dbOrderDetails.jsp
dbOrderDetails.jsp เอกสารแสดงรายละเอียดรายการสินค้าในคำสั่งซื้อของลูกค้า
dbProducts.jsp เอกสารแสดงรายละเอียดของสินค้าที่มีไว้จัดจำหน่าย
admdbOrders.jsp
admdbProducts.jsp
admdbBrands.jsp
admdbCategories.jsp
dbexecuteaddrecord.jsp
dbexecuteupdaterecord.jsp
admdbOrderDetails.jsp
admdbUnits.jsp
เปิดเอกสารในหน้าต่างใหม่
ลบ หรือเปลี่ยนแปลงข้อมูล
เพิ่มข้อมูลใหม่
admmenu.txt
บรรจุลงใน (Include)

dbCategories.jsp เอกสารแสดงรายละเอียดของหมวดสินค้าที่จัดจำหน่วย
dbBrands.jsp เอกสารแสดงรายชื่อยี่ห้อสินค้า
dbUnits.jsp เอกสารแสดงหน่วยนับที่ใช้ของสินค้า
เอกสาร menu.txt มีรายละเอียดดังนี้
1 <p><a href="dbOrders.jsp?currentpage=1&pagesize=10"> </a></p>
2 <p><a href="dbProducts.jsp?currentpage=1&pagesize=10"> </a></p>
3 <p><a href="dbCategories.jsp?currentpage=1&pagesize=10"> </a></p>
4 <p><a href="dbBrands.jsp?currentpage=1&pagesize=10"> </a></p>
5 <p><a href="dbUnits.jsp?currentpage=1&pagesize=10"> </a></p>
เอกสาร dbUnits.jsb มีรายละเอียดดังนี้
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <%@page contentType="text/html; charset=windows-874"%>
3 <%@page import="EJP.ThaiUtilities" %>
4 <%@taglib uri="../tags/db-tags.tld" prefix="database" %>
5 <%
6 String thispage = "dbUnits.jsp";
7 String tablename = "Units";
8 String SQL = "select * from units";
9
10 if ((request.getParameter("filter") != null) && (request.getParameter("filter").length()>0))
11 SQL = SQL + " WHERE Description LIKE '%" + ThaiUtilities.Unicode2ASCII(request.getParameter("filter") )+ "%'";
12 %>
13 <html>
14 <head><title>Unit Listing</title>
15 <link rel="stylesheet" href="../classicstyle.css" type="text/css">
16 </head>
17 <body>
18 <table width="100%" border="0" cellspacing="0" cellpadding="0">
19 <tr>
20 <td rowspan="2" width="20%" valign="top" align="center"> <p> </p> <%@ include file="menu.txt" %></td>
21 <td align="center" bgcolor="#333333" valign="middle">
22 <h3><font color="#FFFFFF"> </font></h3>
23 </td>
24 </tr>
25 <tr>
26 <td><BR>
27 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop'
28 username='' password=''>
29 <TABLE border='0' CELLSPACING='1' CELLPADDING='3' ALIGN='CENTER' >
30 <TR>
31 <TH> </TH><TH> *</TH><TH> </TH><TH></TH>
32 </TR>
33 <database:query sql='<%=SQL%>'
34 pagesize='<%=request.getParameter("pagesize")%>'
35 currentpage='<%=request.getParameter("currentpage")%>'>
36 <FORM METHOD='POST' ACTION='../dbexecute/updaterecord.jsp'>
37 <TR>
38 <TD> <input type="checkbox" name="delrow" value="1"></TD>
39 <TD class="keyfield"> <database:column name='UnitID' />
40 <INPUT TYPE='HIDDEN' NAME='COL_KEY_UnitID' VALUE="<database:column name='UnitID' />">
41 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'>
42 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" +
43 request.getQueryString())%>'>
44 </TD>
45 <TD>
46 <INPUT TYPE='TEXT' NAME='COL_STR_Description'
47 VALUE="<database:column name='Description' />">
48 </TD>
49 <TD align="center"><INPUT TYPE='Submit' NAME='Update' VALUE=" "></TD>
50 </TR>
51 </FORM>
52 </database:query>
53 <TR>

54 <TD COLSPAN='4' ALIGN='CENTER' class="pagenav">
55 <database:pagenavigator sql='<%=SQL%>'
57 currentpage='<%=request.getParameter("currentpage")%>'
58 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>' />
59 </TD>
60 </TR>
61 </TABLE>
62 <HR align="center" size="1" width="80%">
63 <TABLE align="center" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF">
64 <TR>
65 <TH COLSPAN='4' > </TH>
66 </TR>
67 <FORM METHOD='GET' ACTION=''>
68 <TR>
69 <TD colspan="2" align="right"> </TD>
70 <TD>
71 <INPUT TYPE='TEXT' NAME='filter'>
72 <INPUT TYPE='HIDDEN' NAME='currentpage' VALUE='<%=request.getParameter("currentpage")%>'>
73 <INPUT TYPE='HIDDEN' NAME='pagesize' VALUE='<%=request.getParameter("pagesize")%>'>
74 </TD>
75 <TD align="center"><INPUT TYPE='Submit' NAME='Search' VALUE=" "></TD>
76 </TR>
77 <TR>
79 <TD colspan="2"><b> </b> </TD>
80 </TR>
81 </FORM>
82 <TR>
84 </TR>
85 <FORM METHOD='POST' ACTION='../dbexecute/addrecord.jsp'>
86 <TR>
87 <td colspan="2" align="right"> </td>
88 <td> <input type='TEXT' name='COL_INT_UnitID' size="3"></td>
89 <td></td>
90 </TR>
91 <TR>
92 <td colspan="2" align="right" >
96 </td>
97 <TD><INPUT TYPE='TEXT' NAME='COL_STR_Description'></TD>
98 <TD align="center"> <INPUT TYPE='Submit' NAME='Add' VALUE=" "></TD>
99 </TR>
100 </FORM>
101 </TABLE>
102 </database:connection>
103 </td>
104 </tr>
105 </table>
106 </body>
107 </html>
เอกสาร dbCategories.jsp มีรายละเอียดดังนี้
5 <%
6 String thispage = "dbCategories.jsp";
7 String tablename = "Categories";
8 String SQL = "select * from categories";
9
12 %>
13 <html>
14 <head><title>Category Listing</title>

16 </head>
17 <body>
19 <tr>
20 <td rowspan="2" width="20%" valign="top" align="center">
21 <p> </p><%@ include file="menu.txt" %>
22 </td>
25 </td>
26 </tr>
27 <tr>
28 <td><BR>
32 <TR>
34 </TR>
39 <TR>
40 <TD><input type="checkbox" name="delrow" value="1"></TD>
41 <TD class="keyfield"><database:column name='CategoryID' />
42 <INPUT TYPE='HIDDEN' NAME='COL_KEY_CategoryID'
43 VALUE="<database:column name='CategoryID' />">
44 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='Categories'>
47 </TD>
48 <TD>
51 </TD>
52 <TD align="center"><INPUT TYPE='Submit' NAME='Update' VALUE=" "></TD>
53 </TR>
54 </FORM>
56 <TR>
61 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>'/>
62 </TD>
63 </TR>
64 </TABLE>
67 <TR> <TH COLSPAN='4' > </TH></TR>
69 <TR> <TD colspan="2" align="right"> </TD>
70 <TD>
74 </TD>
76 </TR>
77 <TR>
78 <TD></TD>
79 <TD colspan="2"><b> </b> </TD>
80 </TR>
81 </FORM>
82 <TR>
84 </TR>

86 <TR>
88 <td><input type='TEXT' name='COL_INT_CategoryID' size="3"></td>
89 <td></td>
90 </TR>
91 <TR>
96 </td>
98 <TD align="center"><INPUT TYPE='Submit' NAME='Add' VALUE=" "></TD>
99 </TR>
100 </FORM>
101 </TABLE>
103 </td>
104 </tr>
105 </table>
106 </body>
107 </html>
เอกสาร dbBrands.jsp มีรายละเอียดดังนี้
5 <%
6 String thispage = "dbBrands.jsp";
7 String tablename = "Brands";
8 String SQL = "select * from Brands";
9
12 if ((request.getParameter("order") != null) && (request.getParameter("order").length()>0))
13 SQL = SQL + " ORDER BY BrandID" + ThaiUtilities.Unicode2ASCII(request.getParameter("order") )+ " DESC";
14 %>
15 <html>
16 <head><title>Brand Name Listing</title>
18 </head>
19 <body>
21 <tr>
24 </td>
27 </td>
28 </tr>
29 <tr>
30 <td><BR>
34 <TR>
36 </TR>
41 <TR>
43 <TD class="keyfield"><database:column name='BrandID' />
44 <INPUT TYPE='HIDDEN' NAME='COL_KEY_BrandID'
45 VALUE="<database:column name='BrandID' />">

49 </TD>
50 <TD>
53 </TD>
54 <TD align="center">
55 <INPUT TYPE='Submit' NAME='Update' VALUE=" ">
56 </TD>
57 </TR>
58 </FORM>
60 <TR>
66 </TD>
67 </TR>
68 </TABLE>
71 <TR>
73 </TR>
75 <TR>
77 <TD>
81 </TD>
83 </TR>
84 <TR>
85 <TD colspan="2"></TD>
86 <TD colspan="2"><b> </b> </TD>
87 </TR>
88 </FORM>
89 <TR>
91 </TR>
93 <TR>
95 <td><input type='TEXT' name='COL_INT_BrandID' size="3"></td>
96 <td></td>
97 </TR>
98 <TR>
102 request.getQueryString())%>'> </td>
104 <TD align="center"><INPUT TYPE='Submit' NAME='Add' VALUE=" "></TD>
105 </TR>
106 </FORM>
107 </TABLE>
109 </td>
110 </tr>
111 </table>
112 </body>
113 </html>
เอกสาร dbProducts.jsp มีรายละเอียดดังนี้

5 <%
6 String thispage = "dbProducts.jsp";
7 String tablename = "Products";
8 String SQL = "select * from Products";
9
11 SQL = SQL + " WHERE Title LIKE '%" + ThaiUtilities.Unicode2ASCII(request.getParameter("filter") )+ "%'";
12 %>
13 <html>
14 <head><title>Brand Name Listing</title>
16 </head>
17 <body>
19 <tr>
22 </td>
25 </td>
26 </tr>
27 <tr>
28 <td><BR>
32 <TR>
33 <TH> </TH><TH> *</TH><TH> </TH><TH> </TH>
34 <TH> </TH><TH> </TH><TH> </TH>
35 </TR>
40 <TR>
42 <TD class="keyfield"> <database:column name='ProductID' />
43 <INPUT TYPE='HIDDEN' NAME='COL_KEY_ProductID'
44 VALUE="<database:column name='ProductID' />">
48 </TD>
49 <TD>
50 <INPUT TYPE='TEXT' NAME='COL_STR_Title'
51 VALUE="<database:column name='Title' />" size="20">
52 </TD>
53 <TD>
54 <select name="COL_INT_CategoryID">
55 <database:combolist sql ='select * from categories' valuefield='CategoryID'
56 showfield='Description' defaultfield='CategoryID' />
57 </select>
58 </TD>
60 <select name="COL_INT_BrandID">
61 <database:combolist sql ='select * from brands' valuefield='BrandID'
62 showfield='Description' defaultfield='BrandID' />
63 </select>
64 </TD>
65 <TD rowspan="2" valign="top">
66 <textarea name="COL_STR_Description" cols="30" rows="5">
67 <database:column name='Description' />
68 </textarea>
69 </TD>

71 <select name="COL_INT_UnitID">
72 <database:combolist sql ='select * from units' valuefield='UnitID'
73 showfield='Description' defaultfield='UnitID' />
74 </select>
75 </TD>
76 </TR>
77 <TR>
78 <TD></TD>
79 <TD nowrap colspan="4" align="right" valign="top">
80 <table border="0" cellspacing="0" cellpadding="2" align="right">
81 <tr>
82 <td>
83 <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#003300">
84 <tr>
85 <td align="center" bgcolor="#FFFFFF">
86 <img src="../images/<database:column name='ProductID' />tiny.gif"></td>
87 </tr>
88 </table>
89 </td>
90 <td nowrap align="right" valign="top"><b><font color="#000099">
91 <input type='TEXT' name='COL_DBL_Price'
92 value="<database:column name='Price' />" size="10"> <br>
93 </font></b><b><font color="#990000">
94 <input type='TEXT' name='COL_DBL_Sale'
95 value="<database:column name='Sale' />" size="10"> </font></b>
96 </td>
97 </tr>
98 </table>
99 </TD>
100 <TD><input type='Submit' name='Update' value=" "></TD>
101 </TR>
102 </FORM>
104 <TR>
110 </TD>
111 </TR>
112 </TABLE>
115 <TR><TH COLSPAN='4' > </TH></TR>
117 <TR>
119 <TD>
123 </TD>
125 </TR>
126 <TR>
128 <TD colspan="2"><b> </b> </TD>
129 </TR>
130 </FORM>
131 <TR>
133 </TR>
135 <TR>
137 <td><input type='TEXT' name='COL_INT_ProductID' size="3"></td>
138 <td>
139 <input type='HIDDEN' name='TableName' value='<%=tablename%>'>
140 <input type='HIDDEN' name='returnpage' value='<%=("../adm/" + thispage + "?" +

142 </td>
143 </TR>
144 <TR>
145 <td colspan="2" align="right" > </td>
146 <TD><input type='TEXT' name='COL_STR_Title' size="20"></TD>
147 <TD></TD>
148 </TR>
149 <TR>
151 <TD>
152 <select name="COL_INT_CategoryID">
153 <database:combolist sql ='select * from categories'
154 valuefield='CategoryID' showfield='Description' />
155 </select>
156 </TD>
157 <TD></TD>
158 </TR>
159 <TR>
161 <TD>
162 <select name="COL_INT_BrandID">
163 <database:combolist sql ='select * from brands'
164 valuefield='BrandID' showfield='Description' />
165 </select>
166 </TD>
167 <TD></TD>
168 </TR>
169 <TR>
170 <td colspan="2" align="right" valign="top" > </td>
171 <TD colspan="2">
172 <textarea name="COL_STR_Description" cols="30" rows="5"></textarea>
173 </TD>
174 </TR>
175 <TR>
177 <TD><input type='TEXT' name='COL_INT_Price' size="10"> </TD>
178 <TD></TD>
179 </TR>
180 <TR>
182 <TD><input type='TEXT' name='COL_INT_Sale' size="10"> </TD>
183 <TD></TD>
184 </TR>
185 <TR>
187 <TD>
188 <select name="COL_INT_UnitID">
189 <database:combolist sql ='select * from units'
190 valuefield='UnitID' showfield='Description' />
191 </select>
192 </TD>
193 <TD align="center"><input type='Submit' name='Add' value=" "></TD>
194 </TR>
195 </FORM>
196 </TABLE>
198 </td>
199 </tr>
200 </table>
201 </body>
202 </html>
เอกสาร dbOrders.jsp มีรายละเอียดดังนี้
5 <%
6 String thispage = "dbOrders.jsp";

Javacentrix com chap11-1

Recommended

Recommended

More Related Content

Similar to Javacentrix com chap11-1

Similar to Javacentrix com chap11-1 (8)

More from Theeravaj Tum

More from Theeravaj Tum (20)

Javacentrix com chap11-1