Pages

Thursday, February 15, 2018

Simple User Registration Form Using PHP, MySQL

In this tutorial, I am illustrating a simple user registration form. register form is a common need in any kind of web-based application so here is register form using PHP, MySQL, HTML, and CSS.

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        body{
            padding:40px;
        }
        .container-one{
            width:340px;
            height:320px;
            border:1px solid black;
            padding-left:60px;
        }
        .btn {
            margin: 5px;
        }
    </style>
</head>

<body>

<h3>Register:</h3>

<div class="container-one">
    <form method="POST">
        <div class="col-md-5">
            First Name <input type="text" name="FirstName">
        </div>
        <div class="col-md-5">
            Last Name <input type="text" name="LastName">
        </div>
        <div class="col-md-2">
            Email <input type="text" name="Email">
        </div>
        <div class="col-md-3">
            Password <input type="password" name="Password">
        </div>
        <div class="col-md-2">
            City <input type="text" name="City">
        </div>
        <div class="col-md-2">
     <input type="submit" name="Submit" value="Submit" class="btn">
        </div>
    </form>
</div>

</body>
</html>
<?php
$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 (isset($_POST['Submit'])) {
    $FirstName = $_POST['FirstName'];
    $LastName = $_POST['LastName'];
    $Email = $_POST['Email'];
    $Password = $_POST['Password'];
    $City = $_POST['City'];
    $SQL = "INSERT INTO user 
(FirstName, LastName, Email, Password, City) 
VALUES ('$FirstName', '$LastName', '$Email', '$Password', '$City')";
    $result = mysqli_query($Connection, $SQL);
}
?>
Output:

Friday, February 9, 2018

How to add filter, search and pagination options to your table using javascript & datatable?

Having pagination, search and filter options to your data table is very much essential. which changes the complete view of your table presentation.

Here is the simplest way of adding these three options to your table.
Add this block of code in your head section.
<link rel="stylesheet" 
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" 
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
</script>
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>
Then add id and class to your table tag
<table id="example" class="display">
    <thead>
    <tr>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
    </tr>
    </tbody>
</table>
That's it your are done with the most usefull feature for tables.
Result:

Reference & For more vistit the link of official datable organization
https://datatables.net/examples/basic_init/zero_configuration.html

Tuesday, February 6, 2018

Encode and decode string with Base64 using PHP

base64_encode — Encodes data with MIME base64
string base64_encode ( $string )
This encoding is designed to make binary data survive transport through transport layers that are not 8-bit clean, such as mail bodies.
Base64-encoded data takes about 33% more space than the original data.

Base64_encode:
<?php
$plainText = 'http://www.phpjavascript.com/';
$base64 = base64_encode($plainText);
$base64url = strtr($base64, '+/=', '-_,');
echo $base64url;
?>
Result:
aHR0cDovL3d3dy5waHBqYXZhc2NyaXB0LmNvbS8,

Base64_decode:
<?php
$plainText = "aHR0cDovL3d3dy5waHBqYXZhc2NyaXB0LmNvbS8,";
$base64url = strtr($plainText, '-_,', '+/=');
$base64 = base64_decode($base64url);
echo $base64;
?>
Result:
http://www.phpjavascript.com/

Encrypt a string with own encryption key using PHP

Data encryption is the more essential in the current world to maintain data privacy and to secure its form. Here we are providing a simple encryption method. Before explaining about coding will talk about Data Encryption.

Data encryption translates data into another form, or code so that only people with access to a secret key (formally called a decryption key) or password can read it. Encrypted data is commonly referred to as ciphertext, while unencrypted data is called plaintext. Currently, encryption is one of the most popular and effective data security methods used by organizations. Two main types of data encryption exist - asymmetric encryption, also known as public-key encryption, and symmetric encryption.
<?php
//sting which you want to encrypt
$str = 'http://www.phpjavascript.com/';
//the secryt key which encrypts the sting
$ky = 'ZCVGEGLLLS';

if ($ky == '') {
    echo $str;
} else {
    $ky = str_replace(chr(32), '', $ky);
    if (strlen($ky) < 8) {
        echo 'the key length should be more than 8';
    } else {
        $kl = strlen($ky) < 32 ? strlen($ky) : 32;
        $k = array();
        for ($i = 0; $i < $kl; $i++) {
            $k[$i] = ord($ky{$i}) & 0x1F;
        }
        $j = 0;
        for ($i = 0; $i < strlen($str); $i++) {
            $e = ord($str{$i});
            $str{$i} = $e & 0xE0 ? chr($e ^ $k[$j]) : chr($e);
            $j++;
            $j = $j == $kl ? 0 : $j;
        }
        echo $str;
    }
}
?>
Result:
rwbw?(#{{d4s~wofzmphjfs+dca#

Spinning Icons Using HTML, CSS and BOOTSTRAP

<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#98111D;
}
.social-network a.icoTwitter:hover {
background-color:#60BD30;
}
.social-network a.icoGoogle:hover {
background-color:#FF0C1E;
}
.social-network a.icoVimeo:hover {
background-color:#351FB8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;  
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
a {
background-color: #D3D3D3;
}
</style>
</head>
<body>
<div class="col-md-12">
<ul class="social-network social-circle" >
<li><a href="http://www.phpjavascript.com/" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</body>
</html>

Note:  Browser version that fully supports the property.
       property--transition
      -webkit-google chrome
      -moz-mozilla firefox
      -o-opera

Output:





How to add google map to website using JavaScript API?

Google Map is the easiest way to display a map on the web page.
To display Google Map we need to get the latitude and longitude of our desired location. We need to specify our location’s latitude and longitude into the LatLng() method which is already shown in the example. At first, load the Google Maps JavaScript API and provide your API Key in key parameter.

<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY">
</script>

Google Maps JavaScript API is free to create and you can get API key from Google API Console. This step-by-step tutorial will help you to generate an API key on Google Developer Console and get API key for Google Maps JavaScript API.

Step1: Log in to your Google account and go to the GoogleAPI Console. Step2: Click Project » Create project at the top left corner to creating a project. Step3: Enter the Project name and click on Create. It will take some seconds for creating a new project. Step4: Click the Library link on the left navigation menu. Under the Google Maps APIs section and click Google Maps JavaScript API link. Step5: Click ENABLE to use Google Maps JavaScript API. Step6: Click on Credentials on the left navigation menu. On the Credentials page,  click Create credentials » API key. Step7: A dialog box will appear with your newly created API Key. Use this API key with Google Maps JavaScript API. Below is the sample code will embed Google map in the website. <html> <head> <title>Adding Google Map on Your Website</title> <style> #map { width: 50%; height: 25%; } </style> <script src="https://maps.googleapis.com/maps/api/ js?KEY=AIzaSyBbdB5D0kwt04dHbOR45ppzdcGrXqX9lIY"></script> <script> var myCenter = new google.maps.LatLng(17.4410, 78.4986); function initialize() { var mapProp = { center: myCenter, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"),mapProp); var marker = new google.maps.Marker({ position: myCenter, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map"></div> </body> </html>
OUTPUT:

Featured

Simple User Registration Form Using PHP, MySQL