คู่มือการพัฒนาเว็บไซต์ สำหรับหน่วยงานงานสังกัดกรมโยธาธิการและผังเมือง

องคค วามรตู ามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผา ังนเมชอืางง

เตรยี มความพรอ้ ม
กอ่ นเรม่ิ การพฒั นาระบบเวบ็ ไซต์หนว่ ยงาน

.................................................................... ....................

5.1 รหัสและขอ้ มูลสาหรับการเชอื่ มต่อและติดตั้งระบบ

1

2 2.1

2.2
2.3
3 3.1
3.2
3.3
3.4
4 4.1

4.2
4.3
44..45
4.6
5 5.1 6
5.2
5.3

ภาพที่ 5.1.1 แสดงข้อมลู ท่ใี ช้สำหรับกำรเข้ำถึงเครือ่ งแม่ขำ่ ยคอมพวิ เตอร์ (Web Server) และระบบต่ำงๆ
จำกภำพท่ี 5.1.1 แสดงถึงเอกสำรขอ้ มูลและรหสั ทผี่ ดู้ ูแลระบบเว็บไซต์ของหน่วยงำนสังกัดกรม จะต้องใช้
ประกอบในกำรดำเนนิ กำรเกยี่ วกบั กำรพัฒนำระบบเวบ็ ไซต์ของหน่วยงำน ประกอบดว้ ย

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม4ร3ู

คสํามู หอื รกบั ารหพนัฒวยนงาาเนว็บสังไซกตัดกรมโยธาธิการและผังเมอื ง

1. ช่ือหน่วยงำนเจำ้ ของข้อมลู
2. ข้อมลู ที่อยเู่ ว็บไซต์ (URL: Uniform Resource Locator)

2.1 ท่ีอยูเ่ ว็บไซต์ หรอื โดเมนเนม (หนำ้ เว็บไซต์) สำหรับเผยแพรส่ ำธำรณะ
2.2 ท่อี ยู่เวบ็ ไซต์ หรอื โดเมนเนม (หนำ้ ผู้ดแู ลระบบ) สำหรบั พฒั นำปรับปรงุ
2.3 ท่ีจัดเก็บไฟล์ตำ่ งๆ ของระบบเว็บไซต์หน่วยงำนบนเคร่ืองแม่ข่ำยคอมพวิ เตอร์
3. ข้อมูลและรหัสสำหรบั กำรโอนถ่ำยย้ำยไฟลต์ ำ่ งๆ ระหว่ำงเครือ่ งคอมพวิ เตอร์ทใี่ ช้งำนอยกู่ ับเครือ่ งแมข่ ำ่ ย
คอมพวิ เตอร์ (Web Server) (FTP: File Transfer Protocol)
3.1 ชื่อท่อี ยเู่ ครอ่ื งแมข่ ำ่ ยคอมพวิ เตอรท์ ี่ตอ้ งกำรโอนถำ่ ยย้ำยไฟล์ไปเก็บ
3.2 ชอื่ รหสั ผเู้ ข้ำใช้ระบบกำรโอนถำ่ ยย้ำยไฟล์
3.3 รหัสผำ่ น ผู้เข้ำใชร้ ะบบกำรโอนถ่ำยยำ้ ยไฟล์
3.4 หมำยเลขชอ่ งเชือ่ มตอ่ เพ่อื เข้ำถึงกำรใชง้ ำนระบบกำรโอนถำ่ ยย้ำยไฟล์
4. ขอ้ มูลและรหัสสำหรบั กำรจัดกำรระบบฐำนข้อมลู (DBMS: Database Management System)
4.1 ชื่อท่อี ยเู่ ครื่องแม่ข่ำยคอมพวิ เตอร์ทจ่ี ะเข้ำจดั กำรฐำนข้อมูลด้วยโปรแกรม phpMyAdmin
4.2 ชอ่ื ทีอ่ ยเู่ ครอ่ื งแมข่ ่ำยคอมพิวเตอร์ท่จี ะเข้ำจดั กำรฐำนข้อมูล และช่ือ (localhost) สำหรับกำร
ติดตงั้ CMS ครั้งแรก บนเครื่องแม่ขำ่ ยคอมพวิ เตอร์
4.3 ช่อื ฐำนขอ้ มูล
4.4 ชือ่ รหัส ผู้เข้ำใช้ระบบจัดกำรฐำนขอ้ มูล
4.5 รหัสผ่ำน ผู้เขำ้ ใช้ระบบจัดกำรฐำนขอ้ มูล
4.6 หมำยเลขชอ่ งเชื่อมต่อเพ่ือเขำ้ ถึงกำรใช้งำนระบบจัดกำรฐำนข้อมลู
5. ข้อมลู และรหัสสำหรบั กำรจดั กำรหนำ้ แสดงผลหนำ้ แรก (Intro)
5.1 ช่ือทีอ่ ยเู่ ครือ่ งแม่ข่ำยคอมพวิ เตอรท์ ก่ี ำรจัดกำรหนำ้ แสดงผลหนำ้ แรก
5.2 ชือ่ รหัส ผเู้ ขำ้ ใชร้ ะบบกำรจัดกำรหนำ้ แสดงผลหน้ำแรก
5.3 รหัสผ่ำน ผูเ้ ข้ำใชร้ ะบบกำรจัดกำรหน้ำแสดงผลหนำ้ แรก
5.4 หมำยเลขช่องเช่ือมตอ่ เพอื่ เขำ้ ถึงกำรใช้งำนระบบกำรจัดกำรหน้ำแสดงผลหน้ำแรก
6. ระบบตำ่ งๆ ทีเ่ ครอ่ื งแมข่ ำ่ ยคอมพวิ เตอร์สนับสนุนกำรบรหิ ำรจัดกำรระบบเวบ็ ไซต์หน่วยงำน
- โปรแกรมประมวลผลและแสดงผลเว็บไซต์ (Web Server)
- โปรแกรมประมวลผลชดุ คำสงั่
- โปรแกรมฐำนข้อมูล
- โปรแกรมสำหรบั จดั กำรฐำนข้อมลู (DBMS)

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 44

DPT KM Action Plan 2018

องคค วามรูตามประเดน็ ยทุ ธศาสตร กดรมา โนยกธาารธบกิ ารริกแาลระดผา ังนเมชอืา งง

5.2 การจาลองเคร่ืองแม่ขา่ ยคอมพิวเตอร์ (Virtual Web Server)
การจาลองเครื่องคอมพวิ เตอรท์ ีใ่ ช้งานอย่ใู ห้สามารถทางานเสมอื นเคร่อื งแม่ข่ายคอมพวิ เตอร์ให้บริการเวบ็ ไซต์

(Virtual Web Server) ตอ้ งอาศยั โปรแกรมทที่ างานในดา้ นนแี้ ละโปรแกรมทีน่ ิยมและไดย้ นิ กนั บอ่ ยๆ คือ Appserv,
XAMPP ซง่ึ ท้ัง 2 โปรแกรมจะผนวกโปรแกรมตา่ งๆ ประกอบดว้ ย โปรแกรมท่ที างานเป็นเว็บเซิร์ฟเวอร์ โปรแกรมท่ี
ประมวลผลชดุ คาสงั่ ภาษา โปรแกรมฐานขอ้ มูล และโปรแกรมจดั การฐานข้อมลู ให้สามารถติดตั้งได้ครงั้ เดียวจบ สาหรับ
คมู่ อื นจ้ี ะเน้นไปทีโ่ ปรแกรม Appserv
การดาวน์โหลดโปรแกรม Appserv
การดาวน์โหลดโปรแกรม Appserv มีข้ันตอน ดงั นี้
*ข้ันตอนที่ 1 เข้าเว็บไซตท์ ใี่ หบ้ ริการดาวนโ์ หลดโปรแกรม Appserv : https://sourceforge.net/projects/appserv/

1

3

