Breaking
Coding Birds Online
Tag

coding birds online

Browsing
How to Do

How to send email with attachment in PHP

By
how-to-send-email-with-attachment-in-php-featured-image

Hi, If you are looking for the PHP script to learn how to send email with attachment in PHP without going to spam then you are in the right place. I know you searched a lot on Google to find source code but every code sends that to spam, not in the inbox. Check our demo to confirm.

Here I am going to give a PHP script by which your email with an attachment will always go to inbox. Sending an email with attachment is the most common task in web development.

When you are applying for a job or submitting any application, you often might be noticed that they accept a file to upload. It may be anything like your CV or resume, profile picture or any other document.

Sending details to email is sometimes good in terms of saving space on our server. Since we are not storing the details on our database or attachment to our server folders.

How to do that?

Here we will use a simple HTML form accepting basic details like name, email, subject, message, and an attachment. The attachment has a validation that only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload. In the previous tutorial, we learned about how to send email in PHP step by step but here we will do the same with attachment.

So what are we waiting for? Let’s start. Check the files and folder we are going to create.

how-to-send-email-with-attachment-in-php-coding-birds-online-file-and-folders
  • index.php is the main file which is a simple HTML form as I told above.
  • email-script.php is the script file that sends an email with an attachment.
  • validation-script.js is a javaScript validation file.
  • uploads folder saves the attachment to send emails and deletes later.

Now we should create these files. I am giving you just code block here. Make sure you put these CDN in to head off your index.php to work your code.

  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

And include this javaScript validation file also before closing to the body tag.

  1. <script src="validation-script.js"></script>
<script src="validation-script.js"></script>

index.php

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-lg-8 posts-list">
  4. <div class="card card-signin my-5">
  5. <div class="card-body">
  6. <center><img src="../website/img/coding-birds-online/coding-birds-online-favicon.png" width="70"></center>
  7. <h5 class="card-title text-center">Send email with attachment in PHP</h5>
  8. <form method="post" action="email-script.php" enctype="multipart/form-data" id="emailForm">
  9. <div class="form-group">
  10. <input type="text" name="name" id="name" class="form-control" placeholder="Name" >
  11. <div id="nameError" style="color: red;font-size: 14px;display: none">nameError</div>
  12. </div>
  13. <div class="form-group">
  14. <input type="email" name="email" id="email" class="form-control" placeholder="Email address" >
  15. <div id="emailError" style="color: red;font-size: 14px;display: none">emailError</div>
  16. </div>
  17. <div class="form-group">
  18. <input type="text" name="subject" id="subject" class="form-control" placeholder="Subject" >
  19. <div id="subjectError" style="color: red;font-size: 14px;display: none">subjectError</div>
  20. </div>
  21. <div class="form-group">
  22. <textarea name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
  23. <div id="messageError" style="color: red;font-size: 14px;display: none">messageError</div>
  24. </div>
  25. <div class="form-group">
  26. <input type="file" name="attachment" id="attachment" class="form-control">
  27. <div id="attachmentError" style="color: red;font-size: 14px;display: none">attachmentError</div>
  28. </div>
  29. <div class="submit">
  30. <input type="submit" name="submit" onclick="return validateEmailSendForm();" class="btn btn-success" value="SUBMIT">
  31. </div>
  32. </form>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 posts-list">
                <div class="card card-signin my-5">
                    <div class="card-body">
                        <center><img src="../website/img/coding-birds-online/coding-birds-online-favicon.png" width="70"></center>
                        <h5 class="card-title text-center">Send email with attachment in PHP</h5>
                        <form method="post" action="email-script.php" enctype="multipart/form-data" id="emailForm">
                            <div class="form-group">
                                <input type="text" name="name" id="name" class="form-control" placeholder="Name" >
                                <div id="nameError" style="color: red;font-size: 14px;display: none">nameError</div>
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" id="email" class="form-control" placeholder="Email address" >
                                <div id="emailError" style="color: red;font-size: 14px;display: none">emailError</div>
                            </div>
                            <div class="form-group">
                                <input type="text" name="subject" id="subject" class="form-control"  placeholder="Subject" >
                                <div id="subjectError" style="color: red;font-size: 14px;display: none">subjectError</div>
                            </div>
                            <div class="form-group">
                                <textarea name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
                                <div id="messageError" style="color: red;font-size: 14px;display: none">messageError</div>
                            </div>
                            <div class="form-group">
                                <input type="file" name="attachment" id="attachment" class="form-control">
                                <div id="attachmentError" style="color: red;font-size: 14px;display: none">attachmentError</div>
                            </div>
                            <div class="submit">
                                <input type="submit" name="submit" onclick="return validateEmailSendForm();" class="btn btn-success" value="SUBMIT">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

If you notice this form uses an action to email-script.php this file. Create this file also.

