In today’s digital landscape, website uptime is crucial for businesses, developers, and administrators. A website going down can lead to revenue loss, poor user experience, and even SEO penalties. In this article, we will walk through the development of a real-time website status checker using PHP, AJAX, and Bootstrap.
Why Monitor Website Uptime?
Ensuring a website remains online is essential for various reasons:
- User Experience: Visitors expect uninterrupted access to a website.
- Business Performance: Downtime can lead to lost sales and reduced credibility.
- SEO Rankings: Search engines favor websites with high availability.
- Immediate Action: Early detection of downtime allows quick resolution.
Follow this video for complete guidance :
index.php
<?php
function getWebsitesFromFile($filename) {
return file($filename, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
}
$websites = getWebsitesFromFile('websites.txt');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Status Checker</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
tr.active td{
background: #666;
}
</style>
</head>
<body class="bg-dark text-light">
<div class="container p-4">
<div class="card bg-dark border-secondary">
<div class="card-header bg-dark border-secondary">
<h3 class="text-white">
<i class="bi bi-globe me-2"></i>
Website Status
</h3>
</div>
<div class="card-body">
<table class="table table-dark table-hover" id="statusTable">
<tbody>
<thead>
<tr>
<th>SN</th>
<th>Website</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $sn =0; foreach($websites as $site){ $sn++;?>
<tr id="site-<?php echo $sn;?>" data-site="<?php echo $site;?>">
<td><?php echo $sn;?></td>
<td><?php echo $site;?></td>
<td>
<span class="status"></span>
</td>
</tr>
<?php } ?>
</tbody>
</tbody>
</table>
<div class="text-center my-2">
<span class="badge bg-success me-2" id="upCount">0</span>
<span class="badge bg-danger" id="downCount">0</span>
</div>
</div>
<div class="card-footer bg-dark border-secondary text-center">
<button onclick="run()" class="btn btn-outline-light btn-sm">
<i class="bi bi-arrow-clockwise"></i> Start
</button>
</div>
</div>
</div>
<script>
let current_site = 0;
let websites_count = '<?php echo count($websites);?>';
function upCount(){
$("#upCount").html(parseInt($("#upCount").text())+1);
}
function downCount(){
$("#downCount").html(parseInt($("#downCount").text())+1);
}
function run(){
current_site++;
const row = $("#site-"+current_site);
row.find('.status').html('<div class="spinner-border-sm spinner-border"></div>');
row.addClass('active');
$.ajax({
url:'server.php?url='+row.attr('data-site'),
type:'get',
success:function(res){
row.removeClass('active');
if(res.status=='UP'){
badge_class = 'bg-success';
upCount();
}else{
badge_class = 'bg-danger';
downCount();
}
status = `<span class="badge ${badge_class}">${res.status}</span>`;
row.find('.status').html(status);
if(current_site<websites_count){
run();
}else{
stop();
}
}
})
}
</script>
</body>
</html>
server.php
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
if (!isset($_GET['url'])) {
echo json_encode(["error" => "No URL provided"]);
exit;
}
$url = $_GET['url'];
$headers = @get_headers($url);
if (!$headers) {
echo json_encode(["url" => $url, "status" => "DOWN"]);
} else {
$statusCode = substr($headers[0], 9, 3);
$status = ($statusCode >= 200 && $statusCode < 400) ? "UP" : "DOWN";
echo json_encode(["url" => $url, "status" => $status]);
}
?>
Project Overview
This project reads website URLs from a file, checks their availability using AJAX-based frontend requests, and displays the status dynamically in a table.
Key Features
- Reads websites from a file for easy management.
- AJAX-driven requests to fetch real-time status updates.
- Bootstrap-based UI for a modern and responsive interface.
- Dynamic status updates showing whether websites are up or down.
Technologies Used
- PHP for backend processing.
- AJAX (jQuery) for asynchronous updates.
- Bootstrap for UI styling and layout.
- Bootstrap Icons for visual enhancements.
How It Works
The application features a straightforward UI where users can check the status of multiple websites. The user flow is as follows:
- The application loads website URLs from
websites.txt. - Clicking the “Start” button triggers AJAX requests.
- The backend (
server.php) checks the status of each website. - The frontend updates dynamically with UP (green badge) or DOWN (red badge).
- A counter displays the number of websites that are online or offline.
Server-Side Logic (server.php)
The backend script processes incoming requests and checks website availability.
How It Works:
- It retrieves the website URL from a GET request.
- It attempts to fetch HTTP headers using
get_headers(). - If no headers are returned, the website is considered DOWN.
- If the response status code is between 200-399, the website is UP.
- The status is returned as a JSON response for the AJAX script to process.
Frontend and AJAX Requests
The frontend is built using Bootstrap and dynamically updates using AJAX. The table displays website URLs and their status. The script iterates through each site, updating the status in real time.
Real-Time Status Updates
The AJAX script:
- Iterates through the list of websites.
- Sends an asynchronous request to
server.php. - Updates the UI with the corresponding status (UP/DOWN).
- Highlights the active row while checking.
- Keeps track of the count of online and offline websites.
Enhancements and Future Improvements
While the current implementation works efficiently, several improvements can enhance its functionality:
1. Email Alerts
- Send email notifications when a website goes down.
- Use PHP’s
mail()function or an SMTP library like PHPMailer.
2. Database Storage
- Store website URLs and historical uptime data in a database.
- Allow tracking of uptime trends over time.
3. Scheduled Monitoring with Cron Jobs
- Automate periodic website checks.
- Log downtime events and notify administrators.
4. Graphical Reports
- Use Chart.js to visualize uptime statistics.
- Display historical uptime percentages for each site.
5. Mobile Optimization
- Ensure a seamless mobile experience.
- Provide a compact, touch-friendly UI.
Building a website status checker using PHP, AJAX, and Bootstrap is a practical project for web administrators and developers. It enables real-time monitoring and provides insights into website availability. By extending this project with notifications, automated checks, and data logging, it can become a powerful tool for ensuring online reliability.
Start building your own website monitoring system today and stay ahead of downtime issues!
