67
เว็บแอปพลิเคชันบริหารจัดการกิจการประมง กรณีศึกษา บ้านเรือโชคชัยสมบูรณ์ Web Application Management of Fisheries Case Study of ChokChaiSomBoon นางสาวแพรพลอย ทิมประเสริฐ 5704800001 นางสาวอภิษฐา สุนทรธงชัย 5704800048 ภาคนิพนธ์นี ้เป็นส่วนหนึ ่งของการศึกษาตามหลักสูตรปริญญาวิทยาศาสตรบัณฑิต ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยสยาม ปีการศึกษา 2560

Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

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

กรณศกษา บานเรอโชคชยสมบรณ

Web Application Management of Fisheries

Case Study of ChokChaiSomBoon

นางสาวแพรพลอย ทมประเสรฐ 5704800001

นางสาวอภษฐา สนทรธงชย 5704800048

ภาคนพนธนเปนสวนหนงของการศกษาตามหลกสตรปรญญาวทยาศาสตรบณฑต ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร

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

ปการศกษา 2560

Page 2: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง
Page 3: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

หวขอภาคนพนธ เวบแอปพลเคชนบรหารจดการกจการประมง

กรณศกษา บานเรอโชคชยสมบรณ

หนวยกตของภาคนพนธ 3 หนวยกต

รายชอคณะผจดท า นางสาวแพรพลอย ทมประเสรฐ 5704800001

นางสาวอภษฐา สนทรธงชย 5704800048

อาจารยทปรกษา อาจารยธนาภรณ รอดชวต

ระดบการศกษา วทยาศาสตรบณฑต

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

ปการศกษา 2560

บทคดยอ

ในปจจบนกจการประมงมหนวยงานตาง ๆ เขามาควบคมดแล ซงท าใหตองมการจดท าเอกสารตาง ๆ เพอจดสงใหแตละหนวยงาน ท าใหมความยงยากและซ าซอน ซงกจการประมง บานเรอโชคชยสมบรณ มขนตอนการด าเนนการจดท าเอกสารและค านวณคาจางตาง ๆ โดยการเขยนดวยลายมอและเกบเอกสารในรปแบบกระดาษ ท าใหบอยครงเกดขอผดพลาดในการท างาน อกท งขอมลทน ามาใชในการจดท าเอกสารสวนมากจะเปนขอมลซ า ๆ ท าใหผประกอบการจะตองเขยนขอมลเหลานนซ า ๆ ท าใหเกดความซ าซอนในการท างาน ดงนนทางคณะผจดท าและทางกจการประมง บานเรอโชคชยสมบรณ จงมแนวคดในการพฒนาเวบแอปพลเคชนบรหารจดการกจการประมง กรณศกษา บานเรอโชคชยสมบรณ เพออ านวยความสะดวกใหกบผประกอบการและลกจาง เพอลดการท างานทซ าซอนของผประกอบการ โดยเวบแอปพลเคชนบรหารจดการกจการประมง แบงการท างานออกเปน 3 สวนหลก ๆ ไดแก สวนของผดแลระบบเปนสวนทใชในการจดการบญชผใชงานและขอมลเรอ สวนของผประกอบการเปนสวนของการบนทกและค านวณคาจาง รวมไปถงการจดท ารายงานเอกสารเพอใชในการจดสงใหกบหนวยงาน และสวนของลกจาง จะสามารถดรายละเอยดสวนตว และรายละเอยดการเบกเงนของตนเองได โดยระบบชวยใหผใช ไดรบความสะดวกเพราะสามารถใชงานจากทใดกไดทมอนเทอรเนต โดยพฒนาระบบในรปแบบ ของเวบแอปพลเคชน โดยประยกตใชเทคโนโลย ท มในปจ จบน เพอใชในการพฒนาระบบไดอยางมประสทธภาพ ไดแก Web Service , MVC framework Core 2.0 , Database System ภาษาหลกทใชในการพฒนา ไดแก C# , HTML , CSS , Javascript และ SQL ค าส าคญ: กจการประมง/ บานเรอ โชคชยสมบรณ/ เวบแอปพลเคชน

Page 4: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

Project Title

Project Credits

Candidates

Advisor

Program

Field of study

B.E.

Web Application Management of Fisheries

A Case Study of ChokChaiSomBoon

3 Units

Miss Praeploy Timprasert 5704800001

Miss Apistha Suntontongchai 5704800048

Miss Thanapom Rodcheewit

Bachelor of Science

Computer Science

2017

'U

Abstract

owadays, fishery sector is regulated by several organizations, leading to the

documentations to submit necessary documents to other organizations that cause difficulties and

complexities. Chok Chai Somboon is a fishery enterprise that uses the manual process of

documentations and estimating wages. Documents are kept in paper form, leading to frequent

eJTors. Besides, data are mostly similar and repetitive so that an entrepreneur needs to write such

data repetitively, leading to work redundancy. Thus, the researchers and Chok Chai Somboon

initiated an idea to develop application to manage its fishery business and to facilitate an

entrepreneur and workers to reduce redundant tasks. The develop application could be divided

into three major parts including admin, user account management and entrepreneur regarding

recoding and estimating wages, preparing rep01is and documents to be submitted to other

organizations. Lastly, worker section is involved with considering personal profile and details of

worker's withdrawal. This system assists and facilitate the user because it can be used any place

connected to Internet. It is developed through web application fonn by applying cuITent

technology for efficient functions including W e b Service , M V C framework Core 2 . 0 ,

Database System. C# , HTML , CSS , Javascript and SQL are major programming languages

used to develop this system.

Keywords: Fishery Business/ Chok Chai Somboon/ Web Application

Page 5: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

กตตกรรมประกาศ (Acknowledgement)

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

1. อาจารยธนาภรณ รอดชวต อาจารยทปรกษา

2. นายพชย สนทรธงชย เจาของกจการ

3. นายณฐสทธ ค าฉ า ผชวยใหค าปรกษา

คณะผจดท าขอขอบคณคณะกรรมการการสอบภาคนพนธ ทไดใหค าแนะน าทส าคญใน

การสอบภาคนพนธฉบบน และ ผมสวนรวมทกทาน รวมทงผทไมไดกลาวนาม ทมสวนรวมในการ

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

ความส าเรจไปดวยด

ทายสดน คณะผจดท าภาคนพนธขอกราบขอบพระคณบดา มารดา ทไดใหการสนบสนน

สงเสรมทงก าลงทรพยและก าลงใจตลอดมาจนส าเรจการศกษา

คณะผจดท า

นางสาวแพรพลอย ทมประเสรฐ นางสาวอภษฐา สนทรธงชย

Page 6: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

สารบญ

หนา

บทคดยอ ................................................................................................................................................. ก Abstract................................................................................................................................................... ข กตตกรรมประกาศ(Acknowledgment) ................................................................................................. ค บทท 1 บทน า...........................................................................................................................................1

1.1 ทมาและความส าคญ .................................................................................................................1 1.2 วตถประสงค..............................................................................................................................2 1.3 ขอบเขตของภาคนพนธ ............................................................................................................2 1.4 ขนตอนและวธการด าเนนภาคนพนธ ......................................................................................3 1.5 ประโยชนทคาดวาจะไดรบ ......................................................................................................4 1.6 แผนและระยะเวลาในการด าเนนงานภาคนพนธ ....................................................................4 1.7 อปกรณและเครองมอทใชในการพฒนาระบบ........................................................................5 1.8 อปกรณและเครองมอทรองรบระบบ .......................................................................................5

บทท 2 ทฤษฎและแนวคดทเก ยวของ ....................................................................................................6 2.1 เทคโนโลยเวบแอปพลเคชน.....................................................................................................6 2.2 Database ....................................................................................................................................7 2.3 HTML (Hypertext Markup Language) ...................................................................................8 2.4 CSS (Cascading Style Sheet) ...................................................................................................8 2.5 JavaScript ..................................................................................................................................8 2.6 MVC ..........................................................................................................................................9 2.7 SQL Server................................................................................................................................9

บทท 3 วเคราะหและออกแบบระบบ ...................................................................................................10 3.1 วเคราะหระบบงานปจจบน (As-Is System Analysis) ..........................................................10 3.2 วเคราะหระบบงานใหม (New System Analysis) .................................................................12 3.3 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram ................................................14 3.4 Use case Description ..............................................................................................................15 3.5 Sequence Diagram ..................................................................................................................29 3.6 Class Diagram .........................................................................................................................34 3.7 ความสมพนธระหวางเอนทต (Entity Relationship Diagram) .............................................35

Page 7: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

สารบญ (ตอ)

หนา บทท 4 การออกแบบทางกายภาพ ........................................................................................................36

4.1 การออกแบบฐานขอมล ..........................................................................................................36 4.2 การออกแบบผงของเวบไซต (Site Map) ...............................................................................41 4.3 รายละเอยดโครงสรางของเวบไซต ........................................................................................42 4.4 การออกแบบสวนตดตอกบผใช .............................................................................................43

บทท 5 สรปผลและขอเสนอแนะ .........................................................................................................55 5.1 สรปผลภาคนพนธ ..................................................................................................................55 5.2 ขอดของระบบ .........................................................................................................................55 5.3 ขอจ ากดของระบบ ..................................................................................................................55 5.4 ขอเสนอแนะ............................................................................................................................56

Page 8: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

สารบญตาราง

หนา

ตารางท 1.1 แสดงแผนระยะเวลาในการด าเนนงานภาคนพนธ ............................................................4 ตารางท 3.1 รายละเอยดของ Use Case : Login ...................................................................................15 ตารางท 3.2 รายละเอยดของ Use Case : EditAccount ........................................................................16 ตารางท 3.3 รายละเอยดของ Use Case : ViewSalaryDetail ...............................................................17 ตารางท 3.4 รายละเอยดของ Use Case : AddUserAccount................................................................18 ตารางท 3.5 รายละเอยดของ Use Case : AddShipAccount ................................................................19 ตารางท 3.6 รายละเอยดของ Use Case : EditShipAccount ................................................................20 ตารางท 3.7 รายละเอยดของ Use Case : AddOwnerAccount ............................................................21 ตารางท 3.8 รายละเอยดของ Use Case : EditOwnerAccount ............................................................22 ตารางท 3.9 รายละเอยดของ Use Case : AddEmployeeAccount.......................................................23 ตารางท 3.10 รายละเอยดของ Use Case : EditEmployeeAccount .....................................................24 ตารางท 3.11 รายละเอยดของ Use Case : AddPaySalaryList ............................................................25 ตารางท 3.12 รายละเอยดของ Use Case : ViewPaySalaryDetail.......................................................26 ตารางท 3.13 รายละเอยดของ Use Case : CalculateSalary ................................................................27 ตารางท 3.14 รายละเอยดของ Use Case : CreateReport ....................................................................28 ตารางท 4.1 รายละเอยดของ Table Address........................................................................................36 ตารางท 4.2 รายละเอยดของ Table Calculate .....................................................................................36 ตารางท 4.3 รายละเอยดของ Table DocType ......................................................................................37 ตารางท 4.4 รายละเอยดของ Table PaySalary ....................................................................................37 ตารางท 4.5 รายละเอยดของ Table Employee ....................................................................................38 ตารางท 4.6 รายละเอยดของ Table Owner ..........................................................................................39 ตารางท 4.7 รายละเอยดของ Table UserAccount ...............................................................................39 ตารางท 4.8 รายละเอยดของ Table Ship..............................................................................................40 ตารางท 4.9 แสดงรายละเอยดโครงสรางเวบไซต ...............................................................................42

Page 9: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

สารบญรปภาพ

หนา

รปท 2.1 การท างานของ Model View Controller .................................................................................9 รปท 3.1 Work Flow Diagram ของระบบงานปจจบน .......................................................................11 รปท 3.2 Work Flow Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง .......................... 13 รปท 3.3 Use Case Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง ............................. 14 รปท 3.4 Sequence Diagram : Login .................................................................................................. 29 รปท 3.5 Sequence Diagram : AddAccount ....................................................................................... 30 รปท 3.6 Sequence Diagram : AddPaySalaryList .............................................................................. 30 รปท 3.7 Sequence Diagram : AddUser ............................................................................................. 31 รปท 3.8 Sequence Diagram : CalculateSalary .................................................................................. 31 รปท 3.9 Sequence Diagram : CreateReport ...................................................................................... 32 รปท 3.10 Sequence Diagram : EditAccount ..................................................................................... 32 รปท 3.11 Sequence Diagram : ViewSalaryDetail ............................................................................ 33 รปท 3.12 Class Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง .................................. 34 รปท 3.13 Entity Relationship Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง .......... 35 รปท 4.1 แผนผงแสดงโครงสรางเวบไซต ของเวบแอปพลเคชนบรหารจดการกจการประมง ....... 41 รปท 4.2 รายละเอยดโครงสรางของเวบไซต ...................................................................................... 42 รปท 4.3 หนาแรกของเวบไซต ............................................................................................................ 43 รปท 4.4 หนาจอเขาสระบบ ................................................................................................................. 44 รปท 4.5 หนาจอแสดงรายชอลกจาง ................................................................................................... 44 รปท 4.6 หนาจอแสดงรายละเอยดการเบกเงนของลกจาง ................................................................. 45 รปท 4.7 หนาจอส าหรบแกไขวนทเรมท างาน.................................................................................... 45 รปท 4.8 หนาจอส าหรบค านวณเงนรายไดของลกจาง ....................................................................... 46 รปท 4.9 หนาจอส าหรบออกรายงาน .................................................................................................. 47 รปท 4.10 หนาจอส าหรบบนทกรายการเบกเงน ................................................................................ 47 รปท 4.11 หนาจอส าหรบเพมผใช ....................................................................................................... 48 รปท 4.12 หนาจอส าหรบเพมลกจาง................................................................................................... 49 รปท 4.13 หนาจอเพมลายเซนชอ ........................................................................................................ 50 รปท 4.14 หนาจอส าหรบเพมเจาของ.................................................................................................. 50 รปท 4.15 หนาจอส าหรบเพมขอมลเรอ .............................................................................................. 51

Page 10: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

สารบญรปภาพ (ตอ)

หนา รปท 4.16 หนาจอส าหรบแกไขขอมลลกจาง ..................................................................................... 52 รปท 4.17 หนาจอส าหรบแกไขขอมลเจาของ .................................................................................... 52 รปท 4.18 หนาจอส าหรบแกไขขอมลผดแลระบบ ............................................................................ 53 รปท 4.19 หนาจอส าหรบแกไขขอมลเรอ ........................................................................................... 53 รปท 4.20 หนาจอแสดงรายละเอยดการเบกเงนในสวนของลกจาง .................................................. 54 รปท 4.21 หนาจอส าหรบแกไขขอมลสวนตวของลกจาง .................................................................. 54

Page 11: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

1

บทท 1 บทน ำ

1.1 ทมำและควำมส ำคญ

ในปจจบนการด าเนนกจการประมงบานเรอโชคชยสมบรณ เปนกจการเก ยวกบการจบสตวน าจากทะเลซงเปนทรพยากรทางธรรมชาต จงท าใหตองมการควบคมจากหนวยงานของรฐบาลเพอใหเกดความเปนระเบยบและเพอการท าประมงอยางย งยน ทางเจาของกจการประมงจงจ าเปนจะตองมการจดท าเอกสารตาง ๆ ตามทกฎหมายก าหนด ไมวาจะเปนเอกสารสญญาจาง เอกสารทะเบยนลกจาง เอกสารยนยนการเบกเงน เปนตน ซงเอกสารเหลานมการเปลยนแปลงอยบอยครง ตามการเปลยนแปลงของลกจาง และเอกสารเหลานลวนมความจ าเปนส าหรบการสงใหกบทางหนวยงานตาง ๆ ของรฐบาล ซงทกครงทมการเปลยนแปลงทางเจาของกจการจ าเปนจะตองจดท าเอกสารเหลานนใหมเพอน าไปสงใหกบหนวยงานตาง ๆ ซงในปจจบนพบวาใชวธการเขยนดวยลายมอ ท าใหการความซ าซอนในการท างานและมความลาชา บางครงมขอผดพลาดอยมากทงในการเขยนเอกสาร ลายมอ และการค านวณรายไดของลกจางซงมความซบซอนแตกตางกบกจการประเภทอน

เนองจากปญหาทกลาวมาขางตน ทางคณะผจดท าจงมแนวคดทจะพฒนาเวบแอปพลเคชนทสามารถจดเกบขอมลของเรอประมงและลกจาง รวมถงขอมลการเบกเงนของลกจางในแตละครงซงจะมการเกบลายเซนของลกจางในรปแบบอเลกทรอนกสเพอเปนการยนยนการเบกเงน ซงขอมลเหลานจะน ามาใชในการค านวณรายได และใชในการจดท าเอกสารตาง ๆ ซงเอกสารทจดท าจะอยในรปแบบไฟลทมนามสกลเปน . pdf ท าให งายตอการน าไปใชงาน เพราะในปจจบนบางหนวยงานยอมรบการสงเอกสารทเปนไฟล .pdf ท าใหชวยลดตนทนคาใชจายในการจดพมพเอกสารของเจาของกจการอกดวย

โดยเวบแอปพลเคชนนจะชวยลดขนตอนการท างานทซ าซอนของเจาของกจการ ชวยลดเวลาในการท างานและโอกาสทจะเกดความผดพลาดของการจดท าเอกสาร และลกจางกสามารถเขาใชเวบแอปพลเคชนเพอดรายละเอยดการเบกเงนของตนเองได โดยประยกตใชเทคโนโลยทมในปจจบน เพอใชในการพฒนาระบบไดอยางมประสทธภาพ ไดแก Web Service , MVC framework Core 2.0 , Database System ภาษาหลกทใชในการพฒนา ไดแก C# , HTML , CSS , Javascript และ SQL

Page 12: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

2

1.2 วตถประสงค

เพอพฒนาเวบแอปพลเคชนบรหารจดการกจการประมง กรณศกษา บานเรอโชคชยสมบรณ

1.3 ขอบเขตของภำคนพนธ พฒนาในรปแบบ Web Application แบงการท างานออกเปน 2 สวนคอสวนของผใชงาน

(User) และผดแลระบบ (Administrator) โดยสวนของผใชงานน น แบงการใชงานออกเปน สวนของเจาของกจการ และ สวนของลกจาง โดยแบงการท างานดงน

1.3.1 ผดแลระบบ (Administrator) 1.3.1.1 สามารถสราง User ใหกบเจาของกจการและลกจางได 1.3.1.2 สามารถจดการขอมลเก ยวกบขอมลเรอและขอมลลกจางได 1.3.1 ผใชงาน (User) 1.3.1.1 เจาของกจการ

1.3.1.1.1 สามารถจดการกบขอมลหลกได ไดแก ขอมลลกจาง , ขอมลเรอ, ขอมลการเบกเงน เปนตน 1.3.1.1.2 สามารถบนทกการเบกเงนของลกจางได 1.3.1.1.3 สามารถค านวณรายไดของลกจางได 1.3.1.1.4 สามารถจดท ารายงานเอกสารทตองการได ประกอบดวย

- สญญาจางลกจางในงานประมงทะเล (แบบ ปม. 1) - แบบจดเวลาพกของลกจางในงานประมงทะเล (แบบ ปม. 2) - ทะเบยนลกจางในงานประมงทะเล (แบบ ปม.3) - แบบรายงานตวลกจางในงานประมงทะเล (แบบ ปม. 4) - เอกสารการจายคาจาง คาท างานในวนหยด ตาม กฎกระทรวงคมครองแรงงานในงานประมงทะเล 1.3.1.2 ลกจาง

1.3.1.2.1 สามารถดรายละเอยดการเบกเงนของตนเองได 1.3.1.2.2 สามารถดขอมลสวนตวของตนเองได

Page 13: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

3

1.4 ขนตอนและวธกำรด ำเนนภำคนพนธ

1.4.1 กำรศกษำระบบงำนปจจบนและรวบรวมขอมล (Data Collection) เกบความตองการของเจาของกจการและรวบรวมเอกสารตาง ๆ ทใชในการ

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

1.4.2 กำรวเครำะหระบบ (System Analysis)

เมอศกษาความเปนไปไดของระบบงานและรวบรวมขอมลทงหมดแลว น ามาวเคราะหแผนภาพแสดงล าดบข นตอนการท างานของระบบงานปจจบนและระบบงานใหม (Work Flow Diagram) , แบบจ าลองการอธบายโครงสรางและความสมพนธของขอมล (Entity-Relationship Diagram) , แผนภาพทใชแสดง Class และความสมพนธ (Class Diagram) , แผนผงการท างานแบบล าดบปฏสมพนธ (Sequence Diagram) , แผนภาพทแสดงการท างานของผใชระบบ (Use Case Diagram)

1.4.3 กำรออกแบบระบบ (System Design)

1.4.3.1 ออกแบบสถาปตยกรรม (Architecture Design) พฒนาโปรแกรมเปนระบบโด ย เล อก ใชส ถ า ป ต ย กรรมไค ล เอน ท / เซ รฟ เว อ ร (Client/Server Architecture) และเวบแอปพลเคชน (Web application)

1.4.3.2 ออกแบบฐานขอมล (Database Design) โดยใชสถาปตยกรรมฐานขอมลเชงสมพนธ (Relation Database)

1.4.3.3 ออกแบ บ ส วน ตด ต อ ผ ใช (User Interface Design)โดยยด ห ลก GUI (Graphical User-Interface) เพอใหผใชสามารถใชงาน ระบบไดงาย และ UX (User experience design) เปนการออกแบบเพอใหผใชสามารถใชงานไดงายมากขน โทนสทใชในการออกแบบเนนใชโทนสแบบ Flat Design color เปนโทนสสบายตาไมฉดฉาด

1.4.4 กำรพฒนำระบบ (System Development)

น ารายละเอยดทไดออกแบบไวมาพฒนา โดยในสวนของ Web Application ใชภาษา HTML, CSS, JavaScript ในการพฒนา และในสวนของการจดการขอมลในฐานขอมลใช Microsoft SQL Server

Page 14: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

4

1.4.5 กำรทดสอบระบบ (System Testing)

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

1.4.6 กำรจดท ำเอกสำรประกอบกำรใชงำนระบบ (System Documentation)

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

1.5 ประโยชนทคำดวำจะไดรบ 1.5.1 สามารถลดขนตอนการท างานของเจาของกจการ 1.5.2 ลกจางสามารถตรวจสอบรายการเบกเงนของตนเองได 1.5.3 สามารถตรวจสอบขอมลรายงานตาง ๆ ยอนหลงได

1.6 แผนและระยะเวลำในกำรด ำเนนงำนภำคนพนธ

ตารางท 1.1 แสดงแผนระยะเวลาในการด าเนนงานภาคนพนธ

ขนตอนกำร

ด ำเนนงำน

2560 2561

ต.ค. พ.ย. ธ.ค. ม.ค. ก.พ. ม.ค. เม.ย. พ.ค.

1. การศกษาระบบงานปจจบนและรวบรวมขอมล

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

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

4. การพฒนาระบบ

5. การทดสอบระบบ

6. การจดท าเอกสารประกอบการใชงาน

Page 15: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

5

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

1.7.1 ฮำรดแวร (Hardware) 1.7.1.1 เครองคอมพวเตอรโนตบก Asus FX553vd

Intel Core i7-7700HQ NVIDIA GeForce GTX 1050 (4GB GDDR5) 1.7.1.2 เครองคอมพวเตอร MacBook Pro (13-inch, Mid 2012) Processer 2.5 GHz

Intel Core i5 Memory 16 GB 1600 MHz DDR3 1.7.2 ซอฟตแวร (Software)

1.7.2.1 ระบบปฏบตการ Microsoft Windows10 1.7.2.2 โปรแกรม SOL Server 2017 1.7.2.3 โปรแกรม Web Browser Firefox 1.7.2.4 โปรแกรม Visual Studio 2017 1.7.2.5 โปรแกรม Adobe Illustrator CC 1.7.2.6 โปรแกรม Adobe Photoshop CC 1.7.2.7 โปรแกรม Atom Text Editor

1.8 อปกรณและเครองมอทรองรบระบบ

1.8.1 ฮำรดแวร (Hardware) 1.8.1.1 คอมพวเตอรระบบปฏบตการ Window 7 1.8.1.2 คอมพวเตอรระบบปฏบตการ OS X 1.8.1.3 คอมพวเตอรระบบปฏบตการ Linux 1.8.1.4 โทรศพทมอถอสมารทโฟนและแทบเลต Android Version 4.0+

1.8.2 ซอฟตแวร (Software)

1.8.2.1 ระบบปฏบตการ Microsoft Windows7 Home 1.8.2.2 โป รแ กรม Web Browser Google Chrome, Firefox, Internet Explorer,

Opera

Page 16: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

บทท 2

ทฤษฎและแนวคดทเกยวของ

2.1 เทคโนโลยเวบแอปพลเคชน1 เวบแอปพลเคชน คอ โปรแกรมประยกตบนเวบ หรอเรยกโดยทบศพทวา เวบแอปพลเคชน (องกฤษ: web application) คอ Application (แอปพลเคชน) ทถกเขยนขนมา เพอเปน Browser (เบราวเซอร) ส าหรบการใชงาน Webpage (เวบเพจ) ตาง ๆ ซงถกปรบแตงใหแสดงผลแตสวนทจ าเปน เพอเปนการลดทรพยากรในการประมวลผล ของตวเครองสมารทโฟน หรอ แทบเลต ท าใหโหลดหนาเวบไซตไดเรวขน อกท งผใชงานยงสามารถใชงานผาน Internet (อนเทอรเนต)และ Intranet (อนทราเนต) ในความเรวต าได ซงเหมาะส าหรบการน ามาใชพฒนาระบบใหกบกจการประมง บานเรอโชคชยสมบรณ

ลกษณะการท างานของ Web Application ฝงเซรฟเวอรจะประกอบไปดวยเวบเซรฟเวอรซงท าหนาทเชอมตอกบไคลเอนต

ตามโปรโตคอล HTTP/ HTTPS โดยนอกจากเวบเซรฟเวอรจะท าหนาทสงไฟลทเก ยวเนองกบการแสดงผลตามมาตรฐาน HTTP ตามปกตทวไปแลว เวบเซรฟเวอรจะมสวนประมวลผลซงอาจจะเปนตวแปลภาษา เชน Script Engine ของภาษา PHP หรออาจจะมการตดต ง .NET Framework ซงมสวนแปลภาษา CLR (Common Language Runtime) ทใชแปลภาษา intermediate จากโคดทเขยนดวย VB.NET หรอ C#.NET หรออาจจะเปน J2EE ทมสวนแปลไบตโคดของคลาสทไดจากโปรแกรมภาษาจาวา เปนตน

การท างานของเวบแอปพลเคชนนน ประกอบไปดวยหลายสวนท างานรวมกน ซงสวนประกอบในการท างานสามารถแยกออกเปนสองสวน คอ เทคโนโลยในฝงของผใชงาน และเทคโนโลยในฝงของเซรฟเวอร โดยเทคโนโลยในฝงของผใชงานทส าคญคอ Web Browser และ Plugin ทท าหนาทในการอ านวยความสะดวกใหกบผ ใชงานในการทองเวบไซต ในสวนของเซรฟเวอร ซงมหนาทในการใหบรการเวบแอพพลเคชนใหกบผ ใชงาน ประกอบไปดวยเวบแอปพลเคชน ซงอาจจะเปนไฟลขอมลธรรมดา หรอโปรแกรมทท าหนาทในการใหบรการผใชงาน Web Server Software ทท าหนาทในการรบ HTTP Request จากผใชงานประมวลผล HTTP Request และสงกลบ HTTP Response ใหกบผใชงาน

1 http://aicomputer.co.th/sArticle

Page 17: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

7

ขอดของ Web Application - เหมาะกบองคกรขนาดเลกเพราะมคาใชจายต ากวา (หลายตวฟร) และคดคาใชจายตาม

จ านวนการใชงานจรง - การใชงานในองคกรท าไดงาย เพยงแคมเวบบราวเซอรซงเปนสงพนฐานในคอมพวเตอร

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

บ ารงรกษาเองทงหมด - สวนมากใชไดหลากหลาย Platform ทง Windows, Linux และ Mac ท าใหองคกรสามารถ

เลอกใชบางเครองเปน Linux ไดเพอลดคาใชจายดานลขสทธ - เชอมตอกบเวบแอปพลเคชนหรอบรการออนไลนอน ๆ ไดงาย

ขอเสยของ Web Application - รปรางหนาตา และการใชงานมไดจ ากด อาจไมเหมาะกบงานบางประเภททตองการ

รปแบบโปรแกรมทแตกตางจากโปรแกรม ทวไปเชน โปรแกรมตกแตงรป โปรแกรมตดตอวดโอ

- เวบแอปพลเคชนหลาย ๆ ตวตองการอนเตอรเนตในการใชงานเสมอ (มบางตวทสามารถท างานออฟไลนไดดวยเชน Gmail)

2.2 Database2

ฐานขอมล คอขอมลทมความสมพนธกนน ามาเกบรวบรวมไวดวยกนอยางมระบบ ท าใหผใชงานสามารถใชขอมลทเก ยวของในระบบงานตาง ๆ รวมกนได โดยทจะไมเกดความซ าซอนของขอมล และยงสามารถหลกเลยงความขดแยงของขอมลดวย อกทงขอมลในระบบกจะถกตองเชอถอได และเปนมาตรฐานเดยวกน โดยจะมการก าหนดระบบความปลอดภยของขอมล ซงสามารถสบคน (retrieval) แกไข (modified) ปรบปรงเปลยนแปลงโครงสราง ขอมล (update) และจดเรยง (sort) ไดสะดวกขนโดยในการกระท าการดงทกลาวมาแลว ตองอาศยซอฟตแวรประยกตส าหรบจดการฐานขอมล โดยเวบแอปพลเคชนทจดท าไดเลอกใชฐานขอมลของ Microsoft SQL Server

2 http://www.mindphp.com

Page 18: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

8

2.3 HTML (Hypertext Markup Language)3 HTML คอ ภาษาหลกทใชในการเขยนเวบเพจ โดยใช Tag ในการก าหนดการแสดงผล ซง HTML ยอมาจากค าวา Hypertext Markup Language โดย Hypertext หมายถง ขอความทเชอมตอกนผานลงก (Hyperlink) Markup language หมายถงภาษาทใช Tag ในการก าหนดการแสดงผลสงตาง ๆ ทแสดงอยบนเวบเพจ ดงนน HTML จงหมายถง ภาษาทใช Tag ในการก าหนดการแสดงผลเวบเพจทตางกเชอมถงกนใน Hyperspace ผาน Hyperlink โดยสามารถเรยกดผานทาง Web Browser และ Tag ยงสามารถระบหรอควบคมการแสดงผลของเวบใหเปนไปตามทผ ใชงานออกแบบเวบไซตก าหนดไวได ซงน ามาใชในการออกแบบ User Interface ของเวบแอปพลเคชนทงหมด 2.4 CSS (Cascading Style Sheet)4 CSS คอ Cascading Style Sheet หรอ Style sheet ทใชก าหนดรปแบบหนาตาของไฟล HTML โดยคณสมบตของ CSS จะมคณสมบต Cascading คอ ค าสงทอยบนสดจะมล าดบส าคญสงกวาค าสงดานลางเสมอ CSS สามารถใชก าหนดรปแบบ Font ส ฉากหลงและอน ๆ ทแสดงบนหนาเวบไซตทงหมด การใช CSS มท งแบบภายใน และภายนอก กลาวคอสามารถเขยน CSS ไวในไฟล HTML เลยหรอแยกเปนไฟล Style Sheet ตางหากแลวเรยกใชภายหลงกได 2.5 JavaScript5 JavaScript คอ ภาษาคอมพวเตอรส าหรบการเขยนโปรแกรมบนระบบอนเทอรเนตทก าลงไดรบความนยม JavaScript เปนภาษาสครปตเชงวตถซงในการสรางและพฒนาเวบไซต (ใชรวมกบ HTML) เพอใหเวบไซตของเราดมการเคลอนไหว สามารถตอบสนองผใชงานไดมากขน ซงมวธการท างานในลกษณะแปลความและด าเนนงานไปทละค าสงหรอเรยกวา Object Oriented ทมเปาหมายในการออกแบบและพฒนาโปรแกรมในระบบอนเทอรเนตส าหรบผเขยนดวยภาษา HTML สามารถท างานขามแพลตฟอรมไดโดยท างานรวมกบภาษา HTML และภาษา Java ไดท งทางฝงไคลเอนต (Client) และทางฝงเครองแมขาย (Server) สามารถท าใหการสรางเวบเพจมลกเลนตาง ๆ มากมายและยงสามารถโตตอบกบผใชไดอยางทนท เชนการใชเมาสคลกหรอการกรอกขอความใน Form เปนตน น ามาใชในการตรวจสอบขอความทกรอกใน Form

3 http://www.codingbasic.com/html.html 4 http://www.codingbasic.com/css.html 5 http://www.mindphp.com

Page 19: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

9

2.6 MVC6 MVC เปรยบเสมอนมาตรฐาน ในการแยกแตละสวนของโปรแกรมออกมาเปน Object ซงแบงออกเปน 3 สวน คอ Model, View และ Controller Model คอ สวนทใชท างานกบ ขอมลดบ ๆ จะท างานเมอ Controller ตองการขอมล Model กจะดงขอมลสงไปให Controller ไปจดการเหมอนกบ บรรณารกษ ทคอยเฝา , จดเรยง และสามารถคนหาหนงสอ ท ตองการได Views คอ หนาตาของโปรแกรม ซงเรยกวา User Interface เปนสวนทใชตดตอกบผใช Controller คอ สมองของโปรแกรม โดยสวนนท าหนาทในการจดการโปรแกรม เชนการประมวลผล หรอรบขอมล เปนตน และเปนสวนทจะเกบ Logic ของโปรแกรมไว

รปท 2.1 การท างานของ Model View Controller 2.7 SQL Server7 SQL Server หรอ Microsoft SQL Server คอระบบจดการฐานขอมลเชงสมพนธ (relational database management system หรอ RDBMS) ผลตโดยบรษท Microsoft เปนระบบฐานขอมลแบบ Client/Server และรนอยบน Window NT ซงใชภาษา T-SQL ในการดงเรยกขอมล ดวยเหตทขอมลสวนใหญทวโลกเกบไวในเครองทใช Microsoft Windows เปน Operating System จงท า ใหเปนการงายตอ Microsoft SQL ทจะน า ขอมลทอยในรป Windows Based มาเกบและประมวลผล และ ประกอบกบการทราคาถกและหางาย จงเปนปจจยหลกทท า ให Microsoft SQL จงเปนระบบฐานขอมลทมกจะถกเลอกใช

6 https://arnondora.in.th/what-is-mvc/ 7 https://www.9experttraining.com/articles

Page 20: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

10

บทท 3

วเคราะหและออกแบบระบบ

3.1 วเคราะหระบบงานปจจบน (As-Is System Analysis)

ปจจบนการจดท าเอกสารตาง ๆ ตองจดท าขนเองดวยการเขยนดวยลายมอโดยจะมการท างานทซ าซอนเพราะเปนการเขยนขอมลซ า ๆ อกท งการค านวณคาจางของลกจางยงคงเปนแบบการค านวณมอซงยงมขอผดพลาดอยมาก และเมอลกจางตองการทราบรายละเอยดการเบกเงนของตนเองจ าเปนตองมาสอบถามกบนายจางโดยตรงเทานน

3.1.1 ปญหาทพบในระบบงานปจจบน

3.1.1.1. ตองเขยนเอกสารซ า ๆ เพอน าไปยนใหกบหนวยงานตาง ๆ 3.1.1.2. เมอมการเบกเงนตองจดบนทกลงกระดาษบอยครงทช ารดสญหาย 3.1.1.3. เมอลกจางตองการทราบรายละเอยดการเบกเงนตองมาสอบถามกบนายจาง

แลวนายจางจงจะค านวณคาจางใหจงเกดความลาชา 3.1.1.4. การค านวณคาจางมโอกาสทจะผดพลาดสง

3.1.2 แนวทางแกไขปญหา

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

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

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

Page 21: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

11

3.1.3 ขนตอนการท างานของระบบงานปจจบน (Work Flow Diagram As-Is System)

รปท 3.1 Work Flow Diagram ของระบบงานปจจบน

Page 22: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

12

3.2 วเคราะหระบบงานใหม (New System Analysis)

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

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

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

3.2.3 สวนของลกจาง

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

Page 23: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

13

3.2.3 ขนตอนการท างานของระบบงานใหม (Work Flow Diagram New System)

รปท 3.2 Work Flow Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง กรณศกษา บานเรอโชคชยสมบรณ

Page 24: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

14

3.3 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram

รปท 3.3 Use Case Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง กรณศกษา บานเรอ

โชคชยสมบรณ

Page 25: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

15

3.4 Use case description

ตารางท 3.1 รายละเอยดของ Use Case : Login

Use Case No UC001 Use Case Name Login Actor(s) User (Owner , Admin , Employee) Description เขาสระบบโดยการกรอกขอมล Username และ Password Pre-Conditions ผใชงานจ าเปนจะตองมบญชผใชกอนจงจะสามารถเขาสระบบได Post-Conditions เขาสระบบส าเรจสามารถใชงานระบบได Flow of Event 1. Use Case จะเรมเมอผใชงานตองการทจะเขาสระบบ

2. ผใชงานท าการกรอกขอมล Username และ Password 3. ระบบท าการตรวจสอบ Username และ Password จากฐานขอมล

3.1 ขอมลผใชและรหสผานทตรงกนอยในฐานขอมล - ระบบไปยงหนาหลกเพอเลอกเมนและท างานตอไป

3.2 ขอมลชอผใชและรหสผานไมตรงกบฐานขอมล - ระบบแสดง Dialog แจงเตอนวา ไมสามารถเขาสระบบได

เนองจากชอผใชหรอรหสผานไมถกตอง

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครง ภายหลง”

Page 26: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

16

ตารางท 3.2 รายละเอยดของ Use Case : EditAccount

Use Case No UC002 Use Case Name EditAccount Actor(s) User (Owner , Admin , Employee) Description แกไขขอมลสวนตวและบญชของตนเอง Pre-Conditions ผใชงานจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและตรวจสอบ

สทธการใชงาน Post-Conditions ขอมลสวนตวและบญชของผใชงานถกแกไขตามความตองการ Flow of Event 1. Use Case จะเรมเมอผใชงานตองการแกไขขอมลสวนตวและบญช

ของตนเอง 2. ผใชงานเลอกเมน Edit 3. ผใชงานพมพขอมลทตองการแกไข 4. ผใชงานเลอกเมนบนทก 5. ระบบจะท าการบนทกขอมลทแกไขลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 27: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

17

ตารางท 3.3 รายละเอยดของ Use Case : ViewSalaryDetail

Use Case No UC003 Use Case Name ViewSalaryDetail Actor(s) Employee Description ดรายละเอยดการเบกเงน Pre-Conditions ลกจางจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและตรวจสอบ

สทธการใชงาน Post-Conditions ลกจางทราบรายระเอยดการเบกเงนของตนเอง Flow of Event 1. Use Case จะเรมเมอลกจางตองการดรายละเอยดการเบกเงนของ

ตนเอง 2. ลกจางท าการเลอกเมน View Detail 3. ระบบจะท าการเลอกขอมลการเบกเงนของลกจางมาแสดงพรอมทง

ค านวณคาจางของลกจาง Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครง ภายหลง”

Page 28: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

18

ตารางท 3.4 รายละเอยดของ Use Case :AddUserAccount

Use Case No UC004 Use Case Name AddUserAccount Actor(s) Administrator Description เพมบญชใหกบผใชงาน Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions เพมบญชใหกบผใชงานส าเรจ Flow of Event 1. Use Case จะเรมเมอผดแลระบบตองการเพมบญชใหกบผใชงาน

2. ผดแลระบบเลอกเมน Add User 3. ผดแลระบบกรอกขอมลเก ยวกบผใชงานใหครบถวน 4. ผดแลระบบเลอกเมนบนทก 5. ระบบจะท าการตรวจสอบ Username วามอยในระบบหรอไมถาม

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

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 29: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

19

ตารางท 3.5 รายละเอยดของ Use Case : AddShipAccount

Use Case No UC005 Use Case Name AddShipAccount Actor(s) Administrator Description เพมบญชขอมลเรอ Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions เพมบญชขอมลเรอส าเรจ Flow of Event 1. Use Case จะเรมเมอผดแลระบบระบบตองการจะเพมบญชขอมลเรอ

2. ผดแลระบบระบบเลอกเมน Add Ship 3. ผดแลระบบระบบกรอกขอมลเก ยวกบเรอใหครบถวน 4. ผดแลระบบระบบเลอกเมนบนทก 5. ระบบจะท าการบนทกขอมลเรอลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 30: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

20

ตารางท 3.6 รายละเอยดของ Use Case : EditShipAccount

Use Case No UC006 Use Case Name EditShipAccount Actor(s) Administrator Description แกไขขอมลเรอ Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions แกไขขอมลเรอส าเรจ Flow of Event 1. Use Case จะเรมเมอผดแลระบบตองการแกไขขอมลเรอ

2. ผดแลระบบเลอกเมน Edit Ship 3. ผดแลระบบเลอกเรอทตองการแกไขขอมล 4. ผดแลระบบเลอกเมน Edit 5. ผดแลระบบพมพขอมลทตองการแกไข 6. ผดแลระบบเลอกเมนบนทก 7. ระบบจะท าการบนทกขอมลทแกไขลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 31: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

21

ตารางท 3.7 รายละเอยดของ Use Case : AddOwnerAccount

Use Case No UC007 Use Case Name AddOwnerAccount Actor(s) Administrator Description เพมขอมลเจาของกจการ Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions เพมขอมลเจาของกจการส าเรจ Flow of Event 1. Use Case จะเรมเมอผดแลระบบตองการจะเพมขอมลเจาของกจการ

2. ผดแลระบบเลอกเมน Add Owner 3. ผดแลระบบกรอกขอมลเก ยวกบเจาของกจการใหครบถวน 4. ผดแลระบบเลอกเมนบนทก 5. ระบบจะท าการบนทกขอมลเจาของกจการลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 32: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

22

ตารางท 3.8 รายละเอยดของ Use Case : EditOwnerAccount

Use Case No UC008 Use Case Name EditOwnerAccount Actor(s) Admin Description แกไขขอมลเจาของกจการ Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions แกไขขอมลเจาของกจการ Flow of Event 1. Use Case จะเรมเมอผดแลระบบตองการแกไขขอมลเจาของกจการ

2. ผดแลระบบเลอกเมน Edit Owner 3. ผดแลระบบเลอกขอมลเจาของกจการทตองการจะแกไข 4. ผดแลระบบเลอกเมน Edit 5. ผดแลระบบพมพขอมลทตองการแกไข 6. ผดแลระบบเลอกเมนบนทก 7. ระบบจะท าการบนทกขอมลทแกไขลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 33: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

23

ตารางท 3.9 รายละเอยดของ Use Case : AddEmployeeAccount

Use Case No UC009 Use Case Name AddEmployeeAccount Actor(s) Administrator Description เพมบญชขอมลลกจาง Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions เพมบญชขอมลลกจางส าเรจ Flow of Event 1. Use Case จะเรมเมอผดแลระบบตองการจะเพมบญชขอมลลกจาง

2. ผดแลระบบเลอกเมน Add Employee 3. ผดแลระบบกรอกขอมลเก ยวกบลกจางใหครบถวน 4. ผดแลระบบเลอกเมนบนทก 5. ระบบจะท าการบนทกขอมลลกจางลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 34: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

24

ตารางท 3.10 รายละเอยดของ Use Case : EditEmployeeAccount

Use Case No UC010 Use Case Name EditEmployeeAccount Actor(s) Administrator Description แกไขบญชขอมลลกจาง Pre-Conditions ผดแลระบบจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions แกไขบญชขอมลลกจาง Flow of Event 1. Use Case จะเรมเมอผดแลระบบตองการแกไขขอมลลกจาง

2. ผดแลระบบเลอกเมน Edit Employee 3. ผดแลระบบเลอกขอมลลกจางทตองการแกไข 4. ผดแลระบบเลอกเมน Edit 5. ผดแลระบบพมพขอมลทตองการแกไข 6. ผดแลระบบเลอกเมนบนทก 7. ระบบจะท าการบนทกขอมลทแกไขลงในฐานขอมล

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 35: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

25

ตารางท 3.11 รายละเอยดของ Use Case : AddPaySalaryList

Use Case No UC011 Use Case Name AddPaySalaryList Actor(s) Owner Description เพมรายการเบกเงน Pre-Conditions เจาของกจการจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions เพมรายการเบกเงนส าเรจ Flow of Event 1. Use Case จะเรมเมอนายจางตองการเพมรายการเบกเงน

2. เจาของกจการเลอกลกจางคนทตองการ 3. เจาของกจการตองพมพรายละเอยดการเบกเงน 4. เจาของกจการใหลกจางเซนลายเซนเพอยนยนขอมลการเบกเงน 5. เจาของกจการเลอกเมนบนทก 6. ระบบจะท าการบนทกขอมลการเบกเงนของลกจางคนนน ๆ

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 36: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

26

ตารางท 3.12 รายละเอยดของ Use Case : ViewPaySalaryDetail

Use Case No UC012 Use Case Name ViewPaySalaryDetail Actor(s) Owner Description ดรายละเอยดการเบกเงน Pre-Conditions เจาของกจการจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions เจาของกจการทราบรายละเอยดการเบกเงน Flow of Event 1. Use Case จะเรมเมอเจาของกจการตองการดรายละเอยดการเบกเงน

2. เจาของกจการเลอกลกจางทตองการดรายละเอยด 3. เจาของกจการเลอกเมน View 4. ระบบจะท าการเลอกขอมลของลกจางคนนน ๆ จากฐานขอมลมา

แสดง Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

Page 37: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

27

ตารางท 3.13 รายละเอยดของ Use Case : CalculateSalary

Use Case No UC013 Use Case Name CalculateSalary Actor(s) Owner Description ค านวณเงนคาจาง Pre-Conditions เจาของกจการจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions ค านวณเงนคาจางใหลกจางส าเรจ Flow of Event 1. Use Case จะเรมเมอเจาของกจการตองการค านวณเงนคาจาง

2. เจาของกจการเลอกเมน Calculate 3. ระบบจะท าการเลอกขอมลการเบกเงนของลกจางจากฐานขอมลแลว

น ามาค านวณแลวแสดงใหนายจางตรวจสอบความถกตอง 4. เจาของกจการเลอกเมน Confirm 5. ระบบจะท าการบนทกขอมลรายละเอยดการค านวณเงนคาจาง

Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

Page 38: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

28

ตารางท 3.14 รายละเอยดของ Use Case : CreateReport

Use Case No UC014 Use Case Name CreateReport Actor(s) Owner Description สรางรายงาน Pre-Conditions เจาของกจการจะตองท าการเขาสระบบเพอเปนการยนยนตวตนและ

ตรวจสอบสทธการใชงาน Post-Conditions ไดรายงานทตองการ Flow of Event 1. Use Case จะเรมเมอเจาของกจการตองการสรางรายงาน

2. เจาของกจการเลอกประเภทของรายงานทตองการ 3. เจาของกจการตรวจสอบรายละเอยดของรายงาน 4. เจาของกจการเลอกเมน Confirm 5. ระบบจะท าการสรางรายงานทนายจางตองการและดาวนโหลดไวใน

อปกรณในรปแบบไฟล .pdf Alternative Flows - Exceptions ไมสามารถเชอมตออนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ “ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงภายหลง”

- กรอกขอมลไมครบถวนแลวท าการบนทก - แจงเตอนผใชใหกรอกขอมลทส าคญใหครบถวนกอนทจะท าการ

บนทก

Page 39: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

29

3.5 Sequence Diagram

รปท 3.4 Sequence Diagram : Login

Page 40: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

30

รปท 3.5 Sequence Diagram : AddAccount

รปท 3.6 Sequence Diagram : AddPaySalaryList

Page 41: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

31

รปท 3.7 Sequence Diagram : AddUser

รปท 3.8 Sequence Diagram : CalculateSalary

Page 42: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

32

รปท 3.9 Sequence Diagram : CreateReport

รปท 3.10 Sequence Diagram : EditAccount

Page 43: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

33

รปท 3.11 Sequence Diagram : ViewSalaryDetail

Page 44: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

34

3.6 Class Diagram

รปท 3.12 Class Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง กรณศกษา บานเรอโชคชยสมบรณ

Page 45: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

35

3.7 ความสมพนธระหวางเอนทต (Entity Relationship Diagram)

รปท 3.13 Entity Relationship Diagram ของเวบแอปพลเคชนบรหารจดการกจการประมง

กรณศกษา บานเรอโชคชยสมบรณ

Page 46: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

36

บทท 4

การออกแบบทางกายภาพ

4.1 การออกแบบฐานขอมล

ในการจดเกบและบรหารจดการขอมลของระบบจะจดเกบลงฐานขอมล (Database) โดยเลอกใชฐานขอมลเชงสมพนธ (Relational Database) ซงจะจดเกบขอมลในรปแบบของตาราง 2 มตประกอบดวยแถว (Row) และคอลมน (Column) และบรหารจดการขอมลในฐานขอมลดวย MySQL ขอมลจะถกจดเกบไวบนฝงแมขาย (Server) โดยมรายละเอยดของโครงสรางดงน

ตารางท 4.1 รายละเอยดของ Table Address Table : Address

Field Name Data Description Data Type Length Key Type Reference A_addressid รหสทอย varchar 10 PK A_houseno บานเลขท varchar 50 A_villageno หมท varchar 5 A_road ถนน varchar 50 A_subarea ต าบล/แขวง varchar 50 A_area อ าเภอ/เขต varchar 50 A_province จงหวด varchar 50 A_postalcode รหสไปรษณย varchar 5

ตารางท 4.2 รายละเอยดของ Table Calculate

Table : Calculate Field Name Data Description Data Type Length Key Type Reference

C_calid รหสค านวณคาจาง varchar 10 PK C_sumsalary รวมยอดเบก int C_income รายได int C_totalsalary ยอดสทธ int C_signature ลายเซน varchar max C_datetime วนเวลาทค านวณ varchar 20

Page 47: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

37

ตารางท 4.3 รายละเอยดของ Table DocType Table : Doctype

Field Name Data Description Data Type Length Key Type Reference DT_doctypeid รหสประเภทเอกสาร varchar 10 PK DT_name ชอยหอ varchar 50

ตารางท 4.4 รายละเอยดของ Table PaySalary Table : PaySalary

Field Name Data Description Data Type Length Key Type Reference PS_salaryid รหสการจายเงน varchar 10 PK PS_datetime วนเวลาทจายเงน varchar 30 PS_amount จ านวนเงน int PS_signature ลายเซน varchar max E_employeeid รหสลกจาง varchar 10 FK Employee C_calid รหสค านวณคาจาง varchar 10 FK Calculate

Page 48: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

38

ตารางท 4.5 รายละเอยดของ Table Employee Table : Employee

Field Name Data Description Data Type Length Key Type Reference E_employeeid รหสลกจาง varchar 10 PK E_picture รปภาพ varchar max E_workid เลขทใบอนญาต varchar 13 E_workissue วนทออกใบอนญาต varchar 15 E_workexpiry วนหมดอายใบอนญาต varchar 15 E_startwork วนทเรมจาง varchar 15 E_endwork วนทเลกจาง varchar 15 E_jobstatus สถานะงาน varchar 10 E_cause เหตผลทเลกจาง varchar 50 E_signature ลายเซน varchar max E_position ต าแหนงงาน varchar 20 E_salary เงนเดอน varchar 20 E_bank ธนาคาร varchar 15 E_acname ชอบญชธนาคาร varchar 50 E_acnumber เลขบญชธนาคาร varchar 10 S_shipid เลขทะเบยนเรอ varchar 10 FK Ship

ตารางท 4.6 รายละเอยดของ Table Owner

Table : Owner Field Name Data Description Data Type Length Key Type Reference

O_ownerid รหสเจาของกจการ varchar 10 PK O_firstname ชอ varchar 50 O_lastname นามสกล varchar 50 O_telnumber เบอรโทรศพท varchar 10

Page 49: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

39

ตารางท 4.7 รายละเอยดของ Table UserAccount Table : Account

Field Name Data Description Data Type Length Key Type Reference U_id รหสผใชงาน varchar 10 PK U_username ชอผใช varchar 20 U_password รหสผาน varchar 20 U_idnumber เลขประจ าตวประชาชน varchar 13 U_name ชอ varchar 30 U_lastname นามสกล varchar 30 U_birthdate วนเดอนปเกด varchar 15 U_sex เพศ varchar 10 U_telnumber เบอรโทรศพท varchar 10 U_nationality สญชาต varchar 20 U_passportid เลขทหนงสอเดนทาง varchar 10 U_dateissue วนทออกเอกสาร varchar 15 U_dateexpiry วนหมดอายเอกสาร varchar 15 U_status สถานะ varchar 20 U_datecreate วนเวลาทสรางบญช varchar 20 A_addressid รหสทอย varchar 10 FK Address E_employeeid รหสลกจาง varchar 10 FK Employee O_ownerid รหสเจาของกจการ varchar 10 FK Owner

Page 50: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

40

ตารางท 4.8 รายละเอยดของ Table Ship Table : Ship

Field Name Data Description Data Type Length Key Type Reference S_shipid เลขทะเบยนเรอ varchar 10 PK S_shipname ชอเรอ varchar 30 S_shiptype ประเภทเรอ varchar 30 S_port เมองทา varchar 30 S_size ขนาด varchar 10 S_unitemployee จ านวนคนงาน varchar 10 S_licenseid เลขทใบอนญาต varchar 13 S_shipmark อตลกษณเรอ varchar 10 S_area พนทท าการประมง varchar 20 S_tool เครองมอ varchar 20 S_tooltype ประเภทเครองมอ varchar 20 S_brandvms ยหออปกรณตดตามเรอ varchar 20 S_idvms เลขทอปกรณตดตามเรอ varchar 20 O_ownerid รหสเจาของกจการ varchar 10 FK Owner

Page 51: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

41

4.2 การออกแบบแผนผงของเวบไซต (Site Map)

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

กรณศกษา บานเรอโชคชยสมบรณ

Page 52: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

42

4.3 รายละเอยดโครงสรางของเวบไซต

รปท 4.2 รายละเอยดโครงสรางของเวบไซต

ตารางท 4.9 แสดงรายละเอยดโครงสรางของเวบไซต ล าดบ รายการ ค าอธบาย 1 Index.cshtml หนาเรมตนของเวบไซตและเขาสระบบ 2 Admin_Add_menu.cshtml หนาส าหรบเพมขอมลผใช 3 Admin_Edit_menu.cshtml หนาส าหรบแกไขขอมลผใช 4 Employee_detail_calculate.cshtml หนาส าหรบลกจางดขอมลการเบกเงน 5 Owner_calculate_salary.cshtml หนาส าหรบเจาของบนทกการเบกเงน 6 Owner_detail_calculate.cshtml หนาส าหรบเจาของดขอมลการเบกเงน 7 Owner_report.cshtml หนาส าหรบเจาของใชออกรายงาน 8 Owner_report_salary.cshtml หนาส าหรบเจาของไวเลอกลกจางคนทจะ

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

Page 53: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

43

4.4 การออกแบบสวนตดตอกบผใช (User Interface Design)

4.4.1 สวนของผใชงานทวไป

รปท 4.3 หนาแรกของเวบไซต

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

Page 54: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

44

รปท 4.4 หนาจอเขาสระบบ

จากรปท 4.4 ผใชสามารถเขาสระบบไดโดยการกรอก Username และ Password เพอท าการเขาใชระบบ

4.4.2 สวนของเจาของกจการ

รปท 4.5 หนาจอแสดงรายชอลกจาง

จากรปท 4.5 แสดงหนาของเจาของกจการ สามารถเลอกดประวตการเบกเงนของลกจางแตละคนได โดยคลกทปม View

Page 55: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

45

รปท 4.6 หนาจอแสดงรายละเอยดการเบกเงนของลกจาง

จากรปท 4.6 แสดงหลงจากผใชคลกปม View จะแสดงรายละเอยดการเบกเงนของลกจางทเลอกโดยเจาของกจการสามารถคลกปม Edit เพอแกไขว นเรมท างานของลกจาง และคลกปม Calculate เพอท าการค านวณเงนคาจางของลกจาง

รปท 4.7 หนาจอส าหรบแกไขวนทเรมท างาน

จากรปท 4.7 ผใชท าการเลอกวนทเรมท างานใหมแลวคลกปม Edit เพอเปนการยนยนการแกไขวนทเรมท างาน

Page 56: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

46

รปท 4.8 หนาจอส าหรบค านวณเงนรายไดของลกจาง

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

Page 57: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

47

รปท 4.9 หนาจอส าหรบออกรายงาน

จากรปท 4.9 โดยสามารถเลอกรปแบบของรายงานทตองการไดจากหนานแลวโดยสามารถออกรายงานไดทงหมด 5 แบบ ประกอบดวย

- สญญาจางลกจางในงานประมงทะเล (แบบ ปม. 1) - แบบจดเวลาพกของลกจางในงานประมงทะเล (แบบ ปม. 2) - ทะเบยนลกจางในงานประมงทะเล (แบบ ปม.3) - แบบรายงานตวลกจางในงานประมงทะเล (แบบ ปม. 4) - เอกสารการจายคาจาง คาท างานในวนหยด ตามกฎกระทรวงคมครองแรงงานในงาน

ประมงทะเล

รปท 4.10 หนาจอส าหรบบนทกรายการเบกเงน

จากรปท 4.10 ผใชสามารถคลกทปม Edit แลวพมพจ านวนเงนทลกจางเบก

Page 58: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

48

4.4.3 สวนของผดแลระบบ

รปท 4.11 หนาจอส าหรบเพมผใช

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

- ชอ นามสกล - ชอผใช และ รหสผาน - เพศ - วนเดอนปเกด - เบอรโทรศพท - ทอย (บานเลข ท , ห มท , ถนน, ต าบล/ แขวง, อ าเภอ/ เขต, จงหว ด ,

รหสไปรษณย - สญชาต - เลขประจ าตวประชาชน หรอ เลขทหนงสอเดนทาง - วนทออกบตรประชาชน / หนงสอเดนทาง - วนหมดอายบตรประชาชน / หนงสอเดนทาง - สถานะ (เจาของ , ผดแลระบบ , ลกจาง)

Page 59: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

49

รปท 4.12 หนาจอส าหรบเพมลกจาง

จากรปท 4.12 ผดแลระบบสามารถเพมลกจางไดโดยการพมพขอมลตาง ๆ ของลกจาง เลอกรปภาพ และเพมลายเซนชอแลวกดสงเพอเปนการยนยนการเพมลกจาง โดยขอมลของลกจาง ประกอบดวย

- รปภาพลกจาง - รปภาพลายเซน - เลขทใบอนญาตท างาน (ถาม) - วนทออกใบอนญาตท างาน (กรณทมใบอนญาตท างาน) - วนทหมดอายใบอนญาตท างาน (กรณทมใบอนญาตท างาน) - เรอทจะเขาท างาน - ต าแหนงงาน - วนทเรมจาง - วนทเลกจาง หรอวนทสนสดสญญาจาง - เหตผลทเลกจาง (กรณเลกจาง) - จ านวนเงนคาจางตอเดอน - ธนาคารทเปดบญช - ชอบญชธนาคาร - เลขบญชธนาคาร

Page 60: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

50

รปท 4.13 หนาจอเพมลายเซนชอ

จากรปท 4.13 แสดงหนาจอใชเขยนลายเซนชอลงบนพนทสขาว คลกปม Clear เพอท าการลบลายเซนชอ คลกทปม Save เพอท าการบนทกลายเซนชอ

รปท 4.14 หนาจอส าหรบเพมเจาของ

จากรปท 4.14 แสดงหนาจอเพมเจาของโดยการพมพขอมลของนายจางใหครบถวนแลวคลกทปม Submit เพอเปนการยนยนการเพมเจาของ

โดยขอมลของเจาของกจการ ประกอบดวย - ชอ - นามสกล - เลขประจ าตวประชาชน - เบอรโทรศพท

Page 61: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

51

รปท 4.15 หนาจอส าหรบเพมขอมลเรอ

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

โดยขอมลของเรอ ประกอบดวย - เลขทะเบยนเรอ - ชอเรอ - ประเภทเรอ - เมองทาทจดทะเบยน - ขนาดเรอ (ตนกรอส) - จ านวนคนงาน - เลขทใบอนญาตประมงพาณชย - สญลกษณประจ าเรอ - พนทท าการประมง - เครองมอท าการประมง - ประเภทของเครองมอท าการประมง - Brand ของอปกรณตดตามเรอ - รหสประจ าอปกรณตดตามเรอ

Page 62: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

52

รปท 4.16 หนาจอส าหรบแกไขขอมลลกจาง

จากรปท 4.16 ผดแลระบบสามารถเลอกลกจางทตองการแกไขแลวคลกปม Edit แลวพมพขอมลทตองการแกไข จากนนคลกทปม Submit เพอเปนการยนยนการแกไข

รปท 4.17 หนาจอส าหรบแกไขขอมลเจาของ

จากรปท 4.17 ผดแลระบบสามารถเลอกขอมลเจาของทตองการแกไขแลวคลกปม Edit จากนนพมพขอมลทตองการแกไขแลวคลกทปม Submit เพอเปนการยนยนการแกไข

Page 63: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

53

รปท 4.18 หนาจอส าหรบแกไขขอมลผดแลระบบ

จากรปท 4.18 ผดแลระบบสามารถเลอกผดแลทตองการแกไขแลวคลกทปม Edit จากนนพมพขอมลทตองการแกไขแลวคลกทปม Submit เพอเปนการยนยนการแกไข

รปท 4.19 หนาจอส าหรบแกไขขอมลเรอ

จากรปท 4.19 ผดแลระบบสามารถเลอกขอมลเรอทตองการแกไข จากนนคลกทปม Edit แลวพมพขอมลทตองการแกไขแลวคลกทปม Submit เพอเปนการยนยนการแกไข

Page 64: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

54

4.4.4 สวนของลกจาง

รปท 4.20 หนาจอแสดงรายละเอยดการเบกเงนในสวนของลกจาง จากรปท 4.20 โดยลกจางสามารถแกไขขอมลสวนตวไดโดยการคลกทปม Edit Profile และดสรปการเบกเงนโดยการคลกทปม View Calculate

รปท 4.21 หนาจอส าหรบแกไขขอมลสวนตวของลกจาง

จากรปท 4.21 สามารถแกไขขอมลสวนตวได โดยสามารถแกไข เบอรโทรศพทและรหสผานได จากนนคลกทปม Save เพอเปนการยนยนการแกไข

Page 65: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

55

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

5.1 สรปผลภาคนพนธ

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

5.1.1 สวนของลกจาง ผใชงานจะไดรบสทธการใชงานในสวนตาง ๆ ของระบบ เชน แกไขขอมลสวนตว, ดรายละเอยดการเบกเงน เปนตน 5.1.2 สวนของผดแลระบบ สามารถจดการบญชผใชงาน เชน แกไขขอมล, เพมขอมล

หรอ แกไขรายการเรอ ท าการเกบขอมลลงฐานขอมลของระบบ เปนตน 5.1.3 สวนของเจาของกจการ สามารถดรายละเอยดการเบกเงน, บนทกการเบกเงน, จดท า

รายงาน เปนตน

5.2 ขอดของระบบ 5.2.1 ลดคาใชจายในการจดท า และจดเกบเอกสารของเจาของกจการ 5.2.2 มความสะดวกในการจดเกบขอมลสนคา ขอมลรายงานตาง ๆ 5.2.3 ขอมลมความถกตองแมนย า 5.2.4 มความสะดวกในการดรายละเอยดการเบกเงนทงลกจางและนายจาง

5.3 ขอจ ากดของระบบ

5.3.1 ระบบจะสามารถใชไดเฉพาะผทมสวนเก ยวของกบกจการเทานน 5.3.2 ลกจางจะสามารถเขาใชระบบไดกตอเมอผดแลระบบสรางบญชผใชใหเทานน 5.3.3 รายงานทจดท าจากระบบอยในรปแบบไฟล .pdf จงไมสามารถแกไขไดในกรณท

มขอมลผดจะตองสรางรายงานใหมเทานน 5.3.4 ไมสามารถแกไขลายเซนชอในภายหลงจากทสรางบญชผใชแลว 5.3.5 กรณทใชงานบนสมารทโฟนและแทบเลตตองใชในรปแบบแนวนอนเทานน

Page 66: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

56

5.4 ขอเสนอแนะ

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

5.4.2 ระบบควรจะเพมการคนหาลกจางในกรณลกจางมจ านวนมากจะไดงายตอการคนหา

5.4.3 ระบบควรจะเพมการท างานในสวนของการท าบญช รายรบ - รายจายของกจการเพอทจะไดทราบผลก าไร ขาดทนของกจการ

Page 67: Web Application Management of Fisheries Case Study of ...€¦ · เว็บแอปพลิเคชันบริหารจัดการกิจการประมง

บรรณานกรม

[1] เวบแอปลเคชน (Web Application) คออะไร ? [ออนไลน]

แหลงทมา : http://aicomputer.co.th/sArticle/002-เวปแอพพลเคชน-web-application-คออะไร.aspx (สบคนเมอวนท 10 พ.ค. 2561)

[2] Database คออะไร [ออนไลน] แหลงทมา : http://www.mindphp.com/คมอ/73-คออะไร/2055 -database-คออะไร23.html (สบคนเมอวนท 10 พ.ค. 2561)

[3] HTML คอ [ออนไลน] แหลงทมา : http://www.codingbasic.com/html.html (สบคนเมอวนท 10 พ.ค. 2561)

[4] CSS คอ [ออนไลน] แหลงทมา : http://www.codingbasic.com/css.html (สบคนเมอวนท 15 พ.ค. 2561)

[5] JavaScript คออะไร [ออนไลน] แหลงทมา :http://www.mindphp.com/คมอ/73-คออะไร/2187-java-javascript-คออะไร.html (สบคนเมอวนท 15 พ.ค. 2561)

[6] MVC คออะไร [ออนไลน] แหลงทมา : https://arnondora.in.th/what-is-mvc/ (สบคนเมอวนท 15 พ.ค. 2561)

[7] Microsoft SQL Serverคออะไร[ออนไลน] แหลงทมา :https://www.9experttraining.com/articles/microsoft-sql-server-คออะไร (สบคนเมอวนท 15 พ.ค. 2561)