ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน

1. เว็บไซต์ออกแบบกรอบโทรศัพท์
Case Design
โดย
1. นางสาว ผกาวดี บุญประคม รหัส 51009519
2. นางสาว จิรพันธ์ อุดมสุขสันติ รหัส 51013948
โครงงานนี้เป็ นส่วนหนึ่งของการศึกษาตามหลักสูตรวิทยาศาสตร์บณฑิต
ั
ภาควิชาเทคโนโลยีสารสนเทศและการสื่อสาร คณะเทคโนโลยีสารสนเทศ
มหาวิทยาลัยศรี ปทุม
พ.ศ. 2555

2. ก
มหาวิทยาลัยศรี ปทุม
คณะเทคโนโลยีสารสนเทศ
โครงงานของ
1. นางสาว ผกาวดี บุญประคม รหัส 51009519
2. นางสาว จิรพันธ์ อุดมสุขสันติ รหัส 51013948
เรื่ อง
เว็บไซต์ออกแบบกรอบโทรศัพท์
(Website Case Design)
ได้รับตรวจสอบและอนุมติให้เป็ นส่วนหนึ่งของการศึกษาตาม
ั
หลักสูตรวิทยาศาสตร์บณฑิต สาขาเทคโนโลยีสารสนเทศและการสื่อสาร
ั
เมื่อวันที่ 23 เดือน กันยายน พ.ศ. 2555
ประธานกรรมการ ________________________________
( )
กรรมการ ________________________________
( )
อาจารย์ที่ปรึ กษา ________________________________
( )
ประธานกรรมการ ________________________________
( )

3. ข
บทคัดย่ อ เว็บไซต์ออกแบบกรอบโทรศัพท์
(Website Case Design , จานวน 73 หน้า)
โดย 1. นางสาว ผกาวดี บุญประคม 51009519
2. นางสาว จิรพันธ์ อุดมสุขสันติ 51013948
อาจารย์ ทปรึกษา
ี่ ดร. วสุวรรธน์ พงศ์ขจร
เว็บไซต์น้ ี จดทาขึ้นมาเพื่อเป็ นตัวช่วยในการตัดสิ นใจเลือกซื้ อกรอบโทรศัพท์ โดยผูใช้งาน
ั ้
สามารถออกแบบกรอบโทรศัพท์ไ ด้ด้วยตนเอง กรอบโทรศัพท์ที่อ อกแบบเองจะไม่ซ้ ากับผูอื่ น และ
้
ผูใช้งานยังสามารถเลือกได้ตามต้องการ โดยทางเว็บไซต์ จะมีแพคเกจให้ผใช้งานได้เลือกเพื่อตามความ
้ ู้
เหมาะสมของราคาแพคเกจที่ทางเว็บไซต์ได้ต้ งไว้ หรื อผูใช้งานต้องการกรอบโทรศัพท์ที่ทางเว็บไซต์
ั ้
ได้จดทาไว้แล้ว ผูใช้งานสามารถสั่งซื้ อได้โดยทันทีซ่ ึ งเป็ นอี กทางเลื อ กหนึ่ ง..................................
ั ้
การพัฒ นาเว็บ ไซต์น้ ี แบ่ ง ออกเป็ นสองส่ ว นหลัก ๆ คื อ 1. ส่ ว นของการออกแบบกรอบ
โทรศัพท์ 2. ส่ วนของสิ นค้าแนะนา ในการพัฒนานั้นเลือกใช้เทคโนโลยี Flash เป็ นเทคโนโลยีหลักที่
ใช้ในการออกแบบกรอบโทรศัพท์ เพือที่ทางเว็บไซต์จะนามาให้ผใช้งานได้ออกแบบกรอบโทรศัพท์ได้
่ ู้
ด้วยตนเอง ทางเว็บไซต์มีการรองรับรุ่ นยอดนิ ยมของโทรศัพท์เพื่อตอบสนองความต้องการของผูท่ีชื่น
้
ชอบเทคโนโลยีใหม่ๆ ส่วนของสินค้าแนะนา ทางเว็บไซต์ได้จดทาสินค้าขึ้นมาไว้แล้วเพื่อความรวดเร็ ว
ั
ในการเลื อ กซื้ อ...................................................... ...........................................
ผลที่ จ ะได้รั บของการท าโครงงานพัฒ นาเว็บ ไซต์อ อกแบบกรอบโทรศัพ ท์ เพื่อ เป็ น อี ก
ทางเลือกหนึ่งในการตัดสินใจ เลือกซื้อกรอบโทรศัพท์

4. ค
กิตติกรรมประกาศ
การจัดทาโครงงานเว็บไซต์ออกแบบกรอบโทรศัพท์เป็ นโครางงานที่ตองใช้โปรแกรมหลาย
้
โปรแกรมและ โปรแกรมแต่ ล ะ โปรแกรมที่ เ ลื อ กใช้มี ค วามซับ ซ้อ นในการที่ จ ะใช้ใ ห้ไ ด้อ ย่า งมี
ประสิทธิภาพ ทาให้เว็บไซต์ตองมีการจัดการปรับปรุ งและพัฒนาประสิทธิภาพให้เพิมขึ้น ในการทางาน
้ ่
ได้มีบุคคลผูมีพระคุณหลายๆ ท่าน ที่ได้ให้คาปรึ กษา เสนอแนวทางในการแก้ไขปั ญหา, การออกแบบ
้
ระบบต่างๆ เพื่อให้การพัฒนาเว็บไซต์สาเร็ จได้ ทางคณะผูจดทาจึงขอขอบพระคุณบุคคลต่างๆ มา ณ
้ั
โอกาสนี้ ........................ ........................ ........................ ........................ ........................+
ขอขอบพระคุณ อาจารย์ ดร. วสุ วรรธน์ พงศ์ขจร ที่ยอมเสี ยสละเวลาอันมีค่าของท่านในการ
ให้คาปรึ กษาเกี่ยวกับโครงงานนี้ท้งหมดตั้งแต่ การออกแบบระบบ, การวิเคราะห์และแก้ไขปั ญหาต่างๆ
ั
ตลอดจนงานเอกสารต่างๆ ด้วยดีเสมอ..........................................................................................
ขอบพระคุ ณ บิ ด า มารดา ที่ ใ ห้ โ อกาสในการท าโครงงานพร้ อ มทั้ง คอยช่ ว ยเหลื อ และ
เอื้ อ อ านวยในทุ ก ๆ ด้า นเป็ นอย่า งดี เ สมอมา........................................................................
สุ ดท้ายนี้ ขอขอบพระคุณทุกท่านที่ได้ให้ความช่วยเหลือผ่านทางเว็บบอร์ดทางอินเตอร์เน็ ต
หลายๆ ท่านที่ไม่ได้กล่าวถึงมา ณ ที่น้ ีดวย
้

