Assignment 2

ĐẠ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)

________________________________________________________________
BÀI TẬP LỚN: Đề tài
WEBSITE CHO CÔNG TY –

DOANH NGHIỆP
________________________________________________________________
Giảng viên hướng dẫn: Nguyễn Hữu Hiếu
Nhóm thực hiện: Nguyễn Hoài Thương 1912184
Nguyễn Hồng Dân 1910916
Phạm Minh Hiếu 1913356
Email liên lạc: thuong.nguyenk_19@hcmut.edu.vn
Tp. Hồ Chí Minh, Tháng 9/2021

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
I. GIỚI THIỆU ............................................................................................................. 4
1. Website công ty – doanh nghiệp là gì? ................................................................ 4
2. Tại sao công ty – doanh nghiệp lại cần có website? ........................................... 5
II. CƠ SỞ LÝ THUYẾT .............................................................................................. 6
1. Các thư viện, công nghệ sử dụng ......................................................................... 6
1.1. HTML ............................................................................................................... 6
1.2. CSS ................................................................................................................... 7
1.3. Javascript.......................................................................................................... 9
1.4. PHP ................................................................................................................ 10
1.5. Bootstrap ........................................................................................................ 11
1.6. jQuery ............................................................................................................. 13
2. Tìm hiểu các lỗ hổng bảo mật ............................................................................ 15
2.1. Định nghĩa ..................................................................................................... 15
2.2. 10 lỗ hổng bảo mật web phổ biến theo chuẩn OWASP ............................... 15
3. Tìm hiểu về SEO.................................................................................................. 18
3.1. Định nghĩa ..................................................................................................... 18
3.2. Lợi ích của SEO ............................................................................................. 19
3.3. Hạn chế của SEO .......................................................................................... 19
III. THIẾT KẾ ỨNG DỤNG ..................................................................................... 20
1. Thiết kế cơ sở dữ liệu .......................................................................................... 20
1.1. Mô tả thiết kế cơ sở dữ liệu ........................................................................... 20
1.2. Ý nghĩa các bảng và từng thuộc tính trong bảng ......................................... 20
2. Cấu trúc mã nguồn.............................................................................................. 27
3. Mô hình ứng dụng ............................................................................................... 29
4. Các tính năng được xây dựng ............................................................................ 30
IV. HIỆN THỰC ......................................................................................................... 36
1. Đối với khách hàng.............................................................................................. 36
1.1. Giao diện trang chủ ....................................................................................... 36
1.2. Giao diện trang sản phẩm ............................................................................. 38
1.3. Giao diện trang chi tiết sản phẩm ................................................................. 38
1.4. Giao diện trang bảng giá ............................................................................... 40
2
1.5. Giao diện trang tin tức................................................................................... 41

