Tiểu luận môn học lập trình web thiết kế website cửa hàng bán điện thoại

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
KHOA KỸ THUẬT – CÔNG NGHỆ

TIỂU LUẬN MƠN HỌC
LẬP TRÌNH WEB

THIẾT KẾ WEBSITE
CỬA HÀNG BÁN ĐIỆN THOẠI
GVHD: THS. NGUYỄN HỮU VĨNH
Nhóm thực hiện :
Trương Vũ Linh

MSSV: 1824801030194

Lớp: D18PM03

Nguyễn Bảo Tam

MSSV: 1824801030198

Lớp: D18PM03

BÌNH DƯƠNG – 12/2020

0

0


KHOA KỸ THUẬT – CÔNG NGHỆ
NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN

Họ và tên giảng viên: Nguyễn Hữu Vĩnh
Tên đề tài: THIẾT KẾ WEBSITE CỬA HÀNG BÁN ĐIỆN THOẠI
Nội dung nhận xét:
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
Điểm:
Bằng số: .................................................
Bằng chữ:................................................
GIẢNG VIÊN CHẤM
(Ký, ghi rõ họ tên)

NGUYỄN HỮU VĨNH

0

0


MỤC LỤC
LỜI NĨI ĐẦU...............................................................................................................1
DANH MỤC HÌNH.......................................................................................................2

CHƯƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI......................................................................3
1.

Tên Đề Tài....................................................................................................3

2.

Mục Tiêu của Đề Tài....................................................................................3

3.

Ý Nghĩa Của Đề Tài......................................................................................3

4.

Đối Tượng Của Đề Tài..................................................................................3

5.

Một Số Trang Chính Của Website.................................................................3

CHƯƠNG 2. GIỚI THIỆU CÔNG NGHỆ....................................................................4
1.

Giới Thiệu Về ASP.Net.................................................................................4

1.1

ASP.Net là gì?............................................................................................4

1.2

Cơng dụng của ASP.Net.............................................................................4

1.3

Định dạng của HTML................................................................................4

2

Giới thiệu về Visual studio............................................................................4

3

Ngơn ngữ CSS..............................................................................................5

4

Ngơn ngữ Javascript......................................................................................5

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH.............................................................6
1.

Đặc Tả Giao Diện.........................................................................................6

1.1

Giao diện trang chủ....................................................................................6

1.2

Giao diện trang giới thiệu..........................................................................7

1.3

Giao diện trang đăng ký.............................................................................7

1.4

Giao diện trang đăng nhập.........................................................................8

1.5

Giao diện phần điện thoại theo hãng..........................................................9

1.5.1 Giao diện danh mục hãng Apple..............................................................10
1.5.2 Giao diện điện thoại hãng Samsung.........................................................10
1.5.3 Giao diện điện thoại hãng Xiaomi...........................................................12
1.5.4 Giao diện điện thoại hãng Vivo................................................................12
1.6

Giao diện trang chi tiết sản phẩm.............................................................13

1.6.1 Chi tiết điện thoại Apple..........................................................................14
1.6.2 Chi tiết điện thoại Samsung.....................................................................14
1.6.3 Chi tiết điện thoại Xiaomi........................................................................15

0

0

1.6.4 Chi tiết điện thoại Vivo............................................................................15
CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.............................................16
1.

Kết quả đạt được:........................................................................................16

2.

Việc chưa làm được:....................................................................................16

3.

Hướng phát triển của đề tài.........................................................................16

TÀI LIỆU KHAM KHẢO...........................................................................................18

0

0


LỜI NĨI ĐẦU
Hiện nay, trên thế giới cơng nghệ thơng tin đang phát triển mạnh mẽ. Nhiều người
đã trở nên bận rộn với công việc hoặc họ lười đến các cửa hàng để xem và mua các sản
phẩm, đặc biệt là các sản phẩm điện tử. Với sự ra đời của các trang web mua hàng trực
tuyến và các dịch vụ giao hàng tận nơi, việc mua bán online đã trở nên phổ biến và trở
thành nhu cầu chính yếu của mỗi người. Việc tạo ra website để người mua có thể xem
trước sản phẩm, tham khảo cấu hình và giá bán phù hợp là việc thiết yếu. Khách hàng

