Simulating Session in WordPress through Cookies

Sometimes, when developing plugins for wordpress, you would want to do something differently based on the client request. Normally, we might be tempted to use PHP SESSION which I don’t think is a good solution. I fall in a similar situation where i was having to display something based on the client request.

So, lets consider a scenario. A user is displayed a page containing a drop-down list. The user has to select a car from the drop-down list. In the beginning, only the drop-down list should be displayed because the user has not yet select anything. But later, when the user select a car, and if he returns to that page, the picture of the car should be displayed. So, the question is, how does the server know that the user has already selected a car or not??

My solution, which I don’t know if it is the best, is to create a cookie of the id of the selected car on the client and to check this cookie on the server.

So, on the client, I should have the following functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
add_action('wp_head', 'my_action_javascript');
function my_action_javascript() {
?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" >

                 //function setCookie, getCookie from http://www.w3schools.com/js/js_cookies.asp
        function setCookie(c_name,value,exdays)
        {
            var exdate=new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
            document.cookie=c_name + "=" + c_value;
        }
        function getCookie(c_name)
        {
            var i,x,y,ARRcookies=document.cookie.split(";");
            for (i=0;i<ARRcookies.length;i++)
            {
              x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
              y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
              x=x.replace(/^\s+|\s+$/g,"");
              if (x==c_name)
                {
                return unescape(y);
                }
              }
        }       
        function setSelectedId(){
            var selected_id=$("#selected_id").val();
            setCookie("selected_id",selected_id,1);
            return true;
        }

    </script>
<?php
}
function showCar()
{
?>
        <form action="" method="POST" onSubmit="return setSelectedId();">   
            Choose your Car:
            <select id="selected_id">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
                        <input type="submit" value="Choose" />
        </form>
        <br/>
        <script type="text/JavaScript">$("#selected_id").val(getCookie("selected_id"));</script>
<?php
        if (!$_COOKIE['selected_id']){
            return "";
        }
        $id=$_COOKIE['selected_id'];
        return getLink($id);
}
?>

Description of functions:

  • setCookie,getCookie only set a value in the cookie.
  • setSelectedId is called when the user submit the form. It uses setCookie to insert the selected_id in the cookie
  • When the request is made, the server check if cookie has been set (!$_COOKIE['selected_id']) and if yes, it returns a the link based on the id. getLink is a custom function which you must define based on the action you want to take if the user has selected something

In case you have a solution, be it better or anything, please share it :-)

Comments

  1. Ti Monstre says:

    it looks like a small project :)

Speak Your Mind

*