Xây dựng website tạo đề, ôn tập trắc nghiệm online

Mụctiêu của đề tài là cung cấp một công cụ đáng tin cậy và linh hoạt cho cá nhân, giáoviên và tổ chức trong việc tạo và chia sẻ các bài trắc nghiệm để hỗ trợ quá trình họctập và đánh giá

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌCNGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

Đà Nẵng, tháng 06/2023

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Đà Nẵng, ngày …tháng …năm 2023

Giáo viên hướng dẫn

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Đà Nẵng, ngày …tháng …năm 2023

Người phản biện

TÓM TẮT

Tên đề tài: Xây dựng website tạo đề, ôn tập trắc nghiệm online.

Sinh viên thực hiện: Nguyễn Thị Khánh Hạ

Mã sinh viên: 1911505310117 Lớp : 19T1

Nội dung tóm tắt

Đề tài "Xây dựng website tạo đề, ôn tập trắc nghiệm online" nhằm tạo ra một nềntảng hiệu quả và tiện lợi cho việc tạo và ôn tập các bài trắc nghiệm trực tuyến Mụctiêu của đề tài là cung cấp một công cụ đáng tin cậy và linh hoạt cho cá nhân, giáoviên và tổ chức trong việc tạo và chia sẻ các bài trắc nghiệm để hỗ trợ quá trình họctập và đánh giá kiến thức

Website sẽ được thiết kế để cung cấp các chức năng chính như tạo và quản lý bàitrắc nghiệm Người dùng có thể dễ dàng tạo ra các bài trắc nghiệm với câu hỏi đa lựachọn, thiết lập thời gian giới hạn và điểm số Ngoài ra, website cung cấp chức nănglàm bài trắc nghiệm và chấm điểm tự động Người dùng có thể làm các bài trắcnghiệm và nhận kết quả ngay lập tức sau khi hoàn thành

Đề tài này sẽ góp phần cải thiện chất lượng giáo dục, đáp ứng nhu cầu ôn tập vànắm vững kiến thức của học sinh, sinh viên để chuẩn bị cho các kỳ kiểm tra, kì thi Nócũng hỗ trợ giáo viên và các tổ chức khác trong việc tạo ra các bài trắc nghiệm linhhoạt với các tuỳ chọn đa dạng, dễ dàng chia sẻ với học sinh và người học

Tên đề tài: Xây dựng website tạo đề, ôn tập trắc nghiệm online

Thời gian thực hiện: Từ ngày: 26/12/2022 đến ngày: 11/06/2023

5 Mục tiêu

Mục tiêu chính của việc xây dựng hệ thống website tạo đề, ôn tập trắc nghiệmnhằm tạo ra một nền tảng hiệu quả và tiện lợi cho việc tạo và ôn tập các bài trắcnghiệm trực tuyến Cụ thể, các mục tiêu có thể bao gồm:

- Tăng hiệu quả ôn tập: Hệ thống sẽ cung cấp một môi trường tương tác và linh

hoạt để người dùng ôn tập các bài trắc nghiệm Người dùng có thể tạo ra các bàitrắc nghiệm theo nhu cầu của mình, thiết lập thời gian giới hạn và điểm số để thử thách bản thân Quá trình ôn tập sẽ trở nên hiệu quả hơn và giúp người dùngnắm vững kiến thức

- Tiết kiệm thời gian: Hệ thống sẽ giúp người dùng tiết kiệm thời gian trong

việc tạo và chấm điểm các bài trắc nghiệm Thay vì phải làm thủ công, người dùng có thể sử dụng công cụ tự động để tạo và chấm điểm các bài trắc nghiệm một cách nhanh chóng và hiệu quả

- Tăng tính tương tác: Hệ thống cho phép người dùng tương tác trực tiếp với

bài trắc nghiệm thông qua giao diện trực quan và dễ sử dụng Người dùng có thể làm bài trắc nghiệm, nhận kết quả tức thì và xem lại lịch sử ôn tập của mình Đồng thời, người dùng có thể chia sẻ bài trắc nghiệm với người khác, tạo

ra một môi trường học tập cộng đồng

6 Nội dung chính

Quả trình xây dựng website tạo đề, ôn tập trắc nghiệm online gồm:

- Khảo sát nghiệp vụ thực tế

- Phân tích thiết kế các chức năng của hệ thống

- Thiết kế giao diện cho các chức năng

- Phân tích thiết kế cơ sở dữ liệu

- Xây dựng hệ thống website

- Kiểm thử

- Hoàn thành bài báo cáo

7 Kết quả dự kiến đạt được

- Website tạo đề, ôn tập trắc nghiệm online đáp ứng tốt các mục tiêu đề ra trên, giao diện thân thiện

- File báo cáo hoàn chỉnh

8 Tiến độ thực hiện

TT Thời gian Nội dung công việc Kết quả dự kiến đạt được

1 Tuần 1, 2 Chọn đề tài và xây dựng đề

3 Tuần 4 Phân tích thiết kế hệ thống Sơ đồ Usecase, ERD, Activity

4 Tuần 5 Xây dựng cơ sở dữ liệu Database

5 Tuần 6 Thiết kế giao diện phía người