có thể đặt mua trực tiếp trên web hoặc ra cửa hàng trải nghiệm thử rồi mới quyết định
cuối cùng. Chính vì vậy trong bài báo cáo này tơi chọn đề tài về: “Thiết kế website
cửa hàng bán điện thoại”. Đây là một hệ thống đơn giản nhưng cần thiết để cho phép
khách hàng thoải mái lựa chọn sản phẩm và đặt mua không cần đi ra khỏi nhà.
Đề tài tiểu luận gồm các phần được phân chương như sau:
Chương 1: Tổng quan về đề tài
Chương 2: Giới thiệu công nghệ
Chương 3: Giao diện website
Chương 4:Kết luận và hướng phát triển

0

0


DANH MỤC HÌNH
Hình 1.1 Giao diện trang chủ.............................................................................................6
Hình 1.2 Giao diện trang giới thiệu....................................................................................7
Hình 1.3 Giao diện trang đăng ký......................................................................................8
Hình 1.4 Giao diện trang đăng nhập...................................................................................8
Hình 1.5 Giao diện phần điện thoại theo hãng...................................................................9
Hình 1.5.1 Giao diện điện thoại hãng Apple....................................................................10
Hình 1.5.2 Giao diện điện thoại hãng Samsung................................................................11
Hình 1.5.3 Giao diện điện thoại hãng Xiaomi..................................................................12
Hình 1.5.4 Giao diện điện thoại hãng Vivo......................................................................13
Hình 1.6.1 Giao diện trang chi tiết điện thoại Apple........................................................14
Hình 1.6.2 Giao diện trang chi tiết điện thoại Samsung...................................................14
Hình 1.6.3 Giao diện trang chi tiết điện thoại Xiaomi......................................................15
Hình 1.8.4 Giao diện trang chi tiết điện thoại Vivo..........................................................15

0

0


CHƯƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI
1. Tên Đề Tài.
+ THIẾT KẾ WEBSITE CỬA HÀNG BÁN ĐIỆN THOẠI
2. Mục Tiêu của Đề Tài.
+ Thiết kế Website bán điện thoại
3. Ý Nghĩa Của Đề Tài.
+ Đưa sản phẩm của cửa hàng đến đến gần hơn với người tiêu dùng.
+ Quảng bá thương hiệu.
4. Đối Tượng Của Đề Tài.
+ Đối tượng nghiên cứu chủ yếu là các sản phẩm điện thoại hiện có trên thị trường.
5. Một Số Trang Chính Của Website.
+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm mới của cửa
hàng.
+ Trang Giới thiệu: Đây là trang giúp cho khách hàng xem biết thêm về thông
tin của cửa hàng.
+ Trang liên hệ: Đây là trang mà khách hàng có thể liên hệ với cửa hàng
+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của
trang.
+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của
trang.
+ Trang sản phẩm: Đây là trang khách hàng xem hoặc tham khảo các mặt
hàng của cửa hàng có sẵn để lựa chọn.
+ Trang chi tiết sản phẩm: Đây là trang khách hàng nhấn vào từng sản phẩm để
xem chi tiết cấu hình.

0

0


CHƯƠNG 2. GIỚI THIỆU CÔNG NGHỆ
1.

Giới Thiệu Về ASP.Net
1.1 ASP.Net là gì?

-

ASP.Net là một nền tảng dành cho phát triển web, được Microsoft phát hành và

cung cấp lần đầu tiên vào năm 2002. Nền tảng được sử dụng để tạo ra các ứng dụng
web-based.
-

Phiên bản ASP.Net đầu tiên được triển khai là 1.0 và phiên bản ASP.Net mới

nhất là phiên bản 4.6. ASP.Net được thiết kế để tương thích với giao thức HTTP.
HTTP là giao thức chuẩn được sử dụng trên tất cả các ứng dụng web.
-

Các ứng dụng ASP.Net có thể được viết bằng nhiều ngơn ngữ .Net khác nhau.

Trong đó có các kiểu ngơn ngữ như C #, VB.Net và J #. Một số nền tảng cơ bản của
ASP.NET sẽ được trình bày trong mục dưới đây.
-

ASP viết đầy đủ là Active Server Pages, và .NET là viết tắt của Network

Enabled Technologies.
1.2 Công dụng của ASP.Net.
Cho phép những người lập trình tạo ra những trang web động, những ứng dụng
web và những dịch vụ web. Lần đầu tiên được đưa ra thị trường vào tháng 1 năm 2002
cùng với phiên bản 1.0 của.NET framework, là công nghệ nối tiếp của Microsoft's
Active Server Pages(ASP). ASP.NET được biên dịch dưới dạng Common Language
Runtime (CLR), cho phép những người lập trình viết mã ASP.NET với bất kỳ ngôn
ngữ nào được hỗ trợ bởi.NET language.
1.3 Định dạng của HTML.
Là một tập tin có phần mở rộng là .htm hoặc .html
Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là Tag(thẻ), thường
được đặt xung quanh một khối văn bản nào đó.
Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…và được sử
dụng nhiều nhất đó là adobe dreamweaver.
2 Giới thiệu về Visual studio
Microsoft Visual Studio là một mơi trường phát triển tích hợp (IDE) từ Microsoft.
Nó được sử dụng để phát triển chương trình máy tính cho Microsoft Windows, cũng
như các trang web, các ứng dụng web và các dịch vụ web. Visual Studio sử dụng nền

0

0


tảng phát triển phần mềm của Microsoft như Windows API, Windows Forms,
Windows Presentation Foundation, Windows Store và Microsoft Silverlight.
3 Ngôn ngữ CSS.

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài
liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự sáng tạo
trong việc kết hợp các thuộc tính giúp mang lại hiệu quả cao.
CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ
điều hành.
CSS đưa ra phương thức áp dụng từ một file CSS ở ngồi. Có hiệu quả đồng bộ khi
tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình bày
nào đó.
CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
4 Ngôn ngữ Javascript.
Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có khả
năng đáp ứng các sự kiện từ phía người dùng.
Hãng Netscape đã đưa ra ngơn ngữ script có tên là LiveScript để thực hiện chức
năng này. Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng của ngơn ngữ lập
trình Java.
JavaScript là ngơn ngữ dưới dạng script có thể gắn với các file HTML. Được trình
duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.
JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểu đối tượng,
ví dụ đối tượng Math với tất cả các chức năng tốn học. Nhưng JavaScript khơng là
ngơn ngữ hướng đối tượng như C++/Java.

0

0


CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH
1. Đặc Tả Giao Diện
1.1 Giao diện trang chủ

 Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩm nổi
bật và mới nhất
 Trong giao diện cho người dùng, chọn kiểu hiển thị theo Hãng.
 Mô tả chức năng: Trang này cho phép người dùng xem thơng tin sản phẩm
ngồi ra cịn có thể sử các menu dọc,ngang để sang trang khác,...

Hình 1.1 Giao diện trang chủ
Trang web được chia làm 7 phần:

0

0


- Phần 1: Logo của trang web, tính năng đăng nhập / đăng ký và giỏ hàng
- Phần 2: Menu ngang: Bao gồm các mục: trang chủ, giới thiệu và khung tìm kiếm
sản phẩm. Mỗi danh mục liên kết đến một trang với nội dung khác nhau.
- Phần 3: Một stage-image bao gồm các sản phẩm nổi bật nhất của cửa hàng
- Phần 4 : Bên trái là danh mục các sản phẩm theo hãng được liên kết với các trang
khác nhau và lịch ngày tháng năm.
- Phần 5: Ở giữa chứa các sản phẩm nổi bật và mới nhất được liên kết với trang chi
tiết sản phẩm.
- Phần 6: Footer chứa các thông tin khác.
1.2 Giao diện trang giới thiệu
Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát về
cửa hàng như phương châm và định hướng phát triển trong tương lai.

Hình 1.2 Giao diện trang giới thiệu
1.3 Giao diện trang đăng ký
 Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.

Chức năng: Cho phép khách hàng có thể đăng ký thơng tin để trở thành khách
hàng

0

0


Hình 1.3 Giao diện trang đăng ký
1.4 Giao diện trang đăng nhập

 Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.
Hoặc quản lý trang web vào thay đổi dữ liệu web.

Hình 1.4 Giao diện trang đăng nhập
1.5 Giao diện phần điện thoại theo hãng

0

0


 Mục Đích: Thanh menu chứa danh sách các hãng sản phẩm của cửa hàng.
Khách hàng có thể sử dụng menu này để lựa chọn hãng mà mình cần tìm.
 Sử dụng danh mục hãng điện thoại để chọn loại hãng mà mình cần.

Hình 1.5 Giao diện phần điện thoại theo hãng

0

0


1.5.1

Giao diện danh mục hãng Apple

Hình 1.5.1 Giao diện điện thoại hãng Apple
1.5.2

Giao diện điện thoại hãng Samsung

