สรางและหาประสทธภาพเวบไซตบนทกขอมลตรวจเยยมบาน ของนกศกษาวทยาลยเทคนคแพร

จกรกฤษณ มงกรณ

ทนกฤต สงหแกว

โครงการนเปนสวนหนงของการศกษาตามหลกสตร

ระดบการศกษา ประกาศนยบตรวชาชพชนสง

สาขาวชาเทคโนโลยคอมพวเตอร

วทยาลยเทคนคแพร

ปการศกษา 2561

บทท 1บทนำา

สารบญ

เรอง หนา

บทท 1 บทนำ�

1.1 หลกก�รและเหตผล 1

1.2 วตถประสงค 1

1.3 เป�หม�ย 1

1.4 ผลทค�ดว�จะไดรบ 1

บทท 2 สทธก�รเข�ใชง�นระบบและขนตอนก�รเข�ใชง�น

2.1 สทธก�รเข�ใชง�นระบบ 2

2.1.1 ประเภทสทธก�รเข�ใชง�นระบบทงหมด 2

2.1.2 คว�มสมพนธระหว�งประเภทสทธก�รเข�ใชง�น 2

2.2 ข น ต อ น ก � ร เ ข � ใ ช ง � น ร ะ บ บ 2บทท 3 ก�รใชง�นระบบสวนของนกเรยน ในสวนของก�รลงทะเบยนใชง�น

3.1 ขนตอนก�รเข�ระบบกอนใชง�น 5 3.2 ขนตอนก�รบนทกระบบสวนขอมลทวไป 6 3.3 ขนตอนก�รกรอกหน�ประวต น กศกษ� 9 3.4 ข น ต อ น ก � ร บ น ท ก พ ก ด ท อ ย 12

1.1 หลกการและเหตผลคมอก�รใชง�นระบบเวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นเพอ

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

1.2 วตถประสงค1) เพอสร�งเวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นสำ�หรบ

นกเรยน/นกศกษ� แผนกวช�เทคนคคอมพวเตอร วทย�ลยเทคนคแพร

2) เพอห�ประสทธภ�พของ  เวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นสำ�หรบนกเรยน/นกศกษ� แผนกวช�เทคนคคอมพวเตอร วทย�ลยเทคนคแพร เพอใชบนทกขอมลทจำ�เปนในก�รออกเยยมบ�น

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

ท�งก�รเยยมบ�นเพอใชบนทกขอมลทจำ�เปนในก�รออกเยยมบ�น

1.4 ผลทคาดวาไดรบมคมอแนะนำ� วธก�รใชง�นเวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นเพออำ�นวยคว�มสะดวกในก�รเรยกด แกไข หรอเปลยนแปลง

ขอมลทจำ�เปนในก�รออกเยยม ของนกศกษ�แผนกวช�เทคนคคอมพวเตอรวทย�ลยเทคนคแพร

บทท 2สทธการเขาใชงานระบบและขนตอนการเขาใชงาน

2.1 สทธการเขาใชงานระบบ เวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นสำ�หรบนกเรยน/นกศกษ� แผนกวช�เทคนคคอมพวเตอร วทย�ลยเทคนคแพร เปนระบบทใชสำ�หรบนกเรยน/นกศกษ�แผนกเทคนคคอมพวเตอรทนกเรยน/นกศกษ�ไดจดทำ�ขนม�เพอเกบบนทกขอมลทอยและขอมลอน ๆ และยงส�ม�รถบนทกเสนท�งเพอใชเดนท�งไปยงทอยของนกเรยน/นกศกษ�แผนกเทคนค อกทงยงเปนทเกบขอมลของนกเรยน/นกศกษ�แผนกเทคนคคอมพวเตอร ดงนน เวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นสำ�หรบนกเรยน/นกศกษ� แผนกวช�เทคนคคอมพวเตอรวทย�ลยเทคนคแพร จงมก�รกำ�หนดสทธก�รเข�ใชง�นระบบ ใหส�ม�รถเข�ใชง�นไดต�มคว�มตองก�รของนกเรยน/นกศกษ� โดยมร�ยละเอยดสทธก�รเข�ใชง�นระบบ ดงน

2.1.1 ประเภทสทธการเขาใชงานระบบทงหมดเวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นไดมก�รแบงประเภท

สทธก�รใชง�นระบบดงตอไปน 1) ผดแลระบบ 2) ครทปรกษ� 3) นกเรยน นกศกษ�2.1.2 ความสมพนธระหวางประเภทสทธการเขาใชงาน

เวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นสำ�หรบนกเรยน/นกศกษ� มก�รกำ�หนดบทบ�ทหน�ทและก�รเข�ถงเมนต�ง ๆ ของระบบต�มสทธก�รเข�ใชง�นดงต�ร�งตอไปน

