TUTORIAL RUBY ON RAILS

(1)

TUTORIAL RUBY ON RAILS

TEKNIK INFORMATIKA-UNIV.NASIONAL

Oleh: Slamet nurhadi

(2)

DAFTAR ISI:

1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL

2. MEMBUAT HALAMAN WEB SEDERHANA 3. MEMBUAT USER MODEL

(3)

1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL

Buka console pada windows (menggunakan InstantRails)

Klik kiri pada ikon ‘I’

>rails railscoders –database=mysql kemudian enter kode tersebut

(4)

Lalu masuk ke folder railscoders >cd railscoders

Lalu jalankan WEBRick anda dengan mencoba kode ini >ruby script/server

(5)

Konfigurasi database yang anda gunakan pada root config\database.yml development: adapter: mysql encoding: utf8 reconnect: false database: railscoders_development pool: 5 username: root password: host: localhost

menguji database dengan kode sebagai berikut >rake db:migrate

(6)

(7)

2. MEMBUAT HALAMAN WEB SEDERHANA

Membuat proyek baru dengan nama tea (otomatis dengan SQLite) >rails tea

Lalu tekan enter, kemudian masuk ke foler tea

tea>ruby script/generate controller Site index about help

lalu anda masuk ke app/controller/site_controller.rb dan lihat kodingnya sebagai berikut

class SiteController < ApplicationController def index end def about end def help end end

saya menggunakan Sublime Text sebagai editor dan gambarnya sebagai berikut

(8)

Kita coba mengaktifkan servernya dengan kode sepeti yang telah dijelaskan di sesi sebelumnya, lebih lengkapnya kita coba bersama tea>ruby script/server

lalu anda buka pada http://localhost:3000/site dan gambarnya lihat di bawah ini

Halaman index

Buka config/routes.rb lalu ubah sehingga sebagai berikut Dari

(9)

# map.connect ", :controller => "welcome" Menjadi

map.connect ", :controller => "site"

Kemudian hapus file index.html pada root public/index.html Pada app/views/site/index.rhtml coba ubah dengan koding sebagai berikut

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Universitas Nasional</title> </head> <body>

<h1>Welcome to Faculty of Information and Communication Technology</h1>

<h2>department of Information Engineering</h2> </body>

</html>

Lihat perubahannya pada http://localhost:3000/

(10)

Halaman About

Pada app/views/site/about.rhtml coba ubah dengan koding sebagai berikut

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>About Faculty</title> </head> <body> <h1>About Faculty</h1>

<p>Letak Kesekretariatan Fakultas berada pada Blok-4 lantai 2</p>

</body> </html>

Buka config/routes.rb lalu tulis sehingga sebagai berikut map.root :controller => "site"

map.about '/about', :controller => 'site', :action => 'about'

(11)

Halaman Help

Pada app/views/site/help.rhtml coba ubah dengan koding sebagai berikut

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Help</title> </head> <body> <h1>Help</h1>

<p>Bila perlu bantuan silahkan menghubungi kami dengan menelpon, email, sms, mms maupun wesel.

</p> </body> </html>

Buka config/routes.rb lalu tulis sehingga sebagai berikut map.help '/help', :controller => 'site', :action => 'help'

(12)

Gambar koding keseluruhan config/routes.rb dibawah ini

Menambahkan navigasi

buka app/controllers/site controller.rb lalu ketik sehingga sebagai

berikut

class SiteController < ApplicationController def index

@title ="welcome to Faculty of Information and Communication Technology"

(13)

def about

@title ="about Faculty" end

def help

@title ="Help Faculty" end

end

Lalu buat halaman site.rhtml lalu taruh pada root

app/views/layouts/site.rhtml dan tulis kodingnya sebagai berikut

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

<head>

<body>

<%= link_to("Home", { :action => "index" }) %> | <%= link_to("About Us", { :action => "about" }) %> | <%= link_to("Help", { :action => "help" }) %>

<%= @content_for_layout %> </body>

(14)

</html>

Lalu lihat di browser anda sebagai berikut di http://localhost:3000/

Membuat Halaman dengan style

Pada app/views/layouts/site.rhtml dan ubah kodingnya sehingga sebagai berikut

<head>

<%= stylesheet_link_tag "site" %> </head>

<body>

<div id="header">Universitas Nasional</div> <div id="nav">

