Tìm Hiểu Kỹ Thuật AJAX Và Ứng Dụng Trong Xây Dựng Website Bán Mỹ Phẩm

Kỹ thuật AJAX (Asynchronous JavaScript and XML) đã trở thành một phần quan trọng trong việc phát triển website… 61 trang · Trường Đại Học Quảng Nam · 2019.

• Tác giả: Trần Thị Diễm
• Người hướng dẫn: ThS. Trần Thị Diệu Linh
• Trường học: Trường Đại Học Quảng Nam
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Tìm Hiểu Kỹ Thuật AJAX Trong Xây Dựng Website Bán Mỹ Phẩm
• Loại tài liệu: khóa luận tốt nghiệp
• Năm xuất bản: 2019
• Địa điểm: Quảng Nam

Mục lục chi tiết

• LỜI MỞ ĐẦU
• 1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. GIỚI THIỆU VỀ NGÔN NGỮ LẬP TRÌNH
• 1.2. Ngôn ngữ HTML
• 1.3. Ngôn ngữ CSS
• 1.4. Ngôn ngữ Javascipt
• 1.5. Ngôn ngữ lập trình PHP
• 1.6. TỔNG QUAN VỀ AJAX
• 1.6.1. Khái niệm AJAX
• 1.6.2. Hoạt động của AJAX
• 1.6.3. Các ứng dụng AJAX
• 1.6.4. Ưu và nhược điểm
• 1.7. CÔNG CỤ HỖ TRỢ PHÁT TRIỂN WEBSITE
• 1.7.1. Cài đặt máy chủ Web trên máy tính bằng Wampserver để chạy file PHP
• 1.7.2. Công cụ hỗ trợ Visual Studio Code
• 2. CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
• 2.1. MỤC TIÊU VÀ YÊU CẦU ĐẶT RA
• 2.2. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
• 2.2.1. Yêu cầu đề tài
• 2.2.2. Hoạt động của cửa hàng trên mạng
• 2.2.3. XÁC ĐỊNH YÊU CẦU
• 2.2.4. Sơ đồ phân cấp chức năng của hệ thống
• 2.2.5. Sơ đồ luồng dữ liệu
• 2.2.6. Mô hình thực thể quan hệ E-R
• 2.2.7. Mô hình quan hệ
• 2.3. MÔ HÌNH CƠ SỞ DỮ LIỆU
• 2.3.1. Các bảng trong cơ sở dữ liệu
• 2.3.2. Chi tiết dữ liệu trong các bảng
• 3. CHƯƠNG 3: TRIỂN KHAI XÂY DỰNG WEBSITE
• 3.1. Giao diện trang Admin
• 3.2. Giao diện trang Website mỹ phẩm
• 3.3. MỘT SỐ ĐOẠN CODE AJAX
• KẾT LUẬN VÀ KIẾN NGHỊ
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Kỹ Thuật AJAX Trong Xây Dựng Website Bán Mỹ Phẩm

Kỹ thuật AJAX (Asynchronous JavaScript and XML) đã trở thành một phần quan trọng trong việc phát triển website, đặc biệt là trong lĩnh vực thương mại điện tử. AJAX cho phép tải dữ liệu mà không cần phải làm mới toàn bộ trang, giúp cải thiện trải nghiệm người dùng. Việc áp dụng AJAX trong xây dựng website bán mỹ phẩm không chỉ giúp tăng tốc độ tải trang mà còn tạo ra giao diện thân thiện hơn với người dùng.

1.1. AJAX Là Gì Khái Niệm Cơ Bản

AJAX là một kỹ thuật cho phép tải dữ liệu từ máy chủ mà không cần làm mới trang. Điều này giúp cải thiện tốc độ và hiệu suất của website, đặc biệt trong các ứng dụng thương mại điện tử.

1.2. Lợi Ích Của AJAX Trong Xây Dựng Website

Sử dụng AJAX giúp giảm thời gian tải trang, cải thiện trải nghiệm người dùng và tăng khả năng tương tác của website. Điều này rất quan trọng trong việc giữ chân khách hàng trên các trang bán mỹ phẩm.

II. Vấn Đề Thách Thức Khi Sử Dụng AJAX Trong Website Bán Mỹ Phẩm

Mặc dù AJAX mang lại nhiều lợi ích, nhưng cũng tồn tại một số thách thức khi áp dụng vào website bán mỹ phẩm. Các vấn đề như SEO, khả năng tương thích với trình duyệt và quản lý trạng thái ứng dụng cần được xem xét kỹ lưỡng.

2.1. Thách Thức Về SEO Khi Sử Dụng AJAX

AJAX có thể gây khó khăn cho việc tối ưu hóa SEO vì nội dung không được tải ngay lập tức. Điều này có thể ảnh hưởng đến khả năng lập chỉ mục của các công cụ tìm kiếm.

2.2. Khả Năng Tương Thích Với Các Trình Duyệt

Một số trình duyệt có thể không hỗ trợ đầy đủ các tính năng của AJAX, dẫn đến trải nghiệm người dùng không đồng nhất. Việc kiểm tra và tối ưu hóa cho nhiều trình duyệt là cần thiết.

III. Phương Pháp Sử Dụng AJAX Để Tối Ưu Hóa Website Bán Mỹ Phẩm

Để tận dụng tối đa lợi ích của AJAX, các nhà phát triển cần áp dụng các phương pháp hiệu quả trong việc tích hợp AJAX vào website bán mỹ phẩm. Việc này không chỉ giúp cải thiện tốc độ mà còn nâng cao trải nghiệm người dùng.

3.1. Cách Sử Dụng AJAX Để Tải Dữ Liệu Nhanh Chóng

