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) นามสกุล

Email 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 Files\mySQL ดังนั้นโปรแกรมจะอยู่ที่

C:\Program Files\mySQL\bin\MySqlManager.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 Files\Apache 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 Files\Apache Tomcat 4.0\webapps\shop\lib\mm.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 Files\Apache Tomcat 4.0\webapps\shop\tags\db-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> 26 <required>true</required> 27 <rtexprvalue>true</rtexprvalue> 28 </attribute> 29 <attribute> 30 <name>username</name> 31 <required>false</required> 32 <rtexprvalue>true</rtexprvalue> 33 </attribute> 34 <attribute> 35 <name>password</name> 36 <required>false</required> 37 <rtexprvalue>true</rtexprvalue> 38 </attribute> 39 </tag> 40 41 <tag> 42 <name>execute</name> 43 <tagclass>DbTags.DbExecute</tagclass> 44 <bodycontent>JSP</bodycontent> 45 <info>Execute a SQL Statement</info> 46 <attribute> 47 <name>sql</name> 48 <required>true</required> 49 <rtexprvalue>true</rtexprvalue> 50 </attribute> 51 </tag> 52 53 <tag> 54 <name>query</name> 55 <tagclass>DbTags.DbQuery</tagclass> 56 <bodycontent>JSP</bodycontent> 57 <info>Query a SQL Statement</info> 58 <attribute> 59 <name>sql</name> 60 <required>true</required> 61 <rtexprvalue>true</rtexprvalue> 62 </attribute>

63 <attribute> 64 <name>pagesize</name> 65 <required>false</required> 66 <rtexprvalue>true</rtexprvalue> 67 </attribute> 68 <attribute> 69 <name>currentpage</name> 70 <required>false</required> 71 <rtexprvalue>true</rtexprvalue> 72 </attribute> 73 </tag> 74 75 <tag> 76 <name>pagenavigator</name> 77 <tagclass>DbTags.DbPageNavigator</tagclass> 78 <bodycontent>JSP</bodycontent> 79 <info>Show Index of Pages</info> 80 <attribute> 81 <name>sql</name> 82 <required>true</required> 83 <rtexprvalue>true</rtexprvalue> 84 </attribute> 85 <attribute> 86 <name>uri</name> 87 <required>false</required> 88 <rtexprvalue>true</rtexprvalue> 89 </attribute> 90 <attribute> 91 <name>pagesize</name> 92 <required>false</required> 93 <rtexprvalue>true</rtexprvalue> 94 </attribute> 95 <attribute> 96 <name>currentpage</name> 97 <required>false</required> 98 <rtexprvalue>true</rtexprvalue> 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> 109 <required>true</required> 110 <rtexprvalue>true</rtexprvalue> 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> 121 <required>true</required> 122 <rtexprvalue>true</rtexprvalue> 123 </attribute> 124 <attribute> 125 <name>valuefield</name> 126 <required>true</required> 127 <rtexprvalue>true</rtexprvalue> 128 </attribute> 129 <attribute> 130 <name>showfield</name> 131 <required>true</required> 132 <rtexprvalue>true</rtexprvalue>

133 </attribute> 134 <attribute> 135 <name>defaultfield</name> 136 <required>false</required> 137 <rtexprvalue>true</rtexprvalue> 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) { 36 System.err.println(ex.getMessage()); 37 } 38 return EVAL_BODY_INCLUDE; 39 } 40 public int doEndTag() { 41 try { 42 JspWriter out = pageContext.getOut(); 43 if (conn!=null) 44 conn.close(); 45 } catch (SQLException ex) { 46 System.err.println(ex.getMessage()); 47 } 48 return EVAL_PAGE; 49 } 50 }

แท็ก query ทำงานจากคลาส DbQuery สำหรับการส่งคำสั่ง SQL ประเภท SELECT ไปยังฐานข้อมูล โดยวางซ้อนไว้ในแท็ก connection อีกที ซึ่งแท็กนี้จะได้ผลลัพธ์จากการทำงานไว้ในในแท็กภายในอีกชั้นคือแท็ก column แท็ก query

