Introduction to Web dev (แนะนำโลกของการพัฒนาเว็บ) | Web Development 101 EP. 1
สวัสดีครับทุกคน ยินดีต้อนรับสู่ช่อง mikerobster วันนี้เราจะมาเริ่มต้นการเดินทางในโลกของการพัฒนาเว็บ (Web Development) ไปด้วยกัน ในซีรีส์ Web Development 101 นี้ เราจะมาทำความเข้าใจตั้งแต่พื้นฐานที่สุด เพื่อให้คุณที่สนใจอยากเริ่มต้นในสายงานนี้ ได้เห็นภาพรวมของอุตสาหกรรมนี้อย่างชัดเจน พร้อมทั้งแนะนำเครื่องมือและแนวคิดสำคัญต่างๆ ที่จำเป็นต่อการเริ่มต้น
เว็บไซต์คืออะไร?
เว็บไซต์คืออะไร? หลายคนอาจจะเคยใช้เว็บไซต์มานับครั้งไม่ถ้วน แต่เคยสงสัยไหมว่าเบื้องหลังการทำงานของมันเป็นอย่างไร? ในบทความนี้ เราจะมาทำความเข้าใจว่าเว็บไซต์ทำงานอย่างไร ตั้งแต่ผู้ใช้งาน (User) พิมพ์ชื่อเว็บไซต์ใน Browser จนถึงการแสดงผลข้อมูลบนหน้าจอ
กระบวนการทำงานของเว็บไซต์
กระบวนการทำงานของเว็บไซต์เริ่มต้นเมื่อผู้ใช้งาน (User) เปิด Browser และพิมพ์ชื่อเว็บไซต์ เช่น shopee.com ลงไป สิ่งที่เกิดขึ้นหลังจากนั้นคือ
- User และ Browser: ผู้ใช้งาน (User) คือตัวเราที่ต้องการเข้าชมเว็บไซต์ โดยใช้ Browser เป็นเครื่องมือในการเข้าถึง
- Domain และ DNS: Browser จะทำการค้นหา Domain ของเว็บไซต์ (เช่น shopee.com) และส่งคำขอไปยัง DNS (Domain Name System)
- Server และ IP Address: DNS จะทำหน้าที่เหมือนสมุดโทรศัพท์ ที่คอยแปลงชื่อ Domain ให้เป็น IP Address (เลขที่อยู่ของ Server)
- การทำงานของ Server: เมื่อ Browser รู้ IP Address แล้ว จะทำการส่งคำขอไปยัง Server ที่เก็บข้อมูลของเว็บไซต์นั้นๆ Server จะประมวลผลข้อมูลและส่งกลับไปยัง Browser
- การส่งไฟล์กลับไปยัง Browser: Server จะส่งไฟล์กลับไปยัง Browser ในรูปแบบของไฟล์ HTML, CSS และ JavaScript ซึ่ง Browser จะนำมาแสดงผลให้ User เห็น
ส่วนประกอบของไฟล์ HTML
เมื่อ Server ส่งข้อมูลกลับมายัง Browser ข้อมูลเหล่านั้นจะอยู่ในรูปแบบของไฟล์ HTML ซึ่งเป็นโครงสร้างหลักของเว็บไซต์ ไฟล์ HTML ประกอบไปด้วย 3 ส่วนหลักๆ ได้แก่
- HTML: ทำหน้าที่กำหนดโครงสร้างของเว็บไซต์ เช่น ส่วนหัว (Header), เนื้อหา (Content) และส่วนท้าย (Footer)
- CSS: ทำหน้าที่ตกแต่งเว็บไซต์ กำหนดรูปแบบ สีสัน และการจัดวางองค์ประกอบต่างๆ เพื่อให้เว็บไซต์ดูสวยงามและน่าใช้งาน
- Javascript: ทำหน้าที่เพิ่ม Logic ให้กับเว็บไซต์ เช่น การตอบสนองต่อการคลิก การแสดงผลแบบไดนามิก และการโต้ตอบกับผู้ใช้งาน
ส่วนประกอบของฝั่ง Server
ฝั่ง Server เป็นส่วนที่ User มองไม่เห็น แต่มีความสำคัญอย่างยิ่งต่อการทำงานของเว็บไซต์ โดย Server ประกอบไปด้วยส่วนประกอบหลักๆ ดังนี้
- Web Server: ทำหน้าที่รับคำขอจาก Browser และส่งข้อมูลกลับไป Web Server เปรียบเสมือนผู้จัดการที่คอยดูแลการสื่อสารระหว่าง Browser และส่วนประกอบอื่นๆ ของ Server
- Backend Language: ภาษาที่ใช้ในการเขียนโปรแกรมฝั่ง Server เช่น PHP, Python, Node.js เป็นต้น Backend Language จะทำหน้าที่ประมวลผลข้อมูล, จัดการ Logic และติดต่อกับ Database
- Database (SQL): ระบบจัดการฐานข้อมูล (เช่น MySQL, PostgreSQL) ที่ใช้ในการจัดเก็บข้อมูลของเว็บไซต์ เช่น ข้อมูลสินค้า, ข้อมูลผู้ใช้งาน และข้อมูลอื่นๆ
ความแตกต่างระหว่าง Server และ Client
เพื่อให้เข้าใจการทำงานของเว็บไซต์ได้ดียิ่งขึ้น เรามาทำความเข้าใจความแตกต่างระหว่าง Server และ Client กัน
- Server: คือฝั่งที่ User มองไม่เห็น ทำหน้าที่เก็บข้อมูล, ประมวลผลข้อมูล และส่งข้อมูลกลับไปยัง Client
- Client (HTML): คือฝั่งที่ User มองเห็น ได้แก่ Browser ที่ใช้ในการเข้าชมเว็บไซต์ Client จะแสดงผลข้อมูลที่ได้รับจาก Server ในรูปแบบของ HTML, CSS และ JavaScript
API คืออะไร?
API (Application Programming Interface) คือช่องทางที่ช่วยให้เว็บไซต์สามารถดึงข้อมูลแบบไดนามิกจากแหล่งข้อมูลต่างๆ ได้ API เปรียบเสมือนตัวกลางที่ช่วยให้เว็บไซต์สามารถสื่อสารกับระบบอื่นๆ ได้อย่างมีประสิทธิภาพ
ภาพรวมของซีรีส์
ซีรีส์ Web Development 101 นี้ จะพาคุณไปทำความเข้าใจในหัวข้อต่างๆ ดังนี้
- HTML, CSS, Javascript: เรียนรู้พื้นฐานการสร้างโครงสร้าง, ตกแต่ง และเพิ่ม Logic ให้กับเว็บไซต์
- API: ทำความเข้าใจแนวคิด API และวิธีการดึงข้อมูลแบบไดนามิก
- Backend Server: เรียนรู้การทำงานของ Server และ Backend Language
- MySQL: ทำความเข้าใจระบบจัดการฐานข้อมูล (Database)
- Web Development vs. Web Deployment: ทำความเข้าใจความแตกต่างระหว่างการพัฒนาเว็บไซต์และการนำเว็บไซต์ขึ้นใช้งานจริง
- เครื่องมือที่ใช้: VS Code: แนะนำเครื่องมือที่จำเป็นสำหรับการพัฒนาเว็บไซต์
- แหล่งข้อมูล: W3Schools, Codecademy: แนะนำแหล่งข้อมูลสำหรับการเรียนรู้เพิ่มเติม
เริ่มต้น: ทำความเข้าใจเว็บไซต์
User และ Browser
เริ่มต้นด้วยการทำความเข้าใจว่า User คือใคร และ Browser คืออะไร User คือผู้ใช้งานเว็บไซต์ ส่วน Browser คือโปรแกรมที่ใช้ในการเข้าถึงเว็บไซต์ เช่น Google Chrome, Firefox, Safari
การพิมพ์ชื่อเว็บไซต์
เมื่อ User ต้องการเข้าชมเว็บไซต์ สิ่งแรกที่ User ต้องทำคือพิมพ์ชื่อเว็บไซต์ (Domain) ลงใน Browser
Domain และ DNS
Domain คือชื่อเว็บไซต์ เช่น shopee.com ส่วน DNS (Domain Name System) คือระบบที่ทำหน้าที่แปลงชื่อ Domain ให้เป็น IP Address
Server และ IP Address
IP Address คือเลขที่อยู่ของ Server ที่เก็บข้อมูลของเว็บไซต์ Server คือคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลแก่ User
การทำงานของ Server
เมื่อ Browser ได้รับ IP Address แล้ว จะทำการส่งคำขอไปยัง Server Server จะประมวลผลข้อมูลและส่งกลับไปยัง Browser
การส่งไฟล์กลับไปยัง Browser
Server จะส่งข้อมูลกลับไปยัง Browser ในรูปแบบของไฟล์ HTML, CSS และ JavaScript
ส่วนประกอบของเว็บไซต์ (HTML File)
HTML: โครงสร้างของเว็บไซต์
HTML (Hypertext Markup Language) คือภาษาที่ใช้ในการสร้างโครงสร้างของเว็บไซต์ HTML จะกำหนดองค์ประกอบต่างๆ เช่น หัวเรื่อง, ย่อหน้า, รูปภาพ และลิงก์
CSS: ตกแต่งเว็บไซต์
CSS (Cascading Style Sheets) คือภาษาที่ใช้ในการตกแต่งเว็บไซต์ CSS จะกำหนดรูปแบบ, สีสัน และการจัดวางองค์ประกอบต่างๆ เพื่อให้เว็บไซต์ดูสวยงามและน่าใช้งาน
Javascript: Logic ของเว็บไซต์
JavaScript คือภาษาที่ใช้ในการเพิ่ม Logic ให้กับเว็บไซต์ JavaScript จะช่วยให้เว็บไซต์สามารถโต้ตอบกับผู้ใช้งาน, แสดงผลแบบไดนามิก และทำงานอื่นๆ ได้
ส่วนประกอบของฝั่ง Server
Web Server: ผู้นำทาง
Web Server ทำหน้าที่รับคำขอจาก Browser และส่งข้อมูลกลับไป Web Server เปรียบเสมือนผู้จัดการที่คอยดูแลการสื่อสารระหว่าง Browser และส่วนประกอบอื่นๆ ของ Server
Backend Language: ควบคุม Logic
Backend Language คือภาษาที่ใช้ในการเขียนโปรแกรมฝั่ง Server เช่น PHP, Python, Node.js Backend Language จะทำหน้าที่ประมวลผลข้อมูล, จัดการ Logic และติดต่อกับ Database
Database: จัดเก็บข้อมูล (SQL)
Database คือระบบจัดการฐานข้อมูล (เช่น MySQL, PostgreSQL) ที่ใช้ในการจัดเก็บข้อมูลของเว็บไซต์ เช่น ข้อมูลสินค้า, ข้อมูลผู้ใช้งาน และข้อมูลอื่นๆ SQL (Structured Query Language) คือภาษาที่ใช้ในการจัดการข้อมูลใน Database
ความแตกต่างระหว่าง Server และ Client
Server: สิ่งที่ User มองไม่เห็น
Server คือฝั่งที่ User มองไม่เห็น ทำหน้าที่เก็บข้อมูล, ประมวลผลข้อมูล และส่งข้อมูลกลับไปยัง Client
Client (HTML): สิ่งที่ User มองเห็น
Client คือฝั่งที่ User มองเห็น ได้แก่ Browser ที่ใช้ในการเข้าชมเว็บไซต์ Client จะแสดงผลข้อมูลที่ได้รับจาก Server ในรูปแบบของ HTML, CSS และ JavaScript
API: การดึงข้อมูลแบบไดนามิก
API กับ Javascript
API สามารถถูกเรียกใช้งานผ่าน Javascript เพื่อดึงข้อมูลจาก Server และนำมาแสดงผลบนหน้าเว็บไซต์
API กับ Backend Language
Backend Language ใช้ในการสร้าง API เพื่อให้ Client สามารถดึงข้อมูลจาก Server ได้
API กับ Database
API จะดึงข้อมูลจาก Database และส่งกลับไปยัง Client
ภาพรวมของซีรีส์
HTML, CSS, Javascript, API, Backend Server, MySQL
ซีรีส์นี้จะครอบคลุมเนื้อหาต่างๆ เหล่านี้ เพื่อให้คุณมีความรู้พื้นฐานที่จำเป็นในการพัฒนาเว็บไซต์
Web Development vs. Web Deployment
เราจะมาทำความเข้าใจความแตกต่างระหว่างการพัฒนาเว็บไซต์และการนำเว็บไซต์ขึ้นใช้งานจริง
เครื่องมือที่ใช้: VS Code
เราจะแนะนำเครื่องมือที่จำเป็นสำหรับการพัฒนาเว็บไซต์ เช่น VS Code
แหล่งข้อมูล: W3Schools, Codecademy
เราจะแนะนำแหล่งข้อมูลสำหรับการเรียนรู้เพิ่มเติม เช่น W3Schools และ Codecademy
การเตรียมตัว
การสร้าง Folder
เริ่มต้นด้วยการสร้าง Folder สำหรับเก็บไฟล์ต่างๆ ของเว็บไซต์
การใช้งาน Auto Save
ตั้งค่า Auto Save เพื่อให้การทำงานง่ายขึ้น
💬 ปรึกษาการเงินฟรีกับผู้เชี่ยวชาญ คลิกเพื่อแอดไลน์
หรือสแกน QR เพื่อแอด
