SlideShare a Scribd company logo

Desenvolvimento web com Ruby on Rails (parte 2)

Joao Lucas Santana
Joao Lucas Santana

This document discusses using layouts and partials in a Ruby on Rails application. It demonstrates how to create a new layout file, assign it to a controller action, and use content_for and partials to include common elements like menus and footers across views. Code examples are provided for setting up the layouts, partials and integrating them using yield and content_for. The document also covers configuring stylesheets and JavaScript includes for the layouts.

Technology
1 of 41
Downloaded 25 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps
Layouts e Partials @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
Layouts e Partials Alterar application.js @jlucasps //= require jquery //= require jquery_ujs //= require_tree . //= require jquery //= require jquery_ujs //= require bootstrap.js
Layouts e Partials Alterar application.css @jlucasps *= require_self *= require_tree . *= require bootstrap.css *= require bootstrap-responsive.css *= require custom.css
Layouts e Partials $ git add . $ git commit -m "Especificando arquivos no application.js e application.css" @jlucasps
Layouts e Partials Criar novo arquivo de layout /app/views/layouts/application_black.html.erb Adicionar atributo style à tag body <body style='background-color:black;'> Criar nova action 'black' no controller Welcome @jlucasps def black render :layout => 'application_black' end
Layouts e Partials Criar rota para action 'black' match 'black' => 'welcome#black', :via => :get, :as => :black Criar template para a nova action: /app/views/welcome/index.html.erb Acessar URL http://localhost:3000/black @jlucasps
Layouts e Partials $ git add . $ git commit -m "Utilizando mais de 1 layout" Tente definir um layout para várias actions Dica: layout 'application_black', :only => :black @jlucasps
Layouts e Partials Utilizando o content_for Atualizem o layout application.html.erb @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <div class='row-fluid'> <div class='span3'> <%= yield :sidebar %> </div> <div class='span9'> <%= yield %> </div> </div> </body> </html>
Layouts e Partials Atualizem o template welcome/index.html.erb @jlucasps <h1>Conteúdo central</h1> <%= content_for :sidebar do %> <h4>sidebar</h4> <% end %>
Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando a sidebar"
Layouts e Partials @jlucasps Configurar layout para que fique como no exemplo abaixo utilizando partials e content_for
Layouts e Partials @jlucasps Criar arquivo /app/assets/stylesheets/custom.css body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } }
Layouts e Partials @jlucasps Alterar layout /app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= render :partial => 'shared/menu_top' %> <div class="container-fluid"> <div class="row-fluid"> <%= yield :sidebar %> <%= yield %> </div> <%= render :partial => 'shared/footer' %> </div> </body> </html>
Layouts e Partials @jlucasps Criar partial views/shared/_footer.html.erb <hr> <footer> <p>&copy; Company 2013</p> </footer>
Layouts e Partials @jlucasps Criar partial views/shared/_menu_top.html.erb <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=". nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
Layouts e Partials @jlucasps Criar partial views/shared/_sidebar.html.erb <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well --> </div><!--/span-->
Layouts e Partials @jlucasps Alterar template /app/views/welcome/index.html.erb <div class="span9"> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row-fluid"> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> </div><!--/row--> </div><!--/span--> <%= content_for :sidebar do %> <%= render :partial => 'shared/sidebar' %> <% end %>
Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando layout com partial e content_for"
Primeiros Testes Antes..... Configurar arquivo Gemfile com links e documentações Adicionar ao Gemfile group :test do gem 'capybara' gem rspec-rails' end Executar $ bundle install Remover diretório /test Executar $ rails g rspec:install @jlucasps
Primeiros Testes @jlucasps $ rails generate rspec:install create .rspec create spec create spec/spec_helper.rb Modificar o arquivo spec/spec_helper.rb
Primeiros Testes @jlucasps Adicionar as linhas em negrito ao arquivo require File.expand_path("../.. /config/environment", __FILE__) require 'rspec/rails' require 'rspec/autorun' require 'capybara/rails' require 'capybara/rspec' # Requires supporting ruby files with custom matchers and macros, etc, # in spec/support/ and its subdirectories. Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }
Primeiros Testes @jlucasps Adicionar as linhas em negrito ao bloco config do arquivoRSpec.configure do |config| # ## Mock Framework # If you prefer to use mocha, flexmock or RR, uncomment the appropriate line: # config.mock_with :mocha # config.mock_with :flexmock # config.mock_with :rr config.include Capybara::DSL config.include Rails.application.routes. url_helpers # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures config.fixture_path = "#{::Rails.root} /spec/fixtures" # .......
Primeiros Testes @jlucasps $ git add . $ git commit -m "Setup RSpec" Criar o primeiro Teste /spec/features/welcome/index.html.erb_spec.rb
Primeiros Testes @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end end /spec/features/welcome/index.html.erb_spec.rb
Primeiros Testes @jlucasps jlucasps@lotus:/media/first_app$ rspec . Finished in 0.18264 seconds 1 example, 0 failures Randomized with seed 64721 jlucasps@lotus:/media/first_app$ $ git add . $ git commit -m "Primeiro teste com sucesso"
Primeiros Testes @jlucasps require 'spec_helper' describe ".about", :type => :feature do it "access about page" do visit about_path page.should have_content("About us") end end /spec/features/welcome/about.html.erb_spec.rb
Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path NameError: undefined local variable or method `about_path' for #<RSpec::Core::ExampleGroup::Nested_1: 0x00000003991378> # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.18221 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # . about access about page Randomized with seed 10191 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
Primeiros Testes Criar uma nova rota para action about @jlucasps FirstApp::Application.routes.draw do root :to => 'welcome#index', :as => :index match 'about' => 'welcome#about', :as => : about match 'black' => 'welcome#black', :via => :get, :as => :black end
Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path AbstractController::ActionNotFound: The action 'about' could not be found for WelcomeController # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.19052 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 45018 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
@jlucasps Primeiros Testes class WelcomeController < ApplicationController def index end def black render :layout => 'application_black' end def about end end
Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F Failures: 1) .about access about page Failure/Error: visit about_path ActionView::MissingTemplate: Missing template welcome/about, application/about with {:locale=> [:en], :formats=>[:html], :handlers=>[:erb, :builder, :coffee]}. Searched in: * "/media/truecrypt1/handsonrails/first_app/app/views" # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.21562 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 15753 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
Primeiros Testes Criar arquivo /app/views/welcome/about.html.erb e executar $ rspec @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact © Company 2013" # ./spec/features/welcome/about.html.erb_spec.rb:7:in `block (2 levels) in <top (required)>' Finished in 0.21174 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 30415 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
Primeiros Testes Criar conteúdo para /app/views/welcome/about.html.erb @jlucasps
Primeiros Testes Executar $ rspec @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .. Finished in 0.19564 seconds 2 examples, 0 failures Randomized with seed 30993 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$
Primeiros Testes Executar mesmos procedimento para página /app/views/welcome/contact.html.erb @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec ... Finished in 0.20856 seconds 3 examples, 0 failures Randomized with seed 28272 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Páginas index, about e contact"
Primeiros Testes Adicionar mais um bloco it .... do @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end it "access public pages" do visit index_path page.should have_content("Hello, world!") click_link "About" page.should have_content("About us") click_link "Contact" page.should have_content("How to find us") click_link "Home" page.should have_content("Hello, world!") end end
Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F.. Failures: 1) .index access public pages Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact Sidebar Link Link Link Link Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Learn more » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » © Company 2013" # ./spec/features/welcome/index.html.erb_spec.rb:15:in `block (2 levels) in <top (required)>' Finished in 0.30914 seconds 4 examples, 1 failure Failed examples: rspec ./spec/features/welcome/index.html.erb_spec.rb:10 # .index access public pages Randomized with seed 34047
Primeiros Testes Alterar o partial /app/views/shared/_menu_top.html.erb @jlucasps <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav- collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <%= link_to "Project name", index_path, :class => "brand" %> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><%= link_to "Home", index_path %></li> <li><%= link_to "About", about_path %></li> <li><%= link_to "Contact", contact_path %></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
Primeiros Testes @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .... Finished in 0.3571 seconds 4 examples, 0 failures Randomized with seed 51426 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Navegação em páginas públicas" $ git push
Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps Obrigado