2.2 ขนตอนการเขาใชงานระบบ ก�รเข�ใชง�นเวบไซตบนทกขอมลและเสนท�งก�รเยยมบ�นส�ม�รถเข�ใชง�นไดผ�นท�งเวบบร�วเซอร (Web Browser) ยกตวอย�ง เชน Google Chrome, Firefox, Internet Explorer เปนตน 1) เปดเวบบร�วเซอร (Web Browser) บนระบบปฏบตก�รของท�น 2) พมพ URL ของระบบเวบไซตระบบเวบไซต Portfolio ออนไลน ด ง น http://homevisit.ctnphrae.com ระบบแสดงหน�จอตรวจสอบสทธ ก�รเข�ใชง�นระบบ (Login) ซงเปนหน�จอสำ�หรบ ตรวจสอบสทธ ก�รเข�ใชง�น โดยผใชง�นระบบตองกรอกขอมลชอผใชง�น (รหสผใชง�น) และรหสผ�น สวนบคคลจ�กนนคลกปม เข�สระบบ เพอเข�สระบบ แสดงดงรปท “ ” 2.1

รปท2.1 แสดงขน ตอนก�รเข�ใชง�นระบบ

โดยหลงจ�กตรวจสอบสทธก�รเข�ใชง�นระบบเสรจสน ปร�กฏหน�จอหลกของระบบ

รปท 2.2 หน�จอเมอเข�สระบบในระดบนกเรยน/นกศกษ�

รปท 2.3 หน�จอเมอเข�สระบบในระดบอ�จ�รย

รปท 2.4 หน�จอเมอเข�สระบบในระดบผดแลระบบ

บทท 3การใชงานระบบสวนของนกเรยน ในสวนของการลงทะเบยนใชงาน

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

1) เข�ระบบกอนใชง�น2) รหสนกศกษ� ดงรปท 3.1

รปท 3.1 แบบฟอรมเข�สระบบ

ครบถวนแลวจ�กนน คลกปม เพอเข�สระบบแสดงดงรปท 3.2

รปท 3.2 แสดงก�รเข�ระบบกอนใชง�น

3.2 ขนตอนการบนทกระบบสวนขอมลทวไป

3.2.1 การกรอกระบบสวนขอมลทวไป

ก�รเข�กรอกประวตสวนตว ตองคลกท ระบบจะแสดงแบบฟอรมก�รกรอกประวตสวนตวเพอใหกรอกขอมล แสดงดงรปท 3.3

รปท 3.3 แสดงก�รกรอกประวตสวนตว

ขนตอนการกรอกประวตสวนตว

1)คลกทปม เพอทำ�ก�รแกไข ขอมลสวนตวต�มแบบฟอรมดงรปท 3.4

รปท 3.4 แสดงก�รกรอกชอ บด� ม�รด� และสถ�นภ�พ–ครอบครว

3.2.2 การบนทกขอมลประวตสวนตว 1)ก�รบนทกขอมลเปนก�รบนทกขอมลประวตสวนตวทผ�นก�รก

รอกแลวบนทกเกบไวในระบบและส�ม�รถนำ�ม�แสดงหน�เวบไดเมอทำ�ก�รกรอกประวตสวนตวเรยบรอย

2)แลวจ�กนนคลกทปม เพอบนทกขอมลจ�กนนระบบแสดงขอมล

ประวตสวนตวทเร�บนทกไว แสดงดงรปท 3.5

รปท 3.5 แสดงก�รบนทกขอมลประวตสวนตวทผ�นก�รกรอกแลว

3)ก�รเปลยนรหสผ�นบญชผใชใหคลกทปม

จะแสดงฟอรมสำ�หรบก�รเปลยนรหสผ�น ดงรปท 3.6

รปท 3.6 แสดงแบบฟอรมก�รเปลยนรหสผ�น

4)ก�รดประวตก�รเข�สระบบใหคลกทปม

จะแสดงร�ยง�นก�รเข�สระบบ ดงรปท 3.7

รปท 3.7 แสดงร�ยง�นก�รเข�สระบบ

5)ก�รดแจงขอมลผดพล�ดในก�รใชง�นระบบใหคลกทปม

จะแสดงแบบฟอรมก�รแจงขอผดพล�ด ดงรปท 3.8

รปท 3.8 แสดงแบบฟอรมก�รแจงขอผดพล�ด

3.3 ขนตอนการกรอกหนาประวตนกศกษา

ก�รเข�กรอกหน�ประวตนกศกษ�โดยคลกท ระบบแสดงแบบฟอรมขอมลประวตนกศกษ� แสดงดงรปท 3.9

รปท 3.9 แสดงแบบฟอรมขอมลประวตนกศกษ�

3.3.1 ขนตอนแกไขประวตนกศกษา

1) ก�รแกไขประวตนกศกษ�ใหคลกทปม ระบบจะแสดงแบบฟอรมใหแกไขขอมลนกศกษ� แสดงดงรปท 3.10

รปท 3.10 แสดงแบบฟอรมแกไขขอมลนกศกษ�

2)ก�รบนทกเมอบนทกขอมล คลกท จะกลบไปยงหน�แสดงผลดงรปท 3.9

