คู่มือการใช้งานเวปไซค์และระบบจัดการหลังร้านของเวปไซต์ภาควิชาทัศนศิลป์

คมู ือการใชง านเวปไซคและระบบจดั การหลังรา นของเวปไซต
ภาควิชาทศั นศลิ ป
( User’s Manual)

สวนเทคโนโลยที างการศกึ ษาและสารสนเทศ
นางจริ พรรณ คำหม่นื กลุ
นักวิชาการคอมพวิ เตอร

Page |B

หมายเลขสำเนา รายช่ือผูถือครองเอกสาร
(Copy No.) (Distribution List)

ตนฉบับ ผูถือครอง / ผคู รอบครองสำเนา
1
2 สวนเทคโนโลยีทางการศกึ ษา
เลขานุการคณะวิจิตรศลิ ป
ภาควชิ าทัศนศิลป

ประวัตกิ ารใช้ และการแก้ไขเอกสารหรือบันทึกการเปลยี นแปลง(Amendment Record)

แกไ ข หมายเลข รายการการปรับปรงุ / แกไ ข วนั ทม่ี ผี ล ผแู กไ ข
ครั้งท่ี หนา บงั คับใช

0 ท้งั ฉบบั จัดทำเอกสารคร้ังแรก 1/12/64 จริ พรรณ คำหมื่นกลุ

1 ทง้ั ฉบบั แกไขความเปนปจ จุบนั ของเอกสารตามการพัฒนา 1/6/65 จิรพรรณ คำหมนื่ กุล
ระบบ

Page |C

คำนำ

คมู อื การใชงานเวปไซคข องภาควชิ าทัศนศลิ ป คณะวิจิตรศิลป มหาวทิ ยาลัยเชียงใหม ในเบอื้ งตนท่ีเรมิ่
ในการพัฒนานั้น มีวัตถุประสงคเพื่อเปนชองทางในการนำเสนอผลงานทางศิลปะของอาจารยและบุคลากร
ภายในภาควิชา อันประกอบไปดวย 5 สาขาในระดับปรญิ ญาตรี ไดแก สาขาวิชาศิลปะภาพพิมพ สาขาวิขา
จติ รกรรม สาขาวชิ าประติมากรรม สาขาวิชาสหศาสตรศลิ ป และ 1สาขาวิชาในระดบั ปริญญาโท คือ สาขาวชิ า
ทัศนศิลป ซึ่งการจัดแสดงนิทรรศการเปนกิจกรรมหลักทางวิชาการ ที่จะสงเสริมสนับสนุนใหนักศึกษาและ
คณาจารยไดสรางสรรคผลงานศิลปกรรม ตามแนวถนัดของตนเองและนำออกเผยแพรเปนประจำทุกป โดย
ผลงานท้งั หมดมีความหลากหลาย ท้งั รปู แบบจิตรกรรม ประตมิ ากรรม ภาพพิมพ ศลิ ปะจัดวาง ส่ือผลส วีดโี อ
อารต และ บทความวชิ าการดานศิลปะ

ตอมามีการเพิ่มเติมเนื้อหาภายในเวปไซตใหมีเรื่องของประวัติคณาจารย และ ผลงานของอาจารย
ภายในภาควชิ า รวมถงึ อาจารยผ ูท รงคุณวฒุ ิทีเ่ ปน บุคลากรอาวโุ สที่ใหเกยี รตนิ ำผลงานทเ่ี คยไดจ ดั แสดง มารวม
นำเสนอในเวปไซคน ้ี เพอื่ สรางแรงบนั ดาลใจแกผ ูที่สนใจไดเปน อยางดี

เนื้อหาในคูมือมุงหมายใหผูที่สนใจไดรับความรู ความเขาใจ ตลอดจนสามารถทำบริหารจัดการ
ปรับปรุงขอมูลภายในเวปไซคใ หเ ปนปจจบุ นั อยเู สมอ

นางจิรพรรณ คำหมนื่ กุล
นกั วิชาการคอมพวิ เตอร
สว นเทคโนโลยีทางการศกึ ษา

สารบัญ Page |D

วตั ถุประสงค หนา
ขอบเขต 1
คำจำกดั ความ 1
การเขา ชมหนา เวปไซต 1
การจดั การระบบหลงั บา นของเวปไซต 2

