PHP Tutorial

[Video] Ajax: Hướng dẫn tạo máy tính bằng PHP - Sử dụng Ajax - GET/POST form trong PHP - Lập trình PHP

Trong thế giới phát triển web hiện đại, việc kết hợp giữa PHP và JavaScript giúp tạo ra những ứng dụng vừa linh hoạt vừa phản hồi nhanh với người dùng. Một kỹ thuật rất quan trọng trong bộ công cụ đó là Ajax, cho phép gửi và nhận dữ liệu bất đồng bộ (asynchronous) giữa trình duyệt và server mà không cần tải lại trang. Với Ajax, bạn có thể xây dựng một máy tính (calculator) web mượt mà: nhập số, nhấn phép tính và nhận kết quả tức thì mà không bị gián đoạn trải nghiệm người dùng.

Bài viết này là một hướng dẫn chi tiết giúp bạn từ ý tưởng đến thực thi một dự án calculator dùng PHP làm backend và Ajax (bằng fetch hoặc XMLHttpRequest) xử lý request GET/POST. Bạn sẽ học cách thiết kế giao diện, gửi dữ liệu an toàn qua Ajax, xử lý toán học bằng PHP, trả về JSON, và xử lý các lỗi phổ biến như validate dữ liệu, phòng chống XSS/SQL injection và đảm bảo UX mượt mà. Nếu bạn đang học lập trình PHP hoặc muốn nâng cấp kỹ năng front-end bằng Ajax, đây là tài liệu thực hành phù hợp để bắt đầu.

Tại sao nên dùng Ajax cho dự án calculator

Sử dụng Ajax cho một ứng dụng calculator mang lại nhiều lợi ích rõ rệt so với cách xử lý truyền thống bằng form submit (GET/POST upload toàn trang):

Trải nghiệm mượt mà: Khi dùng Ajax, thao tác tính toán xảy ra ngay trên trang hiện tại, người dùng không bị tải lại màn hình — điều này quan trọng với calculator để giữ luồng thao tác nhanh và liên tục.
Phản hồi nhanh: Ajax cho phép gửi request nhỏ (ví dụ số a, số b và toán tử) và nhận kết quả dạng JSON trong vài chục mili-giây trên môi trường mạng tốt.
Giữ trạng thái UI: Các thành phần giao diện như lịch sử phép tính, bộ nhớ tạm (M+, M-) không bị reset do trang reload.
Tách rời logic: Việc tách phần hiển thị (JS) và xử lý (PHP) giúp dễ kiểm thử — PHP có thể đảm nhiệm xử lý nghiệp vụ, logging hoặc lưu lịch sử vào database.
Tiện cho tích hợp sau này: Khi cần mở rộng (ví dụ tạo API cho mobile app), endpoint Ajax có thể tái sử dụng.

Trong bài này, mỗi lần tôi nhắc tới Ajax tôi muốn bạn liên hệ đến ý tưởng: gửi request bất đồng bộ, nhận JSON, cập nhật giao diện mà không reload. Dự án calculator là ví dụ đơn giản nhưng minh họa rõ sức mạnh của Ajax trong lập trình PHP.

Thiết kế giao diện HTML/CSS cho máy tính

Trước khi lập trình Ajax, chúng ta cần giao diện để người dùng nhập dữ liệu. Một calculator cơ bản có màn hình hiển thị, các nút số, toán tử, và nút bằng (“=”). Dưới đây là cấu trúc HTML mẫu kèm CSS cơ bản để demo:


<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="utf-8" />
  <title>Calculator Ajax + PHP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { font-family: Arial, sans-serif; display:flex; justify-content:center; align-items:center; height:100vh; background:#f4f6f8; }
    .calc { width:320px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
    .display { width:100%; height:56px; font-size:20px; text-align:right; padding:10px; margin-bottom:10px; box-sizing:border-box; }
    .row { display:flex; gap:8px; margin-bottom:8px; }
    .btn { flex:1; height:48px; border-radius:6px; border:none; font-size:18px; cursor:pointer; }
    .btn.op { background:#ff9f0a; color:#fff; }
    .btn.num { background:#e9ecef; }
    .btn.equal { background:#007bff; color:#fff; }
  </style>
</head>
<body>
  <div class="calc" id="calculator">
    <input type="text" id="display" class="display" readonly />
    <div class="row">
      <button class="btn num" data-val="7">7</button>
      <button class="btn num" data-val="8">8</button>
      <button class="btn num" data-val="9">9</button>
      <button class="btn op" data-val="/">÷</button>
    </div>
    <!-- thêm các hàng tương tự -->
    <div class="row">
      <button class="btn equal" id="equals">=</button>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Giao diện ở trên giữ đơn giản để tập trung vào phần Ajax và PHP. Lưu ý đặt id/data-val cho các nút để JavaScript dễ bắt sự kiện. Bạn có thể mở rộng style responsive hoặc thêm biểu tượng cho trải nghiệm tốt hơn.

Bắt sự kiện và xây dựng payload bằng JavaScript

Sau khi có giao diện, JavaScript chịu trách nhiệm bắt sự kiện click, cập nhật màn hình, và cuối cùng gửi dữ liệu đến server bằng Ajax. Ta sẽ dùng fetch() (hiện đại) và đồng thời đưa ra ví dụ với XMLHttpRequest để bạn hiểu hai cách.

Đầu tiên file app.js (JS xử lý UI và Ajax bằng fetch):


document.addEventListener('DOMContentLoaded', () => {
  const display = document.getElementById('display');
  let expression = '';

  // bắt click cho số và toán tử
  document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const val = btn.dataset.val;
      if (btn.id === 'equals') return;
      if (val) {
        expression += val;
        display.value = expression;
      }
    });
  });

  // nút "=" gửi Ajax POST
  document.getElementById('equals').addEventListener('click', async () => {
    if (!expression) return;
    try {
      const payload = { expression };
      const res = await fetch('calculate.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (data.success) {
        display.value = data.result;
      } else {
        display.value = 'Error';
        console.error('Server error:', data.message);
      }
      expression = '';
    } catch (err) {
      display.value = 'Network error';
      console.error(err);
    }
  });
});

Lưu ý: ta gửi object { expression } bằng POST dưới dạng JSON. Đây là cách phổ biến khi dùng Ajax hiện đại; backend PHP sẽ phải parse JSON từ php://input.

Nếu bạn muốn dùng GET (ví dụ chia sẻ biểu thức qua URL), có thể encode expression và gọi fetch('calculate.php?expr=' + encodeURIComponent(expression)).

Tôi nhắc lại: Ajax cho phép gửi dữ liệu bất đồng bộ, chính xác như đoạn mã fetch() ở trên.

Xử lý request phía server bằng PHP (GET/POST) và trả về JSON

Phần server nhận dữ liệu từ Ajax, thực hiện phép tính và trả về JSON để JS hiển thị. Có nhiều cách tiếp cận, nhưng quan trọng nhất là không dùng eval trực tiếp trên chuỗi chưa được lọc — điều này gây rủi ro bảo mật. Thay vào đó, ta sẽ parse biểu thức theo quy tắc đơn giản hoặc nhận riêng số và toán tử. Ở ví dụ này, ta chấp nhận biểu thức dạng a op b (ví dụ: 12+5) và dùng regex để tách.

File calculate.php:


<?php
header('Content-Type: application/json; charset=utf-8');

$input = file_get_contents('php://input');
$data = json_decode($input, true);

if (!$data || !isset($data['expression'])) {
    // Hỗ trợ GET fallback
    $expr = $_GET['expr'] ?? null;
} else {
    $expr = $data['expression'];
}

if (!$expr) {
    echo json_encode(['success' => false, 'message' => 'Empty expression']);
    exit;
}

// Chỉ cho phép ký tự số, dấu chấm và toán tử + - * /
if (!preg_match('/^[0-9\.\+\-\*\/\s\(\)]+$/', $expr)) {
    echo json_encode(['success' => false, 'message' => 'Invalid characters']);
    exit;
}

// Đơn giản: không xử lý toán tử nâng cao hoặc injection. Parse a op b (first op)
if (preg_match('/^ *([\-]?[0-9]+(?:\.[0-9]+)?) *([+\-\*\/]) *([\-]?[0-9]+(?:\.[0-9]+)?) *$/', $expr, $m)) {
    $a = (float)$m[1];
    $op = $m[2];
    $b = (float)$m[3];

    $result = null;
    switch ($op) {
        case '+': $result = $a + $b; break;
        case '-': $result = $a - $b; break;
        case '*': $result = $a * $b; break;
        case '/':
            if ($b == 0.0) {
                echo json_encode(['success' => false, 'message' => 'Division by zero']); exit;
            }
            $result = $a / $b; break;
    }
    echo json_encode(['success' => true, 'result' => $result]);
    exit;
}

// Nếu không khớp định dạng đơn giản, trả lỗi
echo json_encode(['success' => false, 'message' => 'Unsupported expression format']);

Điểm cần lưu ý:

JSON là định dạng phù hợp để trả về với Ajax. JS dễ parse res.json().
Kiểm tra ký tự biểu thức bằng regex để chặn chữ cái và lệnh nguy hiểm.
Chỉ hỗ trợ phép toán cơ bản; bạn có thể mở rộng bằng parser toán học an toàn nếu cần.

Như vậy, Ajax (JS) gửi expression bằng POST, PHP tính toán an toàn và trả về JSON. JS nhận JSON và cập nhật UI mà không reload.

Xử lý GET/POST form truyền thống kết hợp Ajax

Có trường hợp bạn muốn hỗ trợ cả submit form truyền thống (GET/POST) và Ajax (nâng cấp progressive enhancement). Bạn có thể tạo form HTML chuẩn, nhưng chặn submit bằng JS và gửi Ajax thay vì reload. Ví dụ:


<form id="calcForm" action="calculate.php" method="post">
  <input name="expression" id="expr" />
  <button type="submit">=</button>
</form>
<script>
document.getElementById('calcForm').addEventListener('submit', function(e) {
  e.preventDefault(); // chặn submit mặc định
  const expr = document.getElementById('expr').value;
  fetch('calculate.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: 'expression=' + encodeURIComponent(expr)
  })
  .then(r => r.json())
  .then(data => { /* cập nhật UI */ });
});
</script>

