Thursday, 30 October 2014

Create Login Page in PHP and MySQL with Session

Hello readers , hope you are good.

Today i will explain  "how create a login page using PHP/MySQL with Session.".
As i am consider that you have intermediate knowledge of PHP and MySQL.

I am explaining term : "SESSION"

First understand the concept behind session :
Suppose you have to work with an application , you open it, do some changes and then you close it. This is much like a Session.

 The computer knows who you are. It knows when you start the application and when you end.

But on the internet there is one problem: the web server does not know who you are and what you do because the HTTP address doesn't maintain state.

 A PHP session solve this problem by allowing you to store/hold user information on the server.However, session information is temporary and will be deleted after the user has left the website.
If you need a permanent storage you may want to store the data in a database.
 so we can use session to store/hold temporary information.

  How SESSION store values : 
 Sessions work by creating a unique id (UID) for each visitor and store variables based on this UID. The UID is either stored in a cookie or is propagated in the URL.

  SESSION in php coding :

<?php session_start(); // Starting a PHP Session , this must be declare before html tag.

$_SESSION['IsLogin']="Yes"; // store session data
 ?>
 <html>
    <body>
       <?php
        //retrieve session data
           echo "User Logged-in =". $_SESSION['IsLogin'];
     ?>
    </body>
 </html>


We will create Login page in 6 steps 

1. Configure the MySQL Database
2. Create a MySQL table name "users"
3. Create a test row in table "users"
4. Database connection.
5. Create PHP Login and Logout Function.

1. Configure the MySQL Database


CREATE DATABASE `login_test`;


2. Create a MySQL table name "users"


CREATE TABLE `users` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`username` VARCHAR(50) NOT NULL,
`email` VARCHAR(80) NOT NULL,
`password` CHAR(128) NOT NULL
) ;


3. Create a test row in table "users"


INSERT INTO `users` (
`id` ,
`username` ,
`email` ,
`password`
)
VALUES (
NULL ,
'test',
'test@test12.com',
'test'
);


4. Database connection



For database connection we create separate file db.php
db.php contains bellow database connection code.
<?php

DEFINE ('DB_USER', 'root'); // The database username.

DEFINE ('DB_PASSWORD', '');  // The database password.

DEFINE ('DB_HOST', 'localhost');  // The host you want to connect to.

DEFINE ('DB_NAME', 'login_test'); // The database name.
     
?>
Remaining part in 2 days

Wednesday, 2 July 2014

Gmail Like Loader


Gmail like loader is simple , we will implement this in 3 section :
  1. HTML part.
  2. CSS Part
  3. Javascript Part.
1. HTML part

          <div id="outer" style="border:1px solid;width:200px;height:10px;overflow:hidden;">
             <div id="inner" /></div>
         </div>

2. CSS part
    
          #inner
{
width: 0%;
height: 100%;
background-color: #6188F5;
background-repeat: repeat-x;
background-position: 0 0;
-webkit-background-size: 16px 8px;
-moz-background-size: 16px 8px;
-o-background-size: 16px 8px;
background-size: 16px 8px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-animation: load 5s linear 0 infinite;
-moz-animation: load 5s linear 0 infinite;
-ms-animation: load 5s linear 0 infinite;
-o-animation: load 5s linear 0 infinite;
animation: load 5s linear 0 infinite;
}

3. Javascript part

First include jQuery library  :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
inc=1;
           function Loading()
            {
                var w = parseInt((parseInt($("#inner").css("width"))/parseInt($("#inner").parent().css("width")))*100)+ inc;
                if((inc<101))
                $("#inner").width(inc+"%");
                inc++;
            }
           
            $(document).ready(function(){
               setInterval(Loading,80);
            });

Finaly demo will look like this : 

Monday, 30 June 2014

Unique random string in Javascript.

Random string will show here
click here for live demo
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">// <![CDATA[
var lineIds = new Array();
lineIds[0] = "sat3oiorab";
lineIds[1] = "retozarrourn";
lineIds[2] = "you6oeat2r";
lineIds[3] = "seartmynlf";
lineIds[4] = "isartmyna";
lineIds[5] = "pagsguexge";
lineIds[6] = "mycishahbar";
lineIds[7] = "acsyoikecess";
lineIds[8] = "ope3lwzaol";
lineIds[9] = "metrtnwgaho";
lineIds[10] = "whlooegtat";
lineIds[11] = "iwg9vletas";
lineIds[12] = "gosaohzming";
lineIds[13] = "toscsxejtay";
lineIds[14] = "iseehmp8this";
lineIds[15] = "agsoyb5oood";
lineIds[16] = "mepaatzathod";
lineIds[17] = "idohvqaiont";
lineIds[18] = "kuaiz51now";
lineIds[19] = "hov89rmowtoget";

function RandomValue()
{
   var rand = lineIds[Math.floor(Math.random() * lineIds.length)];
   return rand;
}
function RandomId()
{
    var text = "";
    var possible = "A"+RandomValue()+
"BC"+RandomValue()+
"DE"+RandomValue()+
"F"+RandomValue()+
"GH"+RandomValue()+
"IJ"+RandomValue()+
"KL"+RandomValue()+
"MN"+RandomValue()+
"OPQRST"+RandomValue()+
"U"+RandomValue()+"VWX"
+RandomValue()+"YZab"+
RandomValue()+
"c"+RandomValue()+
"de"+RandomValue()+
"fgh"+RandomValue()+
"ij"+RandomValue()+
"k"+RandomValue()+
"lm"+RandomValue()+
"nop"+RandomValue()+
"qrs"+RandomValue()+
"tu"+RandomValue()+
"vw"+RandomValue()+
"xyz01"+RandomValue()+
"23"+RandomValue()+
"456"+RandomValue()+
"78"+RandomValue()+"9";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text.toLowerCase();
}

 $("#tp").html("");
// genrate random string in javascript
$("#tp").append(RandomId());

// ]]></script>