email-script.php

  1. <?php
  3. if(isset($_POST['submit'])){
  4. // Get the submitted form data
  5. $email = $_POST['email'];
  6. $name = $_POST['name'];
  7. $subject = $_POST['subject'];
  8. $message = $_POST['message'];
  9. $uploadStatus = 1;
  11. // Upload attachment file
  12. if(!empty($_FILES["attachment"]["name"])){
  14. // File path config
  15. $targetDir = "uploads/";
  16. $fileName = basename($_FILES["attachment"]["name"]);
  17. $targetFilePath = $targetDir . $fileName;
  18. $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
  20. // Allow certain file formats
  21. $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg');
  22. if(in_array($fileType, $allowTypes)){
  23. // Upload file to the server
  24. if(move_uploaded_file($_FILES["attachment"]["tmp_name"], $targetFilePath)){
  25. $uploadedFile = $targetFilePath;
  26. }else{
  27. $uploadStatus = 0;
  28. $statusMsg = "Sorry, there was an error uploading your file.";
  29. }
  30. }else{
  31. $uploadStatus = 0;
  32. $statusMsg = 'Sorry, only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload.';
  33. }
  34. }
  36. if($uploadStatus == 1){
  37. // Recipient
  38. $toEmail = $email;
  39. // Sender
  40. $from = 'info@codingbirdsonline.com';
  41. $fromName = 'Coding Birds Online';
  42. // Subject
  43. $emailSubject = 'Email attachment request Submitted by '.$name;
  44. // Message
  45. $htmlContent = '<h2>Contact Request Submitted</h2>
  46. <p><b>Name:</b> '.$name.'</p>
  47. <p><b>Email:</b> '.$email.'</p>
  48. <p><b>Subject:</b> '.$subject.'</p>
  49. <p><b>Message:</b><br/>'.$message.'</p>';
  51. // Header for sender info
  52. $headers = "From: $fromName"." <".$from.">";
  54. if(!empty($uploadedFile) && file_exists($uploadedFile)){
  55. // Boundary
  56. $semi_rand = md5(time());
  57. $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
  58. // Headers for attachment
  59. $headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\"";
  60. // Multipart boundary
  61. $message = "--{$mime_boundary}\n" . "Content-Type: text/html; charset=\"UTF-8\"\n" .
  62. "Content-Transfer-Encoding: 7bit\n\n" . $htmlContent . "\n\n";
  63. // Preparing attachment
  64. if(is_file($uploadedFile)){
  65. $message .= "--{$mime_boundary}\n";
  66. $fp = @fopen($uploadedFile,"rb");
  67. $data = @fread($fp,filesize($uploadedFile));
  68. @fclose($fp);
  69. $data = chunk_split(base64_encode($data));
  70. $message .= "Content-Type: application/octet-stream; name=\"".basename($uploadedFile)."\"\n" .
  71. "Content-Description: ".basename($uploadedFile)."\n" .
  72. "Content-Disposition: attachment;\n" . " filename=\"".basename($uploadedFile)."\"; size=".filesize($uploadedFile).";\n" .
  73. "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
  74. }
  76. $message .= "--{$mime_boundary}--";
  77. $returnpath = "-f" . $email;
  78. // Send email
  79. $mail = mail($toEmail, $emailSubject, $message, $headers, $returnpath);
  80. // Delete attachment file from the server
  81. @unlink($uploadedFile);
  82. }else{
  83. // Set content-type header for sending HTML email
  84. $headers .= "\r\n". "MIME-Version: 1.0";
  85. $headers .= "\r\n". "Content-type:text/html;charset=UTF-8";
  86. // Send email
  87. $mail = mail($toEmail, $emailSubject, $htmlContent, $headers);
  88. }
  90. // If mail sent
  91. if($mail){
  92. $statusMsg = 'Your email attachment request has been submitted successfully !';
  93. }else{
  94. $statusMsg = 'Your request submission failed, please try again.';
  95. }
  96. }
  97. echo '<script>alert("'.$statusMsg.'");window.location.href="./";</script>';
  98. }
  99. ?>
<?php

if(isset($_POST['submit'])){
    // Get the submitted form data
    $email = $_POST['email'];
    $name = $_POST['name'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    $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 = "Sorry, there was an error uploading your file.";
            }
        }else{
            $uploadStatus = 0;
            $statusMsg = 'Sorry, only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload.';
        }
    }

    if($uploadStatus == 1){
        // Recipient
        $toEmail = $email;
        // Sender
        $from = 'info@codingbirdsonline.com';
        $fromName = 'Coding Birds Online';
        // Subject
        $emailSubject = 'Email attachment 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 = 'Your email attachment request has been submitted successfully !';
        }else{
            $statusMsg = 'Your request submission failed, please try again.';
        }
    }
    echo '<script>alert("'.$statusMsg.'");window.location.href="./";</script>';
}
?>

validation-script.js

  1. function validateEmailSendForm() {
  2. var name = $("#name").val();
  3. var email = $("#email").val();
  4. var subject = $("#subject").val();
  5. var message = $("#message").val();
  6. var attachment = $("#attachment").val();
  8. if (name == ""){
  9. $("#nameError").show();
  10. $("#nameError").html("Please enter your name");
  11. $("#nameError").fadeOut(4000);
  12. $("#name").focus();
  13. return false;
  14. }else if (email == ""){
  15. $("#emailError").show();
  16. $("#emailError").html("Please enter your email");
  17. $("#emailError").fadeOut(4000);
  18. $("#email").focus();
  19. return false;
  20. }else if (!validateEmail(email)){
  21. $("#emailError").show();
  22. $("#emailError").html("Please enter valid email");
  23. $("#emailError").fadeOut(4000);
  24. $("#email").focus();
  25. return false;
  26. }else if (subject == ""){
  27. $("#subjectError").show();
  28. $("#subjectError").html("Please enter subject");
  29. $("#subjectError").fadeOut(4000);
  30. $("#subject").focus();
  31. return false;
  32. }else if (message == ""){
  33. $("#messageError").show();
  34. $("#messageError").html("Please enter some message");
  35. $("#messageError").fadeOut(4000);
  36. $("#message").focus();
  37. return false;
  38. }else if (attachment == ""){
  39. $("#attachmentError").show();
  40. $("#attachmentError").html("Please select a attachment");
  41. $("#attachmentError").fadeOut(4000);
  42. $("#attachment").focus();
  43. return false;
  44. }else{
  45. return true;
  46. }
  48. function validateEmail(inputText) {
  49. var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  50. if(inputText.match(mailformat)) {
  51. return true;
  52. } else{
  53. return false;
  54. }
  55. }
  56. }
function validateEmailSendForm() {
   var name = $("#name").val();
   var email = $("#email").val();
   var subject = $("#subject").val();
   var message = $("#message").val();
   var attachment = $("#attachment").val();

   if (name == ""){
       $("#nameError").show();
       $("#nameError").html("Please enter your name");
       $("#nameError").fadeOut(4000);
       $("#name").focus();
       return false;
   }else  if (email == ""){
       $("#emailError").show();
       $("#emailError").html("Please enter your email");
       $("#emailError").fadeOut(4000);
       $("#email").focus();
       return false;
   }else  if (!validateEmail(email)){
       $("#emailError").show();
       $("#emailError").html("Please enter valid email");
       $("#emailError").fadeOut(4000);
       $("#email").focus();
       return false;
   }else  if (subject == ""){
       $("#subjectError").show();
       $("#subjectError").html("Please enter subject");
       $("#subjectError").fadeOut(4000);
       $("#subject").focus();
       return false;
   }else if (message == ""){
       $("#messageError").show();
       $("#messageError").html("Please enter some message");
       $("#messageError").fadeOut(4000);
       $("#message").focus();
       return false;
   }else if (attachment == ""){
       $("#attachmentError").show();
       $("#attachmentError").html("Please select a attachment");
       $("#attachmentError").fadeOut(4000);
       $("#attachment").focus();
       return false;
   }else{
       return true;
   }

    function validateEmail(inputText) {
        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if(inputText.match(mailformat)) {
            return true;
        } else{
            return false;
        }
    }
}

Run the code!

Now it is time to run and test our code. If you did everything step by step then you will not face any errors and you will get output something like this.

how-to-send-email-with-attachment-in-php-coding-birds-online-output

This form is validated properly like empty fields, valid email and attachment file accepted. When you fill that form and hit the submit button then you will get the alert message of success or errors.

Check this also How to make a dynamic pie chart in PHP in 2 steps.

Attention !!! It may take 1 or 2 minutes to receive email with attachment so please have patience. But I am sure you will receive in primary inbox not to spam.

