frontend management system for a grocery store

ระบบบรหารจดการหนารานขายของช า Frontend Management System for a Grocery Store

นาย ธนากร แซล 5904800014 นาย จรพฒน อวมมน 5904800022

ปรญญานพนธนเปนสวนหนงของการศกษาตามหลกสตรปรญญาวทยาศาสตรบณฑต ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร

มหาวทยาลยสยาม ปการศกษา 2563

ก

หวขอปรญญานพนธ ระบบบรหารจดการหนารานขายของช า หนวยกตของปรญญานพนธ 3 หนวยกต รายชอคณะผจดท า นาย ธนากร แซล 5804800014

นาย จรพฒน อวมมน 5804800022 อาจารยทปรกษา อาจารย ธนาภรณ รอดชวต ระดบการศกษา วทยาศาสตรบณฑต ภาควชา วทยาการคอมพวเตอร ปการศกษา 2563

บทคดยอ

ปรญญานพนธนมวตถประสงคเพอพฒนาระบบบรหารจดการหนารานขายของช า ณ

ปจจบนนการซอขายของจากรานคา และรานสะดวกซอ มกมการจดเกบขอมล หรอจดการการซอขายของหนาราน การค านวณเงนตาง ๆ ดวยมอ ท าใหยากตอการจดการขอมลตาง ๆ ดงนนทางคณะผจดท าจงไดท าการพฒนาระบบบรหารจดการหนารานขายของช า โดยแบงการท างานออกเปน 2 สวนหลก ประกอบดวย สวนท 1 ส าหรบผดแลระบบ (เจาของราน) โดยสามารถตรวจสอบและจดการกบขอมลการสงซอสนคา เชคจ านวนของในคลงสนคา เพม ลบ และแกไขสนคา และสามารถออกรายงานได สวนท 2 ส าหรบพนกงาน โดยสามารถใชหนาขายสนคา ออกใบเสรจการขายสนคา และเพม ลบ และแกไขสนคา โดยระบบพฒนาในรปแบบของเวบแอปพลเคชน ท างานผานเวบเบราวเซอร ดวยภาษา HTML, PHP, JavaScript, CSS และ JQuery ระบบจดการฐานขอมลดวย MariaDB จดการขอมลดวยภาษา SQLโดยระบบสามารถชวยแกปญหาในปจจบนได ท าใหลดการเกดปญหาจากการท างานแบบเดมไดอยางมาก ลดขอผดพลาดในการท างาน

ค าส าคญ : รานคา/ รานสะดวกซอ/ ระบบขายหนาราน

ค

กตตกรรมประกาศ (Acknowledgment)

การจดท าปรญญานพนธฉบบนส าเรจไดนน คณะผจดท าไดรบความกรณาจาก อาจารยผสอนทกทานทใหขอมลตาง ๆ สงผลใหคณะผจดท าไดรบความรและประสบการณตาง ๆ ทมคามากมายส าหรบปรญญานพนธฉบบนส าเรจลงไดดวยดจากความรวมมอและสนบสนนจากหลายฝายดงน

1. อาจารย ธนาภรณ รอดชวต อาจารยทปรกษา คณะผจดท าใครขอขอบพระคณคณะกรรมการสอบปรญญานพนธ ทไดใหค าแนะน า

ส าคญเพอใหการสอบปรญญานพนธฉบบน และผมสวนรวมทกทาน รวมทงผทไมไดกลาวนาม ทมสวนรวมในการใหขอมลใหความชวยเหลอ และเปนทปรกษาใหค าแนะน าตาง ๆ จนท าใหงานทกอยางประสบความส าเรจไปดวยด และท ารายงานฉบบนจนเสรจสมบรณ ซงคณะผ จดท าขอขอบพระคณเปนอยางสงไว ณ ทนดวย

คณะผจดท า

นาย ธนากร แซล นาย จรพฒน อวมมน

สารบญ หนา

บทคดยอ ...........................................................................................................................................ก Abstract ............................................................................................................................................ข กตตกรรมประกาศ (Acknowledgement) ..........................................................................................ค บทท 1 บทน า .................................................................................................................................... 1

1.1 ทมาของการพฒนาระบบ ................................................................................................. 1 1.2 วตถประสงคของภาคนพนธ ............................................................................................. 1 1.3 ขอบเขตภาคนพนธ ........................................................................................................... 2 1.4 ประโยชนทคาดวาจะไดรบ .............................................................................................. 2 1.5 ขนตอนและวธการด าเนนงานปรญญานพนธ................................................................... 2 1.5.1 การรวบรวมความตองการและการศกษาขอมล ....................................................... 2 1.5.2 การวเคราะหระบบ .................................................................................................. 2 1.5.3 การออกแบบระบบ .................................................................................................. 3 1.5.4 การพฒนาระบบ ...................................................................................................... 3 1.5.5 การทดสอบระบบ .................................................................................................... 4 1.5.6 การจดท าเอกสาร ..................................................................................................... 4 1.6 แผนและระยยเวลาในการด าเนนงานปรญญานพนธ ........................................................ 4 1.7 อปกรณและเครองมอทใชในการพฒนาระบบ ................................................................. 5 1.7.1 ฮารดแวร................................................................................................................. 5 1.7.2 ซอฟตแวร............................................................................................................... 5 1.8 อปกรณและเครองมอทรองรบระบบ............................................................................... 5 1.8.1 ฮารดแวร................................................................................................................. 5 1.8.2 ซอฟตแวร............................................................................................................... 5

บทท 2 การทบทวนวรรณกรรมทเกยวของ ....................................................................................... 6 2.1 ภาษาโปรแกรมทใชในการพฒนา ................................................................................... 6 2.1.1 HTML .................................................................................................................... 6

2.1.2 PHP ....................................................................................................................... 7 2.1.3 Java Script ............................................................................................................. 8 2.1.4 CSS ........................................................................................................................ 9

2.2 เทคโนโลยทใชในการพฒนา ......................................................................................... 10 2.2.1 Client/Sever Network........................................................................................... 10

สารบญ ( ตอ ) หนา

2.2.2 Web application ................................................................................................... 11 2.3 ซอฟตแวรทใชในการพฒนา .......................................................................................... 12 2.3.1 Dream weaver ...................................................................................................... 12

บทท 3 การวเคราะหและออกแบบระบบ ....................................................................................... .11 3.1 รายละเอยดของปรญญานพนธ ...................................................................................... 14 3.2 ขนตอนการด าเนนงาน (Work Flow Diagram) ............................................................. 14 3.2.1 วเคราะหระบบงานใหม (New System Analysis) ................................................. 14 3.3 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram .......................................... 16 3.4 ค าอธบายรายละเอยดของยสเคส ................................................................................... 17 3.5 Sequence Diagram ........................................................................................................ 33 3.6 Class Diagram ............................................................................................................... 47 3.7 ER-Diagram .................................................................................................................. 48

บทท 4 การออกแบบทางกายภาพ .................................................................................................... 24 4.1 การออกแบบฐานขอมล (Database Design) ................................................................. 49 4.2 โครงสรางของเวบไซต (Site Map) ............................................................................... 53 4.3 การออกแบบสวนตดตอกบผใช (User Interface Design) ............................................. 53

บทท 5 สรปผลและขอเสนอแนะ .................................................................................................... 51 5.1 สรปผลปรญญานพนธ .................................................................................................. 72 5.2 ขอดของระบบ .............................................................................................................. 72 5.3 ขอจ ากดของระบบ ........................................................................................................ 73 5.4 ขอเสนอแนะ ................................................................................................................. 73

บรรณานกรม ................................................................................................................................... 74

สารบญตาราง หนา

ตารางท 1.1 แผนและระยะเวลาในการด าเนนงานปรญญานพนธ ................................................... 4 ตารางท 3.1 ค าอธบายรายละเอยดของยสเคส : Login .................................................................. 17 ตารางท 3.2 ค าอธบายรายละเอยดของยสเคส : Dashboard ........................................................... 18 ตารางท 3.3 ค าอธบายรายละเอยดของยสเคส : Sell Product ......................................................... 19 ตารางท 3.4 ค าอธบายรายละเอยดของยสเคส : Print Product ....................................................... 19 ตารางท 3.5 ค าอธบายรายละเอยดของยสเคส : Add Type Product ............................................... 20 ตารางท 3.6 ค าอธบายรายละเอยดของยสเคส : ManageType........................................................ 20 ตารางท 3.7 ค าอธบายรายละเอยดของยสเคส : Add Product ........................................................ 21 ตารางท 3.8 ค าอธบายรายละเอยดของยสเคส : Manage Product .................................................. 21 ตารางท 3.9 ค าอธบายรายละเอยดของยสเคส : Add Product Supplier .......................................... 22 ตารางท 3.10 ค าอธบายรายละเอยดของยสเคส : Order list ............................................................ 23 ตารางท 3.11 ค าอธบายรายละเอยดของยสเคส : Add Suppliers ..................................................... 23 ตารางท 3.12 ค าอธบายรายละเอยดของยสเคส : Manage Suppliers ............................................... 24 ตารางท 3.13 ค าอธบายรายละเอยดของยสเคส : Add Member ...................................................... 25 ตารางท 3.14 ค าอธบายรายละเอยดของยสเคส : Manage Member ................................................ 26 ตารางท 3.15 ค าอธบายรายละเอยดของยสเคส : Add Customer .................................................... 27 ตารางท 3.16 ค าอธบายรายละเอยดของยสเคส : Manage Customer .............................................. 28 ตารางท 3.17 ค าอธบายรายละเอยดของยสเคส : Report Import list ............................................... 28 ตารางท 3.18 ค าอธบายรายละเอยดของยสเคส : Report Sales ....................................................... 29 ตารางท 3.19 ค าอธบายรายละเอยดของยสเคส : Report Product ................................................... 30 ตารางท 3.20 ค าอธบายรายละเอยดของยสเคส : Report Supplier .................................................. 31 ตารางท 3.21 ค าอธบายรายละเอยดของยสเคส : Report Customer ................................................ 32 ตารางท 4.1 รายละเอยดของตารางขอมล pos_member ............................................................... 49 ตารางท 4.2 รายละเอยดของตารางขอมล pos_order ................................................................... 49 ตารางท 4.3 รายละเอยดของตารางขอมล pos_type ..................................................................... 50 ตารางท 4.4 รายละเอยดของตารางขอมล pos_product ................................................................. 50 ตารางท 4.5 รายละเอยดของตารางขอมล pos_productoder ......................................................... 50 ตารางท 4.6 รายละเอยดของตารางขอมล pos_supplier ............................................................... 51 ตารางท 4.7 รายละเอยดของตารางขอมล pos_supproduct .......................................................... 51

