Training Docs

Appearance

ภาพรวมระบบและการทำงานร่วมกัน ​

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

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

  • Database คืออะไรและทำงานอย่างไร
  • MySQL และโครงสร้างตาราง
  • ความสัมพันธ์ระหว่างตาราง
  • ระบบทั้งหมดทำงานร่วมกันอย่างไร
  • กรณีศึกษาการทำงานจริง

🗄️ Database คืออะไร? ​

Database (ฐานข้อมูล) คือ ที่เก็บข้อมูล อย่างเป็นระบบและเป็นระเบียบ

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

Database เหมือน ตู้เก็บเอกสาร:

  • มีหลายลิ้นชัก (ตาราง)
  • แต่ละลิ้นชักเก็บเอกสารประเภทเดียวกัน
  • จัดเรียงเป็นระเบียบ ค้นหาได้ง่าย
  • ปลอดภัย ไม่หายง่าย

ทำไมต้องใช้ Database? ​

ก่อนมี Database:

ข้อมูลผู้ใช้.txt
[email protected]|รหัสผ่าน123|สมชาย
[email protected]|รหัสผ่าน456|สมหญิง

❌ ปัญหา:

  • ค้นหายาก
  • แก้ไขยุ่งยาก
  • ไม่ปลอดภัย
  • หาข้อมูลซ้ำได้ยาก

หลังมี Database:

sql
SELECT * FROM users WHERE email = '[email protected]'

✅ ดีกว่า:

  • ค้นหาเร็ว
  • แก้ไขง่าย
  • ปลอดภัย
  • จัดการได้ดี

Database เก็บอะไรบ้าง? ​

เว็บไซต์ใช้ Database เก็บ:

  1. ข้อมูลผู้ใช้

    • ชื่อ, อีเมล, รหัสผ่าน
    • โปรไฟล์, รูปโปรไฟล์

  2. เนื้อหา

    • โพสต์, บทความ, ความคิดเห็น
    • รูปภาพ, วิดีโอ

  3. ข้อมูลธุรกรรม

    • คำสั่งซื้อ, ประวัติการซื้อ
    • ข้อมูลการชำระเงิน

  4. ข้อมูลระบบ

    • Log การทำงาน
    • การตั้งค่าต่างๆ

🐬 MySQL คืออะไร? ​

MySQL คือ โปรแกรมจัดการ Database ที่ได้รับความนิยมมากที่สุด

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

  • ✅ ฟรี - ไม่เสียค่าใช้จ่าย
  • ✅ เร็ว - ประมวลผลได้เร็ว
  • ✅ น่าเชื่อถือ - ใช้กันทั่วโลก
  • ✅ ใช้งานง่าย - เรียนรู้ได้ไม่ยาก
  • ✅ เอกสารเยอะ - หาข้อมูลได้ง่าย

เว็บไซต์ดังที่ใช้ MySQL ​

  • 🌐 Facebook - โซเชียลเน็ตเวิร์ก
  • 🛒 Shopify - แพลตฟอร์มขายของออนไลน์
  • 📰 WordPress - ระบบจัดการเนื้อหา
  • 💼 LinkedIn - โซเชียลเน็ตเวิร์กธุรกิจ

📊 โครงสร้าง Database: ตาราง แถว คอลัมน์ ​

เปรียบเทียบกับ Excel 📈 ​

Database เหมือน ไฟล์ Excel ที่มีหลาย Sheet!

ส่วนประกอบExcelDatabase (MySQL)
ไฟล์ไฟล์ Excel (.xlsx)Database
SheetSheet1, Sheet2ตาราง (Table)
หัวคอลัมน์A, B, Cชื่อคอลัมน์ (Column)
แถวแถวที่ 1, 2, 3แถว (Row/Record)
ช่องCell (A1, B2)ค่าข้อมูล (Value)

ตัวอย่าง: ตาราง Users ​

ในรูปแบบตาราง:

idnameemailrolecreated_at
1สมชาย[email protected]admin2024-01-15
2สมหญิง[email protected]user2024-01-16
3สมศักดิ์[email protected]user2024-01-17

ในรูปแบบ SQL:

sql
CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE,
  role VARCHAR(50),
  created_at DATETIME
);

องค์ประกอบของตาราง ​

1. คอลัมน์ (Column/Field) ​

คอลัมน์ = หัวข้อข้อมูล

