Frontend vs Backend

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

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

Frontend และ Backend แตกต่างกันอย่างไร
HTML, CSS, JavaScript คืออะไร
React และ Component คืออะไร
Laravel และ API คืออะไร
ทั้งสองส่วนทำงานร่วมกันอย่างไร

🎨 Frontend คืออะไร?

Frontend คือ ส่วนที่เราเห็น ของเว็บไซต์ - ทุกสิ่งที่แสดงบนหน้าจอและสามารถคลิกหรือโต้ตอบได้

เปรียบเทียบง่ายๆ

Frontend เหมือนกับ หน้าร้านอาหาร:

ลูกค้าเห็นเมนู ตกแต่งร้าน โต๊ะ เก้าอี้
สามารถโต้ตอบ: สั่งอาหาร กดปุ่มเรียกพนักงาน
สวยงาม ใช้งานง่าย เป็นมิตร

ส่วนประกอบของ Frontend

Frontend ประกอบด้วย:

1. ปุ่มต่างๆ (Buttons)

html

<button>เข้าสู่ระบบ</button>
<button>ถูกใจ ❤️</button>

2. ฟอร์ม (Forms)

html

<input type="text" placeholder="ชื่อของคุณ">
<input type="email" placeholder="อีเมล">
<input type="password" placeholder="รหัสผ่าน">

3. ตาราง (Tables)

ชื่อ	อีเมล	สถานะ
สมชาย	[email protected]	✅ ใช้งานอยู่
สมหญิง	[email protected]	❌ ระงับ

4. รูปภาพและไอคอน

🏠 หน้าแรก
🔍 ค้นหา
👤 โปรไฟล์

📚 HTML, CSS, JavaScript คืออะไร?

Frontend ถูกสร้างด้วย 3 เทคโนโลยีหลัก:

1. HTML (โครงสร้าง)

HTML = HyperText Markup Language

HTML คือ โครงสร้างของเว็บไซต์ เหมือนโครงกระดูกของบ้าน

เปรียบเทียบ

HTML เหมือน โครงเหล็กของอาคาร - กำหนดว่ามีห้องไหนอยู่ที่ไหน

ตัวอย่าง HTML:

html

<!DOCTYPE html>
<html>
  <head>
    <title>หน้าแรก</title>
  </head>
  <body>
    <h1>ยินดีต้อนรับ!</h1>
    <p>นี่คือย่อหน้าข้อความ</p>
    <button>คลิกที่นี่</button>
  </body>
</html>

HTML ประกอบด้วย Tags:

<h1> = หัวข้อใหญ่
<p> = ย่อหน้า (paragraph)
<button> = ปุ่ม
<img> = รูปภาพ
<a> = ลิงก์

2. CSS (ตาแต่ง)

CSS = Cascading Style Sheets

CSS คือ การตกแต่ง ทำให้เว็บสวยงาม มีสีสัน

เปรียบเทียบ

CSS เหมือน การทาสี ติดวอลเปเปอร์ วางเฟอร์นิเจอร์ - ทำให้บ้านสวยงาม

ตัวอย่าง CSS:

css

/* ทำให้ปุ่มสวยงาม */
button {
  background-color: #3B82F6; /* สีฟ้า */
  color: white; /* ตัวหนังสือสีขาว */
  padding: 10px 20px; /* ระยะห่างภายใน */
  border-radius: 8px; /* มุมโค้ง */
  font-size: 16px; /* ขนาดตัวอักษร */
}

button:hover {
  background-color: #2563EB; /* สีเข้มขึ้นเมื่อเอาเมาส์ชี้ */
}

CSS ทำอะไรได้บ้าง:

✨ เปลี่ยนสี
📏 ปรับขนาด
🎨 เพิ่มเงา
📱 Responsive (ปรับตามหน้าจอ)
🎭 Animation

3. JavaScript (การทำงาน)

JavaScript คือ สมอง ที่ทำให้เว็บไซต์มีชีวิต มีปฏิกิริยา

เปรียบเทียบ

JavaScript เหมือน ระบบไฟฟ้า ระบบน้ำ - ทำให้บ้านใช้งานได้จริง

