🐘 The Regal Elephant

A full-stack restaurant web ordering platform with real-time order tracking, staff management portal, and seamless customer experience. Built with PHP, MySQL, and vanilla JavaScript for optimal performance.

---

🎯 What Is This?

The Regal Elephant is a complete restaurant ordering system designed for dine-in and takeout operations. Customers can browse the menu, place orders, and track their status in real-time using Server-Sent Events (SSE). The integrated staff portal allows restaurant employees to manage incoming orders, update statuses, and configure settings—all from a secure dashboard.

Why This Exists:

• Streamline restaurant operations without expensive third-party platforms
• Provide customers with instant order feedback and status updates
• Enable staff to efficiently manage orders from a centralized interface
• Maintain full control over customer data and ordering flow

---

✨ Features

Customer Portal

• 📋 Dynamic Menu Display - Browse organized categories (Starters, Main Course, Breads, Desserts & Beverages)
• 🛒 Shopping Cart - Add/remove items with quantity management
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
• 🔄 Real-Time Order Tracking - Live status updates via SSE
• 📜 Order History - View active orders and past purchases
• 💰 Tip Support - Optional tipping functionality

Staff Portal

• 🔐 Secure Authentication - Password-protected admin access
• 📊 Order Management - View and update order statuses
• 🔔 Real-Time Notifications - Instant alerts for new orders
• ⚙️ Settings Panel - Configure restaurant operations
• 📈 Order Details - Full order information with customer details

Technical Highlights

• Server-Sent Events for real-time updates without WebSocket complexity
• RESTful API architecture for order processing
• Database caching for optimized performance
• Modular PHP structure with clean separation of concerns

---

🛠️ Tech Stack

Category	Technology
Backend	PHP 7.4+
Database	MySQL 8.0+
Frontend	Vanilla JavaScript (ES6 Modules)
CSS Framework	Bootstrap 5.3.5
Icons	Bootstrap Icons
Fonts	Google Fonts (Fredoka, League Gothic, Marko One)
Real-Time	Server-Sent Events (SSE)

---

🚀 Quick Start

Prerequisites

# Required
PHP >= 7.4
MySQL >= 8.0
Apache/Nginx web server

Installation

1. Clone the repository

git clone https://github.com/AkshayKappala/regal_elephant_web.git
cd regal_elephant_web

2. Configure the database

Create a MySQL database and import your schema:

mysql -u root -p
CREATE DATABASE regal_elephant;

3. Update database configuration

Edit config/database.php with your credentials:

<?php
class Database {
    private static $connection = null;
    
    public static function getConnection() {
        if (self::$connection === null) {
            $host = 'localhost';
            $username = 'your_username';
            $password = 'your_password';
            $database = 'regal_elephant';
            
            self:: $connection = new mysqli($host, $username, $password, $database);
            
            if (self::$connection->connect_error) {
                die("Connection failed: " . self::$connection->connect_error);
            }
        }
        return self::$connection;
    }
}

4. Configure API settings

Update config/api_config.php with your staff API URL and key:

<?php
define('STAFF_API_URL', 'https://your-staff-api.com/');
define('API_KEY', 'your-secure-api-key-here');

5. Set up web server

For Apache:

# Point your document root to the project directory
# Ensure mod_rewrite is enabled
sudo a2enmod rewrite
sudo systemctl restart apache2

For PHP Built-in Server (Development Only):

php -S localhost:8000

6. Access the application

• Customer Portal: http://localhost:8000/
• Staff Portal: http://localhost:8000/staff/
  • Default credentials: admin / elephant2025

---

📁 Project Structure

regal_elephant_web/
├── api/                          # API endpoints
│   ├── place_order.php          # Order placement (legacy proxy)
│   ├── get_order_details.php   # Fetch order information
│   ├── get_item_ids.php         # Retrieve item IDs by name/price
│   ├── order_events.php         # SSE endpoint for real-time updates
│   └── order_status_events.php  # Order status change events
├── assets/
│   ├── css/                     # Stylesheets
│   ├── src/                     # JavaScript modules
│   │   ├── main.js             # Main application entry point
│   │   ├── cart.js             # Shopping cart logic
│   │   └── events.js           # Event handling
│   └── js/
│       └── staff. js            # Staff portal JavaScript
├── config/
│   ├── database.php            # Database connection
│   ├── api_config.php          # API configuration
│   └── get_api_config.php      # API config getter
├── partials/                    # Reusable HTML components
├── staff/                       # Staff portal
│   ├── index.php               # Staff dashboard
│   ├── login.php               # Staff authentication
│   ├── pages/                  # Staff portal pages
│   └── assets/                 # Staff-specific assets
├── views/                       # Customer-facing pages
│   ├── home. php                # Landing page
│   ├── explore.php             # Category exploration
│   ├── menu. php                # Full menu display
│   ├── cart.php                # Shopping cart
│   └── orders.php              # Order tracking
├── temp/events/                 # SSE event cache (auto-created)
├── index.php                    # Application entry point
└── 404.html                     # Error page

