• A user model with an email address
• jquery-rails gem

To start we’re going to add the user to the view from the session. To do this in your controller add the following.

@user = session[:user]
if !@user
  redirect_to '/login_path'
end

Next we’re going to create the form, this is pretty simple but there are a couple of small things to watch out for. Here’s what it will look like.

<% unless @user.email %>
    <%= form_tag("/signup/email", :remote => true, :format => :js) do %>
        <%= text_field_tag :email, '', :size => 60 %>
        <%= submit_tag "Go!" %>
    <% end %>
<% end %>

So as you can see we’re adding a form to the view only if the user has not previously entered their email(unless @user.email). From there we create the form tag. There are 2 things to watch out for here. The first is :remote => true. This will tell rails that your form is going to be submitted via ajax and not via the regular redirection. The second is :format => :js. This will tell rails to use the respond to js block that we will discuss a little later on. As for a normal form the first argument is the controller/action path we want to take. For simplicity’s sake I just left it as a string(you could also use :controller/:action as well). Next we add a text field and a submit button and then close off our unless statement and out form block.

Now we need to add a signup controller so that the form has somewhere to submit the ajax request to. Do so by running the following command.

rails generate controller signup email

This will generate a brand new controller with a single action of email along with all the views/tests as well. Let’s open up our signup controller and add the following code.

def email
  @user = session[:user]
  if (@user)
    unless @user.email
      @user.email = params[:email]
        respond_to do |format|
            if @user.save
              format.js
            else
              @user.email = nil
              format.js { render :partial => 'error' }
            end
        end
    end
  end
end

Notice how we have a small piece of code in there(respond_to do |format|)? This code will tell rails which methods that it will respond to. In order for your method to respond to an ajax call you need to have format.js inside of your respond_to block just like above. Next is the sweet part. We go if @user.save render the default view for rails. Now this is not a traditional erb file. Let’s go ahead and create email.js.erb inside of our signup views directory. This will tell rails to respond to the ajax call using js instead of a plain erb file.

Inside of the else we need to make sure that we reset the user’s email to nil so that the following ajax calls work. Then we render a partial called error. This is also going to be a UJS file called _error.js.erb. Inside of these files you can do whatever you want as far as javascript/ruby go. You pass variables to the view the same way and access them using ruby inside the js.erb file and you can also perform JS functions on DOM objects that are back on the page that made the AJAX request.

Hopefully this helps anyone reading on figuring out how to use UJS in rails 3.1. As always, if you have any questions/comments feel free to post them in the comments below.

<%= link_to 'link/path/here' do %>
    <%= image_tag 'image.png', :class => 'someClass' %>
<% end %>

It’s quick and it saves you a ton of time doing it manually!

if ($request->isPost()) {
}

Next we’ll use the “isValid” method call on your form. This uses the parameters you set when you created the form to validate each element. We pass in the post parameters into the isValid to do the verification like follows:

if ($loginForm->isValid($request->getPost())) {
}

This will go inside of your isPost if statement. Next we’re going to grab the parameters that we want to validate with. In this case we’ll use the username/password combination. We’ll then grab an instance of the database adapter and create a Zend_Auth_Adapter_DbTable object that we pass in the database adapter to.

// get the username and password from the form
$username = $loginForm->getValue('username');
$password = $loginForm->getValue('password');
 
// Create the adapter and zend auth instance
$dbAdapter = Zend_Db_Table::getDefaultAdapter();
$authAdapter = new Zend_Auth_Adapter_DbTable($dbAdapter);

Now is where the heavy lifting happens. We need to pass some items into the $authAdapter so that it knows what to use to authenticate the user. WE do that by passing it a tableName, an Identity Column, a Credential Column and a Credential Treatment like follows:

$authAdapter->setTableName('User')
            ->setIdentityColumn('username')
            ->setCredentialColumn('password')
            ->setCredentialTreatment('MD5(?)');
 
// pass to the adapter the submitted username and password
$authAdapter->setIdentity($username)
            ->setCredential($password);

In this tutorial I’m just using an MD5 for the password however there are a plethora of other options available to use. Next we need to get our Zend_Auth instance and call the “authenticate” method while passing in the $authAdapter we created earlier. We then call the “isValid” method on the $auth adapter to return a boolean.

$auth = Zend_Auth::getInstance();
$result = $auth->authenticate($authAdapter);
 
if ($result->isValid()) {
}

Now we know that the user has been authenticated. So there was a row in the database that matched the user’s credentials. We can now proceed to set the user session values and redirect them to the location you want them to go. We’re going to grab all the user’s information from the database(excluding their password) to set to the session.

