tutorial ruby on rails bagian 4
TRANSCRIPT
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
1/33
TUTORIAL RUBY ON RAILS
TEKNIK INFORMATIKA-UNIV.NASIONAL
Oleh:Slamet nurhadi
UNIVERSITAS NASIONAL
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
2/33
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 4
3/33
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 4
4/33
Lalu masuk ke folder railscoders>cd railscoders
Lalu jalankan WEBRick anda dengan mencoba kode ini
>ruby script/server
Dan jalankan di browser kesayangan anda
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
5/33
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 4
6/33
Lalu buka browser anda dan lihat gambar dibawah ini
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
7/33
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 4
8/33
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 -
8/7/2019 Tutorial Ruby on Rails Bagian 4
9/33
# 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 4
10/33
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 -
8/7/2019 Tutorial Ruby on Rails Bagian 4
11/33
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 -
8/7/2019 Tutorial Ruby on Rails Bagian 4
12/33
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 4
13/33
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 4
14/33
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 4
15/33
"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 4
16/33
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 4
17/33
Gambar selengkapnya sebagai berikut
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
18/33
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 4
19/33
Buka development.sqlite3 dan lihat database structure nya
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
20/33
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 4
21/33
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 4
22/33
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 -
8/7/2019 Tutorial Ruby on Rails Bagian 4
23/33
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 4
24/33
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 -
8/7/2019 Tutorial Ruby on Rails Bagian 4
25/33
USER REGISTRATION: ACTIONcoba kita buka app/controllers/user_controller.rb
class UserController < ApplicationControllerlayout "site"
def index
end
def register@title = "Register"if request.post?
# Output goes to log file (logs/development.log indevelopment mode)logger.info params[:user].inspect
@user = User.new(params[:user])if @user.save
render :text => "User created!"end
endendend
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
26/33
akan terlihat seperti ini..dan cba lakukan register seperti gambardibawah ini http://localhost:3000/user/register
http://localhost:3000/user/registerhttp://localhost:3000/user/register -
8/7/2019 Tutorial Ruby on Rails Bagian 4
27/33
coba kita buka app/controllers/user_controller.rb dan ubahlagi kodingnya seperti berikut ini
class UserController < ApplicationController
layout "site"
def indexend
def register@title = "Register"
if request.post? and params[:user]@user = User.new(params[:user])if @user.save
render :text => "User created!"end
endend
end
membuat form message,. Yaitu dengan penambahan koding padaapp/views/user/register.rhtml
RegisterEnter Your Details...
lalu tambahkan koding pada public/stylesheets/site.css
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
28/33
/* Error Reporting Styles(membuat laporan kesalahan )*/
.fieldWithErrors {
margin: 2px;padding: 2px;background-color: red;display: table;}#errorExplanation {border: 2px solid red;padding: 7px;padding-bottom: 12px;margin-bottom: 20px;
background-color: #f0f0f0;}
#errorExplanation h2 {text-align: left;font-weight: bold;padding: 5px 5px 5px 15px;font-size: 12pt;margin: -7px;
background-color: #c00;color: #fff;}#errorExplanation p {color: #333;margin-bottom: 0;padding: 5px;}#errorExplanation ul li {
font-size: 11pt;list-style: square;}
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
29/33
lalu tambahkan koding pada public/stylesheets/site.css
/* Flash Notice Style */#notice {border: 1px solid green;padding: 1em;margin: 1em;margin-bottom: 2em;background-color: lightgray;font: bold smaller sans-serif;}
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
30/33
pada app/views/layouts/application.rhtmltulis kodingnya hingga seperti dibawah ini
Univ. Nasional
"index" %>|"about" %> | "help" %>
pada app/controllers/user controller.rb buat koding sepertiini
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
31/33
def register
@title = "Register"
if request.post? and params[:user]@user = User.new(params[:user])if @user.saveflash[:notice] = "User #{@user.screen_name} created!"redirect_to :action => "index"
endendend
pada app/views/user/index.rhtml tuliskan sebagai berikut
Welcome
ini adalah halaman untuk user pada StudentNetwork
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
32/33
pada app/controllers/user controller.rb tuliskan
def index
@title = "StudentNetwork User Hub"end
pada app/views/layouts/application.rhtml ubah kembalihingga seperti ini
RailsSpace "index",
:controller => "site" %> |"about",:controller => "site" %> | "help",:controller => "site" %> |"register",:controller => "user" %>
-
8/7/2019 Tutorial Ruby on Rails Bagian 4
33/33