Learn web development

Procoder Arif

This is the part-4 of my hospital management system.

After submission of appointment form.User can see their Online booking status by using registred phone number.

If you're running a hospital or clinic website, having an appointment status checker is a great feature that enhances user experience. Patients can simply enter their phone numbers and check the status of their upcoming appointments. In this post, I'll walk you through how to create a dynamic appointment status checker using PHP, MySQL, and Bootstrap.

1. Introduction to the System

This system allows users to input their phone numbers and retrieve appointment details like the doctor's name, department, appointment date, and the status (approved or denied) of the request. We will build the system step-by-step, focusing on creating a search form that pulls data from the general_appointment table in a MySQL database.

2. Components Overview

Frontend: A search form where users input their phone number.
Backend: A PHP script that queries the MySQL database based on the input and returns relevant appointment details.
Database: A table storing appointment data, such as patient name, phone number, doctor details, and appointment status.
Design: We will style the form and table using Bootstrap to make the interface responsive and visually appealing.

3. Creating the Database and Table

First, we need to set up the MySQL database and table where the appointment details will be stored. The table (general_appointment) will have the following columns:

id: Unique ID for each appointment
name: Name of the patient
phone: Patient’s phone number
district: Patient’s district
department: Department where the appointment is scheduled (e.g., Cardiology)
doctor: Doctor’s name
date: Date of the consultation
status: Status of the appointment (approved/denied)

SQL Command to Create the Table:

See the full Project Tutorial

4. Creating the Search Form

Next, we'll create the HTML form where users will input their phone numbers. The form uses the POST method to send the phone number to the PHP script for processing.

Here’s a breakdown of the form’s elements:

Input Field: Users will enter their phone number.
Button: A submit button to send the form data.

Using Bootstrap's form control classes ensures that the form looks clean and responsive on all devices.

5. Fetching Data from the Database

Once the user submits the form, the PHP script processes the phone number, searches the database for a match, and retrieves the appointment details.

SQL Query: The script runs an SQL query to search for the provided phone number in the general_appointment table.
Results Display: If an appointment with the entered phone number is found, the table will be displayed. The background color of the status column will change based on the appointment status (green for approved, red for denied).

6. Displaying Results

The table below displays the retrieved data, including the patient’s name, district, department, doctor, consultation date, and the status of the appointment.

We use the Bootstrap table class to style the table, and conditional formatting to highlight rows based on the appointment status.
Each row's background color is dynamically adjusted. If the status is approved, it will be highlighted in green; if it’s denied, it will be red.

7. Using Bootstrap to Enhance Design

We’re incorporating Bootstrap's grid system and components to make the interface sleek and mobile-responsive. Below are some design details:

Responsive Form: The form is placed in a container with Bootstrap’s .container class, making it align properly across different screen sizes.
Table Styling: The results are displayed in a neatly formatted table with Bootstrap’s .table class, adding a clean layout for the user to read.

Example Layout Breakdown:

Navigation Bar: Includes contact details and a home button, styled using Bootstrap icons.
Search Form Section: Contains the search form aligned centrally with fields and a submit button.
Results Section: Displays a table if data is found, otherwise shows a "No Results Found" message.