BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN

HỌC PHẦN: THIẾT KẾ WEB
ĐỀ TÀI: ĐỀ SỐ 10: THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI
MOBIEPHONE
Giảng viên hướng dẫn: Ths. Phạm Thị Loan

Sinh viên thực hiện Lớp Khóa

Nguyễn Bá Pha DCCCNTT13.10.16 K13

Bùi Văn Giáp DCCCNTT13.10.16 K13

Sằm Thị Hà DCCCNTT13.10.16 K13

Hoàng Thanh Tùng DCCCNTT13.10.16 K13

Ngô Văn Quân DCCCNTT13.10.16 K13

Bắc Ninh, Năm 2023

 BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN

HỌC PHẦN: THIẾT KẾ WEB

ĐỀ TÀI: ĐỀ SỐ 10: THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI

MOBIEPHONE
Điểm Điểm
STT Sinh viên thực hiện Mã sinh viên
bằng số bằng chữ

1 Nguyễn Bá Pha 20223212

2 Bùi Văn Giáp

20223020

3 Sằm Thị Hà 20223064

4 Hoàng Thanh Tùng

20223160

5 Ngô Văn Quân

20223223

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)

2
 MỤC LỤC

DANH MỤC VIẾT TẮT.....................................................................................................4

LỜI MỞ ĐẦU......................................................................................................................5
Bảng phân công nhiệm vụ...................................................................................................7
LỜI CẢM ƠN......................................................................................................................8
Chương 1. Cơ sở lý thuyết về thiết kế web..........................................................................9
Chương 2. Mô hình hệ thống.............................................................................................13
2.1 Đối tượng người dùng..............................................................................................13
2.2 Chức năng của hệ thống...........................................................................................13
2.3. Kịch bản sử dụng và các màn hình.........................................................................13
2.4 Thiết kế bản mẫu.....................................................................................................17
2.5 Các công nghệ, công cụ sử dụng trong dự án..........................................................24
Chương 3. Phát triển hệ thống...........................................................................................25
3.1. Các bố cục chính. (Layout).....................................................................................25
Kết luận..............................................................................................................................31
Kết quả thu được............................................................................................................31
Hạn chế và hướng phát triển của đề tài..........................................................................31
Phụ Lục..............................................................................................................................32
Các Tài Liệu Tham Khảo..............................................................................................32

3
 DANH MỤC VIẾT TẮT

Số thứ tự Từ viết tắt Giải thích

1 Web Website

4
 LỜI MỞ ĐẦU
Chúng ta đang sống trong những năm đầu của thế kỷ XXI , thế kỷ phát triển
của ngành công nghệ thông tin (CNTT). Vì vậy, việc tiếp cận và cập nhật công
nghệ này đã, đang và sẽ mang lại cho chúng ta rất nhiều lợi ích và thuận tiện trong
công việc, tiets kiệm thời gian cũng như giảm các chi phí trong công tác quản lý.

Trong những năm gần đây, CNTT đóng vai trò rất lớn. Song song với việc phát
triển ứng dụng tin học vào trong cuộc sống, tin học được ứng dụng rất rộng rãi
trong các lĩnh vực khoa học kĩ thuật, các ngành quản lý và các hoạt động xã hội
thông qua mạng internet. Đóng vai trò quan trọng như trên nền tin học đã được đưa
vào quản lý nhân sự, điểm, bán hàng, nhập xuất vật tư, thư viện….

5
 Điện thoại là một thiết bị công nghệ thông tin giúp con người giao tiếp với nhau
từ xa thông qua hệ thống mạng viễn thông. Với việc mua sắm trực tuyến ngày nay
ngày càng phổ biến và thị trường rất tiềm năng, chúng em đã tạo ra web bán điện
thoại là để tài cho bài tiểu luận.

6
 Bảng phân công nhiệm vụ

STT Công việc Họ và tên Đánh giá

1 Lời mở đầu Sằm Thị Hà

2 Cơ sở lý thuyết về thiết kế Bùi Văn Giáp

web

3 Giao diện trang chủ, sản phẩm Nguyễn Bá Pha

Hoàng Thanh Tùng

Ngô Văn Quân

4 Giao diện phụ kiện, giới thiệu Bùi Văn Giáp

Sằm Thị Hà

Hoàng Thanh Tùng

5 Giao diện liên hệ Bùi Văn Giáp

Nguyễn Bá Pha

Ngô Văn Quân

6 Form đăng ký đăng nhập Ngô Văn Quân

Nguyễn Bá Pha

