Khóa luận: Xây dựng website đăng ký tín chỉ bằng kỹ thuật Ajax - Lê Sơn Ngà

Khóa luận tốt nghiệp Xây dựng website đăng ký tín chỉ bằng Ajax và PHP. Báo cáo full code và CSDL MySQL, tài liệu tham khảo cho sinh viên CNTT.

Trường đại học

Đại học Sư phạm Đà Nẵng

Chuyên ngành

Công nghệ thông tin

Người đăng

Ẩn danh

Thể loại

Khóa luận tốt nghiệp

2015

65
2
0

Phí lưu trữ

30 Point

Tóm tắt

I. Hướng dẫn tổng quan xây dựng web đăng ký tín chỉ PHP Ajax

Việc xây dựng một hệ thống đăng ký tín chỉ online là yêu cầu cấp thiết tại các cơ sở giáo dục đại học, nhằm tối ưu hóa quy trình và nâng cao trải nghiệm cho sinh viên. Đề tài "Xây dựng website đăng ký tín chỉ bằng kỹ thuật Ajax" do sinh viên Lê Sơn Ngà thực hiện, dưới sự hướng dẫn của Th.S Ngô Đình Thưởng, là một minh chứng điển hình cho việc ứng dụng công nghệ hiện đại vào giải quyết bài toán thực tiễn này. Mục tiêu chính của dự án là tạo ra một web application PHP với giao diện thân thiện, dễ sử dụng, đồng thời áp dụng kỹ thuật Ajax để tăng tốc độ phản hồi và giảm tải cho máy chủ. Hệ thống cho phép sinh viên chủ động quản lý thời gian học, lựa chọn giảng viên và lớp học phù hợp. Nền tảng công nghệ cốt lõi bao gồm ngôn ngữ lập trình phía máy chủ là PHP, hệ quản trị cơ sở dữ liệu MySQL, và sự kết hợp của JavaScript và XML thông qua Ajax để xử lý các tác vụ bất đồng bộ. Đây là một project đăng ký học phần PHP hoàn chỉnh, không chỉ đáp ứng yêu cầu của một khóa luận tốt nghiệp mà còn cung cấp một source code web đăng ký môn học hữu ích cho cộng đồng lập trình viên và các cơ sở đào tạo. Việc phân tích và thiết kế CSDL quản lý đào tạo được thực hiện cẩn thận để đảm bảo tính toàn vẹn dữ liệu và khả năng mở rộng của hệ thống trong tương lai.

1.1. Tầm quan trọng của một hệ thống đăng ký tín chỉ online

Sự ra đời của Quy chế 43 năm 2007 của Bộ Giáo Dục-Đào Tạo đã thúc đẩy mạnh mẽ việc áp dụng hình thức đào tạo theo tín chỉ. Điều này đòi hỏi các trường đại học phải có một hệ thống đăng ký tín chỉ online hiệu quả. Hệ thống này không chỉ giúp sinh viên tự chủ trong việc quản lý tín chỉ sinh viên mà còn giảm tải công việc hành chính cho phòng đào tạo. Một website được xây dựng tốt cho phép sinh viên xem chương trình học, lựa chọn môn học, giảng viên, và thời gian biểu một cách linh hoạt. Theo khảo sát tại Trường Đại học Sư phạm Đà Nẵng, việc áp dụng công nghệ thông tin vào quản lý đào tạo là xu thế tất yếu, giúp nâng cao chất lượng dịch vụ và bắt kịp sự phát triển của xã hội. Do đó, việc đầu tư vào một đồ án website quản lý sinh viên như thế này mang lại giá trị thực tiễn cao.

1.2. Mục tiêu và phạm vi của đồ án website quản lý sinh viên

