CSCI-2320 Web Programming: Ruby on Rails Mohammad T. Irfan Plan u Model-View-Controller (MVC) framework of web programming u Ruby on Rails 1
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 2
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 3
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 4
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 bid name email B01224 Bob bob@bowdoin.edu.................. students 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) 5
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 6
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 7
Rails router u config/routes.rb u resources :students u Routes to app/controllers/ students_controller.rb u class StudentsController < ApplicationController...... end # GET /students/new def new @student = Student.new 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 8
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 9
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 u def projects end u Create view u Add a new projects.html.erb file in views/ my_home_page folder Put it in app/assets/images u Any content: <h1>here are my Ruby projects</h1> <%= image_tag "Ruby_logo.png"%> More here: http://guides.rubyonrails.org/ layouts_and_rendering.html 10
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
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 12
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 other 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 13
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! 14
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) 15
View Create the view: HTML way or ERB way Your image name could be different! View (continued) 16
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 17
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) 18
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 u One post for entering bids Another for finding leader 3. Controller: New post-handler method and new method for finding the leader View (index.html.erb) 19
routes.rb Next: add methods to the controller class 20
Click Message from the Rails Server: note how post is handled 21