Csltweb.pdf

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN
CƠ SỞ LẬP TRÌNH WEB
ĐỀ TÀI:
XÂY DỰNG WEBSITE KÍNH MẮT THIẾT KẾ CAO CẤP
Sinh viên thực hiện

:

PHẠM HUY HƯNG

Giảng viên hướng dẫn

:

NGUYỄN VĂN ĐỒN

Ngành

:

CƠNG NGHỆ THƠNG TIN

Chun ngành

:

QUẢN TRỊ AN NINH MẠNG

Lớp

:

D14QTANM2

Khóa

:

2019- 2024


Hà Nội, tháng 6 năm 2021
PHIẾU CHẤM ĐIỂM
STT
1

Họ và tên

Nhiệm vụ

Trần Quốc Hùng - Chương 3: + Trang Chủ
+ Giới thiệu
(19810320512)
-

-

2

3

Hà Mai Lan
(19810320673)

Trần Viết Chiến
(19810320555)

+ Thời Trang
+ Javascript Đăng Nhập
Liên kết các page và hồn chỉnh
web

Chương 3:
+ Gọng kính cận
+ Phụ kiện
+ Chi tiết sản phẩm: 3 sản phẩm
+ Giỏ hàng
+ Javascript Mua ngay
+ Javascript Lọc sản phẩm

- Chương 1: Tổng quan về đề tài
- Chương 3: + Bảo Hành 2 năm
+ Đổi trả 30 ngày
+ Thu cũ - đổi mới
+ Cửa hàng

Điểm

Chữ
ký


4

Trần Bích Ngọc
(19810320211)

-

Chỉnh báo cáo
Chương 2: Phân tích hệ thống
Chương 3: + Gọng kính râm
+ Trợ giúp
+ 2 Bộ sưu tập

GIẢNG VIÊN CHẤM ĐIỂM
Họ và tên

Giảng Viên 1:

Giảng Viên 2:

Nhận Xét

Chữ Ký


Mục Lục

LỜI MỞ ĐẦU

1

CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN THỰC HIỆN

2

1. Tổng quan về bài toán

2

1.1. Khảo sát hiện trạng

2

1.2. Mơ tả bài tốn

2

1.3. Ưu điểm trên website bán kính mắt

3

1.4. Nhược điểm

4

2. Các hệ thống liên quan tương tự

4

3. Mục tiêu giải quyết của bài toán

7

4. Yêu cầu của trang web

8

CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG
1. Yêu cầu chi tiết về Website:

9
9

1.1. Đối với người truy cập Website với chức năng user:

9

1.2. Đối với người quản trị:

9

2. Các nhóm chức năng:

10

3. Xác định các thực thể:

10

4. Xác định các Use Case:

11

CHUƠNG 3: CÀI ĐẶT GIAO DIỆN HỆ THỐNG
1. Cấu trúc của các trang web

12
12

1.1.Tiêu đề ( header)

12

1.2. Thân bố cục (main)

13

1.3. Phần chân trang (footer)

13

2. Giao diện

14

2.1 Giao diện trang chủ

14

2.2. Sản phẩm

17


2.3. Thông tin sản phẩm

20

2.4. Bảo hành và đổi trả

21

2.5. Thu cũ – đổi mới

22

2.6. Cửa hàng

22

2.7. Trợ giúp

23

2.8. Bộ sưu tập

23

2.9. Giới thiệu

25

2.10. Thời trang

25

2.11. Đăng nhập

26

2.12. Đăng ký

26

2.13. Giỏ hàng

27

2.14 Javascript

27

2.15. Code

28

LỜI MỞ ĐẦU
Hiện nay, ứng dụng công nghệ thông tin và tin học hóa được xem là một
trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ
chức cũng như các cơng ty. Cùng với sự phát triển khơng ngừng của kĩ thuật máy
tính và mạng điện tử, công nghệ thông tin đã lần lượt chinh phục hết đỉnh cao này
đến đỉnh cao khác và có một vị trí nhất định. Mạng Internet là một trong những sản
phẩm có giá trị hết sức to lớn và là công cụ không thể thiếu, là nền tảng chính cho
sự truyền tải, trao đổi thơng tin trên tồn cầu trong thời đại công nghệ 4.0.
Đi cùng với sự phát triển mạnh mẽ của công nghệ thông tin là sự phát triển
thương mại hóa tồn cầu. Những website mua bán, thương mại xuất hiện ngày
càng nhiều, những trang thương mại nổi tiếng như www.amazone.com,
www.alibaba.com hay www.ebay.com khơng cịn xa lạ với chúng ta.
Đối với một cửa công ty, doanh nghiện hay cửa hàng, việc quảng bá và giới
thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ
là cần thiết. Vậy phải quảng bá thế nào đó? Đó chính là xây dựng một Website cho
cửa hàng của mình quảng bá tất cả các sản phẩm của mình bán. Và nắm bắt được
xu thế của thời đại nên chúng em đã thực hiện đề tài “Xây dựng Website kính mắt
thiết kế cao cấp” nhằm phục vụ cho nhu cầu tất yếu của cuộc sống và ưu chuộng
cái đẹp.
Trong thời gian thiết kế website, dưới sự giúp đỡ, hướng dẫn tận tình của
thầy Nguyễn Văn Đồn, nhóm chúng em đã tiến hành tìm hiểu và xây dựng
website thương mại. Website này đã giúp chúng em phát huy được tính sáng tạo,
tinh thần làm việc tập thể, khả năng vận dụng kiến thức đã học để có thể hồn
thành tốt báo cáo.
Mặc dù đã có nhiều cố gắng trong quá trình làm dự án, tuy nhiên do kiến
thức cịn hạn chế và thời gian có hạn nên dự án này cịn nhiều thiếu sót, chúng em
rất mong được sự giúp đỡ, góp ý, sửa chữa của thầy cơ để báo cáo của chúng em
hồn thiện hơn.
Chúng em xin chân thành cảm ơn quý thầy cô!

1


CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN THỰC HIỆN
1. Tổng quan về bài tốn
1.1. Khảo sát hiện trạng
Thực hiện tìm hiểu, khảo sát hệ thống, cụ thể là một số website bán kính mắt
trên internet, đánh giá hiện trạng của cửa hàng, xác định các mặt hạn chế của hệ
thống cũ, từ đó đề xuất khắc phục.
Xã hội ngày càng phát triển, nhu cầu mua sắm, thời trang của con người
càng được nâng cao. Trong đó khơng thể thiếu những gọng kính sang trọng, lạ mắt,
hiện đại. Những gọng kính mới ngày càng thu hút được nhiều người quan tâm,
nhất là những người có tật khúc xạ mà vẫn ưu chuộng cái đẹp. Tuy nhiên các cửa
hàng, website bán kính mắt chưa đáp ứng được các yêu cầu của khách hàng, phục
vụ chưa được chu đáo, tốn nhiều thời gian. Các trang web bán kính mắt chưa được
phổ biến, phong phú. Nhằm khắc phục điều này và mong muốn có một môi trường
giao tiếp tiện lợi giữa khách hàng, đơn giản hóa việc mua sắm, chúng em đã xây
dựng website này.
Bên cạnh đó , khách hàng có thể phản hồi về cho cửa hàng và chia sẻ với
mọi người, đóng góp ý kiến của mình với website để chúng em có thể hoàn thiện
hơn, phục vụ khách hàng tốt nhất. Qua website, khách hàng có thể nắm được
những thơng tin bổ ích từ sản phẩm, liên tục cập nhật thông tin từ hãng sản xuất.
1.2. Mơ tả bài tốn
- Website có thể giúp cho chủ cửa hàng có thể quản lý các mặt hàng trong cửa
hàng một cách thuận tiện hơn, đồng thời chủ cửa hàng có thể cập nhật các mặt
hàng mới nhập lên website, lưu thông tin các mặt hàng đã được bán cho khách
hàng, đồng thời có thể kiểm tra, chỉnh sửa các bài viết về sản phẩm, hiển thị
thông tin lên theo mục.

2