7 Kết luận Sằm Thị Hà

7
 LỜI CẢM ƠN
Lời đầu tiên, chúng em xin được gửi lời cảm ơn chân thành nhất đến cô Phạm
Thị Loan. Trong quá trình học tập và tìm hiểu môn thiết kế web, chúng em đã nhận
được rất nhiều sự quan tâm, giúp đỡ, hưỡng dẫn tâm huyết và tận tình của cô. Cô
đã giúp chúng em tích lũy thêm nhiều kiến thức về môn học này để có thể hoàn
thành được bài tập lớn về đề tài: Thiết kế website bán điện thoại mobiphone.
Chúng em cũng xin được gửi lời cảm ơn đến quý thầy, cô giáo trường Đại học
Công nghệ Đông Á, đặc biệt là các thầy, cô khoa công nghệ thông tin- những
người đã truyền lửa và giảng dạy kiến thức cho em suốt thời gian qua.

Mặc dù đã rất nỗ lực, song do bản thân còn nhiều hạn chế về kiến thức nên khó
tránh khỏi có những thiếu sót trong bài làm. Chúng em kính mong nhận được sự
đóng góp ý kiến của quý thầy cô để làm phong phú hơn nữa nội dung về đề tài:
Thiết kế website bán điện thoại mobiphone.

Chúng em xin trân trọng cảm ơn!

8
 Chương 1. Cơ sở lý thuyết về thiết kế web
1.1. .Khái niệm thiết kế web.

Thiết kế web là quá trình tạo ra các trang web. Nó bao gồm nhiều khía cạnh
khác nhau, bao gồm thiết kế giao diện, thiết kế đồ họa, cấu trúc thông tin, thiết kế
người dùng, chuẩn SEO, và nhiều hơn nữa.

Có nhiều nguyên tắc và kỹ thuật cần được áp dụng trong quá trình thiết kế web:

Thiết kế giao diện: Đây là quá trình tạo ra giao diện người dùng cho trang web.
Mục tiêu chính là làm cho trang web dễ sử dụng và hấp dẫn với người dùng.

Thiết kế đồ họa: Đây là việc tạo ra các yếu tố hìnhảnh cho trang web, bao gồm hình
ảnh, logo, và các yếu tố đồ họa khác.

9
Cấu trúc thông tin: Đây là việc tổ chức và sắp xếp thông tin trên trang web một
cách logic và dễ hiểu.

Thiết kế người dùng (UX): Đây là quá trình tạo ra một trải nghiệm người dùng dễ
dàng và thoải mái khi sử dụng trang web.

Chuẩn SEO: Đây là việc tối ưu hóa trang web để nó có thể được tìm thấy dễ dàng.

1.2.Các ngôn ngữ lập trình web

1.2.1.Ngôn ngữ HTML.

HTML (viết tắt của từ HyperText Markup Language, hay còn gọi là "Ngôn
ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên
các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ
như CSS và các ngôn ngữ kịch bản giống như JavaScript.

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho
lưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện. HTML mô
tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao
gồm cho sự xuất hiện của tài liệu.

Các phần tử HTML là các khối xây dựng của các trang HTML. Với cấu trúc
HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng
vào trang được hiển thị. HTML cung cấp một phương tiện để tạo tài liệu có cấu
trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs,
lists, links, quotes và các mục khác. Các phần tử HTML được phân định bằng các
thẻ, được viết bằng dấu ngoặc nhọn. Các thẻ như <img /> và <input /> giới thiệu
trực tiếp nội dung vào trang. Các thẻ khác như <p> bao quanh và cung cấp thông
tin về văn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ. Các trình
duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn tả nội dung của
trang.
10
 HTML có thể nhúng các chương trình được viết bằng scripting như
JavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trang web. Việc
bao gồm CSS xác định giao diện và bố cục của nội dung. World Wide Web
Consortium (W3C), trước đây là đơn vị bảo trì HTML và là người duy trì hiện tại
của các tiêu chuẩn CSS, đã khuyến khích việc sử dụng CSS trên HTML trình bày
rõ ràng kể từ năm 1997.

1.2.2.Ngôn ngữ CSS.

CSS là chữ viết tắt của Cascading Style Sheets, nó là một 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). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể
hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như
việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể
thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ,
font chữ, thay đổi cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm
1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng
chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là
nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ
markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên
giao diện website), chúng là không thể tách rời.