Sử dụng AJAX để tải dữ liệu sản phẩm, giỏ hàng mà không cần làm mới trang. Điều này giúp người dùng có thể duyệt sản phẩm một cách mượt mà hơn.

3.2. Tích Hợp AJAX Với Các Công Nghệ Khác

Kết hợp AJAX với các công nghệ như PHP và MySQL để tạo ra các ứng dụng web động, giúp quản lý dữ liệu sản phẩm và đơn hàng hiệu quả hơn.

IV. Ứng Dụng Thực Tiễn Của AJAX Trong Website Bán Mỹ Phẩm

AJAX đã được áp dụng thành công trong nhiều website bán mỹ phẩm, giúp cải thiện trải nghiệm người dùng và tăng doanh thu. Các ứng dụng thực tiễn cho thấy rõ ràng lợi ích của việc sử dụng AJAX.

4.1. Ví Dụ Về Website Bán Mỹ Phẩm Sử Dụng AJAX

Nhiều website nổi tiếng như Sephora và Ulta đã sử dụng AJAX để cải thiện trải nghiệm mua sắm trực tuyến của khách hàng, từ việc tìm kiếm sản phẩm đến thanh toán.

4.2. Kết Quả Nghiên Cứu Về Hiệu Quả Của AJAX

Nghiên cứu cho thấy rằng việc sử dụng AJAX có thể làm tăng tỷ lệ chuyển đổi và giảm tỷ lệ thoát của người dùng, từ đó tăng doanh thu cho các website bán mỹ phẩm.

V. Kết Luận Về Tương Lai Của AJAX Trong Xây Dựng Website Bán Mỹ Phẩm

AJAX sẽ tiếp tục đóng vai trò quan trọng trong việc phát triển website bán mỹ phẩm trong tương lai. Với sự phát triển không ngừng của công nghệ, AJAX sẽ ngày càng trở nên phổ biến và cần thiết.

5.1. Xu Hướng Sử Dụng AJAX Trong Thương Mại Điện Tử

Xu hướng sử dụng AJAX trong thương mại điện tử sẽ tiếp tục gia tăng, đặc biệt là trong các lĩnh vực như bán mỹ phẩm, nơi trải nghiệm người dùng là rất quan trọng.

5.2. Tương Lai Của AJAX Và Công Nghệ Web

Với sự phát triển của các công nghệ mới, AJAX sẽ được cải tiến và mở rộng, giúp các nhà phát triển tạo ra những ứng dụng web mạnh mẽ và hiệu quả hơn.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Khóa luận tốt nghiệp "Tìm hiểu kĩ thuật AJAX và ứng dụng xây dựng Website bán mỹ phẩm" do sinh viên Trần Thị Diễm thực hiện dưới sự hướng dẫn của ThS. Trần Thị Diệu Linh tại Khoa Công nghệ Thông tin, Trường Đại học Quảng Nam (khóa 2015–2019, hoàn thành tháng 05/2019). Đề tài tập trung vào việc nghiên cứu cơ chế hoạt động của kỹ thuật AJAX và ứng dụng thực tiễn vào quy trình phát triển website thương mại điện tử chuyên ngành mỹ phẩm.

Lý do chọn đề tài và bối cảnh thực tiễn

Theo phân tích của tác giả, sự phát triển nhanh chóng của công nghệ thông tin và mạng Internet đã thúc đẩy mạnh mẽ lĩnh vực thương mại điện tử. Việc thiếu thông tin trong khâu kết nối cung - cầu hàng hóa tạo ra rào cản cho quá trình đưa sản phẩm tới tay người tiêu dùng và gây lãng phí nguồn lực xã hội. Do đó, việc xây dựng các website bán hàng trực tuyến trở thành giải pháp cấp thiết nhằm hỗ trợ hoạt động trao đổi, mua bán diễn ra nhanh chóng, tiết kiệm chi phí đi lại và thời gian cho khách hàng.

Tuy nhiên, trong quá trình chuyển dịch từ các phần mềm chạy độc lập (Desktop Application) sang ứng dụng nền tảng Web (Web Application), các hệ thống Web truyền thống thường gặp nhược điểm về tốc độ xử lý do phải liên tục gửi toàn bộ yêu cầu (HTTP Request) lên máy chủ và tải lại toàn bộ trang (Full Page Reload/PostBack) mỗi khi có sự kiện thay đổi dữ liệu. Điều này dẫn đến tình trạng xuất hiện màn hình trắng, biểu tượng chờ đợi, làm giảm tính mượt mà trong trải nghiệm người dùng. Để giải quyết hạn chế này, tác giả lựa chọn kỹ thuật AJAX nhằm cập nhật dữ liệu bất đồng bộ mà không cần tải lại toàn bộ giao diện, giúp ứng dụng Web đạt được khả năng tương tác tương tự ứng dụng Desktop.

Mục tiêu nghiên cứu

Mục tiêu cụ thể của đề tài bao gồm:

1. Tìm hiểu chi tiết nguyên lý, cơ chế hoạt động và cách sử dụng kỹ thuật AJAX trong việc thay đổi, cập nhật nội dung trang web mà không yêu cầu người dùng phải tải lại toàn bộ trang.
2. Phân tích yêu cầu, thiết kế hệ thống và áp dụng kỹ thuật AJAX kết hợp với ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu MySQL để xây dựng hoàn chỉnh Website bán mỹ phẩm trực tuyến.

Đối tượng và phạm vi nghiên cứu

• Đối tượng nghiên cứu: Kỹ thuật AJAX và việc tích hợp AJAX trong môi trường ngôn ngữ lập trình PHP.
• Phạm vi nghiên cứu: Mô hình hoạt động và ứng dụng của kỹ thuật AJAX trên các hệ thống website thương mại điện tử.

---