// get all info about this user from the login table
// ommit only the password, we don't need that
$userInfo = $authAdapter->getResultRowObject(null, 'password');
 
// the default storage is a session with namespace Zend_Auth
$authStorage = $auth->getStorage();
$authStorage->write($userInfo);
 
$authNamespace = new Zend_Session_Namespace('Zend_Auth');
$authNamespace->username = $username;
 
$this->_redirect('/dashboard');

Finally we need to set an error message if the user enters invalid credentials. We do that in the else statement of the $result->isValid call.

else {
    $errorMessage = "Wrong username or password provided. Please try again.";
}

We can now use that error message in our view by going $this->view->errorMessage = $errorMessage. All together it looks something like this:

/**
 * Index Action to display the login form and
 * uses AJAX call to validate + authenticate the user
 */
public function indexAction()
{
    // If we're already logged in, just redirect  
    if (Zend_Auth::getInstance()->hasIdentity()) {  
        $this->_redirect('/dashboard');  
    }  
 
    $request = $this->getRequest();  
    $loginForm = $this->getLoginForm();  
 
    $errorMessage = "";  
 
    if ($request->isPost()) {
        if ($loginForm->isValid($request->getPost())) {
            // get the username and password from the form
            $username = $loginForm->getValue('username');
            $password = $loginForm->getValue('password');
 
            $dbAdapter = Zend_Db_Table::getDefaultAdapter();
            $authAdapter = new Zend_Auth_Adapter_DbTable($dbAdapter);
 
            $authAdapter->setTableName('User')
                	->setIdentityColumn('username')
                    	->setCredentialColumn('password')
                    	->setCredentialTreatment('MD5(?)');
 
            // pass to the adapter the submitted username and password
            $authAdapter->setIdentity($username)
                    	->setCredential($password);
 
            $auth = Zend_Auth::getInstance();
            $result = $auth->authenticate($authAdapter);
 
    	    // is the user a valid one?
       	    if ($result->isValid()) {
	        // get all info about this user from the login table
	        // ommit only the password, we don't need that
	        $userInfo = $authAdapter->getResultRowObject(null, 'password');
 
	        // the default storage is a session with namespace Zend_Auth
	        $authStorage = $auth->getStorage();
	        $authStorage->write($userInfo);
 
	        $authNamespace = new Zend_Session_Namespace('Zend_Auth');
	        $authNamespace->username = $username;
 
	        $this->_redirect('/dashboard');
            } else {
    		$errorMessage = "Wrong username or password provided. Please try again.";
	    }
	}
    }
    $this->view->errorMessage = $errorMessage;
    $this->view->loginForm = $loginForm;
}

As always feel free to post any questions in the comments section below.

Let’s start out by opening up XCode and creating a new window based application from the standard iphone OS templates. Save the file to wherever you save your iphone files to and create.

Once you create and save your new window-based application, open up the classes and resources folders in the XCode folder explorer. Open up the ViewDemoAppDelegate.h and insert the following code…

//
//  ViewDemoAppDelegate.h
//  ViewDemo
//
//  Created by Mark Hazlett on 10-03-26.
//  Copyright Code Perspective 2010. All rights reserved.
//
 