how-to-send-email-with-attachment-in-php-coding-birds-online-email-sent-output2
how-to-send-email-with-attachment-in-php-coding-birds-online-email-sent-output3

Source Code & Demo

You can download the full 100% working source code from here. You check this demo also.

Conclusion

I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.

Ok, Thanks for reading this article, see you in the next post.

Happy Coding 🙂

Keep Reading
By
Ajax & jQuery

Active inactive users in PHP: using jQuery AJAX

By
active-inactive-users-in-php-using-jquery-ajax-coding-birds-online

Making users active inactive is the most important and common feature in web applications and websites. In this tutorial, we are going to learn how to make active inactive users in PHP using jQuery AJAX without page refresh. You check this demo also. You can implement the same code with CodeIgniter as CI follows the MVC pattern.

Why we need it?

Suppose you have a web application in which employees doing registration and then after login and performs their tasks. Now if any user is doing some inappropriate activities then you disable his login account.

consider this example as you have a list of users or employees and you want to disable his account so that he failed to login. To do this just need to press a thumb down button and his status in the database table will be 0. And In the login query, you make check the only those people can log in to the system whose status is 1.

Check these posts also

So what are you waiting for? let’s get started. Check these files and folder structure.

active-inactive-users-in-php-using-jquery-ajax-coding-birds-online-file-and-folder-structure
  • index.php is the main file on which everything is to be performed
  • script.php is a logic file contains the code to perform active inactive operations
  • script.php uses the config.php is the connection file to the database
  • active-inactive-script.js is the javaScript file in which we wrote AJAX to avoid page refresh
  • bird_active_inactive_users.sql is the SQL file which is a database table which the following structure.
active-inactive-users-in-php-using-jquery-ajax-coding-birds-online-table-structure

Don’t worry I will provide the full 100% working source code so that you can download it and implement it to your machine. Let’s create these files. Make sure you use bootstrap and jQuery. Bootstrap is just for styling and optional but jQuery is mandatory since we are making AJAX request.

  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

And include this custom javaScript AJAX request file to the just below to jQuery. Here I am using version 3.4 of jQuery CDN. Here we are using javaScript and jQuery to enhance user experience.

You can learn more about JavaScript functions from this amazing article.

  1. <script src="active-inactive-script.js"></script>
<script src="active-inactive-script.js"></script>

index.php

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-lg-8 posts-list">
  4. <div class="card card-signin my-5">
  5. <div class="card-body">
  6. <center><img src="../website/img/coding-birds-online/coding-birds-online-favicon.png" width="70"></center>
  7. <h5 class="card-title text-center">Active Inactive users in PHP</h5>
  8. </div>
  9. <table id="exampleTable" class="table table-bordered" style="width: 100%">
  10. <thead id="thead">
  11. <tr style="background-color: #1573ff">
  12. <th>Sr.No</th>
  13. <th>Name</th>
  14. <th>Email</th>
  15. <th>Contact</th>
  16. <th>Action</th>
  17. </tr>
  18. </thead>
  19. <tbody id="tableBodyData">
  20. </tbody>
  21. </table>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 posts-list">
                <div class="card card-signin my-5">
                    <div class="card-body">
                        <center><img src="../website/img/coding-birds-online/coding-birds-online-favicon.png" width="70"></center>
                        <h5 class="card-title text-center">Active Inactive users in PHP</h5>
                    </div>
                    <table id="exampleTable" class="table table-bordered" style="width: 100%">
                        <thead id="thead">
                        <tr style="background-color: #1573ff">
                            <th>Sr.No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Contact</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="tableBodyData">
                        </tbody>
                    </table>
                    </div>
            </div>
        </div>
   </div>

active-inactive-script.js

  1. $(document).ready(function () {
  2. $.post("script.php",{key:"getAllUsers"},function (response) {
  3. $("#tableBodyData").html(response);
  4. })
  5. });
  7. function activeInactive(recordId,status) {
  8. var message = ((status == 0?" inactive ":" Active "));
  9. if (confirm("Are you sure to"+ message+ "the user")){
  10. $.post("script.php",{key:"activeInactive",status:status,recordId:recordId},function (response) {
  11. if (response == "success"){
  12. if (status == 0){
  13. $('#activeBtn'+recordId).show();
  14. $('#inactiveBtn'+recordId).hide();
  15. }else if (status == 1){
  16. $('#inactiveBtn'+recordId).show();
  17. $('#activeBtn'+recordId).hide();
  18. }
  19. alert("User is "+ message +"now");
  20. }
  21. });
  22. }
  23. }
$(document).ready(function () {
   $.post("script.php",{key:"getAllUsers"},function (response) {
        $("#tableBodyData").html(response);
   })
});

function activeInactive(recordId,status) {
    var message = ((status == 0?" inactive ":" Active "));
    if (confirm("Are you sure to"+ message+ "the user")){
        $.post("script.php",{key:"activeInactive",status:status,recordId:recordId},function (response) {
            if (response == "success"){
                if (status == 0){
                    $('#activeBtn'+recordId).show();
                    $('#inactiveBtn'+recordId).hide();
                }else if (status == 1){
                    $('#inactiveBtn'+recordId).show();
                    $('#activeBtn'+recordId).hide();
                }
                alert("User is "+ message +"now");
            }
        });
    }
}

script.php

  1. <?php
  2. include "config.php";
  3. if ($_POST['key'] == "getAllUsers") {
  4. $tableData = '';
  5. $sr = 1;
  6. $query = "SELECT * FROM bird_active_inactive_users";
  7. $result = $connection->query($query);
  8. if ($result->num_rows>0){
  9. while ($row = $result->fetch_object()){
  10. $buttonActive = (($row->status == 0)?'block':'none');
  11. $buttonInActive = (($row->status == 1)?'block':'none');
  12. $tableData .='<tr>
  13. <td>'.$sr.'</td>
  14. <td>'.$row->name.'</td>
  15. <td>'.$row->email.'</td>
  16. <td>'.$row->contact.'</td>
  17. <td><a href="javaScript:void(0)" title="Active" style="display:'.$buttonActive.'" id="activeBtn'.$row->id.'" onclick="activeInactive(\''.$row->id.'\',1);" class="btn btn-success btn-sm"> <i class="fa fa-thumbs-up"></i></a>
  18. <a href="javaScript:void(0)" title="In active" style="display:'.$buttonInActive.'" id="inactiveBtn'.$row->id.'" onclick="activeInactive(\''.$row->id.'\',0);" class="btn btn-danger btn-sm"> <i class="fa fa-thumbs-down"></i></a> </td>
  19. </tr>';
  20. $sr++;
  21. }
  22. }
  23. echo $tableData;
  24. }
  26. if ($_POST['key'] == "activeInactive"){
  27. $status = $_POST['status'];
  28. $recordId = $_POST['recordId'];
  29. $query = "UPDATE bird_active_inactive_users SET status='$status' WHERE id='$recordId'";
  30. $result = $connection->query($query);
  31. if ($result){
  32. echo "success";
  33. }
  34. }
