CampusCare

School Clinic Patient Information Record System

A PHP/MySQL web application for managing school clinic operations, student health records, clinic visits, and public health information.

Project Status

Status: Finished & Defended — Web Development 2 Final Project

Last Updated: April 15, 2026

Completed Modules

Module	Status	Notes
Public Landing Page	Complete	Announcements, FAQs, first-aid guidelines, emergency contacts, clinic hours
Authentication & Security	Complete	Login, password reset (security question + contact admin flow), secure password policy, session management
Admin Dashboard	Complete	Statistics overview with year-level distribution charts
User Management	Complete	Full CRUD with stepper form, password validation, role-based assignment
Program Management	Complete	CRUD with input validation (special character prevention)
Archive Management	Complete	Restore & permanent delete for students, users, and programs
Admin Reports	Complete	Chart.js visualizations + PDF export (Dompdf)
Access Logs	Complete	Full audit trail of user actions
Admin Request Handling	Complete	Password reset requests with one-click approval
Nurse Dashboard	Complete	Visit statistics and trends
Student Profiles	Complete	Health records with categorized dropdowns (allergens, conditions, immunizations)
Visit Logging	Complete	Vitals, complaint categorization, clinical assessment (required), treatment notes
Visit History	Complete	Searchable visit records with full-name search support
Nurse Reports	Complete	Chart.js visualizations + PDF export
Public Content Management	Complete	Announcements, FAQs, first-aid, emergency contacts, clinic hours (Quill editor)
Class Rep Dashboard	Complete	Section-scoped student overview
Class Rep Student Management	Complete	CRUD scoped to assigned program/year/section, CSV export
Class Rep Requests	Complete	Replacement and student deletion requests

Live Demo

The application is hosted online at:

http://campuscare.page.gd/

How to Access

Open your browser and navigate to http://campuscare.page.gd/
Use the default login credentials below to sign in
If the page does not load, follow the troubleshooting steps below

Troubleshooting: Cannot Access the Site

The live demo is hosted on InfinityFree, a free hosting provider. Some users may experience issues accessing the site due to DNS filtering by their Internet Service Provider (ISP).

Why does this happen?

InfinityFree uses shared IP addresses that host many websites. Some ISPs — particularly in the Philippines and other regions — block or filter DNS requests to these shared IPs as part of anti-phishing or content-filtering policies. This means your ISP's DNS resolver may refuse to resolve campuscare.page.gd, even though the site is legitimate and functional.

How to fix it:

Option 1: Use a VPN — Turn on any VPN service (e.g., Proton VPN, Windscribe, or a browser-based VPN). This bypasses your ISP's DNS filtering entirely.
Option 2: Use mobile data — Switch from Wi-Fi to your phone's mobile data connection. Mobile carriers often use different DNS resolvers that do not block InfinityFree domains.
Option 3: Change your DNS server — Manually set your device's DNS to a public resolver like Google DNS (8.8.8.8, 8.8.4.4) or Cloudflare DNS (1.1.1.1, 1.0.0.1) to bypass your ISP's filtered DNS.

Features

Role	Capabilities
Admin	Dashboard with year-level charts, user management (CRUD with stepper form), program management, access logs, archive (restore & delete), password reset request approval, reports (Chart.js + PDF export)
Nurse/Staff	Dashboard, student search & profile (allergies, conditions, medications, immunizations, emergency contacts — all with categorized dropdowns), visit logging (required assessment), visit history, public content management (announcements, FAQs, first-aid, emergency contacts, clinic hours), reports (Chart.js + PDF export)
Class Rep	Dashboard, student CRUD (scoped to assigned program/year/section), CSV export, replacement & deletion requests
Public	Landing page with announcements, FAQs, first-aid guidelines (with PDF export), emergency contacts, clinic hours

Security

PDO prepared statements (SQL injection prevention)
CSRF token protection on all forms
Bcrypt password hashing (password_hash)
Secure password policy (minimum length, uppercase, lowercase, number, special character)
Password reuse prevention (cannot reuse current password)
Session management with timeout & secure cookies
Role-based access control middleware
Output encoding (XSS prevention via htmlspecialchars)
Input validation (server-side & client-side with real-time keystroke filtering)
Access logging (audit trail)
Directory access control (.htaccess deny on config/includes)

