TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VIỆN ĐIỆN TỬ - VIỄN THÔNG

ĐỒ ÁN THIẾT KẾ I
ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI

Giảng viên hướng dẫn: TS. Đinh Thị Nhung

Sinh viên thực hiện Lớp MSSV

Nguyễn Đại Hồng Quân Điện tử 01 – K65 20203540

Hà Nội, 3-2023
 MỤC LỤC
LỜI NÓI ĐẦU.....................................................................................................................4
TÓM TẮT ĐỒ ÁN..............................................................................................................6
CHƯƠNG 1: LÝ THUYẾT.................................................................................................7
1.1 HTML........................................................................................................................7
1.1.1 Khái niệm................................................................................................................7
1.1.2 Cấu trúc một đoạn HTML......................................................................................7
1.1.3 Các thẻ thường gặp trong HTML...........................................................................8
1.2 CSS..........................................................................................................................10
1.2.1 Khái niệm..............................................................................................................10
1.2.2 Thuộc tính.............................................................................................................10
1.2.3 Cấu trúc và thuộc tính...........................................................................................10
1.2.4 Nhúng CSS vào website........................................................................................11
1.3 Javascript.................................................................................................................12
1.3.1 Khái niệm..............................................................................................................12
1.4 Visual Studio Code..................................................................................................12
CHƯƠNG 2: THIẾT KẾ HỆ THỐNG..............................................................................14
2.1 Phân tích yêu cầu đề tài...........................................................................................14
2.1.1 Yêu cầu.................................................................................................................14
2.1.2 Yêu cầu đặt ra.......................................................................................................14
2.1.2.1 Thiết bị và phần mềm........................................................................................14
2.1.2.2 Yêu cầu trang web.............................................................................................14
2.2 Sơ đồ phân cấp chức năng.......................................................................................15
2.3 Sơ đồ luồng dữ liệu..................................................................................................16
2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh.......................................................................16
2.3.2 Sơ đồ luồng dữ liệu mức đỉnh...............................................................................16
2.4 Chuẩn hoá....................................................................................................................
 2.5 Cơ sở dữ liệu............................................................................................................20
CHƯƠNG 3: KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN.....................................................18
3.1 Kết quả sản phẩm.....................................................................................................18
3.2 Hướng phát triển......................................................................................................24
CHƯƠNG 4: KẾT LUẬN.................................................................................................25
TÀI LIỆU THAM KHẢO.................................................................................................26
 LỜI NÓI ĐẦU
Ngày nay, Internet đã trở thành một dịch vụ phổ biến, thiết yếu và có ảnh hưởng lướn
tới nhiều lĩnh vực trong cuộc sống con người như thói quen, sinh hoạt và giải trí,…
Cùng với đó, lĩnh vực mua sắm ngày càng phát triển mạnh mẽ.Một trong số đó là
mua sắm trực tuyến đang thành công và chiếm được nhiều sự thu hút đó là các sàn
thương mại điện tử như là Shopee, Lazada, Tiki. Nhận thấy đây là một đề tài khá thực
tế và cùng với yêu cầu môn học, em quyết định lựa chọn đề tài: Xây dựng trang web
bán điện thoại làm đề tài chính thức để hoàn thành học phần đồ án thiết kế I của
mình. Với đề tài môn học này, em xin cảm ơn sự giúp đỡ và hướng dẫn của cô Đinh
Thị Nhung. Do còn nhiều hạn chế về kiến thức cũng như các kỹ năng nên trong quá
trình thực hiện đề tài, em không tránh khỏi những thiếu sót. Em rất mong nhận được
sự góp ý của cô để sản phẩm ngày càng hoàn thiện hơn.
Em xin trân trọng cảm ơn!
 DANH MỤC HÌNH VẼ