<?php
include "config.php";
if ($_POST['key'] == "getAllUsers") {
    $tableData = '';
    $sr = 1;
    $query = "SELECT * FROM bird_active_inactive_users";
    $result = $connection->query($query);
    if ($result->num_rows>0){
        while ($row = $result->fetch_object()){
            $buttonActive = (($row->status == 0)?'block':'none');
            $buttonInActive = (($row->status == 1)?'block':'none');
            $tableData .='<tr>
                <td>'.$sr.'</td>
                <td>'.$row->name.'</td>
                <td>'.$row->email.'</td>
                <td>'.$row->contact.'</td>
                <td><a href="javaScript:void(0)" title="Active" style="display:'.$buttonActive.'" id="activeBtn'.$row->id.'" onclick="activeInactive(\''.$row->id.'\',1);" class="btn btn-success btn-sm"> <i class="fa fa-thumbs-up"></i></a>
                <a href="javaScript:void(0)" title="In active" style="display:'.$buttonInActive.'" id="inactiveBtn'.$row->id.'" onclick="activeInactive(\''.$row->id.'\',0);" class="btn btn-danger btn-sm"> <i class="fa fa-thumbs-down"></i></a> </td>
            </tr>';
            $sr++;
        }
    }
    echo $tableData;
}

if ($_POST['key'] == "activeInactive"){
    $status = $_POST['status'];
    $recordId = $_POST['recordId'];
    $query = "UPDATE bird_active_inactive_users SET status='$status' WHERE id='$recordId'";
    $result = $connection->query($query);
    if ($result){
        echo "success";
    }
}

config.php

  1. <?php
  2. $connection = new mysqli("localhost","root","","codingbirds");
  3. if (! $connection){
  4. die("Error in connection".$connection->connect_error);
  5. }
<?php
$connection = new mysqli("localhost","root","","codingbirds");
if (! $connection){
    die("Error in connection".$connection->connect_error);
}

Run the Code!

If you followed the steps and you are confident that everything is fine then its time to check the code. Then you will get the output something like this. Create the table and have some data otherwise you will get blank or you can import the same table as I will provide the source code.

active-inactive-users-in-php-using-jquery-ajax-coding-birds-online-output

The red button is to inactive the user and green is to make the user active. Here I haven’t created a login system. This tutorial is to demonstrate how to make active inactive users in PHP using jQuery AJAX.

Source Code & Demo

You can download the full 100% working source code from here. You check this demo also.

Conclusion

I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.

Ok, Thanks for reading this article, see you in the next post.

Happy Coding 🙂

Keep Reading
By
How to Do

How to partially hide email address in PHP, AJAX

By
how-to-partially-hide-email-address-in-php-using-ajax-coding-birds-online-featured-image

To hide email addresses or contact numbers partially is the most common thing in web application development. If you might have noticed on so many websites when you register by using your email id or contact number, then they shoot a verification code on your email or phone.

And you can’t see the full email address or contact. They make it partially hidden by using some stars *. You can check this demo also.

So If you are looking to do the same thing on PHP and looking for how to partially hide email address in PHP using AJAX then you are in the right place.

Check this post also on how to clone a specific folder from a git repository.

How to do?

Here I will use a simple form accepting email id. When you press the submit button you will get a partially hidden email without page refresh.

To do this I will use AJAX functionality so that we can achieve this without page refresh. So without wasting time lets make out hands dirty with code.

  • Create index.php file is the main file
  • Now create script.php file is the logic file to hide email address partially.

index.php

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
  8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  10. <title>How to partially hide email address in PHP using AJAX - Coding Birds Online</title>
  11. <style>.required{color: #FF0000;}</style>
  12. </head>
  13. <body>
  14. <div class="container">
  15. <div class="row">
  16. <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
  17. <div class="card card-signin my-5">
  18. <div class="card-body">
  19. <center><img width="50" src="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png"></center>
  20. <h5 class="card-title text-center">Partially hide email address in php </h5>
  21. <form id="myForm">
  22. <div class="form-label-group">
  23. <label for="inputEmail">Email <span class="required">*</span></label>
  24. <input type="text" name="email" id="email" class="form-control" placeholder="Enter email ">
  25. </div><br/>
  26. <div id="partiallyHiddenEmail"></div><br/>
  27. <button type="submit" name="submitBtn" id="submitBtn" class="btn btn-md btn-primary btn-block text-uppercase" >Hide</button>
  28. </form>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  35. <script type="text/javascript">
  36. $("form#myForm").on("submit",function (e) {
  37. e.preventDefault();
  38. var email = $("#email").val();
  39. if (email == ""){
  40. alert("Please enter email");
  41. $("#email").focus();
  42. }else if (!validateEmail(email)){
  43. alert("Please enter valid email");
  44. $("#email").focus();
  45. } else {
  46. $.post("script.php",{key:"hideEmailAddress",email:email},function (response) {
  47. $("#partiallyHiddenEmail").html(response);
  48. });
  49. }
  50. });
  52. function validateEmail(inputText) {
  53. var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  54. if(inputText.match(mailformat)) {
  55. return true;
  56. } else{
  57. return false;
  58. }
  59. }
  60. </script>
  61. </body>
  62. </html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>How to partially hide email address in PHP using AJAX - Coding Birds Online</title>
    <style>.required{color: #FF0000;}</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <center><img width="50" src="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png"></center>
                    <h5 class="card-title text-center">Partially hide email address in php </h5>
                    <form id="myForm">
                        <div class="form-label-group">
                            <label for="inputEmail">Email <span class="required">*</span></label>
                            <input type="text" name="email" id="email" class="form-control" placeholder="Enter email ">
                        </div><br/>
                        <div id="partiallyHiddenEmail"></div><br/>
                        <button type="submit" name="submitBtn" id="submitBtn" class="btn btn-md btn-primary btn-block text-uppercase" >Hide</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
   $("form#myForm").on("submit",function (e) {
       e.preventDefault();
      var email = $("#email").val();
      if (email == ""){
          alert("Please enter email");
          $("#email").focus();
      }else if (!validateEmail(email)){
          alert("Please enter valid email");
          $("#email").focus();
      } else {
          $.post("script.php",{key:"hideEmailAddress",email:email},function (response) {
            $("#partiallyHiddenEmail").html(response);
          });
      }
   });

   function validateEmail(inputText) {
       var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
       if(inputText.match(mailformat)) {
           return true;
       } else{
           return false;
       }
   }
</script>
</body>
</html>

This file uses the AJAX call, which in turn calls the script.php file.

script.php

  1. <?php
  3. if ($_POST['key'] == "hideEmailAddress"){
  4. $email = $_POST['email'];
  5. $partiallyHiddenEmail = mask_email($email);
  6. echo $partiallyHiddenEmail;
  8. }
  10. /*
  11. Here's the logic:
  13. We want to show X numbers.
  14. If length of STR is less than X, hide all.
  15. Else replace the rest with *.
  17. */
  19. function mask_email($email) {
  20. $mail_parts = explode("@", $email);
  21. $domain_parts = explode('.', $mail_parts[1]);
  23. $mail_parts[0] = mask($mail_parts[0], 2, 1); // show first 2 letters and last 1 letter
  24. $domain_parts[0] = mask($domain_parts[0], 2, 1); // same here
  25. $mail_parts[1] = implode('.', $domain_parts);
  27. return implode("@", $mail_parts);
  28. }
  30. function mask($str, $first, $last) {
  31. $len = strlen($str);
  32. $toShow = $first + $last;
  33. return substr($str, 0, $len <= $toShow ? 0 : $first).str_repeat("*", $len - ($len <= $toShow ? 0 : $toShow)).substr($str, $len - $last, $len <= $toShow ? 0 : $last);
  34. }
<?php

if ($_POST['key'] == "hideEmailAddress"){
    $email = $_POST['email'];
    $partiallyHiddenEmail = mask_email($email);
    echo $partiallyHiddenEmail;

}

/*
Here's the logic:

We want to show X numbers.
If length of STR is less than X, hide all.
Else replace the rest with *.

*/

function mask_email($email) {
    $mail_parts = explode("@", $email);
    $domain_parts = explode('.', $mail_parts[1]);

    $mail_parts[0] = mask($mail_parts[0], 2, 1); // show first 2 letters and last 1 letter
    $domain_parts[0] = mask($domain_parts[0], 2, 1); // same here
    $mail_parts[1] = implode('.', $domain_parts);

    return implode("@", $mail_parts);
}

function mask($str, $first, $last) {
    $len = strlen($str);
    $toShow = $first + $last;
    return substr($str, 0, $len <= $toShow ? 0 : $first).str_repeat("*", $len - ($len <= $toShow ? 0 : $toShow)).substr($str, $len - $last, $len <= $toShow ? 0 : $last);
}

Run the Code!

When you run the code you will get something like this. if you get any errors, don’t worry I will provide the full 100% working source code.

how-to-partially-hide-email-address-in-php-using-ajax-coding-birds-online-output-1

If you enter the email address cs.ankitprajapati@gmail.com, Of course, you can enter your own. You will get the following output.

how-to-partially-hide-email-address-in-php-using-ajax-coding-birds-online-output-2

Source Code & Demo

You can download the full 100% working source code from here. You check this demo also.

Conclusion

I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.

Ok, Thanks for reading this article, see you in the next post.

Happy Coding 🙂

Keep Reading
By

CRUD application in PHP using jQuery AJAX

By
crud-application-in-php-using-jquery-ajax-featured-image

If you are looking to learn how to create CRUD application in PHP then you are in the right place. In a web application, 4 operations are mainly performed, Create, Read, Update and Delete. These are called CRUD operations in short.

  • Create – This is to save the data to the database.
  • Read – This is the operation to read or display the saved data from the database.
  • Update – This is to update the existing records in a database.
  • Delete – Last but not least, this is used to perform delete operation in the database.

Each operation has its own query syntax to perform its task. Let’s take a look at each query and we will understand its concepts.

Check this also how to submit form data using AJAX in PHP to learn to perform a single CRUD operation that is to create without page refresh. You check this demo also.

Ultimately we perform CRUD operation in any complex web application or website by different techniques and methods.

Today, I am very happy to share with you CRUD application in PHP using jQuery AJAX from scratch. But today I will show you a very simple way to CRUD using a bootstrap popup model.

How to do that?

In this tutorial, I will use a bootstrap popup model in which I will place a registration form asking to fill name, email, and contact.

After that, I will fetch the records from the database and display them without page refresh that’s why we are using AJAX.

Resources to perform CRUD operations

  • It is mandatory to use jQuery library to use AJAX functionality.
  • Here I will use a popup model on the click of the add button so that we can do this without a page refresh, That’s why we need bootstrap also. This will be good for styling purposes too.
  • That’s enough!

Lets first see the files and folder structure we are going to create for CRUD application in PHP using jQuery AJAX.

crud-application-in-php-using-jquery-ajax-coding-birds-online-files-and-folder-structure

Let’s understand the task of these files. Each file has its own task.

  • config.php is the connection file to the database.
  • crud-app.js is a javaScript file responsible to make AJAX call to accomplish not to page refresh.
  • crud-script.php has the logics of CRUD means to create, read, delete and update.
  • CrudOprations.php is a PHP class that has user-defined functions. Since we are going to use the OOPs methodology.
  • custom.css is CSS file to just to style something nothing else.
  • finally, index.php is the main file on which everything is to be performed.

crud_applications.sql is just an SQL file which is a database table. The table has this structure and you to create this in your database.

crud-application-in-php-using-jquery-ajax-coding-birds-online-table-structure

Don’t worry, I will provide the SQL file, Source code link is at the end of this post. Please include these CDN in the head tag of your index.php file.

  1. <link rel="shortcut icon" href="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png">
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  3. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="shortcut icon" href="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

and these JavaScript files to the footer means above the body tag in the index.php.

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  2. <script src="crud-app.js"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="crud-app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

complete index.php file

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>CRUD Application in PHP using AJAX - Coding Birds Online</title>
  8. <link rel="shortcut icon" href="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png">
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  10. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  11. <link rel="stylesheet" href="custom.css">
  12. </head>
  13. <body>
  14. <div style="margin-top: 10px;"><img width="100" src="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png" class="center-block"/></div>
  15. <div class="container">
  16. <h3>Delete multiple records from database using PHP </h3>
  17. <a href="javaScript:void(0);" data-toggle="modal" data-target="#myModal" class="btn btn-primary pull-right bottom-gap">Add New <i class="fa fa-plus" aria-hidden="true"></i></a>
  18. <table class="table table-bordered">
  19. <thead id="thead" style="background-color:#135361">
  20. <tr>
  21. <th>Sr.No</th>
  22. <th>Name</th>
  23. <th>Email</th>
  24. <th>Contact</th>
  25. <th>Action</th>
  26. </tr>
  27. </thead>
  28. <tbody id="crudData"></tbody>
  29. </table>
  30. </div>
  31. <div class="modal fade" id="myModal" role="dialog">
  32. <div class="modal-dialog">
  33. <div class="modal-content">
  34. <div class="modal-header">
  35. <button type="button" class="close" data-dismiss="modal">×</button>
  36. <h4 class="modal-title">CRUD Application Form</h4>
  37. </div>
  38. <div class="modal-body">
  39. <form id="crudAppForm">
  40. <div class="row">
  41. <div class="col-md-4">
  42. <div class="form-group">
  43. <label for="name">Name <span class="field-required">*</span></label>
  44. <input type="text" name="name" id="name" placeholder="Name" class="form-control">
  45. </div>
  46. </div>
  47. <div class="col-md-4">
  48. <div class="form-group">
  49. <label for="email">Email <span class="field-required">*</span></label>
  50. <input type="text" name="email" id="email" placeholder="Email" class="form-control">
  51. </div>
  52. </div>
  53. <div class="col-md-4">
  54. <div class="form-group">
  55. <label for="contact">Contact <span class="field-required">*</span></label>
  56. <input type="text" name="contact" id="contact" placeholder="Contact" class="form-control">
  57. </div>
  58. </div>
  59. </div>
  60. <div class="row">
  61. <div class="col-md-4">
  62. <input type="hidden" name="editId" id="editId" value="" />
  63. <button type="submit" name="submitBtn" id="submitBtn" class="btn btn-primary"><i class="fa fa-spinner fa-spin" id="spinnerLoader" ></i> <span id="buttonLabel">Save</span> </button>
  64. </div>
  65. </div>
  66. </form>
  67. </div>
  68. <div class="modal-footer">
  69. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  75. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  76. <script src="crud-app.js"></script>
  77. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  78. </body>
  79. </html>
<!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>CRUD Application in PHP using AJAX - Coding Birds Online</title>
    <link rel="shortcut icon" href="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="custom.css">
</head>
<body>
<div style="margin-top: 10px;"><img width="100" src="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png" class="center-block"/></div>
<div class="container">
    <h3>Delete multiple records from database using PHP </h3>
    <a href="javaScript:void(0);" data-toggle="modal" data-target="#myModal" class="btn btn-primary pull-right bottom-gap">Add New <i class="fa fa-plus" aria-hidden="true"></i></a>
    <table class="table table-bordered">
        <thead id="thead" style="background-color:#135361">
            <tr>
                <th>Sr.No</th>
                <th>Name</th>
                <th>Email</th>
                <th>Contact</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="crudData"></tbody>
    </table>
</div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">CRUD Application Form</h4>
            </div>
            <div class="modal-body">
                <form id="crudAppForm">
                   <div class="row">
                       <div class="col-md-4">
                           <div class="form-group">
                               <label for="name">Name <span class="field-required">*</span></label>
                               <input type="text" name="name" id="name" placeholder="Name" class="form-control">
                           </div>
                       </div>
                       <div class="col-md-4">
                           <div class="form-group">
                               <label for="email">Email <span class="field-required">*</span></label>
                               <input type="text" name="email" id="email" placeholder="Email" class="form-control">
                           </div>
                       </div>
                       <div class="col-md-4">
                           <div class="form-group">
                               <label for="contact">Contact <span class="field-required">*</span></label>
                               <input type="text" name="contact" id="contact" placeholder="Contact" class="form-control">
                           </div>
                       </div>
                   </div>
                    <div class="row">
                        <div class="col-md-4">
                            <input type="hidden" name="editId" id="editId" value="" />
                            <button type="submit" name="submitBtn" id="submitBtn" class="btn btn-primary"><i class="fa fa-spinner fa-spin" id="spinnerLoader" ></i> <span id="buttonLabel">Save</span> </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="crud-app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

crud-app.js file

  1. $( document ).ready(function() {
  2. getAllData();
  3. console.log( "ready!" );
  4. });
  5. $("form#crudAppForm").on("submit",function (e) {
  6. e.preventDefault();
  7. var name = $("#name").val();
  8. var email = $("#email").val();
  9. var contact = $("#contact").val();
  10. var editId = $("#editId").val();
  11. if (name == ""){
  12. alert("Please enter name");
  13. $("#name").focus();
  14. }else if (email == "") {
  15. alert("Please enter email");
  16. $("#email").focus();
  17. }else if (contact == "") {
  18. alert("Please enter contact");
  19. $("#contact").focus();
  20. }else{
  21. $("#buttonLabel").html("Saving...");
  22. $("#spinnerLoader").show('fast');
  23. $.post("crud-script.php",{
  24. crudOperation:"saveData",
  25. name:name,
  26. email:email,
  27. contact:contact,
  28. editId:editId,
  29. },function (response) {
  30. if (response == "saved") {
  31. $("#buttonLabel").html("Save");
  32. $("#spinnerLoader").hide('fast');
  33. $("#myModal").modal('hide');
  34. $("form#crudAppForm").each(function () {
  35. this.reset();
  36. });
  37. getAllData();
  38. }
  39. });
  40. }
  41. });
  43. function getAllData() {
  44. $.post("crud-script.php",{crudOperation:"getData"},function (allData) {
  45. $("#crudData").html(allData);
  46. });
  47. }
  49. function editData(editId,name,email,contact) {
  50. $("#editId").val(editId);
  51. $("#name").val(name);
  52. $("#email").val(email);
  53. $("#contact").val(contact);
  54. $("#myModal").modal('show');
  55. }
  57. function deleteData(deleteId) {
  58. if(confirm("Are you sure to delete this ?")){
  59. $('#deleteSpinner'+deleteId).show('fast');
  60. $.post("crud-script.php",{crudOperation:"deleteData",deleteId:deleteId},function (response) {
  61. if (response == "deleted") {
  62. $('#deleteSpinner'+deleteId).hide('fast');
  63. getAllData();
  64. }
  65. });
  66. }
  67. }
$( document ).ready(function() {
    getAllData();
    console.log( "ready!" );
});
$("form#crudAppForm").on("submit",function (e) {
    e.preventDefault();
    var name = $("#name").val();
    var email = $("#email").val();
    var contact = $("#contact").val();
    var editId = $("#editId").val();
    if (name == ""){
        alert("Please enter name");
        $("#name").focus();
    }else if (email == "") {
        alert("Please enter email");
        $("#email").focus();
    }else if (contact == "") {
        alert("Please enter contact");
        $("#contact").focus();
    }else{
        $("#buttonLabel").html("Saving...");
        $("#spinnerLoader").show('fast');
        $.post("crud-script.php",{
            crudOperation:"saveData",
            name:name,
            email:email,
            contact:contact,
            editId:editId,
        },function (response) {
            if (response == "saved") {
                $("#buttonLabel").html("Save");
                $("#spinnerLoader").hide('fast');
                $("#myModal").modal('hide');
                $("form#crudAppForm").each(function () {
                    this.reset();
                });
                getAllData();
            }
        });
    }
});

function getAllData() {
    $.post("crud-script.php",{crudOperation:"getData"},function (allData) {
        $("#crudData").html(allData);
    });
}

function editData(editId,name,email,contact) {
    $("#editId").val(editId);
    $("#name").val(name);
    $("#email").val(email);
    $("#contact").val(contact);
    $("#myModal").modal('show');
}

function deleteData(deleteId) {
    if(confirm("Are you sure to delete this ?")){
        $('#deleteSpinner'+deleteId).show('fast');
        $.post("crud-script.php",{crudOperation:"deleteData",deleteId:deleteId},function (response) {
            if (response == "deleted") {
                $('#deleteSpinner'+deleteId).hide('fast');
                getAllData();
            }
        });
    }
}

crud-script.php file

  1. <?php
  2. include "config.php";
  3. include_once "CrudOperations.php";
  4. $crudObj = new CrudOperations();
  5. if ($_POST['crudOperation'] == "saveData") {
  6. $name = $_POST['name'];
  7. $email = $_POST['email'];
  8. $contact = $_POST['contact'];
  9. $editId = $_POST['editId'];
  10. $save = $crudObj->saveData($connection,$name,$email,$contact,$editId);
  11. if ($save){
  12. echo "saved";
  13. }
  14. }
  16. if ($_POST['crudOperation'] == "getData") {
  17. $sr = 1;
  18. $tableData = '';
  19. $allData = $crudObj->getAllData($connection);
  20. if ($allData->num_rows>0) {
  21. while ($row = $allData->fetch_object()) {
  22. $tableData .= ' <tr>
  23. <td>'.$sr.'</td>
  24. <td>'.$row->name.'</td>
  25. <td>'.$row->email.'</td>
  26. <td>'.$row->contact.'</td>
  27. <td><a href="javaScript:void(0)" onclick="editData(\''.$row->id.'\',\''.$row->name.'\',\''.$row->email.'\',\''.$row->contact.'\');" class="btn btn-success btn-sm">Edit <i class="fa fa-pencil-square-o"></i></a>
  28. <a href="javaScript:void(0)" onclick="deleteData(\''.$row->id.'\');" class="btn btn-danger btn-sm">Delete <i class="fa fa-trash-o"></i></a>
  29. <i class="fa fa-spinner fa-spin" id="deleteSpinner'.$row->id.'" style="color: #ff195a;display: none"></i></td>
  30. </tr>';
  31. $sr++;
  32. }
  33. }
  34. echo $tableData;
  35. }
  37. if ($_POST['crudOperation'] == "deleteData"){
  38. $deleteId = $_POST['deleteId'];
  39. $delete = $crudObj->deleteData($connection,$deleteId);
  40. if ($delete){
  41. echo "deleted";
  42. }
  43. }
<?php
include "config.php";
include_once "CrudOperations.php";
$crudObj = new CrudOperations();
if ($_POST['crudOperation'] == "saveData") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $contact = $_POST['contact'];
    $editId = $_POST['editId'];
    $save = $crudObj->saveData($connection,$name,$email,$contact,$editId);
    if ($save){
        echo "saved";
    }
}

if ($_POST['crudOperation'] == "getData") {
    $sr = 1;
    $tableData = '';
    $allData = $crudObj->getAllData($connection);
    if ($allData->num_rows>0) {
        while ($row = $allData->fetch_object()) {
            $tableData .= ' <tr>
                <td>'.$sr.'</td>
                <td>'.$row->name.'</td>
                <td>'.$row->email.'</td>
                <td>'.$row->contact.'</td>
                <td><a href="javaScript:void(0)" onclick="editData(\''.$row->id.'\',\''.$row->name.'\',\''.$row->email.'\',\''.$row->contact.'\');" class="btn btn-success btn-sm">Edit <i class="fa fa-pencil-square-o"></i></a>
                <a href="javaScript:void(0)" onclick="deleteData(\''.$row->id.'\');" class="btn btn-danger btn-sm">Delete <i class="fa fa-trash-o"></i></a>
                <i class="fa fa-spinner fa-spin" id="deleteSpinner'.$row->id.'" style="color: #ff195a;display: none"></i></td>
            </tr>';
            $sr++;
        }
    }
    echo $tableData;
}

if ($_POST['crudOperation'] == "deleteData"){
    $deleteId = $_POST['deleteId'];
    $delete = $crudObj->deleteData($connection,$deleteId);
    if ($delete){
        echo "deleted";
    }
}

config.php file

  1. <?php
  2. $connection = new mysqli("localhost","root","","codingbirds");
  3. if (! $connection){
  4. die("Error in connection".$connection->connect_error);
  5. }
<?php
$connection = new mysqli("localhost","root","","codingbirds");
if (! $connection){
    die("Error in connection".$connection->connect_error);
}

CrudOperations.php file

  1. <?php
  2. class CrudOperations
  3. {
  4. public function saveData($connection,$name,$email,$contact,$editId)
  5. {
  6. if ($editId == "") {
  7. $query = "INSERT INTO crud_application SET name='$name',email='$email',contact='$contact'";
  8. }else{
  9. $query = "UPDATE crud_application SET name='$name',email='$email',contact='$contact' WHERE id='$editId'";
  10. }
  11. $result = $connection->query($query) or die("Error in saving data".$connection->error);
  12. return $result;
  13. }
  15. public function getAllData($connection)
  16. {
  17. $query = "SELECT * FROM crud_application";
  18. $result = $connection->query($query) or die("Error in getting data".$connection->error);
  19. return $result;
  20. }
  22. public function deleteData($connection,$deleteId){
  23. $query = "DELETE FROM crud_application WHERE id='$deleteId'";
  24. $result = $connection->query($query) or die("Error in deleting data".$connection->error);
  25. return $result;
  26. }
  27. }
<?php
class CrudOperations
{
    public function saveData($connection,$name,$email,$contact,$editId)
    {
        if ($editId == "") {
            $query = "INSERT INTO crud_application SET name='$name',email='$email',contact='$contact'";
        }else{
            $query = "UPDATE crud_application SET name='$name',email='$email',contact='$contact' WHERE id='$editId'";
        }
        $result = $connection->query($query) or die("Error in saving data".$connection->error);
        return $result;
    }

    public function getAllData($connection)
    {
        $query = "SELECT * FROM crud_application";
        $result = $connection->query($query) or die("Error in getting data".$connection->error);
        return $result;
    }

    public function deleteData($connection,$deleteId){
        $query = "DELETE FROM crud_application WHERE id='$deleteId'";
        $result = $connection->query($query) or die("Error in deleting data".$connection->error);
        return $result;
    }
}

custom.css

  1. #thead>tr>th{ color: white; }
  2. .center-block {
  3. display: block;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }
  7. .bottom-gap{
  8. margin-bottom: 10px;
  9. }
  11. .field-required,.delete-spinner{
  12. color: red;
  13. }
  14. #spinnerLoader{
  15. display: none;
  16. }