6 Tuần 7 Thiết kế giao diện phía quản trị

7 Tuần 8, 9 Xây dựng giao diện website từ

Hoàn thành các chức năng vớiđầy đủ yêu cầu

9 Tuần 14 Kiểm thử Chạy demo và kiểm tra các chức

năng

10 Tuần 15 Hoàn thiện báo cáo Hoàn thiện báo cáo đồ án tốt

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: TS Phạm Tuấn

Sinh viên thực hiện: Nguyễn Thị Khánh Hạ Mã SV: 1911505310117

1 Tên đề tài:

Xây dựng website tạo đề, ôn tập trắc nghiệm online

2 Các số liệu, tài liệu ban đầu:

- Dựa trên nhu cầu ôn tập, luyện đề của học sinh và sinh viên Các số liệu banđầu bao gồm thông tin về các môn học, chương trình học, các dạng bài tập vàkiến thức cần ôn tập trong từng môn học

- Nhu cầu của người dùng trong việc tạo và chia sẻ các đề trắc nghiệm

- Các tài liệu tham khảo được lấy từ nhiều nguồn, đa phần là các bài viết và khoáhọc lập trình trên mạng

3 Nội dung chính của đồ án:

Mở đầu

1 Mục tiêu đề tài

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

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

4 Giải pháp công nghệ

5 Cấu trúc đồ án

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

1 Các công nghệ sử dụng

Chương 2: Phân tích thiết kế

1 Khảo sát yêu cầu

2 Phân tích thiết kế hệ thống

Chương 3: Xây dựng chương trình

1 Phân tích kiến trúc hệ thống

2 Lựa chọn công nghệ phù hợp để phát triển hệ thống

3 Triển khai hệ thống trên website

4 Kiểm thử các chức năng của hệ thống

5 Đánh giá hiệu quả của hệ thống

Kết luận

1 Đánh giá chung

2 Hướng phát triển

4 Các sản phẩm dự kiến:

- Cơ sở dữ liệu dựa trên nghiệp vụ thực tế của hệ thống

- Website đáp ứng tốt các mục tiêu đề ra trên, giao diện thân thiện

- File báo cáo hoàn chỉnh

LỜI NÓI ĐẦU

Cùng với sự phổ biến của công nghệ thông tin và truy cập Internet, việc tạo ra mộtcông cụ hỗ trợ ôn tập trực tuyến đã trở thành một yêu cầu cấp thiết Đối với giáo viên,

nó mang lại sự thuận tiện trong việc tạo ra các bài kiểm tra và theo dõi tiến trình họctập của học sinh Đồng thời, đối với học sinh và những người muốn tự ôn tập, websitenày sẽ cung cấp một phương pháp học tập linh hoạt và tương tác, giúp họ nắm bắt kiếnthức một cách hiệu quả

Đề tài này hướng đến việc xây dựng một nền tảng trực tuyến đơn giản, dễ sử dụng

và đáng tin cậy, cho phép người dùng tạo và chia sẻ các bài trắc nghiệm, làm bài vànhận phản hồi tức thì Bằng cách tận dụng tính năng chấm điểm tự động và cung cấpphản hồi chi tiết, website sẽ giúp người dùng đánh giá kiến thức của mình và cải thiện

kỹ năng trong quá trình học tập

Cấu trúc đồ án:

MỞ ĐẦU

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

i

Đặc biệt với sự hướng dẫn tận tình của thầy Phạm Tuấn, em đã hoàn thành đồ ántốt nghiệp này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thốngnhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thôngcảm và góp ý của quý Thầy cô.

Em xin chân thành cảm ơn!

ii

CAM ĐOAN

Em xin cam đoan

- Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫncủa thầy Phạm Tuấn

- Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên

công trình, thời gian, địa điểm công bố

- Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, chúng

em xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Nguyễn Thị Khánh Hạ

iii

MỤC LỤC

DANH MỤC BẢNG BIỂU ix

DANH MỤC HÌNH VẼ x

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH xii

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

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

a Đối tượng nghiên cứu 1

b Phạm vi nghiên cứu 2

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

4 Giải pháp công nghệ 3

5 Cấu trúc đồ án 3

Chương 1 CƠ SỞ LÝ THUYẾT 4

1.1 Hệ quản trị cơ sở dữ liệu 4

1.1.1 MySQL là gì 4

1.1.2 Đôi nét về lịch sử 4

1.1.3 Ưu điểm MySQL 4

1.2 Ngôn ngữ lập trình PHP 5

1.2.2 PHP là gì 5

1.2.3 Đôi nét về lịch sử 5

1.3 Laravel Framework 6

1.3.2 Laravel là gì 6

1.3.3 Đôi nét về lịch sử 7

1.4 HTML 8

1.4.2 HTML là gì? 8

iv

1.4.3 Lịch sử HTML 9

1.4.4 HTML hoạt động như thế nào? 9

1.4.5 Ưu điểm và nhược điểm của HTML là gì? 10

1.4.5.1 Ưu điểm của HTML là gì? 10

1.4.5.2 Nhược điểm của HTML là gì? 10

1.4.6 HTML có phải ngôn ngữ lập trình không? 10

