Bài Báo Cáo Thiết Kế Website

TRƯỜNG ĐẠI HỌC TRÀ VINH
KHOA KỸ THUẬT VÀ CÔNG NGHỆ

BỘ MÔN CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN MÔN HỌC
THIẾT KẾ WEBSITE
THIẾT KẾ GIAO DIỆN WEBSITE
TRANG THÔNG TIN ĐIỆN TỬ
ĐOÀN KHOA KỸ THUẬT VÀ CÔNG NGHỆ
Giáo viên hướng dẫn: Sinh viên thực hiện:
Nguyễn Ngọc Đan Thanh Mã số sinh viên: 110122249
Họ tên: Lân Tinh Tú
Lớp: DA22TTD
Trà Vinh, tháng 4 năm 2024

TRƯỜNG ĐẠI HỌC TRÀ VINH
KHOA KỸ THUẬT VÀ CÔNG NGHỆ
BỘ MÔN CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN MÔN HỌC
THIẾT KẾ WEBSITE
THIẾT KẾ GIAO DIỆN WEBSITE
TRANG THÔNG TIN ĐIỆN TỬ
ĐOÀN KHOA KỸ THUẬT VÀ CÔNG NGHỆ
Giáo viên hướng dẫn: Sinh viên thực hiện:
Nguyễn Ngọc Đan Thanh Mã số sinh viên: 110122249
Họ tên: Lâm Tinh Tú
Lớp: DA22TTD
Trà Vinh, tháng 4 năm 2024

Đồ án môn học: Thiết kế web – Thiết kế giao diện website trang thông tin điện
tử Đoàn khoa Kỹ Thuật và Công Nghệ
MỤC LỤC
DANH MỤC HÌNH ẢNH........................................................................................iv
DANH MỤC BẢNG BIỂU.......................................................................................v
CHƯƠNG 1. TỔNG QUAN VỀ NỘI DUNG NGHIÊN CỨU..............................1
1.1. Quy trình phát triển website.............................................................................1
1.2. Ngôn ngữ HTML..............................................................................................2
1.2.1. HTML là gì?...............................................................................................2
1.2.2. Cấu trúc của HTML...................................................................................3
1.2.3. Một số lưu ý cơ bản của HTML.................................................................4
1.2.4. Các thẻ cơ bản của HTML.........................................................................6
1.2.5. Các thẻ định dạng thành phần web HTML................................................7
1.2.6. Các thẻ định dạng nội dung văn bản..........................................................8
1.2.7. Các thẻ định dạng bảng..............................................................................9
1.2.8. Các thẻ danh sách.....................................................................................10
1.2.9. Các thẻ đa phương tiện.............................................................................10
1.2.10. Các thẻ liên kết.......................................................................................10
1.2.11. Các thẻ thông dụng trong HTML...........................................................11
1.3. Bảng định kiểu CSS........................................................................................11
1.3.1. Ngôn ngữ CSS là gì?................................................................................11
1.3.2. Cấu trúc HTML........................................................................................12
1.3.3. Bảng định kiểu CSS.................................................................................13
1.4. Ngôn ngữ Javascript.......................................................................................17
1.4.1. Ngôn ngữ Javascript là gì?.......................................................................17
1.4.2. Một số quy tắc cần tuân thủ của Javascript..............................................17
Sinh viên thực hiện: Lâm Tinh Tú

1.4.3. Cách viết chương trình javascript............................................................18
1.4.4. Cách sử dụng Javascript trong html.........................................................18
1.4.5. Các lệnh cơ bản của Javascript................................................................21
1.4.6. Các phép toán...........................................................................................23
1.5. Kết chương.....................................................................................................26
CHƯƠNG 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG.........................................27
2.1. Mô tả bài toán.................................................................................................27
2.2. Đặc tả các yêu cầu..........................................................................................27
2.2.1. Yêu cầu chức năng...................................................................................27
2.2.2. Yêu cầu phi chức năng.............................................................................27
2.3. Thiết kế dữ liệu...............................................................................................27
2.3.1. Mô hình dữ liệu........................................................................................27
2.3.2. Danh sách các thực thể và mối kết hợp....................................................27
2.3.3. Chi tiết thực thể và mối kết hợp...............................................................27
2.4. Thiết kế xử lý..................................................................................................27
2.4.1. Sơ đồ DFD mức ngữ cảnh........................................................................27
2.4.2. Sơ đồ DFD mức 1....................................................................................28
2.4.3. Sơ đồ DFD mức 2 (Theo từng chức năng)...............................................28
2.5. Thiết kế giao diện...........................................................................................28
2.5.1. Sơ đồ hệ thống..........................................................................................28
2.5.2. Giao diện trang chủ người dùng...............................................................28
2.5.2.1 Giao diện chức năng …......................................................................28
2.5.3. Giao diện trang chủ quản trị.....................................................................29

2.5.4. Kết chương...............................................................................................29
CHƯƠNG 3. CÀI ĐẶT THỰC NGHIỆM............................................................30
3.1. Bộ dữ liệu thử nghiệm....................................................................................30
3.2. Kết quả thực nghiệm.......................................................................................30
3.2.1. Chức năng …...........................................................................................30
3.2.2. Chức năng …...........................................................................................30
3.2.3. Chức năng................................................................................................30
3.3. Kết chương.....................................................................................................30
CHƯƠNG 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.....................................31
4.1. Kết luận..........................................................................................................31
4.2. Hướng phát triển.............................................................................................31

DANH MỤC HÌNH ẢNH
Hình 1.1 Cấu trúc của trang html........................................................................................................4

Hình 1.2 Toán tử số học.........................................................................................................................24
Hình 1.3 Các toán tử được thực hiện...............................................................................................24
Hình 1.4 Các toán tử so sánh...............................................................................................................25
Hình 1.5 Các toán tử gán.......................................................................................................................25

DANH MỤC BẢNG BIỂU
Bảng 1.1 Bộ chọn......................................................................................................13

Bảng 1.2 Thuộc tính CSS..........................................................................................17
Bảng 2.1 Danh sách các thực thể và mối kết hợp.....................................................27
Bảng 2.2 Chi tiết thực thể …....................................................................................27