#thead>tr>th{ color: white; }
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.bottom-gap{
    margin-bottom: 10px;
}

.field-required,.delete-spinner{
    color: red;
}
#spinnerLoader{
    display: none;
}

Run the Code!

Now if you run the code, if there are not any errors you will get something like this.

crud-application-in-php-using-jquery-ajax-coding-birds-online-crud-applications-demo

When you will submit this form you will the complete final output like this. And if you click on the Add New+ button this popup form will have appeared.

crud-application-in-php-using-jquery-ajax-coding-birds-online-crud-add-data-example

If you submit this form filling the asked values then the record will be displayed. And to inform you, everything will be on the same page without any reload. Again if you click on the edit button then the same bootstrap popup will appear with the values which you filled previously.

If you update the values then it will call ajax request, update them to the database and display again to the table.

So if you want to delete you can do it also. It will ask you “Are you sure to delete this ?”. If you confirm this then it will be deleted.

Source Code & Demo

You can download the full 100% working source code from here. You check this demo also.

Conclusion

I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.

Ok, Thanks for reading this article, see you in the next post.

Happy Coding 🙂

Keep Reading
By

How to make a dynamic pie chart in PHP in 2 steps

By
coding-birds-online-how-to-make-a-dynamic-pie-chart-in-php-in-2-steps-featured-image