1.4.7 Vai trò của HTML trong lập trình Web 10

1.4.8 Các đặc điểm của HTML 11

1.4.9 Các thuật ngữ HTML phổ biến 11

1.4.10 Bố cục HTML là gì? 12

1.4.11 Các tag thông dụng nhất của HTML 13

1.4.11.2 Block-level tags 13

1.4.11.3 Inline tags 14

1.4.12 Sự khác biệt giữa HTML và HTML5 14

1.5 CSS 15

1.5.2 CSS là gì? 15

1.5.3 Tại sao sử dụng CSS? 16

1.5.3.1 Giải quyết một vấn đề lớn 16

1.5.3.2 Tiết kiệm rất nhiều thời gian 16

1.5.3.3 Ưu điểm của việc thiết kế website bằng JavaScript 17

1.5.3.4 Nhược điểm việc thiết kế website bằng JavaScript 17

1.6 Bootstrap 17

1.6.2 Bootstrap là gì 17

1.6.3 Đôi nét về lịch sử 18

1.7 AJAX 18

v

1.7.2 AJAX là gì? 19

1.7.3 Ví dụ thực tế của AJAX 19

1.7.3.1 AJAX trước đây 19

1.7.3.2 AJAX ngày nay 20

1.7.4 AJAX hoạt động như thế nào? 21

1.8 Mô hình MVC 22

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 24

2.1 Khảo sát yêu cầu 24

2.1.1 Liệt kê người dùng và yêu cầu 25

2.2 Phân tích thiết kế hệ thống 27

2.2.1 Liệt kê Actor và Usecase 27

2.2.1.1 Khách vãng lai 27

2.2.1.2 Khách thành viên 27

2.2.1.3 Quản trị viên 27

2.2.2 Sơ đồ usecase 28

2.2.3 Sơ đồ hoạt động 29

2.2.3.1 Usecase Tạo đề 29

2.2.3.2 Usecase Làm đề 30

2.2.3.3 Usecase Gửi góp ý 31

2.2.3.4 Usecase Kiểm đề 32

2.2.4 Thiết kế bảng 33

2.2.4.1 Bảng phanquyen 33

2.2.4.2 Bảng nguoidung 33

2.2.4.3 Bảng monhoc 33

2.2.4.4 Bảng lop 33

vi

2.2.4.5 Bảng de 34

2.2.4.6 Bảng chitietde 34

2.2.4.7 Bảng dapan 35

2.2.4.8 Bảng luutru 35

2.2.4.9 Bảng ketqua 35

2.2.4.10 Bảng gopy 36

2.2.4.11 Bảng thongbao 36

2.2.5 Thiết kế ERD 37

2.2.6 Diagram trong MySQL 38

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 39

3.1 Công cụ xây dựng chương trình 39

3.2 Giao diện chương trình 39

3.2.1 Giao diện trang chủ 39

3.2.2 Giao diện trang đăng nhập 40

3.2.3 Giao diện trang đăng ký 41

3.2.4 Giao diện trang tìm kiếm 41

3.2.5 Giao diện trang thông tin người dùng 42

3.2.6 Giao diện trang tạo đề 42

3.2.7 Giao diện trang lưu trữ 43

3.2.8 Giao diện trang thông tin đề trắc nghiệm 44

3.2.9 Giao diện trang làm đề 46

3.2.10 Giao diện trang kết quả 47

3.2.11 Giao diện trang thông báo 47

3.2.12 Giao diện trang chủ Admin 48

3.2.13 Giao diện trang thông báo Admin 48

vii

3.2.14 Giao diện trang chi tiết thông báo Admin 49

3.2.15 Giao diện trang thống kê Admin 50

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 51

3.3 Kết luận 51

3.4 Hướng phát triển 51

TÀI LIỆU THAM KHẢO 52

viii

DANH MỤC BẢNG BIỂU

Bảng 2.1: Mô tả bảng phanquyen 33

Bảng 2.2: Mô tả bảng nguoidung 33

Bảng 2.3: Mô tả bảng monhoc 33

Bảng 2.4: Mô tả bảng lop 33

Bảng 2.5: Mô tả bảng de 34

Bảng 2.6: Mô tả bảng chitietde 35

Bảng 2.7: Mô tả bảng dapan 35

Bảng 2.8: Mô tả bảng luutru 35

Bảng 2.9: Mô tả bảng ketqua 35

Bảng 2.10: Mô tả bảng gopy 36

Bảng 2.11: Mô tả bảng thongbao 36

ix

DANH MỤC HÌNH VẼ

Hình 1.1: Logo MySQL 4

Hình 1.2: Logo PHP 5

Hình 1.3: Logo Laravel 6

Hình 1.4: HTML 8

Hình 1.5: Minh hoạ bố cục HTML 12

Hình 1.6: 2 loại tag được dùng phổ biến trong HTML 13

Hình 1.7: Minh hoạ tag a 14

Hình 1.8: CSS 15

Hình 1.9: Logo Bootstrap 17

Hình 1.10: AJAX 18

Hình 1.11: Ajax được ứng dụng phổ biến trong hầu hết các website hiện nay, cụ thể nhất là công cụ tìm kiếm Google 20