#import <UIKit/UIKit.h>
@interface ViewDemoAppDelegate : NSObject
{
    UIWindow *window;
    UINavigationController *navController;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
 
@end

All we’re doing here is creating a UINavigationController object so that we can access it in our application delegate implementation file. Let’s go ahead and open up our ViewDemoAppDelegate.m and add the following code to the application did finish launching method.

- (void)applicationDidFinishLaunching:(UIApplication *)application
{
	//Allocate and instatiate a new UINavigationController Object
	navController = [[UINavigationController alloc] init];
 
	//Allocate and initialize a First View Controller Object
	FirstViewController *firstViewController = [[FirstViewController alloc]init];
 
	//Push the first view controller onto the view controller stack without animation
	[navController pushViewController:firstViewController animated:NO];
 
	//Some memory management
	[firstViewController release];
 
	//Make it visible
	[window	addSubview:navController.view];
 
    // Override point for customization after application launch
    [window makeKeyAndVisible];
}

The first thing we’re doing in this function is instantiating the UINavigationController that we declared in our header. We pass it an alloc and init to allocate the appropriate amount of memory for it as well as an init to initialize it properly. The next thing we’re going to do is create a new FirstViewController object. Now you may be asking what a FirstViewController object is? That’s because we haven’t created it yet. So let’s go ahead and go to “File > New File” and add a new file that’s of the type UIViewController subclass. Make sure you check the little check box that says “With XIB for user interface”. This will give you an XIB file to work with instead of producing your interface programmatically. Now that we have our FirstViewControllerObject the only thing we have to do is import the header into the ViewDemoAppDelegate. So make sure to declare #import “FirstViewController.h” at the top of your code. Now onto the rest of the code in our application did finish launching method. The first thing we do with our allocated view controller is push it onto the navigation stack. Now because this is our first view we’re pushing onto the navigation stack we want to make sure to pass “NO” to the animated parameter because we don’t want to animate the root view when it’s pushed onto the stack. Now for some memory management. Once the FirstViewController is pushed onto the navigation stack the retain count on the object moves up to 2, therefore we can perform a release on the FirstViewController object so that the retain count stays at 1. Last thing we do in this method is add the view so our window so that it’s actually visible when we load the application.

Now we’re going to get into some interface builder stuff. Let’s start by opening up our FirstViewController.xib file in Interface Builder(or by just double clicking on it). You should see just a plain white view. Now in order to transition between views we need a button to press to actually transition between views. So let’s go ahead and add a UIButton to the view. Label the button anything you would like to to transition between views. Go ahead and save that file for now(we’ll come back to it later to connect the pointers). Next we’re going to create a new file in our project that’s a subclass of UIViewController. Again we’re going to make sure that “use XIB for user interface” is selected and press create. We’re going to name this view controller “SecondViewController” as it’s the one that we transition to from pressing the button on our first view controller. Once you create the new View Controller you should see it appear on the left hand side in your package explorer. Let’s go into our FirstViewController.h and add the following code.

#import <UIKit/UIKit.h>
@interface FirstViewController : UIViewController
{
	IBOutlet UIButton *transitionButton;
}
 
- (IBAction) pushViewContoller:(id) send;
 
@end

All we do here is create an IBOutlet for the UIButton we added to the XIB file and call it transition button. Then we create an IBAction method that will get called whenever the user presses inside the UIButton. Let’s open up our FirstViewController.m implementation file and implement the IBAction method like so…

#import "FirstViewController.h"
#import "SecondViewController.h"
 
@implementation FirstViewController
 
- (IBAction) pushViewContoller:(id) send
{
	//Allocate and instantiate the second view controller object
	SecondViewController *secondView = [[SecondViewController alloc] init];
 
	//Push the secondViewController onto the navigation stack
	[self.navigationController pushViewController:secondView animated:YES];
 
	//Some memory management
	[secondView release];
}

Now as you can see, we first provide our implementation with an import of the SecondViewController.h that we created earlier. We then proceed to allocate and instantiate our SecondViewController object. This time we’re going to push it onto our navigation stack and passing the YES parameter to our animated option because this time we do want it to be be animated when we press the button. After that we just provide some basic memory management to bring the retain count of the SecondViewController object back down to 1. That’s al the necessary code we need right now, however if you run this program right now you’ll notice that if you press the button on the first view controller it won’t really do anything. So let’s open back up our FirstViewController.xib file and hook up our IBOutlet and IBAction to our button that we created. After you’re finished hooking up these actions in the File’s owner connections inspector, the file’s owner connections inspector should look something like this..

Now you should be able to run the application and press the button and see the transition to the second view controller(which will be blank unless you added something to the nib) and press the back button in the navigation controller and transition back to the first screen.

If you’re having some troubles, here is the project and all the code. Download

Also again, if you have any questions feel free to leave them in the comments section.

1. Mac running the latest version of xcode – This can be found on your install disc for leopard or snow leopard.

2. Latest version of the iphone SDK – This can be found at developer.apple.com

Now we can get started. Once you have xcode and the iphone SDK installed, open up xcode(Macintosh HD > developer > Applications). Once you have xcode installed, from the menu bar select file > new project. You should see a windows like the this one.

Select window based application from the iphone application option on the left hand side of the window. Once you select the window based application, xcode will prompt you to save the project. I named my project “LabelTester” and saved it under my personal iphone projects directory. Once you save the project, an xcode window should open up and look something like this.

You should see a combination of files here in the browser in the code browser. The first should be the CoreGraphics.framework. This is just a set of files provided by Apple that have all the code relevant to the core graphics libraries in Cocoa. The second is the foundation.framework. This is the library set for the foundation framework which is basically all the classes like NSArray, NSString and other foundation objects. The next item should be LabelTester.plist. The plist, or preference list, is a set of XML attributes that control how the application is handled. For the sake of this tutorial, you won’t need to open the plist. The next item should be the LabelTester.app file, which is the executable for your application. Once your application is deployed, all files and resources in your project will be located inside your app’s .app file. The next file is the LabelTester.pch file. This file is the prefix header for your application. The LabelTesterAppDelegate.h file is the next file in the list. This file is the header file for your application delegate. This is the starting for your application, the app delegate is what’s run by your main.m file when you app is launched. The .h file is of course the header file, which is basically the interface file that the .m file will implement. The next file is of course the LabelTesterAppDelegate.m. This file is the implementation file for the app delegate header. Next is the main.m file. This file is the application launcher for your app. It basically runs the app delegate. The next file is the Main Window.xib file. Anything with a nib/xib file extension is classified as an interface builder file and you open these files in the Interface builder application. Finally, the UIKit.framework. This library is used to correspond to all the UI elements on the iphone(text fields, buttons, etc).

Let’s start by opening up our Main Window.xib to setup our interface. Start by dragging a button from the libraries window onto your main View. Rename that button by double clicking on the button and change it to say “Update Label!”. Next, grab a text field and drag it just above the button. Expand the text field to fit the majority of the screen. Select the textfield and go into the attributes tab and enter into the placeholder field, “Enter Text to update Label”. Once that’s finished, drag a label onto the main window and change the text from “label” to “Label to Update”. Once that’s done you can save the interface builder file by pressing (command + s) and switch your view back to your xcode project.

Open up the LabelTesterAppDelegate.h file and change the file to reflect the following code.

#import 
 
@interface LabelTesterAppDelegate : NSObject
{
    UIWindow *window;
	IBOutlet UITextField *textField;
	IBOutlet UIButton *button;
	IBOutlet UILabel *label;
	IBAction *updateButtonPressed;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITextField *textField;
@property (nonatomic, retain) IBOutlet UILabel *label;
 
-(IBAction)updateButtonpressed:(id) sender;
 
@end

The first lines inside the curly braces will declare variables that we will be hooking up in Interface builder later. After the curly braces are closed, we have these property tags. These will allow us to have access to the objects and their data in the implementation file. After that we have an IBAction method declaration. This will eventually be hooked up to our button to run every time that our button is pressed. You can think of an IBAction method as an event handler in OBjective-C. Now let’s move onto our LabelTesterAppDelegate.m file and add the following method directly below out import statement.

#import "LabelTesterAppDelegate.h"
 
@implementation LabelTesterAppDelegate
 
@synthesize window;
@synthesize textField;
@synthesize label;
 
-(IBAction)updateButtonpressed:(id) sender
{
	//allocate a string and initialize it with the data from the text field
	NSString *string = textField.text;
 
	label.text = string;
}

Basically what we’re doing here is just creating that IBAction method that we declared in our interface file. Inside that method, we allocate a string to the value of our textField.text and then set the label equal to the string that we get from the textfield. That’s all the code we’ll need for now. Don’t forget to synthesize your objects below the implementation declaration in order to have access to the data you want. If you try and run this now, the application will run but will not function because the pointers in Interface Builder are not hooked up. So let’s go ahead and do that next. Save all your xcode files and open back up your Main Window.xib file in Interface Builder.

In order to setup a pointer in Interface builder, start by clicking on the application delegate and then the connections manager should appear. Beside each of the items that you created you should see a tiny circle. For each, click on the circle and drag the pointer to each of the elements in your window. This will create a pointer to that element. Now click on the button and then open it’s connection manager. Find the “touch up inside” connection and drag that pointer to the “file’s owner” section in the library and select “updateButtonPressed” when it appears. Once this is completed, you should see the connection screen look something like this.

That’s all folks, now if you run the application and enter some text into the text field, it will update the label to whatever text you entered. To download the whole project click here.

Cheers everyone and stay tuned for part 2!

Alright let’s get started by just creating a basic log in window and place it in the center of the screen. First the log in window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Sample Log In</title>
 