3.3.2 ขนตอนแกไขแบบบนทกการเยยมบานนกศกษา1) ก � ร เ ข � ห น � ก ร อ ก ข อ ม ล ก � ร เ ย ย ม บ � น โ ด ย ค ล ก ท ป ม

ระบบจะแสดงแบบฟอรมขอมลก�รเยยมบ�นแสดงดงรปท 3.11

รปท 3.11 แสดงแบบฟอรมขอมลก�รเยยมบ�น

3)ก�รแกไขขอมลก�รเยยมบ�นโดยคลกทปม ระบบจะแสดงแบบฟอรมขอมลก�รเยยมบ�นแสดงดงรปท 3.12

รปท 3.12 แสดงก�รพมพแบบฟอรมประวตก�รศกษ�

4)ก�รบนทกเมอบนทกขอมล คลกท จะกลบไปยงหน�แสดงผลดงรปท 3.10

3.4 ขนตอนการบนทกพกดทอย

1) ก�รเข�หน�บกทกพกดโดยคลกทปม ระบบจะแสดงหน� Google maps แสดงดงรปท 3.13

รปท 3.13 แสดงหน� Google maps แสดงพกดทอย

3)ก�รแกไขตำ�แหนงทอยโดยคลกทปม ระบบจะแสดงหน�จอก�รกำ�หนดตำ�แหนงใน Google maps ใหมแสดงดงรปท 3.14

รปท 3.14 แสดงหน�จอก�รกำ�หนดตำ�แหนงใน Google maps

4)ก�รบนทกเมอบนทกขอมล คลกท จะกลบไปยงหน�แสดงผลดงรปท 3.13

3.4.1 ขนตอนการตรวจบนทกขอมลของนกศกษา 1) ก�รดขอมลทนกศกษ�บนทกเข�ม�ใหคลกท

และจะแสดงหน�จอเรยงต�มชนปดงรปท3.15

รปท 3.15 แสดงหน�จอเรยงต�มชนป

ดขอมลโดยก�รทคลกปม เพอดขอมลดงรปท3.16

รปท 3.16 หน�จอก�รแสดงขอมลของนกศกษ�3.4.1 ขนตอนการทำาบนทกขอความสรปการเยยมบาน

1) ก�รทำ�บนทกขอคว�มกดทเมน

จะแสดงแบบฟอรมบนทกขอคว�มดงรปท 3.17

รปท 3.16 แสดงแบบฟอรมบนทกขอคว�ม

กดปม เพอบนทก

3)ดร�ยง�นบนทกขอคว�มทงหมดโดยคลกทปม

จะแสดงร�ยง�นบรรทกขอคว�มทงหมดดงภ�พท 3.17

รปท 3.17 แสดงร�ยง�นบนทกขอคว�มทงหมด

4)คลกทปม เพอดร�ยละเอยกบนทกขอคว�ม

5)จะแสดงฟอรมร�ยละเอยดบนทกขอคว�มกงรปท 3.18

รปท 3.18 แสดงฟอรร�ยละเอยดบนทกขอคว�ม

3.5.1 ขนตอนดรายชอผใช1) คลกทเมนเพอร�ยชอผใชทงหมด

จะแสดงร�ยชอของผใชทงหมดดงรปท 3.19

รปท 3.19 แสดงร�ยชอผใชทงหมด

2) ก�รก�รจดก�รชนเรยน

จะแสดงร�ยชอชนเรยนทงหมดดงรปท 3.20

รปท 3.20 แสดงร�ยชอชนเรยนทงหมด

3) ก�รดขอมลทนกศกษ�บนทกเข�ม�ในระบบ

จะแสดงร�ยชอชนเรยนทงหมดดงรปท 3.21

รปท 3.21 แสดงร�ยชอชนเรยนทงหมด3) กดปม เพอดขอมลในชนปนนจะแสดงแบบฟอรมขอมลดงรปท

3.22

รปท 3.22 แสดงร�ยชอชนเรยนทงหมด

5)ก�รเพมบญชผใชใหกดเมน

6)กรอกขอมลต�มแบบฟอรมดงรปท 3.23

รปท 3.23 แสดงแบบฟอรมก�รเพมบญชผใช

7)ก�รเปลยนชอบญชผใช รหสผ�น และสถ�นะส�ม�รถกดทเมน

จะแสดงร�ยละเอยดขอมลของบญชผใชดงรปท 3.24

รปท 3.24 แสดงร�ยละเอยดบญชผใช8)ก�รดขอมลขอผดพล�ดของระบบทบนทกโดยผใชคลกท

9)หน�จอแสดงร�ยก�รขอมลดงรปท 3.25

รปท 3.25 แสดงร�ยก�รปญห�ทผใชบนทก

10) ก�รเพมประก�ศเพมขอมลในแบบฟอรมดงรปท 3.26

รปท 3.26 แสดงแบบฟอรมกรอกขอมล