- การเขา สรู ะบบ 8
- การจัดการปทแี่ สดงผลงาน 9
- การจัดการการแสดงผลงานประจำป 10
- การจัดการขอ มูลสาขาวชิ า 12
- การจัดการขอมูลบุคคลากร 13
- การจัดการขอมลู ผลงานบุคลากร 16

Page |1

วตั ถุประสงค
1.1. เพื่อใหสวนเทคโนโลยีทางการศึกษาและสารสนเทศ มีคูมือการปฏิบัติงานในสวนของการใชงานเวป
ไซคภาควิชาทัศนศิลปที่ชัดเจน อยางเปนลายลักษณอักษร ที่แสดงถึงรายละเอียด ขั้นตอน การ
ปฏิบตั ิงาน การจดั การหลงั บา น และ สรางมาตรฐานการปฏบิ ตั งิ านทม่ี ุงไปสูการบริหารคณุ ภาพทั่วท้ัง
องคกรอยางมีประสิทธิภาพ เกิดผลงานที่ไดมาตรฐานเปนไปตามเปาหมาย ไดผลผลิตที่มีคุณภาพ
และ บรรลุขอ กำหนดทส่ี ำคญั ของกระบวนการ
1.2. เพื่อเปนหลักฐานแสดงวิธีการพัฒนาระบบเวปไซคภาควิชาทัศนศิลป และ สรางมาตรฐานการ
ปฏิบตั ิงานที่มุงสูก ารบริหารคุณภาพท่ัวทั้งองคกรอยางมีประสิทธิภาพ สามารถถายทอดใหก ับผูเขา
มาปฏิบตั ิงานใหม พัฒนาใหการทำงานเปน ไปอยางมืออาชพี
1.3. เพ่ือใชเปน เคร่อื งมือในการสรางมาตรฐานการพัฒนาระบบฐานขอ มลู เวปไซค

2. ขอบเขต
เอกสารฉบับนี้จะเริ่มตั้งแตการเขาชมเวปไซคสวนของหนาเวปไซค จนกระทั่งถึง การ Login เขาสู

ระบบ การจัดการหนาเวปไซค การจัดการขอมูลคณาจารย จนถึงการจัดการขอมูลผลงานของผลงาน
คณาจารย ซึ่งทั้งหมดจะนำมาแสดงผลทห่ี นาเวปไซค

3. คำจำกดั ความ
3.1. ระบบฐานขอมูล (Database) คือ กลุมของขอมูลที่ถูกเก็บรวบรวมไว โดยมคี วามสัมพันธซ่ึงกันและ
กัน มีระบบความสัมพันธระหวางขอมูลไวอยางชัดเจน ประกอบไปดวยแฟมขอมูลหลายๆแฟมท่ีมี
ขอมูลเกี่ยวของสัมพันธกันและเปดโอกาสใหผูใชสามารถใชงานและดูแลรกั ษาปองกนั ขอมูลเหลานนั้
ไดอยางมปี ระสทิ ธิภาพ
3.2. ระบบจัดการฐานขอมลู (Database Management System : DBMS) คอื ซอฟตแ วรท ี่เปนสื่อกลาง
ระหวา งผูใชง านและโปรแกรมตางๆ ทีเ่ กี่ยวของกับการใชฐานขอ มูล มีหนา ที่ชวยใหผใู ชเ ขาถึงขอมูล
ไดง ายสะดวกและมีประสิทธิภาพ โดยไมจำเปนตองรับรูเกี่ยวกับรายละเอียดภายในโครงสรางของ
ฐานขอมลู
3.3. ระบบหนา เวปไซค (Frontend) คือ สว นแสดงผลหนา เวปไซคใ หแกผ เู ขาชมท่วั ไป
3.4. ระบบจัดการหลังบา น (Backend) คอื สวนจัดการระบบผา นหลัง ทีต่ องมกี าร Login เขาสูระบบเพ่ือ
จัดการขอ มูล สำหรับนำมาแสดงผลในระบบ Frontend
3.5. ผูใชงาน (User) คือ ผูมีหนาที่จัดการขอมูลในสวนของเนื้อหา โดยผานระบบหลังบาน (Backend)
ของระบบ