1.6. Giao diện trang tin tức chi tiết ...................................................................... 42
1.7. Giao diện trang về chúng tôi ......................................................................... 43
1.8. Giao diện trang đăng ký tài khoản................................................................ 43
1.9. Giao diện trang đăng nhập ............................................................................ 44
2. Đối với thành viên ............................................................................................... 45
2.1. Giao diện trang liên hệ .................................................................................. 45
2.2. Giao diện trang quên mật khẩu .................................................................... 45
2.3. Giao diện trang giỏ hàng ............................................................................... 46
2.4. Giao diện trang thanh toán ........................................................................... 47
2.5. Giao diện trang tài khoản cá nhân ............................................................... 47
3. Đối với quản lý ..................................................................................................... 49
3.1. Quản lý được thêm, xóa, sửa sản phẩm ....................................................... 49
3.2. Quản lý có thể xóa bình luận quá tiêu cực ................................................... 51
3.3. Quản lý có thể thêm, xóa, sửa các gói, thêm chu kì ..................................... 51
3.4. Quản lý có thể thêm, xóa, sửa tin tức ........................................................... 53
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 ...... 54
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 .. 55
V. TỔNG KẾT ............................................................................................................ 57
1. Bảng phân chia công việc ................................................................................... 57
2. Tổng kết về bài tập lớn ....................................................................................... 58
2.1. Những điểm nổi bật trong bài tập lớn: ......................................................... 58
2.2. Những điểm hạn chế trong bài tập lớn ......................................................... 59
2.3. Phương hướng phát triển trong thời gian tới............................................... 59
3. Hướng dẫn sử dụng và cài đặt môi trường ....................................................... 60
3
I. GIỚI THIỆU
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.
4
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ự”).
5
II. CƠ SỞ LÝ THUYẾT
1. Các thư viện, công nghệ sử dụng
1.1. HTML
HTML là viết tắt của Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn
bản). HTML cho phép người dùng tạo và cấu trúc hóa các thành phần trên một trang
web như đoạn văn, tiêu đề, liên kết, trích dẫn, bảng biểu...
Các phần tử trong HTML là các khối của trang web HTML, được đại diện bằng
những thẻ đánh dấu (tag). Thẻ đánh dấu HTML chứa các nội dung như ‘paragraph’,
‘heading’, ‘table’... Trình duyệt không hiển thị thẻ HTML nhưng dùng chúng để hiển
thị nội dung của trang.
HTML không phải là ngôn ngữ lập trình, mà chỉ là ngôn ngữ đánh dấu, nó đơn giản
và dễ học ngay cả với những người mới học làm web.
- Ưu điểm
Bởi vì HTML được ra đời từ rất lâu nên nguồn tài nguyên hỗ trợ hỗ trợ cho nó vô
cùng khổng lồ. Hiện nay, cộng đồng của HTML đang phát triển ngày càng lớn trên thế
giới.
HTML có thể chạy tương đối mượt mà trên hầu hết những trình duyệt phổ biến nhất
hiện nay là: IE, Chrome, FireFox, Cốc Cốc…
Mã nguồn mà HTML sử dụng là loại mã nguồn mở và bạn có thể sử dụng hoàn toàn
miễn phí.
Quá trình học HTML tương đối đơn giản, dễ hiểu nên người học có thể dễ dàng nắm
bắt được các kiến thức căn bản nhanh chóng hơn. Quá trình xây dựng khung cho website
căn bản sẽ có thể thực hiện chỉ với vài tuần học.
HTML được quy định theo một tiêu chuẩn nhất định nên việc markup sẽ trở nên đồng
nhất, gọn gàng hơn rất nhiều bởi vì, HTML được vận hành bởi World Wide Web
Consortium (W3C).
6
Quá trình thực hiện sẽ dễ dàng hơn bởi nó tích hợp với nhiều loại ngôn ngữ backend
như: PHP, NodeJs, Ruby, Java… để có thể tạo thành một website hoàn chỉnh với đầy
đủ mọi tính năng.
- Nhược điểm
Nhược điểm lớn nhất mà HTML còn tồn tại đó chính là chỉ có thể sử dụng ở những
trang web tĩnh. Đây là những trang web chỉ hiển thị thông tin mà không có sự tương tác
của người dùng. Chính vậy, khi xây dựng những tính năng động hoặc hướng đối tượng
người dùng thì lập trình viên cần phải sử dụng Javascript hoặc ngôn ngữ backend khác
của bên thứ 3 mới có thể thực hiện được.
HTML không có khả năng tạo ra sự riêng biệt và mới mẻ cho người dùng bởi vì nó
thường chỉ có thể thực thi những thứ logic và có cấu trúc nhất định.
Hiện nay, một số trình duyệt vẫn còn chậm trong việc hỗ trợ cho tính năng mới nhất
của HTML và đặc biệt là với HTML5.
Ngoài ra, một số trình duyệt cũ vẫn không thể render được những tag mới có bên
trong HTML5.
1.2. CSS
CSS là viết tắt của Cascading Style Sheets, một ngôn ngữ thiết kế đơn giản, xử lý
một phần giao diện của trang web. CSS mô tả cách các phần tử HTML hiển thị trên màn
hình và các phương tiện khác.
Sử dụng CSS, ta có thể kiểm soát nhiều hiệu ứng khác nhau thiết kế bố cục và cách
trang web hiển thị trên những màn hình có kích thước khác nhau cũng như hàng loạt
hiệu ứng khác. CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang trên một
website.
Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .css. CSS được kết hợp với
ngôn ngữ đánh dấu HTML hoặc XHTML.
- Ưu điểm
CSS giúp giải quyết vấn đề lớn của HTML: HTML không có phần tử để để định dạng
cho trang web. HTML chỉ được dùng để tạo nội dung cho trang.Với CSS, các định nghĩa
7
liên quan đến kiểu cách được đưa vào tập tin .css và nhờ vào tập tin stylesheet ngoài,
bạn có thể thay đổi toàn bộ website chỉ bằng một tập tin duy nhất.
Tiết kiệm thời gian: Bạn có thể viết CSS một lần và sử dụng lại chúng trên nhiều
trang HTML. Có thể định kiểu cho từng phần tử HTML và áp dụng kiểu đó cho bao
nhiêu trang web tùy ý.
Tải trang nhanh hơn: Với CSS, không cần khai báo thuộc tính cho từng tag HTML
mỗi lần dùng tag đó. Chỉ cần viết thuộc tính của tag trong CSS và nó sẽ được áp dụng
mỗi khi tag xuất hiện trên trang web. Nhờ đó, số lượng code cần viết sẽ ít đi, thời gian
load trang sẽ nhanh hơn.
Bảo trì dễ dàng: Để thực hiện thay đổi trên toàn bộ trang, chỉ cần đổi kiểu trong file
CSS và tất cả các thành phần trên trang web sẽ được cập nhật tự động.
Có nhiều kiểu hơn HTML: CSS có một loạt thuộc tính, nhiều hơn so với HTML khá
nhiều. Nhờ đó bạn có thể làm cho trang web hiển thị tốt hơn so với chỉ dùng HTML.
Khả năng tương thích với nhiều thiết bị: CSS cho phép nội dung được tối ưu hóa trên
nhiều loại thiết bị. Bằng cách sử dụng cùng một tài liệu HTML, nhưng nó có thể hiển
thị tốt trên PC, điện thoại, các thiết bị cầm tay hay khi in.
- Nhược điểm
Không sử dụng biểu thức: CSS không cho phép đánh giá các biểu thức đơn giản (như
margin-left: 10% - 3em + 4px;). Các biểu thức này rất hữu ích trong nhiều trường hợp,
chẳng hạn như tính toán kích thước của cột chịu một ràng buộc trên tổng của các cột
khác.
Hỗ trợ trình duyệt không nhất quán: Các trình duyệt khác nhau sẽ làm cho CSS bố
trí khác nhau như là một kết quả của lỗi trình duyệt hoặc thiếu sự hỗ trợ cho các tính
năng CSS. Pixel bố trí chính xác đôi khi có thể không thể đạt được trên các trình duyệt.
Khó kiểm soát giới hạn: Trong khi vị trí ngang của các yếu tố nói chung là dễ điều
khiển, vị trí thẳng đứng là thường xuyên trực giác, phức tạp, hoặc không thể. Nhiệm vụ
đơn giản, chẳng hạn như tập trung một yếu tố theo chiều dọc hoặc nhận được một chân
để được đặt không cao hơn so với đáy của khung nhìn, hoặc là yêu cầu quy tắc phong
8
cách phức tạp và mang tính trực giác, hoặc các quy tắc đơn giản nhưng không được hỗ
trợ rộng rãi.
Kiểm soát các phần tử Shapes: CSS hiện chỉ cung cấp hình chữ nhật. Góc tròn hoặc
hình dạng khác có thể yêu cầu đánh dấu phi ngữ nghĩa. Tuy nhiên, điều này được giải
quyết trong bản dự thảo của các mô-đun nền CSS3.
1.3. Javascript
JavaScript là một ngôn ngữ lập trình máy tính năng động. Nó rất nhẹ và được sử
dụng phổ biến như một phần của các trang web, việc triển khai cho phép tập lệnh phía
máy khách tương tác với người dùng và tạo các trang động. Nó là một ngôn ngữ lập
trình được giải thích với khả năng hướng đối tượng.
- Ưu điểm
Ít tương tác với máy chủ: có thể xác thực đầu vào của người dùng trước khi gửi trang
đến máy chủ. Điều này giúp tiết kiệm lưu lượng máy chủ, có nghĩa là tải ít hơn trên máy
chủ của bạn.
Phản hồi ngay lập tức cho khách truy cập: Họ không phải đợi tải lại trang để xem họ
có quên nhập nội dung nào không.
Tăng tính tương tác: có thể tạo các giao diện phản ứng khi người dùng di chuột qua
chúng hoặc kích hoạt chúng thông qua bàn phím.
Giao diện phong phú hơn: có thể sử dụng JavaScript để bao gồm các mục như các
thành phần kéo và thả để trượt Giao diện phong phú cho khách truy cập trang web của
bạn.
- Nhược điểm
JS phía máy khách không cho phép đọc hoặc ghi tệp. Điều này đã được giữ vì lý do
an ninh.
JS không thể được sử dụng cho các ứng dụng mạng vì không có hỗ trợ như vậy.
JS không có bất kỳ khả năng đa luồng hoặc đa xử lý nào.
9
Một lần nữa, JS là ngôn ngữ lập trình nhẹ, được giải thích cho phép bạn xây dựng
tính tương tác vào các trang HTML tĩnh.
1.4. PHP
PHP là một từ viết tắt của cụm từ Hypertext Pre Processor. Là một ngôn ngữ lập trình
thường được sử dụng để phát triển ứng dụng. Những thứ có liên quan đến viết máy chủ,
mã nguồn mở hay mục đích tổng quát. Ngoài ra, nó còn rât thích hợp để lập trình web
và có thể dễ dàng nhúng vào trang HTML. Ngày nay, PHP đã chiếm tới hơn 70% web
hiện nay, trang web giới thiệu của các công ty như influxwebtechnologies, Monamedia
đều được xây dựng bằng WordPress – một mã nguồn được viết bởi ngôn ngữ PHP. Bởi
những tính năng như tối ưu hóa cho các ứng dụng web. Tốc độ load web nhanh, nhỏ
gọn, cú pháp giống C và Java. Rất dễ học và thời gian xây dựng sản phẩm tương đối
ngắn hơn so với các ngôn ngữ khác hiện nay.
Ngôn ngữ lập trình PHP đã được xây dựng bởi cộng đồng và trong đó có sự đóng
góp to lớn tới từ Zend Inc. Là một công ty do các nhà phát triển cốt lõi của PHP lập nên
nhằm tạo ra một môi trường chuyên nghiệp. Đưa ngôn ngữ lập trình này vào quy mô
phát triển của các doanh nghiệp, môi trường chuyên nghiệp.
- Ưu điểm
Đầu tiên đó là PHP được sử dụng miễn phí. Là một lợi thế cực lớn cho ai muốn học
lập trình này. Các bạn có thể học và thực hành theo dạng online. Không cần phải lo đến
việc chi trả số tiền lớn để học lập trình.
Cú pháp và cấu trúc của PHP tương đối dễ dàng. Nếu bạn muốn học về ngôn ngữ
này, bạn sẽ không phải mất quá nhiều thời gian để hiểu được. Đa số các bạn lập trình
viên thường ngại với cấu trúc khó. Là một ưu điểm lớn cho mọi người quan tâm và yêu
thích hàng đầu về ngôn ngữ lập trình.
Mã lệnh (source code) là một tập hợp các hướng dẫn (hay chỉ thị) được viết để yêu
cầu máy tính thực hiện một số tác vụ nhất định. Mã lệnh được viết dưới dạng văn bản
thuần túy và con người có thể đọc được.
Ngôn Ngữ Kịch Bản: PHP là ngôn ngữ kịch bản (scripting language). Ngôn ngữ kịch
bản là một nhánh của ngôn ngữ lập trình. Tập tin chứa mã lệnh viết bằng ngôn ngữ kịch
10
bản (như PHP) có thể được chạy (hay thực thi) trực tiếp trên máy mà không cần phải
chuyển sang một định dạng khác. Đối với các ngôn ngữ như C hay Pascal thì tập tin
chứa mã lệnh (source code) cần phải được chuyển sang định dạng khác chứa machine
code để máy tính có thể chạy được.
Mã Nguồn Mở: PHP là ngôn ngữ lập trình mã nguồn mở và điều này có nghĩa là bạn
có thể sử dụng PHP hoàn toàn miễn phí. PHP có thể được chạy trên nhiều nền tảng hệ
điều hành khác nhau như Windows, Mac OS và Linux.
- Nhược điểm
PHP còn hạn chế về cấu trúc ủa ngữ pháp. Nó không được thiết kế gọn gàng và không
được đẹp mắt như những ngôn ngữ lập trình khác.
PHP chỉ có thể hoạt động và sử dụng được trên các ứng dụng trong web. Đó chính là
lý do khiến cho ngôn ngữ này khó có thể cạnh tranh được với những ngôn ngữ lập trình
khác. Nếu như muốn phát triển và nhân rộng hơn nữa trong lập trình.
1.5. Bootstrap
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton với mục đích ban đầu là
sử dụng bootstrap như một framewwork hỗ trợ nội bộ tại công ty Twitter và xuất bản
như một mã nguồn mở vào tháng 8/2011 trên website GitHub.
Bootstrap là nền tảng bao gồm các thư viện trình bày trang HTML, CSS và Javascript
giúp cho việc phát triển giao diện web trong nhiều môi trường đa nền tảng một cách
nhanh chóng và dễ dàng hơn gọi là Responsive web. Thiết kế Responsive web là tạo
ra website có khả năng tự động điều chỉnh giao diện web trên tất cả các thiết bị, từ PC
đến các thiết bị di dộng như điện thoại, máy tính bảng.
- Ưu điểm
Phát triển giao diện nhanh chóng: Bạn dễ dàng phát triển giao diện website một cách
rất nhanh, nếu một trang bình thường thì bạn có thể cắt xong trong một ngày hoặc chưa
tới một ngày. Chưa kể đến tính tương thích với các trình duyệt và thiết bị di động
Dễ học, dễ sử dụng: Cộng đồng đông đúc và tài liệu tham khảo rõ ràng chính là sức
mạnh của Bootstrap.
11
Nền tảng tối ưu: Trong bootstrap đã tạo sẵn một thư viện để lưu trữ mà các nhà thiết
kế có thể sử dụng và tuỳ ý chỉnh sửa theo mục đích cá nhân. Điều này giúp cho việc
phát triển website trở nên nhanh chóng bởi vì bạn có thể lựa chọn một mẫu có sẵn phù
hợp và thêm màu sắc, hình ảnh, video... là đã có ngay giao diện đẹp. Hơn nữa, bootstrap
sự tương thích với trình duyệt và thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn
có thể yên tâm với kết quả mình làm ra, thậm chí bạn còn có thể bỏ qua cả bước kiểm
tra lại, và bạn sẽ tiết kiệm được thời gian, tiền bạc cho website của mình.
Tương tác tốt với smartphone: Nếu như trước đây khi truy cập website bằng điện
thoại di động bạn thường nhận được result từ trang tìm kiếm như mobile.trangweb.com,
tức là trang web này được lập trình cho cả 2 phiên bản, nhưng với bootstrap có sử dụng
grid system nên bootstrap mặc định hỗ trợ responsive và viết theo xu hướng mobile first
ưu tiên giao diện mobile trước. Điều này cải thiện đáng kể hiệu suất trang web khi có
người dùng truy cập bằng mobile. Khách hàng thiết kế web của bạn không còn nỗi lo
trang web của mình có thể chạy trên nền tảng di động hay không.
Giao diện đầy đủ, sang trọng: Giao diện của bootstrap có màu xám bạc rất sang trọng
và hỗ trợ gần như đầy đủ các thành phần mà một website hiện đại cần có. Cầu trúc
HTML rõ ràng giúp bạn nhanh chóng nắm bắt được cách sử dụng và phát triển. Không
những vậy, bootstrap còn giúp website hiển thị tốt khi chúng ta co dãn màn hình
windows.
Dễ dàng tuỳ biến: Để phù hợp cho nhiều loại website, bootstrap cũng hỗ trợ thêm
tính năng customizer, bạn có thể thay đổi gần như tất cả những thuộc tính của nó để phù
hợp với chương trình của bạn. Nếu những tuỳ chình này vẫn không đáp ứng được yêu
cầu của bạn, bạn hoàn toàn có thể chỉnh sửa trực tiếp trên mã nguồn của bootstrap.
Boostrap tương thích rất tốt với HTML5
Hỗ trợ SEO tốt: Đây là lý do quan trọng nhất bởi vì hiện nay Google đã cập nhật
thuật toán tìm kiếm và Responsive là một yếu tố rất quan trọng để đưa từ khóa lên top.
- Nhược điểm
12
Tính kém phổ biến: Bootstrap không phải là ứng dụng web phổ biến nên để tìm được
một tổ chức, cá nhân thành thạo bootstrap để có thể sử dụng với nền tảng lập trình web
không nhiều.
Sản phẩm nặng, tốc độ tối ưu chưa cao: nên nếu dự án của bạn đòi hỏi sản phẩm nhẹ
thì việc sử dụng bootstrap sẽ là cả một gánh nặng cho web.
Chưa hoàn thiện: Bootstrap chưa đầy đủ các thư viện cần thiết. Các phát triển chưa
thể tạo ra một framework riêng hoàn hảo, do đó một số trang web vẫn phải dùng phiên
bản dành riêng cho mobile
Nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ưu điểm khi nó
cũng cấp gần như đầy đủ những tính năng cơ bản của một trang web responsive hiện
đại. Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tải thêm rất nhiều dòng
code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gì Bootstrap cung cấp.
Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themes sẵn có,
gọi ra cái .class từ stylesheet và thế là bạn đã có một trang web responsive trông cũng
ổn ổn. Sự tiện dụng và dễ dàng của Bootstrap nhiều khi sẽ khuyến khích tính lười sáng
tạo, vốn luôn thường trực trong mỗi chúng ta. Kết quả là, chúng ta thướng thoả hiệp
những gì mình thực sự muốn cho website để đổi lấy sự tiện dụng và tiết kiệm thời gian
mà Bootstrap mang lại.
1.6. jQuery
jQuery là một thuật ngữ phổ biến trong lập trình web, dùng để chỉ thư viện javascript
nổi bật. Nó giúp xây dựng cách chức năng cho website bằng javascript, rất dễ dàng,
nhanh chóng, đa dạng.
jQuery được ứng dụng giúp website có tính tương tác, hấp dẫn, thêm các animation
để tạo cảm giác sinh động, thông minh. jQuery miễn phí, mã nguồn mở, giúp các nhà
phát triển tạo ra plug in để trừu tượng hóa các hình ảnh, hiệu ứng trên website. Nó cũng
hỗ trợ nhiều trình duyệt khác nhau, có nghĩa "viết ít làm nhiều".
- Ưu điểm
Dễ sử dụng: Đây là lợi thế chính khi sử dụng jquery, nó dễ dàng hơn so với nhiều
thư viện javascript chuẩn khác bởi cú pháp đơn giản và bạn chỉ phải viết ít dòng lệnh
13
để tạo ra các chức năng tương tự. Chỉ với 10 dòng lệnh JQuery bạn có thể thay thế cả
20 chục dòng lệnh DOM javaScript, tiết kiệm thời gian của người lập trình.
Là một thư viện lớn của javascript: Thực thi được nhiều chức năng hơn so với các
thư viện jascript khác
Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery đang còn
tương đối mới, có một cộng đồng dành thời gian của họ để phát triển các plugin của
JQuery. Như vậy có hàng trăm plugin được viết trước đó có sẵn để tải về ngay lập tức
để đẩy nhanh quá trình viết code của bạn. Một lợi thế khác đằng sau này là hiệu quả và
an toàn của các script.
Có nhiều tài liệu và hướng dẫn chi tiết: Các trang web JQuery có một toàn bộ tài liệu
và hướng dẫn để ngay cả một người mới bắt đầu lập trình cũng có thể làm được quả
bóng lăn với thư viện jquery này.
Hỗ trợ ajax: JQuery cho phép bạn phát triển các template Ajax một cách dễ dàng.
Ajax cho phép một giao diện kiểu dáng đẹp trên website, các chức năng có thể được
thực hiện trên các trang mà không đòi hỏi toàn bộ trang được reload lại.
- Nhược điểm
Làm client trở nên chậm chạp: Client không những phải chỉ mình hiển thị nữa mà
còn phải xử lý nhiều chức năng được tạo thành từ jquery. Nếu lạm dụng quá nhiều
jquery sẽ làm cho client trở nên chậm chạp, đặc biệt những client yếu. Chính vì vậy mà
lập trình viên phải dùng thêm cache.
Chức năng có thể không có: JQuery đã có rất nhiều chức năng, tùy thuộc vào yêu cầu
trên trang web của bạn. Nhưng nhiều chức năng vẫn chưa được phát triển, do đó bạn
vẫn phải sử dụng javascript thuần để xây dựng chức năng này.
14
2. Tìm hiểu các lỗ hổng bảo mật
2.1. Định nghĩa
Trong an ninh mạng, lỗ hổng bảo mật (vulnerability) là các điểm yếu mà các tội phạm
mạng có thể lợi dụng khai thác để truy cập trái phép vào hệ thống máy tính. Sau khi
khai thác được lỗ hổng, một cyberattack có thể phát tán các mã độc, cài đặt malware
hay thậm chí là đánh cắp các dữ liệu nhạy cảm.
Lỗ hổng bảo mật có thể được định nghĩa theo nhiều cách khác nhau. Dưới đây là
cách một số cơ quan an ninh mạng lớn định nghĩa lỗ hổng bảo mật là gì:
- Viện Tiêu Chuẩn và Công nghệ Quốc gia NIST: Lỗ hổng bảo mật là những điểm
yếu tồn tại trong một hệ thống thông tin, quy trình bảo mật hệ thống, kiểm soát nội bộ
hay triển khai có thể bị khai thác bởi những nguồn đe dọa.
- ISO 27005: Là những điểm yếu của một asset hay nhóm các asset có thể bị khai
thác bởi một hay nhiều mối đe dọa mạng (cyber threat). Trong đó asset (tài sản) có thể
là bất kỳ thứ gì có giá trị đối với các tổ chức, hoạt động kinh doanh và tính liên tục của
tổ chức.
- IETF RFC 4949: Lỗ hổng bảo mật là một lỗi hay điểm yếu trong thiết kế, triển khai
hoặc cách vận hành và quản lý của hệ thống. Những yếu tố này có thể bị lợi dụng để vi
phạm các chính sách bảo mật của hệ thống.
- ENISA: Là sự tồn tại của các điểm yếu, lỗi thiết kế hay triển khai có thể dẫn đến
những việc không mong muốn, gây ảnh hưởng đến bảo mật của hệ thống máy tính,
mạng, ứng dụng hay giao thức có liên quan.
- The Open Group: Là xác suất mà khả năng của mối đe dọa vượt quá khả năng chống
lại chúng.
- ISACA: Là những điểm yếu trong thiết kế, triển khai, việc vận hành hay kiểm soát
nội bộ.
2.2. 10 lỗ hổng bảo mật web phổ biến theo chuẩn OWASP
- Lỗ hổng Injection (Lỗi chèn mã độc): Injection là lỗ hổng xảy ra do sự thiếu sót
trong việc lọc các dữ liệu đầu vào không đáng tin cậy. Khi ta truyền các dữ liệu chưa
15
được lọc tới Database (Ví dụ như lỗ hổng SQL injection), tới trình duyệt (lỗ hổng XSS),
tới máy chủ LDAP (lỗ hổng LDAP Injection) hoặc tới bất cứ vị trí nào khác. Vấn đề là
kẻ tấn công có thể chèn các đoạn mã độc để gây ra lộ dữ liệu và chiếm quyền kiểm soát
trình duyệt của khách hàng.
- Broken Authentication: các vấn đề có thể xảy ra trong quá trình xác thực. Có rất
nhiều rủi ro có thể gặp phải trong quá trình xác thực:
+ URL có thể chứa Session ID và rò rỉ nó trong Referer Header của người dùng
khác.
+ Mật khẩu không được mã hóa hoặc dễ giải mã trong khi lưu trữ.
+ Lỗ hổng Session Fixation.
+ Tấn công Session Hijacking có thể xảy ra khi thời gian hết hạn của session không
được triển khai đúng hoặc sử dụng HTTP (không bảo mật SSL)…
- Lỗ hổng XSS (Cross Site Scripting): Kẻ tấn công chèn các đoạn mã JavaScript vào
ứng dụng web. Khi đầu vào này không được lọc, chúng sẽ được thực thi mã độc trên
trình duyệt của người dùng. Kẻ tấn công có thể lấy được cookie của người dùng trên hệ
thống hoặc lừa người dùng đến các trang web độc hại.
- Insecure Direct Object References: Đây là trường hợp điển hình của việc cho rằng
đầu vào của người dùng là tin cậy từ đó dẫn đến lỗ hổng bảo mật. Lỗ hổng này xảy ra
khi chương trình cho phép người dùng truy cập các tài nguyên (dữ liệu, file, database).
Nếu không thực hiện quá trình kiểm soát quyền hạn (hoặc quá trình này không hoàn
chỉnh) kẻ tấn công có thể truy cập một cách bất hợp pháp vào các dữ liệu nhạy cảm,
quan trọng trên máy chủ.
- Security Misconfiguration: Trong thực tế, máy chủ website và các ứng dụng đa số
bị cấu hình sai. Có thể do một vài sai sót như:
+ Chạy ứng dụng khi chế độ debug được bật.
+ Directory listing
+ Sử dụng phần mềm lỗi thời (WordPress plugin, PhpMyAdmin cũ)
+ Cài đặt các dịch vụ không cần thiết.
16
+ Không thay đổi default key hoặc mật khẩu
+ Trả về lỗi xử lý thông tin cho kẻ tấn công lợi dụng để tấn công, chẳng hạn như
stack traces.
- Sensitive data exposure (Rò rỉ dữ liệu nhạy cảm): Lỗ hổng này thuộc về khía cạnh
crypto và tài nguyên. Dữ liệu nhạy cảm phải được mã hóa mọi lúc, bao gồm cả khi gửi
đi và khi lưu trữ – không được phép có ngoại lệ. Thông tin thẻ tín dụng và mật khẩu
người dùng không bao giờ được gửi đi hoặc được lưu trữ không được mã hóa. Rõ ràng
thuật toán mã hóa và hashing không phải là một cách bảo mật yếu. Ngoài ra, các tiêu
chuẩn an ninh web đề nghị sử dụng AES (256 bit trở lên) và RSA (2048 bit trở lên).
- Missing function level access control (lỗi phân quyền): Đây chỉ là sai sót trong vấn
đề phân quyền. Nó có nghĩa là khi một hàm được gọi trên máy chủ, quá trình phân
quyền không chính xác.
- Cross Site Request Forgery (CSRF): Trình duyệt bị đánh lừa bởi một số bên thứ ba
lạm dụng quyền hạn.
- Using components with known vulnerabilities: Đây là vấn đề xảy ra khi sử dụng
các bộ thư viện đã tồn tại lỗ hổng.
- Unvalidated redirects and forwards: Giả sử rằng trang đích có một mô-đun
redirect.php lấy URL làm tham số. Thao tác với tham số này có thể tạo ra một URL trên
targetite.com chuyển hướng trình duyệt đến địa chỉ malwareinstall.com. Khi người
dùng nhìn thấy liên kết, họ sẽ thấy liên kết targetite.com/blahblahblah tin cậy và truy
cập vào. Họ ít biết rằng địa chỉ này thực ra chuyển tới trang nhúng phần mềm độc hại
(hoặc bất kỳ trang độc hại khác). Ngoài ra, kẻ tấn công có thể chuyển hướng trình duyệt
sang targetite.com/deleteprofile?confirm=1.
17
3. Tìm hiểu về SEO
3.1. Định nghĩa
SEO là từ viết tắt của Search Engine Optimization – Tối ưu hóa công cụ tìm kiếm.
Và SEO website là tập hợp các phương pháp giúp cải thiện thứ hạng của một website
trên trang kết quả của công cụ tìm kiếm – SERPs (thông thường là Google).
2 yếu tố quyết định thành công của SEO là: SEO Onpage và SEO Offpage
- SEO Onpage: là tập hợp các phương pháp tối ưu hóa các yếu tố hiển thị ngay trên
trang web, các trang con và được lặp lại nhiều lần khi đăng các bài viết mới. Mục đích
là cải thiện thứ hạng của trang web trên kết quả của các công cụ tìm kiếm.
- SEO Offpage: SEO là tập hợp các thủ thuật tối ưu hóa các yếu tố bên ngoài website,
bao gồm xây dựng liên kết (link building), marketing trên các kênh social media, social
media bookmarking, … giúp website lên top Google, kéo về hàng nghìn traffic. Gồm 3
yếu tố link building, social media marketing, social media bookmarking và các yếu tố
ảnh hưởng khác, SEO backlinks là yếu tố quan trọng nhất. Yếu tố này có ảnh hưởng
nhiều nhất tới thứ hạng từ khóa và website trong bộ máy tìm kiếm. Các backlinks này
hoạt động như là một phiếu bầu cho nội dung blog/website. Càng nhiều phiếu bầu chất
lượng, website càng có khả năng xếp hạng cao trong kết quả tìm kiếm.
6 loại hình SEO là:
- SEO tổng thể: là tối ưu hoá toàn bộ website theo tiêu chuẩn Google cùng một số
yếu tố khác để tăng uy tín và chất lượng cho website, đồng thời nâng cao trải nghiệm
người dùng.
- SEO từ khóa: chỉ tập trung tối ưu hóa từ khóa để tăng thứ hạng cao nhất trên trang
kết quả của công cụ tìm kiếm như Google.
- SEO Social: kết hợp phát tán trên Facebook hay Twitter với SEO Google để góp
phần nâng cao thứ hạng của website trên trang kết quả tìm kiếm tự nhiên.
- SEO ảnh: tối ưu hoá giúp hình ảnh sản phẩm, hình ảnh website xếp hạng cao hơn
trên kết quả tìm kiếm của Google và các công cụ tìm kiếm hình ảnh khác.
- SEO App: giúp app xuất hiện trên kết quả tìm kiếm mobile.
18
- SEO Local: phù hợp với các hình thức kinh doanh tại địa phương, thu hút khách
hàng tiềm năng ghé đến cửa hàng tốt nhất
3.2. Lợi ích của SEO
- Thu hút khách hàng bền vững & liên tục tăng trưởng: Tối ưu SEO cho website cơ
hội đạt TOP tìm kiếm Google, đồng nghĩa với việc thu hút hàng ngàn traffic đến
website. Và ta chỉ cần duy trì nó.
- Tăng tỷ lệ ROI (Return On Investment): ROI là tỷ lệ lợi nhuận thu được so với chi
phí đầu tư, ROI càng cao chứng tỏ hoạt động doanh nghiệp càng hiệu quả.
- Khoản đầu tư mang tính dài hạn: Không giống với quảng cáo – khi ngừng đầu tư
quảng cáo cũng tắt theo, SEO mang lại kết quả dài hạn sau khoản thời gian tối ưu hiệu
quả.
- Linh hoạt, điều hướng khách hàng theo mong muốn.
- Giúp hiểu rõ hành vi của khách hàng tiềm năng.
- Xây dựng, củng cố và phát triển thương hiệu bền vững.
3.3. Hạn chế của SEO
- Thời gian đầu tư lâu – ảnh hưởng chi phí cơ hội trong kinh doanh: thời gian cần
cho SEO sẽ rất lâu, vì vậy cần có sự kiên nhẫn và sẽ không phù hợp với doanh nghiệp
cần quảng cáo nhanh.
- Đối thủ cạnh tranh mạnh lên: cần phải liên tục cải thiện chiến lược SEO để không
bị các đối thủ vượt mặt.
- Không phải là kênh tạo ra chuyển đổi nếu chỉ thuần về SEO: không phải chỉ cần có
SEO là trang web sẽ lên top tìm kiếm, ta cần phải kết hợp nhiều thứ khác nữa (UI/UX,
nội dung website,...) mới có thể đạt được điều đó.
- Sự biến đổi liên tục của thuật toán Google: website cần phải liên tục được tối ưu
để đáp ứng được các cập nhật bất ngờ của thuật toán Google.
19
III. THIẾT KẾ ỨNG DỤNG