5. ง
คานา
ในปั จจุบนการซื้อขายสิ นค้าและการบริ การต่างๆผ่านระบบเครื อข่ายคอมพิวเตอร์น้ ัน ได้รับ
ั
ความนิยมเป็ นอย่างมาก เพราะช่วยประหยัดเวลาและค่าใช้จ่ายในการเดินทางไปซื้ อสิ นค้าและบริ การ
ั ้
ต่างๆ ทาให้เกิดความสะดวกสบายและรวดเร็วให้กบผูที่สนใจ สามารถสั่งซื้ อสิ นค้าหรื อบริ การได้ทนที
ั
โดยไม่ ต ้อ งเสี ย เวลาไปซื้ อ ตามร้ า นซื้ อทั่ว ไป.................................. ...... ....................
ดังนั้นผูจดทาโครงงานเว็บไซต์ออกแบบกรอบโทรศัพท์ จึงได้จดทาโครงการนี้ ข้ ึน เพื่อให้ผูที่
้ั ั ้
สนใจเกี่ยวกับกรอบโทรศัพท์มือถือ สามารถออกแบบตกแต่งกรอบโทรศัพท์แบบที่ตนเองชอบได้ เลือก
ได้ท้งรุ่ นโทรศัพท์มือถือ สีของกรอบโทรศัพท์ และลายที่ตองการตกแต่งได้...........................................
ั ้
หากเอกสารประกอบโครงการนี้ มีขอผิดพลาดประการใด ทางคณะผูจดทาต้องขออภัยมา ณ
้ ้ั
โอกาสนี้ ด้วย........................................... ........................................... ..................................... ......
ค ณ ะ ผู ้ จั ด ท า
กั น ย า ย น 2555

6. จ
สาร บัญ
หน้ า
ใบอนุมติั ก
บทคัดย่อ ข
กิตติกรรมประกาศ ค
คานา ง
สารบัญ จ
สารบัญรู ป ช
สารบัญตาราง ฎ
บทที่ 1 บทนา
1. 1 ความเป็ นมาและความสาคัญของปั ญหา 1
1.2 วัตถุประสงค์การศึกษา 1
1.3. ขอบเขตการศึกษา 1
1.4 นิยามศัพท์เฉพาะ 2
1.5 ประโยชน์ที่คาดว่าจะได้รับ 3
1.6 แผนการดาเนินงาน 4
1.7 เครื่ องมือที่คาดว่าจะต้องใช้ 5
บทที่ 2 เทคโนโลยีที่ใช้ในการศึกษาโครงงาน
2.1 เทคโนโลยีที่ใช้ 6
2.1.1 CSS (Cascading Style Sheets) 6
2.1.2 JavaScript 7
2.1.3 jQuery 8
2.1.4 Adobe Flash 9
2.1.5 Database (ฐานข้อมูล) 10
2.1.6 SQL 11
2.1.7 Ajax 11
2.1.8 PHP 12
2.1.9 HTML 12

7. ฉ
สารบัญ(ต่ อ)
หน้ า
บทที่ 3 การออกแบบระบบ
3.1 การออกแบบกระบวนการเก็บและใช้ขอมูล
้ 13
3.2 แผนภาพบริ บท (Context Diagram) 14
3.3 แผนภาพกระแสข้อมูลระบบ (Data Flow Diagram : DFD) 15
3.4 ผังงานระบบ (Flow Chart) 18
3.5 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิต้ ีและแอททิบิวต์ 27
3.6 ตารางข้อมูล (Data Table) 28
3.7 การออกแบบส่วนเชื่อมประสานกับผูใช้ (UserInterfaceDesign)
้ 34
บทที่ 4 การพัฒนาโปรแกรม
4.1 อุปกรณ์และซอฟแวร์ที่ใช้ 40
4.2 การทางานทั้งหมดของโปรแกรมมีกระบวนการทั้งหมดดังนี้ 42
4.3 การออกแบบส่วนเชื่อมประสานกับผูใช้ (User Interface Design)
้ 44
บทที่ 5 สรุ ปโครงงาน ปั ญหา และข้อเสนอแนะ
5.1 สรุ ปโครงงาน 53
5.2 ปั ญหาและอุปสรรคในการดาเนินงาน 53
5.3 ข้อเสนอแนะ 54
บรรณานุกรม 55
ภาคผนวก 56
ก คู่มือการใช้งาน 57
ข วิธีการติดตั้งโปรแกรม 65
ประวัติผจดทาโครงงาน
ู้ ั 73

8. ช
สารบัญรู ป
รู ปที่ หน้ า
2.1 แสดงตัวอย่าง CSS ที่ใช้ 6
2.2 แสดงตัวอย่าง Java Script ที่ใช้ 7
2.3 แสดงตัวอย่าง jQuery ที่ใช้ 8
2.4 แสดงตัวอย่างAdobe Flash ที่ใช้ 9
2.5 แสดงตัวอย่างฐานข้อมูล ที่ใช้ 10
2.6 แสดงตัวอย่าง SQL ที่ใช้ 11
2.7 แสดงตัวอย่าง AJAX ที่ใช้ 11
2.8 แสดงตัวอย่างภาษา PHP ที่ใช้ 12
2.9 แสดงตัวอย่าง HTML ที่ใช้ 12
3.1 แผนภาพการแสดงการทางานของ ผูใช้ทวไป สมาชิก และ ผูดูแลระบบ
้ ั่ ้ 13
3.2 แผนภาพบริ บท (Context Diagram) 14
3.3 แผนภาพบริ บท (Context Diagram) 15
3.4 แผนภาพกระแสข้อมูล (ของกระบวนการเข้าสู่ระบบ) 15
3.5 แผนภาพกระแสข้อมูล (ของกระบวนการสมัครสมาชิก) 16
3.6 แผนภาพกระแสข้อมูล (ของกระบวนการแก้ไขข้อมูลสมาชิก) 16
3.7 แผนภาพกระแสข้อมูล (ของกระบวนการสังซื้อสินค้า)
่ 16
3.8 แผนภาพกระแสข้อมูล (ของกระบวนการยกเลิกการสังซื้อ)
่ 16
3.9 แผนภาพกระแสข้อมูล (ของกระบวนข่าวสารของเว็บไซต์) 17
3.10 แผนภาพกระแสข้อมูล (ของกระบวนการออกแบบกรอบโทรศัพท์) 17
3.11 แผนภาพกระแสข้อมูล (ของกระบวนการแสดงความนิยมของเว็บไซต์) 17
3.12 แสดงผังงานของเว็บไซต์ออกแบบกรอบโทรศัพท์มือถือ 18
3.13 แสดงผังงานหน้าสมัครสมาชิก 19
3.14 แสดงผังงานตรวจสอบสถานะ 20
3.15 แสดงผังงานส่วนการทางานของสมาชิกประเภทลูกค้า 21