สารบญตาราง (ตอ) หนา

ตารางท 4.8 รายละเอยดของตารางขอมล pos_amphures ......................................................... 51 ตารางท 4.9 รายละเอยดของตารางขอมล pos_districts ............................................................... 52 ตารางท 4.10 รายละเอยดของตารางขอมล pos_geographies ........................................................ 52 ตารางท 4.11 รายละเอยดของตารางขอมล pos_provinces ............................................................ 52 ตารางท 4.12 รายละเอยดของตารางขอมล pos_user ...................................................................... 52 ตารางท 4.13 รายละเอยดของตารางขอมล pos_geographies ........................................................ 52

สารบญรปภาพ หนา

รปท 2.1 สญลกษณ HTML ........................................................................................................... 6 รปท 2.2 สญลกษณ PHP ................................................................................................................ 7 รปท 2.3 สญลกษณ Java Script ...................................................................................................... 8 รปท 2.4 สญลกษณ CSS ................................................................................................................ 9 รปท 2.5 ไคลเอนต/เซรฟเวอร (Client/Sever Network) ................................................................ 11 รปท 2.6 สถาปตยกรรม และการใชงานเวบแอปพลเคชน (Web Application) ............................. 12 รปท 2.7 ตวอยางโปรแกรม Dream weaver .................................................................................. 13 รปท 3.1 Work Flow Diagram ของระบบบรหารจดการหนารานขายของช า ............................... 15 รปท 3.2 Use Case Diagram ของระบบบรหารจดการหนารานขายของช า .................................. 16 รปท 3.3 Sequence Diagram : Login ........................................................................................... 33 รปท 3.4 Sequence Diagram : Dashboard ................................................................................... 33 รปท 3.5 Sequence Diagram : Sell Product ................................................................................. 34 รปท 3.6 Sequence Diagram : Print Product ............................................................................... 34 รปท 3.7 Sequence Diagram : Add Type Product ....................................................................... 34 รปท 3.8 Sequence Diagram : Manage Type ............................................................................... 35 รปท 3.9 Sequence Diagram : Add Product ................................................................................ 36 รปท 3.10 Sequence Diagram : Manage Product .......................................................................... 36 รปท 3.11 Sequence Diagram : Add Product Supplier .................................................................. 37 รปท 3.12 Sequence Diagram : Order list ..................................................................................... 38 รปท 3.13 Sequence Diagram : Add supplier ................................................................................ 39

สารบญรปภาพ ( ตอ ) หนา

รปท 3.14 Sequence Diagram : Manage supplier ........................................................................ 40 รปท 3.15 Sequence Diagram : Add member .............................................................................. 41 รปท 3.16 Sequence Diagram : Manage member ......................................................................... 42 รปท 3.17 Sequence Diagram : Add customer ............................................................................. 43 รปท 3.18 Sequence Diagram : Manager Customer .................................................................... 44 รปท 3.19 Sequence Diagram : Report Import list ....................................................................... 45 รปท 3.20 Sequence Diagram : Report Sales ............................................................................... 45 รปท 3.21 Sequence Diagram : Report product ........................................................................... 46 รปท 3.22 Sequence Diagram : Report supplier .......................................................................... 46 รปท 3.23 Sequence Diagram : Report Customer ....................................................................... 46 รปท 3.24 Class Diagram ของระบบจดการหนารานขายของช า .................................................. 47 รปท 3.25 ER-Diagram ของระบบจดการหนารานขายของช า ..................................................... 48 รปท 4.1 โครงสรางเวบไซตของระบบบรหารจดการหนารานขายของช า................................... 53 รปท 4.2 หนาจอลงชอเขาใชงาน (Login) ................................................................................... 54 รปท 4.3 หนาจอ Dashboard (สวนของแสดงยอดขาย)............................................................... 54 รปท 4.4 หนาจอ Dashboard (สวนของ ประวตการน าเขา) ........................................................ 55 รปท 4.5 หนาจอ Dashboard (สวนของ ยอดขายลาสด) .............................................................. 55 รปท 4.6 หนาจอขายสนคา ......................................................................................................... 56 รปท 4.7 หนาจอแสดงใบเสรจ ................................................................................................... 56 รปท 4.8 หนาจอส าหรบเพมประเภทสนคา ................................................................................ 57 รปท 4.9 หนาจอประเภทสนคา .................................................................................................. 57 รปท 4.10 แสดงการแกไขประเภทสนคา ..................................................................................... 58 รปท 4.11 หนาจอเพมสนคาใหม ................................................................................................. 59 รปท 4.12 หนาจอแสดงรายการสนคา ......................................................................................... 59 รปท 4.13 หนาจอแสดงรายละเอยดของสนคา ............................................................................ 60 รปท 4.14 หนาจอแกไขสนคา ..................................................................................................... 60

สารบญรปภาพ ( ตอ ) หนา

รปท 4.15 หนาจอน าเขาสนคา ..................................................................................................... 61 รปท 4.16 หนาจอรายการสงซอ .................................................................................................. 61 รปท 4.17 หนาจอแสดงรายละเอยดของรายการสงซอ ................................................................ 62 รปท 4.18 หนาจอแสดงรายละเอยดของรายการสงซอ และแกไข ............................................... 62 รปท 4.19 หนาจอแสดงการออกรายงานของรายการสงซอ ......................................................... 63 รปท 4.20 หนาจอเพมผผลต หรอคคา ......................................................................................... 63 รปท 4.21 หนารายการผผลต ....................................................................................................... 64 รปท 4.22 หนาจอแกไขผผลต ..................................................................................................... 64 รปท 4.23 หนาเพมผจดการระบบ................................................................................................ 65 รปท 4.24 หนาของรายละเอยดบญช ........................................................................................... 65 รปท 4.25 หนาจอแกไขบญชผใชงาน .......................................................................................... 66 รปท 4.26 หนาจอออกรายงานการน าเขาทงหมด ........................................................................ 66 รปท 4.27 หนาจอพมพรายงานของการน าเขาทงหมด ................................................................. 67 รปท 4.28 หนาจอออกรายงานยอดขายทงหมด ........................................................................... 67 รปท 4.29 หนาจอรายงานของยอดขายทงหมด ............................................................................ 68 รปท 4.30 หนาจอออกรายงานสนคา ........................................................................................... 68 รปท 4.31 หนาจอพมพรายงานของการสนคา .............................................................................. 69 รปท 4.32 หนาจอการออกรายงานคคา ........................................................................................ 69 รปท 4.33 หนาจอพมพรายงานของคคา ...................................................................................... 70 รปท 4.34 หนาจอการออกรายงานของลกคา ............................................................................... 70 รปท 4.35 หนาจอพมพรายงานของลกคา .................................................................................... 71

บทท 1 บทน ำ

1.1 ทมำและควำมส ำคญของปญหำ

ในปจจบนการซอขายของจาก รานขายของช า หรอรานคาสะดวกซอ สวนมากจะใชการจด

บนทกลงกระดาษ ท าใหเกดขอผดพลาดในการท างาน และเกดความสบสนจากการจดบนทกผด ๆ

จงท าใหท างานไดลาชา และเกดความผดพลาดในการใชงาน แตในปจจบนน เทคโนโลยไดเขามา

เกยวของในชวตเพมมากขน จงท าใหมระบบจดการหนารานขนมาชวยในการจดการกบทางปญหา

ของหนาราน แตสวนใหญชอบเกดปญหาเพราะการพฒนาระบบหนาราน ยงไมตรงจด ขาดระบบ

ตาง ๆ ทจะใชเพอจดการหนารานใหสะดวกขน จงท าใหเกดความยงยากในการใชงาน เพราะระบบ

มความซบซอนมาก ท าใหผใชงานระบบเกดความสบสน และมขอผดพลาดเกดขนมาก ท าใหม

ปญหากบระบบจดเกบสนคา หรอระบบคดค านวณเงน

จากทกลาวขางตนคณะผจดท าจงไดมแนวคดในการพฒนาระบบบรหารจดการหนาราน

ขายของช ามาใหสามารถใชงานไดงายขน มระบบทครบถวน และตอบโจทยปญหาของผใชงานตอ

ผใชงาน โดยมหนารานทสามารถขายสนคาแบบ Realtime ท าใหสามารถดสนคาทใกลจะหมดได

ยงมระบบทเกบขอมลลกคาประจ าของทางรานไว และยงมโปรโมชนของทางหนาราน เอาไวเปน

สวนลด และเปนการตลาดของทางรานได อกทงยงมระบบ จดการสตอกสนคา สามารถดสถานะ

สนคาทก าลงจะหมดได จ านวนทมในคลงสนคาวามเทาไร มระบบเพมผจดการระบบ หรอเจาของ

รานคา และพนกงาน มระบบออกรายงานสนคาคงเหลอ และยอดขายของสนคากบทางราน

รายงานยอดขายตอเดอน รายงานการน าเขาตอเดอน มการแสดงภาพรวมของราน เพอสามารถ

ตรวจสอบ ก าไรสทธ ทไดของทางรานได และยงสามารถแสดงรายการสนคาขายดของทางรานได

ระบบพฒนาโดยใช เครองมอ Dreamweaver และใชภาษา HTML, PHP, JavaScript, CSS และ

JQuery จดการฐานขอมลดวย MariaDB ดวยภาษา SQL โดยน าขอมลทงหมดทไดจากการวเคราะห

และออกแบบระบบมาพฒนาเปนเวบไซต โดยระบบสามารถชวยแกปญหาในปจจบนได ท าใหลด

การเกดปญหาจากการท างานแบบเดมไดอยางมาก ลดขอผดพลาดในการท างาน

1.2 วตถประสงคของปรญญำนพนธ เพอพฒนาระบบบรหารจดการหนารานขายของช า

2

1.3 ขอบเขตปรญญำนพนธ 1.3.1 พฒนาโดยใชสถาปตยกรรมไคลเอนท/ เซรฟเวอร เปนเวบแอปพลเคชน (Web Application) 1.3.2 กลมผใชแบงเปน 2 กลม