1. Thiết kế cơ sở dữ liệu
1.1. Mô tả thiết kế cơ sở dữ liệu
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

AUTO_INCREMENT sản 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
20
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_PROD INT Xác định sản phẩm

UCT hàng đầu
Bảng SUB_IMG_URL
Khóa chính ID BIGINT, Số thứ tự của ảnh phụ

AUTO_INCREMENT mỗi sản phẩm, mỗi sản
phẩm có thường 1-4
ảnh phụ
Khóa ngoại đến ID PID BIGINT Thứ tự của sản phẩm

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

AUTO_INCREMENT viên
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
21
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 ID UID BIGINT Thứ tự thành viên trong

bảng ACCOUNT bảng ACCOUNT
TIME DATE Thời gian thành viên

đặt hàng
STATE TINYINT Trạng thái thanh toán
Bảng PRODUCT_IN_CART
Khóa chính ID BIGINT, Thứ tự giỏ hàng

AUTO_INCREMENT
Khóa ngoại đến ID PID BIGINT Số thứ tự sản phẩm

bảng PRODUCT trong bảng PRODUCT
Khóa ngoại đến ID OID BIGINT Thứ tự thành viên trong

22
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ả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 ID PID BIGINT Thứ tự sản phẩm trong

bảng PRODUCT bảng

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
23
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_CO VARCHAR(300) Nội dung tóm tắt

