Image for post
Image for post

This tutorial is for programming beginners to show how easy it can be to get an interactive site up and running.

Image for post
Image for post

Installing Ruby on Rails

The command line

Image for post
Image for post
Don’t worry if your command line doesn’t look exactly like this. As long as you can type into the box, it’s cool.
say "I am a hacker"

Updating the latest version

rails --version
gem update rails
gem install rails
sudo gem install rails

Where to put our project

mkdir Sites
cd Sites
Image for post
Image for post

Creating our project

rails new jobsboard
Image for post
Image for post
cd jobsboard

One more thing before we start coding

Image for post
Image for post
Oh hi, Atom.
Image for post
Image for post
open .
start .
Image for post
Image for post
Mmmm, folder sidebar time.

Proper Planning and Preparation Prevents Piss Poor Performance

Image for post
Image for post

Gems

Image for post
Image for post
gem 'simple_form'
gem 'kaminari'
Image for post
Image for post
bundle install
Image for post
Image for post
Your bundle is complete!

Models, views and controllers

Image for post
Image for post
Models as if they were spreadsheets. Notice the tabs at the top signifying three different models; Jobs, Users and Bookmarks

Feature process

Lets start!

rails generate model Job title:string company:string url:string
Image for post
Image for post

Step 2 — your database is not your site

rake db:migrate
Image for post
Image for post

Step 3 — add your controller and views

rails generate controller jobs index new

Step 4— Adding in some URLs

Image for post
Image for post
resources :jobs
root 'jobs#index'
Image for post
Image for post
rails server
Image for post
Image for post
Image for post
Image for post

Step 5 — Feeding our models

Image for post
Image for post
class Job < ActiveRecord::Base
end
class Job < ActiveRecord::Base
validates :title, presence: true
validates :company, presence: true
validates :url, presence: true, uniqueness: true
end

Step 6 — filling out our site

Image for post
Image for post
Image for post
Image for post
def new
end
def new
@job = Job.new
end
Image for post
Image for post
<%= simple_form_for @job do |form| %>
<%= form.input :title, label: "Job title" %>
<%= form.input :company, label: "Your company" %>
<%= form.input :url, label: "Link to job" %>
<%= form.button :submit %>
<% end %>
Image for post
Image for post
Simple Form even puts in asterisks for required fields. It knows this due to the presence: true we added to our models
Image for post
Image for post
def create
end
Image for post
Image for post
def create
@job = Job.new
if @job.save
redirect_to root_path
else
render "new"
end
end
@job = Job.new
@job = Job.new(params.require(:job).permit(:title, :company, :url))
Image for post
Image for post

The home page

def index
end
def index
@jobs = Job.all
end
Image for post
Image for post
Image for post
Image for post
<h1>Jobs</h1><% @jobs.each do |job| %>
<div class="job">
<h2><%= link_to job.title, job.url %></h2>
<p><%= job.company %></p>
</div>
<% end %>
<p><%= link_to "Add a job", new_job_path %></p>
Image for post
Image for post
Image for post
Image for post

Design

Image for post
Image for post
body {
background: #a71b3e;
color: white;
font: 14px/1.5 Helvetica, Arial, sans-serif;
margin: 20px auto;
width: 500px;
}
a {
color: #efaaca;
text-decoration: none;
}
Image for post
Image for post
Before and after

Extras!

@jobs = Job.all
@jobs = Job.page(params[:page]).per(25)
<p><%= paginate @jobs %></p>

Getting help

Conclusion

Further resources

Founder of SuperHi. Interested in startups, education and tech. And cats. Email: rik@superhi.com