<%= link_to_unless_current "Home", :action => "index" %> |

<%= link_to_unless_current "About Us", :action => "about" %> |

(15)

<%= link_to_unless_current "Help", :action => "help" %> </div> <div id="content"> <%= @content_for_layout %> </div> </div> </body> </html>

buat file site.css dan taruh pada root public/

stylesheets/site.css dan tulis kodingnya sebagai berikut body { font-family: sans-serif; background: #0F5979; margin: 0; text-align: center; } #whole_page { width: 50em; margin: auto; padding: 0; text-align: left; border-width: 0 1px 1px 1px; border-color: black; border-style: solid; } #header { color: white;

background: #44960C; /* No "ruby" defined in HTML color names! */ font-size: 24pt; padding: 0.25em; margin-bottom: 0; } #nav {

(16)

color: black; font-size: 12pt; font-weight: bold; background: #ccc; padding: 0.5em; }

#nav a, #nav a:visited { color: maroon;

text-decoration: none; }

#nav a:hover {

border-bottom: 2px dotted maroon; } #content { height: 100%; background: white; padding: 1em; } #content h1 { font-size: 18pt; }

(17)

(18)

3. MEMBUAT USER MODEL

Membuat User model dengan memakai koding dibawah ini > ruby script/generate model User

Kita lihat Pada db/migrate/001_create_users.rb sehingga seperti berikut ini

class CreateUsers < ActiveRecord::Migration def self.up

create_table :users do |t|

t.column :screen_name, :string t.column :email, :string t.column :password, :string t.timestamps end end def self.down drop_table :users end end

(19)

(20)

Buka app/models/user.rb dan ketik kodingnya sehingga terlihat sebagai berikut

class User < ActiveRecord::Base # Max & min lengths for all fields SCREEN_NAME_MIN_LENGTH = 4 SCREEN_NAME_MAX_LENGTH = 20 PASSWORD_MIN_LENGTH = 4 PASSWORD_MAX_LENGTH = 40 EMAIL_MAX_LENGTH = 50 SCREEN_NAME_RANGE = SCREEN_NAME_MIN_LENGTH..SCREEN_NAME_MAX_LENGTH PASSWORD_RANGE = PASSWORD_MIN_LENGTH..PASSWORD_MAX_LENGTH validates_uniqueness_of :screen_name, :email

validates_length_of :screen_name, :within => 4..20 validates_length_of :password, :within => 4..40 validates_length_of :email, :maximum => 50

validates_presence_of :email

validates_length_of :email, :maximum => EMAIL_MAX_LENGTH validates_format_of :screen_name,

:with => /^[A-Z0-9_]*$/i,

:message => "must contain only letters, " + "numbers, and underscores"

validates_format_of :email,