Hình 1.12: Sơ đồ miêu tả hoạt động của AJAX 21

Hình 1.13: Sơ sánh mô hình thông thường và mô hình AJAX 22

Hình 1.14: Mô hình MVC 22

Hình 2.1: Hoạt động nghiệp vụ thực tế 25

Hình 2.2: Sơ đồ Usecase 28

Hình 2.3: Sơ đồ hoạt động Usecase Tạo đề 29

Hình 2.4: Sơ đồ hoạt động Usecase Làm đề 30

Hình 2.5: Sơ đồ hoạt động Usecase Gửi góp ý 31

Hình 2.6: Sơ đồ hoạt động Usecase Kiểm đề 32

Hình 2.7: Sơ đồ ERD 37

Hình 2.8: Diagram trong MySQL 38

Hình 3.1: Giao diện trang chủ 39

Hình 3.2: Giao diện trang chủ (2) 40

Hình 3.3: Giao diện trang chủ (3) 40

Hình 3.4: Giao diện trang đăng nhập 41

Hình 3.5: Giao diện trang đăng ký 41

Hình 3.6: Giao diện trang tìm kiếm 42

x

Hình 3.7: Giao diện trang thông tin người dùng 42Hình 3.8: Giao diện trang tạo đề (1) 43Hình 3.9: Giao diện trang tạo đề (2) 43Hình 3.10: Giao diện trang lưu trữ (1) 44Hình 3.11: Giao diện trang lưu trữ (2) 44Hình 3.12: Giao diện trang thông tin đề trắc nghiệm (1) 45Hình 3.13: Giao diện trang thông tin đề trắc nghiệm (2) 45Hình 3.14: Giao diện trang thông tin đề trắc nghiệm (3) 46Hình 3.15: Giao diện trang làm đề (1) 46Hình 3.16: Giao diện trang làm đề (2) 47Hình 3.17: Giao diện trang kết quả 47Hình 3.18: Giao diện trang thông báo 48Hình 3.19: Giao diện trang chủ của admin 48Hình 3.20: Giao diện trang thông báo của admin 49Hình 3.21: Giao diện trang chi tiết thông báo Admin 49Hình 3.22: Giao diện trang thống kê 50

xi

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

Stt Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

1 HTML Hyper Text Markup

Language

Ngôn ngữ đánh dấu siêu văn bản

2 CSS Cascading Style Sheets

3 SQL Structured Query Language Ngôn ngữ truy vấn cấu trúc dữ

liệu

4 PHP Personal Home Page

5 MVC Model-View-Controller Dữ liệu – Giao diện – Bộ điều

khiển

xii

Website tạo đề, ôn tập trắc nghiệm online

MỞ ĐẦU

1 Mục tiêu đề tài

Trong thời đại công nghệ số ngày nay, việc sử dụng công cụ trực tuyến để ôn tậpkiến thức và kiểm tra năng lực đã trở thành xu hướng phổ biến Đề tài "Xây dựngwebsite tạo đề, ôn tập trắc nghiệm online" nhằm mục đích tạo ra một nền tảng đáng tincậy và tiện lợi để các cá nhân, giáo viên hoặc tổ chức có thể tạo ra các bài trắc nghiệm

và cung cấp cho người học

Đề tài sẽ có những chức năng chính sau:

- Cung cấp một giao diện trực quan và dễ sử dụng

- Cho phép người dùng tạo ra các bài trắc nghiệm linh hoạt với các câu hỏi đalựa chọn Người dùng có thể tùy chỉnh các tham số cho từng bài trắc nghiệmnhư thời gian giới hạn, điểm số,

- Cung cấp chức năng làm đề trắc nghiệm online, tự động chấm điểm và cungcấp phản hồi tức thì sau khi hoàn thành bài kiểm tra

Đề tài này đặt ra mục tiêu xây dựng một website tạo đề, ôn tập trắc nghiệm onlinenhằm tạo ra một công cụ hữu ích trong lĩnh vực giáo dục Sự tiện lợi, linh hoạt vàtương tác của nền tảng này sẽ mang lại những trải nghiệm học tập tốt hơn cho ngườidùng, góp phần nâng cao chất lượng giáo dục và phát triển khả năng ôn tập của mọingười

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

a Đối tượng nghiên cứu

Ứng dụng sẽ phục vụ tác nghiệp cho các tác nhân có liên quan:

- Người làm đề: học sinh và sinh viên Đây là nhóm người chính sử dụngwebsite để ôn tập kiến thức và làm bài trắc nghiệm online Họ có nhu cầucải thiện kỹ năng và kiến thức trong các môn học khác nhau Việc sử dụngwebsite giúp họ tự ôn tập, kiểm tra kiến thức và nâng cao hiệu suất học tập

- Người tạo đề: đối tượng chính là giáo viên, cá nhân hoặc tổ chức Đây lànhóm người sử dụng website để tạo và quản lý các bài trắc nghiệm, đề thicho học sinh Giáo viên có thể tạo các câu hỏi, đáp án và thiết lập thời gian

Website tạo đề, ôn tập trắc nghiệm online

