รูปเล่มวิชาโครงงาน
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 12,681 views

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

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

Statistics

Views

Total Views
12,681
Views on SlideShare
12,420
Embed Views
261

Actions

Likes
0
Downloads
109
Comments
0

4 Embeds 261

http://www.bennypong.com 224
http://sunterjibi.blogspot.com 21
http://migpuripat23.blogspot.com 14
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

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

  • 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 ManagementSystem) โดยใช้ภาษา SQL แม้ว่า MySQL เป็ นซอฟต์แวร์ โอเพนซอร์ ส แต่แตกต่างจากซอฟต์แวร์โอเพนซอร์สทัวไป โดยมีการพัฒนาภายใต้บริ ษท MySQL AB ในประเทศสวีเดน โดยจัดการ MySQL ่ ัทั้ง ในแบบที่ ใ ห้ ใ ช้ฟ รี และแบบที่ ใ ช้ใ นเชิ ง ธุ ร กิ จ …………………..……………………………… - Animation เป็ น การแสดงภาพอย่างเร็ ว ของชุดภาพนิ่ งแบบสองมิติ(2D) หรื อ เกิดจากการเปลี่ยนตาแหน่งของวัตถุ ที่เราอยากให้เคลื่อนที่ โดยใช้หลักภาพลวงตา ให้ดูเหมือนว่าภาพนิ่ งเหล่านั้นมีการเคลื่อนไหว1.5 ประโยชน์ ที่คาดว่ าจะได้ รับ 1.4.1 ทาให้ได้รับความรู ้ในการพัฒนาทางด้านการใช้โปรแกรม HTML 1.4.2 นาความรู ้ที่ได้ไปใช้เป็ นพื้นฐานในการปฏิบติงานหรื อการประกอบอาชีพได้ ั
  • 16. 41.6 แผนการดาเนินงาน ตารางแสดงแผนดาเนินการลาดับ กิจกรรม ม.ค. ก.พ. มี.ค. เม.ย. พ.ค. มิ.ย. ก.ค. ส.ค. ก.ย. 1 ศึกษาแนวคิด ทฤษฎีและเอกสาร ที่เกี่ยวข้อง 2 ศึกษาเทคโนโลยีที่จะใช้ 3 การระบุปัญหา 4 การรวบรวมข้อมูลและการจัดการ ข้อมูล 5 การวิเคราะห์ขอมูลหรื อการ ้ ออกแบบระบบและโปรแกรม 6 การสร้างตัวแบบหรื อการพัฒนา โปรแกรม 7 ทดสอบติดตั้งระบบหรื อการ ทดสอบตัวแบบ 8 จัดทาเอกสารหมายเหตุ หมายถึง ระยะเวลาดาเนินการตารางที่ 1.1 ตารางแผนการดาเนินงาน
  • 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. บทที่ 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, mousemoved อื่นๆอีกมากหมาย รู ปที่ 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. 143.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. 183.4 ผังงานระบบ (Flow Chart) ของของเว็บไซต์ ออกแบบกรอบโทรศัพท์ มือถือ รู ปที่ 3.12 แสดงผังงานของเว็บไซต์ออกแบบกรอบโทรศัพท์มือถือ
  • 31. 193.2.1 ผังงานหน้าสมัครสมาชิก รู ปที่ 3.13 แสดงผังงานหน้าสมัครสมาชิก
  • 32. 203.2.2 ผังงานตรวจสอบสถานะ , รู ปที่ 3.14 แสดงผังงานตรวจสอบสถานะ
  • 33. 213.2.3 ผังงานส่วนการทางานของสมาชิกประเภทลูกค้า รู ปที่ 3.15 แสดงผังงานส่ วนการทางานของสมาชิกประเภทลูกค้า
  • 34. 223.2.4 ผังงานส่วนการทางานของผูดูแลระบบ ้ / รู ปที่ 3.16 แสดงผังงานส่ วนการทางานของผูดูแลระบบ ้
  • 35. 233.2.5 ผังงานการสังซื้อสินค้า ่ รู ปที่ 3.17 แสดงผังงานการสังซื้อสินค้า ่
  • 36. 243.2.6 ผังงานการสาธิตการออกแบบกรอบโทรศัพท์ รู ปที่ 3.18 แสดงผังงานการสาธิตการออกแบบกรอบโทรศัพท์
  • 37. 253.2.7 ผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์ รู ปที่ 3.19 แสดงผังงานหน้าแสดงตัวอย่างกรอบโทรศัพท์
  • 38. 263.2.8 ผังงานหน้าแก้ไขข้อมูลสมาชิก , รู ปที่ 3.20 แสดงผังงานหน้าแก้ไขข้อมูลสมาชิก
  • 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. 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. 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. 343.4 การออกแบบส่ วนเชื่ อมประสานกับผู้ใช้ (UserInterfaceDesign)…………………………………. การออกแบบการเชื่อมประสานกับผูใช้งานคือการออกแบบส่ วนของเว็บไซต์ที่เกี่ยวข้องกับ ้การมองเห็ นการได้ยนหรื อการสัมผัสกับผูใช้โดยส่ วนนี้ สร้างขึ้นเพื่อแสดงข้อมูลที่สามารถติดต่อกับ ิ ้ผู ้ใ ช้ …………………………………….……………………………………………………………..…Code Home………………………..……………………………………………………………………Name หน้าหลัก Case Design เมนู สินค้าแนะนาเสียง ไม่มีรู ปภาพ มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action รู ปภาพในส่วน Logo เปลี่ยนเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.22 แสดงตัวอย่างหน้าหลัก
  • 47. 35Code หน้าสมัครสมาชิกName สมัครสมาชิก Case Design เมนู สมัครสมาชิก Username : Check Username Password : Tel : Email : Address : Registerเสียง ไม่มีรู ปภาพ ไม่มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม Register ระบบจะทาการจัดเก็บข้อมูลเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.23 แสดงตัวอย่างหน้าสมัครสมาชิก
  • 48. 36Code หน้าเข้าสู่ระบบName เข้าสู่ระบบ Case Design Login Username : Password : Login Registerเสียง ไม่มีรู ปภาพ มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม Login จะทาการเข้าสู่ระบบเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.24 แสดงตัวอย่างหน้าเข้าสู่ ระบบ
  • 49. 37Code หน้าออกแบบกรอบโทรศัพท์Name ออกแบบกรอบโทรศัพท์ Case Design เมนู สี ราคา กรอบโทรศัพท์ สังซื้อ ่เสียง ไม่มีรู ปภาพ มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม สังซื้อ ระบบจะทาการบันทึก ่เชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.25 แสดงตัวอย่างหน้าออกแบบกรอบโทรศัพท์
  • 50. 38Code หน้าสังซื้อสินค้า ่Name สังซื้อสินค้า ่ Case Design เมนู สินค้าที่สงซื้อ ั่ กลับไปเลือกสินค้า ID Name Price Qty Amount Option ราคารวม ยกเลิกสิ นค้า อัพเดทสิ นค้า สั่งซื้อสิ นค้าเสียง ไม่มีรู ปภาพ ไม่มีวิดีโอ ไม่มีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุ่ ม อัพเดทสินค้า จะคานวณราคารวมเชื่อมต่อ ใช้ปุ่ม สังซื้อ เพือเชื่อมไปยังหน้าใบเสร็จ ่ ่ รู ปที่ 3.26 แสดงตัวอย่างหน้าสังซื้อสินค้า ่
  • 51. 39Code หน้าแสดงการสังซื้อสินค้า ่Name แสดงการสังซื้อ ่ Case Design เมนู ระบบได้ทาการบันทึกการสังซื้อเรี ยบร้อยแล้ว ่ ใบสังซื้อสิ นค้า ่ ชื่อผูรับ ้ ่ ู้ ที่อยูผรับ สินค้า จานวน ราคา ราคารวม บาทเสียง ไม่มีรู ปภาพ ไม่มีวิดีโอ ไม่มีภาพเคลื่อนไหว ไม่มีProcess / Action ไม่มีเชื่อมต่อ ใช้ปุ่มเชื่อมต่อ (Link) ไปยังหน้าต่างๆ รู ปที่ 3.27 แสดงตัวอย่างหน้าแสดงการสังซื้อสินค้า ่
  • 52. บทที่ 4 การพัฒนาโปรแกรม บทนี้จะกล่าวถึงเครื่ องมือและอุปกรณ์ที่ใช้ในการพัฒนาการพัฒนาเว็บไซต์ Case Design การพัฒนาโปรแกรมนี้จะทาให้เข้าใจถึงระบบการทางานวิธีการออกแบบและสังซื้อกรอบโทรศัพท์โดยรวม ่ซึ้งในการกาหนดรายละเอียดต่างๆที่เป็ นองค์ประกอบสาคัญในการพัฒนาและปรับปรุ งระบบซึ่งจะเป็ นการพัฒนาเว็บไซต์ในอนาคต รวมถึงปั ญหาที่อาจเกิดขึ้นเพือแก้ไขได้ง่าย ซึ่งผูจดทาได้พฒนาเว็บไซต์ ่ ้ั ัCase Design มีการใช้งานทางด้านอุปกรณ์และโปรแกรมต่างๆดังนี้..........................................4.1 อุปกรณ์และซอฟแวร์ ที่ใช้ 4.1.1 อุปกรณ์คอมพิวเตอร์ที่ใช้ในการทาโครงงาน 4.1.1.1 Lenovo G460 4.1.1.2 4 GB DDR3 4.1.1.3 320 GB 5400 RPM 4.1.1.4 เครื่ องพิมพ์ 4.1.2 โปรแกรมที่สงงานให้คอมพิวเตอร์ทางานที่ใช้ในการทาโครงงาน ั่ 4.1.2.1 ระบบปฏิบติการ Windows 7 ั 4.1.2.2 ฐานข้อมูล MySQL 4.1.2.3 Adobe Photoshop 4.1.2.4 Adobe Flash 4.1.2.5 โปรแกรม Microsoft word 2010 4.1.2.6 โปรแกรม Adobe Dreamweaver CS5 4.1.2.7 โปรแกรม Microsoft Office Powerpoint 2010 4.1.2.8 โปรแกรม Microsoft Office Visio 2010
  • 53. 41 2.โปรแกรมที่ใช้ในการพัฒนาโครงงานประกอบด้วยโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์สังคมท่องเที่ยวประกอบไปด้วยโปรแกรมต่างๆดังในตารางที่4.1ตารางที่4.1 โปรแกรมที่ใช้ในการพัฒนาโครงงานชื่อโปรแกรม นามาใช้เพือ ่ เลือกเพราะAdobe Dreamweaver CS4 ใช้ในการพัฒนาและ เป็ นโปรแกรมที่สนับสนุนงาน ออกแบบหน้าเว็บไซต์ ทางด้านการออกแบบเว็บไซต์มี เครื่ องมือหลากหลายที่เหมาะกับ โครงงาน ทั้งการออกแบบ layout ของ หน้าเว็บไซต์ก็สามารถทาได้สะดวกAdobe Photoshop CS4 ใช้ในการตกแต่งภาพที่ เป็ นโปรแกรมที่มีความสามารถใน ใช้ในการทาโครงงาน การตกแต่งรู ปภาพที่มีประสิทธิภาพ ทาให้รูปภาพมีความสวยงามและ สมจริ งมากขึ้นAdobe FlashCS4 Professional ใช้ในการ ออกแบบ เป็ นโปรแกรมที่ช่วยในการเพิมลูกเล่น ่ กรอบโทรศัพท์ อย่างหลากหลายให้หน้าเว็บมีความ น่าสนใจมากยิงขึ้น ในส่วนของ ่ โครงงานนี้นามาใช้ในการออกแบบ ตกแต่งกรอบโทรศัพท์Microsoft office Word2007 ใช้ในการจัดทาเอกสาร ช่วยในการจัดทาเอกสารโครงงานเป็ น โครงงานทั้งหมด โปรแกรมที่มีประสิทธิภาพในการทา เอกสาร , ง่ายต่อการใช้งานMicrosoft office Visio2007 ใช้ในการเขียนผังงาน มีเครื่ องมือที่ช่วยในการทาแผนภาพ และแผนภาพต่างๆ ต่างๆค่อนข้างครบถ้วน ซึ่งช่วยในการ สร้างแผนภาพทุกแผนในโครงงานAppServ ใช้ในการเสร้างและ เป็ นโปรแกรมจัดการฐานข้อมูล ที่มี จัดการฐานข้อมูล ประสิทธิภาพอีกทั้งยังสามารถเรี ยนรู ้ ได้ง่าย
  • 54. 424.2 การทางานทั้งหมดของโปรแกรมมีกระบวนการทั้งหมดดังนี้ตารางที่ 4.2 แสดงกระบวนการทางานของ กระบวนการ 1.0 หน้าหลักกระบวน 1.0 หน้าหลัก ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ เข้าสู่ระบบ ลูกค้าทาการกรอกชื่อผูใช้(Username) และรหัสผ่าน ้ - (Password)ของตนเอง เพือเข้าสู่ระบบสมาชิกของเว็บไซต์ ่ ออกแบบกรอบโทรศัพท์ตารางที่ 4.3 แสดงกระบวนการทางานของ กระบวนการ 2.0 สมัครสมาชิกกระบวน 2.0 สมัครสมาชิก ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ การสมัครสมาชิก ผูใช้งานทัวไปที่ตองการจะเป็ นสมาชิกของเว็บไซต์ ้ ่ ้ - จะต้องทาการสมัครสมาชิก โดยทาการกรอกรายละเอียด ในการสมัคร ชื่อผูใช้(Username),รหัสผ่าน(Password), ้ และข้อมูลส่วนตัวอื่นๆ เพือทาการสมัครสมาชิก ่ตารางที่ 4.4 แสดงกระบวนการทางานของ กระบวนการ 3.0 แก้ไขข้อมูลสมาชิกกระบวน 3.0 แก้ไขข้อมูลสมาชิก ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ การแก้ไขข้อมูลสมาชิก สมาชิกที่ตองการจะแก้ไขข้อมูลส่วนตัวต่างๆ ทาได้โดย ้ - การเข้าสู่ระบบสมาชิกและเลือกที่แก้ไขข้อมูลส่วนตัว จากนั้นก็สามารถเปลี่ยนแปลงแก้ขอมูลได้ และระบบจะ ้ กาการบันทึกข้อมูลที่แก้ไขเรี ยบร้อยแล้ว
  • 55. 43ตารางที่ 4.5 แสดงกระบวนการทางานของ กระบวนการ 4.0 การสั่งซื้อสินค้ากระบวน 4.0 การสังซื้อสินค้า ่ ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ การสังซื้อสินค้า ่ ลูกค้าทาการเลือกสินค้าที่ตองการสังซื้อ เมื่อลูกค้าทาการ ้ ่ - เลือกสินค้าที่ตองการ ระบบจะทาเก็บข้อมุลการสังซื้อ ้ ่ สินค้า และแสดงใบเสร็ จรับเงินตารางที่ 4.6 แสดงกระบวนการทางานของ กระบวนการ 5.0 ยกเลิกการสังซื้อสินค้า ่กระบวน 5.0 ยกเลิกการสังซื้อสินค้า ่ ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ ยกเลิกการสังซื้อสินค้า ่ ลูกค้าที่ทาการสังซื้อสินค้าไป แล้วต้องการยกเลิกการ ่ - สังซื้อ สามารถทาได้โดยเข้าสู่ระบบสมาชิกของทางร้าน ่ และเลือกที่รายการสังซื้อ จากนั้นระบบจะแสดงข้อมูล ่ รายการสังซื้อของสมาชิกและลูกค้าก็สามารถยกเลิกได้ ่ โดยเลือกที่ ยกเลิกการสังซื้อ ่ตารางที่ 4.7 แสดงกระบวนการทางานของ กระบวนการ 6.0 ข่าวสารของเว็บไซต์กระบวน 6.0 ข่าวสารของเว็บไซต์ ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ ข่าวสารของเว็บไซต์ สมาชิกและผูใช้ทวไป สามารถดูข่าวสารและโปรโมชัน ้ ั่ ่ - ประจาเดือนของเว็บไซต์ได้ ในส่วนไฮไลท์หน้าแรกของ เว็บไซต์ และสามารถคลิกที่รูปเพือเข้าไปดูรายละเอียด ่ เพิมเติมได้ ่
  • 56. 44ตารางที่ 4.8 แสดงกระบวนการทางานของ กระบวนการ 7.0 การออกแบบกรอบโทรศัพท์กระบวน 7.0 การออกแบบกรอบโทรศัพท์ ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ การออกแบบ ผูใช้สามารถทาการออกแบบตกแต่งกรอบโทรศัพท์ที่ ้ - กรอบโทรศัพท์ ต้องการได้ โดยสามารถเลือกรุ่ นของกรอบโทรศัพท์, สี ของกรอบโทรศัพท์,รู ปตกแต่งต่างๆ เมื่อทาการตกแต่งได้ ตามที่ตองการแล้ว ระบบจะบันทึกกรอบโทรศัพท์ที่ ้ ออกแบบเมื่อผูใช้ได้กดปุ่ มบันทึก ้ตารางที่ 4.9 แสดงกระบวนการทางานของ กระบวนการ 8.0 การแสดงความนิยมของเว็บไซต์กระบวน 8.0 การแสดงความนิยมของเว็บไซต์ ชื่อกระบวนการ คาอธิบายการทางาน หมายเหตุ การแสดงความนิยม ผูใช้สามารถให้คะแนนความนิยมของเว็บไซต์ได้ ระบบจะ ้ - ของเว็บไซต์ ทาการเก็บข้อมูลการแสดงความนิยม4.3 การออกแบบส่ วนเชื่อมประสานกับผู้ใช้ (User Interface Design) การออกแบบหน้าจอภาพ คือ การออกแบบส่ วนของเว็บไซต์ที่เกี่ยวข้องกับการมองเห็นการได้ ยิ น หรื อการสั ม ผัส กั บ ผู ้ใ ช้ โ ดยมี ว ัต ถุ ป ระสงค์ ห ลั ก ดั ง นี้ ......................................... - มีลกษณะเป็ นหน้าต่างและคาสังในการทางานคล้ายโปรแกรมที่ทางานบนระบบปฏิบติการ ั ่ ัทัวๆไปเพราะผูใช้งานคอมพิวเตอร์ส่วนใหญ่คุนเคยกับการใช้อยูแล้วทาให้ผูใช้สามารถใช้โปรแกรมได้ ่ ้ ้ ่ ้สะดวกมากขึ้ น......................... .............. ........... ........... ........................ - การรับคาสังจากผูใช้เน้นที่การกดปุ่ มที่ได้เตรี ยมไว้ให้โดยปุ่ มจะมีขอความหรื อรู ปภาพที่สื่อ ่ ้ ้ความหมายของคาสั่งให้ไ ด้มากที่สุดผูใช้เพียงแต่กดที่ปุ่มคาสั่งก็สามารถใช้งานได้โดยไม่ตอ งจดจา ้ ้ค าสั่ ง และพิ ม พ์ ค าสั่ ง เอง........... .. .................... ........... ........... ........... ...........
  • 57. 45 - เพื่อความสะดวกในการใช้ง านสามารถเลื อ กความเร็ วในการแสดงจากลาดับ รายการ..... - ผู ้ใ ช้จ ะป้ อนข้อ ความที่ จ ะแสดงออกได้ที่ ช่ อ งข้อ ความ................. ........... ...........การเข้าใช้ระบบของเว็บไซต์ Case Design สามารถเข้าใช้ได้โดยไม่ตองสมัครสมาชิก แต่ถาต้องการ.... ้ ้สังซื้อสินค้า ต้องทาการสมัครสมาชิกก่อนถึงจะทาการสังซื้อได้ ่ ่ 4.3.1 หน้าหลักของเว็บไซต์สามารถเชื่อมต่อไปยังหน้าอื่นได้ รู ปที่ 4.1 แสดงหน้าหลัก
  • 58. 46 4.3.2 หน้าสมัครสมาชิกเพือทาการลงทะเบียนเข้าใช้งานระบบสมาชิกร้านค้า ่ รู ปที่ 4.2 แสดงหน้าสมัครสมาชิก 4.3.3 หน้าเข้าสู่ระบบ(Login)ผูใช้งานสามารถเข้าสู่ระบบได้โดยการใส่ ชื่อผูใช้ ้ ้(Username)และรหัสผ่าน(Password) รู ปที่ 4.3 แสดงหน้าเข้าสู่ระบบ
  • 59. 47 4.3.4 เมื่อผูใช้ทาการกรอกข้อมูลในการเข้าสู่ระบบเรี ยบร้อยแล้ว จะแสดงหน้าจอการยืนยัน ้ชื่อผูใช้งาน ้ รู ปที่ 4.4 แสดงหน้าจอการยืนยันชื่อผูใช้ ที่ทาการเข้าระบบเรี ยบร้อยแล้ว ้ 4.3.5 ผูใช้สามารถแก้ไขข้อมูลส่วนตัวต่างๆได้ เช่น เบอร์โทรศัพท์ , E-Mail ้ รู ปที่ 4.5 แสดงหน้าแก้ไขข้อมูลส่วนตัว
  • 60. 48 4.3.6 แสดงรายการสินค้าที่มีอยู่ มีการแสดงชื่อและราคาสินค้า ลูกค้าที่ตองการซื้อสามารถกด ้Add To Cart ได้ รู ปที่ 4.6 แสดงหน้าสินค้า 4.3.7 แสดงรายการโปรโมชันข่าวสารร้านค้าต่างๆในหน้าหลักของเว็บไซต์ ผูใช้สามารถคลิ๊ก ่ ้เข้าไปดูรายละเอียดเพิมเติมได้ ่ รู ปที่ 4.7 แสดงหน้าแรกโปรโมชันข่าวสาร ่
  • 61. 494.3.8 แสดงรายละเอียดวิธีการสั่งซื้อสินค้า รู ปที่ 4.8 แสดงหน้าวิธีการสังซื้อสินค้า ่4.3.9 แสดงรายละเอียดการชาระเงิน บัญชีธนาคาร ที่จะใช้ในการรับชาระเงินค่าสินค้า รู ปที่ 4.9แสดงหน้าวิธีการชาระเงิน
  • 62. 50 4.3.10 แสดงรายละเอียดและวิธีการติดต่อสอบถามสินค้าต่างๆจากทางร้าน รู ปที่ 4.10 แสดงหน้าการติดต่อ-สอบถาม 4.3.11 ผูใช้สามารถดูวธีการออกแบบโทรศัพท์ได้ โดยจะมีคาอธิบายต่างๆเพิมเติมให้เข้าใจ ้ ิ ่วิธีการออกแบบมากยิงขึ้น ่ รู ปที่ 4.11 แสดงหน้าวิธีออกแบบกรอบโทรศัพท์
  • 63. 51 4.3.12 ผูใช้สามารถออกแบบกรอบโทรศัพท์ได้ตามต้องการ โดยคลิ๊กเลือกแพคเกจราคาที่ ้ต้องการ จากนั้นเริ่ มตกแต่งกรอบโทรศัพท์ตามต้องการได้ รู ปที่ 4.12 แสดงหน้าออกแบบกรอบโทรศัพท์ 4.3.13 เมื่อลูกค้าได้ทาการเลือกสินค้าที่ตองการ ระบบจะแสดงหน้ารายการสั่งซื้ อสิ นค้า จะมี ้การคานวณราคารวมของสินค้าทั้งหมดและลูกค้าจะสามารถยกเลิกรายการสังซื้อทั้งหมด หรื อยกเลิกแค่ ่บางรายการ รู ปที่ 4.13 แสดงหน้ารายการสั่งซื้อ
  • 64. 52 4.3.14 เมื่อลูกค้าได้ทาการสังซื้อสินค้าแล้ว จะแสดงหน้าใบสังซื้อสินค้า ซึงมีขอมูลรายการ ่ ่ ้ ่ ู้สังซื้อ ที่อยูผรับสินค้า และราคารวม ่ รู ปที่ 4.14 แสดงหน้าใบสั่งซื้อสินค้า 4.3.15 ลูกค้าสามารถยกเลิกรายการสังซื้อต่างๆได้ เมื่อเข้าสู่ระบบสมาชิก และกดปุ่ มยกเลิก ่สังซื้อสินค้า ระบบจะทาการยกเลิกรายการสังซื้อสินค้านั้นทันที ่ ่ รู ปที่ 4.15 แสดงหน้ายกเลิกรายการสังซื้อ ่
  • 65. บทที่ 5 สรุปโครงงาน ปัญหา และข้ อเสนอแนะ5.1 สรุปโครงงาน จากการทาโครงงานเกี่ยวกับ เว็บไซต์ออกแบบกรอบโทรศัพท์ (Case Design) จัดทาขึ้นโดยออกแบบโครงสร้างในรู ปแบบของ flash ในส่วนของการของแบบกรอบโทรศัพท์ เพือให้ผใช้งานได้ทา ่ ู้การออกแบบด้วยตนเอง โครงงานเว็บไซต์ออกแบบกรอบโทรศัพท์ (Case Design) เป็ นอีกทางเลือกหนึ่ งในการเลือกซื้อสินค้า ให้ผใช้งานที่สนใจหรื อต้องการซื้อกรอบโทรศัพท์ สามารถเลือกสินค้าได้ตามต้องการและไม่ ู้ซ้ ากับผูอื่น โดยทางเว็บไซต์ จะให้ผใช้งานสามรถออกแบบกรอบโทรศัพท์ได้ดวยตนเอง โดยการเลือก ้ ู้ ้รุ่ น สี ลาย โทรศัพท์ได้ตามที่ตองการ ซึ่ งจะอยูภายใต้ราคาที่ได้กาหนดไว้ขางตน ถ้าต้องสั่งซื้ อสิ นค้า ้ ่ ้ผูใช้ง านต้อ งท าการสมัครสมาชิ ก ก่ อ นถึ งจะทาการสั่งซื้ อ ได้ เมื่ อ สั่งซื้ อ สิ นค้าไปแล้ว หากต้อ งการ ้เปลี่ยนแปลงหรื อยกเลิก ผูใช้งานก็สามารถยกเลิกสิ นค้านั้นๆได้ หากผูใช้งานชื่นชอบหรื อต้องการ นา ้ ้สิ นค้าที่ต นเองออกแบบ แบ่งปั นให้เพื่อ นๆ ได้ชม ก็สมาสามารถแบ่งปั นผ่านทาง Social Networkผูใช้งานก็สามารถทาได้ ซึ่งจะทาให้เว็บไซต์ของเราเป็ นที่รู้จกมากขึ้นอีกด้วย ้ ั5.2 ปัญหาและอุปสรรคในการดาเนินงาน 5.2.1 ปั ญหาจากโปรแกรมแฟลช ผูจดทาขาดความชานาญในการใช้โปแกรมแฟลช จึงทาให้ ้ัต้องใช้เวลาในการศึกษาค้นคว้า เป็ นเวลานาน ทาให้เสียเวลาในการทาโครงงาน 5.2.2 ปั ญหาในการเชื่อมต่อข้อมูลระหว่าง โปรแกรมแฟลชกับฐานข้อมูล ผูจดทาขาดความรู ้ ้ัในการใช้ภาษา php เพือจะนามาเชื่อมต่อกับฐานข้อมูล จึงทาให้ตองใช้เวลาศึกษาค้นคว้าเป็ นเวลานาน ่ ้ 5.2.3 ปั ญหาในการทาเอกสาร ผูจดทาขาดความเข้า ใจเกี่ ย วกับการจัดทาเอกสารแต่ก็ไ ด้ ้ัอาจารย์ที่ปรึ กษาโครงงานช่วยแนะนาให้จนทาให้สาเร็จไปได้ดวยดี ้
  • 66. 545.3 ข้ อ เสนอแนะ ........... ........... ........... ........... ........... ........... ........... ........... 5.3.1 ผู ้จ ัด ท าโครงงานมี ข ้อ เสนอแนะถ้ า จะพัฒ นาต่ อ ยอดเว็ บ ไซต์ อ อกแบบกรอบโทรศัพท์มือ ถื อ นี่ ต่อ ไป เรื่ อ งการ การออกแบบกรอบโทรศัพท์ควรเพิ่มเติมรุ่ นโทรศัพท์มื อ ถื อ ที่จ ะอ อ ก แ บ บ ใ ห้ ม า ก ยิ่ ง ขึ้ น เ พื่ อ เ ป็ น ก า ร ข ย า ย ต ล า ด ลู ก ค้ า ท า ใ ห้ มี ลู ก ค้ า เ พิ่ ม ม า ก ยิ่ ง ขึ้ น 5.3.2 ถ้าจะมีการพัฒนาโครงงานนี้ต่อไป ควรมีการปรับปรุ งและเพิ่มรู ปที่ใช้ในการออกแบบกรอบโทรศัพท์ ให้มากยิ่งขึ้นและทันสมัยอยู่ตลอดเวลา เพื่อ ให้ตอบสนองความต้อ งการของลู กค้าได้มากยิงขึ้น ่
  • 67. 55 บรรณานุกรมพิรพร หมุนสนิท. การพัฒนาเว็บไซต์ดวย XHTML,CSS และ JavaScript. กรุ งเทพฯ: เคทีพี คอมพ์ ้ แอนด์ คอนชัลท์, 2554.บรรณาธิการดิจิอาร์ต. Flash CS5 สนุกกับงานแอนิเมชัน. พิมครั้งที่1. นนทบุรี: ไอดีซีอินโฟดิสทริ บิว ่ เตอร์, 2554อดิศกดิ์ จันทร์มิน. สร้าง Web Application อย่างมืออาชีพด้วย PHP ฉบับ Workshop เล่ม2. กรุ งเพทฯ: ซี ั เอ็ดยูเคชัน, 2548 ่ประภาพร ช่างไม้. มือใหม่สร้างเว็บไซต์ Photoshop+Dreamweaver. นนทบุรี: ไอดีซี, 2551.กิตติ ภักดีวฒนะกุล และ จาลอง ครู อุตสาหะ. ระบบฐานข้อมูล(Database System). พิมพ์ครั้งที่9. ั กรุ งเทพฯ: เคทีพ,ี 2550.
  • 68. 56ภาคผนวก
  • 69. 57 ภาคผนวก ก คู่มือการใช้ งานก.1 โปรแกรมที่ใช้ ในระบบ เครื่ องคอมพิวเตอร์และโปรแกรมที่ใช้ในระบบการทางาน ก.1.1 คอมพิวเตอร์แบบพกพา (Computer Notebook) - หน่วยประมวลผล (CPU) อินเทลเซเรลอน 1.5 กิกกะเฮิร์ทขึ้นไป - หน่วยความจา (Ram) 512 เมกกะไบต์ข้ นไป ึ - ฮาร์ดดิสก์ (Hard disk) 20 กิกกะไบต์ข้ ึนไป ก1.2 อินเทอร์เน็ตเอกซ์พลอเรอร์ (Internet Explorer Browser) เวอร์ชน 7 ขึ้นไป ั่ ก.1.3 อินเทอร์เน็ตความเร็ วสูง (Hi-speed Internet)ก.2 วิธีการใช้ งาน เว็บไซต์ออกแบบกรอบโทรศัพท์ เป็ นเว็บที่สามารถออกแบบได้ตามที่ตองการ โดยผูใช้งาน ้ ้ต้องสมัครสมาชิก เพือที่จะได้ชื่อเข้าใช้งานระบบและรหัสผ่าน เพื่อนใช้ในการสั่งซื้ อสิ นค้าภายในเว็บ ่โดยหัวข้อนี้ได้รวบรวมวิธีการใช้งานทั้งหมดไว้แล้ว ก.2.1 ทาการเชื่อมต่อระบบอินเตอร์เน็ตในคอมพิวเตอร์ของผูใช้งาน ้
  • 70. 58 ก.2.2 เมื่อเข้าสู่เว็บไซต์ ให้ทาการสมัครสมาชิกก่อนถ้ายังไม่เคยเป็ นสมาชิก แต่ถาผูใช้เคยเป็ น ้ ้สมาชิกแล้วก็ทาการเข้าระบบ (Login) รู ปที่ ก.1 หน้าแรกของเว็บไซต์ ก.2.3 ให้กดปุ่ ม Register เพื่อ ไปยังหน้าสมัครสมาชิก ตั้งชื่ อ Username และกดปุ่ ม Chek ่Username เพือตรวจสอบว่า Username นั้นได้มีอยูในระบบหรื อไม่ กรอกข้อมูลให้ครบถ้วน เพื่อใช้ใน ่การเข้าระบบในการสังซื้อสินค้า และรับข่าวสารจากทางเว็บไซต์ หลังจากกรอกข้อมูลครบถ้วนให้กด ่ปุ่ ม Register เพือยืนยันการสมัครสมาชิก ่ รู ปที่ ก.2 แสดงหน้าสมัครสมาชิก
  • 71. 59 ก.2.4 ท าการเข้า สู่ ร ะบบ (Login) ในหน้า แรกของเว็บ ไซต์ ให้ก รอกข้อ มู ล ดัง นี้ ช่ อ งUsername ให้ใส่ชื่อผูใช้งานที่ทาการสมัครไว้ ช่อง Password ให้ใส่ รหัสผ่านที่ทาการสมัครไว้ และกด ้ปุ่ ม Login รู ปที่ ก.3 แสดงหน้าเข้าสู่ระบบ ก.2.5 หลังจากยืนยันการเข้าระบบแล้ว ระบบจะแสดงหน้าข้อความแจ้งว่าได้ทาการเข้าระบบเรี ยบร้อยแล้ว พร้อมทั้งแสดงชื่อผูใช้งาน ที่ทาการเข้าระบบ ้ รู ปที่ ก.4 แสดงหน้าเข้าสู่ระบบเรี ยบร้อยแล้ว
  • 72. 60 ก.2.6 ผูใช้แก้ไขข้อมูลส่วนตัวต่างๆได้ เช่น เบอร์โทรศัพท์ , E-Mail ,ที่อยู่ ้ รู ปที่ ก.5 แสดงหน้าแก้ไขข้อมูลส่วนตัว ก.2.7 ลูกค้าที่ตองการซื้อสามารถกด Add To Cart เพือทาการสังซื้อสินค้า สมาชิกเท่านั้นที่จะ ้ ่ ่ทาการสังซื้อได้ ่ รู ปที่ ก.6 แสดงหน้าสินค้า
  • 73. 61 ก.2.8 ผูใช้สามารถดู วิธีการออกแบบโทรศัพท์ไ ด้ โดยคลิกที่ How to จากหน้าหลักของ ้เว็บไซต์ โดยจะมีคาอธิบายพร้อมรู ปภาพประกอบด้วย เพื่อแนะนาให้ผูใช้งานเกิดความเข้าใจและใช้ ้งานสะดวกยิงขึ้น ่ รู ปที่ ก.7 แสดงหน้าวิธีออกแบบกรอบโทรศัพท์ รู ปที่ ก.8 แสดงหน้าวิธีออกแบบกรอบโทรศัพท์
  • 74. 62 ก.2.9 ผูใช้สามารถออกแบบกรอบโทรศัพท์ได้ตามต้องการ โดยคลิก Design จากหน้าหลัก ้ของเว็บไซต์ จากนั้นเลื อกแพคเกจราคาที่ตองการ จากนั้นเริ่ มตกแต่งกรอบโทรศัพท์ตามต้องการได้ ้สามารถเลือกรุ่ น สี โทรศัพท์ได้ เมื่อตกแต่งกรอบเสร็จแล้ว ให้กด SAVE เพือนทาการบันทึกและสังซื้อ ่ ่ รู ปที่ ก.9 แสดงหน้าออกแบบกรอบโทรศัพท์ รู ปที่ ก.10 แสดงหน้าออกแบบกรอบโทรศัพท์
  • 75. 63 ก.2.10 เมื่อลูกค้าได้ทาการเลือกสิ นค้าที่ตองการ ระบบจะแสดงหน้ารายการสั่งซื้ อสิ นค้า จะมี ้การคานวณราคารวมของสินค้าทั้งหมดและลูกค้าจะสามารถยกเลิกรายการสังซื้อทั้งหมด หรื อยกเลิกแค่ ่บางรายการ ถ้าต้องการซื้ อสิ นค้าเพิ่มเติม ให้กดปุ่ ม เลือกสิ นค้าเพิ่ม ถ้าต้องการสั่งซื้ อ ให้กดปุ่ ม สั่งซื้ อสินค้า รู ปที่ ก.11 แสดงหน้ารายการสังซื้อ ่ ก.2.11 เมื่อลูกค้าได้ทาการสังซื้อสินค้าแล้ว จะแสดงหน้าใบสั่งซื้อสินค้า ซึงมีขอมูลรายการ ่ ้ ่ ่ ู้สังซื้อ ที่อยูผรับสินค้า และราคารวม สามารถสังพิมพ์ใบสังซื้อได้ ่ ่ รู ปที่ ก.12 แสดงหน้ารายการสังซื้อเรี ยบร้อยแล้ว ่
  • 76. 64 ก.2.12 ลูกค้าสามารถยกเลิกรายการสังซื้อต่างๆได้ เมื่อเข้าสู่ระบบสมาชิก และกดปุ่ มยกเลิก ่สังซื้อสินค้า ระบบจะทาการยกเลิกรายการสังซื้อสินค้านั้นทันที ่ ่ รู ปที่ ก.13 แสดงหน้ายกเลิกรายการสังซื้อ ่
  • 77. 65 ภาคผนวก ข วิธีการติดตั้งโปรแกรมข.1 โปรแกรมที่ต้องใช้ ในระบบ ข.1.1 เครื่ องคอมพิวเตอร์ ข.1.1.1 ส่ วนของอุปกรณ์ ข.1.1.1.1 ซีพยู (CPU Central Processing Unit) Intel Celeron 1.5 GHz ี ข.1.1.1.2 หน่วยความจา (Ram-Random Access Memory) อย่างต่า 512 MB ข.1.1.1.3 ฮาร์ดดิสก์ (Hard disk) 40GB ข.1.1.2 ส่วนของโปรแกรม ข.1.1.2.1 Oracle10g ข.1.1.2.1 AppServ 2.5.10ข.2 คู่มือการติดตั้ง Oracle10g บน Window........... ........... ........... ........... ........... ........... Oracle เป็ นโปรแกรมที่ไว้เก็บข้อมูลต่างๆ ภายในเว็บไซต์ เช่น ข้อมูลสมาชิก ข้อมูลคาถามคาตอบ download Oracle10g Database ได้จาก www.oracle.com และทาการติดตั้งดังนี้........... ........... ข.2.1 กดตัวติดตั้งโปรแกรม oracle10g รอสักครู่ จะขึ้นหน้าโปรแกรมทาการตั้งค่าที่Installation Type เป็ น Standard Edition (1.10GB) และในส่วนของDatabase Password กับ ConfirmPassword ให้ใส่ tiger แล้วกด Next
  • 78. 66 รู ปที่ ข.1 หน้าแรกของโปรแกรม Oracle10gข.2.2 หลังจากกดที่ Next แล้วให้กด Install รู ปที่ ข.2 หน้าสาระสาคัญของโปรแกรม Oracle10g
  • 79. 67ข.2.3 หลังจากที่กด Install โปรแกรมจะทาการติดตั้งรอสักครู รู ปที่ ข.3 โปรแกรม Oracle10g ทาการติดตั้งข.2.4 หลังจากติดตั้งเสร็จแล้วกดที่ปุ่ม OK รู ปที่ ข.4 แสดงการตั้งค่าโปรแกรม Oracle10g
  • 80. 68 ข.2.5 สิ้นสุดขั้นตอนการติดตั้งโปรแกรม Oracle10g สาหรับขั้นตอนสุดท้ายนี้กดที่ปุ่ม Exitเพือเสร็จสิ้นการติดตั้งโปรแกรม Oracle10g ่ รู ปที่ ข.5 แสดงหน้าจอสิ้นสุดการติดตั้งโปรแกรม
  • 81. 69ข.3 คู่มือการติดตั้ง AppServ ข.3.1 ดับเบิ้ลคลิกทีไฟล์ appserv-win32-2.5.9.exe จากแผ่นติดตั้งโปรแกรม จะแสดง ่หน้าต่างการติดตั้ง ดังรู ปที่ 1 จากนั้นคลิก Next รู ปที่ ข.6 แสดงหน้าการติดตั้งโปรแกรม AppServ ข.3.2 คลิก I agree เพือดาเนินการต่อไป ่ รู ปที่ ข.7 License Agreement
  • 82. 70ข.3.3 เลือกโฟลเดอร์ที่ใช้ในการติดตั้ง AppServ รู ปที่ ข.8 โฟลเดอร์ที่ติดตั้งโปรแกรมข.3.4 แสดงโปรแกรมย่อยที่ทาการติดตั้ง รู ปที่ ข.9 โปรแกรมย่อยที่ทาการติดตั้ง
  • 83. 71 ข.3.5 ใส่คาว่า localhost ในช่อง Server Name และใส่ Email Address ของท่าน ในช่องAdministrator’s Email Address จากนั้นคลิก Next รู ปที่ ข.10 ตั้งค่า Server ข.3.6 ทาการกาหนดรหัสผ่านของฐานข้อมูล MySQL ดังรู ป จากนั้นคลิก Install รู ปที่ ข.11 กาหนดรหัสผ่านฐานข้อมูล MySQL
  • 84. 72 ข.3.7 ระบบจะดาเนินการติดตั้ง จนกระทังเรี ยบร้อย จากนั้นคลิก Finish ่ รู ปที่ ข.12 ติดตั้งโปรแกรม AppServ เสร็จเรี ยบร้อย ข.3.8 เปิ ด Internet Explorer เรี ยก http://localhost จะแสดงหน้าจอดังรู ป แสดงว่าติดตั้งAppServ เป็ นที่เรี ยบร้อย รู ปที่ ข.13 ติดตั้งโปรแกรม AppServ เสร็จเรี ยบร้อย
  • 85. 73 ประวัติผู้จัดทาโครงงานนางสาวผกาวดี บุญประคม เกิดเมื่อวันที่ 25 พฤศจิกายน 2532 ที่จังหัวดกรุ งเทพมหานคร สาเร็จการศึกษาระดับมัธยมศึกษาตอนปลายที่โรงเรี ยนราชนันทาจารย์ สามเสนวิทยาลับ2 และเข้าศึกษาในหลักสูตรวิทยาศาสตร์บณฑิตหลักสูตร 4 ปี ภาคปกติสาขาเทคโนโลยีสารสนเทศ ัและการสื่อสาร คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรี ปทุม เมื่อ ่ ้พ.ค. 2551 ปั จจุบนอาศัยอยูบานเลขที่ 341/17 ซอยวงศ์สว่าง4 ถนนวงศ์สว่าง ัแขวงบางซื่อ เขตบางซื่อ จังหวัดกรุ งเทพมหานคร 10800 นางสาวจิรพันธ์ อุดมสุขสันติ เกิดเมื่อวันที่ 3 เมษายน 2533 ที่จังหวัดกรุ งเพทมหานคร สาเร็จการศึกษาระดับ ประกาศนียบัตรวิชาชีพที่โรงเรี ยนวิบุลย์บริ หารธุรกิจรามอินทรา และเข้าศึกษาในหลักสูตรวิทยาศาสตร์บณฑิตหลักสูตร 4 ปี ภาคปกติสาขาเทคโนโลยีสารสนเทศ ัและการสื่อสาร คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรี ปทุม ่ ้เมื่อ พ.ค. 2551 ปั จจุบนอาศัยอยูบานเลขที่ 69 ซอยสุคนธสวัสดิ์ 1 ัแขวงลาดพร้าว เขตลาดพร้าว จังหวัดกรุ งเทพมหานคร 10230