Mục tiêu cốt lõi của đề tài là nghiên cứu và ứng dụng các công nghệ web phổ biến để xây dựng một sản phẩm cụ thể. Các công nghệ chính bao gồm lập trình web PHP cơ bản, thiết kế website với HTML/CSS, và đặc biệt là kỹ thuật Ajax. Sản phẩm cuối cùng là một website đăng ký tín chỉ hoàn chỉnh với giao diện thân thiện, tốc độ xử lý nhanh. Phạm vi nghiên cứu tập trung vào quy trình đăng ký tín chỉ của sinh viên tại Trường Đại học Sư phạm, bao gồm các tác nhân chính là Sinh viên, Quản trị viên (Phòng đào tạo) và Khách vãng lai. Các chức năng chính được xây dựng bao gồm đăng nhập, đăng ký học phần, xem thời khóa biểu, và xem kết quả học tập. Đề tài không đi sâu vào các nghiệp vụ phức tạp khác của phòng đào tạo mà tập trung giải quyết bài toán cốt lõi là đăng ký môn học.

II. Phân tích thách thức của các website đăng ký tín chỉ truyền thống

Các hệ thống đăng ký tín chỉ truyền thống, không sử dụng Ajax, thường gặp phải nhiều vấn đề nghiêm trọng, đặc biệt là về hiệu năng và trải nghiệm người dùng. Mỗi khi sinh viên thực hiện một thao tác, chẳng hạn như chọn một môn học hoặc kiểm tra lịch, toàn bộ trang web phải được tải lại từ máy chủ. Quá trình này không chỉ làm chậm tốc độ tương tác mà còn tiêu tốn tài nguyên mạng và gây áp lực lớn lên máy chủ. Theo mô hình tương tác client/server truyền thống (Hình 1.4 trong tài liệu gốc), mỗi yêu cầu (request) từ client sẽ dẫn đến việc server xử lý và trả về một trang HTML hoàn chỉnh mới. Điều này tạo ra độ trễ rõ rệt, gây khó chịu cho người dùng. Đặc biệt, vào những thời điểm cao điểm như ngày đầu mở cổng đăng ký, hàng ngàn sinh viên truy cập cùng lúc có thể dẫn đến tình trạng tắc nghẽn, quá tải, thậm chí làm sập hệ thống. Thách thức lớn nhất là làm sao để xây dựng một web application PHP có khả năng đáp ứng đồng thời nhiều yêu cầu mà không làm gián đoạn trải nghiệm. Đây chính là lý do kỹ thuật Ajax được lựa chọn làm giải pháp đột phá cho project đăng ký học phần PHP này.

2.1. Hạn chế về tốc độ và trải nghiệm người dùng khi tải lại trang

Trong một hệ thống đăng ký tín chỉ online truyền thống, mỗi lần sinh viên nhấn nút "Đăng ký" hoặc "Hủy môn học", trình duyệt sẽ gửi một yêu cầu đến máy chủ. Máy chủ xử lý yêu cầu, truy vấn cơ sở dữ liệu, sau đó tạo lại toàn bộ trang HTML và gửi ngược về cho trình duyệt. Quá trình này lặp đi lặp lại, khiến người dùng phải chờ đợi trang tải lại hoàn toàn, ngay cả khi chỉ có một phần nhỏ thông tin trên trang cần cập nhật. Điều này làm giảm đáng kể tính tương tác và sự mượt mà của ứng dụng. Trải nghiệm người dùng trở nên rời rạc và thiếu tính tức thời, một yếu tố quan trọng trong các ứng dụng web hiện đại.

2.2. Vấn đề quá tải máy chủ vào thời điểm đăng ký cao điểm

Vấn đề nghiêm trọng nhất của kiến trúc web truyền thống là nguy cơ quá tải máy chủ. Khi hàng ngàn sinh viên cùng truy cập để giành suất học trong một khoảng thời gian ngắn, lượng yêu cầu HTTP đầy đủ (full-page requests) gửi đến máy chủ là cực kỳ lớn. Mỗi yêu cầu đều đòi hỏi server phải xử lý logic, truy vấn CSDL và render HTML. Gánh nặng này có thể vượt quá khả năng xử lý của máy chủ, gây ra tình trạng phản hồi chậm hoặc từ chối dịch vụ (timeout). Đây là bài toán mà việc xây dựng web đăng ký tín chỉ bằng PHP và Ajax có thể giải quyết hiệu quả bằng cách giảm thiểu số lượng dữ liệu truyền tải giữa client và server.

III. Giải pháp thiết kế CSDL và xây dựng backend bằng PHP và MySQL