		<link rel="stylesheet" href="loginCSS.css" type="text/css" />
	</head>
	<body>
		<div id="outerLimit">
			<div id="container">
				<div id="innerLimit">
					<div id="loginBox">
						<form id="login" name="login" method="post" action="userAuth.php">
							<label for="username">Username:</label><br />
							<input type="text" id="username" name="username" size=40 /><br />
							<label for="password">Password:</label><br />
							<input type="password" id="password" name="password" size=40 /><br />
 
							<input type="submit" name="submit" value="Log In" />
						</form>
						<br />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Next let’s move into a bit of the CSS. Basically we just want to create a window with a gray background so the fields are extremely easy to see. I called the CSS file in this case loginCSS.css but you can call it whatever you like as long as it’s referenced properly in the HTML section.

body
{
	background-color:white;
	min-height: 468px;
	min-width:552px;
	font-family:Helvetica;
}
 
a
{
	font-size:small;
}
 
#loginBox
{
	background-color: #e4e4e4;
	position:relative;
	top:25%;
	left:25%;
	width:300px;
	padding:15px;
}
 
#outerLimit
{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}
 
#container
{
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height:468px;
}
 
#innerLimit
{
	width:552px;
	height:468px;
	margin-left:auto;
	margin-right:auto;
}

As you can see, I just styled the page a little bit to make it a little bit easier for the user to use. Now that we have a basic page for the user to log in, we’ll also need a page, such as a dashboard, for the user to access when they enter in correct login criteria. In this case we’re just going to use a page that has a basic header telling the user they have logged in correctly. The page can look something like this.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Sample Log In</title>
 
