หน่วยที่ 3

01
1 02

03
04

1

หน่วยท่ี 3 การตดิ ตัง้ เครื่องมือในการเขียนโปรแกรมบนมาตรฐานเปิด

แบบฝกึ หัดก่อนเรยี นหน่วยที่ 3 จดุ ประสงคเ์ ชิงพฤติกรรม (Performance Objectives)

การติดตงั้ เครือ่ งมือในการเขียนโปรแกรมบนมาตรฐานเปิด อธิบายคณุ สมบตั ิของโปรแกรม AppSer และ Notepad++
ตดิ ตัง้ โปรแกรม AppServ และ Notepad++
หวั ข้อเรื่อง (Topics) บอกข้นั ตอนการเขา้ ใช้งานโปรแกรม AppSer และ Notepad++
อธิบายสว่ นประกอบของโปรแกรม Notepad++
การตดิ ตั้ง AppServ บอกขน้ั ตอนการสร้างไฟล์ใหม่
การสร้างพ้ืนท่ีสาหรับเกบ็ เวบ็ แอปพลิเคชัน บอกขนั้ ตอนการออกจากโปรแกรม Notepad++
การติดตง้ั โปรแกรม Notepad++ บอกขน้ั ตอนวธิ กี ารสร้างพน้ื ทีเ่ กบ็ เว็บแอปพลเิ คชนั และการเรยี กใชง้ าน
การใช้งานโปรแกรม Notepad++
สว่ นประกอบของโปรแกรม Notepad++
การใชง้ านโปรแกรม Notepad++ เบอื้ งตน้

สมรรถนะย่อย (Element of Competency)

แสดงความรู้เกย่ี วกบั การติดต้งั AppServ และการใชง้ านโปรแกรม
แสดงความรู้เกย่ี วกับการติดตง้ั Notepad++ และการใช้งาน

2

Video การสอน

หน่วยท่ี 3 การตดิ ตงั้ เครอ่ื งมือในการเขียนโปรแกรมบนมาตรฐานเปดิ

3.1 การตดิ ตัง้ AppServ 3.1 การตดิ ตัง้ AppServ 01
3.2 การสรา้ งพื้นท่ีสาหรบั เกบ็ เวบ็ แอปพลเิ คชัน 02
ก่อนท่ีจะทาการติดตั้ง AppServ จะต้องดาเนินการดาวน์โหลดชุดติดตั้ง AppServ ไว้ท่ีเคร่ืองก่อน โดยสามารถ 3.3 การตดิ ตงั้ โปรแกรม Notepad++ 03
ดาวน์โหลดได้ฟรีท่ี http://www.appservnetwork.com ซึ่งมีให้เลือกหลายเวอร์ชัน ให้ทาการดาวน์โหลด AppServ 3.4 การใช้งานโปรแกรม Notepad++
9.3.0 หลังจากดาวน์หลดลงไวท้ ีเ่ คร่ืองเรยี บรอ้ ยแลว้ ขั้นตอนในการตดิ ต้ังโปรแกรมมีดงั นี้ 3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบอื้ งตน้
ดับเบลิ คลกิ ทไ่ี อคอนติดตงั้ AppServ เพือ่ ทาการเริ่มตน้ ชดุ การติดตัง้ โปรแกรม

1

04

2

Video การสอน

หน่วยท่ี 3 การติดตัง้ เครื่องมือในการเขยี นโปรแกรมบนมาตรฐานเปิด

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

3.1 การติดตงั้ AppServ
3.2 การสรา้ งพน้ื ที่สาหรบั เกบ็ เว็บแอปพลิเคชนั
3.3 การติดต้งั โปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบ้อื งต้น

3

Video การสอน

หน่วยท่ี 3 การตดิ ตั้งเครื่องมอื ในการเขียนโปรแกรมบนมาตรฐานเปดิ

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

3.1 การตดิ ตงั้ AppServ 01
3.2 การสรา้ งพนื้ ที่สาหรบั เก็บเวบ็ แอปพลิเคชัน 02
3.3 การติดต้งั โปรแกรม Notepad++ 03
3.4 การใช้งานโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบือ้ งต้น

04

4

Video การสอน

หน่วยที่ 3 การติดตั้งเครอื่ งมือในการเขียนโปรแกรมบนมาตรฐานเปดิ

