|
| 1 | +# ZStyle Shop - Cửa hàng Thương mại Điện tử về Thời trang Áo |
| 2 | + |
| 3 | +<p align="center"> |
| 4 | + <img src="screenshot/logo.svg" alt="ZStyle Shop Logo" height="50px"/> <!-- Cập nhật đường dẫn logo của bạn tại đây --> |
| 5 | +</p> |
| 6 | + |
| 7 | +Chào mừng bạn đến với ZStyle Shop, một nền tảng thương mại điện tử được xây dựng để mang đến những sản phẩm áo thun và thời trang chất lượng cho mọi người. Dự án này là một ứng dụng web full-stack được xây dựng bằng PHP, được thiết kế để sử dụng với XAMPP, và có đầy đủ các chức năng cho cả khách hàng và quản trị viên. |
| 8 | + |
| 9 | +README này có sẵn bằng tiếng Anh và tiếng Việt. Vui lòng mở rộng phần ngôn ngữ bạn muốn xem. |
| 10 | + |
| 11 | +**Project Link:** [https://github.com/TranHuuDat2004/zstyle](https://github.com/TranHuuDat2004/zstyle) <!-- Cập nhật link repo của bạn tại đây --> |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +<details> |
| 16 | +<summary><strong>English Version (Click to Expand)</strong></summary> |
| 17 | + |
| 18 | +## 🌟 Project Overview |
| 19 | + |
| 20 | +ZStyle Shop is designed to provide a seamless and modern online shopping experience for fashion enthusiasts. From browsing a curated collection of apparel to a secure checkout process and order tracking, ZStyle Shop aims to be a go-to destination for quality clothing. The platform also includes a robust administration system for efficient business management. |
| 21 | + |
| 22 | +*(Note: For a live demo, you would need to deploy this project to a web hosting service. The instructions below are for local setup.)* |
| 23 | + |
| 24 | +## ✨ Key Features |
| 25 | + |
| 26 | +### For Customers: |
| 27 | +* **Intuitive Product Browsing:** Homepage featuring new arrivals and featured items, product categories, and advanced search functionality. |
| 28 | +* **Detailed Product Pages:** High-quality product images, detailed descriptions, size and color options, and customer reviews. |
| 29 | +* **Shopping Cart:** A clear and simple cart for adding items, updating quantities, and applying discount vouchers. |
| 30 | +* **Secure Checkout Process:** A multi-step, easy-to-follow checkout process for entering shipping information and completing the order. |
| 31 | +* **User Accounts:** Easy registration and login, personal profile management, and access to order history. |
| 32 | +* **Engagement & Information:** A news/blog section for updates, an "About Us" page, a contact form, and company policy information. |
| 33 | + |
| 34 | +### 🛍️ Customer Interface (Screenshots) |
| 35 | +*Lưu ý: Thay thế các đường dẫn `screenshot/*.png` bằng đường dẫn thực tế đến các tệp ảnh chụp màn hình của bạn.* |
| 36 | + |
| 37 | +| Home Page | Product Page | Product Detail Page | |
| 38 | +| :---------------------------------------: | :--------------------------------------------: | :-----------------------------------------------: | |
| 39 | +|  |  |  | |
| 40 | +| **Shopping Cart** | **Checkout Process** | **Order History** | |
| 41 | +|  |  |  | |
| 42 | +| **Login Page** | **Registration Page** | **User Profile** | |
| 43 | +|  |  |  | |
| 44 | +| **News Page** | **About Us Page** | **Contact Page** | |
| 45 | +|  |  |  | |
| 46 | + |
| 47 | +### For Administrators (Admin Dashboard): |
| 48 | +* **Dashboard Overview:** Key statistics on revenue, orders, and users at a glance. |
| 49 | +* **Product Management:** Easily add, view, edit, and delete clothing products and manage their images. |
| 50 | +* **Order Management:** View and manage all customer orders. |
| 51 | +* **User Management:** View and manage registered customer accounts. |
| 52 | +* **Voucher Management:** Create and manage promotional discount codes. |
| 53 | +* **Content Management:** Manage news articles and user comments. |
| 54 | + |
| 55 | +### ⚙️ Admin Interface (Screenshots) |
| 56 | +*Lưu ý: Thay thế các đường dẫn `screenshot/*.png` bằng đường dẫn thực tế đến các tệp ảnh chụp màn hình của bạn.* |
| 57 | + |
| 58 | +| Admin Dashboard | Manage Products | Manage Orders | |
| 59 | +| :------------------------------------------: | :--------------------------------------------------: | :---------------------------------------------------: | |
| 60 | +|  |  |  | |
| 61 | +| **Manage Users** | **Manage Vouchers** | **Manage Comments** | |
| 62 | +|  |  |  | |
| 63 | + |
| 64 | +## 🛠️ Technology Stack |
| 65 | + |
| 66 | +* **Frontend:** HTML5, CSS3, JavaScript, Bootstrap |
| 67 | +* **Backend:** PHP (Procedural or with a custom structure) |
| 68 | +* **Database:** MySQL (Managed via phpMyAdmin in XAMPP) |
| 69 | +* **Web Server:** Apache (via XAMPP) |
| 70 | + |
| 71 | +## 🚀 Getting Started |
| 72 | + |
| 73 | +### Prerequisites |
| 74 | + |
| 75 | +* **XAMPP:** Installed and running (Apache, PHP, MySQL). |
| 76 | +* **Git:** For cloning the repository. |
| 77 | + |
| 78 | +### Installation & Setup |
| 79 | + |
| 80 | +1. **Start XAMPP:** Ensure Apache and MySQL services are running from the XAMPP Control Panel. |
| 81 | +2. **Clone Repository into `htdocs`:** |
| 82 | + * Navigate to your XAMPP `htdocs` directory (e.g., `C:\xampp\htdocs`). |
| 83 | + * Run: `git clone https://github.com/TranHuuDat2004/zstyle.git` |
| 84 | + * This will create a folder (e.g., `C:\xampp\htdocs\zstyle`). |
| 85 | + |
| 86 | +3. **Database Setup:** |
| 87 | + * Go to `http://localhost/phpmyadmin` in your web browser. |
| 88 | + * Create a new database. It's recommended to use a name like `Zstyle` (with collation `utf8mb4_general_ci`). |
| 89 | + * Select the newly created database, go to the "Import" tab, choose your project's `.sql` file (e.g., `Zstyle.sql`), and click "Go" to import the structure and data. |
| 90 | + |
| 91 | + |
| 92 | +5. **Accessing the Application:** |
| 93 | + * **Customer Site:** `http://localhost/zstyle/` |
| 94 | + |
| 95 | +## 📝 License |
| 96 | + |
| 97 | +This work is licensed under a [Creative Commons Attribution-NonCommercial 4.0 International License](https://creativecommons.org/licenses/by-nc/4.0/). You are free to Share and Adapt the material, under the terms of Attribution and NonCommercial use. |
| 98 | +[](https://creativecommons.org/licenses/by-nc/4.0/) |
| 99 | + |
| 100 | +## 👤 Contributors |
| 101 | + |
| 102 | +* **Team Engineering** |
| 103 | + * **Phan Trung Trực** - Team Leader | Project Visionary & Lead Ideator |
| 104 | + * **Trần Hữu Đạt** - Full-Stack Web Developer - [@TranHuuDat2004](https://github.com/TranHuuDat2004) |
| 105 | + * **Lê Nguyễn Minh Kha** - Member |
| 106 | + * **Dương Thị Thùy Linh** - Member |
| 107 | + |
| 108 | +</details> |
| 109 | + |
| 110 | +--- |
| 111 | + |
| 112 | +<details> |
| 113 | +<summary><strong>Phiên bản Tiếng Việt (Nhấn để Mở rộng)</strong></summary> |
| 114 | + |
| 115 | +## 🌟 Tổng quan Dự án |
| 116 | + |
| 117 | +ZStyle Shop được thiết kế để cung cấp trải nghiệm mua sắm trực tuyến liền mạch và hiện đại cho những người yêu thích thời trang. Từ việc duyệt qua bộ sưu tập áo quần được tuyển chọn kỹ lưỡng đến quy trình thanh toán an toàn và theo dõi đơn hàng, ZStyle Shop đặt mục tiêu trở thành điểm đến tin cậy cho các sản phẩm thời trang chất lượng. Nền tảng này cũng bao gồm một hệ thống quản trị mạnh mẽ để quản lý kinh doanh hiệu quả. |
| 118 | + |
| 119 | +*(Lưu ý: Để có bản demo trực tuyến, bạn cần triển khai dự án này lên một dịch vụ lưu trữ web. Hướng dẫn bên dưới dành cho việc cài đặt trên máy cục bộ.)* |
| 120 | + |
| 121 | +## ✨ Các Tính năng Chính |
| 122 | + |
| 123 | +### Dành cho Khách hàng: |
| 124 | +* **Duyệt Sản phẩm Trực quan:** Trang chủ hiển thị các sản phẩm mới và nổi bật, danh mục sản phẩm và chức năng tìm kiếm nâng cao. |
| 125 | +* **Trang Chi tiết Sản phẩm:** Hình ảnh sản phẩm chất lượng cao, mô tả chi tiết, tùy chọn kích cỡ và màu sắc, cùng với đánh giá của khách hàng. |
| 126 | +* **Giỏ hàng:** Giỏ hàng đơn giản, rõ ràng để thêm sản phẩm, cập nhật số lượng và áp dụng mã giảm giá. |
| 127 | +* **Quy trình Thanh toán An toàn:** Quy trình thanh toán gồm nhiều bước, dễ thực hiện để nhập thông tin vận chuyển và hoàn tất đơn hàng. |
| 128 | +* **Tài khoản Người dùng:** Đăng ký và đăng nhập dễ dàng, quản lý hồ sơ cá nhân và truy cập lịch sử đơn hàng. |
| 129 | +* **Tương tác & Thông tin:** Mục tin tức/blog để cập nhật thông tin, trang "Giới thiệu", biểu mẫu liên hệ và thông tin chính sách của công ty. |
| 130 | + |
| 131 | +### 🛍️ Giao diện Khách hàng (Ảnh chụp màn hình) |
| 132 | +*Lưu ý: Thay thế các đường dẫn `screenshot/*.png` bằng đường dẫn thực tế đến các tệp ảnh chụp màn hình của bạn.* |
| 133 | + |
| 134 | +| Trang Chủ | Trang Sản Phẩm | Trang Chi Tiết Sản Phẩm | |
| 135 | +| :---------------------------------------: | :-------------------------------------------: | :-----------------------------------------------: | |
| 136 | +|  |  |  | |
| 137 | +| **Giỏ hàng** | **Quy trình Thanh toán** | **Lịch sử Đơn hàng** | |
| 138 | +|  |  |  | |
| 139 | +| **Trang Đăng nhập** | **Trang Đăng ký** | **Hồ sơ Người dùng** | |
| 140 | +|  |  |  | |
| 141 | +| **Trang Tin tức** | **Trang Giới thiệu** | **Trang Liên hệ** | |
| 142 | +|  |  |  | |
| 143 | + |
| 144 | +### Dành cho Quản trị viên (Bảng điều khiển Admin): |
| 145 | +* **Tổng quan Dashboard:** Thống kê nhanh các chỉ số quan trọng về doanh thu, đơn hàng và người dùng. |
| 146 | +* **Quản lý Sản phẩm:** Dễ dàng thêm, xem, sửa, xóa sản phẩm quần áo và quản lý hình ảnh của chúng. |
| 147 | +* **Quản lý Đơn hàng:** Xem và quản lý tất cả các đơn hàng của khách. |
| 148 | +* **Quản lý Người dùng:** Xem và quản lý tài khoản của khách hàng đã đăng ký. |
| 149 | +* **Quản lý Voucher:** Tạo và quản lý các mã giảm giá khuyến mãi. |
| 150 | +* **Quản lý Nội dung:** Quản lý các bài viết tin tức và bình luận của người dùng. |
| 151 | + |
| 152 | +### ⚙️ Giao diện Quản trị (Ảnh chụp màn hình) |
| 153 | +*Lưu ý: Thay thế các đường dẫn `screenshot/*.png` bằng đường dẫn thực tế đến các tệp ảnh chụp màn hình của bạn.* |
| 154 | + |
| 155 | +| Bảng điều khiển Admin | Quản lý Sản phẩm | Quản lý Đơn hàng | |
| 156 | +| :------------------------------------------: | :-----------------------------------------------: | :---------------------------------------------------: | |
| 157 | +|  |  |  | |
| 158 | +| **Quản lý Người dùng** | **Quản lý Voucher** | **Quản lý Bình luận** | |
| 159 | +|  |  |  | |
| 160 | + |
| 161 | +## 🛠️ Công nghệ sử dụng |
| 162 | + |
| 163 | +* **Frontend:** HTML5, CSS3, JavaScript, Bootstrap |
| 164 | +* **Backend:** PHP (Lập trình thủ tục hoặc theo cấu trúc tùy chỉnh) |
| 165 | +* **Cơ sở dữ liệu:** MySQL (Quản lý qua phpMyAdmin trong XAMPP) |
| 166 | +* **Web Server:** Apache (thông qua XAMPP) |
| 167 | + |
| 168 | +## 🚀 Bắt đầu |
| 169 | + |
| 170 | +### Điều kiện Tiên quyết |
| 171 | + |
| 172 | +* **XAMPP:** Đã được cài đặt và đang chạy (Apache, PHP, MySQL). |
| 173 | +* **Git:** Để sao chép kho lưu trữ. |
| 174 | + |
| 175 | +### Cài đặt & Thiết lập |
| 176 | + |
| 177 | +1. **Khởi động XAMPP:** Mở XAMPP Control Panel và đảm bảo các dịch vụ **Apache** và **MySQL** đang chạy. |
| 178 | +2. **Sao chép kho lưu trữ vào `htdocs`:** |
| 179 | + * Điều hướng đến thư mục `htdocs` của XAMPP (ví dụ: `C:\xampp\htdocs`). |
| 180 | + * Chạy lệnh: `git clone https://github.com/TranHuuDat2004/zstyle.git` |
| 181 | + * Lệnh này sẽ tạo một thư mục dự án (ví dụ: `C:\xampp\htdocs\zstyle`). |
| 182 | + |
| 183 | +3. **Thiết lập Cơ sở dữ liệu:** |
| 184 | + * Mở trình duyệt và truy cập `http://localhost/phpmyadmin`. |
| 185 | + * Tạo một cơ sở dữ liệu mới. Khuyến khích đặt tên là `Zstyle` (với đối chiếu là `utf8mb4_general_ci`). |
| 186 | + * Chọn cơ sở dữ liệu vừa tạo, chuyển đến tab "Import", chọn tệp `.sql` của dự án (ví dụ: `Zstyle.sql`), và nhấn "Go" để nhập cấu trúc và dữ liệu. |
| 187 | + |
| 188 | +4. **Cấu hình Kết nối Cơ sở dữ liệu (nếu cần):** |
| 189 | + * Tìm tệp PHP trong dự án của bạn chịu trách nhiệm kết nối cơ sở dữ liệu (ví dụ: `config.php`, `db_connect.php`). |
| 190 | + * Đảm bảo các thông tin kết nối khớp với cài đặt XAMPP của bạn. Thông tin mặc định thường là: |
| 191 | + * Host: `localhost` |
| 192 | + * User: `root` |
| 193 | + * Password: `(để trống)` |
| 194 | + * Tên cơ sở dữ liệu: `Zstyle` (hoặc tên bạn đã đặt ở bước trước). |
| 195 | + |
| 196 | +5. **Truy cập Ứng dụng:** |
| 197 | + * **Trang Khách hàng:** `http://localhost/zstyle/` |
| 198 | + |
| 199 | + |
| 200 | +## 📝 Giấy phép |
| 201 | + |
| 202 | +Công trình này được cấp phép theo [Giấy phép Quốc tế Creative Commons Ghi công-Phi thương mại 4.0](https://creativecommons.org/licenses/by-nc/4.0/). Bạn được tự do Chia sẻ và Phỏng theo tài liệu, theo các điều khoản Ghi công và Phi thương mại. |
| 203 | +[](https://creativecommons.org/licenses/by-nc/4.0/) |
| 204 | + |
| 205 | +## 👤 Thành viên Đóng góp |
| 206 | + |
| 207 | +* **Nhóm Kỹ thuật** |
| 208 | + * **Phan Trung Trực** - Trưởng nhóm | Định hướng & Lên ý tưởng chính cho Dự án |
| 209 | + * **Trần Hữu Đạt** - Lập trình viên Web - [@TranHuuDat2004](https://github.com/TranHuuDat2004) |
| 210 | + * **Lê Nguyễn Minh Kha** - Thành viên |
| 211 | + * **Dương Thị Thùy Linh** - Thành viên |
| 212 | + |
| 213 | +</details> |
0 commit comments