làm bài cho học sinh Việc sử dụng website giúp giáo viên tiết kiệm thờigian và công sức trong việc chuẩn bị và chấm điểm các bài kiểm tra, đồngthời giúp theo dõi tiến độ và kết quả học tập của học sinh một cách tiện lợi

- Quản trị viên: người quản lý trang web Đây là nhóm người đảm nhận vaitrò quản lý và duy trì hoạt động của trang web Quản trị viên đảm bảo rằngtrang web hoạt động ổn định, đáp ứng được nhu cầu của người dùng vàđảm bảo tính bảo mật của thông tin cá nhân và dữ liệu người dùng Họcũng có nhiệm vụ quản lý thông tin người dùng, hỗ trợ kỹ thuật và đảmbảo rằng các đề thi, bài trắc nghiệm được tạo ra tuân thủ các tiêu chuẩn vàyêu cầu quy định

b Phạm vi nghiên cứu

Phạm vi nghiên cứu của đề tài bao gồm:

- Nghiên cứu về việc phát triển giao diện và trải nghiệm người dùng củawebsite Điều này bao gồm thiết kế và triển khai giao diện trực quan, dễ sửdụng và thân thiện với người dùng, cung cấp các tính năng ôn tập kiếnthức, tạo đề trắc nghiệm và quản lý kết quả học tập

- Nghiên cứu về quy trình ôn tập trắc nghiệm, bao gồm việc cung cấp tài liệu

ôn tập, bài tập và kiểm tra trực tuyến để giúp người dùng nắm vững kiếnthức và chuẩn bị tốt cho các kỳ thi và bài kiểm tra

- Nghiên cứu về quy trình tạo và quản lý đề thi, bao gồm việc tạo câu hỏi,đáp án và thiết lập thời gian làm bài

Quy mô hiện có sẽ áp dụng cho toàn bộ học sinh, sinh viên, giáo viên và bất cứ cánhân hoặc tổ chức có nhu cầu học hỏi và ôn tập kiến thức

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

Để đạt được mục tiêu của đề tài sẽ sử dụng các phương pháp nghiên cứu như sau:

- Thu thập yêu cầu: Thu thập các yêu cầu từ người dùng về việc tạo và ôn tập cácbài trắc nghiệm trực tuyến Xác định các chức năng cần có, giao diện người dùng,yêu cầu về tương tác và tính tiện lợi

Website tạo đề, ôn tập trắc nghiệm online

- Phân tích yêu cầu: Phân tích yêu cầu thu thập được để hiểu rõ mục tiêu và phạm vicủa đề tài Xác định các yêu cầu ưu tiên, ràng buộc kỹ thuật và nghiệp vụ để đảmbảo khả thi của hệ thống

- Tìm hiểu công nghệ và công cụ: Nghiên cứu các công nghệ và công cụ phù hợp đểxây dựng website Tìm hiểu về ngôn ngữ lập trình, framework, cơ sở dữ liệu vàcác công nghệ liên quan khác để lựa chọn phù hợp cho đề tài

- Thiết kế kiến trúc hệ thống: Thiết kế kiến trúc tổng thể của hệ thống dựa trên yêucầu và công nghệ đã tìm hiểu Xác định cấu trúc dữ liệu, giao diện người dùng vàluồng hoạt động của hệ thống

tả một số công nghệ mới hỗ trợ phát triển ứng dụng

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống Trìnhbày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữ liệu…

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH

Chương này liệt kê công cụ xây dựng chương trình và các giao diện của website

Website tạo đề, ôn tập trắc nghiệm online

1.1.2 Đôi nét về lịch sử

Dự án của MySQL được bắt đầu vào năm 1979, khi nhà phát minh của MySQL,Michael Widenius phát triển một công cụ cơ sở dữ liệu nội bộ có tên UNIREG đểquản lý cơ sở dữ liệu Sau đó, UNIREG đã được viết lại bằng nhiều ngôn ngữ khácnhau và được mở rộng để xử lý các cơ sở dữ liệu lớn Sau một thời gian MichaelWidenius đã liên lạc với David Hughes, tác giả của mQuery, để xem liệu Hughes cóquan tâm đến việc kết nối mQuery với trình xử lý B + ISAM của UNIREG để cungcấp lập chỉ mục cho mQuery hay không Đó là cách MySQL ra đời

1.1.3 Ưu điểm MySQL

Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và hoạt độngtrên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh

Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trênInternet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp cao

Website tạo đề, ôn tập trắc nghiệm online

Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một hệquản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp

Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn thếnữa nó có thể được mở rộng nếu cần thiết

Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc rấthiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi

Website tạo đề, ôn tập trắc nghiệm online

PHP4: Được công bố năm 2000 tốc độ xử lý được cải thiện, PHP 4.0 đem đến cáctính năng chủ yếu khác gồm có hỗ trợ nhiều máy chủ web, hỗ trợ session HTTP, tạooutput buffering, nhiều cách xử lý dữ liệu input bảo mật hơn và cung cấp một vài cáccấu trúc ngôn ngữ mới Với PHP 4, số nhà phát triển dùng PHP lên đến hàng trămnghìn và hàng triệu trang web dùng PHP, chiếm 20% số tên miền trên mạng Internet.Team phát triển PHP lên tới con số hàng nghìn người và nhiều người khác tham giavào các dự án có liên quan đến PHP như PEAR, PECL và tài liệu cho PHP