ตัวอย่าง JavaScript:

javascript

// เมื่อคลิกปุ่ม แสดงข้อความ
button.addEventListener('click', function() {
  alert('สวัสดีครับ! 👋')
})

// คำนวณเลข
let total = 100 + 200
console.log(total) // 300

// ตรวจสอบเงื่อนไข
if (age >= 18) {
  console.log('เข้าได้')
} else {
  console.log('ยังเด็กเกินไป')
}

JavaScript ทำอะไรได้บ้าง:

🎯 ตอบสนองเมื่อคลิก
✅ ตรวจสอบฟอร์ม
🔄 โหลดข้อมูลใหม่โดยไม่ต้อง refresh
🎮 สร้างเกมส์
📊 วาดกราฟ

⚛️ React คืออะไร?

React คือ ไลบรารี JavaScript ที่ช่วยสร้าง Frontend ได้ง่ายและรวดเร็วขึ้น

ทำไมต้องใช้ React?

เขียน JavaScript ธรรมดาใช้เวลานาน ซับซ้อน และยากบำรุงรักษา

React ช่วย:

✅ เขียนโค้ดน้อยลง
✅ จัดการได้ง่ายขึ้น
✅ ทำงานเร็วขึ้น
✅ แยกส่วนเป็น Component

ก่อนมี React vs มี React

ก่อนมี React (JavaScript ธรรมดา):

javascript

// โค้ดยาวมาก ซับซ้อน
document.getElementById('name').innerHTML = user.name
document.getElementById('email').innerHTML = user.email
document.getElementById('status').innerHTML = user.status
// ...ต้องเขียนทีละบรรทัด 😓

หลังมี React:

jsx

// สั้น กระชับ อ่านง่าย
function UserCard({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <span>{user.status}</span>
    </div>
  )
}

🧩 Component คืออะไร?

Component = ส่วนประกอบย่อย ที่สามารถนำมาประกอบกันได้

เปรียบเทียบกับเลโก้ 🧱

Component เหมือน ชิ้นส่วนเลโก้:

แต่ละชิ้นมีหน้าที่ของตัวเอง
สามารถประกอบกันเป็นชิ้นใหญ่ได้
ใช้ซ้ำได้หลายครั้ง
เปลี่ยนชิ้นใดชิ้นหนึ่งได้โดยไม่กระทบชิ้นอื่น

ตัวอย่าง Component

Component: ปุ่ม

jsx

function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  )
}

// ใช้งาน
<Button text="เข้าสู่ระบบ" onClick={handleLogin} />
<Button text="ลงทะเบียน" onClick={handleRegister} />
<Button text="ยกเลิก" onClick={handleCancel} />

Component: การ์ดผู้ใช้

jsx

function UserCard({ name, email, avatar }) {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>{email}</p>
      <Button text="ดูโปรไฟล์" />
    </div>
  )
}

ประโยชน์ของ Component

ใช้ซ้ำได้ (Reusable)
- เขียนครั้งเดียว ใช้ได้หลายที่
แยกส่วนชัดเจน (Modular)
- แต่ละ Component ทำหน้าที่ของตัวเอง
บำรุงรักษาง่าย (Maintainable)
- แก้ไขที่เดียว ส่งผลทุกที่ที่ใช้
ทำงานร่วมกันได้ (Collaborative)
- หลายคนทำ Component คนละตัวได้

🔧 Backend คืออะไร?

Backend คือ ส่วนที่เราไม่เห็น - ทำงานเบื้องหลังบนเซิร์ฟเวอร์

เปรียบเทียบง่ายๆ

Backend เหมือน ห้องครัวของร้านอาหาร:

ลูกค้าไม่เห็น แต่มันทำงานอยู่
รับคำสั่ง (order) จากหน้าร้าน
ประมวลผล (ทำอาหาร)
ส่งผลลัพธ์กลับไป (เสิร์ฟอาหาร)

ส่วนที่เราไม่เห็น (เครื่องเซิร์ฟเวอร์)

เซิร์ฟเวอร์ (Server) คือคอมพิวเตอร์ที่:

💾 เก็บโค้ด Backend
🗄️ เชื่อมต่อกับ Database
⚡ ประมวลผลข้อมูล
🌐 ตอบคำขอจาก Frontend

[คอมพิวเตอร์ของคุณ] <--อินเทอร์เน็ต--> [เซิร์ฟเวอร์]
     (Frontend)                        (Backend + Database)

Backend ทำอะไรบ้าง?

รับข้อมูลจาก Frontend
ตรวจสอบความถูกต้อง
- อีเมลถูกต้องไหม?
- รหัสผ่านตรงกันไหม?
ประมวลผล
- คำนวณยอดรวม
- ค้นหาข้อมูล
- เรียงลำดับ
เข้าถึง Database
- บันทึกข้อมูล
- ดึงข้อมูล
- อัพเดทข้อมูล
ส่งผลลัพธ์กลับ

🚀 Laravel คืออะไร?

Laravel คือ PHP Framework สำหรับสร้าง Backend

ทำไมต้องใช้ Laravel?

เขียน PHP ธรรมดา = ต้องเขียนทุกอย่างเอง ใช้เวลานาน

Laravel มีเครื่องมือสำเร็จรูป:

✅ ระบบ Login/Register
✅ จัดการ Database ง่าย
✅ ระบบรักษาความปลอดภัย
✅ API สำเร็จรูป
✅ เอกสารครบถ้วน

ตัวอย่าง Laravel

สร้าง API ดึงข้อมูลผู้ใช้:

php

<?php
// routes/api.php
Route::get('/users', function() {
    // ดึงข้อมูลผู้ใช้ทั้งหมดจาก Database
    $users = User::all();
    
    // ส่งกลับเป็น JSON
    return response()->json($users);
});

สร้าง API ค้นหาผู้ใช้:

php

Route::get('/users/{id}', function($id) {
    // ค้นหาผู้ใช้จาก ID
    $user = User::find($id);
    
    if ($user) {
        return response()->json($user);
    } else {
        return response()->json([
            'error' => 'ไม่พบผู้ใช้'
        ], 404);
    }
});

สร้างผู้ใช้ใหม่:

php

Route::post('/users', function(Request $request) {
    // ตรวจสอบข้อมูล
    $validated = $request->validate([
        'name' => 'required|min:3',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8'
    ]);
    
    // สร้างผู้ใช้ใหม่
    $user = User::create([
        'name' => $validated['name'],
        'email' => $validated['email'],
        'password' => bcrypt($validated['password'])
    ]);
    
    return response()->json($user, 201);
});

🔌 API คืออะไร? (ง่ายๆ)

API = Application Programming Interface

API คือ ช่องทางที่ Frontend และ Backend คุยกัน

เปรียบเทียบง่ายๆ

API เหมือน พนักงานรับออเดอร์:

Frontend (ลูกค้า): "ขอข้อมูลผู้ใช้หน่อยครับ"
API (พนักงาน): "รอสักครู่นะครับ..."
Backend (ครัว): ประมวลผล หาข้อมูล
API: "เอาครับ นี่ข้อมูลที่ขอ"
Frontend: แสดงผลให้ผู้ใช้เห็น

ตัวอย่าง API Request

javascript

// Frontend (React) เรียก API
fetch('https://api.example.com/users/1')
  .then(response => response.json())
  .then(data => {
    console.log(data)
    // { id: 1, name: "สมชาย", email: "[email protected]" }
  })

ประเภท API

Method	ความหมาย	ตัวอย่าง
GET	ขอดูข้อมูล	ดูรายการผู้ใช้
POST	สร้างข้อมูลใหม่	สร้างผู้ใช้ใหม่
PUT	แก้ไขข้อมูล	แก้ไขข้อมูลผู้ใช้
DELETE	ลบข้อมูล	ลบผู้ใช้

⚙️ การประมวลผลข้อมูล

Backend ทำการประมวลผลข้อมูลแบบต่างๆ:

1. ตรวจสอบข้อมูล (Validation)

php

// ตรวจสอบว่าอีเมลถูกต้องไหม
$request->validate([
    'email' => 'required|email',
    'age' => 'required|integer|min:18',
    'phone' => 'required|regex:/^[0-9]{10}$/'
]);