Hình 2.2 Sơ đồ phân cấp chức năng........................................................................17
Hình 2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh........................................................18
Hình 2.3.2 Sơ đồ luồng dữ liệu mức đỉnh...............................................................16
Hình 2.5.1 Thông tin người dùng............................................................................21
Hình 2.5.2 Thông tin phim......................................................................................21
Hình 3.1.1 Giao diện đăng nhập của website..........................................................22
Hình 3.1.2 Giao diện đăng ký của website..............................................................22
Hình 3.1.3 Giao diện trang chủ...............................................................................23
Hình 3.1.4 Giao diện trang chi tiết phim.................................................................23
Hình 3.1.5 Giao diện trang đăng phim....................................................................24
Hình 3.1.6 Giao diện trang danh sách phim............................................................24
Hình 3.1.7 Giao diện trang thùng rác......................................................................25
 DANH MỤC BẢNG BIỂU
Bảng 1.1 Các thẻ và cặp thẻ thường gặp trong HTML.............................................8
Bảng 2.4 Bảng chuẩn hoá dữ liệu............................................................................20
 TÓM TẮT ĐỒ ÁN
Đồ án trình bày lý thuyết và các bước thực hiện xây dựng website bán điện
thoại trực tuyến. Nội dung đồ án gồm 3 chương:
- Chương 1 chủ yếu tóm tắt lý thuyết về những ngôn ngữ sử dụng để xây dựng
đề tài như HTML, CSS, Javascript, NodeJS và các phần mềm được sử dụng
như MongoDB Compass và Visual Studio Code.
- Chương 2 nói về các giai đoạn thực hiện sản phẩm, bao gồm phân tích yêu cầu
đề tài, tạo sơ đồ chức năng, chuẩn hoá, tạo cơ sở dữ liệu.
- Chương 3 trình bày kết quả xây dựng đề tài, đưa ra hướng phát triển.
- Chương 4 nêu ra kết luận sau khi thực hiện đề tài.
 CHƯƠNG 1: LÝ THUYẾT
Chương 1 trình bày tóm tắt lý thuyết về các ngôn ngữ được sử dụng trong quá
trình làm đồ án như HTML, CSS, Javascript,và các phần mềm được sử dụng như
Visual Studio Code.
1.1 HTML
1.1.1 Khái niệm
HTML (viết tắt của từ HyperText Markup Language) là ngôn ngữ đánh dấu
siêu văn bản, dùng để xây dựng và cấu trúc các thành phần trong trang web.
HTML không phải là ngôn ngữ lập trình.
Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML elements)
được quy định bằng các cặp thẻ (tags). Các cặp thẻ này được bao bọc bởi dấu < > (ví
dụ: <html>). Thông thường các phần tử HTML sẽ được khai báo thành một cặp thẻ
mở và đóng (ví dụ: <p> và </p>) hoặc không có thẻ đóng (ví dụ: <img>).
1.1.2 Cấu trúc một đoạn HTML
Dưới đây là cấu trúc của một đoạn mã HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Đây là chương trình đầu tiên!</h1>
</body>
</html>
1.1.3 Các thẻ thường gặp trong HTML
Bảng 1.1 Các thẻ và cặp thẻ thường gặp trong HTML

Tên thẻ Kí hiệu Cú pháp Tác dụng

Ngắt một phần nội dung

Thẻ xuống dòng br <br>
xuống dòng mới

Phân chia một đoạn văn bản

Cặp thẻ chia đoạn p <p>Nội dung </p> thành hai đoạn văn bản riêng
biệt

b <b>Chữ đậm</b> Định dạng kiểu chữ in đậm

i <i>Chữ nghiêng</i> Định dạng kiểu chữ nghiêng

Cặp thẻ định dạng <u>Chữ gạch Định dạng kiểu chữ gạch
kiểu chữ u
chân</u> chân

<s>Chữ gạch
s Định dạng kiểu chữ gạch giữa
giữa</s>

<ul>

Cặp thẻ tạo danh <li>Nội dung 1</li> Định dạng một danh sách
ul, li
sách không thứ tự <li>Nội dung 2</li> không theo thứ tự
</ul>

<ol>

Cặp thẻ tạo danh <li>Nội dung 1</li> Định dạng một danh sách
ol, li
sách có thứ tự <li>Nội dung 2</li> theo thứ tự
</ol>

Cặp thẻ phân vùng div <div> </div> Phân chia khu vực, giúp trình
duyệt hiểu rõ bố cục của
 trang web

h1, h2, <h1>Tiêu đề 1</h1>