9. ซ
สารบัญรู ป (ต่ อ)
รู ปที่ หน้ า
3.16 แสดงผังงานส่วนการทางานของผูดูแลระบบ
้ 22
3.17 แสดงผังงานการสังซื้อสินค้า
่ 23
3.18 แสดงผังงานการสาธิตการออกแบบกรอบโทรศัพท์ 24
3.19 แสดงผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์ 25
3.20 แสดงผังงานหน้าแก้ไขข้อมูลสมาชิก 26
3.21 แสดงความสัมพันธ์ระหว่างเอนทิต้ ีและแอททิบิวต์ 27
3.22 แสดงตัวอย่างหน้าหลัก 34
3.23 แสดงตัวอย่างหน้าสมัครสมาชิก 35
3.24 แสดงตัวอย่างหน้าเข้าสู่ระบบ 36
3.25 แสดงตัวอย่างหน้าออกแบบกรอบโทรศัพท์ 37
3.26 แสดงตัวอย่างหน้าสังซื้อสินค้า
่ 38
3.27 แสดงตัวอย่างหน้าแสดงการสังซื้อสินค้า
่ 39
4.1 แสดงหน้าหลัก 45
4.2 แสดงหน้าสมัครสมาชิก 46
4.3 แสดงหน้าเข้าสู่ ระบบ 46
4.4 แสดงหน้าจอการยืนยันชื่อผูใช้ ที่ทาการเข้าระบบเรี ยบร้อยแล้ว
้ 47
4.5 แสดงหน้าแก้ไขข้อมูลส่วนตัว 47
4.6 แสดงหน้าสินค้า 48
4.7 แสดงหน้าแรกโปรโมชันข่าวสาร
่ 48
4.8 แสดงหน้าวิธีการสังซื้อสินค้า
่ 49
4.9 แสดงหน้าวิธีการชาระเงิน 49
4.10 แสดงหน้าการติดต่อ-สอบถาม 50

10. ฌ
สารบัญรู ป (ต่ อ)
รู ปที่ หน้ า
4.11 แสดงหน้าวิธีออกแบบกรอบโทรศัพท์ 50
4.12 แสดงหน้าออกแบบกรอบโทรศัพท์ 51
4.13 แสดงหน้ารายการสังซื้อ
่ 51
4.14 แสดงหน้าใบสังซื้อสินค้า
่ 52
4.15 แสดงหน้ายกเลิกรายการสังซื้อ
่ 52
ก.1 หน้าแรกของเว็บไซต์ 58
ก.2 แสดงหน้าสมัครสมาชิก 58
ก.3 แสดงหน้าเข้าสู่ระบบ 59
ก.4 แสดงหน้าเข้าสู่ระบบเรี ยบร้อยแล้ว 59
ก.5 แสดงหน้าแก้ไขข้อมูลส่วนตัว 60
ก.6 แสดงหน้าสินค้า 60
ก.7 แสดงหน้าวิธีออกแบบกรอบโทรศัพท์ 61
ก.8 แสดงหน้าวิธีออกแบบกรอบโทรศัพท์ 61
ก.9 แสดงหน้าออกแบบกรอบโทรศัพท์ 62
ก.10 แสดงหน้าออกแบบกรอบโทรศัพท์ 62
ก.11 แสดงหน้ารายการสังซื้อ
่ 63
ก.12 แสดงหน้ารายการสังซื้อเรี ยบร้อยแล้ว
่ 63
ก.13 แสดงหน้ายกเลิกรายการสังซื้อ
่ 64
ข.1 หน้าแรกของโปรแกรม Oracle10g 66
ข.2 หน้าสาระสาคัญของโปรแกรม Oracle10g 66
ข.3 โปรแกรม Oracle10g ทาการติดตั้ง 67
ข.4 แสดงการตั้งค่าโปรแกรม Oracle10g 67

11. ญ
สารบัญรู ป (ต่ อ)
รู ปที่ หน้ า
ข.5 แสดงหน้าจอสิ้นสุดการติดตั้งโปรแกรม 68
ข.6 แสดงหน้าการติดตั้งโปรแกรม AppServ 69
ข.7 License Agreement 69
ข.8 โฟลเดอร์ที่ติดตั้งโปรแกรม 70
ข.9 โปรแกรมย่อยที่ทาการติดตั้ง 70
ข.10 ตั้งค่า Server 71
ข.11 กาหนดรหัสผ่านฐานข้อมูล MySQL 71
ข.12 ติดตั้งโปรแกรม AppServ เสร็ จเรี ยบร้อย 72
ข.13 ติดตั้งโปรแกรม AppServ เสร็ จเรี ยบร้อย 72

12. ฎ
สารบัญตาราง
รู ปที่ หน้ า
1.1 ตารางแผนการดาเนินงาน 4
3.1 แสดงแฟ้ มสมาชิก 28
3.2 แสดงแฟ้ มข้อมูลสินค้า 29
3.3 แสดงแฟ้ มข้อมูล * 30
3.4 แสดงแฟ้ มข้อมูลดารสังซื้อ
่ 31
3.5 แสดงแฟ้ มรายการสั่งซื้อทั้งหมด 32
3.6 แสดงแฟ้ มสถิติความนิยมของเว็บไซต์ 32
3.7 แสดงแฟ้ มข้อมูลโปรโมชัน ่ 33
3.8 แสดง** 33
4.1 โปรแกรมที่ใช้ในการพัฒนาโครงงาน 41
4.2 แสดงกระบวนการทางานของ กระบวนการ 1.0 หน้าหลัก 42
4.3 แสดงกระบวนการทางานของ กระบวนการ 2.0 สมัครสมาชิก 42
4.4 แสดงกระบวนการทางานของ กระบวนการ 3.0 แก้ไขข้อมูลสมาชิก 42
4.5 แสดงกระบวนการทางานของ กระบวนการ 4.0 การสังซื้อสินค้า
่ 43
4.6 แสดงกระบวนการทางานของ กระบวนการ 5.0 ยกเลิกการสังซื้อสินค้า
่ 43
4.7 แสดงกระบวนการทางานของ กระบวนการ 6.0 ข่าวสารของเว็บไซต์ 43
4.8 แสดงกระบวนการทางานของ กระบวนการ 7.0 การออกแบบกรอบโทรศัพท์ 44
4.9 แสดงกระบวนการทางานของ กระบวนการ 8.0 การแสดงความนิยมของเว็บไซต์ 44