2. คำนวณ (Calculation)

php

// คำนวณยอดรวม
$total = $items->sum('price');

// คำนวณส่วนลด
$discount = $total * 0.1;

// ยอดสุทธิ
$netTotal = $total - $discount;

php

// ค้นหาผู้ใช้ที่ชื่อมี "สม"
$users = User::where('name', 'LIKE', '%สม%')->get();

// กรองเฉพาะที่ active
$activeUsers = User::where('status', 'active')->get();

// เรียงตามวันที่สร้าง
$users = User::orderBy('created_at', 'desc')->get();

4. สร้างรายงาน (Reporting)

php

// นับจำนวนผู้ใช้
$totalUsers = User::count();

// หาค่าเฉลี่ย
$averageAge = User::avg('age');

// จัดกลุ่ม
$usersByCity = User::groupBy('city')
                    ->selectRaw('city, count(*) as total')
                    ->get();

🔄 Frontend + Backend ทำงานร่วมกัน

ขั้นตอนการทำงาน (ตัวอย่าง: สมัครสมาชิก)

1. [Frontend] ผู้ใช้กรอกฟอร์ม
   ↓
2. [Frontend] กดปุ่ม "สมัครสมาชิก"
   ↓
3. [Frontend] ส่งข้อมูลไป API (POST /register)
   ↓
4. [Backend] รับข้อมูล
   ↓
5. [Backend] ตรวจสอบความถูกต้อง
   ↓
6. [Backend] เข้ารหัส password
   ↓
7. [Backend] บันทึกลง Database
   ↓
8. [Backend] ส่ง response กลับ { success: true }
   ↓
9. [Frontend] รับ response
   ↓
10. [Frontend] แสดงข้อความ "สมัครสมาชิกสำเร็จ!"

Code ตัวอย่างเต็ม

Frontend (React):

jsx

function RegisterForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: ''
  })

  const handleSubmit = async (e) => {
    e.preventDefault()
    
    // 3. ส่งข้อมูลไป Backend
    const response = await fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    })
    
    // 9. รับ response
    const data = await response.json()
    
    // 10. แสดงผล
    if (data.success) {
      alert('สมัครสมาชิกสำเร็จ! 🎉')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        placeholder="ชื่อ"
        onChange={(e) => setFormData({...formData, name: e.target.value})}
      />
      <input 
        type="email" 
        placeholder="อีเมล"
        onChange={(e) => setFormData({...formData, email: e.target.value})}
      />
      <input 
        type="password" 
        placeholder="รหัสผ่าน"
        onChange={(e) => setFormData({...formData, password: e.target.value})}
      />
      <button type="submit">สมัครสมาชิก</button>
    </form>
  )
}

Backend (Laravel):

php

<?php
// 4. รับข้อมูล
Route::post('/register', function(Request $request) {
    
    // 5. ตรวจสอบความถูกต้อง
    $validated = $request->validate([
        'name' => 'required|min:3',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8'
    ]);
    
    // 6. เข้ารหัส password
    $validated['password'] = bcrypt($validated['password']);
    
    // 7. บันทึกลง Database
    $user = User::create($validated);
    
    // 8. ส่ง response กลับ
    return response()->json([
        'success' => true,
        'user' => $user
    ]);
});

📊 สรุปความแตกต่าง

	Frontend	Backend
ที่อยู่	Browser (คอมของผู้ใช้)	Server
ภาษา	HTML, CSS, JavaScript	PHP (Laravel)
ทำหน้าที่	แสดงผล รับข้อมูล	ประมวลผล จัดการข้อมูล
ผู้ใช้เห็นไหม	✅ เห็น	❌ ไม่เห็น
เครื่องมือ	React	Laravel
เชื่อมต่อ	ส่ง Request	ตอบ Response

🎯 จำให้ขึ้นใจ!

สรุป

