Introduction to Web Development with Ruby on Rails

Tech Career Booster - Online Computer Programming School - techcareerbooster.com
Introduction to Web
Development
With Ruby on Rails
Panos G. Matsinopoulos
Tech Career Booster
techcareerbooster.com

Who am I?
● Panos G. Matsinopoulos
● Software Writer and Reader
● Computer Programming Proponent (techcareerbooster.com)

What is a Computer Program?

What is a Programming Language?

What is Web Development?

Web Development
● Application that is used using a Web Browser
● Implementation relies on HTTP …
● … which relies on TCP…
● … which relies on IP …
● Other protocols are popular
● … SMTP
● … FTP
● … and more …

Do I have to Learn Internet Protocols?

HTTP(S)
● Used by browser to issue a request to a Web server.
● Verb (GET, POST, PUT, PATCH, DELETE …)
● URI (“http://foo.bar.com/articles”)
● Headers
● Body

HTTP Request / HTTP Response

Ruby on Rails - Web Framework
● Has solved many of the Technology Challenges
● Allows you to focus on the Application / Business Domain
● For example
○ Allows you to easily parse the values that are submitted using a form
○ Has solved many security concerns.
○ e.t.c.

Prerequisites for RoR
● HTML, CSS (SASS), JavaScript (Coffee)
● HTTP Basics
● SQL and Database Design
● Ruby

6 Basic Architecture Components
● Ruby on Rails Server
● Routes
● Controllers (and their Actions)
● Models
● Views
● Assets

Rails Server

Routes

Route Decision
HTTP VERB PATH TO RESOURCE
GET /articles route to
GET /articles/ruby-hashes
Controller &
Action

Routes Configuration
get '/reset_password_request', to: 'reset_passwords#new', as: :reset_password_request
post '/reset_password_request', to: 'reset_passwords#create', as: :create_reset_password_request
get '/reset_password', to: 'reset_passwords#new_reset_password', as: :new_reset_password
post '/reset_password', to: 'reset_passwords#reset_password', as: :reset_password
HTTP Verbs Controllers Actions

Controllers & Actions
● A Controller is an Object.
● An Action is a public method on this Controller.
● It takes the data of the HTTP request.
● It does the job requested.
● It prepares the data for the View.
● Asks view to build up the response.

Controller Example
class ArticlesController < ApplicationController
def create
article = Article.new(article_params)
if article.save
flash[:success] = 'Article has been created!'
redirect_to edit_article_url(article)
else
@article = article
render :new
end
end
# ...
end

What are the Models?

Models more like this:

Models in RoR

Persist Model State

RoR Favours RDBMS

Objects <=>Tables

ActiveRecord

Controller Example - Model Highlights
class ArticlesController < ApplicationController
def create
article = Article.new(article_params)
if article.save
flash[:success] = 'Article has been created!'
redirect_to edit_article_url(article)
else
@article = article
render :new
end
end
# ...
end
Model and ActiveRecord

Views and Layouts

Layout Example
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container">
<%= render partial: 'layouts/flash' %>
<%= yield %>
</div>
</body>
</html>
This is where the view part is embedded in

View Example
<% # File: app/views/articles/new.html.erb %>
<h1>Create a New Article</h1>
<%= form_for @article, url: articles_path do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, placeholder: 'Give Title of Article', class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :text %>
<%= f.text_area :text, placeholder: 'Type in the text of the Article', class: 'form-control' %>
</div>
<div>
<%= f.submit class: 'btn btn-success' %>
</div>
<% end %>
<div class="text-right">
<a href="<%= articles_path %>">List of Articles</a>
</div>

Assets
● Images
● JavaScript
● CSS
● Minification
● Fingerprint (which helps browser caching the resources)

Folder Structure

You’ve had enough of me ….
Want to land on a
Junior Web Developer job? …
Learn how by clicking this:
techcareerbooster.com

Introduction to Web Development with Ruby on Rails

More Related Content

What's hot (20)

Similar to Introduction to Web Development with Ruby on Rails (20)

Recently uploaded (20)

Introduction to Web Development with Ruby on Rails