NTENT
Bảng COMMENT_NEWS
Khóa chính ID BIGINT, Thứ tự bình luận trong

AUTO_INCREMENT bảng
Khóa ngoại đến ID NID BIGINT Thứ tự tin tức trong

bảng NEWS bảng NEWS
Khóa ngoại đến ID CID BIGINT Thứ tự của thành viên

bảng ACCOUNT trong bảng ACCOUNT
CONTENT TEXT Nội dung bài bình luận
TIME DATE Ngày đăng bài bình

luận
Bảng CYCLE
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ụ
24
NAME VARCHAR(50) Tên gói dịch vụ
COST INT Giá thành gói dịch vụ
Bảng PRODUCT_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 ID CBID INT Thứ tự gói dịch vụ trong

bảng COMBO bảng COMBO
Khóa ngoại đến ID PID BIGINT Thứ tự sản phẩm trong

bảng PRODUCT bảng PRODUCT
Bảng MESSAGE
Khóa chính ID BIGINT, Thứ tự tin nhắn từ

AUTO_INCREMENT khách hàng (trang Liên
hệ)
FNAME VARCHAR(100) Họ tên khách hàng
EMAIL VARCHAR(250) Email người gửi
PHONE VARCHAR(10) 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 ORDER_COMBO
25
Khóa chính ID INT Thứ tự giỏ hàng combo