Để xây dựng một hệ thống đăng ký tín chỉ online ổn định và hiệu quả, nền tảng backend và cơ sở dữ liệu đóng vai trò xương sống. Đề tài đã lựa chọn một bộ công cụ mã nguồn mở phổ biến và mạnh mẽ: ngôn ngữ lập trình PHP và hệ quản trị cơ sở dữ liệu MySQL. PHP được chọn vì cú pháp gần gũi, cộng đồng hỗ trợ lớn và khả năng tích hợp chặt chẽ với các máy chủ web như Apache. Phần quan trọng nhất là việc thiết kế CSDL quản lý đào tạo. Cấu trúc CSDL được thiết kế theo mô hình quan hệ, bao gồm các bảng chính như sv (thông tin sinh viên), gv (giảng viên), hp (học phần), tk (thời khóa biểu), và kq (kết quả). Sơ đồ quan hệ dữ liệu (Hình 2.10) cho thấy mối liên kết chặt chẽ giữa các bảng thông qua khóa chính và khóa ngoại, đảm bảo tính nhất quán và toàn vẹn dữ liệu. Ví dụ, bảng tk (đăng ký) liên kết masv từ bảng svmahp từ bảng hp. Code PHP quản lý đăng ký học sẽ thực hiện các truy vấn SQL đến các bảng này để xử lý nghiệp vụ, từ việc hiển thị danh sách môn học cho đến việc ghi nhận đăng ký của sinh viên.

3.1. Hướng dẫn làm web bằng PHP và MySQL cho quản lý đào tạo

Quy trình hướng dẫn làm web bằng PHP và MySQL cho dự án này bắt đầu bằng việc cài đặt môi trường phát triển (XAMPP hoặc WAMPP), bao gồm Apache, PHP và MySQL. Tiếp theo là giai đoạn thiết kế CSDL như đã đề cập. Sau đó, các tệp PHP được tạo ra để xử lý các yêu cầu từ phía client. Mỗi chức năng chính (đăng nhập, xem môn học, đăng ký) tương ứng với một hoặc nhiều tệp PHP. Các tệp này chứa logic nghiệp vụ, thực hiện các câu lệnh SQL (SELECT, INSERT, DELETE) để tương tác với CSDL MySQL. Dữ liệu sau khi được xử lý thường được trả về dưới dạng HTML hoặc, trong trường hợp sử dụng Ajax, là định dạng JSON hoặc văn bản thuần túy.

3.2. Phân tích chi tiết thiết kế CSDL quản lý đào tạo cốt lõi

Việc thiết kế CSDL quản lý đào tạo là nền tảng quyết định sự thành công của hệ thống. Các bảng dữ liệu chính được định nghĩa rõ ràng: Bảng sv lưu thông tin sinh viên (mã sinh viên, họ tên, lớp, mật khẩu). Bảng hp chứa danh sách các học phần (mã học phần, tên, số tín chỉ, học kỳ). Bảng tk là bảng trung tâm, ghi lại thông tin lớp học phần cụ thể được mở trong một học kỳ (mã học phần, giảng viên, thời gian, phòng học, số chỗ). Bảng dk ghi lại lịch sử đăng ký của sinh viên, liên kết giữa masvmahp. Thiết kế này cho phép hệ thống dễ dàng thực hiện các tác vụ phức tạp như kiểm tra trùng lịch học PHP bằng cách truy vấn các bản ghi trong bảng tk của một sinh viên cụ thể.

IV. Phương pháp tối ưu giao diện với kỹ thuật PHP Ajax MySQL

Điểm nhấn công nghệ của đồ án chính là việc áp dụng kỹ thuật Ajax để tạo ra một web application PHP có tính tương tác cao và tốc độ phản hồi nhanh. Ajax (Asynchronous JavaScript and XML) không phải là một ngôn ngữ, mà là một phương pháp kết hợp PHP Ajax MySQL và JavaScript để giao tiếp với máy chủ một cách bất đồng bộ. Thay vì tải lại toàn bộ trang, Ajax cho phép gửi và nhận dữ liệu từ máy chủ ở chế độ nền. Trong hệ thống này, đối tượng XMLHttpRequest của JavaScript đóng vai trò trung tâm. Khi sinh viên thực hiện một hành động (ví dụ: click vào nút "Đăng ký"), một hàm JavaScript sẽ được kích hoạt. Hàm này tạo một đối tượng XMLHttpRequest, gửi yêu cầu (sử dụng phương thức jQuery Ajax POST-GET) đến một tệp PHP trên máy chủ, kèm theo dữ liệu cần thiết (như mã học phần, mã sinh viên). Tệp PHP xử lý yêu cầu, truy vấn CSDL và trả về một kết quả (ví dụ: thông báo thành công hoặc lỗi). JavaScript sau đó nhận kết quả này và cập nhật chỉ một phần của trang web mà không cần tải lại. Quy trình này được minh họa rõ trong "Mô hình tương tác client/server sử dụng Ajax" (Hình 1.5).

4.1. Cơ chế hoạt động của Ajax trong project đăng ký học phần

Trong project đăng ký học phần PHP, cơ chế Ajax được áp dụng triệt để. Khi trang đăng ký tín chỉ được tải, danh sách các môn học sẽ hiển thị. Khi sinh viên chọn đăng ký một môn, JavaScript sẽ thu thập mã môn học đó và gửi một yêu cầu Ajax đến tệp register.php. Tệp register.php sẽ thực hiện các bước kiểm tra logic nghiệp vụ, bao gồm: kiểm tra số lượng chỗ còn lại, kiểm tra trùng lịch học PHP với các môn đã đăng ký, và kiểm tra các điều kiện tiên quyết. Sau khi xử lý, tệp PHP trả về một chuỗi JSON chứa trạng thái (thành công/thất bại) và một thông điệp. Phía client, JavaScript sẽ xử lý dữ liệu JSON với PHP trả về này để cập nhật giao diện, ví dụ như hiển thị thông báo, thay đổi màu sắc của nút đăng ký và cập nhật danh sách các môn đã chọn.

4.2. Kỹ thuật xử lý form với Ajax và PHP không tải lại trang

Việc xử lý form với Ajax và PHP là một ứng dụng kinh điển của kỹ thuật này. Thay vì sử dụng thẻ <form> với thuộc tính action trỏ đến một trang khác, các sự kiện như onclick trên nút bấm sẽ được bắt bởi JavaScript. JavaScript sẽ ngăn chặn hành vi mặc định của form, thu thập dữ liệu từ các trường input, và gửi chúng đi bằng XMLHttpRequest. Điều này mang lại trải nghiệm liền mạch, vì người dùng không bao giờ phải rời khỏi trang hiện tại. Các thông báo lỗi hoặc thành công được hiển thị ngay lập tức trên trang, giúp tăng tốc độ tương tác và giảm thiểu sự khó chịu khi phải điền lại form nếu có lỗi xảy ra. Kỹ thuật này được áp dụng cho cả chức năng đăng ký, hủy đăng ký và các thao tác quản trị khác trong hệ thống.

V. Triển khai chức năng chính của đồ án website quản lý sinh viên

Sản phẩm cuối cùng của đề tài là một đồ án website quản lý sinh viên với các chức năng đầy đủ, phục vụ trực tiếp cho nhu cầu đăng ký tín chỉ. Hệ thống được chia thành hai phân hệ chính: phân hệ dành cho sinh viên và phân hệ dành cho quản trị viên (phòng đào tạo). Giao diện được thiết kế đơn giản, thân thiện, tập trung vào tính dễ sử dụng. Trang chủ cung cấp các thông tin chung và lối vào trang đăng nhập. Sau khi đăng nhập thành công, sinh viên được chuyển đến giao diện chính nơi có thể thực hiện các chức năng cốt lõi. Việc sử dụng PHP Ajax MySQL giúp các chức năng này hoạt động mượt mà và nhanh chóng. Chẳng hạn, khi xem thời khóa biểu, dữ liệu được tải động mà không cần làm mới trang. Tương tự, bảng điểm cũng được cập nhật tức thì. Mỗi chức năng đều được phân tích kỹ lưỡng thông qua biểu đồ Use-Case và biểu đồ tuần tự, đảm bảo luồng hoạt động của hệ thống là logic và chính xác. Source code web đăng ký môn học được tổ chức rõ ràng, dễ dàng cho việc bảo trì và phát triển sau này.

5.1. Xây dựng chức năng đăng ký và kiểm tra trùng lịch học PHP

Đây là chức năng quan trọng nhất của hệ thống. Giao diện đăng ký (Hình 3.3) hiển thị danh sách các học phần được phép đăng ký trong học kỳ. Khi sinh viên nhấn nút đăng ký, một yêu cầu Ajax được gửi đi. Phía máy chủ, code PHP quản lý đăng ký học sẽ thực hiện thuật toán kiểm tra trùng lịch học PHP. Thuật toán này truy vấn tất cả các lớp học phần mà sinh viên đã đăng ký trong bảng dk, sau đó so sánh thu (ngày học) và tiet (tiết học) của môn học mới với các môn đã có. Nếu phát hiện trùng lặp, hệ thống sẽ trả về thông báo lỗi. Nếu không, hệ thống sẽ thêm một bản ghi mới vào bảng dk và giảm số chỗ trống trong bảng tk, sau đó trả về thông báo thành công.

5.2. Chức năng xem thời khóa biểu và kết quả học tập tự động

Sau khi đăng ký thành công, sinh viên có thể truy cập chức năng xem thời khóa biểu (Hình 3.4). Chức năng này cũng sử dụng Ajax để tải dữ liệu. Khi người dùng click vào mục "Thời khóa biểu", JavaScript sẽ gửi yêu cầu đến máy chủ. Tệp PHP sẽ truy vấn cơ sở dữ liệu để lấy tất cả các lớp học phần mà sinh viên đã đăng ký trong học kỳ hiện tại và trả về dữ liệu. JavaScript sẽ nhận dữ liệu này và tự động vẽ một bảng thời gian biểu trên giao diện. Tương tự, chức năng xem kết quả học tập (Hình 3.5) cũng hoạt động theo cơ chế tải động, giúp việc tra cứu điểm của sinh viên trở nên nhanh chóng và thuận tiện, hoàn thiện trải nghiệm quản lý tín chỉ sinh viên.

VI. Đánh giá kết quả và hướng phát triển cho web application PHP

Dự án xây dựng web đăng ký tín chỉ bằng PHP và Ajax đã đạt được các mục tiêu đề ra. Sản phẩm là một web application PHP hoàn chỉnh, có khả năng đáp ứng tốt các nghiệp vụ cơ bản của việc đăng ký tín chỉ. Việc áp dụng thành công kỹ thuật Ajax đã cải thiện đáng kể tốc độ và trải nghiệm người dùng, giải quyết được bài toán quá tải thường gặp ở các hệ thống truyền thống. Source code web đăng ký môn học được xây dựng theo hướng module hóa, dễ hiểu, là một tài liệu tham khảo giá trị cho các sinh viên ngành công nghệ thông tin. Hệ thống đã chứng minh được tính hiệu quả của việc kết hợp PHP Ajax MySQL trong việc phát triển các ứng dụng web động. Tuy nhiên, đề tài vẫn còn một số điểm có thể phát triển thêm trong tương lai để hoàn thiện hơn. Hướng phát triển có thể bao gồm việc tối ưu hóa thuật toán kiểm tra trùng lịch học PHP cho các trường hợp phức tạp hơn, xây dựng thêm các chức năng cho phòng đào tạo như quản lý chương trình học, thống kê, báo cáo. Ngoài ra, việc nâng cấp giao diện theo các framework hiện đại như React hay Vue.js cũng là một hướng đi tiềm năng.

6.1. Tổng kết ưu điểm của source code web đăng ký môn học này

Ưu điểm lớn nhất của source code web đăng ký môn học này là tính ứng dụng thực tế và việc sử dụng công nghệ Ajax một cách hiệu quả. Code được viết bằng lập trình web PHP cơ bản, giúp người mới bắt đầu dễ dàng tiếp cận và tìm hiểu. Việc giảm thiểu tải lại trang giúp tiết kiệm băng thông và tài nguyên máy chủ. Hệ thống có giao diện thân thiện, luồng chức năng rõ ràng, đáp ứng được các yêu cầu cốt lõi của một đồ án website quản lý sinh viên. Đây là một nền tảng tốt để phát triển thành một hệ thống quản lý đào tạo toàn diện hơn.

