🚔 Ghana Police Directory

A lightweight, modern PHP-based web application for finding police station phone numbers across Ghana. Features a sleek design with light/dark themes, responsive layout, and easy-to-use search functionality.

✨ Features

Core Functionality

• 🔍 Fast Search: Search police stations by town or region name
• 📱 Mobile-Friendly: Fully responsive design for all devices
• 🌓 Theme Toggle: Beautiful light and dark modes with smooth transitions
• 📞 Click-to-Call: Direct calling on mobile devices
• 📋 Copy Numbers: One-click copy to clipboard functionality
• ⚡ Real-time Search: Debounced search with instant results

Admin Panel

• 🔐 Secure Login: Password-protected admin access
• ➕ Add Stations: Easy form to add new police stations
• ✏️ Edit Stations: Update existing station information
• 🗑️ Delete Stations: Remove outdated entries
• 📊 Statistics Dashboard: View total stations, regions, and towns

Technical Features

• Raw PHP (no frameworks) for maximum performance
• MySQL database with indexed searches
• Clean, modern UI with CSS animations
• Vanilla JavaScript (no dependencies)
• Secure input sanitization
• Session-based authentication

🚀 Quick Start

Prerequisites

• XAMPP (or any LAMP/WAMP stack)
• PHP 7.4+
• MySQL 5.7+
• Modern web browser

Installation

1. Clone or Download this project to your XAMPP htdocs folder:

   c:\xampp\htdocs\policedirectory
   

2. Start XAMPP Services:

   • Start Apache
   • Start MySQL

3. Create Database:

   • Open phpMyAdmin: http://localhost/phpmyadmin
   • Click "Import" tab
   • Select database.sql file from the project root
   • Click "Go" to import

   OR run the SQL manually:

   • Create a new database named police_directory
   • Import the database.sql file

4. Configure Database (if needed):

   • Open config.php
   • Update database credentials if different from defaults:

     define('DB_HOST', 'localhost');
     define('DB_USER', 'root');
     define('DB_PASS', '');
     define('DB_NAME', 'police_directory');

5. Access the Application:

   • Public Site: http://localhost/policedirectory/
   • Admin Panel: http://localhost/policedirectory/admin/login.php

Default Admin Credentials

Username: admin
Password: admin123

⚠️ IMPORTANT: Change these credentials after first login!

📁 Project Structure

policedirectory/
├── admin/                      # Admin panel files
│   ├── login.php              # Admin login page
│   ├── dashboard.php          # Admin dashboard
│   ├── add_station.php        # Add new station
│   ├── edit_station.php       # Edit station
│   └── logout.php             # Logout handler
├── api/                       # API endpoints
│   └── search.php             # Search API
├── assets/                    # Static assets
│   ├── css/
│   │   ├── style.css          # Main styles
│   │   └── admin.css          # Admin styles
│   └── js/
│       └── app.js             # Main JavaScript
├── config.php                 # Database configuration
├── database.sql               # Database schema & sample data
├── index.php                  # Main search page
└── README.md                  # This file

🎨 Features in Detail

Search Functionality

• Type-ahead search with 300ms debounce
• Searches both town and region names
• Minimum 2 characters required
• Results display instantly
• Quick search buttons for popular locations

Theme System

• Automatic theme persistence using localStorage
• Smooth transitions between themes
• CSS variables for easy customization
• Optimized for readability in both modes

Admin Panel

• Clean, modern dashboard
• Statistics cards showing key metrics
• Full CRUD operations for police stations
• Responsive data table
• Form validation
• Success/error notifications

Mobile Experience

• Touch-friendly interface
• Click-to-call functionality
• Optimized button sizes
• Responsive grid layouts
• Smooth animations

🔧 Customization

Adding Regions

Edit admin/add_station.php and admin/edit_station.php to add more regions to the dropdown:

<option value="Your Region">Your Region</option>

Changing Colors

Edit CSS variables in assets/css/style.css:

:root {
    --accent-primary: #3b82f6;  /* Change primary color */
    --accent-secondary: #06b6d4; /* Change secondary color */
}

Database Configuration

Update config.php with your database settings:

define('DB_HOST', 'your_host');
define('DB_USER', 'your_username');
define('DB_PASS', 'your_password');
define('DB_NAME', 'your_database');

🔒 Security Features

• SQL Injection Protection: Prepared statements for all queries
• XSS Prevention: HTML entity encoding for all output
• Session Security: HTTP-only cookies, secure session handling
• Password Hashing: bcrypt for admin passwords
• Input Sanitization: All user inputs are sanitized
• CSRF Protection: Session-based authentication

📊 Database Schema

stations Table

Column	Type	Description
id	INT	Primary key
station_name	VARCHAR(255)	Name of police station
town	VARCHAR(100)	Town name
region	VARCHAR(100)	Region name
phone_number	VARCHAR(50)	Contact number
created_at	TIMESTAMP	Creation timestamp
updated_at	TIMESTAMP	Last update timestamp

admin_users Table

Column	Type	Description
id	INT	Primary key
username	VARCHAR(50)	Admin username
password_hash	VARCHAR(255)	Hashed password
created_at	TIMESTAMP	Creation timestamp

🌐 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🚀 Performance

• Fast Search: < 1 second response time
• Indexed Database: Optimized queries with indexes
• Minimal Dependencies: No external libraries
• Lightweight: Total size < 500KB
• Cached Theme: Instant theme switching

📝 Usage Tips

For Users

1. Type town or region name in the search box
2. Results appear automatically as you type
3. Click "Call" to dial on mobile devices
4. Click "Copy" to copy number to clipboard
5. Use quick search buttons for popular locations
6. Toggle theme with button in top-right corner

For Administrators

1. Login to admin panel
2. View statistics on dashboard
3. Add new stations with the "Add New Station" button
4. Edit stations by clicking "Edit" in the table
5. Delete stations with confirmation prompt
6. Always logout when finished

🐛 Troubleshooting

Database Connection Error

• Check if MySQL is running in XAMPP
• Verify database credentials in config.php
• Ensure police_directory database exists

Search Not Working

• Check browser console for JavaScript errors
• Verify api/search.php is accessible
• Check database has data in stations table

Admin Login Fails

• Verify default credentials: admin / admin123
• Check admin_users table exists
• Clear browser cache and cookies

Theme Not Saving

• Enable localStorage in browser settings
• Check browser console for errors
• Try different browser

🔄 Future Enhancements

• Auto-suggest dropdown for search
• Map integration showing station locations
• Multi-language support (English, Twi, Ga, etc.)
• Export stations to CSV/PDF
• Advanced filtering (by region, distance)
• User feedback/rating system
• SMS integration for emergency contacts
• API for third-party integrations

📄 License

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

👨‍💻 Development

Requirements

• PHP 7.4 or higher
• MySQL 5.7 or higher
• Apache web server

Local Development

1. Install XAMPP
2. Clone repository to htdocs
3. Import database
4. Start Apache and MySQL
5. Access via localhost

🤝 Contributing

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

📞 Support

For issues, questions, or suggestions:

• Open an issue on GitHub
• Contact the development team

🙏 Acknowledgments

• Icons: Lucide Icons (inline SVG)
• Fonts: System fonts for best performance
• Inspiration: Modern web design principles

---

Built with ❤️ for Ghana 🇬🇭

Version: 1.0.0
Last Updated: 2025
Status: Production Ready ✅