CHƯƠNG 1. TỔNG QUAN VỀ NỘI DUNG NGHIÊN CỨU
1.1. Quy trình phát triển website
Quy trình phát triển website có 7 bước chính:

Bước 1: Thu thập thông tin
Điều đầu tiên trong mỗi quy trình thiết kế website là thu thập thông tin đầu
vào. Để có các định hướng thiết kế website, thông tin càng chi tiết, cụ thể thì khi
thiết kế càng dễ dàng hơn.
Việc ghi nhận các tính năng, hình thức, nhu cầu người sử dụng… Là các tư
liệu, thông tin quan trọng để đáp ứng tốt các nhu cầu của người sử dụng.
Bước 2: Lên kế hoạch
Sau khi thu thập đầy đủ các thông tin cần thiết, hệ thống chúng lại và lên kế
hoạch thiết kế web một cách chi tiết.
Đầu tiên vẽ phác thảo sơ đồ cho website, liệt kê các thành phần chính, phụ có
trong trang, có bao nhiêu trang sẽ xuất hiện. Lên kế hoạch cụ thể cho từng trang.
Bước 3: Thiết Kế Website
Sau khi có kế hoạch hoàn thiện, tiếp theo chúng ta sẽ hiện thực hóa chúng
bằng cách thiết kế giao diện.
Khi thiết kế giao diện cần cân đối các yếu tố cho phù hợp với các đề tài hay
lĩnh vực bạn chuẩn bị thiết kế. Hay dựa trên các yêu cầu của khách hàng, ý nghĩa
mà website cần thể hiện từ khách hàng.
Luôn đặt trải nghiệm của người dùng lên đầu, trang web nên thuận tiện, dễ
hiểu, tối giản nhất mang lại trải nghiệm tốt cho người sử dụng.
Bước 4: Viết tài liệu đặc tả SRC
SRC là tài liệu được sử dụng để mô tả chi tiết các yêu cầu chức năng của hệ
thống. Tài liệu hỗ trợ đưa ra các tính năng hệ thống hay giúp việc đọc hiểu hệ thống
của khách hàng.
SRC còn giúp ta có thể đánh giá được thời gian hoàn thành, số lượng scope,
và các chi phí trong quá trình phát triển sản phẩm.
Bước 5: Viết mã nguồn

Bước này, trước khi vào viết mã nguồn, cần lựa chọn ngôn ngữ lập trình phù
hợp cho dự án.
Người thiết kế sẽ hiện thực hóa những ý tưởng, đưa các thành phần được
xem là chính, phụ vào trang web và các tính năng của website và bấm sát vào tài
liệu SRC đã lập.
Các thành phần và chúc năng phải được xây dựng đúng với các bước ở trên,
đây là một bước quan trọng trong quy trình thiết kế website
Bước 6: Kiểm tra và chỉnh sửa Website

Đây là một bước vô cùng quan trọng trong quá trình tạo lập một website.
Sau khi hoàn tất các bước trên. Website sẽ được chạy thử để đảm bảo website
không có lỗi và nếu có sẽ được khắc phục ngay. Để đảm bảo rằng Website khi ra
mắt thị trường không hề có sai sót nào.
Bước 7: Bảo trì
Trang web là một dịch vụ chứu không phải là một sản phẩm, vì vậy để đảm
bảo được mọi thứ hoạt động tốt và mọi người đều hài lòng về nó, luôn chuẩn bị sẵn
sàng thay đổi trong các trường hợp.
Luôn giữ cho trang web trong trạng thái hoạt động tốt và theo dõi cập nhật
nó một cách thường xuyên.
1.2. Ngôn ngữ HTML
1.2.1. HTML là gì?
HTML có tên đầy đủ là Hypertext Markup Language là ngôn ngữ đánh dấu
siêu văn bản. HTML thường được sử dụng để tạo và cấu trúc các thành phần của
một trang web và ứng dụng……
HTML không phải ngôn ngữ lập trình mà là một ngôn ngữ dánh dấu siêu văn
bản. Vì vậy, nó không thể thực hiện các chức năng động sử dụng cho các trang web
tĩnh chỉ có tác dụng định dạng các thành phần của website.

1.2.2. Cấu trúc của HTML
Một file code HTML phải được cấu tạo bởi các phần tử HTML và các cặp
thẻ. HTML có nhiều dạng thẻ khác nhau và mỗi thẻ sẽ có nhiệm vụ và ý nghĩa
riêng. Các thẻ được bắt đầu và kết thúc bằng cặp dấu ngoặc nhọn “< >”. Các chữ
bên trong cặp dấu được gọi là phần tử.
Phần khai báo loại file code có cấu trúc thẻ là <!DOCTYPE html>. Xuất
hiện ở trên cùng của file code HTML. Qua phần này, người dùng sẽ biết được trình
duyệt đang sử dụng để tạo trang là phiên bản nào.
Một trang HTML sẽ được đánh dấu bắt đầu bằng cặp thẻ <html> </html>.
Trong đó <html> là thẻ mở, </html> là thẻ đóng. Ngôn ngữ HTML không phân biệt
chữ hoa và chữ thường, ví dụ bạn có thể gõ <html> hay <Html> hay <HTML> tất
cả đều có nghĩa như nhau.
Khi khai báo một thẻ cần phải đánh dấu phần đầu của trang HTML là thẻ
<head></head>, trong phần đầu này chứa cái nội dung mô tả về trang web như các
thẻ tiêu đề của trang web <title></title>, hay thẻ đơn <meta charset="utf-8"> để
định dạng kiểu gõ chữ tiếng việt và các thẻ khác được định nghĩa sẵn, bạn chỉ cần
nhớ tên và ý nghĩa của chúng để sử dụng, mà không cần định nghĩa cho bất kỳ thẻ
nào khác. Cặp thẻ <style></style> dùng để định dạng phong cách cho trang html.
Tiếp theo là phần tử <body> đây là phần tử quan trọng trong 1 trang web, vì
nó chứa phần nội dung tạo nên trang web. Các thành phần nội dung được cấu tạo
nên từ các thẻ được định nghĩa sẵn và chúng ta sử dụng nó để cấu tạo nên một trang
web.

