2.mục tiêu và phạm vi : - Xây dựng một website bán hàng đơn giản bằng php , html, css - Tạo các chức năng như trang sản phẩm và trang giỏ hàng - Cung cấp hướng dẫn cài đặt để người dù
Trang 1- PHAN HỮU TUẤN
- Đinh lâm trường
Năm Học: 2024 – 2025 Thành Phố Hồ Chí Minh
Trang 2chương 2 : QUÁ TRÌNH PHÁT TRIỂN
1.thiết kế giao diện trang 4
2.các file và thư mục source trang 35 3.kết nối cơ sỡ dữ liệu trang 35 4.kiểm tra và chạy trang 37
Chương 3: NHỮNG ỨNG DỤNG CẦN THIẾT VÀ CÁCH CÀI
1.wampsever trang 38
2.sublime text 3 trang 40
3 trang web phpmyadmin trang 40 Chương 4 : tài liệu tham khảo
Trang 31.Mở đầu
1 giới thiệu trang web: CellphoneS là trang web thương mại điện tử chuyên bán lẻ điện thoại di động, laptop, tablet và các phụ kiện công nghệ chính hãng, với hệ thống cửa hàng trải dài khắp cả nước
2.mục tiêu và phạm vi :
- Xây dựng một website bán hàng đơn giản bằng php , html, css
- Tạo các chức năng như trang sản phẩm và trang giỏ hàng
- Cung cấp hướng dẫn cài đặt để người dùng có thể triển khai trangweb
3.công nghệ sử dụng
- Ngôn ngữ lập trình : php , html / css
- Cơ sở dữ liệu là mysql
- công cụ phát triển là wampsever để chạy php
chương 2 : QUÁ TRÌNH PHÁT TRIỂN
1.thiết kế giao diện
Trang 4- người dùng có thể xem sản phẩm và giá tiền và có thể chọn mục nhưđiện thoại , laptop , đồng hồ , khi người dùng bấm vào sản phẩm sẽ chuyển sang trang mua hàng Tại mục xem sản phẩm người dùng có thể thêm xóa sửa
- trang mua hàng này có thể chọn số lượng và người dùng có thể đặt mua tại đây
Trang 5- người dùng có thể thêm : id sản phẩm , tên sản phẩm , giá , kho , hình ảnh khi thêm nếu như có sai sót người dùng có thể sửa và xóa
Hình 1: source của giao diện chính
Trang 6Hình2 : source của giao diện chính
Hình 3 : source của giao diện chính
Trang 7Hình4 : source của giao diện chính
Hình 5 : source của giao diện chính
Trang 8Hình6 : source của giao diện chính
Hình 7 : source của giao diện chính
Trang 9Hình 8 : source của giao diện chính
Hình 9 : source của giao diện chính
Trang 10Hình 10 : source của giao diện chính Giải thích :
+Phần đầu (<head>) liên kết các file CSS và thư viện để tạo giao diện đẹp, hiện đại.
+Phần thân (<body>) bao gồm:
-Header & Thông báo khuyến mãi
-Thanh điều hướng (menu) với logo, tìm kiếm, nút xem sản phẩm, đăng nhập, chọn khu vực.
-Sidebar bên trái là danh mục sản phẩm (điện thoại, laptop, phụ kiện, ).
-Phần chính (main) hiển thị các chương trình khuyến mãi HOT DEAL, các sản phẩm laptop nổi bật kèm thông tin giá, đánh giá và nút "đặt mua".
Trang 11Hình 11 : css của trang chính Giải thích:
Hiển thị dạng hàng ngang (flex row), căn giữa nội dung.
Dịch lên trên 24px so với vị trí ban đầu.
.a
Cũng là hộp flex đỏ, nhỏ (15px), căn giữa.
Trang 12 Áp dụng cho các đoạn văn có class mt-2.
Thiết lập màu chữ là đen.
Trang 13Hình 11: trang đặt mua
Hình 12: source của trang đặt mua
Trang 14Hình 13: source của trang đặt mua
Hình 14: source của trang đặt mua
Trang 15Hình 15: source của trang đặt mua
Giải thích :
1 Phần đầu trang (Header & Navbar)
Thông báo khuyến mãi: Dòng chữ màu vàng và xanh dương ở trên cùng.
Thanh điều hướng chính (nav):
o Logo CellphoneS + nút chọn khu vực.
o Thanh tìm kiếm.
o Các nút: Xem sản phẩm, Cửa hàng, Đăng nhập.
2 Thanh bên trái (Sidebar)
Là danh mục sản phẩm, gồm: điện thoại, laptop, phụ kiện, âm thanh, PC, sim thẻ,
Trang 16 Mỗi mục có icon và tên sản phẩm tương ứng.
3 Phần nội dung chính (Main)
Hiển thị sản phẩm nổi bật: Laptop Lenovo Legion.
Có hình ảnh, giá cũ – giá mới, đánh giá 5 sao.
4 Phần đặt mua sản phẩm
Người dùng nhập số lượng và nhấn nút "Đặt mua".
Khi bấm, hiện thông báo: "Bạn đã đặt X sản phẩm thành công!".
Hình 16 : thêm xóa sửa
Trang 17Hình 17 : source của thêm xóa sửa
Hình 18 : source của thêm xóa sửa
Trang 18Hình 18 : source của thêm xóa sửa
Giải thích :
+PHP : require_once 'themxoaxua.php';
$products = getProducts();
=>Kết nối và lấy danh sách sản phẩm từ file themxoaxua.php.
+Giao diện trang
-Header: Logo + menu điều hướng (Sản phẩm, Hỗ trợ, Mua hàng ) + biểu tượng tìm kiếm, người dùng, giỏ hàng,
-Form sản phẩm:
-Bảng hiển thị sản phẩm với các cột: ID, tên, giá, kho, hình ảnh, nút sửa, nút xóa.
-Dòng cuối bảng là form để thêm sản phẩm mới.
-Nút chức năng: "Xác nhận" (để thêm hoặc cập nhật) và "Hủy" +Các chức năng phụ
-Sửa sản phẩm: Dùng nút "Sửa" (JS xử lý).
-Xóa sản phẩm: Có xác nhận trước khi xóa.
Trang 19-Xem ảnh lớn: Modal hiển thị hình ảnh sản phẩm khi click vào ảnh.
Hình 19 : css thêm xóa sửa
Trang 20Hình 20 : css thêm xóa sửa
Hình 21 : css thêm xóa sửa
Hình 22: css thêm xóa sửa
Trang 21Hình23: css thêm xóa sửa
Hình 24: css thêm xóa sửa
Trang 22Hình 25: css thêm xóa sửa Giải thích :
1 Cài đặt chung
-Reset margin, padding, font mặc định (Segoe UI, Arial).
-body nền tối, chữ trắng.
2 Header (thanh trên cùng)
-Cố định trên đầu, nền trắng, chia 3 phần: logo, menu, công cụ -Ẩn menu trên mobile.
3 Container (khung nội dung)
-Nền trắng, có padding để tránh bị che bởi header.
4 Bảng sản phẩm
Trang 23-Nút Sửa (xanh), Xóa (đỏ), có hiệu ứng hover.
-Nhóm nút Xác nhận/Hủy cho thêm mới.
- 7 Trạng thái thông báo
-status-success (thành công - xanh).
Trang 24Hình 26 :source kết nối database
Hình 27 : source kết nối database
Trang 25Hình 28: source kết nối database
Hình 29 : source kết nối database
Trang 26Hình 29: source kết nối database
Giải thích :
1 connectDatabase() – Kết nối MySQL
-Kết nối đến MySQL với localhost, user là root, không có mật khẩu.
-Chọn database tên là cellphones1.
-Thiết lập charset UTF-8 để xử lý tiếng Việt.
2 getProducts() – Lấy danh sách sản phẩm
-Truy vấn toàn bộ bảng products → trả về mảng sản phẩm.
3 getProductById($productID) – Lấy 1 sản phẩm theo ID
Trang 27-Truy vấn lấy thông tin một sản phẩm theo productID.
-Trả về mảng chứa dữ liệu sản phẩm.
4 processImageUpload() – Xử lý upload hình ảnh
-Nhận file ảnh từ form.
-Tạo thư mục uploads/products/ nếu chưa có.
-Tạo tên file duy nhất như: product_ABC123_1712564460.jpg -Kiểm tra định dạng file (jpg/png/gif) và kích thước (tối đa 5MB).
-Upload thành công → trả về đường dẫn ảnh.
5 addProduct() – Thêm sản phẩm mới
-Kiểm tra dữ liệu đầu vào.
-Gọi hàm processImageUpload() để xử lý hình.
Escape dữ liệu đầu vào để tránh SQL Injection.
-Kiểm tra price và stock phải là số.
Trang 28-Xóa sản phẩm khỏi DB bằng DELETE.
-Chuyển hướng về datmua1.php?status=deleted.
- Nếu POST, xử lý thêm hoặc cập nhật.
- Nếu GET với action=delete, xử lý xóa.
Trang 292.các file và thư mục source
Trang 31.gitigmore: Loại trừ files khỏi Git
1>14.php : là trang giao diện chính và trang đặt hàng1>16.png : là ảnh
Datmua1.php : là trang thêm xóa sửa
Themxoasua.php : để kết nối với database
3.kết nối cơ sỡ dữ liệu
1.tạo database là qlbh
2.trong database đó gồm 3 bảng
- bảng 1: invoices (hóa đơn)
Trang 32Trong đó:+ invoiceID là id hóa đơn
invoiceID Int Không Không Khóa chính
userID Int Không Không Khóa chính,khóa ngoạiProductID Int Không Không Khóa chính,khóa ngoại
Trang 33- Bảng 2 : products (sản phẩm)
productID Int(11) Không Không Khóa chínhproductNam
e Varchar(500) Không Không
Price Float Không Không
Hinhanh Varchar(255) Có Null
Trang 34-Bảng 3 : users (người dùng)
userID Int(11) Không Không Khóa chínhFullname Varchar(500) Không Không
Phonenumber Varchar(12) Có Null
Trong đó: + userID là id người dùng
+ Fullname là tên
+ Phonenumber là số điện thoại
Sau khi kết nối xong kiểm tra và chạy
Trang 35
-Chương 3: NHỮNG ỨNG DỤNG CẦN THIẾT
VÀ CÁCH CÀI
1.Wampsever
Bước1: vào web khonggiankythuat.com
Bước 2 : vào mục học liệu tìm phần bộ cài đặt wampsever
Trang 36Bước 3 : nhấn nút tải về
Trang 372.sublime text 3
-trong phần học liệu của trang web
khonggiankythuat.com tìm phần học liệu là bộ cài đặt sublime text 3
3 trang web phpmyadmin
Địa chỉ liên kết : http://localhost/phpmyadmin/
+ tên người dùng : root
+mật khẩu : không
Chương 4 : tài liệu tham khảo
Trang 38+ tổng hợp nhiều nguồn trên google
+trang web khonggiankythuat.com
+trang web cellphones : https://cellphones.com.vn/