ตัวอย่าง:

  • id - รหัสประจำตัว
  • name - ชื่อ
  • email - อีเมล
  • role - บทบาท

2. แถว (Row/Record) ​

แถว = ข้อมูล 1 รายการ

ตัวอย่าง: ข้อมูลของ "สมชาย" อยู่ในแถวที่ 1

3. ค่าข้อมูล (Value) ​

ค่าข้อมูล = ข้อมูลในแต่ละช่อง

ตัวอย่าง: "[email protected]" เป็นค่าข้อมูลในคอลัมน์ email

4. Primary Key (กุญแจหลัก) ​

Primary Key = รหัสประจำตัวที่ไม่ซ้ำกัน

  • มักเป็นคอลัมน์ id
  • ไม่มีค่าซ้ำกัน
  • ใช้อ้างอิงข้อมูล

🔗 ความสัมพันธ์ระหว่างตาราง ​

ตารางต่างๆ สามารถ เชื่อมโยงกัน เพื่อเก็บข้อมูลที่สัมพันธ์กัน

เปรียบเทียบ

เหมือน ลิ้นชักในตู้เอกสาร ที่อ้างอิงกัน:

  • ลิ้นชัก "ลูกค้า" มีรายชื่อลูกค้า
  • ลิ้นชัก "คำสั่งซื้อ" อ้างอิงว่าลูกค้าคนไหนสั่งซื้ออะไร

ตัวอย่าง: ระบบร้านค้าออนไลน์ ​

ตาราง users (ผู้ใช้) ​

idnameemail
1สมชาย[email protected]
2สมหญิง[email protected]

ตาราง orders (คำสั่งซื้อ) ​

iduser_idproductpriceorder_date
11โทรศัพท์150002024-01-20
21หูฟัง20002024-01-21
32แท็บเล็ต120002024-01-22

ความสัมพันธ์:

  • Order #1 → สั่งโดย User #1 (สมชาย)
  • Order #2 → สั่งโดย User #1 (สมชาย)
  • Order #3 → สั่งโดย User #2 (สมหญิง)

Foreign Key (กุญแจต่างประเทศ) ​

user_id ในตาราง orders คือ Foreign Key ที่อ้างอิงไปยัง id ในตาราง users

sql
-- ดึงข้อมูลคำสั่งซื้อพร้อมชื่อผู้สั่ง
SELECT 
  orders.id,
  users.name,
  orders.product,
  orders.price
FROM orders
JOIN users ON orders.user_id = users.id

ผลลัพธ์:

idnameproductprice
1สมชายโทรศัพท์15000
2สมชายหูฟัง2000
3สมหญิงแท็บเล็ต12000

ประเภทความสัมพันธ์ ​

1. One-to-Many (1 ต่อ หลาย) ​

ตัวอย่าง: 1 ผู้ใช้ → หลายคำสั่งซื้อ

User (1) ----< Orders (Many)
สมชาย       → Order #1, Order #2

2. Many-to-Many (หลาย ต่อ หลาย) ​

ตัวอย่าง: หลายนักเรียน ↔ หลายวิชา

Students (Many) ><  Courses (Many)
สมชาย ← → คณิต, วิทย์
สมหญิง ← → คณิต, อังกฤษ

3. One-to-One (1 ต่อ 1) ​

ตัวอย่าง: 1 ผู้ใช้ → 1 โปรไฟล์

User (1) ---- Profile (1)
สมชาย → รูปภาพ, ที่อยู่, เบอร์โทร

🔄 ระบบทำงานร่วมกันอย่างไร? ​

มาดูภาพรวมว่า React + Laravel + MySQL ทำงานร่วมกันอย่างไร

สถาปัตยกรรมระบบ (Architecture) ​

┌─────────────────────────────────────────────────────────┐
│                    ผู้ใช้ (User)                        │
└────────────────────┬────────────────────────────────────┘
                     │
                     ▼
        ┌────────────────────────┐
        │   Browser (Chrome)     │
        └────────────────────────┘
                     │
                     ▼
        ┌────────────────────────┐
        │   React (Frontend)     │ ← HTML, CSS, JavaScript
        │   - แสดงผล UI         │
        │   - รับข้อมูลจากUser   │
        └────────────────────────┘
                     │
                     │ HTTP Request (API)
                     ▼
        ┌────────────────────────┐
        │  Laravel (Backend)     │ ← PHP
        │  - รับ Request         │
        │  - ประมวลผล           │
        │  - Validate ข้อมูล     │
        └────────────────────────┘
                     │
                     │ SQL Query
                     ▼
        ┌────────────────────────┐
        │   MySQL (Database)     │ ← SQL
        │   - เก็บข้อมูล         │
        │   - ค้นหาข้อมูล        │
        └────────────────────────┘

