Thiết kế giao diện và xây dựng các tính năng cơ bản cho website công ty - doanh nghiệp BTL môn Lập trình Web - thầy Nguyễn Hữu Hiếu CSE - HCMUT
Website Công ty - Doanh nghiệp
Website doanh nghiệp là một trong những web thiết kế giới thiệu về doanh nghiệp, bao bao gồm các thông tin về: quá trình hoạt động, sản phẩm, dịch vụ của doanh nghiệp đó Từ điều đó giúp cho khách hàng có thể dễ dàng biết được doanh nghiệp của bạn, đồng thời mạnh và cải thiện hoạt động kinh doanh của doanh nghiệp.
Thời đại công nghệ thông tin ngày càng phát triển thì website chính là kênh truyền thô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/ 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 kinh doanh 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 cung 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 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.
• Quảng bá ở thị trường toàn cầu.
• Thông tin luôn sẵn có trên website và có thể được xem bất kì lúc nào, tìm kiếm 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 báo đài, nội dung lại không giới hạn).
• Khối lượng thông tin cung cấp không hạn chế như quẳng cáo trên báo đài.
• Tương tác với đối tượng khách hàng (hỗ trợ, tư vấn, đặt hàng, )
Yêu cầu của Website Công ty - Doanh nghiệp
Yêu cầu về kỹ thuật
Các website hiện đại yêu cầu tốc độ tải web nhanh chóng Đây là một trong những yêu cầu quan trọng nhất khi nói đến phát triển website Đảm bảo tối ưu code, hình ảnh, video và các yếu tố khác trên website để giảm tối đa thời gian tải trang.
Bảo mật là yếu tố quan trọng hàng đầu cho mọi website Cài đặt chứng chỉ SSL và các biện pháp bảo mật nâng cao không chỉ bảo vệ dữ liệu của website mà còn tạo dựng niềm tin cho người dùng và tăng thứ hạng trên công cụ tìm kiếm Website kém an toàn sẽ khiến người dùng e ngại chia sẻ thông tin cá nhân.
Một website thu hút khách hàng ngay từ cái nhìn đầu tiên nhờ giao diện đẹp mắt Cấu trúc trang web hoàn chỉnh cần cung cấp đầy đủ thông tin một cách rõ ràng và chuyên nghiệp Bên cạnh vẻ đẹp thẩm mỹ, tính dễ đọc cũng rất quan trọng, giúp khách hàng dễ dàng tìm kiếm thông tin cần thiết.
Trang quản trị dễ sử dụng là yếu tố quan trọng quyết định trải nghiệm quản trị website của bạn Một trang quản trị trơn tru và dễ dàng thao tác giúp bạn quản lý website hiệu quả, góp phần tạo nên một website hoàn hảo.
Cuối cùng là tối ưu SEO SEO làm cho website dễ hiểu, dễ sử dụng với cả người dùng và công cụ tìm kiếm. Ngày nay, các công cụ tìm kiếm ngày càng trở nên thông minh, nhưng nó vẫn chưa thể hiểu hết những gì con người làm SEO giúp công cụ tìm kiếm hiểu nội dung mà trang web cung cấp, đồng thời mang đến trải nghiệm tốt hơn cho khách hàng
Yêu cầu về thiết kế
Một website tuyệt vời phải hiển thị đẹp trên mọi trình duyệt và kích thước màn hình Một website có nội dung tràn khung, chữ quá nhỏ để đọc hay khó nhấp vào nút sẽ khiến người dùng muốn thoát ra ngay lập tức. Yêu cầu về tính năng
Mỗi website và doanh nghiệp có những nhu cầu riêng về tính năng, nhưng vẫn có những tính năng cơ bản cần thiết cho mọi website, đảm bảo hoạt động hiệu quả.
• Tính năng đăng nhập, đăng ký
Yêu cầu của bài tập lớn
Sinh viên sẽ thực hiện việc tìm hiểu, thiết kế giao diện và tính năng cho website công ty - doanh nghiệp, áp dụng kiến thức đã học về HTML5/CSS3, Javascript, PHP và MySQL Dự án yêu cầu không sử dụng bất kỳ PHP Framework, CMF (Content Management Framework) hay CMS (Content Management System) nào Tuy nhiên, sinh viên được phép sử dụng các thư viện và framework CSS3 và Javascript.
Xây dựng trang web theo mô hình MVC Thiết kế giao diện gồm các tính năng cơ bản:
• Thông tin dịch vụ, sản phẩm
• Giao diện các trang liên quan như đăng nhập/đăng ký, giỏ hàng, thông tin thanh toán (nếu có), các trang quản lý,
Thiết kế tính năng cơ bản cho trang web:
• Thiết kế tính năng cho các loại người dùng.
• Các tính năng đặc thù khác tuỳ vào loại sản phẩm của website nhóm lựa chọn.
• Thiết kế cơ sở dữ liệu (MySQL) để lưu trữ thông tin của ứng dụng web.
• Thực hiện kiểm tra dữ liệu đầu vào, sử dụng cả kiểm tra bằng javascript (client side) và PHP (server side).
• Tìm hiểu và ứng dụng các thư viện/framework CSS3, javascript để thiết kế giao diện, hiệu ứng và tương tác cho trang web như carousel, wysiwyg, drag & drop file upload, lazy loading, parallax, animations,
• Hiện thực phân trang cho các tính năng hiển thị thông tin quá dài.
Bootstrap
Giới thiệu
Bootstrap là một framework front-end miễn phí giúp người dùng phát triển web nhanh và dễ dàng hơn Nó bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, hình ảnh , cũng như có các plugin JavaScript tùy chọn Với Bootstrap, ta có thể phát triển một website có độ responsive cao, thích ứng với nhiều thiết bị khác nhau.
Bootstrap 5 là phiên bản mới nhất, với tài liệu hướng dẫn mới và cải thiện hơn trong việc tùy biến CSS Hơn hết, Bootstrap 5 đã loại bỏ hoàn toàn việc phụ thuộc jQuery Với sự thay đổi này, dung lượng code sẽ giảm xuống tối ưu hơn, tốc độ website cũng sẽ được cải thiện nhiều hơn Ngoài ra, khi sử dụng JavaScript thuần làm chủ đạo, chất lượng code của Bootstrap 5 được cải thiện đáng kể so với người tiền nhiệm Bootstrap 4.
Ưu, nhược điểm
Bootstrap dễ sử dụng, phù hợp với những người có kiến thức cơ bản về HTML và CSS Hệ thống CSS Responsive của Bootstrap giúp website tự động điều chỉnh kích thước phù hợp với các thiết bị khác nhau như điện thoại, máy tính bảng và máy tính để bàn.
– Có các style ưu tiên thiết bị di động: Trong Bootstrap, các style ưu tiên thiết bị di động (mobile-first) là một phần framework cốt lõi.
– Tương thích với nhiều trình duyệt: Bootstrap 5 tương thích với tất cả các trình duyệt phổ biến hiện nay: Chrome, Firefox, Edge, Safari và Opera.
– Bootstrap giới hạn sự sáng tạo: 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.
Mặc dù Bootstrap đang được phát triển liên tục, nó vẫn chưa hoàn thiện với đầy đủ các thư viện cần thiết Điều này khiến các nhà phát triển chưa thể tạo ra một framework riêng hoàn hảo và một số trang web vẫn phải kết hợp với các framework hoặc ngôn ngữ khác.
jQuery AJAX
Giới thiệu
AJAX là chữ viết tắt của Asynchronous JavaScript and XML, AJAX = Asynchronous JavaScript and XML.
• Asynchronous- hay nói ngắn hơn là Async – có nghĩa là một chương trình có thể xử lý không theo tuần tự các hàm Lợi ích dễ thấy nhất của bất đồng bộ là chương trình có thể xử lý nhiều công việc một lúc.
JavaScript là một ngôn ngữ lập trình phổ biến, nổi tiếng với khả năng quản lý nội dung động trên website và tương tác với người dùng.
• XML là một dạng của ngôn ngữ markup như HTML, chữ đầy đủ của nó là eXtensible Markup Language. Nếu HTML được dùng để hiển thị dữ liệu thì XML được thiết kế để chứa dữ liệu.
AJAX cho phép JavaScript và XML hoạt động bất đồng bộ, giúp các ứng dụng web gửi và nhận dữ liệu từ server mà không tải lại toàn bộ trang jQuery Ajax, là một phần của thư viện jQuery, cung cấp các phương thức để thực hiện các chức năng AJAX, cho phép yêu cầu dữ liệu từ server dưới dạng text, HTML, XML và JSON, sử dụng cả HTTP GET và HTTP POST Ngoài ra, jQuery Ajax còn cho phép lấy dữ liệu từ bên ngoài và chèn vào các phần tử được chọn Ba phương thức cơ bản nhất của jQuery Ajax bao gồm:
• Phương thức jquery load () jQuery Ajax: lấy dữ liệu từ server và trả dữ liệu cho phần tử được chọn.
• Phương thức Post () trong JQuery Ajax: lấy dữ liệu từ server bằng phương thức HTTP POST REQUEST
• Phương thức Get () trong Jquery Ajax: lấy dữ liệu từ server bằng phương thức HTTP GET
Ưu, nhược điểm
– Thực hiện các cuộc gọi không đồng bộ: Ajax cho phép bạn thực hiện các cuộc gọi không đồng bộ đến server, giúp trình duyệt của người dùng tránh phải chờ tất cả dữ liệu đến trước khi cho phép người dùng hành động một lần nữa.
– Thân thiện với người dùng: Vì không phải post lại trang lên server, các ứng dụng hỗ trợ Ajax sẽ luôn nhanh hơn và thân thiện với người dùng hơn.
– Tăng tốc độ: Mục đích chính của Ajax là cải thiện tốc độ, hiệu suất và khả năng sử dụng của một ứng dụng web.
Ajax giúp tăng tốc độ tải trang cho người dùng nhưng đồng thời cũng làm tăng lượng request đến server, dẫn đến áp lực lên máy chủ và tiêu thụ nhiều dữ liệu hơn.
– Kém an toàn: bất kỳ ai cũng có thể xem mã nguồn của ứng dụng web được phát triển bằng AJAX, gây kém an toàn hơn.
– AJAX hoạt động không đồng bộ Do đó, một số thông tin trang có thể không tương ứng với thông tin mới được tải.
Lỗ hổng bảo mật của trang web
Trong lĩnh vực an ninh mạng, lỗ hổng bảo mật là một điểm yếu có thể bị khai thác bởi một tác nhân xấu để thực hiện một cuộc tấn công mạng nhằm mục đích thực hiện các hành động phi pháp lên hệ thống mục tiêu. Các lỗ hổng có thể cho phép kẻ tấn công chạy mã, truy cập bộ nhớ của hệ thống, cài đặt phần mềm độc hại và đánh cắp, phá hủy hoặc sửa đổi những dữ liệu nhạy cảm Đây là một trong những nguyên nhân hàng đầu gây ra các cuộc tấn công mạng nhắm vào tổ chức, doanh nghiệp và gây ra thiệt hại lên tới hàng ngàn tỉ USD trên toàn cầu.
Có nhiều định nghĩa cho lỗ hổng bảo mật:
• Với Viện Tiêu chuẩn và Công nghệ Quốc gia (NIST), lỗ hổng bảo mật là điểm yếu trong hệ thống thông tin, quy trình bảo mật hệ thống, kiểm soát nội bộ hoặc công tác triển khai có thể bị khai thác bởi tác nhân gây hại.
• Với ISO 27005, nó có nghĩa là điểm yếu của một tài sản hoặc nhóm tài sản có thể bị khai thác bởi một hoặc nhiều mối đe dọa trên mạng, trong đó tài sản là bất cứ thứ gì có giá trị đối với tổ chức, hoạt động kinh doanh của tổ chức và tính liên tục của những hoạt động đó, bao gồm các tài nguyên thông tin hỗ trợ sứ mệnh của tổ chức.
Theo IETF RFC 4949, lỗ hổng là một điểm yếu trong thiết kế, triển khai, vận hành hoặc quản lý của hệ thống, có thể bị khai thác để vi phạm chính sách bảo mật của hệ thống.
Các nguyên nhân gây ra lỗ hổng bảo mật thường kể đến như sau:
• Độ phức tạp: Các hệ thống phức tạp làm tăng xác suất của lỗ hổng, sai sót trong cấu hình hoặc truy cập ngoài ý muốn.
Độ phổ biến của mã nguồn, phần mềm, hệ điều hành và phần cứng càng cao thì khả năng kẻ tấn công tìm thấy hoặc có thông tin về các lỗ hổng bảo mật đã biết càng lớn.
• Quản lý mật khẩu kém: Những mật khẩu yếu có thể bị phá bằng tấn công brute-force và việc sử dụng lại mật khẩu có thể dẫn đến từ một vi phạm dữ liệu trở thành nhiều vụ vi phạm xảy ra.
• Lỗi hệ điều hành: Giống như bất kỳ phần mềm nào khác, hệ điều hành cũng có thể có lỗ hổng Các hệ điều hành không an toàn – chạy mặc định và để tất cả mọi người dùng có quyền truy cập đầy đủ sẽ có thể cho phép vi-rút và phần mềm độc hại thực thi các lệnh.
Khi trang web hoặc phần mềm không kiểm tra đầu vào của người dùng, chúng có thể dễ dàng bị khai thác bởi các lệnh SQL độc hại, dẫn đến việc thực thi các lệnh ngoài ý muốn Điều này có thể gây ra thiệt hại nghiêm trọng cho dữ liệu và hệ thống của bạn.
Thiết kế cơ sở dữ liệu
Bảng user
Hình 1:Cấu trúc bảng user
Bảng user dùng để lưu thông tin người dùng đã đăng nhập vào trang web Bảng gồm các trường sau:
• email và pw lần lượt là email và password để dùng cho tính năng đăng nhập
• is_admin với giá trị mặc định là 0 để kiểm tra xem người dùng có phải là admin hay không (có giá trị là
1 (là admin) và 0 (không phải là admin)
• full_name lưu thông tin về tên của người dùng.
Bảng prices
Hình 2: Cấu trúc bảng prices
Bảng prices dùng để lưu thông tin giá bán của các sản phẩm bao gồm các trường sau:
• is_individual và is_team dùng để kiểm tra xem sản phẩm đó là sản phẩm dành cho cá nhân hay dành cho team (business).
• category là thông tin về các danh mục của sản phẩm.
• description là thông tin về mô tả của các sản phẩm.
• price_per_month là thông tin về đơn giá bán sản phẩm với hạn sử dụng là một tháng.
• features là thông tin về các tính năng bao gồm trong sản phẩm.
Bảng questions
Hình 3: Cấu trúc bảng questions
Bảng questions dùng để lưu nội dung câu hỏi mà khách hàng gửi thông qua chức năng liên hệ cũng như các thông tin cơ bản về họ, gồm các trường:
• username để lưu tên của khách hàng
• email để lưu lại địa chỉ email của khách hàng, dùng cho việc liên lạc.
• sdt để lưu số điện thoại của khách hàng, dùng cho việc liên lạc.
• title là tiêu đề của câu hỏi/ thắc mắc của khách hàng.
• content là nội dung câu hỏi của khách hàng.
Tính năng ứng dụng
Tính năng của người dùng
• Xem danh sách các sản phẩm, tính năng của sản phẩm, giá của sản phẩm.
• Liên hệ với doanh nghiệp.
Tính năng của Admin
• Admin có đầy đủ tính năng như của người dùng.
• Quản lý các tài khoản của người dùng: xem, chỉnh sửa, xóa tài khoản
• Quản lý các thông tin trên trang: sản phẩm, giá thành, Q&A.
Cấu trúc mã nguồn
Cây thư mục
Chi tiết các thư mục như sau:
• admin: Thư mục admin chứa các file hiện thực các chức năng quản lý người dùng cũng như quản lý content trên trang.
• assets:Thư mục assets chứa các file hình ảnh, javascripts và CSS.
• auth:và các thư mục cùng cấp sẽ là nơi hiện thực các chức năng Ví dụ, các chức năng liên quan đến quản lý của admin sẽ được hiện thực trong thư mục admin cùng cấp với auth Tương tự với các thư mục home, price và product.
• partials: là thư mục chứa các file header và footer của các trang, thuận tiện cho việc import vào các trang khác, tránh lặp lại code nhiều lần.
• connect.php:thực hiện kết nối đến database, các file khác nếu muốn kết nối đến database thì chỉ cần import connect.php, sau đó sử dụng object $conn.
• db.sql:nơi lưu những thay đổi về cấu trúc database, dùng để chạy lần đầu khi khởi tạo project.
• session.php:tạo, lưu các thông tin cần thiết vào $_SESSION, những thông tin global (tên/role/email user đã đăng nhập sẽ được set và lưu ở đây).
Ưu điểm của cấu trúc thư mục trên
Việc sắp xếp mã nguồn theo chức năng mang lại các lợi ích sau
• Các đoạn mã liên quan đến một chức năng đều nằm gần nhau, dễ trong việc tìm kiếm các file khi lập trình và sửa lỗi
• Giúp lập trình viên khi mới tham gia vào dự án ở bất kỳ giai đoạn nào cũng dễ dàng nắm bắt được luồng đi của ứng dụng
• Tránh được conflict khi nhiều người làm việc trên nhiều chức năng khác nhau cùng lúc
Xác thực người dùng
Trang chủ
Bảng giá
Giới thiệu sản phẩm
Liên hệ
Các trang thông báo lỗi
Hình 20:404 - Không tìm thấy trang
Hình 21:403 - Không có quyền truy cập
Quản lý người dùng
Hình 22: Danh sách người dùng
Hình 23:Xem người dùng chi tiết
Hình 24:Chỉnh sửa thông tin người dùng
Quản lý giá sản phẩm
Hình 25:Chỉnh thông tin sản phẩm
Trả lời câu hỏi từ khách hàng
Hình 26:danh sách câu hỏi khách hàng gửi đến
Về ứng dụng
Ứng dụng được hiện thực bằng PHP 8.1.11 và Hệ quản trị Cơ sở Dữ liệu MSQL 8.0.31
Hình 27:Phiên bản ứng dụng
Các bước cài đặt và khởi chạy ứng dụng
1 Cài đặt MySQL từ địa chỉhttps://www.mysql.com/
2 Tải mã nguồn của ứng dụng từ Github với câu lệnh git clone https://github.com/nlgtEA/web-dev-assignment
3 Khởi tạo cơ sở dữ liệu
Tệp "db.sql" đi kèm trong mã nguồn vừa tải về chứa các câu lệnh SQL để tạo bảng và dữ liệu ban đầu cho hệ thống.
• Chạy file "db.sql" để khởi tạo cơ sở dữ liệu bằng công cụ UI như PHP admin, hoặc bằng câu lệnh
"source " như hình minh hoạ
Cài đặt thư mục gốc của máy chủ Apache (có thể tự cài đặt hoặc sử dụng XAMPP theo hướng dẫn) để trỏ đến thư mục mã nguồn vừa tải về Nếu gặp lỗi quyền truy cập, cần cài đặt "user" phù hợp Bên cạnh đó, ứng dụng có cài đặt lại file ".htaccess" nên bước này rất quan trọng.
Hình 29:Thay đổi thư mục gốc
Hình 30:Thay đổi user apache server
5 Nhập vào file "./connect.php" các thiết lập database của máy để hệ thống có thể kết nối đến database
6 Truy cập "localhost", nếu thấy trang chủ của ứng dụng là đã cài đặt thành công
6 Nhiệm vụ, vai trò của các thành viên
Thành viên Công việc Đánh giá
Ngô Lê Gia Thuấn Khởi tạo project, hiện thực các tính năng: đăng ký, đăng nhập, trang chủ, phân quyền, admin cho user 100%
Nguyễn Đức Triết Hiện thực nội dung trang liên lạc và trả lời câu hỏi cho admin 100%
Công Hồng Phúc Hiện thực nội dung trang tính năng và bảng giá của các sản phẩm 100%
Bành Ngọc Phương Uyên Hiện thực nội dung các trang xem sản phẩm 100%
Bảng 1: Nhiệm vụ, vai trò của các thành viên
