Sự phổ biến của PHP đảm bảo rằng có nhiều tàinguyên hỗ trợ, từ các framework đến các thư viện có sẵn, giúp việc phát triển ứng dụng trở nên dễ dàng và hiệu quả hơn, việc phát triển một
Mục đích nghiên cứu
- Phát triển hệ thống quản lý: Nghiên cứu về cách xây dựng một hệ thống quản lý thông tin hiệu quả để quản lý sản phẩm, đơn hàng, và thông tin khách hàng Điều này bao gồm việc thiết kế cơ sở dữ liệu phù hợp và phát triển các chức năng quản lý phù hợp.
- Nghiên cứu về tính bảo mật: Xây dựng một hệ thống an toàn và bảo mật để bảo vệ thông tin cá nhân của khách hàng và thông tin quan trọng khác Nghiên cứu về các phương pháp bảo mật web và thực hiện các biện pháp bảo mật phù hợp để ngăn chặn các cuộc tấn công và rủi ro bảo mật.
- Nghiên cứu về tối ưu hóa hiệu suất: Nghiên cứu về cách tối ưu hóa hiệu suất của trang web, bao gồm tải trang nhanh chóng, tối ưu hóa cơ sở dữ liệu, và tối ưu hóa mã nguồn PHP để đảm bảo trải nghiệm người dùng tốt nhất.
- Tối ưu hóa trải nghiệm người dùng: Nghiên cứu về cách cải thiện trải nghiệm người dùng trên trang web bán hàng, bao gồm giao diện người dùng, tìm kiếm sản phẩm, quá trình thanh toán và tính năng tương tác khác Mục tiêu là tạo ra một trang web dễ sử dụng và thu hút khách hàng.
Kết quả dự kiến
- Hiểu được về ngôn ngữ lập trình PHP
- Hiểu được các nghiệp vụ của người dùng có trong website bán hàng online.
Phương pháp nghiên cứu
- Tham khảo những tài liệu trên các trang mạng
- Tiếp thu những kiến thức đã được học và chỉ bảo của người hướng dẫn
- Tự học những kiến thức và xem video có liên quan đến đề tài.
Kết quả báo cáo
Báo cáo gồm có 4 chương như sau:
TỔNG QUAN VỀ ĐỀ TÀI
Giới thiệu chung
1 Giới thiệu về công ty:
Công ty TNHH Sejin Electronic Vina là doanh nghiệp 100% vốn đầu tư Hàn Quốc, được thành tháng 2/2017, chuyên sản xuất dây tai nghe cung cấp cho Công ty TNHH Youngbo Vina (khu công nghiệp Quế Võ, Bắc Ninh) Hiện công ty có hơn 600 lao động.
Mặc dù mới đi vào hoạt động chưa lâu và tình hình sản xuất, kinh doanh còn nhiều khó khăn, nhưng Sejin Electronic Vina luôn nỗ lực hết mình để đảm bảo đời sống tốt nhất cho nhân sự bằng nhiều giải pháp thiết thực Trong đó, công ty đặc biệt chú trọng tới việc cải thiện môi trường làm việc, để nhân sự đảm bảo sức khỏe, an toàn khi làm việc Công ty lắp đặt điều hòa nhiệt độ làm mát tại xưởng sản xuất và nhà ăn; trang bị đầy đủ bảo hộ lao động cho người lao động; thường xuyên kiểm tra máy móc, trang thiết bị nhằm khắc phục những nguy cơ mất an toàn lao động; duy trì thường xuyên công tác vệ sinh trong và ngoài nhà xưởng, đảm bảo môi trường sản xuất luôn xanh – sạch – đẹp Đặc biệt, để giúp nhân sự nắm chắc những kiến thức cơ bản, tránh những rủi ro, sự cố không đáng có trong quá trình sản xuất, công ty phối hợp với các cơ quan chức năng tổ chức tập huấn, tuyên truyền về an toàn lao động, diễn tập phòng chống cháy nổ.
- Báo cáo sẽ tập trung trình bày sản phẩm của đề tài thông qua việc vận dụng các công nghệ web front-end như :HTML5,CSS3,Javascript,bootstrap… và công nghệ backend như :PHP ,hệ quản trị cơ sở dữ liệu MySQL.
- Sau khi tìm hiểu , em sẽ vận dụng kết hợp kết quả tìm hiểu được vào việc xây dựng trang web cửa hàng tiện lợi nhằm minh họa cho phần lý thuyết đã trình bày.
3 Giới thiệu về công nghệ web front-end:
- HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trang Web được hiển thị như thế nào trong trình duyệt Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browsers) cách hiển thị các thành phần của trang như text và graphics HTML là ngôn ngữ xác định cấu trúc của thông tin HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thị văn bản và các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác Thiết kế được nội dung và hình thức của trang web Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cách dùng các liên kết được chèn vào trang web Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giao dịch….Thêm vào đối tượng các hình ảnh video, âm thanh…
Là một tập tin có phần mở rộng là htm hoặc html
Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là Tag(thẻ), thường được đặt xung quanh một khối văn bản nào đó.
Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…và được sử dụng nhiều nhất đó là adobe dreamweaver.
- CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự sáng tạo trong việc kết hợp các thuộc tính giúp mang lại hiệu quả cao CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ điều hành CSS đưa ra phương thức áp dụng từ một file CSS ở ngoài Có hiệu quả đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình bày nào đó CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
- Javascript với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đáp ứng các sự kiện từ phía người dùng Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thực hiện chức năng này Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng của ngôn ngữ lập trình Java JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học Nhưng JavaScript không là ngôn ngữ hướng đối tượng như C++/Java.
- PHP là ngôn ngữ lập trình phổ biến và được nhiều người ưu chuộng Trong thiết kế web chuyển nghiệp, có khoảng 1/3 số website đang hoạt động sử dụng nền tảng này, điển hình là WordPress, Facebook và Yahoo Theo định nghĩa chuyên môn, ngôn ngữ thiết kế web PHP (viết tắt của Personal Home Page) là một ngôn ngữ lập trình script (một nhánh của ngôn ngữ lập trình) hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát PHP hiện rất phổ biến và được dùng để giảng dạy trong nhiều cơ sở, trung tâm nghiên cứu…
- Bootstrap là một framework front-end phổ biến được xây dựng trên HTML, CSS và JavaScript Nó cung cấp các công cụ và tài nguyên để tạo giao diện người dùng linh hoạt và thân thiện với di động Bootstrap cung cấp các template, các class CSS đã được định nghĩa sẵn và các thành phần giao diện để giúp việc xây dựng trang web nhanh chóng và dễ dàng hơn.
- Framework và thư viện front-end: Có nhiều framework và thư viện front-end như React, Angular, Vue.js, Bootstrap, và Foundation được sử dụng để tăng cường khả năng phát triển và quản lý mã nguồn front-end Các framework và thư viện này cung cấp các thành phần giao diện sẵn có, quản lý trạng thái ứng dụng, và cung cấp các tính năng tối ưu hóa hiệu suất Công cụ quản lý mã nguồn và xây dựng: xây dựng mã nguồn front-end một cách hiệu quả.
- Tên sản phẩm: Web cửa hàng tiện lợi GROCERY SHOPPY
- Web cửa hàng tiện lợi GROCERY SHOPPY là một nền tảng dễ sử dụng và thuận tiện với người dùng, cung cấp trải nghiệm mua sắm tốt cho người sử dụng.
Yêu cầu sản phẩm
- Giao diện người dùng hấp dẫn:
Thiết kế giao diện người dùng thân thiện, dễ sử dụng và hấp dẫn với người dùng. Đảm bảo tương thích trên các thiết bị và màn hình khác nhau, bao gồm cả máy tính, điện thoại di động và máy tính bảng.
- Chức năng tìm kiếm sản phẩm:
Cung cấp chức năng tìm kiếm sản phẩm linh hoạt và hiệu quả, bao gồm tìm kiếm theo tên sản phẩm, thương hiệu, loại găng tay, kích cỡ, màu sắc và giá cả.
- Chức năng giỏ hàng và thanh toán:
Cho phép người dùng thêm sản phẩm vào giỏ hàng và quản lý giỏ hàng của mình.
- Hệ thống quản lý đơn hàng:
Hỗ trợ quản lý đơn hàng từ khi đặt hàng cho đến khi giao hàng và thanh toán hoàn tất.
Cung cấp cập nhật trạng thái đơn hàng cho người dùng và quản trị viên.
- Bảo mật và bảo vệ dữ liệu: Đảm bảo bảo mật thông tin cá nhân của người dùng và dữ liệu thanh toán.
Sử dụng các biện pháp bảo mật như mã hóa dữ liệu và xác thực hai yếu tố.
- Tối ưu hóa hiệu suất: Đảm bảo trang web hoạt động mượt mà và nhanh chóng trên các thiết bị và mạng kết nối khác nhau Tối ưu hóa tải trang và thời gian đáp ứng của trang web.
- Tương thích và mở rộng:
Xây dựng trang web có thể dễ dàng mở rộng và tích hợp với các tính năng và dịch vụ mới.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Tổng quan về nghiệp vụ
2.1.1 Các tác nhân của hệ thống
-Khách vãng lai là người truy cập vào hệ thống nhưng chưa đăng nhập.sau khi đăng nhập thàng công thì sẽ trở thành khách hàng
-Khách hàng khác với khách vãng lai ở chỗ có thêm giỏ hàng,mua hàng ở cửa hàng
-Quản trị viên là người quản trị toàn bộ hệ thống cửa hàng,sẽ có các chức năng quản lý như : danh mục sản phẩm,sản phẩm ,đơn hàng,…
Phân tích các yêu cầu và chức năng
2.2.1 Biểu đồ use case tổng quan của hệ thống:
Hình 1 Biểu đồ use case tổng
2.2.2 Đặc tả use case Đặc tả use case đăng nhập:
Tên use case Đăng nhập
Mô tả Usecase cho phép khách hàng đăng nhập vào hệ thống để có thể thêm giỏ hàng, đặt hàng; quản trị viên có thể quản lý hệ thống cửa hàng của mình Actor Khách hàng, quản trị viên Điều kiện kích hoạt
Người dùng chọn chức năng đăng nhập từ hệ thống
Tiền điều kiện Người dùng đã đăng ký tài khoản
Hậu điều kiện Đăng nhập thành công
Bảng 1: Đặc tả use case đăng nhập Đặc tả use case đăng ký:
Tên use case Đăng ký
Mô tả Usecase cho phép khách hàng đăng ký tài khoản tại website
Actor Khách hàng Điều kiện kích hoạt
Người dùng chọn chức năng đăng ký từ hệ thống
Tiền điều kiện Người dùng chưa có tài khoản trên hệ thống
Hậu điều kiện Đăng ký thành công
Bảng 2: Đặc tả use case đăng ký Đặc tả use case thêm giỏ hàng:
Tên use case Thêm giỏ hàng
Mô tả Usecase cho phép khách hàng thêm sản phẩm vào giỏ hàng Actor Khách hàng, quản trị viên Điều kiện kích hoạt
Người dùng chọn chức năng thêm vào giỏ hàng
Tiền điều kiện Người dùng chọn bất kì một sản phẩm xong bấm thêm vào giỏ hàngHậu điều kiện Thêm vào giỏ hàng thành công
Bảng 3: Đặc tả use thêm giỏ hàng Đặc tả use case đặt hàng:
Tên use case Đặt hàng
Mô tả Usecase cho phép khách hàng đặt hàng
Actor Khách hàng Điều kiện kích hoạt
Người dùng chọn chức năng đặt hàng
Tiền điều kiện Người dùng sau khi thêm giỏ hàng và bấm nút đặt hàng
Hậu điều kiện Đặt hàng thành công
Bảng 4: Đặc tả use case đặt hàng Đặc tả use case quản lý danh mục:
Tên use case Quản lý danh mục
Mô tả Usecase cho phép quản trị viên thêm, sửa, xóa danh mục sản phẩm
Actor Quản trị admin Điều kiện kích hoạt
Người dùng nhấn vào mục tạo mới, chỉnh sửa, xóa
Tiền điều kiện Người dùng sau khi đăng nhập thành công vào hệ thống và ở mục quản lý danh mục sản phẩm Hậu điều kiện Hệ thống cập nhật danh sách danh mục sản phẩm
Bảng 5: Đặc tả use case quản lý danh mục Đặc tả use case quản lý sản phẩm:
Tên use case Quản lý sản phẩm
Mô tả Usecase cho phép quản trị viên thêm, sửa, xóa sản phẩm
Actor Quản trị admin Điều kiện kích hoạt
Người dùng nhấn vào mục tạo mới, chỉnh sửa, xóaTiền điều kiện Người dùng sau khi đăng nhập thành công vào hệ thống và ở mục quản lý sản phẩm Hậu điều kiện Hệ thống cập nhật danh sách sản phẩm
Bảng 6: Đặc tả use case quản lý sản phẩm Đặc tả use case quản lý đơn hàng:
Tên use case Quản lý đơn hàng
Mô tả Usecase cho phép quản trị viên cập nhật trạng thái đơn hàng
Actor Quản trị admin Điều kiện kích hoạt
Người dùng nhấn vào mục cập nhật trạng thái
Tiền điều kiện Người dùng sau khi đăng nhập thành công vào hệ thống và ở mục quản lý đơn hàng Hậu điều kiện Hệ thống cập nhật danh sách đơn hàng
Bảng 7: Đặc tả use case quản lý đơn hàng
Phân tích yêu cầu phi chức năng
Yêu cầu bảo mật cho trang Web cửa hàng tiện lợi GROCERY SHOPPY rất quan trọng để đảm bảo an toàn cho thông tin cá nhân của người dùng và dữ liệu thanh toán Dưới đây là một số yêu cầu bảo mật cơ bản cần được áp dụng:
- Mã hóa dữ liệu: Sử dụng kỹ thuật mã hóa dữ liệu để bảo vệ thông tin cá nhân của người dùng và dữ liệu thanh toán khi chúng được truyền qua mạng.
- Xác thực người dùng: Cung cấp chức năng đăng nhập an toàn bằng cách sử dụng mã xác thực hai yếu tố hoặc công nghệ xác thực đa yếu tố để ngăn chặn truy cập trái phép.
- Quản lý phiên làm việc (Session Management): Đảm bảo việc quản lý phiên làm việc được thực hiện một cách an toàn để ngăn chặn các cuộc tấn công như session hijacking và session fixation.
- Kiểm tra dữ liệu đầu vào (Input Validation): Thực hiện kiểm tra và xác nhận dữ liệu đầu vào từ người dùng để ngăn chặn các cuộc tấn công như SQL injection và Cross-site scripting (XSS).
- Bảo vệ cơ sở dữ liệu: Sử dụng các biện pháp bảo mật cơ sở dữ liệu như mã hóa dữ liệu, kiểm soát truy cập và kiểm tra dữ liệu để bảo vệ thông tin trong cơ sở dữ liệu.
- Bảo mật thanh toán: Sử dụng các cổng thanh toán có uy tín và bảo mật để xử lý thông tin thanh toán của người dùng, bao gồm SSL/TLS để mã hóa dữ liệu giao tiếp.
- Bảo mật hệ thống: Cập nhật và bảo trì hệ thống và các thành phần phần mềm để bảo vệ chống lại các lỗ hổng bảo mật mới phát hiện.
Thiết kế cơ sở dũ liệu
Hình 2 : Cơ sở dữ liệu web cửa hàng tiện lợi GROCERY SHOPPY
Hình 4: Bảng tbl_cart_detail
CÔNG NGHỆ SỬ DỤNG
HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo cấu trúc và định dạng nội dung trên các trang web HTML được sử dụng để xác định các thành phần của trang web như văn bản, hình ảnh, liên kết, bảng, biểu đồ, và các phần tử khác thông qua việc sử dụng các thẻ (tags) và các thuộc tính (attributes).
HTML cho phép các nhà phát triển web xây dựng cấu trúc logic của trang web bằng cách sử dụng các thẻ đánh dấu, mô tả cách mà nội dung sẽ được hiển thị trên trình duyệt web Các thẻ HTML thường đi kèm với các thuộc tính để chỉ định các đặc điểm cụ thể của các phần tử, như màu sắc, kích thước, vị trí, và nhiều hơn nữa.
CSS
CSS (Cascading Style Sheets) là ngôn ngữ định dạng được sử dụng để kiểm soát giao diện người dùng và kiểu dáng của các trang web và ứng dụng web CSS cho phép các nhà phát triển web xác định các thuộc tính và kiểu dáng của các phần tử HTML trên trang web, bao gồm màu sắc, kích thước, khoảng cách, font chữ, hiệu ứng hoạt hình và nhiều hơn nữa.
CSS là một phần quan trọng của công nghệ web front-end, làm cho trang web trở nên hấp dẫn hơn và dễ đọc hơn Thay vì phải sử dụng các thuộc tính kiểu dáng trực tiếp trên các phần tử HTML, CSS cho phép tách biệt phần dữ liệu và cấu trúc từ phần kiểu dáng, tạo điều kiện cho một quy trình phát triển web linh hoạt và dễ bảo trì hơn.
JavaScript
JavaScript là một ngôn ngữ lập trình kịch bản phổ biến được sử dụng phổ biến trong phát triển web JavaScript thường được sử dụng để tạo ra các tính năng tương tác và động trên các trang web, giúp cải thiện trải nghiệm người dùng và làm cho trang web trở nên linh hoạt và đa dạng hơn.
JavaScript là một phần quan trọng của công nghệ web front-end, làm cho trang web có thể phản hồi và phản ứng với hành vi của người dùng mà không cần tải lại trang Điều này bao gồm các tính năng như kiểm tra dữ liệu nhập từ người dùng, thay đổi nội dung của trang mà không cần tải lại, và tương tác với các thành phần giao diện như các nút, biểu mẫu và hộp thoại.
Ngoài ra, JavaScript cũng có thể được sử dụng để thực hiện các nhiệm vụ phức tạp hơn như xử lý dữ liệu động từ máy chủ, tạo và quản lý các yêu cầu HTTP, và thậm chí làm việc với các API từ các dịch vụ web khác nhau.
Bootstrap
Bootstrap là một framework CSS và JavaScript mã nguồn mở phổ biến được phát triển bởi Twitter Nó cung cấp một bộ công cụ linh hoạt để phát triển giao diện người dùng đáp ứng và hấp dẫn trên web nhanh chóng và dễ dàng Bootstrap được thiết kế để giúp tăng tốc quá trình phát triển web bằng cách cung cấp các thành phần giao diện sẵn có, lưới (grid) linh hoạt và các tính năng tương tác.
My SQL
MySQL là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS - Relational
Database Management System) mã nguồn mở phổ biến, được sử dụng rộng rãi trong phát triển ứng dụng web và các dự án phần mềm khác MySQL được phát triển, phân phối và hỗ trợ bởi Oracle Corporation.
MySQL cung cấp một hệ thống quản lý cơ sở dữ liệu mạnh mẽ và linh hoạt, cho phép lưu trữ và quản lý dữ liệu theo mô hình quan hệ.
PHP
PHP (Hypertext Preprocessor) là một ngôn ngữ lập trình phía máy chủ (server- side scripting language) được sử dụng phổ biến trong phát triển web PHP thường được sử dụng để tạo các trang web động và tương tác, nơi mà nội dung của trang web có thể được tạo ra và thay đổi dựa trên hành vi của người dùng hoặc dữ liệu từ các nguồn khác nhau như cơ sở dữ liệu.
PHP được tích hợp trực tiếp vào mã nguồn HTML của trang web, cho phép các nhà phát triển kết hợp mã PHP với HTML một cách linh hoạt để tạo ra các trang web động.
CÔNG NGHỆ SỬ DỤNG
Giao diện admin
Giao diện đăng nhập quản trị: quản trị viên đăng nhập tài khoản (tài khoản và mật khẩu) của mình để truy cập hệ thống quản lý.
Hình 10: Giao diện đăng nhập quản trị
Giao diện quản trị viên bao gồm 3 phần : Quản lý sản phẩm, quản lý danh mục, quản lý đơn hàng:
Hình 11: Giao diện quản trị viên
Hình 12: Giao diện quản lý sản phẩm
- Gồm các chức năng như thêm, sửa, xóa sản phẩm.
Giao diện quản lý danh mục:
Hình 13: Giao diện quản lý danh mục
Giao diện quản lý đơn hàng:
Hình 14: Giao diện quản lý đơn hàng
Hình 15: Giao diện khách hàng
Sau khi đăng nhập xong sẽ hiển thị giao diện cho khách hàng.
Hình 16: Giao diện trang chủ
Hình 17: Giao diện trang chủ
Hình 18: Giao diện trang chủ
Khách hàng chọn chức năng thêm giỏ hàng để thêm sản phẩm vào giỏ hàng, sau khi thêm sản phẩm vào giỏ hàng hệ thống sẽ dẫn bạn đến phần giỏ hàng.
Hình 19: Thêm giỏ hàng Ở giao diện giỏ hàng khách hàng có thể chọn tiến hành đặt hàng sửa số lượng hoặc xóa đơn hàng trong giỏ hàng + -
Giao diện đơn hàng khi đặt hàng thành công:
Hình 20: Đặt hàng thành công
Khách hàng sẽ chờ admin shop duyệt đơn hàng,khách hàng có thể xem chi tiết đơn hàng và hủy đơn hàng
Hình 21: Đơn hàng chờ admin duyệt