13. บทที่ 1
บทนา
1. 1 ความเป็ นมาและความสาคัญของปัญหา
ในปั จจุบน ถือ ว่าเวลาเป็ นสิ่ งสาคัญในชีวิตประจาวันของมนุ ษย์ การที่นาเอาการออกแบบ
ั
กรอบโทรศัพท์มือถือ มาให้เราดีไซน์เอง จะทาให้ประหยัดเวลา และเราสามารถเลือกเองได้ตามที่ใจเรา
ต้องการ เราจึงนาอินเตอร์เน็ตและเทคโนโลยีเข้ามาช่วยในด้านธุ รกิจการขายกรอบโทรศัพท์ผ่านบน
เว็บไซต์เพื่อดึ งดู ดลู กค้าและทาให้เกิ ดความสะดวกสบายและรวดเร็ วให้กับผูที่สนใจ สามารถสั่งซื้ อ ้
สินค้าได้ทนทีโดยไม่ตองเสียเวลาไปซื้อตามร้านซื้อทัวไป
ั ้ ่
การนาเทคโนโลยีอินเตอร์เน็ตเข้ามาช่วยในการจัดทาสื่ อโฆษณาในการนาเสนอโฆษณาของ
สินค้ากรอบโทรศัพท์เพือให้สินค้ามีความน่าสนใจและเป็ นจุดเด่นของทางร้านในการบริ การลูกค้าและ
่
สามารถตกแต่งกรอบโทรศัพท์ตามความต้องการของตนเองได้พร้อมผ่านหน้าเว็บไซต์ ออนไลน์ได้โดย
ใช้เทคโนโลยี Flash เข้ามาช่วยโดยทาให้เว็บไซต์เกิดความน่ าสนใจและดึ งดูดลูกค้าให้ เข้ามาทาการ
สั่ง ซื้ อ สิ น ค้าของทางเว็บ ไซต์ม ากขึ้ น ........................................ ............................................
.........................................................……….............………............………..........……………………
1.2 วัตถุประสงค์การศึกษา
1.2.1 เพือนามาช่วยในเรื่ องของความสะดวกรวดเร็ว เน้นเรื่ องการบริ การลูกค้า
่
1.2.2 เพือศึกษาออกแบบฐานข้อมูลการจัดเก็บสินค้าบนเว็บไซต์
่
1.2.3 เพือศึกษาและพัฒนาเว็บไซต์ขายกรอบโทรศัพท์ที่กาลังนิยมในปั จจุบน ให้มีความ
่ ั
น่าสนใจมากยิงขึ้น
่
1.3. ขอบเขตการศึกษา
1.3.1 ส่วนของผูใช้ทวไป
้ ั่
1.3.1.1 สามารถสมัครสมาชิกได้
1.3.1.2 สามารถออกแบบกรอบโทรศัพท์ได้ (สามารถเลือกรุ่ นโทรศัพท์ได้ , เลือกสีและ
ลายได้)
1.3.1.3 สามารถดูกรอบโทรศัพท์ตวอย่างได้
ั
1.3.1.4 สามารถดูสาธิตการออกแบบกรอบโทรศัพท์ได้

14. 2
1.3.1.5 สามารถกด Like แฟนเพจร้านและแสดงความเห็นเกี่ยวกับสินค้าได้
1.3.1.6 สามารถดูข่าวสารและโปรโมชันของร้านได้
่
1.3.2 ส่วนของสมาชิก
1.3.2.1 สามารถออกแบบกรอบโทรศัพท์ได้ (สามารถเลือกรุ่ นโทรศัพท์ได้ , เลือกสีและ
ลายได้)
1.3.2.2 สามารถดูกรอบโทรศัพท์ตวอย่างได้
ั
1.3.2.3 สามารถดูสาธิตการออกแบบกรอบโทรศัพท์ได้
1.3.2.4 สามารถสังซื้อสินค้าได้(แสดงใบเสร็จการสังซื้อ)และยกเลิกรายการสังซื้อได้
่ ่ ่
1.3.2.5 สามารถแก้ไขข้อมูลส่วนตัวได้
1.3.2.6 สามารถกด Like แฟนเพจร้านและแสดงความเห็นเกี่ยวกับสินค้าได้
่
1.3.2.7 สามารถดูขาวสารและโปรโมชันของร้านได้
่
1.3.3 ส่วนของผูดูแลระบบ
้
1.3.3.1 สามารถเพิม-ลบ สมาชิกได้
่
1.3.3.2 สามารถเพิม-ลบ แก้ไข สินค้าได้
่
1.3.3.3 สามารถตรวจรายการสังซื้อได้
่
1.4 นิยามศัพท์ เฉพาะ……………………………………………………………………………………
- Adobe Flash เป็ น โปรแกรมที่มีความสามารถในด้านการสร้างภาพเคลื่อนไหว (Animation)
ที่ได้รับความนิยมมากที่สุดในปั จจุบน ซึ่งได้พฒนาปรับปรุ งเครื่ องมือต่างๆ ให้มีความสามารถใช้งานได้
ั ั
สะดวก สามารถใช้ผ ลิ ตสื่ อ การสอนเชิ ง โต้ต อบ (Interactive), เกมส์, งานกราฟิ ก และสร้ า ง
ภาพเคลื่ อ นไหว หรื อ แม้แต่ ภาพยนตร์ การ์ ตูนเอนิ เ มชั่น ………..………………… …………………
- JavaScript เป็ นภาษา script ที่ใช้งานบนเว็บเพจต่างๆ ถูกสร้างขึ้นเพื่อทาให้เว็บเพจสามารถ
โต้ตอบกับผูใช้งานได้ดีข้ ึน ……………………………………………….……………………………
้
- jQuery เป็ น ไลบรารี ของโค้ดจาวาสคริ ปต์ ซึ่ งเป็ นส่ วนหนึ่ งของการสร้างเว็บไซต์ jQuery
ช่ ว ยให้เ ราเรี ย กเขีย นหรื อ ใช้ง านจาวาสคริ ปต์ และ Ajax ให้ง่ า ยขึ้ น ………..……………………
- PHP เป็ น ภาษาสคริ ปต์ที่ป ระมวลผลที่ฝั่งเซิ ร์ฟเวอร์ แล้ว ส่ งผลลัพ ธ์ไ ปแสดงผลที่ฝั่ ง
ไคลเอ็ น ต์ผ่ า นบราวเซอร์ ………………………… ……………………… …………………………
- Server Apache เป็ น ซอฟต์แวร์ สาหรับเปิ ดให้บริ การเซิ ร์ฟเวอร์บนโพรโทคอล HTTP โดย

15. 3
สามารถทางานได้บนหลายระบบปฏิบติการ……………………… ……………………… …………
ั
- MySQL เป็ น ระบบจัด การฐานข้อ มู ล เชิ ง สัม พัน ธ์ (Relational Database Management
System) โดยใช้ภาษา SQL แม้ว่า MySQL เป็ นซอฟต์แวร์ โอเพนซอร์ ส แต่แตกต่างจากซอฟต์แวร์
โอเพนซอร์สทัวไป โดยมีการพัฒนาภายใต้บริ ษท MySQL AB ในประเทศสวีเดน โดยจัดการ MySQL
่ ั
ทั้ง ในแบบที่ ใ ห้ ใ ช้ฟ รี และแบบที่ ใ ช้ใ นเชิ ง ธุ ร กิ จ …………………..………………………………
- Animation เป็ น การแสดงภาพอย่างเร็ ว ของชุดภาพนิ่ งแบบสองมิติ(2D) หรื อ เกิดจากการ
เปลี่ยนตาแหน่งของวัตถุ ที่เราอยากให้เคลื่อนที่ โดยใช้หลักภาพลวงตา ให้ดูเหมือนว่าภาพนิ่ งเหล่านั้น
มีการเคลื่อนไหว
1.5 ประโยชน์ ที่คาดว่ าจะได้ รับ
1.4.1 ทาให้ได้รับความรู ้ในการพัฒนาทางด้านการใช้โปรแกรม HTML
1.4.2 นาความรู ้ที่ได้ไปใช้เป็ นพื้นฐานในการปฏิบติงานหรื อการประกอบอาชีพได้
ั