- Một website bán hàng đều có quy trình bắt đầu bằng việc nhận đơn hàng từ
phía khách hàng, nhận trực tiếp hoặc gián tiếp qua điện thoại, email, ... theo đó
sẽ tiếp nhận thơng tin đơn đặt hàng, sản phẩm đặt hàng sau đó lưu vào kho đơn
đặt hàng của tất cả các khách hàng. Sau đó thì người quản lí hệ thống sẽ lên lịch
hẹn với khách hàng về thời điểm giao hàng cũng như vị trí giao hàng thuận tiện
nhất.
- Website gồm nhiều trang, mỗi trang có một chủ đề và một chức năng riêng.
Mỗi chủ đề phải có đường dẫn đến từng trang, có tên và chủ đề và nội dung của
từng trang. Trang chủ sẽ tóm tắt nội dung của tồn bộ website bao gồm các
gọng kính cận và gọng kính râm, phụ kiện, bộ sưu tập mới nhất,…
- Mỗi chủ đề phải khác nhau và phân biệt với các chủ đề khác. Mỗi chủ đề sẽ
có giao diện riêng biệt cho từng chủ đề và phù hợp với chủ đề đó.
- Đối với người truy cập Website với tư cách là User sẽ cho phép đăng kí, đăng
nhập, tìm kiếm và tham khảo thơng tin sản phẩm, cho phép bình luận về bài viết
và đánh giá về sản phẩm.
1.3. Ưu điểm trên website bán kính mắt
Ngày nay hình thức kinh doanh bán kính mắt online đã mang lại nhiều ưu
điểm và thuận lợi:
- Tiết kiệm được nguồn tài chính đầu tư
- Khơng cần th nhiều nhân viên bán hàng
- Nhiều mẫu mã gọng kính được đăng bán trên web. Vì thế khách hàng sẽ
thoải mái lựa chọn gọng kính phù hợp với bản thân.
- Việc mua hàng cũng dễ dàng thuận tiện cho người mua, mang đến tâm lý
thoải mái cho khách hàng.

3

1.4. Nhược điểm
Bên cạnh nhưng ưu điểm thì khi kinh doanh bán hàng trên web cũng tồn tại
những nhược điểm nhất định:
⮚ Hiện nay khách hàng vẫn chưa tin tưởng vào hình thức bán hàng trên
web vì một số trang web thực hiện “ đăng một đằng bán một kiểu” nên đã
gây hoang mang cho khách hàng.
⮚ Đòi hỏi website phải chủ động và linh hoạt trong mọi khâu: từ khâu
quảng bá sản phẩm đến khâu quan hệ khách hàng, giao hàng, thanh tốn,
lấy hàng,...Trong q trình này khi kinh doanh trên web cũng gặp khá
nhiều khó khăn.
⮚ Sự cạnh tranh giữa các website là rất lớn. Nên nếu sản phầm không chất
lượng, đa dạng, đẹp và làm ăn không uy tín thì khó có thể duy trì được
lâu.
⮚ Khách hàng sau khi đặt hàng nhưng đến khi giao hàng lại khơng nhận
nên chủ shop lại mất thêm chi phí.
⮚ Một số trang web giả mạo, lừa đảo.
⮚ Khách hàng chưa nắm rõ về độ cận, loạn và tâm mắt của mình.
2. Các hệ thống liên quan tương tự
Một số website tìm hiểu và tham khảo
⮚ Website: />-Website Gentlemonster là một web bán kính mắt thời trang với tơng màu
chủ đạo là trắng đen. Nhận thấy trang chủ dễ nhìn, đẹp, đa dạng, nhiều chức
năng. Lôi cuốn người xem.

4


Hình 1.1: Trang chủ web Gentlemonster

Hình 1.2: Các gọng kính và giá bán

5


Hình 1.3: Thơng tin sản phẩm

⮚ Website: />
Hình 1.4. Giao diện trang chủ Versace
6


Hình 1.5: Thơng tin sản phẩm

⮚ Nhận xét website Việt Nam và nước ngồi:
- Nhìn tổng quan những trang web của Việt Nam chất lượng khơng thua
kém gì những trang web của nước ngoài.
- Layout được phân chia đều, đẹp, dễ nhìn.
- Thơng tin đều rõ ràng, đầy đủ cho người xem.
- Một số hình ảnh, chức năng trang web của Việt Nam còn hơi thừa k cần
thiết, xuất hiện nhiều quảng cáo làm rối mắt người xem.
- Đối với web bên nước ngoài cảm thấy rất tối ưu, đơn giản, đầy đủ, trang
trí đẹp về cả hình ảnh, sản phẩm và bố cục.
3. Mục tiêu giải quyết của bài toán
- Xây dựng các chức năng cơ bản của một website bán hàng thương mại.
Website có khả năng tự tương thích, hiển thị được trên tất cả các thiết bị hiện tại
và có thể nâng cấp trong tương lai.
- Website được hiển thị một cách sinh động, đẹp mắt nhưng không quá phức tạp
để cho tất cả mọi người đều có thể sử dụng được.
7