หลงั จากนั้นใหเ้ ลือกตาแหนง่ การติดตงั้ โปรแกรม AppServ โดยคลิกท่ีปุ่ม Next

3.1 การตดิ ตง้ั AppServ
3.2 การสร้างพ้ืนที่สาหรบั เก็บเว็บแอปพลเิ คชัน
3.3 การตดิ ต้ังโปรแกรม Notepad++
3.4 การใชง้ านโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบ้ืองต้น

5

Video การสอน

หน่วยท่ี 3 การติดตงั้ เครอ่ื งมอื ในการเขียนโปรแกรมบนมาตรฐานเปดิ

ชน้ั ตอนนี้ชดุ การตดิ ตง้ั จะเลือกติดต้งั AppServ Package Components ให้เลือกทงั้ หมดแล้วคลกิ ปมุ่ Next

3.1 การติดตงั้ AppServ 01
3.2 การสรา้ งพื้นทส่ี าหรบั เกบ็ เว็บแอปพลเิ คชัน 02
3.3 การติดตง้ั โปรแกรม Notepad++ 03
3.4 การใช้งานโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบอื้ งตน้

04

6

Video การสอน

หน่วยท่ี 3 การติดตั้งเคร่อื งมือในการเขียนโปรแกรมบนมาตรฐานเปดิ

ข้ันตอนนี้ชดุ การติดตั้งจะให้ไส่ Sever Name แล: Email Address ของผู้ดูแลระบบลงไป ให้ทาการใส่ชื่อ Server
Name เป็น localhost แล: Email Address ของรู้ทค่ี ิดตงั้ ลงไป และคลิกปมุ Next

3.1 การติดตัง้ AppServ
3.2 การสร้างพนื้ ทส่ี าหรบั เกบ็ เว็บแอปพลเิ คชัน
3.3 การตดิ ตงั้ โปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบื้องต้น

7

Video การสอน

หน่วยท่ี 3 การตดิ ตั้งเครอื่ งมอื ในการเขียนโปรแกรมบนมาตรฐานเปดิ

ข้ันตอนนี้ชุดการติดตั้งจะให้ใส่ Password ในการใช้งานจัดการฐานข้อมูล ซ่ึงในการติดต้ังเพ่ือใช้งานในระบบงาน 3.1 การตดิ ตงั้ AppServ 01
จรงิ การใส่ Password นั้นจะต้องมีความปลอดภัยเพื่อป้องกันการเจาะระบบจากผู้ไม่หวังดี และรหัสผ่านในขั้นตอนนี้ 3.2 การสร้างพ้นื ท่ีสาหรบั เก็บเว็บแอปพลเิ คชัน 02
จะได้นาไปใช้ในการเรียนในหน่วยที่ 8 และหน่วยท่ี 9 (ดังนั้นรหัสผ่านผู้ติดตั้งควรจารหัสผ่านที่ได้ใส่ในข้ันตอนนี้ไว้เพ่ือ 3.3 การติดต้งั โปรแกรม Notepad++ 03
นาไปใชต้ ่อไป) เมือ่ ใส่ Password เรียบร้อยแล้วใหค้ ลิกปมุ่ Install 3.4 การใช้งานโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบ้อื งต้น

04

8

Video การสอน

หนว่ ยที่ 3 การติดตั้งเครือ่ งมอื ในการเขียนโปรแกรมบนมาตรฐานเปิด

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

3.1 การติดต้ัง AppServ
3.2 การสรา้ งพ้นื ทส่ี าหรบั เกบ็ เวบ็ แอปพลิเคชนั
3.3 การตดิ ตง้ั โปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบื้องต้น

9

Video การสอน

หน่วยท่ี 3 การติดตงั้ เคร่ืองมือในการเขยี นโปรแกรมบนมาตรฐานเปิด

เม่ือชุดการติดต้ังทาการคัดลอกไฟล์และแถบสถานะการณ์ติดต้ังครบ 100% จะปรากฎหน้าต่างแสดงข้อความ 3.1 การตดิ ตั้ง AppServ 01
โปรแกรมติดต้ังเสร็จสมบูรณ์แล้ว "Completing the AppServ 2.5.10" ให้ทาการคลิกท่ีปุ่ม Finish การติดตั้ง 3.2 การสรา้ งพน้ื ท่ีสาหรบั เกบ็ เวบ็ แอปพลเิ คชนั 02
โปรแกรม AppServ จะเสรจ็ สมบรู ณแ์ ละพร้อมใช้งาน 3.3 การติดตั้งโปรแกรม Notepad++ 03
3.4 การใช้งานโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบือ้ งตน้