Cơ sở lý thuyết và phương pháp

Khung lý thuyết và công nghệ sử dụng

Tác giả đã hệ thống hóa các nền tảng công nghệ web cơ bản và chuyên sâu phục vụ cho việc xây dựng hệ thống:

• HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản dùng để định nghĩa cấu trúc, định dạng nội dung, chèn liên kết và đa phương tiện. Văn bản nghiên cứu đề cập đến cú pháp thẻ, cấu trúc tệp (<head>, <body>) và chuẩn HTML5 với khai báo <!DOCTYPE html>.
• CSS (Cascading Style Sheets): Ngôn ngữ định dạng hiển thị cho các phần tử HTML (phông chữ, màu sắc, bố cục, đường viền). Nghiên cứu phân tích 3 phương pháp chèn CSS: nội tuyến (Inline style), nội bộ trong thẻ <style>, và liên kết tệp ngoài qua thẻ <link>.
• JavaScript: Ngôn ngữ kịch bản chạy phía máy khách (Client-side), hoạt động dựa trên mô hình đối tượng (Object-based), được diễn dịch trực tiếp bởi trình duyệt và nhúng vào HTML qua thẻ <script>.
• PHP (Hypertext Preprocessor): Ngôn ngữ kịch bản phía máy chủ (Server-side) dùng để xây dựng web động. Mã PHP được biên dịch trên máy chủ web thành mã HTML thuần trước khi trả kết quả về trình duyệt của người dùng.
• Bootstrap (phiên bản 3): Framework giao diện hỗ trợ HTML, CSS và JavaScript ra đời vào tháng 8/2011 (phát triển bởi Mark Otto và Jacob Thornton tại Twitter). Framework này ứng dụng hệ thống lưới (Grid system) và tư duy ưu tiên thiết bị di động (Mobile-first) nhằm tối ưu hóa tính tương thích trên nhiều kích thước màn hình.
• MySQL: Hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) đa nền tảng, có tính ổn định và tốc độ truy vấn cao, hỗ trợ quản lý dữ liệu qua các thao tác thêm, sửa, xóa và truy vấn bảng thông qua công cụ phpMyAdmin.
• Kỹ thuật AJAX (Asynchronous JavaScript and XML): Thuật ngữ được Jesse James Garrett đưa ra vào tháng 02/2005. AJAX là sự kết hợp của:
  • HTML/CSS: Trình bày và định dạng giao diện.
  • Mô hình DOM (Document Object Model): Thao tác và cập nhật nội dung động.
  • Đối tượng XMLHttpRequest: Gửi và nhận dữ liệu bất đồng bộ với máy chủ web.
  • Định dạng dữ liệu truyền: XML, văn bản thuần (Plain text), HTML định dạng sẵn, hoặc JSON.

Phương pháp nghiên cứu

Tác giả áp dụng các phương pháp nghiên cứu kỹ thuật phần mềm bao gồm:

• Phương pháp nghiên cứu tài liệu: Thu thập, tổng hợp các tài liệu kỹ thuật, giáo trình chuyên ngành và nguồn dữ liệu học thuật trên Internet liên quan đến ngôn ngữ PHP, JavaScript, hệ quản trị MySQL và AJAX.
• Phương pháp phân tích và thiết kế hệ thống theo cấu trúc: Sử dụng sơ đồ phân cấp chức năng (BFD), sơ đồ luồng dữ liệu (DFD) nhiều mức và mô hình thực thể liên kết (ERD).
• Phương pháp thực nghiệm: Cài đặt môi trường máy chủ cục bộ bằng WampServer, sử dụng trình soạn thảo Visual Studio Code (phiên bản 1.12) để viết mã nguồn, thiết lập cơ sở dữ liệu trên phpMyAdmin và kiểm thử các tính năng trên trình duyệt web.

---

Thiết kế và triển khai hệ thống

Phân tích quy trình nghiệp vụ và yêu cầu hệ thống

Hệ thống được thiết kế nhằm phục vụ hai nhóm đối tượng chính với các chức năng cụ thể:

• Khách hàng (Người dùng cuối):
  • Duyệt danh mục sản phẩm, xem hình ảnh, thông tin chi tiết, giá cả và tình trạng sản phẩm.
  • Tìm kiếm sản phẩm theo hãng, loại da, khoảng giá hoặc tiêu chí liên quan.
  • Quản lý giỏ hàng: Thêm, bớt sản phẩm, điều chỉnh số lượng đơn hàng trước khi kết thúc giao dịch.
  • Đăng ký, đăng nhập tài khoản cá nhân, thay đổi mật khẩu và xem lại lịch sử đơn hàng (hàng đã đặt, hàng đã giao).
  • Gửi phản hồi, nhận tư vấn và xem hướng dẫn sử dụng mỹ phẩm.
• Nhà quản lý (Quản trị viên - Admin):
  • Quản lý danh mục và thông tin sản phẩm (thêm mới, cập nhật, xóa, quản lý hình ảnh sản phẩm).
  • Quản lý danh mục loại sản phẩm.
  • Quản lý thông tin khách hàng và phân quyền tài khoản.
  • Tiếp nhận, xử lý và theo dõi trạng thái đơn đặt hàng.
  • Thống kê doanh thu, số lượng bán hàng và dữ liệu phản hồi từ khách hàng.

Kiến trúc mô hình luồng dữ liệu (DFD)

Hệ thống được phân rã thành các cấp độ luồng dữ liệu rõ ràng:

• Sơ đồ mức ngữ cảnh (Context Diagram): Mô tả tương tác giữa hệ thống với hai tác nhân ngoài là Khách hàng và Quản trị viên.
• Sơ đồ mức đỉnh (Level 0): Phân chia thành 4 tiến trình xử lý chính gồm:
  1. Quản lý khách hàng.
  2. Quản lý sản phẩm.
  3. Quản lý đơn hàng.
  4. Thống kê.