		<link rel="stylesheet" href="loginCSS.css" type="text/css" />
	</head>
	<body>
		<h1>You are now logged in!</h1>
		<a href="logout.php">Log Out Here</a>
	</body>
</html>

As you can see I have also included a log out link just below the h1 tag. If a user logs into the system we also want them to be able to log out. Next we’re going to create the SQL for our database. For this tutorial I’ll be using MySQL, however Oracle or SQL Server could also be used.

Note: If you’re going to use a different database then the code to connect to the database will be slightly different.

DROP TABLE IF EXISTS 'testDB'.'user'
 
CREATE TABLE 'testDB'.'user'
(
	'username' VARCHAR(10),
	'password' VARCHAR(10)
);
 
INSERT INTO 'testDB'.'user'
(username, password)
VALUES
('admin', 'password'),
('guest', 'password');

This is just a very simple database table that contains only a username and password. This script could obviously be modified to accept further fields of to encrypt the password field to increase the security of your system. Things like that will be out of the scope of this tutorial however.

Now that we have our environment set up we can start to use PHP to get data from the forms and compare them with the database. For the this tutorial we will only be using the POST method of retrieving data from forms. Using GET is often not recommended when getting sensitive data such as usernames and passwords. As you can see from the log in window, we have used the POST method to get the data, and when the form is submitted we are calling the userAuth.php file. Let’s go ahead and create that file now.

This block of code we will be using to check to see if the fields are blank. If they are we want to send them back to the login.html file to log back in again using the header() function. Next we want to enter all the configuration information to connect to the database and use some PHP functions to protect our site from SQL injection errors.

/*Create the variables to hold the database information*/
 
$dbName = "testDB";
 
/*Table name that we're checking against*/
 
$dbTable = "user";
 
/*Database username*/
 
$dbUsername = "DBUsername";
 
/*Database Password*/
 
$dbPassword = "DBPassword";
 
$username = $_POST(['username']);
$password = $_POST(['password']);
 
/*This next block is to prevent SQL injection hacks*/
$username = stripslashes($username);
$password = stripslashes($password);
 
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

I have put in default values into the variables. Variables such as $dbTable and $dbUsername will be subject to change based on your database configuration. These values will need to be filled in with correct values from your system. Next we’re going to be connecting to the database and opening a connection.

/*Connect to the Database*/
 
$connection = @mysql_connect("localhost", $dbUsername, $dbPassword) or die(mysql_error());
 
/*Select the database you want to access*/
 
$db = @mysql_select_db($dbName, $connection) or die(mysql_error());
 
/*Select statement from the database to see if the user is in the system*/
 
$sqlQuery = "SELECT COUNT(*) FROM $table_name WHERE username = '$username'
AND password = password('$password')";
 
/*Create a variable to hold the results of the SQL query*/
 
$result = @mysql_query($sqlQuery, $connection) or die(mysql_error());
 
/*Check the number of rows returned from the query*/
 
$num = mysql_num_rows($result);

Now we’re getting to the user authentication section. We’re now going to see if the number of rows that was selected is anything but 0. In theory it should ever only come back with 1 or 0 rows, however in systems where users can multiple accounts it’s good to keep it to != 0.

/*If the number of rows is not equal to 0 then authenticate the user*/
 
if ($num != 0)
{
	session_start();
 
	//Create a session for the username and password
	session_register($username);
	session_register($password);
 
	if(!session_is_registered($username))
	{
		header("location:login.html");
	}
	else
	{
		//because the user is authenticated move them to the dashboard
		header("Location: home.html");
	}
}
else
{
	header("Location: login.html");
	exit;
}
?>

We then register a session and store the username and password in the session. If the session has been registered correctly then you can send the user to the home screen. If the session is not registered correctly for some reason we don’t want the users accessing the system, so we send them back to the login screen to attempt to log in again.

That’s it, an entire login system. Of course this is just meant to give you the idea of the steps and should by no means be used in a real-world system as is. However you should have a firm understanding of how a basic login system works using PHP/MySQL and a little bit of HTML and CSS. As always if you have any questions/concerns feel free to leave a comment and I’ll get back to you asap. ]]> http://codeperspective.ca/2009/12/13/intro-to-php-creating-a-basic-login-system/feed/ 4 http://codeperspective.ca/2009/12/09/intro-to-php-intro-to-sessions-and-cookies/ http://codeperspective.ca/2009/12/09/intro-to-php-intro-to-sessions-and-cookies/#comments Wed, 09 Dec 2009 17:27:58 +0000 Mark Hazlett http://codeperspective.ca/?p=177 Cookies and Sessions are extremely useful to a PHP programmer, however they could be considerably confusing to a beginner. Cookies and sessions are used to store pieces of information for a period of time until it is destroyed. This information inside of a cookie or a session can be used to store things like log in information, URL information and much much more.

