Labsheet

Labsheet: Web development 101 Section 1: การใชง้ าน Command line เบื้องต้น Part 1: คำสัง่ พ้ืนฐานท่ีใช้งานบ่อย คำสัง่ Unix/Linux Windows เปลยี่ นโฟลเดอร์ cd <ชือ่ โฟลเ์ ดอร์> cd <ชื่อโฟล์เดอร์> แสดงรายการ ไฟล/์ ls dir โฟลเดอร์ สรา้ งโฟลเดอร์ mkdir <ช่อื โฟล์เดอร์> mkdir <ชอ่ื โฟลเ์ ดอร>์ ลบโฟลเดอร์ rm -r <ชื่อโฟลเ์ ดอร์> rmdir <ช่อื โฟล์เดอร์> สรา้ งไฟล์ touch <ชอื่ ไฟล์> echo > <ชอื่ ไฟล์> ลบไฟล์ rm <ช่อื ไฟล์> del <ชื่อไฟล์> เปดิ ดไู ฟล์ cat <ชอ่ื ไฟล>์ type <ช่อื ไฟล>์ แสดงทีอ่ ยู่ของคำสัง่ which <ชอ่ื คำสัง่ > where <ช่อื คำสัง่ > Lab 1: การใช้งาน Command line เบื้องต้น 1. กด Windows + r พิมพ์ cmd + Enter เพื่อเปดิ Command Prompt 1.1. เมอื่ Command Prompt เปดิ ข้ึนมาจะพบว่าโฟลเดอรท์ อ่ี ยู่ ณ ปจั จุบนั คือ C:\\Users\\<user> 2. สัง่ mkdir Web101 เพ่ือสร้างโฟลเดอร์ Web101 3. สัง่ cd Web101 เพ่ือยา้ ยไปทโ่ี ฟลเดอร์ Web101 4. สัง่ explorer . (อยา่ ลมื จดุ ) เพ่ือเปดิ window explorer ณ ทโ่ี ฟลเด อร์ปจั จุบนั พรอ้ มแบง่ หน้าจอดังรปู เพื่อให้สังเกตเหน็ การเปลยี่ นแปลงในขอ้

ถดั ๆ ไป 5. สัง่ mkdir test เพ่ือสร้างโฟลเดอร์ test 6. สัง่ dir เพื่อแสดงรายชอื่ ไฟล์และโฟลเดอร์ 7. สัง่ echo > text.txt เพื่อสร้างไฟล์ text.txt 8. สัง่ echo hello > text.txt เพื่อเขียนคำวา่ hello ลงไปในไฟล์ text.txt 8.1. ใหท้ ดลองเปดิ ไฟล์ text.txt ใน explorer เพ่ือดูการเปลี่ยนแปลง 9. สัง่ type text.txt เพื่ออ่านไฟล์ text.txt 10. สัง่ rmdir test เพื่อลบโฟลเดอร์ test 11. สัง่ del text.txt เพื่อลบไฟล์ text.txt 12. ทดลองสรา้ งและใชง้ าน script อย่างง่าย 12.1. สร้างไฟล์ชือ่ myscript.bat 12.1.1. สัง่ type nul > myscript.bat 12.1.2. แก้ไขไฟล์ myscript.bat ใหค้ ลิก๊ ขวาทีไ่ ฟลแ์ ล้วเลือก edit 12.2. ภายในไฟลใ์ หพ้ ิมพ์ขอ้ ความดังรปู และบันทกึ 12.3. สัง่ myscript.bat และสังเกตการเปลย่ี นแปลง 12.4. สัง่ rmdir /s /q hello เพ่ือลบโฟลเดอร์ท่ีสรา้ งโดย myscript.bat

Part 2: Path Environment Variables command ทใี่ ชใ้ น Command Prompt จะถูกแบง่ เปน็ สองกลุม่ คือ 1. Internal command 1.1. command ท่ที ดลองใช้งานใน Part 2 จดั เปน็ Internal command ทงั้ ส้ิน 1.2. command จะรวมมากับตัว Command Prompt 2. External command 2.1. command ทงั้ หมดท่นี อกเหนือจาก Internal command เชน่ ipconfig, ping, tree, find ฯลฯ รวมไปถงึ script ตา่ งๆ 2.2. สามารถคน้ หาที่อยู่ของ command ด้วยคำสัง่ where <ชื่อ คำสัง่ > 2.3. command ส่วนใหญจ่ ะอยทู่ ี่ 2.3.1. C:\\Windows 2.3.2. C:\\Windows\\System 2.3.3. C:\\Windows\\System32 2.4. สามารถตดิ ตัง้ command เพ่ิมเตมิ ได้โดยนำโปรแกรมไปวางไว้ ในโฟลเดอรท์ มี่ ีใน Path Environment Variables หรือสามารถ เพ่ิม path ของโฟลเดอร์ท่มี ีโปรแกรมไปที่ Path Environment Variables Lab 2: Path Environment Variables 1. สัง่ ipconfig เพ่ือทดลองใชง้ าน External command 2. สัง่ where ipconfig เพื่อดูท่ีอยู่ของโปรแกรม

3. เปดิ Explorer ไปท่โี ฟลเดอร์ C:\\Windows\\System32 แล้วลองค้นหาคำวา่ ipconfig จะพบโปรแกรม ipconfig.exe อยู่ ดังรูป 4. เปดิ Command Prompt ขน้ึ มาใหม่ และสัง่ myscript จะพบว่าไมส่ ามารถใช้ งานได้ เนอ่ื งจากอย่ภู ายนอกโฟลเดอร์ Web101 ที่มี script วางอยู่ 5. เพ่ิม C:\\Users\\<user>\\Web101 ท่ี Path Environment Variables วธิ ีเปดิ หนา้ environment variables กดปมุ่ window แลว้ พิมพ์ env 6. เปดิ Command Prompt ขึ้นมาใหม่ และสัง่ myscript จะพบวา่ สามารถใช้ งานท่ีไหนก็ได้

Section 2: การใช้งาน Netcat เบ้อื งต้น Netcat เปน็ โปรแกรมที่ใช้สำหรบั Listen หรอื Request บน Network ถูก ออกแบบมาไว้สำหรบั ตรวจสอบและ Debug ปญั หาต่างๆ ทำให้สามารถส่งขอ้ ความ อะไร ไป-มา ระหว่าง Network กไ็ ด้ Part 1: การตดิ ตงั้ Netcat 1. ดาวน์โหลด https://drive.google.com/open?id=1qkdOCgPzAvbT9pYcVAAFDhLw RS7zwet2 2. แตกไฟล์ (คลกิ๊ ขวาทีไ่ ฟล์และเลอื ก Extract All...) และนำโฟลเดอรไ์ ปวางไว้ใน โฟลเ์ ดอร์ Web101

3. ให้ cd เขา้ ไปทโ่ี ฟลเดอร์ netcat-win32-1.12 และลองสัง่ nc -h 4. ให้เพ่ิม path ของ netcat-win32-1.12 ไว้ใน Path Environment Variables 5. เปดิ Command Prompt ใหม่ และลองสัง่ nc -h อกี ครงั้ Lab 3: การใชง้ าน Netcat เบอื้ งตน้ 1. สัง่ nc -lp 1234 เพื่อ Listen ที่ port 1234 2. เปดิ Command Prompt ขึน้ มาอกี 1 อัน และสัง่ nc 127.0.0.1 1234 เพ่ือ เชอ่ื ม ต่อไปยัง locahost:1234 ทสี่ ัง่ Listen ไวใ้ นขอ้ 1 3. พิมพ์ขอ้ ความ ไป-มา ทงั้ ฝ่ งั server และ client

4. ใหด้ ู ip เคร่อื งดว้ ยคำสัง่ ipconfig และทดลองกับเพ่ือนข้างๆ คนนงึ เปน็ client อกี คนนงึ เปน็ server และทดลองส่งขอ้ ความ ไป-มา ระหว่างเครอ่ื ง Section 3: Netcat กบั HTTP Protocol Part 1: HTTP Protocol HTTP Protocol เปน็ เพียงรปู แบบของข้อความที่ตกลงกันเปน็ มาตรฐาน โดย Web server และ Web browser ใชใ้ นการติดต่อสื่อสารกนั ตวั อยา่ ง HTTP Request

ตัวอย่าง HTTP Response Lab 4: การใชง้ าน Netcat รว่ มกบั HTTP Protocol *ไมส่ ามารถใช้ netcat กบั https ได้ เนือ่ งจาก netcat ไม่ support SSL 1. ทดลองเขา้ เวบ็ www.clusterkit.co.th ด้วย Netcat 1.1. สัง่ nc www.clusterkit.co.th 80 และพิมพ์ HTTP Protocol ดงั รูป 1.2. จากนัน้ กด Enter 2 ที เพ่ือส่งบนั ทดั วา่ งไปที่ Server เพ่ือให้ Server รู้ ว่าหมดส่วน Header แล้ว 2. ทดลองจำลอง Webserver ดว้ ย Netcat 2.1. สัง่ nc -lp 1234 เพื่อให้ Netcat Listen ท่ี Port 1234

2.2. เปดิ Browser และ Request มาที่ URL http://127.0.0.1:1234 ดังรปู 2.2.1. * จะพบว่าที่ Command Prompt จะได้รบั ข้อความที่ส่งมาจาก 2.2.2. Browser ซึ่งกค็ ือ HTTP Protocol นนั่ เอง * จะพบว่าท่ี Browser จะอยู่ในสถานะ Loading อยู่ เน่ืองจากรอ การ Response จาก Server

2.3. ที่ Command Prompt ใหพ้ ิมพ์ขอ้ ความกลบั ไปตามลำดับ ดงั รปู

2.4. ท่ี Command Prompt ให้กด Ctrl+c เพื่อปดิ Connection จะพบวา่ Browser จะออกจากสถานะ Loading

2.5. ทดลองใช้ Netcat จำลอง Server อกี ครัง้ และให้ Browser Request โดยครัง้ น้ีใหเ้ พ่ิม Content-Length เข้าไปที่ Header ด้วย ดงั รปู 2.5.1. * จะพบว่า Browser จะปดิ Connection ทนั ทที ีไ่ ด้รับข้อมลู ครบ 20 bytes ตามทร่ี ะบใุ น Content-Length Section 4: เตรยี ม Coding Envrionment Part 1: เตรียม Coding Envrionment 1. การติดตัง้ Golang 1.1. ดาวนโ์ หลดไดท้ ี่ https://golang.org/dl/ 1.2. Next, Next, Next, Finish

1.3. เม่ือตดิ ตัง้ เรียบรอ้ ยแลว้ ให้เปดิ Command Prompt แลว้ สัง่ go version เพ่ือตรวจสอบวา่ ติดตัง้ เรียบรอ้ ยแล้ว ดังรูป 2. การตดิ ตัง้ Code Editor 2.1. * สามารถใช้ Code Editor ท่ีถนดั ได้ แตข่ อแนะนำเปน็ VSCode 2.2. ดาวน์โหลดไดท้ ่ี https://code.visualstudio.com/ Part 2: ทดลองเขียนโปรแกรม Hello World * Default workspace ของ Golang จะอยูท่ ี่ C:\\Users\\<user>\\go\\src 1. สรา้ งโฟลเดอร์ helloworld ที่ path C:\\Users\\<user>\\go\\src 1.1. * ถา้ หากใน C:\\Users\\<user> ไมม่ โี ฟลเดอร์ go\\src ให้สรา้ งขึ้นมา ก่อน) 2. สร้างไฟล์ main.go และพิมพ์ Code ดงั รูป