• Sơ đồ mức dưới đỉnh (Level 1): Chi tiết hóa luồng dữ liệu nội bộ của từng tiến trình quản lý sản phẩm, đơn hàng, khách hàng và thống kê liên kết với các kho dữ liệu tương ứng.

Thiết kế cơ sở dữ liệu quan hệ

Mô hình thực thể liên kết (ERD) được chuyển đổi sang mô hình quan hệ và chuẩn hóa đạt chuẩn 3NF (Third Normal Form). Hệ thống lưu trữ bao gồm 7 bảng dữ liệu chính:

Tên bảng	Chức năng lưu trữ	Các trường dữ liệu chính
user	Tài khoản quản trị và nhân viên hệ thống	id_user, username, password, level, email
loaisanpham	Danh mục các phân loại mỹ phẩm	IdLoaiSanPham, TenLoaiSanPham
sanpham	Thông tin chi tiết các mặt hàng mỹ phẩm	IdSanPham, Images, TenSanPham, GiaSanPham, GioiThieuSanPham, ChiTietSanPham, TinhTrang, IdLoaiSanPham
khachhang	Hồ sơ thông tin cá nhân của người mua hàng	IdKhachHang, TenDangNhap, TenKhachHang, MatKhau, Level, Email, GioiTinh, DiaChiLienLac, SoDienThoai
images	Danh sách tập tin hình ảnh liên kết	id_img, name_img, id_sanpham
giohang	Thông tin các mặt hàng trong giỏ của khách	id_giohang, IdKhachHang, IdSanPham, SoLuong, NgayMua, TrangThai
phanhoi	Ý kiến đóng góp và liên hệ của người dùng	id_phanhoi, TenKhachHang, Email, NoiDung, NgayGui

Ứng dụng kỹ thuật AJAX trong triển khai

Tác giả đã triển khai các đoạn mã xử lý AJAX thuần và jQuery AJAX để xử lý các nghiệp vụ:

• Cấu hình thuộc tính jQuery AJAX: Sử dụng 4 tham số trọng tâm gồm url (đường dẫn tệp PHP xử lý), type (phương thức GET hoặc POST), dataType (kiểu dữ liệu phản hồi như json, xml, script, text), và success (hàm nhận kết quả để gán nội dung vào thẻ DOM).
• Phân hệ Quản trị (Admin): Ứng dụng AJAX trong các tác vụ chuyển trang, thêm mới, chỉnh sửa và xóa trực tiếp các bản ghi sản phẩm, loại sản phẩm mà không cần tải lại toàn bộ trang quản trị.
• Phân hệ Người dùng (Frontend): Ứng dụng kỹ thuật AJAX trong việc lọc sản phẩm, thêm hàng vào giỏ và kiểm tra trùng lặp tài khoản đăng ký.

---

Nội dung chính theo từng chương

Chương 1: Cơ sở lý thuyết

Chương 1 trình bày toàn bộ nền tảng lý thuyết và công cụ phát triển phần mềm:

• Phân tích chi tiết cú pháp và vai trò của các ngôn ngữ cốt lõi: HTML (cấu trúc tệp, các thẻ đơn/kép), CSS (cách nhúng và các thuộc tính trình bày), JavaScript (tương tác DOM, bắt sự kiện client), và PHP (cơ chế thông dịch từ web server thành HTML).
• Trình bày về Bootstrap 3: Nêu rõ lịch sử phát triển, cấu trúc tệp thư viện, ưu điểm (rút ngắn thời gian phát triển giao diện, tính tương thích đa thiết bị, hỗ trợ SEO) và nhược điểm (dung lượng thư viện còn nặng, chứa mã dư thừa nếu chỉ dùng chức năng cơ bản).
• Khái quát hệ quản trị MySQL: Các vai trò thêm, sửa, xóa, truy vấn bảng; các ưu điểm về tính nhất quán dữ liệu và các vấn đề cần lưu ý về an toàn, tranh chấp dữ liệu khi nhiều người dùng truy cập.
• Tổng quan về AJAX: Giải thích cơ chế luồng xử lý trung gian giữa Client và Server qua đối tượng XMLHttpRequest. So sánh mô hình truyền thống (phải tải lại cả trang gây trễ) và mô hình AJAX (chỉ nạp phần dữ liệu thay đổi, hiển thị thông điệp chờ). Đồng thời, chương này hướng dẫn viết mã AJAX bằng JavaScript thuần và jQuery AJAX.
• Giới thiệu công cụ: Cách thiết lập máy chủ ảo WampServer trên môi trường Windows và cài đặt môi trường soạn thảo Visual Studio Code 1.12.

Chương 2: Phân tích và thiết kế hệ thống

Chương 2 tập trung vào việc mô hình hóa các yêu cầu bài toán thương mại điện tử mỹ phẩm:

• Xác định mục tiêu mở rộng thị trường tiêu thụ, cung cấp thông tin trực quan, chính xác về sản phẩm và tiết kiệm chi phí cho khách hàng.
• Phân tích các hoạt động nghiệp vụ của cửa hàng trên mạng: Giới thiệu sản phẩm (lưu trữ hình ảnh, nhà cung cấp, giá bán), tư vấn sản phẩm theo loại da, vận hành giỏ mua hàng, đăng ký/đăng nhập thành viên, theo dõi phiên mua hàng thông qua mã định danh, và tiếp nhận đơn hàng chuyển sang bộ phận kế toán.
• Thiết lập hệ thống sơ đồ kỹ thuật:
  • Sơ đồ phân cấp chức năng (BFD).
  • Hệ thống sơ đồ luồng dữ liệu (DFD) từ mức ngữ cảnh đến các mức dưới đỉnh (cho quản lý khách hàng, sản phẩm, đơn hàng và thống kê).
  • Sơ đồ thực thể quan hệ (ERD) xác định mối quan hệ giữa các thực thể SanPham, LoaiSanPham, KhachHang với các quan hệ liên kết "Mua" và "Thuộc".
  • Chuyển đổi mô hình ERD sang mô hình quan hệ, lập ma trận liên kết khóa và chuẩn hóa dữ liệu đạt dạng chuẩn 3NF với 7 bảng cơ sở dữ liệu.

Chương 3: Triển khai xây dựng Website

Chương 3 minh chứng kết quả hiện thực hóa hệ thống thông qua giao diện và các đoạn mã xử lý:

• Giao diện phân hệ Quản trị (Admin): Minh họa và giải thích các màn hình chức năng gồm: Đăng nhập quản trị, Thống kê số liệu, Quản lý sản phẩm, Quản lý loại sản phẩm, Quản lý hình ảnh (images), và Quản lý đơn hàng/giỏ hàng.
• Giao diện phân hệ Người dùng (Website bán mỹ phẩm): Thiết kế chi tiết trang chủ với 5 khu vực cấu trúc:
  1. Phần Menu: Logo website, thanh công cụ tìm kiếm, số điện thoại hotline, liên kết đăng nhập/đăng ký, danh mục menu chính và nút truy cập giỏ hàng.
  2. Phần Slide: Banner trình diễn hình ảnh và giới thiệu các danh mục sản phẩm bán chạy.
  3. Phần Giới thiệu: Nội dung giới thiệu sơ lược về dòng sản phẩm mỹ phẩm Hanayuki.
  4. Phần Content: Khu vực hiển thị danh sách sản phẩm đặc trưng bán chạy kèm theo hình ảnh, tên sản phẩm và đơn giá niêm yết.
  5. Phần Footer (Foster): Chứa các liên kết nội bộ, thông tin bản quyền và địa chỉ liên hệ của cửa hàng.
• Trình bày các giao diện chức năng khác: Đăng ký tài khoản, đăng nhập, trang giới thiệu, trang chi tiết sản phẩm, trang liên hệ, trang giỏ hàng, và giao diện theo dõi trạng thái đơn hàng (hàng đã đặt, hàng đã giao).
• Trích xuất các đoạn mã nguồn AJAX thực tế: Cung cấp mã xử lý chuyển trang mượt mà không tải lại toàn trang và các đoạn mã gọi AJAX bất đồng bộ để thực hiện thêm, sửa, xóa dữ liệu trong trang quản trị.

---

Kết quả và đóng góp

Kết quả chính của đề tài

• Hệ thống hóa đầy đủ cơ sở lý thuyết về lập trình web với PHP/MySQL và cơ chế xử lý bất đồng bộ của kỹ thuật AJAX (sử dụng đối tượng XMLHttpRequest và thư viện jQuery).
• Xây dựng hoàn chỉnh mô hình phân tích thiết kế hệ thống thương mại điện tử với sơ đồ phân cấp chức năng, hệ thống DFD 4 phân hệ chính và thiết kế 7 bảng cơ sở dữ liệu đạt chuẩn 3NF.
• Triển khai thành công Website bán mỹ phẩm thực tế bao gồm đầy đủ hai phân hệ chức năng:
  • Phân hệ người dùng với các quy trình duyệt sản phẩm, lọc theo loại da/hãng, quản lý giỏ hàng, đặt hàng và theo dõi đơn mua.
  • Phân hệ quản trị cho phép thực hiện toàn diện các nghiệp vụ thống kê, quản lý danh mục sản phẩm, loại sản phẩm, đơn hàng và hình ảnh.
• Tích hợp thành công kỹ thuật AJAX vào các tác vụ chuyển trang và thao tác CRUD trong trang Admin, giúp loại bỏ hiện tượng tải lại toàn bộ trang (PostBack).

Đóng góp thực tiễn theo công bố của tác giả

Khóa luận đã chứng minh tính hiệu quả của việc ứng dụng kỹ thuật AJAX trong việc cải thiện tốc độ xử lý, hiệu suất hoạt động và nâng cao tính thân thiện trong trải nghiệm người dùng đối với một ứng dụng web thương mại điện tử. Việc loại bỏ quá trình tải lại trang giúp website phản hồi nhanh hơn, tiết kiệm thời gian mua sắm và tạo cảm giác mượt mà tương tự như khi sử dụng các phần mềm desktop truyền thống.

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế được tác giả chỉ ra

Trong quá trình nghiên cứu lý thuyết và triển khai thực nghiệm kỹ thuật AJAX, tác giả đã nêu rõ một số nhược điểm cố hữu của công nghệ này:

• Hạn chế về URL và Bookmark: Do dữ liệu được tải và cập nhật ngầm mà không làm thay đổi đường dẫn trên thanh địa chỉ trình duyệt, người dùng không thể đánh dấu (Bookmark/Favorite) trạng thái trang cụ thể hoặc chia sẻ liên kết trực tiếp cho người khác.
• Hạn chế về tối ưu hóa công cụ tìm kiếm (SEO): Các công cụ tìm kiếm gặp khó khăn hoặc không thể thu thập (crawl/index) được các nội dung động được nạp bằng AJAX.
• Xung đột điều hướng (Nút Back trình duyệt): Nút quay lại (Back) trên trình duyệt không thể điều hướng về trạng thái nội dung trước đó của AJAX do URL không thay đổi.
• Phụ thuộc cấu hình môi trường: Hệ thống đòi hỏi trình duyệt của người dùng phải bật hỗ trợ JavaScript; một số máy chủ web có thể phát sinh lỗi cấp quyền ("Access denied") nếu cấu hình bảo mật không tương thích với các yêu cầu bất đồng bộ.

