Customer Information Management System of TKS Company …e-research.siam.edu/wp-content/uploads/2019/03/Com... · 2019. 3. 10. · รูปที3.1่1 ตดัต่อวีดีโอด้วย

รายงานการปฏบตงานสหกจศกษา

ระบบจดเกบและจดการขอมลลกคาของบรษท TKS

Customer Information Management System of TKS Company Limited

บรษท พรซม โซลชนส จ ากด

โดย

นายวรรณชนะ แซเหลอ 5804800005

รายงานเลมนเปนสวนหนงของวชาสหกจศกษาส าหรบนกวทยาการคอมพวเตอร

ภาควทยาการคอมพวเตอร คณะวทยาศาสตร

มหาวทยาลยสยาม

ภาคการศกษาท 3 ปการศกษา 2560

ก

จดหมายน าสงรายงาน

วนท 1 กนยายน พ.ศ. 2561

เรอง ขอสงรายงานปฏบตงานสหกจศกษา

เรยน อาจารยทปรกษาสหกจศกษา ภาควชาวทยาการคอมพวเตอร

อาจารย จรรยา แหยมเจรญ

ตามทผจดท า นายวรรณชนะ แซเหลอ นกศกษาภาควชาวทยาการคอมพวเตอร คณะ

วทยาศาสตร มหาวทยาลยสยาม ไดไปปฎบตงานสหกจระหวางวนท 14 พฤษภาคม พ.ศ. 2561 ถง

วนท 31 สงหาคม พ.ศ. 2561 ในต าแหนง โปรแกรมเมอร (Programmer) ณ บรษท พรซมโซลชนส

จ ากด และไดรบมอบหมายงานจากพนกงานทปรกษาใหพฒนาระบบจดเกบและจดการขอมลลกคา

ของบรษท TKS

บดนการปฏบตงานสหกจศกษาไดสนสดแลว ทางคณะผจดท าขอสงรายงานดงกลาวมา

จ านวน 1 เลม เพอขอรบค าปรกษาตอไป

จงเรยนมาเพอโปรดพจารณา

ขอแสดงความนบถอ นายวรรณชนะ แซเหลอ

นกศกษาสหกจศกษา

ภาควชาวทยาการคอมพวเตอร

ข

กตตกรรมประกาศ

(Acknowledgement)

จากการทผจดท าไดมาปฏบตงานในโครงการสหกจศกษา บรษท พรซมโซลชนส จ ากด ตงแตวนท 14 พฤษภาคม พ.ศ. 2561 ถง วนท 31 สงหาคม พ.ศ. 2561 สงผลใหผจดท าไดรบความรและประสบการณตาง ๆทมคามากมาย ส าหรบรายงานสหกจศกษาฉบบนไดส าเรจลงไดดวยดจากความรวมมอและสนบสนนจากหลายฝายดงน 1. คณเดชา เคนถาวร ต าแหนง IT Development Team Lead 2. อาจารยจรรยา แหยมเจรญ ต าแหนง อาจารยทปรกษา รวมไปถงบคคลทานอน ๆทไมไดกลาวถงนามทกทานทไดใหค าแนะน าชวยเหลอตลอดการปฏบตงานในครงน ผจดท าขอขอบพระคณผทมสวนเกยวของทกทานทมสวนรวมในการใหขอมลและเปนทปรกษาในการท ารายงานฉบบนจนเสรจสมบรณ ตลอดจนใหการดแลและใหความเขาใจกบชวตของการท างานจรงซงคณะผจดท าขอขอบพระคณเปนอยางสงไว ณ ทนดวย

ผจดท า 1 กนยายน 2561

ค

ชอโครงงาน : ระบบจดเกบและจดการขอมลลกคาของบรษท TKS

ชอนกศกษา : นายวรรณชนะ แซเหลอ 5804800005

อาจารยทปรกษา : อาจารยจรรยา แหยมเจรญ

ระดบการศกษา : ปรญญาตร

ภาควชา : วทยาการคอมพวเตอร

คณะ : วทยาศาสตร

ภาคการศกษา/ ปการศกษา : 3/2560

บทคดยอ

บรษท พรซม โซลชน จ ากด ซงเปนบรษทในเครอ TKS ซงเปนผน าทางดานอตสาหกรรมสงพมพ ในสวนของบรษท พรซม โซลชน จ ากด นนเปนผใหบรการทางดานฮารดแวรและซอฟตแวร แกหนวยงานตางๆ ทงภาครฐและเอกชน ทนอกเหนอจาก TKS ซงทาง TKS มความตองการใหบรษท พรซม โซลชน จ ากด พฒนาระบบจดเกบและจดการขอมลลกคาของ TKS เพอใชประโยชนในการขอรบเอกสารใบเสรจรบเงน ใบก ากบภาษ เปนตน จากทาง TKS ซงในปจจบนยงไมมการบนทกขอมลของลกคาลงระบบ และเพอใหระบบอนของ TKS ไดใชประโยชนในอนาคต ผจดท าในฐานะนกศกษาสหกจศกษาจงไดรบมอบหมายใหพฒนาระบบดงกลาว โดยพฒนาเปนเวบแอปพลเคชน ใชชอโปรแกรมวา eTax มการจดเกบขอมลลงฐานขอมลใหเปนระบบระเบยบ และทส าคญยงรองรบการท างานบนอปกรณทกแพลตฟอรม ทง คอมพวเตอรทวไป แทบเลต หรอโทรศพทมอถอ ระบบดงกลาวพฒนาดวยเทคโนโลย ASP.Net และ Responsive บรหารจดการฐานขอมลดวย Microsoft SQL Server 2017 ผลจาการทดสอบระบบดวยพนกงานทปรกษาและทมงาน ระบบท างานไดตามฟงกชนทก าหนด ค าส าคญ : การบรหารจดการขอมล, เวบแอปพลเคชน, อแทก

สารบญ หนา

จดหมายน าสงรายงาน ...................................................................................................................... ก กตตกรรมประกาศ ............................................................................................................................ ข บทคดยอ ........................................................................................................................................... ค Abstract ............................................................................................................................................. ง บทท 1 บทน า 1.1 ความเปนมาและความส าคญของปญหา .................................................................................. 1 1.2 วตถประสงคของโครงงาน ...................................................................................................... 1 1.3 ขอบเขตของโครงงาน.............................................................................................................. 1 1.4 ประโยชนทไดรบ .................................................................................................................... 2 1.5 ขนตอนและวธการด าเนนงาน ................................................................................................. 2

1.5.1 รวบรวมความตองการและการศกษาขอมลโครงงาน .................................................. 2 1.5.2 วเคราะหระบบงาน ..................................................................................................... 2 1.5.3 ออกแบบระบบงาน ..................................................................................................... 3 1.5.4 พฒนาระบบ ................................................................................................................ 3 1.5.5 ทดสอบและสรปผล .................................................................................................... 3 1.5.6 จดท าเอกสาร ............................................................................................................... 3