0

0


Hình 1.5.2 Giao diện điện thoại hãng Samsung

0

0


1.5.3

Giao diện điện thoại hãng Xiaomi

Hình 1.5.3 Giao diện điện thoại hãng Xiaomi
1.5.4

Giao diện điện thoại hãng Vivo

0

0


Hình 1.5.4 Giao diện điện thoại hãng Vivo
1.6 Giao diện trang chi tiết sản phẩm
 Mục đích: Chức năng này cho phép người dùng xem Tên sản phẩm, giá, thông
tin chi tiết về sản phẩm.


Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm đã được kích

chọn ở trang chủ.

0

0


1.6.1

Chi tiết điện thoại Apple

Hình 1.6.1 Giao diện trang chi tiết điện thoại Apple
1.6.2

Chi tiết điện thoại Samsung

Hình 1.6.2 Giao diện trang chi tiết điện thoại Samsung
1.6.3

Chi tiết điện thoại Xiaomi

0

0


Hình 1.6.3 Giao diện trang chi tiết điện thoại Xiaomi
1.6.4

Chi tiết điện thoại Vivo

Hình 1.6.4 Giao diện trang chi tiết điện thoại Vivo

0

0


CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Trong thời buổi cơng nghiệp hóa hiện nay, việc bn bán qua mạng đã trở nên
phổ biến với hầu hết mọi người. Đây cũng là xu hướng trong xã hội hiện nay khi mọi
người chỉ với một cú nhấp chuột cũng có thể dễ dàng đặt mua được sản phầm mà mình
ưng ý một cách dễ dàng và không phải mất thời gian đi đến tận nơi để mua. Việc mua
bán này giúp tiết kiệm thời gian và tiền bạc khi mọi người có thể lựa chọn sản phẩm

với giá cả đa dạng và nhu cầu cá nhân của từng người
Vì thế, sau khi tiến hành khảo sát thì em quyết định Thiết kế một trang web bán
quần áo mà cụ thể là “Thiết kế website bán điện thoại”với các chức năng cơ bản cần
thiết cho một trang web bn bán cần có vì em thấy nhu cầu mua sắm và đây cũng là
một thị trường tiềm năng có thể khai thác bn bán.
Website bán điện thoại thứ nhất dùng để quảng bá cho sân, thứ hai là kênh thông tin
cho mọi người, thứ ba là một địa chỉ tin cậy để những khách hàng u thích thời trang
tìm mua được cho mình những sản phẩm chất lượng. Qua quá trình nghiên cứu và cố
gắng thực hiện dưới sự hướng dẫn tận tình của Giảng viên, sự giúp đỡ của bạn bè
trong khóa học đồ án nghiên cứu thể hiện được những điều sau:
1. Kết quả đạt được:
-

Thiết kế thành công website bán điện thoại, đáp ứng được yêu cầu của người sử

dụng.
-

Tìm hiểu và nắm cơ bản được những công cụ để Thiết kế website như: Visual

studio, các ngơn ngữ lập trình Website như: HTML, Javascript, CSS, Asp.net.
-

Giao diện website được thiết kế đơn giản, thân thiện và dễ sử dụng

2. Việc chưa làm được:
-

Việc biểu diễn các thông tin trên website chưa được linh hoạt, đầy đủ và thu

hút.
-

Phân tích thiết kế chưa được hồn chỉnh.

-

Nhiều chức năng cịn thiếu và chưa sử dụng được .

3. Hướng phát triển của đề tài
Vì thời gian khơng cho phép và kiến thức về thiết kế web cịn hạn chế nên chúng
em chưa tìm hiểu rõ và kỹ hơn về đề tài này. Vì thế đề tài cũng cịn có nhiều thiếu sót,
mong thầy giúp đỡ chúng em nhiều hơn và em sẽ tiếp tục tìm hiểu sâu hơn về cơng
nghệ này, nhằm mục đích Thiết kế website:

0

0




Giao diện đẹp, thân thiện với người dùng, có nhiều chức năng và tương

tác tốt hơn với người dùng.


Thiết kế, bổ sung các tính năng cịn thiếu hay chưa thật sự hồn chỉnh

trong q trình sử dụng.

0

0


TÀI LIỆU KHAM KHẢO
-

Tài liệu bài giảng mơn “Lập trình website” của thầy Nguyễn Hữu Vĩnh.

-

Website WWW:

-

Website thegioididong.com

0

0