:with => /^[A-Z0-9._%-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i, :message => "must be a valid email address"

def validate

errors.add(:email, "must be valid.") unless email.include? ("@")

if screen_name.include?(" ")

errors.add(:screen_name, "cannot include spaces.") end

end end

(21)

4. MEMBUAT REGISTERING USERS Ketik koding ini

tea>ruby script/generate controller User index register maka akan terlihat pada app/controllers/user_controller.rb class UserController < ApplicationController

def index end

def register end

end

dan buat koding pada app/views/user/register.rhtml <h2>Register</h2>

<% form_for :user do |form| %> <fieldset>

<legend>Enter Your Details</legend>

<label for="screen_name">Screen name:</label> <%= form.text_field :screen_name %> <br /> <label for="email">Email:</label> <%= form.text_field :email %> <br /> <label for="password">Password:</label> <%= form.password_field :password %> <br />

<%= submit_tag "Register!", :class => "submit" %> </fieldset>

<% end %>

(22)

Sehingga seperti dibawah ini

class UserController < ApplicationController layout "site" def index end def register @title = "Register" end end

dan lihat pada browser http://localhost:3000/user/register

Sekarang ubah koding pada app/views/user/register.rhtml menjadi seperti di bawah ini

<h2>Register</h2>

<legend>Enter Your Details</legend> <div class="form_row">

(23)

<label for="screen_name">Screen name:</label> <%= form.text_field :screen_name %> </div> <div class="form_row"> <label for="email">Email:</label> <%= form.text_field :email %> </div> <div class="form_row"> <label for="password">Password:</label> <%= form.password_field :password %> </div> <div class="form_row">

<%= submit_tag "Register!", :class => "submit" %> </div>

</fieldset> <% end %>

Sekarang membuat style pada tampilan di public/stylesheets/site.css

/* penambahan style tampilan register */ html fieldset { position: relative; } html legend { position:absolute; top: -1em; left: .5em; } html fieldset { position: relative; margin-top:1em; padding-top:2em; padding-bottom: 2em; } /* Form Styles */ fieldset {

(24)

background: #ddd; }

legend {

color: white;

background: maroon; padding: .4em 1em; } label { width: 10em; float: left; text-align: right; margin-right: 0.2em; display: block; } .form_row { white-space: nowrap; padding-bottom: .5em; } .submit { margin-left: 15em; }

dan lihat pada browser http://localhost:3000/user/register untuk melihat perubahannya

(25)

USER REGISTRATION: ACTION

coba kita buka app/controllers/user_controller.rb class UserController < ApplicationController layout "site" def index end def register @title = "Register" if request.post?

# Output goes to log file (logs/development.log in development mode)

logger.info params[:user].inspect @user = User.new(params[:user]) if @user.save

render :text => "User created!" end

end end end

(26)

akan terlihat seperti ini..dan cba lakukan register seperti gambar dibawah ini http://localhost:3000/user/register

(27)

coba kita buka app/controllers/user_controller.rb dan ubah lagi kodingnya seperti berikut ini

class UserController < ApplicationController layout "site"

def index end

def register

@title = "Register"

if request.post? and params[:user] @user = User.new(params[:user]) if @user.save

render :text => "User created!" end

end end end

membuat form message,. Yaitu dengan penambahan koding pada app/views/user/register.rhtml

<h2>Register</h2>

<legend>Enter Your Details</legend>

<%= error_messages_for "user" %>

. . .

<% end %>

(28)

/* Error Reporting Styles(membuat laporan kesalahan )*/ .fieldWithErrors { margin: 2px; padding: 2px; background-color: red; display: table; } #errorExplanation { border: 2px solid red; padding: 7px; padding-bottom: 12px; margin-bottom: 20px; background-color: #f0f0f0; } #errorExplanation h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12pt; margin: -7px; background-color: #c00; color: #fff; } #errorExplanation p { color: #333; margin-bottom: 0; padding: 5px; } #errorExplanation ul li { font-size: 11pt; list-style: square; }

(29)

lalu tambahkan koding pada public/stylesheets/site.css /* Flash Notice Style */

#notice {

border: 1px solid green; padding: 1em;

margin: 1em;

margin-bottom: 2em;

background-color: lightgray; font: bold smaller sans-serif; }

(30)

pada app/views/layouts/application.rhtml tulis kodingnya hingga seperti dibawah ini

<head>

<%= stylesheet_link_tag "site" %> </head>

<body>

<div id="header">Univ. Nasional</div> <div id="nav">

<%= link_to_unless_current "Home", :action => "index" %> |

<%= link_to_unless_current "About Us", :action => "about" %> |

<%= link_to_unless_current "Help", :action => "help" %> </div>

<% if flash[:notice] -%>

pada app/controllers/user controller.rb buat koding seperti ini

(31)

def register

@title = "Register"

if request.post? and params[:user] @user = User.new(params[:user]) if @user.save

flash[:notice] = "User #{@user.screen_name} created!" redirect_to :action => "index"

end end end

pada app/views/user/index.rhtml tuliskan sebagai berikut <h1>Welcome</h1>

(32)

pada app/controllers/user controller.rb tuliskan def index

@title = "StudentNetwork User Hub" end

pada app/views/layouts/application.rhtml ubah kembali hingga seperti ini

<head>

<%= stylesheet_link_tag "site" %> </head> <body> <div id="whole_page"> <div id="header">RailsSpace</div> <div id="nav">

<%= link_to_unless_current "Home", :action => "index", :controller => "site" %> |

<%= link_to_unless_current "About Us", :action => "about",

:controller => "site" %> |

<%= link_to_unless_current "Help", :action => "help", :controller => "site" %> |

<%= link_to_unless_current "Register", :action => "register",

:controller => "user" %> </div>

<% if flash[:notice] -%>

<%= yield %> </div>

(33)

<% if ENV["RAILS_ENV"] == "development" %> <%= debug(params) %> <% end %> </div> </body> </html>