Hướng mở rộng nghiên cứu

Dựa trên các hạn chế đã chỉ ra, hướng phát triển tiếp theo được tác giả định hướng bao gồm:

• Nghiên cứu cơ chế đồng bộ hóa việc cập nhật dữ liệu AJAX với thanh địa chỉ trình duyệt (thay đổi địa chỉ URL tương ứng với trạng thái dữ liệu) nhằm hỗ trợ khả năng lưu bookmark và khôi phục hoạt động của nút Back/Forward.
• Nâng cao tính bảo mật cho các lời gọi AJAX và hoàn thiện thêm các cổng thanh toán trực tuyến cho hệ thống website.

---

Giá trị tham khảo

Khóa luận là tài liệu tham khảo phù hợp cho sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm và Hệ thống Thông tin trong quá trình thực hiện đồ án môn học hoặc khóa luận tốt nghiệp về lập trình web:

• Phương pháp phân tích thiết kế: Cung cấp mẫu chuẩn về việc xây dựng sơ đồ phân cấp chức năng (BFD), sơ đồ luồng dữ liệu đa cấp (DFD) và thiết kế cơ sở dữ liệu quan hệ chuẩn 3NF cho một bài toán thương mại điện tử quy mô vừa và nhỏ.
• Mẫu triển khai kỹ thuật AJAX: Cung cấp hướng dẫn từng bước từ việc tạo tệp xử lý PHP, viết hàm JavaScript thuần và viết mã jQuery AJAX (với đầy đủ các thuộc tính url, type, dataType, success) để tải dữ liệu và cập nhật DOM không cần tải lại trang.
• Cấu trúc giao diện web bán hàng: Minh họa cách thức tổ chức giao diện quản trị (Admin Dashboard) và giao diện bán hàng (Client Frontend) sử dụng framework Bootstrap 3.

---

Câu hỏi thường gặp

1. Khóa luận sử dụng các công nghệ, công cụ và framework nào để xây dựng website?

Khóa luận sử dụng ngôn ngữ HTML5, CSS và JavaScript ở phía máy khách; ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu MySQL ở phía máy chủ; framework giao diện Bootstrap 3. Môi trường phát triển bao gồm gói máy chủ cục bộ WampServer (tích hợp Apache, PHP, MySQL, phpMyAdmin) và trình biên mã Visual Studio Code phiên bản 1.12.

2. Cơ sở dữ liệu của Website bán mỹ phẩm bao gồm những bảng nào và được chuẩn hóa ở mức nào?

Cơ sở dữ liệu của hệ thống được chuẩn hóa đạt mức 3NF và bao gồm 7 bảng dữ liệu: user (tài khoản quản trị), loaisanpham (danh mục loại mỹ phẩm), sanpham (chi tiết sản phẩm), khachhang (thông tin người mua hàng), images (hình ảnh sản phẩm), giohang (dữ liệu đặt mua), và phanhoi (ý kiến phản hồi của khách).

3. AJAX mang lại lợi ích gì cho hệ thống so với mô hình web truyền thống?

Mô hình web truyền thống yêu cầu gửi toàn bộ trang lên máy chủ và tải lại toàn bộ nội dung mỗi khi có thao tác, gây ra hiện tượng màn hình trắng và độ trễ lớn. AJAX sử dụng đối tượng XMLHttpRequest để trao đổi dữ liệu bất đồng bộ trong nền, chỉ nạp và thay thế phần nội dung cần chỉnh sửa thông qua DOM, loại bỏ hiện tượng PostBack, từ đó tăng tốc độ phản hồi và mang lại trải nghiệm mượt mà.

4. Giao diện trang chủ của Website bán mỹ phẩm được phân chia thành những khu vực chính nào?

Trang chủ của website được thiết kế gồm 5 khu vực chính: Phần Menu (logo, thanh tìm kiếm, hotline, nút đăng nhập/đăng ký, menu điều hướng và giỏ hàng), Phần Slide (banner quảng cáo và danh mục bán chạy), Phần Giới thiệu (thông tin giới thiệu về dòng mỹ phẩm Hanayuki), Phần Content (danh sách sản phẩm bán chạy kèm hình ảnh, tên và giá niêm yết), và Phần Footer/Foster (chứa liên kết website và thông tin liên hệ của cửa hàng).

5. Tác giả đã chỉ ra những nhược điểm kỹ thuật nào khi ứng dụng kỹ thuật AJAX?

Các nhược điểm được tác giả nêu gồm: không thể lưu trang vào mục ưa thích (Bookmark/Favorite) do URL không đổi; nội dung tải ngầm khó được lập trình để tối ưu cho công cụ tìm kiếm (SEO); nút quay lại (Back) của trình duyệt không hoạt động theo từng bước tương tác ngầm; và hệ thống hoàn toàn phụ thuộc vào việc trình duyệt client có kích hoạt JavaScript hay không.

---

Kết luận

Khóa luận tốt nghiệp của sinh viên Trần Thị Diễm đã hoàn thành mục tiêu nghiên cứu bản chất kỹ thuật của AJAX và ứng dụng thực tế vào bài toán xây dựng website thương mại điện tử bán mỹ phẩm. Bằng việc kết hợp ngôn ngữ PHP, hệ quản trị MySQL, framework Bootstrap 3 và kỹ thuật AJAX, tác giả đã thiết kế và vận hành thành công hệ thống website với đầy đủ phân hệ quản trị và giao diện người dùng. Công trình phản ánh rõ quy trình phân tích thiết kế hệ thống thông tin chuẩn mực từ sơ đồ luồng dữ liệu DFD đến cơ sở dữ liệu 3NF, đồng thời chỉ ra các giá trị thực tiễn cùng những giới hạn kỹ thuật cần tiếp tục hoàn thiện khi ứng dụng AJAX trong phát triển web.

