Web Development

How to insert data into database using HTML form

July 11, 2016April 12, 2022 Pradeep Maurya

Hello, In this post we will learn about mysqli query to insert data into database using HTML form. For this process we have to required 2 files, one is HTML file and another is php file. HTML file is used…

Expand +

How to insert data using MySQLi query in php

July 11, 2016April 12, 2022 Pradeep Maurya

In this tutorial you will learn how to insert records in a table using MYSQLi query . Let’s start to create a INSERT INTO statement with values using MYSQLi Procedural and MYSQLi Object-oriented method. Here we are going to insert…

Expand +

how to connect mysqli with php

June 28, 2016April 12, 2022 Pradeep Maurya

MYSQLi Tutorial for Beginners – how to create MySQLi connection with php in simple and easy steps starting from basic to advanced level. To create connection 4 parameter is required : “hostname” , “username“, “password” and “database name” see below..how…

Expand +

How to write connection class to mysql database using php

June 28, 2016April 12, 2022 Pradeep Maurya

Hello! In this post, you will learn to how to write and test the OOP based connection class to mysql database using php. see below..how to do it.. connection.php


<?php

/** @author tutorialswebsite
*@ copyright 2016

*/

class createDBConnection // create a class for make connection
{

var $host="localhost";
var $username="username";
var $password="password";
var $database="database name";
var $dbconn;
function connectToDatabase() //specify the server details for mysql
{

$conn=mysql_connect($this->host,$this->username,$this->password);

if(!$conn)//testing the connection
{
die("Cannot connect to the database");

}else{

$this->dbconn=$conn;
echo "Connection established";

}
return $this->dbconn;

}

function selectDatabase() // selecting the database
{

//use php inbuild function foer select database

mysql_select_db($this->database);

if(mysql_error()) // if error occured display the error message 
{
echo "Cannot find the database".$this->database;

}

echo "Database Selected..";
}

function closeConnection() // close the connection
{
mysql_close($this->dbconn);

echo "Connection closed";

}

}

?>

<?php

/** @author tutorialswebsite

class createDBConnection // create a class for make connection

{

var $host="localhost";

var $username="username";

var $password="password";

var $database="database name";

var $dbconn;

function connectToDatabase() //specify the server details for mysql

{

$conn=mysql_connect($this->host,$this->username,$this->password);

if(!$conn)//testing the connection

{

die("Cannot connect to the database");

}else{

$this->dbconn=$conn;

echo "Connection established";

}

return $this->dbconn;

}

function selectDatabase() // selecting the database

{

//use php inbuild function foer select database

mysql_select_db($this->database);

if(mysql_error()) // if error occured display the error message

{

echo "Cannot find the database".$this->database;

}

echo "Database Selected..";

}

function closeConnection() // close the connection

{

mysql_close($this->dbconn);

echo "Connection closed";

}

Now you have create the database connection class let’s see…

Expand +

Send email with html template using php

June 28, 2016August 5, 2022 Pradeep Maurya

Hello! In this post, you will learn to send email with html template using php. 1. Extract($_POST) – Extracting Post Variables From. 2. file_get_contents – Html design form to get the function. Normally we use php mailer function for sending…

Expand +

How to show image thumbnail before upload with jQuery

June 1, 2016April 12, 2022 Pradeep Maurya

Now, i am going to Share: How to show image thumbnail before upload with jQuery Step 1:- Put the following code in <body></body> section.


<div id="previewimg"></div>
<input id="upload_file" class="img" name="image" type="file" />

Step 2:- Put the script code in <head></head> section.


<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">// <![CDATA[
$(function() { $("#upload_file").on("change", function() { var files = !!this.files ? this.files : []; if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support if (/^image/.test( files[0].type)){ // only image file var reader = new FileReader(); // instance of the FileReader reader.readAsDataURL(files[0]); // read the local file reader.onloadend = function(){ // set image data as background of div $("#previewimg").css("background-image", "url("+this.result+")"); } } }); });
// ]]></script>

$(function() { $("#upload_file").on("change", function() { var files = !!this.files ? this.files : []; if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support if (/^image/.test( files[0].type)){ // only image file var reader = new FileReader(); // instance of the FileReader reader.readAsDataURL(files[0]); // read the local file reader.onloadend = function(){ // set image data as background of div $("#previewimg").css("background-image", "url("+this.result+")"); } } }); });

// ]]></script>

Step 3:- Put following CSS…

Expand +

Resize Image While Uploading with PHP

March 8, 2016June 15, 2019 Pradeep Maurya

For this purpose you need to do some optimization with image files. Image resize while uploading is one of them. All major website do it in the same way. If a user uploads a 5mb image file they resize it…

Expand +

Multiple File Upload with PHP

March 8, 2016June 15, 2019 Pradeep Maurya

HTML Markup We need to add a simple html form with input type file and submit property. We also need to give file input type file name with box breaks like files[] and need to add a property named multiple. Here…

Expand +

bind google places autocomplete on textbox without instantiating a google map

February 22, 2016June 15, 2019 Pradeep Maurya

Hello, In this post we will learn how to bind google places into textbox without instantiating google map. lets see how to do..


<!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            var autocomplete;
            function initialize() {
              autocomplete = new google.maps.places.Autocomplete(
                  /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
                  { types: ['geocode'] });
              google.maps.event.addListener(autocomplete, 'place_changed', function() {
              });
            }
        </script>
      </head>
      <body onload="initialize()">
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
        </div>
      </body>
    </html>

<!DOCTYPE html>

<html>

<head>

var autocomplete;

function initialize() {

autocomplete = new google.maps.places.Autocomplete(

/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),

{ types: ['geocode'] });

google.maps.event.addListener(autocomplete, 'place_changed', function() {

});

}

</script>

</head>

</div>

</body>

</html>

Expand +

PHP code to autocomplete places on textbox

February 22, 2016January 31, 2022 Pradeep Maurya

Hello, In this post we will learn how to create autocomplete textbox field with places (Country, City, State) in php. For this purpose we will use google API and autocomplete script. Code is below…Lets see how to do..


<!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            var autocomplete;
            function initialize() {
              autocomplete = new google.maps.places.Autocomplete(
                  /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
                  { types: ['geocode'] });
              google.maps.event.addListener(autocomplete, 'place_changed', function() {
              });
            }
        </script>
      </head>
      <body onload="initialize()">
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
        </div>
      </body>
    </html>