Tutorial101

Friday, January 3, 2020

Send Email with Attachment on Form Submission using PHP

Send Email with Attachment on Form Submission using PHP

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send Email with Attachment on Form Submission using PHP</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>.btn-danger {width:100%;}.btn-success {width:100%;}</style>
</head>
<body>
<?php
$postData = $uploadedFile = $statusMsg = '';
if(isset($_POST['submit'])){
    // Get the submitted form data
    $postData = $_POST;
    $email = $_POST['email'];
    $name = $_POST['name'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    // Check whether submitted data is not empty
    if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
        // Validate email
        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $statusMsg = '<p class="btn btn-danger">Please enter your valid email.</p>';
        }else{
            $uploadStatus = 1;
            
            // Upload attachment file
            if(!empty($_FILES["attachment"]["name"])){
                
                // File path config
                $targetDir = "uploads/";
                $fileName = basename($_FILES["attachment"]["name"]);
                $targetFilePath = $targetDir . $fileName;
                $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
                
                // Allow certain file formats
                $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg');
                if(in_array($fileType, $allowTypes)){
                    // Upload file to the server
                    if(move_uploaded_file($_FILES["attachment"]["tmp_name"], $targetFilePath)){
                        $uploadedFile = $targetFilePath;
                    }else{
                        $uploadStatus = 0;
                        $statusMsg = "<p class='btn btn-danger'>Sorry, there was an error uploading your file.</p>";
                    }
                }else{
                    $uploadStatus = 0;
                    $statusMsg = '<p class="btn btn-danger">Sorry, only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload.</p>';
                }
            }
   if($uploadStatus == 1){
                // Recipient
                $toEmail = $email;

                // Sender
                $from = 'raizen02102020@gmail.com';
                $fromName = 'Tutorial101 dot blogspot com';
                
                // Subject
                $emailSubject = 'Contact Request Submitted by '.$name;
                // Message 
                $htmlContent = '<h2>Contact Request Submitted</h2>
                    <p><b>Name:</b> '.$name.'</p>
                    <p><b>Email:</b> '.$email.'</p>
                    <p><b>Subject:</b> '.$subject.'</p>
                    <p><b>Message:</b><br/>'.$message.'</p>';
     
                // Header for sender info
                $headers = "From: $fromName"." <".$from.">";
    
                if(!empty($uploadedFile) && file_exists($uploadedFile)){
                    // Boundary 
                    $semi_rand = md5(time()); 
                    $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x"; 
                    
                    // Headers for attachment 
                    $headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\""; 
                    
                    // Multipart boundary 
                    $message = "--{$mime_boundary}\n" . "Content-Type: text/html; charset=\"UTF-8\"\n" .
                    "Content-Transfer-Encoding: 7bit\n\n" . $htmlContent . "\n\n"; 
                    
                    // Preparing attachment
                    if(is_file($uploadedFile)){
                        $message .= "--{$mime_boundary}\n";
                        $fp =    @fopen($uploadedFile,"rb");
                        $data =  @fread($fp,filesize($uploadedFile));
                        @fclose($fp);
                        $data = chunk_split(base64_encode($data));
                        $message .= "Content-Type: application/octet-stream; name=\"".basename($uploadedFile)."\"\n" . 
                        "Content-Description: ".basename($uploadedFile)."\n" .
                        "Content-Disposition: attachment;\n" . " filename=\"".basename($uploadedFile)."\"; size=".filesize($uploadedFile).";\n" . 
                        "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
                    }
                    
                    $message .= "--{$mime_boundary}--";
                    $returnpath = "-f" . $email;
                    
                    // Send email
                    $mail = mail($toEmail, $emailSubject, $message, $headers, $returnpath);
                    
                    // Delete attachment file from the server
                    @unlink($uploadedFile);
                }else{
                     // Set content-type header for sending HTML email
                    $headers .= "\r\n". "MIME-Version: 1.0";
                    $headers .= "\r\n". "Content-type:text/html;charset=UTF-8";
                    
                    // Send email
                    $mail = mail($toEmail, $emailSubject, $htmlContent, $headers); 
                }
                // If mail sent
                if($mail){
                    $statusMsg = '<p class="btn btn-success">Your contact request has been submitted successfully !</p>';
                    
                    $postData = '';
                }else{
                    $statusMsg = '<p class="btn btn-danger">Your contact request submission failed, please try again.</p>';
                }
            }

  } 
        
    }else{
        $statusMsg = '<p class="btn btn-danger">Please fill all the fields.</p>';
    }
}
?>
<div class="container">
    <div class="row">
  <p><h2>Send Email with Attachment on Form Submission using PHP</h2></p>
  <p><h3>Contact Us</h3></p>
        <div class="col-md-8">
            <div class="well well-sm">
    <!-- Display submission status -->
    <?php if(!empty($statusMsg)){ ?>
     <p class="statusMsg"><?php echo $statusMsg; ?></p>
    <?php } ?>
                <form method="post" action="" enctype="multipart/form-data" autocomplete="off" class="animate-form">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">Name</label>
       <input type="text" name="name" class="form-control" value="<?php echo !empty($postData['name'])?$postData['name']:''; ?>" placeholder="Enter name" required="required" />
                         </div>
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                                <input type="email" name="email" class="form-control" placeholder="Enter email" required="required" /></div>
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" name="subject" class="form-control" value="<?php echo !empty($postData['subject'])?$postData['subject']:''; ?>" placeholder="Subject" required=""/>
                        </div>
      <div class="form-group">
                            <input type="file" name="attachment" class="form-control">
                        </div>     
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">Message</label>
                            <textarea name="message" class="form-control" rows="11" cols="25" placeholder="Write your message here"/>
       <?php echo !empty($postData['message'])?$postData['message']:''; ?></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
      <input type="submit" name="submit" class="btn btn-primary pull-right" value="Send Message">
                    </div>
                </div>
                </form>
     <p style="font-size: 13px;margin-top: 5px;color: #F44949;">For testing purpose, the email will be sent to your given email address.</p>
            </div>
        </div>
        <div class="col-md-4">
            <form>
            <legend><span class="glyphicon glyphicon-globe"></span> Our office</legend>
            <address>
                <strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>
                <abbr title="Phone">
                    P:</abbr>
                (123) 456-7890
            </address>
            <address>
                <strong>Full Name</strong><br>
                <a href="mailto:#">first.last@example.com</a>
            </address>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Wednesday, December 18, 2019

Multiple Markers with Info Windows to Google Maps

Multiple Markers with Info Windows to Google Maps

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Markers with Info Windows to Google Maps</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<style type="text/css">
#mapCanvas {
    width: 100%;
    height: 450px;
}
body {font-family: "Times New Roman", Times, serif;}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
   <p><h3>Multiple Markers with Info Windows to Google Maps</h3></p>
   <div id="mapContainer">
                <div id="mapCanvas"></div>
            </div>
     </div>
   </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdGv5cjpA0dMUCSolCf89tl_vgccGvsu0"></script>
<script>
function initMap() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
                    
    // Display a map on the web page
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    map.setTilt(50);
        
    // Multiple markers location, latitude, and longitude
    var markers = [
        ['Olongapo City, Zambales', 14.841344, 120.282224],
        ['Subic Bay, Zambales', 14.786400, 120.281535],
        ['Angeles City, Pampanga', 15.145334, 120.585616],
        ['Clark Freeportzone, Pampanga', 15.185247, 120.539395]
    ];
                        
    // Info window content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Olongapo City, Philippines</h3>' +
        '<p>Olongapo City Zambales Philippines</p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3>Subic Bay, Philippines</h3>' +
        '<p>Subic Bay Olongapo City Zambales Philippines</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Angeles City, Pampanga</h3>' +
        '<p>Angeles City, Pampanga Philippines</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Clark Freeportzone, Pampanga</h3>' +
        '<p>Clark Freeportzone, Pampanga Philippines</p>' +
        '</div>']
    ];
        
    // Add multiple markers to map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    // Place each marker on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Add info window to marker    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Center the map to fit all markers on the screen
        map.fitBounds(bounds);
    }

    // Set zoom level
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(9);
        google.maps.event.removeListener(boundsListener);
    });
    
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>

Tuesday, December 17, 2019

Autocomplete Textbox with Multiple Selection using jQuery in PHP

