Website bán điện thoại

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á
KHOA: CÔNG NGHỆ THÔNG TIN

BÀI TẬP LỚN
HỌC PHẦN: THIẾT KẾ WEB
ĐỀ TÀI 10: THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI
MOBIPHONE
Sinh viên thực hiện

Khóa

Lớp

Mã sinh viên

Nguyễn Đức Duy

13

DCCNTT13.10.14

20222598

Bắc Ninh, năm 2023


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á
KHOA: CÔNG NGHỆ THÔNG TIN

BÀI TẬP LỚN
HỌC PHẦN: THIẾT KẾ WEB
ĐỀ TÀI 10: THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI
MOBIPHONE

STT Sinh viên thực hiện
1

Nguyễn Đức Duy

Mã sinh
viên

Điểm bằng
số

Điểm bằng
chữ

20222598

CÁN BỘ CHẤM 1

CÁN BỘ CHẤM 2

(Ký và ghi rõ họ tên)

(Ký và ghi rõ họ tên)

LỜI NĨI ĐẦU
Trong thời đại của cơng nghệ thơng tin và internet, website là một công cụ
hiệu quả để truyền tải thơng tin, quảng bá hình ảnh và thương hiệu, cũng như tạo ra
những giá trị kinh tế cho các cá nhân và tổ chức. Trong lĩnh vực du lịch, website
càng có vai trị quan trọng hơn, bởi nó khơng chỉ giúp khách hàng tiếp cận được
với những thông tin về các điểm đến, tour du lịch, dịch vụ lưu trú, mà cịn giúp họ
đặt tour, thanh tốn và nhận được sự hỗ trợ từ nhà cung cấp dịch vụ du lịch.
Để xây dựng được một website du lịch chuyên nghiệp, hấp dẫn và hiệu quả,
người thiết kế cần phải có những kiến thức và kỹ năng về thiết kế giao diện, lập
trình web, quản trị cơ sở dữ liệu, cũng như nắm bắt được nhu cầu và xu hướng của
thị trường du lịch. Đây là một công việc không hề đơn giản và đòi hỏi sự sáng tạo,
linh hoạt và tỉ mỉ từ người thiết kế.
Bài tập lớn này là một phần của môn học Thiết kế web, do Thầy Nguyễn
Quang Hưng giảng dạy. Mục tiêu của bài tập lớn là để sinh viên có thể áp dụng
những kiến thức và kỹ năng đã học trong môn học vào thực tế, qua việc thiết kế
một website du lịch theo yêu cầu đề bài. Bài tập lớn cũng là cơ hội để sinh viên rèn
luyện khả năng làm việc nhóm, phân cơng cơng việc, giải quyết vấn đề và trình bày
báo cáo.
Báo cáo này gồm có 3 chương chính: Chương 1 tổng quan về website du
lịch; Chương 2 bố cục layout và cách thức thiết kế; Chương 3 giao diện của
website; Chương 4 đánh giá kết quả và hướng phát triển.


MỤC LỤC

LỜI NÓI ĐẦU..........................................................................................................1
MỤC LỤC.................................................................................................................2
DANH MỤC CÁC TỪ VIẾT TẮT.........................................................................4
CHƯƠNG 1: TỔNG QUAN....................................................................................5
1.1. Cơ sở lý thuyết về thiết kế web.......................................................................5

1.1.1. Lý thuyết cơ bản.......................................................................................5
1.1.2. Cách sử dụng............................................................................................6
1.2. Giới thiệu.........................................................................................................7
1.2.1. Lý do chọn đề tài......................................................................................7
1.2.2. Phân tích đề tài.........................................................................................8
1.2.2.1. Yêu cầu..............................................................................................8
1.2.2.2. Chức năng.........................................................................................8
CHƯƠNG 2: BỐ CỤC LAYOUT VÀ CÁCH THỨC THIẾT KẾ......................9
2.1. Logo................................................................................................................9
2.2. Ý tưởng............................................................................................................9
2.3. Công cụ hỗ trợ.................................................................................................9
2.4.Sử dụng boostrap tạo khung...........................................................................10
2.5. Phần đầu giao diện(header)...........................................................................11
2.6. Danh mục sản phẩm......................................................................................12
2.7.Thiết kế banner...............................................................................................13
2.8. Tạo các mục sản phẩm..................................................................................14


2.9. Model thanh tốn...........................................................................................16
2.10. Thơng tin đăng nhập....................................................................................18
CHƯƠNG 3: GIAO DIỆN WEBSITE.................................................................20
3.1. Trang chủ.......................................................................................................20
3.1.1.Kết quả đạt được:....................................................................................20
3.1.2.Hạn chế....................................................................................................20
TÀI LIỆU THAM KHẢO.....................................................................................22


DANH MỤC CÁC TỪ VIẾT TẮT
Từ viết tắt

Từ đầy đủ

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

DOM

Document Object Model

BOM

Browser Object Model


CHƯƠNG 1: TỔNG QUAN
1.1. Cơ sở lý thuyết về thiết kế web
1.1.1. Lý thuyết cơ bản
 HTML là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để xác định cấu
trúc và nội dung của trang web. HTML gồm các thẻ (tag) và các thuộc tính
(attribute) để tạo ra các phần tử (element) trên trang web. Một số thẻ HTML
cơ bản là: <html>, <head>, <body>, <title>,

đến

,

, <a>,
<img>, <div>, <span>, <ul>, <li> và nhiều thẻ khác. Một số thuộc tính
HTML cơ bản là: id, class, href, src, alt, style và nhiều thuộc tính khác.
 CSS là ngôn ngữ định kiểu siêu văn bản, được sử dụng để tạo ra giao diện và
hiệu ứng cho trang web. CSS gồm các quy tắc (rule) và các thuộc tính

(property) để áp dụng cho các phần tử HTML. Một quy tắc CSS gồm một bộ
chọn (selector) và một khối khai báo (declaration block). Một khối khai báo
gồm một hoặc nhiều thuộc tính CSS và giá trị của chúng. Một số bộ chọn
CSS cơ bản là: tên thẻ, id, class, phần tử con, phần tử anh em, thuộc tính và
nhiều bộ chọn khác. Một số thuộc tính CSS cơ bản là: color, backgroundcolor, font-family, font-size, font-weight, text-align, margin, padding, border
và nhiều thuộc tính khác.
 Bootstrap là một framework CSS phổ biến, được sử dụng để tạo ra các trang
web đáp ứng (responsive) và thân thiện với thiết bị di động. Bootstrap gồm
các thành phần (component), bố cục (layout) và tiện ích (utility) để giúp bạn
thiết kế trang web nhanh chóng và dễ dàng. Một số thành phần Bootstrap cơ
bản là: navbar, carousel, card, modal, alert, badge, button, form, table và
nhiều thành phần khác. Một số bố cục Bootstrap cơ bản là: container, row,
column, grid system và nhiều bố cục khác. Một số tiện ích Bootstrap cơ bản
là: display, flex, margin, padding, position, border, color và nhiều tiện ích
khác.


 JavaScript là ngơn ngữ lập trình siêu văn bản, được sử dụng để tạo ra các
chức năng và hành vi cho trang web. JavaScript gồm các biến (variable),
kiểu dữ liệu (data type), toán tử (operator), câu lệnh điều khiển (control
statement), hàm (function), đối tượng (object), mảng (array), chuỗi (string),
số (number), boolean, null, undefined và nhiều khái niệm khác. JavaScript
cũng có thể tương tác với các phần tử HTML thơng qua DOM (Document
Object Model) và BOM (Browser Object Model).
1.1.2. Cách sử dụng
 HTML được sử dụng để tạo ra các trang web tĩnh, tức là chỉ có nội dung và
khơng có chức năng hay hành vi. Để sử dụng HTML, cần một trình soạn
thảo văn bản (như Notepad) và một trình duyệt web (như Chrome). Sau đó,
viết các thẻ HTML trong tệp văn bản và lưu lại với đuôi .html. Cuối cùng,
mở tệp đó bằng trình duyệt để xem kết quả.

 CSS được sử dụng để tạo ra giao diện và hiệu ứng cho các trang web HTML.
Để sử dụng CSS, có thể viết các quy tắc CSS trong cùng tệp HTML hoặc
trong một tệp riêng biệt với đuôi .css. Nếu viết CSS trong tệp riêng, cần liên
kết tệp đó với tệp HTML bằng thẻ <link>. Sau đó, mở tệp HTML bằng trình
duyệt để xem kết quả.
 Bootstrap được sử dụng để tạo ra các trang web đáp ứng và thân thiện với
thiết bị di động. Để sử dụng Bootstrap, cần liên kết các tệp Bootstrap (như
bootstrap.min.css và bootstrap.min.js) với tệp HTML bằng các thẻ <link> và
<script>. Ta cũng cần liên kết jQuery và Popper.js, là hai thư viện JavaScript
hỗ trợ cho Bootstrap. Sau đó, mở tệp HTML bằng trình duyệt để xem kết
quả.
 JavaScript được sử dụng để tạo ra các chức năng và hành vi cho các trang
web HTML. Để sử dụng JavaScript, ta có thể viết mã JavaScript trong cùng
tệp HTML hoặc trong một tệp riêng biệt với đuôi .js. Nếu viết JavaScript