ตัวอย่างการทำงานทีละขั้นตอน ​

สถานการณ์

ผู้ใช้ต้องการ เข้าสู่ระบบ (Login)

ขั้นตอนที่ 1: ผู้ใช้กรอกข้อมูล ​

👤 ผู้ใช้: กรอกอีเมลและรหัสผ่าน
📧 Email: [email protected]
🔑 Password: password123
🖱️ คลิก: ปุ่ม "เข้าสู่ระบบ"

ขั้นตอนที่ 2: React ส่งข้อมูล ​

Frontend (React):

jsx
// LoginForm.jsx
function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async () => {
    // ส่งข้อมูลไปยัง Backend
    const response = await fetch('http://api.example.com/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    })
    
    const data = await response.json()
    
    if (data.success) {
      alert('เข้าสู่ระบบสำเร็จ!')
      window.location.href = '/dashboard'
    } else {
      alert('อีเมลหรือรหัสผ่านไม่ถูกต้อง')
    }
  }

  return (
    <div>
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="อีเมล"
      />
      <input 
        type="password" 
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="รหัสผ่าน"
      />
      <button onClick={handleLogin}>เข้าสู่ระบบ</button>
    </div>
  )
}

ขั้นตอนที่ 3: Laravel รับและประมวลผล ​

Backend (Laravel):

php
<?php
// routes/api.php
Route::post('/login', function(Request $request) {
    
    // 1. ตรวจสอบข้อมูลที่ส่งมา
    $validated = $request->validate([
        'email' => 'required|email',
        'password' => 'required'
    ]);
    
    // 2. ค้นหาผู้ใช้จาก Database
    $user = User::where('email', $validated['email'])->first();
    
    // 3. ตรวจสอบว่ามีผู้ใช้หรือไม่
    if (!$user) {
        return response()->json([
            'success' => false,
            'message' => 'ไม่พบผู้ใช้นี้ในระบบ'
        ], 404);
    }
    
    // 4. ตรวจสอบรหัสผ่าน
    if (!Hash::check($validated['password'], $user->password)) {
        return response()->json([
            'success' => false,
            'message' => 'รหัสผ่านไม่ถูกต้อง'
        ], 401);
    }
    
    // 5. สร้าง Token สำหรับ Session
    $token = $user->createToken('auth_token')->plainTextToken;
    
    // 6. ส่งผลลัพธ์กลับ
    return response()->json([
        'success' => true,
        'user' => $user,
        'token' => $token
    ]);
});

ขั้นตอนที่ 4: MySQL ค้นหาข้อมูล ​

Database Query (SQL):

sql
-- Laravel แปลงเป็น SQL Query
SELECT * FROM users 
WHERE email = '[email protected]'
LIMIT 1;

ผลลัพธ์จาก Database:

| id | name   | email              | password (hashed)        |
|----|--------|--------------------|--------------------------|
| 1  | สมชาย  | [email protected]  | $2y$10$abcd...xyz       |

ขั้นตอนที่ 5: ตอบกลับไปยัง Frontend ​

json
{
  "success": true,
  "user": {
    "id": 1,
    "name": "สมชาย",
    "email": "[email protected]"
  },
  "token": "1|abc123xyz..."
}

ขั้นตอนที่ 6: React แสดงผล ​

jsx
// แสดงข้อความสำเร็จ
alert('เข้าสู่ระบบสำเร็จ!')

// เก็บ token สำหรับใช้ในการเรียก API ครั้งถัดไป
localStorage.setItem('token', data.token)

// เปลี่ยนหน้าไปยัง Dashboard
window.location.href = '/dashboard'

📝 กรณีศึกษา: เพิ่มข้อมูลพนักงาน ​

มาดูตัวอย่างเต็มรูปแบบของการเพิ่มข้อมูลพนักงานใหม่

สถานการณ์ ​

HR ต้องการเพิ่มพนักงานใหม่เข้าระบบ