Autocomplete Textbox with Multiple Selection using jQuery in PHP

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocomplete Textbox with Multiple Selection using jQuery in PHP</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/token-input.css" />
</head>
<body>
<?php
if(isset($_POST['submit'])){
    // Get selected skills
    $selected_skills_ids = $_POST['skill_input'];

 echo $selected_skills_ids;
}
?>
<div class="container">
    <div class="row">
        <div class="col-lg-9">
   <form method="post" action="">
    <p><h1>Autocomplete Textbox with Multiple Selection using jQuery</h1></p>
    <p><h4>Programming Skills</h4></p>
    <input type="text" name="skill_input" id="skill_input" class="form-control"/><br/>
    <input type="submit" name="submit" value="SUBMIT" class="btn btn-success">
   </form>
     </div>
   </div>
</div>
<!-- Tokeninput plugin library -->
    <script src="js/jquery.tokeninput.js"></script>
 <script>
    var skills = [
      {id: 1, name: "Go"},
      {id: 2, name: "AngularJS"},
      {id: 3, name: "Kotlin"},
      {id: 4, name: "Asp"},
      {id: 5, name: "CSS"},
      {id: 6, name: "HTML"},
      {id: 7, name: "Laravel"},
      {id: 8, name: "Codeigniter"},
      {id: 9, name: "Cakephp"},
      {id: 10, name: "Wordpress"},
      {id: 11, name: "Symfony"},
      {id: 12, name: "Yii"},
      {id: 13, name: "Zend Framework"},
      {id: 14, name: "PyQT"},
      {id: 15, name: "Java"},
      {id: 16, name: "JavaScript"},
      {id: 17, name: "Tkinter"},
      {id: 18, name: "WxPython"},
      {id: 19, name: "MySQL"},
      {id: 20, name: "NodeJs"},
      {id: 21, name: "Django"},
      {id: 22, name: "Perl"},
      {id: 23, name: "PHP"},
      {id: 24, name: "Python"},
      {id: 25, name: "Ruby"},
      {id: 26, name: "TurboGears"},
      {id: 27, name: "Web2py"},
      {id: 28, name: "SQL"},
      {id: 29, name: "Flask"}
      
    ];
    $(document).ready(function() {
        $("#skill_input").tokenInput(skills);
    });
    </script>
</body>
</html>

Download here

Sunday, December 15, 2019

Auto Resize Textarea Height using jQuery

Auto Resize Textarea Height using jQuery

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Resize Textarea Height using jQuery</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
    var textArea = $('#content'),
    hiddenDiv = $(document.createElement('div')),
    content = null;
    
    textArea.addClass('noscroll');
    hiddenDiv.addClass('hiddendiv');
    
    $(textArea).after(hiddenDiv);
    
    textArea.on('keyup', function(){
        content = $(this).val();
        content = content.replace(/\n/g, '<br>');
        hiddenDiv.html(content + '<br class="lbr">');
        $(this).css('height', hiddenDiv.height());
    });
});
</script>
<style>
textarea{
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #444;
  padding: 5px;
}
.noscroll{
  overflow: hidden;
  resize: none;
}
.hiddendiv{
  display: none;
  white-space: pre-wrap;
  min-height: 50px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 5px;
  word-wrap: break-word;
}
.lbr {
  line-height: 3px;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <p><h1>Auto Resize Textarea Height using jQuery</h1></p>
   <textarea id="content" class="form-control"></textarea>
     </div>
   </div>
</div>

</body>
</html>

Upload Multiple Images without Page Refresh using jQuery Ajax and PHP

Upload Multiple Images without Page Refresh using jQuery Ajax and PHP

<!DOCTYPE html>
<html>
<head>
 <title>Upload Multiple Images without Page Refresh using jQuery Ajax and PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.gallery ul, .gallery ol, .gallery li {
 margin: 0;
 padding: 0;
 list-style: none;
}
.upload-div{
 margin-bottom:20px;
}
#uploadStatus{
 padding: 10px 20px;
    margin-top: 10px;
 font-size:18px;
}
.gallery{
 width:100%;
 float:left;
}
.gallery ul{
 margin:0;
 padding:0;
 list-style-type:none;
}
.gallery ul li{
 padding:7px;
 border:2px solid #ccc;
 float:left;
 margin:10px 7px;
 background:none;
 width:auto;
 height:auto;
}
.gallery img{
 width:250px;
}
</style>
</head>
<body>
<div class="container">
<h2>Upload Multiple Images without Page Refresh using jQuery Ajax and PHP</h2>
    <div class="row">
        <div class="col-lg-12">
  <div class="upload-div">
   <!-- File upload form -->
   <form id="uploadForm" method="post" enctype="multipart/form-data" class="form-inline" >
    <div class="form-group">
                      <label>Choose Images: </label>
                      <input type="file" name="images[]" id="fileInput" class="form-control" multiple >
                 </div>
                 <input type="submit" name="submit" class="btn btn-success" value="UPLOAD"/>
             </form>
  </div>

  <!-- Display upload status -->
  <div id="uploadStatus"></div>
  <!-- Gallery view of uploaded images --> 
  <div class="gallery"></div>
  </div>
 </div>
</div>
<script>
$(document).ready(function(){
    // File upload via Ajax
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $('#uploadStatus').html('<img src="img/loader.gif"/>');
            },
            error:function(){
                $('#uploadStatus').html('<span style="color:#EA4335;">Images upload failed, please try again.<span>');
            },
            success: function(data){
                $('#uploadForm')[0].reset();
                $('#uploadStatus').html('<span style="color:#28A74B;">Images uploaded successfully.<span>');
                $('.gallery').html(data);
            }
        });
    });

 // File type validation
    $("#fileInput").change(function(){
        var fileLength = this.files.length;
        var match= ["image/jpeg","image/png","image/jpg","image/gif"];
        var i;
        for(i = 0; i < fileLength; i++){ 
            var file = this.files[i];
            var imagefile = file.type;
            if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]) || (imagefile==match[3]))){
                alert('Please select a valid image file (JPEG/JPG/PNG/GIF).');
                $("#fileInput").val('');
                return false;
            }
        }
    });
});
</script>
</body>
</html>

<?php
if(!empty($_FILES['images'])){
    // File upload configuration
    $targetDir = "uploads/";
    $allowTypes = array('jpg','png','jpeg','gif');
    
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        $image_name = $_FILES['images']['name'][$key];
        $tmp_name   = $_FILES['images']['tmp_name'][$key];
        $size       = $_FILES['images']['size'][$key];
        $type       = $_FILES['images']['type'][$key];
        $error      = $_FILES['images']['error'][$key];
        
        // File upload path
        $fileName = basename($_FILES['images']['name'][$key]);
        $targetFilePath = $targetDir . $fileName;
        
        // Check whether file type is valid
        $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
        if(in_array($fileType, $allowTypes)){    
            // Store images on the server
            if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$targetFilePath)){
                $images_arr[] = $targetFilePath;
            }
        }
    }
 
    // Generate gallery view of the images
    if(!empty($images_arr)){ ?>
        <ul>
        <?php foreach($images_arr as $image_src){ ?>
            <li><img src="<?php echo $image_src; ?>" alt=""></li>
        <?php } ?>
        </ul>
    <?php }
    
}
?>

Saturday, December 14, 2019

Highlight Keyword in Search Results with PHP and MySQLi

Highlight Keyword in Search Results with PHP and MySQLi

<!DOCTYPE html>
<html>
<head>
 <title>Highlight Keyword in Search Results with PHP and MySQLi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName     = "test";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

// If the search form is submitted
$searchKeyword = $whrSQL = '';
if(isset($_POST['searchSubmit'])){
    $searchKeyword = $_POST['keyword'];
    if(!empty($searchKeyword)){
        // SQL query to filter records based on the search term
        $whrSQL = "WHERE (Country LIKE '%".$searchKeyword."%' OR CountryAbbrev LIKE '%".$searchKeyword."%')";
    }
}

// Get matched records from the database
$result = $db->query("SELECT * FROM countries $whrSQL ORDER BY ID ASC");

