Tutorial Ruby on Rails Bagian 3

8/7/2019 Tutorial Ruby on Rails Bagian 3

1/25

TUTORIAL RUBY ON RAILS

TEKNIK INFORMATIKA-UNIV.NASIONAL

Oleh:Slamet nurhadi

UNIVERSITAS NASIONAL


2/25

DAFTAR ISI:

1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASEMySQL

2. MEMBUAT HALAMAN WEB SEDERHANA3. MEMBUAT USER MODEL4. MEMBUAT REGISTERING USERS


3/25

1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASEMySQL

Buka console pada windows (menggunakan InstantRails)

Klik kiri pada ikon I

>rails railscoders database=mysqlkemudian enter kode tersebut


4/25


5/25

Konfigurasi database yang anda gunakan pada rootconfig\database.yml

development:

adapter: mysqlencoding: utf8reconnect: falsedatabase: railscoders_developmentpool: 5username: rootpassword:host: localhost

menguji database dengan kode sebagai berikut

>rake db:migrate


6/25

Lalu buka browser anda dan lihat gambar dibawah ini


7/25

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 abouthelp

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

class SiteController < ApplicationController

def indexend

def aboutend

def helpend

end

saya menggunakan Sublime Text sebagai editor dan gambarnyasebagai berikut


8/25

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 dibawah ini

Halaman indexBuka config/routes.rb lalu ubah sehingga sebagai berikutDari
http://localhost:3000/sitehttp://localhost:3000/site


9/25

# map.connect ", :controller => "welcome"Menjadimap.connect ", :controller => "site"

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

Pada app/views/site/index.rhtml coba ubah dengan kodingsebagai berikut

Universitas NasionalWelcome to Faculty of Information and CommunicationTechnologydepartment of Information Engineering

Lihat perubahannya padahttp://localhost:3000/
http://localhost:3000/http://localhost:3000/


10/25

Halaman AboutPada app/views/site/about.rhtml coba ubah dengan kodingsebagai berikut

About Faculty

About Faculty

Letak Kesekretariatan Fakultas berada pada Blok-4lantai 2

Buka config/routes.rb lalu tulis sehingga sebagai berikut

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

dan coba lihat padahttp://localhost:3000/about
http://localhost:3000/abouthttp://localhost:3000/about


11/25

Halaman HelpPada app/views/site/help.rhtml coba ubah dengan kodingsebagai berikut

HelpHelp

Bila perlu bantuan silahkan menghubungi kami denganmenelpon, email, sms, mms maupun wesel.

Buka config/routes.rb lalu tulis sehingga sebagai berikutmap.help '/help', :controller => 'site', :action =>'help'dan buka pada http://localhost:3000/help
http://localhost:3000/helphttp://localhost:3000/help


12/25

Gambar koding keseluruhan config/routes.rb dibawah ini

Menambahkan navigasibuka app/controllers/site controller.rb lalu ketik sehingga sebagaiberikut

class SiteController < ApplicationControllerdef index@title ="welcome to Faculty of Information and

Communication Technology"end


13/25

def about@title ="about Faculty"end

def help@title ="Help Faculty"end

end

Lalu buat halaman site.rhtml lalu taruh pada rootapp/views/layouts/site.rhtml dan tulis kodingnya sebagaiberikut

"index" }) %> | "about" }) %> | "help" }) %>


14/25

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

Membuat Halaman dengan style

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

Universitas Nasional "index" %>|"about" %> |
http://localhost:3000/http://localhost:3000/


15/25

"help" %>

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/25

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/25

Gambar selengkapnya sebagai berikut


18/25

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 sepertiberikut ini

class CreateUsers < ActiveRecord::Migrationdef self.upcreate_table :users do |t|

t.column :screen_name, :stringt.column :email, :stringt.column :password, :string

t.timestampsend

end

def self.downdrop_table :users

end

end

setelah itu kita memakai software SQLite browser 2.0 untuk windows


19/25

Buka development.sqlite3 dan lihat database structure nya


20/25

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

class User < ActiveRecord::Base

# Max & min lengths for all fieldsSCREEN_NAME_MIN_LENGTH = 4SCREEN_NAME_MAX_LENGTH = 20PASSWORD_MIN_LENGTH = 4PASSWORD_MAX_LENGTH = 40EMAIL_MAX_LENGTH = 50SCREEN_NAME_RANGE =SCREEN_NAME_MIN_LENGTH..SCREEN_NAME_MAX_LENGTHPASSWORD_RANGE =PASSWORD_MIN_LENGTH..PASSWORD_MAX_LENGTH

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

validates_length_of :email, :maximum => EMAIL_MAX_LENGTHvalidates_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 validateerrors.add(:email, "must be valid.") unless

email.include? ("@")if screen_name.include?(" ")errors.add(:screen_name, "cannot include spaces.")

endend

end


21/25

4. MEMBUAT REGISTERING USERS

Ketik koding ini

tea>ruby script/generate controller User index registermaka akan terlihat pada app/controllers/user_controller.rb

class UserController < ApplicationControllerdef indexend

def registerend

end

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

Register

Enter Your DetailsScreen name:
Email:
Password:
"submit" %>

Dan tambahkan koding app/controllers/user_controller.rb


22/25

Sehingga seperti dibawah ini

class UserController < ApplicationControllerlayout "site"

def indexend

def register@title = "Register"end

end

dan lihat pada browserhttp://localhost:3000/user/register

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

menjadi seperti di bawah ini

RegisterEnter Your Details
http://localhost:3000/user/registerhttp://localhost:3000/user/register


23/25

Screen name:

Email:Password: "submit" %>

Sekarang membuat style pada tampilan dipublic/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/25

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 browserhttp://localhost:3000/user/registeruntukmelihat perubahannya
http://localhost:3000/user/registerhttp://localhost:3000/user/register


25/25

Documents

Tutorial Ruby on Rails Bagian 3