ยังมีรูปแบบการแสดงผลเป็นหน้า โดยแบ่งแต่ละหน้าด้วยแอตทริบิวต์ pagesize และตำแหน่งหน้าปัจจุบันด้วยแอตทริบิวต์ currentpage 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 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 } 32 catch (NumberFormatException ex) { 33 currentpage = 1; 34 } 35 } 36 public ResultSet getResultSet() { 37 return rs; 38 } 39 public int doStartTag() { 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) { 58 System.err.println(ex.getMessage()); 59 } catch (SQLException ex) { 60 System.err.println(ex.getMessage()); 61 } 62 return EVAL_BODY_INCLUDE; 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 �� 70 } catch (SQLException ex) { 71 System.err.println(ex.getMessage()); 72 } 73 return SKIP_BODY; 74 } 75 public int doEndTag() { 76 try { 77 JspWriter out = pageContext.getOut(); 78 if (rs!=null) 79 rs.close(); 80 } catch (SQLException ex) { 81 System.err.println(ex.getMessage()); 82 } 83 return EVAL_PAGE; 84 } 85 }

แท็ก column คือการอ่านผลลัพธ์จากฟิลด์ที่ได้รับจากแท็ก query เพื่อนำมาแสดงในเอกสาร โดยการอ่านข้อมูลนี้เป็นการดึงผ่านเมธอด getString ซึ่งเป็นรูปแบบข้อความ โดยมีการทำงานตามซอร์สโค้ดดังนี้ 1 package DbTags; 2 3 import javax.servlet.jsp.*; 4 import javax.servlet.jsp.tagext.*; 5 import java.io.*; 6 import java.sql.*; 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 } 15 public int doStartTag() { 16 try { 17 DbQuery parent = (DbQuery) findAncestorWithClass(this, DbQuery.class); 18 if (parent == null) 19 throw new JspTagException("Cannot found Connection to Database"); 20 JspWriter out = pageContext.getOut(); 21 ResultSet rs = parent.getResultSet(); 22 out.print(rs.getString(name)); 23 } catch (SQLException ex) { 24 System.err.println(ex.getMessage()); 25 } catch (IOException ex) { 26 System.err.println(ex.getMessage()); 27 } catch (JspTagException ex) { 28 System.err.println(ex.getMessage()); 29 } 30 return SKIP_BODY; 31 } 32 }

แท็กต่อไปคือแท็ก pagenavigator ทำงานจากคลาส DbPageNavigator ซึ่งจะแสดงจำนวนหน้า และลิงก์เชื่อมโยง ให้ผู้ใช้สามารถเคลื่อนย้านการอ่านข้อมูลไปตามหน้าต่างๆที่ถูกจัดแบ่งไว้ การใช้งานแท็กนี้ต้องผ่านคำสั่ง SQL ที่เป็นคำสั่งเดียวกับที่ใช้ในแท็ก query 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 DbPageNavigator extends BodyTagSupport { 9 private String sql; 10 private Statement stmt; 11 private ResultSet rs; 12 private String uri; 13 private int recordcount = 0; 14 private int currentpage = 0; 15 private int pagesize=0; 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 } 32 catch (NumberFormatException ex) { 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 } 53 public int doStartTag() { 54 try { 55 DbConnection parent = (DbConnection) findAncestorWithClass(this, DbConnection.class); 56 if (parent == null) 57 throw new JspTagException("Cannot found Connection to Database"); 58 else { 59 JspWriter out = pageContext.getOut(); 60 stmt = parent.getConnection().createStatement(); 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 } 86 } catch (JspTagException ex) { 87 System.err.println(ex.getMessage()); 88 } catch (IOException ex) { 89 System.err.println(ex.getMessage()); 90 } catch (SQLException ex) { 91 System.err.println(ex.getMessage()); 92 } 93 return EVAL_BODY_INCLUDE; 94 } 95 }

