Web Technology & Basic Web Development

1. Web Technology &Basic Web Development By Wathinee http://wathinee.reru.ac.th

2. Chapter 4 : You will Learning about • How to install Appserv • Macromedia Dreamweaver • PHP (basic) • HTML Form

4. เว็บเซิร์ฟเวอร์ (Web Server) คือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่เป็นเครื่องบริการ webpage แก่ผู้ร้องขอด้วยโปรแกรมประเภท Web Browser ที่ร้องขอข้อมูลผ่านโปรโตคอลเฮชทีทีพี (HTTP = Hyper Text Transfer Protocol) เครื่องบริการจะส่งข้อมูลให้ผู้ร้องขอในรูปของข้อความ ภาพ เสียง หรือสื่อผสม เครื่องบริการ webpage มักเปิดบริการพอร์ท 80 (HTTP Port) ให้ผู้ร้องขอได้เชื่อมต่อและนำข้อมูลไปใช้ เช่น โปรแกรมอินเทอร์เน็ตเอ็กโพเลอร์ (Internet Explorer) หรือฟายฟร็อก (FireFox Web Browser) การเชื่อมต่อเริ่มด้วยการระบุที่อยู่เว็บเพจที่ร้องขอ (Web Address หรือ URL = Uniform Resource Locator) เช่น http://www.google.com หรือ http://www.thaiall.com เป็นต้น โปรแกรมที่นิยมใช้เป็นเครื่องบริการเว็บ คือ อาปาเช่ (Apache Web Server) หรือไมโครซอฟท์ไอไอเอส (Microsoft IIS = Internet Information Server)

5. Server technology Application servers use different technologies, such as ColdFusion, ASP.NET, ASP, JSP, and PHP. The following table shows common application servers available for the five server technologies listed.

6. Web server ตัวอย่างอื่น ๆ http://www.thaiall.com/omni/indexo.html

7. Web server : Appserv Download : http://wathinee.reru.ac.th PDF File For Installing Clink Here For Download Program

8. How to use AppServ and directory structure Directory structure of Apache, PHP, MySQL after install AppServ.

9. Directory Structure

10. Test • After install App Servand understand about directory structure. You can write first program by PHP immediately and your program must store in C:/AppServ/www. If you need to test you program you can access via Browser. Specify you program on address bar e.g. http://localhost/test.php

11. Start / Stop Service Start  Control panel  Administrative Tools  Services

12. Test Create your Folder Such as .. “54312220333” 1. Create folder

13. Test “index.html” http://localhost/mysite/index.html http://localhost/mysite/ http://127.0.0.1/mysite/

14. Install “Macromedia Dreamweaver 8.0” Clink Here For Download Program

15. คำสั่ง ให้นักศึกษาคัดลอกข้อมูลงานทั้งหมดไปเก็บลงใน Folder ชื่อ “รหัสนักศึกษา”

16. Create Site ใน Dreamweaver

17. Create Site ใน Dreamweaver Input your folder name (in your computer) Input URL and your folder name (The Server)

18. Create Site ใน Dreamweaver

19. Create Site ใน Dreamweaver

20. Create Site ใน Dreamweaver

21. Create Site ใน Dreamweaver

22. Create Site ใน Dreamweaver

23. Create Site ใน Dreamweaver

24. Create Site ใน Dreamweaver

25. Install ..Completed

26. ทดสอบเขียนภาษา PHP • ตั้งชื่อไฟล์ว่า “testphppage.php”

27. Create PHP File • File  New

28. testphppage.php

29. testphppage.php

30. Clink here to View File

31. Success.!!! http://localhost/wathineeweb/testphppage.php

32. PHP