16. 4
1.6 แผนการดาเนินงาน
ตารางแสดงแผนดาเนินการ
ลาดับ กิจกรรม ม.ค. ก.พ. มี.ค. เม.ย. พ.ค. มิ.ย. ก.ค. ส.ค. ก.ย.
1 ศึกษาแนวคิด ทฤษฎีและเอกสาร
ที่เกี่ยวข้อง
2 ศึกษาเทคโนโลยีที่จะใช้
3 การระบุปัญหา
4 การรวบรวมข้อมูลและการจัดการ
ข้อมูล
5 การวิเคราะห์ขอมูลหรื อการ
้
ออกแบบระบบและโปรแกรม
6 การสร้างตัวแบบหรื อการพัฒนา
โปรแกรม
7 ทดสอบติดตั้งระบบหรื อการ
ทดสอบตัวแบบ
8 จัดทาเอกสาร
หมายเหตุ หมายถึง ระยะเวลาดาเนินการ
ตารางที่ 1.1 ตารางแผนการดาเนินงาน

17. 5
1.7 เครื่องมือที่คาดว่ าจะต้ องใช้
1.7.1 อุปกรณ์คอมพิวเตอร์ที่ใช้ในการทาโครงงาน
1.7.1.1 Lenovo G460
1.7.1.2 4 GB DDR3
1.7.1.3 320 GB 5400 RPM
1.7.1.4 เครื่ องพิมพ์
1.7.2 โปรแกรมที่สงงานให้คอมพิวเตอร์ทางานที่ใช้ในการทาโครงงาน
ั่
1.7.2.1 ระบบปฏิบติการ Windows 7
ั
1.7.2.2 ฐานข้อมูล MySQL
1.7.2.3 Adobe Photoshop
1.7.2.4 Adobe Flash
1.7.2.5 โปรแกรม Microsoft word 2010
1.7.2.6 โปรแกรม Adobe Dreamweaver CS5
1.7.2.7 โปรแกรม Microsoft Office Powerpoint 2010
1.7.2.8 โปรแกรม Microsoft Office Visio 2010

18. บทที่ 2
เทคโนโลยีที่ใช้ ในการศึกษาโครงงาน
2.1 เทคโนโลยีที่ใช้ …………………………………………………..……………………………………
2.1.1 CSS (Cascading Style Sheets) คือ ชุดคาสังที่ใช้สาหรับการกาหนดการแสดงผลข้อมูล
่
หน้าเว็บเพ็จ เป็ นมาตรฐานหนึ่ งของ W3C ที่กาหนดขึ้นมาเพื่อใช้ในการจัดการกับหน้าเอกสารเว็บเพ็จ
โดยเฉพาะ การนา CSS เข้ามาใช้จะช่วยเพิ่มความสามารถให้กบ HTML ที่ ใช้สร้างเอกสารเว็บเพ็จ อยู่
ั
ในปั จจุบน เช่น ลักษณะการแสดงผลของข้อความ ขนาดตัวอักษร สี อักษร การกาหนดสี พ้ืนหลัง การ
ั
สร้างตาราง การพิมพ์ หรื อลักษณะอื่นๆ ที่ HTML ทาได้ แต่CSS จะสามารถทาได้สะดวกกว่า CSS จะ
ทางานร่ วมกับ HTML เป็ นหลัก
รู ปที่ 2.1 แสดงตัวอย่าง CSS ที่ใช้
การใช้ CSS ในการจัดรู ปแบบการแสดงผล จะช่ วยลดการใช้ภาษา HTML ในการตกแต่ง
เอกสารเว็บเพจ ทาให้ code ภายในเอกสาร HTML เหลือเพียงส่ วนเนื้ อหา ทาให้เข้าใจง่ายขึ้น การแก้ไข
เอกสารทาได้ง่ายและรวดเร็ว

19. 7
…………2.1.2 JavaScript ภาษาสคริ ปต์ที่มีโครงสร้างคล้ายกับภาษา C และ C++ อีกทั้งยังเป็ นภาษา
สคริ ปต์ประเภทที่ทางานในฝั่ง Client โดยนักพัฒนาเว็บจะต้องเขียนจาวาสคริ ปต์รวมไว้ในเอกสาร
XHTML เพือช่วยให้เว็บเพจสามารถเปลี่ยนแปลงเนื้อหาตามที่กาหนด และสามารถโต้ตอบกับผูใช้ได้
่ ้
รู ปที่ 2.2 แสดงตัวอย่าง Java Script ที่ใช้
การนาเม้าไปวางหลังTextbox ช่วยอธิบายการกรอก Textbox เพิมเติมการจะกรอกอะไรลงไป
่

20. 8
2.1.3 jQuery นั้นเป็ น JavaScript Library ที่บรรจุเอา Function และ คาสั่งต่างๆ ที่จะทาให้เรา
ไม่ตองมาเขียนเองใหม่ท้งหมดตั้งแต่ตน เราสามารถที่จะเขียน ajax ได้แบบง่ายๆเพียง code ไม่กี่บรรทัด
้ ั ้
หรื อจะเขียน javascript เพื่อดัก Event (เหตุการณ์ ) ต่างๆที่เขาต้องการ เช่น การ click, rollover, mouse
moved อื่นๆอีกมากหมาย
รู ปที่ 2.3 แสดงตัวอย่าง jQuery ที่ใช้
jQuery เป็ น Javascript Library ที่ใช้ปรับแต่งเอกสาร HTML ของเรา รวมทั้งการกระทาต่างๆ
เช่นการคลิก การทา Animation และยังครอบคลุมถึง Ajax อีกด้วย ข้อดีของ jQuery นั้้ นก็คือเพิ่มความ
ั
น่าสนใจให้กบเว็บไซต์ ด้วยโค้ดที่ไม่ซบซ้อน……
ั
……………………………………………………

21. 2.1.4 Adobe Flash เป็ นโปรแกรมที่มีความสามารถในด้านการสร้างภาพเคลื่ อนไหว....
(Animation) ที่ ไ ด้รั บ ความนิ ยมมากที่ สุ ดในปั จจุ บ ัน เป็ นผลิ ต ภัณฑ์ข องบริ ษ ัท Adobe (เดิ ม คื อ
Macromedia) ซึ่งได้พฒนาปรับปรุ งเครื่ องมือต่างๆ ให้มีความสามารถใช้งานได้สะดวก สามารถใช้ผลิต
ั
สื่ อ การสอนเชิ งโต้ตอบ (Interactive), สื่ อ Presentation, เกมส์, แบบทดสอบ, E-Book, Website,
Streaming Video, ฐานข้อมูล, งานกราฟิ ก และสร้างภาพเคลื่อนไหว หรื อแม้แต่ภาพยนตร์การ์ตูนเอนิ
เมชัน……………………………………………………………………………………………………..
่
รู ปที่ 2.4 แสดงตัวอย่างAdobe Flash ที่ใช้

