Tutorial Ruby on Rails Bagian 2
Post on 28-Jun-2015
292 Views
Preview:
DESCRIPTION
Transcript
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 teaLalu tekan enter, kemudian masuk ke foler tea
tea>ruby script/generate controller Site index about help
lalu anda masuk ke app/controller/site_controller.rbdan lihat kodingnya sebagai berikutclass 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 indexBuka 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 padahttp://localhost:3000/
Halaman AboutPada 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'
dan coba lihat pada http://localhost:3000/about
Halaman HelpPada 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'dan buka pada http://localhost:3000/help
Gambar koding keseluruhan config/routes.rb dibawah ini
Menambahkan navigasibuka 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" endend
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><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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><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
top related