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 MÁY TÍNH

Giảng viên hướng dẫn: TS. Lê Quang Thắng

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

Nguyễn Văn Hiếu Điện tử 02 – K65 20203421

Hà Nội, 8-2023
 MỤC LỤC
LỜI NÓI ĐẦU ................................................................................................................ 4
TÓM TẮT ĐỒ ÁN .......................................................................................................... 7
CHƯƠNG 1: LÝ THUYẾT ............................................................................................. 8
1.1 HTML ................................................................................................................... 8
1.1.1 Khái niệm ........................................................................................................... 8
1.1.2 Cấu trúc một đoạn HTML ................................................................................... 8
1.1.3 Các thẻ thường gặp trong HTML ........................................................................ 9
1.2 CSS...................................................................................................................... 11
1.2.1 Khái niệm ......................................................................................................... 11
1.2.2 Thuộc tính ......................................................................................................... 11
1.2.3 Cấu trúc và thuộc tính ....................................................................................... 11
1.2.4 Nhúng CSS vào website .................................................................................... 12
1.3 Javascript ............................................................................................................. 13
1.3.1 Khái niệm ......................................................................................................... 13
1.4 Visual Studio Code .............................................................................................. 13
CHƯƠNG 2: THIẾT KẾ HỆ THỐNG ........................................................................... 15
2.1 Phân tích yêu cầu đề tài........................................................................................ 15
2.1.1 Yêu cầu ............................................................................................................. 15
2.1.2 Yêu cầu đặt ra ................................................................................................... 15
2.1.2.1 Thiết bị và phần mềm ..................................................................................... 15
2.1.2.2 Yêu cầu trang web .......................................................................................... 15
2.2 Sơ đồ phân cấp chức năng.................................................................................... 16
2.3 Sơ đồ luồng dữ liệu .............................................................................................. 17
2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh .................................................................... 17
2.3.2 Sơ đồ luồng dữ liệu mức đỉnh ........................................................................... 17
2.4 Chuẩn hóa……………………………………………………………………………
 2.5 Cơ sở dữ liệu........................................................................................................ 20
CHƯƠNG 3: KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN ................................................... 19
3.1 Kết quả sản phẩm................................................................................................. 19
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
máy tính 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 thầy Lê Quang Thắng.
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..............................................................17
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 ........................................... 9
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 máy tính
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>
 Phân chia khu vực, giúp trình
Cặp thẻ phân vùng div <div> </div> 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 .
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, 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

Website bán máy tính

trực tuyến

Thêm vào
Đăng ký Đăng nhập Tìm kiếm Đăng xuất
giỏ hà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
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.
 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ề danh mục sản phẩm, giới thiệu về cửa hàng. 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 giá của sản phẩm.
 Hình 3.5 Giao diện trang quản lý sản phẩm
Trang quản lý sản phẩm theo các danh mục riêng. Mỗi danh mục là một loại sản phẩm có
chung thuộc tính, từ đó có thể tìm được các sản phẩm theo yêu cầu nhanh chóng hơn.

Hình 3.6 Giao diện trang hỗ trợ khách hàng

Mọi thắc mắc của khách hàng về sản phẩm hoặc cần sự trợ giúp của nhân viên chăm sóc
khách hàng cho việc xem xét và hiểu rõ thêm về sản phẩm sẽ được gửi trực tiếp qua mục
trên hoặc liên hệ qua thông tin liên lạc.
 Hình 3.6 Giao diện trang giỏ hàng
Khi thêm một sản phẩm mới vào giỏ hàng, sản phẩm đó sẽ được hiện thị vào mục giỏ hàng.
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 bán
máy tính 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