Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
ระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)
Stock Management and Product Withdraw System (Case Study Link-Computer)
นาย อภรกษ นมพนธ 5804800001 นาย ณฐวฒ อารมนเยน 5804800049
ปรญญานพนธนเปนสวนหนงของการศกษาตามหลกสตรปรญญาวทยาศาสตรบณฑต
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสยาม ปการศกษา 2561
ก
หวขอปรญญานพนธ ระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)
หนวยกตของปรญญานพนธ 3 หนวยกต รายชอคณะผจดท า นาย อภรกษ นมพนธ 5804800001
นาย ณฐวฒ อารมนเยน 5804800049 อาจารยทปรกษา อาจารยธนาภรณ รอดชวต ระดบการศกษา วทยาศาสตรบณฑต ภาควชา วทยาการคอมพวเตอร ปการศกษา 2561
บทคดยอ
ราน ลงก คอมพวเตอร เปนรานจ าหนายอปกรณคอมพวเตอรขนาดกลาง มหนารานอยท
หางสรรพสนคาซคอนบางแค ซงมลกคาเปนจ านวนมากโดยในปจจบนทางรานไมไดมการน าเทคโนโลยใดเขามาชวยในการด าเนนงาน เชน การเกบขอมลพนกงาน ขอมลสนคา การขาย การค านวณราคาสนคา ปจจบนนยงเปนการจดบนทกดวยมอ ในทางการค านวนจ านวนสนคาของแตละเดอนตองน าใบเสรจมาค านวนใหม ทางรานจงมความตองการทจะพฒนาระบบทจะน ามาชวยใหการด าเนนงานสะดวกและรวดเรวยงขน จากปญหาดงกลาวท าใหผจดท ามแนวคดน าเทคโนโลยสารสนเทศ และระบบฐานขอมลมาใชในการพฒนาระบบระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร) โดยพฒนาดวยภาษา Java Script ดวยโปรแกรม Visual Studio Code และจดการฐานขอมลดวย Fire base โดยระบบสามารถจดเกบขอมลพนกงาน ขอมลสนคา ขอมลการสนคาเขา ขอมลสนคาออก บนทกลงฐานขอมล ซงประกอบดวยฟงกชนการท างานดงน การจดการขอมลอปกรณคอมพวเตอร ขอมลพนกงาน ขอมลรายการขาย และ ขอมลสนคาเขา-ออก โดยระบบสามารถชวยบนทกขอมลพนกงาน ขอมลสนคา ขอมลของสนคาเขา-ออก ค านวณราคาสนคา และค านวณยอดขายไดอยางถกตอง มความสะดวกรวดเรว และเพมประสทธภาพในการท างาน ค าส าคญ : อปกรณคอมพวเตอร, เกม, การเบกสนคา, คลงสนคา
ค
กตตกรรมประกาศ (Acknowledgment)
การจดท าปรญญานพนธฉบบนส าเรจไดนน คณะผจดท าไดรบความกรณาจาก อาจารยผสอนทกทานทใหขอมลตาง ๆ สงผลใหคณะผจดท าไดรบความรและประสบการณตาง ๆ ทมคามากมายส าหรบปรญญานพนธฉบบนส าเรจลงไดดวยดจากความรวมมอและสนบสนนจากหลายฝายดงน
1. อาจารย ธนาภรณ รอดชวต อาจารยทปรกษา
คณะผจดท าใครขอขอบพระคณคณะกรรมการสอบปรญญานพนธ ทไดใหค าแนะน าส าคญเพอใหการสอบปรญญานพนธฉบบน และผมสวนรวมทกทาน รวมทงผทไมไดกลาวนาม ทมสวนรวมในการใหขอมลใหความชวยเหลอ และเปนทปรกษาใหค าแนะน าตาง ๆ จนท าใหงานทกอยางประสบความส าเรจไปดวยด และท ารายงานฉบบนจนเสรจสมบรณ ซงคณะผ จ ดท าขอขอบพระคณเปนอยางสงไว ณ ทนดวย
คณะผจดท า
นาย อภรกษ นมพนธ นาย ณฐวฒ อารมยเยน
สารบญ หนา
บทคดยอ ........................................................................................................................................... ก
Abstract ........................................................................................................................................... ข
กตตกรรมประกาศ ............................................................................................................................ ค
บทท 1 บทน า
1.1 ความเปนมาและความส าคญของปญหา .................................................................................. 1
1.2 วตถประสงคของปรญญานพนธ ............................................................................................. 1
1.3 ขอบเขตปรญญานพนธ ............................................................................................................ 2
1.4 ประโยชนทคาดวาจะไดรบ ..................................................................................................... 3
1.5 ขนตอนและวธการด าเนนงานปรญญานพนธ ......................................................................... 3
1.5.1 การรวบรวมความตองการและการศกษาขอมล ......................................................... 3
1.5.2 การวเคราะหระบบ ..................................................................................................... 3
1.5.3 ออกแบบระบบ ........................................................................................................... 4
1.5.4 การพฒนาระบบ ......................................................................................................... 4
1.5.5 การทดสอบระบบ ...................................................................................................... 4
1.5.6 จดท าเอกสาร ............................................................................................................... 4
1.6 อปกรณและเครองมอทใชในการพฒนา .................................................................................. 5
1.6.1 ฮารดแวร ..................................................................................................................... 5
1.6.2 ซอฟตแวร ................................................................................................................... 5
1.7 อปกรณและเครองมอทรองรบระบบ ...................................................................................... 5
1.7.1 ฮารดแวร ..................................................................................................................... 5
1.7.2 ซอฟตแวร ................................................................................................................... 5
บทท 2 การทบทวนวรรณกรรมและเอกสารทเกยวของ 2.1 HTML .................................................................................................................................... 6 2.2 JavaScript ............................................................................................................................... 7 2.3 CSS ........................................................................................................................................ 9 2.4 Vue.Js ................................................................................................................................... 10
2.5 Google Firebase ................................................................................................................... 11 2.6 Client/Server Network ......................................................................................................... 12
สารบญ(ตอ) หนา
2.7 Web application ....................................................................................................................... 13 2.8 Visual Studio Code .................................................................................................................. 14
บทท 3 การวเคราะหและออกแบระบบ
3.1 รายละเอยดของปรญญานพนธ .............................................................................................. 15 3.2 ขนตอนการด าเนนงาน .......................................................................................................... 15
3.2.1 วเคราะหระบบงานปจจบน ....................................................................................... 15 3.2.2 วเคราะหระบบงานใหม ............................................................................................ 17
3.3 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram ................................................. 18 3.4 ค าอธบายรายละเอยดของยสเคส .......................................................................................... 19 3.5 Sequence Diagram ............................................................................................................... 35 3.6 Class Diagram Detail ........................................................................................................... 50 3.7 โครงสรางขอมล(Data Structure) ......................................................................................... 64
บทท 4 รายละเอยดปรญญานพนธ 4.1 การออกแบบสวนตดตอผใช ................................................................................................ 70
บทท 5 สรปผลและขอเสนอแนะ 5.1 สรปผลปรญญานพนธ ......................................................................................................... 100 5.2 ขอดของระบบ ..................................................................................................................... 100 5.2 ขอจ ากดของระบบ ............................................................................................................... 101 5.2 ขอเสนอแนะ ........................................................................................................................ 101
บรรณานกรม.................................................................................................................................102
สารบญตาราง หนา
ตารางท 1 ระยะเวลาในการด าเนนงานปรญญานพนธ ....................................................................... 5 ตารางท 2 รายระเอยดของ Use Case :Login .................................................................................. 19 ตารางท 3 รายระเอยดของ Use Case :Home ................................................................................ 20 ตารางท 4 รายระเอยดของ Use Case :personal information .......................................................... 21 ตารางท 5 รายระเอยดของ Use Case :Product ............................................................................... 22 ตารางท 6 รายระเอยดของ Use Case :Product report .................................................................... 23 ตารางท 7 รายระเอยดของ Use Case :Purchase Order .................................................................. 24 ตารางท 8 รายระเอยดของ Use Case :Withdraw ........................................................................... 25 ตารางท 9 รายระเอยดของ Use Case :Po/Withdraw report ........................................................... 26 ตารางท 10 รายระเอยดของ Use Case :Stock Type ....................................................................... 27 ตารางท 11 รายระเอยดของ Use Case :Product Type .................................................................... 28 ตารางท 12 รายระเอยดของ Use Case :Supplier ............................................................................ 29 ตารางท 13 รายระเอยดของ Use Case :Return Merchandise ......................................................... 30 ตารางท 14 รายระเอยดของ Use Case :Return Merchandise report .............................................. 31 ตารางท 15 รายระเอยดของ Use Case :Edit Employee ................................................................. 32 ตารางท 16 รายระเอยดของ Use Case :Manage active group ....................................................... 33 ตารางท 17 รายระเอยดของ Use Case :Permission ....................................................................... 34 ตารางท 18 Class Diagram ของ ระบบจดการคลงหรอการเบกสนคา ............................................ 50 ตารางท 19 รายละเอยดของ Class Diagram : product .................................................................... 51 ตารางท 20 รายละเอยดของ Class Diagram : roles ........................................................................ 51 ตารางท 21 รายละเอยดของ Class Diagram : userAccounts .......................................................... 52 ตารางท 22 รายละเอยดของ Class Diagram : login ........................................................................ 52 ตารางท 23 รายละเอยดของ Class Diagram : logout ...................................................................... 53 ตารางท 24 รายละเอยดของ Class Diagram : userAccount ............................................................ 53 ตารางท 25 รายละเอยดของ Class Diagram : po ............................................................................ 54 ตารางท 26 รายละเอยดของ Class Diagram : Purchase order ........................................................ 55 ตารางท 27 รายละเอยดของ Class Diagram : withdraw ................................................................. 56
สารบญตาราง (ตอ)
หนา
ตารางท 28 รายละเอยดของ Class Diagram : stock type ................................................................ 58 ตารางท 29 รายละเอยดของ Class Diagram : product type ............................................................ 58 ตารางท 30 รายละเอยดของ Class Diagram : Supplier ................................................................... 59 ตารางท 31 รายละเอยดของ Class Diagram : Return merchandise ................................................ 60 ตารางท 32 รายละเอยดของ Class Diagram : permission ............................................................... 61 ตารางท 33 รายละเอยดของ Class Diagram : dbProcess ................................................................ 62 ตารางท 34 รายละเอยดของ Class Diagram : SelectOptions .......................................................... 63
สารบญรปภาพ
หนา
รปท 1 HTML ............................................................................................................................... 6 รปท 2 JavaScript ......................................................................................................................... 7 รปท 3 CSS ................................................................................................................................... 9 รปท 4 Vue.Js ............................................................................................................................. 10
รปท 5 Google Firebase .............................................................................................................. 11 รปท 6 Client/Server Network .................................................................................................... 12 รปท 7 Web application .............................................................................................................. 13 รปท 8 Visual Studio Code ......................................................................................................... 14 รปท 9 Work Flow Diagram ของระบบงานปจจบน ................................................................... 16 รปท 10 Work Flow Diagram ของระบบจดการคลงและการเบกสนคา ...................................... 17 รปท 11 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram ......................................... 18 รปท 12 Sequence Diagram : Login ........................................................................................... 35 รปท 13 Sequence Diagram : Home ........................................................................................... 36 รปท 14 Sequence Diagram : Personal information ................................................................... 37 รปท 15 Sequence Diagram : Personal information ................................................................... 38 รปท 16 Sequence Diagram : Product Report ............................................................................. 39 รปท 17 Sequence Diagram : Purchase Order ............................................................................. 40 รปท 18 Sequence Diagram : withdraw ...................................................................................... 41 รปท 19 Sequence Diagram : Po/withdraw report ...................................................................... 42 รปท 20 Sequence Diagram : Stock Type .................................................................................. 43 รปท 21 Sequence Diagram : Product Type ............................................................................... 44 รปท 22 Sequence Diagram : Supplier ....................................................................................... 45 รปท 23 Sequence Diagram : Return Merchandise ..................................................................... 46 รปท 24 Sequence Diagram : Return Merchandise Report ........................................................ 47 รปท 25 Sequence Diagram : Edit employee ............................................................................. 48 รปท 26 Sequence Diagram : Manage group user ...................................................................... 48 รปท 27 Sequence Diagram : Permission ................................................................................... 49 รปท 28 Class Diagram ของ ระบบจดการคลงหรอการเบกสนคา ............................................. 50 รปท 29 โครงสรางขอมลทจดเกบใน Storage ............................................................................ 64
สารบญรปภาพ (ตอ) หนา
รปท 30 โครงสรางของขอมล Firebase Authentication ............................................................. 64
รปท 31 โครงสรางขอมลทจดเกบใน authgroup,autupermission และ authuser ........................ 65 รปท 32 โครงสรางขอมลทจดเกบใน Product ............................................................................ 66 รปท 33 โครงสรางขอมลทจดเกบใน po,withdraw และ poProduct ........................................... 67 รปท 34 โครงสรางขอมลทจดเกบใน StockType,ProductType และ supplier ............................ 68 รปท 35 โครงสรางขอมลทจดเกบใน returnmer ......................................................................... 69 รปท 36 หนาจอลงชอเขาใชงานและสมครสมาชก ...................................................................... 70 รปท 37 หนาจอสงรหสไปทมอถอเมอลมรหสผาน .................................................................... 71 รปท 38 หนาจอ Home ............................................................................................................... 72 รปท 39 หนาจอ Product low ...................................................................................................... 73 รปท 40 หนาจอขอมลสวนบคล .................................................................................................. 74 รปท 41 หนาจอแสดงขอมลทอย ................................................................................................. 75 รปท 42 หนาจอแสดงรายการรวมของสนคา ............................................................................... 76 รปท 43 หนาจอเพมสนคาเขาคลง ............................................................................................... 77 รปท 44 รายงานสนคาคงคลงทงหมด .......................................................................................... 78 รปท 45 หนาจอเพมสนคาเขาคลง ............................................................................................... 79 รปท 46 หนาสงจอซอสนคา ........................................................................................................ 80 รปท 47 หนาจอเพมสนคาทสงซอ ............................................................................................... 81 รปท 48 หนาจอเบกสนคา ........................................................................................................... 82 รปท 49 หนาเพมขอมลของการเบกสนคา ................................................................................... 83 รปท 50 หนารายงานการสงซอ .................................................................................................... 84 รปท 51 หนารายงานการเบก ....................................................................................................... 85 รปท 52 หนาจอแยกประเภทของคลงสนคา ................................................................................ 86 รปท 53 หนาจอเพมประเภทของสนคา ....................................................................................... 87 รปท 54 หนาจอแสดงประเภทของสนคา .................................................................................... 88 รปท 55 หนาทใชเพมจ าแนกประเภทของสนคา ......................................................................... 89 รปท 56 หนาของผขาย ................................................................................................................ 90 รปท 57 หนาจอเพมรายละเอยดขอมลผขาย ................................................................................ 91 รปท 58 หนาจอสงสนคาคน ........................................................................................................ 92
สารบญรปภาพ (ตอ) หนา
รปท 59 หนาจอจดการและแกไขจ านวนสนคาในคลงสนคา ...................................................... 93 รปท 60 หนารายงานสงสนคาคนทงหมด .................................................................................... 94 รปท 61 หนาจอจดการรายชอพนกงาน ....................................................................................... 95 รปท 62 หนาจอจดการกลมผใช .................................................................................................. 96 รปท 63 หนาจอเพมและจดการกบกลมผใชงาน .......................................................................... 97
รปท 64 หนาจอจดการมอบสทธใหแกผใชงาน ........................................................................... 98
รปท 65 หนาจอเพมผจดการสทธ ................................................................................................ 99
บทท 1 บทน ำ
1.1 ทมำและควำมส ำคญของปญหำ ราน ลงก คอมพวเตอร ด าเนนการจ าหนายอปกรณเกมมงเกยร เชน เมาส คยบอรด หฟง เปนตน ในการด าเนนงานในปจจบน พบปญหาทเกดขนจากการด าเนนงานหลายอยาง เนองจากมลกษณะการด าเนนงานเปนแบบท าดวยมอท งหมด ไมมการน าเทคโนโลยมาใช อกท งมความซ าซอน และยงยากในการด าเนนงาน ซงระบบหนงทนาสนใจและไดน ามาศกษาในครงนกคอระบบจดการสตอกอปกรณเกมมงเกยร ปญหาทพบมดงน 1. การจดเกบอปกรณ เมอรบบลสงของเขามา จะท าการเกบอปกรณไวในชนเกบทไดตดรหสอปกรณนนๆไว โดยไมไดมการบนทกการรบเขา และจ านวนอปกรณทเกบทงหมดไว ท าใหไมสามารถทราบจ านวนอะไหลทแนนอน หรอโดยประมาณได 2. การเบกอปกรณออกไปใช ไมมการบนทกการเบกออกไป ท าใหไมทราบจ านวนอปกรณทมอยทแนนอน หรอโดยประมาณได 3. เนองจากไมมการบนทกการรบอปกรณเขา และการเบกออกไปใช ท าใหไมสามารถรจ านวนอปกรณทแนนอน หรอโดยประมาณได ดงนนสงผลใหไมสามารถค านวณปรมาณอปกรณ หรอมขอมลทใชในการตดสนใจทจะท าการสงซอเขามาใหมได ซงพบปญหาวา บางครงอปกรณไมเพยงพอกตองเสยเวลาสงซอใหมและตองรอการสงจากผขาย ท าใหเสยเวลา และเสยโอกาสในทางธรกจ 4. รายละเอยดของอปกรณแตละชนด และประเภท ไมไดถกจดการใหเปนหมวดหมทชดเจน ท าใหการคนหามความลาชา บางครงกท าใหหาไมพบ เนองจากมอปกรณหลายประเภท และจ านวนมาก จากปญหาดงกลาวทางคณะผจดท าจงไดท าการพฒนาระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร) เพอทจะน ามาใชแกปญหาแทนการจดบนทกขอมลของรานคา ท าใหลดขอผดพลาดของการบนทกขอมล และลดเวลาในการท างานมากยงขน โดยระบบ ดการคลงและการเบกสนคา ประกอบดวยฟงกชนการท างาน ไดแก เพม-ลบ-แกไข ขอมลสนคา สงสนคาคน เพมขอมลผผลต ออกใบรายงานการสงซอ ออกใบรายงานการเบก โดยระบบพฒนาโดยใชเครองมอ Visual Studio code และจดการฐานขอมลดวย Fire base ภาษาทใชในการพฒนาโปรแกรม Java Script โดยระบบสามารถชวยลดเวลาการท างานของรานลง และชวยลดขอผดพลาดในการท างานได กอใหเกดประสทธภาพในการท างานทเพมมากขน 1.2 วตถประสงคของปรญญำนพนธ เพอพฒนาระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)
2
1.3 ขอบเขตปรญญำนพนธ 1.3.1 สถาปตยกรรมทใชในการพฒนาโครงงานเปนแบบไคลเอนท/ เซรฟเวอร (Client/ Server Architecture) 1.3.2 จดการขอมลโดยใช Fire base 1.3.3 กลมผใชแบงออกเปน 2 กลม ประกอบดวย 1.3.3.1 เจาของราน 1.3.3.1.1 ก าหนดคา - ระบบสามารถเพม แกไข ลบ คนหา ขอมลสนคาและ รายละเอยดตาง ๆของสนคาได เชน ราคาขาย ราคาซอเขา ประเภทอปกรณ จ านวนสนคา - ระบบสามรถเพม แกไข ลบ คนหา ประเภทของสนคา - ระบบสามารถเพม แกไข ลบ คนหา คลงสนคา - ระบบสามารถเพม แกไข ลบ คนหา ชอผขายได 1.3.3.1.2 การเขาถง - ระบบสามารถแกไข คนหา ขอมลพนกงาน - ระบบสามารถเพม แกไข ลบ คนหา จดการกลมใชงาน - ระบบสามารถเพม ลบ จดการสทธใหกบพนกงานได 1.3.3.1.3 จดการเอกสาร - ท ารายการสงซอสนคา ยนยนรายการสงซอสนคา พมพ รายการสงซอสนคา - ท ารายการเบกสนคา ยนยนการเบกสนคา พมพรายการเบก สนคา 1.3.3.1.4 รายงาน - ระบบแสดงสรปรายงานสนคาคงคลงทงหมด - ระบบแสดงสรปรายงานสนคาคงคลงทมจ านวนนอยกวา เหลอเทากบ 4ชน - ระบบแสดงสรปรายงานใบสงซอทงหมด - ระบบแสดงสรปรายงานการเบกสนคาทงหมด - ระบบแสดงสรปรายงานทมการสงสนคาคนทงหมด 1.3.3.1.5 สงสนคาคน - สงคนสนคาทช ารดกลบสราน - สงคนสนคาเนองจากลกคาซอผดรน
3
1.3.3.2 พนกงาน 1.3.3.2.1 ระบบสามารถเพม แกไข ลบ คนหา ขอมลสนคาและ รายละเอยดตาง ๆของสนคาได เชน ราคาขาย ราคาซอเขา ประเภทของอปกรณ จ านวนสนคา 1.3.3.2.1 ก าหนดคา - ระบบสามรถเพม แกไข ลบ คนหา ประเภทของสนคา - ระบบสามารถเพม แกไข ลบ คนหา คลงสนคา - ระบบสามารถเพม แกไข ลบ คนหา ชอผขายได 1.3.3.2.3 สงสนคาคน - สงคนสนคาทช ารดกลบสราน - สงคนสนคาเนองจากลกคาซอผดรน 1.4. ประโยชนทคำดวำจะไดรบ 1.4.1 ลดขอผดพลาดทอาจเกดขนของผใชเนองจากการจดบนทกขอมลท าใหผดพลาด บอยครงจงเปลยนมาใชโปรแกรมแทน 1.4.2 ใชงานงายไมซบซอน โปรแกรมออกแบบมาเพอใหผใชงานเขาใจงายไมซบซอนตอ การใชงาน 1.4.3 ลดจ านวนโปรแกรมทใชในองคกร เพอใหไดประสทธภาพในการท างาน 1.4.4 ลดระยะเวลาในการท างานเนองจากการจดบนทกรายงานประจ าวน โดยใชโปรแกรม ท างานแทนเพอลดระยะเวลาในการท างาน 1.5 ขนตอนและวธกำรด ำเนนงำนปรญญำนพนธ
1.5.1 กำรรวบรวมควำมตองกำรและกำรศกษำขอมล (Detailed Study) โดยมการประชมรวมกนระหวางคณะผ จ ดท า และเจาของรานขายอปกรณ คอมพวเตอรโดยมความตองการพฒนาเปนโปรแกรม และมความสามารถท าอะไรบาง ขอบเขตการท างานเปนอยางไร รวบรวมปญหาทไดจากการปฏบตงานเพอน าไปแกไขและ ปรบปรงใหโปแกรมมประสทธภาพในการท างานทดขน และลดเวลาในการท างานลง
1.5.2 กำรวเครำะหระบบ (System Analysis) น าขอมลตาง ๆ และขอบเขตทไดจากการรวบรวมขอมลน ามาวเคราะห และวางแผนปฏบตงานเพอท าการออกแบบโปรแกรม เพอใหตอบสนองความตองการของผใชอยางสมบรณ โดยวเคราะหจากความตองการและขอบเขตการท างานของโปรแกรม
4
1.5.3 กำรออกแบบระบบ (System Design) ในขนตอนนจะท าการออกแบบโปรแกรมทจะน ามาใชจรง เพอเปนแนวทางในการพฒนาเวบโปรแกรมทจะตองตอบสนองความตองการของผใชไดมากทสด 1.5.3.1 การออกแบบสถาปตยกรรม โดยสถาปตยกรรมทใชในการพฒนา โครงงานเปนแบบไคลเอนท/ เซรฟเวอร (Client/ Server Architecture) 1.5.3.2 ออกแบบโครงสรางฐานขอมลโดยใช Fire base ในการเกบขอมลของ สนคาและรายละเอยดตางๆของสนคา 1.5.3.3 ออกแบบสวนตดตอผใช ออกแบบโดยใหผใชงานเขาใจงาย โดยใช HTML5, Quasar Framework 1.5.3.4 ออกแบบเครองมอฮารดแวรและซอฟตแวร ประกอบดวย โปรแกรม Visual Code , Firebase , Github 1.5.4 กำรพฒนำระบบ (System Development) เปนขนตอนในการพฒนาระบบเปนการน าขอมลทงหมดทไดจากการวเคราะหและออกแบบระบบไว มาพฒนาและเขยนชดค าสง โดยใชโปรแกรม Microsoft Visual Studio Code ในการพฒนาโปรแกรม (Program) 1.5.5 กำรทดสอบระบบ (System Testing) ผจ ดท าไดท าการทดสอบและพฒนาระบบไปพรอม ๆ กน โดยใช Microsoft Visual Studio 2017 การทดสอบโปรแกรม (Program) เมอตรวจสอบความผดพลาดในการท างานของระบบและการแสดงผล รวมทงตรวจสอบขอมลตาง ๆ ภายในระบบวามความผดพลาดในการท างานในขนตอนใดบาง ถาพบขอผดพลาดจะท าการแกไขใหถกตอง และท าการทดสอบอกครงหลงจากท าการแกไขเสรจเรยบรอยแลว 1.5.6 กำรจดท ำเอกสำร (Documentation)
เปนการจดท าเอกสารแนวทางในการด าเนนโครงงานวธการและขนตอนการ ด าเนนโครงงานเพอน าเสนอรายงานตออาจารยทปรกษาและเปนคมอการใชงานส าหรบ สถานประกอบการใชอางองในอนาคต
5
1.6 แผนและระยะเวลำในกำรด ำเนนงำนปรญญำนพนธ ตารางท 1.1 ระยะเวลาในการด าเนนงานปรญญานพนธ
กจกรรม 2561 2562
ก.ย. ต.ค. พ.ย. ธ.ค. ม.ค. ก.พ. ม.ค. เม.ย. พ.ค. ม.ย. 1.รวบรวมขอมล 2.วเคราะหระบบ 3.ออกแบบระบบ 4.พฒนาระบบ 5.ทดสอบระบบ 6.จดท าเอกสาร
1.7 อปกรณและเครองมอทใชในกำรพฒนำระบบ 1.7.1 ฮำรดแวร 1.7.1.1 Notebook Asus GTX950M 1.7.1.2 Notebook Lenovo Legion Y520 1.7.2 ซอฟตแวร 1.7.2.1 Visual Studio 2017 1.7.2.2 Github Desktop 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 โปรแกรม Visual Studio 2017 1.8.2.2 โปรแกรมเวบบราวเซอร Google Chrome, Mozilla, FireFox,
Microsoft Edge
บทท 2 การทบทวนเอกสารและวรรณกรรมทเกยวของ
ในการพฒนาระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)โดยไดมการประยกตใชแนวคด ทฤษฎ และเทคโนโลยตาง ๆ เพอใหระบบนนตอบโจทยผใชไดมากทสด ประกอบดวย 2.1 ภาษาโปรแกรมทใชในการพฒนา 2.1.1 HTML1
รปท 2.1 สญลกษณ HTML
เปนภาษาหลกทใชในการเขยนเวบเพจ โดยใช Tag ในการก าหนดการแสดงผล HTML ยอมาจากค าวา Hypertext Markup Language โดย Hypertext หมายถง ขอความทเชอมตอกนผานลงค (Hyperlink) Markup language หมายถงภาษาทใช Tag ในการก าหนดการแสดงผลสงตาง ๆ ทแสดงอยบนเวบเพจ ดงนน HTML จงหมายถง ภาษาทใช Tag ในการก าหนดการแสดงผลเวบเพจทตางกเชอมถงกนใน Hyperspace ผาน Hyperlink ทางผจดท าจงน าทฤษฏนมาท าการออกแบบหนาเวปไซตของระบบ ยกตวอยางดงรป 2.2
1 http://www.codingbasic.com/html.html
7
รปท 2.2 ตวอยางหนาจอระบบทใชภาษา HTML ในการเขยน
2.1.2 JavaScript2
รปท 2.3 สญลกษณ Java Script
คอ ภาษาคอมพวเตอรส าหรบการเขยนโปรแกรมบนระบบอนเทอรเนต ทไดรบความนยมอยางสง Java JavaScript เปน ภาษาสครปตเชงวตถ (ทเรยกกนวา "สครปต" (script) ซงในการสรางและพฒนาเวบไซต (ใชรวมกบ HTML) เพอใหเวบไซตดมการเคลอนไหว สามารถตอบสนองผใชงานไดมากขน ซงมวธการท างานในลกษณะ "แปลความและด าเนนงานไปทละค าสง" (interpret) หรอเรยกวา ออบเจกโอเรยลเตด (Object Oriented Programming) ทมเปาหมายในการ ออกแบบและพฒนาโปรแกรมในระบบอนเทอรเนต ส าหรบผเขยนดวยภาษา HTML สามารถ
2 http://www.mindphp.com/คมอ/73-คออะไร/2127-java-javascript-คออะไร.html
8
ท างานขามแพลตฟอรมได โดยท างานรวมกบ ภาษา HTML และภาษา Java ไดทงทางฝงไคลเอนต (Client) และ ทางฝงเซรฟเวอร (Server) การน าภาษานมาพฒนาเนองจากเปนภาษาทนยมในการพฒนาเวบแอปพลเคชน เพราะเปนภาษาทงาย เรยนรไดเรว และมฟงกชนใหใชครบถวน ตามทคณะผจดท าตองการในสวนของภาษา Java Script ทางคณะผจดท าไดน ามาชวยในการควบคมการท างานทงหมดของระบบ
รปท 2.4 ตวอยางภาษา Java Script ทน ามาใชเขยนโปรแกรม
9
2.1.3 CSS3
รปท 2.5 สญลกษณ CSS
เปนภาษาทมรปแบบการเขยน Syntax ทเฉพาะ และถกก าหนดมาตรฐานโดย W3C (World Wide Web Consortium) เชนเดยวกบ HTML และ XHTML ใชส าหรบตกแตงเอกสาร HTML/ XHTML ใหมหนาตา สสน ตวอกษร เสนขอบ พนหลง ระยะหาง ฯลฯ ตามตองการ ดวยการก าหนดคณสมบตใหกบ Element ตางๆ ของ HTML เชน <body>, <p>, <h1> เปนตน ภาษา CSS ทไดน ามาตกแตงเพอเพมความสวยงามใหกบสตวอกษร ขนาดตาง ๆ ของวตถ รวมไปถงท าใหวตถของเรานนสามารถเคลอนไหวได เนองจากโคด ภาษา HTML ทเขยนขนมายงไมมความสวยงาม ไมสะดดตา ทางคณะผจดท าไดเลงเหนถงความส าคญน จงไดน า CSS เขามาชวยตกแตง หนาเวบ ปมตางเพอท าใหดนาใช และดสะดดตาเมอผใชเขามาใชงาน ในสวนของ CSS เขามาชวยในการควบคมการท างานของ HTML มาชวยในการแบงหนากระดาษ และรปรางหนาตาของเวป ดงรปท 2.3
3 http://www.enjoyday.net/webtutorial/css/css_chapter01.html
10
รปท 2.6 ตวอยาง CSS ทน ามาใชกบระบบ
2.1.4 Vue.Js4
รปท 2.7 สญลกษณ Vue.Js
โครงรางซอฟตแวร เปนขอบเขตของระบบงาน ทเปนรปแบบทน ากลบมาใชใหม
ไดส าหรบระบบซอฟตแวร (หรอระบบยอย) ซงสามารถอยในรปของคลาสนามธรรม (Abstract class) และกบวธในการใชตวตน (instance) ของคลาสรวมกนจ าเพาะส าหรบซอฟตแวรชนดใดชนดหนง โครงรางซอฟตแวรทกโครงรางใชการออกแบบเชงวตถ(Object-oriented programming, OOP)
4 https://vuejs.org/
11
น าเทคโนโลยนมาใชเนองจากเปน JavaScript Framework ทมเขยนโคดทงาย ไมจ าเปนตอง install plugin ใดๆ การแบงสวนประกอบของในการพฒนาระบบเปนสงทด โดยสามารถแบงทกสวนการท างานของโปรแกรมเราใหเปนสวนเลกๆ ทสามารถน ากลบไปใชงานใหมได Vue.js ท างานในสวนนไดด 2.1.5 Google Firebase5 ถกออกแบบมาใหเปน API และ Cloud Storage ส าหรบพฒนา Realtime Application รองรบหลาย Platform ไดอยางมประสทธภาพและยงลดเวลาและคาใชจายของการท า Server side หรอการวเคราะหขอมลใหอกดวยโดยมฟงกชนใหเลอกใชมากมาย เชน Cloud Functions, Authentication, Hosting, Database, Storage, Hosting, Functions, ML KIT (AI) เปนตน น าเทคโนโลยนมาใชเนองจาก ตว Google Firebase เปนฐานขอมลทอยบนคลาวด เปนฐานขอมลแบบเรยลไทม ซงตอบโจทยในการน ามาพฒนาเวแอปพลเคชนทตองมความรวดเรวในการรบสงขอมลในสวนของ fire base เปนตวชวยในการเกบขอมลของโปรแกรมทสรางขนมาสามารถเกบขอมล ชอสนคา ราคา วนท หรอ อนๆอกได
รปท2.8 ตวอยาง Fire base ทใชเกบขอมล
5 https://firebase.google.com/
12
2.2 เทคโนโลยทใชในการพฒนา 2.2.1 Client/ Server Network6
ไคลเอนต/ เซรฟเวอร (client/ server) คอการทมเครองผใหบรการ (server) และเครองผใชบรการ (client) เชอมตอกนอย และเครองผใชบรการไดมการตดตอรองขอบรการจากเครองผใหบรการ เครองผใหบรการกจะจดการตามทเครองผขอใชบรการรองขอ แลวสงขอมลกลบไปใหเครอขายแบบ ไคลเอนต/ เซรฟเวอร เหมาะกบระบบเครอขายทตองการเชอมตอกบเครองลกขายจ านวนมาก โดยการรองรบจ านวนเครองลกขาย (Client) อาจเปนหลกสบ หลกรอย หรอหลกพน เพราะฉะน นเครองทจะน ามาท าหนา ทใหบรการจะตองเปนเครองทมประสทธภาพสง เนองจากถกตองออกแบบมาเพอทนทานตอความผดพลาด ( Fault Tolerance) และตองคอยใหบรการทรพยากร ใหกบเครองลกขายตลอดเวลาโดยเครองทจะน ามาท าเปนเซรฟเวอรอาจเปนคอมพวเตอรแบบเมนเฟรม มนคอมพวเตอร หรอไมโครคอมพวเตอรกได
รปท 2.9 ไคลเอนต/ เซรฟเวอร (Client/ Server Network) เครอขายประเภทนจะมเครองศนยบรการ ทเรยกวา เครองเซรฟเวอร และมเครองลกขายตาง ๆ เชอมตอ โดยเครอขายหนงอาจมเครองเซรฟเวอรมากกวาหนงตวเชอมตอภายในวงแลนเดยวกน ซงเซรฟเวอรแตละตวกท าหนาทรบผดชอบทแตกตางกน เชน 1.ไฟลเซรฟเวอร (File Server) คอ เครองทใหบรการแฟมขอมลใหแกเครองลกขาย 2. พรนตเซรฟเวอร (Print Server) คอ เครองทบรการงานพมพใหแกเครองลกขาย โดย บนทกงานพมพเกบไวในรปแบบของสพล (Spool) และด าเนนการพมพงานตามล าดบคว 3. ดาตาเบสเซรฟเวอร (Database Server) คอ เครองทบรการฐานขอมลใหแกเครองลกขาย
6 https://sites.google.com/site/jesadawin/khil-xen-t-seirfwexr-client-server-network
13
4. เวบเซรฟเวอร (Web Server) คอ เครองทจดเกบขอมลดานเวบเพจขององคกร เพอใหผ ทองอนเทอรเนตสามารถเขาถงเวบขององคกรได 5. เมลเซรฟเวอร (Mail Server) คอ เครองทจดเกบขอมลดานจดหมายอเลกทรอนกส หรอ E-mail ทมการรบสงระหวางกนภายในเครอขาย 2.2.2 Web application7 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 (ย ไอ)
7 en.wikipedia.org/wiki/Web_application
14
รปท 2.10 สถาปตยกรรม และการใชงานเวบแอปพลเคชน (Web Application)
2.3 ซอฟแวรทใชในการพฒนา 2.3.1 Visual Studio Code8 คอ โปรแกรม Code Editor ท ใชในการแกไขและปรบแตงโคด จากค ายไมโครซอฟท มการพฒนาออกมาในรปแบบของ OpenSource จงสามารถน ามาใชงานไดแบบฟร ๆ ทตองการความเปนมออาชพ ซง Visual Studio Code นน เหมาะส าหรบนกพฒนาโปรแกรมทตองการใชงานขามแพลตฟอรม รองรบการใชงานทงบน Windows, MacOS และ Linux สนบสนนทงภาษา JavaScript, TypeScript และ Node.js สามารถเชอมตอกบ Git ได น ามาใชงานไดงายไมซบซอน มเครองมอสวนขยายตาง ๆ ใหเลอกใชอยางมากมาย เชน 1.การเปดใชงานภาษาอน ๆ ทง ภาษา C++, C#, Java, Python, PHP หรอ Go 2.Themes 3.Debugger 4.Commands เปนตน สาเหตทเลอกซอฟตแวรนมาใชเพราะ มตว UI ทงายสามารถเขยนไดหลายภาษา และสามารถเชอมตอกบ Github ได มเครองมไมซบซอนใชงานงาย
8 http://www.mindphp.com/บทความ/microsoft/4829-visual-studio-code.html
บทท3 การวเคราะหและออกแบบระบบ
3.1 รายละเอยดของปรญญานพนธ
ระบบจดการคลงหรอการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร) เปนระบบส าหรบเกบขอมลสนคาตางๆ ทเกยวกบอปกรณคอมพวเตอร เปนตวชวยใหผใชงานสามารถหาขอมลของสนคาทบนทกไวตามความตองการของผใชงานได โดยระบบสามารถใหผใชงานใสขอมลอปกรณสนคาทรบเขามาได โดยสามารถจดการขอมลเรยบเรยงขอมลของสนคาอยางเปนระเบยบได รปภาพอปกรณของสนคา เมนสตอกสนคา หรอผใชงานสามารถดรายละเอยดของสนคาได สามารถคลกเพมขอมล ลบขอมล หรอแกไขขอมลของสนคาทรบเขามาได อกทงยงสามารถเกบขอมลทเกยวกบการเบกสนคาไดอก ในการเบกสนคาจะบนทกขอมลของการเบกหรอชอผเบกสนคา หรอแสดงออกทางรายงานทจะแสดงขอมลทกอยางขนมา เชน แสดงวนทเบก แสดงรายชอสนคา แสดงจ านวนวามกชน
เทคโนโลยทใชในปรญญานพนธมการออกแบบแอปพลเคชนโดยน าหลก MVC มาใชในการเขยนโปรแกรม Java Platform ในการเขยน Web Service เพอใหฝงของ Front-End ใช Quasar Framework ในการออกแบบ Web application หรอใชสวนของ Database เปน Firebase
3.2 ขนตอนการด าเนนงาน (Work Flow Diagram)
ในการท างานปจจบนของรานจะเปนการจดบนทกการท างานดวยมอ ทางคณะผจดท าจงท าการพฒนาระบบเขามาเพอชวยใหการท างานดยงขน 3.2.1 วเคราะหระบบงานปจจบน (As-Is System Analysis)
ปญหาของระบบงานปจจบน
ปญหาของระบบงานปจจบน คอ ในการท างานปจจบนทางรานเรม การท างานผดพลาดบอย เชน การจดบนทกผด หรอมการใชเวลามากในการ ท างาน เนองจากระบบการท างานของปจจบนจะเปนการจดบนทกลงกระดาษ ดวยมอ ไมวาจะเปนรายการสนคาเขา-ออก วนท หรอ ชอผรบ เชน เมอรบ สนคาเขามา พนกงานจะตองจดบนทกชอสนคา วนท รายละเอยด จ านวน เปนตน แนวทางการแกไขปญหา
แนวทางการแกปญหาคอ ทางคณะผ จ ดท าจงสรางหรอพฒนา โปรแกรมขนมา เพอชวยในการท างานทมประสทธภาพยงขน โปรแกรมน
16
ชวยในดานของการจดบนทก จะบนทกขอมลทกอยางลงในโปรแกรมแทน การจด โปรแกรมสามารถบนทก ชอสนคา วนทเขา-ออก อกทงยงสามารถ ออกรายงานทเกยวกบการรบสนคาเขา-ออกไดอก รวมถงเกบชอผรบหรอ ขอมลอน ๆได ซงโปรแกรมชวยลดเวลาในการท างานหรอสดวกตอผใชงาน มากยงขน
รปท3.1 Work Flow Diagram ของระบบงานปจจบน
17
3.2.2 วเคราะหระบบงานใหม (New System Analysis)
ระบบสามารถเกบขอมลของสนคาได เกบวนหรอเวลาได หรอสามารถออกใบรายงานของสนคาเขา-ออกได หรอยงสามารถออกใบรายงานการสงซอหรอรายงานใบเบกไดสามารถออกใบรายงานสงสนคาคน หรอยงเพมชอหรอรายละเอยดของผขายไดรวมทงยงแกไขสทธจดการกลมผ เขาใชงานแอดมนสามารถแตงต งหรอจดกลมใหไดวาใครเปน พนกงาน หรอ ผดแลระบบ โปรแกรมจะชวยลดเวลาในการท างานลง ชวยใหการท างานมประสทธภาพมากยงขน
รปท 3.2 Work Flow Diagram ของระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)
18
3.3 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram
รปท 3.3 Use Case Diagram ของระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)
19
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 ตองท าการสมครสมาชกกอน Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบปอนชอผใช หรอรหสผาน หรอคลกปม Login 2. ระบบจะเชคขอมลชอผใชหรอรหสผานทปอนเขามาตรงกบฐานขอมลวาตรงกน
หรอไม 2.1 ขอมลผใชหรอรหสผานทตรงกนอยในฐานขอมล
2.1.1 ระบบไปยงหนาหลกเพอเลอกเมนหรอท างานตอไป 2.2 ขอมลชอผใชหรอรหสผานไมตรงกบฐานขอมล
2.2.1 ระบบแสดง Dialog แจงเตอนวา “Can’t Login” ไมสามารถเขาสระบบไดเนองจากชอผใชหรอรหสผานไมถกตอง
Post Condition สามารถใชงานฟงกชนตางๆ ส าหรบผดแลระบบบนเวบแอปพลเคชนได
Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
20
ตารางท 3.2 รายระเอยดของ Use Case : Home
Use Case Name Home Use Case ID UC2 Brief Description ผดแลระบบสามารถดรายการสนคาคงเหลอ และจดการฟงกชนตาง
ๆ ได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตองท าการ Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน หนาหลก 2. เมอ ผดแลระบบ หรอพนกงาน คลกเขามาในสวนของหนาน จะแสดงตารางสวน
ของสนคาทเหลอนอยกวา 4 ชน หรอโชวตารางสนคาคงคลงทงหมด Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
21
ตารางท 3.3 รายระเอยดของ Use Case : personal information
Use Case Name personal information Use Case ID UC3 Brief Description พนกงานสามารถดขอมลสวนตวหรอแกไขขอมลสวนตวของตวเอง
ได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผใชงานระบบคลกเลอกทเมนขอมลสวนตว 2. สามารถแกไขขอมลสวนตวหรอเพมรายละเอยดทอยของตวเองได 3. สามารถดรายละเอยดขอมลสวนตวได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
22
ตารางท 3.4 รายระเอยดของ Use Case : Product
Use Case Name Product Use Case ID UC4 Brief Description ผดแลระบบ หรอพนกงานสามารถคลกเขามาดจ านวนของสนค
แบบโดยรวมในหนานได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน Product 2. แสดงขอมลรายละเอยดของสนคาทงหมด 3. เพมจ านวนสนคาหรอขอมลของสนคาได 4. สามารถแกไขในสวนของสนคาได 5. ลบจ านวนของสนคาหรอลบขอมลของสนคาได 6. สามารถคนหาสนคาทตองการได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
23
ตารางท 3.5 รายระเอยดของ Use Case : Product report
Use Case Name Product report Use Case ID UC5 Brief Description พนกงานสามารถคลกเขามาดสนคาคงคลงทงหมดได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนกตอเมอผใชงานคลกทรายงานสนคาคงคลงทงหมดหรอสนคาคงคลงทเหลอนอยกวา 4 ชน
2. จะแสดงรายงานสนคาคงคลงทงหมดออกมา 3. จะแสดงรายงานสนคาคงคลงใกลหมดออกมา
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
24
ตารางท 3.6 รายระเอยดของ Use Case : Purchase order
Use Case Name Purchase order Use Case ID UC6 Brief Description พนกงานสามารถเขามาเพมจ านวนสนคาในสวนของหนาค าสงซอ
ได Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน Purchase Order 2. แสดงขอมลของรายละเอยดการสงซอ 3. ผดแลระบบ หรอพนกงานเขามากรอกรายละเอยดการสงซอได 4. สามารถแกไขในสวนของสนคาได 5. ลบจ านวนของสนคาหรอลบขอมลของสนคาได 6. สามารถคนหาสนคาทตองการได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
25
ตารางท 3.7 รายระเอยดของ Use Case : Withdraw
Use Case Name Withdraw Use Case ID UC7 Brief Description ผดแลระบบ หรอพนกงานสามารถเขามากรอกขอมลจ านวนสนคาท
น าออกจากคลง Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน Withdraw 2. แสดงขอมลของรายละเอยดการเบกสนคาออกจากคลง 3. ผดแลระบบ หรอพนกงาน จะเขามากรอกรายละเอยดทน าสนคาออกจากคลงได 4. สามารถแกไขในสวนของสนคาได 5. ลบจ านวนของสนคาหรอลบขอมลของสนคาได 6. สามารถคนหาสนคาทตองการได
Post Condition - Alternative Flows - Exceptions 1. ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถตออนเทอรเนตได กรณาลองใหมอกครงในภายหลง
26
ตารางท 3.8 รายระเอยดของ Use Case : Po/withdraw report
Use Case Name Po/withdraw report Use Case ID UC8 Brief Description ออกเอกสารส าหรบการเบกสนคา Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมนรายงานใบเบก 2. แสดงรายละเอยดของสนคาทเบกและสงซอเขามา เชน แสดงวนท ชอสนคา ชอผ
เบก 3. ออกเอกสารทเบกและสงซอสนคาเขามา
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
27
ตารางท 3.9 รายระเอยดของ Use Case : Stock Type
Use Case Name Stock Type Use Case ID UC9 Brief Description ผดแลระบบ หรอพนกงานสามารถเขามาแยกจ าพวกของสนคาได Primary Actors Administrator/ Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน Stock Type 2. แสดงขอมลของรายละเอยดของจ าพวกของสนคา เชน อปกรณเกมมงเกยร
อปกรณธรรมดา 3. ผดแลระบบ หรอพนกงาน จะเขามากรอกจ านวนหรอรายละเอยดจ าพวกของ
สนคาได 4. สามารถแกไขในสวนของจ าพวกสนคาได 5. ลบจ านวนของสนคาหรอลบขอมลของจ าพวกสนคาได 6. สามารถคนหาจ าพวกสนคาทตองการได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
28
ตารางท 3.10 รายระเอยดของ Use Case : Product Type
Use Case Name Product Type Use Case ID UC10 Brief Description ผดแลระบบ หรอพนกงานสามารถเขามาเพอแยกชนดของสนคา Primary Actors Administrator/ Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน Product Type 2. แสดงขอมลรายละเอยดของชนดสนคา เชน เมาส คยบอรด 3. ผดแลระบบ หรอพนกงาน จะเขามากรอกจ านวนหรอรายละเอยดชนดของ
สนคาได 4. สามารถแกไขในสวนของชนดสนคาได 5. ลบจ านวนของสนคาหรอลบขอมลของชนดสนคาได 6. สามารถคนหาชนดสนคาทตองการได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
29
ตารางท 3.11 รายระเอยดของ Use Case : Supplier
Use Case Name Supplier Use Case ID UC11 Brief Description ผดแลระบบ หรอพนกงานสามารถเขามาเพอบนทกชอของผสง
สนคาได Primary Actors Administrator/Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน Supplier 2. แสดงขอมลของรายละเอยดของชอผสงสนคา 3. ผดแลระบบ หรอพนกงาน จะเขามากรอกชอของผสงสนคา 4. สามารถแกไขในสวนของชอผขายได 5. ลบชอของผขายได 6. สามารถคนหาชอผขายได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
30
ตารางท 3.12 รายระเอยดของ Use Case : Return Merchandise
Use Case Name Return Merchandise Use Case ID UC12 Brief Description ผดแลระบบ หรอพนกงาน สามารถเขามาใสขอมลของรายละเอยด
สงสนคาคน Primary Actors Administrator, Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกสงสนคาคน 2. แสดงขอมลของรายละเอยดของสนคาทสงกลบคนเนองจากมปญหาซอผดรน
หรอ อนๆ 3. ผดแลระบบ หรอพนกงาน จะเขามากรอกจ านวนหรอรายละเอยดของขอมล
สนคาทสงกลบคนมา Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
31
ตารางท 3.13 รายระเอยดของ Use Case : Return Merchandise Report
Use Case Name Return Merchandise Report Use Case ID UC13 Brief Description ผดแลระบบสามารถเขามาออกรายงานได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมน return report 2. แสดงขอมลของรายละเอยดของสนคาทสงกลบคนเนองจากมปญหาซอผดรน หรอ อนๆ
3. Administrator สามารถเขามาออกใบรพอรทได Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
32
ตารางท 3.14 รายระเอยดของ Use Case : Edit Employee
Use Case Name Edit Employee Use Case ID UC14 Brief Description ผดแลระบบ หรอพนกงานสามารถเขามาแกไขหรอจดการขอมล
พนกงาน Primary Actors Administrator/ Employee Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมนแกไขจดการขอมลพนกงาน 2. แสดงรายละเอยดขอมลของพนกงานทงหมด 3. ผดแลระบบ หรอพนกงาน จะเขามากรอกขอมลหรอแกไขขอมลของพนกงานได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
33
ตารางท 3.15 รายระเอยดของ Use Case : Manage group user
Use Case Name Manage group user Use Case ID UC15 Brief Description ผดแลระบบสามารถเขามาจดการเกยวกบกลมใชงานของผใชได Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมนจดการกลมใชงาน 2. แสดงรายละเอยดขอมลของกลมผใชงาน 3. ผดแลระบบจะเขามากรอกขอมลเกยวกบกลมผใชงานได 4. สามารถแกไขในสวนจดการกลมใชงานได 5. ลบกลมใชงานออกได 6. สามารถคนหากลมใชงานได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
34
ตารางท 3.16 รายระเอยดของ Use Case : Permission
Use Case Name Permission Use Case ID UC16 Brief Description ผดแลระบบสามารถเขามาจดการสทธของผใชงาน Primary Actors Administrator Secondary Actors - Preconditions ตอง Login กอนถงจะเขาใชงานได Main Flow :
1. ยสเคสจะเรมขนเมอผดแลระบบคลกเมนจดการสทธ
2. แสดงรายละเอยดขอมลของสทธของพนกงาน
3. ผดแลระบบจะเขามากรอกขอมลหรอจดการสทธของผใชงานได 4. สามารถแกไขในสวนจดการสทธได 5. ลบสทธผใชงานออกได 6. สามารถคนหาหรอก าหนดสทธผใชงานได
Post Condition - Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ
- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง
35
3.4 Sequence Diagram
รปท 3.4 Sequence Diagram : Login
36
รปท 3.5 Sequence Diagram : Home
37
รปท 3.6 Sequence Diagram : Personal information
38
รปท 3.7 Sequence Diagram : Product
39
รปท 3.8 Sequence Diagram : Product Report
40
รปท 3.9 Sequence Diagram : Purchase Order
41
รปท 3.10 Sequence Diagram : withdraw
42
รปท 3.11 Sequence Diagram : Po/withdraw report
43
รปท 3.12 Sequence Diagram : Stock Type
44
รปท 3.13 Sequence Diagram : Product Type
45
รปท 3.14 Sequence Diagram : Supplier
46
รปท 3.15 Sequence Diagram : Return Merchandise
47
รปท 3.16 Sequence Diagram : Return merchandise report
48
รปท 3.17 Sequence Diagram : Edit employee
รปท 3.18 Sequence Diagram : Manage group user
49
รปท 3.19 Sequence Diagram : Permission
50
3.5 Class Diagram
รปท 3.20 Class Diagram ของระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก
คอมพวเตอร)
51
3.6 Class Diagram Detail
ตารางท 3.17 รายละเอยดของ Class Diagram : product
product +subHeading : String +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +inputForm : object +description : String +timestamp : timestamp +updateForm() : void +stocktype() : number +addForm() : void +deleteRow() : void
ตารางท 3.18 รายละเอยดของ Class Diagram : roles
roles +pagination : object +columns : Array +visibleColumns : String +inputForm : object +addForm() : void +updateForm() : void +deleteRow() : void +createExportData() : void
52
ตารางท 3.19 รายละเอยดของ Class Diagram : userAccounts
userAccounts +subHeading : String +formAction : String +collectionSize : String +pagination : object +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +inputForm : object +producttype() : number +getDeptName() : void
ตารางท 3.20 รายละเอยดของ Class Diagram : login
login +signup : Boolean +email : String +password : String +collectionSize : String +pagination : object +columns : Array +visibleColumns : String +mapActions : String +mapMutations : String +checkKey() : void +loadingStatus() : void +login() : void +signUserIn() : void
53
+rowClick() : void +checkAllowSignup() : void
ตารางท 3.21 รายละเอยดของ Class Diagram : logout
logout +email : String +password : String +mapActions : String +mapMutations : String +checkKey() : void +logout() : void
ตารางท 3.22 รายละเอยดของ Class Diagram : userAccount
userAccounts +userInfo : object +holidays : Array +holidaysName : Array +todayTimeAttendanceList : Array +todayLeaveRequestList : Array +WRKH : Number +collectionSize : String +pagination : object +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +selectedDate : String
54
+get_WRKH() : void +getTodayTimeAttendanceList() : void +findHolidayName() : void +getPublicHolidays() : void +getPublicHolidaysName() : void +getTodayLeaveRequestList() : void +ClockInOut() : void +loadingStatus() : void +todayClockTimeUser() : void +todayInTimeUser() : void +todayOutTimeUser() : void +todayLeaveUser() : void +todayLastInTimeUser() : void +todayLastClock(userId) : String +rowClick(row) : void +isHoliday(requestDate) : Boolean +saveNote() : void
ตารางท 3.23 รายละเอยดของ Class Diagram : po
po +subHeading : String +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +inputForm : object +description : String +timestamp : timestamp +updateForm() : void
55
+stocktype() : number +addForm() : void +deleteRow() : void +getpolist () : void +getdepartmentname() : void +getteamcelendername() : void
ตารางท 3.24 รายละเอยดของ Class Diagram : Purchase order
Purchase order +subHeading : String +columns : Array +columproduct : Array +productall : String +Addproductcheck : String +withdrawproducttable : Srting +formacction2 : String +visibleColumns : String +selected : String +filterproduct : String +Stocktype : String +loading : String +formModal2 : String +inputForm : object +description : String +timestamp : timestamp +productform : void +updateForm() : void +stocktype() : number +addproductForm() : void +addproductprocess() : void +addproduct() : void
56
+updateform() : void +removerow : void +deleteRow() : void +getpolist () : void +openaddformmodel () : void +openaddproduct() : void +getdepartmentname() : void +getteamcelendername() : void +getwithdraw() : void +getproduct() : void +Updateqty() : void +getreportdata() : void
ตารางท 3.25 รายละเอยดของ Class Diagram : withdraw
withdraw +subHeading : String +columns : Array +columproduct : Array +productall : String +Addproductcheck : String +withdrawproducttable : Srting +formacction2 : String +visibleColumns : String +selected : String +filterproduct : String +Stocktype : String +loading : String +description : String +timestamp : timestamp +formModal2 : String +inputForm : object
57
+removerow : void +updateForm() : void +stocktype() : number +productform() : void +addproductForm() : void +addproductprocess() : void +addproduct() : void +updateform() : void +deleteRow() : void +getpolist () : void +openaddformmodel () : void +openaddproduct() : void +getdepartmentname() : void +getteamcelendername() : void +getwithdraw() : void +getproduct() : void +Updateqty() : void +getreportdata() : void
58
ตารางท 3.26 รายละเอยดของ Class Diagram : stock type
Stock type +subHeading : String +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +inputForm : object +description : String +timestamp : timestamp +updateForm() : void +stocktype() : number +addForm() : void +deleteRow() : void
ตารางท 3.27 รายละเอยดของ Class Diagram : product type
Product type +subHeading : String +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +inputForm : object +description : String +timestamp : timestamp +updateForm() : void +stocktype() : number
59
+producttype() : number +addForm() : void +deleteRow() : void
ตารางท 3.28 รายละเอยดของ Class Diagram : Supplier
Supplier +subHeading : String +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +suppname : String +suppaddress : String +inputForm : object +description : String +timestamp : timestamp +updateForm() : void +stocktype() : number +addForm() : void +deleteRow() : void
60
ตารางท 3.29 รายละเอยดของ Class Diagram : Return merchandise
Return merchandise +subHeading : String +columns : Array +visibleColumns : String +selected : String +Stocktypeoptions : Sting +producttypeoptions : String +productoptions : String +formatdata : String +filter : String +loading : String +formModal : String +inputForm : object +description : String +timestamp : timestamp +serialno() : void +Product() : void +price() : void +updateForm() : void +stocktype() : number +addForm() : void +deleteRow() : void
61
ตารางท 3.30 รายละเอยดของ Class Diagram : permission
permissions +subHeading : String +formAction : String +columns : Array +visibleColumns : String +selected : String +filter : String +loading : String +formModal : String +inputForm : object +description : String +timestamp : timestamp +addForm() : void +deleteRow() : void
62
ตารางท 3.31 รายละเอยดของ Class Diagram : dbProcess
dbProcess +subHeading : String +formAction : String +columns : Array +selected : Array +filter : String +collectionSize : number +loading : boolean +formModal : boolean +inputForm : object +description : String +timestamp : timestamp +initialInputForm(inputForm, clearInput) : void +openAddForm(inputForm) : void +openUpdateForm(inputForm, selectedRow) : void +setProcess(collection, inputForm, validate, docId) : void +descreseIndex (props, collection): void +increseIndex (props, collection): void +addProcess(collection, inputForm, validate) : void +updateProcess(collection, inputForm, validate) : void +deleteProcess(selected, collection) : void +addForm() : void +deleteRow() : void
63
ตารางท 3.32 รายละเอยดของ Class Diagram : SelectOptions
SelectOptions +authGroupOption : Object +authPermissionOption : Object +authUserOption : Object +productOptions : Object +productTypeOptions : Object +stockTypeOptions : Object +supplierOptions : Object +GetAuthGroupOption() : Array +GetAuthPermissionOption() :Array +GetAuthUserOption() : Array +GetProductOptions() : Array +GetProductTypeOptions() : Array +GetStockTypeOptions() : Array +GetSupplierOptions() : Array
64
3.7 โครงสรางขอมล (Data Structure)
รปท 3.21 โครงสรางขอมลทจดเกบใน Storage
รปท 3.22 โครงสรางของขอมล Firebase Authentication
65
รปท 3.23 โครงสรางขอมลทจดเกบใน authgroup,autupermission และ authuser
66
รปท 3.24 โครงสรางขอมลทจดเกบใน Product
67
รปท 3.25 โครงสรางขอมลทจดเกบใน po,withdraw และ poProduct
68
รปท 3.26 โครงสรางขอมลทจดเกบใน StockType,ProductType และ supplier
69
รปท 3.27 โครงสรางขอมลทจดเกบใน Returnmer
บทท 4 การออกแบบทางกายภาพ
4.1 การออกแบบสวนตดตอผใช (User Interface Design)
ระบบจดการคลงและการเบกสนคา ออกแบบโดยยดหลก Quasar เปนหลกโดยค านงถงความพงพอใจของผใชเปนหลกจงออกแบบมาใหเมนตางๆ เพอใหผใชงานท างานงายมากยงขน ขนตอนการท างานของโปรแกรมในหนาตาง ๆ ท าใหผใชมความสะดวก โดยจะมเมนอยทางดานขางซายของหนาหลก โปรแกรมยงออกแบบมาเพอใหผใชงานบนทกขอมลลงในโปรแกรมแทนการบนทกลงในสมด
รปท 4.1 หนาจอลงชอเขาใชงานและสมครสมาชก จากรปท 4.1 แสดงหนาแรกส าหรบผใชในการยนยนตวตนเพอเขาใชงานระบบโดยใช
อเมลและรหสผานในการยนยนตวตนแตถาเปนสมครสมาชกใหมจะตองท าการสมครสมาชกกอนโดยคลกทปม SIGN UP
71
รปท 4.2 หนาจอสงรหสไปทมอถอเมอลมรหสผาน จากรปท 4.2 แสดงเมอผใชงานลมรหสผาน จะท าการสงรหสไปทเบอรมอถอของผใชงาน
รปท 4.3 หนาจอการสมครเพอเขาใชงาน จากรปท 4.3 แสดงหนาสมครสมาชกโดยผใชจะตองใสขอมล ชอ นามสกล และเบอรมอ
ถอ เพอรอยนยนเบอรมอถอ
72
รปท 4.4 หนาจอ Home จากรปท 4.4 เมอเขามาในหนาหลกของโปรแกรม จะสามารถเขาไปเพม ลบ แกไขหรอ
คนหาสนคาได และจะแสดงสนคาทมจ านวนต ากวา 4 ชนเพอใหรวาสนคาชนนใกลหมดแลว
1.เมอคลกเขามาจะใหกรอก
ขอมลของสนคา
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆได
73
รปท 4.5 หนาจอ Product low จากรปท 4.5 เมอเขามาในหนาหลกของโปรแกรม แลวคลกเมนเพมสนคาทเปนตวบวก จะ
สามารถเขาไปเพม ลบ แกไขหรอคนหาสนคาได และยงสามารถคลกแอดสนคาเขามาไดเลยโดยไมตองใสขอมลเอง แลวจะท าการอนมต เพอรอใหผดแลระบบมาคลกยนยนอกครง
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
stock type product type
supplier qty total price
รายยละเอยด แลวยง
สามารถคลกเพม
สนคาเขาไปไดอก
74
รปท 4.6 หนาจอขอมลสวนบคล จากรปท 4.6 แสดงสวนของขอมลสวนบคล สามารถใสขอมลของพนกงานลงไปเพอใหร
วาการท ารายการแตละรายการ ตองมขอมลของพนกงานแสดง
2. ใสขอมลของ
พนกงานลงไป เชน
อเมล รปภาพ ชอ เปน
ตน
1.เมอคลกเขามาจะใหกรอก
ขอมลของพนกงาน
75
รปท 4.7 หนาจอแสดงขอมลทอย จากรปท 4.7 แสดงสวนของทอย จะแสดงทอยของพนกงาน สามารถเพมทอยได โดยคลก
ทปมบวก แลวขอมลทอยของพนกงานจะแสดงในหนาน
1.เมอคลกเขาไปจะเขา
ไปหนาเพมทอย
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
76
รปท 4.8 หนาจอแสดงรายการรวมของสนคา จากรปท 4.8 แสดงหนาดสนคาโดยรวมทมอยในคลงสนคาซงจะแสดงล าดบท และ
รหสสนคา รายละเอยดของสนคา มมดานขวา สามารถเลอกใหแสดงเฉพาะในสวนของนนๆได เชน เลอก คย จะแสดงแตคย เลอกรหสกจะแสดงแตรหส สามารถลบจ านวนสนคาในหนานได
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมล
สนคา
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆได
77
รปท 4.9 หนาจอเพมสนคาเขาคลง จากรปท 4.9 แสดงหนาตอจากคลงสนคา เมอเขามา สามารถเพมสนคาเขามาไดโดย
สามารถใส คย ล าดบท รหส Stock type Product type ชอสนคา Bye in Bye out Qty แลวจะไปแสดงในหนาของคลงสนคา
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
stock type product type
ชอสนคา buy in buy
out qty
78
รปท 4.10 รายงานสนคาคงคลงทงหมด จากรปท 4.10 แสดงขอมลของสนคาในคลงทงหมด จะแสดง รหสสนคา ชอสนคา ราคา
ซอ ราคาขาย จ านวนสนคา
1.เมอคลกเขามาจะ
แสดงรายงานสนคา
ของในคลงทงหมด
2.แสดงรายละเอยดของ
สนคาคงคลง
รหสสนคา ชอสนคา
ราคาซอ ราคาขาย และ
จ านวนสนคา
79
รปท 4.11 หนาจอเพมสนคาเขาคลง จากรปท 4.11 แสดงขอมลของสนคาในคลงทใกลจะหมด จะแสดง รหสสนคา ชอสนคา
ราคาซอ ราคาขาย จ านวนสนคา
1.เมอคลกเขามาจะ
แสดงรายงานสนคา
ของในคลงทงหมด
2.แสดงรายละเอยดของ
สนคาคงคลง
รหสสนคา ชอสนคา
ราคาซอ ราคาขาย และ
จ านวนสนคา
80
รปท 4.12 หนาสงจอซอสนคา จากรปท 4.12 แสดงหนาสงซอของสนคา จากผขาย เขาสราน แลวท าการบนทกสนคาลง
ในหนาน เพอใหรวามสนคาชนไหนและมสนคาอะไรบางทเขามา
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมล
สนคา
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมได
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆได
81
รปท 4.13 หนาจอเพมสนคาทสงซอ
จากรปท 4.13 แสดงหนาทสงซอสนคาจากผขาย ในหนานจะเปนหนาทใสขอมลของสนคา
ลงไปเพอบนทกขอมลแลวจะไปแสดงในสวนหนาหนาสงซอสนคาจากผขาย
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
stock type product type
product รายละเอยด
total price
2.เมอกรอกเสรจแลว
ตองรอเจาของรานมา
คลกอนมต
82
รปท 4.14 หนาจอเบกสนคา จากรปท 4.14 แสดงหนาจอการเบกสนคาออกจากคลงสนคา จะแสดงจ านวนทเบกเขาและ
เบกออก เพอน าไปโชวสนคาหนาราน และออกน าขาย สามารถเพมและลบจ านวนในหนานได
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมล
สนคา
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆ ได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
83
รปท 4.15 หนาเพมขอมลของการเบกสนคา จากรปท 4.15 แสดงสวนการกรอกขอมลของสนคาทตองการเบกสามารถคลกเพม
สนคาเขามาได
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
stock type product type
ชอสนคา buy in buy
out qty
2.สามารถคลกเพม
สนคาเขาไปไดโดยไม
ตองกรอกรายละเอยด
84
รปท 4.16 หนารายงานการสงซอ จากรปท 4.16 เมอท ารายการทเกยวกบใบสงซอจะมาแสดงขอมลของรายงานใบสงซอ จะ
แสดงรายละเอยด ดงน วนเวลา ผท ารายการ รหสใบเสรจ จ านวน รายงาน รายละเอยด สถานะการอนมต
1.เมอคลกเขามาจะ
แสดงรายงานใบสงซอ
2.แสดงรายละเอยดของ
วนเวลา ผท ารายการ
รหสใบเสรจ จ านวน
รายงาน รายละเอยดก
สภานภาพการอนมต
85
รปท 4.17 หนารายงานการเบก จากรปท 4.17 เมอท ารายการทเกยวกบการเบกสนคาออกจากคลงจะมาแสดงขอมลของ
รายงานใบสงซอ จะแสดงรายละเอยดดงน วนเวลา ผท ารายการ รหสใบเสรจ จ านวน รายงาน รายละเอยด สถานะการอนมต
1.เมอคลกเขามาจะ
แสดงรายงานใบสงซอ
2.แสดงรายละเอยดของ
วนเวลา ผท ารายการ
รหสใบเสรจ จ านวน
รายงาน รายละเอยดก
สภานภาพการอนมต
86
รปท 4.18 หนาจอแยกประเภทของคลงสนคา จากรปท 4.18 แสดงสวนหนาการแยกประเภทของคลงสนคา เชน ในรานตอนนขายเฉพาะ
ของ Gaming gear ในอนาคตอาจจะมน าของทไมไช Gaming Gear
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมล
สนคา
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆ ได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
87
รปท 4.19 หนาจอเพมประเภทของสนคา จากรปท 4.19 แสดงหนาจอการเพมประเภทของสนคา โดยสามารถเพมสนคาประเภทอนๆ
ไดในอนาคต
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
รายละเอยด
88
รปท 4.20 หนาจอแสดงประเภทของสนคา จากรปท 4.20 แสดงหนาการแยกประเภทสนคา เชน เมาส คยบอรด หฟง ถาเพมเขามาจะ
เขามาอยในสวนของหนาน จะสามารถเชคหมวดหมและประเภทจากในหนานได
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมล
สนคา
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆ ได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
89
รปท 4.21 รปทใชเพมจ าแนกประเภทของสนคา จากรปท 4.21 แสดงหนาใสขอมลของสนคา ทเอาไวจ าแนกประเภทของสนคา สามารถ
กรอกขอมลลงไปแลวคลกบนทกจะไปแสดงในหนาของประเภทสนคา
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
รายละเอยด
90
รปท 4.22 หนาของผขาย จากรปท 4.22 แสดงรายชอของผขาย ทตดตอสงซอของจากคนๆ นน
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมลของ
supplier
3.เมอคลกจะสามารถ
ใหแสดงวามกคนใน
หนานไดและเลอนไป
หนาอนๆได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
91
รปท 4.23 หนาจอเพมรายละเอยดขอมลผขาย จากรปท 4.23 แสดงหนากรอกขอมลและรายละเอยดของผขาย เมอกรอกขอมลเสรจแลว
จะแสดงขอมลในหนาของผขาย
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
ชอซพพรายเออร
รายละเอยด ทอย เบอร
ตดตอ
92
รปท 4.24 หนาจอสงสนคาคน จากรปท 4.24 แสดงสวนของการสงคนสนคาเมอสนคามปญหา หรอลกคาซอสนคาผดไป
สามารถเชคขอมลไดในหนาน
1.เมอคลกเขาไปจะเขา
ไปหนาเพมขอมล
สนคา
3.เมอคลกจะสามารถ
ใหแสดงวามกชนใน
หนานไดและเลอนไป
หนาอนๆ ได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
93
รปท 4.25 หนาจอจดการและแกไขจ านวนสนคาในคลงสนคา จากรปท 4.25 แสดงสวนการบนทกขอมลของสนคาทสงคนลงแลวจะไปแสดงในสวนของ
หนาสงคนสนคา
1.กรอกรายละเอยดของ
สนคา คย ล าดบท
เลขทใบเสรจ product
serial no price
94
รปท 4.26 หนารายงานสงสนคาคนทงหมด จากรปท 4.26 เมอท ารายการทเกยวกบการสงสนคาคนจะมาแสดงขอมลของรายงานใบสง
สนคาคนทงหมด จะแสดงรายละเอยดดงน วนเวลา ผท ารายการ รหสใบเสรจ สนคา serial.no ราคา
1.เมอคลกเขามาจะ
แสดงรายงานสงสนคา
คนทงหมด
2.แสดงรายละเอยดของ
วนเวลา ผท ารายการ
รหสใบเสรจ สนคา
serial.no ราคา
95
รปท 4.27 หนาจอจดการรายชอพนกงาน จากรปท 4.27 แสดงหนาแกไขขอมลของพนกงาน โดยอาจจะมพนกงานเขามาใหม หรอ
แกไขในสวนของพนกงานทเคยท างานอยแลว
1.เมอคลกเขาไปจะเปน
การคนหาพนกงาน
3.เมอคลกจะสามารถ
ใหแสดงวามพนกงานก
คนในหนานไดและ
เลอนไปหนาอนๆ ได
2.เมอคลกจะสามารถเขาไปแกไขหรอลบออกจากคอลมภได
96
รปท 4.28 หนาจอจดการกลมใช จากรปท 4.28 แสดงหนาการจดการกบกลมผใชงาน ผดแลระบบจะเปนคนทเขามาจดกลม
ผใชงานวาคนนจะใหเปน พนกงาน หรอ ผดแลระบบอกคน
1.เมอคลกเขาไปจะเปน
การคนหาพนกงาน
3.เมอคลกจะสามารถ
ใหแสดงวามพนกงานก
คนในหนานไดและ
เลอนไปหนาอนๆ ได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
97
รปท 4.29 หนาจอเพมและจดการกบกลมผใชงาน จากรปท 4.29 แสดงการเพมขอมลหรอรายละเอยดของ ผดแลระบบ หรอ พนกงาน ได แลว
จะไปแสดงในหนาของหนาจดกลมผใชงาน
1.กรอกรายละเอยดของ
สนคา คย ล าดบท รหส
รายละเอยด จดการ
สทธ
98
รปท 4.30 หนาจอจดการมอบสทธใหแกผใชงาน จากรปท 4.30 แสดงสวนของการจดการสทธใหกบผใชงาน โดยมการก าหนดวาเปน ผดแล
ระบบ หรอ พนกงาน สามารถลบและแกไขขอมลได
1.เมอคลกเขาไปจะเปน
การคนหาพนกงาน
3.เมอคลกจะสามารถ
ใหแสดงวามพนกงานก
คนในหนานไดและ
เลอนไปหนาอนๆ ได
2.เมอคลกจะสามารถ
เขาไปแกไขหรอลบ
ออกจากคอลมภได
99
รปท4.31 หนาจอเพมผจดการสทธ จากรปท 4.31 แสดงหนาจดการสทธ ในหนานจะเพมรายละเอยดของ ผดแลระบบ หรอ
พนกงาน แลวคลกบนทกลงไปจะสามารถแสดงในหนาของจดการสทธได
1.กรอกรายละเอยดของ
สนคา ID รายละเอยด
บทท 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.7.7 สามารถเกบราคทน าเขาและน าขายสนคาได 5.2.2 สามารถคนหาสนคาในคลงได
5.2.2.1 สามารถคนหารนตางๆของเมาสได 5.2.2.2 สามารถคนหารนตางๆของคยบอรดได 5.2.2.3 สามารถคนหารนตางๆของทรองเมาสได 5.2.2.4 สามารถคนหารนตางๆของหฟงได
5.2.3 สามารถดสนคาทมาใหมได 5.2.4 สามารถเชครายละเอยดของสนคาได 5.2.5 สามารถดรายละเอยดการสงซอสนคาได
101
5.2.5.1 สามารถดวนทสงซอสนคาได 5.2.5.2 สามารถดขอมลของสนคาได 5.2.5.3 สามารถดจ านวนทสงซอของสนคาได 5.2.6 สามารถออกรายงานได 5.2.6.1 ออกใบรายงานการเบกสนคาได 5.2.6.2 ออกใบรายงานการสงซอได 5.2.6.3 ออกใบรายงานสนคาคงคลงทงหมด 5.2.6.4 ออกใบรายงานสนคาคงคลงทนอยกวาหรอเทากบ 4 ชน 5.2.6.4 ออกใบรายงานสนคาทสงคนได
5.3 ขอจ ากดของระบบ 5.3.1 ระบบยงไมสามารถสแกนบารโคดของสนคาได 5.4 ขอเสนอแนะ เพอเพมประสทธภาพในการท างานและใหระบบมความสมบรณมากยงขนควรพฒนาระบบดงตอไปน 5.4.1 เพมระบบหนาราน เพอไวใชขายสนคา เนองจากตวระบบเปนแคระบบสตอกสนคา 5.4.2 ควรเพมระบบสแกนบารโคดเพอใหสะดวกและรวดเรวตอการใชงานมากยงขน
บรรณานกรม
มายดพเอชพ. (2560). JavaScript. เขาถงไดจาก http://www.mindphp.com/คมอ/73-คอ อะไร/2127-java-javascript-คออะไร.html มายดพเอชพ. (2560). Visual Studio Code. เขาถงจาก http://www.mindphp.com/บทความ/ microsoft/4829-visual-studio-code.html วกพเดย. (ม.ป.ป). Web application. วนทสบคน 20 สงหาคม 2560, จาก https://en.wikipedia.org/wiki/Web_application
ววเจเอช. (2560). Vue.Js. เขาถงไดจาก https://vuejs.org/ เอนจอยเดย. (2561). ภาษา CSS. เขาถงไดจาก http://www.enjoyday.net/webtutorial/css/css_chapter01.html โคดดงเบสก. (2561). HTML. เขาถงไดจาก http://www.codingbasic.com/html.html ไซตกเกล. (2560). Client/ Server Network. เขาถงไดจาก
https://sites.google.com/site/jesadawin/khil-xen-t-seirfwexr-client-server-network ไฟลเบส. (2561). Google Firebase. เขาถงไดจาก https://firebase.google.com/