Skip to content

README.md

Latest commit

 

History

History
246 lines (190 loc) · 8.16 KB

README.md

File metadata and controls

246 lines (190 loc) · 8.16 KB

Online Event Registration System

A comprehensive web-based event registration system for university students with complete frontend, backend, and database integration.

📋 Features

  • Student Registration: Students can register for multiple university events
  • Form Validation: Client-side and server-side validation for data integrity
  • Responsive Design: Mobile-friendly interface that works on all devices
  • Database Integration: MySQL database for storing registration details
  • Duplicate Prevention: System prevents duplicate registrations
  • Confirmation Messages: Success/error messages after form submission

🗂️ Project Structure

event-registration-system/
│
├── index.html                    # Main registration form (HTML)
├── styles.css                    # Stylesheet for form design
├── validation.js                 # Client-side JavaScript validation
├── process_registration.php      # Server-side form processing
├── config.php                    # Database configuration
├── database_schema.sql           # Database schema and setup
└── README.md                     # Project documentation

🛠️ Technologies Used

  • Frontend: HTML5, CSS3, JavaScript
  • Backend: PHP
  • Database: MySQL
  • Server: Apache (XAMPP/WAMP/LAMP)

📦 Installation & Setup

Prerequisites

  • XAMPP/WAMP/LAMP installed on your system
  • Web browser (Chrome, Firefox, Edge, etc.)
  • Text editor (VS Code, Sublime Text, etc.)

Step 1: Clone/Download the Project

Download all project files to your local machine.

Step 2: Setup Database

  1. Start XAMPP/WAMP and ensure Apache and MySQL are running
  2. Open phpMyAdmin (http://localhost/phpmyadmin)
  3. Create a new database named event_registration_system
  4. Import the database_schema.sql file:
    • Click on the database name
    • Go to "Import" tab
    • Choose the database_schema.sql file
    • Click "Go" to execute

Step 3: Configure Database Connection

  1. Open config.php
  2. Update the database credentials if needed: 
    define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');  // Your MySQL password
define('DB_NAME', 'event_registration_system');

Step 4: Deploy Files

  1. Copy all project files to your web server directory:
    • For XAMPP: C:\xampp\htdocs\event-registration\
    • For WAMP: C:\wamp64\www\event-registration\
    • For LAMP: /var/www/html/event-registration/

Step 5: Run the Application

  1. Open your web browser
  2. Navigate to: http://localhost/event-registration/index.html
  3. Fill out the registration form and submit

📝 Answer to Questions

Question 1: HTML Form Design

File: index.html

Features Implemented:

  • ✅ All required fields: Student Name, Roll Number, Email ID, Department, Event Name
  • ✅ Semantic HTML5 tags (<header>, <main>, <section>, <footer>)
  • ✅ Appropriate form elements (text inputs, email input, select dropdowns)
  • ✅ Proper labels with for attributes
  • ✅ Required field indicators
  • ✅ Placeholder text for better UX
  • ✅ Accessible form structure

Question 2: CSS Styling

File: styles.css

Features Implemented:

  • ✅ Centered Form: Flexbox used to center form on the page
  • ✅ Different Styles: Distinct styling for labels and input fields
    • Labels: Bold, proper spacing, required field indicators
    • Input fields: Rounded corners, padding, focus states, hover effects
  • ✅ Submit Button Hover Effects:
    • Gradient background
    • Smooth transitions
    • Shadow effects on hover
    • Slight upward movement animation
  • ✅ Responsive Design:
    • Media queries for tablets (768px) and mobile (480px)
    • Flexible layouts and font sizes
    • Touch-friendly input sizes

Question 3: JavaScript Validation

File: validation.js

a) Validation Features:

  • ✅ All fields are mandatory
  • ✅ Email format validation using regex pattern
  • ✅ Real-time error messages without page reload
  • ✅ Field-specific validation rules:
    • Student Name: Letters and spaces only, minimum 3 characters
    • Roll Number: Minimum 3 characters
    • Email: Valid email format (user@domain.com)
    • Department: Selection required
    • Event Name: Selection required
  • ✅ Visual feedback (red borders for errors)
  • ✅ Error messages clear on input

b) How Client-Side Validation Improves Performance and Usability:

Performance Benefits:

  1. Instant Validation: No server round-trip needed, validation happens immediately
  2. Reduced Server Load: Invalid data is caught before submission, reducing unnecessary server requests
  3. Lower Bandwidth Usage: Prevents sending invalid data over the network
  4. Faster Response: No waiting for server processing and response

Usability Benefits:

  1. Immediate Feedback: Users see errors instantly as they fill the form
  2. No Page Reload: Errors display without refreshing the page, maintaining form state
  3. Clear Guidance: Specific error messages help users correct mistakes immediately
  4. Better UX: Smooth, responsive interface improves user satisfaction
  5. Prevents Frustration: Users don't waste time submitting invalid data only to get errors later

Question 4: PHP Script

Files: process_registration.php, config.php

Features Implemented:

  • ✅ POST Method: Form data retrieved using $_POST superglobal
  • ✅ Server-Side Validation:
    • All fields checked for empty values
    • Email format validation using filter_var()
    • Input sanitization to prevent XSS attacks
    • Department and event validation against allowed values
    • Duplicate registration check
  • ✅ Database Storage:
    • Prepared statements to prevent SQL injection
    • Secure parameter binding
    • Proper error handling
    • Registration details stored in registrations table
  • ✅ Confirmation Message:
    • Success page with all registration details
    • Unique registration ID generated
    • Professional styling
    • Option to register for another event

Security Features:

  • Input sanitization (trim, stripslashes, htmlspecialchars)
  • Prepared statements for SQL queries
  • Validation against whitelist of allowed values
  • Error handling with try-catch blocks

🔒 Security Considerations

  • ✅ SQL Injection prevention using prepared statements
  • ✅ XSS prevention through input sanitization
  • ✅ CSRF protection (can be enhanced with tokens)
  • ✅ Server-side validation (never trust client-side only)
  • ✅ Duplicate registration prevention

📊 Database Schema

Main Table: registrations

Column Type Description
id INT (Primary Key) Auto-increment registration ID
student_name VARCHAR(100) Student's full name
roll_number VARCHAR(50) Student's roll number
email VARCHAR(100) Student's email address
department VARCHAR(100) Student's department
event_name VARCHAR(100) Name of the event
registration_date DATETIME Timestamp of registration

Additional Tables:

  • events: Stores event information
  • departments: Stores department information

🎯 Admin Features

Admins can:

  • View all registrations in the database
  • Query registrations by event, department, or student
  • Track registration statistics
  • Manage event capacity

Sample Admin Queries (included in database_schema.sql):

-- View all registrations
SELECT * FROM registrations ORDER BY registration_date DESC;

-- Count registrations per event
SELECT event_name, COUNT(*) as total 
FROM registrations 
GROUP BY event_name;

-- Search by roll number
SELECT * FROM registrations WHERE roll_number = 'ROLL123';

🚀 Future Enhancements

  • Admin dashboard for managing registrations
  • Email notifications to students
  • QR code generation for registrations
  • Payment gateway integration
  • Event capacity management
  • Export registrations to Excel/PDF
  • Student login system

📞 Support

For any issues or questions, please contact the system administrator.

📄 License

This project is created for educational purposes.

Developed By: University IT Department
Last Updated: December 2025