More Related Content

What's hot (20)

ODP
Pretty Bookmarkable JSF: PrettyFaces
Lincoln III
 
DOCX
Different way to share data between controllers in angular js
codeandyou forums
 
PDF
Angular JS blog tutorial
Claude Tech
 
PDF
Dethroning Grunt: Simple and Effective Builds with gulp.js
Jay Harris
 
PDF
Resource and view
Papp Laszlo
 
PDF
Yerbabuena eRCP OSGi-based
Yerbabuena Software
 
TXT
Test upload
Darrell Lawson Jr.
 
PPTX
ChocolateChip-UI
GeorgeIshak
 
PDF
243329387 angular-docs
Abhi166803
 
PDF
Course CodeSchool - Shaping up with Angular.js
Vinícius de Moraes
 
ODP
Bookmarkable JSF: PrettyFaces
Lincoln III
 
ODP
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
Lincoln III
 
PDF
PrimeTime JSF with PrimeFaces - Dec 2014
cagataycivici
 
DOC
Templates81 special document
Lan Nguyen
 
DOC
Templates81 special document
Lan Nguyen
 
PDF
Ruby on Rails : RESTful 和 Ajax
Wen-Tien Chang
 
TXT
Private slideshow
sblackman
 
POT
All in one_seo_pack
Human Relationships
 