// Highlight words in text
function highlightWords($text, $word){
    $text = preg_replace('#'. preg_quote($word) .'#i', '<span style="background-color: #F9F902;">\\0</span>', $text);
    return $text;
}
?>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
   <h2>List of Countries</h2>
   <!-- Search form -->
   <form method="post">
    <div class="col-lg-6">
     <input type="text" name="keyword" class="form-control" value="<?php echo $searchKeyword; ?>" placeholder="Search by keyword..." >
    </div> 
    <div class="col-lg-6">
     <input type="submit" name="searchSubmit" value="Search" class="btn btn-success">
    </div>
   </form>
   <br/><br/>
   <!-- Search results -->
   <?php
   if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
     $title = !empty($searchKeyword)?highlightWords($row['Country'], $searchKeyword):$row['Country'];
     $contnet = !empty($searchKeyword)?highlightWords($row['CountryAbbrev'], $searchKeyword):$row['CountryAbbrev'];
   ?>
   <div class="list-item">
    <h4><?php echo $title; ?></h4>
    <p><?php echo $contnet; ?></p>
   </div>
   <?php } }else{ ?>
   <p>No countries found...</p>
   <?php } ?>
  </div>
    </div>
</div>
<style>
.list-item {
    border-bottom: 2px solid #BABABA;
}
</style>
</body>
</html>

Friday, December 13, 2019

Upload and Add Watermark to Image using PHP

Upload and Add Watermark to Image using PHP

<!DOCTYPE html>
<html>
<head>
 <title>Upload and Add Watermark to Image using PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<style>
.gallery{
 width: 100%;
 text-align: center;
}
h5{
 color: #545353;
    font-size: 18px;
    text-transform: uppercase;
    background: #edeaea;
    padding: 7px 5px 4px 5px;
    margin-top: 20px;
}
.gallery img{
 max-width: 100%;
 padding: 10px;
}
</style>
<?php 
// Path configuration 
$targetDir = "uploads/"; 
$watermarkImagePath = 'img/tutorial101-blogspot-logo.png'; 

$statusMsg = '';
$showwatermark = '';
if(isset($_POST["submit"])){ 
    if(!empty($_FILES["file"]["name"])){ 
        // File upload path 
        $fileName = basename($_FILES["file"]["name"]); 
        $targetFilePath = $targetDir . $fileName; 
        $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION); 
  
        // Allow certain file formats 
        $allowTypes = array('jpg','png','jpeg'); 
  if(in_array($fileType, $allowTypes)){ 
            // Upload file to the server 
            if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){ 
                // Load the stamp and the photo to apply the watermark to 
                $watermarkImg = imagecreatefrompng($watermarkImagePath); 
                switch($fileType){ 
                    case 'jpg': 
                        $im = imagecreatefromjpeg($targetFilePath); 
                        break; 
                    case 'jpeg': 
                        $im = imagecreatefromjpeg($targetFilePath); 
                        break; 
                    case 'png': 
                        $im = imagecreatefrompng($targetFilePath); 
                        break; 
                    default: 
                        $im = imagecreatefromjpeg($targetFilePath); 
                } 
                 
                // Set the margins for the watermark 
                $marge_right = 10; 
                $marge_bottom = 10; 
                 
                // Get the height/width of the watermark image 
                $sx = imagesx($watermarkImg); 
                $sy = imagesy($watermarkImg); 
                 
                // Copy the watermark image onto our photo using the margin offsets and  
                // the photo width to calculate the positioning of the watermark. 
                imagecopy($im, $watermarkImg, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($watermarkImg), imagesy($watermarkImg)); 
                 
                // Save image and free memory 
                imagepng($im, $targetFilePath); 
                imagedestroy($im); 
     
                if(file_exists($targetFilePath)){ 
                    $statusMsg = "The image with watermark has been uploaded successfully."; 
     $showwatermark = '<h5>Watermarked Image</h5>
     <div class="gallery">
      <img src="uploads/'.$fileName.'" alt="">
     </div>';
                }else{ 
                    $statusMsg = "Image upload failed, please try again."; 
                }  
            }else{ 
                $statusMsg = "Sorry, there was an error uploading your file."; 
            } 
        }else{ 
            $statusMsg = 'Sorry, only JPG, JPEG, and PNG files are allowed to upload.'; 
        } 
    }else{ 
        $statusMsg = 'Please select a file to upload.'; 
    } 
} 
?>
<div class="container">
 <h2>Upload and Add Watermark to Image using PHP</h2>
    <div class="row">
        <div class="col-lg-12">
            <div>
    <!-- Image upload form -->
    <form action="" method="post" enctype="multipart/form-data" class="form-inline">
     <div class="form-group">
      <label for="file">Select Image File to Upload:</label>
      <input type="file" name="file" class="form-control">
     </div>
     <input type="submit" name="submit" value="Upload" class="btn btn-success">
    </form>
    <?php echo "<p><h4>".$statusMsg."</h4></p>";
    echo $showwatermark;
     ?>
                  
            </div>
        </div>
    </div>

</div>
</body>
</html>

Thursday, December 12, 2019

Google Maps JavaScript API with Places Library Autocomplete Address Field

Google Maps JavaScript API with Places Library Autocomplete Address Field

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Maps JavaScript API with Places Library Autocomplete Address Field</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Google Maps JavaScript library -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCdGv5cjpA0dMUCSolCf89tl_vgccGvsu0"></script>

<style>
#search_input {font-size:18px;}
.form-group{
 margin-bottom: 10px;margin-top:50px;
}
.form-group label{
 font-size:18px;
 font-weight: 600;
}
.form-group input{
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-group input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <p><h1>Google Maps JavaScript API with Places Library Autocomplete Address Field</h1></p>
   <!-- Autocomplete location search input --> 
   <div class="form-group">
    <label>Location:</label>
    <input type="text" class="form-control" id="search_input" placeholder="Type address..." />
   </div>
     </div>
   </div>
</div>
<script>
var searchInput = 'search_input';

$(document).ready(function () {
 var autocomplete;
 autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
  types: ['geocode'],
  /*componentRestrictions: {
   country: "USA"
  }*/
 });
 
 google.maps.event.addListener(autocomplete, 'place_changed', function () {
  var near_place = autocomplete.getPlace();
 });
});
</script>
</body>
</html>

Pagination using PHP, MySQLi and Bootstrap

Pagination using PHP, MySQLi and Bootstrap

<!DOCTYPE html>
<html>
<head>
 <title>Pagination using PHP, MySQLi and Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<?php 
 include"dbcon.php"; 
 $limit = isset($_POST["limit-records"]) ? $_POST["limit-records"] : 10;
 $page = isset($_GET['page']) ? $_GET['page'] : 1;
 $start = ($page - 1) * $limit;
 $result = $conn->query("SELECT * FROM customers LIMIT $start, $limit");
 $customers = $result->fetch_all(MYSQLI_ASSOC);
 
 $result1 = $conn->query("SELECT count(id) AS id FROM customers");
 $custCount = $result1->fetch_all(MYSQLI_ASSOC);
 $total = $custCount[0]['id']; 
 $pages = ceil( $total / $limit ); 
 
 $Previous = $page - 1;
 $Next = $page + 1;
?> 
<div class="container well" style="margin-top:20px;">
 <h1 class="text-center">Pagination using PHP MySQLi and Bootstrap</h1>
 <div class="row">
   <div class="col-md-10">
    <nav aria-label="Page navigation">
     <ul class="pagination">
        <li>
          <a href="bootstrap-pagination-php-mysql.php?page=<?= $Previous; ?>" aria-label="Previous">
            <span aria-hidden="true">« Previous</span>
          </a>
        </li>
        <?php for($i = 1; $i<= $pages; $i++) : 
       if ($i==$page) {$active = "class='active'"; 
       }else {$active = ""; } 
     ?>
         <li <?php echo $active; ?>><a href="bootstrap-pagination-php-mysql.php?page=<?= $i; ?>"><?= $i; ?></a></li>
        <?php endfor; ?> 
        
        <li>
          <a href="bootstrap-pagination-php-mysql.php?page=<?= $Next; ?>" aria-label="Next">
            <span aria-hidden="true">Next »</span>
          </a>
        </li>
      </ul>
    </nav>
   </div> 
   <div class="text-center" style="margin-top: 20px; " class="col-md-2">
    <form method="post" action="#">Show
      <select name="limit-records" id="limit-records">
       <option value="10" selected="selected">10</option>
       <?php foreach([10,100,500,1000,5000] as $limit): ?>
        <option <?php if( isset($_POST["limit-records"]) && $_POST["limit-records"] == $limit) echo "selected" ?> value="<?= $limit; ?>"><?= $limit; ?></option>
       <?php endforeach; ?>
      </select>
      entries
     </form>
   </div>
 </div>
 <div style="overflow-y: auto;">
   <table id="" class="table table-striped table-bordered">
          <thead>
                 <tr>
                     <th>Id</th>
                     <th>Name</th>
                     <th>Mobile</th>
                     <th>Address</th>
                     <th>Date</th>
                </tr>
            </thead>
          <tbody>
           <?php foreach($customers as $customer) :  ?>
            <tr>
             <td><?= $customer['id']; ?></td>
             <td><?= $customer['name']; ?></td>
             <td><?= $customer['mobile']; ?></td>
             <td><?= $customer['address']; ?></td>
             <td><?= $customer['createdOn']; ?></td>
            </tr>
           <?php endforeach; ?>
          </tbody>
        </table>
  </div>
