Professional Documents
Culture Documents
Lập Trình Web (Co3049) : Đạ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) : Đạ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
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
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
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.
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ó.
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:
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.
Đâ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.
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
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
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ư:
• 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
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
• 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
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.
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
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
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
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
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.
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
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
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
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
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
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
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
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
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.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
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.
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
Bài tập lớn môn Lập trình Web(CO3049) - Niên khóa 2021-2022 Trang 42/42