PPT
ASP.NET MVC introduction
Tomi Juhola
 
PPTX
I Love codeigniter, You?
إسماعيل عاشور
 
Pretty Bookmarkable JSF: PrettyFaces
Lincoln III
 
Different way to share data between controllers in angular js
codeandyou forums
 
Angular JS blog tutorial
Claude Tech
 
Dethroning Grunt: Simple and Effective Builds with gulp.js
Jay Harris
 
Resource and view
Papp Laszlo
 
Yerbabuena eRCP OSGi-based
Yerbabuena Software
 
Test upload
Darrell Lawson Jr.
 
ChocolateChip-UI
GeorgeIshak
 
243329387 angular-docs
Abhi166803
 
Course CodeSchool - Shaping up with Angular.js
Vinícius de Moraes
 
Bookmarkable JSF: PrettyFaces
Lincoln III
 
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
Lincoln III
 
PrimeTime JSF with PrimeFaces - Dec 2014
cagataycivici
 
Templates81 special document
Lan Nguyen
 
Templates81 special document
Lan Nguyen
 
Ruby on Rails : RESTful 和 Ajax
Wen-Tien Chang
 
Private slideshow
sblackman
 
All in one_seo_pack
Human Relationships
 
ASP.NET MVC introduction
Tomi Juhola
 
I Love codeigniter, You?
إسماعيل عاشور
 

Viewers also liked (7)

PDF
Consultation on 16 19 vocational reform fa qs (5)
amyclaire
 
PDF
Desenvolvimento web com Ruby on Rails (parte 4)
Joao Lucas Santana
 
PDF
Desenvolvimento web com Ruby on Rails (parte 3)
Joao Lucas Santana
 
PDF
Desenvolvimento web com Ruby on Rails (parte 6)
Joao Lucas Santana
 
PDF
Curso de Ruby on Rails - Aula 04
Maurício Linhares
 
PDF
Desenvolvimento web com Ruby on Rails (extras)
Joao Lucas Santana
 
PDF
Servidores de E-mail: Qmail, Sendmail e Postfix
Alvaro Oliveira
 
Consultation on 16 19 vocational reform fa qs (5)
amyclaire
 
Desenvolvimento web com Ruby on Rails (parte 4)
Joao Lucas Santana
 
Desenvolvimento web com Ruby on Rails (parte 3)
Joao Lucas Santana
 
Desenvolvimento web com Ruby on Rails (parte 6)
Joao Lucas Santana
 
Curso de Ruby on Rails - Aula 04
Maurício Linhares
 
Desenvolvimento web com Ruby on Rails (extras)
Joao Lucas Santana
 
Servidores de E-mail: Qmail, Sendmail e Postfix
Alvaro Oliveira
 
Ad

Similar to Desenvolvimento web com Ruby on Rails (parte 2) (20)

PDF
20090418 イケテルRails勉強会 第1部Rails編
mochiko AsTech
 
PDF
Survey of Front End Topics in Rails
Benjamin Vandgrift
 
PDF
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
PDF
Statische Websites in Rails 3.1
RobinBrouwer
 
PPTX
Rails Engine | Modular application
mirrec
 
PDF
RoR (Ruby on Rails)
scandiweb
 
KEY
Rails 3 - The Developers Conference - 21aug2010
Plataformatec
 
PDF
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
PPTX
Catalog display
Jason Noble
 
PPTX
RSpec and Rails
Alan Hecht
 
KEY
Rails3 asset-pipeline
Damian Galarza
 
PDF
Vivendo No Mundo Rails
Alisson Sales
 
PDF
Desenvolvendo APIs usando Rails - Guru SC 2012
Rafael Felix da Silva
 
PPTX
Bootstrap rails-app
Yiannis Deliyiannis
 
PPS
Actionview
Amal Subhash
 
PDF
React on rails v4
Justin Gordon
 
PDF
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
PDF
feature flagging with rails engines v0.2
Enrico Teotti
 
PDF
Twitter bootstrap on rails
Masakuni Kato
 
PPT
Rails 3
Iain Hecker
 
20090418 イケテルRails勉強会 第1部Rails編
mochiko AsTech
 
Survey of Front End Topics in Rails
Benjamin Vandgrift
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
Statische Websites in Rails 3.1
RobinBrouwer
 