Page |2

3.6. ผูดูแลระบบ (Admin) คือ ผูมหี นา ทีจ่ ัดการดูแลระบบทั้งหมด ท้ังโคด โปรแกรม จนกระทง่ั การจัดการ
เนื้อหาโดยตรงในฐานขอมูล

3.7. สวนไอที (IT) คอื หนวยเทคโนโลยที างการศึกษาและสารสนเทศ
4. การเขา ชมหนา เวปไซค

4.1. สามารถเขา ชมหนาเวปไซคไ ดที่ Link : http://visualarts.finearts.cmu.ac.th/index.php
4.2. ที่หนาเวปไซคจ ะพบปุมวงกลมดานบนขวา สำหรับกดดูเมนูตา งๆ ดงั รปู ภาพที่ 1 หนา เวปไซคห ลัก

รปู ภาพที่ 1 หนาเวปไซคห ลักของภาควชิ าทัศนศลิ ป
4.3. สว นของเมนจู ะประกอบไปดวย

4.3.1. Home สำหรบั กลับมาหนาหลกั
4.3.2. About สำหรับอธบิ ายเก่ยี วกับภาควชิ าและเวปไซค
4.3.3. Our Project สำหรับแสดงผลงาน
4.3.4. Staffs สำหรับแสดงรายช่อื บคุ ลากรภายในภาควชิ า
หากตองการปดเมนู ใหก ดทป่ี ุมกากบาทดา นบนของแถบสดี ำ ดังรปู ภาพที่ 2 แสดงเมนขู องเวปไซค

Page |3

รูปภาพที่ 2 แสดงเมนูของเวปไซต
4.4. หนา About หรอื เกีย่ วกับเรามรี ูปแบบดังรูปภาพท่ี 3 แสดงหนา About

รูปภาพท่ี 3 แสดงรายละเอียดของหนา About

Page |4

4.5. หนา Our Project เมอื่ เขามาสหู นานแ้ี ลว จะมงี านนิทรรศการแตล ะงานใหเลอื กรับชม ดงั รูปภาพท่ี
4 แสดงรายละเอยี ดในหนา Our Project

4.6. เมอ่ื เขาสงู านนิทรรศการทีเ่ ลือกจากขอ 4.5 แลว จะปรากฏ ผลงานทแ่ี สดงในงานนิทรรศการนัน้

Page |5

4.7. สามารถเขาไปดูรายละเอยี ดของแตล ะนิทรรศการได จากการคลกิ ที่รปู ภาพจากขอ 4.6

4.8. หนา แสดงขอ มลู คณาจารยของภาควิชา คลิกที่เมนู Staff จะปรากฏสาขาวิชาใหเ ลือก

Page |6

4.9. จากนั้นจะเห็นอาจารยภายในสาขาวิชา

4.10. คลกิ เลือกเขา ชมประวตั ขิ องอาจารยแตล ะทา น โดยดา นลา งจะเปน ผลงานท่ผี านมาของอาจารย
ทา นนั้น สามารถเลือกเขาไปชมรายละเอยี ดของงานแสดงได

Page |7

Page |8

4.11. คลกิ ท่ีภาพของงานแสดงเพื่อขยายขนาดของผลงาน

5. การจัดการระบบหลังบาน
5.1. การเขา สูระบบ
5.1.1.เขาไปที่ Link : http://visualarts.finearts.cmu.ac.th/Admin

5.1.2.ทำการกรอก Username และ Password ท่ีไดร บั
5.1.3.กดปุม Login

Page |9

5.2. การจัดการปท ่แี สดงผลงาน
5.2.1. การเรยี กดปู ท ่ีจัดแสดง
5.2.1.1. เมื่อ Login เสร็จแลวใหเ ลือกเมนู “จัดการปของผลงาน” ท่ีเมนูดา นซา ย
5.2.1.2. จะปรากฏหนา รายการปท ่ีจัดแสดงผลงานขอ มลู ทงั้ หมด
5.2.1.3. สามารถกดทส่ี ญั ลกั ษณ เพื่อจัดเรียงขอ มูลในแตละคอลัมภจ ากมากไปนอย หรือ
ก-ฮ ( )
5.2.1.4. สามารถคลกิ เรยี กจำนวนแถวท่ีจะแสดงในหนานี้ไดทมี่ มุ ซา ยบน แลว เลอื กจำนวน

