SlideShare une entreprise Scribd logo
Ruby on Rails
Course Day 5
By @AlSayedGamal
Views Haml and
bootstrap
Agenda
Views, partials and helpers
rendering and layout
adding haml and syntax difference
compared to ERB
adding twitter bootstrap and
responsive grid design basics
Views, partials and
helpers
Views are loaded by
convention.
Normal content will fall
in main yield part.
_ prefixed files are
called partials and are
rendered inside views
for reusability sake.
Example: _form in any
scaffold.
Rendering and
layout
Each controller is
associated with
layout.
And each layout
has some regions

represented by
yield statement
and region name
Helpers
Helper example:
form_for
link_to
You can define
your own on app/
helpers folder.
Haml is DRY markdown
cleaner views in action
Haml Simple rules
%tagname#id.class
Twitter Bootstrap
Responsive and grid design in action
Installation and
Usage
add following gems to your Gemfile and bundle
gem 'twitter-bootstrap-rails'
gem 'haml'
gem ‘haml-rails'
now install bootstrap static assets
rails generate bootstrap:install static
Generate fluid layout
rails g bootstrap:layout application fluid*
Scaffold and style
rails g bootstrap:themed <scaffold_model>s
*remove the .erb default one
Add new regions to
layout
-if content_for?
= yield

= yield(:region)
= content_for do
Associated Model
form best practices
Use

”accepts_nested_att
ributes_for” to
accept data from
associated model.
Use

“fields_for” to show
this associated
model fields.
Use
”validated_associate
d” to validate related
model
Use

form builder’s
collection_* to link
related models

Example:
collection_select
Exercise

Contenu connexe

Similaire à Rails course day 5

Rails review
Rails reviewRails review
Rails review
Alan Hecht
 
RoR 101: Session 2
RoR 101: Session 2RoR 101: Session 2
RoR 101: Session 2
Rory Gianni
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
Anne Tomasevich
 
Templates, partials and layouts
Templates, partials and layoutsTemplates, partials and layouts
Templates, partials and layouts
Kadiv Vech
 
Jasig Rubyon Rails
Jasig Rubyon RailsJasig Rubyon Rails
Jasig Rubyon Rails
Paul Pajo
 
Actionview
ActionviewActionview
Actionview
Amal Subhash
 
Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...
Volodymyr Shynkar
 
Ruby On Rails Tutorial
Ruby On Rails TutorialRuby On Rails Tutorial
Ruby On Rails Tutorial
sunniboy
 
Zend_Layout & Zend_View Enhancements
Zend_Layout & Zend_View EnhancementsZend_Layout & Zend_View Enhancements
Zend_Layout & Zend_View Enhancements
Ralph Schindler
 
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Andy Maleh
 
The Render API in Drupal 7
The Render API in Drupal 7The Render API in Drupal 7
The Render API in Drupal 7
frandoh
 
What Is Hobo ?
What Is Hobo ?What Is Hobo ?
What Is Hobo ?
Evarist Lobo
 
Ruby on rails RAD
Ruby on rails RADRuby on rails RAD
Ruby on rails RAD
Alina Danila
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ..."Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
DrupalCamp Kyiv
 
Useful Rails Plugins
Useful Rails PluginsUseful Rails Plugins
Useful Rails Plugins
navjeet
 
Rails
RailsRails
Rails
SHC
 
Mvc in symfony
Mvc in symfonyMvc in symfony
Mvc in symfony
Sayed Ahmed
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentation
dharisk
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
Eric Wise
 
Create a new project in ROR
Create a new project in RORCreate a new project in ROR
Create a new project in ROR
akankshita satapathy
 

Similaire à Rails course day 5 (20)

Rails review
Rails reviewRails review
Rails review
 
RoR 101: Session 2
RoR 101: Session 2RoR 101: Session 2
RoR 101: Session 2
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
Templates, partials and layouts
Templates, partials and layoutsTemplates, partials and layouts
Templates, partials and layouts
 
Jasig Rubyon Rails
Jasig Rubyon RailsJasig Rubyon Rails
Jasig Rubyon Rails
 
Actionview
ActionviewActionview
Actionview
 
Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...
 
Ruby On Rails Tutorial
Ruby On Rails TutorialRuby On Rails Tutorial
Ruby On Rails Tutorial
 
Zend_Layout & Zend_View Enhancements
Zend_Layout & Zend_View EnhancementsZend_Layout & Zend_View Enhancements
Zend_Layout & Zend_View Enhancements
 
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
 
The Render API in Drupal 7
The Render API in Drupal 7The Render API in Drupal 7
The Render API in Drupal 7
 
What Is Hobo ?
What Is Hobo ?What Is Hobo ?
What Is Hobo ?
 
Ruby on rails RAD
Ruby on rails RADRuby on rails RAD
Ruby on rails RAD
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ..."Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
 
Useful Rails Plugins
Useful Rails PluginsUseful Rails Plugins
Useful Rails Plugins
 
Rails
RailsRails
Rails
 
Mvc in symfony
Mvc in symfonyMvc in symfony
Mvc in symfony
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentation
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
 