Rails Engine | Modular application
mirrec
 
RoR (Ruby on Rails)
scandiweb
 
Rails 3 - The Developers Conference - 21aug2010
Plataformatec
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
Catalog display
Jason Noble
 
RSpec and Rails
Alan Hecht
 
Rails3 asset-pipeline
Damian Galarza
 
Vivendo No Mundo Rails
Alisson Sales
 
Desenvolvendo APIs usando Rails - Guru SC 2012
Rafael Felix da Silva
 
Bootstrap rails-app
Yiannis Deliyiannis
 
Actionview
Amal Subhash
 
React on rails v4
Justin Gordon
 
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
feature flagging with rails engines v0.2
Enrico Teotti
 
Twitter bootstrap on rails
Masakuni Kato
 
Rails 3
Iain Hecker
 
Ad

Recently uploaded (20)

PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 

Desenvolvimento web com Ruby on Rails (parte 2)

  • 1. Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps
  • 2. Layouts e Partials @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
  • 3. Layouts e Partials Alterar application.js @jlucasps //= require jquery //= require jquery_ujs //= require_tree . //= require jquery //= require jquery_ujs //= require bootstrap.js
  • 4. Layouts e Partials Alterar application.css @jlucasps *= require_self *= require_tree . *= require bootstrap.css *= require bootstrap-responsive.css *= require custom.css
  • 5. Layouts e Partials $ git add . $ git commit -m "Especificando arquivos no application.js e application.css" @jlucasps
  • 6. Layouts e Partials Criar novo arquivo de layout /app/views/layouts/application_black.html.erb Adicionar atributo style à tag body <body style='background-color:black;'> Criar nova action 'black' no controller Welcome @jlucasps def black render :layout => 'application_black' end
  • 7. Layouts e Partials Criar rota para action 'black' match 'black' => 'welcome#black', :via => :get, :as => :black Criar template para a nova action: /app/views/welcome/index.html.erb Acessar URL http://localhost:3000/black @jlucasps
  • 8. Layouts e Partials $ git add . $ git commit -m "Utilizando mais de 1 layout" Tente definir um layout para várias actions Dica: layout 'application_black', :only => :black @jlucasps
  • 9. Layouts e Partials Utilizando o content_for Atualizem o layout application.html.erb @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <div class='row-fluid'> <div class='span3'> <%= yield :sidebar %> </div> <div class='span9'> <%= yield %> </div> </div> </body> </html>
  • 10. Layouts e Partials Atualizem o template welcome/index.html.erb @jlucasps <h1>Conteúdo central</h1> <%= content_for :sidebar do %> <h4>sidebar</h4> <% end %>
  • 11. Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando a sidebar"
  • 12. Layouts e Partials @jlucasps Configurar layout para que fique como no exemplo abaixo utilizando partials e content_for
  • 13. Layouts e Partials @jlucasps Criar arquivo /app/assets/stylesheets/custom.css body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } }
  • 14. Layouts e Partials @jlucasps Alterar layout /app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= render :partial => 'shared/menu_top' %> <div class="container-fluid"> <div class="row-fluid"> <%= yield :sidebar %> <%= yield %> </div> <%= render :partial => 'shared/footer' %> </div> </body> </html>
  • 15. Layouts e Partials @jlucasps Criar partial views/shared/_footer.html.erb <hr> <footer> <p>&copy; Company 2013</p> </footer>
  • 16. Layouts e Partials @jlucasps Criar partial views/shared/_menu_top.html.erb <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=". nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  • 17. Layouts e Partials @jlucasps Criar partial views/shared/_sidebar.html.erb <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well --> </div><!--/span-->
  • 18. Layouts e Partials @jlucasps Alterar template /app/views/welcome/index.html.erb <div class="span9"> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row-fluid"> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> </div><!--/row--> </div><!--/span--> <%= content_for :sidebar do %> <%= render :partial => 'shared/sidebar' %> <% end %>
  • 19. Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando layout com partial e content_for"
  • 20. Primeiros Testes Antes..... Configurar arquivo Gemfile com links e documentações Adicionar ao Gemfile group :test do gem 'capybara' gem rspec-rails' end Executar $ bundle install Remover diretório /test Executar $ rails g rspec:install @jlucasps
  • 21. Primeiros Testes @jlucasps $ rails generate rspec:install create .rspec create spec create spec/spec_helper.rb Modificar o arquivo spec/spec_helper.rb
  • 22. Primeiros Testes @jlucasps Adicionar as linhas em negrito ao arquivo require File.expand_path("../.. /config/environment", __FILE__) require 'rspec/rails' require 'rspec/autorun' require 'capybara/rails' require 'capybara/rspec' # Requires supporting ruby files with custom matchers and macros, etc, # in spec/support/ and its subdirectories. Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }
  • 23. Primeiros Testes @jlucasps Adicionar as linhas em negrito ao bloco config do arquivoRSpec.configure do |config| # ## Mock Framework # If you prefer to use mocha, flexmock or RR, uncomment the appropriate line: # config.mock_with :mocha # config.mock_with :flexmock # config.mock_with :rr config.include Capybara::DSL config.include Rails.application.routes. url_helpers # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures config.fixture_path = "#{::Rails.root} /spec/fixtures" # .......
  • 24. Primeiros Testes @jlucasps $ git add . $ git commit -m "Setup RSpec" Criar o primeiro Teste /spec/features/welcome/index.html.erb_spec.rb
  • 25. Primeiros Testes @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end end /spec/features/welcome/index.html.erb_spec.rb
  • 26. Primeiros Testes @jlucasps jlucasps@lotus:/media/first_app$ rspec . Finished in 0.18264 seconds 1 example, 0 failures Randomized with seed 64721 jlucasps@lotus:/media/first_app$ $ git add . $ git commit -m "Primeiro teste com sucesso"
  • 27. Primeiros Testes @jlucasps require 'spec_helper' describe ".about", :type => :feature do it "access about page" do visit about_path page.should have_content("About us") end end /spec/features/welcome/about.html.erb_spec.rb
  • 28. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path NameError: undefined local variable or method `about_path' for #<RSpec::Core::ExampleGroup::Nested_1: 0x00000003991378> # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.18221 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # . about access about page Randomized with seed 10191 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 29. Primeiros Testes Criar uma nova rota para action about @jlucasps FirstApp::Application.routes.draw do root :to => 'welcome#index', :as => :index match 'about' => 'welcome#about', :as => : about match 'black' => 'welcome#black', :via => :get, :as => :black end
  • 30. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path AbstractController::ActionNotFound: The action 'about' could not be found for WelcomeController # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.19052 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 45018 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 31. @jlucasps Primeiros Testes class WelcomeController < ApplicationController def index end def black render :layout => 'application_black' end def about end end
  • 32. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F Failures: 1) .about access about page Failure/Error: visit about_path ActionView::MissingTemplate: Missing template welcome/about, application/about with {:locale=> [:en], :formats=>[:html], :handlers=>[:erb, :builder, :coffee]}. Searched in: * "/media/truecrypt1/handsonrails/first_app/app/views" # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.21562 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 15753 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 33. Primeiros Testes Criar arquivo /app/views/welcome/about.html.erb e executar $ rspec @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact © Company 2013" # ./spec/features/welcome/about.html.erb_spec.rb:7:in `block (2 levels) in <top (required)>' Finished in 0.21174 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 30415 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 34. Primeiros Testes Criar conteúdo para /app/views/welcome/about.html.erb @jlucasps
  • 35. Primeiros Testes Executar $ rspec @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .. Finished in 0.19564 seconds 2 examples, 0 failures Randomized with seed 30993 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$
  • 36. Primeiros Testes Executar mesmos procedimento para página /app/views/welcome/contact.html.erb @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec ... Finished in 0.20856 seconds 3 examples, 0 failures Randomized with seed 28272 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Páginas index, about e contact"
  • 37. Primeiros Testes Adicionar mais um bloco it .... do @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end it "access public pages" do visit index_path page.should have_content("Hello, world!") click_link "About" page.should have_content("About us") click_link "Contact" page.should have_content("How to find us") click_link "Home" page.should have_content("Hello, world!") end end
  • 38. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F.. Failures: 1) .index access public pages Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact Sidebar Link Link Link Link Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Learn more » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » © Company 2013" # ./spec/features/welcome/index.html.erb_spec.rb:15:in `block (2 levels) in <top (required)>' Finished in 0.30914 seconds 4 examples, 1 failure Failed examples: rspec ./spec/features/welcome/index.html.erb_spec.rb:10 # .index access public pages Randomized with seed 34047
  • 39. Primeiros Testes Alterar o partial /app/views/shared/_menu_top.html.erb @jlucasps <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav- collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <%= link_to "Project name", index_path, :class => "brand" %> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><%= link_to "Home", index_path %></li> <li><%= link_to "About", about_path %></li> <li><%= link_to "Contact", contact_path %></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  • 40. Primeiros Testes @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .... Finished in 0.3571 seconds 4 examples, 0 failures Randomized with seed 51426 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Navegação em páginas públicas" $ git push
  • 41. Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps Obrigado