The pie chart is the most important part of data visualization. If you are looking for the code to draw the dynamic pie chart according to your data then you are in the right place.

Our website Coding Birds Online provides the very simple, to the point and 100% working source code with a complete guide. You can check this demo also.

What is a pie chart?

A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. You can read more about this chart from here.

coding-birds-online-what-is-pie-chart-exmple-image

Why it is used?

If you are using a web application or website or any report generation software then you might have noticed this feature. Graphical or visual representation of data is usually a requirement for this software.

For example, You are using an ERP system of any college you might have seen your attendance in pie chart. If you are making any software for attendance management, then it will be a great feature to that.

Starting to Code 🙂

Sounds interesting? I know surely you are. Now that’s enough to understand. So what are you waiting for? let’s get started. Visit highcharts.com for reference. If you click on this link, it will give you the same code but with static data.

  • Create an HTML page (index.php) to display the pie chart
  • Get the required imports like JavaScripts to draw a pie chart
  • Paste these imports to the head tag of the index file.
  • Paste the javaScript code above the closing tag of the body.

These are the required imports to create a dynamic pie chart.

  1. <script src="https://code.highcharts.com/highcharts.js"></script>
  2. <script src="https://code.highcharts.com/modules/exporting.js"></script>
  3. <script src="https://code.highcharts.com/modules/export-data.js"></script>
  4. <script src="https://code.highcharts.com/modules/accessibility.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://code.highcharts.com/modules/exporting.js"></script>
 <script src="https://code.highcharts.com/modules/export-data.js"></script>
 <script src="https://code.highcharts.com/modules/accessibility.js"></script>