33. บทนำ • PHP (Hypertext Preprocessor) เป็น server side scripting languageซึ่งมีโครงสร้างของภาษา คล้าย C , Java และ Perl ถูกคิดค้นขึ้นโดยนาย RasmusLerdorfซึ่งจุดประสงค์ของเขาเพื่อที่จะสร้าง code ที่ซับซ้อนใส่เข้าไปใน HTML ให้ได้ การเขียน php script นั้นไม่จำเป็นต้องประกาศตัวแปรก่อนการใช้งาน นอกจากนั้น PHP ยังรองรับการเขียนโปรแกรมแบบ Object-Orientedได้อีกด้วย ในปัจจุบัน PHP จึงกลายเป็น scripting language ที่ได้รับความนิยมและมีความสามารถสูงภาษาหนึ่งPHP เป็น scripting language ที่ถูกสร้างขึ้นมาสำหรับงานด้าน Web Application ซึ่งมีความสามารถด้าน Database เป็นความสามรถหลักและได้รับการยอมรับว่า เป็น Web Application language ที่มีความเร็วสูงที่สุด มีประสิทธิภาพมากที่สุด และพัฒนาได้ง่ายที่สุดภาษาหนึ่ง เนื่องจาก PHP มี build-in function ให้นักพัฒนาโปรแกรมเลือกใช้เป็นจำนวนมากใน

34. PHP กับการรับข้อมูลจาก HTML Form มาประมวลผล

35. Html Form คือ แบบฟอร์ม ที่เราสามารถป้อนข้อมูลต่าง ๆ ลงไปเพื่อส่งข้อมูลเหล่านี้ไปประมวลผลยัง PHP รู้จักกับ HTML Form

36. Server Side Script Such as.. PHP,JSP ,ASP HTML Form เพื่อรับข้อมูลจากผู้ใช้ HTML File PHP File

37. Show Data User Input Data ShowDataform1.php CreateForm1.htm

38. Create “CreateForm1.htm”

39. สร้างไฟล์ Html ชื่อ CreateForm1.html Code การเขียน Html Form

40. การรับข้อมูลจากผู้ใช้จะต้องใช้สิ่งที่เรียกว่า input element ของภาษา html ซึ่งมีอยู่หลายรูปแบบ ตัวอย่างดังนี้ หลากหลายวิธีการรับข้อมูล Input

41. Textbox element คือ ช่องที่สามารถกรอกข้อมูลได้เพียง 1 บรรทัดเท่านั้น รูปแบบ<input type=“text” name=“ชื่อของช่อง textbox” value=“ค่าเริ่มต้นของช่อง textbox” size=“ขนาดความยาวของช่อง textbox” maxlength=“จำนวนตัวอักษรมากสุดที่สามารถรับได้”> ตัวอย่าง <input type=“text” name=“username” value=“admin” size=“30” maxlength=“6”> ** กำหนด input รหัส ให้กำหนด type เป็น password รับข้อมูลด้วย: Textbox

42. Input Text Element

44. Input Text

45. View “CreateForm1.html”

46. เป็นปุ่มสำหรับส่งข้อมูล เมื่อกดปุ่มนี้ข้อมูลทั้งหมดที่กรอกหรือเลือกไป จะถูส่งไปประมวลผลยังไฟล์ PHP ที่ระบุ (ระบุในส่วน form) รูปแบบ <input type=“submit” value=“ข้อความที่แสดงบนปุ่ม submit”> ตัวอย่าง <input type="submit" value=“Sent Data”> ส่งข้อมูลด้วย submit element

47. เป็นปุ่มสำหรับเคลียร์ข้อมูลในฟอร์ม เมื่อกดปุ่มนี้ข้อมูลทั้งหมดที่ได้กรอกหรือเลือกไปจะถูกเคลียร์ เหมือนไม่ได้กรอกหรือเลือกค่าใดๆ มาก่อน รูปแบบ <input type=“reset” value=“ข้อความที่แสดงบนปุ่ม reset”> ตัวอย่าง <input type=“reset" value=“Clear Data”> เคลียร์ข้อมูลที่กรอกหรือเลือกไปreset element

48. submit element & reset element

49. Submit & Reset Button

50. Create File “ShowDataForm1.php”