Software Design Document (SDD) for Car Rental Website

# Software Design Document (SDD) for Car Rental Website

## 1. Introduction

### 1.1. Purpose
The purpose of this Software Design Document (SDD) is to provide a comprehensive description of the design and architecture of the Car Rental Website system. This document serves as a reference for developers, stakeholders, and maintainers to understand the system's structure, components, data flow, and implementation details. It outlines the technical specifications, design decisions, and rationale behind the system's development.

### 1.2. Scope
This SDD covers the entire Car Rental Website system, including:
- Frontend application built with React.js
- Backend services implemented in PHP
- Database schema and data management
- User interface components and interactions
- System architecture and component relationships
- Data design and flow
- Human interface design specifications

The document does not cover deployment procedures, testing methodologies, or maintenance operations, which are addressed in separate documents.

### 1.3. Overview
The Car Rental Website is a web-based application that allows users to browse, view details, and book rental cars. The system consists of a React-based frontend for user interaction and a PHP-based backend for server-side processing and database operations. Users can register, login, view available cars, make bookings, and contact the service provider.

### 1.4. Reference Material
- React Documentation: https://reactjs.org/
- PHP Manual: https://www.php.net/manual/
- MySQL Documentation: https://dev.mysql.com/doc/
- React Router Documentation: https://reactrouter.com/
- Tailwind CSS Documentation: https://tailwindcss.com/

### 1.5. Definitions and Acronyms
- API: Application Programming Interface
- CSS: Cascading Style Sheets
- HTML: HyperText Markup Language
- HMR: Hot Module Replacement
- JSX: JavaScript XML
- PHP: PHP: Hypertext Preprocessor
- SQL: Structured Query Language
- UI: User Interface
- UX: User Experience

## 2. System Overview
The Car Rental Website is a full-stack web application designed to facilitate car rental services. The system provides an intuitive interface for users to explore available vehicles, view detailed information, and make reservations. The backend handles user authentication, booking management, and data persistence.

Key features include:
- User registration and authentication
- Car catalog browsing
- Detailed car information display
- Booking system with date selection
- Contact form for inquiries
- Responsive design for mobile and desktop use

## 3. System Architecture

### 3.1. Architectural Design
The system follows a client-server architecture with separation of concerns:
- **Frontend (Client-side)**: React.js application running in the browser
- **Backend (Server-side)**: PHP scripts handling business logic and database interactions
- **Database**: MySQL database for data persistence

The frontend communicates with the backend through HTTP requests (AJAX/Fetch API). The backend processes requests, interacts with the database, and returns JSON responses.

### 3.2. Decomposition Description
The system is decomposed into the following major components:

1. **Frontend Components**:
   - Layout: Navigation and page structure
   - Pages: Home, Login, Register, Car listing, Car details, Booking, About, Contact
   - Reusable Components: Hero, FeaturedCars, VideoSection, Features, Footer

2. **Backend Scripts**:
   - Authentication: login.php, register.php
   - Booking: book.php
   - Contact: contact.php
   - Database: database.sql

3. **Database Tables**:
   - users: User account information
   - cars: Vehicle inventory
   - bookings: Reservation records
   - contacts: Customer inquiries

### 3.3. Design Rationale
- **React for Frontend**: Chosen for its component-based architecture, virtual DOM for performance, and rich ecosystem. Enables building interactive UIs efficiently.
- **PHP for Backend**: Selected for its simplicity in handling web requests, extensive support for database operations, and ease of deployment on shared hosting.
- **MySQL Database**: Relational database chosen for structured data storage, ACID compliance, and robust querying capabilities.
- **Tailwind CSS**: Utility-first CSS framework selected for rapid UI development and consistent styling.
- **React Router**: Client-side routing library for single-page application navigation without full page reloads.

## 4. Data Design

### 4.1. Data Description
The system manages four main data entities:
- **Users**: Customer account information including personal details and authentication credentials
- **Cars**: Vehicle inventory with specifications, pricing, and availability status
- **Bookings**: Reservation records linking users to cars with date ranges and pricing
- **Contacts**: Customer inquiries and messages

Data flows from the frontend forms to backend PHP scripts, which validate and store data in the MySQL database. Queries retrieve data for display in the frontend components.

### 4.2. Data Dictionary

