Subscribe For Free

Friday, March 16, 2018

How to add/remove text-box dynamically using JQuery/JavaScript?

This example demonstrates how to add/remove text field in the form dynamically. I saw so many examples on the web related to this query, but this is the simplest method in all of them.


<link rel="stylesheet"  href=''>

<script src=""></script>I have a blue left border.


    $(document).ready(function () {
        //maximum input boxes allowed
        var max_fields = 5;
        //Fields wrapper
        var wrapper = $(".input_fields_wrap");
        //Add button
        var add_button = $(".add_field_button");

        //Initlal text box count
        var x = 1;
        //On add input button click
        $(add_button).click(function (e) {
            //Max input box allowed
            if (x < max_fields) {
                //Text box increment
                //Add input box
                $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field btn-danger">Remove</a></div>');
        //User click on remove text
        $(wrapper).on("click", ".remove_field", function (e) {


<style type="text/css">
        position: absolute;
        width: 600px;
        height: 200px;
        z-index: 15;
        top: 50%;
        left: 30%;
        margin: -100px 0 0 -150px;
        background: grey;
        padding-top: 10px;
        padding-left: 60px;
        padding-bottom: 10px;
        width: 500px;
        height: auto;
        padding: 5px;
        margin-top: 10px;


    <div class="input_fields_wrap box">
        <a href = "" class="btn-success">Add</a>
        <button class="add_field_button btn-success">Add More Fields</button><br>
        <input type="text" name="mytext[]"><br><br>
<a href = "" class="btn-success">More</a>


How to generate dynamic tables using Javascript/JQuery, CSS, HTML?

In this tutorail we are going to discuss about most questioned topic in the web, how to generate dynamic table using jquery. Here is the simple code for adding/deleting rows and columns dynamically.
<html> <head>
<link rel="stylesheet"   href=''> <script src=""  type="text/javascript"></script> <script src=""> </script>
<script> $(function () { $("#addrow").click(function () { var tr = "<tr>" + "<td contenteditable='true'></td>". repeat($("#myTable tr:eq(0) td").length) + "</tr>" $("#myTable").append(tr); }); $("#addcolumn").click(function () { $("#myTable tr").append($("<td contenteditable='true'></td>")); $(document).on('click', '.js-del-row', function () { $('#myTable').find('tr:last').remove(); }); $(document).on('click', '.js-del-column', function () { $('#myTable').find('td:last').remove(); }); }); }); </script>
<style type="text/css"> body{ position: absolute; width: 600px; height: 200px; z-index: 15; top: 50%; left: 40%; margin: -100px 0 0 -150px; background: grey; } table,tr,td { border: 1px solid white; border-collapse: collapse; padding:10px; margin-bottom:1em; color: white; } #mytable{ position: absolute; margin-left:50px; margin-top: 25px; } .addtable{ color: red; margin-left:50px; margin-top: 25px; } </style>
<body> <div class="addtable"> <a href='' class='btn btn-danger'>Add</a> <input id="addrow" type="button" value="Add Row"> <input id="addcolumn" type="button" value="Add Column"> <button class="js-del-row">Delete Row</button> <button class="js-del-column">Delete Column</button> </div> <table id="myTable"> <thead> <tr id="test" contenteditable="true"><td>S.No</td></tr> </thead> <tbody> <tr> <td contenteditable="true">0001</td> </tr> </tbody> </table </body>


Wednesday, March 14, 2018

How To Send Free Outlook Mail Using PHP?

In this tutorial, we are talking about how to send mail using outlook mail service by Simple Mail Transfer Protocol(SMTP).

An SMTP server is a machine that takes care of the whole email delivery process: that's why to send your messages with an email client or software you need first of all to configure the correct SMTP settings.

We are going to use PHPMailer class for sending emails. It’s an easily usable PHP library for sending emails. This class is included in the Download File.

Download PHPMailer form the below link

Create a new file send.php and place the following code into it as per the instructions.

Include PHPMailer class first



This configuration contains account information, Recipient address with name and the message details.

$msg="<strong>This is the test message</strong>"; 
$subject="Test message";

Create the Class object and append the settings of the SMTP server

$mail = new PHPMailer();
$mail->CharSet = 'UTF-8';
$mail->Host = "";
$mail->SMTPAuth= true;
$mail->Port = 587;
$mail->Username= $account;
$mail->Password= $password;
$mail->SMTPSecure = 'tls';
$mail->From = $from;
$mail->FromName= $from_name;
$mail->Subject = $subject;
$mail->Body = $msg;

Error check

Then, check if the mail sends without any errors. If there is an error, it will print out the error

 echo "Mailer Error: " . $mail->ErrorInfo;
 echo "E-Mail has been sent";

If there is any problem or error you are getting on this, please comment below we will try to help.

Monday, March 12, 2018

Progress Bar Using HTML CSS and Jquery

progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. The concept can also be regarded to include "playback bars" in media players that keep track of the current location in the duration of a media file.

Here is the simple code showing a progress bar from 1 to 100.

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//">
    <link rel="stylesheet" href="/resources/demos/style.css">
        .ui-progressbar {
            position: relative;
        .progress-label {
            position: absolute;
            left: 50%;
            top: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        .ui-widget-header {
            border: 1px solid #a03232;
            background: green;
            color: #333333;
            font-weight: bold;
<script src=""></script>
    <script src=""></script>
        $( function() {
        var progressbar = $( "#progressbar" ),
          progressLabel = $( ".progress-label" );

            value: false,
          change: function() {
           progressLabel.text( progressbar.progressbar( "value" ) + "%" );
         complete: function() {
         progressLabel.text( "Complete!" );

      function progress() {
        var val = progressbar.progressbar( "value" ) || 0;

       progressbar.progressbar( "value", val + 2 );

      if ( val < 99 ) {
      setTimeout( progress, 80 );

   setTimeout( progress, 2000 );
   } );

<div id="progressbar"><div class="progress-label">Loading...</div></div>


Sunday, March 11, 2018

How to force downloading a file using PHP.

Here we are providing a simple code of explaining how to make a user to download file forcefully.

Normally, you don't necessarily need to use any server side scripting language like PHP to download images, zip files, pdf documents, exe files, etc. If such kind of file is stored in a public accessible folder, you can just create a hyperlink pointing to that file, and whenever a user click on the link, browser will automatically downloads that file. 

<a href="demo.jpg">Download</a>

Clicking a link that points to a PDF or an Image file will not cause it to download to your hard drive directly. It will only open the file in your browser. Further you can save it to your hard drive. However, zip and exe files are downloaded automatically to the hard drive by default.

function force_download($file)  
       if ((isset($file))&&(file_exists($file))) {  
            header("Content-length: ".filesize($file));  
            header('Content-Type: application/octet-stream');
            header('Content-Disposition: attachment; filename="' . $file . '"'); 
       } else {  
            echo "No file selected";  

$file = 'demo.jpg'; 

HTTP header fields

The Content-Length entity-header field indicates the size of the entity-body,
in decimal number of OCTETs, sent to the recipient or, in the case of the HEAD
method, the size of the entity-body that would have been sent had the request
been a GET. 

The text/html content type is an Internet Media Type as well as a MIME content type. Using HTML in MIME messages allows the full richness of Web pages to be available in e-mail. text/plain[RFC1521] The text/plain content type is the generic subtype for plain text.

In a regular HTTP response, the Content-Disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved locally.

List of HTTP header fields

Similarly, you can force download other files formats like word doc, pdf files, etc.

Thursday, March 8, 2018

PHP Errors

Different kind of error events may occur in PHP. These errors are classified based on the time of occurrences and whether it is recoverable or not. And this classification is made with respect to how it is triggered to send an error message to the browser. It might be triggered automatically while executing an improper line of code.
  1. Fatal error
  2. Parse error
  3. Warning
  4. Notices

How to enable errors in PHP
ini_set('display_errors', '1');

Fatal Error

In computing, a fatal error or fatal exception error is an error that causes a program to abort and may, therefore, return the user to the operating system. When this happens, data that the program was processing may be lost. fatal errors are classified as,
  • Startup fatal error – This will occur when the code cannot be executed with the PHP environment due to the fault that occurred at the time of installation.
  • Compile time fatal error – This kind of error will occur when we attempt to use nonexistent data like file, class, function and etc.
  • Runtime fatal error – This will occur during execution. It is similar to compile time fatal error, except Compile time fatal error is generated by the Zend engine based on the time of occurrence.

Example: PHP Fatal Error

Let us call a non-existing function myFunction() in the following PHP program.

echo "!"
This program will raise the following fatal error at the time of execution which will stop executing a further line that is the echo statement.

( ! ) Fatal error: Call to undefined function myFunction() in C:\xampp\htdocs\demo\today\demo.php on line 2
Call Stack
10.0010130016{main}( )...\demo.php:0

Parse Error

Parse errors are generated only at compile time which is also called as a syntax error. If anything wrong with PHP syntax, for example, missing semi-colon for the end of the line, will trigger this type of errors to be displayed to the browser.

echo ""
echo "<br/>error";
This program sends parse error to the browser as follows due to the lack of semicolon(;) at the end of the line.

( ! ) Parse error: syntax error, unexpected 'echo' (T_ECHO), expecting ',' or ';' in C:\xampp\htdocs\demo\today\demo.php on line 3


PHP will create warning message for sending them to the user without halting the execution. An example for warning messages to be created is the divide by zero problem that is as shown in the following program.

$numberOne = 0;
$NumberTwo = 10;
$result = $NumberTwo/$numberOne;
echo $result;
In the above program, since $numberOne has the value 0 and any number divided by zero is undefined, the line on which the division is made will create the following warning notices followed by the string returned by the echo statement with an empty value for $result variable. Meaning that, even after the occurrence of the warning error, the echo statement is executed.

( ! ) Warning: Division by zero in C:\xampp\htdocs\demo\today\demo.php on line 4
Call Stack
10.0000129832{main}( )...\demo.php:0


Like other PHP error messages, notice message can be created automatically or by the user by using the PHP trigger_error() function.It is used to send messages to the browser to make the user know about the problem of the code is any, which might cause an error.

For example, the following program starts with incrementing an uninitialized variable $result to print the incremented value to the browser. Since $result is not initialized, it will automatically trigger the notice error on executing this script.

$result += 5;
echo "RESULT: ". $result;
( ! ) Notice: Undefined variable: result in C:\xampp\htdocs\demo\today\demo.php on line 2
Call Stack
10.0000129672{main}( )...\demo.php:0


But program execution will not be terminated because of this PHP notice. Rather, the notice message will be sent to the browser and the echo statement will print the incremented $result value subsequently.


E_ERROR: A fatal error that causes script termination
E_WARNING: Run-time warning that does not cause script termination
E_PARSE: Compile time parse error.
E_NOTICE: Run time notice caused due to error in code
E_CORE_ERROR: Fatal errors that occur during PHP’s initial startup (installation)
E_CORE_WARNING: Warnings that occur during PHP’s initial startup
E_COMPILE_ERROR: Fatal compile-time errors indication problem with script.
E_USER_ERROR: User-generated error message.
E_USER_WARNING: User-generated warning message.
E_USER_NOTICE: User-generated notice message.
.E_STRICT: Run-time notices.
E_RECOVERABLE_ERROR: Catchable fatal error indicating a dangerous error
E_ALL: Catches all errors and warnings

Wednesday, March 7, 2018

Simple Search Option Using PHP, MySQL

Search functionality is a basic need for any kind of website. You almost find it on every website. Here is the traditional way of working with search system using PHP and MySQL.

Which includes majorly three steps.

1. Database connection
2. Form to search
3. Fetching related data from database table.

Before you go to these you need to setup local server and database.
If you don't know how to do, you can check out here Setting up the server.

Once you set up the server run following queries.

To create a table.

  `UserID` int(12) NOT NULL,
  `FirstName` varchar(48) NOT NULL,
  `LastName` varchar(48) NOT NULL,
  `Email` varchar(128) NOT NULL,
  `Password` varchar(20) NOT NULL,
  `City` varchar(48) NOT NULL


Setting up the primary key.


Insert some sample data in to table.

INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `Password`, `City`) VALUES
(7, 'Rahul', 'Rajshekaran', '', 'Rahul@123', 'Pune'),
(8, 'Mahesh', 'Krishna', '', 'Mahesh@123', 'Delhi'),
(9, 'Mahidar', 'kumar', '', 'Mahidar@123', 'Pune'),
(10, 'Mahpal', 'yadhav', '', 'Mahipa@123', 'Delhi');

        <link rel="stylesheet" href="">
                position: absolute;
                width: 300px;
                height: 350px;
                z-index: 15;
                top: 40%;
                left: 50%;
                margin: -100px 0 0 -150px;
                border: 1px solid #8080804a;
                border-radius: 5px;
                background: #8080804a;
                width: 299px;
                background: #c30000;
                text-align: center;
                font-size: 20px;
                margin-bottom: 20px;
                padding: 5px;
                padding: 10px;
                margin-top: 5px;
                margin-top: 20px;
                background-color: #c30000;
                border-color: #c30000;
                background-color: #c30000;
                border-color: #c30000;
                width: 299px;
                background: #5d5d5d;
                text-align: center;
                font-size: 20px;
                margin-top: 180px;
                padding: 5px;
        <div class="login-box">

            <form method="GET">
                <div class="form-header">SEARCH</div>
                <div class="col-md-12">  
                    <input type="text" name="query" class="form-control"/>
                <div class="col-md-12">  
                    <input type="submit" value="Search" name="search" class="btn btn-primary"/>

            //Connecting to database
            $DatabaseServer = "localhost";
            $DatabaseUsername = "root";
            $DatabasePassword = "root";
            $DatabaseName = "demo";

            $Connection = mysqli_connect($DatabaseServer, $DatabaseUsername, $DatabasePassword, $DatabaseName);

            if ($Connection === false) {
                die("ERROR: Could not connect. " . mysqli_connect_error());

            // If query is set get value sent over search form, else define it to null
            if (isset($_GET['query'])) {
                $query = $_GET['query'];
            } else {
                $query = '';

            // You can set minimum length of the query as you wish
            $min_length = 3;
            if (isset($_GET['search'])) {

                echo "<div class='result'>";
                // If query length is more or equal to minimum length then
                if (strlen($query) >= $min_length) {
                    $query = htmlspecialchars($query);

                    $query = mysqli_real_escape_string($Connection, $query);
                    $sql = "SELECT * FROM user WHERE (`FirstName` LIKE '" . $query . "%')";

                    $raw_results = mysqli_query($Connection, $sql);

                    // If one or more rows are returned
                    if (mysqli_num_rows($raw_results) > 0) {
                        while ($results = mysqli_fetch_array($raw_results)) {
                            echo "<h4>" . $results['FirstName'] . "</h4>";
                    } else { //If no records found
                        echo "No results found";
                } else { // If query length is less than minimum
                    echo "Minimum length is " . $min_length;
                echo "</div>";

click it