3. เปดิ Comman Prompt และ cd ไปที่โฟลเดอร์ helloworld จากนนั้ สัง่ go run main.go เพื่อรันโปรแกรม ดงั รปู 4. สัง่ go build เพ่ือ Compile และ Build โปรแกรมให้ออกมาในรปู แบบ Executeable File 4.1. จะพบวา่ มไี ฟล์ helloworld.exe ปรากฏในโฟลเดอร์ helloworld 4.2. ทดลองใช้งานโปรแกรม ดังรปู 5. สัง่ go install เพื่อย้ายโปรแกรม helloworld.exe ไปไว้ที่ C:\\Users\\<user>\\go\\bin ซง่ึ path น้ี ถูกเพิ่มเข้าไปใน Path Environment Variable ขณะท่ตี ิดตงั้ Golang แลว้ จึงทำใหส้ ามารถเรยี กใช้งานโปรแกรม helloworld.exe ได้ทุกที่โดยอตั โนมตั ิ 6. ทดลองสัง่ helloworld ท่นี อกโฟลเดอร์ helloworld Part 3: ดาวนโ์ หลด Code เร่มิ ตน้ สำหรบั Workshop นี้ จะมี Code เร่ิมต้นให้ โดยแบง่ ออกเปน็ ทงั้ หมด 14 Part สามารถดาวนโ์ หลดไดต้ ามลิงค์น้ี

https://github.com/paiboon15721/web101-workshop เม่ือดาวนโ์ หลดเรียบรอ้ ยแล้ว ให้ Extract File (คล๊กิ ขวา Extract All...) และนำ โฟลเดอรไ์ ปวางไว้ภายใต้ path C:\\Users\\<user>\\go\\src จากนัน้ ใหใ้ ช้ VSCode

เปดิ โฟลเดอร์ web101-workshop ดงั รปู Section 5: การพัฒนา Webserver จาก TCP Protocol ดว้ ย ภาษา Golang ให้ทำความเขา้ ใจ และเขยี น Code ตามตวั อยา่ ง โดยใน Code ตวั อยา่ งจะมี เขยี นคำอธิบายไวแ้ ลว้ จากนัน้ ทดลอง Run และสังเกตพฤติกรรม ความแตกต่างใน แตล่ ะ Part Part 1: TCP Server 1. เขียน TCP server ให้ listen ท่ี port 1234

2. เม่ือมี client request เข้ามา ให้แสดงขอ้ ความ \"Hello from server!\" กลับไป ให้ client Code Test 1. สัง่ go run part1\\main.go 2. เปดิ Command Prompt ขึ้นมาอกี อัน และสัง่ nc 127.0.0.1 1234 เพื่อ request 2.1. * Server จะปดิ ตวั ลงทนั ทเี มือ่ ทำงานเสร็จ Client จะไมส่ ามารถ request ไปได้อีกแล้ว ซึ่งโดยปกติ Webserver จะต้องสามารถพร้อม รบั request จาก Client ไดต้ ลอดเวลา

Part 2: ทำให้ Server ไมป่ ดิ ตวั เองลง และสามารถ handle request ถดั ไปได้ Code Test 1. สัง่ go run part2\\main.go 2. เปดิ Command Prompt ขนึ้ มาอีกอนั และสัง่ nc 127.0.0.1 1234 เพ่ือ request 2.1. * จะสังเกตเห็นวา่ ฝ่ งั Server ไมป่ ดิ ตวั ลง 3. ทฝ่ี ่ งั Client ใหก้ ด Ctrl+c เพื่อปดิ Connection 4. ทดลอง request ไปอกี ครัง้ 5. ทดลองเปดิ Command Prompt ขึ้นมาใหม่ และ request เพ่ือจำลอง Client หลายคน

5.1. * จะพบวา่ Client ตอ้ งคอยกด Ctrl-c เองทกุ ครัง้ เพ่ือปดิ Connection ถงึ จะสามารถ request ใหม่ได้

Part 3: ทำให้ Server ปดิ Connection หลังจากทีส่ ่งขอ้ ความกลบั ไปท่ี Client เรียบร้อยแล้ว Code Test * ทดสอบเหมอื น Part 2 ทผ่ี ่านมา จะพบว่า Client ไมต่ อ้ งคอยกด Ctrl-c เองแลว้ เนือ่ งจากฝ่ งั Server ปดิ Connection ทกุ ครงั้ หลงั จากทีส่ ่งขอ้ ความไปให้ Client เรียบรอ้ ย

Part 4: การอา่ นข้อความจาก Client Code Test 1. สัง่ go run part4\\main.go 2. ทดลอง request และพิมพ์ข้อความไปท่ี Server 2.1. * จะพบว่าฝ่ งั Server สามารถอา่ นข้อความท่สี ่งมาจาก Client และ พิมพ์ขอ้ ความออกมาท่ี Console ไดแ้ ล้ว

3. เปดิ Command Prompt ข้ึนมาอกี อัน เพ่ือ request 3.1. * จะพบวา่ Server ไมส่ ามารถอ่านขอ้ ความจาก Client 2 ได้ เนื่องจาก Server ทำงานแค่ Thread เดียว และกำลังคอย scan text จาก Client 1 อยู่ (for scanner.Scan())

4. กลับไปท่ี Client 1 และกด Ctrl-c เพื่อปดิ Connection 4.1. * จะพบว่า Server พิมพ์ข้อความจาก Client 2 ทันทีที่ Client 1 ปดิ Connection

Part 5: ทำให้ Server handle หลายๆ request พร้อมๆ กันได้ Code Test

1. ทดลองเหมอื น Part 4 1.1. จะพบว่า Server สามารถ handle หลายๆ request พรอ้ มๆ กันได้แล้ว 2. ทดลอง request ดว้ ย Browser 2.1. * ขอ้ ความท่ี Server พิมพ์ออกมาทาง Console ทัง้ หมด คอื ส่ิงท่ี Browser ส่งมาซง่ึ เปน็ ไปตามรปู แบบของ HTTP Protocol 2.2. * ถงึ ตรงน้ี Server สามารถรบั request จาก Browser ไดแ้ ล้ว แต่ไม่ สามารถหยดุ scan text และทำงานต่อไปได้

Part 6: ทำให้ Server หยดุ scan text จาก Client เมื่อเจอบนั ทัดวา่ ง Code Test 1. สัง่ go run part6\\main.go 2. เปดิ Command Prompt อีกอนั เพ่ือ request 3. ทดลองพิมพ์ข้อความไปหา Server

4. ทดลองส่งบรรทดั วา่ งไป 4.1. * จะพบว่า Server ออกมาจากการ Scan, ส่งขอ้ ความกลบั ไปให้ Client และปดิ Connection เรียบรอ้ ย 5. ทดลอง request ดว้ ย Browser

5.1. * จะพบว่าไมส่ ามารถใช้งานได้ โดย Browser จะแจ้งว่า invalid response (ใน Browser อนื่ อาจแสดงผลแตกตา่ งออกไป) เนอื่ งจาก Server ไม่ได้ส่งขอ้ ความถูกต้องตามรูปแบบของ HTTP Protocol Part 7: เพ่ิม HTTP Protocol เพื่อให้สามารถทำงานร่วมกับ Browser ได้ Code Test 1. สัง่ go run part7\\main.go

2. ทดลอง request ดว้ ย Netcat และส่งบรรทดั ว่างกลบั ไปที่ Server 2.1. * จะพบวา่ Server ส่งขอ้ ความกลบั มาถูกตอ้ งตามรปู แบบของ HTTP Protocol 3. ทดลอง request ดว้ ย Browser

Part 8: แก้ไข และส่งเปน็ HTML แทน เพื่อให้ Browser สามารถแสดงเปน็ ตัวหนาได้ Code Test 1. สัง่ go run part8\\main.go 2. ทดลอง request ดว้ ย Browser

Part 9: Text Encoding และ Content-Length สำหรับ Part นี้จะเตรียม Binary ท่ี Encode เปน็ UTF-8 และ TIS-620 ดงั น้ี 1. UTF-8 body := []byte{224, 184, 151, 224, 184, 148, 224, 184, 170, 224, 184, 173, 224, 184, 154, 224, 184, 160, 224, 184, 178, 224, 184, 169, 224, 184, 178, 224, 185, 132, 224, 184, 151, 224, 184, 162} 2. TIS-620 body := []byte{183, 180, 202, 205, 186, 192, 210, 201, 210, 228, 183, 194}

