Stock Management and Product Withdraw System …...ระบบจ ดการคล งและการเบ กส นค า (กรณ ศ กษา ร าน ล งก คอมพ

ระบบจดการคลงและการเบกสนคา (กรณศกษา ราน ลงก คอมพวเตอร)

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

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/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

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. สามารถคนหาสนคาทตองการได



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. จะแสดงรายงานสนคาคงคลงใกลหมดออกมา



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. สามารถคนหาสนคาทตองการได



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. ออกเอกสารทเบกและสงซอสนคาเขามา



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. สามารถคนหาจ าพวกสนคาทตองการได



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. สามารถคนหาชนดสนคาทตองการได



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. สามารถคนหาชอผขายได



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. ผดแลระบบ หรอพนกงาน จะเขามากรอกขอมลหรอแกไขขอมลของพนกงานได



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. สามารถคนหากลมใชงานได



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. สามารถคนหาหรอก าหนดสทธผใชงานได



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.เมอคลกจะสามารถ

เขาไปแกไขหรอลบ

ออกจากคอลมภได


ใหแสดงวามกชนใน

หนานไดและเลอนไป

หนาอนๆได

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.เมอคลกเขาไปจะเขา

ไปหนาเพมทอย




76

รปท 4.8 หนาจอแสดงรายการรวมของสนคา จากรปท 4.8 แสดงหนาดสนคาโดยรวมทมอยในคลงสนคาซงจะแสดงล าดบท และ

รหสสนคา รายละเอยดของสนคา มมดานขวา สามารถเลอกใหแสดงเฉพาะในสวนของนนๆได เชน เลอก คย จะแสดงแตคย เลอกรหสกจะแสดงแตรหส สามารถลบจ านวนสนคาในหนานได


ไปหนาเพมขอมล

สนคา








77

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

สามารถใส คย ล าดบท รหส Stock type Product type ชอสนคา Bye in Bye out Qty แลวจะไปแสดงในหนาของคลงสนคา




ชอสนคา buy in buy

out qty

78

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

ซอ ราคาขาย จ านวนสนคา

1.เมอคลกเขามาจะ

แสดงรายงานสนคา

ของในคลงทงหมด

2.แสดงรายละเอยดของ

สนคาคงคลง

รหสสนคา ชอสนคา

ราคาซอ ราคาขาย และ

จ านวนสนคา

79

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

ราคาซอ ราคาขาย จ านวนสนคา


แสดงรายงานสนคา

ของในคลงทงหมด


สนคาคงคลง

รหสสนคา ชอสนคา

ราคาซอ ราคาขาย และ

จ านวนสนคา

80

รปท 4.12 หนาสงจอซอสนคา จากรปท 4.12 แสดงหนาสงซอของสนคา จากผขาย เขาสราน แลวท าการบนทกสนคาลง

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



สนคา



ออกจากคอลมได





81

รปท 4.13 หนาจอเพมสนคาทสงซอ

จากรปท 4.13 แสดงหนาทสงซอสนคาจากผขาย ในหนานจะเปนหนาทใสขอมลของสนคา

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




product รายละเอยด

total price

2.เมอกรอกเสรจแลว

ตองรอเจาของรานมา

คลกอนมต

82

รปท 4.14 หนาจอเบกสนคา จากรปท 4.14 แสดงหนาจอการเบกสนคาออกจากคลงสนคา จะแสดงจ านวนทเบกเขาและ

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



สนคา




หนาอนๆ ได




83

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

สนคาเขามาได




ชอสนคา buy in buy

out qty

2.สามารถคลกเพม

สนคาเขาไปไดโดยไม

ตองกรอกรายละเอยด

84

รปท 4.16 หนารายงานการสงซอ จากรปท 4.16 เมอท ารายการทเกยวกบใบสงซอจะมาแสดงขอมลของรายงานใบสงซอ จะ

แสดงรายละเอยด ดงน วนเวลา ผท ารายการ รหสใบเสรจ จ านวน รายงาน รายละเอยด สถานะการอนมต


แสดงรายงานใบสงซอ


วนเวลา ผท ารายการ

รหสใบเสรจ จ านวน

รายงาน รายละเอยดก

สภานภาพการอนมต

85

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

รายงานใบสงซอ จะแสดงรายละเอยดดงน วนเวลา ผท ารายการ รหสใบเสรจ จ านวน รายงาน รายละเอยด สถานะการอนมต


แสดงรายงานใบสงซอ



รหสใบเสรจ จ านวน

รายงาน รายละเอยดก

สภานภาพการอนมต

86

รปท 4.18 หนาจอแยกประเภทของคลงสนคา จากรปท 4.18 แสดงสวนหนาการแยกประเภทของคลงสนคา เชน ในรานตอนนขายเฉพาะ

ของ Gaming gear ในอนาคตอาจจะมน าของทไมไช Gaming Gear



สนคา








87

รปท 4.19 หนาจอเพมประเภทของสนคา จากรปท 4.19 แสดงหนาจอการเพมประเภทของสนคา โดยสามารถเพมสนคาประเภทอนๆ

ไดในอนาคต



รายละเอยด

88

รปท 4.20 หนาจอแสดงประเภทของสนคา จากรปท 4.20 แสดงหนาการแยกประเภทสนคา เชน เมาส คยบอรด หฟง ถาเพมเขามาจะ

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



สนคา








89

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

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



รายละเอยด

90

รปท 4.22 หนาของผขาย จากรปท 4.22 แสดงรายชอของผขาย ทตดตอสงซอของจากคนๆ นน


ไปหนาเพมขอมลของ

supplier


ใหแสดงวามกคนใน






91

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

จะแสดงขอมลในหนาของผขาย



ชอซพพรายเออร

รายละเอยด ทอย เบอร

ตดตอ

92

รปท 4.24 หนาจอสงสนคาคน จากรปท 4.24 แสดงสวนของการสงคนสนคาเมอสนคามปญหา หรอลกคาซอสนคาผดไป

สามารถเชคขอมลไดในหนาน



สนคา








93

รปท 4.25 หนาจอจดการและแกไขจ านวนสนคาในคลงสนคา จากรปท 4.25 แสดงสวนการบนทกขอมลของสนคาทสงคนลงแลวจะไปแสดงในสวนของ

หนาสงคนสนคา


สนคา คย ล าดบท

เลขทใบเสรจ product

serial no price

94

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

สนคาคนทงหมด จะแสดงรายละเอยดดงน วนเวลา ผท ารายการ รหสใบเสรจ สนคา serial.no ราคา


แสดงรายงานสงสนคา

คนทงหมด



รหสใบเสรจ สนคา

serial.no ราคา

95

รปท 4.27 หนาจอจดการรายชอพนกงาน จากรปท 4.27 แสดงหนาแกไขขอมลของพนกงาน โดยอาจจะมพนกงานเขามาใหม หรอ

แกไขในสวนของพนกงานทเคยท างานอยแลว

1.เมอคลกเขาไปจะเปน

การคนหาพนกงาน


ใหแสดงวามพนกงานก

คนในหนานไดและ

เลอนไปหนาอนๆ ได

2.เมอคลกจะสามารถเขาไปแกไขหรอลบออกจากคอลมภได

96

รปท 4.28 หนาจอจดการกลมใช จากรปท 4.28 แสดงหนาการจดการกบกลมผใชงาน ผดแลระบบจะเปนคนทเขามาจดกลม

ผใชงานวาคนนจะใหเปน พนกงาน หรอ ผดแลระบบอกคน










97

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

จะไปแสดงในหนาของหนาจดกลมผใชงาน



รายละเอยด จดการ

สทธ

98

รปท 4.30 หนาจอจดการมอบสทธใหแกผใชงาน จากรปท 4.30 แสดงสวนของการจดการสทธใหกบผใชงาน โดยมการก าหนดวาเปน ผดแล

ระบบ หรอ พนกงาน สามารถลบและแกไขขอมลได










99

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

พนกงาน แลวคลกบนทกลงไปจะสามารถแสดงในหนาของจดการสทธได


สนคา 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/


Documents

Stock Management and Product Withdraw System …...ระบบจ ดการคล งและการเบ กส นค า (กรณ ศ กษา ร าน ล งก คอมพ