Tutorial Ruby On Rails Bagian 2

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

MySQL
2. MEMBUAT HALAMAN WEB SEDERHANA

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

Tutorial Ruby On Rails Bagian 2

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 2

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/

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

Anda mungkin juga menyukai