แท็ก execute ทำงานโดยอาศัยคลาส DbExecute เพื่อกระทำกรณีคำสั่ง SQL อยู่ในจำพวกการจัดการโครงสร้างต่างๆ เช่น การเพิ่มข้อมูล การเปลี่ยนแปลงข้อมูล การลบข้อมูล รวมถึงการสร้างเทเบิล การเปลี่ยนแปลงเทเบิล และการลบเทเบิลออกจากระบบ ด้วยคำสั่ง UPDATE, INSERT, DELETE, DROP, CREATE, ALTER เป็นต้น 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 DbExecute extends BodyTagSupport { 9 private String sql; 10 private Statement stmt; 11 private int row; 12 13 public void setSql(String str) { 14 sql = str; 15 } 16 public int doStartTag() { 17 try { 18 DbConnection parent = (DbConnection) findAncestorWithClass(this, DbConnection.class); 19 if (parent == null) 20 throw new JspTagException("Cannot found Connection to Database"); 21 else { 22 stmt = parent.getConnection().createStatement(); 23 row = stmt.executeUpdate(sql); 24 } 25 } catch (JspTagException ex) { 26 System.err.println(ex.getMessage()); 27 } catch (SQLException ex) { 28 System.err.println(ex.getMessage()); 29 } 30 return EVAL_BODY_INCLUDE; 31 } 32 public int doEndTag() { 33 try { 34 JspWriter out = pageContext.getOut(); 35 if (row==0) 36 out.print("��"); 37 else 38 out.print("��"); 39 } catch (IOException ex) { 40 System.err.println(ex.getMessage()); 41 } 42 return EVAL_PAGE;

43 } 44 }

นอกจากนี้แล้วยังมีแท็กอีกหนึ่งแท็กที่ช่วยในการที่ถูกใช้สำหรับการดำเนินงานกับฟอร์มประเภทเลือกค่า (Combo Box)

ที่จะส่งรายการข้อมูล และการกำหนดค่าเริ่มต้นของข้อมูล นั่นคือแท็ก combolist ซึ่งดำเนินงานด้วยคลาส DbComboList

โดยมีแอตทริบิวต์ sql ที่รับคำสั่ง SQL ในแบบ SELECT แอตทริบิวต์ showfield, valuefield และ defaultvalue