Khóa ngoại đến ID CBID INT Thứ tự gói dịch vụ trong

bảng COMBO bảng COMBO
TIME DATE Thời gian thành viên

đặt hàng gói dịch vụ
Khóa ngoại đến ID CYCLE INT Thứ tự chu kỳ dịch vụ

bảng CYCLE giao hàng
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

AUTO_INCREMENT tài khoản
CMND VARCHAR(10) Chứng minh nhân dân

người bị cấm
26
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
“WEB_DEV_HK211” 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,
27
$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.
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.
28
3. Mô hình ứng dụng
29
4. Các tính năng được xây dựng
Tên hàm Mô tả
Home_page($user): Chuyển hướng người dùng đến trang “Trang
return view(“Home_page”, $data); chủ” 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
About_us($user): Chuyển hướng người dùng đến trang “Về chúng
return view(“About_US”, $data); tôi” 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
Products($user, $sort_1="", Chuyển hướng người dùng đến trang “Sản

$sort_2=""): phẩm” và hiện giao diện cùng với những tác vụ
return view(“Products”, $data); đúng với cấp người dùng sau khi controller yêu
Contact_us($user): Chuyển hướng người dùng đến trang “Liên hệ”
return views(“Contact_US”, và hiện giao diện cùng với những tác vụ đúng
$data); với cấp người dùng sau khi controller yêu cầu
đến model tương ứng
News($user) Chuyển hướng người dùng đến trang “Tin tức”
return views(“News”, $data); 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
30
Post_news($user, $params) Chuyển hướng quản lý đến trang “Thêm tin tức”
return views(“News”, $data); sau khi quản lý click vào “Thêm tin tức” trong
giao diện tin tức
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, $array) Chức năng dành cho thành viên đăng bài bình
luận vào tin tức
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
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
31
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
$array) phẩm có giỏ 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ỏ