1.3.2.1 ผดแลระบบ (เจาของราน) 1.3.2.1.1 สามารถตรวจสอบและจดการกบขอมลการสงซอสนคาได 1.3.2.1.2 สามารถเชคจ านวนของในคลงสนคาได 1.3.2.1.3 สามารถดภาพรวมของรายไดทงหมดในแตละเดอนได 1.3.2.1.4 สามารถออกรายงานตาง ๆได 1.3.2.1.5 สามารถเพม ลบ และแกไขสนคาของทางรานได

1.3.2.2 พนกงาน 1.3.2.2.1 สามารถใชหนาขายสนคาได 1.3.2.2.2 สามารถออกใบเสรจใหกบลกคาได 1.3.2.2.3 สามารถเพม ลบ และแกไขสนคาของทางรานได

1.4. ประโยชนทคำดวำจะไดรบ

1.4.1 ชวยเพมความสะดวกสบายในการใชงานของระบบขายหนารานยงขนเพอไมใหเกด ความสบสนหรอความลาชาของผใช

1.4.2 ชวยลดปญหาการใชงานทซบซอน ลดการเกดขอผดพลาดตอการใชระบบ 1.4.3 ชวยใหพนกงานเพมสนคาหรอแกไข ไดอยางถกตองไมใหเกดขอผดพลาด 1.5 ขนตอนและวธกำรด ำเนนงำนปรญญำนพนธ

1.5.1 กำรรวบรวมควำมตองกำรและกำรศกษำขอมล (Detailed Study) โดยมการเกบรวบรวมขอมลจากรานคาขายของช าตาง ๆ และน ามาประชมรวมกนระหวางคณะผจดท าและอาจารยทปรกษา เพอก าหนดขอบเขตการท างาน เพอใหตรงกบความตองการของผใชงานมากทสด รวบรวมปญหาทไดเพอน าไปแกไข และปรบปรงใหโปแกรมมประสทธภาพในการท างานทดขน และชวยลดเวลาในการท างานลง

1.5.2 กำรวเครำะหระบบ (System Analysis) น าขอมลตาง ๆ ทไดรวบรวมมา น ามาวเคราะหและวางแผนการปฏบตงาน และก าหนดขอบเขตทไดจากการรวบรวมขอมลเพอท าการออกแบบระบบ เพอใหตอบสนองความตองการของผใชอยางสมบรณ โดยจะแบงการท างานของระบบ ออกเปน 2 สวน สวนท 1 ส าหรบ

3

ผดแลระบบ (เจาของราน) สวนท 2 พนกงาน โดยน าเสนอดวยแผนภาพ Use Case Diagram, Class Diagram, Sequence Diagram และโครงสรางฐานขอมล ER-Diagram

1.5.3 กำรออกแบบระบบ (System Design) ในขนตอนนจะท าการออกแบบโปรแกรมทจะน ามาใชจรง เพอเปนแนวทางในการพฒนาเวบโปรแกรมทจะตองตอบสนองความตองการของผใชไดมากทสด

1.5.3.1 ออกแบบสถาปตยกรรมโดยใชสถาปตยกรรมไคลเอนท/ เซรฟเวอร

(Client/ Server Architecture) เปนรปแบบทโฮสต ท าหนาทเปนเซรฟเวอร

แบบท างานตลอดเวลา (Always-on) ซงท าหนาทใหบรการแกเครองไคล

เอนท ซงจะท าหนาทรองขอบรการผาน การท างานเรมตนทโปรแกรม

ดานไคลเอนทท าการรองขอ โดยผาน HTTP request ไปยงเซรฟเวอร เมอ

ไคลเอนทได รบขอมลจาก HTTP Response แลว ก จะท าการแปล

ความหมายของขอมลเพอแสดงผลทจอภาพ ขณะทเซรฟเวอร เมอรบ

HTTP Request แลวจะท าการแปลความหมายของขอมลทไดรบ เพอสง

ออปเจค ทดานไคลเอนทตองการกลบไปโดยผาน HTTP Response โดย

ในการพฒนาระบบใชระบบฐานขอมลในการเรยกขอมลของสนคา หรอ

ขอมลของพนกงานราน เพอใชในการเขาสระบบ

1.5.3.2 ออกแบบโครงสรางขอมล เปนฐานขอมลเชงสมพนธ (Relational

Database) เปนการเกบขอมลในรปของตาราง (Table) หลาย ๆ ตารางทม

ความสมพนธกน ในแตละตารางแบงออกเปนแถว ๆ และในแตละแถวจะ

แบงเปนคอลมภ (Column)

1.5.3.3 ออกแบบสวนตดตอผ ใช (User Interface Design) ในสวนนใช HTML

CSS Bootstrap มาชวยในการออกแบบสวนของ UI แตสวนใหญจะใช

Template Website ทออกแบบมาใหสวนหนงแลว จงน ามาแกไขใหตรง

กบจดประสงคของการพฒนาระบบ

1.5.4 กำรพฒนำระบบ (System Development)

เปนขนตอนในการพฒนาระบบเปนการน าขอมลทงหมดทไดจากการวเคราะหและออกแบบระบบไว มาพฒนาและเขยนชดค าสง โดยใชโปรแกรม Dreamweaver CS5.5 ในการพฒนาเวบไซต โดยใช ภาษา HTML, PHP, JavaScript, CSS และ JQuery และใชโปรแกรมในการ

4

บรหารจดการฐานขอมล คอ MariaDB บรหารจดการขอมลดวยภาษา SQL โดยน าขอมลทงหมดทไดจากการวเคราะหและออกแบบระบบมาพฒนาเปนเวบไซต

1.5.5 กำรทดสอบระบบ (System Testing)

คณะผจดท าไดท าการทดสอบและพฒนาระบบไปพรอม ๆ กน การทดสอบเวบแอปพลเคชนเพอตรวจสอบความผดพลาดในการท างานของระบบและการแสดงผล รวมท งตรวจสอบขอมล ตาง ๆ ภายในระบบวามความผดพลาดในการท างานในขนตอนใดบาง ถาพบขอผดพลาดจะท าการแกไขใหถกตอง และท าการทดสอบอกครงหลงจากท าการแกไขเสรจเรยบรอยแลว โดยมขนการทดสอบระบบ 3 สวน ดงน

1.5.5.1 การทดสอบฟงกชนตาง ๆ ในเวบแอปพลเคชน โดยท าการทดสอบผาน ทางระบบงานของจรงทไดจดท าขนมา เพอหาขอผดพลาดตาง ๆ และท า การแกไข

1.5.5.2 การทดสอบการตอบสนองและขอผดพลาดของ User Interface 1.5.5.3 การทดสอบประสทธภาพโดยรวมของเวบแอปพลเคชนถาพบปญหาใน สวนใดของระบบและท าการแกไขใหเรยบรอย

1.5.6 กำรจดท ำเอกสำร (Documentation) เปนการจดท าเอกสารแนวทางในการจดท าปรญญานพนธโดยมวธการและขนตอนการด าเนนปรญญานพนธ เพอน าเสนอรายงานตออาจารยทปรกษา และเปนคมอการใชงานใชอางองในอนาคต 1.6 แผนและระยะเวลำในกำรด ำเนนงำนปรญญำนพนธ ตารางท 1.1 ระยะเวลาในการด าเนนงานปรญญานพนธ

กจกรรม 2562 2563

ก.ย. ต.ค. พ.ย. ธ.ค. ม.ค. ก.พ. ม.ค. เม.ย. พ.ค. ม.ย. ก.ค. ส.ต. ก.ย. ต.ค. 1.รวบรวมขอมล 2.วเคราะหระบบ 3.ออกแบบระบบ 4.พฒนาระบบ 5.ทดสอบระบบ 6.จดท าเอกสาร

5

1.7 อปกรณและเครองมอทใชในกำรพฒนำระบบ 1.7.1 ฮำรดแวร 1.7.1.1 เค รองคอมพ ว เตอ ร Notebook Asus TUF Gaming FX504 Series CPU : Intel Core i5-8300H GPU : GTX 1050 1.7.2 ซอฟตแวร 1.7.2.1 โปรแกรม Adobe Dreamweaver cs5.5 1.7.2.2 ระบบปฏบตการ Windows 10 Pro 1.8 อปกรณและเครองมอทรองรบระบบ 1.8.1 ฮำรดแวร

1.8.1.1 เครองคอมพวเตอร CPU ความเรว 2.0 GHz ขนไป แรมอยางนอย 2 GB ขนไป 1.8.1.2 อปกรณทสามารถเชอมตออนเทอรเนตได

1.8.2 ซอฟตแวร 1.8.2.1 ระบบปฏบตการ Windows 10 1.8.2.2 โปรแกรมเวบบราวเซอร Google Chrome, Mozilla, FireFox,

Microsoft Edge

บทท 2 การทบทวนเอกสารและวรรณกรรมทเกยวของ

ในการพฒนาระบบบรหารจดการหนารานขายของช า โดยไดมการประยกตใชแนวคด ทฤษฎ และเทคโนโลยตาง ๆ เพอใหระบบนนตอบโจทยผใชไดมากทสด ประกอบดวย 2.1 ภาษาโปรแกรมทใชในการพฒนา 2.1.1 HTML1

รปท 2.1 สญลกษณ HTML HTML ยอมาจาก Hyper Text Markup Language คอภาษาคอมพวเตอรทใชในการแสดงผล

ของเอกสารบน website หรอทเรยกวาเวบเพจ ถกพฒนาและก าหนดมาตรฐานโดยองคกร World Wide Web Consortium (W3C) และจากการพฒนาทางดาน Software ของ Microsoft ท าใหภาษา HTML เปนอกภาษาหนงทใชเขยนโปรแกรมได หรอทเรยกวา HTML Application

HTML เปนภาษาประเภท Markup ส าหรบการการสรางเวบเพจ โดยใชภาษา HTML สามารถท าโดยใชโปรแกรม Text Editor ตาง ๆ เชน Notepad, Edit plus หรอจะอาศยโปรแกรมทเปนเครองมอชวยสรางเวบเพจ เชน Microsoft FrontPage, Dream Weaver ซงอ านวยความสะดวกในการสรางหนา HTML สวนการเรยกใชงานหรอทดสอบการท างานของเอกสาร HTML จะใชโปรแกรม web browser เชน IE Microsoft Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เปนตน ทางคณะผจดท าไดน าทฤษฎนมาใชในการจดหนาฟอรมใบเสรจ และจดหนาเวบแอปพลเคชนทงหมด เชน <div class="row"> <div class="col-2"> ……. </div>

1 https://mindphp.com/คมอ/73-คออะไร/2026-html-คออะไร.html

7