คือข้อมูลบอกชื่อฟิลด์สำหรับแสดงค่า ฟิลด์สำหรับกำหนดค่า และกำหนดข้อมูลเริ่มต้นให้กับกล่องเลือกค่า 1 package DbTags; 2 3 import javax.servlet.jsp.*; 4 import javax.servlet.jsp.tagext.*; 5 import java.io.*; 6 import java.sql.*; 7 import EJP.ThaiUtilities; 8 9 public class DbComboList extends BodyTagSupport { 10 private String sql; 11 private String showfield; 12 private String valuefield; 13 private String defaultfield; 14 15 public void setSql(String str) { 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 } 27 public int doStartTag() { 28 try { 29 DbConnection parent = (DbConnection) findAncestorWithClass(this, DbConnection.class); 30 if (parent == null) 31 throw new JspTagException("Cannot found Connection to Database"); 32 else { 33 Statement stmt = parent.getConnection().createStatement(); 34 ResultSet rs = stmt.executeQuery(sql); 35 JspWriter out = pageContext.getOut(); 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 } 50 } catch (JspTagException ex) { 51 System.err.println(ex.getMessage()); 52 } catch (SQLException ex) { 53 System.err.println(ex.getMessage()); 54 } catch (IOException ex) { 55 System.err.println(ex.getMessage()); 56 } 57 return EVAL_BODY_INCLUDE; 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 Files\Apache Tomcat 4.0\webapps\shop\classicstyle.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.*; 6 import EJP.ThaiUtilities; 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 ");

28 StringBuffer fields = new StringBuffer(); 29 StringBuffer keyfield = new StringBuffer(); 30 31 Enumeration enum = request.getParameterNames(); 32 while (enum.hasMoreElements()) { 33 String paramName = (String)enum.nextElement(); 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_")) { 40 fields.append(paramName.substring(8)); 41 fields.append(" = "); 42 if (paramName.substring(4, 7).equals("STR")) 43 fields.append("'"); 44 fields.append(ThaiUtilities.Unicode2ASCII(request.getParameter(paramName))); 45 if (paramName.substring(4, 7).equals("STR")) 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()); 53 return SQL.toString(); 54 55 } 56 57 public static String getInsertString(HttpServletRequest request, String table) { 58 StringBuffer SQL = new StringBuffer("INSERT INTO " + table); 59 StringBuffer fields = new StringBuffer(); 60 StringBuffer values = new StringBuffer(); 61 Enumeration enum = request.getParameterNames(); 62 while (enum.hasMoreElements()) { 63 String paramName = (String)enum.nextElement(); 64 String fieldName; 65 if (paramName.startsWith("COL_")) { 66 fields.append(paramName.substring(8)); 67 fields.append(","); 68 if (paramName.substring(4, 7).equals("STR")) 69 values.append("'"); 70 values.append(ThaiUtilities.Unicode2ASCII(request.getParameter(paramName))); 71 if (paramName.substring(4, 7).equals("STR")) 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() + ")"); 82 return SQL.toString(); 83 } 84 }

หมายเหตุ คลาส DbUtilities สนับสนุนการทำงานกรณีที่เป็นชนิดตัวเลข และข้อความ หากชนิดข้อมูลนอกเหนือจากนี้เช่น Boolean

หรือ Date, Time สามารถแก้ไขได้ตามความต้องการ

6. ส่วนใช้งานเพื่อบริหารข้อมูล

ส่วนนี้ใช้งานโดยผู้บริหาร นั้นคือสามารถกรอกข้อมูลรายชื่อสินค้าเพิ่มเติม กำหนดราคาขาย พร้อมทั้งตรวจสอบการสั่งซื้อสินค้าจากคำสั่งซื้อที่เกิดขึ้น การจัดสร้างส่วนนี้เป็นการนำเอาแท็กไลบรารี่มาทำงานรวมกับเอกสาร JSP

โดยมีการกล่าวถึงส่วนติดต่อกับผู้ใช้ผ่านทาง JDBC เพื่อเข้าถึงข้อมูลในเทเบิล และจัดการข้อมูลภายในเทเบิลได้ ซึ่งก่อนที่จะกล่าวถึงรายละเอียดลองมาทำความเข้าใจกับโครงสร้างไดเร็กทรอรี่เพื่อใช้เก็บเอกสาร JSP

และหน้าที่การทำงานของเอกสารที่จะสร้างขึ้นมาดูก่อน โดยกำหนดให้ไดเร็กทรอรี่ใช้งานบรรจุอยู่ในเส้นทางการทำงานย่อยคือ adm

โดยมีรายชื่อไฟลแ์ละรูปแบบการทำงานดังต่อไปนี้

รูปแสดงการอ้างถึงแต่ละเอกสารในส่วนจัดการข้อมูล

ชื่อเอกสาร รายละเอียด

เส้นทางการวางเอกสาร C:\Program Files\Apache Tomcat 4.0\webapps\shop\adm

menu.txt เอกสารที่บรรจุข้อมูลรายการเมนู ซึ่งมีด้วยกัน 4 เมนูคือ

รายการสั่งซื้อ ซึ่งอ้างไปยังเอกสาร dbOrders.jsp

รายชื่อสินค้า ซึ่งอ้างไปยังเอกสาร dbProducts.jsp

รายชื่อหมวดสินค้า ซึ่งอ้างไปยังเอกสาร dbCategories.jsp

รายชื่อยี่ห้อ ซึ่งอ้างไปยังเอกสาร dbBrands.jsp

รายชื่อหน่วยสินค้า ซึ่งอ้างไปยังเอกสาร dbUnits.jsp

dbOrders.jsp เอกสารจัดการข้อมูลคำสั่งซื้อของลูกค้า ที่รวบรวมคำสั่งซื้อทั้งหมดมาแสดง และสามารถเปิดแสดงรายละเอียดสินค้าแต่ละคำสั่งซื้อของลูกค้าจากเอกสาร dbOrderDetails.jsp

dbOrderDetails.jsp เอกสารแสดงรายละเอียดรายการสินค้าในคำสั่งซื้อของลูกค้า

dbProducts.jsp เอกสารแสดงรายละเอียดของสินค้าที่มีไว้จัดจำหน่าย

adm\dbOrders.jsp

adm\dbProducts.jsp

adm\dbBrands.jsp

adm\dbCategories.jsp dbexecute\addrecord.jsp

dbexecute\updaterecord.jsp

adm\dbOrderDetails.jsp

adm\dbUnits.jsp

เปิดเอกสารในหน้าต่างใหม่ ลบ หรือเปลี่ยนแปลงข้อมูล เพิ่มข้อมูลใหม ่

adm\menu.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%>' 56 pagesize='<%=request.getParameter("pagesize")%>' 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> 78 <TD colspan="2" align="right"> </TD> 79 <TD colspan="2"><b>��</b> ��</TD> 80 </TR> 81 </FORM> 82 <TR> 83 <TH COLSPAN='4' > �� </TH> 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" > 93 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'> 94 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 95 request.getQueryString())%>'>�� 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 มีรายละเอียดดังนี้ 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 = "dbCategories.jsp"; 7 String tablename = "Categories"; 8 String SQL = "select * from categories"; 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>Category 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"> 21 <p> </p><%@ include file="menu.txt" %> 22 </td> 23 <td align="center" bgcolor="#333333" valign="middle"> 24 <h3><font color="#FFFFFF">��</font></h3> 25 </td> 26 </tr> 27 <tr> 28 <td><BR> 29 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 30 username='' password=''> 31 <TABLE border='0' CELLSPACING='1' CELLPADDING='3' ALIGN='CENTER' > 32 <TR> 33 <TH>��</TH><TH>��*</TH><TH>��</TH><TH></TH> 34 </TR> 35 <database:query sql='<%=SQL%>' 36 pagesize='<%=request.getParameter("pagesize")%>' 37 currentpage='<%=request.getParameter("currentpage")%>'> 38 <FORM METHOD='POST' ACTION='../dbexecute/updaterecord.jsp'> 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'> 45 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 46 request.getQueryString())%>'> 47 </TD> 48 <TD> 49 <INPUT TYPE='TEXT' NAME='COL_STR_Description' 50 VALUE="<database:column name='Description' />"> 51 </TD> 52 <TD align="center"><INPUT TYPE='Submit' NAME='Update' VALUE="��"></TD> 53 </TR> 54 </FORM> 55 </database:query> 56 <TR> 57 <TD COLSPAN='4' ALIGN='CENTER' class="pagenav"> 58 <database:pagenavigator sql='<%=SQL%>' 59 pagesize='<%=request.getParameter("pagesize")%>' 60 currentpage='<%=request.getParameter("currentpage")%>' 61 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>'/> 62 </TD> 63 </TR> 64 </TABLE> 65 <HR align="center" size="1" width="80%"> 66 <TABLE align="center" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF"> 67 <TR> <TH COLSPAN='4' > ��</TH></TR> 68 <FORM METHOD='GET' ACTION=''> 69 <TR> <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> 78 <TD></TD> 79 <TD colspan="2"><b>��</b> ��</TD> 80 </TR> 81 </FORM> 82 <TR> 83 <TH COLSPAN='4' > �� </TH> 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_CategoryID' size="3"></td> 89 <td></td> 90 </TR> 91 <TR> 92 <td colspan="2" align="right" > 93 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'> 94 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 95 request.getQueryString())%>'> �� 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>