6.2. Tiềm năng phát triển hệ thống quản lý tín chỉ sinh viên

Hệ thống hiện tại có thể được mở rộng với nhiều tính năng nâng cao. Một hướng phát triển là tích hợp hệ thống thông báo thời gian thực (real-time notifications) bằng WebSockets để thông báo cho sinh viên khi có lớp học được mở thêm chỗ. Chức năng gợi ý môn học dựa trên chương trình đào tạo và lịch sử học tập cũng là một cải tiến giá trị. Về phía quản trị, có thể xây dựng một dashboard phân tích dữ liệu, giúp phòng đào tạo có cái nhìn tổng quan về tình hình đăng ký. Ngoài ra, việc triển khai API để các ứng dụng di động có thể kết nối và thực hiện đăng ký tín chỉ cũng là một hướng phát triển phù hợp với xu thế công nghệ hiện nay, nâng tầm hệ thống quản lý tín chỉ sinh viên.

04/10/2025

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

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 TỔNG QUAN VỀ MÔ HÌNH ỨNG DỤNG WEB.1 Khái niệm về World Wide Web. World Wide Web (gọi tắt là Web hoặc WWW) là một dịch vụ chạy trên Internet, nó cung cấp giao diện thân thiện với người dùng, dễ sử dụng. Bản chất Web không phải là một hệ thống cụ thể mà là một tập hợp các công cụ tiện ích và giao diện giúp người dùng tạo ra và lưu trữ những tài liệu vào hệ thống “siêu văn bản” (hyper text) và cung cấp cho những người dùng khác. Người dùng phải sử dụng một chương trình được gọi là trình duyệt Web (Web browser) để xem “siêu văn bản”.

Chương trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử dụng yêu cầu (thông tin trong ô địa chỉ được gọi là URL (Uniform Resource Locator), rồi sau đó chương trình sẽ tự động gửi thông tin đến máy chủ chứa trang web (web server) và hiển thị trên trình duyệt của người xem. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web.1: Mô hình ứng dụng web Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 4 1.2 Khái niệm Client-Server. Đề cập đến mối quan hệ logic giữa các máy tính trong mạng Internet, các máy được chia thành máy client và máy server với những vai trò khác nhau.

Server là những máy tính chuyên dụng có khả năng xử lý và lưu trữ lớn với chức năng chủ yếu là quản lý, lưu giữ các tài nguyên mà máy tính khác thông qua mạng Internet có thể truy cập được. Ngoài ra, server còn đảm nhận việc kiểm soát sự truy cập và bảo mật tài nguyên, dữ liệu. Client là những máy tính truy cập dữ liệu từ server, chịu trách nhiệm về giao diện và quá trình xử lý tài nguyên truy cập được, được kết nối với server thông qua mạng Internet. Quy trình hoạt động của client-server có thể tóm gọn lại sau đây: client gửi yêu cầu của người dùng đến server, server xử lý yêu cầu và gửi kết quả trả về cho client, client sẽ xử lý kết quả trả về để đáp ứng nhu cầu sử dụng của người dùng.2: Mô hình client-server 1.3 Cách tạo một trang web Có nhiều cách để tạo trang Web: Tạo trang Web trên bất kì chương trình soạn thảo mã ASCII như: Notepad, Edit Plus, Subline Text…là những chương trình soạn thảo văn bản phù hợp với mọi hệ điều hành.

Hay dùng những trình soạn thảo trực quan chuyên nghiệp như: FrontPage, Dreamweaver, Netscape Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 5 Editor… sẽ giúp bạn thiết kế trang Web dễ dàng hơn, nhanh chóng hơn, phần lớn mã lệnh HTML sẽ có sẵn trong phần Code cho bạn. Để xây dựng một ứng dụng Web hoàn chỉnh và có tính thương mại, cần kết hợp cả Client Script (kịch bản trình khách) và Server Script (kịch bản trên trình chủ) với một loại cơ sở dữ liệu nào đó, chẳng hạn như: MS Access, SQL Server, MySQL, Oracle,. Khi muốn triển khai ứng dụng Web trên mạng, ngoài các điều kiện về cấu hình phần cứng, bạn cần có trình chủ Web thường gọi là Web Server.2 TỔNG QUAN VỀ NGÔN NGỮ HTML 1.1 Giới thiệu về ngôn ngữ HTML - Tim Berners-Lee là cha đẻ của ngôn ngữ HTML và bắt đầu từ năm 1996, các chi tiết kỹ thuật HTML được xây dựng bởi World Wide Web Consortium (W3C) và trở thành một chuẩn của Internet. - Là viết tắt của Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn bản) được thiết kế để tạo nên Website với các mẫu thông tin được trình bày trên World Wide Web.

