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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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 ... models/ end 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

11/28/17 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

11/28/17 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 Put it in app/assets/images u Any content: <h1>Here are my Ruby projects</h1> More here: <%= image_tag "Ruby_logo.png"%> http://guides.rubyonrails.org/ layouts_and_rendering.html 10

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 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

11/28/17 View Create the view: HTML way or ERB way Your image name could be different! View (continued) 16

11/28/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 17

11/28/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

11/28/17 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 One post for entering bids u Another for finding leader u 3. Controller: New post-handler method and new method for finding the leader View (index.html.erb) 19

11/28/17 routes.rb Next: add methods to the controller class 20

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