CSCI-2320 Web Programming: Ruby on Rails Mohammad T . Irfan Plan - - PDF document

11/28/17 1

CSCI-2320 Web Programming: Ruby on Rails

Mohammad T . Irfan

Plan

u Model-View-Controller (MVC) framework of

web programming

u Ruby on Rails

11/28/17 2

Ruby on Rails

u Developed by David Hansson – released 2004 u MVC architecture

u MVC by Trygve Reenskaug, 1979 u GUI for Smalltalk

u Learning Resources

u Quick guide

http://guides.rubyonrails.org/ getting_started.html

u Best online book

https://www.railstutorial.org/book

Interview of David H. Hansson

u “Ruby Is Closer to Human Thought Than to Code”

u http://bigthink.com/users/davidheinemeierhansson

11/28/17 3

Ruby on Rails – MVC framework

u Goal

u Decouple the three parts of an application

u Model

u Database u Constraints on data u Object Relational Mapping (ORM)

u Maps tables to classes, rows to objects u Called ActiveRecord

Ruby on Rails – MVC framework

u View

u Prepares and presents results for users u Templates

u XHTML u XML u Javascript

11/28/17 4

Ruby on Rails – MVC framework

u Controller

u Takes user input u Consults with model u Directs the view

u The basic codes are auto-generated

Getting started

u New web application (Aptana Studio 3)

u Create a new Rails project u Or, from the terminal inside Aptana Studio 3

u rails new projectName

u Windows users: open Gemlock.lock file, change

“sqlite 3 (1.3.8-...)” to “sqlite 3 (1.3.8)” u Start the server

u Command (you may use Aptana terminal)

u rails server

u Open a browser and go to

http://localhost:3000/

u Welcome aboard

11/28/17 5

Browse the project folders

u App

u models u views u controllers

Scaffolding

u Fast process of generating start-up codes u First, design a schema u Command for ORM

u rails generate scaffold Student bID:string name:string

email:string

u Other useful commands: rails destroy scaffold ...

(delete a previous ORM)

bID name email B01224 Bob bob@bowdoin.edu ... ... ... ... ... ... students

11/28/17 6

Migrate model to DB

u Command for migration

u bundle exec rake db:migrate u Reverse is: rake db:rollback (don’t run it now)

u rake

u Ruby’s make

u configure, make, make install

View the webpage

u Command

u rails s

u s is shortcut for server

u Go to http://localhost:3000 on web browser

u No surprise there

11/28/17 7

Surprise!

u Navigate to http://localhost:3000/students

What’s going on?

• 1. Chrome: http://localhost:3000/students
• 2. <Ruby Router> routes to

students_controller.rb

• 3. students_controller.rb gets data from

database table students

• 4. students_controller.rb feeds data to

View<index.html.erb> (erb = embedded Ruby)

• 5. index.html.erb produces a nice html file and

gives it to students_controller.rb

• 6. students_controller.rb gives that html file to

Chrome

11/28/17 8

Rails router

u config/routes.rb

u resources :students

u Routes to app/controllers/

students_controller.rb

u class StudentsController <

ApplicationController ... # GET /students/new

def new @student = Student.new end ... end

models/ student.rb

Rails architecture

u Representational State Transfer (REST)

u Roy Fielding (2000) – “architectural style”

u Clients communicate with web service

u Limited number of verbs u Resources (nouns) – identified by URI

u Rails

u Nouns: objects (tables) in ORM u Verbs: Read, create, update, delete

u HTTP

u Nouns: URL u Verbs: GET

, POST , PATCH, DELETE

11/28/17 9

Creating a new website

• 1. With its own controller
• 2. Without its own controller

Website with dedicated controller

u Command

u rails generate controller MyHomePage home

contact --no-test-framework u Controller class u Views

11/28/17 10

Navigating to my_home_page/home...

u The home method of the Controller class is

executed first

u Empty for now

u Then the corresponding view is executed

u home.html.erb u You may edit it as you like

Adding a page without adding new controller

u First, modify config/route.rb

u get “my_home_page/projects”

u Modify the controller class in

my_home_page_controller.rb

u def projects u end

u Create view

u Add a new projects.html.erb file in views/

my_home_page folder u Any content: <h1>Here are my Ruby projects</h1> <%= image_tag "Ruby_logo.png"%>

Put it in app/assets/images

More here: http://guides.rubyonrails.org/ layouts_and_rendering.html

11/28/17 11

Building an auction app from scratch

without scaffolding

Plan

u Rails web application

u A more involved example u Without scaffolding u Understand flow of control

u Problem: web service with database

connectivity – auction

u Input: name and bid amount u Store bid information in database u Output: show all bids in sorted order

11/28/17 12

Google this picture Download it (Copy to assets/images later)

First Step

u Create an application

u rails new AuctionApp

u Create a controller – the only controller

u rails generate controller AuctionApp index

11/28/17 13

Routing – config/routes.rb

u Make the index page the root (http://localhost:3000)

u root “auction_app#index”

u Other routing information (previously these were done

automatically when you said resources :students)

u get "/auction_app" => “auction_app#index” u get "/" => “auction_app#index” u post "/" => “auction_app#enterBid”

Start the server

u Open 2 terminals– one for server, one for

• ther commands

u In both terminals, you must cd to the

appropriate project folder in terminal—in my case it’s the AuctionApp folder

u Command to start server: rails s

11/28/17 14

Model – without scaffolding

u Create a model: ORM

u rails generate model Bid bidder:string amount:float

u Create actual database table

u bundle exec rake db:migrate #creates DB table bids

u Suppose we don’t want a separate controller for

this (want to use auction_app_controller)

u Don’t say resources :bids in routes.rb u If you say so, it will automatically (without writing it

explicitly in routes.rb) map HTTP get, post, etc. to index, create, etc. methods of the bids_controller.rb which we don’t have!

Controller

u Action for the “Enter Bid” button

u auction_app/enterBid: enterBid method in

auction_app_controller

u Next: write this method

u This is the method that will be called when the

“submit” button is pressed

u You are allowed to pick any name for the method

u Must match with the router though!

11/28/17 15 Controller

Method name Argument: responder obj. Body

More: http://bit.ly/1p1L8AR

Other DB functions

u newRow.save u newRow.update u newRow.destroy u Bid.find(map)

11/28/17 16

Create the view: HTML way or ERB way

View

Your image name could be different!

View (continued)

11/28/17 17

To see the actual database files:

• 1. cd to db folder
• 2. command:

sqlite3 development.sqlite3 > .tables > select * from bids;

Flow of control

u localhost:3000

è routes.rb routes it to auction_app_controller’s index method è shows output of index.html.erb

u Enter data in form and press “Enter Bid”

button è routes.rb routes it auction_app_controller’s enterBid method (why not the index method?) è Redirects to homepage

11/28/17 18

Assignment on Rails Groups of 2 students (collaborate & share, but type your own code) Individual submission required

u Create a Ruby-on-Rails project u Open-ended u Most basic requirements

u Take user input u Process that input u Work with database u Show some output u Work with non-textual data u Use other gems

u Present to prof during Final Exam time

Multiple Forms (One Controller)

11/28/17 19

Auction App

u Create new button to find the leader

• 1. View: add embedded Ruby (erb) code for

new form [alternative: HTML]

• 2. routes.rb: Enter the name of a new method

to handle multiple posts

u

One post for entering bids

u

Another for finding leader

• 3. Controller: New post-handler method and

new method for finding the leader

View (index.html.erb)

11/28/17 20

routes.rb Next: add methods to the controller class

11/28/17 21 Click Message from the Rails Server: note how post is handled