Code Test 1. run โปรแกรมและ request ดว้ ย Browser 2. ทดลองสลบั ชดุ ของ Binary, เปลี่ยน Header charset เปน็ charset=utf-8 และ charset=tis-620 ไป-มา พรอ้ มสังเกตการเปล่ียนแปลง 2.1. * ทุกครัง้ ท่แี กไ้ ข Code ตอ้ ง run โปรแกรมใหม่ทุกครงั้

Part 10: การอา่ นค่า Method และ URI ทส่ี ่งมาจาก Client Code

Test 1. run โปรแกรมและ request ด้วย Browser 1.1. * จะพบว่าสามารถดงึ คา่ Method และ URI ท่รี บั มาจาก Client เพ่ือนำ ไปใช้กำหนดเงื่อนไขการทำ Routing ไดแ้ ล้ว

Part 11: การทำ Routing Code

Test 1. run โปรแกรมและ request ดว้ ย Browser 1.1. ทดลอง request ด้วย URL ตา่ งๆ ตามลำดบั ดงั น้ี 1.1.1. http://127.0.0.1:1234 1.1.2. http://127.0.0.1:1234/profile 1.1.3. http://127.0.0.1:1234/about 1.1.4. http://127.0.0.1:1234/contact

1.2. สำหรบั Method WHATEVER ใหท้ ดสอบผา่ น Netcat 1.2.1. * จะเหน็ ได้ว่า Method นัน้ จะเปน็ อะไรกไ็ ด้ ไม่ได้จำกดั อย่แู ค่ GET, PUT, POST, DELETE แตค่ วรทจี่ ะปฏิบัติตามข้อตกลง (Convention)

Part 12: การทำงานกับ Form และ การลิงค์ ไป-มา ในแต่ละหน้า Code

Test 1. run โปรแกรมและ request ด้วย Browser 1.1. * ใหท้ ดลองคล๊ิกลงิ ค์ ไป-มา และพยายามทำความเข้าใจ Code Part 13: การแสดงรูปภาพ part น้ี จะเปน็ การใช้รปู ภาพจากทอี่ นื่ Code

Test 1. run โปรแกรมและ request ดว้ ย Browser 2. ทดลอง request ด้วย Netcat 2.1. * จะเห็นวา่ สิ่งท่ี Browser ไดร้ ับจาก Server มเี พียงแคน่ ้ี จากนนั้ เม่อื Browser เห็น Tag img จงึ จะไปโหลดรปู ตาม src ท่ีระบเุ อาไว้เพ่ือมา แสดงผลบน Browser

Part 14: การ Serve รูปภาพบน Server จาก Code จะมีการเพ่ิม Route /cat.jpg ขน้ึ มา จากนนั้ ก็ไปเปดิ ไฟล์ cat.jpg บน Server แลว้ เขยี นลงไปที่ Connection นัน่ เอง จากนัน้ ในส่วนของ Header ด้าน ลา่ ง ถ้าหาก URI เปน็ /cat.jpg ก็จะเปลี่ยน Content-Type เปน็ image/jpeg แทน เพ่ือให้ browser รบั รู้ว่านคี่ อื รปู ภาพ Code Test 1. run โปรแกรมและ request ดว้ ย Browser

1.1. ให้ cd เข้าไปทโ่ี ฟลเดอร์ part14 ก่อน ถึงจะแสดงผลรูปภาพได้ เน่อื งจากภายใน Code มีการอา้ งถึงไฟล์รปู ภาพอยู่

2. ทดลอง request ดว้ ย Netcat ไปที่ URI /cat.jpg 2.1. * ผลลัพธท์ ีไ่ ด้คือสิ่งท่ี Browser ได้รบั ตอนท่ี request ไปหา Route ที่ serve ไฟลร์ ูปภาพ ซึง่ ทงั้ หมดนัน้ คือ Binary ทงั้ ส้ิน