</div>
<script type="text/javascript">
 $(document).ready(function(){
  $("#limit-records").change(function(){
   $('form').submit();
  })
 })
</script>
<style>
.active {background-color: #337ab7;border-color: #337ab7;}
</style>
</body>
</html>

//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Friday, December 6, 2019

Create a DataGrid with PHP MySQLi and jQuery EasyUI

Create a DataGrid with PHP MySQLi and jQuery EasyUI

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Create a DataGrid with PHP MySQLi and jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Create a DataGrid with PHP MySQLi and jQuery EasyUI</h2>
    <p>Click the buttons on datagrid toolbar to do crud actions.</p>
    <table id="dg" title="Users Management" class="easyui-datagrid" url="getData.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true" style="width:100%;height:400px;">
  <thead>
   <tr>
    <th field="first_name" width="50">First Name</th>
    <th field="last_name" width="50">Last Name</th>
    <th field="email" width="50">Email</th>
    <th field="phone" width="50">Phone</th>
   </tr>
  </thead>
 </table>
 <div id="toolbar">
  <div id="tb">
   <input id="term" placeholder="Type keywords...">
   <a href="javascript:void(0);" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
  </div>
  <div id="tb2" style="">
   <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
   <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
   <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
  </div>
 </div>
 <div id="dlg" class="easyui-dialog" style="width:450px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
  <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
   <h3>User Information</h3>
   <div style="margin-bottom:10px">
    <input name="first_name" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
   </div>
   <div style="margin-bottom:10px">
    <input name="last_name" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
   </div>
   <div style="margin-bottom:10px">
    <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
   </div>
   <div style="margin-bottom:10px">
    <input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
   </div>
  </form>
 </div>
 <div id="dlg-buttons">
  <a href="javascript:void(0);" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px;">Save</a>
  <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close');" style="width:90px;">Cancel</a>
 </div>
 <script type="text/javascript">
 function doSearch(){
  $('#dg').datagrid('load', {
   term: $('#term').val()
  });
 }
   
 var url;
 function newUser(){
  $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
  $('#fm').form('clear');
  url = 'addData.php';
 }
 function editUser(){
  var row = $('#dg').datagrid('getSelected');
  if (row){
   $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
   $('#fm').form('load',row);
   url = 'editData.php?id='+row.id;
  }
 }
 function saveUser(){
  $('#fm').form('submit',{
   url: url,
   onSubmit: function(){
    return $(this).form('validate');
   },
   success: function(response){
    var respData = $.parseJSON(response);
    if(respData.status == 0){
     $.messager.show({
      title: 'Error',
      msg: respData.msg
     });
    }else{
     $('#dlg').dialog('close');
     $('#dg').datagrid('reload');
    }
   }
  });
 }
 function destroyUser(){
  var row = $('#dg').datagrid('getSelected');
  if (row){
   $.messager.confirm('Confirm','Are you sure you want to delete this user?',function(r){
    if (r){
     $.post('deleteData.php', {id:row.id}, function(response){
      if(response.status == 1){
       $('#dg').datagrid('reload');
      }else{
       $.messager.show({
        title: 'Error',
        msg: respData.msg
       });
      }
     },'json');
    }
   });
  }
 }
 </script>
</body>
</html>

//getData.php
<?php
include"dbcon.php"; 
$page = isset($_POST['page']) ? intval($_POST['page']) : 1; 
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; 
 
$searchTerm = isset($_POST['term']) ? $conn->real_escape_string($_POST['term']) : ''; 
 
$offset = ($page-1)*$rows; 
 
$result = array(); 

$whereSQL = "first_name LIKE '$searchTerm%' OR last_name LIKE '$searchTerm%' OR email LIKE '$searchTerm%' OR phone LIKE '$searchTerm%'"; 
$result = $conn->query("SELECT COUNT(*) FROM tbl_users WHERE $whereSQL"); 
$row = $result->fetch_row(); 
$response["total"] = $row[0]; 

$result = $conn->query( "SELECT * FROM tbl_users WHERE $whereSQL ORDER BY id DESC LIMIT $offset,$rows"); 
 
$users = array(); 
while($row = $result->fetch_assoc()){ 
    array_push($users, $row); 
} 
$response["rows"] = $users; 

echo json_encode($response);
?>

//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

//addData.php
<?php
include"dbcon.php"; 
$response = array( 
    'status' => 0, 
    'msg' => 'Some problems occurred, please try again.' 
); 
if(!empty($_REQUEST['first_name']) && !empty($_REQUEST['last_name']) && !empty( $_REQUEST['email']) && !empty($_REQUEST['phone'])){ 
    $first_name = $_REQUEST['first_name']; 
    $last_name = $_REQUEST['last_name']; 
    $email = $_REQUEST['email']; 
    $phone = $_REQUEST['phone'];
 
    $sql = "INSERT INTO tbl_users(first_name,last_name,email,phone) VALUES ('$first_name','$last_name','$email','$phone')"; 
    $insert = $conn->query($sql); 
 
 if($insert){ 
        $response['status'] = 1; 
        $response['msg'] = 'User data has been added successfully!'; 
    } 
}else{ 
    $response['msg'] = 'Please fill all the mandatory fields.'; 
}
echo json_encode($response); 
?>

//editData.php
<?php
include"dbcon.php"; 
$response = array( 
    'status' => 0, 
    'msg' => 'Some problems occurred, please try again.' 
);
if(!empty($_REQUEST['first_name']) && !empty($_REQUEST['last_name']) && !empty( $_REQUEST['email']) && !empty($_REQUEST['phone'])){ 
    $first_name = $_REQUEST['first_name']; 
    $last_name = $_REQUEST['last_name']; 
    $email = $_REQUEST['email']; 
    $phone = $_REQUEST['phone']; 
     
    if(!empty($_REQUEST['id'])){ 
        $id = intval($_REQUEST['id']); 
         
    
        $sql = "UPDATE tbl_users SET first_name='$first_name', last_name='$last_name', email='$email', phone='$phone' WHERE id = $id"; 
        $update = $conn->query($sql); 
         
        if($update){ 
            $response['status'] = 1; 
            $response['msg'] = 'User data has been updated successfully!'; 
        } 
    } 
}else{ 
    $response['msg'] = 'Please fill all the mandatory fields.'; 
} 
echo json_encode($response); 
?>

//deleteData.php
<?php
include"dbcon.php"; 
$response = array( 
    'status' => 0, 
    'msg' => 'Some problems occurred, please try again.' 
); 
if(!empty($_REQUEST['id'])){ 
    $id = intval($_REQUEST['id']); 
     

    $sql = "DELETE FROM tbl_users WHERE id = $id"; 
    $delete = $conn->query($sql); 
     
    if($delete){ 
        $response['status'] = 1; 
        $response['msg'] = 'User data has been deleted successfully!'; 
    } 
} 
echo json_encode($response);
?>

Thursday, December 5, 2019

Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax

Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax

<!DOCTYPE html>
<html>
 <head>
  <title>Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
 $(document).ready(function(){
 $('#sample_form').on('submit', function(event){
   event.preventDefault();
   var count_error = 0;

   if($('#username').val() == '')
   {
    $('#first_name_error').text('User Name is required');
    count_error++;
   }
   else
   {
    $('#first_name_error').text('');
   }

   if($('#useremail').val() == '')
   {
    $('#last_name_error').text('Email is required');
    count_error++;
   }
   else
   {
    $('#last_name_error').text('');
   }

   if(count_error == 0)
   {
    $.ajax({
   url:"ajax_progressbar.php",
   method:"POST",
   data:$(this).serialize(),
   beforeSend:function()
   {
    $('#save').attr('disabled', 'disabled');
    $('#process').css('display', 'block');
   },
   success:function(data)
   { 
    var percentage = 0;

    var timer = setInterval(function(){
     percentage = percentage + 20;
     progress_bar_process(percentage, timer,data);
    }, 1000);
   }
  })
   }
   else
   {
    return false;
   }
   
  });
  
  function progress_bar_process(percentage, timer,data)
  {
 $('.progress-bar').css('width', percentage + '%');
 if(percentage > 100)
 {
  clearInterval(timer);
  $('#sample_form')[0].reset();
  $('#process').css('display', 'none');
  $('.progress-bar').css('width', '0%');
  $('#save').attr('disabled', false);
  $('#success_message').html(data);
  setTimeout(function(){
   $('#success_message').html('');
  }, 5000);
 }
  }
  
 });
</script>
 </head>
 <body>
  <br />
  <br />
  <div class="container">
   <h1 align="center">Create a Progress Bar Data Insert using PHP Mysqli bootstrap and Jquery Ajax</h1>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Registration</h3>
    </div>
      <div class="panel-body">
       <span id="success_message"></span>
       <form method="post" id="sample_form">
     <div class="form-group">
        <label>User Name</label>
         <input type="text" name="username" id="username" class="form-control" />
         <span id="first_name_error" class="text-danger"></span>
        </div>
  <div class="form-group">
         <label>Email</label>
         <input type="text" name="useremail" id="useremail" class="form-control" />
         <span id="last_name_error" class="text-danger"></span>
        </div>
  <div class="form-group" align="center">
         <input type="submit" name="save" id="save" class="btn btn-info" value="Save" />
        </div>
       </form>
       <div class="form-group" id="process" style="display:none;">
        <div class="progress">
       <div class="progress-bar progress-bar-striped active bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=""></div>
      </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>

//ajax_progressbar.php
<?php
include"dbcon.php"; 
if(isset($_POST["username"]))
{
  $username  = $_POST["username"];
  $useremail  = $_POST["useremail"];
  $sql = "INSERT INTO tbl_user (username, useremail) VALUES ('".$username."','".$useremail."')";
    if ($conn->query($sql) === TRUE) {
     echo "<div class='alert alert-success'>New record created successfully</div>";
     $conn->close();
    } else {
    echo "Error: " . $sql . "<br>" . $conn->error."";
    }
}
?>

//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Monday, November 11, 2019

Jquery Page Scrolling

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Page Scrolling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {   
    $('.top-title').click(function(){       
     $('html, body').animate({
      scrollTop: $(".middle").offset().top
     }, 2000);               
     });
    $('.middle-title').click(function(){    
     $('html, body').animate({
      scrollTop: $(".bottom").offset().top
     }, 2000);               
     });
    $('.bottom-title').click(function(){      
     $('html, body').animate({
      scrollTop: $(".top").offset().top
     }, 2000);              
     });
});
</script>
<style>
.top, .middle, .bottom{
 padding:30px;
 }
