11

An Introduction to the An Introduction to the Development of Web Development of Web Applications using Applications using

Ruby on Rails with AjaxRuby on Rails with Ajax

Ansgar Berhorn, B.Sc.Ansgar Berhorn, B.Sc.

and and

Mike Rowe, Ph.D.Mike Rowe, Ph.D.

22

Contact InformationContact Information

Ansgar Berhorn, B.Sc.Dept. of Computer ScienceUniversity of Applied Sciences / Hochschule DarmstadtHaardtring 10064295 Darmstadt, Germanyansgar.berhorn@berhorn.de

Michael Rowe, Ph.D.Computer Science and Software Engineering DepartmentUniversity of Wisconsin – Platteville215 Ullrich HallPlatteville, Wisconsin 53818rowemi@uwplatt.edu

33

Outline of PresentationOutline of Presentation

1. Introduction to Ruby 2. Ruby on Rails3. Model –Viewer – Controller (MVC) and

Ruby on Rails4. Ajax and Ruby on Rails and MCV

44

Ruby on Rails from 40,000 feet

• Ruby was first released by Yukihiro Matsurnoto in 1995.– “I wanted a language more powerful than Perl and more

object-oriented than Python.”, Matsurnoto • Rails:

– Is a framework that allows the rapid development of web applications

– Maintains a well-structured code base– Produces a Model-Viewer-Controller (MVC) skeleton for

the application– Provides support for asynchronous web updates via

AJAX

55

Testimonials Testimonials

• Tim O'Reilly, “Ruby on Rails is a breakthrough in lowering the barriers of entry to programming. Powerful web applications that formerly might have taken weeks or months to develop can be produced in a matter of days”.

• Martin Fowler, “It is impossible not to notice Ruby on Rails. It has had a huge effect both in and outside the Ruby community... Rails has become a standard to which even well established tools are comparing themselves to.”http://rubyonrails.com/quotes

66

Ruby code examplesRuby code examples

Ruby Command-line Interpreter (fxri)

001:0> puts "Hello Moon"

Hello Moon

77

Heterogeneous Arrays Heterogeneous Arrays 054:0> # array with 3 elements // a comment055:0* a = [ 1, “Avogodro", 78.91]=> [1, " Avogodro ", 78.91]056:0> # set first element of a[ ] to 5057:0* a[ 0 ] = 5=> 5058:0> # set the second element to 6.02059:0* a[ 1 ] = 6.02=> 6.02060:0> a=> [5, 6.02, 78.91]

88

Ruby Count Control LoopRuby Count Control Loop

1> 10.downto( 0 ){

2> |lvc| print lcv , ”__” }

10__9__8__7__6__5__4__3__2__1__0__

downto, as well as upto and others are methods of the Integer Class

99

Ruby ProceduresRuby Procedures063:0> # define a procedure called looper

064:0* def looper( count )

065:1> count.downto( 0 ) {

066:2* |lcv| print lcv , "_" }

067:1> end

=> nil

# execute looper with an argument of 5

069:0* looper( 5 )

5_4_3_2_1_0_=> 5

1010

Characteristics of RubyCharacteristics of Ruby• Programmers do not need to declare data types.• Data types are dynamic• Everything is an object• Operators (and also array brackets ‘[ ]’) are aliases

for object methods• Managed memory• Has great support for access to OS; CGI; FTP;

HTTP; Templates; IP ,TCP, UDP Sockets; RegExp; threads/processes; IMAP; POP ; SMTP; Telnet; XML; RUNIT (like JUnit); Win32; databases; and more

1111

Introduction to Ruby Introduction to Ruby on Railson Rails

• Ruby on Rails is an Open Source web application framework – developed by David Hansson in 2004

• Follows principle of “Convention Over Configuration” – Rails forces us to follow programming

conventions that allow the framework to plug together the pieces automatically.

1212

Model-View-Controller (MVC)Model-View-Controller (MVC)• Rails guides applications into the MVC pattern.• MVC Pattern is composed of three components:

– Model: maintains the state/data of the system– Controller: the logic center of an application, responsible

for:• Routing requests from the user to the application• Caching to prevent unnecessary queries of the model• Session management of application users

– Viewer: provides each user with a consistent view of the application based on their state.

• The goal of MVC is to separate code used for data access from code used for the user interface.

1313

MVC PatternMVC Pattern

• A web browser sends a request to the Controller (1),• The Controller interacts with the Model to obtain necessary data (2).• The Model queries these data from the database (3) and provides

them to the Controller (4),• The Controller sends it for rendering to the View (5).• The View is then sent to a users browser for viewing (6).

1414

MVC and Ruby on RailsMVC and Ruby on Rails

• Ruby on Rails has a base class for each of the MVC components. – Model inherits from the ActiveRecord class– View inherits from the ActionView class– Controller inherits from the ActionController

class

1515

The ActiveRecord / ModelThe ActiveRecord / Model

• The ActiveRecord uses Object Relational Mapping (ORM) for storing and retrieving data from a database.– ORM maps DB tables to Ruby Classes– DB rows to Ruby Objects

• Conventions– If the DB has a table called “products”, then Rails will

generate a Class Product in the Model that provides access to the products table.

• Product.find( ID ) would return a row object from the products DB

– DB tables will have plural names, classes will have corresponding singular names.

1616

The ActionControllerThe ActionController

• Rails provides the three responsibilities of the Controller, Routing, Caching, and Session Management, automatically behind the scenes through the inherited ActionController Class.

1717

ActionViewActionView

• The View connects HTML code with the application.

• “Embedded Ruby” (ERb) supports the implementation of dynamic HTML for web pages in a manner similar to PHP and JSP.

• Recall the rich support set of Ruby mentioned earlier!

1818

Setting Up a MVC AppSetting Up a MVC App

• We will need to set up the following:– Database– Controller– View– Model

1919

Database setup using SQLitDatabase setup using SQLit

> rails helloworld -d sqlite3

The above rails command will set up three DB environments, one each for :– development– test– production

2020

Creating and Provisioning Creating and Provisioning DB TableDB Table

$ sqlite db/development.sqlite3

sqlite> CREATE TABLE greetings ("id" INTEGER PRIMARY KEY NOT NULL,"text" VARCHAR(255), "created" DATE );

sqlite> INSERT into greetings values(NULL,"Hello World", "2006-12-01");

sqlite> INSERT into greetings values(NULL,"Hello Bubba", "2006-12-02");

sqlite>select * from greetings;.quit

2121

DB ConventionsDB Conventions

• The above example enforces two Rails Conventions– The DB table name is plural “greetings” – this

will map to a Ruby Class of “Greeting”.– The primary key to the greeting table is “id”.

2222

Setup of ControllerSetup of Controller> ruby script/generate controller Say

The above line creates the shell of a MVC’s Controller called “Say”

>class SayController <ApplicationController>end

We can define a “hello” method for this class by adding>class SayController <ApplicationController> def hello>#------ method code goes here.> end>end

2323

Setup of ViewerSetup of Viewer

The generation of the Controller done previously with

> ruby script/generate controller SayCreated a shell MVC View that we can fill in:1 <html>2 <head><title>Hello World</title></head>3 <body>4 <h1>Hello World</h1>5 </body>6 </html>

2424

We can now run the appWe can now run the app

• “http://helloworld.berhorn.de/say/hello”

2525

Setup of ModelSetup of Model> ruby script/generate model Greeting

• Since the DB was generated with the Rails DB generator earlier, the Rails Model generator produces a Controller called “Greeting” that is consistent with the DB.

• The generator reads the DB schema and generates Class attributes for all of the DB fields and Class methods like:– Greeting.find( ID )– Greeting.find_all()– . . .

2626

MCV implemented in Ruby on RailsMCV implemented in Ruby on Rails1. The web browser sends a request

that is routed (1a) to a Controller (1b).

2. The Controller executes the requested action (a class method).

3. The Controller has a method, which returns an object of a Model class.

4. The Controller request the data from the Model (2).

5. The Model object queries these data from the database (3) and provides the results to the Controller (4),

6. The Controller sends the results to the View for rendering (5).

7. The View processes the object, generates the output and sends this to the web browser (6).

2727

AjaxAjax

• Asynchronous JavaScript and XML is a key concept in the evolution from the traditional, Web 1.0 to Web 2.0

• Web 1.0 generally requires an entire webpage to transmitted and rendered to update content.– All nine components would need to be transmitted and re-rendered if

element 9 needed to be changed.

2828

AjaxAjax

• Ajax / Web 2.0 allows web pages to be broken into multiple independent components– When an component needs to be changed, only that

component needs to be transmitted and re-rendered.– Thus, the components are asynchronously updated,

rather than synchronously updated (like Web 1.0)– Asynchronous updates gives Web Applications the

behavior similar to desktop applications and can significantly reduce bandwidth requirements.

2929

Ruby on Rails and AjaxRuby on Rails and Ajax

• Ruby on Rails v1.0 (Dec 2005) allowed single components of Web pages to be updated using Ruby.

• Ruby on Rails v1.1 (Mar 2006) introduced RJS that generates JavaScript necessary to support Ajax.

• Ruby on Rails with RJS allows Ajax capabilities without the need to actually write JavaScript.

3030

RJS and Rails MVCRJS and Rails MVC

• RJS support Ajax capabilities in the MVC View component.

3131

Questions?Questions?