8/7/2019 Tutorial Ruby on Rails Bagian 3
1/25
TUTORIAL RUBY ON RAILS
TEKNIK INFORMATIKA-UNIV.NASIONAL
Oleh:Slamet nurhadi
UNIVERSITAS NASIONAL
8/7/2019 Tutorial Ruby on Rails Bagian 3
2/25
DAFTAR ISI:
1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASEMySQL
2. MEMBUAT HALAMAN WEB SEDERHANA3. MEMBUAT USER MODEL4. MEMBUAT REGISTERING USERS
8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
4/25
8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
6/25
Lalu buka browser anda dan lihat gambar dibawah ini
8/7/2019 Tutorial Ruby on Rails Bagian 3
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/7/2019 Tutorial Ruby on Rails Bagian 3
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/site8/7/2019 Tutorial Ruby on Rails Bagian 3
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/8/7/2019 Tutorial Ruby on Rails Bagian 3
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/about8/7/2019 Tutorial Ruby on Rails Bagian 3
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/help8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
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" }) %>
8/7/2019 Tutorial Ruby on Rails Bagian 3
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/8/7/2019 Tutorial Ruby on Rails Bagian 3
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 {
8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
17/25
Gambar selengkapnya sebagai berikut
8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
19/25
Buka development.sqlite3 dan lihat database structure nya
8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
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
8/7/2019 Tutorial Ruby on Rails Bagian 3
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/register8/7/2019 Tutorial Ruby on Rails Bagian 3
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 {
8/7/2019 Tutorial Ruby on Rails Bagian 3
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/register8/7/2019 Tutorial Ruby on Rails Bagian 3
25/25