.top{
 height:600px;
 background-color:#FFC;
 margin-bottom:30px;
 border:2px solid #FF9;
 }
.middle{
 height:600px;
 background-color:#FF9;
 border:2px solid #FF6;
 margin-bottom:30px;
 }
.bottom{
 height:600px;
 background-color:#FF6;
 border:2px solid #FF3;
 margin-bottom:30px;
 } 
.top-title, .middle-title, .bottom-title{
 cursor:pointer;
 margin-top:300px;
 text-align:center;
 text-decoration:underline;
 font-size:32px;
 font-weight:700;} 
</style>
</head>
<body>
<h1>jQuery Page Scrolling</h1>
<div class="main">
<div class="top">
 <div class="top-title">Click Here to go to the middle box</div>
</div>
<div class="middle">
 <div class="middle-title">Click Here to go to the bottom box</div>
</div>
<div class="bottom">
 <div class="bottom-title">Click Here to go to the top box</div>
</div>
</div>
</body>
</html>

Wednesday, October 30, 2019

Simple Registration Form using Bootstrap PHP and Mysqli

Simple Registration Form using Bootstrap PHP and Mysqli

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Registration Form using Bootstrap PHP and Mysqli</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
 body{
  color: #fff;
  font-family: 'Roboto', sans-serif;
  background-image: url(''),linear-gradient(100deg,#18b99b,#b1f056);
 }
    .form-control{
  height: 40px;
  box-shadow: none;
  color: #969fa4;
 }
 .form-control:focus{
  border-color: #5cb85c;
 }
    .form-control, .btn{        
        border-radius: 3px;
    }
 .signup-form{
  width: 400px;
  margin: 0 auto;
  padding: 30px 0;
 }
 .signup-form h2{
  color: #636363;
        margin: 0 0 15px;
  position: relative;
  text-align: center;
    }
 .signup-form h2:before, .signup-form h2:after{
  content: "";
  height: 2px;
  width: 30%;
  background: #d4d4d4;
  position: absolute;
  top: 50%;
  z-index: 2;
 }
 .signup-form h2:before{
  left: 0;
 }
 .signup-form h2:after{
  right: 0;
 }
    .signup-form .hint-text{
  color: #999;
  margin-bottom: 30px;
  text-align: center;
 }
    .signup-form form{
  color: #999;
  border-radius: 3px;
     margin-bottom: 15px;
        background: #f2f3f7;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
 .signup-form .form-group{
  margin-bottom: 20px;
 }
 .signup-form input[type="checkbox"]{
  margin-top: 3px;
 }
 .signup-form .btn{        
        font-size: 16px;
        font-weight: bold;  
  min-width: 140px;
        outline: none !important;
    }
 .signup-form .row div:first-child{
  padding-right: 10px;
 }
 .signup-form .row div:last-child{
  padding-left: 10px;
 }     
    .signup-form a{
  color: #fff;
  text-decoration: underline;
 }
    .signup-form a:hover{
  text-decoration: none;
 }
 .signup-form form a{
  color: #5cb85c;
  text-decoration: none;
 } 
 .signup-form form a:hover{
  text-decoration: underline;
 }
</style> 
</head>
<body>
<div class="signup-form">
    <form action="confirmation.php" method="post" autocomplete="off">
  <h2>Register</h2>
  <p class="hint-text">Create your account. It's free and only takes a minute.</p>
        <div class="form-group">
   <div class="row">
    <div class="col-xs-6"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
    <div class="col-xs-6"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
   </div>         
        </div>
        <div class="form-group">
         <input type="email" class="form-control" name="email" placeholder="Email" required="required">
        </div>
  <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="Password" required="required">
        </div>
  <div class="form-group">
            <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
        </div>        
        <div class="form-group">
   <label class="checkbox-inline"><input type="checkbox" name="agree" required="required"> I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a></label>
  </div>
  <div class="form-group">
            <button type="submit" class="btn btn-success btn-lg btn-block">Register Now</button>
        </div>
    </form>
 <div class="text-center">Already have an account? <a href="#">Sign in</a></div>
</div>
</body>
</html>

//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

//confirmation.php
<?php
include"dbcon.php"; 
$first_name  = $_POST['first_name'];
$last_name  = $_POST['last_name'];
$email  = $_POST['email']; 
$password  = $_POST['password']; 
$sql = "INSERT INTO user (fname, lname, emailadd, pass)
VALUES ('".$first_name."','".$last_name."','".$email."','".$password."')";
if ($conn->query($sql) === TRUE) {
 echo "<h1 align='center'>New record created successfully</h1>";
} else {
 echo "Error: " . $sql . "<br>" . $conn->error."";
}
$conn->close();
?>

Saturday, October 26, 2019

Data Table with Add, Edit and Delete Row Using PHP,Mysqli jquery Ajax

Data Table with Add, Edit and Delete Row Using PHP,Mysqli jquery Ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Table with Add, Edit and Delete Row Using PHP,Mysqli jquery Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    body {
        color: #404E67;
        background: #F5F7FA;
  font-family: 'Open Sans', sans-serif;
 }
 .table-wrapper {
  width: 700px;
  margin: 30px auto;
        background: #fff;
        padding: 20px; 
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
    .table-title {
        padding-bottom: 10px;
        margin: 0 0 10px;
    }
    .table-title h2 {
        margin: 6px 0 0;
        font-size: 22px;
    }
    .table-title .add-new {
        float: right;
  height: 30px;
  font-weight: bold;
  font-size: 12px;
  text-shadow: none;
  min-width: 100px;
  border-radius: 50px;
  line-height: 13px;
    }
 .table-title .add-new i {
  margin-right: 4px;
 }
    table.table {
        table-layout: fixed;
    }
    table.table tr th, table.table tr td {
        border-color: #e9e9e9;
    }
    table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
    }
    table.table th:last-child {
        width: 100px;
    }
    table.table td a {
  cursor: pointer;
        display: inline-block;
        margin: 0 5px;
  min-width: 24px;
    }   
 table.table td a.add {
        color: #27C46B;
    }
    table.table td a.edit {
        color: #FFC107;
    }
    table.table td a.delete {
        color: #E34724;
    }
    table.table td i {
        font-size: 19px;
    }
 table.table td a.add i {
        font-size: 24px;
     margin-right: -1px;
        position: relative;
        top: 3px;
    }    
    table.table .form-control {
        height: 32px;
        line-height: 32px;
        box-shadow: none;
        border-radius: 2px;
    }
 table.table .form-control.error {
  border-color: #f50000;
 }
 table.table td .add {
  display: none;
 }
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('[data-toggle="tooltip"]').tooltip();
 var actions = $("table td:last-child").html();
 // Append table with add row form on add new button click
    $(".add-new").click(function(){
  $(this).attr("disabled", "disabled");
  var index = $("table tbody tr:last-child").index();
        var row = '<tr>' +
            '<td><input type="text" class="form-control" name="name" id="txtname"></td>' +
            '<td><input type="text" class="form-control" name="department" id="txtdepartment"></td>' +
            '<td><input type="text" class="form-control" name="phone" id="txtphone"></td>' +
   '<td>' + actions + '</td>' +
        '</tr>';
     $("table").append(row);  
  $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();
    });
 
 // Add row on add button click
 $(document).on("click", ".add", function(){
  var empty = false;
  var input = $(this).parents("tr").find('input[type="text"]');
        input.each(function(){
   if(!$(this).val()){
    $(this).addClass("error");
    empty = true;
   } else{
                $(this).removeClass("error");
            }
  });
  var txtname = $("#txtname").val();
  var txtdepartment = $("#txtdepartment").val();
  var txtphone = $("#txtphone").val();
  $.post("ajax_add.php", { txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone}, function(data) {
   $("#displaymessage").html(data);
  });
  $(this).parents("tr").find(".error").first().focus();
  if(!empty){
   input.each(function(){
    $(this).parent("td").html($(this).val());
   });   
   $(this).parents("tr").find(".add, .edit").toggle();
   $(".add-new").removeAttr("disabled");
  } 
    });
 // Delete row on delete button click
 $(document).on("click", ".delete", function(){
        $(this).parents("tr").remove();
  $(".add-new").removeAttr("disabled");
  var id = $(this).attr("id");
  var string = id;
  $.post("ajax_delete.php", { string: string}, function(data) {
   $("#displaymessage").html(data);
  });
    });
 // update rec row on edit button click
 $(document).on("click", ".update", function(){
  var id = $(this).attr("id");
  var string = id;
        var txtname = $("#txtname").val();
  var txtdepartment = $("#txtdepartment").val();
  var txtphone = $("#txtphone").val();
  $.post("ajax_update.php", { string: string,txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone}, function(data) {
   $("#displaymessage").html(data);
  });
    });
 // Edit row on edit button click
 $(document).on("click", ".edit", function(){  
        $(this).parents("tr").find("td:not(:last-child)").each(function(i){
   if (i=='0'){
    var idname = 'txtname';
   }else if (i=='1'){
    var idname = 'txtdepartment';
   }else if (i=='2'){
    var idname = 'txtphone';
   }else{} 
   $(this).html('<input type="text" name="updaterec" id="' + idname + '" class="form-control" value="' + $(this).text() + '">');
  });  
  $(this).parents("tr").find(".add, .edit").toggle();
  $(".add-new").attr("disabled", "disabled");
  $(this).parents("tr").find(".add").removeClass("add").addClass("update");
    });
});
</script> 
</head>
<body>
    <div class="container"><p><h1 align="center">Data Table with Add and Delete Row Using PHP,Mysqli jquery</h1><div id="displaymessage"></div></p>
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-8"><h2>Employee <b>Details</b></h2></div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
                    </div>
                </div>
            </div>
   <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Department</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
