Khoá học lập trình PHP/MySQL [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

  • 5.0/5.0
  • 2k Đăng ký
  • Học lập trình
  • Tiếng việt

Thông tin khóa học

Trong thế giới phát triển web hiện đại, việc kết hợp giữa PHPJavaScript 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:

  1. 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ệ.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó

Chương trình

Tài Liệu Học PHP & MySQL

Video Lập trình PHP Basic - Biến, Hằng, Toán Tử và Mảng trong PHP - Lập Trình PHP
Echo trong PHP - Hiển thị bảng thông tin sinh viên bằng PHP
Video Hướng dẫn lập trình PHP căn bản với if, else if, else, switch- lập trình PHP
Video Lập trình PHP basic - for, while, do while, foreach, function - lập trình PHP
Video Hướng dẫn lập trình PHP căn bản - Function - lập trình PHP
Sinh ngẫu nhiên mảng gồm N số nguyên trong PHP - Sắp xếp mảng trong PHP
Fibonacci trong PHP - Lập Trình PHP - Khoá học lập trình PHP
Tính tổng các số nguyên từ 0 tới N bằng PHP
In tam giác * bằng PHP, in tam giác sao bằng PHP, in hình tam giác * băng PHP
Hiển thị ngẫu nhiên N quyển sách bằng PHP - Quản lý sách bằng PHP

Video Hướng dẫn học lập PHP căn bản - Tìm hiểu GET/POST - lập trình PHP
Tạo máy tinh căn bản bằng PHP - Calculator in PHP
Video Hướng dẫn tạo dự án calculator bang PHP + JS - Lập trình PHP
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
Video Form đăng ký tài khoản bằng PHP (GET/POST)- Form PHP
Form đăng ký tài khoản người dùng - Registation Form trong PHP - Lập trình PHP - Lập Trình PHP MySQL
Video Hướng dẫn chữa bài tập đăng ký & đăng nhập sử dụng GET & POST - Lập trình PHP
Chương trình quản lý sinh viên PHP - Yêu cầu sử dụng GET/POST trong PHP - Lập trình PHP

Video Lập trình PHP căn bản - cookie - lập trình PHP
Video Hướng dẫn tìm hiểu cookie - Quản lý xác minh tài khoản login - cookie - Lập trình PHP/MySQL
Sử dụng cookie trong PHP - quản lý đăng ký & đăng nhập tài khoản trong PHP - Lập Trình PHP

Video Lập trình PHP căn bản - session - lập trình PHP
Video Thành thạo API - Ajax trọng dự án - Thành thạo về Session - Lập trình PHP/MySQL

Video Thực hiện truy vấn dữ liệu từ PHP tới MySql - Khoá học PHP căn bản
Video Kết nối PHP với MySQL (Thực hiện insert) - Khoá PHP căn bản
Video Tối ưu hoá code mysql + php, tạo thư viện chung trong lập trình PHP căn bản
Video Tạo web tin tức - PHP/MySQL
Bài tập - Tạo website bán hàng lư niệm - Login - Lập trình PHP/MySQL
Bài tập - Tạo trang login và register - kết nối CSDL trong PHP - Lập trình PHP/MySQL
Video Thực hiện đăng nhập tài khoản sử dụng php mysql - khoá học PHP căn bản
Thêm - sửa - xoá thông tin sinh viên - Lập trình PHP
Bài tập - Xây dựng cart (giỏ hàng) + checkout (thanh toán) sử dụng Cookie & localStorage - Lập trình PHP/MySQL
VideoCookie: Xây dựng cart (giỏ hàng) + checkout (thanh toán) sử dụng Cookie & localStorage - Lập trình PHP/MySQL
Video Session: Xây dựng web hoàn thiện gồm cart page + checkout page + complete page - Lập trình PHP/MySQL
Bài tập - Thiết kế trang admin quản lý thư viện sử dụng bootstrap template - Lập trình PHP/MySQL
Trang quản lý sản phẩm php - Lập trình PHP
Video Trang quản lý sản phẩm php - Lập trình PHP
Quản lý sách bằng PHP - trang quản trị sách bằng PHP - Lập trình PHP
Viết website quản lý sinh viên PHP & MySQL - Lập Trình PHP
Video Viết website quản lý sinh viên PHP & MySQL - Lập Trình PHP
Video Hướng dẫn phân trang bằng PHP - Lập trình PHP
Viết website quản lý sinh viên PHP & MySQL- Xử lý bằng Ajax - Lập Trình PHP
Bài tập - ứng dụng quản lý ghi chú - Lập trình PHP/MySQL
Xây dựng website bán điện thoại kết nối database (CSDL) - Lập trình PHP/MySQL
Bài tập - Thiết kế website bán hàng lưu niệm - giỏ hàng, thanh toán - Lập trình PHP/MySQL

Video OOP - Lập trình php
Video Kế thừa OOP - Lập trình php
Video Nắm chắc token login - Hướng dẫn login login multi devices, browsers trong lập trình PHP/MySQL
Video Trở thành chuyên gia API Server - Hướng dẫn tất tần tật về API từ Server tới Client - Lập trình PHP

[Examination] Kiểm Tra 60 phút - Test nhanh - Khóa học PHP
Video Kiểm Tra 60 phút - Test nhanh - Khóa học PHP

Xây dựng website bán hoa quả bằng PHP/MySQL - Lập trình PHP/MySQL
Video Xây dựng website bán hoa quả bằng PHP/MySQL - Lập trình PHP/MySQL - Phần 1
Video Xây dựng website bán hoa quả bằng PHP/MySQL - Lập trình PHP/MySQL - Phần 2
Video Xây dựng website bán hoa quả bằng PHP/MySQL - Lập trình PHP/MySQL - Summernote editor - Phần 3
Video Xây dựng website bán hoa quả bằng PHP/MySQL - Lập trình PHP/MySQL - Phần 4
Video Xây dựng website bán hoa quả bằng PHP/MySQL - Lập trình PHP/MySQL - Phần 5

Video Hướng dẫn upload website lên server -Hướng dẫn deploy project php trên heroku - Cài đặt Heroku
Nguyễn Văn An
Nguyễn Văn An
2026-06-22 12:57:48
Khóa học cực kỳ chất lượng, giảng viên hướng dẫn rất chi tiết và dễ hiểu. Mình đã áp dụng được ngay vào công việc thực tế.
Trần Thị Bích
Trần Thị Bích
2026-06-19 12:57:48
Nội dung bài giảng được sắp xếp logic, đi từ cơ bản đến nâng cao. Rất phù hợp cho người mới bắt đầu.
Lê Hoàng Hải
Lê Hoàng Hải
2026-06-17 12:57:48
Khóa học hay, tuy nhiên phần bài tập thực hành hơi khó một chút. Cần phải xem lại video vài lần mới làm được.
Phạm Minh Tuấn
Phạm Minh Tuấn
2026-06-10 12:57:48
Tuyệt vời! Đây là khóa học tốt nhất mình từng tham gia. Support nhiệt tình, giải đáp thắc mắc rất nhanh.

Đánh giá

B1. B1. Tạo tài khoản -> Sử dụng để học online
B2. Đăng ký học
B3. Hoàn thành mua khoá học
B4. Thanh toán theo hướng dẫn
B5. Đợi chúng tôi kiểm tra thông tin và thêm bạn vào lớp học

Chào mừng các anh chị và các bạn gia nhập đội ngũ Giảng viên QViet. Anh chị vui lòng đăng ký theo hướng dẫn sau:
Bước 1: Truy cập website https://gozic.vn/teacher/form
Bước 2: Điền thông tin theo yêu cầu. Để bản đăng ký được duyệt nhanh nhất, anh chị hãy điền đủ thông tin nhé.
Bước 3: Click vào "đăng ký ngay" để hoàn thành
Lưu ý:
Link video bài giảng mẫu: Video bài giảng mẫu là căn cứ để Trắc Nghiệm Việt duyệt về hình thức và chất lượng giảng dạy. Vì vậy anh chị hãy điền link này để đăng ký được duyệt nhanh nhất nhé.
Anh chị cũng nên mô tả kỹ về kinh nghiệm giảng dạy để Trắc Nghiệm Việt đánh giá nhé.
Chúc các anh chị và các bạn thành công, sớm gia nhập đội ngũ giảng viên Trắc Nghiệm Việt!
×