Trích đoạn nội dung tài liệu

Chương 1: CƠ SỞ LÝ THUYẾT 1. GIỚI THIỆU VỀ NGÔN NGỮ LẬP TRÌNH 1. Ngôn ngữ HTML 1. Một số khái niệm về HTML HTML (viết tắt cho HyperText Markup Language, hay là "ngôn ngữ đánh dấu siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang Web, nghĩa là các mẫu thông tin được trình bày trên World Wide Web.

HTML bao gồm một tập hợp các thẻ dùng để: - Định nghĩa cấu trúc của trang Web. - Định dạng nội dung của trang Web. - Tạo các siêu liên kết để liên kết đến các trang Web khác. - Chèn âm thanh, hình ảnh, video.

vào trang Web. Tập tin HTML Tập tin HTML là một tập tin text có chứa các thẻ HTML. Tập tin HTML còn được gọi là một trang Web. Nếu cú pháp có bị sai thì trình duyệt cũng không báo lỗi, nó chỉ hiện thị không như ý muốn.

Thẻ trong HTML Mỗi thẻ là một từ khóa, được bao quanh bởi cặp ngoặc nhọn (Ví dụ: <html>, <head>, <body>) Mỗi thẻ HTML thường bao gồm một cặp: thẻ mở (bắt đầu định dạng), và thẻ đóng (kết thúc định dạng) Thẻ đóng giống thẻ mở, nhưng ở thẻ đóng thì có thêm ký hiệu dấu gạch chéo (/) trước tên thẻ (ví dụ: </html>, </head>, </body>). Văn bản cần định dạng được đặt giữa thẻ mở và thẻ đóng. Ví dụ: <p> Đây là một đoạn văn bản</p> Các khoảng trắng dư thừa và ký tự xuống dòng sẽ bị bỏ qua. Các thẻ gồm một cặp thẻ đóng và mở được gọi là thẻ kép (Ví dụ: <b></b>, <p></p>, <i></i>).

Các thẻ chỉ có một thẻ mở được gọi là thẻ đơn (Ví dụ: <img>) Các thẻ có thể được lồng vào nhau, nhưng không được chéo nhau. 4 Ví dụ đúng: <p>Đây là<b>một đoạn</b>văn bản</p> Ví dụ sai: <p>Đây là<b>một đoạn</p>văn bản</b> 1. Cấu trúc cơ bản của 1 tập tin HTML Một tập tin HTML được bắt đầu bằng thẻ <html> và kết thúc bởi </html> Bên trong cặp thẻ <html></html> được chia thành hai phần chính: + Phần <head>: chứa tiêu đề của trang Web, các tập tin hỗ trợ, các khai báo. + Phần <body>: chứa các nội dung mà bạn muốn hiển thị ra màn hình Hình ảnh dưới đây minh họa cho cấu trúc của một tập tin HTML Hình 1.1: Cấu trúc tệp tin HTML Hiện nay đã ra đến phiên bản HTML5 (phiên bản này cung cấp thêm những thẻ mới với tính năng hay hơn).

Để sử dụng phiên bản HTML5 ta thêm thẻ <!DOCTYPE html> ở đầu tập tin. Ngôn ngữ CSS 1.1 Một số khái niệm về CSS CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền, .) dựa trên các cặp thuộc tính: giá trị thuộc tính Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp. CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó. 5 Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.

CSS có thể tùy chỉnh bố cục định dạng hiển thị nội dung, màu sắc căn chỉnh màu nền, đường viền, đổ bóng cho các thẻ HTML. Nếu 1 Website mà chỉ làm bằng HTML không sử dụng CSS thì Website đó nhìn sẽ rất thô sơ. Chúng ta có thể tưởng tượng nó như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngoài chỉ còn lại mỗi bộ khung và máy. CSS cung cấp cho ta hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả.

Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau.2 Cách chèn CSS vào Website Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn CSS và Website: + Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style> trong phần <head></head> của trang Web Hình 1.2: Cách chèn CSS + Cách 2: Chèn nội dung CSS vào trực tiếp vào thẻ mở html thông qua thuộc tính style Hình 1.3: Cách chèn CSS + Cách 3: Lưu nội dung CSS ra 1 file riêng có phần mở rộng là .CSS và chèn file này vào Website thông tin thẻ <link>, thường file CSS được chèn trong cặp thẻ <head></head> 6 Hình 1.4: Cách chèn CSS Chúng ta lên sử dụng theo cách 3, vì như vậy sẽ dễ quản lý code dễ hơn, sau này có chỉnh sửa chỉ cần vào file CSS sửa. Ngôn ngữ Javascipt 1. Giới thiệu về JavaScipt JavaScript là ngôn ngữ dưới dạng script gắn với các file HTML. JavaScript không được biên dịch mà được trình duyệt diễn dịch.

JavaScript là ngôn ngữ lập trình dựa trên hướng đối tượng. JavaScript không phải là ngôn ngữ lập trình hướng đối tượng do không hỗ trợ các lớp hay tính thừa kế. JavaScript chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. JavaScript là ngôn ngữ phía Client.

Cách nhúng JavaScript vào trong tập tin HTML + Nhúng trong thẻ <head>: Hình 1.5: Cách chèn JavaScript vào head 7 + Nhúng trong thẻ <body>: Hình 1.6: Cách chèn JavaScript vào body 1. Ngôn ngữ lập trình PHP 1. Một số khái niệm về PHP PHP là từ viết tắt của "PHP : Hypertext Preprocessor". PHP là một ngôn ngữ kịch bản phía máy chủ, nó thường được dùng để xây dựng các trang Web động.