Cặp thẻ tiêu đề h3, h4, Tạo tiêu đề cho văn bản
h5, h6 <h2>Tiêu đề 2</h2>

Tạo một liên kết trong văn

Cặp thẻ tạo liên
a <a>Liên kết</a> bản HTML với các thuộc tính
kết trong văn bản
định dạng cho liên kết

Đưa hình ảnh vào văn bản với

Thẻ hình ảnh Img <img>
các thuộc tính của ảnh

<table>
<tr>Cặp thẻ tạo
table, tr,
Cặp thẻ tạo bảng dòng</tr> Tạo bảng
td
<td>Cặp thẻ tạo
cột</td>

Tạo vùng làm việc với form

với các thuộc tính: name,
Cặp thẻ tạo form form <form></form> action, method (phương thức
truyền dữ liệu trong form, có
giá trị là GET hoặc POST)

Thẻ khai báo một <input type=“” Tạo ra một trường để người
input
phần tử textbox name=“” value=“”> dùng nhập dữ liệu
1.2 CSS
1.2.1 Khái niệm
CSS (viết tắt của cụm từ Cascading Style Sheets), là ngôn ngữ được sử dụng để
tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML).
CSS là ngôn ngữ tạo nên phong cách cho trang web. Nếu như HTML là ngôn ngữ
nền tảng cho một website thì CSS định hình phong cách (tất cả những gì tạo nên giao
diện website).
1.2.2 Thuộc tính
Các thuộc tính về kích thước: width, height,…
Các thuộc tính phông nền: background-color, background-image, background-
repeat, background-position,…
Các thuộc tính về font chữ: font-family, font-style, font-weight, font-size,…
Các thuộc tính về text: color, text-align, text-indent, word-spacing, text-
transform,…
Thuộc tính ID: Cú pháp: id=“tên_id”. Khi gọi ID ta dùng dấu “#”.
Thuộc tính class: Cú pháp: class=“tên_class”. Khi gọi class ta dùng dấu “.”.
Trong CSS, mô hình hộp (box model) mô tả cách mà CSS định dạng khối không
gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền),
margin (căn lề).
1.2.3 Cấu trúc và thuộc tính
Vùng_chọn {
thuộc tính 1: giá trị 1;
thuộc tính 2: giá trị 2;
…;
}
Trong đó vùng_chọn có thể là tên thẻ (p, a, img, h1,…), id, class,…
1.2.4 Nhúng CSS vào website
Có 3 cách nhúng CSS vào website:
 Inline CSS: Nhúng trực tiếp vào thẻ HTML xác định thông qua thuộc tính
style.
Ví dụ:
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Inline CSS</h1>
</body>

 Internal CSS: Viết các đoạn mã CSS trong cặp thẻ <style></style> được
đặt trong cặp thẻ <head></head>.
Ví dụ:
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
</style>
</head>

 External CSS: đoạn mã CSS được viết ở một file .css riêng biệt rồi được
liên kết thông qua thẻ <link> đặt trong cặp thẻ <head></head>.
Ví dụ:
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
Trong đó file style.css chứa các đoạn mã CSS. Ví dụ:
.body{
background-color: black;}
1.3 Javascript
1.3.1 Khái niệm
Javascript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong
HTML giúp website sống động hơn. Có thêm JavaScript sẽ làm cho website trở nên
“động” hơn khi xử lí các sự kiện (events) so với việc chỉ sử dụng HTML và CSS
Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome,…
Trong javascript cũng có các khái niệm về biến, câu điều kiện, vòng lặp, hàm,
mảng một chiều, mảng 2 chiều,…
Javascript có thể chạy ở cả bên client và bên server.
1.3.2 Viết các đoạn mã javascript vào trong tài liệu HTML
Các đoạn mã javascript có thể được viết trực tiếp trong cặp thẻ <script></script>
Ví dụ:
<script>
document.getElementById("id").innerHTML = "Javascript";
</script>