Cookies

Cookies are pieces of information stored on the client’s machine. The disadvantage here is that cookies can be disabled or ignored from the client’s end. So if you’re using cookies, try not to use them for anything that is crucial to the system functioning(this is what sessions are for… more on that later). The syntax for creating a cookie looks like this…

//A cookie can be equal to a string
$_COOKIE['nameOfCookie'] = 'What information you want to store here';
 
//or a cookie can be equal to a variable
$_COOKIE['nameOfCookie'] = $username;

According to PHP variable declaration rules, you can name the cookie whatever you would like as long as it doesn’t break any of the PHP rules. Data from created cookies can then be used anywhere you like just like any variable such as…

//print the value of the cookie
print($_COOKIE['nameOfCookie']);

Alternately, you can use the isset() method to check to see if a specific cookie has been set. This is more useful when using sessions but we’ll get to that later.

Sessions

Session differ from cookies in that they are stored on the server as opposed to the client. Sessions offer one major advantage over cookies, they cannot be disabled by the user, thus making sessions much more secure than cookies. When dealing with things like log in information and secure data, session are a much better choice than cookies. Sessions are declared using the same conventions as cookies…

//a session can be equal to a string
$_SESSION['nameOfSession'] = 'What information you want to store in the session';
 
//or a session can be equal to a variable
$_SESSION['nameOfSession'] = $username;

This will declare a session variable, however there is one key function that needs to be created prior to using a session variable. The session_start() function needs to be called before any data is sent from the server. Even if a spare white space is sent, the session_start() function will most likely send an error. Whenever you want to use a session variable in a PHP file/function, you must call the session_start() function at the very beginning of the page in order to use a session variable that has been created. This needs to occur even prior to sending the DOCTYPE to the client. To use a session variable the syntax is as follows…

//start the session
session_start();
 
//print the session variable
print($_SESSION['nameOfSession']);

The syntax is similar to using a cookie and alternatively you can use the isset() method to check if a session variable has been created or not. This becomes particularly useful when it comes to creating login systems that keeps users logged in using a session.

In full, you can use sessions or cookies if you like but keep in mind that sessions are stored on the server and cannot be disabled by a user, thus making them much more secure and reliable. In order to create a session, remember to call the session_start() method at the very start of the document or you may not be able to use the session variables.

Often when writing JQuery code(especially for plugins) there are times when you need to execute the same block of code multiple times. Instead of writing them all out individually and making our code really terrible process wise, we can use functions and function calls to call the same block of code over and over.

Creating Functions

You can create a function in 2 different places. The first is in the same script tags, but not inside the document ready function. Or second, you could create a brand new script file and then reference that script file in your header. Inside this script file you could create your method and it would be able to be accessed by the main file.

To create a function, the syntax looks like this…

function nameOfFunction()
{
	//your code here
}

This tells the browser that there is a function called nameOfFunction that is not being passed any parameters. Passing parameters is something I’ll get into a little bit later. Now say you wanted to alert the user with a javascript pop-up box every time this function was run. You could add some code into the function to allow a dialog box to appear like so.

function nameOfFunction()
{
	alert("We are now alerting the user!");
}

Executing Functions

Now that we have a function created, we need to somehow call that function to execute. That’s where our javascript method calls come in. Let’s say we wanted to execute the previous function. The code would look like this.

$(document).ready(function(){
	nameOfFunction();
});

Of course this would call the function immediately after the page was ready. You can use a function call in JQuery in any function. So if you wanted to add it inside of a .click function you could do that as well. That’s all you need to do to execute functions in JQuery.