</div> แสดงตวอยางการสราง Form HTML การจดหนาน ามาใชเพอน าโคด PHP เรยกขอมลมาแสดง 2.1.2 PHP2

รปท 2.2 สญลกษณ PHP PHP ยอมาจาก PHP Hypertext Preprocessor คอภาษาคอมพวเตอรจ าพวก scripting language ภาษาจ าพวกนค าสงตาง ๆ จะเกบอยในไฟลทเรยกวา script และเวลาใชงานตองอาศยตวแปรชดค าสง ตวอยางของภาษาสครปต เชน JavaScript, Perl เปนตน ลกษณะของ PHP ทแตกตางจากภาษาสครปตแบบอน ๆ คอ PHP ไดรบการพฒนาและออกแบบมา เพอใชงานในการสรางเอกสารแบบ HTML โดยสามารถสอดแทรกหรอแกไขเนอหาไดโดยอตโนมต ดงนนจงกลาววา PHP เปนภาษาทเรยกวา server-side หรอ HTML-embedded scripting language นน คอในทก ๆ ครงกอนทเครองคอมพวเตอรซงใหบรการเปน Web server จะสงหนาเวบเพจทเขยนดวย PHP ใหจะท าการประมวลผลตามค าสงทมอยใหเสรจเสยกอน แลวจงคอยสงผลลพธทไดใหเรา ผลลพธทไดนนกคอเวบเพจ ถอไดวา PHP เปนเครองมอทส าคญชนดหนงทชวยใหเราสามารถสราง Dynamic Web pages (เวบเพจทมการโตตอบกบผใช) ไดอยางมประสทธภาพและมลกเลนมากขน PHP เปนผลงานทเตบโตมาจากกลมของนกพฒนาในเชงเปดเผยรหสตนฉบบ หรอ Open Source ดงนน PHP จงมการพฒนาไปอยางรวดเรว และแพรหลายโดยเฉพาะอยางยงเมอใชรวมกบ Apache Web server ระบบปฏบตอยาง เชน Linux หรอ FreeBSD เปนตน ในปจจบน PHP สามารถใชรวมกบ Web Server หลาย ๆ ตวบนระบบปฏบตการอยาง เชน Windows 95/98/NT เปนตน ทางคณะผจดท าไดน าทฤษฎนมาใชในการพฒนาระบบทงหมดโดยทกสวนของหลงบานน า PHP มาใช

2 https://www.mindphp.com/คมอ/73-คออะไร/2127-php-คออะไร.html

8

ในการพฒนา เชน <?php echo $_F['product_name']?> เปนตวอยางการใช PHP ในการเรยกขอมลจากฐานขอมลมาแสดงใน Form เปนการเรยกขอมลชอสนคา

2.1.3 Java Script3

รปท 2.3 สญลกษณ Java Script

JavaScript หนาเวบเพจทสรางดวยภาษา HTML/ XHTML เพยงอยางเดยว จะท าไดแคเพยงจดรปแบบการแสดงผลใหสวยงาม แตไมสามารถสรางลกเลนตาง ๆ ไดเราจงตองอาศย JavaScript เพอเพมความนาสนใจใหกบเวบเพจ

JavaScript เปนภาษา script ทใชงานบนเวบเพจตาง ๆ ถกสรางขนเพอท าใหเวบเพจสามารถโตตอบกบผใชงานไดดขน โดย JavaScript เขยนเปนฟงกชนส าหรบใชงานตาง ๆ เชน ตรวจสอบความถกตองของขอมลในแบบฟอรม ตรวจสอบชนดและรนของโปรแกรมเวบเบราวเซอร สรางไฟล cookie สรางลกเลนตาง ๆ เชน ปฏทน หมะตก เปนตน JavaScript เปนภาษาประเภท Interpreted Language ไมตองมการ compile กอน กลาวคอ คอมพวเตอรจะแปลและท างานตามค าสงแบบทละบรรทด

JavaScript เปน Client-side Script ซงจะประมวลผลบนเครองคอมพวเตอรของผเยยมชมเวบไซต โดยใชโปรแกรมเวบเบราวเซอร เชน IE (version 3 ขนไป), Netscape (version 2 ขนไป), Firefox ซงสนบสนนการท างานของ JavaScript ดอยแลว การท JavaScript ไมไดถกประมวลผลบนเครอง Web Server จะชวยแบงเบาภาระการท างานของ server และท างานไดรวดเรว JavaScript ไมใชภาษา Java แตอยางใด Java เปนภาษาทถกพฒนาโดย Sun Microsystems เปนภาษาประเภท programming ส าหรบเขยนโปรแกรมทสนบสนนการเขยนโปรแกรมเชงวตถ (OOP : Object-Oriented Programming) คลายกบภาษา C, C++ การใชงานภาษา JavaScript ควรมความรพนฐานในเรอง HTML/ XHTML มากอน เพราะการใชงาน JavaScript โดยทว ๆ ไป จะเขยน

3 http://www.enjoyday.net/javascript-คออะไร.html

9

code ค าสงตาง ๆ แทรกลงไปใน code ของ HTML ทางคณะผจดท าไดน าทฤษฎนมาใชในการเพมลกเลนใหกบโปรแกรม เชน การ Search คนหาสนคา ตวอยางดานลาง $( "#search" ).keyup(function() { $( "#hoo" ).load( "salepage.php?search="+ $(this).val() +" #hoo" ); }); 2.1.4 CSS4

รปท 2.4 สญลกษณ CSS CSS ยอมาจาก Cascading Style Sheet มกเรยกโดยยอวา "สไตลชต" คอภาษาทใชเปนสวนของการจดรปแบบการแสดงผลเอกสาร HTML โดยท CSS ก าหนดกฎเกณฑในการระบรปแบบ (หรอ "Style") ของเนอหาในเอกสาร อนไดแก สของขอความ สพนหลง ประเภทตวอกษร และการจดวางขอความ ซงการก าหนดรปแบบ หรอ Style นใชหลกการของการแยกเนอหาเอกสาร HTML ออกจากค าสงทใชในการจดรปแบบการแสดงผล ก าหนดใหรปแบบของการแสดงผลเอกสาร ไมขนอยกบเนอหาของเอกสาร เพอใหงายตอการจดรปแบบการแสดงผลลพธของเอกสาร HTML โดยเฉพาะในกรณทมการเปลยนแปลงเนอหาเอกสารบอยครง หรอตองการควบคมใหรปแบบการแสดงผลเอกสาร HTML มลกษณะของความสม าเสมอทวกนทกหนาเอกสารภายในเวบไซตเดยวกน โดยกฎเกณฑในการก าหนดรปแบบ (Style) เอกสาร HTML ถกเพมเขามาครงแรกใน HTML 4.0 เมอปพ.ศ. 2539 ในรปแบบของ CSS level 1 Recommendations ทก าหนดโดย องคกร World Wide Web Consortium หรอ W3C ทางคณะผจดท าไดน าทฤษฎนมาใชในการตกแตงระบบ

4 https://www.wynnsoft-solution.net/th/article/view/80/

10

ทงหมด เปนการจดรปแบบหนาเวบไซตใหสวยงาม เชน <style> color : #000 ; เปนการตกแตงสโดยใชโคด color 2.2 เทคโนโลยทใชในการพฒนา

2.2.1 Client/ Server Network5 ไคลเอนต/ เซรฟเวอร (client/ server) คอการทมเครองผใหบรการ (server) และเครองผใชบรการ (client) เชอมตอกนอย และเครองผใชบรการไดมการตดตอรองขอบรการจากเครองผใหบรการ เครองผใหบรการกจะจดการตามทเครองผขอใชบรการรองขอ แลวสงขอมลกลบไปใหเครอขายแบบ ไคลเอนต/ เซรฟเวอร เหมาะกบระบบเครอขายทตองการเชอมตอกบเครองลกขายจ านวนมาก โดยการรองรบจ านวนเครองลกขาย (Client) อาจเปนหลกสบ หลกรอย หรอหลกพน เพราะฉะน นเครองทจะน ามาท าหนา ทใหบรการจะตองเปนเครองทมประสทธภาพสง เนองจากถกตองออกแบบมาเพอทนทานตอความผดพลาด ( Fault Tolerance) และตองคอยใหบรการทรพยากร ใหกบเครองลกขายตลอดเวลาโดยเครองทจะน ามาท าเปนเซรฟเวอรอาจเปนคอมพวเตอรแบบเมนเฟรม มนคอมพวเตอร หรอไมโครคอมพวเตอรกได

รปท 2.5 การท างานของไคลเอนต/ เซรฟเวอร (Client/ Server Network)

เครอขายประเภทนจะมเครองศนยบรการ ทเรยกวา เครองเซรฟเวอร และมเครองลกขายตาง ๆ เชอมตอ โดยเครอขายหนงอาจมเครองเซรฟเวอรมากกวาหนงตวเชอมตอภายในวงแลนเดยวกน ซงเซรฟเวอรแตละตวกท าหนาทรบผดชอบทแตกตางกน เชน 1.ไฟลเซรฟเวอร (File Server) คอ เครองทใหบรการแฟมขอมลใหแกเครองลกขาย

5 https://sites.google.com/site/jesadawin/khil-xen-t-seirfwexr-client-server-network

11