04

10

Video การสอน

หนว่ ยที่ 3 การตดิ ต้งั เคร่อื งมอื ในการเขยี นโปรแกรมบนมาตรฐานเปดิ

หลักจากการติดตั้งเสร็จสมบูรณ์แล้ว สามารถทดสอบเข้าใช้งานว่า AppServ พร้อมใช้งานหรือไม่โปรแกรม Web 3.1 การตดิ ตัง้ AppServ
Browser ข้ึนมาเพ่ือทดสอบใช้งาน (โปรแกรม Web Browser เช่น Internet Explorer, Google chrome, Mozilla 3.2 การสรา้ งพ้ืนทีส่ าหรบั เก็บเวบ็ แอปพลิเคชนั
Firefox เป็นต้น) เมื่อเปิดโปรแกรม Web Browser ขึ้นมาการพิมพ์ localhost หรือ 127.0.0.1 ลงไปใน Address 3.3 การติดตง้ั โปรแกรม Notepad++
Bar จะปรากฎหน้าจอดังรูปท่ี 3.10 คอื โปรแกรม AppServ พร้อมใช้งานและเป็นการตดิ ตงั้ ท่สี มบูรณ์ 3.4 การใชง้ านโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบ้อื งตน้

11

Video การสอน

หนว่ ยท่ี 3 การตดิ ตั้งเครอื่ งมือในการเขยี นโปรแกรมบนมาตรฐานเปิด

3.2 การสร้างพื้นที่สาหรับเกบ็ เวบ็ แอปพลเิ คชัน 3.1 การตดิ ตัง้ AppServ
3.2 การสรา้ งพน้ื ท่สี าหรบั เกบ็ เว็บแอปพลเิ คชนั
เมื่อทาการติดตั้งโปรแกรม Appserv เพ่ือเตรียมความพร้อมในการเขียนโปรแกรมภาษา PHPเสร็จเรียบร้อยแล้ว
ข้ันตอนต่อไปคือการสร้างพ้ืนท่ีในการเก็บโปรแกรม หรือ Web Application ตามค่าดีฟอลต์ (Defaut) ขoง Appserv
กาหนดให้จัดเก็บไวท้ ่ี C:\Appserv/www

3.3 การติดตง้ั โปรแกรม Notepad++ 02
3.4 การใช้งานโปรแกรม Notepad++ 03

3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบือ้ งต้น

3.2.1 ขน้ั ตอนการสรา้ งพ้ืนที่ในการเก็บเวบ็ แปพลิเคชนั (Web Application) 04
การสร้างพ้ืนที่ในการเก็บเว็บแอปพลิเคชัน หรือเก็บโปรแกรมที่จะเขียนให้เข้าไปยังตาแหน่งเก็บเว็บแอปพลิเคชัน คือ
C:\Appserv/www และทาการสรา้ งตามขนั้ ตอนดังนี้

12

Video การสอน

หนว่ ยท่ี 3 การตดิ ต้งั เครอ่ื งมอื ในการเขยี นโปรแกรมบนมาตรฐานเปดิ

ทาการสร้างโฟลเดอรใ์ หม่ โดยคลิกเมาส์ จากน้นั จะได้โฟลเดอรใ์ นการเกบ็ Web
ขวาแลว้ เลือก New และคลกิ ที่ Folder เพือ่ ทา Application ซ่ือ Programweb
การเปลยี่ นชอ่ื โฟลเดอร์ เช่น Programweb
3.1 การตดิ ตง้ั AppServ
3.2 การสร้างพื้นที่สาหรบั เกบ็ เวบ็ แอปพลิเคชนั
3.3 การตดิ ตง้ั โปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบ้ืองตน้

13

Video การสอน

หนว่ ยที่ 3 การตดิ ตงั้ เครอื่ งมือในการเขยี นโปรแกรมบนมาตรฐานเปดิ

