Tutorial Ruby on Rails Bagian 4

8/7/2019 Tutorial Ruby on Rails Bagian 4

1/33

TUTORIAL RUBY ON RAILS

TEKNIK INFORMATIKA-UNIV.NASIONAL

Oleh:Slamet nurhadi

UNIVERSITAS NASIONAL


2/33

DAFTAR ISI:

1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASEMySQL

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


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


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


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


6/33

Lalu buka browser anda dan lihat gambar dibawah ini


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


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/


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


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


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


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" }) %>


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/


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 {


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


17/33

Gambar selengkapnya sebagai berikut


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


19/33

Buka development.sqlite3 dan lihat database structure nya


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


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


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


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 {


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


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


26/33

akan terlihat seperti ini..dan cba lakukan register seperti gambardibawah ini http://localhost:3000/user/register


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


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;}


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;}


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


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


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


33/33

Documents

Tutorial Ruby on Rails Bagian 4