SlideShare une entreprise Scribd logo
1  sur  23
Building Web Apps with  Rails VI
Session 5 Recap ,[object Object]
Installing Gems with Bundler
Authentication with Devise
Session 5: Authentication ,[object Object],Signed in Users Public
 
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. The default behavior in Rails 3.1 and onward is to concatenate all files into one master file each for JS and CSS.
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? Shows assets available to application including stuff in gems. Rails.application.config.assets.paths
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 = &quot;station_<%= station.id %>&quot;> 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  &quot; http://www.gravatar.com/avatar.php ?gravatar_id= #{Digest::MD5::hexdigest(email)}&quot; end

Contenu connexe

Tendances

Be happy with Ruby on Rails - CEUNSP Itu
Be happy with Ruby on Rails - CEUNSP ItuBe happy with Ruby on Rails - CEUNSP Itu
Be happy with Ruby on Rails - CEUNSP Itu
Lucas Renan
 
Laravel Restful API and AngularJS
Laravel Restful API and AngularJSLaravel Restful API and AngularJS
Laravel Restful API and AngularJS
Blake Newman
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
Brajesh Yadav
 

Tendances (20)

AngularJS meets Rails
AngularJS meets RailsAngularJS meets Rails
AngularJS meets Rails
 
Be happy with Ruby on Rails - CEUNSP Itu
Be happy with Ruby on Rails - CEUNSP ItuBe happy with Ruby on Rails - CEUNSP Itu
Be happy with Ruby on Rails - CEUNSP Itu
 
Introduction to AJAX In WordPress
Introduction to AJAX In WordPressIntroduction to AJAX In WordPress
Introduction to AJAX In WordPress
 
Using Angular with Rails
Using Angular with RailsUsing Angular with Rails
Using Angular with Rails
 
Devise and Rails
Devise and RailsDevise and Rails
Devise and Rails
 
Be Happy With Ruby on Rails - Ecosystem
Be Happy With Ruby on Rails - EcosystemBe Happy With Ruby on Rails - Ecosystem
Be Happy With Ruby on Rails - Ecosystem
 
Intro to Ruby on Rails
Intro to Ruby on RailsIntro to Ruby on Rails
Intro to Ruby on Rails
 
Ember Reusable Components and Widgets
Ember Reusable Components and WidgetsEmber Reusable Components and Widgets
Ember Reusable Components and Widgets
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 
devise tutorial - 2011 rubyconf taiwan
devise tutorial - 2011 rubyconf taiwandevise tutorial - 2011 rubyconf taiwan
devise tutorial - 2011 rubyconf taiwan
 
Ember - introduction
Ember - introductionEmber - introduction
Ember - introduction
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 
Laravel Restful API and AngularJS
Laravel Restful API and AngularJSLaravel Restful API and AngularJS
Laravel Restful API and AngularJS
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
 
Rest api titouan benoit
Rest api   titouan benoitRest api   titouan benoit
Rest api titouan benoit
 
Pundit
PunditPundit
Pundit
 
Expressjs
ExpressjsExpressjs
Expressjs
 
Building a dashboard using AngularJS
Building a dashboard using AngularJSBuilding a dashboard using AngularJS
Building a dashboard using AngularJS
 
Ember CLI & Ember Tooling
Ember CLI & Ember ToolingEmber CLI & Ember Tooling
Ember CLI & Ember Tooling
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
 

Similaire à RoR 101: Session 6

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
Rails 3 overview
Rails 3 overviewRails 3 overview
Rails 3 overview
Yehuda Katz
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
Yi-Ting Cheng
 

Similaire à RoR 101: Session 6 (20)

Rails 3.1 Asset Pipeline
Rails 3.1 Asset PipelineRails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
 
Spine.js
Spine.jsSpine.js
Spine.js
 
Node.js and Parse
Node.js and ParseNode.js and Parse
Node.js and Parse
 
AEM Sightly Deep Dive
AEM Sightly Deep DiveAEM Sightly Deep Dive
AEM Sightly Deep Dive
 
Create a new project in ROR
Create a new project in RORCreate a new project in ROR
Create a new project in ROR
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analystsMeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
 
Rails 3 overview
Rails 3 overviewRails 3 overview
Rails 3 overview
 
Understanding asset pipeline plugin
Understanding asset pipeline pluginUnderstanding asset pipeline plugin
Understanding asset pipeline plugin
 
Grails Advanced
Grails Advanced Grails Advanced
Grails Advanced
 
Quick Start: ActiveScaffold
Quick Start: ActiveScaffoldQuick Start: ActiveScaffold
Quick Start: ActiveScaffold
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
 
DynamicRecord Presentation
DynamicRecord PresentationDynamicRecord Presentation
DynamicRecord Presentation
 
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディングXitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 

RoR 101: Session 6

  • 1. Building Web Apps with Rails VI
  • 2.
  • 5.
  • 6.  
  • 7. Session 6: Stocking Fillers... More on Assets AJAX Orphans! Your very own view helper
  • 8. 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. The default behavior in Rails 3.1 and onward is to concatenate all files into one master file each for JS and CSS.
  • 9. Pre-Processing in Assets Asset helpers are available e.g. .class { background-image: url(<%= asset_path 'image.png' %>) }
  • 10. 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
  • 11. What assets do we have? Shows assets available to application including stuff in gems. Rails.application.config.assets.paths
  • 12. 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.
  • 13. CSS Assets Go to: 127.0.0.1:3000/assets/application.css In assets/application.css: // *= require_self // *= require_tree .
  • 15. AJAX: Step 1 Add :remote => true to link_to 'Destroy', station, confirm: 'Are you sure?', :method => :delete
  • 16. AJAX: Step 2 Add id to element in view <tr id = &quot;station_<%= station.id %>&quot;> Respond to javascript in controller respond_to do |format| format.html { redirect_to stations_url } format.js end
  • 17. 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();
  • 18. Orphans! It's nearly Christmas, we should help...
  • 20. Orphans! In station.rb: has_many :streams, :dependent => :destroy
  • 21. Your Own View Helpers A Globally Recognized Avatar
  • 22. Helper Files These can be found in “firstfm/app/helpers” Are included depending on controller.
  • 23. Adding a Gravatar Helper require 'digest/md5' def gravatar_url_for(email) return &quot; http://www.gravatar.com/avatar.php ?gravatar_id= #{Digest::MD5::hexdigest(email)}&quot; end
  • 24. Helper: Now use it in your view! Task! Using <%= gravatar_url_for(email) %> Display the gravatar for the currently logged in user!