Ngoài ra, các mã lệnh này có thể được viết vào một file .js riêng biệt rồi liên kết
thông qua thuộc tính src trong thẻ <script>
Ví dụ:
<script src="app.js"></script>
Trong đó file app.js chứa các đoạn mã javascript.
1.4 Visual Studio Code
Visual Studio Code là một trong những trình soạn thảo mã nguồn phổ biến nhất
được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng
và là mã nguồn mở chính là những ưu điểm vượt trội khiến Visual Studio Code ngày
càng được ứng dụng rộng rãi.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax
highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nhờ tính
năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím
tắt, và các tùy chọn khác.
 CHƯƠNG 2: THIẾT KẾ HỆ THỐNG
Chương 2 nói về các giai đoạn thực hiện sản phẩm, bao gồm phân tích yêu cầu đề
tài, tạo sơ đồ chức năng, chuẩn hoá, tạo cơ sở dữ liệu.
2.1 Phân tích yêu cầu đề tài
2.1.1 Yêu cầu
Đây là một website giúp người dùng có thể đăng ký tài khoản, đăng nhập để
xem ,mua sản phẩm ,cho sản phẩm vào giỏ hàng . Đối với quản trị viên còn có thể
thêm sửa xóa các các sản phẩm,thay đổi thông tin chi tiết sản phẩm.
2.1.2 Yêu cầu đặt ra
2.1.2.1 Thiết bị và phần mềm
Máy tính có thể thiết kế được website.
Phần mềm viết các mã lệnh: Visual Studio Code.
2.1.2.2 Yêu cầu trang web
Hệ thống gồm 2 phần:
- Phần dành cho người sử dụng:
Người dùng có thể đăng nhập, đăng kí tài khoản,tìm kiếm sản phẩm theo tên hang
hay mã sản phẩm,cũng như qua số lượt đánh giá.Thêm hoặc bớt sản phẩm vào giỏ
hàng và có thể xem lịch sử mua hàng.
- Phần dành cho người quản trị:
Người quản trị có quyền kiểm soát mọi hoạt động của hệ thống:
- Thêm, sửa, xóa sản phẩm, điều chỉnh giá và thông tin.
- Thống kê lượng hàng bán ra.
2.2 Sơ đồ phân cấp chức năng

Hình 2.2 Sơ đồ phân cấp chức năng

Mô tả chức năng cụ thể:
1. Đăng kí: người dùng tạo tên, email đăng kí, mật khẩu . Thông tin sau khi đăng
kí sẽ được lưu vào database. Người dùng sau khi đăng kí tài khoản hợp lệ có
thể chuyển tiếp tới trang đăng nhập.
2. Đăng nhập: người dùng có tài khoản có thể đăng nhập và chuyển tiếp tới trang
chủ.
3. Tìm kiếm: Người dùng có thể tìm kiếm các sản phẩm thông qua tên, mã sản
phẩm, hãng sản phẩm, cũng như lọc sản phẩm trong tầm giá phù hợp.
4. Mua hàng: Người dùng có thể lựa chọn các sản phẩm yêu thích tại trang chủ
sau đó thêm vào giỏ hàng và đi tới thanh toán. Tại thanh toán người dùng sẽ
cung thông tin để giao hàng và đảm bảo quyền lợi về bảo hành.
5. Đăng xuất: Nếu người dùng đăng xuất, hệ thống sẽ chuyển tiếp đến trang chủ,
trạng thái giỏ hàng sẽ được đưa về trạng thái rỗng.
2.3 Sơ đồ luồng dữ liệu
2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh

Hình 2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh

2.3.2 Sơ đồ luồng dữ liệu mức đỉnh

Hình 2.1.2 Sơ đồ luồng dữ liệu mức đỉnh

2.5 Cơ sở dữ liệu
Ta có các cơ sở dữ liệu:

Hình 2.5.1 Thông tin sản phẩm

 CHƯƠNG 3: KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN
3.1 Kết quả sản phẩm

Hình 3.1 Giao diện đăng nhập của website

Tại màn hình đăng nhập,người dùng sẽ dùng tải khoản đã đăng ký ở trước đó đăng
nhập. Ngoài ra ,khi người dùng quên mật khẩu người dùng có thể sử dụng chức năng
quên mật khẩu.
 Hình 3.2 Giao diện đăng kí của website