<?php 
include"dbcon.php"; 
$query_pag_data = "SELECT * from students";
$result_pag_data = mysqli_query($conn, $query_pag_data);
while($row = mysqli_fetch_assoc($result_pag_data)) {
 $student_id=$row['student_id']; 
 $student_name=$row['student_name']; 
 $department=$row['department']; 
 $phone=$row['phone']; 
?>
                    <tr>
                        <td><?php echo $student_name; ?></td>
                        <td><?php echo $department; ?></td>
                        <td><?php echo $phone; ?></td>
                        <td>
       <a class="add" title="Add" data-toggle="tooltip" id="<?php echo $student_id; ?>"><i class="fa fa-user-plus"></i></a>
                            <a class="edit" title="Edit" data-toggle="tooltip" id="<?php echo $student_id; ?>"><i class="fa fa-pencil"></i></a>
                            <a class="delete" title="Delete" data-toggle="tooltip" id="<?php echo $student_id; ?>"><i class="fa fa-trash-o"></i></a>
                        </td>
                    </tr>   
<?php } ?>     
                </tbody>
            </table>
        </div>
    </div>     
</body>
</html>

<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

<?php
include"dbcon.php"; 
$txtname  = $_POST['txtname'];
$txtdepartment  = $_POST['txtdepartment'];
$txtphone  = $_POST['txtphone'];
if ($txtname==''){
 echo "<p class='btn btn-info' align='center'>Please Insert YOUr name</p>";
}else{ 
 $sql = "INSERT INTO students (student_name, department, phone)
 VALUES ('".$txtname."','".$txtdepartment."','".$txtphone."')";
 if ($conn->query($sql) === TRUE) {
 echo "<p class='btn btn-info' align='center'>New record created successfully</p>";
 } else {
 echo "Error: " . $sql . "<br>" . $conn->error."";
 }
 $conn->close();
} 
?>

<?php
include"dbcon.php"; 
 $id=$_POST['string'];
 $sql = "delete from students where student_id='$id'";
 if ($conn->query($sql) === TRUE) {
  echo "<p class='btn btn-info' align='center'>Record deleted successfully</p>";
 } else {
  echo "Error deleting record: " . $conn->error;
 } 

?>

<?php
include"dbcon.php"; 
$string  = $_POST['string'];
$txtname  = $_POST['txtname'];
$txtdepartment  = $_POST['txtdepartment'];
$txtphone  = $_POST['txtphone'];
if ($txtname==''){
 echo "<p class='btn btn-info' align='center'>Please Insert YOUr name</p>";
}else{
 $sql = "UPDATE students SET student_name='$txtname', department='$txtdepartment', phone='$txtphone' WHERE student_id = '$string' ";
 if ($conn->query($sql) === TRUE) {
  echo "Record updated successfully";
 } else {
  echo "Error updating record: " . $conn->error;
 } 
}
?>

Saturday, October 19, 2019

PHP MySQLi Insert Data Into Database

PHP MySQLi Insert Data Into Database

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP MySQLi Insert Data Into Database</title>
</head>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testingdb";
// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if(isset($_POST["submit"])){
 $sql = "INSERT INTO students (student_name, student_email, student_city)
 VALUES ('".$_POST["stu_name"]."','".$_POST["stu_email"]."','".$_POST["stu_city"]."')";

 if ($conn->query($sql) === TRUE) {
 echo "<script type= 'text/javascript'>alert('New record created successfully');</script>";
 } else {
 echo "<script type= 'text/javascript'>alert('Error: " . $sql . "<br>" . $conn->error."');</script>";
 }
 $conn->close();
}
?>
<div id="main">
<center>
<h1>Insert data into database using mysqli</h1>
<div id="registration">
<h2>Student's Form</h2>
<hr/>
<form action="" method="post">
<label>Student Name :</label>
<input type="text" name="stu_name" id="name" required="required" placeholder="Please Enter Name"/><br /><br />
<label>Student Email :</label>
<input type="email" name="stu_email" id="email" required="required" placeholder="john123@gmail.com"/><br/><br />
<label>Student City :</label>
<input type="text" name="stu_city" id="city" required="required" placeholder="Please Enter Your City"/><br/><br />
<input type="submit" value=" Submit " name="submit"/><br />
</form>
</div>
</center>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
 width:100%;
 font-family: 'Raleway', sans-serif;
}
h2{
 background-color: #C4F980;
 text-align:center;
 border-radius: 10px 10px 0 0;
 margin: -10px -40px;
 padding: 15px;
}
hr{
 border:0;
 border-bottom:1px solid #ccc;
 margin: 10px -40px;
 margin-bottom: 30px;
}
#registration{
 width:300px;text-align:left;
 border-radius: 10px;
 font-family:raleway;
 border: 2px solid #ccc;
 padding: 10px 40px 25px;
 margin-top: 70px;
}
input[type=text],input[type=email]{
 width:99.5%;
 padding: 10px;
 margin-top: 8px;
 border: 1px solid #ccc;
 padding-left: 5px;
 font-size: 16px;
 font-family:raleway;
}
input[type=submit]{
 width: 100%;
 background-color:#7ECF16;
 color: white;
 border: 2px solid #6BB30F;
 padding: 10px;
 font-size:20px;
 cursor:pointer;
 border-radius: 5px;
 margin-bottom: -12px;
}
</style>
</body>
</html>