Hình 1.1 Cấu trúc của trang HTML
1.2.3. Một số lưu ý cơ bản của HTML
Sử dụng đúng khai báo đúng doctype trong trng HTML ở dòng đầu tiên của
trang <!DOCTYPE html>. Nếu bạn muốn đồng nhất các thẻ khác trong trang, bạn
có thể viết <!doctype html>. Khi soạn xong file lưu file phái có chấm đuôi là ,html
hoặc .htm, nhưng sử dụng phổ biến là .html.
Trong phần <head></head>, bạn cần thiết lập ngôn ngữ và các bộ mã hóa ký
tự trang, đó là điều quan trọng nhất tạo nên một trang web hoàn thiện với <html
lang=”vi”> trình duyệt và các công cụ tìm kiếm sẽ biết được trang web của đoạn mã
bên dưới sử dụng ngôn ngữ Tiếng Việt. <meta charset=”utf-8”> là kiểu mã hóa
thuộc Meta charset với bộ mã hóa kí tự là utf-8 được hiển thị trên trang web, thẻ
Meta charset là bộ kiểu mã hóa kí tự của Unicode- bảng mã hóa chứa toàn bộ các kí
tự của hầu hết các loại ngôn ngữ trên thế giới trong đó có ngôn ngữ tiếng Việt.
Luôn nhó các thẻ khi có thẻ mửo là phải có thẻ đóng các cặp thẻ sonmg song,
bên cạnh đó cũng có thẻ rỗng là các thẻ không cần thể đóng vẫn chạy.
HTML cho phép bạn viết kết hợp giữa chữ hoa và chữ thường tên các thẻ.
Nhưng tên các thẻ nên sử dụng chữ thường để viết, tạo nên bài code gọn gàng và rõ
ràng hơn, ví dụ như: <a>…</a>, <p>…</p>,<section>…</section>……

Cũng như tên các thẻ tên ccs thuộc tính cũng viết thường, tọ mã nguồn dễ sử
dụng và nhìn gọn gàng hơn.<div class=”menu”>…</div>…..
Trong thẻ <img>, luôn sử dụng thuộc tính alt khi chèn ảnh vào website. Điều
này rất quan trọng nếu ảnh bị sự cố nào đó không thể hiện thị vì lý do nào đó. Luôn
quy định kích thước khi sử dụng ảnh. Nó sẽ không làm website của bạn bị co dãn
trong quá trình tải trang do trình duyệt đã dành sẵn không gian cho ảnh trước đó.
Đặc biệt là link đưa ảnh vào phải đúng kiểu của dấu chấm đuôi, một số chấm đuôi
phổ biến: gif, png,.. <img src=”html.gif” atl=”ảnh HTML”>. Ảnh và file code
HTML phải nằm chung một folder , nếu ảnh nằm trong thư mục khác phải chỉ ra
đường dẫn bằng cách tên thư mục / link ảnh: ví dụ : <img src=”img/html.gif”
atl=”ảnh HTML”>
Tránh việc viết code dài trên một dòng, viết code quá dài phải sử dụng thanh
trượt đẻ xem điều đó rất bất tiện. Nên viết code lùi đầu dòng và các dòng để cho bài
code của mình dễ đọc dễ hiểu và dễ sửa lỗi (nếu có lỗi), tăng độ thẩm mỹ cho bài
code. Việc này đối với bảng và danh sách giúp người viết code dễ dàng tưởng tượng
ra được bố cục mà mình đang viết.
Đối với file code nên viết:
<body>
<h1>Tiêu đề</h1>
<h2>Bài báo cáo thiết kế web</h2>
<p>
Ngôn ngữ html là ngôn ngữ viết trang web tĩnh. Với các cặp thẻ đa dạng dễ
sử dụng, tiện lợi.
</p>
</body>
Đối với bảng:

<body>
<table>
<tr>

<th>A</th>
<th>B</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
</body>
Đối với danh sách:
<ul>
<li>Tên</li>
<li>Lớp</li>
</ul>
1.2.4. Các thẻ cơ bản của HTML
<html> : Đây là thẻ gốc trong tệp dữ liệu và chứa tất cả các loại thẻ khác
trong đoạn code (ngoại trừ !DOCTYPE).
<base>: Chỉ định URL cơ sở cho tất cả các URL tương đối trong một tài
liệu. Và chỉ có thể có một phần tử như vậy trong một tài liệu.
<head>: Phần tử con đầu tiên của thẻ <html> và bao gồm các thẻ con
khác chứa thông tin về trang web.
<style>: Dùng để định dạng các thành phần của website như màu sắc,
màu nền, màu viền,… của bất cứ thành phần nào có trong trang HTML.
<title>: Thường được sử dụng bên trong thẻ <head> và được dùng để xác
định tiêu đề của trang web khi được hiển thị trên trình duyệt.
<meta>: Thường được đặt bên trong phần tử <head> và dùng để cung cấp
metadata cho trình duyệt và công cụ tìm kiếm. Những thông tin này thường
không hiển thị trên website nhưng các trình duyệt hoặc công cụ tìm kiếm có thể
hiểu và đọc được.

<link>: Đặt trong phần tử <head> và được sử dụng để định nghĩa một liên
kết trên trang web với một liên kết bên ngoài trang web.
<body>: Được sử dụng như phần tử con thứ hai của thẻ <html> và dùng để
chứa các nội dung mà bạn muốn hiển thị lên trang web.
Xác định những tiêu đề chính trong một đoạn văn bản. Các thẻ <h1> đến
<h6> có định dạng mặc định là chữ to và in đậm.
<h1> <h2> <h3> <h4> <h5> <h6>
<hr>: Thường được sử dụng để chèn đường kẻ phân cách nằm ngang và
không có thẻ đóng.
<p>: Xác định một đoạn văn bản trong <html>.
<br>: Được sử dụng để ngắt xuống dòng bởi trong HTML, bạn không thể
sử dụng Enter để ngắt xuống dòng như các trình soạn thảo thông thường.
Trong HTML ghi chú ngắn ngắn nằm trên một dòng dùng , ghi chú một đoạn được ghi chú:

1.2.5. Các thẻ định dạng thành phần web HTML
<header> : Xác định phần đầu của trang web như tiêu đề, thanh tìm kiếm,
các trang web con,…
<footer>: Xác định phần chân trang của website, nội dung <footer> thường
chứa thông tin về trang web, dữ liệu bản quyền hoặc các tài liệu liên quan
khác.
<main>: Xác định phần thân của trang web, thường chứa những nội dung
quan trọng bạn muốn truyền tải đến người dùng.
<div> : Thường được sử dụng để làm thùng chứa cho các phần tử khác.

<dialog> : Được sử dụng để tạo một hộp thoại, dùng cho các model hỗ trợ
tương tác như thông báo, xác nhận hoặc nhập dữ liệu.
<article> : Thể hiện thành phần độc lập trong một tài liệu, ứng dụng hoặc
là một trang web. Ví dụ như là các bài đăng, blog, bài báo, recap sự kiện,…
<section> : Đại diện cho một phần độc lập chung của tài liệu và không có
thành phần ngữ nghĩa cụ thể. Các phần trong thẻ <section> thường phải có tiêu
đề.
1.2.6. Các thẻ định dạng nội dung văn bản
<em>: Nhấn mạnh văn bản quan trọng.
<b>: Định dạng chữ in đậm trong đoạn văn bản.
<strong>: Cho phép người dùng bôi đậm các ký tự, đoạn văn bản mong
muốn. Thẻ này có chức năng định dạng giống với <b> nhưng <strong> được
khuyến khích sử dụng nhiều hơn khi bạn muốn đánh dấu các văn bản ở mức độ
quan trọng.
<i> : Định dạng chữ in nghiêng trong nội dung văn bản.
<u>: Định dạng chữ gạch chân trong nội dung văn bản.
<abbr>: Được sử dụng để định nghĩa từ viết tắt hoặc tóm tắt một đoạn nội
dung nào đó.
<blockquote>: Tạo một đoạn trích dẫn từ một website khác.
<small>: Định dạng kích thước nhỏ cho văn bản.

<code>: Định dạng văn bản mang ý nghĩa là câu lệnh trong lập trình.
<pre>: Định dạng nội dung mà bạn muốn hiển thị lên màn hình được giữ
nguyên hình dạng giống như ở trình soạn thảo. Bên cạnh đó, thẻ còn công dụng
giữ nguyên khoảng trắng và xuống dòng trong lập trình.
<q>: Dùng để tạo một câu trích dẫn ngắn khi được hiển thị trên trang
web.

<sub> : Được dùng để định dạng các loại văn bản nằm ở nửa dưới văn
bản thông thường.
<sup> : Định dạng văn bản có giá trị số mũ, lũy thừa,.. trong toán học
hoặc là các văn bản có kích thước nhỏ, thường nằm ở nửa trên văn bản thông
thường.
<time>: Định dạng những đoạn văn bản có giá trị là ngày tháng, thời gian
hoặc các ngày lễ đặc biệt trong năm.
<wbr>: Có công dụng gần giống với <br>, được dùng khi chiều rộng của
phần tử không đủ để chứa hết từ, sử dụng <wbr> để ngắt xuống dòng.
<bdo>: Được sử dụng để đảo ngược thứ tự xuất hiện trên trang web của
các ký tự.
1.2.7. Các thẻ định dạng bảng

<table>: Thẻ được dùng để xác định dữ liệu bảng, những thông tin bên
trong thẻ này sẽ được trình bày trong bảng gồm các hàng và cột chứa dữ liệu.
<caption>: Xác định chú thích hoặc tiêu đề của bảng.
<colgroup>: Xác định một nhóm các cột trong một bảng.
<col>: Phần tử con của <colgroup> và được dùng để xác định thuộc tính
cho cột.
<thead>: Xác định phần nội dung là tiêu đề của bảng.
<tbody>: Xác định phần nội dung chính của bảng.
<tfoot>: Xác định các nội dung mang tính tổng kết, tính tổng, thành tiền,
…
<tr>: Được dùng để xác định một hàng trong bảng (table row).
<td>: Phần tử con của <tr> và được dùng để xác định một ô trong bảng
dữ liệu.

<th>: Phần tử con của <tr> và được dùng để xác định tiêu đề của một
nhóm ô trong bảng.
1.2.8. Các thẻ danh sách
<li>: Thẻ được dùng để định dạng thông tin danh sách (list) và là phần tử
con của thẻ <ul> và <ol>
<ul>: Xác định danh sách không có thứ tự, hay còn gọi là Unordered List
<ol>: Được dùng để xác định các loại danh sách có thứ tự rõ ràng
(Ordered List)
<dl>: Danh sách miêu tả được dùng để hiển thị các thuật ngữ và miêu tả.
<dt>: Chỉ định một thuật ngữ trong danh sách mô tả <dl>, thường được
theo sau bởi phần tử <dd>.
<dd>: Cung cấp mô tả, định nghĩa hoặc giá trị cho thuật ngữ <dt> trong
danh sách mô tả.
1.2.9. Các thẻ đa phương tiện
<area> : Được dùng để xác định một bản đồ ảnh cho phép các hình ảnh
bên trong có thể chèn liên kết.
<img>: Chèn hình ảnh vào trang web.
<map>: Được sử dụng cùng với <area> để xác định bản đồ ảnh.
<track>: Được sử dụng như phần tử con của <audio> và <video>, chèn
một phụ đề vào các nội dung đa phương tiện.
<source>: Xác định nguồn tài nguyên phù hợp cho các đa phương tiện
trên trang web như <audio> hoặc <video>
1.2.10. Các thẻ liên kết
<a>: Viết tắt của từ “anchor” và được dùng kèm với thuộc tính href
(hypertext reference), chèn một liên kết vào trang web.
<nav>: Xác định tập hợp của các liên kết. Bạn có thể kết hợp cùng với
CSS để tạo thành một thanh menu.