PHP5: Bản chính thức ra mắt ngày 13 tháng 7 năm 2004 sau một chuỗi các bảnkiểm thử bao gồm Beta 4, RC 1, RC2, RC3 Mặc dù đây là phiên bản sản xuất đầu tiênnhưng PHP 5.0 vẫn còn một số lỗi, đáng kể là lỗi xác thực HTTP

Laravel hiện được phát hành theo giấy phép MIT, với source code được lưu trữ tạiGithub

Mặc dù ra đời muộn hơn so với các đối thủ, tuy nhiên Laravel đã thật sự tạo thànhmột làn sóng lớn, được đánh giá tốt và sử dụng rộng rãi nhất hiện nay Biểu đồ dướiđây cho thấy sự tăng trưởng về số lượng sao trên Github của Laravel so với cácFramework khác

Website tạo đề, ôn tập trắc nghiệm online

1.3.3 Đôi nét về lịch sử

Bản Laravel beta đầu tiên được phát hành vào ngày 9/6/2011, tiếp đó là Laravel 1phát hành trong cùng tháng Laravel 1 bao gồm các tính năng như xác thực, bản địahóa, model, view, session, định tuyến và các cơ cấu khác, nhưng vẫn còn thiếucontroller, điều này làm nó chưa thật sự là một MVC framework đúng nghĩa

Laravel 2 được phát hành vào tháng 9 năm 2011, mang đến nhiều cải tiến từ tácgiả và cộng đồng Tính năng đáng kể bao gồm hỗ trợ controller, điều này thực sự biếnLaravel 2 thành một MVC framework hoàn chỉnh, hỗ trợ Inversion of Control (IoC),

hệ thống template Blade Bên cạnh đó, có một nhược điểm là hỗ trợ cho các gói củanhà phát triển bên thứ 3 bị gỡ bỏ

Laravel 3 được phát hành vào tháng 2 năm 2012, với một tấn tính năng mới baogồm giao diện dòng lệnh (CLI) tên “Artisan”, hỗ trợ nhiều hơn cho hệ thống quản trị

cơ sở dữ liệu, chức năng ánh xạ cơ sở dữ liệu Migration, hỗ trợ “bắt sự kiện” trongứng dụng, và hệ thống quản lý gói gọi là “Bundles” Lượng người dùng và sự phổbiến tăng trưởng mạnh kể từ phiên bản Laravel 3

Laravel 4, tên mã “Illuminate”, được phát hành vào tháng 5 năm 2013 Lần nàythực sự là sự lột xác của Laravel framework, di chuyển và tái cấu trúc các gói hỗ trợvào một tập được phân phối thông qua Composer, một chương trình quản lý gói thưviện phụ thuộc độc lập của PHP Bố trí mới như vậy giúp khả năng mở rộng củaLaravel 4 tốt hơn nhiều so với các phiên bản trước Ra mắt lịch phát hành chính thứcmỗi sáu tháng một phiên bản nâng cấp nhỏ các tính năng khác trong Laravel 4 baogồm tạo và thêm dữ liệu mẫu (database seeding), hỗ trợ hàng đợi, các kiểu gửi mail, và

hỗ trợ “xóa mềm” (soft-delete: record bị lọc khỏi các truy vấn từ Eloquent mà khôngthực sự xóa hẳn khỏi DB)

Laravel 5 được phát hành trong tháng 2 năm 2015, như một kết quả thay đổi đáng

kể cho việc kết thúc vòng đời nâng cấp Laravel lên 4.3 Bên cạnh một loạt tính năngmới và các cải tiến như hiện tại, Laravel 5 cũng giới thiệu cấu trúc cây thư mục nội bộcho phát triển ứng dụng mới Những tính năng mới của Laravel 5 bao gồm hỗ trợ lậplịch định kỳ thực hiện nhiệm vụ thông qua một gói tên là “Scheduler”, một lớp trừutượng gọi là “Flysystem” cho phép điều khiển việc lưu trữ từ xa đơn giản như lưu trữtrên máy local – dễ thấy nhất là mặc định hỗ trợ dịch vụ Amazone S3, cải tiến quản lý

Website tạo đề, ôn tập trắc nghiệm online

assets thông qua “Elixir”, cũng như đơn giản hóa quản lý xác thực với các dịch vụ bênngoài bằng gói “Socialite”

Laravel 5.1 phát hành vào tháng 6 năm 2015, là bản phát hành đầu tiên nhận được

hỗ trợ dài hạn (LTS) với một kế hoạch fix bug lên tới 2 năm vào hỗ trợ vá lỗi bảo mậtlên tới 3 năm Các bản phát hành LTS của Laravel được lên kế hoạch theo mỗi 2 năm.Laravel 5.3, được phát hành vào ngày 23 tháng 8 năm 2016 Các tính năng mớitrong 5.3 tập trung vào việc cải thiện tốc độ phát triển bằng cách bổ sung thêm các cảitiến cho các tác vụ phổ biến