Step 1: Create index.php file

index.php

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
  8. <script src="https://code.highcharts.com/highcharts.js"></script>
  9. <script src="https://code.highcharts.com/modules/exporting.js"></script>
  10. <script src="https://code.highcharts.com/modules/export-data.js"></script>
  11. <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  12. <title>How to create dynamic pie chart - Coding Birds Online</title>
  13. <style> .center-block { display: block;margin-left: auto;margin-right: auto; }</style>
  14. </head>
  15. <body>
  16. <div class="container">
  17. <center>
  18. <div id="container"></div>
  19. </center>
  20. <img class="center-block" src="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" width="50">
  21. </div>
  22. <?php
  23. include "config.php"; // connection file with database
  24. $query = "SELECT * FROM bird_pie_chart"; // get the records on which pie chart is to be drawn
  25. $getData = $connection->query($query);
  26. ?>
  27. <script>
  28. // Build the chart
  29. Highcharts.chart('container', {
  30. chart: {
  31. plotBackgroundColor: null,
  32. plotBorderWidth: null,
  33. plotShadow: false,
  34. type: 'pie'
  35. },
  36. title: {
  37. text: 'Programming Language Popularity, 2020'
  38. },
  39. tooltip: {
  40. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  41. },
  42. accessibility: {
  43. point: {
  44. valueSuffix: '%'
  45. }
  46. },
  47. plotOptions: {
  48. pie: {
  49. allowPointSelect: true,
  50. cursor: 'pointer',
  51. dataLabels: {
  52. enabled: false
  53. },
  54. showInLegend: true
  55. }
  56. },
  57. series: [{
  58. name: 'Popularity',
  59. colorByPoint: true,
  60. data: [
  61. <?php
  62. $data = '';
  63. if ($getData->num_rows>0){
  64. while ($row = $getData->fetch_object()){
  65. $data.='{ name:"'.$row->programming.'",y:'.$row->popularity.'},';
  66. }
  67. }
  68. echo $data;
  69. ?>
  70. ]
  71. }]
  72. });
  73. </script>
  74. </body>
  75. </html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <title>How to create dynamic pie chart - Coding Birds Online</title>
    <style> .center-block { display: block;margin-left: auto;margin-right: auto; }</style>
</head>
<body>
<div class="container">
    <center>
        <div id="container"></div>
    </center>
    <img class="center-block" src="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" width="50">
 </div>
<?php
include "config.php"; // connection file with database
$query = "SELECT * FROM bird_pie_chart"; // get the records on which pie chart is to be drawn
$getData = $connection->query($query);
?>
<script>
    // Build the chart
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Programming Language Popularity, 2020'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Popularity',
            colorByPoint: true,
            data: [
                <?php
                $data = '';
                if ($getData->num_rows>0){
                    while ($row = $getData->fetch_object()){
                        $data.='{ name:"'.$row->programming.'",y:'.$row->popularity.'},';
                    }
                }
                echo $data;
                ?>
            ]
        }]
    });
</script>
</body>
</html>

In this file, I am including a config.php, which is a connection file to the database. I am fetching records from the bird_pie_chart table. Don’t worry, I will provide the complete source code. The following is the database table structure.

coding-birds-online-table-structure

In this example, I am showing you a comparison of programming languages, with dummy data. This is now the actual data. You can customize this code and database table according to your needs.

Step 2: Run the code to get the desired output !!! That’s it.

Output

when you run the code and make sure everything is fine, then you will get the same output as following.

how-to-make-a-dynamic-pie-chart-in-php-in-2-steps-sample-output

Source Code & Demo to make a dynamic pie chart

You can download the full 100% working source code from here. You check this demo also.

Conclusion

I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.

Happy Coding 🙂

Keep Reading
By