Blog Hub

A modern, full-featured blog platform built with HTML, CSS, JavaScript, PHP, and MySQL. Create, share, and interact with blog posts in a beautiful dark-themed interface.

✨ Features

• User Authentication: Secure registration, login, and logout with session management
• Blog Management: Create, read, update, and delete blog posts
• Rich Text Editor: WYSIWYG editor with Quill.js for formatting content
• Image Upload: Upload and embed images in blog posts
• Comments System: Add comments to blog posts
• Like System: Like and unlike posts with real-time counts
• User Profiles: Custom avatars and user information
• Modern UI: Beautiful dark theme with gradient accents and smooth animations
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Card Grid Layout: Posts displayed in an attractive grid format

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript (Vanilla)
• Backend: PHP 7.4+
• Database: MySQL/MariaDB
• Libraries:
  • Quill.js - Rich text editor
  • Marked.js - Markdown parsing
  • DOMPurify - XSS protection

📋 Prerequisites

• PHP 7.4 or higher
• MySQL/MariaDB 5.7 or higher
• Web server (Apache/Nginx) or PHP built-in server
• PHP extensions: mysqli, openssl, json, session

🚀 Installation

Step 1: Clone or Download

Download the project files to your local machine or web server.

Step 2: Database Setup

1. Start MySQL (via XAMPP, WAMP, MAMP, or standalone)