Requirements

PHP 7.4+ (with PDO MySQL and GD extensions enabled)
MySQL 5.7+ or MariaDB 10.3+
Apache (with mod_rewrite) or any PHP-compatible web server
Node.js/npm (for frontend dependencies)
Composer (for PHP backend dependencies) — Download here
XAMPP/WAMP/MAMP recommended for local development

Installation

1. Clone / Copy Project

Place the CampusCare folder in your web server's document root (e.g., htdocs for XAMPP).

2. Install Frontend Dependencies

cd CampusCare
npm install

This installs all packages listed in package.json (Bootstrap, SweetAlert2, Chart.js, Quill, etc.) into the node_modules/ folder.

3. Install Backend Dependencies (Composer)

Option A — If Composer is installed globally:

composer install

Option B — If Composer is NOT installed globally:

Download and run Composer directly:

C:\xampp\php\php.exe -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
C:\xampp\php\php.exe composer-setup.php
C:\xampp\php\php.exe composer.phar install
del composer-setup.php

This installs the PHP packages listed in composer.json (Dompdf for PDF export, PHPMailer for SMTP email) into the vendor/ folder.

Tip: To install Composer globally on Windows, download the Composer-Setup.exe installer.

4. Configure Email (PHPMailer / Gmail SMTP)

CampusCare uses PHPMailer to send OTP emails for the password-reset flow. PHPMailer is already included in composer.json and installed by the composer install command above — no separate download is needed.

4a. Create a Gmail App Password

The mailer is pre-configured for Gmail SMTP (smtp.gmail.com, port 587, TLS). To use it:

Sign in to the Gmail account you want to send from.
Go to Google Account → Security → 2-Step Verification and ensure it is enabled.
Go to Google Account → Security → App passwords (or visit https://myaccount.google.com/apppasswords).
Create a new App Password — name it anything (e.g., CampusCare).
Copy the 16-character password shown (it looks like xxxx xxxx xxxx xxxx).

Note: The App passwords option is only visible when 2-Step Verification is enabled on the account.

4b. Create `config/mail.php`

Copy the template and fill in your credentials:

copy config\mail.example.php config\mail.php

Then open config/mail.php and update the values:

// SMTP server settings
define('MAIL_HOST',       'smtp.gmail.com'); // SMTP host
define('MAIL_PORT',       587);              // 587 = TLS
define('MAIL_ENCRYPTION', 'tls');            // 'tls' or 'ssl'

// SMTP authentication — replace with your Gmail address & App Password
define('MAIL_USERNAME', 'your-email@gmail.com');
define('MAIL_PASSWORD', 'xxxx xxxx xxxx xxxx'); // ← 16-char App Password

// Sender identity shown to recipients
define('MAIL_FROM_ADDRESS', 'your-email@gmail.com');
define('MAIL_FROM_NAME',    'CampusCare');

// OTP behaviour
define('OTP_LENGTH',          6);  // digits
define('OTP_EXPIRY_MINUTES', 10);  // minutes until the OTP expires
define('OTP_MAX_ATTEMPTS',    5);  // failed attempts before lockout
define('OTP_RESEND_COOLDOWN', 30); // seconds before a resend is allowed

4c. Run the OTP table migration

The password-reset OTP feature requires one extra table. Run the migration file in phpMyAdmin or via MySQL CLI:

USE campuscare;
SOURCE database/migrations/add_password_reset_otps.sql;

Alternatively, open the file and paste its contents directly into a phpMyAdmin SQL tab.

Tip: If you are using the bundled database/real-data/campuscare.sql schema, the password_reset_otps table may already be included. Check before running the migration to avoid duplicate-table errors.

4d. Verify the setup

Start XAMPP (Apache + MySQL).
Open http://localhost/CampusCare/login.php.
Click Forgot Password → Reset via Email OTP.
Enter a valid username that has an email address on record.
Check the inbox — an OTP email should arrive within a few seconds.

If no email arrives, check Apache error logs (C:\xampp\apache\logs\error.log) for PHPMailer error messages and verify your App Password and Gmail 2-Step Verification settings.

5. Create the Database

Open phpMyAdmin or MySQL CLI
Create a database named campuscare (for local development):
```
CREATE DATABASE campuscare;
```

Import/Paste the schema:

USE campuscare;
SOURCE database/real-data/campuscare.sql;

Import/Paste the seed data (for ready-to-go data):
```
SOURCE database/real-data/seed_data.sql;
```

6. Configure the credentials (ignore for localhost)

Copy the template:

copy config\config.example.php config\config.php

Then edit config/config.php to match your database credentials:

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

Also update BASE_URL if not using the default:

define('BASE_URL', 'http://localhost/CampusCare');

7. Enable PHP GD Extension (ignore as it is enabled by default)

The GD extension is required for PDF export with images. In your php.ini, make sure this line is uncommented:

extension=gd

For XAMPP, the php.ini file is at C:\xampp\php\php.ini. After editing, restart Apache.

8. Start the Server

Start Apache & MySQL in XAMPP, then visit:

http://localhost/CampusCare

Default Login Credentials

Role	Username	Password	Security Question	Answer
Admin	`admin`	`Admin@123`	What city were you born in?	`manila`
Nurse	`nurse_garcia`	`Nurse@123`	What is the name of your first pet?	`brownie`
Nurse	`nurse_santos`	`Nurse@123`	What is your favorite food?	`adobo`
Nurse	`nurse_reyes`	`Nurse@123`	What city were you born in?	`quezon city`
Nurse	`nurse_cruz`	`Nurse@123`	What is the name of your best friend?	`carlo`
Nurse	`nurse_mendoza`	`Nurse@123`	What is your favorite color?	`blue`
Nurse	`nurse_villanueva`	`Nurse@123`	What is your favorite food?	`sinigang`
Nurse	`nurse_torres`	`Nurse@123`	What is the name of your first pet?	`bantay`
Nurse	`nurse_bautista`	`Nurse@123`	What city were you born in?	`cebu`
Class Rep	`rep_mercado_BSA_1A`	`Rep@1234`
Class Rep	`rep_bueno_BSA_3A`	`Rep@1234`

Note: Security answers are case-insensitive.

Project Structure

CampusCare/
├── admin/                  # Admin module
│   ├── access_logs.php
│   ├── archive.php
│   ├── current_requests.php
│   ├── dashboard.php
│   ├── programs.php
│   ├── reports.php
│   ├── students.php
│   └── users.php
├── nurse/                  # Nurse/Staff module
│   ├── content.php
│   ├── dashboard.php
│   ├── new_visit.php
│   ├── reports.php
│   ├── student_profile.php
│   ├── students.php
│   └── visits.php
├── rep/                    # Class Representative module
│   ├── dashboard.php
│   ├── requests.php
│   └── students.php
├── assets/                 # Static assets
│   ├── first-aid-icons/    # SVG icons for first-aid guidelines
│   ├── clinic1–4.jpg       # Clinic photos
│   ├── logo-main-b.png     # Logo (dark variant)
│   └── logo-main-w.png     # Logo (light variant)
├── config/
│   ├── .htaccess           # Deny direct access
│   ├── config.example.php  # App config template (tracked)
│   ├── config.php          # App config & DB credentials (gitignored)
│   ├── database.php        # PDO singleton
│   ├── mail.example.php    # SMTP config template (tracked)
│   └── mail.php            # SMTP / PHPMailer credentials (gitignored)
├── includes/
│   ├── .htaccess           # Deny direct access
│   ├── auth.php            # Auth helpers & RBAC
│   ├── export_pdf.php      # PDF report export (admin & nurse)
│   ├── export_students_csv.php  # CSV student records export (rep)
│   ├── footer.php          # Page footer template
│   ├── functions.php       # Utility functions
│   ├── header.php          # Page header template
│   ├── mailer.php          # PHPMailer helper (sendMail, sendOTP, generateOTP)
│   ├── session.php         # Session & CSRF management
│   └── sidebar.php         # Role-aware sidebar
├── database/
│   ├── migrations/         # Incremental schema changes
│   │   └── add_password_reset_otps.sql  # OTP table for email-based password reset
│   ├── demo-data/          # Demo/testing data
│   │   ├── campuscare.sql
│   │   └── seed_data.sql
│   └── real-data/          # Production data & scripts
│       ├── bulk_seed_data.sql
│       ├── campuscare.sql
│       ├── generate_seed.py
│       └── seed_data.sql
├── docs/                   # Documentation & diagrams
│   ├── CampusCare.zip      # Full project source archive
│   ├── CampusCare ERD.svg  # System entity-relationship diagram
│   ├── CampusCare Research Paper.pdf
│   ├── Final Defense Rubrics.pdf
│   └── testing/            # Test documentation & sample CSV files
├── css/style.css           # Custom styles
├── js/app.js               # Main JavaScript
├── index.php               # Public landing page
├── export_firstaid_pdf.php # First aid guideline PDF export
├── login.php               # Login page (with security question & contact admin reset)
├── logout.php              # Logout handler
├── change_password.php     # Change password (with stepper flow)
├── change_security_question.php  # Change security question
├── vendor/                 # PHP dependencies (Composer)
├── composer.json           # Composer dependencies
├── package.json            # npm dependencies
└── .gitignore              # gitignore file

Database Schema

The system uses 15 tables across four functional domains:

Domain	Tables
Academic	`programs`, `year_levels`
Users & Auth	`users`, `access_logs`, `current_requests`, `password_reset_otps`
Students & Health	`students`, `allergies`, `chronic_conditions`, `medications`, `immunizations`, `emergency_contacts`
Clinic Operations	`visits`
Public Content	`announcements`, `faqs`, `first_aid_guidelines`, `clinic_emergency_contacts`, `clinic_hours`

Tech Stack

Backend: PHP 7.4+ (vanilla, no framework)
Database: MySQL via PDO
PDF Export: Dompdf 3.x (via Composer)
Email / SMTP: PHPMailer 7.x (via Composer) — Gmail SMTP with App Password
Frontend: Bootstrap 5.3, Bootstrap Icons, SweetAlert2, Chart.js 4.x
Rich Text Editor: Quill 1.3
Typography: Google Fonts (Inter)

Page Features & Functionalities

A detailed breakdown of every page's UI components and features, organized by module.

Public Pages

index.php — Public Landing Page

Section	UI Components	Description
Navbar	Fixed-top navbar, responsive hamburger toggle, anchor links, CTA button	Sticky navigation with smooth-scroll links to each section and a "Staff Login" CTA button
Hero Section	Image carousel (4 slides), animated background blobs, CTA buttons	Auto-sliding Bootstrap carousel (2.5s interval) with clinic photos, prev/next controls, dot indicators. Two CTA buttons: "Latest Updates" and "Emergencies"
Announcements	Card grid (3 columns), date badges	Displays up to 6 published announcements in responsive cards with "New" badges and formatted dates
First Aid Guidelines	Expandable cards, collapse/expand with chevron animation, PDF export button	Each guideline is a clickable card that expands to reveal content (from Quill editor). Includes a "Save as PDF" button that triggers Dompdf export
FAQs	Bootstrap accordion	Collapsible accordion with the first item expanded by default. Question/answer format
Emergency Contacts	Contact cards with phone icons, clickable `tel:` links	Displays emergency contacts with name, role, and tappable phone numbers
Clinic Hours	Day-by-day schedule list, live "Open/Closed" status badge	Weekly schedule with icons per day, highlights today's row, shows real-time open/closed status based on current server time
Footer	Centered branding	Logo, app name, and year
Scroll Behavior	Smooth scroll JS, navbar scroll effect	Smooth-scrolls to anchors with 80px offset; navbar gains `.scrolled` class on scroll for visual effect

login.php — Login & Password Recovery

Section	UI Components	Description
Login Card	Split-panel card (left: form, right: welcome), animated background blobs, fade-in animation	Two-panel layout with sign-in form on the left and a branded welcome panel with logo on the right
Sign-In Form	Username input, password input with toggle visibility, submit button, CSRF token	Standard login with password eye-toggle icon and Bootstrap validation
Forgot Password Link	Modal trigger link	Opens the forgot password modal
Forgot Password Modal	Method selection cards, multi-step wizard	Two recovery options presented as styled cards with icons and chevrons
→ Contact Admin Flow	Form with username, reason textarea, new password + confirm fields, password strength checklist, info alert	Submits a password reset request to the admin. Includes live password validation with checkmark indicators
→ Security Question Flow	3-step wizard with progress dots, AJAX-powered steps, loading spinners	Step 1: Enter username → Step 2: Answer security question → Step 3: Set new password. Each step uses AJAX with error handling and spinner feedback
Password Strength UI	Live checklist (5 rules), color-coded icons	Real-time password validation showing ✓/✗ for: length, uppercase, lowercase, number, special character
SweetAlert2 Feedback	Success/error popups	Displays styled alerts for submission results

change_password.php — Change Password

Section	UI Components	Description
Password Form	Current password, new password, confirm password with toggle visibility buttons	Stepper-style flow for changing password with live strength validation
Strength Checklist	Real-time validation list, reuse prevention check	Validates against the 5 rules plus checks that the new password differs from the current one

change_security_question.php — Change Security Question

Section	UI Components	Description
Security Form	Current password verification, question dropdown, answer input	Users must verify their current password before changing their security question and answer

Admin Module (`admin/`)

admin/dashboard.php — Admin Dashboard

Section	UI Components	Description
Page Header	Welcome message, current date	Personalized greeting with today's date
Statistics Cards	4 clickable stat cards with icons, hover lift animation, month-over-month % change	Registered Students, Active Nurses, Visits This Month (with ↑/↓ % vs last month), Pending Requests (with "Review now" link). Each card links to its respective page
Visits – Last 7 Days	Bar chart (Chart.js), backfilled missing days	Vertical bar chart showing daily visit counts for the past week
Quick Actions	Button list (4 actions)	Shortcut buttons: Manage Users, View Reports, Access Logs, Archived Records
Students by Year Level	Horizontal bar chart (Chart.js), color-coded bars	Displays student distribution across year levels
Top Complaints This Month	Doughnut chart (Chart.js) with legend	Shows the top 6 complaint categories for the current month
Recent Visits	Data table (10 rows), status badges, "View Reports" link	Displays student name, ID, complaint, date, attending nurse, and color-coded status badges
Visit Status This Month	Doughnut chart (Chart.js)	Distribution of Completed / Follow-up / Referred visits
Recent Activity Feed	Activity timeline with icons, color-coded by action type	Shows last 5 access log entries with user name, action, and timestamp. Icons differentiate logins, warnings, and general actions

admin/users.php — User Management

Section	UI Components	Description
Page Header	Breadcrumb, "Add User" button	Navigation breadcrumb and primary action button
Filter Bar	Search input with icon, role dropdown filter, Clear/Filter button	Real-time search across username, name, email; filter by role (Admin/Nurse/Class Rep)
Users Table	Sortable columns, pagination, action buttons	Sortable by User, Username, Role, Last Login, Status. Shows assignment info for class reps. Edit and Archive action buttons per row
Add/Edit User Modal	3-step stepper wizard (Personal Info → Account → Assignment)	Step 1: First name, last name, email with real-time keystroke validation (letters only). Step 2: Username, password with strength checklist + confirmed, role selector. Step 3: Program/year/section assignment (only shown for Class Rep role). Step validation prevents advancing with errors (shake animation)
Deactivation Modal	Reason dropdown (6 options), optional "Other" textarea	Requires a reason before archiving a user. Prevents self-deactivation
Rep Replacement Flow	Prefill alert banner, auto-deactivation of old rep	When approving a replacement request, pre-fills the Add User modal and auto-deactivates the outgoing class rep upon save

admin/programs.php — Program Management

Section	UI Components	Description
Programs Table	Sortable table, CRUD actions	List of academic programs with code, name, and student count
Add/Edit Modal	Form with input validation (special character prevention)	Code and name fields with real-time keystroke filtering to block special characters

admin/students.php — Student Records (Admin View)

Section	UI Components	Description
Student Table	Search, sortable columns, pagination	Read-only view of all active student records with filtering

admin/current_requests.php — Pending Requests

Section	UI Components	Description
Requests Table	Request type badges, status badges, action buttons	Lists all pending requests (replacement, deletion, password reset)
Password Reset Approval	One-click approve button	Approves the request and applies the pre-stored hashed password to the user's account
Replacement Approval	Redirects to user creation with pre-filled data	Navigates to the Add User modal with nominee details pre-populated
Reject Action	SweetAlert2 confirmation	Confirms before rejecting a request

admin/archive.php — Archived Records

Section	UI Components	Description
Tab Navigation	Bootstrap tabs (Students, Users, Programs)	Three tabs to switch between archived record types
Archive Tables	Restore and permanent delete buttons, SweetAlert2 confirmations	Each record has a Restore button and a Delete button with confirmation dialog

admin/reports.php — Reports & Analytics

Section	UI Components	Description
Filter Panel	Date range pickers, program/year/section dropdowns	Filter report data by date range and academic grouping
Generate PDF Modal	Section checkboxes, sort order dropdown, page break toggle, landscape toggle	Allows selecting which report sections to include, sort order for visit records, and layout preferences
Charts	Chart.js visualizations (bar, doughnut, horizontal bar)	Visits by month, visits by program, top complaints (podium chart), visit status, top allergens, top vaccines
Print/PDF Export	Canvas-to-image conversion, `window.print()`	Converts Chart.js canvases to static PNG images before triggering the print dialog

admin/access_logs.php — Activity Logs

Section	UI Components	Description
Logs Table	Sortable columns, search, pagination	Full audit trail showing user, action, description, IP address, and timestamp
Filter	Search input, date filter	Filter logs by user, action type, or time period

Nurse Module (`nurse/`)

nurse/dashboard.php — Nurse Dashboard

Section	UI Components	Description
Statistics Cards	Stat cards with icons	Visit counts and trends for the nurse
Charts	Chart.js visualizations	Visit statistics and trends relevant to the nurse role
Recent Visits	Data table	Quick overview of latest clinic visits

nurse/new_visit.php — New Visit / Log Visit

Section	UI Components	Description
Student Search	Live search input	Search and select a student to log a visit for
Visit Form	Vitals inputs, complaint category dropdown, complaint text, clinical assessment (required), treatment notes, status selector	Comprehensive visit logging form with categorized complaint dropdown and required assessment field

nurse/students.php — Student Records (Nurse View)

Section	UI Components	Description
Student Table	Search (supports full-name search), sortable columns, pagination	Searchable list of all students with links to individual profiles

nurse/student_profile.php — Student Health Profile

Section	UI Components	Description
Personal Information	Read-only info card	Student's demographic and contact data
Allergies	CRUD table with categorized `<optgroup>` dropdown	Add/edit/delete allergens organized by category (Food, Drug, Environmental, etc.) with severity badge
Chronic Conditions	CRUD table with categorized dropdown	Manage chronic conditions with status tracking (Active/Resolved)
Medications	CRUD table	Current and past medication records
Immunizations	CRUD table with categorized dropdown, edit action	Vaccine records organized by category with date tracking
Emergency Contacts	CRUD table	Emergency contact persons with phone and relationship
Visit History	Data table with status badges	All clinic visits for this student in reverse chronological order
Clinical Notes Form	Assessment (required), treatment fields	Form to add clinical notes to visits

nurse/visits.php — Visit History

Section	UI Components	Description
Filter Bar	Search (full-name support), date range, status filter	Multi-criteria filtering for visit records
Visits Table	Sortable columns, pagination, status badges	Comprehensive visit record list with sorting and color-coded statuses

nurse/reports.php — Nurse Reports

Section	UI Components	Description
Charts & Reports	Same as admin reports — Chart.js + PDF export	Full reporting suite with chart visualizations and PDF export capability

nurse/content.php — Public Content Management

Section	UI Components	Description
Tab Navigation	Bootstrap tabs (Announcements, FAQs, First Aid, Emergency Contacts, Clinic Hours)	Five content areas managed via tabs
Announcements	CRUD table, Quill rich text editor in modal	Create/edit/delete announcements with rich text content and publish/draft status toggle
FAQs	CRUD table	Question and answer management
First Aid Guidelines	CRUD table, icon selector, Quill editor	Create guidelines with custom SVG icons and rich text content
Emergency Contacts	CRUD table, drag-and-drop sort order	Manage emergency contacts with sortable display order
Clinic Hours	Editable day-by-day schedule	Set opening/closing times, closed days, and notes per day of the week

Class Representative Module (`rep/`)

rep/dashboard.php — Class Rep Dashboard

Section	UI Components	Description
Section Overview	Stat cards	Student count for the assigned program/year/section
Student Summary	Quick-glance table	Overview of students in the rep's assigned section

rep/students.php — Manage Students

Section	UI Components	Description
Student Table	Search, sortable columns, pagination, CRUD actions	Scoped to the rep's assigned program/year/section
Add/Edit Student Modal	Student information form with validation	Create and update student records within the assigned scope
CSV Export	Export button	Downloads student records as a CSV file with 14 columns
Delete Action	SweetAlert2 confirmation	Submits a deletion request to admin for approval

rep/requests.php — Replacement & Deletion Requests

Section	UI Components	Description
Replacement Request	Form with nominee student selection, reason textarea	Submit a request to be replaced by another student as class representative
Request History	Status-tagged list	View past requests and their statuses (Pending/Approved/Rejected)

Shared Components

Shared UI Components — Used across all modules

Component	Technology	Description
Top Navbar	Bootstrap 5 fixed-top navbar	Brand logo, sidebar toggle (mobile), user dropdown with avatar initials
Sidebar	Custom CSS with role-based rendering	Collapsible on mobile with overlay, section headings, active page highlighting
Toast Notifications	SweetAlert2 toast (top-right)	Auto-dismiss after 3s with progress bar, pause on hover. Used for success/error/info/warning feedback
Confirmation Dialogs	SweetAlert2 modal	Styled confirm/cancel dialogs for destructive actions (delete, deactivate, logout)
Sortable Table Headers	Custom PHP helper + CSS	Clickable column headers with ascending/descending sort icons; preserves all query parameters
Pagination	Custom PHP helper	Bootstrap-styled pagination with ellipsis, prev/next buttons, active page highlighting
Status Badges	Bootstrap badges, color-coded	Consistent status representation: green (active/completed), yellow (follow-up/moderate), red (severe/referred), gray (inactive/draft)
Form Validation	Bootstrap validation + custom JS	`.needs-validation` class enables client-side validation with focus-on-first-invalid and error toast
Date Format Override	Custom JS + CSS data-display	All date inputs display in `mm/dd/yyyy` format; uses MutationObserver for dynamically added inputs
Password Strength Checker	Live JS validation with icon indicators	Real-time checklist (✓/✗) for 5 password rules, shared across login, change password, and user management
Stepper Wizard	Custom CSS stepper with step validation	Multi-step form flow (e.g., 3-step user creation) with progress circles, step completion checks, and shake animation on validation failure
Background Blobs	CSS animated blobs	Floating gradient blobs on the login and hero sections for visual depth
Flash Messages	PHP session + SweetAlert2	Server-side flash messages automatically displayed as toast notifications on page load

License

This project is for educational purposes.

Name		Name	Last commit message	Last commit date
Latest commit History 211 Commits
admin		admin
assets		assets
config		config
css		css
database		database
docs		docs
includes		includes
js		js
nurse		nurse
rep		rep
.gitignore		.gitignore
README.md		README.md
change_password.php		change_password.php
change_security_question.php		change_security_question.php
composer.json		composer.json
composer.lock		composer.lock
export_firstaid_pdf.php		export_firstaid_pdf.php
index.php		index.php
login.php		login.php
logout.php		logout.php
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation