เว็บไซต์คืออะไร?

จุดประสงค์การเรียนรู้

หลังจากอ่านบทนี้ คุณจะเข้าใจว่า:

• เว็บไซต์ทำงานอย่างไร
• ประกอบด้วยส่วนไหนบ้าง
• ความสัมพันธ์ระหว่างผู้ใช้และเซิร์ฟเวอร์

เว็บไซต์คืออะไร?

เว็บไซต์ (Website) คือชุดหน้าเว็บที่เชื่อมต่อกัน เก็บเนื้อหา เช่น ข้อความ รูปภาพ วิดีโอ และอื่นๆ ที่จัดเก็บไว้บนเซิร์ฟเวอร์ (Server) ซึ่งคุณสามารถเข้าดูได้ผ่านโปรแกรม Browser

ตัวอย่างเว็บไซต์ที่คุณใช้งานทั่วไป

• Google.com - เครื่องมือค้นหา
• Facebook.com - โซเชียลเน็ตเวิร์ก
• YouTube.com - แพลตฟอร์มวิดีโอ
• Gmail.com - บริการอีเมล

ส่วนประกอบของเว็บไซต์

เว็บไซต์มีส่วนประกอบหลัก 3 ส่วน:

เรียนรู้จากตัวอย่างจริง

ลองคิดถึงการสั่งอาหาร:

• Frontend = เมนูอาหารที่ลูกค้าเห็น
• Backend = ห้องครัวที่ทำอาหาร
• Database = ที่เก็บวัตถุดิบและข้อมูลคำสั่ง

1. Frontend (ด้านหน้า)

Frontend คือสิ่งที่ผู้ใช้เห็นและโต้ตอบกับในโปรแกรม Browser

• ภาษา: HTML, CSS, JavaScript
• ความเป็นหน้าที่: สร้างรูปลักษณ์ สีสัน ปุ่ม ฟอร์ม
• ตัวอย่าง: เมนู ปุ่มค้นหา แบบฟอร์มใส่ข้อมูล

<!-- ตัวอย่าง HTML -->
<button class="btn">ค้นหา</button>
<input type="text" placeholder="ใส่ข้อความที่ต้องการค้นหา">

2. Backend (ด้านหลัง)

Backend คือส่วนที่เน่ (ไม่เห็น) ที่ประมวลผลข้อมูล

• ภาษา: PHP, Python, Node.js (ในคอร์สนี้ใช้ Laravel/PHP)
• ความเป็นหน้าที่: รับข้อมูลจาก Frontend แล้วประมวลผล
• ตัวอย่าง: ตรวจสอบการเข้าสู่ระบบ บันทึกข้อมูล ค้นหาข้อมูล

// ตัวอย่าง PHP/Laravel
$user = User::find($id);
return response()->json($user);

3. Database (ฐานข้อมูล)

Database คือที่เก็บข้อมูลทั้งหมด

• ตัวอย่าง: MySQL, PostgreSQL
• เก็บ: ข้อมูลผู้ใช้ รูปภาพ โพสต์ คอมเมนต์
• ลักษณะ: เหมือนโต๊ะ Excel ที่มีแถว (rows) และคอลัมน์ (columns)

การทำงานของเว็บไซต์

เมื่อคุณเข้า Facebook.com ขั้นตอนมีดังนี้:

1. คุณพิมพ์ facebook.com ใน Browser
   ↓
2. Browser ส่งคำขอ (Request) ไปยังเซิร์ฟเวอร์ของ Facebook
   ↓
3. เซิร์ฟเวอร์ (Backend) ประมวลผล หาข้อมูลจาก Database
   ↓
4. เซิร์ฟเวอร์ส่งหน้า HTML กลับมา
   ↓
5. Browser แสดงผล (Frontend) ให้คุณเห็น

เข้าใจให้ชัดเจน

Backend คือสมองของเว็บไซต์ Frontend คือใบหน้า ทั้งสองต้องทำงานร่วมกันเพื่อให้เว็บไซต์ทำงานได้ดี

ตัวอย่างขั้นตอน: เข้าสู่ระบบ Facebook

ขั้นตอนที่ 1: ป้อนข้อมูล (Frontend)

<!-- หน้าที่ผู้ใช้เห็น -->
<input type="email" placeholder="อีเมล">
<input type="password" placeholder="รหัสผ่าน">
<button>เข้าสู่ระบบ</button>

ขั้นตอนที่ 2: ส่งข้อมูลไปให้ Backend

// JavaScript ส่งข้อมูล
fetch('/login', {
  method: 'POST',
  body: JSON.stringify({
    email: '[email protected]',
    password: 'password123'
  })
})

ขั้นตอนที่ 3: Backend ตรวจสอบ

// Laravel (Backend)
$user = User::where('email', $email)->first();
if ($user && password_verify($password, $user->password)) {
  return success('เข้าสู่ระบบสำเร็จ');
} else {
  return error('อีเมลหรือรหัสผ่านไม่ถูกต้อง');
}

ขั้นตอนที่ 4: Frontend แสดงผล

// ถ้าสำเร็จ เปลี่ยนไปยังหน้า Home
if (response.success) {
  window.location.href = '/home';
}

เทคโนโลยีที่จะเรียน

เทคโนโลยี	บทบาท	ภาษา
React	Frontend - สร้างหน้าเว็บ	JavaScript
Laravel	Backend - ประมวลผลข้อมูล	PHP
MySQL	Database - เก็บข้อมูล	SQL

ข้อสำคัญที่ต้องจำ

• ✅ Frontend = สิ่งที่ผู้ใช้เห็น (หน้าตา)
• ✅ Backend = สิ่งที่ทำให้หน้าตาทำงาน (สมอง)
• ✅ Database = ที่เก็บข้อมูล (หน่วยความจำ)
• ✅ ทั้งสามนี้ต้องทำงานร่วมกัน

คำศัพท์ที่ต้องรู้

• Server: คอมพิวเตอร์ที่เก็บเว็บไซต์และให้บริการ
• Client: คอมพิวเตอร์ของผู้ใช้ (ของคุณ)
• Browser: โปรแกรมที่ใช้ดูเว็บ (Chrome, Firefox, Safari)
• Request: การขอข้อมูลจาก Client ไปยัง Server
• Response: การตอบกลับจาก Server มาให้ Client

🔍 ต้องการรู้ลึกขึ้นไป?

คุณสามารถเปิด Developer Tools ใน Browser (กด F12) เพื่อดูว่า Frontend ทำงานอย่างไร! ลองดู Network tab เพื่อดู Request ที่เกิดขึ้น

---

ขั้นตอนต่อไป: ต่อไปมาเรียนรู้ความแตกต่างระหว่าง Frontend และ Backend เพิ่มเติม

🚀

เรียนรู้ต่อ

🎨

Frontend vs Backend

เข้าใจความแตกต่าง

→

🏗️

ภาพรวมระบบ

ระบบทำงานร่วมกัน

→