2. Create the Database:

   • Open phpMyAdmin (usually at http://localhost/phpmyadmin)
   • Or use MySQL command line:

     mysql -u root -p

3. Import the Schema:

   • In phpMyAdmin: Click "Import" → Select db.sql → Click "Go"
   • Or via command line:

     mysql -u root -p < db.sql

Step 3: Configure Database

Edit config.php and update the database credentials if needed:

$DB_HOST = 'localhost';    // Database host
$DB_NAME = 'blog_app';    // Database name
$DB_USER = 'root';        // MySQL username
$DB_PASS = '';            // MySQL password (empty for XAMPP default)
$DB_PORT = '3306';        // MySQL port

Step 4: Set Up Directories

Ensure these directories exist and are writable:

• assets/uploads/ - For blog post images
• assets/avatars/ - For user avatars

Step 5: Start the Server

Option A: Using the Batch File (Windows)

• Double-click start-server.bat
• Server will start at http://localhost:8000

Option B: Using Command Line

php -S localhost:8000 -t .

Option C: Using XAMPP/WAMP

• Place files in htdocs or www directory
• Access via http://localhost/Blog/index.html

Step 6: Access the Application

Open your browser and navigate to:

http://localhost:8000/index.html

📁 Project Structure

Blog/
├── api/                    # PHP API endpoints
│   ├── auth_login.php      # User login
│   ├── auth_register.php   # User registration
│   ├── auth_logout.php     # User logout
│   ├── me.php              # Get current user
│   ├── blog_create.php     # Create blog post
│   ├── blog_update.php     # Update blog post
│   ├── blog_delete.php     # Delete blog post
│   ├── blog_list.php       # List all posts
│   ├── blog_get.php        # Get single post
│   ├── comment_add.php     # Add comment
│   ├── comment_list.php    # List comments
│   ├── like_toggle.php     # Toggle like
│   ├── like_count.php      # Get like count
│   ├── avatar_upload.php   # Upload avatar
│   └── upload_image.php    # Upload blog images
├── assets/
│   ├── styles.css          # Main stylesheet
│   ├── app.js              # Frontend JavaScript
│   ├── favicon.svg         # Site favicon
│   ├── uploads/            # Blog post images
│   └── avatars/            # User avatars
├── index.html              # Home page (blog list)
├── blog.html               # Single post view
├── editor.html             # Post editor
├── login.html              # Login page
├── register.html            # Registration page
├── config.php              # Database configuration
├── db.sql                  # Database schema
├── start-server.bat        # Windows server starter
└── README.md               # This file

🎯 Usage

First Time Setup

1. Register an Account:

   • Click "Register" in the navigation
   • Fill in username, email, and password
   • Click "Create Account"

2. Login:

   • Use your email and password to login

3. Create Your First Post:

   • Click "New Post" in the navigation
   • Enter a title
   • Write your content using the rich text editor
   • Upload images if needed
   • Click "Save" to publish

Features Guide

• Creating Posts: Use the rich text editor with formatting options, headers, lists, links, and code blocks
• Uploading Images: Click "Upload Image(s)" button, select images, then insert them into your post
• Editing Posts: Click "Edit" on your own posts
• Deleting Posts: Click "Delete" on your own posts
• Liking Posts: Click the heart icon to like/unlike posts
• Commenting: Scroll to the comments section and add your thoughts
• Changing Avatar: Click on your avatar in the navigation to upload a new one
• Logout: Click your username → "Logout" from the dropdown menu

🔧 Configuration

Database Settings

Edit config.php to configure your database connection.

Error Logging

Errors are logged to php-errors.log in the project root. To see errors on screen during development, edit config.php:

ini_set('display_errors', 1); // Change from 0 to 1

File Upload Limits

If you need to upload larger images, edit php.ini:

upload_max_filesize = 10M
post_max_size = 10M

🐛 Troubleshooting

Database Connection Failed

• Verify MySQL is running
• Check database credentials in config.php
• Ensure blog_app database exists (import db.sql)

500 Internal Server Error

• Check php-errors.log for detailed errors
• Verify PHP extensions are enabled (mysqli, openssl)
• Check file permissions on upload directories

Images Not Uploading

• Ensure assets/uploads/ directory exists and is writable
• Check PHP upload limits in php.ini
• Verify directory permissions (755 or 777)

Port Already in Use

• Change port in start-server.bat:

  php -S localhost:8080 -t .

• Access at http://localhost:8080/index.html

PHP Not Found

• Install XAMPP, WAMP, or MAMP
• Or add PHP to your system PATH
• Or use full path: C:\xampp\php\php.exe -S localhost:8000 -t .

🔒 Security Notes

• Passwords are hashed using PHP's password_hash() function
• All user inputs are sanitized and validated
• SQL injection protection via prepared statements
• XSS protection with DOMPurify
• Session-based authentication
• CSRF protection recommended for production
• Use HTTPS in production environments

📝 API Endpoints

Authentication

• POST /api/auth_register.php - Register new user
• POST /api/auth_login.php - Login user
• POST /api/auth_logout.php - Logout user
• GET /api/me.php - Get current user info

Blog Posts

• GET /api/blog_list.php - List all posts
• GET /api/blog_get.php?id={id} - Get single post
• POST /api/blog_create.php - Create post
• POST /api/blog_update.php - Update post
• POST /api/blog_delete.php - Delete post

Comments

• GET /api/comment_list.php?post_id={id} - List comments
• POST /api/comment_add.php - Add comment

Likes

• GET /api/like_count.php?post_id={id} - Get like count
• POST /api/like_toggle.php - Toggle like

Uploads

• POST /api/avatar_upload.php - Upload user avatar
• POST /api/upload_image.php - Upload blog image

🌐 Deployment

Free Hosting (InfinityFree, 000WebHost, etc.)

1. Create a PHP hosting account and MySQL database
2. Upload all files via FTP or File Manager
3. Update config.php with hosting provider's database credentials
4. Import db.sql via phpMyAdmin
5. Set proper file permissions (755 for directories, 644 for files)
6. Access your site at the provided domain

Production Checklist

• Change display_errors to 0 in config.php
• Use HTTPS (SSL certificate)
• Update database credentials
• Set secure session cookie parameters
• Configure proper file permissions
• Set up regular database backups
• Enable error logging
• Review and test all functionality

📄 License

This project is open source and available for personal and commercial use.

🤝 Contributing

Feel free to fork, modify, and use this project for your own needs. Contributions and improvements are welcome!

📧 Support

For issues or questions:

1. Check the troubleshooting section
2. Review error logs (php-errors.log)
3. Verify database and PHP configuration
4. Test with the diagnostic script: http://localhost:8000/test-connection.php

---

Blog Hub - Share your thoughts, connect with readers, and build your community! 🚀