Code Perspective » Web

Ajax simplified in Rails 3.1

Mark Hazlett — Tue, 29 Nov 2011 05:52:42 +0000

So I’m working on a project and obviously I wanted to take advantage of the built in AJAX in rails using UJS. I for some reason couldn’t find a good tutorial on how to do it so I figured I would just write one instead. Here’s the basics of how I solved it. I’m going to assume a couple of things to start so that this tutorial stays within scope.

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.

Adding a link to an image in Rails 3.1

Mark Hazlett — Sun, 30 Oct 2011 01:10:53 +0000

So I had a small issue the other day learning how to add a link to an image so I figure I would share with everyone on how I accomplished it. The key is that the link_to object can take a block and then you can add an image to the block like this:

<%= 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!

Using Zend_Auth to authenticate users in your web application

Mark Hazlett — Sun, 14 Aug 2011 05:55:02 +0000

So you’re using Zend and you must be thinking, there has to be an easy way to authenticate users! Well, you can use Zend Auth and it makes it pretty damn easy. The basic concept is that it assumes that you have a combination of either a username/password, email/password or a combination of the two to authenticate your users. If you have something other than those combinations you may want to look at extending Zend_Auth instead of directly using it(that however it outside the scope of this tutorial). First off this tutorial assumes a couple things. One, that you know about the standard Zend Directory structure and two, that you have already setup a login form and are now working on authenticating the user. We’ll start off in the index action of your LoginController. That way you have the url as /login. First off we’ll check if the request is a post request:

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.

Using Zend Framework on a shared host

Mark Hazlett — Sat, 30 Apr 2011 19:57:57 +0000

I recently got Zend Framework up and running on Media Temple’s grid service. Turns out this isn’t as easy as I originally thought. In order to get it to work properly i needed to add the following to the .htaccess file in the root of my domain directory.

AddHandler php5-script .php
 
RewriteEngine On
 
RewriteRule ^\.htaccess$ - [F]
 
RewriteCond %{REQUEST_URI} =""
RewriteRule ^.*$ /public/index.php [NC,L]
 
RewriteCond %{REQUEST_URI} !^/public/.*$
RewriteRule ^(.*)$ /public/$1
 
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^.*$ - [NC,L]
 
RewriteRule ^public/.*$ /public/index.php [NC,L]

This will properly re-route all of the requests to make some prettier url’s.

Intro to PHP – Creating a Basic Login System

Mark Hazlett — Mon, 14 Dec 2009 04:43:18 +0000

Using a little knowledge of PHP and HTML you can build a simple log in system for your site. In order to correctly follow this tutorial you may want to have a good idea of basic HTML/PHP syntax as well as knowing some CSS. You should also have a basic understanding of how to create and use sessions($_SESSIONS) in PHP.

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.


<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.

 

<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.

JQuery Part 4 – Intro to CSS Manipulation

Mark Hazlett — Thu, 10 Dec 2009 21:37:24 +0000

JQuery is often used in websites to manipulate the CSS attributes of an HTML element upon the users request. For example, if a user wants to increase the size of the font immediately so that they can read your page, or you may just want to change up the CSS on the fly to make your page stand out a little more. All these things can be done in JQuery using the css() function and css manipulation techniques. Let’s get started by creating a basic page with a link and a paragraph with some links in it like so…

<html>
	<head>
		<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
 
		<title>JQuery CSS Manipulation</title>
 
	</head>
	<body>
		<a href="#">Click Me</a>
 
		<br>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
 
	</body>
</html>

As you can see it’s a basic HTML page that references the JQuery script. We have also added a link that says “click me” along with a paragraph of lorem ipsum text with some links in it. Alright, now onto creating the CSS for the page. For this example I will be putting the CSS in the header but if you want to put it in an external file by all means go ahead and reference it in the header.