Lecture 7 Action View, Bootstrap & Deploying 1 / 40
Homeworks 5 & 6 Homework 5 was graded Homework 6 was due last night Any questions? 2 / 40
How would you rate the di culty of Homework 6? Vote at http://pollev.com/cis196776 3 / 40
Final Projects It's time to start thinking about your final project Proposals will be due on November 12 Ideas: Re-create one of your favorite sites Build off of one of the homeworks you started in this class More details to come next week 4 / 40
More Generators 5 / 40
More generators! These are the last generators that I will teach you There are plenty more, but these are enough for our purposes Model: rails g model model_name col1:type col2:type Scaffold: rails g scaffold model_name col1:type col2:type 6 / 40
Model Generator You pass the generator the name of the model and its attributes It creates the migrations and model file for you rails g model review course:references content:text 7 / 40
Sca old Generator Scaffolds made Rails famous Check out DHH's classic how to make a blog in 15 minutes video You pass the generator the name of the model and its attributes It creates: The migrations and model file The controller and views with RESTful routes The 7 RESTful routes in config/routes.rb rails g scaffold course code:string title:string 8 / 40
Action View 9 / 40
What does the View do? Handles data & communicates directly with the database Handles HTTP requests Displays content to the user Vote at http://pollev.com/cis196776 10 / 40
Using Action View in Rails It is Rails convention to place our views inside of the app/views/ directory Since views are associated with a controller, they'll be placed in a directory with the same name as the controller For our purposes, we will use files ending in.html.erb This allows us to embed ruby code directly in our views A view file for our traditional homepage might be placed inside of: app/views/welcome/index.html.erb 11 / 40
Which of the following will render the course's title to the screen? (In making this poll I discovered that Poll Everywhere uses Rails) A. <%= @course.title %> B. <% @course.title %> C. <%# @course.title %> Vote at http://pollev.com/cis196776 12 / 40
Layouts Can be used to extract out common boilerplate code Rails ships with a default layout: app/views/layouts/application.html.erb Every view that we create will be wrapped in this layout by default Contains <html>, <head>, <title>, <body> tags Our views will be placed inside of the <body> tags Uses <%= yield %> You can create other layouts (out of the scope of this class) 13 / 40
Partials Allow you to break your views into smaller chunks Great for small, reusable blocks of code They get placed into their own view file & can be rendered in other templates Names start with an _ Example: app/views/courses/_form.html.erb To render a partial in a template: <%= render 'courses/form' %> Notice the _ is omitted when rendering the partial 14 / 40
How can I pass data from the controller to the view? You can't You define a private method in the controller You define an instance variable in the controller action Vote at http://pollev.com/cis196776 15 / 40
Locals Partials should be modular Should not rely on instance variables passed from the controller Instead, they should use local variables that get passed along when the partial is rendered 16 / 40
Locals Example The courses form makes use of a course local variable <%# app/views/courses/_form.html.erb %> <%= form_with model: course do form %>... <% end %> The new controller action defines @course, so we pass it to the form when rendering it <%# app/views/courses/new.html.erb %>... <%= render 'form', course: @course %> 17 / 40
Action View Helpers Rails provides us with a number of helpers that can replace writing direct HTML For example: <%# app/views/layouts/application.html.erb %>... <%= stylesheet_link_tag 'application', media: 'all', 'data <%= javascript_include_tag 'application', 'data-turbolinks-tr... 18 / 40
URL Helper The URL helper provides us with some methods of interacting with URLs The most important one for our purposes is link_to link_to generates an anchor tag with the provided text and URL <%# The following are equivalent %> <%= link_to @course.name, @course %> <a href="/courses/<%= @course.id %>"><%= @course.name %></a> 19 / 40
link_to By default, the link_to helper will generate a link that makes a GET request We can pass along the method option to change the type of HTTP request <%= link_to 'Destroy', @course, method: :delete %> There are many options that we can pass to a link_to <%= link_to 'Courses', courses_path, class: 'link', id: 'course_link' %> 20 / 40
Form Helpers The Form helper provides us with some methods for interacting with forms We will focus on form_with (not form_tag or form_for) form_with generates the actual form while there are additional helpers for generating form fields 21 / 40
form_with We can pass it an object <%= form_with model: Course.new do form %> <%= form.text_field :title %> <% end %> <form action="/courses" method="post" data-remote="true"> <input type="text" name="course[title]"> </form> Or a URL <%= form_with url: courses_path do form %> <%= form.text_field :title %> <% end %> <form action="/courses" method="post" data-remote="true"> <input type="text" name="title"> </form> 22 / 40
Form Field Helpers We also get helpers to generate form fields Here are a few:... <%= form.label :title %> <%= form.text_field :title %> <%= form.text_area :description %> <%= form.check_box :complete %> <%= form.password_field :password %> <%= form.collection_select :notebook_id, Notebook.all, :id,... 23 / 40
Other Helpers There are a lot more Check out some of them here 24 / 40
Bootstrap 25 / 40
What is an HTML class? A collection of methods and attributes that can be used to instantiate an object An identifier that only one HTML element on a page can have An identifier that multiple HTML elements can have Vote at http://pollev.com/cis196776 26 / 40
Bootstrap We will be briefly cover Bootstrap 4 Allows us to quickly create web applications that look nice without having to write our own CSS Has a 12 column grid system that allows us to easily layout our site Basically just involves adding classes to our HTML elements 27 / 40
Bootstrap Pros & Cons Pros: Supported by almost every browser Mobile-first & extremely responsive Customizable Grid System Good documentation Cons: Very verbose, end up adding a ton of classes Without extensive customization, every Bootstrap site looks the same Tied to jquery Bit of a learning curve 28 / 40
Bootstrap Gem There are a number of ways to include Bootstrap in your project, we'll use the gem Thorough setup instructions are provided on the website The gem uses the Rails asset pipeline which makes it easy to customize Bootstrap and follow Rails best practices 29 / 40
Getting Started To add Bootstrap styling to our HTML, we add specific classes to different HTML elements I generally start by wrapping my content inside of a container <%# app/views/layouts/application.html.erb %>... <body> <div class="container"> <%= yield %> </div> </body>... 30 / 40
Navbar Next I usually add a Bootstrap-styled navbar to my app I create a partial for the navbar: app/views/layouts/_nav.html.erb Then I render the partial in the default layout: <%# app/views/layouts/application.html.erb %>... <body> <%= render 'layouts/nav' %> <div class="container"> <%= yield %> </div> </body>... 31 / 40
Tables Styling tables is a pretty straightforward task in Bootstrap For a very basic table, just requires adding the.table class to the <table> tag <table class="table"> <tr> <th>col 1</th> <th>col 2</th> </tr> <tr> <td>data A1</td> <td>data A2</td> </tr> </table> 32 / 40
Forms In Bootstrap, form styling goes on the form elements instead of the form itself <%= form_with model: @course do form %> <div class="form-group"> <%= form.label :title %> <%= form.text_field :title, class: 'form-control' %> </div> <%= form.submit class: 'btn btn-primary' %> <% end %> 33 / 40
Color You can also change text/background colors with some predefined color utility classes Primary: The app's primary color (blue by default) Secondary: The app's secondary color (gray by default) Success: Green by default Danger: Red by default Warning: Yellow by default Info: Teal by default Light, Dark, Muted, White 34 / 40
Size Used in different ways: For example, to specify the width of a button For example, to specify the intended behavior on a specific device size Sizes: xs, sm, md, lg, xl 35 / 40
Grid System Bootstrap uses a 12 column grid system (Bootstrap 4 also comes with flexbox) Can add sizes to the columns to specify how it should be displayed on certain device sizes <div class="container"> <div class="row"> <div class="col-2">col 1</div> <div class="col-6">col 2</div> <div class="col-4">col 3</div> </div> </div> 36 / 40
Possibilities of Bootstrap Bootstrap is very extensive and there's no way that I could go through it all Take a look at some of the examples Read through the documentation 37 / 40
Deploying 38 / 40
Heroku Heroku allows us to deploy our application to the web fairly easily and for no cost This guide does a great job of explaining the steps required to deploy an application 39 / 40
Homework 6 Part-2 Start as early as possible Part-2 starts with you copying over the required pieces from Part-1 Then, you'll Afterwards, you'll add in some Bootstrap styling and then deploy to Heroku Grading: Normal 25 points 5 manually graded points for deploying to Heroku & including Bootstrap 40 / 40