Saturday, 30 July 2016

Oauth Login for Linkedin, Facebook, Google and Microsoft

Database
Users table database design.
CREATE TABLE IF NOT EXISTS `users`
(
id INT(11) NOT NULL AUTO_INCREMENT,
email VARCHAR(200) ,
name VARCHAR(200) ,
first_name VARCHAR(200) ,
last_name VARCHAR(200) ,
gender VARCHAR(10) ,
birthday VARCHAR(20) ,
location VARCHAR(200) ,
hometown VARCHAR(200) ,
bio TEXT,
relationship VARCHAR(30) ,
timezone VARCHAR(10) ,
provider VARCHAR(10) ,
provider_id INT(30) ,
picture TEXT,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

The script contains three folders called facebook_libgoogle_libmicrosoft_lib,linkedin_lib and images with PHP files.
facebook_lib //Facebook OAUTH library 
-- config.php //Facebook app configuration file.
google_lib //Google OAUTH library 
-- config.php //Google app configuration file.
microsoft_lib //Microsoft OAUTH library 
-- config.php //Microsoft app configuration file.
linkedin_lib //Linkedin OAUTH library 
-- config.php //Linkedin app configuration file.
images
db.php //Database connection 
OauthLogin.php //Class 
facebook_login.php //Facebook Login
google_login.php //Google Login
microsoft_login.php //Microsoft Login
linkedin_login.php //Linkedin Login
index.php
home.php
header.php
redirect.php
logout.php

How to Use
Just call anchor tag with particular service login file. 
<a href='facebook_login.php'>Facebook Login</a>
<a href='google_login.php'>Google Login</a>
<a href='microsoft_login.php'>Microsoft Login</a>
<a href='linkedin_login.php'>Linkedin</a>

How it Works
Facebook & Google Authentication Flowchart


Installation
In this script just you have to modify three file.

db.php
Database configuration file, modify MySQL server details.
<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "databasename";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
$base_url='http://www.yourwebsite.com/';
?>

Application setup details click here.

Facebook Configuration facebook_lib/config.php
You have to create a application. Facebook will provide you app id and app secret id, just replace in the following code.
fbconfig.php
<?php
$facebook_appid='App ID';
$facebook_app_secret='App Secret';
$facebook_scope='email,user_birthday';
$facebook = new Facebook(array(
'appId' => $facebook_appid,
'secret' => $facebook_app_secret,
));
?>


Google Configuration google_lib/config.php
You can find this in google_lib folder, here you have to configure application OAuth keys, Consumer keys and redirection callback URL.
// OAuth2 Settings, you can get these keys at https://code.google.com/apis/console Step 6 keys 
'oauth2_client_id' => 'Client ID',
'oauth2_client_secret' => 'Client Secret',
'oauth2_redirect_uri' => 'http://www.yoursite.com/google_login.php',

// OAuth1 Settings Step 3  keys.
'oauth_consumer_key' => 'OAuth Consumer Key',
'oauth_consumer_secret' => 'OAuth Consumer Secret',

Microsoft Configuration microsoft_lib/config.php
Click here to launch Microsoft live development dashboard and create an application. Microsoft will provide you Client_Id and Client_Secret.
fbconfig.php
<?php

//Microsoft Application Settings
$microsoft_client_id='Client ID';
$microsoft_client_secret='Client Secret';
$microsoft_scope='wl.basic wl.emails wl.birthday';
$microsoft_redirect_url=$base_url.'microsoft_login.php';

));
?>

Linkedin Configuration linkedin_lib/config.php
Click here to launch Linkedin developer network and application will provide your App_Key and App_Secret. 
fbconfig.php
<?php

//Linkedin Application Settings
$linkedin_appKey='App Key';
$linkedin_appSecret='App Secret';
$linkedin_callbackUrl=$base_url.'linkedin_login.php';

));
?>


Oauth Login for Linkedin, Facebook, Google and Microsoft

Friday, 29 July 2016

Bootstrap datepicker example

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap datepicker examples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

    </head>
    <body>
        <div class="container">
            <div class="hero-unit">
                <input  type="text" placeholder="click to show datepicker"  id="example1">
            </div>
        </div>
        <!-- Load jQuery and bootstrap datepicker scripts -->
      
        <script type="text/javascript">
            // When the document is ready
            $(document).ready(function () {
                
                $('#example1').datepicker({
                    format: "dd/mm/yyyy"
                });  
            
            });
        </script>
    </body>
</html>



Bootstrap datepicker example 

Remove all html tags from php string

<!DOCTYPE html>
<html>
<body>

<?php
echo strip_tags("Hello <b>world!</b>");
?>


<p>This function strips a string from HTML, XML, and PHP tags. In this example, the &lt;b&gt; tag gets stripped.</p>

</body>
</html>


Remove all html tags from php string


Wednesday, 27 July 2016

jQuery Add More or Less Link to Text | Show More Link to Shorten Text to Display Rest of Text


<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<title>jQuery Add More/Less link to Text</title>
<script type="text/javascript">
$(function() {
var showChar = 120, showtxt = "more", hidetxt = "less";
$('.more').each(function() {
var content = $(this).text();
if (content.length > showChar) {
var con = content.substr(0, showChar);
var hcon = content.substr(showChar, content.length - showChar);
var txt= con  '<span class="dots">...</span><span class="morecontent"><span>' + hcon +'</span>&nbsp;&nbsp;<a href="" class="moretxt">' + showtxt + '</a></span>';
$(this).html(txt);
}
});
$(".moretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showtxt);
else {
$(this).addClass("sample");
$(this).text(hidetxt);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style type="text/css">
body{
font-familyCalibri, Arial;
margin0px;
padding0px;
}
.more {
width400px;
background-color#f0f0f0;
margin10px;
}
.morecontent span {
displaynone;
}
</style>
</head>
<body>
<div class="more">
Welcome to Aspdotnet-suresh. It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
Aspdotnet-Suresh.com offers many Microsoft related articles. Welcome to Aspdotnet-suresh.
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
</body>
</html>





jQuery Add More or Less Link to Text | Show More Link to Shorten Text to Display Rest of Text