2017 3 - Siam University · ความสามารถของภาษา Angular JS...
Transcript of 2017 3 - Siam University · ความสามารถของภาษา Angular JS...
![Page 1: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/1.jpg)
3
บทท 2
แนวคด ทฤษฏและงานวจยทเกยวของ
2.1 แนวความคด
รปท 2.1 แนวคดการพฒนาระบบบนทกขอมลและออกรายงานเพอสนบสนนการใหบรการแอพพลเคชน Messenger Post
แนวคดการพฒนาระบบบนทกขอมลและออกรายงานเพอสนบสนนการใหบรการแอพพลเคชน Messenger Post คอเปนระบบทใชในการสนบสนนการใหบรการของแอพพลเคชน Messenger Post โดยผจดท าไดใชโปรแกรม Microsoft Visual Studio 2017 ในการพฒนาระบบและใช MongoDB ในการจดฐานขอมล ซงในการพฒนาระบบผจดท าไดใชรปแบบ MVC ในการพฒนาเพองายตอการทดสอบและแกไข ซงภาษาทใชในการพฒนาไดแก ภาษา C# ใชในการเขยนโคดค าสงเชอมตอกบฐานขอมล ภาษา JavaScript ใชในการเขยนค าสงควบคมการท างานของหนาจอ และภาษา Angular ใชในการออกแบบหนาจอแสดงผล
แอพพลเคชน Messenger Post
ระบบบนทกขอมลและออกรายงาน
2017 3.2
![Page 2: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/2.jpg)
4
2.2 ทฤษฎทเกยวของ
1. Model-View-Controller (MVC) MVC คอ สถาปตยกรรมการพฒนาซอฟตแวรทมรปแบบทมการแยกสวนการพฒนาอยาง
ชดเจน ซงเปนรปแบบการพฒนาซอฟตแวร ทถอวาเปนแบบแผนสถาปตยกรรมทนยมใชในการพฒนาซอฟตแวร เพราะมการแยกสวนการพฒนา ท าใหงายตอการทดสอบหรอแกไขในบางสวนโดยจะไมไปกระทบกบสวนอนๆ ของระบบทก าลงพฒนา โดยสถาปตยกรรมแบบ Model-View-Controller (MVC) ไดแบงการพฒนาออกเปนสามสวนดงน
1.1 Model (M) คอสวนของ Business Logic และ สวนของ Entity ซงเปนสวนทท าหนาทตดตอกบฐานขอมล (Database)
1.2 View (V) คอสวนทใชแสดงผล ซงเปนสวนของ HTML, CSS และ JavaScript โดยท าเปน Web Application ทใชแสดงผล
1.3 Controller (C) คอสวนสมองทท าหนาทควบคมการท างานของหนาจอ และการดงขอมลจากสวนของ Model (M) มาแสดงผลในสวนของ View (V)
รปท 2.2 รปแบบการพฒนาซอฟตแวรแบบ MVC
Model
View Controller
![Page 3: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/3.jpg)
5
2. ภาษา Angular ภาษา Angular คอ หนงใน Front-end framework ทก าลงไดรบความนยมในการพฒนา Web
Application โดยภาษา Angular สามารถตอบโจทยการใชงานในปจจบนทมการใชงานหนาเวบผานสมารทโฟน ภาษา Angular จะสามารถปรบรปแบบการแสดงผลใหเขากนอปกรณทใชงานเปดหนาเวบ ท าใหงายตอการใชงานหนาเวบนน
3. MongoDB MongoDB เปนฐานขอมลแบบ NoSQL ซงเปนฐานขอมลทไมมความสมพนธของตารางแบบ
เดยวกบ SQL ซงมการจดการเกบขอมลในรปแบบ JSON (JavaScript Object Notation) ในการบนทกขอมลทก Record ในฐานขอมล MongoDB จะเรยกวา Document ซงมการจดเกบคาเปน key และ Value หากเปรยบเทยบการจดเกบขอมลระหวาง MongoDB และ MySQL ดงตารางท 2.1 ตารางท 2.1 เปรยบเทยบระบบการจดเกบขอมลระหวาง MongoDB และ MySQL
MySQL MongoDB
Table Collection Row Document
Column Field Joins Embedded documents, linking
![Page 4: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/4.jpg)
6
2.3 เวบไซตทเกยวของ
ในการพฒนาระบบผจดท าไดท าการคนหาและศกษาขอมลจากแหลงขอมลบนเวบไซต
ตางๆ ทเกยวของเพอเปนประโยชนในการพฒนาระบบ ดงน
รปท 2.3 https://devahoy.com/posts/getting-started-angular-js/
เวบไซตทชวยในการแกไขปญหาและใหขอมลความร เทคนค ประสบการณทเกยวกบการใชภาษาทใชพฒนาซอฟตแวร โดยไดน าความร และเทคนคมาใชภาษา Angular มาชวยในการพฒนาสวนของหนา Web Application
![Page 5: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/5.jpg)
7
รปท 2.4 https://www.w3schools.com/
เปนเวบไซตทรวมภาษาเกยวกบการพฒนาโปรแกรม ซงรวบรวมขอมลรายละเอยดตางๆขนตอนการพฒนาโปรแกรมมากมาย ซงผจดท าไดน าโคดตวอยางมาใชในการพฒนาระบบในการเขยนค าสงการท างานของระบบบนทกขอมลและออกรายงานเพอสนบสนนการใหบรการแอพพลเคชน Messenger Post
![Page 6: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/6.jpg)
8
รปท 2.5 http://wrapbootstrap.com/preview/WB0LX03F7
เปนเวบไซตทจ าหนายรปแบบตวอยางของหนาเวบเพอน าไปใชเปนตนแบบพฒนาเวบไซต ซงผจดท าไดน ารปแบบตวอยางเวบนมาใชในการพฒนาระบบเพอใหมความสวยงามและรวดเรวในการพฒนาระบบ
![Page 7: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/7.jpg)
9
รปท 2.6 http://fontawesome.io
เปนเวบไซตทใหความรในการใชไอคอน ในการพฒนาเวบไซต โดยภายในเวบไซตประกอบไปดวยตวอยางไอคอนทใชในการพฒนาเวบไซต ซงสามารถน าไอคอนมาใชในการพฒนาเวบไซตได
![Page 8: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/8.jpg)
10
รปท 2.7 https://golfapipol.github.io/angularjs-th
เปนเวบไซตใหความรทเกยวของกบภาษา Angular JS เปนภาษาทใชในการพฒนาหนาเวบไซต โดยภาษา Angular JS สามารถใชงานรวมกบภาษาอนไดหลากหลาย โดยผพฒนาไดน าความสามารถของภาษา Angular JS มาใชในการพฒนาระบบ
![Page 9: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/9.jpg)
11
2.4 งานวจยทเกยวของ
โดยในการพฒนาระบบบนทกขอมลและออกรายงานเพอสนบสนนการใหบรการ
แอพพพลเคชน Messenger Post ไดมการศกษางานวจยทเกยวของเพอน าขอมลและแนวคดมาใช
ประโยชนในการพฒนาระบบ ซงมงานวจยทเกยวของดงน
รปท 2.8 หนาเวบระบบสารสนเทศต าบลสามบณฑต
รงรอง แรมสเยอ (2556) สาขาวชาเทคโนโลยสารสนเทศ คณะวทยาศาสตรและเทคโนโลย
มหาวทยาลยราชภฏพระนครศรอยธยา การพฒนาเวบไซตเพอใชในการบรหารจดการของฝายปกครอง ต าบลสามบณฑต เพอเปนระบบในการรวบรวมขอมลการใชงานสารสนเทศในต าบลสามบณฑตและเพอศกษาความพงพอใจในการเขาเยยมชมเวบไซต ซงในการพฒนาระบบสารสนเทศต าบลสามบณฑต ไดใชโปรแกรม Microsoft Visual Studio 2010 และฐานขอมล Microsoft SQL Server R2 ในการพฒนาและจดเกบขอมล
![Page 10: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/10.jpg)
12
รปท 2.9 หนาจอระบบบรหารจดการอปกรณคอมพวเตอร
กลนภา สดสายญาต และ ส รรตน ชนพก (2559) สาขาวชาวศวกรรมศาสตรและอตสาหกรรมวจย ภาควชาวศวกรรมคอมพวเตอร คณะวศวกรรมศาสตร มหาวทยาลยสยาม เปนระบบทใชในการบรหารจดการอปกรณคอมพวเตอร โดยใชโปรแกรม Microsoft SQL Server และ Microsoft Visual Studio 2010 ในการพฒนาระบบ เพองายตอการคนหาประวตขอมลการยม-คน อปกรณคอมพวเตอรและปองกนการศนยหายของขอมล
![Page 11: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/11.jpg)
13
รปท 2.10 เวบไซตอนทราเนตโรงพยาบาลธนบร 2
เอกพนธ อนด (2556) สาขาวชาวศวกรรมศาสตรและอตสาหกรรมวจย ภาควชาวศวกรรมคอมพวเตอร คณะวศวกรรมศาสตร มหาวทยาลยสยาม โดยไดใชโปรแกรม Microsoft Visual Studio 2010 และ Microsoft SQL Server ในการพฒนา ซงการจดท าเวบไซตจ าเปนตองรถงโครงสรางการออกแบบของเวบไซตใหมความสมดลและความสวยงามใหเหมาะสมกบองคกรในการน าไปใชงาน
![Page 12: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/12.jpg)
14
รปท 2.11 โปรแกรมการจดการงานชาง
อาทตยา สอนแพง (2558) ภาควชาเทคโนโลยสารสนเทศ คณะเทคโนโลยสารสนเทศ มหาวทยาลยสยาม โครงงานสหกจศกษา เปนะบบทใชในการจดเกบขอมลการท างานของชางเพอใหงายตอการคนหาขอมล โดยในการพฒนาไดใชโปรแกรม Microsoft SQL Server 2014 ในการจดการฐานขอมล และพฒนาระบบโดยใชโปรแกรม Microsoft Visual Studio 2015
![Page 13: 2017 3 - Siam University · ความสามารถของภาษา Angular JS มาใช้ในการพัฒนาระบบ 11 2.4 งานวิจัยที่เกี่ยวข้อง](https://reader033.fdocumento.com/reader033/viewer/2022042220/5ec6add238387536650b83a3/html5/thumbnails/13.jpg)
15
รปท 2.12 ระบบสารสนเทศงานทรพยากรมนษยบนเครอขายอนเตอรเนต
สรศกด จนทรสรสถาพร (2556) สาขาวชาเทคโนโลยสารสนเทศ คณะวทยาศาสตรมหาวทยาลยศรนครนทรวโรฒ เปนระบบเพอใชในงานดานประวตบคลากรและประวตการพฒนาบคลากรใหกบโรงเรยนอสสมชญ โดยใช ภาษา PHP ใชโปรแกรม Adobe Dreamweaver CS6 และ MySQL ในการจดการขอมล