22. 10
2.1.5 Database (ฐานข้อมูล) หมายถึงโครงสร้างสารสนเทศที่ประกอบด้วยรายละเอียดของ
ข้อมูลที่เกี่ยวข้องกันที่จานะมาใช้ในระบบต่างๆ ร่ วมกันระบบฐานข้อมูลจึงนับว่าเป็ นการจัดเก็บข้อมูล
อย่างเป็ นระบบ ซึ่ งผูใช้สามารถจัดการเก็บข้อ มู ล ได้ในลักษณะต่างๆทั้งการเพิ่ม การแก้ไ ข การลบ
้
ตลอดจนการเรี ยกดูขอมูล ซึ่ งส่ วนใหญ่จะเป็ นการประยุกต์นาเอาระบบคอมพิวเตอร์เข้ามาช่วยในการ
้
จัดการฐานข้อมูล
การจัดการฐานข้อมูลโดยโปรแกรม AppServ
รู ปที่ 2.5 แสดงตัวอย่างฐานข้อมูล ที่ใช้

23. 11
2.1.6 SQL เป็ นภาษาที่ทาให้ผใช้สามารถทางานกับข้อมูลที่เก็บบนฐานข้อมูลเชิงสัมพันธ์ โดย
ู้
SQL ไดรับการออกแบบให้มีการดาเนิ นการกับข้อมูลแบบโต้ตอบระหว่างผูใช้คอมพิวเตอร์ โดยตรง
้
ด้วยการพิมพ์คาสั่งSQL ผ่านทางคอมพิวเตอร์ และผลลัพธ์ของข้อมู ล จากฐานข้อมู ล จะปรากฏบน
จอภาพในทันที นอกจากนี้โปรแกรมเมอร์
รู ปที่ 2.6 แสดงตัวอย่าง SQL ที่ใช้
2.1.7 Ajax (Asynchronous JavaScript and XML) เป็ นเทคนิ คหรื อวิธีการที่เกี่ยวข้องกับการ
พัฒนาโปรแกรมแบบเว็บแอพพลิเคชัน(Web Application) โดยช่วยให้เราดึงข้อมูลจากเซิ ร์ฟเวอร์ม า
่
ปรับปรุ งหน้าเว็บเพจได้โดยที่บราวเซอร์ไม่ตองโหลดเพจใหม่มาทั้งเพจ หน้าจอของบราวเซอร์จึงไม่
้
กระพริ บ และทาให้การใช้งานแอพพลิเคชันมีความรู ้สึกแบบเดียวกับเดสก์ทอปแอพพลิเคชัน หรื ออย่าง
่ ๊ ่
น้อยก็ให้ความรู ้สึกที่ใกล้เคียงกันมากขึ้น
รู ปที่ 2.7 แสดงตัวอย่าง AJAX ที่ใช้

24. 12
2.1.8 PHP ภาษาสคริ ปต์ที่ส ามารถเขีย นโค้ด คาสั่งรวมไว้กับภายในเอกสาร HTML ได้
เช่ นเดี ยวกับภาษา JavaScript แต่ต่างกันที่ ภาษา PHP เป็ นภาษาสคริ ป ต์ที่ทางานในฝั่ งเซิ ร์ ฟเวอร์
(Server – Side Script Language) คือ โค้ดคาสังของ PHP จะถูกประมวลผลในฝั่งเซิ ร์ฟเวอร์ แล้วส่ ง
่
ผลลัพธ์ในรู ปแบบของ HTML กลับไปยังไคลเอนต์ที่ร้องขอ โดยโค้ดของ PHP นี้ ผูใช้ในฝั่งไคลเอนต์
้
จะไม่ สามารถมองเห็ นได้………………………………………………………………………………
รู ปที่ 2.8 แสดงตัวอย่างภาษา PHP ที่ใช้
2.1.9 HTML หรื อ Hypertext Markup Language เป็ นภาษาคอมพิวเตอร์ รูปแบบหนึ่ ง ที่มี
โครงสร้างการเขียนโดยอาศัยตัวกากับ (Tag) ควบคุมการแสดงผลข้อความ, รู ปภาพ หรื อวัตถุอื่นๆ ผ่าน
โปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมี ส่วนขยายที่เรี ยกว่า Attribute สาหรับระบุ หรื อ ควบคุ มการ
แสดงผล ของเว็บได้ดวย HTML
้
รู ปที่ 2.9 แสดงตัวอย่าง HTML ที่ใช้

25. บทที่ 3
การออกแบบระบบ
3.1 การออกแบบกระบวนการเก็บและใช้ ข้อมูล
3.1.1 แผนภาพแสดงการทางานของผูใช้ระบบ ( Use Case Diagram ) เว็บไซต์ออกแบบกรอบ
้
โทรศัพท์
–
–
Like
,
รู ปที่ 3.1 แผนภาพการแสดงการทางานของ ผูใช้ทวไป สมาชิก และ ผูดูแลระบบ
้ ั่ ้

26. 14
3.2 แผนภาพบริบท (Context Diagram)
Social network
Social network
–
–
–
-
-
-
รู ปที่ 3.2 แผนภาพบริ บท (Context Diagram)

27. 15
Social network
Social network
รู ปที่ 3.3 แผนภาพบริ บท (Context Diagram)
3.3 แผนภาพกระแสข้ อมูลระบบ(Data Flow Diagram: DFD)
แผนภาพกระแสข้อมูลของเว็บไซต์ออกแบบกรอบโทรศัพท์ เป็ นการแสดงฟังก์ชนของระบบ
ั่
โดยละเอียดเพือให้ผใช้สามารถเข้าใจขั้นตอนการทางานต่างๆ โดยกระบวนการทางานของระบบนั้นมี
่ ู้
ดังนี้
กระบวนการที่ 1.0 การเข้าสู่ระบบ
ชื่อสมาชิก ชื่อสมาชิก
1.0
สมาชิก รหัสผ่าน เข้าสู่ระบบ รหัสผ่าน D1 แฟ้ มข้อมูลสมาชิก
รู ปที่ 3.4 แผนภาพกระแสข้อมูล (ของกระบวนการเข้าสู่ระบบ)

28. 16
กระบวนการที่ 2.0 การสมัครสมาชิก
ข้อมูลการสมัครสมาชิก ข้อมูลสมาชิก
2.0
ผูใช้งานทัวไป
้ ่ แสดงข้อมูลสมาชิก สมัครสมาชิก ข้อมูลสมาชิก D1 แฟ้ มข้อมูลสมาชิก
รู ปที่ 3.5 แผนภาพกระแสข้อมูล (ของกระบวนการสมัครสมาชิก)
กระบวนการที่ 3.0 การแก้ไขข้อมูลสมาชิก
ข้อมูลสมาชิก
3.0 ข้อมูลสมาชิกที่แก้ไข
แก้ไขข้อมูลสมาชิก D1 แฟ้ มข้อมูลสมาชิก
สมาชิก แสดงข้อมูลที่แก้ไข
รู ปที่ 3.6 แผนภาพกระแสข้อมูล (ของกระบวนการแก้ไขข้อมูลสมาชิก)
กระบวนการที่ 4.0 การสังซื้อสินค้า
่
สังซื้อสิ นค้า
่ สังซื้อสิ นค้า
่
4.0
แสดงรายการ D2 แฟ้ มข้อมูลสินค้า
สมาชิก สังซื้อสินค้า
่ ข้อมูลสิ นค้า
สังซื้ อสิ นค้า
่
รู ปที่ 3.7 แผนภาพกระแสข้อมูล (ของกระบวนการสังซื้อสินค้า)
่
กระบวนการที่ 5.0 ยกเลิกการสังซื้อสินค้า
่
สิ นค้าที่สั่งซื้อ
5.0 สิ นค้าที่ยกเลิก
แสดงรายการ
สมาชิก ยกเลิกสิ นค้า ยกเลิกการสังซื้อ
่ D2 แฟ้ มข้อมูลสินค้า
รู ปที่ 3.8 แผนภาพกระแสข้อมูล (ของกระบวนการยกเลิกการสังซื้อ)
่

