เอกสารประกอบการอบรม obeclms

1. สารบัญ
เรื่อง หนา
1. ระบบUsername
1.1. การสมัครสมาชิก 1
1.2. การเขาสูระบบ/ ออกจากระบบ 2
1.3. จัดการสมาชิกระบบ 3
1.4. แกไขขอมูลสวนตัว 6
1.5. จัดการคลังรูปภาพสมาชิก 7
1.6. การตั้งคาการเขาใชงาน 9
1.7. การนําเขาผูใช 10
1.8. การลบขอมูลสมาชิกออกจากระบบ 14
1.9. การเปลี่ยนภาษาที่หนาแสดงผล 16
2. ระบบ CMS
2.1. โครงสรางของระบบ 17
2.2. เปลี่ยนหนากาก 19
2.3. เปลี่ยน Flash/พื้นหลัง/Footer 20
2.4. จัดการระดับชั้น 23
2.5. ระบบกรองคําหยาบ 24
2.6. จัดการขอความวิ่ง 27
2.7. จัดการปอบอัพ 28
2.8. การเพิ่มBlocks 29
2.9. การสรางทําเนียบผูบริหาร 34
2.10.การแกTitle และ ขอมูลที่แสดงในFooter 36
2.11.การเพิ่มขอมูลขาวสาร 37
2.12.การเพิ่มขอมูลขาวประชาสัมพันธ 39
2.13.การเพิ่มขอมูลในหนาหลัก 40
2.14.ปฏิทินกิจกรรม 41

2. สารบัญ
เรื่อง หนา
2.15.การใหบริการ 43
2.16.แบบสํารวจความคิดเห็น 51
2.17.เมนูผลงานของเรา 53
2.18.ภาพกิจกรรม 54
2.19.เมนูติดตอเรา 56
2.20.แผนที่เว็บไซต 57
3. ระบบ Portfolio
3.1. การเขาใชงานและการจัดการขอมูลพื้นฐาน 59
3.2. แฟมประวัติ 64
3.3. แฟมจัดเก็บผลงาน 65
3.4. กระดานขาว 66
3.5. อัลบั้มภาพ 68
3.6. จดหมาย 70
3.7. คนหาสมาชิก 72
3.8. สมุดบันทึก 73
3.9. สํารวจความคิดเห็น 74
3.10.ขาวจากเว็บหลัก 74
3.11.ลิงคที่เกี่ยวของ 75
3.12.สถิติการเขาชม 73
3.13.การใชงานระบบแฟมสะสมผลงาน 76
3.14.การใชระบบเปลี่ยนภาษา 78

3. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
1คูมือใชงานระบบสําหรับผูดูแลระบบ
คูมือการใชงานระบบOBECLMS
1. ระบบ USER
จะแสดงสวนจัดการเกี่ยวกับสมาชิกภายในระบบทั้งหมด ไมวาจะเปนการสมัครสมาชิก คนหา
สมาชิกแกไขสิทธิ์สมาชิก ตางถูกจัดการดวยสวนนี้ทั้งหมด
1.1 การสมัครสมาชิกสามารถทําไดโดยคลิก “เขาสูระบบ” มุมบนขวามือ ดังรูปที่ 1.1.1
รูปที่ 1.1.1 เขาสูระบบ
เมื่อคลิกเขาสูระบบแลว จะเขาสูหนาตางเขาสูระบบ สําหรับผูดูระบบ(Admin) ระบบไดกําหนด
รหัสผานไวแลวตั้งแตในสวนของการติดตั้งดังนั้นเมื่อปรากฏหนาตางนี้ ผูดูระบบ (Admin) สามารถเขาสู
ระบบไดเลยโดยไมตองสมัครสมาชิกใหม
รูปที่ 1.1.2 หนาตางการLogin เขาสูระบบ

4. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
2คูมือใชงานระบบสําหรับผูดูแลระบบ
1.2 การ Login เขาสูระบบ
เมื่อคลิก “เขาสูระบบ” มุมบนขวามือ จะเจอหนาตางเขาสูระบบ ใส ชื่อผูใช รหัสผาน และปอนรหัส
ลับในสวนของรหัสลับนี้เพื่อปองกันจากผูไมหวังดีที่จะเขามาเจาะระบบทางการล็อกอิน เรียกวาSQL
Injectionโดยระบบจะสรางรหัสขึ้นมา5 ตัวแสดงขึ้น ใหพิมพตามที่ชองปอนรหัสลับ โดยพิมพใหถูกตอง
แลวคลิก ดังรูปที่ 1.2.1
รูปที่ 1.2.1 การ Login เขาใชงาน
เมื่อเขาสูระบบแลว ระบบจะแสดงขอความตอนรับ ชื่อ และสถานะของผูใชใหทราบวา ผูใชเขา
ระบบดวยชื่อและสถานะอะไร ดังรูปที่ 1.2.2
รูปที่ 1.2.2 แสดงชื่อที่เขาระบบ
รูปที่ 1.2.3 แสดงชื่อที่เขาระบบพรอมกับสถานะของผูใช
การออกจากระบบทําไดโดยคลิก จะมีหนาตางแสดงขอความออกจากระบบ
รูปที่ 1.2.4 การออกจากระบบ

5. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
3คูมือใชงานระบบสําหรับผูดูแลระบบ
1.3 จัดการสมาชิกระบบ
จะแสดงการจัดการสมาชิกขอบระบบทั้งหมดตั้งแตการสรางผูใชระบบการใหสิทธิ์ตาง ๆ
ผูใชงานจัดการสมาชิกระบบนี้ ไดแก ผูดูแลระบบ(Admin) เพียงคนเดียวเทานั้นดังรูปที่1.3.1
รูปที่ 1.3.1เมนูจัดการสมาชิกระบบ
หนาตางจะแสดงรายละเอียดผูใชทั้งหมดในระบบดังรูปที่1.3.2
รูปที่ 1.3.2 ตารางแสดงรายละเอียดผูใชในระบบ
จัดการสมาชิกระบบประกอบดวยสวนตาง ๆ ดังนี้
1.3.1 สรางผูใชใหมจะแสดงการสรางผูใชใหมในระบบ ซึ่งจะสรางโดยผูดูแลระบบ โดยจะ
ตางจากการสมัครสมาชิกที่หนาระบบ คือ ผูใชใหมในระบบจะสามารถ
เปนผูดูแลระบบได ซึ่งการสมัครสมาชิกที่หนาระบบนั้น จะเปนไดแคครูผูสอน
กับนักเรียนเทานั้น ดังรูปที่ 1.3.3

6. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
4คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 1.3.3 การสรางผูใชใหม
1.3.2 นําเขาผูใชจํานวนมากจากไฟลจะแสดงการนําเขาผูใชจํานวนมากเขาสูระบบรายละเอียด
จะกลาวไวในหัวขอที่ 9 การแปลง (Covert) การใชงานระบบ LMS เดิมไปสูระบบ LMS
ใหม
1.3.3 ระบบยืนยันนักเรียนอัตโนมัติ จะแสดงการยืนยันนักเรียนใหสามารถเขาระบบไดทันที
หลังจากสมัครสมาชิกไดหรือไม
1.3.4 การคนหาผูใชงาน จะแสดงการคนหาผูใชงานในระบบ ดังรูปที่ 1.3.4 ประกอบดวย
สวนตาง ๆ ดังนี้
1. ผูใชงาน จะแสดงชื่อหรือ Username ของผูใชงานที่ตองการคนหา
2. ประเภทของผูใชงาน จะแสดงประเภทของผูใชงานที่ตองการคนหา
3. สถานะใชงาน จะแสดงสถานการณใชงานของผูใชที่ตองการคนหา
รูปที่ 1.3.4 การคนหาผูใชงาน

7. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
5คูมือใชงานระบบสําหรับผูดูแลระบบ
1.3.5 ตารางแสดงผูใชงานจะแสดงรายละเอียดผูใชงานในระบบทั้งหมด ซึ่งผูดูแลระบบ
สามารถแกไขสิทธิ์ตาง ๆ ของผูใชได ดังรูปที่ 1.3.5 (ผูดูแลระบบไมสามารถจัดการสิทธิ์
ของตนเองได) ดังนี้
สัญลักษณแทน การระงับการใชงาน
สัญลักษณแทน การแกไขขอมูล
สัญลักษณแทน การจัดการสิทธิ์
สัญลักษณแทน การลบสมาชิก
รูปที่ 1.3.5 ตารางแสดงผูใชงาน
รูปที่ 1.3.6 การแกไขขอมูล
รูปที่ 1.3.7 การจัดการสิทธิ์

8. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
6คูมือใชงานระบบสําหรับผูดูแลระบบ
1.4 แกไขขอมูลสวนตัว
จะแสดงการแกไข เพิ่มขอมูลสวนตัวของแตละผูใชงาน คลิกปุม เมื่อแกไขประวัติ
สวนตัวเรียบรอยแลว คลิก “อัพเดตประวัติสวนตัว” ดังรูปที่ 1.4.1
รูปที่ 1.4.1 การแกไขขอมูลสวนตัว

9. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
7คูมือใชงานระบบสําหรับผูดูแลระบบ
1.5 จัดการคลังรูปภาพสมาชิก
ผูพัฒนาระบบไดออกแบบในสวนนี้เพื่อใหรองรับการจัดการรูปภาพสมาชิก ซึ่งมีผูดูและระบบ
(Admin) เปนผูจัดการในสวนนี้ โดยที่สามารถเพิ่มรูปไดถึง3 รูปแบบ คือ ทางการ สุภาพ และทั่วไป
เพื่อใหผูใชสามารถเลือกภาพที่ตองการใหแสดงไดหลากหลาย โดยมีวิธีในการจัดการคลังรูปภาพ
สมาชิกดังนี้เลือกเมนู จัดการสมาชิก จะปรากฏหนาตางในสวนการจัดการคลังรูปสมาชิก ดังรูป
รูปที่ 1.5.1 การคนหาผูใช
เลือกขอมูลของผูใชที่ตองการจะปรับปรุงคลังรูปภาพ จากนั้นเลือก จะพบขอมูล
ของสมาชิกที่ตองการคนหา ดังรูปที่1.5.2
รูปที่ 1.5.2 เลือกสมาชิกที่ตองการจัดการรูปภาพ
เลือกสมาชิกที่ตองการปรับปรุงคลังรูปภาพสมาชิกโดยเลือก จะปรากฏหนาตางการทํางานของ
คลังภาพสมาชิก ใหเลือกหัวขอของคลังรูปภาพสมาชิกที่ตองการโดยมีหัวขอ ดังรูปที่15.3

10. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
8คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 1.5.3 เลือกหมวดรูปภาพ
เมื่อเลือกลักษณะรูปที่ตองการแลวจะปรากฏหนาตางของการเพิ่มรูปภาพคลังสมาชิก จากนั้นเลือก
เพื่อเลือกรูปที่ตองการเพิ่มเขาสูคลังรูปภาพสมาชิกแลวเลือก เพื่อบันทึกรูปภาพ ดัง
รูปที่ 1.5.4
รูปที่ 1.5.4 การนําเขารูปภาพ
หลังจากที่ทําการบันทึกรูปภาพเรียบรอยแลวจะปรากฏรูปที่1.5.5 ขึ้นมา และผูใชงานสามารถลบ
รูปออก หรือ เพิ่มรูปใหมไดโดยเลือก
เพื่อเพิ่มรูปภาพที่ตองการ
เพื่อลบภาพที่ตองการออกจากคลังรูปภาพสมาชิก
รูปที่ 1.5.5 แสดงรูปภาพ

11. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
9คูมือใชงานระบบสําหรับผูดูแลระบบ
1.6 การตั้งคาการเขาใชงาน
ในสวนนี้ผูดูแลระบบ(Admin) เทานั้นที่สามารถตั้งคาเวลาในการเขาใชงานระบบไดในกรณีที่
มีการเปดบราวเซอรทิ้งเอาไว แตไมมีการเคลื่อนไหว ระบบจะทําการLogout โดยอัตโนมัติ
รูปที่ 1.6.1การตั้งคาเวลาในการใชงาน

12. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
10คูมือใชงานระบบสําหรับผูดูแลระบบ
1.7 การนําเขาผูใชงาน
ในสวนของการจัดการสมาชิกที่สามารถทําการUp load สมาชิกแบบกลุม โดยการเลือก
เพื่อทําการเพิ่มขอมูลสมาชิก ดังรูปที่1.7.1
รูปที่ 1.7.1 เมนูการนําเขาผูใช
เมื่อเลือกแลวจะปรากฏหนาที่ใชในการUp load สมาชิกแบบกลุม ใหเลือก เพื่อเรียก
เอกสารที่มีนามสกุล .txt, .xls (อาจหมายถึงโปรแกรมNote pad, Microsoft excel)
รูปที่ 1.7.2 การเรียกไฟลขอมูลในการนําเขา
จากนั้นใหเลือก เพื่อใหระบบทําการUp loadขอมูลสมาชิก เมื่อระบบทํา
การเพิ่มขอมูลสมาชิกเรียบรอยแลวจะปรากฏขอความดังนี้
รูปที่ 1.7.3 ระบบแจงการนําเขาขอมูล
เมื่อจัดการขอมูลสมาชิกเรียบรอยแลว ใหทดลองตรวจสอบวาขอมูลสมาชิกที่ไดเพิ่มใหมนั้น

13. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
11คูมือใชงานระบบสําหรับผูดูแลระบบ
สามารถใชงานไดหรือยัง โดยการเลือก และระบุขอมูลในการคนหาตามที่ตองการ และ
สามารถคนหาสมาชิกไดทั้งในรูปแบบตามตัวอักษร ตามลําดับการเปนสมาชิก และตามสถานะสิทธิ์การเขา
ใชงาน ตามสัญลักษณดังนี้
แสดงลําดับตามการเปนสมาชิก
แสดงลําดับตามตัวอักษร
แสดงลําดับสถานะสิทธในการใชงาน
รูปที่ 1.7.4 ตรวจสอบรายชื่อทีนําเขา
ขอมูลสมาชิกที่เพิ่มเขามาใหมในระบบสามารถจัดการ ปรับปรุงขอมูลสมาชิกไดทันที่โดยเลือก
เพื่อปรับปรุงขอมูลสมาชิก

14. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
12คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 1.7.5 การปรับปรุงขอมูลสมาชิก
การปรับปรุงขอมูลสมาชิกในที่นี้ ผูพัฒนาระบบไดปรับปรุงการเพิ่มขอมูลสมาชิกที่จําเปน
เพื่อใหผูใชสามารถใชงานไดสะดวกขึ้นโดยไมจําเปนตองเพิ่มขอมูลE-mail ก็ได
การนําเขาขอมูลในรูปแบบ
1. ทําการพิมพขอมูลผูใชลงไปในไฟลtext ซึ่งประกอบดวยขอมูลที่สําคัญคือ
- ชื่อผูใช (Username)
- รหัสผาน (Password)
- ชื่อ (First name)
- นามสกุล (Last name)
- เพศ (Sex)
- อีเมล (Email)
- สิทธของผูใชภายในระบบ (Role Assignment)วาเปน อาจารยหรือนักเรียน
 ถาเปนอาจารยใหพิมพteacher
 ถาเปนนักเรียนใหพิมพstudent
- ชวงชั้น, ชั้นเรียน, หองเรียน(มีเฉพาะสิทธิ์ที่เปนนักเรียน)
- การเพิ่ม รายชื่อคนตอไปใชการเคาะEnter
(ถาขอมูลไหนไมมี ใหเวนวางไวโดยมีเครื่องหมาย, กํากับไวเหมือนเดิมเชน นที, ,M,)

15. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
13คูมือใชงานระบบสําหรับผูดูแลระบบ
ตัวอยางเชน
รูปที่ 1.7.6 การนําเขาชนิดเอกสาร.txt
รูปที่ 1.7.7 การนําเขาชนิดเอกสาร.xls
จากตัวอยางจะเห็นไดวาขอมูลผูใชคนที่1 เปน อาจารย โดยมี
ชื่อผูใช : Teacher natee
รหัสผาน : 1234
ชื่อ : นที
นามสกุล: ทองสุข
เพศ : M (เพศชาย)
อีเมล : teachernatee@obec.com
สิทธของผูใชภายในระบบ: Teacher
จากตัวอยางจะเห็นไดวาขอมูลผูใชคนที่2 เปน นักเรียน โดยมี
ชื่อผูใช: Studentvaree
รหัสผาน: varee1234
ชื่อ : วารี
นามสกุล : ใจสุข
เพศ : F (เพศหญิง)
อีเมล : (ไมมี)
สิทธของผูใชภายในระบบ:Student
ชวงชั้น:4
ชั้นเรียน:4
หองเรียน :
จากนั้นบันทึกไฟล ขั้นตอนนี้สําคัญมาก การบันทึกไฟลแนะนําใหSave asและเลือก
การ Encoding เปน UTF-8 ไมเชนนั้นขอมูลที่เปนภาษาไทยจะไมถูกบันทึกเขาสูระบบรูปประกอบวิธีการ
Save asไฟล text

16. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
14คูมือใชงานระบบสําหรับผูดูแลระบบ
1.8 การลบขอมูลสมาชิกออกจากระบบ
ในกรณีที่จบการศึกษาและการยายสถานศึกษา ซึ่งผูดูแลระบบ(Admin) สามารถเรียกดูขอมูลได
โดยการเลือกเมนูจัดการระดับชั้นทางซายมือ เมื่อคลิกแลวจะปรากฏหนาสําหรับจัดการระดับชั้นดังรูป
รูปที่ 1.8.1 หนาสําหรับจัดการระดับชั้น
การลบนักเรียนที่จบการศึกษา ใหผูใชงานเลือก จะปรากฏหนาใน
การแสดงรายการนักเรียนดังรูปที่1.8.2
รูปที่ 1.8.2 รายการนักเรียนที่จบการศึกษา
เลือกวันที่ ที่นักเรียนจบการศึกษา จะแสดงรายชื่อของนักเรียนที่สําเร็จการศึกษาแลวที่มีในระบบ
ซึ่งในระบบจะทําการลบขอมูลตางๆ ของนักเรียนเรียบรอย แตจะปรากฏชื่อใหทราบวามีนักเรียนชื่อ
อะไรบาง เทานั้น ดังรูปที่ 1.8.3
รูปที่ 1.8.3 รายชื่อนักเรียนที่จบการศึกษา

17. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
15คูมือใชงานระบบสําหรับผูดูแลระบบ
การลบนักเรียนที่ยายสถานที่การศึกษาในสวนนี้กลาวถึงการลบขอมูลสมาชิกออกจากระบบ ใน
กรณีที่ยายโรงเรียน ซึ่งผูใชงานสามารถเรียกดูขอมูลไดโดยการเลือกเมนูจัดการสมาชิกโดยจะปรากฏ
หนาตางในการจัดการสมาชิกดังรูปที่ 1.8.4
รูปที่ 1.8.4 การลบขอมูลสมาชิกออกจากระบบ
คนหารายชื่อนักเรียนที่ยายโรงเรียน โดยเลือก จากนั้นระบบจะตรวจสอบรายชื่อที่
คนหาให ผูดูแลระบบ(Admin) สามารถจัดการขอมูลที่มีโดยการเลือกใชสัญญาลักษณดังนี้
คือ การจัดการสิทธิ์ของผูใช
คือ ลบผูใช
คือ แกไขขอมูลผูใช
/ คือ แสดง / ซอน
รูปที่ 1.8.5 ตรวจสอบรายชื่อที่คนหา
จากรูปในการคนหา เลือก เพื่อลบขอมูลผูใช จากนั้นจะปรากฏกลองขอความถามเพื่อยืนยัน
การลบ ใหเลือก ดังรูปที่ 1.8.6
รูปที่ 1.8.6 ยืนยันการลบขอมูล

18. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
16คูมือใชงานระบบสําหรับผูดูแลระบบ
1.9 การเปลี่ยนภาษาที่หนาแสดงผล
โดยเว็บไซตจะสามารถเปลี่ยนไดถึงสองภาษาคือ ภาษาไทยและภาษาอังกฤษ จะอยูที่มุมซาย
บนของเว็บโดยถาเปนระบบนี้จะเปลี่ยนภาษาในสวน ของแทบเมนูดานขางและหัวขอหลัก
 ถาตองการเปลี่ยนภาษาเปนภาษาอังกฤษ ใหคลิกที่รูป
 ถาตองการเปลี่ยนภาษาเปนภาษาไทยใหคลิกที่รูป
 ถาตองการซอนหรือแสดงภาพแบนเนอรที่เปนแฟลตใหคลิกที่ไอคอนรูป

19. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
17คูมือใชงานระบบสําหรับผูดูแลระบบ
2. ระบบ CMS
2.1. โครงสรางของระบบ
ระบบ CMS เปนระบบที่ใชในการบริหารจัดการขอมูลพื้นฐานตาง ๆ โดยผูดูแลระบบ (Admin)
ที่สามารถจัดการขอมูลตางๆ ของเว็บไซต ซึ่งมีโครงสรางของระบบแบงออกเปน 4 สวนหลัก ๆคือ
สวนที่ 1) เปนสวนที่แสดงชื่อโรงเรียน พื้นหลังหรือภาพเคลื่อนไหวในสิ่งที่เดน
และสําคัญที่สื่อถึงโรงเรียนนั้น ๆ รวมถึงจะเปนสวนที่จะใหขอมูลโรงเรียน
กิจกรรม ผลงาน กลุมสาระการเรียนรู บริการ และแผนที่เว็บไซต
รูปที่ 2.1.1 โครงสรางของระบบสวนที่ 1)
สวนที่ 2)เปนสวนที่แสดงโมดูลที่เปดใชงานอยูในขณะนั้น ซึ่งโมดูลดังกลาว
อาจจะปรากฏทางฝงซาย หรือขวาของเว็บไซต หรือตําแหนงใด ๆ นั้นขึ้นอยูกับ
ผูดูแลระบบที่จะบริหารจัดการ อีกทั้งลักษณะของโมดูลแตละโมดูลนั้นจะมี
ลักษณะการใชงานที่แตกตางกันซึ่งจะกลาวในรายละเอียดตอไป
รูปที่ 2.1.2 โครงสรางของระบบสวนที่2)

20. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
18คูมือใชงานระบบสําหรับผูดูแลระบบ
สวนที่ 3) เปนสวนที่แสดงรายละเอียดของระบบ เชน ชื่อหนวยงาน ที่อยู เบอร
โทรศัพทโทรสาร อีเมลและเจาของลิขสิทธิ์เว็บไซต เพื่อใหบุคคลที่เขาสู
เว็บไซตสามารถติดตอสอบถามได ซึ่งขอมูลในสวนนี้สามารถแกไข เปลี่ยนแปลงไดโดย
ผูดูแลระบบ
รูปที่ 2.1.3 โครงสรางของระบบสวนที่ 3)
สวนที่ 4) เปนสวนที่ใชในการแสดง ขาวประชาสัมพันธ มุมคลายเครียด และกระดาน
สนทนา เชนเดียวกันกับสวนที่(1-3) คือ ผูดูแลระบบสามารถเพิ่ม แกไข ซอน และลบ
ขอมูลไดทั้งหมดในสวนนี้ ดังรูปที่ 2.1.4
รูปที่ 2.1.4 โครงสรางของระบบสวนที่4)

21. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
19คูมือใชงานระบบสําหรับผูดูแลระบบ
2.2. เปลี่ยนหนากาก(Theme)
สวนนี้เปนการแสดงการเปลี่ยนการแสดงผลหนากาก (Theme) ระบบหนากากนี้ไดพัฒนาใหมีการ
รองรับการใชงานถึง 24 แบบ โดยเลือก ที่เมนู “การจัดการระบบเว็บไซต” ดังรูป
รูปที่ 2.2.1 หนากากการแสดงผลระบบแบบตาง ๆ
เมื่อเลือกหนากาก (Theme) ที่ตองการไดแลว เลือก เพื่อทําการเปลี่ยนหนากาก
(Theme) ที่ตองการใชงาน

22. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
20คูมือใชงานระบบสําหรับผูดูแลระบบ
2.3. เปลี่ยนFlash/พื้นหลัง/Footer
สวนนี้เปนเรื่องของการปรับเปลี่ยน Flashหรือรูปภาพสวนหัว (Banner)ของเว็บไซตพื้นหลัง
(Background)รูปภาพในสวนลางของเว็บไซต (Footer) ซึ่งมีการใชงานที่งายขึ้นโดยการเลือกสัญลักษณที่อยู
ดานบนของ หนากาก (Banner) ดังนี้
สัญลักษณ การแกไขไฟล
สัญลักษณ การนําออก
สัญลักษณ การปรับตั้งคาใหม
รูปที่ 2.3.1 การเปลี่ยนFlash/พื้นหลัง/Footer
เมื่อตองการเปลี่ยน Flash/พื้นหลัง/Footer ใหคลิกปุม เพื่อเลือก Flash/พื้นหลัง/Footer
เมื่อเลือกที่ตองการไดแลวคลิก “แกไขขอมูล”
รูปที่ 2.3.2 การเพิ่มหนากากใหม

23. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
21คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.3.3 แสดงขั้นตอนการเพิ่มหนากาก
หากตองการเพิ่มหนากากใหมใหกับระบบ ใหทําการคลิกเลือกที่ปุมเพิ่มหนากากที่ละไฟลที่ดานบน
ขวาดังรูปที่2.3.2 จากนั้นระบบจะเขาสูหนาจัดการหนากากโดยสามารถที่จะกําหนด สีหนากาก รูปแบบ
หนากาก แบบเมนู และบล็อก ซึ่งเปนสวนประกอบของหนากาก ดังรูปที่2.3.3 จากนั้นทําการเพิ่มขอมูล
รูปที่ 2.3.4 การเพิ่มหนากากแบบไฟลZip
สําหรับการเพิ่มหนากากแบบไฟลZip นั้นหากทําการสรางหนากาก และทําการexportเก็บไว
สามารถที่จะนําไฟลนั้นมาสรางหนากากในรูปแบบเดิมไดโดย ทําการเลือกเพิ่มหนากากแบบไฟลZip ที่มุม
ดานซายบนดังรูปที่2.3.4
การเปลี่ยนเมนูจะแสดงการแสดงผลของเมนู ซึ่งตัวเมนูนี้จะไมไดขึ้นอยูกับหนากาก (Theme) มี 8
แบบ คลิก “เปลี่ยนเมนู” ที่เมนู “จัดการระบบเว็บไซต”

24. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
22คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.3.5 การเปลี่ยนเมนู
เมื่อเลือกเมนูที่ตองการไดแลว คลิก“แกไขขอมูล” เพื่อทําการเปลี่ยนเมนูในสวนนี้หากแกไขที่เมนู
ดานซายจะเปนการแกไขเมนูของหนาที่ใชงานในปจจุบัน ซึ่งหากเขาไปที่จัดการหนากาก >เลือกแกไข
หนากาก >เมนู ในสวนนี้จะเปนการแกไขเมนูของหนากากที่เลือกแกไข

25. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
23คูมือใชงานระบบสําหรับผูดูแลระบบ
2.4. การจัดการลําดับชั้น
จัดการระดับชั้นระบบสามารถที่จะเลื่อนชั้นเรียนใหกับนักเรียนไดในแบบทั้งหมดหรือสามารถที่
จะเลื่อนเปนรายบุคคลได โดยที่ผูดูแลระบบสามารถที่จะคนหาไดตามชวงชั้นเรียน ระดับชั้น และหองเรียน
และยังสามารถที่จะดูรายชื่อของนักเรียนยอนหลังที่จบการศึกษาไปแลวได
รูปที่ 2.4.1 ระบบจัดการระดับชั้นเรียน
รูปที่ 2.4 .2 ระบบจัดการระดับชั้นเรียนนักเรียนที่จบการศึกษา

26. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
24คูมือใชงานระบบสําหรับผูดูแลระบบ
2.5. ระบบกรองคําหยาบในสวนของ
ระบบกรองคําหยาบในสวนของ ระบบ USER มีระบบกรองคําหยาบเพื่อใชแปลงคําที่ไม
สุภาพ ใหเปนคําที่สุภาพเหมาะสมกับการใชงานเพื่อการศึกษา โดยระบบการกรองคําหยาบจะแบงออกเปน
2 สวนดวยกัน คือ คําที่ตองการกรอง และคําที่ออนไหวดังในรูปที่ 2.5.1
รูปที่ 2.5.1แสดงหนากรองคําหยาบ
คําที่ตองการกรอง
เมื่อตองการเพิ่มการกรองคําหยาบใหคลิกที่ปุม เพื่อไปยังหนา
เพิ่มคําหยาบดังแสดงในรูปที่2.5.2
รูปที่ 2.5.2 หนาเพิ่มคําหยาบ
รูปแบบในการเพิ่มตัวกรองคําหยาบ คือ “คําหยาบ, คําที่ตองการแทนที่” เชน เมื่อตองการแทนที่คํา
วา “หมา” ซึ่งเปนคําหยาบวา “สุนัข” ก็ใหพิมพวา “หมา, สุนัข” เปนตน เมื่อเพิ่มคํากรองคําหยาบเสร็จแลว
ใหคลิกที่ปุม เพื่อบันทึกขอมูล

27. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
25คูมือใชงานระบบสําหรับผูดูแลระบบ
คําที่ออนไหว
ความจําเปนของระบบคําที่ออนไหว คือ เพื่อปองกันความผิดพลาดจากการกรองคํา
หยาบของระบบในคําที่มีการสะกดคําเหมือนกัน เชน จากการที่เราเพิ่มคําวา“หมา” ลงไปในระบบ
กรองคําหยาบ หากระบบพบคําวา“หมา” ก็จะแปลงเปนคําวา “สุนัข” ทั้งนี้ หากระบบตรวจเจอคํา
วา “หมา” จากคําวา“ความหมาย” ระบบก็จะแทนที่ดวย“สุนัข” ก็จะไดคําวา“ความสุนัขย”ดังนั้น
เมื่อเราใสคําวา“ความหมาย” ในสวนของคําที่ออนไหว ระบบก็จะรูวาคําวา“ความหมาย” เปนคน
ละคํากับ“หมา”ทําใหระบบไมแทนที่คํานี้ดวย คําที่ตองการกรองการเพิ่มคําที่ออนไหวสามารถเพิ่ม
ไดโดยคลิกที่คําวา คําที่ออนไหว ดังแสดงในรูปที่2.5.3
รูปที่ 2.5.3แสดงขอความที่เชื่อมไปยังหนาเพิ่มคําออนไหว
จากนั้นระบบจะแสดงหนาสวนที่เพิ่มคําออนไหวดังรูปที่2.5.4
รูปที่ 2.5.4 แสดงหนาเพิ่มคําออนไหว

28. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
26คูมือใชงานระบบสําหรับผูดูแลระบบ
เมื่อตองการเพิ่มหรือแกไขคําที่ออนไหวใหคลิกที่ปุม ระบบจะแสดงผล
รูปที่ 2.5.5 แสดงการเพิ่มคําที่ออนไหว
เมื่อเสร็จแลวใหคลิกที่ปุม เพื่อบันทึกคําที่ออนไหวที่ตองการเพิ่ม

29. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
27คูมือใชงานระบบสําหรับผูดูแลระบบ
2.6. จัดการขอความวิ่ง
จัดการขอความวิ่งขอความวิ่งในสวนนี้เราสามารถจะสรางขอความใหวิ่งในสวนหนาแรกได คือ
ขอความที่เลื่อนจากทางซายไปทางขวา ซึ่งอยูที่สวนหัวของเว็บไซต
รูปที่ 2.6.1 ขอความวิ่ง
เมื่อตองการจัดการขอความวิ่ง ใหคลิกที่เมนู “จัดการขอความวิ่ง” ที่ “ระบบจัดการเว็บไซต” ดังรูปที่2.6.2
รูปที่ 2.6.2 การแกไขขอความวิ่ง
เมื่อแกไขขอความตามตองการแลว คลิก “แกไขขอมูล”

30. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
28คูมือใชงานระบบสําหรับผูดูแลระบบ
2.7. จัดการปอบอัพ
ปอบอัพคือ หนาตางที่แสดงขึ้นมาโดยอัตโนมัติเมื่อมีการเปดเว็บไซต โดยสามารถกําหนดไดดังรูปที่ 2.7
รูปที่ 2.7.1 จัดการบอฟอัพ
คลิกปุม เพื่อเพิ่มบอฟอัพ ระบบจะแสดงผลดังรูป
รูปที่ 2.7.2 แสดงการเพิ่มขอมูลบอฟอัพ
- เนื้อหา เพิ่มขอความที่ตองการใหแสดง
- วันที่ประกาศ คือวันที่เริ่มใหบอฟอัพแสดง
- วันสิ้นสุด คือวันที่บอฟอัพหยุดแสดง
- ความกวาง คือความกวางของบอฟอัพ
- ความสูง คือความสูงของบอฟอัพ
- Uploadไฟล คือ ไฟลภาพที่ตองการแสดงในบอฟอัพ โดยคลิกปุม เพื่อเลือกรูปภาพ
เมื่อเพิ่มขอมูลตามที่ตองการแลว คลิก“เพิ่มขอมูล”

31. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
29คูมือใชงานระบบสําหรับผูดูแลระบบ
2.8. การเพิ่มBlocks
การเพิ่มBlocksสามารถทําไดโดยคลิกที่ ซึ่งอยูดานลางของเว็บไซต ทั้งทางซายและ
ทางขวา เมื่อคลิกแลวระบบจะแสดงผลดังรูปที่2.8.1
รูปที่ 2.8.1 การเพิ่มBlocks
เมื่อเลือกชื่อ Blocksที่ตองการไดแลว คลิกปุม“เพิ่ม Blocks”
Blocksมีทั้งหมด 4 ประเภท ดังรูปที่2.8.2
รูปที่ 2.8.2 ประเภทของBlocks
- ใส Code ใน BlocksคือBlocksที่ผูใชสามารถสราง Code เองได
- สาสนจากผูบริหาร คือBlocksที่สามารถแสดงขอความตางๆ
- ลิงคแสดงรูป คือ Blocksที่แสดงรูปภาพ
- ลิงคแสดงขอความคือ Blocksที่แสดงขอความและลิงคไปยังเว็บไซตอื่นได

32. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
30คูมือใชงานระบบสําหรับผูดูแลระบบ
การใชงาน Blocksแตละประเภท
2.8.1 Blocksประเภท ใสCode ใน Blocks ระบบจะแสดงผลดังรูปที่ 2.8.3
รูปที่ 2.8.3 Blocksประเภท ใสCode ใน Blocks
คลิกที่ ระบบจะแสดงผลดังรูปที่2.8.4
รูปที่ 2.8.4 การแกไขขอมูลในBlocks
ใส Code ในชองใส Code Freedจากนั้นคลิกปุม“แกไขขอมูล”
2.8.2 Blocksประเภทสาสนจากผูบริหาร ระบบจะแสดงผลดังรูปที่2.8.5
รูปที่ 2.8.5 Blocksประเภทสาสนจากผูบริหาร
คลิกที่ ระบบจะแสดงผลดังรูปที่2.8.6

33. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
31คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.8.6 การเพิ่มขอมูลสาสนจากผูบริหาร
- หัวขอสาสน คือ ชื่อของสาสนที่แสดง
- อัพโหลดรูปภาพ คือ ไฟลภาพประกอบของสาสนนั้น โดยคลิกที่ปุม“Browse..” เพื่อเลือก
ไฟลภาพที่ตองการ
- เนื้อหา คือ เนื้อหาของสาสนที่ตองการแสดง
- สาสนจาก คือ ชื่อของผูออกสาสน
เมื่อใสขอมูลครบแลวคลิดที่ปุม“เพิ่มขอมูล”ระบบจะกลับไปยังหนาหลักและแสดงผลดังรูปที่2.8.7
รูปที่ 2.8.7 การแสดงผลของBlocksสาสนจากผูบริหาร
ผูใชสามารถคลิกที่รูปภาพเพื่อเขาไปดูขอมูลและแกไขขอมูลได ดังรูปที่2.8.8

34. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
32คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.8.8รายละเอียดสาสน
Blocksประเภทลิงคแสดงขอความคือ Blocksที่แสดงขอความและลิงคไปยัง
เว็บไซตอื่นได โดยระบบจะแสดงผลดังรูปที่2.8.9
รูปที่ 2.8.9 Blocksประเภทลิงคแสดงขอความ
คลิกที่ ระบบจะแสดงผลดังรูปที่2.8.10
รูปที่ 2.8.10 การจัดการเมนูของBlocksประเภทลิงคแสดงขอความ
Blocksประเภทลิงคแสดงขอความมีรูปแบบของเมนู3 ประเภท คือ
- ขอมูลพื้นฐานทั่วไป
- ทําเนียบผูบริหาร
- ลิงคไปยังเว็บไซตอื่น

35. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
33คูมือใชงานระบบสําหรับผูดูแลระบบ
2.8.4.1 การเพิ่มเมนูแบบทําเนียบผูบริหาร
ใสชื่อเมนูในชอง ใสชื่อเมนูที่ตองการ เลือกเปนแบบทําเนียบผูบริหาร
แลวคลิกปุมเพิ่มเมนูยอย ระบบจะแสดงผลดังรูปที่ รูปที่ 2.8.11
รูปที่ 2.8.11 การเพิ่มเมนูของBlocksลิงคแสดงขอความ แบบขอมูลพื้นฐานทั่วไป
เมื่อเพิ่มขอมูลเสร็จแลว คลิกที่ “ปดหนาตาง” ระบบจะแสดงชื่อเมนูนี้ในBlocksที่หนาหลักและ
แสดงผลดังรูปที่ 2.8.12
รูปที่ 2.8.12 การแสดงผลของBlocksประเภทลิงคแสดงขอความ

36. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
34คูมือใชงานระบบสําหรับผูดูแลระบบ
2.9. การสรางทําเนียบผูบริหาร
รูปที่ 2.9 การสรางทําเนียบผูบริหาร
คลิกเมนูประเภททําเนียบผูบริหารที่สรางไวในBlocksลิงคแสดงขอความ ระบบจะแสดงหนา
สําหรับการจัดการสวนนี้ ซึ่งสามารถเพิ่มแถวได แกไขสวนหัวไดดวยดังรูปที่2.9.1
รูปที่ 2.9.1 การสรางทําเนียบผูบริหารขั้นตอนที่1
คลิกที่ ระบบจะแสดงผลดังรูปที่2.9.2
รูปที่ 2.9.2 การสรางทําเนียบผูบริหารขั้นตอนที่2
คลิกที่ ระบบจะแสดงผลดังรูปที่ ระบบจะแสดงผลดังรูปที่2.9.3
รูปที่ 2.9.3 การสรางทําเนียบผูบริหารขั้นตอนที่3
เมื่อใสขอมูลเสร็จแลวคลิกที่ปุม “เพิ่มขอมูล” ระบบจะแสดงผลดังรูปที่2.9.4

37. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
35คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.9.4 แสดงผูบริหารระดับที่1
หากตองการเพิ่มขอมูลผูบริหารในระดับเดียวกันใหคลิก หากตองการ
เพิ่มขอมูลผูบริหารในระดับถัดไปใหคลิก แลวทําตามขั้นตอนที่ 2
การเพิ่มเมนูแบบลิงคไปยังเว็บไซตอื่น
ใสชื่อเมนูในชอง ใสชื่อเมนูที่ตองการ เลือกเปนแบบลิงคไปยังเว็บไซตอื่น แลวคลิกปุม เพิ่มเมนู
ยอย ระบบจะแสดงผลดังรูปที่ 2.9.1.1
รูปที่ 2.9.5 Blocksลิงคแสดงขอความ แบบลิงคไปยังเว็บไซตอื่น
ใส Addressที่ชอง URL:จากนั้นคลิกที่“ปดหนาตาง” ระบบจะแสดงผลดังรูป
รูปที่ 2.9.6 การแสดงผลของBlocksประเภทลิงคแสดงขอความ
ระบบสามารถลิงคไปยัง www.google.comได โดยคลิกที่เมนู Google

38. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
36คูมือใชงานระบบสําหรับผูดูแลระบบ
2.10.การแกTitle และ ขอมูลที่แสดงในFooter
Title คือ แถบแสดงชื่อของเว็บไซต ซึ่งอยูบนสุดทางดายซาย สามารถแกไขไดโดยคลิกที่ปุม
ซึ่งอยูดานลางของเว็บไซตใน Footer ทางดานซาย ระบบจะแสดงผลดังรูปที่2.10
รูปที่ 2.10 การแกไขขอมูลหลัก
เมื่อใสขอมูลที่ตองการใหแสดงครบแลว คลิกที่ปุม “แกไขขอมูลหลัก” ระบบจะบันทึกขอมูลและ
แสดงผลดังรูปที่2.10.1
รูปที่ 2.10.1 Titleของเว็บไซต
รูปที่ 2.10.2ขอมูลที่แสดงในFooter

39. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
37คูมือใชงานระบบสําหรับผูดูแลระบบ
2.11.การเพิ่มขอมูลขาวสาร
ระบบสามารถเพิ่มขอมูลขาวสารได โดยคลิกที่ จะปรากฏหนาสําหรับใสสื่อ
เพิ่มดังรูปที่ 2.11.1
รูปที่ 2.11.1หนาแสดงเพิ่มขาวสาร
เมื่อเพิ่มขอมูลเรียบรอยแลวจะปรากฏเนื้อหาในหนาแรกดังรูปภาพขางลาง
รูปที่ 2.11.2 การแสดงผลขาวสารทั่วไป
การแกไขขาวสารทั่วไปเมื่อคลิก ระบบจะแสดงผลดังรูปที่2.11.2

40. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
38คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.11.3 หนาแกไขขอมูลขาวสารทั่วไป
เมื่อใสขาวสารที่ตองการแลว คลิกที่ “แกไขขอมูล”ระบบจะบันทึกขอมูลและแสดงผลที่หนาหลัก
และแสดงผลดังรูปที่2.11.3
รูปที่ 2.11.4 การแสดงผลขาวสารทั่วไป

41. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
39คูมือใชงานระบบสําหรับผูดูแลระบบ
2.12.การเพิ่มขอมูลขาวประชาสัมพันธ
ระบบสามารถเพิ่มขอมูลขาวสารได โดยคลิกที่ ระบบจะแสดงผลดังรูป
รูปที่ 2.12.1เพิ่มขอมูลขาวสาร
- หัวขอขาว คือ เนื้อหาของขาวที่ตองการประชาสัมพันธในสวนนี้สามารถเพิ่มสื่อประสมใน
รูปแบบ VDO รูปภาพได
- เนื้อหาขาว คือ เนื้อหาของขาวที่ตองการประชาสัมพันธ
- วันที่ประกาศคือ วันที่ตองการใหระบบเริ่มแสดงขาวประชาสัมพันธ
- วันสิ้นสุด คือ วันที่ตองการใหระบบสิ้นสุดการแสดงขาวประชาสัมพันธนั้น
- รูปที่ 1,2,3,4 คือ รูปภาพที่ประกอบขาวประชาสัมพันธ สามารถเลือกภาพที่ตองการแสดง
โดยคลิกที่“Browse…”
- ตําแหนงรูป คือ ตําแหนงที่ตองการใหรูปแสดง สามารถแสดงไดทั้งตําแหนงกลาง
ตําแหนงซาย และตําแหนงขวา
- File ประกอบ คือ File ที่ประกอบขาวประชาสัมพันธ
เมื่อเพิ่มขอมูลขาวที่ตองการประชาสัมพันธเรียบรอยแลวคลิกที่“เพิ่มขอมูล”ระบบจะแสดงผลดังรูปที่2.12.2
รูปที่ 2.12.2 แสดงขาวประชาสัมพันธ

42. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
40คูมือใชงานระบบสําหรับผูดูแลระบบ
2.13.การเพิ่มขอมูลในหนาหลัก
ระบบสามารถเพิ่มขอมูลขาวสารได โดยคลิกที่ ระบบจะแสดงผลดังรูปที่2.13.1
รูปที่ 2.13.1 การเพิ่มขอมูลหนาหลัก
เมื่อใสขอมูลที่ตองการครบแลว คลิกที่“เพิ่มขอมูล” ระบบจะแสดงผลดังรูปที่2.13.2
รูปที่ 2.13.2 การแสดงผลหัวขอใหม

43. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
41คูมือใชงานระบบสําหรับผูดูแลระบบ
2.14.ปฏิทินกิจกรรม
ระบบสามารถบันทึกกิจกรรมในแตละวันได โดยคลิกวันที่ตองการบันทึกกิจกรรม ระบบจะ
แสดงผลดังรูป
รูปที่ 2.14.1 ปฏิทินกิจกรรม
คลิกที่ เพื่อบันทึกกิจกรรม ระบบจะแสดงดังรูปที่2.14.2
รูปที่ 2.14.2 ระบบจัดการปฏิทินกิจกรรม

44. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
42คูมือใชงานระบบสําหรับผูดูแลระบบ
เมื่อใสขอมูลเรียบรอยแลวคลิกที่“เพิ่มปฏิทินกิจกรรม” ระบบจะแสดงผลดังรูปที่2.14.3
รูปที่ 2.14.3ปฏิทินงานประจําวัน
ถาตองการเพิ่มกิจกรรมอีกคลิกที่ ถาไมตองการเพิ่มขอมูลแลวคลิกที่

45. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
43คูมือใชงานระบบสําหรับผูดูแลระบบ
2.15.การใหบริการ
ถาม-ตอบเปนบริการสําหรับตอบคําถามที่มีการถามบอย สามารถแสดงไดทั้ง
คําถามและคําตอบ โดยคลิกที่ เมนู ถาม-ตอบ ระบบจะแสดงผลดังรูปที่2.14.1
รูปที่ 2.15.1บริการถาม-ตอบ
คลิกที่ เพื่อเพิ่มหัวขอถาม-ตอบ ระบบจะแสดงผลดังรูปที่2.14.2
รูปที่ 2.15.2 การเพิ่มขอมูล ถาม-ตอบ

46. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
44คูมือใชงานระบบสําหรับผูดูแลระบบ
เมื่อเพิ่มขอมูลเรียบรอยแลว คลิกที่ “เพิ่มขอมูล”
รูปที่ 2.15.3 แสดงหัวขอคําถาม
หากตองการรูคําตอบใหคลิกที่ตัวคําถามนั้น ระบบจะแสดงผลดังรูปที่2.14.4
รูปที่ 2.15.4 แสดงคําถามและคําตอบ
2.14.2 ลิงคตาง ๆ สามารถเชื่องโยงไปยังเว็บไซตอื่นภายนอกไดโดยคลิกที่เมนู ลิงค
ตางๆ ดังรูปที่2.14.5
รูปที่ 2.15.5 เมนูลิงคตาง ๆ
คลิกที่ เพื่อเพิ่มหัวขอของลิงค ระบบจะแสดงผลดังรูปที่2.14.6
รูปที่ 2.15.6 การเพิ่มหัวขอ

47. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
45คูมือใชงานระบบสําหรับผูดูแลระบบ
เมื่อเพิ่มขอมูลเรียบรอยแลวคลิกที่ ระบบจะแสดงผลดังรูปที่ 2.14.7
รูปที่ 2.15.7 แสดงหัวขอ
คลิกที่ เพื่อเพิ่มลิงคยอย ระบบจะแสดงผลดังรูปที่2.14.8
รูปที่ 2.15.8 การเพิ่มหัวขอลิงคยอย
เมื่อเพิ่มขอมูลที่ตองการเรียบรอยแลว คลิกที่ ระบบจะบันทึกขอมูลและแสดงผลดังรูปที่2.14.9
รูปที่ 2.15.9 แสดงลิงคภายนอก
2.14.3 กระดานสนทนา

48. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
46คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.15.10 กระดานสนทนา
กระดานสนทนามีไวเพื่อใหผูดูแลระบบไดติดตอพูดคุยแสดงความคิดเห็นเกี่ยวกับการใชงาน
ตลอดจนปญหาตาง ๆที่เกี่ยวของกับเว็บไซตในสวนของการใชงานกระดานสนทนาสามารถกระทําไดดังนี้
หนาแรกของกระดานสนทนา จะแสดงหัวขอประเด็นที่ผูดูแลระบบไดทําการตั้งไว วันที่ไดทําการ
ตั้งประเด็น สามารถเขาชมประเด็นที่ไดตั้งไวทั้งหมด ที่ปุมประเด็นทั้งหมด หรือสามารถตั้งประเด็นใหมได
โดยคลิกปุมตั้งประเด็นใหม
- สามารถเขาดูประเด็นที่ไดมีผูดูแลระบบตั้งไวโดยทําการคลิกที่ชื่อของประเด็นนั้น
รูปที่ 2.15.11 แสดงหัวขอประเด็นตาง ๆ
- เมื่อทําการคลิกเลือกประเด็นที่ตองการอานแลว หนาจอจะแสดงผลดังรูปที่2.14.12

49. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
47คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.15.12 แสดงรายละเอียดของประเด็น
- สามารถทําการตอบประเด็นได โดยเขียนความคิดเห็นลงในชอง ขอเชิญรวมตอบ
ประเด็น จากนั้นปอนรหัสลับ แลวคลิกปุม ตอบประเด็น
- สามารถดูประเด็นทั้งหมดไดโดยเลือก ประเด็นทั้งหมดจากนั้นหนาจอจะแสดงดังรูปที่2.14.13
รูปที่2.15.13 แสดงประเด็นทั้งหมดบนกระดานสนทนา
ภายในกระดานขาวจะประกอบไปดวย
- ประเด็นที่ หมายถึงประเด็นที่แสดงอยูลําดับที่เทาไหร
- ชื่อประเด็น
- ผูถาม
- จํานวนคําตอบ

50. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
48คูมือใชงานระบบสําหรับผูดูแลระบบ
- สามารถทําการคนหาประเด็นได โดยพิมพประเด็นที่ตองการคนหา ที่ชองกรอกคําคน
จากนั้นคลิกปุม Search หนาจอจะแสดงผลดังรูปที่ 2.14.14
รูปที่ 2.15.14 แสดงผลการคนหา
- สามารถตั้งประเด็นใหมได โดยคลิกปุมตั้งประเด็นใหม ปุมนี้จะแสดงอยูทั้งสองหนาคือ หนาแรก
กระดานสนทนา และหนาประเด็นทั้งหมด
รูปที่ 2.15.15 แสดงหนาการตั้งประเด็น
 สามารถพิมพประเด็นที่จะตั้งไดในชอง ประเด็นคําถาม
 พิมพรายละเอียดคําถามไดในชองรายละเอียด
 จากนั้นเลือกตั้งประเด็นหนาจอจะแสดงผลดังรูปที่2.14.16

51. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
49คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.15.16 ผลการตั้งประเด็นใหม
สามารถเขาดูประเด็นที่ตั้งใหมโดยเลือก แสดงประเด็นหรือตั้งประเด็นใหม เลือกตั้งประเด็นใหม
2.14.4 สมุดเยี่ยมชม
รูปที่ 2.15.17 การบันทึกสมุดเยี่ยมชม
- สามารถลงนามเยี่ยมชมได โดยเขียนขอความลงในชอง ขอความจากนั้นปอนอีเมล
และรหัสลับ แลวคลิกปุม “บันทึกลงนาม"

52. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
50คูมือใชงานระบบสําหรับผูดูแลระบบ
รูปที่ 2.15.18 ผลการบันทึกลงนาม

53. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
51คูมือใชงานระบบสําหรับผูดูแลระบบ
2.16.แบบสํารวจความคิดเห็น
ระบบสามารถสรางแบบสํารวจความคิดเห็น ซึ่งผูใชสามารถเขามาโหวตได โดยคลิกที่ “จัดการ
โหวต”ดังรูปที่ 2.16
รูปที่ 2.16.1 การจัดการโหวต
คลิกที่“ตั้งแบบสํารวจใหม” เพื่อสรางแบบสํารวจ ระบบจะแสดงดังรูปที่2.16
รูปที่ 2.16.2การตั้งแบบสํารวจใหม

54. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
52คูมือใชงานระบบสําหรับผูดูแลระบบ
ตั้งคําถามและกําหนดคําตอบไดมากที่สุด 9 คําตอบ เมื่อเพิ่มขอมูลเรียบรอยแลว คลิกที่ “เพิ่มขอมูล”
ระบบจะบันทึกขอมูลและแสดงขอมูลใน Blocksแบบสํารวจความคิดเห็น ดังรูป
รูปที่ 2.16.3Blocksแบบสํารวจความคิดเห็น
หากตองโหวต ใหเลือกคําตอบที่ตองการแลวคลิกโหวตคะแนน และดูผลสรุปการโหวตโดยการ
คลิกที่ “จัดการโหวต” ระบบจะแสดงผลดังรูปที่รูป
รูปที่ 2.16.4แบบสรุปผลการสํารวจความคิดเห็น

55. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
53คูมือใชงานระบบสําหรับผูดูแลระบบ
2.17.เมนูผลงานของเรา
ระบบสามารถแสดงผลงานไดโดยคลิกเมนูดานบนของเว็บไซตที่มีคําวา ผลงานของ
เรา แลวจะปรากฏหนาสําหรับการเพิ่มขอมูล ดังรูป โดยคลิกที่ เพื่อเพิ่มขอมูลผลงานของเรา
รูปที่ 2.17.1 การเพิ่มผลงานของเรา
- หัวขอผลงาน คือ หัวขอผลงานที่ตองการแสดง
- รายละเอียด คือ รายละเอียดหรือคําอธิบายผลงานที่ตองการแสดง
- รูปที่ 1,2,3,4 คือ รูปภาพที่ประกอบผลงาน สามารถเลือกภาพที่ตองการแสดงโดยคลิกที่
“Browse…”
- ไฟลประกอบ คือ ไฟลที่ประกอบผลงาน สามารถเลือกไฟลที่ตองการแสดงโดยคลิกที่
“Browse…”
เมื่อเพิ่มขอมูลที่ตองการเรียบรอยแลว คลิกที่ ระบบจะบันทึกขอมูลและแสดงผลดังรูป
รูปที่ 2.17.2 แสดงผลงานของเรา

56. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
54คูมือใชงานระบบสําหรับผูดูแลระบบ
2.18.ภาพกิจกรรม
ระบบสามารถเพิ่มรูปภาพกิจกรรมตางๆ ไดโดยคลิกที่ ระบบจะแสดงผลดังรูป
รูปที่ 2.18.1การเพิ่มขอมูลภาพกิจกรรม
เพิ่มชื่อหัวขอของภาพกิจกรรมแลวคลิกที่ ระบบจะแสดงผลดังรูปที่2.17.2
รูปที่ 2.18.2 การอัพโหลดภาพกิจกรรม

57. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
55คูมือใชงานระบบสําหรับผูดูแลระบบ
เลือกไฟลภาพที่ตองการและใสคําอธิบายรูป จากนั้นคลิกที่ ระบบจะแสดงผลดังรูป
รูปที่ 2.18.3แสดงผลภาพกิจกรรม
หากตองการเพิ่มรูปในหัวขอนี้ใหคลิกที่รูปภาพ ระบบจะแสดงผลดังรูปที่ 2.17.4
รูปที่ 2.18.4 การอัพโหลดรูปเพิ่มเติม
หากตองการเพิ่มหัวขอภาพกิจกรรมใหม ใหคลิกที่ โดยการเพิ่มไฟลภาพนั้น สามารถ
เพิ่มไฟลที่เปนไฟลรูปภาพและไฟลที่เปน .Zip ซึ่งการแสดงผลของรูปภาพนั้น จะมีการแสดงแบบHighslide
โดยเมื่อคลิกดูที่รูปภาพ สามารถที่จะเลื่อนดูภาพตอไปไดโดยไมตองเปดรูปใหม

58. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
56คูมือใชงานระบบสําหรับผูดูแลระบบ
2.19.เมนูติดตอเรา
ใชสําหรับแสดงขอมูลขอผูดูแลระบบ เพื่อความสะดวกในการติดตอกับผูใช สามารถบันทึกขอมูล
โดยคลิกที่ ระบบจะแสดงผลดังรูป
รูปที่ 2.19.1 การแกไขขอมูล
เมื่อใสขอมูลเรียบรอยแลว คลิกที่ ระบบจะแสดงผลดังรูป
รูปที่ 2.19.2 แสดงผลผูที่สามารถติดตอได

59. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
57คูมือใชงานระบบสําหรับผูดูแลระบบ
2.20.แผนที่เว็บไซต
แผนที่เว็บไซตเปรียบเสมือน สารบัญของเว็บไซต ซึ่งแสดงหัวขอหลักและหัวขอยอยของBlocks
ตางๆ ซึ่งสามารถคลิกเพื่อลิงคไปยังหนานั้นๆได ดังรูป
รูปที่ 2.20.1 แผนที่เว็บไซต

60. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
58คูมือใชงานระบบสําหรับผูดูแลระบบ
3.ระบบแฟมสะสมงาน(Portfolio)
สวนนี้เปนการเขาใชงานในสวนของการจัดการขอมูลพื้นฐานสวนตัวของผูใชดวยการเขาใชงาน
การสูเขาระบบแฟมสะสมผลงานนั้นทุกครั้งจําเปนจะตองการปอนชื่อผูใช และรหัสผาน ซึ่งระบบLoginนั้น
ในสวนนี้จะมีเมนูอยูที่ดานขวามือของผูใชดังรูปที่3
รูปที่ 3 เมนูแฟมสะสมงาน
กอนที่จะเขาไปจัดการแฟมสะสมผลงานของตนเองหรือเขาชมของคนอื่นไดนั้น ตองทําการLogin
เขาสูระบบกอน ถาหากยังไมไดปอนชื่อเขาระบบ ระบบจะทําการแจงเตือนเพื่อใหทําการLogin กอนเขา
ระบบดังรูปที่3.1
รูปที่ 3.1 แสดงหนาแจงเตือนเมื่อไม Loginเขาสูระบบของแฟมสะสมผลงาน
การ Login เขาใชงาน มีรูปแบบเดียวกับการLogin เขาสูระบบระบบเว็บไซดดังรูปที่3.2
รูปที่ 3.2แสดงหนา Login เขาสูระบบของแฟมสะสมผลงาน
เมื่อเขาสูระบบแฟมสะสมผลงานแลว จะปรากฏสวนประกอบของระบบประกอบโมดูลตาง ๆ ดังนี้

61. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
59คูมือใชงานระบบสําหรับผูดูแลระบบ
3.1 ขอมูลพื้นฐาน
เปนสวนที่แสดงขอมูลของผูใชงานซึ่งผูใชงานเองสามารถแกไขขอมูลสวนนี้ไดโดยการแกไข
ขอความสวนหัวและสวนทายของแฟมสะสมผลงาน ดังนี้
การแกขอมูลสวนหัวของขอมูลพื้นฐาน
เลือก ที่อยูในสวนหัวของระบบแฟมสะสมผลงานเพื่อแกไขขอมูลพื้นฐานดังรูป
รูปที่ 3.1.1แกไขขอมูลพื้นฐานขอความสวนหัวของแฟมสะสมผลงาน
กรอกขอมูลพื้นฐานที่ตองการจะแกในสวนหัวของแฟมสะสมผลงานจากนั้นเลือก ดังรูป
รูปที่ 3.1.2กรอกขอมูลพื้นฐาน
ขอมูลสวนหัวของแฟมสะสมผลงานที่ทําการแกไข
รูปที่ 3.1.3ขอมูลพื้นฐานสวนหัวของแฟมสะสมผลงาน

62. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
60คูมือใชงานระบบสําหรับผูดูแลระบบ
การจัดการรูปภาพสวนหัว
สวนนี้เปนการตกแตงแฟมสะสมผลงานของผูใช โดยการเพิ่มเติมรูปภาพที่ผูใชตองการในสวนหัว
ของแฟมสะสมผลงาน และพื้นหลังของแฟมสะสมผลงานโดยการนําเขารูปภาพจากภายนอกโดยเลือก
เลือกรูปที่ตองการลงในสวนของการเพิ่มรูปภาพจากนั้นเลือก ดังรูป
รูปที่ 3.1.4แสดงการเพิ่มรูปสวนหัวของแฟมสะสมผลงาน
รูปที่ 3.1.5แสดงรูปสวนหัวของแฟมสะสมผลงาน

63. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
61คูมือใชงานระบบสําหรับผูดูแลระบบ
การจัดการรูปภาพพื้นหลัง
สวนนี้เปนการตกแตงแฟมสะสมผลงานของผูใช โดยการเพิ่มเติมรูปภาพที่ผูใชตองการในสวนหัว
ของแฟมสะสมผลงาน และพื้นหลังของแฟมสะสมผลงานโดยการนําเขารูปภาพจากภายนอกโดยเลือก
เลือกรูปที่ตองการลงในสวนของการเพิ่มรูปภาพจากนั้นเลือก ดังรูป
รูปที่ 3.1.6แสดงการเพิ่มรูปพื้นหลังของแฟมสะสมผลงาน
รูปที่ 3.1.7แสดงการเพิ่มรูปพื้นหลังของแฟมสะสมผลงาน

64. จัดทําโดย มหาวิทยาลัยเทคโนโลยีสุรนารี | คูมือสําหรับการใชงานเว็บไซต
62คูมือใชงานระบบสําหรับผูดูแลระบบ
แกไขขอมูลสวนตัว
สวนนี้เปนสวนที่ผูใชสามารถแกไขขอมูลสวนตัวตาง ๆ ของผูใชไดเอง โดยมีการใชงานที่งายและ
สามารถแกไขไดเมื่อตองการ ไมจําเปนตองรอผูดูแลระบบ(Admin) มีขั้นตอนดังนี้
เลือกหัวขอ ที่อยูดานลางของรูป ดังรูปรูปที่3.1.8
รูปที่ 3.1.8เมนูการแกไข
หนาตางการแกไขขอมูลสวนตัว ดังรูป
รูปที่ 3.1.9แสดงการแกไขขอมูลสวนตัว
จากรูปที่ 3.1.9ขอมูลสวนตัวประกอบดวยสวนตาง ๆ ดังนี้
สวนที่ 1. ชื่อ-นามสกุล และรหัสผาน (ผูใชสามารถเปลี่ยนรหัสผานได)
สวนที่ 2. ขอมูลทั่วไป – วันเดือนปเกิด เพศ ศาสนา สัญชาติ
สวนที่ 3. ขอมูลที่ติดตอ – ที่อยู อีเมล หมายเลขโทรศัพท MSN HI5
สวนที่ 4. การแกไขรูปภาพ
สวนที่ 1
สวนที่ 2
สวนที่ 3
3
สวนที่ 4