ขั้นตอนที่ 1: ออกแบบ Database ​

sql
-- สร้างตาราง employees
CREATE TABLE employees (
  id INT PRIMARY KEY AUTO_INCREMENT,
  employee_code VARCHAR(10) UNIQUE,
  first_name VARCHAR(100),
  last_name VARCHAR(100),
  email VARCHAR(100) UNIQUE,
  phone VARCHAR(20),
  department VARCHAR(50),
  position VARCHAR(50),
  salary DECIMAL(10,2),
  hire_date DATE,
  status VARCHAR(20) DEFAULT 'active',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

ขั้นตอนที่ 2: สร้างฟอร์มใน React ​

Frontend (React):

jsx
// AddEmployeeForm.jsx
import { useState } from 'react'

function AddEmployeeForm() {
  const [formData, setFormData] = useState({
    employee_code: '',
    first_name: '',
    last_name: '',
    email: '',
    phone: '',
    department: '',
    position: '',
    salary: '',
    hire_date: ''
  })

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    try {
      const response = await fetch('http://api.example.com/employees', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify(formData)
      })

      const data = await response.json()

      if (data.success) {
        alert('เพิ่มพนักงานสำเร็จ! 🎉')
        // รีเซ็ตฟอร์ม
        setFormData({
          employee_code: '',
          first_name: '',
          last_name: '',
          email: '',
          phone: '',
          department: '',
          position: '',
          salary: '',
          hire_date: ''
        })
      } else {
        setError(data.message)
      }
    } catch (err) {
      setError('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง')
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>เพิ่มพนักงานใหม่</h2>
      
      {error && <div className="error">{error}</div>}
      
      <div className="form-group">
        <label>รหัสพนักงาน</label>
        <input
          type="text"
          name="employee_code"
          value={formData.employee_code}
          onChange={handleChange}
          required
        />
      </div>

      <div className="form-row">
        <div className="form-group">
          <label>ชื่อ</label>
          <input
            type="text"
            name="first_name"
            value={formData.first_name}
            onChange={handleChange}
            required
          />
        </div>
        <div className="form-group">
          <label>นามสกุล</label>
          <input
            type="text"
            name="last_name"
            value={formData.last_name}
            onChange={handleChange}
            required
          />
        </div>
      </div>

      <div className="form-group">
        <label>อีเมล</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>

      <div className="form-group">
        <label>เบอร์โทรศัพท์</label>
        <input
          type="tel"
          name="phone"
          value={formData.phone}
          onChange={handleChange}
          required
        />
      </div>

      <div className="form-row">
        <div className="form-group">
          <label>แผนก</label>
          <select
            name="department"
            value={formData.department}
            onChange={handleChange}
            required
          >
            <option value="">เลือกแผนก</option>
            <option value="IT">IT</option>
            <option value="HR">HR</option>
            <option value="Sales">Sales</option>
            <option value="Marketing">Marketing</option>
          </select>
        </div>
        <div className="form-group">
          <label>ตำแหน่ง</label>
          <input
            type="text"
            name="position"
            value={formData.position}
            onChange={handleChange}
            required
          />
        </div>
      </div>

      <div className="form-row">
        <div className="form-group">
          <label>เงินเดือน</label>
          <input
            type="number"
            name="salary"
            value={formData.salary}
            onChange={handleChange}
            required
          />
        </div>
        <div className="form-group">
          <label>วันที่เริ่มงาน</label>
          <input
            type="date"
            name="hire_date"
            value={formData.hire_date}
            onChange={handleChange}
            required
          />
        </div>
      </div>

      <button type="submit" disabled={loading}>
        {loading ? 'กำลังบันทึก...' : 'เพิ่มพนักงาน'}
      </button>
    </form>
  )
}

export default AddEmployeeForm

ขั้นตอนที่ 3: สร้าง API ใน Laravel ​

Backend (Laravel):

php
<?php
// app/Http/Controllers/EmployeeController.php
namespace App\Http\Controllers;

use App\Models\Employee;
use Illuminate\Http\Request;

class EmployeeController extends Controller
{
    public function store(Request $request)
    {
        // 1. ตรวจสอบข้อมูล
        $validated = $request->validate([
            'employee_code' => 'required|unique:employees|max:10',
            'first_name' => 'required|max:100',
            'last_name' => 'required|max:100',
            'email' => 'required|email|unique:employees',
            'phone' => 'required|regex:/^[0-9]{10}$/',
            'department' => 'required|in:IT,HR,Sales,Marketing',
            'position' => 'required|max:50',
            'salary' => 'required|numeric|min:0',
            'hire_date' => 'required|date'
        ]);

        // 2. สร้างข้อมูลพนักงานใหม่
        $employee = Employee::create($validated);

        // 3. บันทึก Log
        \Log::info('New employee added', [
            'employee_id' => $employee->id,
            'added_by' => auth()->user()->id
        ]);

        // 4. ส่ง Email แจ้งเตือน HR
        // Mail::to('[email protected]')->send(new NewEmployeeNotification($employee));

        // 5. ส่งผลลัพธ์กลับ
        return response()->json([
            'success' => true,
            'message' => 'เพิ่มพนักงานสำเร็จ',
            'employee' => $employee
        ], 201);
    }
}
php
// routes/api.php
Route::middleware('auth:sanctum')->group(function() {
    Route::post('/employees', [EmployeeController::class, 'store']);
});

ขั้นตอนที่ 4: SQL Query ที่เกิดขึ้น ​

sql
-- Laravel จะสร้าง SQL Query นี้
INSERT INTO employees (
  employee_code,
  first_name,
  last_name,
  email,
  phone,
  department,
  position,
  salary,
  hire_date,
  status,
  created_at
) VALUES (
  'EMP001',
  'สมชาย',
  'ใจดี',
  '[email protected]',
  '0812345678',
  'IT',
  'Software Engineer',
  50000.00,
  '2024-02-01',
  'active',
  NOW()
);

Flow Diagram แสดงการทำงาน ​

┌──────────────────────────────────────────────────────────────┐
│ 1. ผู้ใช้กรอกฟอร์ม                                           │
│    [รหัส: EMP001] [ชื่อ: สมชาย] [อีเมล: somchai@...]        │
│    [กดปุ่ม: เพิ่มพนักงาน]                                     │
└────────────┬─────────────────────────────────────────────────┘
             │
             ▼
┌──────────────────────────────────────────────────────────────┐
│ 2. React ส่ง HTTP POST Request                              │
│    POST /api/employees                                       │
│    Body: { employee_code: "EMP001", ... }                   │
└────────────┬─────────────────────────────────────────────────┘
             │
             ▼
┌──────────────────────────────────────────────────────────────┐
│ 3. Laravel รับ Request                                       │
│    ✓ ตรวจสอบ Authentication                                 │
│    ✓ Validate ข้อมูล                                        │
│    ✓ ตรวจสอบข้อมูลซ้ำ                                       │
└────────────┬─────────────────────────────────────────────────┘
             │
             ▼
┌──────────────────────────────────────────────────────────────┐
│ 4. Laravel ส่ง SQL Query ไป MySQL                           │
│    INSERT INTO employees VALUES (...)                       │
└────────────┬─────────────────────────────────────────────────┘
             │
             ▼
┌──────────────────────────────────────────────────────────────┐
│ 5. MySQL บันทึกข้อมูล                                       │
│    ✓ บันทึกลง Table employees                               │
│    ✓ Generate ID = 1                                        │
│    ✓ Return ข้อมูลที่บันทึก                                 │
└────────────┬─────────────────────────────────────────────────┘
             │
             ▼
┌──────────────────────────────────────────────────────────────┐
│ 6. Laravel ส่ง Response กลับ                                │
│    { success: true, employee: {...} }                       │
└────────────┬─────────────────────────────────────────────────┘
             │
             ▼
┌──────────────────────────────────────────────────────────────┐
│ 7. React รับ Response                                        │
│    ✓ แสดงข้อความ "เพิ่มพนักงานสำเร็จ!"                      │
│    ✓ รีเซ็ตฟอร์ม                                            │
│    ✓ อัพเดทรายการพนักงาน                                    │
└──────────────────────────────────────────────────────────────┘

📋 สรุปสิ่งที่เรียน ​