29. 17
กระบวนการที่ 6.0 ข่าวสารของเว็บไซต์
15 ข่าวสาร
สมาชิก 6.0 ข่าวสาร
D3 แฟ้ มข่าวสารของ
ผูใช้งานทัวไป
้
แสดงข่าวสาร ข่าวสารของเว็บไซต์
่ เว็บไซต์
รู ปที่ 3.9 แผนภาพกระแสข้อมูล (ของกระบวนข่าวสารของเว็บไซต์)
กระบวนการที่ 7.0 การออกแบบกรอบโทรศัพท์
ออกแบบ ข้อมูลการออกแบบ
15
สมาชิก 7.0
แสดงภาพ D4 แฟ้ มออกแบบกรอบ
ออกแบบ ภาพที่ออกแบบ
ผูใช้งานทัวไป
้ ่ ที่ออกแบบ โทรศัพท์
กรอบโทรศัพท์
รู ปที่ 3.10 แผนภาพกระแสข้อมูล (ของกระบวนการออกแบบกรอบโทรศัพท์)
กระบวนการที่ 8.0 การแสดงความนิยมของเว็บไซต์
15
คะแนนความนิ ยม
สมาชิก 8.0 D5 แฟ้ มข้อมูล
แสดงคะแนน
ผูใช้งานทัวไป
้ ่ ความนิ ยม
แสดงความนิยม ความนิยม
รู ปที่ 3.11 แผนภาพกระแสข้อมูล (ของกระบวนการแสดงความนิยมของเว็บไซต์)

30. 18
3.4 ผังงานระบบ (Flow Chart) ของของเว็บไซต์ ออกแบบกรอบโทรศัพท์ มือถือ
รู ปที่ 3.12 แสดงผังงานของเว็บไซต์ออกแบบกรอบโทรศัพท์มือถือ

31. 19
3.2.1 ผังงานหน้าสมัครสมาชิก
รู ปที่ 3.13 แสดงผังงานหน้าสมัครสมาชิก

32. 20
3.2.2 ผังงานตรวจสอบสถานะ
,
รู ปที่ 3.14 แสดงผังงานตรวจสอบสถานะ

33. 21
3.2.3 ผังงานส่วนการทางานของสมาชิกประเภทลูกค้า
รู ปที่ 3.15 แสดงผังงานส่ วนการทางานของสมาชิกประเภทลูกค้า

34. 22
3.2.4 ผังงานส่วนการทางานของผูดูแลระบบ
้
/
รู ปที่ 3.16 แสดงผังงานส่ วนการทางานของผูดูแลระบบ
้

35. 23
3.2.5 ผังงานการสังซื้อสินค้า
่
รู ปที่ 3.17 แสดงผังงานการสังซื้อสินค้า
่

36. 24
3.2.6 ผังงานการสาธิตการออกแบบกรอบโทรศัพท์
รู ปที่ 3.18 แสดงผังงานการสาธิตการออกแบบกรอบโทรศัพท์

37. 25
3.2.7 ผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์
รู ปที่ 3.19 แสดงผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์

38. 26
3.2.8 ผังงานหน้าแก้ไขข้อมูลสมาชิก
,
รู ปที่ 3.20 แสดงผังงานหน้าแก้ไขข้อมูลสมาชิก

39. 27
3.5 แผนภาพแสดงความสัมพันธ์ ระหว่ างเอนทิตและแอททิบิวต์
ี้
vote
Promotion avaliable
PK id
counter
title item
value
dsecription avaliable
image
enable
Order
customer
PK id
PK Username
FK1 pid
Password FK2 username
Tel date
Email price
address status
Product
Orders PK Product_ID
Order detail
PK orders_id Name
PK Order_ID Des
date Image
FK1 Product_ID FK1 Username Price
Quantity can_cancel Amount
Price FK1 Username
รู ปที่ 3.21 แสดงความสัมพันธ์ระหว่างเอนทิต้ ีและแอททิบิวต์

40. 28
3.6 ตารางข้ อมูล (Data Table)........................................................................................................
การออกแบบตารางข้อ มู ล ที่ใช้ในการเก็บข้อ มู ลระบบที่ใช้ในการประมวลผลข้อ มู ล และ
รายละเอียดของแฟ้ มข้อมูล ได้แก่ ชนิ ดของแฟ้ มข้อมูล , ชนิ ดของขอบเขตข้อมูล และขนาดของข้อมูล
การออกแบบตางรางข้อมูลจะรวมถึงการ Normalization เพือลดความซ้ าซ้อนของข้อมูลที่อาจเกิดขึ้นได้
่
ในตารางเดียวกันหรื อต่างตางรางกัน เว็บไซต์ออกแบบกรอบโทรศัพท์ มีตางรางข้อมูลทั้งหมด ดังนี้
ชื่ อตาราง Customer............... ..............................................................................
วั ต ถุ ป ระสงค์ เก็ บ ข้อ มู ล สมาชิ ก ........................................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ................................. ..........
ตารางที่ 3.1 แสดงแฟ้ มสมาชิก
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) ท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Defult) (Validation
No.) Check)
1 Username ชื่อสมาชิก 20 varcha - ตัวเลขและ PK
ตัวอักษร
2 Password รหัสผ่าน 20 varcha - ตัวเลขและ -
ตัวอักษร
3 Tel เบอร์โทรศัพท์ 10 int - ตัวเลข -
4 Email อีเมล์ 100 varcha - ตัวเลขและ -
ตัวอักษร
5 Address ที่อยู่ 200 varcha - ตัวเลขและ -
ตัวอักษร

41. 29
ชื่ อตาราง Product............... ..............................................................................
วั ต ถุ ป ระสงค์ เก็ บ ข้อ มู ล สิ น ค้า .......................00.................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ................................. ..........
ตารางที่ 3.2 แสดงแฟ้ มข้อมูลสินค้า
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) เภท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Default) (Validation
No.) Check)
1 ID รหัสสินค้า 10 int - ตัวเลข PK
2 Name ชื่อสินค้า 100 varcha - ตัวอักษร -
3 Des รายละเอียด 300 varcha - ตัวอักษร -
4 Image รู ปสินค้า 100 varcha - ตัวอักษร -
5 Price ราคา 6,2 float - ตัวเลข -
6 Amount จานวนสินค้า 10 int - ตัวเลข -
7 Username 100 varcha - ตัวอักษร -

