TUTORIAL RUBY ON RAILS

Ukuran: px

Mulai penontonan dengan halaman:

Download "TUTORIAL RUBY ON RAILS"

Yulia Sumadi
8 tahun lalu
Tontonan:

1 TUTORIAL RUBY ON RAILS TEKNIK INFORMATIKA-UNIV.NASIONAL Oleh: Slamet nurhadi UNIVERSITAS NASIONAL

2 DAFTAR ISI: 1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL MEMBUAT HALAMAN WEB SEDERHANA MEMBUAT USER MODEL MEMBUAT REGISTERING USERS

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 Dan jalankan di browser kesayangan anda

$Konfigurasi database yang anda gunakan pada root config\database.$

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 Lalu buka browser anda dan lihat gambar dibawah ini

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 def about def help 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

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 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.

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" " <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

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.

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" " <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

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" " <html> <head> <title> Help</title> </head> <body> <h1>help</h1> <p>bila perlu bantuan silahkan menghubungi kami dengan menelpon, , 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

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 ="welcome to Faculty of Information and Communication Technology"

def about @title ="about Faculty" def help @title ="Help Faculty" Lalu buat halaman site.rhtml lalu taruh pada root app/views/layouts/site.rhtml dan tulis kodingnya sebagai berikut <!

13 def ="about Faculty" def ="Help Faculty" 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" " <html> <head> %></title> </head> <body> <%= link_to("home", { :action => "index" ) %> <%= link_to("about Us", { :action => "about" ) %> <%= link_to("help", { :action => "help" ) %> %> </body>

14 </html> Lalu lihat di browser anda sebagai berikut di 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" " <html> <head> %></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" %>

15 <%= link_to_unless_current "Help", :action => "help" %> </div> <div id="content"> %> </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; Dan coba buka browser anda

17 Gambar selengkapnya sebagai berikut

rb sehingga seperti berikut ini class CreateUsers < ActiveRecord::Migration def self.up create_table :users do t t.

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 : , :string t.column :password, :string t.timestamps def self.down drop_table :users setelah itu kita memakai software SQLite browser 2.0 untuk windows

19 Buka development.sqlite3 dan lihat database structure nya

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 _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, : validates_length_of :screen_name, :within => validates_length_of :password, :within => validates_length_of : , :maximum => 50 validates_presence_of : validates_length_of : , :maximum => _MAX_LENGTH validates_format_of :screen_name, :with => /^[A-Z0-9_]*$/i, :message => "must contain only letters, " + "numbers, and underscores" validates_format_of : , :with => /^[A-Z0-9._%-]+@([A-Z0-9-]+\.)+[A-Z]{2,4$/i, :message => "must be a valid address" def validate errors.add(: , "must be valid.") unless .include? ("@") if screen_name.include?(" ") errors.add(:screen_name, "cannot include spaces.")

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 def register dan buat koding pada app/views/user/register.rhtml <h2>register</h2> <% form_for :user do form %> <fieldset> <leg>enter Your Details</leg> <label for="screen_name">screen name:</label> <%= form.text_field :screen_name %> <br /> <label for=" "> </label> <%= form.text_field : %> <br /> <label for="password">password:</label> <%= form.password_field :password %> <br /> <%= submit_tag "Register!", :class => "submit" %> </fieldset> <% %> Dan tambahkan koding app/controllers/user_controller.rb

Sehingga seperti dibawah ini class UserController < ApplicationController layout "site" def index def register @title = "Register" dan lihat pada browser http://localhost:3000/user/register

22 Sehingga seperti dibawah ini class UserController < ApplicationController layout "site" def index def = "Register" dan lihat pada browser Sekarang ubah koding pada app/views/user/register.rhtml menjadi seperti di bawah ini <h2>register</h2> <% form_for :user do form %> <fieldset> <leg>enter Your Details</leg> <div class="form_row">

23 <label for="screen_name">screen name:</label> <%= form.text_field :screen_name %> </div> <div class="form_row"> <label for=" "> </label> <%= form.text_field : %> </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> <% %> Sekarang membuat style pada tampilan di public/stylesheets/site.css /* penambahan style tampilan register */ html fieldset { position: relative; html leg { 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; leg { 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 untuk melihat perubahannya

dokumen-dokumen yang mirip

TUTORIAL RUBY ON RAILS

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