1.6 อปกรณและเครองมอทใชในการพฒนา .................................................................................. 4 1.6.1 ฮารดแวร ..................................................................................................................... 4 1.6.2 ซอฟตแวร ................................................................................................................... 4

1.7 อปกรณและเครองมอส าหรบผใชงาน ..................................................................................... 4 1.7.1 ฮารดแวร ..................................................................................................................... 4

2.7.1 ซอฟตแวร ................................................................................................................... 4 บทท 2 การทบทวนวรรณกรรมทเกยวของ

2.1 eTax คออะไร ......................................................................................................................... 5 2.2 UX / UI .................................................................................................................................. 6 2.3 Trello ...................................................................................................................................... 6 2.4 Bootstrap ................................................................................................................................ 8 2.5 Microsoft SQL Server ............................................................................................................ 8 2.6 Git .......................................................................................................................................... 9

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

2.7 Model-View-Controller (MVC) ........................................................................................... 10 2.8 ASP.NET ............................................................................................................................. 12 2.9 Responsive Web ................................................................................................................... 13

บทท 3 รายละเอยดการปฏบตงาน

3.1 ชอและสถานทตงของสถานประกอบการ ............................................................................. 14 3.2 ลกษณะการประกอบการ ผลตภณฑการใหบรการหลกขององคกร ...................................... 14

3.3 รปแบบการจดองคกรและการบรหารงานขององคกร ........................................................... 15

3.4 ต าแหนงงานและลกษณะงานทไดรบมอบหมาย ................................................................... 16 3.5 ชอและต าแหนงงานของพนกงานทปรกษา ........................................................................... 25 3.6 ระยะเวลาทปฏบตงาน ........................................................................................................... 25

บทท 4 รายละเอยดโครงงาน

4.1 รายละเอยดของโครงงาน ....................................................................................................... 26 4.2 การท างานของระบบ ............................................................................................................. 27

บทท 5 สรปผลและขอเสนอแนะ

5.1 สรปผลโครงงานหรองานวจย .............................................................................................. 41 5.1.1 สรปผลโครงงานหรองานวจย .................................................................................. 41

5.1.2 ขอจ ากดหรอปญหาของโครงงาน ............................................................................ 41 5.1.3 ขอเสนอแนะ ............................................................................................................ 41

5.2 สรปผลการปฏบตงานสหกจศกษา ....................................................................................... 41 5.2.1 ขอดของการไดปฏบตสหกจ ..................................................................................... 41

5.2.2 ปญหาทพบของการปฏบตงานสหกจศกษา .............................................................. 42 5.2.3 ขอเสนอแนะ ............................................................................................................. 42

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

ภาคผนวก ................................................................................................................................... 44 ประวตผจดท า ............................................................................................................................. 47

สารบญตาราง

หนา

ตารางท 1.1 ขนตอนและระยะเวลาในการด าเนนโครงงาน .............................................................. 4 ตารางท 4.1 รายละเอยดของตารางลกคา ( Customer ) .................................................................. 28 ตารางท 4.2 รายละเอยดของตารางผรบ ( Recipient ) ......................................................... 28 ตารางท 4.3 รายละเอยดของตารางบรษท ( Company ) ................................................................... 29 ตารางท 4.4 รายละเอยดของตารางรายการงาน ( Products ) ........................................................... 29 ตารางท 4.5 รายละเอยดของตารางรายการของผขอรบ ( RecipientProducts ) ................................ 29 ตารางท 4.6 รายละเอยดของ Use Case : Register............................................................................ 31 ตารางท 4.7 รายละเอยดของ Use Case : Invoice Info ..................................................................... 32 ตารางท 4.8 รายละเอยดของ Use Case : Add Recipient .................................................................. 33 ตารางท 4.9 รายละเอยดของ Use Case : Choose Product .............................................................. .34 ตารางท 4.10 รายละเอยดของ Use Case : Search ............................................................................ 35 ตารางท 4.11 แสดงความเปนไปไดทระบบสามารถตอบสนองความตองการทงหมด .................... 36

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

รปท 2.1 ตวอยางหนาจอของระบบ eTax .......................................................................................... 5 รปท 2.2 UX & UI Design ................................................................................................................ 6 รปท 2.3 ตวอยางหนาโปรแกรม Trello ............................................................................................ 7 รปท 2.4 ตวอยางของ Bootstrap ....................................................................................................... 7 รปท 2.5 ตวอยางของโปรแกรม SQL Server .................................................................................... 9 รปท 2.6 TFS Git Integration บน Visual Studio ............................................................................. 9 รปท 2.7 สถาปตยกรรมซอฟตแวร MVC ....................................................................................... 10 รปท 2.8 MVC Architecture ........................................................................................................... 11 รปท 2.9 Microsoft ASP.NET ........................................................................................................ 12 รปท 2.10 Responsive Web Design ................................................................................................. 13 รปท 3.1 แผนทตงของสถานประกอบการ ....................................................................................... 14 รปท 3.2 รปแบบการจดองคกรและการบรหารงานขององคกร ....................................................... 15 รปท 3.3 หนา Home ของเวบแอปพลเคชน Venio .......................................................................... 16 รปท 3.4 หนา Feature ของเวบแอปพลเคชน Venio ........................................................................ 17 รปท 3.5 หนา FAQ ของเวบแอปพลเคชน Venio ............................................................................ 18 รปท 3.6 หนา Blog ของเวบแอปพลเคชน Venio ( ตวอยาง ) .......................................................... 19 รปท 3.7 หนา Home ของเวบแอปพลเคชน eTax Registration........................................................ 20 รปท 3.8 หนา Info ของเวบแอปพลเคชน eTax ............................................................................... 21 รปท 3.9 เขยนโปรแกรมเชอมตอกบไฟล.dbf .................................................................................. 22 รปท 3.10 FG Movement ส าหรบรบเขาขอมลคลง ......................................................................... 23 รปท 3.11 ตดตอวดโอดวย Movavi ................................................................................................. 24 รปท 3.12 IMC2 .............................................................................................................................. 25 รปท 4.1 Work Flow Diagram ของระบบ eTax .............................................................................. 27 รปท 4.2 Entity Relationship Diagram ของระบบ eTax .................................................................. 27

รปท 4.3 Class Diagram .................................................................................................................. 37 รปท 4.4 หนา Web eTax Registration ( Home ) ............................................................................. 38 รปท 4.5 หนาแสดงขอมลของผรบ ( Info )...................................................................................... 39 รปท 4.6 หนาในการเพมขอมลของ User ทจะขอรบ Invoice .......................................................... 40

บทท 1 บทน ำ

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

บรษท พรซมโซลชนส จ ำกด เปนผใหบรกำรดำนฮำรดแวรและซอฟตแวร แกหนวยงำนตำง ๆ ท งภำครฐและเอกชน ผลตภณฑทใหบรกำร อำทเชน โมบำยแอปพลเคชน (Mobile Application), เวบแอปพลเคชน (Web Application) และ ระบบรกษำควำมปลอดภย (Security Service System) และนอกจำกนบรษท พรซม โซลชน จ ำกด ยงพฒนำระบบไอทและซอฟตแวรใหกบบรษท TKS จ ำกด ซงเปนบรษทแมของบรษท พรซม โซลชน จ ำกด และทำง TKS ตองกำรระบบส ำหรบจดเกบและจดกำรขอมลลกคำ จงมอบหมำยใหทำงบรษท พรซม โซลชน จ ำกด พฒนำระบบดงกลำวให

ในฐำนะนกศกษำสหกจศกษำของบรษท พรซม โซลชน จ ำกด ไดรบมอบหมำยใหพฒนำระบบดงกลำว โดยจดท ำเปนเวบแอปพลเคชนส ำหรบจดกำรขอมลของลกคำทตองกำรขอรบเอกสำรตำง ๆ จำกทำง TKS เชน เอกสำรใบแจงหน ใบเสรจรบเงน หนงสอรบรอง เปนตน โดยจดเกบขอมลลงฐำนขอมล เพอควำมสะดวกของผใชและมกำรจดกำรขอมลลกคำทเปนระบบ ท ำใหขอมลไมสญหำย ตลอดจนสำมำรถน ำไปใชกบระบบอนๆ ของ TKS ไดในอนำคต 1.2 วตถประสงคของโครงงำน

เพอพฒนำระบบจดเกบและจดกำรขอมลลกคำของบรษท TKS

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

โปรแกรมเวบบรำวเซอร (Browser) 1.3.3 1.3.3 กลมผใชแบงออกเปน 3 กลมหลก คอ

1.3.3.1 ผดแลระบบ 1.3.3.1.1 ผดแลระบบจะคอยปรบปรงขอมลตำงๆ ในเวบแอปพลเคชน

เพอใหมควำมทนสมยอยเสมอ

2

1.3.3.2 พนกงำนบรษท TKS 1.3.3.2.1 ผใชสำมำรถเพมรำยชอผรบเอกสำร โดยกรอกขอมลตำม ฟอรม Add Contact ได 1.3.3.2.2 ผใชสำมำรถกรอก Code 5 หลก ทไดรบจำกจดหมำยระบบจะ

แสดงขอมลลกคำ พรอมรำยชอผรบเอกสำรทเคยบนทกไวได 1.3.3.3 ลกคำของบรษท TKS

1.3.3.3.1 ผใชสำมำรถเพมรำยชอพนกงำนทจะขอรบเอกสำร โดยกรอก ขอมลตำมฟอรม Add Contact ได 1.3.3.3.2 ผใชสำมำรถตรวจสอบรำยชอพนกงำนทขอรบเอกสำรทเคย บนทกไวได

1.4 ประโยชนทไดรบ 1.4.1 ชวยลดควำมผดพลำดของเจำหนำทในกำรตรวจสอบขอมลได 1.4.2 ชวยลดขนตอนกำรท ำงำนของเจำหนำท 1.4.3 ชวยใหผใชงำนมควำมสะดวกตอกำรขอรบเอกสำร 1.4.4 ชวยใหผใชงำนลดภำระกำรเดนทำง

1.5 ขนตอนและวธด ำเนนงำน

1.5.1 รวบรวมควำมตองกำรและศกษำขอมล รวบรวมควำมตองกำรโดยกำรปรกษำกบพนกงำนทปรกษำและพนกงำนทำนอนๆ

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

1.5.2 วเครำะหระบบ

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

3

1.5.3 ออกแบบระบบ ในกำรออกแบบไดท ำกำรวเครำะหจำกทำงบรษท ใหท ำกำรออกแบบฐำนขอมล

เพอใชเกบขอมลของลกคำและสวนของหนำเวบไซต โดยค ำนงถง UI (User Interface) และ UX (User Experiences) เพอใหผใชงำนมควำมพงพอใจและออกแบบเวบไซตโดยเปนแบบ Responsive ใหสำมำรถท ำงำนไดทงบนคอมพวเตอรและโทรศพทมอถอหรอแทบเลต 1.5.4 พฒนำระบบ

กำรพฒนำระบบ โดยผจดท ำจะใชโปรแกรม Microsoft Visual Studio 2017 ในกำรพฒนำโดยใชหลกกำรพฒนำซอฟรแวรแบบ MVC ในกำรเขยนจะใชภำษำ HTML , CSS , C# และมกำรใชเครองมอทชวยใหเวบแอปพลเคชนดงำยตอกำรใชงำนคอ Bootstrap ท ำใหกำรออกแบบดเปนระเบยบนำใชงำนและยงมกำรใชโปรแกรม Microsoft SQL Server Management Studio ในกำรเกบและจดกำรกบฐำนขอมล

1.5.5 ทดสอบและสรปผล

หลงจำกกำรพฒนำระบบเสรจสน จงมกำรทดสอบและทดลองใชงำนโดยจะมกำรทดสอบ คอ เรมจำกทดสอบดวยตนเองลองใชงำนวำระบบวำมฟงกชนไหนทใชงำนไมไดบำง มปญหำอะไรบำง โดยจะใช Visual Studio Run โปรแกรมแลวลอง Debug ทเกดขนวำเกดขอผดพลำดในสวนไหนและท ำกำรตรวจสอบฐำนขอมลโดยเขำไปท SQL Server มกำรเกบขอมลไดจรงหรอไม และไดทดสอบระบบกบพนกงำนทปรกษำ หลงจำกตรวจสอบดวยตนเอง จะสงใหพนกงำนทเปนฝำย Tester ไดทดสอบอกครงวำระบบยงมขอบกพรองสวนไหนอก จะท ำกำรแกไขและพฒนำระบบอยสม ำ เสมอ เพอใหมประสทธภำพกอนน ำไปใชงำนจรง

1.5.6 จดท ำเอกสำร

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

4

ตำรำงท 1.1 ขนตอนและระยะเวลำในกำรด ำเนนโครงงำน

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

1.6 อปกรณและเครองมอทใชในกำรพฒนำโครงงำน

1.6.1 ฮำรดแวร 1.6.1.1 เครองคอมพวเตอร Intel(R) Core™ i5-8400 CPU @ 2.80 GHz

Ram 16 GB เครองคอมพวเตอร Intel(R) Core™ i5-7400 CPU @ 3.00 GHz Ram 8 GB

1.6.1.2 เครองเซรฟเวอรโดยใชของทำงสถำนประกอบกำร 1.6.2 ซอฟตแวร

1.6.2.1 ระบบปฏบตกำร Microsoft Windows 10 1.6.2.2 โปแกรม Microsoft Visual Studio 2017 1.6.2.3 โปรแกรม Microsoft SQL Server Management Studio 2017

1.6.2.4 โปรแกรมบรหำรจดกำรงำน Trello

บทท 2 การทบทวนวรรณกรรมทเกยวของ

ในการจดท าโครงงานนผจดท าไดท าการศกษา คนควาทฤษฏและเทคโนโลยตาง ๆ เพอใช

เปนแนวทางในการพฒนาระบบมดงตอไปน

2.1 eTax คออะไร

eTax คอ ระบบจดเกบและจดการขอมลลกคาของบรษท TKS เพอน าไปใชในการขอรบ

เอกสารตาง ๆ กบทางบรษทโดยจะมเอกสาร เชน เอกสารใบแจงหน ใบเสรจรบเงน หนงสอรบรอง

ฯลฯ จดเกบขอมลลงฐานขอมล เพอความสะดวกของผใชและมการจดการขอมลลกคาทเปนระบบ

ท าใหขอมลไมสญหาย

รปท 2.1 ตวอยางหนาจอของระบบ eTax

6

รปท 2.2 UX & UI Design

2.2 UX / UI1

UX Design หรอ User Experience Design ซงจะเปนเรองของการแกปญหาในการใชงาน

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

พอใจของผใชทมตอระบบ

UI Design หรอ User Interface Design คอ สงทมาเตมเตมใหกบ UX น นสวยงามและ

สมบรณ ไมวาจะเปนเรองการจดวางตางๆ ส ขนาดตวอกษร ฟอรมตางๆ ทจะไปอยภายในเวบไซต

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

รเรมสรางสรรคเปนหลก

ในการน า UX/UI เขามาชวยในระบบเราน าหลกการทวาท าใหผใชงานเขาใจและใชงานงาย

ตอระบบ เชน การออกแบบหนาจอของระบบ, การจดฟอรม เปนตน

2.3 Trello

Trello เปน Online Software ทใชงานไดงาย (User Friendly) สามารถใชไดหลากหลาย

รปแบบและสามารถใชรวมกบคนในทมงานได โดยเฉพาะทม Project Management สามารถเพม

1 ดไซนนว. (2560). ความหมายของ ยเอก/ยไอ. เขาถงไดจาก https://www.designil.com/user-

experience-design.html

7

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

คอยดงานนน ๆ ไดดวย โดยจะใชโปรแกรมนในการท างานกบงานตาง ๆ

รปท 2.3 ตวอยางหนาโปรแกรม Trello

น าโปรแกรม Trello เขามาใชกบระบบทม เชน เมอมงานเขามาใหมกจะสรางเปน list ของ

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

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

บลอกทมค าวา Done ไดกคอการท างานเสรจสน เปนตน

8

รปท 2.4 ตวอยางของ Bootstrap

2.4 Bootstrap Framework2

Bootstrap เปนเครองมอทจะชวยใหการพฒนาเวบไซตของเราเรวขน งายขน และเปนระบบมากขน จดเดนของ Bootstrap ม UI เรมตนแบบทสวยงามและใชงานงายในการจด Responsive ของแตละหนาจอ โครงสรางของ Bootstrap Framework

- Scaffolding grid system เปนโครงราง ทจะแสดงผลในหนาจอ ซงจ านวนคอลมนนจะแสดงผลตามความกวางของอปกรณทเรยกใชงาน เชน คอมพวเตอร, แทบเลต, โทรศทพ เปนตน

- Base CSS style sheets ส าหรบ Html Elements พนฐานทสามารถเรยกใชงานได เชน ปมกด สตางๆ การแสดงรปภาพ ตาราง และอนๆ

- Components style sheets ส าหรบสงทตองใชบอยๆ ไมวาจะเปน navigation, pagination ทไวจดการ Menu, Navigation กบขนาดของหนาจอ ของอปกรณทเรยกใชงาน

2 มานพ กองอน. (2559. 15 เมษายน) ความหมายของ บสแตก [เวบบลอก]. เขาถงไดจาก

https://bit.ly/2JIUjS9

9

- JavaScript jQuery Plugins ตางๆ เชน modal, carousel ชวยในการสราง Popup, Dialog, Tooltip ตางๆ ค าสงแสดง Effect, Hover, Fade-in เปนตน

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

2.5 Microsoft SQL Server3

คอ ระบบจดการฐานขอมลทเราน ามาใชพฒนา เปนระบบฐานขอมลแบบ ไคลเอนท/

เซรฟเวอร ซงใชภาษา SQL ในการดงเรยกขอมลและงายตอการจดเกบและการประมวลผล โดยการ

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

ระเบยบและงายตอการเรยกใชงานตาง ๆ และลดความซบซอนของขอมล

จงน ามาใชกบระบบจดเกบขอมลโดยการใชขอมลของลกคาเขามาเกบลงในฐานขอมล เชน

การดงขอมลลกคามาแสดงบนตารางของเวบบราวเซอรโดยการใชค าสง SQL, การรบขอมลลกคาท

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

ตดตอรบสงขอมล เปนตน

รปท 2.5 ตวอยางของโปรแกรม SQL Server

3 มายพเอชพ. (2560). ความหมายของ ไมโครซอฟท เอสควแอล เซรฟเวอร. เขาถงไดจาก

https://bit.ly/2OnRJEx

10

2.6 Git4

Git คอโปรแกรม SCM (Source Control Management) เปน Open Source ใชจดเกบและ

จดท า Version ของชดค าสงตนฉบบ (Source Code) มขนาดเลก การจดเกบใชพนทนอยและยง

สามารถแชรไปยงผใชภายในทมและผใชตาง ๆ ทตองการเขามาแชรไฟลรวมกนได

รปท 2.6 TFS Git Integration บน Visual Studio

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

ท างานภายในทม เชน ในการท างานเมอท าเสรจเรยบรอยสามารถแชรใหกบคนในทมเพอใหคนอน

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

รวดเรวขน

2.7 Model-View-Controller (MVC)5

คอ สถาปตยกรรมซอฟตแวร (Software Architecture) ทมการแบงแยกระบบออกเปน 3 สวนหลกๆ ไดแก Data Model, User Interface และ Control Logic

4 ภาคน ภหนกอง. (2560. 16 กมภาพนธ) ความหมายของ กต [เวบบลอก]. เขาถงไดจาก

https://bit.ly/2InuTfV

5 สรยพร องสภานช. (2558. 15 กรกฎาคม) ความหมายของ เอมวซ [เวบบลอก]. เขาถงไดจาก https://bit.ly/2zvLBom

11

รปท 2.7 สถาปตยกรรมซอฟตแวร MVC

Model

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

- เปนงานดานการตรวจสอบความสมพนธของขอมล มผลกบฐานขอมลโดยการรบขอมล สงขอมลถงกน โดยจะตองเปนขอมลทตรงกน

- มการตรวจสอบความถกตองและความสมพนธระหวางฐานขอมล

View

- เปนสวนทแสดงผลผานเวบบราวเซอร

- เปนสวนทเปนหนาตาของเวบแอปพลเคชนและท าหนาทตดตอกบผใชงาน

- การท างานสมพนธกบ Controller

Controller

- เปนสวนทท างานเปนอนดบแรกเมอโปรแกรมถกเรยกใชงานจากเวบบราวเซอร

- เปนสวนทตดตอการท างานระหวางผใชและโปรแกรม

- มการตดตอฐานขอมล ดวย Model และแสดงผลขอมลผานทาง View

- เปนสวนทมการประมวลผลหลก ของโปรแกรม

12

รปท 2.8 MVC Architecture

ในการพฒนาระบบแอปพลเคชนเราใชหลกการของ MVC เขามาชวย เชน

Model ใชในการจดเกบขอมลเกยวกบฐานขอมลตาง ๆ

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

Controller ใชประมวลผลและท าการตดตอกบฐานขอมล

รปท 2.9 Microsoft ASP.NET

2.8 ASP.NET6

6 แอดมน ไอทจเนย. (2557. 6 ตลาคม). ความหมายของ เอเอชพดอทเนต [เวบบลอก].

เขาถงไดจาก https://bit.ly/2Dxp3Yo

13

ASP.NET คอ เทคโนโลยส าหรบพฒนาเวบไซต เวบแอปพลเคชน และเวบเซอรวส ซงเปน

สวนหนงของดอตเนตเฟรมเวรก พฒนาโดยไมโครซอฟท ท าใหผพฒนาสามารถเลอกใชภาษาใดก

ไดทรองรบโดยดอตเนตเฟรมเวรก เชน C# และ VB.NET เปนตน โดยในการพฒนาไดเลอกภาษา

C# ในการพฒนาเวบแอปพลเคชนท าใหการท างานรวดเรวขน ยงสามารถตรวจสอบขอผดพลาดตาง

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

จดเกบขอมลลงใน Session บนทกลงฐานขอมล, การตรวจสอบความผดพลาดของชดค าสงโดยการ

ดบค เปนตน

รปท 2.10 Responsive Web Design

2.9 Responsive Web

Responsive Web คอ เวบไซตทสามารถรองรบการท างานบนอปกรณแพลตฟอรมตาง ๆ

ทงขนาดของหนาจอตางกน เชน คอมพวเตอร, โทรศพทมอถอ เปนตน

ในการน า Responsive เขามาใชกบระบบเวบแอปพลเคชน เชน เราน า Responsive มา

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

ขนาดจอของแตละแบบ เชน โทรศพท, คอมพวเตอร, แทบเลต เปนตน

บทท 3 รายละเอยดการปฏบตงาน

3.1 ชอและทตงสถานประกอบการ

บรษท พรซม โซลชนส จ ำกด เลขท 30/88 หมท1 ต ำบลโคกขำม อ ำเภอเมองสมทรสำคร จงหวดสมทรสำคร 74000 โทรศพท : 02-784-5888 โทรสำร : 02-784-5858 อเมล : [email protected]

รปท 3.1 แผนทตงของสถำนประกอบกำร

3.2 ลกษณะการประกอบการ ผลตภณฑการใหบรการหลกขององคกร

บรษทพรซม โซลชนส จ ำกด ไดเรมกอตงขนมำตงแตป พ.ศ 2539 ดวยทนจดทะเบยนเรมตน 2 ลำนบำท ในฐำนะเปนบรษทในเครอของทำงบรษทซนเนค (ประเทศไทย) จ ำกด (มหำชน) โดยมจดยนทมงเนนไปทงำนทำงดำนบรกำร โดยรปแบบกำรใหบรกำรตำง ๆ

งำนหลก ๆ ของทำงบรษทในชวงแรกกคอ งำนกำรใหบรกำรในลกษณะสงเสรมกำรขำยใหกบทำงบรษทซนเนค (ประเทศไทย) จ ำกด ไมวำจะเปนกำรใหขอมลผลตภณฑสนคำทมควำมสลบซบซอนทงในสวน Hardware และ Software กำรใหค ำแนะน ำในกำรเลอกใชอปกรณอยำงเหมำะสมกบกำรใชงำน กำรบรกำรใหค ำปรกษำแกไขปญหำวธกำรตดตง และกำรใชงำนอปกรณอยำงถกวธ เปนตน ในอก 3 ปตอมำทำงบรษทกไดเพมทนจดทะเบยนจำก 2 ลำนบำท เปน 8 ลำนบำทในป พ.ศ 2542 โดยมควำม พรอมทจะใหบรกำรไปสคคำของทำงบรษทซนเนค (ประเทศไทย) จ ำกด (มหำชน) เพมมำกขน ไมวำจะเปนกำร

15

ออกแบบระบบเครอขำยตงแตขนำดเลกจนถงขนำดใหญ กำรใหบรกำรตดตงอปกรณทมควำมสลบซบซอน กำรใหบรกำรแกไขปญหำแบบ Onsite Service กำรใหบรกำร Maintenance Agreement Contract ส ำหรบบรษททไมมเจำหนำทดแลระบบ เปนตน

ปจจบนบคลำกรของบรษทประกอบดวยวศวกร พนกงำนทำงดำนคอมพวเตอรทเชยวชำญ และพนกงำน Technical Call Center ทคอยใหค ำปรกษำปญหำทำงดำนเทคนค ดวยประสบกำรณอนยำวนำนมำกกวำ 10 ป รวมแลวมำกกวำ 70 คน โดยจบกำรศกษำตงแตระดบปรญญำตรจนถงระดบปรญญำโททำงดำนคอมพวเตอร และสำขำทเกยวของ ไดรบประกำศณยบตร (Certified Professionals) ทงทำงดำนระบบ Network, Computer, Software และ Application จำกบรษทชนน ำมำกมำย ทสำมำรถสรำงควำมเชอมนกำรใหบรกำรในระดบมำตรำฐำนไดอยำงมนใจ อกทงบรษทยงพรอมทจะใหกำรสนบสนนใหวศวกรของบรษทมกำรเตรยมตว และปรบปรงมำตรฐำนใหเปน Certified Professionals ทำงดำนตำง ๆ จำกบรษทชนน ำทเกยวของเพมเตมอยตลอดเวลำ

3.3 รปแบบการจดองคกรและการบรหารงานขององคกร

16

รปท 3.2 รปแบบกำรจดองคกรและกำรบรหำรงำนขององคกร 3.4 ต าแหนงงานและลกษณะงานทไดรบมอบหมาย

ต ำแหนงงำนทไดรบมอบหมำยจำกบรษทคอ Programmer / Developer เปน

ต ำแหนงทท ำหนำทในกำรออกแบบและพฒนำเวบแอปพลเคชน ตงแตในเรองของโครง

รำง (Layout) กำรพฒนำเวบแอปพลเคชน ไปจนถงกำรแกไขขอผดพลำดทเกดขนจำกงำน

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

ขอผดพลำดและสำมำรถเรยนรในสงใหมทเกดขนจำกประสบกำรณจรง

3.4.1 ผลงำนทไดจดท ำ

รปท 3.3 หนำ Home ของเวบแอปพลเคชน Venio

หนำหลกของเวบโปรโมทเวบแอปพลเคชน Venio ซงจะมขอมลตำง ๆ กบกำรโปรโมทตว

Venio วำแอปพลเคชนตวนสำมำรถท ำอะไรไดบำง ชวยอะไรกบธรกจไดบำง

หนำทในกำรท ำงำนในสวน Home

- กำรท ำสวนของ Home Page ทงหมด โดยกำรจด Layout ตำมท Design ไดออกแบบ

- ท ำสวนของ Effect Fade-in, Fade-out, Slider, กำรจดเปลยนส Button, เปลยน Font โดยใช

HTML, CSS และ JavaScript

- มกำรใส Live Chat Facebook เพอไวตดตอกบผดแล

- กำรท ำ Form Contact กรอกขอมลเพอตดตอกบผดแล

17

- จดหนำ Responsive เพอใหใชงำนไดทงคอมพวเตอร, แทบเลต, โทรศพทมอถอ

รปท 3.4 หนำ Feature ของเวบแอปพลเคชน Venio

หนำ Feature เปนหนำทใหขอมลรำยละเอยดของเวบแอปพลเคชน Venio

หนำทในกำรท ำงำนในสวน Feature

- กำรท ำสวนของ Feature Page ทงหมด โดยกำรจด Layout ตำมทนกออกแบบไดออกแบบ

- ท ำสวนของ Effect Fade-in, Fade-out, Tap, กำรจดเปลยนส Button, เปลยน Font โดยใช

HTML, CSS และ JavaScript

- จดหนำ Responsive เพอใหใชงำนไดทงคอมพวเตอร, แทบเลตและโทรศพทมอถอ

18

รปท 3.5 หนำ FAQ ของเวบแอปพลเคชน Venio

หนำ FAQ เปนหนำเกยวกบค ำถำมทพบบอยในเวบแอปพลเคชน Venio ทจะบอกถงขอ

สงสยตำง ๆ ภำยใน Venio แอปพลเคชน

หนำทในกำรท ำงำนในสวน FAQ

- จดท ำสวนของ FAQ Page ทงหมด โดยกำรจด Layout ตำมทนกออกแบบไดออกแบบ

- วำง Content ตำง ๆ และใส Effect ในสวนของค ำถำม


19

รปท 3.6 หนำ Blog ของเวบแอปพลเคชน Venio ( ตวอยำง )

หนำ Blog โดยจะมขำวสำรตำง ๆ โดยในกำรสรำง Blog จะใช CMS Umbraco ในกำร

สรำง Blog สำมำรถเขำไปดตวอยำงเวบไดท https://www.teamvenio.com

หนำทในกำรท ำงำนในสวน Blog

- จดท ำสวนของ Blog Page ทงหมด โดยกำรจด Layout ตำมทนกออกแบบไดออกแบบ

- ท ำกำรศกษำ CMS Umbraco เพอใชงำนกบ Project Venio

- ท ำกำรวำง Layout Blog ตำม Template Design

- จดหนำ Responsive เพอใหใชงำนไดทงคอมพวเตอร, แทบเลต, โทรศพทมอถอ

- ท ำกำรใส Blog ของ Facebook

20

รปท 3.7 หนำ Home ของเวบแอปพลเคชน eTax Registration

หนำหลกของเวบแอปพลเคชน eTax Registration เปนหนำลงทะเบยนกำรเขำใชงำนของ

ระบบโดยจะตองม Code ของแตละบรษท

หนำทในกำรท ำงำนในสวน Home

- จดท ำสวนของ Home Page ทงหมด โดยกำรจด Layout ตำมทนกออกแบบไดออกแบบ


- ท ำกำรเขยนชดค ำสงเชอมตอกบฐำนขอมล

21

รปท 3.8 หนำ Info ของเวบแอปพลเคชน eTax

หนำ Info เปนหนำแสดงขอมลรำยชอผรบและสำมำรถเพมผรบได

หนำทในกำรท ำงำนในสวน Info สำมำรถเขำไปดตวอยำงไดท http://dev.tks.co.th/etax

- จดท ำสวนของ Info Page ทงหมด โดยกำรจด Layout ตำมทนกออกแบบไดออกแบบ


- ท ำกำรเขยนชดค ำสงเชอมตอกบฐำนขอมลโดยมกำรดงขอมลออกมำแสดงผล

- ท ำสวนของ Model เพมผรบ สำมำรถเพมขอมลไดและเกบลงฐำนขอมล

22

รปท 3.9 เขยนโปรแกรมเชอมตอกบไฟล.dbf

โปรแกรมส ำหรบน ำไฟลเขำหรอเปดไฟล dbf มำแสดงบนตำรำงตำมรป โดยม 2 วธคอกำร

เขยนดวยชดค ำสงเพอหำต ำแหนงของไฟลและกำร Import โดยกำรเลอกไฟล

หนำทในกำรท ำงำนในสวนของโปรแกรม

- สวนของ Form โปรแกรม

- สวนของกำรเขยนชดค ำสงในบำงสวน ไดแก กำรเขยนทอยไฟลโดยหำจำก Path ของไฟล

เปนตน

23

รปท 3.10 FG Movement ส ำหรบรบเขำขอมลคลง

Web Application ส ำหรบรบเขำขอมลคลงเปนหนำฟอรมในกำรน ำเขำขอมลสนคำ

สำมำรถเขำไปดไดท https://juno.tks.co.th/FGMovement

หนำทในกำรท ำงำนในสวนของ Web Application

- หนำ Form เขำสระบบ

- หนำ Form ส ำหรบรบขอมล

- กำรเชอม Service ทมให

24

รปท 3.11 ตดตอวดโอดวย Movavi

เปนงำนทไดรบมอบหมำยใหไปถำยภำพกจกรรม Let’s Grow Together และจดท ำตดตอ

วดโอใหแกบรษท

- ถำยภำพบรรยำกำศภำยในกจกรรม

- คดเลอกรปภำพจำกกจกรรม

- ตดตอวดโอ

25

รปท 3.12 IMC2

เปนกำรไดรบมอบหมำยใหท ำสวนของกำรจด Layout เปลยนสแทบและสรำงฟอรมหนำของ

กำรแลกเวลำกำรท ำงำนของระบบ IMC สำมำรถดตวอยำงไดท http://dev.tks.co.th/IMC2

- ท ำ Form ของหนำ Leave Exchange

- ท ำกำรเปลยนส Topbar , Sidebar

- จด Layout ของสวน Menu

3.5 ชอและต าแหนงงานของพนกงานทปรกษา นำยเดชำ เคนถำวร ต ำแหนง หวหนำแผนกพฒนำระบบ แผนกพฒนำระบบ ฝำยสำรสนเทศและพฒนำระบบ

3.6 ระยะเวลาทปฏบตงาน เขำมำปฏบตงำนท บรษท พรซม โซลชนส จ ำกด ตงแตวนท 14 พฤษภำคม พ.ศ. 2561 ถงวนท 31 สงหำคม พ.ศ. 2561 รวมเปนระยะเวลำ 4 เดอน

บทท 4 ผลการปฏบตงานตามโครงงาน

4.1 รายละเอยดของโครงงาน

เวบแอปพลเคชนสามารถใชงานไดทงบน Desktop , iPad และ Smartphone ชวยใหผใช

เกดความสะดวกตอการใช สวนมากในปจจบนมการใช Smartphone เปนชวตประจ าวนจงท าให

สามารถใชงานไดบนมอถอและยงมการเชอมตอกบฐานขอมลไวเกบขอมลผใชงาน

เวบแอปพลเคชนจะมการท างานโดยรบเรองการรองขอ Invoice จากลกคาของบรษท TKS

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

ตดตองานมความสะดวกยงขน โดยมหนาในการเขาสระบบใหกรอก Code ของแตละบรษทเพอเขา

ใชงานในระบบ เมอเขาสระบบจะแสดงขอมลชอบรษท, แสดงรายชอผรองขอของแตละคน และม

ฟงกชนเพมใหผใชไดกรอกขอมลมรายการงานทจะขอ Invoice

ในการพฒนาเวบแอปพลเคชนนใชโปรแกรม Microsoft Visual Studio 2017 ในการพฒนา

ระบบโดยใช Tool TFS Git Integration กบ Source Control บน Visual Studio, จดการฐานขอมล

ดวย Microsoft SQL Server 2017 ในการเกบขอมลตาง ๆ และใช Trello ในการประสานงาน

27

4.2 การท างานของระบบ 4.2.1 การวเคราะหระบบ

4.2.1.1 Work Flow Diagram

รปท 4.1 Work Flow Diagram ของระบบ eTax

4.2.1.2 Entity Relationship Diagram

รปท 4.2 Entity Relationship Diagram ของระบบ eTax

Login

28

4.2.1.3 Data Dictionary

ตารางท 4.1 รายละเอยดของตารางลกคา ( Customer ) Name Description Data type Length Key Reference CustomerId รหสลกคา int - PK - CompanyId รหสบรษท int - FK Company CustomerCode รหสของลกคา nvarchar 20 - - CustomerName ชอลกคา nvarchar 250 - - Address ทอย nvarchar 1000 - - TelNo เบอรตดตอ nvarchar 50 - - InviteCode รหสลงทะเบยน varchar 5 - -

ตารางท 4.2 รายละเอยดของตารางผรบ ( Recipient ) Name Description Data type Length Key Reference RecipientId รหสผรบ bigint - PK - CustomerId รหสลกคา int - FK Customer Email อเมล nvarchar 256 - - Fullname ชอ-สกลผรบ nvarchar 256 - - Position ต าแหนง nvarchar 256 - - TelNo เบอรตดตอ nvarchar 50 - - DateCreated วนทสราง datetime2 7 - - DateModified วนทเปลยนแปลง datetime2 7 - -

29

ตารางท 4.3 รายละเอยดของตารางบรษท ( Company ) Name Description Data type Length Key Reference ComapanyId รหสบรษท int - PK - CompanyCode รหสของลกคา nvarchar 20 - - CompanyName ชอลกคา nvarchar 250 - -

ตารางท 4.4 รายละเอยดของตารางรายการงาน ( Products ) Name Description Data type Length Key Reference

ProductId รหสงาน int - PK - CustomerId รหสลกคา int - FK - ProductCode รหสของงาน nvarchar 50 - - ProductName ชองาน nvarchar 256 - -

ตารางท 4.5 รายละเอยดของตารางรายการของผขอรบ ( RecipientProducts ) Name Description Data type Length Key Reference RecipientId รหสผรบ bigint - PK Recipient ProductId รหสงาน int - PK Products IsActive ใช / ไมใช bit - - -

30

Administrator

TKS Staff

4.2.1.4 Functional Requirement FR 1 ระบบสามารถท าการลงทะเบยนของลกคาได FR 2 ระบบสามารถแสดงชอบรษทและรายชอผขอรบ Invoice FR 3 ระบบสามารถเพมขอมลผขอรบ Invoice ได FR 4 ระบบสามารถเลอกรายการงานทจะขอรบได FR 5 ระบบสามารถหารายชอผขอรบได 4.2.1.4.1 Use Case Diagram

TKS’s Customer

31

4.2.1.4.2 ค าอธบาย Use Case

ตารางท 4.6 รายละเอยดของ Use Case : Register

Use Case Name Registration

Use Case ID UC1

Brief Descriptions การลงทะเบยนเขาใชงานระบบ

Primary Actors Administrator, TKS Staff, TKS’s Customer

Secondary Actors -

Preconditions -

Main Flow:

1. ยสเคสจะเกดขนเมอผใชเปดหนา Web eTax Registration

2. ระบบจะแสดงหนา Home และใหกรอก Code

3. ถาผใชท าการกรอก Code

3.1 เมอผใชท าการกรอก Code ถกตอง จะท าการเขาสระบบ

3.2 เมอผใชท าการกรอก Code ไมถกตอง ระบบกจะแจงเตอนใหกรอกขอมลใหถกตอง

Post Conditions ลงทะเบยนแลวจะสามารถเขาใชงานระบบได

Alternative Flows -

32

ตารางท 4.7 รายละเอยดของ Use Case : Invoice Info

Use Case Name Invoice Info

Use Case ID UC2

Brief Descriptions หนา Info แสดงขอมลชอบรษทและรายชอผรบ


Secondary Actors -

Preconditions จ าเปนตองกรอก Code เพอเขาใชงาน

Main Flow:

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

2. ระบบจะแสดงหนา Info โดยจะมรายละเอยดโดยมชอบรษท , ทอยและรายชอของผขอรบ

3. ระบบจะมปมตาง ๆ เพอท ารายการ

3.1 ถาผใชคลกปมเพมผรบ

3.1.1 ระบบจะเปดหนา Add ผรบขนมา

3.2 ถาผใชคลก Icon

3.1.2 ระบบจะท าการกลบไปยงหนาลงทะเบยน (Home)

Post Conditions -

Alternative Flows -

33

ตารางท 4.8 รายละเอยดของ Use Case : Add Recipient

Use Case Name Add Recipient

Use Case ID UC3

Brief Descriptions หนาใหกรอกขอมลของผรบ


Secondary Actors -

Preconditions -

Main Flow:

1. ยสเคสจะเกดขนเมอผใชคลกปมเพมผรบ

2. ระบบจะแสดงชองใหผกรอกขอมล

Post Conditions -

Alternative Flows -

34

ตารางท 4.9 รายละเอยดของ Use Case : Choose Product

Use Case Name Choose Product

Use Case ID UC4

Brief Descriptions เลอกรายการงาน


Secondary Actors -

Preconditions -

Main Flow:

1. ยสเคสจะเกดขนเมอผใชคลกปมเพมผรบ