- HTML mô tả trang tài liệu không giống với những ngôn ngữ khác.Có những ngôn ngữ mô tả từng phần tử đồ họa và vị trí của nó trên trang tài liệu bao gồm font chữ, hình ảnh, kích thước… của chúng. Ngược lại, HTML chỉ đơn giản là “gán thẻ” cho nội dung với những thuộc tính nào đó mà sau đó chúng được trình duyệt xác định để hiển thị. Điều này giống như người giám đốc đánh dấu bằng tay những đoạn trên văn bản để người thứ ký có thể biết những việc học phải làm như: “chỗ này xuống dòng”, “chỗ kia bỏ thêm hình ảnh minh họa”… Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 6 - Kiểu chữ, hình ảnh đồ họa, âm thanh, video được HTML “gán thẻ” vào văn bản tạo ra mối liên kết và hình thức gọi là siêu văn bản (Hypertext), đây là đặc tính quan trọng nhất của HTML, có nghĩa là một văn bản hay đồ họa bất kỳ vị trí nào cũng có thể liên kết với một tài liệu khác. Sau khi liên kết này được chọn, tài liệu nó trỏ tới sẽ được nạp và hiện lên màn hình máy tính.

- HTML là một chuẩn mở, ngoài các thẻ trong bộ chuẩn, HTML có thể được mở rộng bằng nhiều cách như: mở rộng các thẻ HTML, sử dụng Javascript, VBscript và các ngôn ngữ lập trình khác… - HTML không hẳn là một ngôn ngữ lập trình, bản chất của nó là ngôn ngữ trình bày. Phiên bản hiện nay là HTML 5.0 được hỗ trợ bởi các trình duyệt như Chrome, FireFox, IE (version 10 trở lên),… 1.2 Cấu trúc của ngôn ngữ HTML <html> <head> <!-- Các thẻ thành phần của head --> </head> <body> <!-- Các thẻ thành phần của body --> </body> </htm> Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 7 Bảng 1.1: Cấu trúc của trang HTML Mô tả cấu trúc tổng quát của một trang HTML: - Thẻ <html>…</html> chứa code của trang html. - Thẻ <body>…</body> nằm trong thẻ <html></html> chứa các thông tin hiển thị ở thanh điều hướng của trình duyệt Web và chứa các thông tin về trang Web. - Thẻ <body>…</body> nằm trong thẻ <html></html> và nằm sau thẻ <head></head> chứa nội dung của trang Web.3 Cấu trúc thành phần của HTML Các thành phần của HTML đều có thẻ bắt đầu và thẻ kết thúc.

Với cấu trúc chung: <tên_thẻ thuộc_tính=“giá_trị” …> nội dung </tên_thẻ> Trong đó: - <tên_thẻ>: thẻ bắt đầu. - Thuộc_tính: các thuộc tính của thẻ. - Nội dung: là nội dung của thành phần HTML. - </tên_thẻ>: thẻ kết thúc.

