บทท1 บทน ำ

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

บรษท บางกอกโซลชน จ ากด บรการใหค าปรกษาในการประกอบธรกจออนไลน รบจดทะเบยนโดเมนเนม (Domain Name Registration) โดยมใหบรการเชาเครองแมขาย (Dedicate Server)เพอใชเปนพนทส าหรบเกบขอมลเวบไซต (Web Hosting) งานพฒนาเวบไซต (Web Develop) งานพฒนาระบบ (Web Based Application) รวมถงงานออกแบบกราฟกท งเวบดไซน (Web Design) งานแบนเนอรBanner Ads เกมออนไลน (Game Online) งานภาพเคลอนไหว (Animation)เปนตน

เนองจากทางจากบรษท บางกอกโซลชน จ ากดไดใหค าปรกษาและค าแนะน าในการพฒนาระบบ แกบรษท สหกลการ จ ากดดวยรปแบบระบบงานการขนสงสนคาแบบเดมของทางบรษท สหกลการ จ ากดไมไดมเทคโนโลยเขามาชวยในการด าเนนงาน จงท าใหการท างานเปนไปดวยความลาชา ดงนนทางบรษท บางกอกโซลชน จ ากด จงไดมการมอบหมายงานใหคณะผจดท าพฒนาเวบแอปพลเคชนการขนยายสนคาของบรษท สหกลการ อมปอรท 1991 จ ากด เพอชวยการด าเนนงานของบรษทงานเปนไปดวยความสะดวกรวดเรวและแมนย า และยงสามารถทราบถงจ านวนสนคาทอยในแตละโกดงซงทางคณะผจดท าไดด าเนนการพฒนาเวบแอปพลเคชน โดยพฒนาเวบไซตดวยการน า React Frameworkซงเปนเครองมอในการพฒนาเวบไซตใชภาษา JavaScript ในการพฒนาและใชภาษา CSS ในการจดแตงหนาเวบไซต

1.2 วตถประสงคของโครงงำน เพอพฒนาเวบแอปพลเคชนการขนยายสนคาของบรษท สหกลการ อมปอรท 1991 จ ากด 1.3 ขอบเขตโครงงำน

1.3.1 สถาปตยกรรมทใชในการพฒนาโครงงานเปนแบบไคลเอนท/เซรฟเวอร 1.3.2 พฒนาเปนเวบแอปพลเคชนใชงานผานโปรแกรมเวบเบราวเซอร 1.3.3กลมผใชคอพนกงานในบรษท โดยมฟงกชนการท างานทรองรบกลมผใช ดงน

1.3.3.1 สามารถเพมรายการสนคา 1.3.3.2 สามารถคนหารายการสงสนคาแบบเปนวน/เดอน/ป 1.3.3.3 สามารถคนหารายการสงโดยพมพเลขใบสงสนคา 1.3.3.4 สามารถเพมแกไขและลบขอมลของรายการสงสนคา

2

1.3.3.5 สามารถบอกไดวามสนคาชนใดถกสงเขามา 1.4 ประโยชนทไดรบ

1.4.1 สามารถทราบถงจ านวนของสนคาแตละชนทอยในแตละโกดงไดอยางรวดเรว 1.4.2 ลดจ านวนการใชแรงงานภายในบรษท 1.4.3 ท าใหบรษทมขอมลมความถกตองแมนย าและมความนาเชอถอมากขน

1.5 ขนตอนและวธกำรด ำเนนงำน 1.5.1รวบรวมควำมตองกำรและศกษำขอมลของโครงงำน(Detailed Study)

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

1.5.2 วเครำะหระบบงำน(System Analysis)

น าขอมลตางๆ ทท าการรวบรวมน ามาวเคราะหและวางแผนการปฏบตงานเพอท าการออกแบบเวบแอปพลเคชนใหตอบสนองตรงตามความตองการของผใชอยางสมบรณครบถวน โดยวเคราะหจากความตองการทผใช เสนอมาขอบเขตการท างานของเวบแอปพล เคชน โดยน าเสนอดวยแผนภาพ Use Case Diagram , Use Case Detail , ER Diagramและ Class Diagramดงตอไปน

3

1.5.2.1Use Case Diagram

รปท 1.1 แสดงฟงกชนการท างานของระบบ

4

1.5.2.2 Use Case Detail

1.5.2.2.1 Use Case :Search orderlist

