Embed Size (px)
Citation preview
บทท�� 3การดำาเนิ นิงานิ
การจั�ดสร�างระบบร�านค้�าออนไลน�ของกล��มผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อยจั�งหวั�ดล�าพู!น ผ!�จั�ดทำ�าได�วัางแผนระบบแบ�งเป็'นข�(นตอนในการสร�างระบบ ด�งร!ป็ 3.1
ร�ปท�� 3.1 แผนผ�งข�(นตอนการด�าเน�นงาน ระบบร�านค้�าออนไลน�ผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อย
ศึ+กษาและเก-บรวับรวัมข�อม!ลทำ./
เก./ยวัข�องวั�เค้ราะห�ระบบงาน
ออกแบบระบบฐานข�อม!ลและเวั-บเพูจั
ป็ร�บป็ร�ง
ต�ดต�(งระบบเพู1/อทำดสอบและป็ระเม�นผล
จั�ดทำ�าเอกสารและค้!�ม1อ
น�าเสนอ
ทำดสอบการทำ�างาน
ส�(นส�ด
เร�/ม
ผ่�านิ
ไม่�
ด�าเน�นการจั�ดสร�าง
3.1 การวิ เคราะห์�และออกแบบระบบการวั�เค้ราะห�และออกแบบระบบร�านค้�าออนไลน�ผล�ตภั�ณฑ์�จั�กร
สานบ�านกอข�อย จัะม.ค้วัามส�มพู�นธ์�ก�บส�วันของล!กค้�า, เจั�าของก�จัการและเจั�าหน�าทำ./ ด�งต�อไป็น.(
3.1.1 แผนผ�งบร�บทำ (Context Diagram)
ร�ปท�� 3.2 แผนผ�งบร�บทำของระบบร�านค้�าออนไลน�ผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อย
จัากร!ป็ทำ./ 3.2 แสดงแผนผ�งบร�บทำของการสร�างระบบร�านค้�าออนไลน�ผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อย สามารถอธ์�บายได�ด�งน.(ค้1อ เจั�าของก�จัการจัะสามารถจั�ดการและเข�าใช้�งานระบบฯได�ทำ�(งหมด โดยห�วัหน�ากล��มฯได�ร�บส�ทำธ์�7เป็'นเจั�าของก�จัการ การทำ�างานค้1อเจั�าของก�จัการสามารถ ลบ แก�ไข ข�อม!ลผ!�ใช้�งานระบบได� และย�งสามารถก�าหนดให�ผ!�ใช้�งานระบบมาเป็'นเจั�าหน�าทำ./ได� ซึ่+/งเจั�าหน�าทำ./จัะต�องเป็'น
3-2
สมาช้�กก�อนแล�วัให�เจั�าของก�จัการเป็'นผ!�ให�ส�ทำธ์�7น� (น เช้�น ให�เลขาน�การของกล��มเป็'นเจั�าหน�าทำ./ เป็'นต�น โดยจัะม.การทำ�างานในระบบฯค้ล�ายก�บเจั�าของก�จัการแต�ไม�สามารถใช้�งานในส�วันของจั�ดการสมาช้�กได� และการทำ�างานในส�วันของล!กค้�าน�(นล!กค้�าสามารถเข�าช้มหร1อเล1อกส�นค้�าได�เลยแต�ถ�าต�องการส�/งซึ่1(อส�นค้�าจัะต�องสม�ค้รสมาช้�กก�อนถ+งจัะส�/งซึ่1(อส�นค้�าได�
3.1.2 การออกแบบ Data flow diagram
3-3
ร�ปท�� 3.3 แผนภัาพูแสดงการต�ดต�อข�อม!ลของระบบร�านค้�าออนไลน�ผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อย (Data flow diagram Level 0)
3-4
ร�ปท�� 3.4 แผนภัาพูแสดงข�(นตอนการสม�ค้รสมาช้�ก (Data flow diagram Level 1)
ร�ปท�� 3.5 แผนภัาพูแสดงข�(นตอนการส�/งซึ่1(อส�นค้�า (Data flow diagram Level 2)
3-5
ร�ปท�� 3.6 แผนภัาพูแสดงข�(นตอนของใบส�/งซึ่1(อส�นค้�า (Data flow diagram Level 3)
3-6
ร�ปท�� 3.7 แผนภัาพูแสดงข�(นตอนการจั�ดการส�นค้�าและสมาช้�ก (Data flow diagram Level 4)
3-7
ร�ปท�� 3.8 แผนภัาพูแสดงข�(นตอนการออกรายงาน (Data flow diagram Level 5)
3.2 การออกแบบฐานิข้�อม่�ล 3.2.1 พูจันาน�กรมข�อม!ล (Data Dictionary)
การทำ�าเอกสารอ�างอ�งช้�วัยอธ์�บายรายละเอ.ยดเก./ยวัก�บข�อม!ลในฐานข�อม!ล ของระบบร�านค้�าออนไลน�ของกล��มผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อยจั�งหวั�ดล�าพู!น โค้รงสร�างข�อม!ลสร�างข+(นโดยการน�าเอาส�วันย�อยของข�อม!ลต�(งแต� 1 ต�วัข+(นไป็ทำ./ม.ค้วัามส�มพู�นธ์�ก�นเอามารวัมเข�าด�วัยก�น เพู1/อให�ทำราบวั�าในตารางหน+/งๆน�(นป็ระกอบด�วัยข�อม!ลอะไรบ�างจัะสามารถทำ�าให�เห-นล�กษณะของข�อม!ลได�ช้�ดเจัน ซึ่+/งในระบบร�านค้�าออนไลน�ของกล��มผล�ตภั�ณฑ์�จั�กสานบ�านกอข�อยได�ออกแบบฐานข�อม!ล ป็ระกอบด�วัยตารางทำ�(งหมด 7 ตาราง ในฐานข�อม!ลช้1/อ db_kokhoi ม.ช้1/อฟิ;ลด� ค้วัามส�มพู�นธ์�ล�กษณะของข�อม!ลทำ./จั�ดเก-บ โดยม.รายละเอ.ยดด�งตารางต�อไป็น.(
ตารางทำ./ 3.1 ตาราง Member
ช้1/อตาราง Member
ค้�าอธ์�บาย ตารางสมาช้�กค้.ย�หล�ก Username
ล�าด�บทำ./
ช้1/อเขตข�อม!ล
Explanation
Data Type
Size Information
Sample data
1 Username
ช้1/อผ!�ใช้�งาน
VARCHAR
255 Joem13
2 Password
รห�สผ�าน VARCHAR
255 ********
3 Full name
ช้1/อ-
นามสก�ลVARCHAR
255 สมศึ�กด�7
3-8
4 Userlevel
ระด�บผ!�ใช้� VARCHAR
20 Admin, Admin2
5 Address
ทำ./อย!� TEXT 76 ม.1 ต.
น�(าด....6 Phone เบอร�
โทำรศึ�พูทำ�VARCHAR
25 089-XXXXXXX
7 E-mail อ.เมล� VARCHAR
ตารางทำ./ 3.2 ตาราง Products
ช้1/อตาราง Products
ค้�าอธ์�บาย ตารางส�นค้�าค้.ย�หล�ก code
ล�าด�บทำ./
ช้1/อเขตข�อม!ล
Explanation
Data Type
Size Information
Sample data
1 Code รห�สส�นค้�า
VARCHAR
11 P001
2 Name ช้1/อส�นค้�า VARCHAR
255 กระเป็<าใบตาล
3 Detail รายละเอ.ยด
VARCHAR
255 12*8 น�(วั
4 Retail price
ราค้าขายป็ล.ก
INT 11 200
3-9
5 Wholesale price
ราค้าขายส�ง
INT 11 150
6 Comment
หมายเหต� VARCHAR
255 ส�นค้�าหมด
7 Introduce
ส�นค้�าแนะน�า
INT 11 1
8 Picture ร!ป็ส�นค้�า VARCHAR
255 Imges001.jpg
9 Picture2 ร!ป็ส�นค้�า 2
VARCHAR
255 Imges010.jpg
10 Picture3 ร!ป็ส�นค้�า 3
VARCHAR
255 Imges011.jpg
11 Canselectcolor
สามารถเล1อกส.ได�
INT 1 1
ตารางทำ./ 3.3 ตาราง Order detail
ช้1/อตาราง Order detail
ค้�าอธ์�บาย ตารางรายละเอ.ยดการส�/งซึ่1(อส�นค้�าค้.ย�หล�ก Ordercode, Productcode
ล�าด�บทำ./
ช้1/อเขตข�อม!ล
Explanation
Data Type
Size Information
Sample data
1 Ordercode
รห�สการส�/งซึ่1(อ
VARCHAR
11 20110001
2 Productcode
รห�สส�นค้�า VARCHAR
11 P005
3 Amount
จั�านวัน VARCHAR
11 50
4 price ราค้า FLOAT 12,2 250.00
3-10
5 color ส. VARCHAR
50 1=3,2=7,3=2
ตารางทำ./ 3.4 ตาราง Order data
ช้1/อตาราง Order data
ค้�าอธ์�บาย ตารางข�อม!ลส�/งซึ่1(อค้.ย�หล�ก Ordercode
ล�าด�บทำ./
ช้1/อเขตข�อม!ล
Explanation
Data Type
Size Information
Sample data
1 Ordercode
รห�สการส�/งซึ่1(อ
VARCHAR
11 P001
2 Date วั�น,เด1อน,ป็= DATE 2011-02-20
3 Username
ช้1/อผ!�ใช้�งาน VARCHAR
255 Taxt1
4 Status สถานะส�นค้�า
INT 2 1
5 Complete date
วั�นทำ./ขายเสร-จัส�(น
DATE 2011-03-29
6 Saleordercode
รห�สการขาย
VARCHAR
11 20110001
ตารางทำ./ 3.5 ตาราง Temp order detail
ช้1/อตาราง Temp order detail
ค้�าอธ์�บาย รายละเอ.ยดการส�/งซึ่1(อช้�/วัค้ราวัค้.ย�หล�ก Productcode, username
ล�าด� ช้1/อเขต Explanation
Data Type
Size Informati
Sample data
3-11
บทำ./ ข�อม!ล on
1 Productcode
รห�สส�นค้�า VARCHAR
11 P005
2 Username
ช้1/อผ!�ใช้�งาน VARCHAR
255 Joem13
3 Amount
จั�านวัน INT 11 50
4 Color ส. VARCHAR
50 1=3,2=7,3=2
5 Selectdate
วั�นทำ./หย�บส�นค้�า
DATETIME
P002
ตารางทำ./ 3.6 ตาราง Webboard
ช้1/อตาราง Webboard
ค้�าอธ์�บาย กระทำ!�ถามตอบค้.ย�หล�กล�าด�บทำ./
ช้1/อเขตข�อม!ล
Explanation
Data Type
Size Information
Sample data
1 Threadid
เลขกระทำ!� VARCHAR
11 2011a1b2
2 Parent id
กระทำ!�หล�ก INT 11 กระเป็<าม.ก./แบบ
3 Header ห�วัข�อกระทำ!� VARCHAR
255 กระเป็<าม.หลายแบบ
3-12
4 Message
เน1(อหาในกระทำ!�
TEXT เช้�นทำ�ามาจัาก ใบตาล,ใบลาน
5 Username
ช้1/อผ!�ใช้�งาน VARCHAR
255 Joem13
6 Date วั�น,เด1อน,ป็= Date time
29/05/2011 03:28:12
ตารางทำ./ 3.7 ตาราง IP data
ช้1/อตาราง IP data
ค้�าอธ์�บาย ข�อม!ลไอพู.ค้.ย�หล�ก IDล�าด�บทำ./
ช้1/อเขตข�อม!ล
Explanation
Data Type
Size Information
Sample data
1 ID รห�ส VARCHAR
50 192.168.1.2
3.2.2 ER-Diagram
3-13
ร�ปท�� 3.9 แผนภัาพูแสดง ER-Diagram
3-14
ร�ปท�� 3.10 ฐานข�อม!ลระบบร�านค้�าออนไลน�ผล�ตภั�ณฑ์�จั�กรสานบ�านกอข�อย
3.3 การออกแบบโครงสร�างเวิ"บไซต์�ในการออกแบบโค้รงสร�างหน�าเวั-บเพูจัของกล��มจั�กสานบ�าน
กอข�อยได�เร�/มทำ�าจัากการออกแบบในส�วันของหน�าต�างของโป็รแกรม โดยได�แบ�งออกเป็'นส�วันต�างๆ ได� ด�งน.(
3.3.1 การออกแบบหน�าเพูจัหล�ก ม.รายละเอ.ยดด�งต�อไป็น.( 3.3.1.1 หน�าเพูจัหล�ก แสดงรายละเอ.ยดห�วัข�อต�างๆ
เช้�น หน�าหล�ก, รายการส�นค้�า, วั�ธ์.ส� /งซึ่1(อส�นค้�า, วั�ธ์.ช้�าระเง�น, เวั-บบอร�ด, ต�ดต�อเรา, ลงทำะเบ.ยน, ลงช้1/อเข�าใช้�งาน, ค้�นหาข�อม!ล เป็'นต�น
3.3.1.2 ส�วันของเน1(อหาทำ./แสดงจัะม.ส�วันของส�นค้�าขายด.และรายการส�นค้�าแนะน�า เช้�น ส�นค้�าทำ./ม.ผ!�ส� /งซึ่1(อบ�อยๆและซึ่1(อ
3-15
จั�านวันมาก, ส�นค้�าทำ./ผล�ตข+(นมาใหม�, ส�นค้�าทำ./ม.การออกแบบใหม� เป็'นต�น
ร�ปท�� 3.11 แสดงการออกแบบหน�าเพูจัหล�ก
3.3.1.3 การออกแบบหน�าเพูจั รายการส�นค้�าการออกแบบหน�าเพูจัรายการส�นค้�า ก-จัะป็ระกอบ
ไป็ด�วัย รห�สส�นค้�า, ช้1/อส�นค้�า, รายละเอ.ยดส�นค้�า, ราค้าส�ง, ราค้าป็ล.ก, หมายเหต�, ร!ป็ภัาพู
ร�ปท�� 3.12 แสดงการออกแบบหน�าเพูจั รายการส�นค้�า
3-16
3.3.1.4 การออกแบบหน�าเพูจั วั�ธ์.การส�/งซึ่1(อส�นค้�าการออกแบบหน�าเพูจัวั�ธ์.การส�/งซึ่1(อส�นค้�า จัะแสดง
ข�อม!ลเก./ยวัก�บการส�/งซึ่1(อส�นค้�า ในการเข�ามาใช้�งานเวั-บเป็'นค้ร�(งแรกเพู1/อจัะเข�าใจัในการส�/งซึ่1(อส�นค้�าของเวั-บไซึ่ต�
ร�ปท�� 3.13 แสดงการออกแบบหน�าวั�ธ์.การส�/งซึ่1(อส�นค้�า
3.3.1.5 การออกแบบหน�าเพูจัวั�ธ์.การช้�าระเง�นการออกแบบหน�าเพูจัวั�ธ์.การช้�าระเง�น จัะแสดง
ข�อม!ลเก./ยวัก�บการช้�าระเง�นโดยการโอนเง�นผ�านทำางธ์นาค้ารทำ./เราม.ไวั�ให�เล1อก
3-17
ร�ปท�� 3.14 แสดงการออกแบบหน�าวั�ธ์.การช้�าระเง�น
3.3.1.6 การออกแบบหน�าเพูจัเวั-บบอร�ดการออกแบบหน�าเวั-บบอร�ด จัะแสดงข�อม!ลก./ย
วัก�บการต�(งกระทำ!�ถามหร1อม.ข�อสงส�ยเก./ยวัก�บส�นค้�าหร1อการบร�การของเวั-บไซึ่ต�แล�วัผ!�ด!แลระบบก-จัะตอบค้�าถามน�(นจัากทำางหน�าเวั-บบอร�ด
ร�ปท�� 3.15 แสดงการออกแบบหน�าเวั-บบอร�ด
3.3.1.7 การออกแบบหน�าเพูจัต�ดต�อเรา
3-18
การออกแบบหน�าต�ดต�อเรา ก-จัะแสดงข�อม!ลเก./ยวัก�บข�อม!ลการต�ดต�อก�บทำางกล��มจั�กรสานบ�านกอข�อยข�อม!ลทำ./ให�ไวั�น� (นจัะต�ดต�อก�บห�วัหน�ากล��มฯ
ร�ปท�� 3.16 แสดงการออกแบบหน�าต�ดต�อเรา3.3.1.8 การออกแบบหน�าเพูจัลงทำะเบ.ยน
การออกแบบหน�าเพูจัลงทำะเบ.ยน จัะแสดงช้�องให�กรอกข�อม!ลส�วันต�วัในการลงทำะเบ.ยนเพู1/อทำ./จัะเป็'นสมาช้�กก�บเวั-บไซึ่ต�น.(และเพู1/อทำ./จัะทำ�าการส�/งซึ่1(อส�นค้�าในเวั-บไซึ่ต�น.(ได�เม1/อสม�ค้รเสร-จัแล�วัก-จัะได� Username Password เพู1/อใช้�งานค้ร�(งต�อไป็ และข�อม!ลทำ./ได�กรอกสม�ค้รน�(นก-จัะน�าเป็'นข�อม!ลการส�งส�นค้�าไป็ให�เม1/อส�/งซึ่1(อส�นค้�าก�บทำางกล��มฯ
3-19
ร�ปท�� 3.17 แสดงการออกแบบหน�าลงทำะเบ.ยน
3.3.2 การออกแบบหน�าเพูจัหล�ก User Login
3.3.2.1 การออกแบบหน�าเพูจัหล�ก User Login จัะแสดงรายละเอ.ยดห�วัข�อต�างๆ เช้�น หน�าหล�ก, รายการส�นค้�า, รายการส�/งซึ่1(อ, วั�ธ์.ส� /งซึ่1(อส�นค้�า, วั�ธ์.ช้�าระเง�น, เวั-บบอร�ด, ต�ดต�อเรา, ข�อม!ลใช้�งาน, ออกจัากระบบ, ช้1/อผ!�เข�าใช้�งาน, ค้�นหาข�อม!ล เป็'นต�น
ร�ปท�� 3.18 แสดงการออกแบบหน�าหล�ก User Login
3-20
3.3.2.2 การออกแบบหน�าเพูจั รายการส�นค้�าการออกแบบหน�าเพูจัรายการส�นค้�า ก-จัะป็ระกอบ
ไป็ด�วัย รห�สส�นค้�า, ช้1/อส�นค้�า, รายละเอ.ยดส�นค้�า, ราค้าส�ง, ราค้าป็ล.ก, หมายเหต�, ร!ป็ภัาพู
ร�ปท�� 3.19 แสดงการออกแบบหน�าเพูจั รายการส�นค้�า
3.3.2.3 การออกแบบหน�าเพูจัรายการส�/งซึ่1(อการออกแบบหน�าเพูจัรายการส�/งซึ่1(อจัะม.ราย
ละเอ.ยดของส�นค้�าต�างๆ ทำ./ผ!�ใช้�งานเล1อกหย�บส�นค้�า ในระบบน.(ก-สามารถเพู�/ม ลบ แก�ไข รายละเอ.ยดของส�นค้�าทำ./หย�บมาได� และม.วั�ธ์.การส�/งซึ่1(อส�นค้�าให�ด�วัยเพู1/อค้วัามเข�าใจัในการส�/งซึ่1(อส�นค้�า
3-21
ร�ปท�� 3.20 แสดงการออกแบบหน�าเพูจัรายการส�/งซึ่1(อ
3.3.2.4 การออกแบบหน�าเพูจัรายการส�/งซึ่1(อย�อนหล�งการออกแบบรายการส�/งซึ่1(อย�อนหล�ง จัะม.ราย
ละเอ.ยดของส�นค้�า, เลขทำ./ส� /งซึ่1(อ, วั�นทำ./ส� /งซึ่1(อ, สถานะส�นค้�า
ร�ปท�� 3.21 แสดงการออกแบบหน�าเพูจัรายการส�/งซึ่1(อย�อนหล�ง3.3.2.5 การออกแบบหน�าเพูจัข�อม!ลผ!�ใช้�งาน
3-22
การออกแบบหน�าเพูจัข�อม!ลผ!�ใช้�งาน ก-จัะแสดงรายละเอ.ยดของสมาช้�กหร1อป็ระวั�ต�ส�วันต�วัของสมาช้�ก เพู1/อจัะน�าข�อม!ลเหล�าน.(ไป็เป็'นข�อม!ลทำ./จัะส�งส�นค้�าให�สมาช้�กหร1อล!กค้�า
ร�ปท�� 3.22 แสดงการออกแบบหน�าเพูจัข�อม!ลผ!�ใช้�งาน3.3.3 การออกแบบหน�าเพูจัหล�ก Admin Login
3.3.3.1 การออกแบบหน�าเพูจัหล�ก Admin Login
จัะแสดงรายละเอ.ยดห�วัข�อต�างๆ เช้�น หน�าหล�ก, จั�ดการส�นค้�า, จั�ดการส�นค้�าแนะน�า, รายการส�/งซึ่1(อทำ�(งหมด, สร�ป็รายการขาย, เวั-บบอร�ด, ข�อม!ลผ!�ใช้�งาน, จั�ดการ User, ออกจัากระบบ, ช้1/อผ!�เข�าใช้�งาน, ค้�นหาข�อม!ล เป็'นต�น
3-23
ร�ปท�� 3.23 แสดงการออกแบบหน�าเพูจัหล�ก Admin Login
3.3.3.2 การออกแบบหน�าเพูจัจั�ดการส�นค้�าการออกแบบหน�าเพูจัจั�ดการส�นค้�า จัะม.การแสดง
รายละเอ.ยดส�นค้�าและการเพู�/ม แก�ไข ลบ ส�นค้�าจัะรวัมก�นอย!�ในหน�าน.(ทำ�(งหมด
ร�ปท�� 3.24 แสดงการออกแบบหน�าเพูจัจั�ดการส�นค้�า
3.3.3.3 การออกแบบหน�าเพูจัจั�ดการส�นค้�าแนะน�า
3-24
การออกแบบหน�าเพูจัจั�ดการส�นค้�าแนะน�า จัะเป็'นการเล1อกส�นค้�าช้�(นไหนทำ./จัะแนะน�าให�ล!กค้�า เช้�น ส�นค้�าด.ไซึ่น�ใหม�, ส�นค้�าใหม�, ส�นค้�าป็ระจั�าทำ�องถ�/น เป็'นต�น
ร�ปท�� 3.25 แสดงการออกแบบหน�าเพูจัจั�ดการส�นค้�าแนะน�า
3.3.3.4 การออกแบบหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าป็>จัจั�บ�น
การออกแบบหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าป็>จัจั�บ�น จัะแสดงรายละเอ.ยดใบส�/งซึ่1(อส�นค้�าของล!กค้�าทำ./ส� /งมา จัะม.ข�อม!ลวั�นทำ./ส� /งซึ่1(อ, เลขทำ./ส� /งซึ่1(อ, ผ!�ส� /งซึ่1(อ และหน�าน.(ย�งสามารถก�าหนดสถานะของส�นค้�าในใบส�/งซึ่1(อแต�ละไป็ได�
3-25
ร�ปท�� 3.26 แสดงการออกแบบหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าป็>จัจั�บ�น
3.3.3.5 การออกแบบหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าย�อนหล�ง
การออกแบบหน�าเพูจัการส�/งซึ่1(อส�นค้�าย�อนหล�ง จัะแสดงรายละเอ.ยดของใบส�/งซึ่1(อส�นค้�าทำ./ม.สถานการณ�ส�งส�นค้�าแล�วั ก-จัะม.รายละเอ.ยด เช้�น เลขทำ./ส� /งซึ่1(อ, วั�นทำ./ส� /งซึ่1(อ, วั�นทำ./ส�งของ, ผ!�ส� /งซึ่1(อ, จั�านวันเง�น, เลขทำ./การขาย เป็'นต�น
3-26
ร�ปท�� 3.27 แสดงการออกแบบหน�าเพูจัรายการส�/งซึ่1(อย�อนหล�ง
3.3.3.6 การออกแบบหน�าเพูจัสร�ป็รายการขายการออกแบบหน�าเพูจัสร�ป็รายการขาย จัะแสดง
รายละเอ.ยดของการจั�าหน�ายส�นค้�า ป็ระจั�าเด1อน,ป็= ได�มากน�อยเทำ�าใด สามารถเล1อกด!ได�ทำ�(งเป็'นเด1อน,ป็=ได�ตามต�องการ
3-27
ร�ปท�� 3.28 แสดงการออกแบบหน�าเพูจัสร�ป็รายการขายป็ระจั�าเด1อน
ร�ปท�� 3.29 แสดงการออกแบบหน�าเพูจัสร�ป็รายการขายป็ระจั�าป็=
3-28
3.3.3.7 การออกแบบหน�าเพูจัจั�ดการ User
การออกแบบจั�ดการ User จัะแสดงข�อม!ลรายละเอ.ยดของสมาช้�กทำ�(งหมด และสามารถจั�ดการสมาช้�ก เป็'นการเป็ล./ยนระด�บ User ธ์รรมดาเป็'น Admin ระด�บ 2 ได� เพู1/อจัะช้�วัย admin ในการทำ�างาน และย�งสามารถลบข�อม!ลสมาช้�กทำ./ไม�ม.ต�วัตนจัร�งหร1อไม�ม.ผ!�ใช้�งานได�ตามต�องการ
ร�ปท�� 3.30 แสดงการออกแบบหน�าเพูจัจั�ดการ User
3.3.4 การออกแบบหน�าเพูจัหล�ก Admin ระด�บ 2 Login
3.3.4.1 การออกแบบหน�าเพูจัหล�ก Admin ระด�บ 2
Login จัะแสดงการทำ�างานเหม1อนก�บทำ�างานแทำน Admin แต�ไม�สามารถจั�ดการ User ได� ม.รายละเอ.ยดห�วัข�อต�างๆ เช้�น หน�าหล�ก,
จั�ดการส�นค้�า, จั�ดการส�นค้�าแนะน�า, รายการส�/งซึ่1(อทำ�(งหมด, สร�ป็รายการขาย, เวั-บบอร�ด, ข�อม!ลผ!�ใช้�งาน, ออกจัากระบบ, ช้1/อผ!�เข�าใช้�งาน, ค้�นหาข�อม!ล เป็'นต�น
3-29
ร�ปท�� 3.31 แสดงการออกแบบหน�าเพูจัหล�ก Admin ระด�บ 2 Login
3.4 การสร�างเวิ"บไซต์� ในการสร�างเวั-บไซึ่ต�ของกล��มผล�ตภั�ณฑ์�จั�กรสานบ�านกอข�อย จัะต�องค้�าน+งถ+งระบบการทำ�างานอย!� 3 ส�วัน ค้1อ
3.4.1 ส�วันของเจั�าของก�จัการ (ADMIN) ส�วันน.(จัะค้�าน+งถ+งการใช้�งานได�สะดวักและจั�ดการระบบได�ทำ�กส�วันของเวั-บไซึ่ต� ค้1อ สามารถเพู�/ม แก�ไขหร1อลบข�อม!ลส�นค้�า, จั�ดการส�นค้�าแนะน�า, จั�ดการสมาช้�ก, ทำ�าการตรวัจัสอบผ!�เข�ามาต�(งค้�าถามในเวั-บบอร�ด, ป็ร�บป็ร�งสถานะของส�นค้�า และด!รายงานสร�ป็การขายและการส�/งซึ่1(อของล!กค้�าได�
3.4.2 ส�วันของผ!�ด!แลระบบ ส�วันน.(ก-ทำ�างานค้ล�ายๆก�บเจั�าของก�จัการเพูราะจัะช้�วัยเจั�าของก�จัการทำ�างานในเวั-บไซึ่ต� ก-จัะม.การทำ�างาน ค้1อ สามารถเพู�/ม แก�ไขหร1อลบข�อม!ลส�นค้�า, จั�ดการส�นค้�าแนะน�า, ทำ�าการตรวัจัสอบผ!�เข�ามาต�(งค้�าถามในเวั-บบอร�ด, ป็ร�บป็ร�ง
3-30
สถานะของส�นค้�า และด!รายงานสร�ป็การขายและการส�/งซึ่1(อของล!กค้�าได�
3.4.3 ส�วันของผ!�ใช้�งานทำ�/วัไป็ ส�วันน.(จัะเป็'นการค้�าน+งถ+งการใช้�งานทำ./สะดวักแก�ผ!�ใช้�บร�การโดยการแสดงรายละเอ.ยดข�อม!ลส�นค้�าต�างๆ ทำ./หน�ารายการส�นค้�าก-สามารถค้ล�กเข�าไป็ด!ได�ในหน�าแรก และหน�าแรกก-จัะม.รายการส�นค้�าทำ./ทำางกล��มฯ จั�ดเป็'นส�นค้�าแนะน�า, ส�นค้�าขายด.ทำ./ค้นน�ยมเล1อกซึ่1(อไวั�ให�เพู1/อเป็'นการแนะน�าส�นค้�าให�ก�บล!กค้�าได�ต�ดส�นใจั
ข�(นตอนแรก ต�องต�ดต�(งโป็รแกรมทำ./ใช้�งานทำ�(งหมดก�อน ค้1อ 1.โป็รแกรม Appserv 2.5.10 ส�าหร�บจั�าลองเค้ร1/องค้อมพู�วัเตอร�ให�เป็'น web server, 2.โป็รแกรม Adobe Dreamweaver
CS4 โป็รแกรมสร�างเวั-บไซึ่ต�, 3.MySQL Front เป็'นระบบจั�ดการและสร�างฐานข�อม!ล และ 4.โป็รแกรม Adobe Photoshop cs4
โป็รแกรมตกแต�งร!ป็ภัาพูและด�ดแป็ลงร!ป็ภัาพูเม1/อต�ดต�(งเสร-จัแล�วัก-ทำ�าการสร�างช้�(นงานได�
การสร�างหน�าโฮมเพูจัโดยการใช้�โป็รแกรม Adobe
Dreamweaver CS4 เข�าส!�โป็รแกรมโดยค้ล�ก Start >
Programs > adobe Dreamweaver CS4 จัะป็รากฏหน�าตาโป็รแกรมด�งร!ป็ 3.38
3-31
ร�ปท�� 3.32 แสดงหน�าของโป็รแกรม adobe Dreamweaver CS4
หล�งจัากเข�าส!�โป็รแกรม Adobe Dreamweaver CS4
แล�วัก-สามารถสร�างโฮมเพูจัโดยการพู�มพู� Code และ Copy code
จัากทำ./อ1/นแล�วัน�ามาด�ดแป็ลงตกแต�ง ด�งร!ป็ทำ./ 3.39
3-32
ร�ปท�� 3.33 แสดงการเข.ยนและด�ดแป็ลง Code โป็รแกรม
3.4.4 การสร�างฐานข�อม!ลโดยการใช้�โป็รแกรม MySQL-
Front ม.วั�ธ์.การเข�าส!�หน�าโป็รแกรมโดย Start > Programs >
MySQL-Front > MySQL-Front จัะป็รากฏหน�าตาโป็รแกรม ด�งร!ป็ทำ./ 3.40
3-33
ร�ปท�� 3.34 แสดงหน�าโป็รแกรม MySQL-Front
หล�งจัากเป็;ดโป็รแกรม MySQL-Front แล�วั ก-สามารถสร�างฐานข�อม!ลโดยการค้ล�กทำ./ NEW… แล�วัต�(งช้1/อและต�(งค้�าต�าง ๆ แล�วั ค้ล�ก OK ก-จัะได�ฐานข�อม!ล ด�งร!ป็ทำ./ 3.41
ร�ปท�� 3.35 แสดงหน�าฐานข�อม!ลของโป็รแกรม MySQL-Front
3-34
หล�งจัากได�เป็;ดโป็รแกรม MySQL-front และ Adobe
Dreamweaver CS4 ก-ด�าเน�นการสร�าง Database ทำ./ต�องการและด�าเน�นการสร�างโฮมเพูจัทำ./ต�องการโดยการเร�/มทำ./การสร�างตาราง สร�างเลเยอร� สร�างเฟิรม โดยการเข.ยน Code และน�าร!ป็ภัาพูทำ./ต�องการมาใส�ในโป็รแกรมโดยไม�ต�องเข.ยน Code ก-ได� น�ามาใส�ได�เลย แล�วัทำ�าการเข.ยน Code เช้1/อมต�อก�บ Database ให�ใช้�งานได�อย�างสมบ!รณ� เม1/อได�สร�างหน�าโฮมเพูจัต�างๆ และเช้1/อมต�อ Database เสร-จัแล�วั ก-จัะได�ผลงานทำ./สร�างข+(นด�งร!ป็ทำ./ 3.42
ร�ปท�� 3.36 แสดงการเข.ยน Code และการสร�างช้�(นงาน
เม1/อทำ�าการสร�างช้�(นงาน หร1อเข.ยน Code เสร-จัแล�วัทำ�าการ save
แล�วั สามารถด!ผลการทำ�างานโดยการด!ทำ./โป็รแกรม Internet
Explorer แล�วัพู�มพู�ทำ./ URL เป็'น Localhost ก-จัะแสดงหน�าโฮมเพูจัออกมาให�ด!ได�
3-35
3.5 ทดำสอบการทางานิ3.5.1 จัากร!ป็ทำ./ 3.37 เป็'นการแสดงเพูจัหน�าแรกทำ./ได�จัาก
การสร�างและออกแบบ ป็ระกอบด�วัยห�วัข�อต�างๆ และแสดงรายการส�นค้�าขายด. 5 อ�นด�บและรายการส�นค้�าแนะน�า
ร�ปท�� 3.37 แสดงหน�าแรก
3.5.2 จัากร!ป็ทำ./ 3.38 แสดงหน�าเพูจัรายการส�นค้�า จัะแสดงรายการส�นค้�าและรายละเอ.ยดของส�นค้�าทำ./ซึ่�อนอย!�ข�างในต�วัร!ป็ส�นค้�าเม1/อค้ล�กทำ./ร!ป็ส�นค้�าก-จัะแสดงร!ป็ใหญ่�และข�อม!ลส�นค้�าออกมา
3-36
ร�ปท�� 3.38 แสดงหน�าเพูจัรายการส�นค้�า3.5.3 จัากร!ป็ทำ./ 3.39 แสดงหน�าตาของวั�ธ์.การส�/งซึ่1(อ จัะม.
รายละเอ.ยดวั�ธ์.การส�/งซึ่1(อส�นค้�าจัากทำางเวั-บน.(
ร�ปท�� 3.39 แสดงหน�าเพูจัวั�ธ์.การส�/งซึ่1(อ
3-37
3.5.4 จัากร!ป็ทำ./ 3.40 แสดงหน�าตาของวั�ธ์.การช้�าระเง�น จัะแสดงรายละเอ.ยดการช้�าระเง�นผ�านทำางธ์นาค้ารโดยการโอนเง�นมาย�งบ�ญ่ช้.ธ์นาค้ารทำ./ทำางกล��มฯได�จั�ดเตร.ยมไวั�ให�
ร�ปท�� 3.40 แสดงหน�าเพูจัวั�ธ์.การช้�าระเง�น3.5.5 จัากร!ป็ทำ./ 3.41 แสดงหน�าตาเวั-บบอร�ด จัะม.ราย
ละเอ.ยดของการต�(งค้�าถามหร1อกระทำ!�ถามตอบต�างๆ ของผ!�ทำ./เข�ามาต�(งค้�าถามหร1อเข�ามาต�ช้มส�นค้�าและเจั�าของก�จัการหร1อผ!�ด!แลระบบจัะเป็'นผ!�ตอบกล�บตามกระทำ!�ต�างๆ
3-38
ร�ปท�� 3.41 แสดงหน�าเพูจัเวั-บบอร�ด3.5.6 จัากร!ป็ทำ./ 3.42 แสดงหน�าตาต�ดต�อเรา แสดงราย
ละเอ.ยดข�อม!ลของผ!�น�าของกล��มจั�กสานบ�านกอข�อยเพู1/อทำ./ล!กค้�าจัะต�ดต�อไป็ย�งกล��มฯได�สะดวัก
ร�ปท�� 3.42 แสดงหน�าต�ดต�อเรา
3-39
3.5.7 จัากร!ป็ทำ./ 3.43 แสดงหน�าเพูจัการลงทำะเบ.ยนสม�ค้รสมาช้�กใหม� ในน.(จัะให�กรอกข�อม!ลส�วันต�วัของผ!�ทำ./จัะมาสม�ค้รสมาช้�กตามทำ./เวั-บได�ก�าหนดไวั�
ร�ปท�� 3.43 แสดงหน�าเพูจัลงทำะเบ.ยน3.5.8 จัากร!ป็ทำ./ 3.44 แสดงหน�าเพูจัหน�าแรกของ User
Login จัะแสดงรายละเอ.ยดของส�นค้�าขายด., ส�นค้�าแนะน�าและ Link
ต�างๆ ของเวั-บไซึ่ต�
3-40
ร�ปท�� 3.44 แสดงหน�าเพูจัหน�าแรกการ User Login
3.5.9 จัากร!ป็ทำ./ 3.45 แสดงหน�าเพูจัรายการส�นค้�าของ User Login ก-จัะแสดงรายละเอ.ยดของส�นค้�าแต�ละช้น�ดถ�าค้ล�กทำ./ร!ป็ส�นค้�าก-จัะแสดงร!ป็ส�นค้�าขนาดใหญ่�ข+(นมาให�ด!และจัะม.ร!ป็ของส�นค้�าทำางด�านต�างๆ ให�ด!และย�งม.รายละเอ.ยดของส�นค้�าเพู�/มเต�มให�เป็'นแนวัทำางการต�ดส�นใจัส�/งซึ่1(อส�นค้�า
3-41
ร�ปท�� 3.45 แสดงหน�าเพูจัรายการส�นค้�าของ User Login
3.5.10 จัากร!ป็ทำ./ 3.46 แสดงหน�าเพูจัรายการส�/งซึ่1(อของ User Login ก-จัะแสดงรายละเอ.ยดของส�นค้�าทำ./ล!กค้�าได�หย�บส�นค้�าใส�ตะกร�าและสามารถเพู�/มจั�านวันส�นค้�า, แก�ไขส�นค้�าหร1อส�นค้�าช้�(นไหน เล1อกส.ได�ก-จัะสามารถเล1อกส.ได�ตามทำ./กล��มฯได�จั�ดส.ไวั�ให�
3-42
ร�ปท�� 3.46 แสดงหน�าเพูจัรายการส�/งซึ่1(อของ User Login
3.5.11 จัากร!ป็ทำ./ 3.47 แสดงหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าย�อนหล�งของ User Login ก-จัะแสดงรายละเอ.ยดใบส�/งซึ่1(อส�นค้�าทำ./ล!กค้�าได�ส� /งซึ่1(อส�นค้�าไป็แล�วัในน.(ก-จัะม.ส�นค้�าทำ./ล!กค้�าได�ส� /งซึ่1(อและม.สถานะของส�นค้�าให�ตรวัจัสอบวั�าตอนน.(สถานะของส�นค้�าน�(นเป็'นอย�างไรบ�างแล�วั เช้�น เป็'นสถานะย1นย�นการส�/งซึ่1(อถ�าเป็'นสถานะน.(ล!กค้�าสามารถลบใบส�/งซึ่1(อส�นค้�าน.(ได� แต�ถ�าเป็'นสถานะก�าล�งด�าเน�นการผล�ตล!กค้�าจัะไม�สามารถลบได�เพูราะล!กค้�าได�จั�ายเง�นแล�วั และถ�าเป็'นสถานะส�งส�นค้�าแล�วัแสดงวั�าทำางกล��มฯ ได�ส�งส�นค้�าให�ล!กค้�าแล�วัรอร�บได�เลย
ร�ปท�� 3.47 แสดงหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าย�อนหล�งของ User Login
3.5.12 จัากร!ป็ทำ./ 3.48 แสดงหน�าเพูจัข�อม!ลผ!�ใช้�งานของ User Login จัะแสดงรายละเอ.ยดข�อม!ลของผ!�ใช้�งานระบบ ในน.(สามารถทำ./จัะแก�ไขข�อม!ลส�วันต�วัของผ!�ใช้�งานได� หร1อจัะเป็ล./ยนรห�สผ�านก-ได�
3-43
ร�ปท�� 3.48 แสดงหน�าเพูจัข�อม!ลผ!�ใช้�งาน User Login
3.5.13 จัากร!ป็ทำ./ 3.49 แสดงหน�าเพูจัหน�าแรกของ ADMIN จัะแสดงรายละเอ.ยดห�วัข�อต�างๆ เช้�น หน�าหล�ก, จั�ดการส�นค้�า, จั�ดการส�นค้�าแนะน�า, รายการส�/งซึ่1(อทำ�(งหมด, สร�ป็รายการขาย, เวั-บบอร�ด, ข�อม!ลผ!�ใช้�งาน, จั�ดการ User, ออกจัากระบบ
ร�ปท�� 3.49 แสดงหน�าเพูจัหน�าแรกของ ADMIN
3-44
3.5.14 จัากร!ป็ทำ./ 3.50 แสดงหน�าเพูจัจั�ดการส�นค้�า จัะแสดงการจั�ดการส�นค้�าของเจั�าของก�จัการ (ADMIN) ในน.(สามารถ เพู�/ม ลบ แก�ไข ส�นค้�าและรายละเอ.ยดของส�นค้�าแต�ละช้น�ดได�
ร�ปท�� 3.50 แสดงหน�าเพูจัจั�ดการส�นค้�า
3.5.15 จัากร!ป็ทำ./ 3.51 แสดงหน�าเพูจัจั�ดการส�นค้�าแนะน�า จัะแสดงรายละเอ.ยดของส�นค้�าต�างๆ ของกล��มฯทำ./ได�เพู�/มเข�าระบบและในหน�าน.(ก-จัะเป็'นการเล1อกส�นค้�าทำ./ทำางกล��มฯอาจัจัะผล�ตมาใหม�หร1อด�ดแป็ลงด.ไซึ่น�ใหม�ๆ ออกมา เจั�าของก�จัการก-จัะแนะน�าส�นค้�าน.(ให�ก�บล!กค้�าได�ด!ก�อนเพู1/อจัะได�เป็'นข�อม!ลในการต�ดส�นใจัในการส�/งซึ่1(อส�นค้�า
3-45
ร�ปท�� 3.51 แสดงหน�าเพูจัจั�ดการส�นค้�าแนะน�า
3.5.16 จัากร!ป็ทำ./ 3.52 แสดงหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าป็>จัจั�บ�น จัะแสดงรายการส�/งซึ่1(อส�นค้�าทำ./ล!กค้�าได�ทำ�าการย1นย�นการส�/งซึ่1(อมาแล�วั เจั�าของก�จัการก-จัะด!วั�าม.ส�นค้�าอะไรบ�างและรอให�ล!กค้�าโทำรมาย1นย�นการช้�าระเง�นเม1/อล!กค้�าย1นย�นการช้�าระเง�นเสร-จัแล�วัเจั�าของก�จัการก-จัะเป็ล./ยนสถานะเป็'นก�าล�งด�าเน�นการผล�ตและสถานะส�งของแล�วัเม1/อได�ส�งของแล�วั
3-46
ร�ปท�� 3.52 แสดงหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าป็>จัจั�บ�น3.5.17 จัากร!ป็ทำ./ 3.53 แสดงหน�าเพูจัรายการส�/งซึ่1(อส�นค้�า
ย�อนหล�ง จัะแสดงรายละเอ.ยดของใบส�/งซึ่1(อส�นค้�าทำ./ม.สถานการณ�ส�งส�นค้�าแล�วั จัะม.รายละเอ.ยด เช้�น เลขทำ./ส� /งซึ่1(อ, วั�นทำ./ส� /งซึ่1(อ, วั�นทำ./ส�งของ, ผ!�ส� /งซึ่1(อ, จั�านวันเง�น, เลขทำ./การขาย และย�งสามารถตรวัจัด!ใบส�/งซึ่1(อส�นค้�าทำ./ส�งส�นค้�าแล�วัย�อนหล�งไป็ได� 4 ป็=
3-47
ร�ปท�� 3.53 แสดงหน�าเพูจัรายการส�/งซึ่1(อส�นค้�าย�อนหล�ง
3.5.18 จัากร!ป็ทำ./ 3.54 แสดงหน�าเพูจัสร�ป็รายการขายป็ระจั�าเด1อน แสดงรายละเอ.ยดของการขายส�นค้�าไป็ทำ�(งหมดและสามารถเล1อกด!เป็'นรายเด1อนได� จัะได�ร! �วั�าใน 1 เด1อนขายส�นค้�าไป็เทำ�าไหร�อะไรบ�าง เพู1/อเป็'นข�อม!ลของกล��มจั�กรสานบ�านกอข�อย
3-48
ร�ปท�� 3.54 แสดงหน�าเพูจัสร�ป็รายการขายป็ระจั�าเด1อน
3.5.19 จัากร!ป็ทำ./ 3.55 แสดงหน�าเพูจัสร�ป็รายการขายป็ระจั�าป็= แสดงรายละเอ.ยดของการขายส�นค้�าไป็ทำ�(งหมดและสามารถเล1อกด!เป็'นรายป็=ได� จัะได�ร! �วั�าใน 1 ป็=ม.ยอดการขายส�นค้�าไป็เทำ�าไหร�อะไรบ�าง เพู1/อเป็'นข�อม!ลของกล��มจั�กรสานบ�านกอข�อย
ร�ปท�� 3.55 แสดงหน�าเพูจัสร�ป็รายการขายป็ระจั�าป็=3.5.20 จัากร!ป็ทำ./ 3.56 แสดงรายละเอ.ยดหน�าเพูจัจั�ดการ
User แสดงข�อม!ลของสมาช้�กทำ�(งหมด และสามารถจั�ดการสมาช้�ก เป็'นการเป็ล./ยนระด�บ User ธ์รรมดาเป็'น ADMIN ระด�บ 2 ได� เพู1/อจัะช้�วัย admin ในการทำ�างาน และย�งสามารถลบข�อม!ลสมาช้�กทำ./ไม�ม.ต�วัตนจัร�งหร1อไม�ม.ผ!�ใช้�งานได�ตามต�องการ
3-49
ร�ปท�� 3.56 แสดงหน�าเพูจัจั�ดการ User
3.5.21 จัากร!ป็ทำ./ 3.57 แสดงหน�าเพูจัหน�าแรกของ ADMIN ระด�บ 2 แสดงการทำ�างานเหม1อนก�บทำ�างานแทำน ADMIN
แต�ไม�สามารถจั�ดการ User ได� ม.รายละเอ.ยดห�วัข�อต�างๆ ก-จัะเหม1อนก�บของ ADMIN
ร�ปท�� 3.57 แสดงหน�าเพูจัหน�าแรกของ ADMIN ระด�บ 2
3-50