- Hỗ trợ khách hàng một cách nhanh nhất khi nhận được yêu cầu liên hệ từ
khách hàng.
- Quản lý các mặt hàng sản phẩm, cấu hình website.
- Nắm bắt được công nghệ thiết kế web bằng các ngôn ngữ như: ngôn ngữ đánh
dấu siêu văn bản HTML, CSS, JAVASCRIPT giúp cho website sinh động và
hấp dẫn hơn.
4. Yêu cầu của trang web
- Website có dung lựng khơng q lớn, tốc độ xử lý nhanh.
- Cơng việc tính tốn thực hiện chính xác, khơng chấp nhận sai sót.
- Sử dụng mã hóa các thơng tin cá nhân của khách hàng.
- Đảm bảo an toàn dữ liệu khi chạy website trực tuyến.
-

Hình thức thơng tin đa dạng và sống động.

- Giao diện thân thiện, dễ nhìn, an tồn dữ liệu.
-

Cung cấp thông tin và phát triển hoạt động 24/24.

-

Thông tin được cập nhật và sửa đổi thường xuyên.

8


CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG
1. Yêu cầu chi tiết về Website:
- Hiển thị danh mục sản phẩm như các sản phẩm bán chạy, các sản phẩm đang

được sale tại cửa hàng,...
- Hiển thị thông tin chi tiết của sản phẩm có trong danh sách bao gồm tên sản
phẩm, giá hiện tại của sản phẩm ( giá đã được sale nếu có) và hiển thị thơng tin sản
phẩm là sản phẩm thuộc loại đang bán chạy hay không bán chạy.
- Hiển thị kết quả thơng tin của việc tìm kiếm sản phẩm, đăng kí cũng như đăng
nhập tài khoản.
1.1. Đối với người truy cập Website với chức năng user:
- Cho phép đăng kí thành viên, cũng như thành viên hợp tác bán hàng để nhận được
nhiều ưu đãi của cửa hàng trong các dịp nổi bật nhằm tri ân khách hàng.
- Cho phép xem thông tin chi tiết của sản phẩm, thơng tin giỏ hàng.
- Cho phép tìm kiếm sản phẩm theo giá, theo tên sản phẩm.
- Cho phép bình luận về bài viết.
- Cho phép đánh giá sản phẩm.
- Chọn sản phẩm phù hợp với nhu cầu của bản thân và thực hiện việc mua hàng cũng
như việc thanh toán nếu như khách hàng muốn mua.

1.2. Đối với người quản trị:
- là người điều hành, quản lý cũng như theo dõi mọi hoạt động của cửa hàng.
- Quản lí các user.
- Cập nhật mới các thông tin của sản phẩm.
- Kiểm tra chỉnh sửa lại thông tin của các sản phẩm.
- Cập nhật các loại sản phẩm lên trang website để người dung có thể cập nhật nhanh
nhất.

2. Các nhóm chức năng:
- Hệ thống Website: bao gồm 7 trang:
9


▪

Trang chủ:

▪

Tài Khoản

▪

Đăng Ký

▪

Bộ sưu tập

▪

Sale

▪

Thông tin sản phẩm

▪

Giỏ Hàng

Chức năng của hệ thống có thể chia làm các nhóm chức năng chính như sau:
- Người quản trị (Admin): Chỉ có Admin mới có quyền truy cập vào chức năng này
(Nhập, sửa , xóa, xem bài viết, xem thành viên, quản lý thông tin người dung, tài khoản

người dùng, quản lý danh mục các sản phẩm).
- Nhóm thành viên Website (User): Dành cho User khi đăng nhập vào có thể xem các sản
phẩm, bình luận mặt hàng, đánh giá sản phẩm, cũng như đăng ký đăng nhập tài khoản
thành viên nếu có.