Create a new project in ROR
Create a new project in RORCreate a new project in ROR
Create a new project in ROR
 

Plus de Al Sayed Gamal

9 patterns of microservices
9 patterns of microservices9 patterns of microservices
9 patterns of microservices
Al Sayed Gamal
 
Elixir introduction
Elixir introductionElixir introduction
Elixir introduction
Al Sayed Gamal
 
Racist syndrome (composition over inheritance)
Racist syndrome (composition over inheritance)Racist syndrome (composition over inheritance)
Racist syndrome (composition over inheritance)
Al Sayed Gamal
 
Rails course day 8
Rails course day 8Rails course day 8
Rails course day 8
Al Sayed Gamal
 
Rails course day 7
Rails course day 7Rails course day 7
Rails course day 7
Al Sayed Gamal
 
Rails course day 6
Rails course day 6Rails course day 6
Rails course day 6
Al Sayed Gamal
 
Rails course day 3
Rails course day 3Rails course day 3
Rails course day 3
Al Sayed Gamal
 
Rails course day 2
Rails course  day 2Rails course  day 2
Rails course day 2
Al Sayed Gamal
 
Rails01
Rails01Rails01
OpenStack Murano Application Catalog
OpenStack Murano Application CatalogOpenStack Murano Application Catalog
OpenStack Murano Application Catalog
Al Sayed Gamal
 
Failfast
FailfastFailfast
Failfast
Al Sayed Gamal
 
Git workshop
Git workshopGit workshop
Git workshop
Al Sayed Gamal
 
Python Novice to Ninja
Python Novice to NinjaPython Novice to Ninja
Python Novice to Ninja
Al Sayed Gamal
 
Web development Hackathon
Web development HackathonWeb development Hackathon
Web development Hackathon
Al Sayed Gamal
 
Python novice to ninja
Python novice to ninjaPython novice to ninja
Python novice to ninja
Al Sayed Gamal
 
Python 45 minutes hangout #3
Python 45 minutes hangout #3Python 45 minutes hangout #3
Python 45 minutes hangout #3
Al Sayed Gamal
 
Python 45 minutes Hangouts #4
Python 45 minutes Hangouts  #4Python 45 minutes Hangouts  #4
Python 45 minutes Hangouts #4
Al Sayed Gamal
 
Python45 2
Python45 2Python45 2
Python45 2
Al Sayed Gamal
 
Python45s - Session 01
Python45s - Session 01Python45s - Session 01
Python45s - Session 01
Al Sayed Gamal
 
Mansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprintMansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprint
Al Sayed Gamal
 

Plus de Al Sayed Gamal (20)

9 patterns of microservices
9 patterns of microservices9 patterns of microservices
9 patterns of microservices
 
Elixir introduction
Elixir introductionElixir introduction
Elixir introduction
 
Racist syndrome (composition over inheritance)
Racist syndrome (composition over inheritance)Racist syndrome (composition over inheritance)
Racist syndrome (composition over inheritance)
 
Rails course day 8
Rails course day 8Rails course day 8
Rails course day 8
 
Rails course day 7
Rails course day 7Rails course day 7
Rails course day 7
 
Rails course day 6
Rails course day 6Rails course day 6
Rails course day 6
 
Rails course day 3
Rails course day 3Rails course day 3
Rails course day 3
 
Rails course day 2
Rails course  day 2Rails course  day 2
Rails course day 2
 
Rails01
Rails01Rails01
Rails01
 
OpenStack Murano Application Catalog
OpenStack Murano Application CatalogOpenStack Murano Application Catalog
OpenStack Murano Application Catalog
 
Failfast
FailfastFailfast
Failfast
 
Git workshop
Git workshopGit workshop
Git workshop
 
Python Novice to Ninja
Python Novice to NinjaPython Novice to Ninja
Python Novice to Ninja
 
Web development Hackathon
Web development HackathonWeb development Hackathon
Web development Hackathon
 
Python novice to ninja
Python novice to ninjaPython novice to ninja
Python novice to ninja
 
Python 45 minutes hangout #3
Python 45 minutes hangout #3Python 45 minutes hangout #3
Python 45 minutes hangout #3
 
Python 45 minutes Hangouts #4
Python 45 minutes Hangouts  #4Python 45 minutes Hangouts  #4
Python 45 minutes Hangouts #4
 
Python45 2
Python45 2Python45 2
Python45 2
 
Python45s - Session 01
Python45s - Session 01Python45s - Session 01
Python45s - Session 01
 
Mansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprintMansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprint
 

Dernier

Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
Sven Peters
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
Rakesh Kumar R
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
Hornet Dynamics
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
dakas1
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
What next after learning python programming basics
What next after learning python programming basicsWhat next after learning python programming basics
What next after learning python programming basics
Rakesh Kumar R
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
TaghreedAltamimi
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
Ayan Halder
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
Green Software Development
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
Peter Muessig
 
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
mz5nrf0n
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
Patrick Weigel
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
Alberto Brandolini
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 

Dernier (20)

Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
What next after learning python programming basics
What next after learning python programming basicsWhat next after learning python programming basics
What next after learning python programming basics
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
 
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 

Rails course day 5