#### Users Table
- id: INT (Primary Key, Auto-increment)
- first_name: VARCHAR(255) - User's first name
- last_name: VARCHAR(255) - User's last name
- email: VARCHAR(255) - Unique email address for login
- password: VARCHAR(255) - Hashed password
- created_at: TIMESTAMP - Account creation timestamp

#### Cars Table
- id: INT (Primary Key, Auto-increment)
- name: VARCHAR(255) - Car model name
- year: INT - Manufacturing year
- location: VARCHAR(255) - Pickup location
- seats: INT - Number of seats
- transmission: VARCHAR(50) - Manual/Automatic
- fuel: VARCHAR(50) - Fuel type
- price: DECIMAL(10,2) - Daily rental price
- rating: DECIMAL(3,1) - Customer rating
- type: VARCHAR(100) - Car category (SUV, Sedan, etc.)
- status: VARCHAR(50) - Availability status
- image: VARCHAR(255) - Image file path
- created_at: TIMESTAMP - Record creation timestamp

#### Bookings Table
- id: INT (Primary Key, Auto-increment)
- user_id: INT (Foreign Key to users.id)
- car_id: INT (Foreign Key to cars.id)
- start_date: DATE - Rental start date
- end_date: DATE - Rental end date
- total_price: DECIMAL(10,2) - Total booking cost
- status: ENUM('pending', 'confirmed', 'cancelled') - Booking status
- created_at: TIMESTAMP - Booking creation timestamp

#### Contacts Table
- id: INT (Primary Key, Auto-increment)
- name: VARCHAR(255) - Contact person's name
- email: VARCHAR(255) - Contact email
- message: TEXT - Inquiry message
- created_at: TIMESTAMP - Message timestamp

## 5. Component Design
The system is organized into modular components for maintainability and reusability:

### Frontend Components
- **App.jsx**: Main application component with routing configuration
- **Layout.jsx**: Wrapper component providing navigation and page structure
- **Nav.jsx**: Navigation bar with menu items and branding
- **Home.jsx**: Landing page aggregating hero, featured cars, and other sections
- **Hero.jsx**: Promotional banner section
- **FeaturedCars.jsx**: Grid display of highlighted vehicles
- **VideoSection.jsx**: Embedded video content
- **Features.jsx**: Service features showcase
- **Footer.jsx**: Site footer with links and information

### Page Components
- **Login.jsx**: User authentication form
- **Register.jsx**: New user registration form
- **Car.jsx**: Vehicle catalog page
- **CarDetails.jsx**: Individual car information display
- **BookNow.jsx**: Booking form with date selection
- **About.jsx**: Company information page
- **Contact.jsx**: Contact form and information

### Backend Components
- **database.sql**: Database schema definition
- **login.php**: User authentication logic
- **register.php**: User registration processing
- **book.php**: Booking creation and validation
- **contact.php**: Contact form processing

Each component follows single responsibility principle and communicates through well-defined interfaces.

## 6. Human Interface Design

### 6.1. Overview of User Interface
The user interface is designed with a mobile-first approach using Tailwind CSS for responsive design. The application features a clean, modern aesthetic with intuitive navigation and clear call-to-action buttons. Color scheme emphasizes accessibility and brand consistency.

### 6.2. Screen Images
(Note: Screen images would be included here in a graphical format. For this text document, descriptions are provided.)

- **Home Page**: Hero banner, featured cars grid, promotional video, features section, footer
- **Login/Register Pages**: Form-based layouts with input fields and submit buttons
- **Car Listing Page**: Grid of car cards with images, basic info, and "View Details" buttons
- **Car Details Page**: Detailed car information with booking form
- **Booking Page**: Date selection interface with pricing calculation
- **Contact Page**: Form for customer inquiries

### 6.3. Screen Objects and Actions
- **Navigation Bar**: Logo (links to home), menu items (Home, Cars, About, Contact, Login/Register), responsive hamburger menu
- **Car Cards**: Image, name, price, rating, "View Details" button
- **Forms**: Input fields with labels, validation messages, submit buttons
- **Buttons**: Primary (blue), secondary (gray), with hover and active states
- **Date Pickers**: Calendar widgets for booking date selection
- **Modals/Dialogs**: Confirmation dialogs for bookings and form submissions