แถวทอี่ ยากใหแสดง
5.2.1.5. เลือกหนา ถัดไปไดที่ดานลา งของตาราง

5.2.1.6. แสดงจำนวนรายการทงั้ หมดท่ีมใี นหนาน้ีท่ีดานลา งซายของตาราง

5.2.2. การเพ่ิมขอ มลู ปทจี่ ดั แสดง
5.2.2.1. ทีห่ นารายการปท จี่ ัดแสดงทั้งหมด มุมขวาบนของตารางจะมีคำวา เพ่มิ ขอ มลู
5.2.2.2. คลิกเขา ไปที่คำวาเพิ่มขอมลู จะปรากฏหนาแบบฟอรม ใหเ พมิ่ ขอมลู

5.2.2.3. กรอกเลอื กขอมูลปทจ่ี ะจัดแสดง ชือ่ นทิ รรศการ วนั ทีแ่ สดง วันที่ส้นิ สดุ การแสดง
และ รายละเอยี ดทีม่ ี
5.2.2.4. เพิ่มขอมูลรปู ภาพทเี่ ปนใบสจู ิบตั รของงานแสดง
5.2.2.5. บันทึกปุม Save

P a g e | 10

5.2.3. การแกไขขอมูลปท่ีจัดแสดง
5.2.3.1. หนา รายการขอมลู ปท จ่ี ดั แสดง หรือ หนา รายการมุมมองตารางใหคลกิ ที่สัญลกั ษณ
เพ่ือทำการแกไข
5.2.3.2. ทำการแกไ ขขอมลู ตามตอ งการ แลวกด Save

5.2.4.การลบหมวดหมู
5.2.4.1. ท่ีหนารายกาขอมูลปที่จดั แสดงหรือ หนา รายการมมุ มองตารางใหค ลกิ ที่สญั ลักษณ
เพ่ือทำการลบ
5.2.4.2. ระบบจะสอบถามเพื่อความมัน่ ใจอกี ครงั้ กอนจะทำการลบขอมลู

5.3. การจดั การการแสดงผลงานประจำป
5.3.1.การเรยี กดูรายการผลงานนทิ รรศการ
5.3.1.1. เมื่อ Login เสร็จแลวใหเลอื กเมนู “แสดงภาพผลงานประจำป” ท่เี มนดู านซาย
5.3.1.2. จะปรากฏหนา รายการผลงานทจ่ี ะแสดงในหนา Our Project ทัง้ หมด

P a g e | 11

5.3.1.3. สามารถกดทีส่ ัญลักษณ เพอื่ จัดเรยี งขอมลู ในแตล ะคอลมั ภจ ากมากไปนอย หรอื
ก-ฮ ( )

5.3.1.4. สามารถคลกิ เรยี กจำนวนแถวทจ่ี ะแสดงในหนานไ้ี ดท่มี มุ ซา ยบน แลว เลือกจำนวน
แถวท่ีอยากใหแสดง

5.3.1.5. เลอื กหนาถัดไปไดท ีด่ านลางของตาราง

5.3.1.6. แสดงจำนวนรายการทง้ั หมดท่ีมีในหนา น้ีท่ดี านลางซา ยของตาราง

5.3.2. การเพ่ิมขอ มูลผลงานที่จดั แสดง
5.3.2.1. ที่หนา รายการผลงานนทิ รรศการ มุมขวาบนของตารางจะมีคำวา เพ่ิมขอ มลู
5.3.2.2. คลิกเขา ไปท่ีคำวาเพ่ิมขอมลู จะปรากฏหนาแบบฟอรมใหเพม่ิ ขอมูล

5.3.2.3. ใหเ ลอื กปทีจ่ ะแสดงจากการกรอกในขอ 5.2 การจัดการปของผลงาน
5.3.2.4. เพิ่มรายละเอียดช่ือผลงาน ชื่อศลิ ปน รูปภาพ Display สำหรบั เปน ปกกอนเขา ไปดู