ภาพท่ี 5.2.1 แสดงหน้าเวบ็ ไซตท์ ีใ่ ห้บริการดาวน์โหลดโปรแกรม Appserv
*ขัน้ ตอนท่ี 2 เลอื ก Appserv เวอร์ช่ันทต่ี ้องการ
*ข้ันตอนท่ี 3 กดปุ่มเพือ่ ดาวน์โหลด

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกปรรมะจโยาํ ปธงาบธแปิผกรนาะกรมาแารณลจัดะพกผ.าศังร.เ2คม5วือ6า1มงรู 45

คสําูม หอื รกับารหพนัฒว ยนงาาเนวบ็สงัไซกตดั กรมโยธาธกิ ารและผงั เมือง

Direct link mirror

ภาพท่ี 5.2.2 แสดงการรอการยนื ยนั การดาวน์โหลดโปรแกรม Appserv

จากภาพที่ 5.2.2 *ขั้นตอนท่ี 4 หากไม่ตอ้ งการรอเวลาการดาวนโ์ หลด ผู้ดแู ลระบบเว็บไซต์สามารถกดปุ่มเพือ่
ดาวน์โหลดเองได้ที่ direct link หรอื หากโหลดไมไ่ ดก้ ็สามารถกดปมุ่ โหลดสารองได้ท่ี mirror

Download

ภาพที่ 5.2.3 แสดงการดาวน์โหลดโปรแกรม Appserv บน GOOGLE Chrome
หลงั จากตามภาพท่ี 5.2.3 ดาวนโ์ หลดครบเตม็ 100 % เสร็จแล้ว *ข้ันตอนท่ี 5 ทาการเปิดโฟลเดอรท์ ่ีจัดเก็บ
ไฟล์ดาวน์โหลด ตามภาพที่ 5.2.4

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 46

DPT KM Action Plan 2018

องคความรูตามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผางั นเมชือา งง

ภาพที่ 5.2.4 ตาแหน่งท่ีจดั เก็บไฟล์ดาวนโ์ หลด
การติดตั้ง(Install) Appserv
การตดิ ตงั้ Appserv มีขั้นตอน ดังน้ี
*ขั้นตอนที่ 1 ทาการดับเบิลคลกิ ไฟล์ appserv-win32-8.5.0.exe ทไ่ี ด้ดาวน์โหลดไว้ ตามภาพท่ี 5.2.4

ภาพท่ี 5.2.5 แสดง *ขน้ั ตอนท่ี 2 ยอมรับฟรลี ขิ สิทธ์ิ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกปรรมะจโยําปธง าบธแปิผกรนาะกรมาแารณลจะัดพกผ.าศังร.เ2คม5วือ6า1มงรู 47

คสาํมู หอื รกบั ารหพนฒัว ยนงาาเนว็บสงัไซกตดั กรมโยธาธกิ ารและผงั เมอื ง

ภาพท่ี 5.2.6 แสดง *ขนั้ ตอนท่ี 3 เลอื กตาแหนง่ จดั เก็บโปรแกรมและรายการโปรแกรมที่ติดต้ังมาพร้อมกัน

ภาพที่ 5.2.7 แสดง *ข้ันตอนท่ี 4 ระบขุ ้อมูลชื่อเซิรฟ์ เวอรแ์ ละอีเมลผ์ ู้ดแู ลระบบเว็บไซต์
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 48

DPT KM Action Plan 2018

องคความรูตามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบกิ ารริกแาลระดผา งั นเมชือา งง

ภาพที่ 5.2.8 แสดง *ขัน้ ตอนท่ี 5 ระบรุ หัสผ่านสาหรับเขา้ จัดการฐานขอ้ มูลและยืนยนั การติดต้ัง

ภาพท่ี 5.2.9 แสดง *ขั้นตอนท่ี 6 เปดิ การใช้งาน Apache และ MySQL และส้นิ สุดการติดตั้ง
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกปรรมะจโยําปธงาบธแปิผกรนาะกรมาแารณลจะดั พผก.าศังร.เ2คม5วือ6า1มงรู 49

คสาํูม หอื รกับารหพนฒัว ยนงาาเนว็บสงัไซกตัดกรมโยธาธิการและผงั เมือง

ทดสอบการทางานเบอ้ื งต้น
*ขัน้ ตอนที่ 1 ทดสอบการทางานของ Apache Web Server

เขา้ โปรแกรมเปดิ เว็บแลว้ พมิ พช์ อื่ เซิร์ฟเวอร์ท่ีไดก้ าหนดไว้ในการข้นั ตอนการตดิ ตั้งขนั้ ตอนท่ี 4 ภาพที่ 5.2.7
(ในค่มู ือนี้ระบุคอื localhost) ถ้าแสดงผลตามภาพท่ี 5.2.10 แสดงวา่ การตดิ ตง้ั ถกู ต้องและพร้อมใชง้ าน

ภาพท่ี 5.2.10 แสดงผลการทางานของ Apache Web Server
*ขั้นตอนที่ 2 ทดสอบการทางานของโปรแกรมฐานขอ้ มลู (MySQL) และโปรแกรมจดั การฐานข้อมลู (phpMyAdmin)

เข้าโปรแกรมเปดิ เวบ็ แลว้ พิมพ์ http://localhost/phpMyAdmin แล้วระบุ Username : root และ
Password ทไี่ ด้ระบุไวใ้ นขัน้ ตอนการติดต้งั ข้นั ตอนที่ 5 ภาพที่ 5.2.8

ภาพที่ 5.2.11 แสดงผลการทางานของ MySQL, phpMyAdmin และสนิ้ สุดการทดสอบการทางาน
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 50

DPT KM Action Plan 2018

องคค วามรูตามประเด็นยุทธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผา งั นเมชอืางง

ภาพท่ี 5.2.12 แสดงโครงสร้างโฟลเดอรต์ า่ งๆ ของโปรแกรม Appserv
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกปรรมะจโยาํ ปธง าบธแปิผกรนาะกรมาแารณลจะดั พผก.าศังร.เ2คม5วือ6า1มงรู 51

คสําูมหอื รกับารหพนฒัว ยนงาาเนว็บสังไซกตดั กรมโยธาธกิ ารและผังเมอื ง

5.3 การติดต้งั Joomla บนระบบจาลองเครอื่ งแมข่ า่ ยคอมพิวเตอร์
การดาวนโ์ หลด (Download) Joomla และสว่ นเสริม (Extension), การตดิ ตง้ั (Install) Joomla, ปรบั ปรุงเวอร์ช่ัน

(Upgrade), ตดิ ต้งั ภาษา (Language), เครอ่ื งมือในการจัดการข้อความ (Editor)
• การดาวนโ์ หลด Joomla มขี ้ันตอน ดังนี้

ข้นั ตอนท่ี 1 เข้าเว็บไซตท์ สี่ นบั สนุนการดาวนโ์ หลด Joomla โดยพมิ พ์ URL: https://www.joomla.org 1
23

45

ภาพที่ 5.3.1 แสดงขน้ั ตอนการดาวนโ์ หลด Joomla และ Upgrade Packages

ขน้ั ตอนที่ 2 เลือกเมนู Download & Extend
ขน้ั ตอนที่ 3 เลอื กเมนู Joomla! Downloads
ขั้นตอนท่ี 4 เลือก Download Joomla! Full Package สาหรับการติดตั้งใหม่และสรา้ งเวบ็ ไซตใ์ หม่
ขนั้ ตอนที่ 5 เลอื ก Upgrade Packages สาหรับการปรบั ปรุงเวอรช์ ั่นเวบ็ ไซต์ให้เปน็ ปจั จุบนั

ภาพท่ี 5.3.2 แสดงไฟล์ Joomla และขั้นตอนการแตกไฟล์ Joomla ทีถ่ ูกบบี อัด
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 52

DPT KM Action Plan 2018