2. เมอกรอกขอมลครบแลว

3. ท าการใหเลอกรายการงาน

3.1 จะใหเลอกรายการงาน สามารถเลอกไดมากกวา 1 งาน

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

Post Conditions เพมเสรจเรยบรอยจะกลบไปยงหนา Info

Alternative Flows -

35

ตารางท 4.10 รายละเอยดของ Use Case : Search

Use Case Name Search

Use Case ID UC5

Brief Descriptions เปนสวนของการคนหารายชอผทไดท าการเพมขอมล


Secondary Actors -

Preconditions -

Main Flow:

1. ยสเคสจะเกดขนเมอผใชอยในหนา Info

2. ระบบจะแสดงชอง Search

2.1 เมอผใชกรอกขอมลในชอง Search

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

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

Post Conditions -

Alternative Flows -

36

4.2.1.5 Require Traceability

ตารางท 4.11 แสดงความเปนไปไดทระบบสามารถตอบสนองความตองการทงหมด

Use Case

UC1 UC2 UC3 UC4 UC5

Requ

ireme

nt

FR1

FR2

FR3

FR4

FR5

37

4.2.1.6 Detailed System Design

Class Diagram

- cd eTax Registration - HomeController

- InfoController

- HomeViewModels

- InfoViewModels

รปท 4.3 Class Diagram

* *

* 1

1

1

1 1

38

4.2.2 การออกแบบสวนตดตอกบผใช

รปท 4.4 หนา Web eTax Registration ( Home )

หนาจอเรมตนของหนา Web eTax Registration เปนหนาจอส าหรบเขาสระบบและมการกรอก Code ของแตละบรษท โดยในการทจะเขาระบบนนจะม Validation ความถกตองของ Code ซงจะไปเชอมตอกบฐานขอมลในระบบเพอตรวจสอบในแตละบรษท แตถากรอกไมถกหรอไมครบนนกจะมการแจงเตอนขนมาภายใน Web เพอให User ไดกรอกขอมลไดถกตอง

39

รปท 4.5 หนาแสดงขอมลของผรบ ( Info )

เ มอเขาสระบบส าเรจกจะมาสหนา Info เปนหนาแสดงขอมลของผ รบโดยจะม รายละเอยด เชน CompanyName, Address , Contact Number , Email และสวนดานลางกจะเปนขอมลของผขอรบ Invoice โดยมรายละเอยดเชน Name , Position , Email , Phone Number เมอมการแสดงขอมลในสวนนกจะมชอง Search เพอหาชอหรอต าแหนงไดงายขนหนานกจะดงขอมลจากฐานขอมลของระบบทลกคาของบรษท TKS ได Add Data เขาไปมาแสดงตามรป

40

รปท 4.6 หนาในการเพมขอมลของ User ทจะขอรบ Invoice

ในสวนของหนา Add Recipient กจะมการเกบขอมลของ User ทจะตองกรอกขอมลของตวเองเพอทจะใหระบบไดบนทกไปยงฐานขอมล โดยจะมการตรวจสอบวาลกคา TKS ไดกรอกขอมลครบและถกตองหรอไมจะมการแจงเตอนขนเมอกรอกขอมลไมถกตองและในสวนของรายการงานกจะแบงตามงานของแตละบรษทโดยจะแตกตางกนโดยแตละทจะมรายการงานมากหรอนอยขนอยกบแตละบรษทหรออาจจะแสดงวาทกงาน คอหมายถงทกงานทบรษทนนเปดใหขอ Invoice

บทท 5 สรปผลและขอเสนอแนะ

5.1 สรปผลโครงงาน

5.1.1 สรปผลโครงงาน หลงจากทด าเนนโครงงานมาจนเสรจสนลงกสามารถท าตามวตถประสงคตามทตง

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

5.1.2 ขอจ ากดของโครงงาน

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

- การแกไขขอมลผรบ - การลบขอมลผรบ

5.1.3 ขอเสนอแนะ ในการพฒนาระบบตอไปควรมเพมฟงกชนการแกไขขอมลและการลบขอมล

เพอใหระบบไดมฟงกชนทครบแลวผใชงานกสามารถท าเองไดไมตองตดตอขอแกไขขอมลจากทางบรษท TKS

5.2 สรปผลการปฏบตงานสหกจศกษา

5.2.1 ขอดของการปฏบตงานสหกจศกษา - ไดรบประสบการณการท างานกบบรษทอยางเปนระบบ - ไดรบความรทางดานภาษาและดานเทคนค - ไดรบค าแนะน าทดและแนวคดการแกปญหา - รจกการเขาหาและปรบตวเขากบสงคมรอบตว - รจกมารยาทในการท างาน กฏระเบยบขององคกร

42

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

- ระบบการท างานเปนทม - ปญหาทางดานภาษาและดานเทคนค

5.2.3 ขอเสนอแนะ

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

43

บรรณานกรม

ดไซนนว. (2560). ความหมายของ ยเอก/ยไอ. เขาถงไดจาก https://www.designil.com/user-

experience-design.html

แตง ธานษา (2560. 7 ธนวาคม). ความหมายของ เทลโล [เวบบลอก]. เขาถงไดจาก https://bit.ly/2QXNTTQ

มานพ กองอน. (2559. 15 เมษายน) ความหมายของ บสแตก [เวบบลอก]. เขาถงไดจาก https://bit.ly/2JIUjS9

มายพเอชพ. (2560). ความหมายของ ไมโครซอฟท เอสควแอล เซรฟเวอร. เขาถงไดจาก https://bit.ly/2OnRJEx

ภาคน ภหนกอง. (2560. 16 กมภาพนธ) ความหมายของ กต [เวบบลอก]. เขาถงไดจาก https://bit.ly/2InuTfV

สรยพร องสภานช. (2558. 15 กรกฎาคม) ความหมายของ เอมวซ [เวบบลอก]. เขาถงไดจาก https://bit.ly/2zvLBom

แอดมน ไอทจเนย. (2557. 6 ตลาคม). ความหมายของ เอเอชพดอทเนต [เวบบลอก]. เขาถงไดจาก https://bit.ly/2Dxp3Yo

ภาคผนวก

45

ภาคผนวก ก. ภาพตวอยางขณะปฏบตงาน

รปท ก.1 อบรมเกยวกบการท างานเปนทม Agile and Scrum

46

รปท ก.2 ศกษาและปฏบตเกยวกบหลกการท างานเปนทม Agile and Scrum

47

ประวตผจดท ำ

Profile Student ID: 5804800005

Name: Wanchana

Surname: Saelue

Faculty: Science Major: Computer Science

Address: 225/198 Sinthavee Greenville 2, Phra Samut Chedi,

Ban Khlong Suan 10290

Documents

Customer Information Management System of TKS Company …e-research.siam.edu/wp-content/uploads/2019/03/Com... · 2019. 3. 10. · รูปที3.1่1 ตดัต่อวีดีโอด้วย