Laravel 5.4 Phiên bản này có nhiều tính năng mới, như Laravel Dusk, LaravelMix, Blade Components và Slots, Markdown Emails, Automatic Facades, RouteImprovements, Higher Order Messaging cho Collections, và nhiều thứ khác

Laravel 5.5, phát hành vào ngày 30 tháng 8 năm 2017 là phiên bản LTS thứ 2Laravel 5.6, phát hành vào ngày 7 tháng 2 năm 2018

Laravel 5.7, phát hành vào ngày 4 tháng 9 năm 2018 với những cập nhật

Laravel 6, phát hành vào ngày 3 tháng 9 năm 2019

Laravel 7, ra mắt ngày 3 tháng 3 năm 2020 với nhiều tính năng cũng như cải thiệntốc độ

Website tạo đề, ôn tập trắc nghiệm online

không thể thực hiện các chức năng “động” Hiểu một cách đơn giản hơn, cũng tương

tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trangweb HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắccho thế giới mạng

1.4.3 Lịch sử HTML

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiêncứu CERN ở Thụy Sĩ Hiện nay, HTML đã trở thành một chuẩn Internet được tổ chứcW3C (World Wide Web Consortium) vận hành và phát triển Bạn có thể tự tìm kiếmtình trạng mới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3C

Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML Phiên bảnHTML 4.01 được xuất bản năm 1999 Sau đó, các nhà phát triển đã thay thế HTMLbằng XHTML vào năm 2000

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag đượcthêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như:

<article>, <header>, <footer>,…)

Theo Mozilla Developer Network thì HTML Element Reference hiện nay cókhoảng hơn 140 tag Tuy nhiên một vài tag trong số đó đã bị tạm ngưng (do khôngđược hỗ trợ bởi các trình duyệt hiện hành)

1.4.4 HTML hoạt động như thế nào?

HTML document có đuôi file dạng html hoặc htm Bạn có thể xem chúng bằngcác trình duyệt web hiện hành như Google Chrome, Firefox, Safari,… Nhiệm vụ củatrình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dungvisual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Thông thường, một Website sẽ có nhiều HTML document (ví dụ: trang chủ, trangblog, trang liên hệ,…) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗi tàiliệu HTML bao gồm 1 bộ tag (hay còn gọi là element) Nó tạo ra một cấu trúc tương tựnhư cây thư mục với các heading, section, paragraph,… và một số khối nội dung khác.Hầu hết tất cả các HTML element đều có một tag mở và một tag đóng với cấu trúc

<tag></tag>

Website tạo đề, ôn tập trắc nghiệm online

1.4.5 Ưu điểm và nhược điểm của HTML là gì?

1.4.5.1 Ưu điểm của HTML là gì?

HTML được sử dụng để tạo bố cục, cấu trúc trang web Nó có một số ưu điểmsau:

- Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn

- Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

- Học HTML khá đơn giản

- Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao

- Sử dụng mã nguồn mở, hoàn toàn miễn phí

- HTML là chuẩn web được vận hành bởi W3C

- Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP,Node.js,…)

1.4.5.2 Nhược điểm của HTML là gì?

Bên cạnh ưu điểm, HTML cũng có các nhược điểm nhất định Cụ thể như sau:

- Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động,lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bênthứ 3 (ví dụ như: PHP)

- Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tốtrùng lặp như header, footer

- Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ,một số trình duyệt cũ không render được tag mới Do đó, dù trong HTMLdocument có sử dụng các tag này thì trình duyệt cũng không đọc được)

- Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

1.4.6 HTML có phải ngôn ngữ lập trình không?

HTML không phải là một ngôn ngữ lập trình Tuy nó cấu tạo nên những thànhphần của trang Website Nhưng lại không tạo được các chức năng “động” choWebsite

Thao tác làm việc với HTML rất đơn giản Để thực hiện đánh dấu trang Web, bạnchỉ cần sử dụng cấu trúc Code (Attributes và Tags)

Website tạo đề, ôn tập trắc nghiệm online

1.4.7 Vai trò của HTML trong lập trình Web

HTML là một loại ngôn ngữ đánh dấu siêu văn bản Như tôi đã đề cập ở trên, nógiúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một

hệ thống hoàn chỉnh Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chiakhung sườn các thành phần trang Web Đồng thời, nó còn hỗ trợ khai báo các File kỹthuật số như nhạc, Video, hình ảnh,…

Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn

sẽ cần đến HTML Theo quan điểm của tôi, lập trình viên có thể lựa chọn ngôn ngữlập trình riêng cho Website tùy vào mục đích sử dụng Nhưng HTML thực chất chứanhững yếu tố cần thiết cho mọi thể loại Website Trang Web của bạn sẽ cần đến ngônngữ HTML để hiển thị nội dung cho người truy cập Điều này đúng dù trang của bạnxây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý

Một đặc điểm khá thú vị là HTML có thể liên kết đến các trang Web khác Nhờngôn ngữ đánh dấu này, bạn có thể thêm các Video, hình ảnh, âm thanh vào để cácWebsite hấp dẫn, đẹp mắt và dễ tương tác hơn

Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux,Windows, và Max vì nó là một nền tảng độc lập

