How to Create a Facebook Style Alert Confirm Box with jQuery and CSS

Comments are usually seen on a website that provide articles and tutorials. This is how web users exchange ideas to make better website and more reliable articles.

In this comment system, you can write a comment and post it without refreshing the page.

Below are the step by step process to follow:

• Create a MySQL database ang name it “dbcomment“.
• Do this following code for creating table in the database that you have created.

CREATE TABLE IF NOT EXISTS `tblcomment` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `PERSON` varchar(50) NOT NULL,
 `COMMENT` text NOT NULL,
 `DATEPOSTED` datetime NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

• Create a page for the configuration between MySQL database and PHP script.

<?php
$server = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'commentdb';
$con = mysql_connect($server, $dbuser, $dbpass);
if (isset($con)) {
 # code...
 $dbSelect = mysql_select_db($dbname);
 if (!$dbSelect) {
 echo "Problem in selecting database! Please contact administraator";
 die(mysql_error());
 }
} else {
 echo "Problem in database connection! Please contact administraator";
 die(mysql_error());
}
?>

• Create a landing page and name it “index.php“.

<?php include 'config.php'; ?>
 <!-- bootstrap extension -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<!-- container -->
<div class="container" > 
<div class="page-header"><h1>Comment system with jQuery, Ajax and PHP</h1></div>
<div id="display" class="col-md-8 col-md-offset-1">
 <?php 
 
 while ($row = mysql_fetch_array($result)) {

 echo '<div class="panel panel-primary">'; 
 echo '<div class="panel-heading"><span class="glyphicon glyphicon-user"> </span> Posted by : ' . $row['PERSON'].'</div>';
 echo '<div class="panel-body">';
 echo $row['COMMENT'];
 echo '</div>';
 echo '<div class="panel-footer">';
 echo 'Date Posted:' . $row['DATEPOSTED'];
 echo '</div>';
 echo '</div>'; 
 } 
 ?>
</div>
 <!-- panel -->
 <div class="col-md-8 col-md-offset-1">
 <div class="panel">
 <div class="panel-heading"><h2>Post your comments</h2></div>
 <div class="panel-body span6 form-horizontal">
 <div class="row">
 <div class="form-group"> 
 <div class="col-md-8">
 <input rows="6" class="form-control input-sm" id="name" name="name" placeholder=
 "Name" type="text" value="">
 </div> 
 </div>
 </div> 
 <div class="row">
 <div class="form-group">
 <div class="col-md-8"> 
 <textarea class="form-control input-sm" rows="6" name="COMMENT" id="COMMENT" > 
 </textarea> 
 </div>
 </div>
 </div>
 <div class="row">
 <div class="form-group">
 <div class="col-md-8"> 
 <button class="btn btn-primary btn-sm" id ="submit" type="submit" >Post Comment</button> 
 </div>
 </div>
 </div> 
 </div>
 </div> 
<!-- end panel -->
 </div> 
</div>

• Create a script for fetching the data from the other page.

 <!-- jquery extension -->
<script type="text/javascript" src="jquery/jquery.min.js"></script> 

<!-- method for saving and retrieving data without refreshing the page. -->
<script type="text/javascript" > 

$(document).on("click", "#submit", function () {

 jQuery("#display").fadeIn(900, 0); 
 
 jConfirm('Are you sure you want to Close this thread?', '', 
 
 function(f) {
 
 
 if(f==true)
 {

 $("#wrap").fadeOut(900);
 }
 
 });
 }); 
 });

 </script>

For all students who need a programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @:

Email – [email protected]
Mobile No. – 09305235027 – TNT

If you have any questions or suggestion, please feel free to contact us at our contact page.

Please help us grow by sharing this article with your friends. Thank you.

Down the full source code here. Download Sourcecode

Technology stack and requirements

To run this PHP project, you need these tools on your development machine:

• XAMPP or WAMP server. Bundles Apache, MySQL, and PHP so you can run PHP on Windows without individual installs. Free from apachefriends.org.
• PHP 8.0 or higher. Included with XAMPP. Older versions (5.x, 7.x) may work but modern PHP features improve security and performance.
• MySQL or MariaDB. Comes with XAMPP. phpMyAdmin manages the database through a browser UI.
• VS Code or PhpStorm. Free code editor with PHP syntax highlighting, IntelliSense, and debugging support.
• Web browser. Chrome, Firefox, or Edge for testing the running app.

Installing the source code

1. Download the archive. Get the ZIP file from the download link on this page and extract it.
2. Move to htdocs. Place the extracted folder inside C:\xampp\htdocs\ so Apache can serve it.
3. Import the database. Open http://localhost/phpmyadmin, click Import, and select the .sql file included in the archive.
4. Update database credentials. Open the config.php or connection.php file and set the correct database name, username, and password (default XAMPP: root / empty password).
5. Run the project. Start Apache + MySQL in XAMPP, then visit http://localhost/your-project-folder/ in a browser.

Using this project for your BSIT capstone

This PHP project maps cleanly to standard BSIT capstone documentation. Suggested chapter alignment:

• Chapter 1 (Introduction). Discuss the problem the system solves in real-world context. Cite Philippine business or academic use cases where a manual process could be replaced.
• Chapter 2 (Review of Related Literature). Compare this system’s features against 5-10 similar published projects. Cite journals like IJERT or IEEE Access for academic-standard sources.
• Chapter 3 (Methodology). Include Use Case Diagram, Data Flow Diagram, Entity Relationship Diagram, and Activity Diagram covering all major workflows.
• Chapter 4 (Results and Discussion). Screenshot each module of the running system with a caption explaining what data it processes and which user role interacts with it.
• Chapter 5 (Conclusion and Recommendations). Identify features that could be added in a Version 2, such as mobile app, REST API export, or AI-powered analytics.

Modules typical of How to Create a Facebook Style Alert Confirm Box with jQuery and CSS

• Master data. CRUD forms for the primary entities with search and filter.
• Transaction processing. Data entry forms for day-to-day operations the system automates.
• Reports. Formatted printable output summarizing activity per day, user, or category.
• User management. Login with role-based permissions (Admin, Encoder, Viewer).
• Backup and restore. Export database to a .sql file and restore when needed.

Common enhancements for capstone review

• Modernize the UI. Add Bootstrap 5 or Tailwind CSS for a polished appearance.
• Add printable receipts. Use TCPDF or FPDF to generate PDF reports.
• Multi-user concurrency. Ensure database handles simultaneous writes without lost-update errors.
• Rewrite in Laravel. Migrate to Laravel for maintainability and modern development patterns.

Related PHP Projects

• Facebook Style Load Data In Timeline With PHP MySQL AJAX Source Code
• Facebook Like Notification PHP MySQL With Source Code
• Setup Facebook App On Localhost Using Xampp
• Posting Updates Comment Facebook PHP MySQL
• Autosuggestion Like Facebook jQuery AJAX PHP
• Book Storage System Source Code