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 เพื่อแอด