รูปเล่มวิชาโครงงาน

12,825 views
12,681 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,825
On SlideShare
0
From Embeds
0
Number of Embeds
318
Actions
Shares
0
Downloads
119
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

รูปเล่มวิชาโครงงาน

  1. 1. เว็บไซต์ออกแบบกรอบโทรศัพท์ Case Design โดย 1. นางสาว ผกาวดี บุญประคม รหัส 51009519 2. นางสาว จิรพันธ์ อุดมสุขสันติ รหัส 51013948โครงงานนี้เป็ นส่วนหนึ่งของการศึกษาตามหลักสูตรวิทยาศาสตร์บณฑิต ัภาควิชาเทคโนโลยีสารสนเทศและการสื่อสาร คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรี ปทุม พ.ศ. 2555
  2. 2. ก มหาวิทยาลัยศรี ปทุม คณะเทคโนโลยีสารสนเทศ โครงงานของ 1. นางสาว ผกาวดี บุญประคม รหัส 51009519 2. นางสาว จิรพันธ์ อุดมสุขสันติ รหัส 51013948 เรื่ อง เว็บไซต์ออกแบบกรอบโทรศัพท์ (Website Case Design) ได้รับตรวจสอบและอนุมติให้เป็ นส่วนหนึ่งของการศึกษาตาม ั หลักสูตรวิทยาศาสตร์บณฑิต สาขาเทคโนโลยีสารสนเทศและการสื่อสาร ั เมื่อวันที่ 23 เดือน กันยายน พ.ศ. 2555ประธานกรรมการ ________________________________ ( )กรรมการ ________________________________ ( )อาจารย์ที่ปรึ กษา ________________________________ ( )ประธานกรรมการ ________________________________ ( )
  3. 3. ขบทคัดย่ อ เว็บไซต์ออกแบบกรอบโทรศัพท์ (Website Case Design , จานวน 73 หน้า)โดย 1. นางสาว ผกาวดี บุญประคม 51009519 2. นางสาว จิรพันธ์ อุดมสุขสันติ 51013948อาจารย์ ทปรึกษา ี่ ดร. วสุวรรธน์ พงศ์ขจร เว็บไซต์น้ ี จดทาขึ้นมาเพื่อเป็ นตัวช่วยในการตัดสิ นใจเลือกซื้ อกรอบโทรศัพท์ โดยผูใช้งาน ั ้สามารถออกแบบกรอบโทรศัพท์ไ ด้ด้วยตนเอง กรอบโทรศัพท์ที่อ อกแบบเองจะไม่ซ้ ากับผูอื่ น และ ้ผูใช้งานยังสามารถเลือกได้ตามต้องการ โดยทางเว็บไซต์ จะมีแพคเกจให้ผใช้งานได้เลือกเพื่อตามความ ้ ู้เหมาะสมของราคาแพคเกจที่ทางเว็บไซต์ได้ต้ งไว้ หรื อผูใช้งานต้องการกรอบโทรศัพท์ที่ทางเว็บไซต์ ั ้ได้จดทาไว้แล้ว ผูใช้งานสามารถสั่งซื้ อได้โดยทันทีซ่ ึ งเป็ นอี กทางเลื อ กหนึ่ ง.................................. ั ้ การพัฒ นาเว็บ ไซต์น้ ี แบ่ ง ออกเป็ นสองส่ ว นหลัก ๆ คื อ 1. ส่ ว นของการออกแบบกรอบโทรศัพท์ 2. ส่ วนของสิ นค้าแนะนา ในการพัฒนานั้นเลือกใช้เทคโนโลยี Flash เป็ นเทคโนโลยีหลักที่ใช้ในการออกแบบกรอบโทรศัพท์ เพือที่ทางเว็บไซต์จะนามาให้ผใช้งานได้ออกแบบกรอบโทรศัพท์ได้ ่ ู้ด้วยตนเอง ทางเว็บไซต์มีการรองรับรุ่ นยอดนิ ยมของโทรศัพท์เพื่อตอบสนองความต้องการของผูท่ีชื่น ้ชอบเทคโนโลยีใหม่ๆ ส่วนของสินค้าแนะนา ทางเว็บไซต์ได้จดทาสินค้าขึ้นมาไว้แล้วเพื่อความรวดเร็ ว ัในการเลื อ กซื้ อ...................................................... ........................................... ผลที่ จ ะได้รั บของการท าโครงงานพัฒ นาเว็บ ไซต์อ อกแบบกรอบโทรศัพ ท์ เพื่อ เป็ น อี กทางเลือกหนึ่งในการตัดสินใจ เลือกซื้อกรอบโทรศัพท์
  4. 4. ค กิตติกรรมประกาศ การจัดทาโครงงานเว็บไซต์ออกแบบกรอบโทรศัพท์เป็ นโครางงานที่ตองใช้โปรแกรมหลาย ้โปรแกรมและ โปรแกรมแต่ ล ะ โปรแกรมที่ เ ลื อ กใช้มี ค วามซับ ซ้อ นในการที่ จ ะใช้ใ ห้ไ ด้อ ย่า งมีประสิทธิภาพ ทาให้เว็บไซต์ตองมีการจัดการปรับปรุ งและพัฒนาประสิทธิภาพให้เพิมขึ้น ในการทางาน ้ ่ได้มีบุคคลผูมีพระคุณหลายๆ ท่าน ที่ได้ให้คาปรึ กษา เสนอแนวทางในการแก้ไขปั ญหา, การออกแบบ ้ระบบต่างๆ เพื่อให้การพัฒนาเว็บไซต์สาเร็ จได้ ทางคณะผูจดทาจึงขอขอบพระคุณบุคคลต่างๆ มา ณ ้ัโอกาสนี้ ........................ ........................ ........................ ........................ ........................+ ขอขอบพระคุณ อาจารย์ ดร. วสุ วรรธน์ พงศ์ขจร ที่ยอมเสี ยสละเวลาอันมีค่าของท่านในการให้คาปรึ กษาเกี่ยวกับโครงงานนี้ท้งหมดตั้งแต่ การออกแบบระบบ, การวิเคราะห์และแก้ไขปั ญหาต่างๆ ัตลอดจนงานเอกสารต่างๆ ด้วยดีเสมอ.......................................................................................... ขอบพระคุ ณ บิ ด า มารดา ที่ ใ ห้ โ อกาสในการท าโครงงานพร้ อ มทั้ง คอยช่ ว ยเหลื อ และเอื้ อ อ านวยในทุ ก ๆ ด้า นเป็ นอย่า งดี เ สมอมา........................................................................ สุ ดท้ายนี้ ขอขอบพระคุณทุกท่านที่ได้ให้ความช่วยเหลือผ่านทางเว็บบอร์ดทางอินเตอร์เน็ ตหลายๆ ท่านที่ไม่ได้กล่าวถึงมา ณ ที่น้ ีดวย ้
  5. 5. ง คานา ในปั จจุบนการซื้อขายสิ นค้าและการบริ การต่างๆผ่านระบบเครื อข่ายคอมพิวเตอร์น้ ัน ได้รับ ัความนิยมเป็ นอย่างมาก เพราะช่วยประหยัดเวลาและค่าใช้จ่ายในการเดินทางไปซื้ อสิ นค้าและบริ การ ั ้ต่างๆ ทาให้เกิดความสะดวกสบายและรวดเร็วให้กบผูที่สนใจ สามารถสั่งซื้ อสิ นค้าหรื อบริ การได้ทนที ัโดยไม่ ต ้อ งเสี ย เวลาไปซื้ อ ตามร้ า นซื้ อทั่ว ไป.................................. ...... .................... ดังนั้นผูจดทาโครงงานเว็บไซต์ออกแบบกรอบโทรศัพท์ จึงได้จดทาโครงการนี้ ข้ ึน เพื่อให้ผูที่ ้ั ั ้สนใจเกี่ยวกับกรอบโทรศัพท์มือถือ สามารถออกแบบตกแต่งกรอบโทรศัพท์แบบที่ตนเองชอบได้ เลือกได้ท้งรุ่ นโทรศัพท์มือถือ สีของกรอบโทรศัพท์ และลายที่ตองการตกแต่งได้........................................... ั ้ หากเอกสารประกอบโครงการนี้ มีขอผิดพลาดประการใด ทางคณะผูจดทาต้องขออภัยมา ณ ้ ้ัโอกาสนี้ ด้วย........................................... ........................................... ..................................... ...... ค ณ ะ ผู ้ จั ด ท า กั น ย า ย น 2555
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. 3สามารถทางานได้บนหลายระบบปฏิบติการ……………………… ……………………… ………… ั - MySQL เป็ น ระบบจัด การฐานข้อ มู ล เชิ ง สัม พัน ธ์ (Relational Database ManagementSystem) โดยใช้ภาษา SQL แม้ว่า MySQL เป็ นซอฟต์แวร์ โอเพนซอร์ ส แต่แตกต่างจากซอฟต์แวร์โอเพนซอร์สทัวไป โดยมีการพัฒนาภายใต้บริ ษท MySQL AB ในประเทศสวีเดน โดยจัดการ MySQL ่ ัทั้ง ในแบบที่ ใ ห้ ใ ช้ฟ รี และแบบที่ ใ ช้ใ นเชิ ง ธุ ร กิ จ …………………..……………………………… - Animation เป็ น การแสดงภาพอย่างเร็ ว ของชุดภาพนิ่ งแบบสองมิติ(2D) หรื อ เกิดจากการเปลี่ยนตาแหน่งของวัตถุ ที่เราอยากให้เคลื่อนที่ โดยใช้หลักภาพลวงตา ให้ดูเหมือนว่าภาพนิ่ งเหล่านั้นมีการเคลื่อนไหว1.5 ประโยชน์ ที่คาดว่ าจะได้ รับ 1.4.1 ทาให้ได้รับความรู ้ในการพัฒนาทางด้านการใช้โปรแกรม HTML 1.4.2 นาความรู ้ที่ได้ไปใช้เป็ นพื้นฐานในการปฏิบติงานหรื อการประกอบอาชีพได้ ั
  16. 16. 41.6 แผนการดาเนินงาน ตารางแสดงแผนดาเนินการลาดับ กิจกรรม ม.ค. ก.พ. มี.ค. เม.ย. พ.ค. มิ.ย. ก.ค. ส.ค. ก.ย. 1 ศึกษาแนวคิด ทฤษฎีและเอกสาร ที่เกี่ยวข้อง 2 ศึกษาเทคโนโลยีที่จะใช้ 3 การระบุปัญหา 4 การรวบรวมข้อมูลและการจัดการ ข้อมูล 5 การวิเคราะห์ขอมูลหรื อการ ้ ออกแบบระบบและโปรแกรม 6 การสร้างตัวแบบหรื อการพัฒนา โปรแกรม 7 ทดสอบติดตั้งระบบหรื อการ ทดสอบตัวแบบ 8 จัดทาเอกสารหมายเหตุ หมายถึง ระยะเวลาดาเนินการตารางที่ 1.1 ตารางแผนการดาเนินงาน
  17. 17. 51.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. 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. 19. 7…………2.1.2 JavaScript ภาษาสคริ ปต์ที่มีโครงสร้างคล้ายกับภาษา C และ C++ อีกทั้งยังเป็ นภาษาสคริ ปต์ประเภทที่ทางานในฝั่ง Client โดยนักพัฒนาเว็บจะต้องเขียนจาวาสคริ ปต์รวมไว้ในเอกสารXHTML เพือช่วยให้เว็บเพจสามารถเปลี่ยนแปลงเนื้อหาตามที่กาหนด และสามารถโต้ตอบกับผูใช้ได้ ่ ้ รู ปที่ 2.2 แสดงตัวอย่าง Java Script ที่ใช้ การนาเม้าไปวางหลังTextbox ช่วยอธิบายการกรอก Textbox เพิมเติมการจะกรอกอะไรลงไป ่
  20. 20. 8 2.1.3 jQuery นั้นเป็ น JavaScript Library ที่บรรจุเอา Function และ คาสั่งต่างๆ ที่จะทาให้เราไม่ตองมาเขียนเองใหม่ท้งหมดตั้งแต่ตน เราสามารถที่จะเขียน ajax ได้แบบง่ายๆเพียง code ไม่กี่บรรทัด ้ ั ้หรื อจะเขียน javascript เพื่อดัก Event (เหตุการณ์ ) ต่างๆที่เขาต้องการ เช่น การ click, rollover, mousemoved อื่นๆอีกมากหมาย รู ปที่ 2.3 แสดงตัวอย่าง jQuery ที่ใช้ jQuery เป็ น Javascript Library ที่ใช้ปรับแต่งเอกสาร HTML ของเรา รวมทั้งการกระทาต่างๆเช่นการคลิก การทา Animation และยังครอบคลุมถึง Ajax อีกด้วย ข้อดีของ jQuery นั้้ นก็คือเพิ่มความ ัน่าสนใจให้กบเว็บไซต์ ด้วยโค้ดที่ไม่ซบซ้อน…… ั……………………………………………………
  21. 21. 2.1.4 Adobe Flash เป็ นโปรแกรมที่มีความสามารถในด้านการสร้างภาพเคลื่ อนไหว....(Animation) ที่ ไ ด้รั บ ความนิ ยมมากที่ สุ ดในปั จจุ บ ัน เป็ นผลิ ต ภัณฑ์ข องบริ ษ ัท Adobe (เดิ ม คื อMacromedia) ซึ่งได้พฒนาปรับปรุ งเครื่ องมือต่างๆ ให้มีความสามารถใช้งานได้สะดวก สามารถใช้ผลิต ัสื่ อ การสอนเชิ งโต้ตอบ (Interactive), สื่ อ Presentation, เกมส์, แบบทดสอบ, E-Book, Website,Streaming Video, ฐานข้อมูล, งานกราฟิ ก และสร้างภาพเคลื่อนไหว หรื อแม้แต่ภาพยนตร์การ์ตูนเอนิเมชัน…………………………………………………………………………………………………….. ่ รู ปที่ 2.4 แสดงตัวอย่างAdobe Flash ที่ใช้
  22. 22. 10 2.1.5 Database (ฐานข้อมูล) หมายถึงโครงสร้างสารสนเทศที่ประกอบด้วยรายละเอียดของข้อมูลที่เกี่ยวข้องกันที่จานะมาใช้ในระบบต่างๆ ร่ วมกันระบบฐานข้อมูลจึงนับว่าเป็ นการจัดเก็บข้อมูลอย่างเป็ นระบบ ซึ่ งผูใช้สามารถจัดการเก็บข้อ มู ล ได้ในลักษณะต่างๆทั้งการเพิ่ม การแก้ไ ข การลบ ้ตลอดจนการเรี ยกดูขอมูล ซึ่ งส่ วนใหญ่จะเป็ นการประยุกต์นาเอาระบบคอมพิวเตอร์เข้ามาช่วยในการ ้จัดการฐานข้อมูลการจัดการฐานข้อมูลโดยโปรแกรม AppServ รู ปที่ 2.5 แสดงตัวอย่างฐานข้อมูล ที่ใช้
  23. 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. 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. 25. บทที่ 3 การออกแบบระบบ3.1 การออกแบบกระบวนการเก็บและใช้ ข้อมูล 3.1.1 แผนภาพแสดงการทางานของผูใช้ระบบ ( Use Case Diagram ) เว็บไซต์ออกแบบกรอบ ้โทรศัพท์ – – Like , รู ปที่ 3.1 แผนภาพการแสดงการทางานของ ผูใช้ทวไป สมาชิก และ ผูดูแลระบบ ้ ั่ ้
  26. 26. 143.2 แผนภาพบริบท (Context Diagram) Social network Social network – – – - - - รู ปที่ 3.2 แผนภาพบริ บท (Context Diagram)
  27. 27. 15 Social network Social network รู ปที่ 3.3 แผนภาพบริ บท (Context Diagram)3.3 แผนภาพกระแสข้ อมูลระบบ(Data Flow Diagram: DFD) แผนภาพกระแสข้อมูลของเว็บไซต์ออกแบบกรอบโทรศัพท์ เป็ นการแสดงฟังก์ชนของระบบ ั่โดยละเอียดเพือให้ผใช้สามารถเข้าใจขั้นตอนการทางานต่างๆ โดยกระบวนการทางานของระบบนั้นมี ่ ู้ดังนี้กระบวนการที่ 1.0 การเข้าสู่ระบบ ชื่อสมาชิก ชื่อสมาชิก 1.0 สมาชิก รหัสผ่าน เข้าสู่ระบบ รหัสผ่าน D1 แฟ้ มข้อมูลสมาชิก รู ปที่ 3.4 แผนภาพกระแสข้อมูล (ของกระบวนการเข้าสู่ระบบ)
  28. 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. 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. 30. 183.4 ผังงานระบบ (Flow Chart) ของของเว็บไซต์ ออกแบบกรอบโทรศัพท์ มือถือ รู ปที่ 3.12 แสดงผังงานของเว็บไซต์ออกแบบกรอบโทรศัพท์มือถือ
  31. 31. 193.2.1 ผังงานหน้าสมัครสมาชิก รู ปที่ 3.13 แสดงผังงานหน้าสมัครสมาชิก
  32. 32. 203.2.2 ผังงานตรวจสอบสถานะ , รู ปที่ 3.14 แสดงผังงานตรวจสอบสถานะ
  33. 33. 213.2.3 ผังงานส่วนการทางานของสมาชิกประเภทลูกค้า รู ปที่ 3.15 แสดงผังงานส่ วนการทางานของสมาชิกประเภทลูกค้า
  34. 34. 223.2.4 ผังงานส่วนการทางานของผูดูแลระบบ ้ / รู ปที่ 3.16 แสดงผังงานส่ วนการทางานของผูดูแลระบบ ้
  35. 35. 233.2.5 ผังงานการสังซื้อสินค้า ่ รู ปที่ 3.17 แสดงผังงานการสังซื้อสินค้า ่
  36. 36. 243.2.6 ผังงานการสาธิตการออกแบบกรอบโทรศัพท์ รู ปที่ 3.18 แสดงผังงานการสาธิตการออกแบบกรอบโทรศัพท์
  37. 37. 253.2.7 ผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์ รู ปที่ 3.19 แสดงผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์
  38. 38. 263.2.8 ผังงานหน้าแก้ไขข้อมูลสมาชิก , รู ปที่ 3.20 แสดงผังงานหน้าแก้ไขข้อมูลสมาชิก
  39. 39. 273.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. 40. 283.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. 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. 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. 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. 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. 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. 46. 343.4 การออกแบบส่ วนเชื่ อมประสานกับผู้ใช้ (UserInterfaceDesign)…………………………………. การออกแบบการเชื่อมประสานกับผูใช้งานคือการออกแบบส่ วนของเว็บไซต์ที่เกี่ยวข้องกับ ้การมองเห็ นการได้ยนหรื อการสัมผัสกับผูใช้โดยส่ วนนี้ สร้างขึ้นเพื่อแสดงข้อมูลที่สามารถติดต่อกับ ิ ้ผู ้ใ ช้ …………………………………….……………………………………………………………..…Code Home………………………..……………………………………………………………………Name หน้าหลัก Case Design เมนู สินค้าแนะนาเสียง ไม่มีรู ปภาพ มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action รู ปภาพในส่วน Logo เปลี่ยนเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.22 แสดงตัวอย่างหน้าหลัก
  47. 47. 35Code หน้าสมัครสมาชิกName สมัครสมาชิก Case Design เมนู สมัครสมาชิก Username : Check Username Password : Tel : Email : Address : Registerเสียง ไม่มีรู ปภาพ ไม่มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม Register ระบบจะทาการจัดเก็บข้อมูลเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.23 แสดงตัวอย่างหน้าสมัครสมาชิก
  48. 48. 36Code หน้าเข้าสู่ระบบName เข้าสู่ระบบ Case Design Login Username : Password : Login Registerเสียง ไม่มีรู ปภาพ มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม Login จะทาการเข้าสู่ระบบเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.24 แสดงตัวอย่างหน้าเข้าสู่ ระบบ
  49. 49. 37Code หน้าออกแบบกรอบโทรศัพท์Name ออกแบบกรอบโทรศัพท์ Case Design เมนู สี ราคา กรอบโทรศัพท์ สังซื้อ ่เสียง ไม่มีรู ปภาพ มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม สังซื้อ ระบบจะทาการบันทึก ่เชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.25 แสดงตัวอย่างหน้าออกแบบกรอบโทรศัพท์
  50. 50. 38Code หน้าสังซื้อสินค้า ่Name สังซื้อสินค้า ่ Case Design เมนู สินค้าที่สงซ฀

×