1.2.11. Các thẻ thông dụng trong HTML
<cite>: Được sử dụng để đánh dấu tiêu đề của tài liệu tham khảo. Có thể
ở dạng viết tắt theo quy ước phù hợp với tài liệu được trích dẫn.
<form>: Đại diện cho tệp tài liệu chứa các thông tin dạng biểu mẫu và sử
dụng để thu thập dữ liệu đầu vào từ người dùng.
<label>: Tăng khả năng truy cập bằng liên kết đến form tương ứng thông
qua thuộc tính <for>.
<button>: Được dùng để thực hiện một hành động như gửi biểu mẫu hoặc
mở hộp thoại.
<input>: Được sử dụng khi bạn cần biểu diễn một trường input để có thể
nhập dữ liệu vào đó, một số trường thông tin input như họ tên, mật khẩu, số điện
thoại,…
<datalist>: Chứa một tập hợp các phần tử trong thông tin biểu mẫu.
<fieldset>: Sử dụng để nhóm một số <label> trong biểu mẫu của trang
web.
<select> Được sử dụng để tạo một danh sách chọn lựa (danh sách thả
xuống) và bao gồm thẻ <option> định nghĩa cho các giá trị trong danh sách.
<option>: Được sử dụng để xác định các giá trị có trong phần tử
<select>,<optgroup> hoặc <datalist>.
<textarea>: Chỉnh sửa văn bản, cho phép người dùng nhập nhiều dòng văn
bản tự do như nhận xét về biểu mẫu, đưa ra đánh giá hoặc phản hồi.
1.3. Bảng định kiểu CSS
1.3.1. Ngôn ngữ CSS là gì?
Đây là một ngôn style sheet được sử dụng để mô tả giao diện và định dạng của
một tài liệu viết bằng ngôn ngữ đánh dấu (markup). Nó cung cấp một tính năng bổ
sung cho HTML.

CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web để
tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều
ứng dụng di động.
1.3.2. Cấu trúc HTML
Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong
dấu ngoặc nhọn. Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của
các giá trị đã có trong danh sách của CSS.
Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai
chấm, mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng. Các thuộc
tính không bị giới hạn ở một vùng chọn.
Trong đó:
 Bộ chọn (Selector): mẫu để chọn phần tử HTML mà bạn muốn định nghĩa
phong cách. Bạn có thể áp dụng các selector cho các trường hợp sau:
 Tất cả những phần tử được định dạng theo một dạng cụ thể nào đó, ví dụ
phần tử tiêu đề h2.
 Thuộc tính id, class của phần tử.
 Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân
cấp tài liệu.
 Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo
và chúng được phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo lại
bao gồm tên & giá trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy.
Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và
khối khai báo phải nằm trong các dấu ngoặc móc.
 Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu
cho một phần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính
mà bạn muốn tác động nhất trong bộ quy tắc bạn đã tạo ra.
 Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một
thuộc tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính.

1.3.3. Bảng định kiểu CSS
SELECTOR MÔ TẢ VÍ DỤ
Element Element chính là phần tử H1{color: red;}
HTML hay thẻ HTML
nhưng chỉ lấy phần tên
thẻ mà không có dấu mở
thẻ.
#id Chọn bất kì thẻ HTML #test{color: green;}
nào có thuộc tính id được
chỉ định để nhận định
dạng CSS.
Element#id Chỉ thẻ HTML được chỉ H1#test{color: green;}
định và thẻ đó có id được
dạng CSS.
.class Chọn bất kì thẻ HTML .note{color:red;}
nào có giá trị class được
dạng CSS.
Element.class Chỉ thẻ HTML được định H1.note{color:red;}
trước với một giá trị class
được chỉ định để nhận
định dạng CSS.
Grouping Áp dụng cùng một định h1,h2,h3{background-
dạng kiểu đối với một color:underline;}
nhóm thẻ.
Contexaul Chọn thẻ con theo dúng P strong{color:purple;}
thứ tự chỉ định mới nhận
được định dạng CSS này.
Bảng 1.1 Bộ chọn

ĐỊNH THUỘC TÍNH CSS Ý NGHĨA
DẠNG

color: red; Màu chữ(dùng từ tiếng Anh)
color: #990000; Màu chữ(dùng từ mã màu)
color-background: red; Màu nền(dùng từ tiếng Anh)
color-background: #999999; Màu nền(dùng từ mã màu)
word-spacing:n; Khoảng cách giữa các từ, với n là
Văn Bản số pixel mà bạn nhập vào.
letter-spacing:n; Khoảng cách giữa các ký tự, với n
là số pixel mà bạn nhập vào.
text-align: Canh lề văn bản(trái / phải / giữa/
left/right/center/justify; đều 2 bên)
text -transform: Chuyển thành dạng chữ: viết hoa
capitalize/uppercase/lowercase; đầu mỗi từ/ toàn chữ in hoa/ toàn
chữ in thường.
font-family: Times New Chọn kiểu chữ(font): nếu máy
Roman, Times, serif; ngu8owif dùng không có font được
font : Arial, Helvetica, sans- chỉ định thì trình duyệt sẽ lấy font
seif ; mặc định cùng họ với font đã chọn
…… đer hiển thị.
font-size: xx-small / x-small / Định cở chữ(rất rất nhỏ/ rất nhỏ/

small / medium/ large/ x-large/ nhỏ/ trung bình/ lớn/ rất lớn/ rất rất
xx-large; lớn)
font-size:12pt;
Định cở chữ(giá trị cụ thể từ 9px
đến 36 px)
font-style:italic; Tạo chữ in nghiêng
font-weight:bold; Tạo chữ in đậm
font-decoration:underline; Gạch dưới văn bản
list-style:none; Không dùng Bullet
list-style:circle; Chấm tròn rỗng
list-style:disc; Chấm tròn đen