ผลงานจริง และ รปู ภาพ(หลายภาพ) สำหรบั แสดงรายละเอียดของผลงาน
5.3.2.5. บนั ทึกปุม Save

5.3.3. การแกไขขอมลู การแสดงภาพผลงานประจำป
5.3.3.1. หนา รายการแสดงภาพผลงานประจำปใหคลิกทีส่ ญั ลกั ษณ เพอื่ ทำการแกไข
5.3.3.2. ทำการแกไขขอมลู ตามตองการ แลวกด Save

5.3.4.การลบหมวดหมู
5.3.4.1. ท่หี นา รายการแสดงภาพผลงานใหคลิกทส่ี ญั ลักษณ เพ่อื ทำการลบ

P a g e | 12

5.3.4.2. ระบบจะสอบถามเพื่อความมนั่ ใจอีกครั้งกอนจะทำการลบขอมลู

5.4. การจดั การขอ มูลสาขาวิชา
5.4.1.การเรยี กดูรายการสาขาวชิ า
5.4.1.1. เมอ่ื Login เสรจ็ แลวใหเ ลือกเมนู “สาขาวิชา” ท่ีเมนดู า นซา ย
5.4.1.2. จะปรากฏหนา รายการผลงานทจ่ี ะแสดง Staff ทัง้ หมด

5.4.1.3. สามารถกดทสี่ ญั ลักษณ เพื่อจัดเรยี งขอ มลู ในแตละคอลมั ภจากมากไปนอย หรอื
ก-ฮ ( )

5.4.1.4. สามารถคลกิ เรยี กจำนวนแถวที่จะแสดงในหนา น้ไี ดท่ีมุมซายบน แลว เลือกจำนวน
แถวทีอ่ ยากใหแสดง

5.4.1.5. เลอื กหนาถัดไปไดท ี่ดา นลางของตาราง
5.4.1.6. แสดงจำนวนรายการทงั้ หมดท่ีมีในหนา น้ีทดี่ านลา งซา ยของตาราง

5.4.2. การเพมิ่ ขอ มูลสาขาวิชา
5.4.2.1. ท่หี นารายการสาขาวชิ า มุมขวาบนของตารางจะมคี ำวา เพ่ิมขอ มลู
5.4.2.2. คลกิ เขา ไปที่คำวาเพ่ิมขอมลู จะปรากฏหนา แบบฟอรม ใหเ พมิ่ ขอมลู

P a g e | 13

5.4.2.3. บนั ทึกปมุ Save
5.4.3. การแกไขขอมูลสาขาวชิ า

5.4.3.1. หนา รายการสาขาวชิ าใหคลิกท่สี ญั ลักษณ เพ่ือทำการแกไข
5.4.3.2. ทำการแกไขขอมูลตามตอ งการ แลวกด Save
5.4.4.การลบสาขาวิชา
5.4.4.1. ทีห่ นา รายการสาขาวชิ าใหค ลกิ ท่สี ัญลักษณ เพื่อทำการลบ
5.4.4.2. ระบบจะสอบถามเพ่ือความมน่ั ใจอีกครง้ั กอนจะทำการลบขอมูล

5.5. การจัดการขอ มูลบคุ ลากร
5.5.1.การเรียกดูรายการบุคลากร
5.5.1.1. เมื่อ Login เสร็จแลวใหเ ลือกเมนู “บุคลากร” ทีเ่ มนดู า นซา ย
5.5.1.2. จะปรากฏหนา รายการผลงานทจ่ี ะในหนา บุคลากรของแตล ะสาขาวชิ าทั้งหมด

P a g e | 14

5.5.1.3. สามารถกดที่สญั ลกั ษณ เพอ่ื จัดเรยี งขอ มลู ในแตละคอลมั ภจากมากไปนอย หรอื
ก-ฮ ( )

5.5.1.4. สามารถคลกิ เรยี กจำนวนแถวทจ่ี ะแสดงในหนา นไ้ี ดทม่ี มุ ซายบน แลว เลือกจำนวน
แถวที่อยากใหแสดง

5.5.1.5. เลอื กหนา ถัดไปไดทด่ี านลางของตาราง
5.5.1.6. แสดงจำนวนรายการทัง้ หมดทีม่ ใี นหนาน้ีท่ดี านลา งซา ยของตาราง
5.5.2. การเพมิ่ ขอ มูลบุคลากร
5.5.2.1. ท่ีหนารายการบุคลากร มมุ ขวาบนของตารางจะมีคำวา เพ่ิมขอมูล
5.5.2.2. คลิกเขาไปที่คำวา เพ่ิมขอมลู จะปรากฏหนาแบบฟอรม ใหเ พิ่มขอมูล

P a g e | 15

5.5.2.3. กรอกขอ มลู ตา งๆเขา ไปในแบบฟอรม และ เลือกสาขาวชิ าท่ีบุคลากรสังกดั อยู
5.5.2.4. บนั ทกึ ปุม Save
5.5.3. การแกไขขอมูลบุคลากร
5.5.3.1. หนา รายการบุคลากรใหค ลกิ ที่สญั ลกั ษณ เพื่อทำการแกไข
5.5.3.2. ทำการแกไขขอมลู ตามตอ งการ แลว กด Save
5.5.4.การลบขอ มลู บุคลากร
5.5.4.1. ท่ีหนารายการบุคลากรใหคลิกทสี่ ญั ลกั ษณ เพอ่ื ทำการลบ

P a g e | 16

5.5.4.2. ระบบจะสอบถามเพื่อความมั่นใจอกี ครงั้ กอนจะทำการลบขอ มลู
5.6. การจัดการขอ มูลผลงานบคุ ลากร

5.6.1.การเรยี กดูรายการผลงานบุคลากร
5.6.1.1. เมื่อ Login เสร็จแลวใหเ ลอื กเมนู “ผลงานบคุ ลากร” ทเี่ มนดู า นซา ย
5.6.1.2. จะปรากฏหนารายการผลงานในหนา บคุ ลากรของแตล ะสาขาวชิ าท้ังหมด

5.6.1.3. สามารถกดทีส่ ญั ลกั ษณ เพื่อจัดเรยี งขอมลู ในแตละคอลัมภจากมากไปนอย หรือ
ก-ฮ ( )

5.6.1.4. สามารถคลกิ เรียกจำนวนแถวที่จะแสดงในหนาน้ีไดทมี่ ุมซายบน แลวเลอื กจำนวน
แถวทอี่ ยากใหแสดง

5.6.1.5. เลือกหนา ถัดไปไดท่ดี า นลา งของตาราง
5.6.1.6. แสดงจำนวนรายการทั้งหมดทมี่ ีในหนา นีท้ ี่ดานลางซายของตาราง

5.6.2. การเพมิ่ ขอมูลผลงานบุคลากร
5.6.2.1. ท่ีหนา รายการผลงานบุคลากร มุมขวาบนของตารางจะมีคำวา เพ่มิ ขอมูล
5.6.2.2. คลกิ เขาไปท่ีคำวา เพ่ิมขอมลู จะปรากฏหนา แบบฟอรมใหเพม่ิ ขอมลู

P a g e | 17

5.6.2.3. กรอกขอ มลู ตางๆเขา ไปในแบบฟอรม และ เลอื กวา เปนผลงานของบุคคลากรทานใด
ในชอง ช่อื เจา ของผลงาน/โครงการ

5.6.2.4. บันทึกปุม Save
5.6.3. การแกไขขอมลู ผลงานบุคลากร

5.6.3.1. หนา รายการผลงานบคุ ลากรใหคลกิ ทสี่ ญั ลักษณ เพอ่ื ทำการแกไ ข
5.6.3.2. หากตอ งการลบขอมูลเดิมออกใหท ำการกดท่ี ลบภาพน้ี ใตภาพทีต่ องการลบออก

กอ น

P a g e | 18

5.6.3.3. ทำการแกไ ขขอมลู ตามตองการ แลวกด Save
5.6.4.การลบขอมลู ผลงานบคุ ลากร

5.6.4.1. ทหี่ นารายการผลงานบุคลากรใหค ลิกท่ีสัญลกั ษณ เพื่อทำการลบ
5.6.4.2. ระบบจะสอบถามเพ่ือความมนั่ ใจอกี คร้งั กอนจะทำการลบขอ มลู