Người dùng sẽ đăng ký tài khoản với các thông tin như họ và tên, email, tên đăng nhập, mật
khẩu.Sau đó hệ thống sẽ chuyển trang qua màn hình đăng nhập, người dùng sẽ đăng nhập
với tài khoản và mật khẩu mà đã tạo trước đó
 Hình 3.3 Giao diện trang chủ
Giao diện bao gồm các thông tin về từng hãng điện thoại, các khuyến mãi đặc biệt. Một
danh sách các sản phẩm kèm theo đánh giá và giá kèm theo sản phẩm

Hình 3.4 Giao diện trang chi tiết sản phẩm

Tại giao diện chi tiết trang sản phẩm, hình ảnh sản phẩm được hiển thị kèm theo các thông
số chi tiết của máy, cùng với các khuyến mãi.
 Hình 3.5 Giao diện trang quản lý sản phẩm
Trang quản lý sản phẩm thống kê toàn bộ sản phẩm cảu trang web ,quản trị viên có thể
chỉnh sửa thông tin sản phẩm,xoá khi hết hàng cũng có thể thêm một sản phẩm mới,cập nhật
về giá và thông tin các sản phẩm.
 Hình 3.6 Giao diện trang thêm,chỉnh sửa sản phẩm
Khi thêm một sản phẩm mới,ta sẽ viết các thông tin cho sản phẩm như hãng, giá, mã sản
phẩm,…
 Hình 3.7 Giao diện trang thống kê
Trang web sẽ thống kê số lượng sản phẩm bán theo hãng trong một khoảng thời gian cho
trước

Hình 3.8 Giao diện trang quản lý người dùng

Quản trị viên có thể biết được những ai đã mua hàng thông qua tài khoản mà họ đã tạo,
đồng thời cũng có thể xem được lịch sử mua hàng của người đó hoặc cũng có thể xoá dữ
liệu người đó trên trang web
3.2 Hướng phát triển
Mặc dù đã đạt được những yêu cầu của đề tài đề ra, nhưng để sản phẩm ngày
càng được hoàn thiện và tốt hơn, em xin được đề xuât một số hướng phát triển trong
tương lai cho sản phẩm:
- Cải tiến giao diện website trở nên đẹp mắt, thân thiện với người dùng hơn.
- Tạo chế độ tối, phù hợp với xu thế hiện nay.
- Tạo giao diện tương thích với các thiết bị smartphone, tablet,…
 CHƯƠNG 4: KẾT LUẬN
Trên đây là toàn bộ nội dung của đồ án thiết kế I với đề tài xây dựng website xem
phim trực tuyến của em.
Quá trình thực hiện đồ án đã giúp em hiểu biết được quy trình xây dựng một
website, nắm được cái phân tích thiết kế hệ thống, thiết kế cơ sở dữ liệu, các công cụ
để lập trình như Javascript.
Trong suốt quá trình thực hiện đề tài, em đã cố gắng, tích cực tìm hiểu và học hỏi
để có được kết quả tốt nhất. Sản phẩm về cơ bản đã được hoàn thành tuy nhiên do
trình độ và hiểu biết còn hạn chế nên sản phẩm không thể tránh khỏi những thiếu sót.
Em mong nhận được những ý kiến đóng góp của cô để có thể tiến bộ hơn trên con
đường học tập.
 TÀI LIỆU THAM KHẢO
[1] https://vi.wikipedia.org/wiki/HTML
[2] https://vi.wikipedia.org/wiki/CSS
[3] https://itviec.com/blog/hoc-nodejs/
[4] https://www.hostinger.vn/huong-dan/khac-biet-giua-inline-external-va-internal-
style-css/
[5] https://topdev.vn/blog/html-la-gi/https://topdev.vn/blog/css-la-gi/
[6] https://topdev.vn/blog/cach-thuc-hoat-dong-cua-javascript-tong-quan-ve-engine-
runtime-call-stack/
[7] https://www.w3schools.com/js/default.asp
[8] https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
[9] https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#successful_responses
[10]Tài liệu HTML, CSS:
https://www.youtube.com/playlist?list=PL_-VfJajZj0U9nEXa4qyfB4U5ZIYCMPlz
[11] Tài liệu Javascript:
https://www.youtube.com/playlist?list=PL_-VfJajZj0VgpFpEVFzS5Z-lkXtBe-x5