Ở phía PHP, $_POST['expression'] sẽ có giá trị nếu bạn gửi application/x-www-form-urlencoded. Vì Ajax cho phép nhiều cách gửi (JSON hoặc form-encoded), server nên hỗ trợ cả hai.

Bảo mật và validate khi dùng Ajax + PHP

Bảo mật là yếu tố bắt buộc khi bạn dùng Ajax trong lập trình PHP:

Validate dữ liệu ở server: Dù đã kiểm tra ở client, server phải kiểm tra lại. Kiểm tra kiểu, dải giá trị, ký tự hợp lệ.
Chặn XSS: Khi in kết quả vào DOM, dùng textContent thay vì innerHTML, hoặc escape chuỗi trước khi chèn.
CSRF protection: Với request thay đổi trạng thái (POST), bạn nên dùng CSRF token. Với Ajax, token có thể được gửi trong header X-CSRF-Token hoặc hidden field và kèm trong request header.
HTTPS: Luôn chạy trên HTTPS để tránh eavesdropping — quan trọng với POST chứa dữ liệu nhạy cảm.
Rate-limiting & logging: Nếu bạn cung cấp endpoint có thể bị abuse (ví dụ brute-force), áp dụng giới hạn tần suất và log request bất thường.
Không dùng eval: Tránh eval() hoặc create_function() trên chuỗi từ client — luôn parse/tách an toàn.
Sử dụng prepared statements: Nếu bạn lưu lịch sử phép tính vào database, dùng PDO prepared statements để tránh SQL injection.

