Introduction to Web Programming

งานนำเสนอเรื่อง: "Introduction to Web Programming"— ใบสำเนางานนำเสนอ:

1 Introduction to Web Programming
ความรู้พื้นฐานเกี่ยวกับการเขียนโปรแกรมบนเว็บ

2 โปรแกรมบนเว็บคืออะไร ??
Program / Application หมายถึง โปรแกรมที่ถูกสร้างขึ้นมาเพื่อสนับสนุนการทำงานของระบบสารสนเทศต่าง ๆ เช่น โปรแกรมลงทะเบียน ตรวจสอบผลการเรียน การจองห้องเรียน การจองที่นั่ง เป็นต้น ผู้ที่สร้างโปรแกรมมักจะถูกเรียกว่า Programmer (โปรแกรมเมอร์) โปรแกรมบนเว็บ (Web Application) คืออะไร ?? Web-based Application หรือ Web Programming มีความหมายเหมือนกัน !!!

3 โปรแกรมบนเว็บคืออะไร ??
Web Application หมายถึง โปรแกรมที่ถูกสร้างขึ้นมาเพื่อใช้บน Web Brower โดยอาศัยโปรโตคอล http(s) ผ่านเครือข่ายอินเทอร์เน็ต Internet Explorer Google Chrome Firefox Netscape Safari

4 โปรแกรมบนเว็บคืออะไร ??
KMUTNB WEBSITE ART WEBSITE

5 โปรแกรมบนเว็บทำงานอย่างไร
SERVER – แม่ข่าย HTTP HTTP Web Browser : Internet Explorer Netscape / Firefox Opera SQL Web Server : Apache IIS Language : ASP PHP JSP Database Client – ผู้ขอใช้บริการ Database : MySQL PostgreSQL Microsoft SQL Server

6 โปรแกรมบนเว็บทำงานอย่างไร
เป็นการเชื่อมต่อในรูปแบบที่เรียกว่า Client/Server Client คือเครื่องคอมพิวเตอร์ที่เป็นฝ่ายขอรับบริการ เช่น ขอเรียกดู Web Page ขอแฟ้มข้อมูล ต่างๆ โดยมีหน้าที่ดังนี้ เรียกดูข้อมูล กรอกข้อมูล แสดงผล Server คือเครื่องผู้ให้บริการตามที่ Client ร้องขอมา และมีหน้าที่ดังนี้ เก็บข้อมูล/เปลี่ยนแปลงแก้ไข/ลบข้อมูลลงในฐานข้อมูล ประมวลผลและส่งผลกลับไปหาผู้ขอรับบริการ

7 โปรแกรมบนเว็บมีข้อดีอย่างไร
เข้าถึงข้อมูลได้ทุกที่ ทุกเวลา และทุกคน (Anytime Anywhere Anybody) สามารถนำเสนอข้อมูลในรูปแบบของ ข้อความ ภาพ เสียง หรือ มัลติมีเดีย โปรแกรมบนเว็บที่ได้รับความนิยม ได้แก่

8 วิวัฒนาการของโปรแกรมบนเว็บ
ยุคที่ 1 (Static) การพัฒนาเว็บจะอาศัยภาษา HTML เป็นหลัก เว็บเพจมีลักษณะคงที่ ยุคที่ 2 (Dynamic) มีการเพิ่มภาษาในรูปแบบของ Script เข้ามาใช้ทำให้เว็บเพจมีความสามารถมากขึ้น เช่น การใช้แบบฟอร์ม ส่ง หรือ แจ้งข้อมูล แบ่งออกเป็น Script ที่ทำงาน 2 ส่วน คือ Client Script จะทำงานที่ Web Browser ในส่วนของเครื่องลูกข่าย ตัวอย่างภาษาที่ใช้งาน เช่น VB Script, JAVA Script เป็นต้น ตย.เช่น การป้องกันการป้อนข้อมูล (รหัสผ่าน) Server Script จะทำงานที่ส่วนของ Web Server ตัวอย่างภาษา เช่น PHP, JSP, ASP เป็นต้น ตย.เช่น ซื้อสินค้า จองตั๋วหนัง ตั๋วเครื่องบิน

9 ยุคที่ 5 ปัญญาประดิษฐ์ ความพยายามที่จะทำให้คอมพิวเตอร์ฉลาดเหมือนคน
วิวัฒนาการของเว็บ ยุคที่ 3 มีการเพิ่ม Object หรือวัตถุต่างๆ เข้าไปทำงานได้หลากหลายมากขึ้น เช่น การใช้ Flash หรือ การเล่นเกมส์บนเว็บด้วย Java Applet เป็นต้น ยุคที่ 4 ภาษา XML (Extensible Markup Language) เข้ามามีบทบาทในการสร้าง เว็บเพจ โดยที่ เว็บเพจ สามารถนำไปแสดงผลยังอุปกรณ์อื่นๆ ได้ เช่น โทรศัพท์มือถือ Pocket PC หรือ PDA ซึ่ง XML เป็นผู้ช่วยในการทำให้ข้อมูลไปแสดงยังที่ต่างๆ ได้ทั่วโดยการพัฒนาเพียงแค่ครั้งเดียวเท่านั้น ยุคที่ 5 ปัญญาประดิษฐ์ ความพยายามที่จะทำให้คอมพิวเตอร์ฉลาดเหมือนคน

10 การประยุกต์ใช้งานอินเทอร์เน็ต
World Wide Web (WWW) บริการเข้าถึงข้อมูลบนอินเทอร์เน็ตที่ได้รับความนิยมมากที่สุดในปัจจุบัน Electronic Mail ( ) บริการส่งจดหมายอิเล็กทรอนิกส์ สามารถส่ง ข้อความ รูปภาพ เสียง ภาพเคลื่อนไหว ไปพร้อมกับจดหมายได้ Chat หรือ Messenger บริการสนทนาผ่านเครือข่ายอินเทอร์เน็ต ทำให้ผู้ใช้งานสามารถพูดคุยโต้ตอบกันได้โดยทันที File Transfer Protocol (FTP) บริการขนถ่ายแฟ้มข้อมูล ผ่านเครือข่ายอินเทอร์เน็ต Multimedia (Youtube / Music) บริการรับชมวิดีโอ เพลง ผ่านเครือข่ายอินเทอร์เน็ต

11 การเขียนโปรแกรมบนเว็บ
องค์ประกอบสำหรับ การเขียนโปรแกรมบนเว็บ Hardware เครื่องคอมพิวเตอร์แม่ข่ายที่ทำหน้าที่ให้บริการ (Server) เครื่องเรียกใช้บริการ(Client) เราเตอร์ โมเด็ม Software HTML Editor, Dreamweaver,Edit+ Server-Side Script เช่น PHP, ASP Client-Side Script เช่น JavaScript, AJAX Web Server Application เช่น Apache, IIS, PWS ซอฟท์แวร์มัลติมีเดีย ระบบการจัดการฐานข้อมูล (Database Management System) MySQL MS Access Oracle

12 การเขียนโปรแกรมบนเว็บ
องค์ประกอบสำหรับ การเขียนโปรแกรมบนเว็บ โปรแกรมที่จะนำมาใช้ โปรแกรม Appserve สำหรับจำลองเครื่องเป็น web server โดยโหลดจากเว็บ ติดตั้งแล้วจะได้ Apache Web Server เว็บเซิร์ฟเวอร์ (อังกฤษ: Apache HTTP Server) คือซอฟต์แวร์สำหรับเปิดให้บริการเซิร์ฟเวอร์บนโพรโทคอล HTTP PHP Script Language MySQL Database phpMyAdmin Database Manager

13 How to Install for PHP AppServ

14 How to Install for PHP หลังจาก Download แล้วคลิกไฟล์เพื่อติดตั้ง Next
ที่มา : Siambook.com

15 How to Install for PHP 2) หน้าจอ License Agreement ข้อตกลงการใช้งานโปรแกรม AppServ คลิก I Agree

16 How to Install for PHP 3) หน้าจอ Choose Install Location ให้เลือกโฟลเดอร์เก็บโปรแกรม C:\AppServ แล้วคลิก Next ทำงานต่อ

17 How to Install for PHP 4) หน้าจอ Select Components ให้เลือกส่วนประกอบของโปรแกรม AppServ คลิก Next ทำงานต่อ

18 How to Install for PHP 5) หน้าจอ Server Info ช่อง Server Name คลิกและพิมพ์ชื่อเว็บไซต์ ชื่อมาตรฐานที่นิยมใช้กัน ก็คือ localhost พิมพ์ คลิก Next ทำงานต่อ

19 How to Install for PHP 6) คลิกและพิมพ์รหัสผ่าน สำหรับใช้งานฐานข้อมูล MySQL พิมพ์ password root , re-root คลิก Next ทำงานต่อ

20 How to Install for PHP 7) รอจนกว่าจะขึ้นหน้าจอนี้

21 ส่วนจัดการฐานข้อมูล MySQL ส่วนประกอบของ AppServ
How to Install for PHP พิมพ์ ที่ Web Browser Version ของ AppServ ส่วนจัดการฐานข้อมูล MySQL ส่วนประกอบของ AppServ

22 PHP Guideline http://www.thaicreate.com/php.html www.webthaidd.com/php

23 แนะนำโปรแกรมเขียนเว็บอย่างง่าย Macromedia Dreamweaver CS6
MD CS6 1. การจัดการเว็บไซต์ (Site Management) 2. แนะนำการเมนูการใช้งาน MD 8 / CS6 แนะนำโปรแกรมเขียนเว็บอย่างง่าย Macromedia Dreamweaver CS6 3. การพิมพ์ข้อความ, สี, ตัวอักษร รูปภาพ และอื่นๆ 4. การสร้างตาราง 5. การสร้างเว็บไซต์อย่างง่าย

24 Q & A