Frontend = หน้าร้าน (ที่เห็น)
- HTML = โครงสร้าง
- CSS = ตกแต่ง
- JavaScript = ทำงาน
- React = เครื่องมือช่วยสร้าง
- Component = ชิ้นส่วนนำมาประกอบกัน
Backend = ห้องครัว (ที่ไม่เห็น)
- Laravel = เครื่องมือช่วยสร้าง Backend
- API = ช่องทางสื่อสาร
- ประมวลผล = ตรวจสอบ คำนวณ บันทึก
ทั้งสองต้องทำงานร่วมกัน เพื่อให้เว็บไซต์ทำงานได้สมบูรณ์!

ขั้นตอนต่อไป: มาดูภาพรวมระบบทั้งหมดว่าทำงานร่วมกันอย่างไร

🚀

เรียนรู้ต่อ

🏗️ภาพรวมระบบ 🔧เริ่มเรียน Laravel ⚛️เริ่มเรียน React

Frontend vs Backend ​

🎨 Frontend คืออะไร? ​

ส่วนประกอบของ Frontend ​

1. ปุ่มต่างๆ (Buttons) ​

2. ฟอร์ม (Forms) ​

3. ตาราง (Tables) ​

4. รูปภาพและไอคอน ​

📚 HTML, CSS, JavaScript คืออะไร? ​

1. HTML (โครงสร้าง) ​

2. CSS (ตาแต่ง) ​

3. JavaScript (การทำงาน) ​

⚛️ React คืออะไร? ​

ก่อนมี React vs มี React ​

🧩 Component คืออะไร? ​

ตัวอย่าง Component ​

Component: ปุ่ม ​

Component: การ์ดผู้ใช้ ​

ประโยชน์ของ Component ​

🔧 Backend คืออะไร? ​

ส่วนที่เราไม่เห็น (เครื่องเซิร์ฟเวอร์) ​

Backend ทำอะไรบ้าง? ​

🚀 Laravel คืออะไร? ​

ตัวอย่าง Laravel ​

🔌 API คืออะไร? (ง่ายๆ) ​

ตัวอย่าง API Request ​

ประเภท API ​

⚙️ การประมวลผลข้อมูล ​

1. ตรวจสอบข้อมูล (Validation) ​

2. คำนวณ (Calculation) ​

3. ค้นหาและกรอง (Search & Filter) ​

4. สร้างรายงาน (Reporting) ​

🔄 Frontend + Backend ทำงานร่วมกัน ​

ขั้นตอนการทำงาน (ตัวอย่าง: สมัครสมาชิก) ​

Code ตัวอย่างเต็ม ​

📊 สรุปความแตกต่าง ​

🎯 จำให้ขึ้นใจ! ​

เรียนรู้ต่อ

Frontend vs Backend

🎨 Frontend คืออะไร?

ส่วนประกอบของ Frontend

1. ปุ่มต่างๆ (Buttons)

2. ฟอร์ม (Forms)

3. ตาราง (Tables)

4. รูปภาพและไอคอน

📚 HTML, CSS, JavaScript คืออะไร?

1. HTML (โครงสร้าง)

2. CSS (ตาแต่ง)

3. JavaScript (การทำงาน)

⚛️ React คืออะไร?

ก่อนมี React vs มี React

🧩 Component คืออะไร?

ตัวอย่าง Component

Component: ปุ่ม

Component: การ์ดผู้ใช้

ประโยชน์ของ Component

🔧 Backend คืออะไร?

ส่วนที่เราไม่เห็น (เครื่องเซิร์ฟเวอร์)

Backend ทำอะไรบ้าง?

🚀 Laravel คืออะไร?

ตัวอย่าง Laravel

🔌 API คืออะไร? (ง่ายๆ)

ตัวอย่าง API Request

ประเภท API

⚙️ การประมวลผลข้อมูล

1. ตรวจสอบข้อมูล (Validation)

2. คำนวณ (Calculation)

3. ค้นหาและกรอง (Search & Filter)

4. สร้างรายงาน (Reporting)

🔄 Frontend + Backend ทำงานร่วมกัน

ขั้นตอนการทำงาน (ตัวอย่าง: สมัครสมาชิก)

Code ตัวอย่างเต็ม

📊 สรุปความแตกต่าง

🎯 จำให้ขึ้นใจ!