Passing Arguments to Functions

Let’s say you wanted a function to work with a piece of data from a form, but you didn’t want the function to retrieve that piece of data inside the function. You can use a piece of code called an argument to pass to the function. This allows you to pass values to a function so they can be used. To create a function with an argument then all you need to do is add the argument into the brackets in the function header. It looks like this.

function nameOfFunction(argument)
{
	//your code here
}

Now obviously since we have that argument in the argument ready to do something with it, we may also want to return a value back to the original function so that we can maybe display the result of a calculation or something like that. If we want to return a value all we have to do is insert a return value into our function.

function nameOfFunction(argument)
{
	var total = 10 + argument;
 
	return total;
}

This function will now accept a value, add 10 to that value and return it to the original function call. This way if we need to manipulate some data quite a few times, we could use a function to do that display the result.

Function Calls with Arguments

Now that we have a function made that’s accepting an argument and returning a value, we can use a function call and pass an argument to the function so it can do the calculation and we can then display the result. The function call looks something like this.

$(document).ready(function(){
	alert("The total is = " + nameOfFunction(10);
});

In our JQuery ready function we are now just displaying an alert. Inside the alert we are actually making the function call and passing a value of 10 to our function. The function is then going to add 10 to our passed argument and return a value of 20. The alert therefore is going to display – “The total is = 20″. And that’s all for basic functions and function calls.

Let’s start by creating a basic HTML page and call it index.html in the root of our web servers directory and add a basic page structure to that file. Let’s also make sure that we have the JQuery libraries imported and ready to use.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>JQuery Animations</title>
 
		<script type="text/javascript" src="lib/jquery.js" />	
 
	</head>
	<body>
	</body>
</html>

Now, in order to complete animation we will need to display an element to animate. The easiest way to do this is to use some basic CSS. So for the purpose of this tutorial let’s create a style.css file and put it in the root of our directory. Let’s then link it to our index.html file so that we can use it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>JQuery Animations</title>
 
		<script type="text/javascript" src="lib/jquery.js" />
 
		<link rel="stylesheet" href="style.css" type="text/css" />
 
	</head>
	<body>
	</body>
</html>

Now that we have our CSS file linked to our HTML we’re going to need to add an element to animate. For this demonstration we’re just going to use a red box that’s 100px by 100px inside a div. Let’s add that to our CSS file.

#redBox
{
	width:100px;
	height:100px;
	background-color: red;
}

Now we’ll add the appropriate div tags to our HTML file so that our red box shows up. We’re also going to add an anchor tag directly below our red box to toggle the box between showing and disappearing.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>JQuery Animations</title>
 
	<script type="text/javascript" src="lib/jquery.js" />
 
	<link rel="stylesheet" href="style.css" type="text/css" />
 
</head>
	<body>
		<div id="redBox"></div>
		<a href="#">Show/Hide</a>
	</body>
</html>

Now we’re all ready to start coding our JQuery. If you run the HTML file right now you should see a red box sitting at the top left hand corner of the page. Right now the red box shouldn’t do anything as we haven’t coded the JQuery. So let’s start out by using the document ready function. and adding a function to all of our anchor tags.

<script>
	$(document).ready(function(){
		$('a').click(function({
 
		));
	});
</script>

Now we’re ready to be using some of the animation methods found in the JQuery library. First, since the box is by default showing up in the browser we’re going to make it hide by using the .hide() function. The .hide() function can be used without any parameters being passed or you can pass a speed and an optional callback(). The callback is a function to be executed when the animation has been completed. For the sake of this tutorial we’re only going to cover the speed parameter.

<script>
	$(document).ready(function(){
		$('a').click(function({
			$('#redBox').hide('slow');
		));
	});
</script>

Now, if you include the script section in the header of your index.html document and run it, when you click the anchor tag you should see the red box that we created disappear. However now the red box is gone and we can’t get it back. We’re going to need to change this so that we can get it back by clicking on the anchor tag again. In order to get this we’re going to need to add another function and pass it as a parameter to our .click() function for our anchor tags.

<script>
	$(document).ready(function(){
		$('a').click(function({
			$('#redBox').hide('slow');
		},function(){
			$('#redBox').show('slow');
		});
	});
	</script>

Since we’re adding the new function as another parameter to the click function, we need to terminate the current function before starting the new one. This is why we need to close the curly braces from the previous function before we start another. If we didn’t close the curly braces and just put it inside the first function then every time we clicked on the anchor tag, it would disappear and then show again without pressing the anchor tag. Now when we put that all together and run it, whenever we click the anchor tag the box should disappear and then re-appear when we click it again. Here is the complete code.

<html>
<head>
	<title>JQuery Animations</title>
 
	<script type="text/javascript" src="lib/jquery.js" />
 
	<link rel="stylesheet" href="style.css" type="text/css" />
 
	<script>
	$(document).ready(function(){
		$('a').click(function({
			$('#redBox').hide('slow');
		},function(){
			$('#redBox').show('slow');
		});
	});
	</script>
 
	</head>
	<body>
		<div id="redBox"></div>
		<a href="#">Show/Hide</a>
	</body>
</html>

In the tutorial I just used 2 of the more basic animation functions in the JQuery library. For a full reference to the JQuery animation API, please check out http://docs.jquery.com/Effects/. Stay tuned for JQuery part 3 .

Benefits of JQuery

- Lightweight Footprint
- CSS3 Compliant
- Cross-Browser compatibility

What you will need

- Javascript enabled browser
- JQuery Library
- An application to code in(Coda, Aptana, or even notepad)

Starting out

To start out coding with the JQuery library you will need to import the library. Usually I like to structure my site with a /lib folder at the root of the directory. This way I can include all of my javascript libraries in one central location so they don’t replicate down the road. So for this project i’ll setup my directory structure with my JQuery files inside the lib folder. Next we’ll create an index.html file inside the root directory. This will be our testing file for our JQuery code. Alright, let’s get started, let’s start by adding a basic page structure to your index.html file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>JQuery Test</title>
	</head>
	<body>
	</body>
</html>

Next we need to add in our JQuery script so that we can use it. Add in the following code inside your header tags. Use the src tag to point to your JQuery javascript file.

<script type="text/javascript" src="lib/jquery.js" />

Making Sure the document is ready

First off, any JQuery code that we want to include goes into script tags. This is because JQuery runs on top of javascript, so in order for the browser to understand what JQuery is doing, it needs to be included inside the script tags.

Now, the first thing that we need to do is make sure that the document is ready to be used. We do this to make sure that no changes occur before the user is ready to see it. So if the page isn’t loaded or the user is on a slow connection, the JQuery code will not start executing until the document is loaded and ready. To do this we use the document ready function in JQuery.

<script>
$(document).ready(function(){
});
</script>

Adding a click event to a link

Now that our document is ready for our JQuery code we can add some functionality to our site. The first thing we’ll deal with is adding a link to our index.html file. That way we have something to manipulate when we go to code our JQuery. Let’s add a link to our index.html file now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>JQuery Test</title>
 
		<script type="text/javascript" src="lib/jquery.js" />
 
	</head>
	<body>
 
		<a href="http://www.google.ca/">Link</a>
 
	</body>
</html>

Once we have our link added we can start to code the JQuery. What we’re going to do in this instance is instead of taking the user to google, we’re going to just display a simple javascript alert instead.

<script>
	$(document).ready(function(){
		$('a').click(function({
			alert("Obviously you're still here and not over at google");
			event.preventDefault();
		));
	});
</script>

Alright, so that probably looks a little confusing right off the bat, especially if you’re used to regular javascript coding. Let’s break it down into a little more detail. To start off, $(‘a’). This means that we’re taking the element “a” from the html. If we wanted to use the id of say a form(id=”test”) then we could just do $(‘#test’) instead. Then after we have a function. This will allow us to do something with the element that we retrieved from the HTML. In this case, we’re going to use the “.click()” function to allow us to process an event when any element with an attribute of “a” is clicked. Now because we want to do something with that event whenever it’s clicked, we can use a function inside of the click function. That’s where the .click(function(){}) section comes from. Now in order to actually accomplish something with the event that was created we need to put the rest of our code inside of the curly braces of the function. In this case we’re just creating a plain javascript alert box with a message in it. The next line, “event.preventDefault();” is just a function in JQuery that disables the default behavior of the element. In this case the default behavior is to send the user to google, so we’re going to make the user stay at our page and just simply display a javascript alert.

Since .click is a function we will need to close our the function using a “;”. That’s it, you just wrote your first function and created your first event. All together the code looks like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>JQuery Test</title>
 
		<script type="text/javascript" src="lib/jquery.js" />			
 
		<script>
			$(document).ready(function(){
				$('a').click(function({
					alert("Obviously you're still here and not over at google");
					event.preventDefault();
				));
			});
		</script>
 
	</head>
	<body>
 
		<a href="http://www.google.ca/">Link</a>
 
	</body>
</html>

For more information on JQuery or more tutorials you can visit the jquery site at http://jquery.com/. If you have any questions or comments feel free to leave a comment and I’ll respond as quickly as possible.

Cheers