2. พรนตเซรฟเวอร (Print Server) คอ เครองทบรการงานพมพใหแกเครองลกขาย โดย บนทกงานพมพเกบไวในรปแบบของสพล (Spool) และด าเนนการพมพงานตามล าดบคว 3. ดาตาเบสเซรฟเวอร (Database Server) คอ เครองทบรการฐานขอมลใหแกเครองลกขาย 4. เวบเซรฟเวอร (Web Server) คอ เครองทจดเกบขอมลดานเวบเพจขององคกร เพอใหผ ทองอนเทอรเนตสามารถเขาถงเวบขององคกรได 5. เมลเซรฟเวอร (Mail Server) คอ เครองทจดเกบขอมลดานจดหมายอเลกทรอนกส หรอ E-mail ทมการรบสงระหวางกนภายในเครอขาย 2.2.2 Web Application6 Web Application (เวบแอปพลเคชน) คอ การพฒนาระบบงานบนเวบ ซงมระบบมการไหลเวยนในแบบ Online (ออนไลน) ท งแบบ Local (โลคอล) ภายในวง LAN (แลน) และ Global (โกลบอล) ออกไปยงเครอขายอนเทอรเนต ท าใหเหมาะส าหรบงานทตองการขอมลแบบ Real Time (เรยลไทม) การท างานของ Web Application น นโปรแกรมสวนหนงจะวางตวอยบน Rendering Engine (เรนเดอรงเอนจน) ซงตว Rendering Engine จะท าหนาทหลกๆ คอน าเอาชดค าสงหรอรปแบบโครงสรางขอมลทใชในการแสดงผล น ามาแสดงผลบนพนทสวนหนงในจอภาพ โปรแกรมสวนทวางตวอยบน Rendering Engine จะท าหนาทหลกๆ คอการเปลยนแปลงแกไขสงทแสดงผล จดการตรวจสอบขอมลทรบเขามาเบองตนและการประมวลบางสวนแตสวนการท างานหลกๆ จะวางตวอยบนเซอรเวอร ในลกษณะ Web Application แบบเบองตน ฝงเ ซ รฟ เวอ รจะประกอบไปดวย เวบ เ ซ รฟ เวอ ร ซ งท าหน า ท เ ช อมตอกบไคล เอนตตามโปรโตคอล HTTP/ HTTPS (เอช ท ท พ/ เอช ท ท พ เอส) โดยนอกจากเวบเซรฟเวอรจะท าหนาทสงไฟลทเกยวเนองกบการแสดงผลตามมาตรฐาน HTTP ตามปกตทวไปแลว เวบเซรฟเวอรจะมสวนประมวลผลซงอาจจะเปนตวแปลภาษา เชน Script Engine ของภาษา PHP หรออาจจะมการตดต ง .NET Framework (ดอทเนต เฟรมเวรก) ซงมสวนแปลภาษา CLR (ซ แอล อาร) ทใชแปลภาษา intermediate (อนเทอะมดอท) จากโคดทเขยนดวย VB.NET (ว บ ดอทเนต) หรอ C#.NET (ซฉาบ ดอทเนต) หรออาจจะเปน J2EE (เจ ท อ อ) ทมสวนแปลไบตโคดของคลาสทไดจากโปรแกรมภาษาจาวา เปนตน สรป Web Application คอการเขยนโปรแกรมทใหตอบสนองตอผใชมากทสด โดยรปแบบของ Web Application จะอยในรปแบบของเวบไซต คอ สามารถใชงานไดทกหนาจอทมความแตกตางของขนาดหนาจอ เพราะสามาสรถยดหยนและหดตวไดตามสภาพของ UI (ย ไอ)

6 en.wikipedia.org/wiki/Web_application

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2438-php-maker-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html


http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2222-lan-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2307-real-time-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2046-http-https-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2189-vbscript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2184-c-%E0%B8%8A%E0%B8%B2%E0%B8%A3%E0%B9%8C%E0%B8%9B-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

12

รปท 2.6 สถาปตยกรรม และการใชงานเวบแอปพลเคชน (Web Application)

2.3 ซอฟตแวรทใชในการพฒนา 2.3.1 Dream weaver7 Dreamweaver คอโปรแกรมสรางเวบเพจแบบเสมอนจรง ของคาย Adobe ซงชวยใหผทตองการสรางเวบเพจไมตองเขยนภาษา HTML หรอโคดโปรแกรม เอง หรอทศพทเทคนคเรยกวา "WYSIWYG " โปรแกรม Dreamweaver มฟงกชนทท าใหผใชสามารถจดวางขอความ รปภาพ ตาราง ฟอรม วดโอ รวมถงองคประกอบอน ๆ ภายในเวบเพจไดอยางสวยงามตามทผใชตองการ โดยไมตองใชภาษาสครปตทยงยากซบซอนเหมอนกอน Dreamweaver มท งในระบบปฏบตการ แมคอนทอช และไมโครซอฟทวนโดวส Dreamweaver ยงสามารถท างานบนระบบปฏบตการแบบยนกซ ผานโปรแกรมจ าลองอยาง WINE ได เวอรชนลาสดของโปรแกรมตวนคอ Adobe Dreamweaver CS5.5 ทางคณะผจดท าไดน ามาใชในการพฒนาโปรแกรมทงหมด

7 https://www.mindphp.com/คมอ/73-คออะไร/2233-dreamweaver-คออะไร.html

13

รปท 2.7 ตวอยางโปรแกรม Dream weaver

บทท3 การวเคราะหและออกแบบระบบ

3.1 รายละเอยดของปรญญานพนธ

ระบบบรหารจดการหนารานขายของช า เปนระบบทจะมาชวยใหงานหนารานสะดวกสบายขน โดยระบบประกอบดวย สวนขายสนคา แสดงภาพและราคาของสนคา จ านวนสนคาทม แสดงสวนลด จ านวนเงนทรบ และเงนทอน รวมถงการออกใบเสรจใหลกคา และสวนของเจาของรานจะสามารถดภาพรวมของการขายทงหมด (Dash Board) สามารถใชระบบหนารานในการขายสนคา เพมสนคาใหม น าเขาสนคาสคลงสนคา รายการสงซอของทางราน น าเขาผผลต รายการผผลต ออกรายงาน ดประวตการขาย และประวตสนคา

เทคโนโลยทใชในปรญญานพนธมการออกแบบเปนเวบแอปพลเคชนใชภาษา PHP HTML CSS มาใชในการพฒนา และมการใช Jquery JavaScript มาชวยในการพฒนา และมการใช Font Awesome Bootstarp 4 มาชวยในการออกแบบสวนตดตอผใช (User Interface)

3.2 ขนตอนการด าเนนงาน (Work Flow Diagram)

ในการท างานปจจบนของรานคาขายของช าสวนมากจะเปนระบบการท างานดวยมอ ท าใหมความลาชา ท าเกดความผดพลาดในการท างานบอยครง คณะผจดท าจงท าการพฒนาระบบเขามาเพอชวยใหการท างานมประสทธภาพดยงขน 3.2.1 วเคราะหระบบงานใหม (New System Analysis)

ระบบงานปจจบนสามารถดรายละเอยดหนาภาพรวมได จะแสดง ยอดน าเขารายวน ยอดขายสทธรายวน ก าไรสทธรายวน ยอดขายรายป ประวตการน าเขา ประการขายออก สนคาขายด ยอดขายลาสด ประวตน าเขาลาสด และ ประวตการขายสนคาลาสด และระบบหนารานขาย หรอระบบ POS ทออกแบบใหมท งหมด ใชงานงาย อกทงมระบบเพมประเภทของสนคา เพอแยกประเภท เชน ขนม น า และ อาหาร มรายการประเภทสนคา ทสามารถเขาไปแกไขหรอลบ ประเภทสนคาได มระบบเพมสนคาใหม ทเพมสนคาเขามาไวในระบบ และจะมรายการสนคา ทไวดสนคาทเราเพมเขามาในระบบแลว ดจ านวนชน สถานะของสนคา อกทงยงแกไข และลบ สนคาได และ การน าเขาสนคา คอการ เอาสนคาเขาคลง ตองเลอกคคา และเลอกสนคาทจะน าเขาคลง และยงมรายการสงซอ ทสามารถดรายละเอยดของทซอมาจากคคา รายไหนได อกทงยงแกไข ลบสนคาได และยงออกรายงานการสงซอสนคาได ยงมระบบเพมขอมลซพพลายเออร คอรานทรบซอของมา เชน โลตส และมรายการขอมลซพพลายเออรทเขามาดรายละเอยด และยงสามารถแกไข และ ลบ ซพพลายเออรออกได อกท งยงม ระบบเพมผจดการระบบ หรอ เพมพนกงาน และจะมรายการผจดการระบบไว

15

สามารถดประเภทของ ID เปน Admin หรอ User (พนกงาน) และยงสามารถแกไข และลบ ID ได อกทงยงม การเพมขอมลลกคา ละสามารถดรายละเอยดของลกคาได อกทงยงสามารถแกไข และลบ ขอมลของลกคาไดอกทงยงมระบบรายงานการน าเขา รายงานยอดขาย รายงานสนคา รายงานคคา และรายงานลกคา

รปท 3.1 Work Flow Diagram ของระบบบรหารจดการหนารานขายของช า

16

3.3 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram

รปท 3.2 Use Case Diagram ของระบบบรหารจดการหนารานขายของช า

UC Grocery store

17

3.4 ค าอธบายรายละเอยดของยสเคส (Use Case Description) ตารางท 3.1 รายระเอยดของ Use Case : Login

Use Case Name Login Use Case ID UC1 Brief Description ยนยนตวตนของผใช Primary Actors Administrator, Employee Secondary Actors - Preconditions เชคสถานะของผใชท Login Main Flow :

1. ยสเคสจะเรมขนเมอพนกงานหรอเจาของรานลงชอผใช หรอรหสผาน หรอคลกปม Login

2. ระบบจะเชคขอมลชอผใชหรอรหสผานทปอนเขามาตรงกบฐานขอมลวาตรงกนหรอไม 2.1 ขอมลผใชหรอรหสผานทตรงกนอยในฐานขอมล

2.1.1 ระบบไปยงหนาหลกเพอเลอกเมนหรอท างานตอไป 2.2 ขอมลชอผใชหรอรหสผานไมตรงกบฐานขอมล

2.2.1 ระบบแสดง Dialog แจงเตอนวา “Login Failed ไมสามารถเขาสระบบไดเนองจากชอผใชหรอรหสผานไมถกตอง

Post Condition สามารถใชงานฟงกชนตาง ๆ ส าหรบผดแลระบบ หรอพนกงานบนเวบแอปพลเคชนได

Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง

18

ตารางท 3.2 รายระเอยดของ Use Case : Dashboard Use Case Name Dashboard Use Case ID UC2 Brief Description เจาของรานและพนกงานสามารถด ยอดขาย ก าไร และ ยอดน าเขา

สนคาได ประวตการน าเขา ประวตการขายออก สนคาขายด และ ประวตการน าเขารายเดอน ประวตการขายออกรายเดอน

Primary Actors Administrator, Employee Secondary Actors - Preconditions ตองท าการ Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอพนกงานหรอเจาของรานคลกเมน ภาพรวม 2. เมอ เจาของราน หรอพนกงาน คลกเขามาในสวนของหนาน จะแสดงหนา

ภาพรวมของทางราน Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


19

ตารางท 3.3 รายระเอยดของ Use Case : Sell Product

Use Case Name Sell Product Use Case ID UC3 Brief Description แสดงสวนส าหรบการขายหนาราน Primary Actors Administrator, Employee Secondary Actors - Preconditions ตองท าการ Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอพนกงานหรอเจาของรานคลกเมน หนาราน 2. เมอ เจาของราน หรอพนกงาน คลกเขามาในสวนของหนาน จะแสดงหนาขาย