3. Xác định các thực thể:
- Dựa trên mơ tả bài tốn, ta có thể xác định được các thực thể chính của hệ thống bán
hàng như sau:
1. Người quản lí: Là người điều hành, quản lí và theo dõi mọi hoạt động của hệ thống
cũng như quản lý nhân viên có mặt tại cửa hàng.
2. Thành viên: Bao gồm người quản lí, và những khách hàng đã đăng kí. Sau khi
đăng nhập để trở thành thành viên, ngồi những chức năng chung của người sử dụng,
cịn có một số chức năng khác phục vụ cho công việc cụ thể của từng đối tượng.
3. Khách hàng: là người giao dịch với hệ thống, có thể đăng ký làm thành viên của
hệ thống để nhận các ưu đãi đặc bi.

10


4. Xác định các Use Case:
- Thực thể Khách hàng có các Use Case sau:
▪

Đăng kí làm thành viên.

▪

Xem thơng tin sản phẩm, thông tin của giỏ hàng.

▪

Thực hiện việc xem thơng tin sản phẩm.

▪

Tìm kiếm thơng tin sản phẩm.

▪

Chọn sản phẩm cần mua và thực hiện việc mua hàng.

▪

Thanh tốn.

- Thực thể Người quản lí có các Use Case sau:
▪

Tiếp nhận các thơng tin đăng kí thành viên từ khách hàng.

▪

Tiếp nhận các sản phẩm đăng lên Website.

▪

Quản lí danh sách thành viên.

▪

Quản lí danh mục sản phẩm.

▪

Bảo hành lại hệ thống bán hàng.

▪

Đăng thông tin chi tiết sản phẩm lên Website.

▪

Kiểm tra các hoạt động của thành viên.

▪

Cập nhật lại các thông tin sản phẩm.

▪

Phản hồi lại ý kiến của các User.

- Ngoài ra, các thành viên của hệ thống bán hàng bao gồm Người quản lí và các Thành
viên đã đăng kí cịn có các Use Case sau:
▪

Đăng nhập.

▪

Xem thông tin cá nhân.

▪

Sửa đổi thông tin cá nhân.

11


CHUƠNG 3: CÀI ĐẶT GIAO DIỆN HỆ THỐNG
1. Cấu trúc của các trang web
Muốn xây dựng một trang web hoàn chỉnh thì người lập trình khơng thể
thiếu tư duy về bố cục trang web, khi đã xác định được mình sẽ thiết kế những gì,
xây dựng được bố cục hồn chỉnh thì lúc đó việc lập trình trở nên dễ dàng hơn.
Chúng em xác định bố cục cho trang web của mình gồm 3 phần chính: header,
main, footer bằng cách xây dựng màu và khi lập trình đưa các thơng tin lên sẽ tẩy
màu đi và phối màu lại.
1.1.Tiêu đề ( header)
Header là phần đầu trang, chủ yếu chứa các thông tin tiêu đề, logo, menu,
liên hệ,... Một trang web khơng thể khơng có phần header, nó giữ vị trí khá quan
trọng, giúp người dùng có thể dựa vào đó để biết được toàn bộ nội dung trong
trang web này có những gì.
Một header chuẩn thường kết hợp với các yếu tố: logo, slogan, menu, phần
tìm kiếm, banner quảng cáo. Những điều này giúp những cỗ máy tìm kiếm đánh
giá được dộ uy tín trên website.

Hình 2.1: Bố cục header

12

1.2. Thân bố cục (main)
Main là phần quan trọng nhất của một trang web, nó dùng để xác định những
nội dung ở trang web có những gì. Phần main dùng để đưa, bày bán, hiện thị tất cả
nhưng nội dụng của trang web lên.

Hình 2.2: Bố cục main

1.3. Phần chân trang (footer)
Footer là phần chân trang nó chứa những thơng tin bản quyền, tác giả, liên
hệ,...
13


Hình 2.3: Bố cục footer

2. Giao diện
2.1 Giao diện trang chủ

14


15


16


2.2. Sản phẩm
2.2.1. Gọng kính cận

17


2.2.2. Gọng kính râm

18


2.2.3. Phụ kiện

19


2.3. Thông tin sản phẩm

20