SlideShare a Scribd company logo
Building Web Apps with Rails

                           VI
Session 5 Recap



●   User Model
●   Installing Gems with Bundler
●   Authentication with Devise
Session 5: Authentication



      At present, anyone can CRUD

      (Create Read Update Destroy)



Signed in Users            Public
RoR 101: Session 6
Session 6: Stocking Fillers...


         More on Assets

             AJAX

            Orphans!

    Your very own view helper
The Asset Pipeline


             NEW in Rails 3.1!

 “A framework to concatenate and minify or
   compress JavaScript and CSS assets.”

Also, enables CoffeeScript, Sass and ERB for
                   assets.
Pre-Processing in Assets



     Asset helpers are available e.g.

.class { background­image: url(<%= 
   asset_path 'image.png' %>) }
The Asset Pipeline: Locations


app/assets – your app's assets

vendor/assets – not maintained by you

lib/assets - maintained by you but not app specific

public/ – old skool static location
What assets do we have?



 Rails.application.config.assets.paths

Shows assets available to application including
               stuff in gems.
JS Assets

  Go to: 127.0.0.1:3000/assets/application.js

            In assets/application.js:

//= require jquery 
//= require jquery_ujs
//= require_tree .

         This is a sprockets manifest file.
CSS Assets


  Go to: 127.0.0.1:3000/assets/application.css

           In assets/application.css:

// *= require_self
// *= require_tree . 
Cracking into AJAX
AJAX: Step 1

                Add

          :remote => true

                 to

link_to 'Destroy', station, confirm: 
'Are you sure?', :method => :delete
AJAX: Step 2

          Add id to element in view

   <tr id = "station_<%= station.id %>">

      Respond to javascript in controller

respond_to do |format|
  format.html { redirect_to stations_url }
  format.js 
end
AJAX: Step 3


     Keep id of the station to be removed.

       @remove_id = @station.id

 Define your response javascript: destroy.js.erb

$('#station_<%= @remove_id %>').fadeOut();
Orphans!




It's nearly Christmas, we should help...
Orphans!




BY DESTROYING THEM.
Orphans!




In station.rb:

 has_many :streams, :dependent => :destroy
Your Own View Helpers



    A Globally
    Recognized Avatar
Helper Files



       These can be found in

        “firstfm/app/helpers”

Are included depending on controller.
Adding a Gravatar Helper

require 'digest/md5'

def gravatar_url_for(email) 
 return 
 "http://www.gravatar.com/avatar.php
 ?gravatar_id=
 #{Digest::MD5::hexdigest(email)}"
end
Helper: Now use it in your view!


Task! Using

<%= gravatar_url_for(email) %>

Display the gravatar for the currently logged in
user!

More Related Content

ODP
RoR 101: Session 6
PDF
RoR 101: Session 2
PDF
RoR 101: Session 5
PDF
RoR 101: Session 3
PPTX
SPA using Rails & Backbone
PPTX
Ruby on Rails + AngularJS + Twitter Bootstrap
PDF
Rails course day 6
PPTX
Devise and Rails
RoR 101: Session 6
RoR 101: Session 2
RoR 101: Session 5
RoR 101: Session 3
SPA using Rails & Backbone
Ruby on Rails + AngularJS + Twitter Bootstrap
Rails course day 6
Devise and Rails

What's hot (20)

PDF
Active Admin
PPT
Intro to Ruby on Rails
PDF
devise tutorial - 2011 rubyconf taiwan
PDF
Workshop 13: AngularJS Parte II
PDF
Pundit
PPTX
Building a dashboard using AngularJS
PDF
PDF
Laravel Restful API and AngularJS
PDF
Rest api titouan benoit
DOCX
How routing works in angular js
PPTX
Ember - introduction
PDF
Workshop 21: React Router
PDF
Ember CLI & Ember Tooling
PDF
Workshop 24: React Native Introduction
PDF
The Art of AngularJS - DeRailed 2014
PDF
The Evolution of Airbnb's Frontend
PPTX
Require js
PPTX
Intro to Rails Give Camp Atlanta
PDF
Rails 2.3 and Rack - NHRuby Feb 2009
PDF
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Active Admin
Intro to Ruby on Rails
devise tutorial - 2011 rubyconf taiwan
Workshop 13: AngularJS Parte II
Pundit
Building a dashboard using AngularJS
Laravel Restful API and AngularJS
Rest api titouan benoit
How routing works in angular js
Ember - introduction
Workshop 21: React Router
Ember CLI & Ember Tooling
Workshop 24: React Native Introduction
The Art of AngularJS - DeRailed 2014
The Evolution of Airbnb's Frontend
Require js
Intro to Rails Give Camp Atlanta
Rails 2.3 and Rack - NHRuby Feb 2009
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Ad

Similar to RoR 101: Session 6 (20)

