You are on page 1of 43

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC BÁCH KHOA


KHOA KHOA HỌC & KỸ THUẬT MÁY TÍNH

LẬP TRÌNH WEB (CO3049)

WEBSITE CHO CÔNG TY -


DOANH NGHIỆP

GVHD: Nguyễn Hữu Hiếu


SV : Phạm Khánh Huy 2053048
Trần Khôi 2053155
Lê Thế Thành 2053431
Hoàng Nghĩa Hiếu 2052989

Tp. Hồ Chí Minh, Tháng 6/2022


Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Mục lục

1 GIỚI THIỆU 3
1.1 Website công ty – doanh nghiệp là gì? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Tại sao công ty – doanh nghiệp lại cần có website? . . . . . . . . . . . . . . . . . . . . . . 3

2 CƠ SỞ LÝ THUYẾT 4
2.1 Các thư viện, công nghệ sử dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1.a Bootstrap 5.1.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1.b Iconify 2.1.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.2 Công cụ hỗ trợ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.2.a Các công cụ hỗ trợ tạo điều khoản miễn phí . . . . . . . . . . . . 5
2.1.2.b Real Favicon Generator . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1.3 Thư viện (Library) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1.3.a Bootstrap Icon 1.7.1 . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.3.b Front Awesome 5.15.4 . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.3.c Jquery 3.6.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.4 Công nghệ (Technologies) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.4.a SEO (Search Engine Optimization) . . . . . . . . . . . . . . . . . . 8
2.1.4.b Bảo mật (Security) . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 THIẾT KẾ ỨNG DỤNG 12


3.1 Thiết kế cơ sở dữ liệu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.1.1 Mô tả thiết kế cơ sở dữ liệu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.1.2 Ý nghĩa các bảng và từng thuộc tính trong bảng . . . . . . . . . . . . . . . . . . . 12
3.2 Cấu trúc mã nguồn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 Mô hình ứng dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.4 Các tính năng được xây dựng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4 HIỆN THỰC 20
4.1 Đối với khách hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1.1 Giao diện trang chủ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1.2 Giao diện trang sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.1.3 Giao diện trang chi tiết sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.1.4 Giao diện trang bảng giá . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.1.5 Giao diện trang tin tức . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.1.6 Giao diện trang tin tức chi tiết . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.1.7 Giao diện trang về chúng tôi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.1.8 Giao diện trang đăng ký tài khoản . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.1.9 Giao diện trang đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.2 Đối với thành viên . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2.1 Giao diện trang liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2.2 Giao diện trang quên mật khẩu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2.3 Giao diện trang giỏ hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2.4 Giao diện trang thanh toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.2.5 Giao diện trang tài khoản cá nhân . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3 Đối với quản lý . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.3.1 Quản lý được thêm, xóa, sửa sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . 33
4.3.2 Quản lý có thể xóa bình luận quá tiêu cực . . . . . . . . . . . . . . . . . . . . . . 35
4.3.3 Quản lý có thể thêm, xóa, sửa các gói, thêm chu kì . . . . . . . . . . . . . . . . . 35
4.3.4 Quản lý có thể thêm, xóa, sửa tin tức . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.3.5 Quản lý có thể phản hồi lại tin nhắn của khách hàng thông qua mail . . . . . . . 39
4.3.6 Quản lý có thể quản lý thành viên của mình, chặn hoặc xóa thành viên . . . . . . 39

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 1/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

5 TỔNG KẾT 41
5.1 Bảng phân chia công việc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.2 Nhật kí làm việc nhóm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.3 Tổng kết về bài tập lớn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.3.1 Những điểm nổi bật trong bài tập lớn: . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.3.2 Những điểm hạn chế trong bài tập lớn . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.3.3 Phương hướng phát triển trong thời gian tới . . . . . . . . . . . . . . . . . . . . . 42

6 Tài liệu tham khảo 42

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 2/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

1 GIỚI THIỆU
1.1 Website công ty – doanh nghiệp là gì?
Có rất nhiều cách để định nghĩa, có thể nói website công ty - doanh nghiệp là một công cụ để doanh
nghiệp tiếp cận, quảng bá thương hiệu đến khách hàng, hay chỉ đơn giản là nơi tập hợp thông tin của
doanh nghiệp trên mạng internet. Tuy nhiên, những điều này cũng chưa đủ để nói lên được khái niệm
tổng quát nhất về website công ty - doanh nghiệp.
Về cơ bản, website công ty - doanh nghiệp có thể được hiểu là một tập hợp các trang web (webpage)
bao gồm văn bản, hình ảnh, video,... về công ty - doanh nghiệp nằm trên một tên miền trên World Wide
Web của Internet. Website công ty - doanh nghiệp đem đến cho người truy cập đầy đủ các thông tin về
công ty - doanh nghiệp từ lịch sử hình thành, quá trình hoạt động, sản phẩm, dịch vụ, đội ngũ nhân
viên cũng như các chương trình khuyến mãi mà doanh nghiệp đang cung cấp,... Với mỗi góc nhìn khác
nhau, website doanh nghiệp lại có một định nghĩa khác:
- Từ góc độ truyền thông: Website công ty - doanh nghiệp là một công cụ quan trọng của công
ty - doanh nghiệp là nơi cung cấp đầy đủ các thông tin về doanh nghiệp giúp khách hàng cũng như đối
tác có thể hiểu rõ hơn về tính chất, chất lượng sản phẩm, dịch vụ của doanh nghiệp.
- Từ góc độ quản lý: Website công ty - doanh nghiệp được tích hợp các công cụ cần thiết giúp
việc quản lý các thông tin trên trang web trở nên đơn giản và dễ dàng hơn, nâng cao hiệu suất, mở rộng
không gian phát triển.

1.2 Tại sao công ty – doanh nghiệp lại cần có website?


Thời đại công nghệ thông tin ngày càng phát triển thì website chính là kênh bán hàng hiệu quả mà
mỗi doanh nghiệp điều cần. Hiện tại website là hình thức bán hàng phù hợp với nhu cầu và thói quen
của phần lớn khách hàng Việt Nam mà số lượng này đang không ngừng gia tăng.
Việc thiết kế website sẽ giúp cho doanh nghiệp đó có thể quảng bá về sản phẩm, dịch vụ và doanh
nghiệp với khách hàng của một cách dễ dàng và nhanh chóng. Với chi phí thấp và tiện lợi (24 giờ trong
ngày, 7 ngày trong tuần). Bên cạnh đó việc sử dụng website cho công ty - doanh nghiệp còn giúp cho
doanh nghiệp mở rộng cơ hội tìm kiếm khách hàng, đối tác không chỉ trong nước mà còn trên phạm vi
toàn cầu. Vì thế website được xem là công cụ hữu ích nhất mà bất kỳ doanh nghiệp nào cũng cần phải
có nếu muốn mở rộng thị trường kinh doanh của mình một cách nhanh chóng và hiệu quả.
Cụ thể, thiết kế website công ty - doanh nghiệp sẽ đem lại cho khách hàng những lợi ích như:
- Cung cấp thông tin nhanh chóng, mang tính cập nhật để phục vụ tốt các đối tượng khách hàng.
Giúp khách hàng hiểu rõ hơn về doanh nghiệp.
- Giúp quảng bá công ty - doanh nghiệp không chỉ trong nước mà còn quốc tế.
- Thông tin luôn có sẵn trên website và có thể được xem bất kỳ lúc nào, tìm kiếm thông tin dễ dàng.
- Tiết kiệm chi phí quảng cáo (giá xây dựng và duy trì một website rẻ hơn nhiều so với chi phí quảng
cáo trên các phương tiện truyền thông, nội dung lại không giới hạn).
- Thông tin dễ dàng được thay đổi mà không phải in lại như brochure, catalogue, danh thiếp,...
- Tương tác với đối tượng khách hàng (hỗ trợ, tư vấn, đặt hàng...).
- Làm tăng tính chuyên nghiệp của công ty - doanh nghiệp.
- Rút ngắn khoảng cách giữa doanh nghiệp nhỏ và doanh nghiệp lớn (trên website nếu làm chuyên
nghiệp thì không ai biết đây là doanh nghiệp lớn hay nhỏ vì thương mại điện tử có tính chất “không biết
mặt nhau, không thăm viếng thực sự”).

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 3/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

2 CƠ SỞ LÝ THUYẾT
2.1 Các thư viện, công nghệ sử dụng
2.1.1 Framework
2.1.1.a Bootstrap 5.1.3

Bootstrap là một CSS Framework nổi tiếng, được nhiều người sử dụng rộng rãi bởi tính responsive
và thiết kế mobile-first của nó.

Hướng dẫn cài đặt Bootstrap:


Có 2 cách để cài đặt framework Bootstrap:

1. Download gói Bootstrap và lưu vào thư mục root, khi đó việc sử dụng bootstrap sẽ không phụ
thuộc vào tốc độ mạng.
2. Sử dụng đoạn mã để sử dụng bootstrap cdn. (do bkel có giới hạn về dung lượng file nộp, nên
nhóm chọn phương án dùng cdn này). Cụ thể, ta thêm 2 dòng sau vào code để sử dụng phiên bản
Bootstrap mới nhất:

Cách sử dụng Bootstrap:


Ta sẽ chèn các class mà Bootstrap đã định nghĩa sẵn vào code của mình. Ta có thể thấy được sự hỗ trợ
mạnh mẽ qua hình 1.

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 4/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

• Ở nút nhấn bên trái: khi không sử dụng bootstrap và CSS nào cả, thì nút nhấn sẽ hiện theo mặc
định
• Nếu sử dụng Bootstrap, ta có thể tiết kiệm được thời gian viết CSS để đổi màu nền, bo cong border,
đổi màu chữ, và đồng thời các margin và padding liên quan.
Ưu điểm và nhược điểm khi dùng Bootsrap:

• Ưu điểm: Như đã trình bày ở hình 1, Bootstrap hỗ trợ mạnh mẽ, chỉ với 1, 2 class Bootstrap có thể
giúp thay thế nhiều đoạn mã CSS. Như vậy khiến cải thiện tốc độ.
• Nhược điểm: Một nhược điểm đó là bị xung đột về mã CSS khi dùng cả Bootstrap và CSS của
bản thân. Đây chỉ là nhược điểm nhỏ, bởi chỉ tồn tại một số class bên Bootstrap có "!important",
những class này nếu bị xung đột với CSS của coder thì class của bootstrap có độ ưu tiên cao hơn.
Cách giải quyết là ta sẽ sử dụng "!important" ở trong mã CSS của mình để tăng độ ưu tiên.

2.1.1.b Iconify 2.1.0

Đây là framework hỗ trợ về những icon với hơn 100.000 icon miến phí. Trên trang web chính của
iconify.design có hỗ trợ định dạng icon dưới dạng thẻ <svg>, nên ta không cần add <script
src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script> của iconify vào code.

2.1.2 Công cụ hỗ trợ

2.1.2.a Các công cụ hỗ trợ tạo điều khoản miễn phí