Friday, October 18, 2019

Data Table using Mysqli Database and Bootstrap with Modal Form

Data Table using Mysqli Database and Bootstrap with Modal Form

//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Table using Mysqli Database and Bootstrap with Modal Form</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    body {
        color: #566787;
  background: #f5f5f5;
  font-family: 'Varela Round', sans-serif;
  font-size: 13px;
 }
 .table-wrapper {
        background: #fff;
        padding: 20px 25px;
        margin: 30px 0;
  border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
 .table-title {        
  padding-bottom: 15px;
  background: #0d2438;
  color: #fff;
  padding: 16px 30px;
  margin: -20px -25px 10px;
  border-radius: 3px 3px 0 0;
    }
    .table-title h2 {
  margin: 5px 0 0;
  font-size: 24px;
 }
 .table-title .btn-group {
  float: right;
 }
 .table-title .btn {
  color: #fff;
  float: right;
  font-size: 13px;
  border: none;
  min-width: 50px;
  border-radius: 2px;
  border: none;
  outline: none !important;
  margin-left: 10px;
 }
 .table-title .btn i {
  float: left;
  font-size: 21px;
  margin-right: 5px;
 }
 .table-title .btn span {
  float: left;
  margin-top: 2px;
 }
    table.table tr th, table.table tr td {
        border-color: #e9e9e9;
  padding: 12px 15px;
  vertical-align: middle;
    }
 table.table tr th:first-child {
  width: 60px;
 }
 table.table tr th:last-child {
  width: 100px;
 }
    table.table-striped tbody tr:nth-of-type(odd) {
     background-color: #fcfcfc;
 }
 table.table-striped.table-hover tbody tr:hover {
  background: #f5f5f5;
 }
    table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
    } 
    table.table td:last-child i {
  opacity: 0.9;
  font-size: 22px;
        margin: 0 5px;
    }
 table.table td a {
  font-weight: bold;
  color: #566787;
  display: inline-block;
  text-decoration: none;
  outline: none !important;
 }
 table.table td a:hover {
  color: #2196F3;
 }
 table.table td a.edit {
        color: #FFC107;
    }
    table.table td a.delete {
        color: #F44336;
    }
    table.table td i {
        font-size: 19px;
    }
 table.table .avatar {
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
 }

    .pagination {
        float: right;
        margin: 0 0 5px;
    }
    .pagination li a {
        border: none;
        font-size: 13px;
        min-width: 30px;
        min-height: 30px;
        color: #999;
        margin: 0 2px;
        line-height: 30px;
        border-radius: 2px !important;
        text-align: center;
        padding: 0 6px;
    }
    .pagination li a:hover {
        color: #666;
    } 
    .pagination li.active a, .pagination li.active a.page-link {
        background: #03A9F4;
    }
    .pagination li.active a:hover {        
        background: #0397d6;
    }
 .pagination li.disabled i {
        color: #ccc;
    }
    .pagination li i {
        font-size: 16px;
        padding-top: 6px
    }
    .hint-text {
        float: left;
        margin-top: 10px;
        font-size: 13px;
    } 
   
 /* Custom checkbox */
 .custom-checkbox {
  position: relative;
 }
 .custom-checkbox input[type="checkbox"] {    
  opacity: 0;
  position: absolute;
  margin: 5px 0 0 3px;
  z-index: 9;
 }
 .custom-checkbox label:before{
  width: 18px;
  height: 18px;
 }
 .custom-checkbox label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  background: white;
  border: 1px solid #bbb;
  border-radius: 2px;
  box-sizing: border-box;
  z-index: 2;
 }
 .custom-checkbox input[type="checkbox"]:checked + label:after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: inherit;
  z-index: 3;
  transform: rotateZ(45deg);
 }
 .custom-checkbox input[type="checkbox"]:checked + label:before {
  border-color: #03A9F4;
  background: #03A9F4;
 }
 .custom-checkbox input[type="checkbox"]:checked + label:after {
  border-color: #fff;
 }
 .custom-checkbox input[type="checkbox"]:disabled + label:before {
  color: #b8b8b8;
  cursor: auto;
  box-shadow: none;
  background: #ddd;
 }
 /* Modal styles */
 .modal .modal-dialog {
  max-width: 400px;
 }
 .modal .modal-header, .modal .modal-body, .modal .modal-footer {
  padding: 20px 30px;
 }
 .modal .modal-content {
  border-radius: 3px;
 }
 .modal .modal-footer {
  background: #ecf0f1;
  border-radius: 0 0 3px 3px;
 }
    .modal .modal-title {
        display: inline-block;
    }
 .modal .form-control {
  border-radius: 2px;
  box-shadow: none;
  border-color: #dddddd;
 }
 .modal textarea.form-control {
  resize: vertical;
 }
 .modal .btn {
  border-radius: 2px;
  min-width: 100px;
 } 
 .modal form label {
  font-weight: normal;
 }
</style> 
<script type="text/javascript">
$(document).ready(function(){
 // Activate tooltip
 $('[data-toggle="tooltip"]').tooltip();
 
 // Select/Deselect checkboxes
 var checkbox = $('table tbody input[type="checkbox"]');
 $("#selectAll").click(function(){
  if(this.checked){
   checkbox.each(function(){
    this.checked = true;                        
   });
  } else{
   checkbox.each(function(){
    this.checked = false;                        
   });
  } 
 });
 checkbox.click(function(){
  if(!this.checked){
   $("#selectAll").prop("checked", false);
  }
 });
    $('#cmdeleteselected').click (function(event) {
  event.preventDefault();
        var selected = new Array();
   $("input:checkbox[name=options]:checked").each(function() {
    selected.push($(this).val());
   });
  var selectedString = selected.join(",");
        $.post("ajaxdeleteselected.php", {selected: selected },
        function(data){
   $('#deleteEmployeeModalselected').modal('hide');
            $('.result').html(data);
        });  
    });
});
</script>
</head>
<body>
<?php 
include"dbcon.php"; 
if(isset($_POST["cmdaddnew"])){
 $sql = "INSERT INTO tblemployees (fullname, emailadd, address, phone)
 VALUES ('".$_POST["fullname"]."','".$_POST["emailadd"]."','".$_POST["address"]."','".$_POST["phone"]."')";
 if ($conn->query($sql) === TRUE) {
 echo "<script type= 'text/javascript'>alert('New record created successfully');</script>";
 } else {
 echo "<script type= 'text/javascript'>alert('Error: " . $sql . "<br>" . $conn->error."');</script>";
 }
}
$page = (isset($_GET['page']))?$_GET['page']:'';
$editemployee = (isset($_GET['editemployee']))?$_GET['editemployee']:'';
$deleteemployee = (isset($_GET['deleteemployee']))?$_GET['deleteemployee']:'';

if ($deleteemployee==''){
}else{
echo "<script type= 'text/javascript'>$(document).ready(function(){ $('#deleteEmployeeModal').modal() });</script>";
}
if(isset($_POST["cmdelete"])){
   $sql = "DELETE FROM tblemployees WHERE id='$deleteemployee'";
 if ($conn->query($sql) === TRUE) {
  echo "<script type= 'text/javascript'>alert('Record deleted successfully');
  window.location.replace('bootstrap_data_table_with_modal_form.php');</script>";  
 } else {
  echo "<script type= 'text/javascript'>alert('Error deleting record: " . $sql . "<br>" . $conn->error."');</script>"; 
 }
}
if ($editemployee==''){
}else{
 echo "<script type= 'text/javascript'>$(document).ready(function(){ $('#editEmployeeModal').modal() });</script>";
 $results = mysqli_query($conn,"SELECT * FROM tblemployees Where id=$editemployee");
 while($row = mysqli_fetch_array($results))
 {
  $editid = $row["id"];
  $edit_fullname = $row["fullname"];
  $edit_emailadd = $row["emailadd"];
  $edit_address = $row["address"];
  $edit_phone = $row["phone"];
 }
}