---

🎨 Customization Guide

Change Restaurant Name

Update the title in index.php:

<title>Your Restaurant Name</title>

And in views/home.php:

<h1 class="display-3 text-center title-home">YOUR RESTAURANT NAME</h1>

Modify Menu Categories

Edit the category groups in views/menu.php and views/explore.php:

$categoryGroups = [
    "Starters" => ["Veg Starter", "Non-Veg Starter"],
    "Main Course" => ["Veg Entree", "Non-Veg Entree"],
    // Add or remove categories as needed
];

Update Staff Credentials

Change the default login in staff/index.php:

$validUsername = 'your_username';
$validPassword = 'your_secure_password';

⚠️ Security Note: For production, implement proper password hashing and database-based authentication.

Customize Styling

Main stylesheet: assets/css/style.css

Example - Change primary color:

:root {
    --primary-color: #a04b25; /* Update to your brand color */
    --accent-color: #eadab0;
}

---

🌐 Deployment Instructions

Production Checklist

• Update database credentials in config/database.php
• Set strong staff portal password
• Configure SSL/TLS certificate (HTTPS)
• Set proper file permissions: chmod 644 *.php
• Create temp/events/ directory: mkdir -p temp/events/orders
• Set write permissions: chmod 755 temp/events/
• Disable error display: ini_set('display_errors', 0);
• Enable error logging: ini_set('log_errors', 1);
• Configure API keys in config/api_config.php
• Test SSE functionality across your network

Apache Configuration

Add to your .htaccess or VirtualHost:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    
    # Prevent directory browsing
    Options -Indexes
    
    # Protect config files
    <Files "database.php">
        Require all denied
    </Files>
    <Files "api_config.php">
        Require all denied
    </Files>
</IfModule>

# Enable SSE
<IfModule mod_headers.c>
    Header set X-Accel-Buffering "no"
    Header set Cache-Control "no-cache"
</IfModule>

Environment Variables (Optional)

For enhanced security, use environment variables for sensitive data:

// In config/database.php
$host = getenv('DB_HOST') ?: 'localhost';
$username = getenv('DB_USER');
$password = getenv('DB_PASS');
$database = getenv('DB_NAME');

---

🔧 Troubleshooting

Orders Not Updating in Real-Time

Problem: Order status changes don't reflect immediately.

Solution:

# Check temp/events directory exists and is writable
mkdir -p temp/events/orders
chmod 755 temp/events
chmod 755 temp/events/orders

# Verify SSE endpoint is accessible
curl http://localhost:8000/api/order_events.php

Database Connection Errors

Problem: Connection failed: Access denied

Solution:

• Verify credentials in config/database.php
• Ensure MySQL is running: sudo systemctl status mysql
• Grant privileges: GRANT ALL PRIVILEGES ON regal_elephant.* TO 'user'@'localhost';

Staff Portal Not Loading

Problem: Blank page or 500 error.

Solution:

# Check PHP error logs
tail -f /var/log/apache2/error.log

# Verify session directory is writable
ls -la /var/lib/php/sessions/

Cart Items Not Persisting

Problem: Cart empties on page refresh.

Solution:

• Check browser localStorage: Open DevTools → Application → Local Storage
• Ensure JavaScript is enabled
• Clear cache and reload

SSE Connection Drops

Problem: Real-time updates stop after a few minutes.

Solution:

// Add to api/order_events.php (already implemented)
set_time_limit(0);
ini_set('max_execution_time', 0);

// For Apache, add to .htaccess
<IfModule mod_proxy.c>
    ProxyTimeout 600
</IfModule>

---

📧 Contact & Support

Developer: Akshay Kappala
GitHub: @AkshayKappala
Repository: regal_elephant_web

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

---

📄 License

This project is open source and available under the MIT License.

---

Built with ❤️ for restaurant owners who value independence

⭐ Star this repo | 🐛 Report Bug | 💡 Request Feature