Tutorial Ruby On Rails Bagian 3

TUTORIAL RUBY ON RAILS
TEKNIK INFORMATIKA-UNIV.NASIONAL
Oleh:
Slamet nurhadi
UNIVERSITAS NASIONAL
DAFTAR ISI:
1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE

MySQL
2. MEMBUAT HALAMAN WEB SEDERHANA

3. MEMBUAT USER MODEL
4. MEMBUAT REGISTERING USERS
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
Lalu masuk ke folder railscoders
>cd railscoders
Lalu jalankan WEBRick anda dengan mencoba kode ini
>ruby script/server
Dan jalankan di browser kesayangan anda

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
Lalu buka browser anda dan lihat gambar dibawah ini
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
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
# 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/
Halaman About
Pada app/views/site/about.rhtml coba ubah dengan koding
sebagai berikut

<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'
dan coba lihat pada http://localhost:3000/about

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

<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'
dan buka pada http://localhost:3000/help
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"
end
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

<html>
<head>
<title><%= @title %></title>
</head>
<body>
<%= link_to("Home", { :action => "index" }) %> |
<%= link_to("About Us", { :action => "about" }) %> |
<%= link_to("Help", { :action => "help" }) %>
<%= @content_for_layout %>
</body>
</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

<html>
<head>
<title><%= @title %></title>
<%= stylesheet_link_tag "site" %>
</head>
<body>
<div id="whole_page">
<div id="header">Universitas 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>
<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 {
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;
}
Dan coba buka browser anda

Gambar selengkapnya sebagai berikut
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
setelah itu kita memakai software SQLite browser 2.0 untuk windows
Buka development.sqlite3 dan lihat database structure nya
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
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 %>
Dan tambahkan koding app/controllers/user_controller.rb

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>
<% form_for :user do |form| %>
<fieldset>
<legend>Enter Your Details</legend>
<div class="form_row">
<label for="screen_name">Screen name:</label>
<%= form.text_field :screen_name %>
</div>
<label for="email">Email:</label>
<%= form.text_field :email %>
</div>
<label for="password">Password:</label>
<%= form.password_field :password %>
</div>
<%= 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 {
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

Tutorial Ruby On Rails Bagian 3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Ruby On Rails Bagian 3

Diunggah oleh

Hak Cipta:

Format Tersedia

TUTORIAL RUBY ON RAILS

1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE

2. MEMBUAT HALAMAN WEB SEDERHANA

Buka console pada windows (menggunakan InstantRails)

Klik kiri pada ikon ‘I’

>rails railscoders –database=mysql

Lalu jalankan WEBRick anda dengan mencoba kode ini

Dan jalankan di browser kesayangan anda

menguji database dengan kode sebagai berikut

Membuat proyek baru dengan nama tea (otomatis dengan SQLite)

tea>ruby script/generate controller Site index about

lalu anda masuk ke app/controller/site_controller.rb

saya menggunakan Sublime Text sebagai editor dan gambarnya

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

Kemudian hapus file index.html pada root public/index.html

Pada app/views/site/index.rhtml coba ubah dengan koding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Lihat perubahannya pada

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Buka config/routes.rb lalu tulis sehingga sebagai berikut

map.root :controller => "site"

dan coba lihat pada http://localhost:3000/about

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Buka config/routes.rb lalu tulis sehingga sebagai berikut

class SiteController < ApplicationController

Lalu buat halaman site.rhtml lalu taruh pada root

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

Membuat Halaman dengan style

Pada app/views/layouts/site.rhtml dan ubah kodingnya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

buat file site.css dan taruh pada root public/

#nav a, #nav a:visited {

Dan coba buka browser anda

Membuat User model dengan memakai koding dibawah ini

> ruby script/generate model User

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

class CreateUsers < ActiveRecord::Migration

class User < ActiveRecord::Base

validates_uniqueness_of :screen_name, :email

validates_length_of :email, :maximum => EMAIL_MAX_LENGTH

Ketik koding ini

tea>ruby script/generate controller User index register

class UserController < ApplicationController

dan buat koding pada app/views/user/register.rhtml

Dan tambahkan koding app/controllers/user_controller.rb

class UserController < ApplicationController

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

Sekarang ubah koding pada app/views/user/register.rhtml

Sekarang membuat style pada tampilan di

/* penambahan style tampilan register */

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

Anda mungkin juga menyukai