PDF
Rails 3.1 Asset Pipeline
PDF
Understanding asset pipeline plugin
PDF
Integrating Browserify with Sprockets
PPTX
Google app engine by example
PDF
Integrating React.js Into a PHP Application
KEY
[Coscup 2012] JavascriptMVC
PDF
WCLA12 JavaScript
KEY
Rails3 asset-pipeline
PDF
Maxim Salnikov - Service Worker: taking the best from the past experience for...
PDF
Burn down the silos! Helping dev and ops gel on high availability websites
PPTX
Soa development using javascript
PPT
JavaScript Modules in Practice
PDF
20130528 solution linux_frousseau_nopain_webdev
PDF
The new static resources framework
PDF
Styling components with JavaScript
PPTX
Laravel development (Laravel History, Environment Setup & Laravel Installatio...
KEY
Javascript Frameworks for Well Architected, Immersive Web Apps
PDF
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
PDF
AEM Sightly Deep Dive
KEY
Supa fast Ruby + Rails
Rails 3.1 Asset Pipeline
Understanding asset pipeline plugin
Integrating Browserify with Sprockets
Google app engine by example
Integrating React.js Into a PHP Application
[Coscup 2012] JavascriptMVC
WCLA12 JavaScript
Rails3 asset-pipeline
Maxim Salnikov - Service Worker: taking the best from the past experience for...
Burn down the silos! Helping dev and ops gel on high availability websites
Soa development using javascript
JavaScript Modules in Practice
20130528 solution linux_frousseau_nopain_webdev
The new static resources framework
Styling components with JavaScript
Laravel development (Laravel History, Environment Setup & Laravel Installatio...
Javascript Frameworks for Well Architected, Immersive Web Apps
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
AEM Sightly Deep Dive
Supa fast Ruby + Rails
Ad

Recently uploaded (20)

PDF
Encapsulation theory and applications.pdf
PPTX
TLE Review Electricity (Electricity).pptx
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDF
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
1 - Historical Antecedents, Social Consideration.pdf
PPTX
cloud_computing_Infrastucture_as_cloud_p
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
A novel scalable deep ensemble learning framework for big data classification...
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
PDF
August Patch Tuesday
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
1. Introduction to Computer Programming.pptx
PDF
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
PDF
WOOl fibre morphology and structure.pdf for textiles
PPTX
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
Encapsulation theory and applications.pdf
TLE Review Electricity (Electricity).pptx
Zenith AI: Advanced Artificial Intelligence
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
Programs and apps: productivity, graphics, security and other tools
1 - Historical Antecedents, Social Consideration.pdf
cloud_computing_Infrastucture_as_cloud_p
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
A novel scalable deep ensemble learning framework for big data classification...
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Enhancing emotion recognition model for a student engagement use case through...
Agricultural_Statistics_at_a_Glance_2022_0.pdf
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
August Patch Tuesday
Digital-Transformation-Roadmap-for-Companies.pptx
1. Introduction to Computer Programming.pptx
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
WOOl fibre morphology and structure.pdf for textiles
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...

RoR 101: Session 6

  • 1. Building Web Apps with Rails VI
  • 2. Session 5 Recap ● User Model ● Installing Gems with Bundler ● Authentication with Devise
  • 3. Session 5: Authentication At present, anyone can CRUD (Create Read Update Destroy) Signed in Users Public
  • 5. Session 6: Stocking Fillers... More on Assets AJAX Orphans! Your very own view helper
  • 6. The Asset Pipeline NEW in Rails 3.1! “A framework to concatenate and minify or compress JavaScript and CSS assets.” Also, enables CoffeeScript, Sass and ERB for assets.
  • 7. Pre-Processing in Assets Asset helpers are available e.g. .class { background­image: url(<%=  asset_path 'image.png' %>) }
  • 8. The Asset Pipeline: Locations app/assets – your app's assets vendor/assets – not maintained by you lib/assets - maintained by you but not app specific public/ – old skool static location
  • 9. What assets do we have? Rails.application.config.assets.paths Shows assets available to application including stuff in gems.
  • 10. JS Assets Go to: 127.0.0.1:3000/assets/application.js In assets/application.js: //= require jquery  //= require jquery_ujs //= require_tree . This is a sprockets manifest file.
  • 11. CSS Assets Go to: 127.0.0.1:3000/assets/application.css In assets/application.css: // *= require_self // *= require_tree . 
  • 13. AJAX: Step 1 Add :remote => true to link_to 'Destroy', station, confirm:  'Are you sure?', :method => :delete
  • 14. AJAX: Step 2 Add id to element in view   <tr id = "station_<%= station.id %>"> Respond to javascript in controller respond_to do |format|   format.html { redirect_to stations_url }   format.js  end
  • 15. AJAX: Step 3 Keep id of the station to be removed. @remove_id = @station.id Define your response javascript: destroy.js.erb $('#station_<%= @remove_id %>').fadeOut();
  • 16. Orphans! It's nearly Christmas, we should help...
  • 18. Orphans! In station.rb: has_many :streams, :dependent => :destroy
  • 19. Your Own View Helpers A Globally Recognized Avatar
  • 20. Helper Files These can be found in “firstfm/app/helpers” Are included depending on controller.
  • 21. Adding a Gravatar Helper require 'digest/md5' def gravatar_url_for(email)   return   "http://www.gravatar.com/avatar.php  ?gravatar_id=  #{Digest::MD5::hexdigest(email)}" end
  • 22. Helper: Now use it in your view! Task! Using <%= gravatar_url_for(email) %> Display the gravatar for the currently logged in user!