สนคาของทางราน จ านวนสนคาเหลอเทาไร Post Condition ผใชสามารถใชงานฟงกชนตาง ๆ ได Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


ตารางท 3.4 รายระเอยดของ Use Case : Print Product

Use Case Name Print Product Use Case ID UC4 Brief Description เจาของรานและพนกงานสามารถปรนใบเสรจสนคาได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตองท าการ Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอพนกงานหรอเจาของรานคลกช าระเงน 2. เมอ เจาของราน หรอพนกงาน คลกปมช าระเงนจะเขาสหนาปรนใบเสรจก ากบ

Post Condition Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนต

20

ไดกรณาลองใหมอกครงในภายหลง

ตารางท 3.5 รายระเอยดของ Use Case : Add Type Product

Use Case Name Add Type Product Use Case ID UC5 Brief Description พนกงานและเจาของรานสามารถเพมประเภทของสนคาเขาสสตอก

สนคาได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผใชงานระบบคลกเลอกทเมนเพมประเภทสนคา 2. สามารถเพมประเภทสนคาเขาสสตอกสนคาได

Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


ตารางท 3.6 รายระเอยดของ Use Case : ManageType

Use Case Name Manage Type Use Case ID UC6 Brief Description พนกงานและเจาของรานสามารถจดการประเภทของสนคา และ

แกไข ลบ ได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผใชงานระบบคลกเลอกทเมนประเภทสนคา 2. สามารถดรายละเอยดประเภทของสนคาได 3. สามารถแกไข หรอ ลบ ประเภทของสนคาได

21



ตารางท 3.7 รายระเอยดของ Use Case : Add Product

Use Case Name Add Product Use Case ID UC7 Brief Description พนกงานและเจาของรานสามารถเพมสนคาเขาสสตอกสนคา Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผใชงานระบบคลกเลอกทเมนเพมสนคา 2. สามารถเพมสนคาเขาสคลงสนคาได



22

ตารางท 3.8 รายระเอยดของ Use Case : Manage Product

Use Case Name Manage Stock Use Case ID UC8 Brief Description ผดแลระบบ หรอพนกงานสามารถคลกเขามาดสนคาในสตอกได

รายละเอยดสนคา และ แกไขหรอลบ Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน สตอก 2. แสดงขอมลรายละเอยดของสนคาทงหมด 3. แสดงสนคาทงหมดในสตอก 4. สามารถแกไขในสวนของสนคาได 5. ลบสนคาในสตอกสนคาได 6. สามารถดสถานะของสนคาได



23

ตารางท 3.9 รายระเอยดของ Use Case : Add Product Supplier

Use Case Name Add Product Supplier Use Case ID UC9 Brief Description พนกงานสามารถคลกเขามาเพอเพมผผลตไดและสามารถเพม

สนคาและจ านวนลงในสตอกได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนกตอเมอผใชงานคลกทหนาน าเขาสนค 2. จะแสดงหนาเพมผผลตเขาม 3. สามารถเพมผผลต ทอย เบอรโทร ประเภทภาษ และรหสคคา 4. จะแสดงใหเพม ชอสนคา ได



ตารางท 3.10 รายระเอยดของ Use Case : Order list

Use Case Name Order list Use Case ID UC10 Brief Description พนกงานและเจาของรานสามารถเขามาดสนคาทเราสงซอเขามาได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอเจาของรานหรอพนกงานกดเมนสนคา และเลอก รายการสงซอ

2. แสดงขอมลของรายละเอยดการสงซอ 3. ผดแลระบบ หรอพนกงาน จะสามารถดรายละเอยดในรายการสนคาได 4. สามารถแกไขในสวนของสนคาได

24

5. ลบขอมลของสนคาทซอมาได Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


ตารางท 3.11 รายระเอยดของ Use Case : Add Suppliers Use Case Name Add Suppliers Use Case ID UC11 Brief Description ผดแลระบบสามารถเขามา เพมซพพลายเออร หรอผผลตได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผผลตคลกเมน ผผลต และเลอก น าเขาผผลต 2. แสดงหนาเพมผผลตใหเจาของรานเพมผผลตได

Post Condition - Alternative Flows - Exceptions 1. ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ ไมสามารถตออนเทอรเนตได กรณาลองใหมอกครงในภายหลง

25

ตารางท 3.12 รายระเอยดของ Use Case : Manage Suppliers

Use Case Name Manage Suppliers Use Case ID UC12 Brief Description เจาของรานสามารถเขามาดรายการผผลตได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอเจาของราน คลกเมนผผลต และเลอกรายการผผลต 2. แสดงรายละเอยดของรายการผผลต 3. สามารถแกไขผผลตได 4. สามารถลบผผลตได



26

ตารางท 3.13 รายระเอยดของ Use Case : Add Member

Use Case Name Add Member Use Case ID UC13 Brief Description ผดแลระบบ สามารถเพมพนกงานหรอผดแลระบบเขามาได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน จดการระบบ 2. แสดงหนาเพมพนกงานหรอผดแลระบบ



27

ตารางท 3.14 รายระเอยดของ Use Case : Manage Member

Use Case Name Manage Member Use Case ID UC14 Brief Description ผดแลระบบ เขามาดรายละเอยดของสมาชกในระบบได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน จดการระบบ และเลอกรายการผจดการระบบ

2. แสดงขอมลรายละเอยดของสมาชก 3. ผดแลระบบสามารถแกไข รายละเอยดของสมาชกได 4. สามารถลบสมาชกออกได



28

ตารางท 3.15 รายระเอยดของ Use Case : Add Customer

Use Case Name Add Customer Use Case ID UC15 Brief Description ผดแลระบบและพนกงานมาท าการเพมลกคา Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนเพมลกคา 2. แสดงหนาใหเพมลกคา



ตารางท 3.16 รายระเอยดของ Use Case : Manage Customer

Use Case Name Manage Customer Use Case ID UC16 Brief Description ผดแลระบบและพนกงานสามารถมาดรายละเอยดลกคา หรอ แกไข

ลบ ได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนรายการขอมลลกคา 2. จะแสดงชอลกคา เบอรโทร ทอย และสามารถแกไข หรอ ลบ ได



29

ตารางท 3.17 รายระเอยดของ Use Case : Report Import list

Use Case Name Report Import list Use Case ID UC17 Brief Description ผดแลระบบและพนกงานสามารถมาดรายงานการน าเขาสนคา Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนระบบรายงานและคลก รายงานการน าเขาสนคา

2. ระบบจะใหแสดงหนารายงานการน าเขา ใหเลอกแตละเดอนเพอดการน าเขาสนคาของทางรานได



ตารางท 3.18 รายระเอยดของ Use Case : Report Sale

Use Case Name Report Sale Use Case ID UC18 Brief Description ผดแลระบบและพนกงานสามารถมาดรายงานยอดขายสนคาได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนระบบรายงานและคลก รายงานยอดขาย

2. ระบบจะใหแสดงหนารายงานยอดขาย ของทางรานได Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

30


ตารางท 3.19 รายระเอยดของ Use Case : Report Product

Use Case Name Report Product Use Case ID UC19 Brief Description ผดแลระบบและพนกงานสามารถมาดรายงานสนคาได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนระบบรายงานและคลก รายงานสนคา

2. ระบบจะใหแสดงหนารายงานการน าเขา ใหเลอกแตละเดอนเพอดการน าเขาสนคาของทางรานได



31

ตารางท 3.20 รายระเอยดของ Use Case : Report Supplier

Use Case Name Report Supplier Use Case ID UC20 Brief Description ผดแลระบบและพนกงานสามารถมาดรายงานคคาได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

3. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนระบบรายงานและคลก รายงานคคา

4. ระบบจะใหแสดงหนารายงานคคา จะแสดงรายละเอยดสนคาทน าเขาจากคคาเจานได



32

ตารางท 3.21 รายระเอยดของ Use Case : Report Customer

Use Case Name Report Customer Use Case ID UC21 Brief Description ผดแลระบบและพนกงานสามารถมาดรายงานลกคาได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :

1. ยสเคสจะเรมขนเมอผดแลระบบและพนกงานคลกเมนระบบรายงานและคลก รายงานลกคา

2. ระบบจะใหแสดงหนารายงานลกคา จะแสดงรายละเอยดของสนคาทลกคา ซอได



33

3.5 Sequence Diagram

รปท 3.3 Sequence Diagram : Login

รปท 3.4 Sequence Diagram : Dashboard

34

รปท 3.5 Sequence Diagram : Sell Product

รปท 3.6 Sequence Diagram : Print Product

รปท 3.7 Sequence Diagram : Add Type Product

35

รปท 3.8 Sequence Diagram : Manage Type

36

รปท 3.9 Sequence Diagram : Add Product

รปท 3.10 Sequence Diagram : Manage Product

37

รปท 3.11 Sequence Diagram : Add Product Supplier

38

รปท 3.12 Sequence Diagram : Order list

39

รปท 3.13 Sequence Diagram : Add supplier

40

รปท 3.14 Sequence Diagram : Manage Supplier

41

รปท 3.15 Sequence Diagram : Add member

42

รปท 3.16 Sequence Diagram : Manage member

43

รปท 3.17 Sequence Diagram : Add customer

44

รปท 3.18 Sequence Diagram : Manager Customer

45

รปท 3.19 Sequence Diagram : Report import list

รปท 3.20 Sequence Diagram : Report sales

รปท 3.21 Sequence Diagram : Report product

46

รปท 3.22 Sequence Diagram : Report supplier

รปท 3.22 Sequence Diagram : Report Customer

47

3.6 Class Diagram

รปท 3.23 Class Diagram ของระบบจดการหนารานขายของช า

48

3.7 ER-Diagram

รปท 3.24 ER-Diagram ของระบบจดการหนารานขายของช า

บทท 4 การออกแบบทางกายภาพ

4.1 การออกแบบฐานขอมล (Database Design)

ในการจดเกบและจดการกบขอมลของระบบนนไดจดเกบขอมลทงหมดลงฐานขอมล(Database) โดยเลอกใชฐานขอมลเชงสมพนธ (Relational Database) นมการจดเกบขอมลในรปแบบของตาราง 2 มตเปนแถว (Row) และคอลมน (Column) และจดการฐานขอมลดวยโปรแกรมบรหารจดการฐานขอมล MariaDBโดยใชภาษา SQL และจดเกบไวทเครองแมขาย (Server) โครงสรางของตารางในฐานขอมลมรายละเอยด ดงน