ตารางท 1.1 แสดงการท างานการคนหาตามเลขใบสงซอสนคา

Use Case No. UC001

Use Case Name Search orderlist

Actor(s) Administrator

Description คนหาใบสงสนคา

Pre-Conditions ผใชงานตองการทจะคนหารายการสงของสนคา

Post-Conditions รายละเอยดขอมลรายการสงสนคา

Flow of Event 1.พมพเลขรายการสงสนคาในชองคนหา 2.ระบบจะแสดงรายละเอยดของรายการสงสนคาตามตวเลขใบสง ซอทกรอกคนหา

Alternative Flows -

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

5

1.5.2.2.2Use Case : Search date

ตารางท 1.2 แสดงการท างานของการคนหาขอมลตามวนท

Use Case No. UC002

Use Case Name Search date

Actor(s) Administrator

Description คนหารายการสงสนคาไดโดยคนหาจาก วน/ เดอน/ ป

Pre-Conditions ผใชงานตองการคนหารายการสงสนคาวนทนนๆ

Post-Conditions ระบบแสดงผลรายการสนคาทสงระหวางวนทจากทเราไดคนหา

Flow of Event 1. ระบบจะท าการคนหาโดยองจากวนทคนหามา 2. แสดงผลรายการสงสนคาตามวนทไดคนหา

Alternative Flows -

Exceptions -

6

1.5.2.2.3Use Case : Insert orderlist ตารางท 1.3 แสดงการท างานของการเพมขอมลรายการสงซอ

Use Case No. UC003

Use Case Name Insert orderlist

Actor(s) Administrator

Description เพมขอมลการสงซอในแตละรายการ

Pre-Conditions ผใชงานมสนคาเขามาในบรษท

Post-Conditions ระบบจะบนทกขอมลรายการสงซอทไดพมพไปและแสดงขอมลใหเหน

Flow of Event 1.ระบบจะท างานเมอผใชงานตองการบนทกขอมลรายการสงซอ ทเขามาภายในบรษท 2.ระบบจะท าการบนทกขอมลและแสดงรายการทไดบนทกไว

Alternative Flows -

Exceptions -

7

1.5.2.2.4Use Case : Delete orderlist ตารางท 1.4 แสดงการท างานของการลบขอมลรายการสงซอ

Use Case No. UC004

Use Case Name Delete orderlist

Actor(s) Administrator

Description ลบรายการสงซอในแตละรอบได

Pre-Conditions ผใชงานตองการลบเมอพบวาขอมลผดพลาด

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

Flow of Event 1. ระบบจะท าการตรวจสอบขอมลและลบออกจากหนาเวบไซต

Alternative Flows -

Exceptions -

8

1.5.2.2.5Use Case : Edit orderlist ตารางท 1.5 แสดงการท างานของการแกไขใบรายการสงซอสนคา

Use Case No. UC005

Use Case Name Edit orderlist

Actor(s) Administrator

Description แกไขใบรายการสงซอสนคาทไดมการบนทกลงไปแลว

Pre-Conditions เมอผใชงานตองการทจะเปลยนแปลงขอมลในระบบ

Post-Conditions ระบบจะท าการอพเดตขอมลทไดแกไขและบนทกวนเวลาทไดแกไข

Flow of Event 1. เมอผใชตองการอพเดตหรอแกไขขอมลตางๆ 2. ระบบจะตรวจสอบการแกไขและท าการอพเดตขอมลปจจบน

Alternative Flows -

Exceptions -

9

1.5.2.3 Class Diagram

รปท 1.2 Class Diagram ของเวบแอปพลเคชนการขนยายสนคาของบรษท สหกลการ จ ากด

10

1.5.2.4 ER Diagram

รปท 1.3 แสดงโครงสรางและความสมพนธระหวางเอนทต (Entity-Relationship)

11

1.5.2.5 Data Dictionary

ตารางท 1.6 รายละเอยดของตารางขอมล warehouse

Relation Attribute Descrition Data Type(size)

PK FK Referece

warehouse warehouse_id เลขทโกดง int yes warehouse warehouse_name ชอโกดง string

ตารางท 1.7 รายละเอยดของตารางขอมล stock

Relation Attribute Descrition Data Type(size)

PK FK Referece

stock stock_id เลขทสตอก

int yes

stock lot_id เลขทใบสงซอ

int yes lot

stock warehouse_id เลขทโกดง int yes warehouse stock cost ราคา int stock product_id เลขท