$array) hàng sau khi thành viên kiểm tra tại trang “Giỏ”
và nhấn “Thanh toán”
32
delete_order_combo_id($user, Hàm dùng để thành viên xóa dịch vụ có trong

$array) giỏ hàng sau khi nhấn “X”
update_cart_combo($user, $array) Hàm sẽ cập nhật lại trang thái sau khi thanh toán
dịch vụ
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, $array) Thêm bài bình luận của thành viên vào các sản
phẩm
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, $array Chức năng giành cho thành viên sau khi thêm
dịch vụ vào giỏ hàng
33
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à “phamminhhieu1594@gmail.com”
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í
34
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á

$array) nhân”
35
IV. HIỆN THỰC

1. Đối với khách hàng
1.1. Giao diện trang chủ
36
37
1.2. Giao diện trang sản phẩm
1.3. Giao diện trang chi tiết sản phẩm
38
39
1.4. Giao diện trang bảng giá
40
1.5. Giao diện trang tin tức
41
1.6. Giao diện trang tin tức chi tiết
42
1.7. Giao diện trang về chúng tôi
1.8. Giao diện trang đăng ký tài khoản
43
1.9. Giao diện trang đăng nhập
44
2. Đối với thành viên
2.1. Giao diện trang liên hệ
2.2. Giao diện trang quên mật khẩu
45
2.3. Giao diện trang giỏ hàng
46
2.4. Giao diện trang thanh toán
2.5. Giao diện trang tài khoản cá nhân
47
48
3. Đối với quản lý
3.1. Quản lý được thêm, xóa, sửa sản phẩm
49
50
3.2. Quản lý có thể xóa bình luận quá tiêu cực
3.3. Quản lý có thể thêm, xóa, sửa các gói, thêm chu kì
51
52
3.4. Quản lý có thể thêm, xóa, sửa tin tức
53
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
54
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
55
56
V. TỔNG KẾT
1. Bảng phân chia công việc
Họ, tên Công việc Mức độ hoàn thành (%)
Nguyễn Hoài Thương Hiện thực giao diện và chức 100%