ตารางท 4.1 รายละเอยดของตารางขอมล pos_member

Attribute Description Type PK FK Reference

member_id รหส Int(11) Yes

member_name ชอผใช varchar(255)

member_userid รหสผใช varchar(255)

member_password รหสผาน varchar(255)

member_token รหสชดนง varchar(255) member_datec วนทและเวลา data member_type ประเภทของรหส varchar(255)

ตารางท 4.2 รายละเอยดของตารางขอมล pos_order


order _id รหส Int(11) Yes

order_productcode รหสสนคา Int(11) Yes

order_code รหสใบเสรจ varchar(255)

order_amount ราคา varchar(255)

order_moneyuse เงนทลกคาจาย Int(11)

50

order_date วนทและเวลา data

order_sale สวนลด varchar(255)

ตารางท 4.3 รายล ะเอยดของตารางขอมล pos_type

Attribute Description Type PK FK Reference type_id รหส int(11) Yes type_name ชอประเภท varchar(255)

ตารางท 4.4 รายละเอยดของตารางขอมล pos_product


product_id รหส int(11) Yes

product_name ชอ varchar(255)

product_costprice ราคาตนทน varchar(255)

product_saleprice ราคาขาย varchar(255)

product_category ประเภท varchar(255)

product_code รหสสนคา varchar(255) Yes

product_image รป varchar(255)

ตารางท 4.5 รายละเอยดของตารางขอมล pos_productoder


productoder_id รหส int(11) Yes

productoder_code รหสสนคา varchar(255) Yes

productoder_amount ราคา varchar(255)

productorder_idsupp รหสคคา int(11) Yes

productorder_date วนทและเวลา data

51

ตารางท 4.6 รายละเอยดของตารางขอมล pos_supplier


supplier_id รหส int(11) Yes

supplier_name ชอคคา varchar(255)

supplier_address รหสผาน varchar(255)

supplier_phone เบอรโทร varchar(10)

supplier_vat ภาษ varchar(255)

supplier_pass รหสคคา varchar(255) Yes

ตารางท 4.7 รายละเอยดของตารางขอมล pos_supproduct


supproduct_id รหส int(11) Yes

supproduct_date วนทเวลา data

supproduct_codesupp รหสคคา varchar(255) Yes supproduct_code รหสการน าเขา varchar(255) supproduct_typevat ประเภทภาษ varchar(255) supproduct_vat ภาษ varchar(255)

ตารางท 4.8 รายละเอยดของตารางขอมล pos_amphures


amphures _id รหส int(5) Yes

amphures _name_th ชอภาษาไทย varchar(150)

amphures_name_en ชอภาษาองกฤษ varchar(150) amphures _code รหส varchar(4) Amphures_province_id รหสจงหวด int(11) Yes

52

ตารางท 4.9 รายละเอยดของตารางขอมล pos_districts


districts_id รหส varchar(6) Yes

districts_name_th ชอภาษาไทย varchar(150)

districts_name_en ชอภาษาองกฤษ varchar(150) districts_zip_code รหสไปรษณย int(11) Yes districts_amphure_id รหสเขต int(11)

ตารางท 4. 10 รายละเอยดของตารางขอมล pos_geographies


geographies_id รหส int(11) Yes

geographies_name ชอภาษาไทย varchar(255)

ตารางท 4.11 รายละเอยดของตารางขอมล pos_provinces


provinces_id รหส int(5) Yes

provinces_name_th ชอภาษาไทย varchar(150)

provinces_name_en ชอภาษาองกฤษ varchar(150) provinces_code รหสจงหวด varchar(2) provinces_geographies_id รหสภาค int(11) Yes

53

ตารางท 4.12 รายละเอยดของตารางขอมล pos_user


user_id รหส int(11) Yes

user_name ชอลกคา varchar(255)

user_tel เบอรโทร varchar(255) user_code รหสลกคา varchar(255) user_address ทอยลกคา varchar(255) user_province รหสจงหวด int(11) Yes user_amphures รหสเขต int(11) Yes user_district รหสอ าเภอ varchar(6) Yes user_postalcode รหสไปรษณย int(11) Yes

4.2 โครงสรางของเวบไซต (Site Map)

รปท 4.1 โครงสรางเวบไซตของระบบบรหารจดการหนารานขายของช า

54 4.3 การออกแบบสวนตดตอผใช (User Interface Design)

ระบบบรหารจดการหนารานขายของช า ออกแบบโดยยดหลก Quasar เปนหลกโดยค านงถงความพงพอใจของผใชเปนหลกจงออกแบบมาใหเมนตาง ๆ เพอใหผใชงานท างานงายมากยงขน ขนตอนการท างานของโปรแกรมในหนาตาง ๆ ท าใหผใชมความสะดวก โดยจะมเมนอยทางดานขางซายของหนาหลก

รปท 4.2 หนาจอลงชอเขาใชงาน (Login)

จากรปท 4.2 แสดงหนาส าหรบผใชในการยนยนตวตนเพอเขาใชงานระบบโดยผใชสามารถกรอกขอมลรหส และรหสผาน ในการยนยนตวตน จากนนคลกปม “Login” เพอท าการเขาสระบบ

รปท 4.3 หนาจอ Dashboard (สวนของแสดงยอดขาย)

55 จากรปท 4.3 แสดงรายงานตาง ๆ เกยวกบทางราน เชน ภาพรวมของรานคา จะแสดงยอดน าเขา (รายวน) ยอดขายสทธ (รายวน) ก าไรสทธ (รายวน) ยอดขายรายป

รปท 4.4 หนาจอ Dashboard (สวนของ ประวตการน าเขา)

จากรปท 4.4 แสดงรายงานตาง ๆ เกยวกบทางราน เชน ประวตการน าเขา ประวตการขายออก และ สนคาขายด

รปท 4.5 หนาจอ Dashboard (สวนของ ยอดขายลาสด)

จากรปท 4.5 แสดงรายงานตาง ๆ เกยวกบทางราน เชน ยอดขาย (ลาสด) ประวตน าเขา และ ประวตขายออก (ลาสด)

56

รปท 4.6 หนาจอขายสนคา

จากรปท 4.6 แสดงหนาการขายสนคา ประกอบดวย รายการสนคาภายในรานคา หนาจอส าหรบคดค านวณเงน แสดงราคารวมสนคา สวนลด จ านวนเงนทรบ และเงนทอน

รปท 4.7 หนาจอแสดงใบเสรจ จากรปท 4.7 แสดงใบเสรจทลกคาท าการซอสนคาจากทางรานคา

57

รปท 4.8 หนาจอส าหรบเพมประเภทสนคา จากรปท 4.8 แสดงหนาเพมประเภทของสนคา เชน ขนม น า และอาหาร เปนตน

รปท 4.9 หนาจอประเภทสนคา จากรปท 4.9 แสดงรายการประเภทสนคา เชน อาหาร เครองดม และขนม และมปมใหคลก

แกไข หรอ ลบ ประเภทสนคาได

1. เมอคลกปมแกไข จะสามารถแกไขรายละเอยดของประเภทสนคาได 2. เมอคลกปมลบ จะสามารถลบประเภทสนคาได

1 2

58

รปท 4.10 แสดงการแกไขประเภทสนคา จากรป 4.10 แสดงการแกไขประเภทของสนคา พนกงานสามารถเปลยน และคลกปมแกไข

ได

รปท 4.11 หนาจอเพมสนคาใหม

59 จากรป 4.11 แสดงการเพมสนคาใหม เขาคลงสนคาในระบบ จะมใหพมพชอสนคา ราคาตนทน ราคาขาย และ เลอกหมวดหมของสนคา

รปท 4.12 หนาจอแสดงรายการสนคา จากรปท 4.12 แสดงเมอคลกเมนสนคา และไปยงคลงสนคา หนานจะแสดงถงสนคาใน

คลงทงหมด ของทางราน โดยจะแสดงจ านวน และราคา ประเภท สถานะของสนคาทก าลงจะใกลหมด และมปมใหคลก แกไข หรอ ลบ สนคาในคลงได

1. เมอคลกปมแกไข จะสามารถแกไขรายละเอยดของสนคาได 2. เมอคลกปมลบ จะสามารถลบสนคาออกจากคลงได 3. เมอคลกปมตรงชอของสนคา จะสามารถเขาดรายการเขาและออกของสนคา

1, 2 3

60

รปท 4.13 หนาจอแสดงรายละเอยดของสนคา จากรป 4.13 แสดงรายละเอยดของสนคา มชอสนคา ราคาตนทน ราคาขาย จ านวนสนคา หมวดหม รายการน าเขา และ รายการขายออก

รปท 4.14 หนาจอแกไขสนคา จากรป 4.14 แสดงรายละเอยดของสนคา มชอสนคา ราคาตนทน ราคาขาย รปภาพของสนคา และหมวดหมของสนคา พนกงานสามารถแกไขได

61

รปท 4.15 หนาจอน าเขาสนคา จากรปท 4.15 แสดงสวนของการน าเขาสนคาเขาสระบบของทางราน จะมปมเพมสเขยว

ทางเจาของรานตองพมพชอสนคา ทตองการเพมเขามา และในสวนของหนาน ใหเพมคคาของทางราน เมอคลกปมเพมสมวง สนคาเราจะเขาคลงสนคา

รปท 4.16 หนาจอรายการสงซอ จากรปท 4.16 แสดงสวนของคคาของทางราน โดยสามารถ 1. คลกรายการสนคาเพอดรายละเอยดของรายการนได วารายการนทางรานสง

อะไรมาบาง 2. สามารถแกไข ลบ ออกใบเสรจหลกฐานการสงซอได

1 2, 3, 4

62 3. สามารถออกใบเสรจของการสงซอได

4. สามารถลบรายการสงซอได

รปท 4.17 หนาจอแสดงรายละเอยดของรายการสงซอ จากรปท 4.17 แสดงหนารายละเอยดของรายการสงซอ ชอสนคา รหสสนคา จ านวนชน ราคาตนทน และราคาขาย

รปท 4.18 หนาจอแสดงรายละเอยดของรายการสงซอ และแกไข จากรปท 4.18 แสดงหนารายละเอยดของรายการสงซอ ทจะแสดง วนเวลา ชอคคา และ

สามารถแกไขรายละเอยดได

63

รปท 4.19 หนาจอแสดงการออกรายงานของรายการสงซอ จากรปท 4.19 แสดงหนาการออกรายงานของรายการสงซอ และสามารถสงพมพได

