Tổng quan
Web, hay còn gọi là website, là một tập hợp các trang web nằm trong một tên miền hoặc tên miền phụ trên World Wide Web (WWW) của Internet Một trang web được định nghĩa là tập tin HTML hoặc XHTML có thể truy cập thông qua giao thức HTTP Các trang mạng có thể được xây dựng từ tệp tin HTML (trang mạng tĩnh) hoặc hoạt động thông qua các hệ quản trị nội dung (CMS) trên máy chủ (trang mạng động) Website có thể được phát triển bằng nhiều ngôn ngữ lập trình khác nhau như Java, PHP, và ASP.NET.
Lập trình Web
Lập trình web là nhiệm vụ của lập trình viên, nơi họ nhận dữ liệu từ bộ phận thiết kế để xây dựng một hệ thống website hoàn chỉnh Website này không chỉ tương tác với cơ sở dữ liệu mà còn tương tác với người dùng thông qua các ngôn ngữ lập trình.
Website có 2 dạng cơ bản là website tĩnh và website động.
Website tĩnh không cho phép quản trị viên tự ý thay đổi nội dung và hình ảnh Để phát triển loại website này, cần có lập trình viên am hiểu về HTML cơ bản Website tĩnh được xây dựng trên nền tảng HTML, CSS và sử dụng một số hiệu ứng từ Javascript.
Website động là loại website được trang bị bộ công cụ quản trị, cho phép người quản trị tự do tùy biến nội dung và hình ảnh Các ngôn ngữ thường được sử dụng để xây dựng website động bao gồm PHP, ASP.NET Framework, Java và JavaScript.
Bước 1 Lên ý tưởng cho trang web
Trong giai đoạn phát triển sản phẩm, nhóm thường tổ chức các buổi hội ý để trao đổi và phát triển ý tưởng, từ đó hình thành các khía cạnh như lập trình, nội dung, mục đích và layout của trang web Giai đoạn này rất quan trọng để đảm bảo sản phẩm cuối cùng không khác xa so với ý tưởng ban đầu và giữ được tính đặc trưng.
Bước 2 trong quá trình thiết kế trang web là đặc tả cho lập trình, đây là giai đoạn cực kỳ quan trọng Dành nhiều thời gian cho giai đoạn này giúp việc lập trình, gỡ lỗi, kiểm tra và thiết kế các tính năng trở nên dễ dàng hơn, từ đó giúp phát hiện và điều chỉnh lỗi kịp thời.
Trong giai đoạn này, nhóm lập trình sẽ tổ chức nhiều buổi hội ý để thảo luận và ghi lại các ưu điểm, khuyết điểm, cũng như lựa chọn mẫu thiết kế phù hợp.
Bước 3 Viết code, thiết kế layout và các hiệu ứng
Giai đoạn thiết kế website bắt đầu với việc các thành viên phụ trách lập trình thực hiện các nhiệm vụ quan trọng như thiết lập cơ sở dữ liệu, thiết kế giao diện với màu sắc và hiệu ứng hấp dẫn, cùng với việc phát triển các tính năng tương tác dành cho người quản lý và khách hàng.
Bước 4 Kiểm thử và sửa lỗi
Sau khi hoàn tất các bước phát triển cơ bản, giai đoạn cuối cùng là kiểm thử sản phẩm Qua nhiều lần thử nghiệm các tính năng, thực hiện sửa lỗi và tiếp nhận phản hồi, sản phẩm cuối cùng sẽ được hoàn thiện và chuẩn bị cho việc công bố.
Tổng quan về ứng dụng Web:
Ứng dụng web là một ứng dụng trực tuyến được lưu trữ trên máy chủ từ xa và phân phối qua Internet thông qua các trình duyệt Nó cho phép người dùng thực hiện các thao tác trực tiếp trên website, với khả năng tương tác để nhận, nhập và xử lý dữ liệu Ứng dụng web phục vụ nhiều mục đích khác nhau và phù hợp cho cả tổ chức lớn nhỏ lẫn cá nhân Một số ứng dụng web nổi tiếng được biết đến rộng rãi.
Phần mềm trò chơi, các tính năng giải trí
Các trang mạng xã hội
Các trang tích hợp dịch vụ trực tuyến (lưu trữ đám mây, E-mail,…)
Các dạng phần mềm quản lý (sinh viên/học sinh, nhân viên, ngân hàng, khách sạn, )
… Tại sao chúng ta nên sử dụng ứng dụng Web:
Khi dịch vụ hỗ trợ tương tác có sẵn trên Web và ứng dụng, đa số khách hàng chọn sử dụng trực tiếp trên Web vì tính tiện lợi và nhanh chóng Việc này giúp họ tránh phải tải ứng dụng từ kho, loại bỏ các thao tác phức tạp, tiết kiệm dung lượng và đảm bảo tương thích với nhiều thiết bị khác nhau.
Nhóm đã nhận thức được tâm lý người dùng và phát triển dự án này với hy vọng vượt qua các ứng dụng tương tự hiện có trên thị trường.
Hình 1 Các tiện ích khi sử dụng ứng dụng Web.
Tổng quan về HTML/CSS: 1 HTML: PHẦN 2 VỀ DỰ ÁN – QUẢN LÍ BÁN HÀNG PHỤ KIỆN MÁY TÍNH (GEAR)
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu chủ yếu dùng để xây dựng các trang web trên Internet Ngôn ngữ này thường được kết hợp với CSS và các ngôn ngữ kịch bản như JavaScript để tạo ra các trải nghiệm web phong phú và tương tác.
Các phần tử HTML là những khối xây dựng cơ bản của trang HTML, cho phép nhúng hình ảnh và các đối tượng tương tác như biểu mẫu HTML tạo ra cấu trúc tài liệu bằng cách sử dụng ngữ nghĩa cho văn bản, bao gồm các phần như tiêu đề, đoạn văn, danh sách, liên kết và trích dẫn Các phần tử HTML được xác định bằng các thẻ trong dấu ngoặc nhọn, với các thẻ như và để giới thiệu nội dung, trong khi các thẻ khác bao quanh và cung cấp thông tin về tài liệu Mặc dù trình duyệt không hiển thị các thẻ HTML, chúng đóng vai trò quan trọng trong việc diễn giải nội dung trang web.
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm và định dạng các phần tử được tạo ra từ các ngôn ngữ đánh dấu như HTML Trong khi HTML chịu trách nhiệm tạo ra cấu trúc nội dung như đoạn văn, tiêu đề và bảng, CSS giúp cải thiện giao diện và phong cách của các phần tử này trên website.
Việc xem ở mục 1.2.1 sẽ giúp chúng ta thêm "phong cách" cho các phần tử HTML, như thay đổi màu sắc trang, màu chữ và cấu trúc, mang đến nhiều sự sáng tạo.
PHP (Hypertext Preprocessor) là ngôn ngữ lập trình kịch bản mã nguồn mở, chủ yếu dùng để phát triển ứng dụng máy chủ Nó phù hợp với phát triển web, dễ dàng nhúng vào trang HTML và được tối ưu hóa cho ứng dụng web Với tốc độ nhanh, cú pháp tương tự C và Java, cùng với tính dễ học, PHP cho phép thời gian xây dựng sản phẩm ngắn hơn so với nhiều ngôn ngữ khác, nhanh chóng trở thành ngôn ngữ lập trình web phổ biến nhất thế giới.
JavaScript (JS) là ngôn ngữ lập trình kịch bản phổ biến, được sử dụng để phát triển các script cho cả máy client và máy server Các script chạy trên máy client có khả năng thực thi trong trình duyệt, trong khi các script trên máy server được xử lý trực tiếp trên server.
PHẦN 2 VỀ DỰ ÁN – QUẢN LÍ BÁN HÀNG PHỤ KIỆN MÁY TÍNH(GEAR)
Giới thiệu về dự án này
Mục đích ra đời của dự án
Dự án này hướng tới việc phát triển một hệ thống bán hàng trực tuyến chuyên cung cấp các phụ kiện máy tính, nhằm giúp người tiêu dùng dễ dàng tiếp cận và lựa chọn những sản phẩm chất lượng, phù hợp với nhu cầu của họ.
Sơ lược nội dung dự án với mục đích quản lí và mua hàng
- Người quản lí có thể thêm xóa, sửa thông tin các thành viên
- Xoá, liệt kê thông tin của khách hàng và của sản phẩm
- Quản lí sản phẩm, giá cả.
- Quản lí các đơn hàng b Phương diện khách hàng mua hàng:
- Đăng ký, đăng nhập với tư cách thành viên
- Xem sản phẩm, quản lí giỏ hàng cá nhân, thanh toán mua hàng
Ngôn ngữ viết và phần mềm làm ứng dụng
Công cụ viết mã nguồn: Visual Studio Code.
Công cụ quản lí cơ sở dữ liệu: XAMPP (MySQL)
Ngôn ngữ được sử dụng: HTML, CSS, PHP, JavaScript.
2.3 Các thành phần cơ sở dữ liệu (CSDL):
Contact: chứa thông tin để liên hệ với khách hàng, có thể là email hoặc số điện thoại
Name: tên của khách hàng.
Address: địa chỉ của khách hàng, có thể cập nhập khi khách hàng tạo tài khoản thành công.
Phone_number: số điện thoại của khách hàng, có thể cập nhập khi khách hàng tạo tài khoản thành công.
Avatar: ảnh điện diện cho tài khoản.
Type: phân biệt loại tài khoản, 0 là tài khoản khách hàng, 1 là tài khoản của người quản lý.
Create_at: thời điểm tạo tài khoản.
Code: chứa mã code xác thực đăng ký, những tài khoản nào vẫn còn mã code trong cột này tức là chưa xác thực.
Name_customer: tên khách hàng.
Address_customer: địa chỉ khách hàng.
Phone_customer: số điện thoại khách hàng.
Email_customer: email khách hàng.
Date: thời điểm mua hàng.
Method_payment: cách thức trả tiền, 0 là hình thức COD, 1 là hình thức chuyển khoản ngân hàng.
Method_receive: cách thức giao hàng, 0 là giao hàng tận nhà, 1 là giao hàng tại quầy.
2.3.3 CSDL chi tiết giỏ hàng:
Hình 4 CSDL chi tiết giỏ hàng
Id: mã chi tiết giỏ hàng.
Id_cart: mã giỏ hàng.
Id_product: mã sản phẩm.
Amount: số lượng sản phẩm trong giỏ hàng.
2.3.4 CSDL danh mục sản phẩm:
Hình 5 CSDL danh mục sản phẩm
Id: mã danh mục sản phẩm.
Name: tên danh mục sản phẩm.
Hình 6 CSDL lượt xem web
Id: mã lượt xem web
2.3.6 CSDL thông tin sản phẩm:
Hình 7 CSDL thông tin sản phẩm
Id_category: mã danh mục sản phẩm.
Image: hình ảnh sản phẩm.
Sale_price: giá sản phẩm khi áp dụng giảm giá.
Normal_price: giá sản phẩm.
Sold: số lượng sản phẩm đã bán ra.
Quantity: số lượng sản phẩm đang có trong kho. Date: ngày sản phẩm ra mắt.
Status: tình trạng sản phẩm, 0 là đã hết, 1 là còn hàng.
2.3.7 CSDL chi tiết sản phẩm:
Hình 8 CSDL chi tiết sản phẩm
Id: mã chi tiết sản phẩm.
Id_product: mã sản phẩm.
Table: bảng thông số sản phẩm.
Content: nội dung quảng cáo sản phẩm.
Các thành phần giao diện
Giao diện chính
Hình 9: Giao diện chính của trang web
Giao diện Màn hình chính khi người dùng truy cập vào có các thành phần sau:
- Dropdown menu: Trang chủ, các sản phẩm (Bàn phím, chuột, tai nghe), Nội dung Khuyến mãi
- Layout Slideshow giới thiệu các tính năng, sản phẩm mới
- Bên dưới là một khối gồm các button, bấm vào xem chi tiết từng sản phẩm.
- Một khung chat ẩn hiện (Tư vấn online)
Giao diện đăng nhập/đăng ký
Hình 10 Giao diện đăng nhập
Hình 11 Giao diện đăng ký
Giao diện đăng ký và đăng nhập sử dụng một mẫu form tương tự, bao gồm các trường dữ liệu như tên người dùng, mật khẩu, email và họ tên Những thông tin này sẽ được lưu trữ trong cơ sở dữ liệu sau khi người dùng nhấn nút Xác nhận.
Giao diện danh mục sản phẩm
Hình 12: Giao diện danh mục sản phẩm
Giao diện bao gồm các khối sản phẩm, cho phép người dùng nhấn vào để xem chi tiết từng sản phẩm đã chọn Bên cạnh đó, hệ thống còn cung cấp các chức năng sắp xếp sản phẩm theo thứ tự, tìm kiếm sản phẩm theo tên và theo mức giá, giúp người dùng dễ dàng tìm thấy mặt hàng mong muốn.
Giao diện giỏ hàng
Hình 13: Giao diện giỏ hàng
Quản lý nội dung sản phẩm trong giỏ hàng của khách hàng trước khi thanh toán rất quan trọng Khách hàng có quyền hủy bỏ món hàng bằng cách nhấn vào biểu tượng thùng rác, giúp họ dễ dàng điều chỉnh lựa chọn của mình.
Giao diện chi tiết thông tin sản phẩm
Hình 14: Giao diện chi tiết thông tin sản phẩm
Khi khách hàng chọn một sản phẩm trong danh mục, họ sẽ được chuyển đến trang thông tin chi tiết của sản phẩm đó Tại đây, khách hàng có thể xem mô tả chi tiết, nhập số lượng mong muốn, thêm sản phẩm vào giỏ hàng hoặc tiến hành mua ngay sản phẩm.
Giao diện thông tin thanh toán
Hình 15 Giao diện thông tin thanh toán
Gồm các trường thông tin, do khách hàng tự điền vào, để khai báo thông tin phục vụ cho các nghiệp vụ giao hàng hoặc thanh toán trực tuyến
Giao diện thông tin tài khoản
Hình 16 Giao diện thông tin tài khoản
Gồm các thông tin cơ bản của người dùng, được hiển thị như ảnh đại diện, họ và tên, e-mail, số điện thoại, địa chỉ thường trú,
Giao diện thông tin đơn hàng
Hình 17 Giao diện thông tin đơn hàng
Hiển thị các trạng thái của đơn hàng
Giao diện dashboard
Bảng điều khiển quản trị cung cấp các tính năng đặc quyền cho người quản trị, bao gồm khả năng theo dõi lợi nhuận của cửa hàng, số lượt truy cập sản phẩm, số lượt bán hàng, quản lý việc trả lại hàng, và xem biểu đồ thống kê Những tính năng này chỉ dành riêng cho vai trò quản trị viên, giúp tối ưu hóa hiệu suất kinh doanh.
Giao diện thông tin các sản phẩm
Hình 19 Thông tin về các sản phẩm sẵn có
Hiển thị các thông tin sản phẩm, có thể tùy chọn xóa, sửa hoặc thêm.
Giao diện thêm và sửa sản phẩm
Giao diện màn hình thêm và sửa thông tin sản phẩm cho phép người quản lý dễ dàng cập nhật và bổ sung thông tin về các sản phẩm mới Mục tiêu của chức năng này là nhanh chóng đưa sản phẩm mới lên kệ, giúp người tiêu dùng tiếp cận sản phẩm một cách thuận tiện và nhanh chóng.
Ở phần thêm, có các trường để thêm nội dung tên, danh mục, nhãn hiệu, hình ảnh minh họa, giá cả và tổng số lượng hiện có của sản
phẩmỞ phần sửa, cũng tương tự có thể sửa lại tên, danh mục, nhãn hiệu, hình ảnh minh họa, giá niêm yết và giá khuyến mãi.
Giao diện quản lí thành viên
Hình 21 Giao diện quản lí thành viên
Giúp quản lí các thành viên hiện có trên hệ thống, và một số chức năng khác
Giao diện quản lí đơn hàng và hiển thị chi tiết đơn hàng
Hình 22 Giao diện quản lí đơn hàng và hiển thị chi tiết đơn hàng
Giao diện này cho phép người quản lý theo dõi và kiểm soát các đơn hàng một cách hiệu quả Bằng cách nhấn vào mục “chi tiết”, người quản lý có thể xem thông tin cụ thể về từng đơn hàng.
Giao diện quản lý chi tiết sản phẩm
Hình 23 Giao diện quản lí chi tiết sản phẩm
Giao diện chỉnh sửa chi tiết sản phẩm
Hình 24 Giao diện chỉnh sửa chi tiết sản phẩm