năng trang chủ, trang sản phẩm,
chi tiết sản phẩm
Nguyễn Hồng Dân Hiện thực giao diện và chức 100%

năng trang đăng ký, đăng nhập,
trang tin tức, tin tức chi tiết,
trang về chúng tôi
Phạm Minh Hiếu Hiện thực giao diện và chức 100%

năng trang giỏ hàng, thanh toán,
liên hệ, hồ sơ khách hàng
57
2. Tổng kết về bài tập lớn
2.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 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
58
2.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.
2.3. Phương hướng phát triển trong thời gian tới
- Thông trang web cần bảo mật hơn.
- 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 chatbox để 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.
59
3. Hướng dẫn sử dụng và cài đặt môi trường
Ứng dụng chạy trên localhost với công cụ xampp có hỗ trợ MySQL và ngôn ngữ
PHP có phiên bản trên 7.3.
- Cài đặt lại file sendmail.ini trong thư mục Xampp/sendmail/
smtp_server là tên miền mà mail sẽ gửi
smtp_port là port smtp sử dụng để gửi mail
error_logfile là file lưu trữ lại lịch sử gửi mail vào báo tình trạng
debug_logfile là file lưu trữ thông tin quá trình gửi mail
auth_username là tên của người gửi
auth_password là mật khẩu được cung cấp sau khi cài đặt App passwords ở tài khoản
mail sở hữu
force_sender là email người gửi
- Cách lấy mật khẩu từ App password của gmail
60
61
Chúng ta cài đặt bảo mật 2 bước, sau đó chọn App passwords ở trang thông tin cá
nhân
Và chúng ta “Ứng dụng khác” và điền tên phần mềm là “xampp” và chấp nhận. Sau
đó, Google sẽ gửi mật khẩu App password và chúng ta đem mật khẩu đó vào
auth_password trong file sendmail.ini
- Cài đặt php.ini trong thư mục Xampp/php/
SMTP là tên miền mà mail sẽ gửi
62
smtp_port là port smtp sử dụng để gửi mail
sendmail_from là email người gửi
sendmail_path là đường dẫn đến ứng dụng sendmail.exe
- Thay đổi thư mục DocumentRoot trong file httpd.conf (công cụ xampp) thành
đường dẫn đến ứng dụng
- Start Apache và MySQL trong Xampp. Sau đó, Import file Web_db.sql trong thư
mục WEB_DEV_HK211 vào phpMyAdmin.
63
TÀI LIỆU THAM KHẢO