trong tệp riêng, ta cần liên kết tệp đó với tệp HTML bằng thẻ <script>. Sau
đó, mở tệp HTML bằng trình duyệt để xem kết quả.
1.2. Giới thiệu
1.2.1. Lý do chọn đề tài
Thị trường điện thoại di động là một trong những thị trường lớn nhất trên thế giới.
Sự phổ biến của điện thoại di động làm cho nó trở thành một nguồn cơ hội kinh
doanh đáng kể.
Sự phụ thuộc ngày càng lớn vào điện thoại di động trong cuộc sống hàng ngày đã
tạo ra một nhu cầu ổn định cho sản phẩm này. Điện thoại di động không chỉ là một
cơng cụ liên lạc, mà cịn là một phần quan trọng của cuộc sống số.Mở cửa hàng
điện thoại di động có thể giúp bạn xây dựng thương hiệu và thăng tiến thương hiệu
của mình thơng qua sản phẩm và dịch vụ chất lượng.
Vì vậy, em đã chọn đề tài thiết kế website bán điện thoại làm bài tập lớn.
Đây là một đề tài rất thực tiễn và có ý nghĩa. Em có đam mê và quan tâm đến điện

thoại di động,chọn đề tài kinh doanh bán điện thoại có thể mang lại nhiều cơ hội và
tiềm năng thành công, nhưng đòi hỏi cẩn thận, nghiên cứu thị trường và kế hoạch
kinh doanh cẩn thận. . Em mong muốn nhận được những kết quả và hiệu quả từ đề
tài này.


1.2.2. Phân tích đề tài
1.2.2.1. Yêu cầu
 Website bán điện thoại phải có giao diện thân thiện, đẹp mắt, dễ sử dụng và
tương thích với nhiều thiết bị khác nhau (máy tính, điện thoại, máy tính
bảng…).
 Website bán điện thoại cung cấp các kênh liên hệ và hỗ trợ khách hàng để
giải quyết các vấn đề hoặc thắc mắc của họ
 Website bán điện thoại phải có chức năng thanh tốn trực tuyến an tồn và
tiện lợi cho người dùng.
 Website bán điện thoại phải có chức năng đánh giá, nhận xét, góp ý về các
trải nghiệm cho người dùng.
1.2.2.2. Chức năng
 Thiết kế và hỗ trợ những trang web tốt nhất cho các cơng ty kinh doanh.
 Hình thành nên những mạng lưới kinh doanh rộng lớn trong và ngồi nước.
 Tạo sựu gắn kiết và trao đổi bn bán dễ hơn giữa cửa hàng( công ty) với
khách hàng.
 Tăng tính thuận lợi, nhanh chóng cho các cửa hàng( công ty) kinh doanh.
 Đem lại nhiều sự lựa chọn, tư vấn nhiệt tình giữa nhân viên bán hàng với
khách hàng, tạo một cầu nối giữa cửa hàng( công ty) với khách hàng.


CHƯƠNG 2: BỐ CỤC LAYOUT VÀ CÁCH THỨC THIẾT KẾ
2.1. Logo

2.2. Ý tưởng
- Thiết kế web bán hàng: Mỹ phẩm
- Sử dụng bootstrap khn mẫu có sẵn
2.3. Cơng cụ hỗ trợ
-Sử dụng ứng dụng Visual studio code

-Công cụ hỗ trợ Livesever


2.4.Sử dụng boostrap tạo khung


2.5. Phần đầu giao diện(header)
Cài đặt:
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Trang chu
# <span class="sronly">(current)</span></a>
</li>
<li class="nav-item dropdown">
data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">
Sa
#n phẩ#
m
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Điện thoại</a>
<a class="dropdown-item" href="#">Laptop</a>
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartwatch </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên hệ</a>

</li>
<a class="nav-link" href="#">Blog</a>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" arialabel="Search">
<button class="btn btn-outline-success" type="submit">Search</button>


</form>

Kết quả:


2.6. Danh mục sản phẩm
Cài đặt:

<li class="nav-item dropdown">
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Sa
#n phẩ#
m
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Điện thoại</a>
<a class="dropdown-item" href="#">Laptop</a>
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartwatch </a>
</div>
</li>

Kết quả:


2.7.Thiết kế banner
Cài đặt:
<!-- Banner -->

style="background-image: url(./img/duyne.png); background-size: cover; backgroundposition: center center; color: white;">
<div class="container-1 text-center">

</div>

</div>

Kết quả:

class="display-4" style="color :#080808 !important;">Duy Nguyen Vinaphone

2.8. Tạo các mục sản phẩm
Cài đặt:

Kết quả :



2.9. Model thanh toán
Cài đặt:

Kết quả :