================================================================================ MINIMALIST T-SHIRT STORE - USER MANUAL ================================================================================ 1. SYSTEM OVERVIEW ================================================================================ This web application is a highly responsive, minimalist, Apple Store-inspired T-shirt e-commerce platform. It showcase a catalog of premium products divided into three core tiers (Basic, Pro, and Luxury). Features include: - A dynamic, real-time product configurator that adjusts size, Trade-in discount credits, and "Tee Care+" protective warranty plans with live price updates. - A session-persistent shopping bag (cart) supporting real-time quantity modifications. - A streamlined checkout checkout simulator tracking user shipping details and payment selections. - A fully protected Admin Dashboard (/admin) featuring sales analytics, visual 7-day trend charts, visitor counts, and a complete Product CRUD manager interfacing with a MySQL database. Target Audience / Users: - Store Customers: General users looking to browse, customize, and simulate purchases of premium t-shirts. - Store Administrators: Managers looking to track site traffic, inspect orders/ conversion performance, and edit or manage the product catalog dynamically. 2. SYSTEM REQUIREMENTS & INSTALLATION ================================================================================ Required Environment: - PHP version: PHP 7.4 or higher - Required PHP Extensions: * PDO and pdo_mysql (for MySQL database interactions) * json (for processing JSON-based product specifications) * session (for maintaining shopping bag state and administrator logins) - Database: MySQL or MariaDB Installation Steps: 1. Extract or clone the project directory inside your local server workspace (e.g., `C:\xampp\htdocs\` for XAMPP on Windows). 2. Start your Apache and MySQL servers. 3. Import the database schema: - Create a MySQL database (e.g., named `ecommerce_db`). - Import the `schema.sql` script into your newly created database. You can accomplish this via phpMyAdmin or the MySQL command line: mysql -u [db_username] -p -e "CREATE DATABASE IF NOT EXISTS ecommerce_db" mysql -u [db_username] -p ecommerce_db < schema.sql 4. Create or edit the `.env` file in the root folder of the project. Set the correct credentials matching your local database configuration: DB_HOST=127.0.0.1 DB_PORT=3306 DB_USER=root DB_PASSWORD= DB_NAME=ecommerce_db 5. Run the server: - On Windows: Double-click the `start.bat` file to automatically spin up a built-in PHP web server and launch your default browser. - On Linux/macOS: Open a terminal in the project directory, grant execution privileges, and run the startup script: chmod +x start.sh && ./start.sh - Alternatively, execute the built-in server command manually: php -S localhost:8000 6. Access the site in your browser at: http://localhost:8000 3. USER ROLES & AUTHENTICATION ================================================================================ The system supports two core user types: 1. Guest / Customer (Public) - Requires no authentication or registration. - Session-based shopping bag items and theme preferences are tracked anonymously via standard PHP sessions and local browser storage. 2. Store Administrator - Authorized to manage products and monitor analytics. - Authentication is session-based and configured in `admin/config.php`. - Access URL: http://localhost:8000/admin - Credentials (Demo defaults): * Username: admin * Password: admin123 - Session State: The session variable `$_SESSION['admin_logged_in']` handles permission validation across all pages in the `admin/` directory. If the session is not initialized or invalid, access is automatically rerouted to `admin/login.php`. 4. CORE FEATURES & USER WORKFLOWS ================================================================================ A customer can complete the following workflows: Workflow A: Customizing and Buying a Product 1. From the homepage (index.php), browse the available product showcases. 2. Select a tier and click "Configure" next to the product of your choice. 3. On the product configuration page: - Select a Size (S, M, L, XL, XXL, or Free Size). - (Optional) Choose a "Tee Trade In" option. Select "Recycle Condition" (saves $3.00), "Good Condition" (saves $7.00), or "Excellent Condition" (saves $12.00) to apply a discount. - (Optional) Select a "Tee Care+" warranty tier. Choose "1-Year Tee Care+" (adds $9.00) or "2-Year Tee Care+" (adds $19.00). - Review live pricing adjustments in the sticky headers and footers. 4. Click "Add to Bag". You will be automatically redirected to your shopping bag review page (bag.php). Workflow B: Reviewing the Bag & Changing Quantities 1. View your customized item details (e.g., base product name, selected sizes, active discounts, and warranty selections). 2. Adjust the item quantity by selecting a value from the drop-down menu (1-10). The page will automatically reload and update calculations. 3. (Optional) To delete an item from the bag, click the "Remove" button next to the item's pricing. 4. When ready, click "Check Out". Workflow C: Checkout Simulation 1. Enter your contact details: "Email Address" and "Phone Number". 2. Fill out your delivery details: "Full Name", "Address Line", "City/Province", and "Zip Code". 3. Under "Payment Method", select your simulated payment provider (Credit/Debit Card, Apple Pay, Google Pay, or PayPal). 4. Review your final summary and click "Place Order". 5. You will see a success confirmation screen. The shopping bag session is then cleared, and metrics are successfully passed to database analytics. 5. ADMIN / MANAGEMENT PANEL ================================================================================ Authorized managers can navigate to `/admin` to access the backend dashboard: Dashboard Analytics (admin/index.php) - Displays summary statistics: Total Visitors, Order Requests, Items Sold, and Total Revenue. - Renders custom inline SVG trend sparklines summarizing visitor traffic, order requests, and units sold over the last 7 calendar days. Product Catalog Management (admin/products.php) Allows editing of the MySQL database catalog via a table editor interface: 1. Add Product: - Click "+ Add Product". - Enter Product Name, Thai translation name, select Tier, Base Price, English/Thai Taglines, and English/Thai Descriptions. - Input Specifications (one item per line) in both languages. - Paste a direct Image URL or upload an image file from your machine (stored under `/assets/uploads/`). - Click "Create Product". 2. Edit Product: - Click "Edit" next to any listed item. - Modify any properties, adjust specifications, or change images. - Click "Update Product" to overwrite existing entries. 3. Delete Product: - Click "Delete" next to a catalog item. - Confirm deletion by clicking the confirmation prompt. 6. TROUBLESHOOTING & FAQS ================================================================================ Q: I get a page with JSON error output when launching the store. A: This occurs when PHP fails to connect to your database. Verify that your MySQL server is running, and that the server credentials inside your `.env` file match your database instance setup. Q: Product changes made in the Admin Panel do not appear. A: The system falls back to default hardcoded configurations if MySQL connection fails or the `products` database table returns zero entries. Check your database connectivity and ensure that `schema.sql` has been imported. Q: File uploads fail during product creation. A: Ensure your PHP installation permits file uploads. Check that `file_uploads` is set to `On` inside your active `php.ini` file, and that the project's `/assets/uploads/` directory has proper write permissions. Q: Will my order be processed and charged? A: No. This is a simulation sandbox e-commerce application. All checkouts are visual simulations; no actual credit card details or currency is processed. ================================================================================