เอกสาร dbBrands.jsp มีรายละเอียดดังนี้ 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 = "dbBrands.jsp"; 7 String tablename = "Brands"; 8 String SQL = "select * from Brands"; 9 10 if ((request.getParameter("filter") != null) && (request.getParameter("filter").length()>0)) 11 SQL = SQL + " WHERE Description LIKE '%" + ThaiUtilities.Unicode2ASCII(request.getParameter("filter") )+ "%'"; 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> 17 <link rel="stylesheet" href="../classicstyle.css" type="text/css"> 18 </head> 19 <body> 20 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 21 <tr> 22 <td rowspan="2" width="20%" valign="top" align="center"> 23 <p> </p><%@ include file="menu.txt" %> 24 </td> 25 <td align="center" bgcolor="#333333" valign="middle"> 26 <h3><font color="#FFFFFF">��</font></h3> 27 </td> 28 </tr> 29 <tr> 30 <td><BR> 31 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 32 username='' password=''> 33 <TABLE border='0' CELLSPACING='1' CELLPADDING='3' ALIGN='CENTER' > 34 <TR> 35 <TH>��</TH><TH>��*</TH><TH>��</TH><TH></TH> 36 </TR> 37 <database:query sql='<%=SQL%>' 38 pagesize='<%=request.getParameter("pagesize")%>' 39 currentpage='<%=request.getParameter("currentpage")%>'> 40 <FORM METHOD='POST' ACTION='../dbexecute/updaterecord.jsp'> 41 <TR> 42 <TD><input type="checkbox" name="delrow" value="1"></TD> 43 <TD class="keyfield"><database:column name='BrandID' /> 44 <INPUT TYPE='HIDDEN' NAME='COL_KEY_BrandID' 45 VALUE="<database:column name='BrandID' />">

46 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'> 47 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 48 request.getQueryString())%>'> 49 </TD> 50 <TD> 51 <INPUT TYPE='TEXT' NAME='COL_STR_Description' 52 VALUE="<database:column name='Description' />"> 53 </TD> 54 <TD align="center"> 55 <INPUT TYPE='Submit' NAME='Update' VALUE="��"> 56 </TD> 57 </TR> 58 </FORM> 59 </database:query> 60 <TR> 61 <TD COLSPAN='4' ALIGN='CENTER' class="pagenav"> 62 <database:pagenavigator sql='<%=SQL%>' 63 pagesize='<%=request.getParameter("pagesize")%>' 64 currentpage='<%=request.getParameter("currentpage")%>' 65 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>' /> 66 </TD> 67 </TR> 68 </TABLE> 69 <HR align="center" size="1" width="80%"> 70 <TABLE align="center" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF"> 71 <TR> 72 <TH COLSPAN='4' > ��</TH> 73 </TR> 74 <FORM METHOD='GET' ACTION=''> 75 <TR> 76 <TD colspan="2" align="right">��</TD> 77 <TD> 78 <INPUT TYPE='TEXT' NAME='filter'> 79 <INPUT TYPE='HIDDEN' NAME='currentpage' VALUE='<%=request.getParameter("currentpage")%>'> 80 <INPUT TYPE='HIDDEN' NAME='pagesize' VALUE='<%=request.getParameter("pagesize")%>'> 81 </TD> 82 <TD align="center"><INPUT TYPE='Submit' NAME='Search' VALUE="��"></TD> 83 </TR> 84 <TR> 85 <TD colspan="2"></TD> 86 <TD colspan="2"><b>��</b> ��</TD> 87 </TR> 88 </FORM> 89 <TR> 90 <TH COLSPAN='4' > �� </TH> 91 </TR> 92 <FORM METHOD='POST' ACTION='../dbexecute/addrecord.jsp'> 93 <TR> 94 <td colspan="2" align="right">��</td> 95 <td><input type='TEXT' name='COL_INT_BrandID' size="3"></td> 96 <td></td> 97 </TR> 98 <TR> 99 <td colspan="2" align="right" > 100 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'> 101 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 102 request.getQueryString())%>'> ��</td> 103 <TD><INPUT TYPE='TEXT' NAME='COL_STR_Description'></TD> 104 <TD align="center"><INPUT TYPE='Submit' NAME='Add' VALUE="��"></TD> 105 </TR> 106 </FORM> 107 </TABLE> 108 </database:connection> 109 </td> 110 </tr> 111 </table> 112 </body> 113 </html>

