An Introduction to the Development of Web Applications using Ruby on Rails with Ajax
description
Transcript of An Introduction to the Development of Web Applications using Ruby on Rails with Ajax
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, [email protected]
Michael Rowe, Ph.D.Computer Science and Software Engineering DepartmentUniversity of Wisconsin – Platteville215 Ullrich HallPlatteville, Wisconsin [email protected]
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?