🎯 สรุปหลัก 3 ส่วน ​

  1. React (Frontend) 🎨

    • แสดงผล UI
    • รับข้อมูลจากผู้ใช้
    • ส่ง Request ไป Backend
    • แสดงผลลัพธ์

  2. Laravel (Backend) 🔧

    • รับ Request จาก Frontend
    • Validate ข้อมูล
    • ประมวลผล Logic
    • เชื่อมต่อกับ Database
    • ส่ง Response กลับ

  3. MySQL (Database) 🗄️

    • เก็บข้อมูลอย่างเป็นระบบ
    • ค้นหาข้อมูลได้เร็ว
    • รักษาความสัมพันธ์ระหว่างตาราง
    • ปลอดภัย น่าเชื่อถือ

🔄 Flow การทำงาน (สรุป) ​

ผู้ใช้ → React → Laravel → MySQL
              ↓
         บันทึกข้อมูล
              ↓
MySQL → Laravel → React → แสดงผล

✅ ข้อดีของการแยกเป็น 3 ส่วน ​

  1. แยกหน้าที่ชัดเจน

    • แต่ละส่วนทำหน้าที่ของตัวเอง
    • แก้ไขง่าย ไม่กระทบส่วนอื่น

  2. ทำงานร่วมกันได้

    • หลายคนทำงานพร้อมกัน
    • Frontend Dev ≠ Backend Dev

  3. ขยายตัวได้

    • เพิ่ม Features ใหม่ได้ง่าย
    • รองรับผู้ใช้เยอะได้

  4. ปลอดภัย

    • Backend ตรวจสอบข้อมูล
    • Database มีระบบรักษาความปลอดภัย

📚 คำศัพท์สำคัญ ​

Frontend ​

คำศัพท์อังกฤษความหมาย
หน้าเว็บFrontendส่วนที่ผู้ใช้เห็น
ปุ่มButtonปุ่มให้คลิก
ฟอร์มFormแบบฟอร์มกรอกข้อมูล
ส่วนประกอบComponentชิ้นส่วนย่อยของหน้าเว็บ
แสดงผลRenderแสดงผลบนหน้าจอ

Backend ​

คำศัพท์อังกฤษความหมาย
ส่วนหลังบ้านBackendส่วนที่ทำงานเบื้องหลัง
เซิร์ฟเวอร์Serverคอมพิวเตอร์ที่ให้บริการ
เอพีไอAPIช่องทางสื่อสาร
ตรวจสอบValidateตรวจสอบความถูกต้อง
ประมวลผลProcessประมวลผลข้อมูล

Database ​

คำศัพท์อังกฤษความหมาย
ฐานข้อมูลDatabaseที่เก็บข้อมูล
ตารางTableตารางเก็บข้อมูล
แถวRow/Recordแถวข้อมูล
คอลัมน์Column/Fieldหัวข้อข้อมูล
กุญแจหลักPrimary Keyรหัสไม่ซ้ำ
กุญแจต่างประเทศForeign Keyรหัสอ้างอิง
ค้นหาQueryคำสั่งค้นหาข้อมูล
เชื่อมตารางJoinเชื่อมโยงตาราง

ทั่วไป ​

คำศัพท์อังกฤษความหมาย
คำขอRequestขอข้อมูลจาก Server
คำตอบResponseตอบกลับจาก Server
เบราว์เซอร์Browserโปรแกรมเปิดเว็บ
ลูกค้าClientคอมพิวเตอร์ของผู้ใช้
โครงสร้างStructureโครงสร้างระบบ
สถาปัตยกรรมArchitectureสถาปัตยกรรมระบบ

🎓 ทดสอบความเข้าใจ ​

คำถามทบทวน ​

  1. Database เปรียบเทียบได้กับอะไร?

    • ตู้เก็บเอกสารที่จัดเป็นระเบียบ

  2. Primary Key คืออะไร?

    • รหัสประจำตัวที่ไม่ซ้ำกัน ใช้อ้างอิงข้อมูล

  3. Foreign Key คืออะไร?

    • รหัสที่ใช้เชื่อมโยงกับตารางอื่น

  4. การทำงานของระบบมีกี่ขั้นตอนหลัก?

    • 7 ขั้นตอน: กรอกข้อมูล → ส่ง Request → Backend รับ → Query Database → MySQL บันทึก → Response → แสดงผล

  5. ทำไมต้องแยกเป็น 3 ส่วน (React, Laravel, MySQL)?

    • แยกหน้าที่ชัดเจน, ทำงานร่วมกันได้, แก้ไขง่าย, ปลอดภัย

ขั้นตอนต่อไป: เริ่มเรียนรู้แต่ละส่วนอย่างละเอียด!