Mã PHP có thể thực thi trên server để tạo ra mã HTML và xuất ra trình duyệt Web theo yêu cầu của người sử dụng. PHP cho phép xây dựng ứng dụng Web trên mạng Internet tương tác với mọi cơ sở dữ liệu như : MYSQL, … Ngôn ngữ lập trình PHP được tối ưu hóa cho các ứng dụng Web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình phổ biến nhất thế giới.Một số tính chất của file PHP Các file PHP trả về kết quả cho trình duyệt là một trang thuần HTML. Các file PHP có thể chứa văn bản (Text), các thẻ HTML (HTML tags) và đoạn mã kịch bản (Script). Các file PHP có phần mở rộng là : PHP, PHP3.

Từ phiên bản 4.0 trở về sau mới hỗ trợ session.Cơ chế hoạt động Khi người dùng muốn truy cập một tập tin PHP thì họ phải gửi yêu cầu thông qua việc truy cập vào đường dẫn nơi nó được lưu trên máy chủ Web. Sau đó, máy chủ Web sẽ tiếp nhận yêu cầu và biên dịch tập tin PHP thành các đoạn mã HTML rồi trả về cho trình duyệt của người dùng. Dưới đây là hình ảnh minh họa cơ chế hoạt động của PHP : 8 Hình 1.7: Cơ chế hoạt động của PHP 1.4 Cách tạo và chạy 1 tệp tin PHP a. Cách tạo 1 tệp tin PHP - Mở Notepad hoặc công cụ khác như Sublime_text, Dreamweaver lên và gõ vào đó một đoạn mã PHP như sau.8: Đoạn mã PHP - Lưu tệp tin vào thư mục www trong folder wamp với đuôi.

PHP và đặt tên là taptindautien. Chạy tệp tin PHP - Mở trình duyệt Web - Gõ vào thanh địa chỉ dòng chữ localhost/taptindautien.PHP rồi nhấn Enter. Nếu trình duyệt hiển thị giống như hình bên dưới thì tức là ta đã chạy thành công tập tin PHP.9: Hiển thị tệp PHP 1. Bootstrap Bootstrap là một framework HTML, CSS, và JavaScript cho phép thiết kế phát triển responsive Web mobile.

Nếu bạn chưa hiểu về responsive Web mobile bạn có thể xem bài viết của em ở đây để hiểu hơn về nó “Khác nhau cơ bản giữa Mobile Web và Responsive Web Design“. Bootstrap là gì? Bootstrap là một framework cho phép thiết kế Website reponsive nhanh hơn và dễ dàng hơn Bootstrap là bao gồm các HTML templates, CSS templates và JavaScript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong Bootstrap có thêm các plugin JavaScript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.

Lịch sử Bootstrap: Bootstrap là dược phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub. Tính ra đến thời điểm mình viết bài viết này nó cũng đã phát triển được 3 năm rồi. Bản Bootstrap mới nhất bây giờ là Bootstrap 3.2 Giới thiệu và hướng dẫn sử dụng Bootstrap Hình 1.10: Các phiên bản Bootstrap 3 Đây là cấu trúc file sau khi tải về và giải nén.11: File Bootstrap 3 + Nhúng thư viện Bootstrap vào Website.

10 Cũng giống như nhúng file CSS vào Website bằng cách thường thì Bootstrap còn cung cấp cho chúng ta một bộ liên kết , mà chỉ cần nhúng vào Website thì ngay lập tức có thể gọi đến các thuộc tính CSS & JS để sử dụng ngay, rất tiện lợi. Nhưng bên cạnh đó nếu như một ngày nào đó mà cáp quang việt nam không may bị quái thú cắn đứt thì các bạn sẽ phải kêu trời vì load không nổi bộ liên kết này. Giải pháp tối ưu nhất là dowload về giải nén ra và nhúng trực tiếp vào Website của mình.12: Nhúng Bootstrap Phần định nghĩa CSS chúng ta sẽ để trong cặp thẻ <head>, còn phần định nghĩa JS chúng ta chèn phía sau cặp thẻ <body>. làm xong việc này thì ngay từ bây giờ chúng ta có thể gọi ngay các thuộc tính CSS trong Bootstrap , tiến hành xây dựng giao diện Website một cách nhanh chóng.2 Ưu và nhượt điểm của Bootstrap + Ưu điểm: Phát triển giao diện nhanh chóng: Bạn dễ dàng phát triển giao diện Website một cách rất nhanh, nếu một trang bình thường thì bạn có thể cắt xong trong một ngày hoặc chưa tới một ngày.

Chưa kể đến tính tương thích với các trình duyệt và thiết bị di động Dễ học, dễ sử dụng: Cộng đồng đông đúc và tài liệu tham khảo rõ ràng chính là sức mạnh của Bootstrap. Nền tảng tối ưu: Trong Bootstrap đã tạo sẵn một thư viện để lưu trữ mà các nhà thiết kế có thể sử dụng và tuỳ ý chỉnh sửa theo mục đích cá nhân. Điều này giúp cho việc phát triển Website trở nên nhanh chóng bởi vì bạn có thể lựa chọn một mẫu có sẵn phù hợp và thêm màu sắc, hình ảnh, video. là đã có ngay giao diện 11 đẹp.

Hơn nữa, Bootstrap sự tương thích với trình duyệt và thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn có thể yên tâm với kết quả mình làm ra, thậm chí bạn còn có thể bỏ qua cả bước kiểm tra lại, và bạn sẽ tiết kiệm được thời gian, tiền bạc cho Website của mình.