1.2.3.Ngôn ngữ JavaScript.

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web
tương tác. Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động
11
và bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm
người dùng của trang web. Là ngôn ngữ kịch bản phía máy khách, JavaScript là
một trong những công nghệ cốt lõi của World Wide Web. Ví dụ: khi duyệt internet,
bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp
để hiển thị hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc
bạn thấy các hiệu ứng của JavaScript.

12
 Chương 2. Mô hình hệ thống.
2.1 Đối tượng người dùng.

Những người hay lên mạng mua hàng trực tuyến, những đối tượng đam mê đồ
điện tử, những tín đồ của các hãng điện thoại lên cập nhật các mẫu điện thoại mới,
những khách hàng ở xa muốn mua điện thoại.

2.2 Chức năng của hệ thống.

Chức năng chính của hệ thống:

Cung cấp các thông tin cho người dùng: Cung cấp các thông tin chi tiết về các
dòng sản phẩm điện thoại mà khách hàng quan tâm.

Website cung cấp cho người dùng biểu mẫu để đăng nhập, đăng ký để trở thành
thành viên của web và nhận những ưu đãi hấp dẫn. Form đăng ký sẽ lưu tài khoản
đăng ký của người dùng, check xem password và confirm password có giống nhau
hay không, form đăng nhập sẽ check tài khoản mật khẩu có đúng hay không.

2.3. Kịch bản sử dụng và các màn hình.

Mỗi usecase sẽ có 1 biểu đồ tuần tự, từ các biểu đồ tuần tự này nêu ra số lượng
giao diện, mô tả thành phần của mỗi màn hình giao diện.

13
Khi người dùng nhấp vào Trang chủ:

14
Khi người dùng nhấp vào Sản Phẩm:

Khi người dùng nhấp vào Liên Hệ:

Khi người dùng nhấp vào Phụ Kiện:

15
Khi người dùng nhấp vào Giới thiệu:

Khi người dùng nhấp vào Đăng Ký hoặc Đăng Nhập:

16
2.4 Thiết kế bản mẫu.

Trang chủ người dùng thấy lần đầu khi mới truy cập vào trang web: ( Trang chủ
của website ):

17
18
 Khi người dùng nhấp vào phần Sản Phẩm thì trang web sẽ chuyển đến một
layout sản phẩm của trang web:

19
Đây là các layout khi người dùng nhấn chuột vào Liên Hệ:

20
Khi người dùng nhấn vào phần Đăng nhập sẽ làm hiện lên form đăng nhập

21
Nhấn vào chữ Đăng ký sẽ ra form đăng ký

22
Nhấn vào chữ Giới thiệu sẽ ra form giới thiệu thành viên:

Nhấn vào chữ Phụ kiện sẽ ra form phụ kiện:

23
2.5 Các công nghệ, công cụ sử dụng trong dự án.

Visual studio code: phần mềm viết code cho dự án

Phần mềm hỗ trợ cho việc thiết kế các giao diện và các use case: Draw.io

24
 Chương 3. Phát triển hệ thống.
3.1. Các bố cục chính. (Layout)

Trang Chủ:

25
Sản Phẩm:

26
Liên Hệ:

27
Đăng nhập:

28
Đăng ký:

Giới thiệu:

29
Phụ kiện:

30
 Kết luận
Kết quả thu được.

Chúng em đã hoàn thành bài tập lớn với đề tài “Xây dựng web bán điện thoại”
dưới sự hướng dẫn cảu cô Ths. Phạm Thị Loan. Chúng em bằng những kiến thức
đã được học và kết quả của việc làm bài tập nhóm đã làm ra giao diện web bán điện
thoại. Bài làm của chúng em còn nhiều thiếu sót mong các thầy cô bổ sung góp ý
để chúng em hoàn thiện các dự án sắp tới được tốt hơn. Chúng em xin chân thành
cảm ơn cô Ths. Phạm Thị Loan đã giúp đỡ chúng em trong quá trình hoàn thiện bài
tập.

Hạn chế và hướng phát triển của đề tài.

Do kiến thức còn hạn chế và thời gian có hạn nên web còn nhiều hạn chế. Đề tài có
thể phát triển thêm:

Thêm mặt hàng cần mua vào giỏ hàng

Gửi được liên hệ với shop
Thêm feedback
……….

31
 Phụ Lục
Các Tài Liệu Tham Khảo
1. https://www.w3schools.com/ (Truy cập lần cuối 14:57 ngày
25/10/2023).

2. https://viettuts.vn/ (Truy cập lần cuối 03:05 ngày 25/10/2023).

3. https://cellphones.com.vn/ (Truy cập lần cuối 11:14 ngày 26/10/2023).

32