42. 30
ชื่ อตาราง Order............... ..............................................................................
วัตถุป ระสงค์ เก็บข้อ มู ล รายสั่งซื้ อ ราย.............................00.................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ... .............................. ..........
ตารางที่ 3.3 แสดงแฟ้ มข้อมูลรายการสังซื้อ
่
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) ท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Default) (Validation
No.) Check)
1 id รหัสสินค้า 10 int - ตัวเลข PK
2 pid รหัสรู ปสินค้า 10 int - ตัวเลข -
3 username - ตัวอักษร -
4 date วันที่สงซื้อ
ั่ - -
5 price ราคาสินค้า
6 status

43. 31
ชื่ อตาราง Orders............... ..............................................................................
วัต ถุป ระสงค์ เก็ บข้อ มู ลการสั่ง ซื้ อ .............................00.................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... .............. ................... ..........
ตารางที่ 3.4 แสดงแฟ้ มข้อมูลดารสังซื้อ
่
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) เภท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Default) (Validation
No.) Check)
1 Order_id รหัสการสังซื้อ
่ 10 int - ตัวเลข PK
2 Date วันที่สงซื้อ
ั่ 100 int - ตัวเลข -
3 Customer 300 varcha - ตัวอักษร -
id
4 Can_ 100 varcha - ตัวอักษร -
Cancel

44. 32
ชื่ อตาราง Orders_detail............... ..............................................................................
วัตถุประสงค์ เก็บรายการสั่งซื้ อ ทั้งหมด.............................00.................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ..................... ............ ..........
ตารางที่ 3.5 แสดงแฟ้ มรายการสังซื้อทั้งหมด
่
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) เภท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Default) (Validation
No.) Check)
1 Oreder_ID รหัสสินค้า 10 int - ตัวเลข PK
2 Product_ID ชื่อสินค้า 100 varcha - ตัวอักษร FK
3 Quantity 300 varcha - ตัวอักษร -
4 Price รู ปสินค้า 100 varcha - ตัวอักษร -
ชื่ อตาราง Vote............... ..............................................................................
วัตถุประสงค์ เก็บสถิติความนิยมของเว็บไซต์..........................00.................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ................................ . ..........
ตารางที่ 3.6 แสดงแฟ้ มสถิติความนิยมของเว็บไซต์
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) เภท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Default) (Validation
No.) Check)
1 Counter 8 int ตัวเลข 1
2 Value 8 int ตัวอักษร 2

45. 33
ชื่ อตาราง Promotion............... ..............................................................................
วั ต ถุ ป ระสงค์ เก็ บ ข้อ มู ล โปรโมชั่ น ......................................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ................................. ..........
ตารางที่ 3.7 แสดงแฟ้ มข้อมูลโปรโมชัน
่
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) ท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Defult) (Validation
No.) Check)
1 ID รหัสโปรโมชัน ่ 10 int - ตัวเลข PK
2 Title ชื่อสินค้า 100 varcha - ตัวอักษร FK
3 Desecription 300 varcha - ตัวอักษร -
4 image รู ปสินค้า 100 varcha - ตัวอักษร -
5 enable
ชื่ อตาราง Avaliable............... ..............................................................................
วัตถุประสงค์ เก็บสถิติความนิยมของเว็บไซต์..........................00.................................... ..........
แฟ มที่ เ กี่ ย วข้ อ ง
้ -.................................. .......... ................................. ..........
ตารางที่ 3.8 แสดงแฟ้ มข้อมมูลเก็บสถิติของเว็บไซน์
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประ ค่า ตรวจสอบ คีย ์
(Seque (Attribute) (Description) (Width) เภท เบื้องต้น ความถูกต้อง (Key)
nce (Type) (Default) (Validation
No.) Check)
1 Item
2 Avaliable

46. 34
3.4 การออกแบบส่ วนเชื่ อมประสานกับผู้ใช้ (UserInterfaceDesign)………………………………….
การออกแบบการเชื่อมประสานกับผูใช้งานคือการออกแบบส่ วนของเว็บไซต์ที่เกี่ยวข้องกับ
้
การมองเห็ นการได้ยนหรื อการสัมผัสกับผูใช้โดยส่ วนนี้ สร้างขึ้นเพื่อแสดงข้อมูลที่สามารถติดต่อกับ
ิ ้
ผู ้ใ ช้ …………………………………….……………………………………………………………..…
Code Home………………………..……………………………………………………………………
Name หน้าหลัก
Case Design
เมนู
สินค้าแนะนา
เสียง ไม่มี
รู ปภาพ มี
วิดีโอ ไม่มี
ภาพเคลื่อนไหว มี
Process / Action รู ปภาพในส่วน Logo เปลี่ยน
เชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ
รู ปที่ 3.22 แสดงตัวอย่างหน้าหลัก

47. 35
Code หน้าสมัครสมาชิก
Name สมัครสมาชิก
Case Design
เมนู
สมัครสมาชิก
Username : Check Username
Password :
Tel :
Email :
Address :
Register
เสียง ไม่มี
รู ปภาพ ไม่มี
วิดีโอ ไม่มี
ภาพเคลื่อนไหว มี
Process / Action เมื่อกดปุ่ ม Register ระบบจะทาการจัดเก็บข้อมูล
เชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ
รู ปที่ 3.23 แสดงตัวอย่างหน้าสมัครสมาชิก

48. 36
Code หน้าเข้าสู่ระบบ
Name เข้าสู่ระบบ
Case Design
Login
Username :
Password :
Login Register
เสียง ไม่มี
รู ปภาพ มี
วิดีโอ ไม่มี
ภาพเคลื่อนไหว มี
Process / Action เมื่อกดปุ่ ม Login จะทาการเข้าสู่ระบบ
เชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ
รู ปที่ 3.24 แสดงตัวอย่างหน้าเข้าสู่ ระบบ

49. 37
Code หน้าออกแบบกรอบโทรศัพท์
Name ออกแบบกรอบโทรศัพท์
Case Design
เมนู
สี ราคา
กรอบโทรศัพท์
สังซื้อ
่
เสียง ไม่มี
รู ปภาพ มี
วิดีโอ ไม่มี
ภาพเคลื่อนไหว มี
Process / Action เมื่อกดปุ่ ม สังซื้อ ระบบจะทาการบันทึก
่
เชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ
รู ปที่ 3.25 แสดงตัวอย่างหน้าออกแบบกรอบโทรศัพท์

50. 38
Code หน้าสังซื้อสินค้า
่
Name สังซื้อสินค้า
่
Case Design
เมนู
สินค้าที่สงซื้อ
ั่
กลับไปเลือกสินค้า
ID Name Price Qty Amount Option
ราคารวม ยกเลิกสิ นค้า อัพเดทสิ นค้า สั่งซื้อสิ นค้า
เสียง ไม่มี
รู ปภาพ ไม่มี
วิดีโอ ไม่มี
ภาพเคลื่อนไหว มี
Process / Action เมื่อกดปุ่ ม อัพเดทสินค้า จะคานวณราคารวม
เชื่อมต่อ ใช้ปุ่ม สังซื้อ เพือเชื่อมไปยังหน้าใบเสร็จ
่ ่
รู ปที่ 3.26 แสดงตัวอย่างหน้าสังซื้อสินค้า
่