3.2.2 การแสดงตาแหน่งทีอ่ ย่เู ว็บแอปพลเิ คชนั เพ่ือแสดงผล 3.1 การตดิ ต้งั AppServ
ในการอ้างอิงตาแหน่งเว็บแอปพลิเคชัน (Web Application) ตามรูปแบบเว็บเบราว์เซอร์ (Web Browser) ไม่ 3.2 การสรา้ งพนื้ ท่ีสาหรบั เก็บเวบ็ แอปพลิเคชัน
สามารถอา้ งองิ ไปยงั ตาแหน่งที่เกบ็ โดยตรงได้ แต่จะกาหนดชื่อขึ้นมาชื่อหนึ่งเพื่อใช้แทนตาแหน่ง โดยตามค่าดีฟอลต์ที่ได้ 3.3 การติดต้ังโปรแกรม Notepad++
กาหนดไว้ตอนติดต้ัง AppServ นั้นคือ localhost ดังนั้นเม่ือต้องการอ้างถึงตาแหน่งที่อยู่ของเว็บแอปพลิเคชันจะต้อง 3.4 การใชง้ านโปรแกรม Notepad++
แทนด้วยชื่อ localhost และต่อด้วยชื่อโฟลเดอร์ที่สร้างข้ึน เช่น (localhost/Programweb โดยจะระบุลงไปใน 3.5 ส่วนประกอบของโปรแกรม Notepad++
แอดเดรสบาร์ (Address Bar) บนเว็บเบราว์เซอร์ (Web Browser) 3.6 การใชง้ านโปรแกรม Notepad++ เบื้องตน้

02
03

04

14

Video การสอน

หนว่ ยที่ 3 การติดตงั้ เครือ่ งมือในการเขยี นโปรแกรมบนมาตรฐานเปดิ

3.3 การตดิ ตัง้ โปรแกรม Notepad++ 3.1 การตดิ ตง้ั AppServ
3.2 การสร้างพน้ื ทีส่ าหรบั เกบ็ เว็บแอปพลเิ คชนั
โปรแกรม Notepad++ คอื โปรแกรมประเภท Text Editor ซงึ่ เปน็ โปรแกรมสาหรบั เขียนคาส่ังแก้ไขภาษาต่าง ๆ เช่น 3.3 การติดต้งั โปรแกรม Notepad++
PHP, HTML, JAVA เป็นต้น การติดตั้งโปรแกรม Notepad++ จะต้องดาเนินการดาวน์โหลดชุดติดต้ัง Notepad++ ไว้ท่ี 3.4 การใช้งานโปรแกรม Notepad++
เครื่องก่อน โดยสามารถดาวน์โหลดได้ฟรีท่ี https://notepad-plus-plus.org/download/ซึ่งมีให้เลือกหลายเวอร์ชัน
ใหท้ าการเลือกเวอร์ชนั 7.3.0 โดยมขี ้ันตอนในการตดิ ต้ังดงั น้ี

ดบั เบลิ คลกิ ที่ตัวติดต้ังโปรแกรม Notepad++ ทไ่ี ด้ดาวนโ์ หลดไวแ้ ล้วเพื่อเริ่มตน้ การติดตงั้

3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบ้อื งตน้

15

Video การสอน

หน่วยท่ี 3 การตดิ ต้งั เครอ่ื งมอื ในการเขียนโปรแกรมบนมาตรฐานเปดิ

จากน้นั ชดุ ตวั ติดต้งั โปรแกรม Notepad++ จะปรากฎใหเ้ ลือกภาษาที่ใชใ้ นการติดตัง้ ใหค้ ลกิ เลอื กภาษาไทย
แล้วคลกิ ทีป่ มุ่ OK

3.1 การตดิ ต้งั AppServ 02
3.2 การสร้างพน้ื ท่ีสาหรบั เกบ็ เวบ็ แอปพลเิ คชนั 03
3.3 การตดิ ตง้ั โปรแกรม Notepad++
3.4 การใชง้ านโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบื้องตน้

04

16

Video การสอน

หน่วยท่ี 3 การตดิ ต้ังเครอื่ งมอื ในการเขยี นโปรแกรมบนมาตรฐานเปิด

จากนั้นจะปรากฎหน้าต่างข้อความต้อนรับ หลังจากนั้นจะปรากฎหน้าจอ แสดง 3.1 การติดตั้ง AppServ
การติดต้ังแบบอัตโนมัติขึ้นมาให้ทาการคลิกปุ่ม ข้อตกลงหรือเง่ือนไขการใช้โปรแกรมให้คลิกม 3.2 การสรา้ งพื้นทีส่ าหรบั เกบ็ เวบ็ แอปพลิเคชัน
ต่อไป ตกลง เพ่ือยอมรบั 3.3 การตดิ ตง้ั โปรแกรม Notepad++
3.4 การใชง้ านโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบื้องตน้

17

Video การสอน

หน่วยที่ 3 การตดิ ต้งั เครอ่ื งมือในการเขียนโปรแกรมบนมาตรฐานเปิด

หลังจากนั้นให้เลือกตาแหน่งการติดตั้ง ในข้ันตอนน้ีโปรแกรม Notepad++จะให้ 3.1 การตดิ ตงั้ AppServ
โปรแกรม Notepad++ ให้ใช้ค่าหรือตาแหน่งที่ เลือกส่วนประกอบ หรือ แพ็กเกจ (Package) 3.2 การสร้างพืน้ ที่สาหรบั เกบ็ เวบ็ แอปพลิเคชัน
โ ป ร แ ก ร ม ก า ห น ด ไ ว้ ไ ม่ ต้ อ ง ท า ก า ร เ ป ลี่ ย น ของโปรแกรมให้ใช้ค่ากาหนดไว้ไม่ต้องทาการ 3.3 การติดตง้ั โปรแกรม Notepad++
ตาแหน่งในการงและคลกิ ทปี่ มุ่ ต่อไป เลอื ก Package ใตเพม่ิ และใหค้ ลกิ ที่ปุ่ม ตอ่ ไป 3.4 การใชง้ านโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบื้องตน้ 02
03

04

18

Video การสอน

หนว่ ยท่ี 3 การติดต้งั เคร่ืองมือในการเขียนโปรแกรมบนมาตรฐานเปิด

จากนั้นจะปรากฎหน้าต่างให้คลิกเลือก จากนั้นจะเข้าสู่การคัดลอกไฟล์ติดต้ังไปยัง 3.1 การติดต้ัง AppServ
ติดตั้งโปรแกรม ให้คลิกเลือกท่ีกล่องสี่เหลี่ยม เคร่ืองคอมพิวเตอร์ ให้รอจนโปรแกรมได้ 3.2 การสรา้ งพืน้ ที่สาหรบั เกบ็ เว็บแอปพลเิ คชนั
(Check Box)CreateShortcuton Desktop คัดลอกไฟล์ต่าง ๆให้ครบ ให้ทาการคลิกปุม 3.3 การติดต้ังโปรแกรม Notepad++
เ พื่ อ เ ป็ น ก า ร ส ร้ า ง Shortcut โ ป ร แ ก ร ม เสร็จสิ้น โปรแกรมจะติดต้ังอย่างสมบูรณ์และ 3.4 การใชง้ านโปรแกรม Notepad++
Notepad++ ไว้ท่ีหน้าจอ และคลิกที่ปุ่ม ติดต้ัง พร้อมใช้งาน 3.5 สว่ นประกอบของโปรแกรม Notepad++
เพ่ือเร่ิมตันโหลดไฟล์โปรแกรมไปยังเคร่ือง 3.6 การใช้งานโปรแกรม Notepad++ เบื้องตน้
คอมพวิ เตอร์ท่ตี ิดต้ัง

19

Video การสอน

หน่วยที่ 3 การติดตั้งเคร่อื งมือในการเขียนโปรแกรมบนมาตรฐานเปดิ

3.4 การใช้งานโปรแกรม Notepad++ 3.1 การตดิ ตั้ง AppServ 03
3.2 การสรา้ งพนื้ ทสี่ าหรบั เกบ็ เวบ็ แอปพลิเคชนั
การเรยี กใช้งานโปรแกรม Notepad++ มขี นั้ ตอนดังนี้ 3.3 การติดต้งั โปรแกรม Notepad++
คลิกทีป่ มุ่ Start > Windows Accessories > Notepad++ 3.4 การใช้งานโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
2 3.6 การใช้งานโปรแกรม Notepad++ เบอ้ื งต้น
1

04

20

Video การสอน

หนว่ ยที่ 3 การตดิ ตั้งเคร่อื งมือในการเขียนโปรแกรมบนมาตรฐานเปดิ

จะปรากฏหนา้ จอของโปรแกรม Notepad++ ดงั รูป

3.1 การติดตัง้ AppServ
3.2 การสร้างพ้ืนทีส่ าหรบั เก็บเวบ็ แอปพลิเคชัน
3.3 การตดิ ตงั้ โปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใช้งานโปรแกรม Notepad++ เบ้ืองต้น

21

Video การสอน

หน่วยท่ี 3 การตดิ ตัง้ เครื่องมือในการเขยี นโปรแกรมบนมาตรฐานเปิด

3.5 สว่ นประกอบของโปรแกรม Notepad++ 3.1 การติดตั้ง AppServ 03
3.2 การสรา้ งพืน้ ที่สาหรบั เก็บเวบ็ แอปพลเิ คชนั 04
การเรยี กใชง้ านโปรแกรม Notepad++ มีขน้ั ตอนดังน้ี 3.3 การติดตง้ั โปรแกรม Notepad++
โปรแกรม Notepad++ มีสว่ นประกอบสาคญั คือ หน้าจอการเขียนโคด้ และส่วนของเมนูบารด์ งั นี้ 3.4 การใชง้ านโปรแกรม Notepad++
3.5 ส่วนประกอบของโปรแกรม Notepad++
แถบคาสัง่ (Menu Bar)เปน็ แถบที่ใชเ้ กบ็ คาสัง่ ทั้งหมดของโปรแกรม Notepad++ โดยจะแบ่งคาสั่งทั้งหมดออกเป็น 3.6 การใชง้ านโปรแกรม Notepad++ เบื้องต้น
หมวดหมู่ เพื่อให้สะดวกตอ่ การใช้งาน ซงึ่ ภายในแตล่ ะหมวดหมู่ของคาสัง่ จะประกอบไปด้วยคาสัง่ ยอ่ ย ๆ ท่เี ก่ยี วข้องกัน

22

Video การสอน

หนว่ ยที่ 3 การติดตั้งเครื่องมือในการเขยี นโปรแกรมบนมาตรฐานเปดิ

แถบเครือ่ งมอื (Tool Bar)ทต่ี ดั มาจากแถบคาส่งั (MenuBar)ซึง่ จะเปน็ คาสัง่ ทเี่ รียกใช้งานบอ่ ยท่ีสุดใน Notepad++ 3.1 การตดิ ตง้ั AppServ
จงึ รวบรวมใหม่เปน็ ลักษณะภาพ เพอ่ื การจดจาและใช้งานง่ายสะดวก เชน่ สรา้ งไฟลใ์ หม่ บนั ทกึ ไฟล์ เปน็ ตน้ 3.2 การสร้างพนื้ ที่สาหรบั เกบ็ เวบ็ แอปพลเิ คชนั
3.3 การติดตงั้ โปรแกรม Notepad++
พื้นทใี่ นการเขียนโค้ด คือ พื้นทใ่ี นการเขียนคาส่ัง (Code) แกไ้ ขคาสั่งต่าง ๆ ในรปู แบบภาษาทเ่ี ขียนข้นึ 3.4 การใชง้ านโปรแกรม Notepad++
3.5 สว่ นประกอบของโปรแกรม Notepad++
ส่วนคอนโทรลโปรแกรม คือ ส่วนควบคุมหน้าต่างารทางานของโปรแกรม Notepad++เช่นการย่อหน้าต่าง 3.6 การใช้งานโปรแกรม Notepad++ เบ้อื งตน้
โปรแกรม ขยายหน้าตา่ งโปรแกรม และปิดโปรแกรม

23

Video การสอน

หนว่ ยที่ 3 การติดตงั้ เครื่องมือในการเขียนโปรแกรมบนมาตรฐานเปดิ

3.6 การใช้งานโปรแกรม Notepad++ เบอ้ื งต้น 3.1 การตดิ ตัง้ AppServ
3.2 การสร้างพนื้ ท่สี าหรบั เกบ็ เว็บแอปพลิเคชัน
โปรแกรม Notepad++ เป็นโปรแกรมท่ีออกแบบมาเพ่ือใช้งานด้าน Text Editor มีหน้าท่ีในการเขียนคาสั่ง แก้ไข 3.3 การติดต้งั โปรแกรม Notepad++
คาส่งั การสร้างไฟลใ์ หม่ การบนั ทกึ ไฟล์ ซึง่ การใช้งานเบื้องต้นน้นั จาเปน็ สาหรับการใช้งานเพ่ือให้เกิดความชานาญในการใช้ 3.4 การใชง้ านโปรแกรม Notepad++
โปรแกรมจึงจาเป็นท่ีจะต้องเรียนรู้ เช่น การสร้างไฟล์ใหม่ การบันทึกไฟล์ การเปิดไฟล์ท่ีสร้างไว้ การปิดไฟล์ การปรับแต่ง
หนา้ ตา่ งของโปรแกรม รวมถงึ ข้นั ตอนการออกจากโปรแกรม

การสร้างไฟล์สาหรับเขียนคาสั่ง (Source Code) เม่ือเปิดโปรแกรม Notepad++ มาแล้ว ให้เลือกที่แถบมนู ไฟล์ >
คาสั่งสร้างเอกสารใหม่ หรือใชค้ าสง่ั ลัดโดยกดคีย์บอร์ด Ctrl+N จะไดไ้ ฟลใ์ หม่

3.5 สว่ นประกอบของโปรแกรม Notepad++ 03
3.6 การใชง้ านโปรแกรม Notepad++ เบื้องต้น

04

24

Video การสอน

หนว่ ยที่ 3

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

3.1 การติดต้งั AppServ
3.2 การสร้างพื้นท่ีสาหรบั เกบ็ เวบ็ แอปพลเิ คชนั

3.3 การตดิ ต้ังโปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++

3.5 ส่วนประกอบของโปรแกรม Notepad++
3.6 การใชง้ านโปรแกรม Notepad++ เบื้องตน้

25

Video การสอน

หนว่ ยที่ 3 การติดต้งั เครอ่ื งมือในการเขียนโปรแกรมบนมาตรฐานเปิด

การออกจากโปรแกรม Notepad++ 3.1 การตดิ ตง้ั AppServ
ผู้ใช้งานสามารถออกจากโปรแกรมได้ 3 วิธี ดังน้ี 3.2 การสร้างพื้นทีส่ าหรบั เกบ็ เวบ็ แอปพลเิ คชัน
การออกจากโปรแกรมโดยใชแ้ ถบเมนู คลกิ ท่ี ไฟล์ > ออก 3.3 การตดิ ตัง้ โปรแกรม Notepad++
3.4 การใช้งานโปรแกรม Notepad++
การออกจากโปรแกรมโดยใช้ปุ่ม Close ใช้ปุ่ม Close ที่มุมขวาของหน้าต่างโปรแกรม โดยคลิกที่ปุ่มสีแดงท่ีมีรูป 3.5 ส่วนประกอบของโปรแกรม Notepad++
กากบาทสีขาว 3.6 การใช้งานโปรแกรม Notepad++ เบอื้ งตน้

04

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

26

หนว่ ยท่ี 3 การตดิ ต้งั เครอ่ื งมอื ในการเขยี นโปรแกรมบนมาตรฐานเปิด

สรปุ สาระสาคญั

การติดตั้ง Appservเป็นการเตรียมเครื่องมือให้พร้อมก่อนที่จะพัฒนาเว็บแปพลิเคชัน ในรูปแบบภาษาท่ีมีการประมวลผลท่ีเว็บเชิร์ฟเวอร์ โดยมีเครื่องมือที่จาเป็นใน

AppServ ดังน้ี

โปรแกรมเวบ็ เชริ ฟ์ เวอร์ โปรแกรมภาษาสาหรับประมวลผล โปรแกรมจัดการฐานขอ้ มูล โปรแกรมฐานข้อมูล

การติดตั้งโปรแกรม Notepad++ เป็นการเตรียมเคร่ืองมือในการเขียนโปรแกรม เขียนคาสั่ง (SourceCode) โดยการติดตั้งโปรแกรมนั้นไม่จาเป็นต้องต้ังค่าใด " ใน

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

การใชง้ านโปรแกรม Notepad++ นน้ั มีการใชง้ านเหมอื นกับโปรแกรมกลมุ่ Text Editor ของค่ายอนื่ ๆ ทั่วไป และการออกจากโปรแกรมมี 3 วธิ ี ดังน้ี

การออกจากโปรแกรมโดยการใชแ้ ถบเมนู (Menu Bar)

การออกจากโปรแกรมโดยการใชป้ มุ่ Close

การออกจากโปรแกรมโดยการใช้คียล์ ัด (Alt+F4)

แบบฝกึ หัดหลงั เรยี นหนว่ ยที่ 3

การติดตงั้ เครอ่ื งมือในการเขยี นโปรแกรมบนมาตรฐานเปดิ