1.4.9 Các thuật ngữ HTML phổ biến

Elements: Là các chỉ định xác định nội dung, cấu trúc của các đối tượng trong

một Website Tên Element được bao quang, xác định bằng dấu ngoặc < > Những yếu

tố được sử dụng phổ biến là đoạn văn ( <p>), các cấp độ tiêu đề (từ <h1> đến <h6>),danh sách tiếp tục bao gồm <a>, <div>, <span>, <strong>, và <em>,…

Website tạo đề, ôn tập trắc nghiệm online

Tags: Một Element được bao quanh bởi các dấu ngoặc < > sẽ tạo ra các thẻ Ví dụ

thẻ mở là dấu hiệu cho bạn biết sự bắt đầu của một Element (ví dụ: <div>) Thẻ đóng

sẽ đánh dấu vào cuối của một Element, có hình thức là dấu ngoặc nhỏ + dấu chéo +dấu ngoặc lớn (ví dụ: </div>) Ở giữa thẻ mở và thẻ đóng là nội dung của Element

Attributes: Là thuộc tính sử dụng để cung cấp thông tin bổ sung về một Element.

Các Attributes bao gồm tên và giá trị, được xác định sau tên của một thành phần vàtrong thẻ mở Attributes có định dạng như sau: tên thuộc tính + dấu bằng + giá trịthuộc tính được trích dẫn Ví dụ Element <a> gồm một Attribute href: <a href=”http://shayhowe.com/”>Shay Howe</a> Một số thuộc tính mà tôi thường dùng là AttributeClass, ID, SRC, thuộc tính href,…

1.4.10 Bố cục HTML là gì?

HTML có rất nhiều tag khác nhau Mỗi thẻ sẽ có những tác dụng nhất định, giúpxây dựng nên một cấu trúc hoàn chỉnh cho Website

Hình 1.4.10.1.1.1: Minh hoạ bố cục HTMLTrong đó:

- <!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị

Website tạo đề, ôn tập trắc nghiệm online

- <html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụđóng gói tất cả nội dung của trang HTML

- <head> và </head>: khai báo các thông tin meta của trang web như: tiêu đềtrang, charset

- <title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báotiêu đề của trang

- <body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiểnthị trên trang

- <h1></h1>, <h2></h2>: định dạng dữ liệu dạng heading Thông thường có

6 cấp độ heading trong HTML, trải dài từ <h1> tới <h6> Trong đó, <h1>

là cấp độ heading cao nhất và <h6> là cấp độ heading thấp nhất

- <p> và </p>: cặp thẻ chứa các đoạn văn bản của trang web

1.4.11 Các tag thông dụng nhất của HTML

Tag được sử dụng chủ yếu là block-level tags và inline tags

Hình 1.4.11.1.1.1: 2 loại tag được dùng phổ biến trong HTML

1.4.11.2 Block-level tags

Đây là loại tag cấp cao, sẽ chiếm toàn bộ không gian của trang web và luôn bắtđầu dòng mới của trang 3 block-level tags mà tất cả các trang HTML đầu cần có đó

Website tạo đề, ôn tập trắc nghiệm online

là: <html></html>, <head></head> và <body></body> Ý nghĩa và chức năng củanhững tag này đã được đề cập ở trên nên trong phần này chúng tôi sẽ không nhắc lạinữa

1.4.11.3 Inline tags

Loại tag này chỉ chiếm một phần nhỏ trong không gian Website và cũng khôngbắt đầu dòng mới của trang Inline tags thường được dùng để định dạng, tạo bố cụccho nội dung bên trong của block-level tags

HTML có nhiều dạng inline tags, ví dụ như: cặp tag <strong></strong> dùng đểđịnh dạng chữ in đậm, còn cặp tag <em></em> dùng để định dạng chữ in nghiêng.Nếu muốn gắn hyperlinks vào trang, bạn có thể sử dụng cặp tag <a></a> vớiattributes href để xác định đường link cụ thể Đoạn code lúc này có dạng:

Hình 1.4.11.3.1.1: Minh hoạ tag a

1.4.12 Sự khác biệt giữa HTML và HTML5

HTML5 (hay cũng được gọi chung là HTML) được phát hành vào năm 1999.Trong khi đó, phiên bản nâng cấp mới nhất của HTML là HTML5 được phát hành vàonăm 2014 So với HTML, HTML5 đã được bổ sung thêm rất nhiều tính năng quantrọng Cụ thể, một số tính năng mới của HTML5 có thể kể đến như:

- Khả năng hỗ trợ video và audio: Thay vì phải sử dụng Flash Player để phátvideo/audio thì với HTML5, lập trình viên có thể nhúng trực tiếp filevideo/audio vào trang web bằng cặp tag <audio></audio> hoặc <video></video>

- Hỗ trợ scalable vector graphic (SVG) và MathML cho các công thức toánhọc hoặc phương trình hóa học

- Có thêm nhiều cải thiện về mặt ngôn ngữ Chứa nhiều semantic tag giúpngười dùng hiểu được nội dung chính của Website là gì (ví dụ như:

<article></article>, <section></section>, <aside></aside>,

<header></header>, <footer></footer>)