Velvet Vogue

Velvet Vogue is a modern, responsive fashion e-commerce website built with HTML, CSS (Bootstrap), JavaScript, and PHP (for authentication). It features a stylish product catalog, shopping cart, user registration and login system, and a contact page. The backend uses MySQL (via XAMPP) for user management.

---

Features

• Responsive Design: Works seamlessly on mobile, tablet, and desktop.
• Product Catalog: Browse casual and formal wear with detailed product pages.
• Shopping Cart: Add products to cart, view, update, and checkout.
• User Authentication: Register and login with secure password hashing.
• Session Management: Logged-in users see their first name in the navbar and can logout.
• Contact Page: Users can send messages via a simple contact form.
• Bootstrap UI: Clean, modern look using Bootstrap 5.

---

Folder Structure

velvet-vogue/
├── css/
│   └── styles.css
├── img/
│   └── (backgrounds, product images)
├── js/
│   └── script.js
├── auth/
│   ├── db.php
│   ├── login.php
│   ├── logout.php
│   ├── register.php
│   └── session.php
├── index.html
├── products.html
├── product-details.html
├── cart.html
├── login.html
├── register.html
├── contact.html
└── README.md

---

Getting Started

1. Prerequisites

• XAMPP (Apache + MySQL + PHP)
• Web browser

2. Installation

1. Clone or copy the repository into your XAMPP htdocs directory:

   C:\xampp\htdocs\velvet-vogue
   

2. Start XAMPP and ensure Apache and MySQL are running.

3. Create the database and table:

   • Open phpMyAdmin
   • Run the following SQL:

     CREATE DATABASE IF NOT EXISTS velvetvogue;
     USE velvetvogue;
     
     CREATE TABLE IF NOT EXISTS users (
       id INT AUTO_INCREMENT PRIMARY KEY,
       fullname VARCHAR(100) NOT NULL,
       email VARCHAR(100) NOT NULL UNIQUE,
       password VARCHAR(255) NOT NULL
     );

4. Configure Database Connection:

   • Edit auth/db.php if your MySQL username or password is different:

     $host = "localhost";
     $user = "root";
     $pass = "";
     $dbname = "velvetvogue";

---

Usage

1. Access the Website

• Open your browser and go to:

  http://localhost/velvet-vogue/index.html
  

2. Register & Login

• Go to Register to create a new account.
• After registration, login with your email and password.
• On successful login, your first name appears in the navbar. Click it to logout.

3. Browse & Shop

• Browse products on the home and products pages.
• Click a product for details.
• Add items to your cart and checkout.

4. Contact

• Use the contact page to send a message.

---

Authentication System

• Register:

  • Form fields: Full Name, Email, Password, Confirm Password.
  • Passwords are securely hashed.
  • Duplicate emails are not allowed.

• Login:

  • Form fields: Email, Password.
  • On success, user session is started.

• Session:

  • User's first name is shown in the navbar when logged in.
  • Logout via dropdown menu.

• Backend Files:

  • auth/register.php — Handles registration.
  • auth/login.php — Handles login.
  • auth/logout.php — Handles logout.
  • auth/session.php — Returns session info for navbar JS.

---

Customization

• Products:
  Edit products.html and product-details.html to add or modify products.

• Styling:
  Customize css/styles.css for colors, fonts, and layout.

• Navbar:
  Navbar is responsive and updates based on login status via JS and PHP session.

---

Troubleshooting

• PHP Not Working:

  • Make sure you access files via http://localhost/velvet-vogue/ (not double-clicking .html files).
  • Ensure XAMPP Apache and MySQL are running.

• Database Errors:

  • Check your database credentials in auth/db.php.
  • Make sure the velvetvogue database and users table exist.

• Session Issues:

  • Make sure your PHP files start with session_start(); before any output.

---

Credits

• Bootstrap
• Google Fonts - Poppins
• Material Icons
• Product images from Alibaba (for demo purposes)

---

License

This project is for