Using jQuery and Ajax To Create PHP Sessions

Read The Full Tutorial.

So the next article in my “Back to Basics” series is all around creating PHP sessions, however with a slice of difference by utilizing ajax and jQuery to seamlessly create them.

PHP Sessions

PHP Sessions are used to store information about your users, which you can carry from page to page without doing much at all. You can use them to manage logged in users quite efficiently by checking if a session exists for that user or not. To create a session you do the following:
1.session_start();
2.$_SESSION['username'] = "steve";
3.$_SESSION['uid'] = "123456";

As you can see, pretty simple, storing the data as variables. So, let’s set up a PHP script called login.php with the following code:
01.<?php
02.
03.if(isset($_POST['username']))
04.
05.{
06.session_start();
07.$_SESSION['username'] = $_POST['username'];
08.echo "1";
09.} else {
10.echo "0";
11.}
12.?>

What this code will do is simple, retrieve a POST variable called “username” and create a new SESSION variable with the same name. As I said, this is a basics tutorial, so what we’re also doing here is returning a value of “1″ to say that the session was successfully created, or “0″ if something went wrong. This will be used by our jQuery…

The HTML

Let’s just create a basic HTML page with an input box and a button. We’ll also setup a response DIV container for our feedback after setting up the session:
1.<input id="username" name="username" type="text" />
2.
3.<input id="submit" name="submit" type="submit" value="Create Session" />
4.
5.<div id="container"></div>

The jQuery

Lastly, the jQuery that needs to take the form data and send it to our PHP script via ajax and also, return a response:
01.$(document).ready(function() {
02.
03.$("#submit").click(function(){
04.
05.$.post("login.php", {username: $("#username").val()}, function(data){
06.
07.if(data == "1")
08.{
09.$("#container").html("<b>SESSION Setup Successfully!</b>");
10.} else {
11.$("#container").html("<b>Something Broke! HELP!</b>");
12.}
13.
14.});
15.});
16.});

So this code firstly wires up a click event onto the “submit” button. It then makes a jQuery POST ajax call off to your login.php file, sending the value of the input box as a username. The PHP file then does the rest and returns a result of 1 or 0, which our jQuery then neatly updates your HTML with.

Conclusion

So why is this cool? Well, ultimately, it’s not…. but what this does demonstrate is jQuery’s built in ajax ability to send and receive pieces of data to and from scripts. This simple demo shows you how you can now build in login functionality into your app without leaving the page. You could spice it up a bit by returning JSON objects or XML if you wish instead of simple zeros and ones, but you get the idea…

To access your newly created PHP sessions variable, simply call it like any other variable after “session_start();” e.g. $_SERVER['username'];

source: reynoldsftw

Saving Your Comment