องคค วามรูตามประเดน็ ยทุ ธศาสตร กดรมา โนยกธาารธบกิ ารรกิ แาลระดผา งั นเมชือางง

• การดาวน์โหลดสว่ นเสรมิ (Extension) ภาษา (Language) ไทย (Thai)
ขนั้ ตอนท่ี 1 ดาวนโ์ หลด สว่ นเสรมิ ภาษา (Language Packages) ภาษาไทยเพื่อรองรับการใชง้ าน Joomla เลือกเมนู
Download & Extend ที่เว็บไซต์ https://www.joomla.org
ข้นั ตอนท่ี 2 เลือกเมนู Language Packages
ขัน้ ตอนที่ 3 เลอื ก Joomla! 3.x Translation Packs
ข้ันตอนท่ี 4 เลอื ก Thai
ข้ันตอนที่ 5 เลอื ก Download Language Pack
ขั้นตอนท่ี 6 เลอื ก th-TH_joomla_lang_full_3.6.5v1.zip

1
2

3

4
56

ภาพที่ 5.3.3 แสดงข้นั ตอนการดาวน์โหลด สว่ นเสรมิ ภาษา (Language Packages) ภาษาไทย
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม5ร3ู

คสํามู หอื รกบั ารหพนัฒว ยนงาาเนวบ็สังไซกตดั กรมโยธาธกิ ารและผังเมอื ง

• การดาวน์โหลดส่วนเสริม (Extension) เครอ่ื งมือจดั การบทความ (Editor)
ข้นั ตอนที่ 1 ดาวนโ์ หลด สว่ นเสริมเครือ่ งมอื จดั การบทความ (Editor) เลือกเมนู Download & Extend ที่

เว็บไซต์ https://www.joomla.org
ขัน้ ตอนที่ 2 เลอื กเมนู Extensions Directory
ข้นั ตอนท่ี 3 เลือก Editing
ข้นั ตอนท่ี 4 เลือก JCE
ข้ันตอนท่ี 5 เลอื ก GET JCE (V2.6.20)
ขัน้ ตอนท่ี 6 เลอื ก Download

1 4
2

3
5

6

ภาพที่ 5.3.4 แสดงขั้นตอนการดาวน์โหลด สว่ นเสรมิ เครอ่ื งมือจัดการบทความ (Editor)

ภาพที่ 5.3.5 แสดงไฟล์ติดต้งั เบ้อื งต้นท้ังหมดท่พี รอ้ มเรมิ่ การติดตัง้
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 54

DPT KM Action Plan 2018

องคความรูต ามประเดน็ ยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผา ังนเมชือางง

• การติดต้ัง Joomla มีข้นั ตอน ดังนี้
ขนั้ ตอนท่ี 1 เข้าไปโครงสรา้ งไฟลข์ อง Appserv | เขา้ ไปในโฟลเดอร์ www | คลิกขวาไปทีเ่ มนู New >

Folder เพอื่ สร้างโฟลเดอรเ์ ว็บไซต์ | ตั้งชอ่ื โฟลเดอรเ์ ปน็ ชือ่ เว็บไซต์ที่ตอ้ งการ (ตัวอยา่ ง MyWebsite-1)
ขนั้ ตอนที่ 2 ทาการก๊อบปี้ไฟล์ Joomla ทง้ั หมดจากโฟลเดอร์ Joomla_3.8.2-Stable-Full_Package ท่ี

ดาวน์โหลดไว้ ไปเก็บไวท้ ีโ่ ฟลเดอร์เว็บไซตท์ ไ่ี ดส้ ร้างไว้ (ตวั อยา่ ง MyWebsite-1)

1

Folder

www

New

2

MyWebsite-1

ภาพที่ 5.3.6 แสดงโฟลเดอรท์ ี่จดั เกบ็ ไฟลเ์ วบ็ ไซต์ Joomla
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม5ร5ู

คสาํมู หอื รกับารหพนฒัวยนงาาเนวบ็สงัไซกตัดกรมโยธาธิการและผังเมอื ง

ขั้นตอนท่ี 3 เปิดโปรแกรมใชง้ านอินเทอร์เน็ต พมิ พ์ URL: http://localhost/ช่ือโฟลเดอรเ์ ว็บไซต์ท่ีได้ตัง้ ไว้
ตามข้นั ตอนที่ 1 (ตัวอยา่ ง MyWebsite-1 การเรียกก็จะเปน็ http://localhost/MyWebsite-1) ตามภาพท่ี 5.3.7

ข้ันตอนท่ี 4 เลอื กภาษาในการตดิ ตั้ง ให้เลอื กเปน็ ภาษาไทย

http://localhost/MyWebsite-1

3

4

ม

5
7

68
9

10
11

12

ภาพที่ 5.3.7 แสดงการตดิ ตง้ั สว่ นท่ี 1 การตง้ั คา่ เว็บ

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 56

DPT KM Action Plan 2018

องคค วามรตู ามประเดน็ ยุทธศาสตร กดรมา โนยกธาารธบิการรกิ แาลระดผาังนเมชอืางง

จากภาพท่ี 5.3.7
ขัน้ ตอนท่ี 5 ต้งั ช่อื เว็บไซต์
ขน้ั ตอนที่ 6 กรอกรายละเอียดคาอธบิ ายเว็บไซต์
ขนั้ ตอนที่ 7 ระบุอีเมล์ผู้ดแู ลระบบเว็บไซต์
ขั้นตอนที่ 8 ระบุ Username หรือ ช่อื เขา้ ใชร้ ะบบ
ขั้นตอนท่ี 9 ระบรุ หัสผ่านเข้าใชร้ ะบบ
ขน้ั ตอนที่ 10 ยนื ยันรหัสผ่านเขา้ ใช้ระบบ

*** แนะนา ขัน้ ตอนที่ 8, 9, 10 ให้ระบุช่อื เข้าใช้ (username) และรหัสผา่ น (password) ตามภาพท่ี 5.1

ขั้นตอนที่ 11 ออฟไลน์เวบ็ ไซต์ คอื ตอ้ งการปดิ ปรับปรุงเวบ็ ไซตไ์ ว้กอ่ นพัฒนาจนแลว้ เสร็จ

*** แนะนา ใหร้ ะบุเปน็ ไม่ (สีเขยี ว) เพราะเวลาปรบั ปรงุ เวบ็ ไซต์จาเปน็ จะตอ้ งทดสอบดูการแสดงผล
เว็บไซต์ด้วยว่า ปรบั ปรงุ ข้อมลู ถกู ตอ้ งไหม

ขั้นตอนที่ 12 กดปุ่มดาเนินการข้นั ตอนถดั ไป

13 ภาพที่ 5.1
14
15 13
16 1164
17 15

18 19

ภาพท่ี 5.3.8 แสดงการติดตั้ง สว่ นท่ี 2 เชอื่ มตอ่ ฐานข้อมลู
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม5ร7ู

คสาํมู หอื รกับารหพนัฒว ยนงาาเนว็บสงัไซกตัดกรมโยธาธกิ ารและผงั เมอื ง

จากภาพที่ 5.3.8
ขั้นตอนท่ี 13 ระบุ ช่อื เครื่องแม่ข่ายคอมพวิ เตอร์หรือโฮส สาหรับการติดต้ัง Joomla
ขน้ั ตอนท่ี 14 ระบุ ชือ่ ผใู้ ชฐ้ านขอ้ มูล
ขนั้ ตอนที่ 15 ระบุ รหัสผา่ นเข้าใช้ฐานข้อมูล
ข้นั ตอนท่ี 16 ระบุ ชอ่ื ฐานข้อมลู

*** แนะนา ขนั้ ตอนท่ี 13, 14, 15, 16 ให้ระบุข้อมูลทัง้ หมด ตามภาพท่ี 5.1

ขน้ั ตอนท่ี 17 ระบุ ชอ่ื นาหน้าตาราง
ขน้ั ตอนท่ี 18 หากมีการตดิ ต้ัง Joomla อยูแ่ ล้ว ต้องการลบฐานข้อมลู เดิมหรือไม่

*** แนะนา 1.หากติดตง้ั บนเครอ่ื งแมข่ ่ายคอมพวิ เตอร์เขา้ ชือ่ ฐานขอ้ มลู เดิมให้เลือก ลบทิง้
2.หากติดตงั้ ในเครือ่ งคอมพิวเตอร์ของตัวเองสามารถสร้างเป็นฐานขอ้ มลู ช่ือใหม่ได้
3.!!! หา้ มตดิ ตั้งและสร้างฐานข้อมูลช่ือใหม่บนเครือ่ งแมข่ า่ ยคอมพิวเตอร์เด็ดขาด

ขน้ั ตอนที่ 19 กดปุม่ ดาเนินการข้นั ตอนถัดไป
ขั้นตอนที่ 20 กดปุม่ ดาเนนิ การ ติดตั้ง ตามภาพท่ี 5.3.9

20

ภาพที่ 5.3.9 แสดงการติดตงั้ สว่ นท่ี 3 ตรวจสอบภาพรวมทงั้ หมด กอ่ นการติดตงั้
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 58

DPT KM Action Plan 2018

องคค วามรตู ามประเดน็ ยุทธศาสตร กดรมา โนยกธาารธบกิ ารริกแาลระดผาังนเมชือางง

ภาพท่ี 5.3.10 แสดงผลการดาเนินการตดิ ตัง้ Joomla

21

ภาพที่ 5.3.11 สน้ิ สุดการติดต้งั Joomla
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม5ร9ู

คสาํูมหอื รกบั ารหพนัฒว ยนงาาเนว็บสงัไซกตัดกรมโยธาธกิ ารและผังเมือง

ข้นั ตอนท่ี 21 กดปุ่มเพื่อลบโฟลเดอร์สาหรบั การติดตงั้ (Installation) ตามภาพที่ 5.3.11

22 23

ภาพท่ี 5.3.12 สิน้ สดุ การติดตงั้ Joomla
ตามภาพท่ี 5.3.12
ขน้ั ตอนท่ี 22 กดปุม่ ดหู น้าเว็บ เพ่ือเปดิ ดูการแสดงผลหนา้ เวบ็ ไซต์ ในสว่ นการแสดงผลสาธารณะสาหรบั
ผเู้ ขา้ เยี่ยมชม และสาหรบั เปิดดกู ารแสดงผลเม่ือมีการปรบั ปรงุ เว็บไซต์โดยผ้ดู แู ลเวบ็ ไซต์
ขนั้ ตอนที่ 23 กดป่มุ ผู้ดแู ลระบบ เพ่ือเปิดเข้าในส่วนการดูแลระบบเวบ็ ไซตแ์ ละปรับปรุงเวบ็ ไซต์โดยผดู้ ูแล
เว็บไซต์
*** แนะนา ผดู้ ูแลระบบเว็บไซต์ควรเปิดหน้าเว็บไซต์ ทง้ั หน้าเว็บ และผูด้ ูแลระบบ ควบคู่กนั ไว้เพ่อื ความงา่ ย
ต่อการปรับปรงุ และแสดงผล

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 60

DPT KM Action Plan 2018

องคความรูตามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผา ังนเมชอืางง

• การตดิ ตั้งภาษา (Language) มขี ั้นตอน ดังน้ี
ตามภาพที่ 5.3.13
ขนั้ ตอนที่ 1 เข้าโปรแกรมใชง้ านเวบ็ ไซต์ พมิ พ์ URL: http://localhost/ช่อื เวบ็ ไซต/์ administrator เพอื่ เขา้

ปรับปรุงเว็บไซต์สาหรับผู้ดแู ลระบบ
ข้นั ตอนที่ 2 ระบุช่อื ผใู้ ช้ (Username) และรหสั ผ่าน (Password) และกดป่มุ Log in เพอ่ื เข้าระบบเวบ็ ไซต์

1
2

ภาพท่ี 5.3.13 การล็อกอนิ เขา้ ระบบเว็บไซต์
การติดตง้ั ภาษา (Language) สามารถทาได้ 2 แบบ
แบบที่ 1 ตดิ ตัง้ โดยไฟลท์ ดี่ าวน์โหลดไวต้ ามภาพท่ี 5.3.3

ขัน้ ตอนที่ 3 เลือกเมนู Extensions > เลอื กเมนู Manage และเลือกเมนู Installed

3

ภาพที่ 5.3.14 เมนูในการเข้าตดิ ตง้ั ภาษา แบบที่ 1
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม6ร1ู

คสําูม หอื รกบั ารหพนัฒว ยนงาาเนวบ็สังไซกตัดกรมโยธาธิการและผงั เมือง 5
6
4

7

ภาพท่ี 5.3.15 การเข้าติดตั้งภาษา แบบที่ 1
จากภาพท่ี 5.3.15
ขน้ั ตอนท่ี 4 กดปุม่ browse for file เพอ่ื เลอื กไฟลภ์ าษาท่ีดาวน์โหลดไวต้ ามภาพท่ี 5.3.3
ขั้นตอนท่ี 5 เลือกไฟล์
ขน้ั ตอนท่ี 6 แลว้ กดปุ่ม Open
ขนั้ ตอนท่ี 7 ระบบเว็บไซตจ์ ะเร่มิ ทาการตดิ ตง้ั เมื่อติดตง้ั เสร็จระบบจะแจง้ ข้อความตามภาพท่ี 5.3.15

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 62

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารริกแาลระดผางั นเมชือางง

แบบที่ 2 ตดิ ตัง้ โดยระบบจัดการเว็บไซต์
ลอ็ กอินเขา้ ระบบเว็บไซตต์ ามข้นั ตอนที่ 1 และ 2 ตามภาพท่ี 5.3.13
ขนั้ ตอนท่ี 3 เลือกเมนู Extensions > เลือกเมนู Language(s) และเลอื กเมนู Installed

3

ภาพที่ 5.3.16 การเข้าติดตง้ั ภาษา แบบที่ 2

4

6
5

ภาพที่ 5.3.17 แสดงรายการภาษาของแตล่ ะประเทศ
ขั้นตอนที่ 4 กดปมุ่ Install Languages
ขน้ั ตอนที่ 5 เลือ่ นหนา้ รายการเพ่ือหา ปุ่มกด Install ภาษาไทย
ขน้ั ตอนท่ี 6 กดปมุ่ Install ของภาษาไทย Thai ตามภาพที่ 5.3.17
ข้นั ตอนท่ี 7 ระบบเว็บไซต์จะเริม่ ทาการติดตงั้ เม่ือตดิ ต้งั เสร็จระบบจะแจง้ ขอ้ ความ และมีรายการภาษาไทย
เพ่ิมข้ึนอีก 1 รายการตอ่ จากรายการภาษาองั กฤษ ตามภาพที่ 5.3.18

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม6ร3ู

คสาํูมหือรกบั ารหพนฒัว ยนงาาเนวบ็สงัไซกตัดกรมโยธาธกิ ารและผงั เมอื ง

7

ภาพท่ี 5.3.18 แสดงรายการภาษาไทยท่ีติดต้งั เรียบรอ้ ยแล้ว
เมอ่ื ติดตัง้ ภาษาไทยเรยี บร้อยแล้ว เรมิ่ ตัง้ คา่ หน้าเวบ็ ไซตแ์ ละหน้าผู้ดแู ลระบบให้รองรบั และแสดงผลภาษาไทย
ตามภาพท่ี 5.3.19

9 11

10
12

ภาพท่ี 5.3.19 แสดงการกาหนดค่าแสดงผลเว็บไซตใ์ หเ้ ปน็ ภาษาไทย
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 64

DPT KM Action Plan 2018

องคความรตู ามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผาังนเมชือางง

ขน้ั ตอนที่ 8 เลือกเมนู Extensions > เลือกเมนู Language(s) และเลือกเมนู Installed ตามข้ันตอนที่ 3
ภาพที่ 5.3.16

ขั้นตอนที่ 9 เลือกส่วนของ Site (หน้าเว็บไซต์) เพื่อใหส้ นับสนนุ ภาษาไทย
ขน้ั ตอนที่ 10 กดปุม่ ดาว ท่ีอยู่ในแถวของ Thai (ภาษาไทย) ให้เปล่ยี นเป็น สีเหลอื ง
ขัน้ ตอนท่ี 11 เลือกสว่ นของ Administrator (หน้าผ้ดู ูแลระบบ) เพ่ือใหส้ นบั สนุนภาษาไทย
ขั้นตอนที่ 12 กดป่มุ ดาว ท่ีอยู่ในแถวของ Thai (ภาษาไทย) ให้เปลี่ยนเปน็ สเี หลอื ง
เม่อื เปลีย่ นหน้าผู้ดูแลระบบเสรจ็ แล้ว จะสงั เกตเห็นวา่ เมนูและข้อความในหน้าผู้ดแู ลระบบจะเปลี่ยนเป็นภาษาไทย
ตามภาพที่ 5.3.20

ภาพที่ 5.3.20 แสดงผลการแสดงผลเวบ็ ไซต์ภาษาไทยบนระบบเวบ็ ไซต์

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม6ร5ู

คสาํมู หือรกบั ารหพนฒัวยนงาาเนวบ็สงัไซกตัดกรมโยธาธกิ ารและผังเมือง

• การตดิ ตง้ั เครือ่ งมือในการจดั การขอ้ ความ (Editor) มขี นั้ ตอน ดังน้ี
ลอ็ กอนิ เขา้ ระบบเว็บไซต์ตามข้ันตอนที่ 1 และ 2 ตามภาพท่ี 5.3.13
ขั้นตอนที่ 1 เลอื กเมนู ส่วนเสริม > เลือกเมนู การจัดการ และเลอื กเมนู ตดิ ต้งั

1

ภาพที่ 5.3.21 การเขา้ เมนูตดิ ตงั้ สว่ นเสริม เครอ่ื งมือในการจดั การขอ้ ความ (editor)
ขัน้ ตอนท่ี 2 กดปมุ่ ทาการเลอื กไฟล์ เพ่อื เลอื กไฟลส์ ว่ นเสรมิ เครื่องมือจดั การข้อความ (editor)

3
2

4
5

ภาพท่ี 5.3.22 ลาดับขัน้ ตอนการตดิ ต้งั สว่ นเสริม เคร่อื งมือในการจดั การขอ้ ความ (editor)
ขนั้ ตอนท่ี 3 เลือกไฟล์

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 66

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผางั นเมชือางง

ข้นั ตอนที่ 4 แล้วกดป่มุ Open
ขน้ั ตอนท่ี 5 ระบบเว็บไซตจ์ ะเร่ิมทาการติดต้งั เมื่อตดิ ตัง้ เสร็จระบบจะแจง้ ขอ้ ความตามภาพที่ 5.3.15
• การปรับปรงุ เวอรช์ ่ัน Joomla มีข้นั ตอนดังน้ี
ล็อกอินเขา้ ระบบเว็บไซต์ตามข้นั ตอนที่ 1 และ 2 ตามภาพท่ี 5.3.13
การปรับปรงุ เวอร์ช่ัน Joomla สามารถทาได้ 2 วิธี
วิธที ี่ 1 ปรบั ปรงุ แบบออนไลน์
ขัน้ ตอนที่ 1 ตรวจสอบวา่ เคร่อื งคอมพวิ เตอรเ์ ช่อื มตอ่ หรอื สามารถใช้งานอินเทอรเ์ น็ตได้
ขั้นตอนที่ 2 เลอื กเมนู ระบบ เลอื กเมนู คอนโทรลพาเนล และเล่ือนลงดา้ นลา่ งของหน้าระบบเวบ็ ไซต์เลือก
เมนู จูมล่า x.x.x, อัพเดทเด๋ียวนี้ หรือ กดปุม่ อัพเดทเด๋ยี วน้ี จากการแจง้ เตือนของระบบเว็บไซต์

2

4

3

ภาพที่ 5.3.23 การปรบั ปรงุ เวอร์ชั่น (Upgrade) ดว้ ยวิธอี อนไลน์ (กรณเี ชื่อมตอ่ การใช้งาน
อนิ เทอร์เน็ต)

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม6ร7ู

คสาํมู หือรกับารหพนฒัวยนงาาเนว็บสงัไซกตัดกรมโยธาธิการและผงั เมือง

ขัน้ ตอนท่ี 3 ระบบจะเขา้ แท็บ อัพเดทออนไลน์ ใหก้ ดปมุ่ ติดตัง้ การอัพเดท
ข้นั ตอนท่ี 4 ระบบจะทาการดาวน์โหลดและติดตง้ั ออนไลน์ เมอ่ื เสร็จแลว้ ระบบจะแจ้งสถานการณอ์ พั เดท
วิธีท่ี 2 ปรับปรงุ แบบออฟไลน์ (ไมไ่ ดต้ ่อการใชง้ านอนิ เทอร์เน็ต)
ขั้นตอนท่ี 1 ระบบจะเขา้ แท็บ อพั โหลด & อพั เดท และกดปุ่ม เลือกไฟล์

13

24
5

6

7

ภาพที่ 5.3.24 การปรบั ปรุงเวอรช์ ่ัน (Upgrade) ด้วยวิธีออฟไลน์ (กรณีไม่ไดต้ ่อการใช้งาน
อนิ เทอร์เน็ต)

ข้นั ตอนที่ 2 กดปุ่ม เลอื กไฟล์
ข้นั ตอนท่ี 3 ทาการเลอื กไฟล์ทไ่ี ด้ดาวน์โหลดไว้ตามภาพท่ี 5.3.1 ขั้นตอนที่ 5
ข้นั ตอนท่ี 4 กดปมุ่ Open
ข้นั ตอนที่ 5 กดปุ่ม อัพโหลด & ตดิ ต้งั
ขัน้ ตอนที่ 6 ระบชุ อ่ื ผู้ใช้ (Username) และรหัสผ่าน (Password) เพอื่ ตดิ ต้งั และกดปมุ่ ติดตั้ง
ขั้นตอนท่ี 7 ระบบจะทาการติดต้งั และเมอื่ เสร็จแล้วระบบจะแจง้ สถานการณ์อัพเดท

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 68

DPT KM Action Plan 2018

องคค วามรูตามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารริกแาลระดผางั นเมชือา งง

5.4 การปรบั แต่งรูปภาพเพื่อใชบ้ นระบบเว็บไซต์ Joomla ดว้ ยโปรแกรมโฟโตส้ เคป ( PHOTOSCAPE )

PhotoScape เปน็ โปรแกรมตกแต่งภาพ ทีม่ คี วามสามารถมากมายและใช้งานได้งา่ ยมาก เพราะมีเมนูการใช้
งานเป็นภาษาไทย สะดวกรวดเร็วในการใช้งาน ต้ังแต่การทาขอบรูปภาพหลายๆ รูปแบบ การแก้ไขภาพเป็นกลุ่ม
ครั้งละหลายๆ รูปภาพ การจัดหน้าของรูปภาพหลายๆ รูปภาพให้เป็นรูปภาพเดียว การรวมภาพ การทาภาพเคล่ือนไหว
การแบ่งรูปภาพ การ Capture ภาพหน้าจอมาใช้งานการเลือกสี การแปลงไฟล์ RAW เป็น JPEG การปรับแต่งแก้ไข
รปู ภาพ เชน่ การปรับแสง สีความคมชัดของรูป และการยอ่ ขยายขนาดของรูป โปรแกรมมีขนาดเล็ก ไม่กนิ ทรัพยากร
ของเครื่องเหมอื นโปรแกรมแตง่ ภาพอน่ื ๆ และเปน็ โปรแกรม Freeware
เขา้ ไปดาวโหลดไดท้ ีเ่ ว็บไซต์ http://www.photoscape.org

ภาพท่ี 5.4.1 ขน้ั ตอน Download

ภาพท่ี 5.4.2 ขน้ั ตอน Download
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1มร69ู

คสํามู หอื รกบั ารหพนัฒว ยนงาาเนว็บสงัไซกตัดกรมโยธาธกิ ารและผงั เมอื ง

การตดิ ต้งั PhotoScape
1. ดับเบิ้ลคลิกโปรแกรมตดิ ต้ัง “PhotoScape..”
2. คลิกปมุ่ “I Agree-install”

ภาพท่ี 5.4.3 ข้ันตอนการติดตัง้
3. คลกิ ปุ่ม “Finish” เสร็จสิน้ การติดต้งั

ภาพที่ 5.4.4 ขน้ั ตอนการตดิ ต้งั เสร็จส้ิน
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 70

DPT KM Action Plan 2018

องคค วามรูตามประเดน็ ยุทธศาสตร กดรมา โนยกธาารธบิการรกิ แาลระดผางั นเมชอืางง

เมอื่ ตดิ ตงั้ เสร็จแล้วจะมไี อคอนท่ีหน้าจอ Desktop

ทาความรูจ้ กั เคร่อื งมือตา่ งๆ ของหน้าต่างแก้ไขภาพ

หนา้ ตา่ งแกไ้ ขภาพเป็นส่วนทีใ่ ช้ในการแกไ้ ขภาพทีละรปู ซงึ่ ส่วนแกไ้ ขภาพจะมีต้ังแต่ การย่อ ขยายขนาดของรูปภาพ
การใส่กรอบใหก้ บั รูปภาพ การปรับความเขม้ แสง ความสวา่ ง ความคมชัดของรปู ภาพ การเปล่ยี นรูปภาพเปน็ โทนสี
ต่างๆ เชน่ ภาพซีเปีย การลบมุมภาพให้เป็นมุมมน การใสเ่ สน้ ขอบใหก้ ับรูปภาพ การกลบั ภาพ การตัดภาพ การแก้ไข
ตาแดง การทาโมเสกเซ็นเซอร์บางส่วนของภาพ การลบตาหนิ การเพ่มิ ตัวอกั ษรและคาบรรยายลงในภาพ การเพ่ิม
วัตถุต่างๆ เชน่ ตัวการต์ ูนลงไปในภาพ และอ่ืนๆ ทจี่ ะสามารถทาได้ในหน้าต่างแก้ไขภาพ

คลกิ ไปทแี่ กไ้ ขภาพ ท่ีเมนูดา้ นบน หรือเมนูวงกลมกไ็ ด้

ภาพท่ี 5.4.5 การแก้ไขรูปภาพ
ด้านซ้ายมอื จะเปน็ ส่วนทแ่ี สดง Directory และแสดงภาพในโฟลเดอร์ที่เรากาลังเลือกอยู่

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม7ร1ู

คสําูม หอื รกบั ารหพนฒัวยนงาาเนวบ็สงัไซกตัดกรมโยธาธิการและผังเมอื ง

ภาพท่ี 5.4.6 การแสดง Directory
การย่อขยายขนาดของรปู ภาพ คลิกที่ปุ่มยอ่ / ขยาย

ภาพท่ี 5.4.7 การยอ่ ขยายขนาดรปู ภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 72

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผาังนเมชือางง

พิมพข์ นาดภาพทต่ี ้องการลงไปในชอ่ งด้านขวา ชอ่ งด้านซา้ ยจะแสดงขนาดภาพเดมิ หากต้องการให้คงขนาดเดมิ ให้
คลิกเครือ่ งหมายถูกในชอ่ ง คงอัตราส่วนเดิม เมอื่ พมิ พ์ขนาดในช่องใดช่องหนึง่ ของความกวา้ งหรือความสงู ขนาดของ
อกี ช่องจะเปลยี่ นตามอตั ราสว่ นเดิม เม่อื เสร็จแล้วตกลง

ภาพที่ 5.4.8 การยอ่ ขยายขนาดรูปภาพ
การปรบั ความสว่าง สี คลิกทปี่ ุ่ม ความสว่าง, สี จะข้นึ มาดงั ภาพ สามารถปรับไดต้ ามต้องการ

ภาพท่ี 5.4.9 การปรบั ความสวา่ ง สี รปู ภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม7ร3ู

คสําูมหือรกับารหพนัฒว ยนงาาเนว็บสังไซกตัดกรมโยธาธิการและผังเมอื ง

การลบมมุ ของภาพ คลกิ ท่ปี มุ่ ลบมุม สามารถเลอื ก สีของมุม ความโคง้ และเสน้ ขอบได้

ภาพที่ 5.4.10 การลบมมุ ของรปู ภาพ
การใสเ่ สน้ ขอบให้รปู คลกิ ท่ีปุม่ เสน้ ขอบ สามารถเลือกสี และขนาดของเส้นขอบได้

ภาพท่ี 5.4.11 การใสเ่ สน้ ขอบรปู ภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 74

DPT KM Action Plan 2018

องคความรตู ามประเด็นยทุ ธศาสตร กดรมา โนยกธาารธบิการรกิ แาลระดผา งั นเมชอืางง

ปมุ่ ใส่กรอบรปู จะเป็นการใสก่ รอบรูปแบบเสน้ สามารถเลือกสี ชนดิ ความหนา ความโคง้ ได้

ภาพท่ี 5.4.12 การใส่กรอบรปู ภาพแบบเสน้
การเพิ่มแสงฉากหลงั ของภาพ หรอื คลิกท่ลี กู ศร จะมีการเพ่ิมแสงฉากหลังใหเ้ ลอื กเป็นเปอรเ์ ซ็นต์

ภาพท่ี 5.4.13 การเพม่ิ แสงฉากหลงั ของรปู ภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม7ร5ู

คสาํูมหือรกบั ารหพนฒัว ยนงาาเนว็บสังไซกตัดกรมโยธาธกิ ารและผังเมอื ง

การเพิม่ แสงวัตถุ คลิกท่ีปมุ่ เพ่มิ แสงวตั ถุ จะขนึ้ มาดงั ภาพ ปรบั ลดได้ตามตอ้ งการ

ภาพที่ 5.4.14 การเพม่ิ แสงวัตถขุ องรปู ภาพ
ปุ่มฟิลเตอร์ จะเปน็ การเตมิ ฟิลเตอรใ์ หก้ ับภาพ ในแบบต่างๆ ซ่งึ มีอยู่หลายแบบมาก

ภาพที่ 5.4.15 การเพิม่ ฟิตเตอร์ของรูปภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 76

DPT KM Action Plan 2018

องคความรตู ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผาังนเมชือางง

การปรบั ความคมชดั คลกิ ที่ป่มุ ความคมชดั จะปรากฏดงั ภาพ

ภาพท่ี 5.4.16 การปรบั ความคมชัดของรูปภาพ
ปรับระดับความเขม้ ของรปู ภาพ มีใหเ้ ลอื ก ตา่ สงู ปานกลาง

ภาพท่ี 5.4.17 การปรับระดบั ความเข้มของรปู ภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม7ร7ู

คสํามู หอื รกับารหพนฒัว ยนงาาเนวบ็สงัไซกตดั กรมโยธาธกิ ารและผงั เมอื ง

ส่วน บนั ทกึ ยกเลิก ทาซา้ ซง่ึ หากทาเสรจ็ กดบันทึก หรือกดยกเลิกเพอ่ื ยกเลิกการกระทาครัง้ หลงั สุด หรือยกเลกิ
ทั้งหมด เพ่อื กลบั สคู่ า่ เริ่มต้นของรูปน้ัน ทาซ้า คอื การย้อนกลับมาคาสั่งล่าสุดทยี่ กเลิกไป

ภาพที่ 5.4.18 การบันทกึ รูปภาพ

ปรบั สีภาพเปน็ ซเี ปีย / ขาวดา

ภาพที่ 5.4.19 การปรับสี ซเี ปยี ขาวดา ของรูปภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 78

DPT KM Action Plan 2018

องคความรตู ามประเด็นยุทธศาสตร กดรมา โนยกธาารธบกิ ารริกแาลระดผาังนเมชอืา งง

การใสก่ รอบรปู สวยๆ ใหก้ ับภาพ มีแบบให้เลอื กมากมาย

ภาพท่ี 5.4.20 การใส่กรอบรปู ภาพสวยๆ

ได้กรอบรปู ท่เี ราเลอื ก

ภาพท่ี 5.4.21 การใสก่ รอบรูปภาพสวยๆ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม7ร9ู

คสําูม หอื รกับารหพนัฒว ยนงาาเนวบ็สังไซกตดั กรมโยธาธกิ ารและผงั เมือง

ปุม่ กลับรปู ภาพ ในกรณีทีต่ ้องการกลบั รปู ภาพซา้ ย/ขวา 90 องศา การกลบั ซ้ายขวา การกลับบนล่าง และการหมุน
ภาพตามองศาที่ต้องการ

ภาพท่ี 5.4.22 การปรบั องศาของรูปภาพ

การใส่ตัวอกั ษรใหก้ บั ภาพ

การเพม่ิ ข้อความใหก้ ับรปู ภาพโดย คลกิ ที่แถบ เพ่ิมวัตถุ

ภาพที่ 5.4.23 การเพ่มิ ตวั อักษรในรูปภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 80

DPT KM Action Plan 2018

องคความรตู ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผา ังนเมชอืา งง

จากนน้ั คลิกที่ตัว T ดังภาพ เพื่อเพิ่มการพิมพต์ วั อักษรลงบนภาพ เม่อื คลกิ ท่ีตัว T ตามภาพด้านบน จะขึน้ ไดอะล็อก
บล็อก พมิ พ์ขอ้ ความ สามารถเลอื กแบบอักษร ขนาด ความทึบ (การโปร่งแสง) เสน้ รอบตวั อกั ษร ความหนาของเสน้
รอบ สขี องเส้นรอบ เงา สขี องเงา ขนาดและทิศทางของเงา หากไม่ตอ้ งการใชเ้ สน้ รอบและเงา ให้คลิกเคร่อื งหมายถูก
ท่ีคาว่า ใช้ ออก

ภาพที่ 5.4.24 การแสดงผลการเพมิ่ ตวั อักษรในรูปภาพ
เมอื่ ทาเสร็จเรียบร้อยแลว้ คลิกที่ตกลง กจ็ ะได้ตัวอกั ษรตามท่ีตัง้ คา่ สามารถจับเล่อื นไปวาง
ในทท่ี ีต่ อ้ งการ หมุน หรือย่อขยายได้ การเพ่มิ รปู ภาพอีกรปู ให้คลกิ ทต่ี วั ไอคอนรปู ภาพ สามารถเลอื ก ภาพถา่ ย
ภาพการต์ ูน อ่ืนๆ ได้

ภาพที่ 5.4.25 การเพม่ิ รูปภาพมากกว่า 1 รูปภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม8ร1ู

คสําูมหือรกับารหพนฒัว ยนงาาเนวบ็สังไซกตดั กรมโยธาธิการและผังเมอื ง

เมื่อทาเสรจ็ เรียบร้อยแลว้ คลิกที่บันทกึ ด้านล่างขวา สามารถเลือกบนั ทึก บนั ทึกในโฟลเดอร์ หรอื บันทกึ เป็น
ความแตกต่างของ 3 ปมุ่ คือ
บันทึก จะบนั ทกึ ในโฟลเดอรเ์ ดิม ชอื่ ไฟลเ์ ดิม แต่ภาพตน้ ฉบบั จะถูกเกบ็ ไว้ในโฟลเดอร์ ที่ชอ่ื ว่า Originals ซึง่ โปรแกรม
สร้างขนึ้ ให้โดยอัตโนมัติ
บนั ทึกในโฟลเดอร์ คอื บันทกึ ในโฟลเดอรท์ เี่ รากาหนดขนึ้ เอง ชื่อไฟล์เดิม เราสามารถสร้างโฟลเดอรใ์ หมม่ าเก็บ
รปู ภาพทที่ าข้นึ หากเราไม่สรา้ งใหม่ รปู น้จี ะถูกบันทึกไวใ้ นโฟลเดอร์ output ทไ่ี ดรฟ์ C
บนั ทกึ เปน็ สามารถตัง้ ชอ่ื ไฟลใ์ หม่ และเลอื กโฟลเดอร์ทเ่ี ก็บภาพได้
จะเลอื กแบบไหนกแ็ ลว้ แต่ความสะดวกและความต้องการ

ภาพที่ 5.4.26 การบนั ทึกรูปภาพ
การตดั ภาพในส่วนท่ีตอ้ งการ
ตอนน้ีเป็นการครอบตัดภาพเลอื กเฉพาะในส่วนที่ต้องการ

ภาพที่ 5.4.27 การตดั ภาพแบบวงรี หรอื ทีต่ ้องการ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 82

DPT KM Action Plan 2018

องคความรตู ามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผา งั นเมชอืางง

เลือกภาพท่ตี อ้ งการตดั จากนั้นคลิกที่แถบตัดภาพ

ภาพท่ี 5.4.28 การตดั ภาพ
เลอื กแบบท่ตี อ้ งการตัดภาพ จะมีแบบการตดั ภาพแบบอสิ ระ การกาหนดอัตราส่วน การตัดภาพตามอัตราส่วนที่
กาหนด ซึ่งมใี หเ้ ลือกหลายอัตราสว่ น

ภาพท่ี 5.4.29 การตัดภาพแบบอสิ ระ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม8ร3ู

คสาํูมหอื รกับารหพนัฒวยนงาาเนว็บสังไซกตัดกรมโยธาธิการและผงั เมอื ง

ลากเม้าส์คลุมในพ้นื ทที่ เ่ี ราตอ้ งการตัด เมอ่ื คลุมบรเิ วณทีต่ อ้ งการตดั ได้แลว้ ให้คลกิ ที่ ปมุ่ ตัดภาพ หากต้องการ Save
โดยที่ไม่ตัดภาพ ให้คลิกทีป่ ุ่ม บนั ทึกส่วนท่เี ลือก จะไดภ้ าพในสว่ นทเ่ี ราเลอื กไว้

ภาพที่ 5.4.30 การตัดภาพ
เม่อื คลิกท่ีป่มุ ตัดภาพแล้ว กจ็ ะได้ภาพสว่ นทเี่ ราตัดออกมา จากนน้ั แกไ้ ขภาพไดต้ ามต้องการ

ภาพที่ 5.4.31 การตัดภาพเสรจ็ สิ้น
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 84

DPT KM Action Plan 2018

องคค วามรตู ามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผาังนเมชอืางง

หากต้องการตดั ภาพเป็นวงกลมหรอื วงรี ให้คลกิ เคร่อื งหมายถกู ท่สี เี่ หลยี่ มตัดภาพเปน็ วงกลมหรือวงรี เลือกสีพื้นหลัง
ของวงกลม จากนั้นลากเม้าส์ท่ีบรเิ วณที่ต้องการตัด หากตอ้ งการใหเ้ ป็นวงกลมขณะลากเมา้ สใ์ ห้คลิกท่ปี มุ่ Shift ท่ี
คยี บ์ อร์ดค้างไว้ จากนน้ั คลิกปุ่มตดั ภาพ หากต้องการ Save โดยทีไ่ มต่ ดั ภาพ ใหค้ ลิกทป่ี ่มุ บนั ทึกส่วนทเ่ี ลือก จะได้
ภาพในสว่ นที่เราเลือกไว้
การจัดหน้ารูปภาพ
เม่อื ตอ้ งการจดั หนา้ รปู ภาพที่มอี ยหู่ ลายๆ ภาพให้อย่ใู นภาพทีเ่ ป็นชุดอยใู่ นภาพเดยี วกัน
ตัวอย่างภาพท่ีทาเสร็จแลว้

ภาพท่ี 5.4.32 การตดั ภาพ
ข้ันตอนแรกเปิดโปรแกรม PhotoScape ข้นึ มาแลว้ เลือก จัดหนา้

ภาพท่ี 5.4.33 การจัดหนา้
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม8ร5ู

คสาํมู หือรกบั ารหพนฒัว ยนงาาเนวบ็สงัไซกตัดกรมโยธาธิการและผงั เมอื ง

จากน้นั จะเขา้ มาในหนา้ ตา่ งโปรแกรมในส่วนของการจดั หนา้ ด้านขวามอื จะมรี ปู แบบของการจดั หน้าใหเ้ ลือก วา่
ตอ้ งการรูปแบบไหน และภาพชุดนั้นมีกร่ี ปู เมื่อเลือกไดแ้ บบท่ีต้องการแลว้ คลกิ จะแสดงตวั อยา่ งทห่ี น้าจอ

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

ภาพท่ี 5.4.35 การปรบั ขนาดรูปภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 86

DPT KM Action Plan 2018

องคความรูตามประเดน็ ยทุ ธศาสตร กดรมา โนยกธาารธบิการรกิ แาลระดผา งั นเมชอืางง

เลอื กเสน้ ขอบ ซ่ึงเสน้ ขอบท่ีเลอื กนจ้ี ะเป็นเสน้ ระหว่างภาพเลก็ ๆ ที่ต่อกัน
เลอื กความโคง้ และสีของพืน้ หลงั ส่วนใหญ่กจ็ ะใช้สีขาว

ภาพที่ 5.4.36 การปรับความโค้งรปู ภาพ
จากน้นั เปิดโฟลเดอรร์ ปู ภาพ ทม่ี ภี าพทตี่ อ้ งการจดั หนา้ ขน้ึ มา ภาพจะปรากฏดา้ นขา้ ง

ภาพท่ี 5.4.37 แสดงการเลือก Folder รปู ภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม8ร7ู

คสาํูมหือรกับารหพนัฒวยนงาาเนวบ็สังไซกตดั กรมโยธาธกิ ารและผงั เมือง

ลากภาพที่มมี าใส่ในชอ่ งทตี่ อ้ งการ หากไม่ต้องการรูปใดสามารถคลิกและกด Delete ได้
หรือลากรูปใหม่มาใส่ทับเลยก็ได้

ภาพที่ 5.4.38 การเลือกรูปภาพ
ลากรูปมาวางจนครบทกุ ชอ่ งทม่ี ี หากรูปน้ันมีสัดส่วนท่ไี มพ่ อดกี ับช่องน้นั ๆ
โปรแกรมจะจดั วางให้โดยอตั โนมตั เิ ป็นมมุ มองที่ดีทสี่ ดุ หรอื เราจะเลอื่ นจดั รูปเองกไ็ ด้

ภาพที่ 5.4.39 แสดงการจัดหน้ารปู ภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 88

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผา ังนเมชอืางง

เมอ่ื เสรจ็ เรยี บรอ้ ยเป็นท่ีพอใจ คลกิ ปุ่ม บันทกึ เพอื่ บนั ทกึ งาน หรอื หากต้องการใส่กรอบในหน้าตา่ งจดั หนา้ นี้
ก็สามารถคลิกเลอื กกรอบได้ แต่การใส่กรอบจะเป็นการใสก่ รอบในภาพเล็กทุกๆ ภาพทมี่ อี ยู่

ภาพที่ 5.4.40 การเลือกกรอบของรปู ภาพ
แต่ ถ้าหากต้องการใส่กรอบของรูปทง้ั หมด ใหบ้ นั ทึกไฟลน์ ้ีก่อน แล้วไปเปดิ หนา้ ต่างแกไ้ ขภาพ และเปิดไฟล์รปู ที่
บันทึกไว้ขน้ึ มา

ภาพที่ 5.4.41 การแสดงผลของการเลือกรปู ภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม8ร9ู

คสาํูม หือรกบั ารหพนัฒว ยนงาาเนว็บสงัไซกตัดกรมโยธาธิการและผังเมือง

การทาภาพหลายๆ ภาพในครั้งเดยี ว
การทาภาพหลายๆ ภาพในคร้ังเดียว เช่น ย่อขนาดเดียวกัน ใส่กรอบและข้อความเหมือนกนั
โดยทไี่ ม่ต้องเสยี เวลามานง่ั ทาภาพทีละภาพ ใช้การแก้ไขภาพเป็นกล่มุ วธิ ีการคือ
ในหนา้ แรกของโปรแกรม เลอื กการแกไ้ ขภาพเปน็ กลมุ่

ภาพท่ี 5.4.42 การแสดงผลของการเลือกรปู ภาพ
หนา้ ตาของหน้า การแกไ้ ขภาพเป็นกลุ่ม

ภาพท่ี 5.4.43 การแก้ไขรูปภาพเป็นกลุม่
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 90

DPT KM Action Plan 2018

องคความรูตามประเดน็ ยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารริกแาลระดผางั นเมชอืางง

เลือกคลกิ โฟลเดอร์ท่ีต้องการจะจดั ทาภาพ จะแสดงภาพทง้ั หมดท่มี ีอยู่ในโฟลเดอรด์ ้านลา่ ง

ภาพที่ 5.4.44 การเลอื กภาพ
คลิกลากรปู ท่ตี ้องการทาไปที่ช่องวา่ งดา้ นบน จะเห็นว่าภาพจะมีทง้ั แนวตัง้ และแนวนอน
ควรจะเลอื กทาทลี ะอยา่ ง เน่ืองจากหากใส่ข้อความ ภาพแนวต้ังและแนวนอนจะมพี กิ ดั ทีต่ ่างกัน
ในทีน่ ้จี ะเลอื กลากไป เฉพาะภาพทเ่ี ปน็ แนวนอนกอ่ น ด้านล่างจะแสดงตัวอยา่ งภาพ
(หากตอ้ งการแสดงตัวอยา่ งภาพใด ให้คลกิ ท่ีช่ือภาพดา้ นบนท่ลี ากมา คลิกทภ่ี าพใดจะแสดงตัวอย่างภาพนน้ั )

ภาพที่ 5.4.45 การเลือกภาพ
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม9ร1ู

คสํามู หอื รกับารหพนัฒว ยนงาาเนว็บสงัไซกตัดกรมโยธาธิการและผงั เมือง

ในแถบหน้าหลักด้านขวามือ จะเปน็ การเลือกกรอบ การย่อ-ขยายขนาดภาพ กาหนดขอบและความโคง้ เลือกตง้ั ค่า
ตามความต้องการ

ภาพที่ 5.4.46 การเลือกกรอบรปู ภาพ
ในท่ีน้จี ะเลือกลดขนาดดา้ นยาวเป็น 500 และใส่ขอบเป็นแบบ Stamp 02 แถบสุดท้ายคือแถบเพิม่ วัตถุ จะมใี หเ้ ลือก
เพิม่ ภาพถา่ ยหรอื ตวั อักษรเขา้ มาในภาพ หากตอ้ งการเพมิ่ อะไรกค็ ลกิ เคร่ืองหมายถูกหน้าส่เี หล่ยี ม

ภาพท่ี 5.4.47 การเพ่ิมวัตถรุ ูปภาพ
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 92

DPT KM Action Plan 2018