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 ariticles. In this comment system, you can write a comment and post it without refreshing the page.

Below are the step by step proccess 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