เอกสาร dbProducts.jsp มีรายละเอียดดังนี้

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 = "dbProducts.jsp"; 7 String tablename = "Products"; 8 String SQL = "select * from Products"; 9 10 if ((request.getParameter("filter") != null) && (request.getParameter("filter").length()>0)) 11 SQL = SQL + " WHERE Title LIKE '%" + ThaiUtilities.Unicode2ASCII(request.getParameter("filter") )+ "%'"; 12 %> 13 <html> 14 <head><title>Brand Name 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"> 21 <p> </p><%@ include file="menu.txt" %> 22 </td> 23 <td align="center" bgcolor="#333333" valign="middle"> 24 <h3><font color="#FFFFFF">��</font></h3> 25 </td> 26 </tr> 27 <tr> 28 <td><BR> 29 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 30 username='' password=''> 31 <TABLE border='0' CELLSPACING='1' CELLPADDING='2' ALIGN='CENTER' > 32 <TR> 33 <TH>��</TH><TH>��*</TH><TH>��</TH><TH>��</TH> 34 <TH>��</TH><TH>��</TH><TH>��</TH> 35 </TR> 36 <database:query sql='<%=SQL%>' 37 pagesize='<%=request.getParameter("pagesize")%>' 38 currentpage='<%=request.getParameter("currentpage")%>'> 39 <FORM METHOD='POST' ACTION='../dbexecute/updaterecord.jsp'> 40 <TR> 41 <TD><input type="checkbox" name="delrow" value="1"></TD> 42 <TD class="keyfield"> <database:column name='ProductID' /> 43 <INPUT TYPE='HIDDEN' NAME='COL_KEY_ProductID' 44 VALUE="<database:column name='ProductID' />"> 45 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'> 46 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 47 request.getQueryString())%>'> 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> 59 <TD align="center"> 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> 70 <TD align="center">

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> 103 </database:query> 104 <TR> 105 <TD COLSPAN='7' ALIGN='CENTER' class="pagenav"> 106 <database:pagenavigator sql='<%=SQL%>' 107 pagesize='<%=request.getParameter("pagesize")%>' 108 currentpage='<%=request.getParameter("currentpage")%>' 109 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>' /> 110 </TD> 111 </TR> 112 </TABLE> 113 <HR align="center" size="1" width="80%"> 114 <TABLE align="center" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF"> 115 <TR><TH COLSPAN='4' > ��</TH></TR> 116 <FORM METHOD='GET' ACTION=''> 117 <TR> 118 <TD colspan="2" align="right">��</TD> 119 <TD> 120 <INPUT TYPE='TEXT' NAME='filter'> 121 <INPUT TYPE='HIDDEN' NAME='currentpage' VALUE='<%=request.getParameter("currentpage")%>'> 122 <INPUT TYPE='HIDDEN' NAME='pagesize' VALUE='<%=request.getParameter("pagesize")%>'> 123 </TD> 124 <TD align="center"><INPUT TYPE='Submit' NAME='Search' VALUE="��"></TD> 125 </TR> 126 <TR> 127 <TD colspan="2" align="right"> </TD> 128 <TD colspan="2"><b>��</b> ��</TD> 129 </TR> 130 </FORM> 131 <TR> 132 <TH COLSPAN='4' > �� </TH> 133 </TR> 134 <FORM METHOD='POST' ACTION='../dbexecute/addrecord.jsp'> 135 <TR> 136 <td colspan="2" align="right">��</td> 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 + "?" +

141 request.getQueryString())%>'> 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> 150 <td colspan="2" align="right" >��</td> 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> 160 <td colspan="2" align="right" >��</td> 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> 176 <td colspan="2" align="right" >��</td> 177 <TD><input type='TEXT' name='COL_INT_Price' size="10"> ��</TD> 178 <TD></TD> 179 </TR> 180 <TR> 181 <td colspan="2" align="right" >��</td> 182 <TD><input type='TEXT' name='COL_INT_Sale' size="10"> ��</TD> 183 <TD></TD> 184 </TR> 185 <TR> 186 <td colspan="2" align="right" >��</td> 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> 197 </database:connection> 198 </td> 199 </tr> 200 </table> 201 </body> 202 </html>

เอกสาร dbOrders.jsp มีรายละเอียดดังนี้ 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 = "dbOrders.jsp";

7 String tablename = "Orders"; 8 String SQL = "select OrderID, OnDate, Name, Surname, Email, AddressNo, Street, Tumbol, Amphor, Province, Postal"; 9 SQL = SQL + " from Orders"; 10 11 if ((request.getParameter("filter") != null) && (request.getParameter("filter").length()>0)) 12 SQL = SQL + " WHERE Name LIKE '%" + ThaiUtilities.Unicode2ASCII(request.getParameter("filter") )+ "%'"; 13 SQL = SQL + " ORDER BY OnDate DESC "; 14 %> 15 <script language="JavaScript"> 16  21 </script> 22 <html> 23 <head><title>Orders</title> 24 <link rel="stylesheet" href="../classicstyle.css" type="text/css"> 25 </head> 26 <body> 27 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 28 <tr> 29 <td rowspan="2" width="20%" valign="top" align="center"> 30 <p> </p><%@ include file="menu.txt" %> 31 </td> 32 <td align="center" bgcolor="#333333" valign="middle"> 33 <h3><font color="#FFFFFF">��</font></h3> 34 </td> 35 </tr> 36 <tr> 37 <td><BR> 38 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 39 username='' password=''> 40 <TABLE border='0' CELLSPACING='1' CELLPADDING='3' ALIGN='CENTER' > 41 <TR> 42

<TH>��</TH><TH>��*</TH><TH>��</TH><TH>��</TH><TH>E-mail</TH> 43 </TR> 44 <database:query sql='<%=SQL%>' 45 pagesize='<%=request.getParameter("pagesize")%>' 46 currentpage='<%=request.getParameter("currentpage")%>'> 47 <FORM METHOD='POST' ACTION='./../dbexecute/updaterecord.jsp'> 48 <TR> 49 <TD><input type="checkbox" name="delrow" value="1"></TD> 50 <TD class="keyfield"> <database:column name='OrderID' /> 51 <INPUT TYPE='HIDDEN' NAME='COL_KEY_OrderID' 52 VALUE="<database:column name='OrderID' />"> 53 <INPUT TYPE='HIDDEN' NAME='TableName' VALUE='<%=tablename%>'> 54 <INPUT TYPE='HIDDEN' NAME='returnpage' VALUE='<%=("../adm/" + thispage + "?" + 55 request.getQueryString())%>'> 56 </TD> 57 <TD> <database:column name='OnDate' /> </TD> 58 <TD> <database:column name='Name' /> <database:column name='Surname' /></TD> 59 <TD><database:column name='Email' /></TD> 60 <TD> <a href="#" onclick="JavaScript:openWin( 61 'dbOrderDetails.jsp?pagesize=20&orderid=<database:column name='OrderID' />', 650, 600)"> 62 <img src="../images/print.gif" width="25" height="22" border="0"></a></TD> 63 <TD align="center"><INPUT TYPE='Submit' NAME='Update' VALUE="��"></TD> 64 </TR> 65 </FORM> 66 </database:query> 67 <TR> 68 <TD COLSPAN='12' ALIGN='CENTER' class="pagenav"> 69 <database:pagenavigator sql='<%=SQL%>' 70 pagesize='<%=request.getParameter("pagesize")%>' 71 currentpage='<%=request.getParameter("currentpage")%>' 72 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>' /> 73 </TD> 74 </TR> 75 </TABLE>

76 <HR align="center" size="1" width="80%"> 77 <TABLE align="center" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF"> 78 <TR> 79 <TH COLSPAN='4' > ��</TH> 80 </TR> 81 <FORM METHOD='GET' ACTION=''> 82 <TR> 83 <TD colspan="2" align="right">��</TD> 84 <TD> 85 <INPUT TYPE='TEXT' NAME='filter'> 86 <INPUT TYPE='HIDDEN' NAME='currentpage' VALUE='<%=request.getParameter("currentpage")%>'> 87 <INPUT TYPE='HIDDEN' NAME='pagesize' VALUE='<%=request.getParameter("pagesize")%>'> 88 </TD> 89 <TD align="center"><INPUT TYPE='Submit' NAME='Search' VALUE="��"></TD> 90 </TR> 91 <TR> 92 <TD colspan="2"></TD> 93 <TD colspan="2"><b>��</b> ��</TD> 94 </TR> 95 </FORM> 96 </TABLE> 97 </database:connection> 98 </td> 99 </tr> 100 </table> 101 </body> 102 </html>

javacentrix com chap11-1

Documents