Ký hiệu list-style:square; Chấm đen vuông
đầu danh list-style:decimal; Đánh số Ả Rập(1,2,3,…)
sách list-style:lower-alpha; Thứ tự alpha thường(a,b,c..)
list-style:upper-alpha; Thứ tự alpha hoa(A,B,C..)
list-style:upper-roman; Số la mã hoa(I,II,III…)
list-style:lower-roman; Số La Mã thường(i,ii,iii….)
list-style-image:url; Dùng hình làm Bullet
background-color: mã màu/ tên Màu nền
màu;
background-image: đường dẫn ảnh nền
đến ảnh nền;
background-position: Vị trí đặt ảnh nền:
Nền left/right/center/ top/ bottom/ trái/phải/giữa/trên/dưới/kế thừa.
inherit;
background-repeat: repeat/ Cách lặp ảnh: lặp cho cả trang/ lặp
repeat-x/ repeat-y/ no-repeat; theo chiều ngang/ lặp theo chiều
đứng/ không lặp
background-attachment:scroll/ Giữa ảnh cuộn/ không cuộn theo
fixed; trang của trình duyệt.
boder-style: Kiểu đường viền
Định boder-collapse:collapse; Đường viền lún
dạng boder-bottom-style: Kiểu đường viền phía dưới
đường boder-left-style: Kiểu đường viền bên trái
viền boder-right-style: Kiểu đường viền bên phải
boder-top-style: Kiểu đường viền phía trên
text-decoration:none; Không gạch dưới
a:visited{color: #rrggbb;} Định dạng cho link khi được click
Hypertext a: link{color: #rrggbb;} Định dạng cho link khi chưa được
link click
a:active {color: #rrggbb;} Định dạng cho những link đang
xem
a: hover{color: #rrggbb;} Định dạng khi trỏ lướt qua link

float: left/right/none; Căn lề, cố định thành phần về web

left Thuộc tính dịch đối tượng từ bên
Định vị trái với số pixel chỉ định sau dấu
hai chấm của thuộc tính left
right Thuộc tính dịch đối tượng từ bên
phải với số pixel chỉ định sau dấu
hai chấm của thuộc tính right.
top Thuộc tính dịch đối tượng từ bên
trên với số pixel chỉ định sau dấu
hai chấm của thuộc tính top.
bottom Thuộc tính dịch đối tượng từ bên
dưới với số pixel chỉ định sau dấu
hai chấm của thuộc tính bottom.
position:absolute; Thuộc tính định vị tuyệt đối, có
nghĩa là các thành phần được định
vị không để lại bất kỳ khoảng trống
nào trong tài liệu.
position:relative; Thuộc tính định vị tương đối , có
nghĩa là các thành phần đã được
định vị tương đối sẽ để lại khoảng
không trong tài liệu.
margin Định khoảng cách tù viền của đối
tượng đến một đối tượng khác hoặc
đến viền trang.
padding Định khoảng cách từ nội dung đặt
trong đối tượng đến viền của đối
tượng đó.
Bảng 1.2 Thuộc tính CSS

1.4. Ngôn ngữ Javascript
1.4.1. Ngôn ngữ Javascript là gì?
Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay. Javascript
được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động
hơn.
Javascript là ngôn ngữ lập trình kịch bản hướng đối tượng được phát triển
bởi Netscape Communications cho các ứng dụng client/server. Javascript là một
ngôn ngữ lập trình thông dịch. JavaScript hiển thị các trang web theo cách tương tác
và năng động góp phần tạo nên trang web động. Điều này cho phép các trang bắt
các sự kiện, hiện thị các hiệu ứng đặc biệt, tự động tạo nội dung HTML.
 Ưu điểm của Javascript

Ít tương tác với máy chủ
Phản hồi ngay lập tức tới người dùng
Tăng cường tương tác
Giao diện mạnh mẽ hơn
 Nhược điểm của Javascript
Javascript không hỗ trợ tạo các ứng dụng mạng, không có tính năng đa luồng
và đa xử lý.
1.4.2. Một số quy tắc cần tuân thủ của Javascript
Trong Javascript có sụ phân biệt chữ hoa và chữ thường.
Các câu lệnh đơn kết thúc bằng dáu chấm phẩy.
Tập hợp nhiều câu lệnh đơn được đặt trong cặp dấu {} được gọi là một khối
chương trình.
Biến cục bộ được khai báo trong chương trình con hoặc bên trong hàm và chỉ có
phạm vi hoạt động từ vị trí khai báo đến kết thúc chương trình con hoặc kết thúc
hàm.

1.4.3. Cách viết chương trình javascript
Tất cả những đoạn mã javascript đều được đặt ở trong cặp thẻ đóng và mở
<script></script>. Ví dụ:
<script language="javascript">
alert("Hello World!");
</script>
Cặp thẻ đặt trong phần head của html,
1.4.4. Cách sử dụng Javascript trong html
- Sử dụng External Script trong html
Nếu bạn đang tạo ra một tính năng mà sẽ được sử dụng trong nhiều tài liệu
HTML khác nhau, cách tốt nhất là bạn nên lưu trữ nó trong tệp JavaScript riêng, rồi
sau đó nhúng vào các tài liệu HTML. Một tệp JavaScript sẽ có đuôi mở rộng
là .js và sẽ được bao trong các tệp HTML bằng cách sử dụng thẻ <script>.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vi du Javascript External Script</title>
<script src="/html/script.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="hello();" name="hello" value="Click Me"/>
</body>
</html>
- Sử dụng Internal Script trong html

Bạn có thể viết một script code trực tiếp vào trong tài liệu HTML. Thông thường
chúng ta lưu code này trong phần header của tài liệu bằng cách sử dụng thẻ
<script>, ngoài ra điều này không có giới hạn và bạn có thể đặt đoạn code nguồn
trong thẻ <script> trong tài liệu.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Sử dụng Internal Script trong HTML</title>
<base href="/html/" />
<script type="text/javascript">
function hello(){
alert("Ví dụ sử dụng Internal Script trong HTML");
}
</script>
</head>
<body>
<input type="button" onclick="hello();" name="hello" value="Click Me"/>
</body>
</html>
- Xử lí sự kiện trong html
Xử lý sự kiện về chuột hay bàn phím. Bạn có thể định nghĩa logic nghiệp vụ của
bạn bên trong các hàm xử lý sự kiện (Event Handler). Các hàm này có thể dài ngắn
tùy theo các sự kiện và nghiệp vụ bạn cần xử lý.
Ví dụ:
<!DOCTYPE html>
<html>
<head>

<title>Ví dụ xử lý sự kiện trong HTML</title>
<base href="/html/" />
function EventHandler(){
alert("Ví dụ xử lý sự kiện trong HTML");
}
</script>
</head>
<body>
<p onmouseover="EventHandler();">Di chuyển chuột qua dòng này
và xem kết quả.</p>
</body>
</html>
- Phần tử <noscript> trong html
Bạn cũng có thể cung cấp thông tin thay thế đến người sử dụng khi mà trình
duyệt họ sử dụng không hỗ trợ script. Bạn làm điều này bằng cách sử dụng
thẻ <noscript>.
Ví dụ cho JavaScript:
</script>
<noscript>
Trình duyệt của bạn không hỗ trợ Javascript!
</noscript>
Ví dụ cho VBScript:
<script type="text/vbscript">
</script>
<noscript>
Trình duyệt của bạn không hỗ trợ VBScript!
</noscript>

- Cài đặt ngôn ngữ Script mặc định trong HTML – Thuộc tính content
trong HTML
Có thể có một tình huống khi bạn thêm rất nhiều tệp script và sau cùng sử dụng
nhiều thẻ <script>. Bạn có thể cài đặt ngôn ngữ script mặc định cho tất cả các
thẻ script này. Việc này tiết kiệm cho bạn thời gian từ việc phải xác định ngôn ngữ
mỗi khi bạn muốn sử dụng thẻ script trong trang. Dưới đây là một ví dụ:
<meta http-equiv="Content-Script-Type" content="text/JavaScript"/>
- Để ghi chú trong javascript dùng //
1.4.5. Các lệnh cơ bản của Javascript
- Cú pháp cơ bản của lệnh
object_name.property_name; - JavaScript xây dựng các hàm, các phát biểu, các
toán tử và các biểu thức trên cùng một dòng và kết thúc bằng ; Cách gọi một
phương thức của một đối tượng
VD: <script>
document.write("Chào các bạn!<BR>");

</script>
- Hiển thị một dòng văn bản
write() và writeln() : Đối tượng document trong JavaScript được thiết kế sẵn hai
phương thức để xuất một dòng văn bản ra màn hình client
VD: <script>
document.write("Chào các bạn");

document.writeln("Chúc các bạn vui vẻ!");
</script>
- Lệnh alert()
Khi đó sẽ chờ cho đến khi người sử dụng nhấn vào nút OK . Thông thường, cách
thức alert() được sử dụng trong các trường hợp:
• Thông tin đưa vào form không hợp lệ

• Kết quả sau khi tính toán không hợp lệ
• Khi dịch vụ chưa sẵn sàng để truy nhập dữ liệu
Ví dụ: Tạo trang (Thongbao.htm)
<body>
<script Language="JavaScript">
alert("Chào mừng bạn đến với JavaScript!. \n Nhấn Ok để tiếp tục");
</script>
Chúc bạn thành công!!!
</body>
- Lệnh prompt()
Một hộp thoại gồm 1 dòng thông báo, 1 trường nhập dữ liệu, 1 nút OK và 1 nút
Cancel. Người sử dụng nhập vào trường đó rồi kích vào OK. Khi đó, ta có thể xử lý
dữ liệu vừa đưa vào.
Cú pháp:
<body>
<script Language="JavaScript">
var name=window.prompt("Xin chào!Bạn tên gì?","");
document.write("Xin chào bạn " + name + " ! Chúc bạn học tốt JavaScript ");
</script>
</body>
- Lệnh confirm()
Lệnh confirm() tạo ra 1 hộp thoại gồm 1 dòng thông báo, nút OK và nút Cancel.
Người sử dụng có thể click vào OK. Khi đó sẽ xử lý thực hiện hành động theo yêu
cầu, ngược lại khi Click vào Cancel sẽ bỏ đóng hộp thọai thông bao.
Thường sử dụng trong các trường hỏi đáp, xác nhận quyết định xử lý thông tin từ
phía người dùng
Cú pháp:
<html>
<head>

<script>
function Hoidap(){
question = confirm("Bạn thật sự muốn truy cập Website")
if (question !="0"){
top.location = "http://www.tuoitre.com.vn/"
}
}
</script>
</head>
<body>
Hãy click vào đây để truy cập website:<a href=""onClick="Hoidap();return
false;">Báo Tuổi Trẻ </a>
</body>
</html>
- Cú pháp khai báo hàm
function name_of_funtionc(var1, var2, var33,...) {

Khối mã lệnh Javascript
}
1.4.6. Các phép toán
- Toán tử số học
Toán tử số học được sử dụng để thực hiện các phép tính số học trên các toán hạng.
Các toán tử sau đây được gọi là các toán tử số học JavaScript.

Hình 1.2 Toán tử số học
- Các toán tử được thực hiên trên các Bit
Các Toán tử bit được thực hiện trên các toán hạng. Dưới bảng các Toán tử trên bit
Hình 1.3 Các toán tử được thực hiện

- Các toán tử so sánh
Toán tử so sánh JavaScript dùng để so sánh hai toán hạng. Dưới đây là các toán tử
so sánh:
Hình 1.4 Các toán tử so sánh

- Các toán tử gán
Hình 1.5 Các toán tử gán

1.5. Kết chương
Trong quá trình thực hiện báo cáo về CSS, HTML, và JavaScript, chúng tôi
đã nắm vững các kiến thức cơ bản về lập trình web. Chúng tôi đã hiểu cách sử dụng
CSS để tạo ra giao diện hấp dẫn và thay đổi cách hiển thị của các phần tử HTML.
Chúng tôi đã áp dụng các thuộc tính CSS như màu sắc, font chữ, độ rộng, và độ cao
để tạo ra trang web thẩm mỹ và dễ đọc. Chúng tôi đã biết cách sử dụng HTML để
xây dựng cấu trúc nội dung của trang web. Chúng tôi đã tạo các thẻ HTML
như <div>, <p>, và <a> để định dạng và liên kết các phần tử trên trang.Chúng tôi đã
học cách sử dụng JavaScript để thêm tính năng động vào trang web. Chúng tôi đã
viết mã JavaScript để xử lý sự kiện như nhấp chuột, nhập liệu, và hiển thị thông
báo.Trong tương lai, chúng tôi sẽ tiếp tục nâng cao kiến thức và kỹ năng về lập trình
web để xây dựng các trang web chất lượng và tương tác tốt với người dùng.

CHƯƠNG 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
2.1. Mô tả bài toán
2.2. Đặc tả các yêu cầu
2.2.1. Yêu cầu chức năng
2.2.2. Yêu cầu phi chức năng
2.3. Thiết kế dữ liệu
2.3.1. Mô hình dữ liệu
Trình bày mô hình ERD
2.3.2. Danh sách các thực thể và mối kết hợp
Bảng 2.3 Danh sách các thực thể và mối kết hợp
STT Tên thực thể/Mối kết hợp Diễn giải Ghi chú
2.3.3. Chi tiết thực thể và mối kết hợp
Thực thể
Mô tả
Chi tiết thực thể
Bảng 2.4 Chi tiết thực thể …

Tên thuộc Ràng buộc toàn
STT Diễn giải Kiểu dữ liệu
tính vẹn
2.4. Thiết kế xử lý
2.4.1. Sơ đồ DFD mức ngữ cảnh

2.4.2. Sơ đồ DFD mức 1
2.4.3. Sơ đồ DFD mức 2 (Theo từng chức năng)
Diễn giải từng bước:
(1)
(2)
(3)
(4)
2.5. Thiết kế giao diện
2.5.1. Sơ đồ hệ thống
2.5.2. Giao diện trang chủ người dùng
Mô tả chi tiết về màn hình bao gồm các thành phần và cách bố cục
2.5.2.1 Giao diện chức năng …

2.5.3. Giao diện trang chủ quản trị
2.5.4. Kết chương

CHƯƠNG 3. CÀI ĐẶT THỰC NGHIỆM
3.1. Bộ dữ liệu thử nghiệm
3.2. Kết quả thực nghiệm
3.2.1. Chức năng …
3.2.2. Chức năng …
3.2.3. Chức năng
3.3. Kết chương

CHƯƠNG 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
4.1. Kết luận
4.2. Hướng phát triển

DANH MỤC TÀI LIỆU THAM KHẢO
Trình bày theo quy định của chuẩn IEEE

Bài Báo Cáo Thiết Kế Website

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bài Báo Cáo Thiết Kế Website

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC TRÀ VINH

KHOA KỸ THUẬT VÀ CÔNG NGHỆ

THIẾT KẾ GIAO DIỆN WEBSITE

TRANG THÔNG TIN ĐIỆN TỬ

ĐOÀN KHOA KỸ THUẬT VÀ CÔNG NGHỆ

Giáo viên hướng dẫn: Sinh viên thực hiện:

Nguyễn Ngọc Đan Thanh Mã số sinh viên: 110122249

Họ tên: Lân Tinh Tú

Trà Vinh, tháng 4 năm 2024

THIẾT KẾ GIAO DIỆN WEBSITE

TRANG THÔNG TIN ĐIỆN TỬ

ĐOÀN KHOA KỸ THUẬT VÀ CÔNG NGHỆ

Giáo viên hướng dẫn: Sinh viên thực hiện:

Nguyễn Ngọc Đan Thanh Mã số sinh viên: 110122249

Họ tên: Lâm Tinh Tú

Trà Vinh, tháng 4 năm 2024

DANH MỤC HÌNH ẢNH........................................................................................iv

DANH MỤC BẢNG BIỂU.......................................................................................v

CHƯƠNG 1. TỔNG QUAN VỀ NỘI DUNG NGHIÊN CỨU..............................1

1.1. Quy trình phát triển website.............................................................................1

1.2. Ngôn ngữ HTML..............................................................................................2

1.2.1. HTML là gì?...............................................................................................2

1.2.2. Cấu trúc của HTML...................................................................................3

1.2.3. Một số lưu ý cơ bản của HTML.................................................................4

1.2.4. Các thẻ cơ bản của HTML.........................................................................6

1.2.5. Các thẻ định dạng thành phần web HTML................................................7

1.2.6. Các thẻ định dạng nội dung văn bản..........................................................8

1.2.7. Các thẻ định dạng bảng..............................................................................9

1.2.8. Các thẻ danh sách.....................................................................................10

1.2.9. Các thẻ đa phương tiện.............................................................................10

1.2.10. Các thẻ liên kết.......................................................................................10

1.2.11. Các thẻ thông dụng trong HTML...........................................................11

1.3. Bảng định kiểu CSS........................................................................................11

1.3.1. Ngôn ngữ CSS là gì?................................................................................11

1.3.2. Cấu trúc HTML........................................................................................12

1.3.3. Bảng định kiểu CSS.................................................................................13

1.4. Ngôn ngữ Javascript.......................................................................................17

1.4.1. Ngôn ngữ Javascript là gì?.......................................................................17

1.4.2. Một số quy tắc cần tuân thủ của Javascript..............................................17

Sinh viên thực hiện: Lâm Tinh Tú

1.4.4. Cách sử dụng Javascript trong html.........................................................18

1.4.5. Các lệnh cơ bản của Javascript................................................................21

1.4.6. Các phép toán...........................................................................................23

1.5. Kết chương.....................................................................................................26

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

2.1. Mô tả bài toán.................................................................................................27

2.2. Đặc tả các yêu cầu..........................................................................................27

2.2.1. Yêu cầu chức năng...................................................................................27

2.2.2. Yêu cầu phi chức năng.............................................................................27

2.3. Thiết kế dữ liệu...............................................................................................27

2.3.1. Mô hình dữ liệu........................................................................................27

2.3.2. Danh sách các thực thể và mối kết hợp....................................................27

2.3.3. Chi tiết thực thể và mối kết hợp...............................................................27

2.4. Thiết kế xử lý..................................................................................................27

2.4.1. Sơ đồ DFD mức ngữ cảnh........................................................................27

2.4.2. Sơ đồ DFD mức 1....................................................................................28

2.4.3. Sơ đồ DFD mức 2 (Theo từng chức năng)...............................................28

2.5. Thiết kế giao diện...........................................................................................28

2.5.2. Giao diện trang chủ người dùng...............................................................28

2.5.2.1 Giao diện chức năng …......................................................................28

2.5.2.2 Giao diện chức năng …......................................................................28

2.5.2.3 Giao diện chức năng …......................................................................28

2.5.3. Giao diện trang chủ quản trị.....................................................................29

Sinh viên thực hiện: Lâm Tinh Tú