## 7. Requirements Matrix
| Requirement ID | Description | Priority | Status | Component |
|----------------|-------------|----------|--------|-----------|
| REQ-001 | User registration and login | High | Implemented | Login.jsx, Register.jsx, login.php, register.php |
| REQ-002 | Car catalog browsing | High | Implemented | Car.jsx, FeaturedCars.jsx |
| REQ-003 | Car details viewing | High | Implemented | CarDetails.jsx |
| REQ-004 | Booking system | High | Implemented | BookNow.jsx, book.php |
| REQ-005 | Contact form | Medium | Implemented | Contact.jsx, contact.php |
| REQ-006 | Responsive design | High | Implemented | All components with Tailwind CSS |
| REQ-007 | User authentication | High | Implemented | Backend PHP scripts |
| REQ-008 | Data persistence | High | Implemented | MySQL database |
| REQ-009 | Input validation | Medium | Implemented | Frontend and backend validation |
| REQ-010 | Error handling | Medium | Implemented | Try-catch blocks, error messages |

## 8. Appendices

### Appendix A: Code Snippets
#### React Component Example (Hero.jsx)
```jsx
import React from 'react'

const Hero = () => {
  return (
    <section className="bg-blue-600 text-white py-20">
      <div className="container mx-auto text-center">
        <h1 className="text-4xl font-bold mb-4">Welcome to Car Rental</h1>
        <p className="text-xl mb-8">Find your perfect ride today</p>
        <button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">
          Browse Cars
        </button>
      </div>
    </section>
  )
}

export default Hero
```

#### PHP Backend Example (login.php)
```php
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "car_rental";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die(json_encode(["success" => false, "message" => "Connection failed"]));
}

$data = json_decode(file_get_contents('php://input'), true);
$email = $data['email'];
$password = $data['password'];

$sql = "SELECT id, first_name, last_name FROM users WHERE email = ? AND password = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $email, $password);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    $user = $result->fetch_assoc();
    echo json_encode(["success" => true, "user" => $user]);
} else {
    echo json_encode(["success" => false, "message" => "Invalid credentials"]);
}

$stmt->close();
$conn->close();
?>
```

### Appendix B: Database Schema Diagram
```
car_rental (Database)
├── users
│   ├── id (PK)
│   ├── first_name
│   ├── last_name
│   ├── email (UNIQUE)
│   ├── password
│   └── created_at
├── cars
│   ├── id (PK)
│   ├── name
│   ├── year
│   ├── location
│   ├── seats
│   ├── transmission
│   ├── fuel
│   ├── price
│   ├── rating
│   ├── type
│   ├── status
│   ├── image
│   └── created_at
├── bookings
│   ├── id (PK)
│   ├── user_id (FK → users.id)
│   ├── car_id (FK → cars.id)
│   ├── start_date
│   ├── end_date
│   ├── total_price
│   ├── status
│   └── created_at
└── contacts
    ├── id (PK)
    ├── name
    ├── email
    ├── message
    └── created_at
```

### Appendix C: API Endpoints
- POST /backend/login.php - User authentication
- POST /backend/register.php - User registration
- POST /backend/book.php - Create booking
- POST /backend/contact.php - Submit contact form

### Appendix D: Technology Stack
- **Frontend**: React 18, React Router, Tailwind CSS, Vite
- **Backend**: PHP 7+, MySQL 5.7+
- **Development Tools**: ESLint, PostCSS, npm
- **Deployment**: Web server with PHP support (Apache/Nginx)

### Appendix E: File Structure
```
car rental/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   ├── audi.jpg
│   │   ├── bmw.jpg
│   │   ├── ford.jpg
│   │   ├── kia.jpg
│   │   ├── react.svg
│   │   ├── tesla.jpg
│   │   ├── toyota.jpg
│   │   └── video-img.jpg
│   ├── components/
│   │   ├── FeaturedCars.jsx
│   │   ├── Features.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── Home.jsx
│   │   ├── Layout.jsx
│   │   ├── Nav.jsx
│   │   └── VideoSection.jsx
│   ├── pages/
│   │   ├── About.jsx
│   │   ├── BookNow.jsx
│   │   ├── Car.jsx
│   │   ├── CarDetails.jsx
│   │   ├── Contact.jsx
│   │   ├── Login.jsx
│   │   └── Register.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── backend/
│   ├── book.php
│   ├── contact.php
│   ├── database.sql
│   ├── login.php
│   └── register.php
├── package.json
├── vite.config.js
└── README.md
```

This Software Design Document provides a comprehensive overview of the Car Rental Website system, detailing its architecture, components, data structures, and design decisions. The document serves as a blueprint for understanding and maintaining the application.