Ngoài ra có một số thẻ không cần thẻ kết thúc nếu kết quả rõ ràng như thẻ <br>.3 TỔNG QUAN VỀ JAVASCRIPT 1.1 Giới thiệu về Javascript - Javascript được phát triển bởi Brandan Eich tại hãng Netscape ra đời với tên gọi Mocha, sau đó Netscape đổi tên thành LiveScript và cuối cùng là Javascript. Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 8 - Việc đặt tên Javascript sẽ khiến nhiều người hiểu đây là ngôn ngữ giống với Java nhưng thực tế giữa Java và Javascript có rất ít các điểm chung. - Javascript là ngôn ngữ lập trình đa năng, được biết dưới dạng một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không được khai báo kiểu dữ liệu cụ thể, các biến giống nhau có thể được gán bởi các kiểu dữ liệu khác nhau.

Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhị phân để thực thi mà nó được thực thi trực tiếp thông qua trình duyệt. Đă năng nghĩa là ngôn ngữ này thích hợp với hầu hết các thuật toán và các tác vụ, chúng ta hoàn toàn có thể định nghĩa được cấu trúc một đối tượng bằng Javascript.2 Cách sử dụng Javascript Có hai cách để nhúng mã Javascript vào một trang HTML là: - Viết đoạn mã Javascript trong cùng trang HTML: các dòng lệnh Javascript được đặt trong cặp thẻ <script></script>. Có thể viết nhiều đoạn mã lệnh Javascript trong cùng một trang HTML và các khối lệnh có thể đặt ở bất kỳ đâu thuận tiện cho việc kiểm soát và sửa đổi. Ví dụ: <HTML> <head> <script language = “Javascript”> Document.write(“Hello world!”); </script> </head> <body> <!-- nội dung trang html --> Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 9 </body> </HTML> - Dùng trình soạn thảo viết các đoạn mã lệnh Javascript và lưu lại với phần mở rộng là .js sau đó liên kết tới trang HTML.

Ví dụ: với file Javascript được soạn thảo có tên là fileJavascript.js <HTML> <head> <script language = “Javascript” src = “fileJavascript.js”> </script> </head> <body> <!-- nội dung trang html --> </body> </HTML> 1.4 TỔNG QUAN VỀ CSS 1.1 Giới thiệu về CSS - CSS (Cassading Style Sheets) được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML, XHTML và một số ngôn ngữ khác. - CSS là một dạng file text với thành phần mở rộng là .css, trong file này sẽ chứa những câu lệnh CSS, định dạng cho các thành phần HTML. - CSS được thiết kế chủ yếu để cho phép tách nội dung tài liệu (viết bằng HTML hoặc một ngôn ngữ đánh dấu tương tự) từ tài liệu trình bày, bao gồm các thành tố như hiển thị(layout), màu sắc(colors) và phông chữ(fonts). Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 10 - Các đặc điểm kỹ thuật của CSS được phát triển bởi Word Wide Web Consortium(W3C).2 Cú pháp CSS Cú pháp của CSS được chia làm 3 phần: thành phần lựa chọn (selector), phần thuộc tính (property) và phần giá trị (value).3: Cú pháp CSS - Một khai báo kiểu gồm thuộc tính và giá trị cách nhau bởi dấu “:”.

Ví dụ: color: blue - Nhiều khai báo kiểu cách nhau bởi dấu “;”. Ví dụ: color: blue; font-size: 12px; - Thành phần lựa chọn thường là một thẻ html được đặt tên theo tên thẻ html hoặc được đặt tên theo id riêng hay theo lớp.Thẻ chọn phân biệt với khai báo kiểu bằng cặp dấu “{}”. Ví dụ: p{ color: blue; font-size: 12px; } 1.3 Cách sử dụng CSS Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Trang 11 Có 3 cách để nhúng CSS vào trang HTML: - "Inline CSS": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style Ví dụ: <span style="font-weight:bold; text decoration:underline; color:#FF0000;">Đoạn text cần in đậm, gạch chân, màu đỏ</span> - "Internal CSS": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa <head> và </head>) Ví dụ: <style type="text/css"> body {font-family:verdana; color:#0000FF; } /* Kiểu chữ trong trang Web là "Verdana", màu chữ thông thường là màu xanh dương */ </style> - "External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau. Ví dụ: về nội dung tệp style.css body { font-family:verdana; color:#0000FF; Báo cáo luận văn tốt nghiệp GVHD: Th.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