Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
บทท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