รปท 4.20 หนาจอเพมผผลต หรอคคา

จากรปท 4.20 แสดงหนาการเพมขอมลคคา พนกงานตองใส ชอบรษทผผลต เบอรตดตอ ทอย จงหวด เขต ต าบล รหสไปรษณย และ เลขประจ าตวผเสยภาษ ละคลกปมสมวงเพอท าการเพม

64

รปท 4.21 หนารายการผผลต

จากรปท 4.21 แสดงหนารายการขอมลของคคา จะแสดงชอบรษท รหสผผลต เบอรตดตอ ทอย รหสไปรษณย และ เลขประตวผเสยภาษ และยงสามารถ

1. การแกไขรายละเอยดของคคา 2. การลบขอมลคคาของทางรานออก

รปท 4.22 หนาจอแกไขผผลต

จากรปท 4.22 แสดงหนาแกไขผผลต โดยสามารถแกไขรายละเอยดของผผลตได

65

รปท 4.23 หนาเพมผจดการระบบ จากรปท 4.23 แสดงหนาของการเพมผจดการระบบ หรอเพมพนกงาน เขาสระบบ โดย

สามารถก าหนด ชอผใช รหสผาน และประเภทของผใชได

รปท 4.24 หนาของรายละเอยดบญช

จากรปท 4.24 แสดงหนาของรายละเอยดบญชทงหมดของในระบบ โดยสามารถ

1. เมอคลกปมแกไขจะสามารถเขาไปแกไขรายละเอยดของบญชนนได 2. เมอคลกปมลบ จะสามารถลบ ID นนทงไดทนท

1 2

66

รปท 4.25 หนาจอแกไขบญชผใช จากรปท 4.25 แสดงหนาจอแกไขบญชผใช โดยสามารถแกไข ID Password และ Type ใน

จากนนคลกปมเพมเพอบนทกการแกไข

รปท 4.26 หนาจอออกรายงานการน าเขาทงหมด จากรปท 4.26 แสดงหนาจอการออกรายงานการน าเขาทงหมด สามารถเลอกเดอนและปใน

การออกรายงาน และคลกปมพมพเพอแสดงรายงานออกมา

67

รปท 4.27 หนาจอพมพรายงานของการน าเขาทงหมด

จากรปท 4.27 แสดงหนาจอพมพรายงานของการน าเขาท งหมด โดยจะแสดงล าดบ ประจ าเดอน ป พ.ศ. ชอสนคา และจ านวนสนคา

รปท 4.28 หนาจอออกรายงานยอดขายทงหมด จากรปท 4.28 แสดงหนาจอการออกรายงานยอดขายทงหมด จะใหเลอก เดอน และป พ.ศ.

68

รปท 4.29 หนาจอรายงานของยอดขายทงหมด จากรปท 4.29 แสดงหนาจอรายงานของยอดขายทงหมด โดยแสดงรายละเอยดของรายงาน

ล าดบท เลขทเอกสาร วน/ เดอน/ ป มลคาสนคา สวนลด และยอดรวมของการขายสนคา

รปท 4.30 หนาจอออกรายงานสนคา จากรปท 4.30 แสดงหนาจอการออกรายงานสนคาทงหมด จะใหเลอก สนคา ประเภท

(น าเขา หรอ ขายออก) ประจ าเดอน ถง เดอน แลวคลกพมพรายงาน

69

รปท 4.31 หนาจอพมพรายงานของการสนคา

จากรปท 4.31 แสดงหนาจอพมพรายงานของการน าเขาของสนคา ทจะแสดงการน าเขาจากคคาใด วนเดอนป และ จ านวน และราคารวมของสนคา

รปท 4.32 หนาจอการออกรายงานคคา

จากรปท 4.32 แสดงหนาจอการออกรายงานคคา ทจะใหเลอกคคา ประจ าเดอน ถงเดอน แลวคลกปมพมพรายงาน

70

รปท 4.33 หนาจอพมพรายงานของคคา

จากรปท 4.33 แสดงหนาจอพมพรายงานของการน าเขาของคคา วาน าสนคาอะไรเขามาบาง แสดง วนเดอนป ชอสนคาทน าเขา และจ านวนของสนคา

รปท 4.34 หนาจอการออกรายงานของลกคา

จากรปท 4.34 แสดงหนาจอการออกรายงานของงลกคา ทตองเลอกชอของลกคา และ ประจ าเดอน ไหนถงเดอนไหน และคลกปมพมพรายงาน

71

รปท 4.35 หนาจอพมพรายงานของลกคา

จากรปท 4.35 แสดงหนาจอพมพรายงานของลกคา วาท าการซอสนคาจากทางรานอะไรไปบาง แสดง วนเดอนป ในการซอ ชอสนคาทซอ และจ านวน

บทท 5

สรปผลและขอเสนอแนะ

5.1 สรปผลปรญญานพนธ

การพฒนาระบบบรหารจดการหนารานขายของช าไดพฒนาเสรจสนตามวตถประสงคทตงไวอยางสมบรณ โดยในสวนของผดแลระบบ (เจาของราน) สามารถตรวจสอบและจดการกบขอมลการสงซอสนคาได เชคจ านวนสนคาในคลงสนคาได ดภาพรวมของรายไดทงหมดในแตละเดอนได สามารถออกรายงานตาง ๆได และยงเพมลบ และแกไขสนคาของทางรานได สามารถออกรายงานทเกยวกบการขายสนคา จะแสดงขอมลของสนคาทขายออกไป และรายงานยอดขายสนคาทงหมด สวนของพนกงานสามารถใชหนาขายสนคาได สามารถออกใบเสรจใหกบลกคา และยงสามารถเพม หรอลบ และแกไขสนคาของทางรานได โดยระบบสามารถชวยลดขอผดพลาด และใชเวลาในการท างานนอยลง และเพมความสะดวกตอการใชงานยงขน ระบบมการเกบขอมลของสนคาทละเอยดกวาการจดดวยมอ มการแสดงรายการสนคามทงรายละเอยดของสนคาขอมลของสนคาวนทน าสนคาเขา-ออก อกทงยงสามารถออกรายงานทงสนคาเขา และสนคาออกได เจาของรานยงสามารถเกบรายละเอยดของพนกงานงาน และจดการสทธใหกบพนกงานได พนกงานจงสามารถใชงานระบบใหเกดประโยชนทสด

5.2 ขอดของระบบ

5.2.1 สามารถตรวจสอบและจดการกบขอมลการสงซอสนคาได 5.2.1.1 สามารถเกบจ านวนของสนคาได 5.2.1.2 สมารถเกบราคาของสนคาได 5.2.1.3 สามารถเกบล าดบทของสนคาได 5.2.1.4 สามารถเกบรหสของสนคาได 5.2.1.5 สามารถเกบประเภทของสนคาได 5.2.1.6 สามารถเกบชอสนคาไดราคาน าเขาของสนคาได 5.2.1.7 สามารถเกบราคาทน าเขาและน าขายสนคาได 5.2.2 สามารถเชคของในคลงสนคาได

5.2.2.1 สามารถคนหาสนคาทน าเขามาในระบบได 5.2.2.2 สามารถดรายละเอยดสนคาทน าเขาและน าออกได 5.2.2.3 สามารถเชคสถานะสนคาทก าลงจะหมดได 5.2.2.4 สามารถแกไขและลบสนคาทอยในคลงสนคาได

73

5.2.3 สามารถดภาพรวมของรายไดทงหมดในแตละเดอนได 5.2.4 สามารถดรายงานตาง ๆได 5.2.4.1 สามารถดยอดขายรายเดอนได 5.2.4.2 สามารถดประวตน าเขาสนคาได 5.2.4.3สามารถดประวตการขายสนคาได 5.2.5 สามารถออกใบเสรจได 5.2.5.1 สามารถดขอมลของสนคาได 5.2.5.2 สามารถดจ านวนทซอสนคาได 5.2.5.3 สามารถดสวนลดได 5.2.5.4 สามรถดวนเวลาทออกใบเสรจได

5.3 ขอจ ากดของระบบ 5.3.1 ระบบยงไมสามารถรองรบการช าระเงนในรปแบบดจตอล 5.3.2 ระบบยงไมสามารถแสดงยอดขายสนคาแบบแตละสนคาได 5.4 ขอเสนอแนะ เพอเพมประสทธภาพในการท างานและใหระบบมความสมบรณมากยงขนควรพฒนาระบบดงตอไปน 5.4.1 ระบบควรเพมชองทางการรบช าระเงน 5.4.2 ระบบควรรองรบทง 2 ภาษา ทงภาษาไทย และภาษาองกฤษ

5.4.3 ระบบควรพกบล และเรยกบลกลบมาได ในกรณทลกคาคนนนซอยงไมเสรจ แตม ลกคาอกคนทพรอมจะจายเงนแลว

5.4.4 ระบบควรช าระเงนลวงหนาได ในใบเสรจระบชอลกคา และชอพนกงานอนมต 5.4.5 ระบบทสามารถรบสนคาเขาเปนหนวยใหญ และหนวยยอยได เชน บะหม 1 ลง

บรรจ 3 หอ 5.4.6 ระบบทรองรบเงนตราตางประเทศ 5.4.7 ระบบควรมรายงานการเคลอนไหวของสนคา สนคาทไมมการขายออกจากรานเลย

บรรณานกรม

ไซตดอทกเกล. (2562). Client/ Server. เขาถงไดจาก https://sites.google.com/site/jesadawin/khil- xen-t-seirfwexr-client-server-network ดบบลววายเอนซอฟท. (2562). CSS. เขาถงไดจาก https://www.wynnsoft- solution.net/th/article/view/80/ มายดพเอชพ. (2560). .HTML. เขาถงจาก https://www.mindphp.com/คมอ/73-คอ

อะไร/2026-html-คออะไร.html มายดพเอชพ. (2560). PHP. เขาถงจาก https://www.mindphp.com/คมอ/73-คอ

อะไร/2127-php-คออะไร.html มายดพเอชพ. (2560). Dream Weaver. เขาถงจาก https://www.mindphp.com/คมอ/73-คอ

อะไร/2233-dreamweaver-คออะไร.html วกพเดย. (ม.ป.ป). Web application. วนทสบคน 10 สงหาคม 2562, จาก https://en.wikipedia.org/wiki/Web_application เอนจอยดเดย. (2562). JavaScript. เขาถงไดจาก http://www.enjoyday.net/javascript-คออะไร.html


frontend management system for a grocery store

Documents