[] 5sao. (Tham khảo: 28/11/2021). Website Doanh Nghiệp Là Gì? Lợi Ích Khi Thiết
Kế Website Doanh Nghiệp. Truy cập từ http://congnghenamsao.vn/cong-nghe-
bootstrap.html
[] Bizfly. (Tham khảo: 28/11/2021). 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.
[] Công ty Tất Thành. (Tham khảo: 28/11/2021). Công nghệ bootstrap. Truy cập từ
https://tatthanh.com.vn/website-doanh-nghiep-la-gi.
[] CyStack. (Tham khảo: 28/11/2021). 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-hong-
bao-mat-web
[] GtvSEO. (Tham khảo: 28/11/2021). 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
[] FreePHPEditor. (Tham khảo: 28/11/2021). 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/
[] QuanTriMang. (Tham khảo: 28/11/2021).HTML là gì? Cấu trúc HTML cơ bản .

Truy cập từ https://vietnix.vn/lo-hong-bao-mat/
[] QuanTriMang. (Tham khảo: 28/11/2021).CSS là gì? Giới thiệu về CSS. Truy cập
từ https://quantrimang.com/gioi-thieu-ve-css-152825
[] TDFoss. (Tham khảo: 28/11/2021). Website doanh nghiệp là gì? Tại sao cần thiết
kế website doanh nghiệp?. Truy cập từ https://tdfoss.vn/tin-tuc/goc-chia-se/website-
doanh-nghiep-la-gi-tai-sao-can-thiet-ke-website-doanh-nghiep-250.html
[] ThietKeWebDatLat.net. (Tham khảo: 28/11/2021). JAVASCRIPT là gì? Ưu và

nhược điểm của JAVASCRIPT. Truy cập từ
https://thietkewebdalat.net/blog/javascript-la-gi/
[] Vietnix. (Tham khảo: 28/11/2021). 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/
64

Assignment 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment 2

Uploaded by

Copyright:

Available Formats

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

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

LẬP TRÌNH WEB (CO3049)

BÀI TẬP LỚN: Đề tài

WEBSITE CHO CÔNG TY –

Giảng viên hướng dẫn: Nguyễn Hữu Hiếu

Nhóm thực hiện: Nguyễn Hoài Thương 1912184

Nguyễn Hồng Dân 1910916

Phạm Minh Hiếu 1913356

Email liên lạc: thuong.nguyenk_19@hcmut.edu.vn

Tp. Hồ Chí Minh, Tháng 9/2021

1.5. Giao diện trang tin tức................................................................................... 41

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

- Làm tăng tính chuyên nghiệp của công ty - doanh nghiệp.

JS không có bất kỳ khả năng đa luồng hoặc đa xử lý nào.

2. Tìm hiểu các lỗ hổng bảo mật

2.1. Định nghĩa

+ Lỗ hổng Session Fixation.

+ Chạy ứng dụng khi chế độ debug được bật.

+ Sử dụng phần mềm lỗi thời (WordPress plugin, PhpMyAdmin cũ)

+ Cài đặt các dịch vụ không cần thiết.

+ Không thay đổi default key hoặc mật khẩu

3. Tìm hiểu về SEO

3.1. Định nghĩa

6 loại hình SEO là:

3.2. Lợi ích của SEO

- Linh hoạt, điều hướng khách hàng theo mong muốn.

- Giúp hiểu rõ hành vi của khách hàng tiềm năng.

- Xây dựng, củng cố và phát triển thương hiệu bền vững.

3.3. Hạn chế của SEO

III. THIẾT KẾ ỨNG DỤNG

1.1. Mô tả thiết kế cơ sở dữ liệu

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

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

NAME VARCHAR(100) Tên sản phẩm với độ

PRICE INT Giá từng sản phẩm

IMG_URL VARCHAR(250) Đường dẫn lưu trữ hình

NUMBER INT Số sản phẩm còn tồn tại

DECS TEXT Mô tả các sản phẩm

CATEGORY VARCHAR(250) Phân loại sản phẩm

TOP_PROD INT Xác định sản phẩm

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

Khóa ngoại đến ID PID BIGINT Thứ tự của sản phẩm

IMG_URL VARCHAR(250) Đường dẫn lưu trữ hình

Khóa chính ID BIGINT, Thứ tự của các thành

CMND VARCHAR(10) Chứng minh nhân dâ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

RANK INT Định danh thành viên

Khóa chính ID BIGINT, Thứ tự giỏ hàng

Khóa ngoại đến ID UID BIGINT Thứ tự thành viên trong

TIME DATE Thời gian thành viên

STATE TINYINT Trạng thái thanh toán

Khóa chính ID BIGINT, Thứ tự giỏ hàng

Khóa ngoại đến ID PID BIGINT Số thứ tự sản phẩm

Khóa ngoại đến ID OID BIGINT Thứ tự thành viên trong

QUANTITY INT Số lượng các sản phẩm

SIZE VARCHAR(5) Kích thước các sản