สนคา int yes product

stock qty จ านวน int stock balance จ านวน

ของทงหมด

int

stock Unit หนวย int

12

ตารางท 1.8 รายละเอยดของตารางขอมล lot

Relation Attribute Descrition Data Type(size)

PK FK Referece

lot lot_id ล าดบเลขทใบสงซอ

int yes

lot ref_bjc รหสBJC int lot lot_no เลขทใบสง

ซอ int

lot lot_date วนทสงซอ date lot from_wh จากโกดง string lot to_wh ถงโกดง string lot ref_bjc1 รหสBJC1 int

ตารางท 1.9 รายละเอยดของตารางขอมล lot_detail

Relation Attribute Descrition Data Type(size)

PK FK Referece

lot_detail lot_detail_id เลขทรายละเอยดใบสงซอ

int yes

lot_detail lot_id เลขทใบสงซอ

int yes lot

lot_detail product_id เลขทสนคา int yes product lot_detail product_name ชอสนคา string lot_detail qty จ านวน int lot_detail unit หนวย int lot_detail note รายละเอยด string

13

ตารางท 1.10 รายละเอยดของตารางขอมล product

Relation Attribute Descrition Data Type(size)

PK FK Referece

product product_id เลขทสนคา int yes product bjc_code รหสBJC int product product_code รหสสนคา int product product_name ชอสนคา string product brand แบรนด string product product_detail รายละเอยด

สนคา string

product note หมายเหต string product cost ราคา int

1.5.3 ออกแบบระบบงำน (System Design) ในขนตอนนจะท าการออกแบบระบบเวบทจะน ามาใชจรง เพอเปนแนวทางในการพฒนาเวบแอปพลเคชนทตอบสนองความตองการของผใชมากทสด 1.5.3.1 ออกแบบการท างานของระบบ 1.5.3.2 ออกแบบหนาจอสวนตดตอผใชโดยใชภาษา CSS และBootstrap frameworkในการออกแบบเวบแอปพลเคชน 1.5.3.3 จดเตรยมขอมลฐานขอมลเพอท าการแสดงในเวบแอปพลเคชน 1.5.3.4 ก าหนดเครองมอในการพฒนาเวบแอปพลเคชนเชน Atom, Adobe Illustrator CC 1.5.4 พฒนำระบบ(System Development)

เปนขนตอนในการพฒนาระบบเปนการน าขอมลท งหมดทไดวเคราะหและออกแบบไวมา สรางและเขยนชดค าสง ดวยโปรแกรม Atom โดยใชน า React Framework ซงเปนเครองมอในการพฒนาเวบไซตเปนภาษาJavaScript Libraryสรางมาจากพนฐานแนวความคดแบบ MVC(Model View Controller) ซงหมายถง React มหนาทจดการกบ Model หรอ View และเกบฐานขอมลโดยใชSQL localhost

14

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

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

ตารางท 1.7 แสดงระยะเวลาในการด าเนนงานของโครงงาน

ขนตอนการด าเนนงาน พ.ค. 60 ม.ย. 60 ก.ค. 60 ส.ค. 60

1.รวบรวมความตองการ

2.วเคราะหระบบ

3.ออกแบบระบบ

4.พฒนาระบบ

5.ทดสอบระบบ

6.จดท าเอกสาร

15

1.6 อปกรณและเครองมอทใชในกำรพฒนำโครงงำน 1.6.1 ฮำรดแวร 1.6.1.1เครองโนตบค รน Dell SRS Premium Sound Core i5

1.6.2 ซอฟตแวร 1.6.2.1 โปรแกรม Atom 1.6.2.2 โปรแกรม Adobe Illustrator CC 1.6.2.4 โปรแกรม Microsoft word 2010 1.6.2.5 ระบบปฎบตการ windows 10 1.6.2.5 โปรแกรม CMD 1.6.2.6 โปรแกรม Xampp 1.6.2.6 โปรแกรม PHP Myadmin

1.7อปกรณและเครองมอส ำหรบผใชระบบ 1.7.1 ฮำรดแวร 1.7.1.1 สามารถใชไดกบทกอปกรณทมการรองรบอนเทอรเนต เชน เครองคอมพวเตอร , Notebook , Smartphone

1.7.2 ซอฟตแวร 1.7.2.1โปรแกรม Web Browserเชน Google Chrome , Opera, Mozilla Firefox