Termsfeed.com là một trang web hỗ trợ việc tạo ra các "Terms and Conditions" và "Privacy Policy" cho
trang web của mình.
Đây là công cụ vừa có bản miễn phí, vừa có bản thụ phí.
• Với bản miễn phí, ta có các chức năng cơ bản của một điều khoản, như một số thông tin về website,
emial, nhưng không đảm bảo về luật (phù hợp với cấc dự án đại học.
• Với bản thu phí, sẽ đảm bảo, chặt chẽ hơn về luật pháp hiện hành.

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 5/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

2.1.2.b Real Favicon Generator


Vậy favicon là gì ?
Favicon là website logo mà xuất hiện trên browser tabs, ta có thể gán nó bằng file ảnh (.png) hoặc file
gif, nhưng điều này nó sẽ không phù hợp ở một số điện thoại hoặc browser, nên ta phải theo một chuẩn
là file (.ico). Và kích cỡ của favicon thường là 16x16 pixels hoặc 32x32 pixels.
Cách tạo và implement favicon vào website:

1. Ta sử dụng công cụ hỗ trợ tạo favicon,ico từ ảnh hoặc svg: realfavicongenerator.net


2. Sau khi hoàn tất ta tải về được 1 file zip và extract nó vào một thư mục tên favico ở web root.
3. Ta add các thẻ meta và thẻ link vào code để trang web hiện được favicon:

2.1.3 Thư viện (Library)

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 6/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

2.1.3.a Bootstrap Icon 1.7.1

Bootstrap icon là một thư viện các icon mã nguồn mở với hơn 1.500 icons. Ta có
thể copy thẳng <svg> tag vào trong project, hoặc include cdn <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrapicons@1.7.1/font/bootstrap-icons.css"> vào
trong code và sử dụng chúng bằng cách dùng các class. Ví dụ như:

2.1.3.b Front Awesome 5.15.4


Front Awesome được các lập trình viên đánh giá cao bởi tính chuyên nghiệp cũng như đa dạng về các
icon. Ngoài ra cùng 1 icon, Front Awesome còn cung cấp nhiều giao diện như:
• solid (fas)

• regular (far)
• light (fal)
• doutone (fad)
Ngoài ra front awesome còn hỗ trợ icon với animation. Nhưng nhược điểm lớn nhất đối với nhóm tụi
em đó là sự thụ phí của front awesome. Phần miễn phí chỉ hỗ trợ một số hình cơ bản và 2 class "fas" và
class "far".

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 7/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

2.1.3.c Jquery 3.6.0

Jquery là một thư viện của JavaScript. Cũng như câu slogan của thư viện này "write less, do more",
Jquery được thiết kế nhằm đơn giản hóa thao tác HTML DOM, cũng như các event,animation trong
CSS và Ajax.
Cùng với sự tiện dụng của nó, đây còn là thư viện mã nguồn mở, nên nó rất được ưa chuộng, có đến
73% trong số 10 triệu trang web phổ biến nhất sử dụng.
Cách cài đặt:

Ta thêm cdn sau vào code để có thể chạy các lệnh của thư viện Jquery

2.1.4 Công nghệ (Technologies)


2.1.4.a SEO (Search Engine Optimization)
SEO là viết tắt của cụm từ Search Engine Optimization (tối ưu hóa công cụ tìm kiếm). Hay nói cách
khác là một tập quy trình giúp nâng cao thứ hạng xuất hiện của trang web trên các search engine lớn
như Google, Bing, Yahoo, ...
Lợi ích SEO mang lại:

• SEO giúp tăng lượng khác hàng tìm năng Trên thực tế có lượng lớn khách hàng tiềm năng, họ
không trực tiếp vào các trang mua sắm quen thuộc như tiki, shoppe, mà họ sẽ tìm kiếm thông qua
Google. Khi đó, nếu website của chúng ta được xuất hiện trong kết quả tìm kiếm thì sẽ đem lại
một lượng lớn khách hàng mới.

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 8/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

• SEO giúp tiết kiệm chi phí truyền thông: Thay vì phải chi trả khoản tiền để quảng cáo trên youtube,
hay để xuất hiện trong các ADworks trên google, thì thực hiện SEO thành công sẽ đem đến cho ta
một lượng khách hàng mỗi ngày, đồng thời không mất tiền cho các hoạt động truyền thông.
• SEO giúp tăng độ nhận diện thương hiệu: Việc hiển thị website trên bảng kết quả tìm kiếm cũng
lưu lại cho cho khách hàng một dấu ấn, đây cũng là một trong những khách hàng tìm năng của
website trong tương lai

Các phương pháp SEO hiệu quả:


1. Giúp google.bot dễ thu thập dữ liệu hơn Mỗi search engine sẽ có 1 con bot chuyên đi thu
thập dữ liệu tự động từ các website, từ đó chạy thuật toán liên quan để xếp hạng độ phù hợp.
Như vậy đông nghĩa với việc, nếu con bot đó thu thập được càng nhiều thông tin thì ta có thể tiếp
cận được với nhiều khách hàng phù hợp hơn.
2. Sử dụng các từ khóa, các từ thịnh hành: Hãy dùng các từ khóa mà liên quan đến quần áo
nhất, các tự thường được sử dụng hơn, ví dụ: thay vì ghi "giày thể thao", thì hãy thêm thương hiệu
và loại giày như "giày thể thao Nike air Max". Việc làm cho mô tả chi tiết hơn sẽ giúp website dễ
tiếp cận hơn.
Ngoài ra bên cạnh từ khóa, tiêu đề và miêu tả hấp dẫn cũng sẽ giúp tăng lượng truy cập cho trang
web
3. Tối ưu hóa cấu trúc của website: Việc tổ chức website hợp lý không những giúp nâng cao trải
nghiệm người dùng, mà còn giúp Google dễ dàng hơn trong việc lập chỉ mục url tốt hơn
4. Tối ưu website giúp thân thiện hơn với thiết bi di động: hiện nay Google đã áp dụng ưu
tiên lập chỉ mục trên thiết bị di động. Có 3 cách để giúp website thân thiện với điện thoại di động:
• Sử dụng 2 đường link khác nhau cho giao diện website máy tính và trên điện thoại di động.
• Sử dụng 1 đường link nhưng tạo 2 giao diện riêng biệt cho máy tính và điện thoại.
• Sử dụng chung 1 đường link và chỉ có 1 giao diện, nhưng giao diện này có thể thay đổi (co
giãn, thay đổi cấu trúc) dựa vào độ rộng của thiết bị (responsive).
5. Tối ưu hóa trải nghiệm người dùng: Google đã và đang áp dụng RankBrain để sắp xếp thứ
hạng tìm kiếm. RankBrain sử dụng Machine Learning để học:
• Thời gian người dùng dừng lại trong website đó.
• Tỉ lệ click vào website đó.
• Search intent (trong một chủ đề người dùng tìm kiếm, người dùng mở đọc nhiều trang web,
nhưng trang nào thỏa mãn mục tiêu của người dùng)
• ...
Như vậy việc nâng cao trải nghiệm người dùng là tối quan trọng, nếu một website load content quá
lâu, người dùng sẽ có xu hướng bỏ đi và mở một trang web khác. Hay cũng như sự trình bày, màu
sắc, tiêu đề lôi cuốn, nội dung phù hợp với mô tả, và ...

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 9/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

6. SEO đối với hình ảnh: Việc khiến hình ảnh xuất hiện trong google hình ảnh cũng có tác dụng
trong việc truyền thông, đồng thời hãy đặt tên cho từng bức ảnh bằng lệnh alt="", khi đó sẽ giúp
search engine dễ dàng tìm kiếm trang web hơn.

2.1.4.b Bảo mật (Security)

Vấn đề Hacker hiện đã và đang là vấn đề nhức nhói của các nhà quản trị web, bởi cùng với sự phát
triển của công nghệ bảo mật, thì hacker cũng có nhiều cách để hack hơn.
Chính vì thế có một công tác chuẩn bị, đề phòng các tin tặc là điều vô cùng cần thiết. Ta thường có
những cách sau đây:
1. Sử dụng SSL
SSL viết tắt cho Security Sockets Layer, là một tiêu chuẩn của an ninh mạng nhằm mã hóa liên
kết giữa website và trình duyệt. Công nghệ này được được nhiều người sử dụng bởi sự miễn phí và
độ bảo mật:
• Bảo mật dữ liệu: Các thông tin của website đều được mã hóa, và chỉ được giải mã sau khi xác
định danh tính của người truy cập.
• Hacker không thể xâm nhập và sửa đổi các thông tin, dữ liệu của website.
• SSL còn giúp đảm bảo người truy cập không có thể phủ nhận những thông tin đã gửi đến.
⇒ Vậy ta nên sử dụng chứng chỉ SSL
2. Sử dụng tường lửa WAF: Web Application Firewall được viết tắt là WAF nghĩa là tường lửa là
một công nghệp bên cạnh SSL nhằm nâng cao bảo mật của các website, chống các cuộc tấn công
như: SQL Injection, Cross-site Request Forgery (CSRF), và Cross Site Scripting (XSS).

Cụ thể hơn WAF có thể là một phần mềm, chương trình hoặc phần cứng được cài đặt trên máy
chủ. Nhược điểm của WAF là không thể tự hoạt động một mình mà phải được áp dụng cùng với 1
hay nhiều công cụ bảo mật khác. Nhưng bù lại, nó giúp theo dõi những thông tin giữa máy chủ và
trình duyệt web. Ngoài ra WAF còn đem lại một số lợi ích đáng kể như:

• Như đã nói ở trên WAF bảo vệ website khỏi các cuộc tấn công độc hại của tin tặc .‘
• WAF là một giải pháp trên cloud. Chính vì thế nó không cần các chi phí vận hành.‘
• Hacker không thể xâm nhập và sửa đổi các thông tin, dữ liệu của website.‘
• SSL còn giúp đảm bảo người truy cập không có thể phủ nhận những thông tin đã gửi đến.‘
⇒ Vậy ta nên sử dụng chứng chỉ SSL
Đồng thời ta cũng phải tìm hiểu cách mà tin tặc tấn công, từ đó có sự chuẩn bị tốt nhất:

1. Validate các parameter: Ta cần phải validate các data trước khi lưu vào database, và việc
validation phải được thực hiện ở phía server. Nếu không, tin tặc sẽ sửa lại các đoạn mã, và gửi
những phần mềm độc lại, cũng như virurt thông qua form , cookies, hidden input, ...

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 10/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

2. Broken Access Control: Access Control có chức năng như tên gọi của nó, là kiếm soát sự truy
cập vào thông tin hoặc chức năng. Chúng chứa các lỗ hỏng, các hacker thường dừa vào chúng
để bỏ qua authorization và thực hiện các tác vụ dưới admin.
Và cách đơn giản nhất là yêu cầu verify access control mỗi khi đăng nhập (xác thực bằn sms của
điện thoại, xác thực thông qua email với mã xác thực) hoặc sử dụng non-programtic control.
3. Broken Account and Session Management Đối với các trang web sử dụng default username,
các tin tặc thường dựa vào đó để đoán ra email và chạy các phần mềm vét cạn dò password. Từ
đó có thể đánh cắp thông tin của khách hàng của các website.
Để tránh việc đó, website cần yêu cầu người dùng đặt userName và email khác nhau, đồng thời
ẩn đi email đã đăng ký. Ngoài ra thêm điều kiện ràn buộc, nhằm tạo ra mật khấu đủ mạnh để
tránh các thuật toán vét cạn dò password.
4. Cross-Site Scripting (XSS): Các tin tặc sẽ dựa vào các lỗ hỏng trong các trường input. Lấy
ví dụ là các searchBar, khi ta nhập một đoạn script vào như hình 2:

Khi đó nếu trang web của chúng ta có lỗ hỏng, đoạn code trên sẽ được thực hiện, và một
aleart sẽ xuất hiện. Vậy nếu đoạn script ta nhập không phải là đoạn alert trên, mà là
<script>destroyWebsite();</script>, khi đó sẽ gây ảnh hưởng đến website. Ta thường gặp 3
loại tấn công XSS sau:
• Reflex XSS: các hacker sẽ tấn công trực tiếp vào các phiên làm việc (session) của người dùng,
từ đó truy cập và chiếm được quyền của họ trên website (Hacker sẽ dán đường link url độc
hại vào các comment, khi khách hàng thanh viên click vào link trên, hacker có thể chạy đoạn
mã javascript để thu thập sessionID từ đó chiếm dụng tài khoản, hoặc đánh cấp thông tin của
những cá nhân đó.
• Store XSS: Store XSS nhắm vào lượng lớn nạn nhân. Hacker sẽ thông qua form, input, chèn
một đoạn mã hại vào cơ sở dữ liệu. Và khi người dùng truy cập vào web và sử dụng tính năng
liên quan đến cơ sở dữ liêu này, thì đoạn mã độc của hacker sẽ được thực thi.
• DOM Based XSS: hacker sẽ dựa vào DOM của HTML để sửa đoạn mã HTML của website.
khi đó hacker sẽ thêm một ô input mới, hoặc một nút nhấn mới (hình 3, và 4), khi người dùng
nhập vô hoặc click vào, khi đó chương trình chạy của hacker sẽ được thực thi.
Như vậy ta cần validation các thông tin input của user, cụ thể như lọc các input có key word như
<script> ... </script>. Hoặc lọc các comment có link url độc hại. Như vậy sẽ giúp trang web
trở nên an toàn hơn.

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 11/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

3 THIẾT KẾ ỨNG DỤNG


3.1 Thiết kế cơ sở dữ liệu
3.1.1 Mô tả thiết kế cơ sở dữ liệu

3.1.2 Ý nghĩa các bảng và từng thuộc tính trong bảng

Bảng PRODUCT
Tên thuộc tính Kiểu dữ liệu Mô tả
Khóa chính ID BIGINT, Chỉ định số thứ tự của sản
AUTO_INCREMENT phẩm
NAME VARCHAR(100) Tên sản phẩm với độ dài 100 ký
tự
PRICE INT Giá từng sản phẩm
IMG_URL VARCHAR(250) Đường dẫn lưu trữ hình chính
của sản phẩm
NUMBER INT Số sản phẩm còn tồn tại trong
kho
DECS TEXT Mô tả các sản phẩm
CATEGORY VARCHAR(250) Phân loại sản phẩm
TOP_PRODUCT INT Xác định sản phẩm hàng đầu
Bảng
SUB_IMG_URL

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 12/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Khóa chính ID BIGINT, Số thứ tự của ảnh phụ mỗi sản


AUTO_INCREMENT phẩm, mỗi sản phẩm có thường
1-4 ảnh phụ
Khóa ngoại đến PID BIGINT Thứ tự của sản phẩm
ID của bảng
PRODUCT
IMG_URL VARCHAR(250) Đường dẫn lưu trữ hình ảnh
phụ của sản phẩm
Bảng ACCOUNT
Khóa chính ID BIGINT, Thứ tự của các thành viên
AUTO_INCREMENT
CMND VARCHAR(10) Chứng minh nhân dân thành
viên
FNAME VARCHAR(50) Họ và tên thành viên
PHONE VARCHAR(10) Số điện thoại
ADDRESS TEXT Địa chỉ thành viên
USERNAME VARCHAR(50) Tên đăng nhập
EMAIL VARCHAR(250) Email thành viên
PWD VARCHAR(50) Mật khẩu
IMG_URL VARCHAR(250) Đường dẫn đến file lưu trữ hình
ảnh thành viên
RANK INT Định danh thành viên theo mức
độ mua sắm
Bảng CART
Khóa chính ID BIGINT, Thứ tự giỏ hàng
AUTO_INCREMENT
Khóa ngoại đến UID BIGINT Thứ tự thành viên trong bảng
ID bảng ACCOUNT
ACCOUNT
TIME DATE Thời gian thành viên đặt hàng
STATE TINYINT Trạng thái thanh toán
Bảng PROD-
UCT_IN_CART
Khóa chính ID BIGINT, Thứ tự giỏ hàng
AUTO_INCREMENT
Khóa ngoại đến PID BIGINT Số thứ tự sản phẩm trong bảng
ID bảng PRODUCT
PRODUCT
Khóa ngoại đến OID BIGINT Thứ tự thành viên trong bảng
ID bảng ACCOUNT
ACCOUNT
QUANTITY INT Số lượng các sản phẩm trong giỏ
hàng
SIZE VARCHAR(5) Kích thước các sản phẩm trong
giỏ

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 13/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bảng
COMMENT
Khóa chính ID BIGINT Thứ tự bài bình luận của thành
viên
Khóa ngoại đến PID BIGINT Thứ tự sản phẩm trong bảng
ID bảng
PRODUCT
Khóa ngoại đến UID BIGINT Thứ tự thành viên trong bảng
ID bảng ACCOUNT
ACCOUNT
STAR INT Số sao đánh giá mỗi bình luận
CONTENT TEXT Nội dung bài bình luận
TIME DATE Ngày đăng bài bình luận
Bảng NEWS
Khóa chính ID BIGINT Thứ tự của bài tin tức
CID BIGINT
KEY VARCHAR(50) Từ khóa tìm kiếm nội dung bài
TIME DATE Ngày đăng bài
TITLE VARCHAR(70) Tựa đề tin tức
CONTENT TEXT Nội dung tin tức
IMG_URL VARCHAR(50) Đường dẫn đến nơi lưu trữ hình
ảnh tin tức
SHORT_CONTENT VARCHAR(300) Nội dung tóm tắt
Bảng COM-
MENT_NEWS
Khóa chính ID INT Thứ tự chu kì dịch vụ giao hàng
CYCLE VARCHAR(10) Thời gian chu kì giao
Bảng COMBO
Khóa chính ID INT Thứ tự các gói dịch vụ
NAME VARCHAR(50) Tên gói dịch vụ
COST INT Giá thành gói dịch vụ
Bảng PROD-
UCT_IN_COMBO
Khóa chính ID INT Thứ tự sản phẩm các gói dịch
vụ trong bảng
Khóa ngoại đến CBID INT Thứ tự gói dịch vụ trong bảng
ID bảng COMBO COMBO
Khóa ngoại đến PID BIGINT Thứ tự sản phẩm trong bảng
ID bảng PRODUCT
PRODUCT
Bảng MESSAGE
Khóa chính ID BIGINT, Thứ tự tin nhắn từ khách hàng
AUTO_INCREMENT (trang Liên hệ)
FNAME VARCHAR(100) Họ tên khách hàng

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 14/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

EMAIL VARCHAR(250) Email người gửi


PHONE PHONE Số điện thoại khách hàng
SUBJECT VARCHAR(250) Tiêu đề email gửi đến
CONTENT TEXT Nội dung người gửi
CHECK TINYINT Kiểm tra email đã đọc hay
không
Bảng OR-
DER_COMBO
Khóa chính ID INT Thứ tự giỏ hàng combo
Khóa ngoại đến UID BIGINT Thứ tự thành viên trong bảng
ID bảng ACCOUNT
ACCOUNT
Khóa ngoại đến CBID INT Thứ tự gói dịch vụ trong bảng
ID bảng COMBO COMBO
TIME DATE Thời gian thành viên đặt hàng
gói dịch vụ
Khóa ngoại đến CYCLE INT Thứ tự chu kỳ dịch vụ giao hàng
ID bảng CYCLE
SIZE VARCHAR(10) Kích thước của các sản phẩm
trong COMBO
STATE TINYINT Trạng thái dịch vụ đã thanh
toán hay không
Bảng
BAN_ACCOUNT
Khóa chính ID BIGINT, Thứ tự danh sách cấm tài khoản
AUTO_INCREMENT
CMND VARCHAR(10) Chứng minh nhân dân người bị
cấm

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 15/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

3.2 Cấu trúc mã nguồn

- Mô tả cấu trúc mã nguồn:


+ Mô hình ứng dụng được tổ chức theo cấu trúc MVC, DocumentRoot là Thư mục “Valcloshop” gồm
các thư mục chính: Controller, Views, Model và Function và file index.php, cơ sở dữ liệu “Web_db.sql”.
+ index.php là nơi required_once các file được lưu trong thư mục Function để khởi tạo App.
+ Thư mục Function: bao gồm các file App.php, cotroller.php, DB.php
+ App.php gồm class App dùng để định danh Controller với biến $controller (cài mặc định “Home”)
và thực hiện những tác vụ sau khi require_once “./Controller/”.$controller.“.php”.
+ controller.php gồm class Cotroller gồm 2 hàm: model($model) và view($views, $data). Hàm
model($model) dùng để require_once “./Model/”. $model . “.php” và thực hiện chức năng liên quan đế
model đó. Tương tự như hàm model, hàm view($views,$data) cũng sẽ require_once “./Views/” . $views
. “/index.php” để xuất ra giao cho người dùng với dữ liệu $data được truyền từ controller sau khi lấy dữ
liệu database thông qua model.
+ DB.php gồm class DB chứa biến $connect để khởi tạo kết nối dữ liệu với database.Thư mục
Controller: gồm file Home.php chứa tất cả các chức năng để người dùng thao tác lên website theo từng
đối tượng trong model
+ Model: gồm có file “customer.php” chứa class “customer” được kế thừa từ class “DB” trong file
./Function/BD.php, “member.php” chứa class “member” được kế thừa từ class “customer” trong
file./Model/customer.php, file ./Model/manager.php chứa class“manager” kế thừa class “customer” trong
file./Model/customer.php, các class trên sẽ thực thi những chức năng tác động lên hê cơ sở dữ liệu khi
có yêu cầu từ controller.

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 16/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

+ Thư mục Views sẽ chứa những thư mục liên quan đến từng giao diện của ứng dụng ví dụ như thư
mục Home_page chứa giao diện trang chủ và sẽ cung cấp giao diện cho người dùng sau khi cotroller
gọi hàm views đến Home_page. Ở mỗi thư mục con của Views đều chứa mã nguồn php và mã nguồn
javascript, css tương ứng.

3.3 Mô hình ứng dụng

3.4 Các tính năng được xây dựng

Tên hàm Mô tả
Home_page($user):return Chuyển hướng người dùng đến trang “Trang chủ” và hiện giao
view(“Home_page”, $data); diện cùng với những tác vụ đúng với cấp người dùng sau khi
controller yêu cầu đến model tương ứng
About_us($user):return Chuyển hướng người dùng đến trang “Về chúng tôi” và hiện giao
view(“About_US”, $data); diện cùng với những tác vụ đúng với cấp người dùng sau khi
controller yêu cầu đến model tương ứng
Products($user, $sort_1="", Chuyển hướng người dùng đến trang “Sản phẩm” và hiện giao
$sort_2=""):return diện cùng với những tác vụ đúng với cấp người dùng sau khi
view(“Products”, $data); controller yêu cầu đến model tương ứng

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 17/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Contact_us($user):return Chuyển hướng người dùng đến trang “Liên hệ” và hiện giao diện
views(“Contact_US”, $data); cùng với những tác vụ đúng với cấp người dùng sau khi
controller yêu cầu đến model tương ứng
News($user)return Chuyển hướng người dùng đến trang “Tin tức” và hiện giao diện
views(“News”, $data); cùng với những tác vụ đúng với cấp người dùng sau khi
controller yêu cầu đến model tương ứng
Post_news($user, Chuyển hướng quản lý đến trang “Thêm tin tức” sau khi quản lý
$params)return views(“News”, click vào “Thêm tin tức” trong giao diện tin tức
$data);
delete_news($user, $id) Chức năng dành cho người quản lý xóa tin tức và xóa thành thì
trang “Chi tiết tin tức” sẽ chuyển hướng sang trang “Tin tức”
chung
add_comment_news($user, Chức năng dành cho thành viên đăng bài bình luận vào tin tức
$array)
insert_news($user) Chức năng dành cho người quản lý đăng tin tức mới trong trang
“Thêm tin tức” và thêm thành công thì giao diện sẽ chuyển sang
trang “Tin tức” chung
Cost_table($user) Chuyển hướng người dùng đến trang “Bảng giá” và hiện giao
diện cùng với những tác vụ đúng với cấp người dùng sau khi
controller yêu cầu đến model tương ứng
Cart($user) Chuyển hướng người dùng đến trang “Giỏ” nếu người dùng là
“thành viên” và chuyển hướng sang Login nếu người dùng là
“khách hàng”
Login($user, $array="") Chuyển hướng người dùng đến trang Login và sẽ chuyển hướng
sang trang $array nếu đăng nhập thành công
Payment($user) Chuyển hướng người dùng đến trang “Payment” nếu là thành
viên và có sản phẩm trong giỏ hàng
forgot($user) Chức năng giành cho thành viên đã đăng ký đểkhôi phục tài
khoản khi quên mật khẩu qua email
register($user) Chuyển người dùng đến trang đăng ký thành viên
insert_message($user, $array) Chức năng dành cho khách hàng hoặc thành viên khi muốn góp
ý thông qua trang “Liên hệ”. Hệ thống sẽ lưu tin nhắn vào giao
diện quản lý
update_user($user, $array) Chức năng dành cho thành viên khi cập nhật thông tin khách
hàng khi muốn thay đổi thông tin trong quá trình kiểm tra sản
phẩm
delete_product_incart($user, Chức năng dành cho thành viên để xóa các sản phẩm có giỏ
$array) hàng sau khi nhấn “X”
check_login($user, $array) Hàm kiểm tra đăng nhập khi có thành viên đăng nhập vào hệ
thống. Nếu đăng nhập thành công sẽ chuyển người dùng đến
trang trước đó
update_product_in_cart($user, Hàm dùng để cập nhật sản phẩm có trong giỏ hàng sau khi
$array) thành viên kiểm tra tại trang “Giỏ” và nhấn “Thanh toán”
delete_order_combo_id($user, Hàm dùng để thành viên xóa dịch vụ có trong giỏ hàng sau khi
$array) nhấn “X”
update_cart_combo($user, Hàm sẽ cập nhật lại trang thái sau khi thanh toán dịch vụ
$array)

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 18/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

member_page($user) Chuyển hướng trang đến “Hồ sơ cá nhân” nếu là thành viên hoặc
chuyển đến trang “quản lý thành viên” nếu là quản lý
add_item_comment($user, Thêm bài bình luận của thành viên vào các sản phẩm
$array)
update_profile($user) Cập nhật thông tin cá nhân cho thành viên
create_cart($user, $array) Chức năng giành cho thành viên tạo giỏ hàng mới cho thành
viên sau khi đăng nhập
add_new_item($user) Chức năng giành cho quản lý thêm sản phẩm mới vào website
update_item($user, $pid) Chức năng giành cho quản lý cập nhật lại sản phẩm sau khi
chỉnh sửa
delete_item($user, $array) Chức năng giành cho quản lý xóa sản phẩm khỏi website
create_order_combo($user, Chức năng giành cho thành viên sau khi thêm dịch vụ vào giỏ
$array) hàng
update_order_combo($user) Cập nhật lại trạng thái thánh toán dịch vụ
delete_order_combo($user) Xóa toàn bộ dịch vụ mà thành viên đã đặt sau khi thành viên
đăng xuất nhưng chưa thanh toán
sendmessage($user, $array){ Chức năng dành cho quản lý phản hồi tin nhắn sau khi xem tin
nhắn từ người dùng gửi đến. Hệ thống sẽ gửi đến email người
dùng với mail mặc định là “huy.phamkhmtjapan@hcmut.edu.vn”
delete_comment($user, $array) Chức năng dành cho quản lý xóa bình luận từ người khi cảm
thấy tiêu cực
sort_product($user) Chức năng dùng để sắp xếp sản phẩm theo ý muốn của người
dùng tại trang “Sản phẩm”
sort_comment($user, $array) Chức năng dùng để sắp xếp bài bình luận theo ý muốn người
dùng
logout($user) Tính năng đăng xuất. Sau khi đăng đăng xuất, hệ thống sẽ xóa
tất cả những session đã cài đặt và chuyển người dùng thành cấp
“khách hàng”
change_passwork($user, $array) Chức năng sẽ kiểm tra tài khoản đã tồn tại hay không và hệ
thống sẽ gửi mật khẩu mới mặc định “123456hello” vào email
nếu người dùng đã đăng kí
add_new_combo($user) Chức năng dành cho quản lý thêm mới dịch vụ vào website
update_new_combo($user) Chức năng dành cho quản lý chỉnh sửa mới nội dung dịch vụ
add_cycle($user) Chức năng dành cho quản lý thêm mới chu kỳ dịch vụ giao hàng
vào website
delete_combo($user, $array) Chức năng dành cho quản lý xóa dịch vụ
remove_user($user, $array) Chức năng dành cho quản lý xóa tài khoản khách hàng khi có
yêu cầu
ban_user($user, $array) Chức năng dành cho quản lý cấm tài khoản hoạt động trên
website và không cho đăng ký mới
create_account($user, $array) Chức năng tạo tài khoản mới nếu khách hàng điền đủ nội dung
dược yêu cầu và không bị cấm trước đó
update_password_profile($user, Thay đổi mật khẩu thành viên trong “Hồ sơ cá nhân”
$array)

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 19/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4 HIỆN THỰC
4.1 Đối với khách hàng
4.1.1 Giao diện trang chủ

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 20/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 21/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.1.2 Giao diện trang sản phẩm

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

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 22/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 23/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.1.4 Giao diện trang bảng giá

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 24/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.1.5 Giao diện trang tin tức

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 25/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.1.6 Giao diện trang tin tức chi tiết

4.1.7 Giao diện trang về chúng tôi

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 26/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 27/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.1.8 Giao diện trang đăng ký tài khoản

4.1.9 Giao diện trang đăng nhập

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 28/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.2 Đối với thành viên


4.2.1 Giao diện trang liên hệ

4.2.2 Giao diện trang quên mật khẩu

4.2.3 Giao diện trang giỏ hàng

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 29/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 30/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.2.4 Giao diện trang thanh toán

4.2.5 Giao diện trang tài khoản cá nhân

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 31/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 32/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.3 Đối với quản lý


4.3.1 Quản lý được thêm, xóa, sửa sản phẩm

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 33/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 34/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.3.2 Quản lý có thể xóa bình luận quá tiêu cực

4.3.3 Quản lý có thể thêm, xóa, sửa các gói, thêm chu kì

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 35/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 36/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.3.4 Quản lý có thể thêm, xóa, sửa tin tức

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 37/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 38/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

4.3.5 Quản lý có thể phản hồi lại tin nhắn của khách hàng thông qua mail

4.3.6 Quản lý có thể quản lý thành viên của mình, chặn hoặc xóa thành viên

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 39/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 40/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

5 TỔNG KẾT
5.1 Bảng phân chia công việc

STT Họ & tên MSSV Công việc Phần trăm công việc
- Tìm hiểu mô hình MVC.
1 Trần Khôi 2053155 - Web - Đăng ký, Đăng nhập 100%
- Code Back-end.
- Viết báo cáo.
- Tìm hiểu mô hình MVC.
2 Hoàng Nghĩa Hiếu 2052989 - Web - Tin tức, Liên hệ, Về chúng tôi 100%
- Code Back-end.
- Viết báo cáo.
- Tìm hiểu mô hình MVC.
3 Phạm Khánh Huy 2053048 - Web - Sản phẩm, Giỏ hàng, Bảng giá 100%
- Code Back-end.
- Viết báo cáo.
- Tìm hiểu mô hình MVC.
4 Lê Thế Thành 2053431 - Web - Trang chủ, Trang Admin 100%
- Code Back-end.
- Viết báo cáo.

5.2 Nhật kí làm việc nhóm

Thời gian Nội dung công việc


03/04/2022 Họp để xác định hướng đi cho Web (Framework, Library, Quy trình, Tính năng, ..).
10/04/2022 Họp để kiếm trang WEB mẫu.
24/04/2022 Bắt đầu code front-end dựa trên HTML/CSS/JS. Tìm hiểu MVC Model
07/05/2022 Xây dựng MVC Model và tiếp tục làm front-end.
14/05/2022 Chuyển HTML/CSS/JS vào MVC Model và tiến hành code back- end và hoàn thiện dần front-end.
21/05/2022 Hoàn thiện tính năng Đăng nhập, Đăng ký, Tài khoản.
28/05/2022 Hoàn thiện tính năng cho trang Chủ, Sản phẩm và một phần của Giỏ hàng.
05/06/2022 Hoàn thiện tính năng cho Giỏ hàng và viết báo cáo.
12/06/2022 Hoàn thiện giao diện Thanh toán.
17/06/2022 Hoàn thiện giao diện Admin và hoàn thiện báo cáo.

5.3 Tổng kết về bài tập lớn


5.3.1 Những điểm nổi bật trong bài tập lớn:
Mô hình thiết kế theo MVC, phân các trang giao diện thành các thư mục, chia các model thành các file
tương thích thuận tiện cho việc sửa chữa lỗi hoặc phát triển về sau.
Sử dụng Session để định dạng từng người dùng nhằm tăng tính bảo mật khi sử dụng.
Có thể gửi email phản hồi đến khách hàng đã góp ý.
Dữ liệu truyền vào các form đều đã được kiểm tra tại client và kiểm tra tại controller trước khi đưa vào

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 41/42
Trường Đại Học Bách Khoa Tp.Hồ Chí Minh
Khoa Khoa Học & Kỹ Thuật Máy Tính

hệ cơ sở dữ liệu.
Thực hiện đầy đủ các chức năng cần thiết cho người dùng.
- Khách hàng:
+ Xem các thông tin public trên trang web: các trang thông tin như trang chủ, sản phẩm, thông tin liện
hệ, tin tức,...
+ Tìm kiếm tài nguyên (tin tức, sản phẩm, dịch vụ),...
+ Đăng ký - Đăng nhập
- Thành viên
+ Thay đổi thông tin cá nhân, thay đổi mật khẩu
+ Lấy lại mật khẩu khi quên mật khẩu
+ Mua sắm các sản phẩm, lưu trữ lịch sử giao dịch
+ Viết các bài bình luận vào sản phẩm, bài tin tức
- Quản lý:
+ Xem thông tin khách hàng, xóa, cấm tài khoản thành viên
+ Xóa bài bình luận từ thành viên nếu bài tiêu cực
+ Lưu trữ những tin góp ý của khách hàng đã gửi ở trang liên hệ
+ Thêm, xóa, sửa các sản phẩm, tin tức
+ Tự động lưu trữ hình ảnh khi được đăng tải vào thư mục ./Views/images

5.3.2 Những điểm hạn chế trong bài tập lớn


Website bảo mật còn hơi kém vẫn chưa che giấu cấu trúc thư mục khi người dùng cố nhập đường truyền.
Chưa phần chia thành nhiều controller tướng ứng với các Views mà chỉ dùng controller Home để thực
hiện chức năng cho toàn bộ web.

5.3.3 Phương hướng phát triển trong thời gian tới


- Thêm các mã khuyến mãi dành thành viên khi mua sắm.
- Phát triển thêm chat online để thuận tiện trao đổi, chăm sóc khách hàng.
- Thống kê lượt người truy cập, báo cáo sản phẩm ưa chuộng, doanh số buôn bán.
- Hệ thống gửi thông báo về quản lý khi hàng tồn kho không còn, cần phải nhập.
- Hệ thống báo cáo về quản lý khi có người xâm nhập vào trang quản lý.
- Hệ thống tự đổi mật khẩu quản lý khi nhập sai nhiều lần.

6 Tài liệu tham khảo


[1] Tham khảo front-end,https://www.nike.com/vn/
[2] Hướng dẫn lập trình php theo mô hình mvc,https://www.youtube.com/playlist?list=
PLzrVYRai0riSZi55qApQP2F98lo3-xdH7
[3] Website Doanh Nghiệp Là Gì? Lợi Ích Khi Thiết Kế Website Doanh Nghiệp,http://congnghenamsao.
vn/cong-nghebootstrap.html
[4] jQuery là gì? jQuery là gì? Những ưu điểm khi sử dụng jQuery trong website. Truy cập từ
https://bizfly.vn/techblog/jquery-la-gi.html
[5] Công nghệ bootstrap. Truy cập từ
https://tatthanh.com.vn/website-doanh-nghiep-la-gi
[6] Top 10 lỗ hổng bảo mật web phổ biến theo chuẩn OWASP – OWASP TOP 10. Truy cập từ
https://cystack.net/vi/blog/10-lo-hongbao-mat-web
[7] SEO là gì? Lợi ích của SEO web 12 Việc cần làm của một SEOer. Truy cập từ: https://gtvseo.
com/seo-la-gi/#tong-quan-ve-seo
[8] ). PHP là gì? Ưu điểm và nhược điểm của lập trình web bằng PHP. Truy cập từ: http:
//free-php-editor.com/php-la-gi/
[9] Lỗ hổng bảo mật là gì? Những lỗ hổng bảo mật phổ biến hiện nay. Truy cập từ https://vietnix.
vn/lo-hong-bao-mat/

Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 42/42

You might also like