Khi bạn dạy bản thân làm các project Ajax + PHP, hãy đặt bảo mật lên hàng đầu ngay từ đầu, tránh chỉnh sửa nhanh nhưng không an toàn.

Debugging Ajax: phương pháp và công cụ

Khi phát triển, debugging Ajax đòi hỏi các kỹ năng sau:

Chrome DevTools (Network tab): Kiểm tra request, headers, payload, response và mã trạng thái HTTP. Đây là công cụ đầu tiên bạn dùng khi Ajax không hoạt động.
Console.log: In dữ liệu trước khi gửi, sau khi nhận để kiểm tra logic.
Kiểm tra response Content-Type: PHP trả application/json để fetch xử lý res.json(); nếu bị lỗi JSON, kiểm tra output có bị thêm HTML/notice.
Bật error_reporting trong dev: ini_set('display_errors', 1); error_reporting(E_ALL); nhưng nhớ tắt trên production.

Postman / cURL: Gửi thử request độc lập để kiểm tra server logic. Ví dụ:


curl -X POST -H "Content-Type: application/json" -d '{"expression":"5+3"}' https://example.com/calculate.php

Log server-side: Ghi file log để lưu request bất thường khi fix bug.
Kiểm tra CORS: Nếu frontend và backend khác domain, cấu hình CORS header Access-Control-Allow-Origin.

Debugging tốt giúp bạn tìm lỗi nhanh và đảm bảo endpoint Ajax hoạt động ổn định.

Mở rộng tính năng và tối ưu UX

Sau khi cơ bản chạy tốt, bạn có thể thêm nhiều tính năng:

Lưu lịch sử phép tính trên server: Gửi từng phép tính bằng Ajax để server lưu vào DB, hiển thị lịch sử động.
Hỗ trợ keyboard input: Bắt phím số/Enter để người dùng thao tác nhanh.
Scientific functions: Thêm sin, cos, tan, log, sqrt ở cả client và server (với PHP có hàm tương ứng).
Chế độ offline: Dùng localStorage để lưu tạm lịch sử khi offline, sync khi có mạng.
Animation & feedback: Thêm loading spinner khi chờ Ajax trả về, thông báo lỗi rõ ràng.
Accessibility: Thêm aria-labels và đảm bảo focus order cho người dùng keyboard/screen-reader.

Những tối ưu này nâng trải nghiệm và tăng tính chuyên nghiệp cho dự án Ajax + PHP của bạn.

Kết luận

Xây dựng máy tính bằng PHP kết hợp Ajax là bài tập thực tế tuyệt vời để vừa học lập trình PHP vừa nắm chắc cách dùng Ajax trong thực tế. Qua bài hướng dẫn này bạn đã đi từ thiết kế giao diện, bắt sự kiện bằng JavaScript, gửi GET/POST request bằng Ajax (fetch/XMLHttpRequest), đến xử lý phía server bằng PHP và trả về JSON an toàn. Quan trọng nhất là bạn hiểu nguyên tắc: không tin dữ liệu client, luôn validate trên server, tránh eval(), và dùng JSON làm format trao đổi.

Hãy bắt tay thực hiện: tạo file HTML/CSS, viết app.js để bắt sự kiện và sử dụng fetch() để gọi calculate.php. Sau khi hoàn thành bản cơ bản, nâng cấp bằng các chức năng mở rộng như lưu lịch sử, hỗ trợ scientific operations, và cải thiện bảo mật (CSRF, HTTPS). Việc thực hành nhiều dự án nhỏ như thế sẽ giúp bạn làm chủ Ajax trong lập trình PHP, từ đó tự tin xây ứng dụng web tương tác cao cho người dùng. Nếu bạn muốn, hãy thử triển khai dự án này trên hosting hoặc local server (XAMPP, MAMP) và chia sẻ kết quả — cộng đồng sẽ có nhiều góp ý hữu ích giúp bạn hoàn thiện hơn.

Mục Lục