if(isset($_POST["cmdedit"])){
   $editname = $_POST["editname"];
   $editemail = $_POST["editemail"];
   $editaddress = $_POST["editaddress"];
   $editphone = $_POST["editphone"];
   $sql = "UPDATE tblemployees SET fullname='$editname', emailadd='$editemail', address='$editaddress', phone='$editphone' WHERE id='$editemployee'";
   if (mysqli_query($conn, $sql)) {
     echo "<script type= 'text/javascript'>alert('Record updated successfully');
  window.location.replace('bootstrap_data_table_with_modal_form.php');</script>";  
   } else {
     echo "<script type= 'text/javascript'>alert('Error updating record: " . $sql . "<br>" . $conn->error."');</script>"; 
   }
}
if ($page==''){
 $page = "1";
}else{
 $page = $_GET['page'];
}
$cur_page = $page;
$page -= 1;
$per_page = 5; 
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
$query_pag_data = "SELECT * from tblemployees LIMIT $start, $per_page";
$result_pag_data = mysqli_query($conn, $query_pag_data);
?>
<div class="container"><div class = "result"></div>
 <p><h1 align="center">Data Table using Mysqli Database and Bootstrap with Modal Form</h1></p>
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-6">
      <h2>Manage <b>Employees</b></h2>
     </div>
     <div class="col-sm-6">
      <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Add New Employee</span></a>
      <a href="#deleteEmployeeModalselected" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>      
     </div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
     <tr>
      <th>
       <span class="custom-checkbox">
        <input type="checkbox" id="selectAll">
        <label for="selectAll"></label>
       </span>
      </th>
                        <th>Name</th>
                        <th>Email</th>
      <th>Address</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
    while($row = mysqli_fetch_assoc($result_pag_data)) {
     $fullname=$row['fullname']; 
     $emailadd=$row['emailadd']; 
     $address=$row['address']; 
     $phone=$row['phone']; 
    ?>
                    <tr>
      <td>
       <span class="custom-checkbox">
        <input type="checkbox" id="checkbox1" name="options" value="<?php echo $row['id']; ?>">
        <label for="checkbox1"></label>
       </span>
      </td>
                        <td><?php echo $fullname; ?></td>
                        <td><?php echo $emailadd; ?></td>
      <td><?php echo $address; ?></td>
                        <td><?php echo $phone; ?></td>
                        <td>
                            <a href="?editemployee=<?php echo $row['id']; ?>" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
                            <a href="?deleteemployee=<?php echo $row['id']; ?>" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
                        </td>
                    </tr>
    <?php } ?> 
                </tbody>
   </table>
   <div class="clearfix">
<?php
$msg = "";
$query_pag_num = mysqli_query($conn,"SELECT COUNT(*) AS mycount FROM tblemployees" ) or die(mysqli_error($this->dblink));
$res = mysqli_fetch_object($query_pag_num);
$count = $res->mycount;
$no_of_paginations = ceil($count / $per_page);
// ---------------Calculating the starting and endign values for the loop----------------------------------- 
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
//----------------------------------------------------------------------------------------------------------- 
$msg .= "<ul class=\"pagination\">";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='page-item active'><a href='?page=1' class='page-link'>First</a></li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='page-item' disabled><a href='?page=1'>First</a></li>";
}
// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='page-item active'><a href='?page=$pre' class='page-link'>Previous</a></li>";
} else if ($previous_btn) {
    $msg .= "<li class='page-item' disabled><a href='?page=1'>Previous</a></li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
    if ($cur_page == $i)
        $msg .= "<li p='$i' class='page-item active'><a href='?page=$i' class='page-link'>{$i}</a></li>";
    else
        $msg .= "<li p='$i' class='page-item'><a href='?page={$i}' class='page-link'>{$i}</a></li>";
}
// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='page-item'><a href='?page=$nex' class='page-link'>Next</a></li>";
} else if ($next_btn) {
    $msg .= "<li class='page-item' disabled><a href='#'>Next</a></li>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='page-item'><a href='?page=$no_of_paginations' class='page-link'>Last</a></li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='page-item' disabled><a href='?page=$no_of_paginations'>Last</a></li>";
}
$total_string = "<div class=\"hint-text\">Showing <b>" . $cur_page . "</b> out of <b>$no_of_paginations</b> entries</div>";
$msg = $msg . "</ul>";  
echo $total_string;
echo $msg;
?>
            </div>   
  </div>
</div> 

<!-- add Modal HTML -->
 <div id="addEmployeeModal" class="modal fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <form action="" method="post">
     <div class="modal-header">      
      <h4 class="modal-title">Add Employee</h4>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">     
      <div class="form-group">
       <label>Name</label>
       <input type="text" name="fullname" class="form-control" required>
      </div>
      <div class="form-group">
       <label>Email</label>
       <input type="email" name="emailadd" class="form-control" required>
      </div>
      <div class="form-group">
       <label>Address</label>
       <textarea class="form-control" name="address" required></textarea>
      </div>
      <div class="form-group">
       <label>Phone</label>
       <input type="text" name="phone" class="form-control" required>
      </div>     
     </div>
     <div class="modal-footer">
      <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
      <input type="submit" class="btn btn-success" name="cmdaddnew" value="Add">
     </div>
    </form>
   </div>
  </div>
 </div> 
 <!-- Edit Modal HTML -->
 <div id="editEmployeeModal" class="modal fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <form name="frmedit" action="" method="post">
     <div class="modal-header">      
      <h4 class="modal-title">Edit Employee</h4>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">     
      <div class="form-group">
       <label>Name</label>
       <input type="text" name="editname" value="<?php echo $edit_fullname; ?>" class="form-control" required>
      </div>
      <div class="form-group">
       <label>Email</label>
       <input type="email" name="editemail" value="<?php echo $edit_emailadd; ?>" class="form-control" required>
      </div>
      <div class="form-group">
       <label>Address</label>
       <textarea class="form-control" name="editaddress" required><?php echo $edit_address; ?></textarea>
      </div>
      <div class="form-group">
       <label>Phone</label>
       <input type="text" name="editphone" value="<?php echo $edit_phone; ?>" class="form-control" required>
      </div>     
     </div>
     <div class="modal-footer">
      <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
      <input type="submit" name="cmdedit" class="btn btn-info" value="Save">
     </div>
    </form>
   </div>
  </div>
 </div>
 
 <!-- Delete Modal HTML -->
 <div id="deleteEmployeeModal" class="modal fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <form name="frmdelete" action="" method="post">
     <div class="modal-header">      
      <h4 class="modal-title">Delete Employee</h4>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">     
      <p>Are you sure you want to delete these Records?</p>
      <p class="text-warning"><small>This action cannot be undone.</small></p>
     </div>
     <div class="modal-footer">
      <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
      <input type="submit" name="cmdelete" class="btn btn-danger" value="Delete">
     </div>
    </form>
   </div>
  </div>
 </div>
 <div id="deleteEmployeeModalselected" class="modal fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <form name="frmdelete" action="" method="post">
     <div class="modal-header">      
      <h4 class="modal-title">Delete Selected Employee</h4>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">     
      <p>Are you sure you want to all the selected delete Records?</p>
      <p class="text-warning"><small>This action cannot be undone.</small></p>
     </div>
     <div class="modal-footer">
      <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
      <a href="#" id="cmdeleteselected" class="btn btn-danger">Delete</a>
     </div>
    </form>
   </div>
  </div>
 </div>
</body>
</html>

//ajaxdeleteselected.php
<?php
include"dbcon.php"; 
$selected  = $_POST['selected'];
foreach ($selected as $value) {
 $sql = "DELETE FROM tblemployees WHERE id='$value'";
 if ($conn->query($sql) === TRUE) {
  echo "Record deleted successfully $value <br/>";  
 } else {
  echo "Error deleting record: " . $sql . "<br>" . $conn->error."'"; 
 } 

}
?>