PHP JavaScript: 02/06/18

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>

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: