Sudahkah Mendaftar Github?

Kebanyakan pengembang menggunakan Github untuk sarana sharing kode program. Saya mengenal pertama kali ketika kuliah web technology di Thailand. Waktu itu bahasa pemrograman yang digunakan adalah Ruby and Rails (lihat post-post saya tentang ruby and rails), yang memang pertama kali ditujukan untuk bahasa tersebut. Github terkenal dengan version controlnya. Lumayan ribet. Nah, untuk Anda yang belum memiliki akun di Github, postingan kali sedikit memandu Anda mendaftar Github.

Pertama-tama kunjungi situs Github untuk Join/bergabung. Berikutnya isilah data diri yang diminta oleh Github. Seperti biasa, Anda akan diminta mengisi username, email address, dan password untuk login nanti.

Selanjutnya Anda diminta untuk “mengutak-atik” puzzle, memastikan kalau Anda bukan robot/mesin. Tekan “Select a Plan”.

Pilih “Plan” yang diinginkan, kalau bisa sih yang berbayar. Tapi yang gratis juga ok.

Pilih “Individual – Pick the plan” dilanjutkan dengan mengisi data lain terkait tujuan mendaftar Github.

Lanjutkan dengan menekan “Complete Setup” dan buka email yang didaftarkan barusan untuk konfirmasi. Tekan verifikasi di email, untuk melanjutkan login. Setelah login, Anda diminta membuka email lagi untuk memasukan angka yang harus diisikan. Jika sudah maka Anda siap menggunakan Github. Banyak pro dan kontra ketika situs repository ini dibeli Microsoft. Selamat mencoba, “keep calm and code on”.

Kode Warna HTML

Banyak referensi kode warna dijumpai di internet. Saya sendiri memerlukan referensi tersebut sewaktu-waktu. Terkadang repot juga ketika butuh, tidak ada catatan tentang kode tersebut. Terpaksa buka internet. Salat satu kode yang akurat adalah dari situs ini karena beragam warna tersedia.

Perhatikan, dengan mngklik warna hijau di pallete, langsung Color code muncul: #2EFE2E. Tapi untuk warna dasar bisa menggunakan kode berikut, sekaligus sebagai contekan jka sewaktu-waktu butuh:

  

  Nama Warna HEX RGB
 
Alice Blue #F0F8FF rgb(240, 248, 254)
 
Antique White #FAEBD7 rgb(251, 235, 217)
 
Aqua #00FFFF rgb(0, 255, 254)
 
Aquamarine #7FFFD4 rgb(115, 255, 216)
 
Azure #F0FFFF rgb(239, 255, 255)
 
Beige #F5F5DC rgb(245, 245, 223)
 
Bisque #FFE4C4 rgb(255, 227, 200)
 
Black #000000 rgb(0, 0, 0)
 
Blanched Almond #FFEBCD rgb(255, 234, 208)
 
Blue #0000FF rgb(0, 0, 255)
 
Blue Violet #8A2BE2 rgb(138, 43, 226)
 
Brown #A52A2A rgb(165, 42, 42)
 
Burly Wood #DEB887 rgb(222, 184, 135)
 
Cadet Blue #5F9EA0 rgb(95, 158, 160)
 
Chartreuse #7FFF00 rgb(127, 255, 1)
 
Chocolate #D2691E rgb(210, 105, 30)
 
Coral #FF7F50 rgb(251, 127, 80)
 
Cornflower Blue #6495ED rgb(100, 149, 237)
 
Cornsilk #FFF8DC rgb(225, 248, 220)
 
Crimson #DC143C rgb(220, 20, 60)
 
Cyan #00FFFF rgb(62, 254, 255)
 
Dark Blue #00008B rgb(0, 0, 139)
 
Dark Cyan #008B8B rgb(29, 139, 139)
 
Dark Golden Rod #B8860B rgb(184, 134, 11)
 
Dark Gray #A9A9A9 rgb(169, 169, 169)
 
Dark Green #006400 rgb(19, 100, 0)
 
Dark Khaki #BDB76B rgb(189, 183, 107)
 
Dark Magenta #8B008B rgb(139, 0, 140)
 
Dark Olive Green #556B2F rgb(85, 107, 47)
 
Dark Orange #FF8C00 rgb(251, 140, 1)
 
Dark Orchid #9932CC rgb(153, 50, 204)
 
Dark Red #8B0000 rgb(139, 5, 0)
 
Dark Salmon #E9967A rgb(233, 150, 122)
 
Dark Sea Green #8FBC8F rgb(143, 188, 144)
 
Dark Slate Blue #483D8B rgb(72, 61, 139)
 
Dark Slate Gray #2F4F4F rgb(47, 79, 79)
 
Dark Turquoise #00CED1 rgb(48, 206, 209)
 
Dark Violet #9400D3 rgb(148, 0, 211)
 
Deep Pink #FF1493 rgb(249, 19, 147)
 
Deep Sky Blue #00BFFF rgb(43, 191, 254)
 
Dim Gray #696969 rgb(105, 105, 105)
 
Dodger Blue #1E90FF rgb(30, 144, 255)
 
Fire Brick #B22222 rgb(178, 34, 33)
 
Floral White #FFFAF0 rgb(255, 250, 240)
 
Forest Green #228B22 rgb(34, 139, 35)
 
Fuchsia #FF00FF rgb(249, 0, 255)
 
Gainsboro #DCDCDC rgb(220, 220, 220)
 
Ghost White #F8F8FF rgb(248, 248, 255)
 
Gold #FFD700 rgb(253, 215, 3)
 
Golden Rod #DAA520 rgb(218, 165, 32)
 
Gray #808080 rgb(128, 128, 128)
 
Green #008000 rgb(27, 128, 1)
 
Green Yellow #ADFF2F rgb(173, 255, 48)
 
Honey Dew #F0FFF0 rgb(240, 255, 240)
 
Hot Pink #FF69B4 rgb(240, 255, 240)
 
Indian Red #CD5C5C rgb(205, 92, 92)
 
Indigo #4B0082 rgb(75, 0, 130)
 
Ivory #FFFFF0 rgb(255, 255, 239)
 
Khaki #F0E68C rgb(240, 230, 140)
 
Lavender #E6E6FA rgb(230, 230, 250)
 
Lavender Blush #FFF0F5 rgb(254, 240, 245)
 
Lawn Green #7CFC00 rgb(124, 252, 2)
 
Lemon Chiffon #FFFACD rgb(255, 250, 205)
 
Light Blue #ADD8E6 rgb(173, 216, 230)
 
Light Coral #F08080 rgb(240, 128, 128)
 
Light Cyan #E0FFFF rgb(224, 255, 255)
 
Light Golden Rod Yellow #FAFAD2 rgb(250, 250, 210)
 
Light Gray #D3D3D3 rgb(211, 211, 211)
 
Light Green #90EE90 rgb(144, 238, 144)
 
Light Pink #FFB6C1 rgb(252, 182, 193)
 
Light Salmon #FFA07A rgb(251, 160, 122)
 
Light Sea Green #20B2AA rgb(40, 178, 170)
 
Light Sky Blue #87CEFA rgb(135, 206, 250)
 
Light Slate Gray #778899 rgb(119, 136, 153)
 
Light Steel Blue #B0C4DE rgb(176, 196, 222)
 
Light Yellow #FFFFE0 rgb(255, 255, 224)
 
Lime #00FF00 rgb(63, 255, 0)
 
Lime Green #32CD32 rgb(50, 205, 50)
 
Linen #FAF0E6 rgb(250, 240, 230)
 
Magenta #FF00FF rgb(249, 0, 255)
 
Maroon #800000 rgb(128, 4, 0)
 
Medium Aqua Marine #66CDAA rgb(102, 205, 170)
 
Medium Blue #0000CD rgb(0, 0, 205)
 
Medium Orchid #BA55D3 rgb(186, 85, 211)
 
Medium Purple #9370DB rgb(147, 112, 219)
 
Medium Sea Green #3CB371 rgb(60, 179, 113)
 
Medium Slate Blue #7B68EE rgb(123, 103, 238)
 
Medium Spring Green #00FA9A rgb(62, 250, 153)
 
Medium Turquoise #48D1CC rgb(72, 209, 204)
 
Medium Violet Red #C71585 rgb(199, 21, 133)
 
Midnight Blue #191970 rgb(25, 25, 112)
 
Mint Cream #F5FFFA rgb(245, 255, 250)
 
Misty Rose #FFE4E1 rgb(254, 228, 225)
 
Moccasin #FFE4B5 rgb(254, 228, 181)
 
Navajo White #FFDEAD rgb(254, 222, 173)
 
Navy #000080 rgb(0, 0, 128)
 
Old Lace #FDF5E6 rgb(253, 245, 230)
 
Olive #808000 rgb(128, 128, 1)
 
Olive Drab #6B8E23 rgb(107, 142, 35)
 
Orange #FFA500 rgb(252, 165, 3)
 
Orange Red #FF4500 rgb(250, 69, 1)
 
Orchid #DA70D6 rgb(218, 112, 214)
 
Pale Golden Rod #EEE8AA rgb(238, 232, 170)
 
Pale Green #98FB98 rgb(152, 251, 153)
 
Pale Turquoise #AFEEEE rgb(175, 238, 239)
 
Pale Violet Red #DB7093 rgb(219, 112, 147)
 
Papaya Whip #FFEFD5 rgb(254, 239, 213)
 
Peach Puff #FFDAB9 rgb(253, 218, 185)
 
Peru #CD853F rgb(205, 133, 63)
 
Pink #FFC0CB rgb(252, 192, 203)
 
Plum #DDA0DD rgb(221, 160, 221)
 
Powder Blue #B0E0E6 rgb(176, 224, 230)
 
Purple #800080 rgb(128, 0, 128)
 
Rebecca Purple #663399 rgb(102, 51, 153)
 
Red #FF0000 rgb(255, 0, 0)
 
Rosy Brown #BC8F8F rgb(188, 143, 142)
 
Royal Blue #4169E1 rgb(65, 105, 225)
 
Saddle Brown #8B4513 rgb(139, 69, 19)
 
Salmon #FA8072 rgb(250, 128, 114)
 
Sandy Brown #F4A460 rgb(244, 164, 95)
 
Sea Green #2E8B57 rgb(46, 139, 87)
 
Sea Shell #FFF5EE rgb(255, 245, 238)
 
Sienna #A0522D rgb(160, 82, 45)
 
Silver #C0C0C0 rgb(192, 192, 192)
 
Sky Blue #87CEEB rgb(135, 206, 235)
 
Slate Blue #6A5ACD rgb(106, 90, 205)
 
Slate Gray #708090 rgb(112, 128, 145)
 
Snow #FFFAFA rgb(255, 250, 250)
 
Spring Green #00FF7F rgb(63, 255, 128)
 
Steel Blue #4682B4 rgb(70, 130, 180)
 
Tan #D2B48C rgb(210, 180, 140)
 
Teal #008080 rgb(26, 128, 127)
 
Thistle #D8BFD8 rgb(216, 191, 216)
 
Tomato #FF6347 rgb(250, 99, 71)
 
Turquoise #40E0D0 rgb(64, 224, 208)
 
Violet #EE82EE rgb(238, 130, 238)
 
Wheat #F5DEB3 rgb(245, 222, 179)
 
White #FFFFFF rgb(255, 255, 255)
 
White Smoke #F5F5F5 rgb(245, 245, 245)
 
Yellow #FFFF00 rgb(255, 255, 0)
 
Yellow Green #9ACD32 rgb(154, 205, 49)

 

Referensi:

  • dianagung.com
  • html-color-codes.info/
  • w3schools.com/cssref/css_colors.asp

 

Waterfall, Iteration, atau Metode Extreem/Agile dalam Menulis dan Revisi

Bagi rekan-rekan yang berkecimpung dalam dunia IT pasti mengenal metode waterfall, iteration atau Extreem/Agile. Metode-metode tersebut diterapkan dalam perancangan perangkat lunak dan analisa & disain. Namun demikian, saya kerap menerapkannya dalam menulis, baik buku, paper imiah, maupun sekedar postingan di blog. Di antara metode-metode tersebut, manakah yang cocok dengan Anda? Mungkin postingan ini bisa sedikit membantu.

Waterfall

Waterfall artinya air terjun. Jadi metode ini menggunakan prinsip air terjun yang jatuh dari atas ke bawah. Menulis dengan metode waterfall berarti menulis secara cepat, tanpa memperhatikan tata bahasa, mengikuti ide yang ada di kepala. Ketika selesai 100% barulah proses editing dimulai. Kesalahan-kesalahan kecil, salah ketik (typo), maupun salah komposisi (letak kalimat dan paragraf) diperbaiki setelah semua ide dituangkan dalam tulisan. Banyak tips dan trik menulis yang saya terima menganjurkan metode ini, sangat cocok sebagai pemula yang terkadang “bengong” ketika di depan laptop. Fokus menuangkan ide menjadi dasar utama, apalagi bagi pemula yang jarang menulis. Re-writing menjadi wajib bagi yang menerapkan metode ini.

Kelebihan waterfall yang mengalirkan tulisan dengan lincah terkadang menyulitkan penulis buku yang tebal. Tidak mungkin lagi mengecek tulisan dari awal. Bayangkan saja berapa waktu yang dibutuhkan untuk mengecek lagi. Skimming mungkin bisa, tetapi jika mengecek dengan teliti hingga di level tata bahasa, sangat memberatkan, kecuali memang ada bagian yang mengoreksinya. Presiden RI pertama, Ir. Soekarno, pun dalam kata pengantar buku “di bawah bendera revolusi” disebutkan bahwa ketika beliau menulis buku tersebut (kumpulan tulisan) mengatakan tidak sempat lagi membaca ulang kembali apa yang ditulisnya. Kemungkinan besar beliau menggunakan metode iterasi, yang merupakan perbaikan dari metode waterfall dalam perancangan sistem.

Iteration

Metode iterasi menerapkan perulangan (iterasi) dalam proses pembuatannya. Ide-nya adalah merubah sesuatu ketika masih sederhana lebih mudah dibanding jika sudah kompleks. Termasuk juga mengoreksinya dan mengujinya. Tentu saja mengecek perbab lebih enak dibanding per-buku. Ketika menulis disertasi, yang paling melelahkan adalah ketika mengoreksi seluruh isi disertasi. Metode iterasi ini digunakan dengan cara ketika selesai satu bab, langsung koreksi bab yang baru saja ditulis. Terkadang bukan hanya satu bab, satu paragraf pun langsung dikoreksi ketika selesai dibuat. Terkadang kesalahan logika bisa ditemukan sebelum terlanjur, misalnya ternyata paragraf yang baru ditulis salah tempat atau kurang cocok di bab/sub-bab yang sedang digarap.

Jika seluruh tulisan selesai dibuat, mengoreksi tulisan yang dibuat dengan metode iterasi ini lebih cepat dan mudah dibanding mengoreksi tulisan yang dibuat dengan waterfall yang masih banyak salah di sana sini. Bahkan bisa hanya dengan “skimming”. Tentu saja konsep re-writing tetap diterapkan walau menulis menggunakan metode iterasi.

Extreem/Agile

Pernah dalam satu semester saya mengikuti kuliah web development dengan ruby and rails. Metode yang digunakan adalah dengan extreem/agile. Metode ini berfokus menghasilkan satu aplikasi dengan cepat. Berbeda dengan iterasi yang hanya perulangan beberapa milestoon/tahap dalam waterfall, extreem/agile menggabungkan beberapa tahap dalam proses pengembangannya. Ketika proses pembuatan proyek, ada fasilitas bantu yang berupa testing. Jadi testing dapat dilakukan sebelum software selesai dibuat. Metode ini bisa cepat karena dibuat “keroyokan” dengan alat bantu versioning. Rollback ketika new version gagal dengan mudah dan aman dilakukan.

Dalam hal menulis, banyak alat bantu yang bisa digunakan. Misalnya spelling and grammar check yang tersedia di wordprocessing yang digunakan. Aplikasi seperti grammarly terkadang bisa mendeteksi bukan hanya salah ketik, melainkan juga tata bahasa (singular, plural, atau completion). Satu tool yang saat ini mutlak diperlukan dalam publikasi ilmiah adalah cek plagiarisme. Beberapa software bisa digunakan untuk itu, seperti turnitin, plagscan, smallseotools, dll (lihat post sebelumnya). Untuk menulis “keroyokan”, penerapan cloud seperti google drive/one drive bisa juga diterapkan, termasuk menu review di mirosoft word.

Mungkin ide dalam postingan ini aneh bagi Anda, tetapi di jaman “disruption” yang melibatkan multi/interdisiplin dalam berbagai bidang, penerapan satu metode di luar domain ilmu sudah biasa dilakukan. Yang background-nya IT, tidak ada salahnya menerapkan metode-metode orang IT untuk hal-hal tertentu. Siapa yang “rigid”/kaku/radikal siap-siap akan ditinggalkan.

Georeferencing dengan Matlab – bagian 2

Untuk memastikan bahwa hasil Georeferencing kita sesuai dengan koordinat latitude dan longitude, kita bandingkan hasil optimasi dengan google map. Pertama-tama buat koneksi dengan database WebGIS, misalnya dengan nama ODBC ‘aphb’. Lihat cara-cara buat ODBC di postingan yang lalu.

Di baris 131 dan 132 diperoleh titik optimum yang berhasil dihitung dengan algoritma genetik. Selanjutnya di baris 133 dikonversi menjadi koordinat global latitude dan longitude yang akan dikirim ke database postgreSQL. Baris 135 membuat koneksi yang dilanjutkan dengan mempersiapkan lokasi field yang akan di-insert. Terakhir di baris 140 dilakukan proses inserting ke database.

Perhatikan hasil running optimasi di DesktopGIS dengan Algoritma Genetik, diperoleh beberapa titik optimum. Di sini kita baru mengkonversi satu titik optimum karena belum diketahui akurasinya. Jika sudah akurat, baru diterapkan di seluruh titik optimum.

Di sini diperlukan kejelian mata untuk mengarahkan lokasi google map dengan lokasi di DesktopGIS. Setelah itu diketahui akurasinya. Perhatikan gambar di bawah, tampak titik di google map sedikit meleset dari lokasi optimum hasil hitungan di desktopGIS dan ini harus diperbaiki dengan mengeset kembali fungsi konversi.

Jika diperhatikan, sepertinya base latitude dan longitude terlalu jauh sehingga harus digeser kekiri dan ke bawah agar tepat di lokasi yang ditunjukkan oleh panah merah di atas. Lihat video di bawah ini untuk lebih jelasnya:

Ok .. done.

‘Password crypt authentication not supported’ Problem di ODBC postgreSQL

Berhubung aplikasi WebGIS menggunakan Ruby on Rail dengan database PostgreSQL mau tidak mau Matlab menggunakan dua metode koneksi ke database tersebut:

  1. Dengan JDBC
  2. Dengan ODBC

Berhubung error ketika menggunakan JDBC dimana ada pesan kesalahan pada driver, akhirnya saya memutuskan untuk menggunakan ODBC. Buka ODBC di Administrative Tools yang sesuai (32 bit atau 64 bit), dilanjutkan dengan membuat database-nya.

Ketika selesai dibuat, check apakah sudah terbaca di Matlab dengan instruksi di command window:

getdatasources

Jika datasource ODBC Anda berhasil dibuat, akan muncul namanya di antara tanda petik pada variabel ans. Jika tidak, maka Anda harus mengulangi langkah pembuatan ODBC tersebut. Lakukan pembuatan koneksi.

Perhatikan pesan kesalahan (Message) : Password crypt authentication not supported. Pesan ini terjadi karena Windows tidak menerapkan encrypt password. Hal ini terjadi karena ketika membuat ODBC saya memilih PostgreSQL saja (default). Harusnya saya memilih PostgreSQL dengan unicode:

Disable SSL Mode kemudian lakukan ‘Test‘ dengan menekan tombol Test dilanjutkan dengan ‘Save‘. Buat koneksi conn lagi ke PostgreSQL (lihat help untuk koneksi database dengan Matlab). Pastikan tidak ada pesan kesalahan, serta jika Anda ketik isconnection(conn) di command window jawabannya satu bukan nol.

Cek dengan mengambil data:

Tampak isi tabel Projects saya di Ruby on Rail.

Membuat Aplikasi Sederhana User Profile dengan Ruby on Rails

Tak terasa hampir tiga bulan saya kuliah Web Application and Engineering, dan kini saatnya penghakimannya, final exam. Soalnya lumayan sederhana, tetapi pertanyaan membutuhkan wawasan yang luas terhadap dunia web.

Soal: Anda diminta membuat sebuah welcome page sederhana yang harus login terlebih dahulu untuk masuk ke page tersebut dengan autentikasi devise (lihat tulisan sebelumnya). Setelah login Anda dapat melihat profil Anda dan bisa melakukan editing pada profile tersebut. Ada beberapa pertanyaan yang menurut saya levelnya masuk kategori expert, seperti melakukan checking dengan java baik dari sisi client maupun server, hingga integration test dan pengembangan ke arah RESTful. Oke, kita jawab dulu pertanyaan yang mudahnya. Kira-kira tampilan sederhananya seperti ini:

Jawab: Pertama-tama siapkan folder beserta databasenya (saya menggunakan database postgresql saat ujian dengan sistem operasi UBUNTU, tetapi untuk lebih sederhana, kita gunakan saja bawaan dari RoR yaitu SQLite3).

rails new final

Masuk ke folder final, untuk membuat aplikasi welcome page. Kita akan membuat tiga scaffold yaitu user, utama, dan tabel. Utama adalah page sederhana bertuliskan “Welcome” yang berisi link untuk melakukan setting profile.

Buat model user dengan atribut nama dan alamat.

rails g scaffold user nama panggilan

Kode di atas menghasilkan model user dengan atribut nama dan alamat, dan operasi diberikan oleh Scaffold (New, Show, Update, dan Delete). Bisa juga ditulis rails g scaffold user nama:string panggilan:string. Tetapi secara default, RoR akan memberikan struktur data string. Di sini sengaja tidak ditambahkan alamat karena di soal, alamat (address) disisipkan lewat mekanisme migrasi database.

Migrasikan menjadi tabel:

rake db:migrate

Arahkan folder ke project. Jalankan server.

rails server

Buka http://localhost:3000/users dan masukan satu data baru.

Buka kembali program Devise yang telah kita buat sebelumnya. Kita akan mengarahkan user ke menu utama ketika selesai login. Buat kontroller dengan nama utama.

rails g controller utama index

Di sini index merupakan method yang akan mengarahkan ke profil user tersebut, nama, email, alamat dan lain sebagainya. Tambahkan pada \app\config\routes.rb.

resources :tabel

tabel di sini maksudnya page profil yang bersangkutan. Buat juga lengkap dengan controller dan view

rails g controller tabel index

lakukan Migrasi

rake db:migrate

Berikutnya buka file \app\views\utama\index.html.erb dan isi dengan kode berikut (pahami maksudnya):

<h1>Welcome</h1>

<%= link_to ‘Lihat Profile-ku’, tabel_index_path %>

Sisipkan satu field baru (alamat) ke tabel users.

rails g migration add_alamat_to_users alamat:string

Migrasikan ke database:

rake db:migrate

Berikutnya pada file \app\views\tabel\index.html.erb tambahkan juga kode berikut:

<h1>USER PROFILE</h1>

<p>

<strong>Nama:</strong>

<%= current_user.nama %>

</p>

<p>

<strong>Email:</strong>

<%= current_user.email %>

</p>

<p>

<strong>Panggilan:</strong>

<%= current_user.panggilan %>

</p>

<p>

<strong>Alamat:</strong>

<%= current_user.alamat %>

</p>

<td><%= link_to ‘Edit’, edit_user_path(current_user) %></td>

Arahkan routes ke utama#index

root :to => ‘utama#index’

Sedikit ada yang diutak-atik pada \app\views\users\_form.html.erb karena kita menambahkan satu field baru yaitu alamat. Tambahkan satu field terakhir sebelum <action>:

<div class=”field”>

<%= f.label :alamat %><br>

<%= f.text_field :alamat %>

</div>

Agar field alamat yang baru dapat diakses, pada users_controller.erb tambahkan ‘:alamat’:

def user_params

params.require(:user).permit(:nama, :panggilan, :alamat)

end

Terakhir, setelah edit profile link ke lihat profile pada \app\views\users\show.html.erb:

<%= link_to ‘Kembali ke Profile’, tabel_index_path %>

Berikutnya adalah membuat sistem autentikasi terhadap user dengan devise. Pertama-tama sisipkan pada Gemfile

gem ‘devise’

Lakukan instalasi

bundle install

Install devise yang baru ditambahkan pada Gemfile

rails generate devise:install

Setelah terinstall anda bebas membuat devise terhadap model Anda. Misalnya, user:

rails generate devise User

Perhatikan routes.rb dan user.rb jika Anda ingin menelusuri sistem devise bawaan Gem ‘devise’. Migrasikan:

rake db:migrate

Sedikit kelemahan dari devise adalah, kita tidak bisa sign out. Oleh karena itu, sisipkan kode di bawah ini pada body di \app\views\layout\application.html.erb. Note: sisipkan, jangan di replace semua !

<p class=”notice”><%= notice %></p>

<p class=”alert”><%= alert %></p>

<% if flash[:error] %>

<div id=”error”>

<%= flash[:error] %>

</div>

<% end %>

<div id=”container”>

<div id=”user_status”>

<% if user_signed_in? %>

Welcome <%= current_user.email %>! Not you?

<%= link_to “Sign out”, destroy_user_session_path, :method => :delete %>

<% else %>

<%= link_to “Sign up”, new_user_registration_path %> or

<%= link_to “Sign in”, new_user_session_path %>.

<% end %>

</div>

Terakhir, tambahkan pada app\controllers\utama_controller.erb di bagian atas (juga pada users_controller agar terjaga dari aksi hacking):

before_filter :authenticate_user!

Agar ketika user akan melihat profil dirinya, harus login terlebih dahulu. Arahkan route ke menu utama:

Menambahkan View tanpa Scaffold pada Ruby on Rails

Sejauh ini kita masih mengandalkan alat bantu scaffold pada rails yang langsung menyediakan 7 method (CRUD) tanpa kita bersusah payah. Tetapi untuk pembelajaran ada kalanya kita harus memahami konsep dasar antara Model – View dan Controller.

Terkadang kita tidak bisa membuat scaffold, misalnya user yang telah disetting dengan cara devise untuk login ke suatu situs. Jika kita buat rails g scaffold, akan terjadi bentrok. Oleh karena itu untuk melihat user-user yang aktif kita harus membuat view secara manual. Buka kembali project membuat autentikasi dengan devise.

Masuk ke folder project, buat satu controller baru dengan satu metode yaitu index, untuk melihat user-user yang terdaftar di sistem. Sebelumnya daftarkan beberapa user ke sistem anda. Bagi yang baru membaca tulisan ini ada baiknya mencoba tulisan saya sebelumnya tentang autentikasi dengan devise.

rails g controller list index

Tampak Anda telah berhasil membuat suatu view dengan index.html.erb yang siap dibuat kode programnya. Serta satu kontroler dengan nama list_controller.rb. Pertama-tama buka file list_controller.rb. Tambahkan secara sederhana pada metode index

@user = User.all

Dan pada \app\views\list\index.html.erb sisipkan kode ini:

<% @user %>

<% for user in @user %>

<%=user.id%> . <%= user.email %></br>

<% end %>

Coba akses ke http://localhost:3000/list. Anda harus menampilkan user-user yang terdaftar di situs yang baru saja Anda buat. Selamat mencoba.

Tambahan, jika ada error, tambahkan pada routes.rb dengan:

resources :list

Devise untuk Autentikasi pada Ruby on Rails

Buat project baru

rails new devis

Buat satu model berisi daftar kerjaan

rails g scaffold todo name description

migrasikan ke dalam database

rake db:migrate

Arahkan route ke todos#index, agar ketika dijalankan langsung ke alamat tersebut:

root :to => ‘todos#index’

Tambahkan pada Gemfile:

gem ‘devise’

Save file tersebut, lakukan bundle install seperti biasa ketika selesai melakukan editing Gemfile

bundle install

Install devise yang baru ditambahkan pada Gemfile

rails generate devise:install

Setelah terinstall anda bebas membuat devise terhadap model Anda. Misalnya, user:

rails generate devise User

Perhatikan routes.rb dan user.rb jika Anda ingin menelusuri sistem devise bawaan Gem ‘devise’. Migrasikan:

rake db:migrate

Sedikit kelemahan dari devise adalah, kita tidak bisa sign out. Oleh karena itu, sisipkan kode di bawah ini pada body di \app\views\layout\application.html.erb. Note: sisipkan, jangan di replace semua !

<p class=”notice”><%= notice %></p>

<p class=”alert”><%= alert %></p>

<% if flash[:error] %>

<div id=”error”>

<%= flash[:error] %>

</div>

<% end %>

<div id=”container”>

<div id=”user_status”>

<% if user_signed_in? %>

Welcome <%= current_user.email %>! Not you?

<%= link_to “Sign out”, destroy_user_session_path, :method => :delete %>

<% else %>

<%= link_to “Sign up”, new_user_registration_path %> or

<%= link_to “Sign in”, new_user_session_path %>.

<% end %>

</div>

Terakhir, tambahkan pada app\controllers\todos_controller.erb di bagian atas:

before_filter :authenticate_user!

Jalankan server dan anda akan diminta password untuk masuk ke page daftar kerjaan (todo):

rails s

Membuat Relasi Tiga Objek di Ruby on Rails

Postingan yang lalu kita telah berhasil membuat relasi sederhana antara dua tabel (one-to-many). Sekarang kita akan mencoba relasi antara tiga tabel. Buat project baru, misalnya parkir. Kita akan merelasikan tiga tabel yaitu user, mobil, dan todo. Todo adalah daftar pekerjaan yang dimiliki tiap user, begitu juga dengan mobil. Berikut diagram ERD-nya (dibuat dengan aplikasi www.draw.io)

rails new parkir

Buat model user dengan atribut nama dan alamat.

rails g scaffold user nama alamat

Kode di atas menghasilkan model user dengan atribut nama dan alamat, dan operasi diberikan oleh Scaffold (New, Show, Update, dan Delete). Bisa juga ditulis rails g scaffold user nama:string alamat:string. Tetapi secara default, RoR akan memberikan struktur data string.

rails g scaffold mobil user:belongs_to merek no_seri

Kode di atas akan menghasilkan model mobil dengan atribut merek dan no_seri dengan operasi langsung diberikan oleh scaffold. Migrasikan menjadi tabel:

rails g scaffold todo user:belongs_to name description

Kode di atas akan menghasilkan model mobil dengan atribut name dan description dengan operasi langsung diberikan oleh scaffold. Migrasikan menjadi tabel:

rake db:migrate

Buka file \models\user.rb. Tambahkan:

has_many :mobils

has_many :todos

Sedangkan pada file\models\mobil.rb, tambahkan:

belongs_to :user

Karena pada saat generate scaffold mobil kita sudah menambahkan user:belongs_to, maka tidak perlu menambah relasi di atas. Sekarang kita akan menghubungkan antara mobil dengan user, dimana pada tabel mobil memiliki foreign key user_id. User_id berada di tabel Users yang diberikan secara otomatis oleh RoR selain nama dan alamat.

Seperti biasa selalu migrasikan ke tabel dengan instruksi rake. Buka command prompt baru khusus untuk menjalankan server. Arahkan folder ke project.

rails server

Buka http://localhost:3000/users dan masukan satu data baru. Jalankan dan ketika menekan tombol show, kita akan menambahkan mobil milik user yang bersangkutan. Maka pada metode show, kita harus memanggil variabel mobil. Pada \controller\user_controller.rb tambahkan pada metode show (def show):

@mobil = Mobil.new(user_id: @user.id)

@todo = Todo.new(user_id: @user.id)

Artinya kita akan menambahkan mobil baru berdasarkan user_id dari pemilikinya yang saat ini sedang tampil. Jika tidak diisi, ketika akan menambahkan mobil pada users#show, akan muncul eror di form_for (cannot contain nil .. dst). Secara default, show pada daftar user tidak menyertakan data mobil, oleh karena itu sisipi kode pada \view\user\show.html.erb:

<% unless @user.mobils.empty? %>

<% end %><div id=”mobils”>

<% unless @user.mobils.empty? %>

<%= render @user.mobils %>

<% end %>

</div>

 

<h3>Add a Car:</h3>

 

<%= render partial: ‘mobils/form’ %>

Letakkan kode di atas sebelum link_to. Di sini render partial: bemaksud menyisipi form menambahkan mobil baru pada form menampilkan (show) user.

Buat satu file baru di \views\mobils\ dengan nama _mobil.html.erb. Isi dengan kode berikut:

<div class=”mobil” data-time=”<%= mobil.created_at.to_i %>”>

<strong><%= mobil.merek %></strong>

<em>on <%= mobil.created_at.strftime(‘%b %d, %Y at %I:%M %p’) %></em>

<%= simple_format mobil.no_seri %>

</div>

Buat satu file baru di \views\todos\ dengan nama _todo.html.erb. Isi dengan kode berikut:

<div class=”todo” data-time=”<%= todo.created_at.to_i %>”>

<strong><%= todo.name %></strong>

<em>on <%= todo.created_at.strftime(‘%b %d, %Y at %I:%M %p’) %></em>

<%= simple_format todo.description %>

</div>

File _mobil.html.erb merupakan file template untuk render @user.mobil. Jika tidak ada ini maka akan ada pesan “Missing Templat Users#show”. Jalankan Server, Anda harus menghasilkan aplikasi sederhana yang menambah user disertai dengan kendaraannya. Utak-atik views untuk menghasilkan tampilan yang bagus (lihat teknik membuat css dan sejenisnya untuk membuat user interface yang baik). Aplikasi ini sangat sederhana tetapi dapat berfungsi dengan baik.

Coba masukan satu user dengan satu mobil dan kerjaan. Pastikan berjalan dengan baik. Setelah itu klik show user yang bersangkutan untuk melihat daftar pekerjaan dan mobil yang dimilikinya.

Membuat Blog dengan Ruby on Rails + PDF Generation “PRAWN”

Introduction:

Lanjutan dari tulisan sebelumnya (membuat blog dengan rails), coba kita akan membuat tampilan pdf dari suatu postingan. Jika Anda belum membuat aplikasi blog, ada baiknya membuat terlebih dahulu dengan cara seperti tutorial sebelumnya (membuat blog). Perhatikan gambar berikut, tampak kop dan logo yang akan muncul setiap suatu postingan akan ditampilkan dalam format Printable Document File (pdf).

Sebaiknya Anda install terlebih dahulu Gem untuk Prawn.

gem install prawn

Insert pada Gemfile :

gem "prawn", "~> 0.12.0"

gem “prawnto”, “~> 0.1.1”

Jangan lupa menginstal gem:

bundle install

Tambahkan pada app\controllers\ articles_controller.erb kode berikut ini:

prawnto :prawn => { :top_margin => 75, :left_margin =>55, :right_margin =>100}

Buat satu file baru pada app\views\articles\ show.pdf.prawn. Insert file prawn itu dengan kode berikut ini (Letakkan file gambar di app\assets\images\logo.jpg):

pdf.image “#{Rails.root}/app/assets/images/logo.jpg”, :scale => 0.2, :position => 180

pdf.text “\n”    

pdf.text ” AT 70.12: Web Application Engineering” ,:style => :bold

pdf.text ” Asian Institute of Technology”

pdf.text ” Handout: #{@article.name}”

pdf.text ” ____________________________________________________________________”

pdf.text ” \n”

pdf.text ” #{@article.name}”, :size =>18, :style => :bold, :align => :center

pdf.text ”

#{@article.content},”,:columns => 2, :width => pdf.bounds.width,:style => :italic, :align => :justify

Actually you can type on http://localhost:3000/products.pdf to show show.pdf.prawn for each posting, you can add a link at show.html.erb with:

<%= link_to ‘Printable Version’, article_path(@article, :format => ‘pdf’) %>

  1. Run the server:

rails server

Open http://localhost:3000/products. You must see pdf document on your browser when clicking the “printable version” links.

Yukk .. Membuat Aplikasi Blog dengan Ruby on Rails

Introduction:

Aplikasi blog maksudnya kita akan membuat sistem yang menyediakan sarana bagi user untuk membuat suatu tulisan (content) dan user itu maupun yang lain dapat memberikan komentar (comment) terhadap tulisan tertentu. Jadi prinsipnya kita akan menyediakan dua model yaitu model content dan model comment. Model di sini merupakan objek yang akan diterjemahkan ke database yaitu tabel contents dan tabel comments. Sedikit ribet memang di rails, terutama konvensi ketika model single (content) ditranslasikan ke tabel menjadi plural/jamak (contents). Kita menggunakan relasi one-to-many dimana satu content memiliki lebih dari satu comment, sementara itu comment harus dimiliki (has_belongs) oleh suatu content.

Tutorial:

Arahkan ke direktori dimana aplikasi rails kita akan kita letakkan. Buat program baru, misalnya kita beri nama blog.

rails new blog

Artinya kita akan membuat suatu project dengan nama blog. Jika Anda menggunakan database postgresql tambahkan –d postgressql di sebelah kanan blog. Pindahkan folder pada command prompt Anda ke folder blog yang baru saja terbentuk (cd blog). Buat model content dengan atribut name dan content.

rails g scaffold article name content:text

Kode di atas menghasilkan model article dengan atribut name dan content, dan operasi diberikan oleh Scaffold (New, Show, Update, dan Delete). Bisa juga ditulis rails g scaffold article name:string content:text. Tetapi secara default, RoR akan memberikan struktur data string.

rails g scaffold comment article:belongs_to name content

Kode di atas akan menghasilkan model comment dengan atribut name dan content dengan operasi langsung diberikan oleh scaffold. Migrasikan menjadi tabel:

rake db:migrate

Buka file \models\article.rb. Tambahkan:

has_many :comments

Sedangkan pada file\models\comment.rb, tambahkan:

Belongs_to :content

Karena pada saat generate scaffold comment kita sudah menambahkan content:belongs_to, maka tidak perlu menambah relasi di atas. Migrasikan model anda ke database.

rails server

Buka http://localhost:3000/articles dan masukan satu data baru. Jalankan dan ketika menekan tombol show, kita akan menambahkan comment milik content yang bersangkutan. Maka pada metode show, kita harus memanggil variabel comment. Pada \controller\contents_controller.rb tambahkan pada metode show (def show):

@comment = Comment.new(article_id: @article.id)

Artinya kita akan menambahkan comment baru berdasarkan content_id dari pemilikinya yang saat ini sedang tampil. Jika tidak diisi, ketika akan menambahkan comment pada contents#show, akan muncul eror di form_for (cannot contain nil .. dst). Secara default, show pada daftar content tidak menyertakan data comment, oleh karena itu SISIPI (pada line 12) kode pada \view\articles\show.html.erb:

<% unless @article.comments.empty? %>

<h3><%= pluralize(@article.comments.size, ‘Comment’) %></h3>

<% end %>

 

<div id=”comments”>

<% unless @article.comments.empty? %>

<%= render @article.comments %>

<% end %>

</div>

 

<h3>Add a comment:</h3>

 

<%= render partial: ‘comments/form’ %>

Letakkan kode di atas sebelum link_to. Di sini render partial: bemaksud menyisipi form menambahkan comment baru pada form menampilkan (show) content.

Buat satu file baru di \views\comments\ dengan nama _comment.html.erb. Isi dengan kode berikut:

<div class=”comment” data-time=”<%= comment.created_at.to_i %>”>

<strong><%= comment.name %></strong>

<em>on <%= comment.created_at.strftime(‘%b %d, %Y at %I:%M %p’) %></em>

<%= simple_format comment.content %>

</div>

File _comment.html.erb merupakan file template untuk render @content.comment. Jika tidak ada ini maka akan ada pesan “Missing Templat Contents#show“. Anda harus menghasilkan aplikasi sederhana yang menambah content articles dengan komentarnya. Untuk membuat tampilan yang indah, Anda harus sedikit mengatur layout html dan css aplikas yang baru saja Anda buat.

Sublime Text 2 untuk Editing Rails

Go directily to http://www.sublimetext.com/2. Choose your operating system where this app will be installed.

After downloading, you shoud run setup :

Follow the installation instruction:

Click Next until Finish. You should find this look. There is no time limit to evaluate this application, so buy it if you feel good for you.

Membuat Relasi Antar Kelas Sederhana dengan Ruby on Rails

 

Kita akan membuat dua kelas yaitu user dan mobil yang menghubungkan data user dengan mobil yang dimilikinya. Untuk yang baru pertama kali, sebaiknya lihat postingan sebelumnya, di mana menulis kode rails, cara instalasi, membuat program sederhana, dan lain-lain. Mudah-mudahan Anda juga berhasil membentuk apliksi sederhana seperti di bawah ini.

Ok, tiap user memiliki bisa lebih dari satu mobil, dan tiap mobil memiliki data pemiliknya.

rails new parkir

Artinya kita akan membuat suatu project dengan nama parkir. Jika Anda menggunakan database postgresql tambahkan –d postgressql di sebelah kanan parkir. Pindahkan folder pada command prompt Anda ke folder parkir yang baru saja terbentuk.

cd parkir

Buat model user dengan atribut nama dan alamat.

rails g scaffold user nama alamat

Kode di atas menghasilkan model user dengan atribut nama dan alamat, dan operasi diberikan oleh Scaffold (New, Show, Update, dan Delete). Bisa juga ditulis rails g scaffold user nama:string alamat:string. Tetapi secara default, RoR akan memberikan struktur data string.

rails g scaffold mobil user:belongs_to merek no_seri

Kode di atas akan menghasilkan model mobil dengan atribut merek dan no_seri dengan operasi langsung diberikan oleh scaffold. Migrasikan menjadi tabel:

rake db:migrate

Buka file \models\user.rb. Tambahkan:

has_many :mobils

Sedangkan pada file\models\mobil.rb, tambahkan:

belongs_to :user

Karena pada saat generate scaffold mobil kita sudah menambahkan user:belongs_to, maka tidak perlu menambah relasi di atas. Sekarang kita akan menghubungkan antara mobil dengan user, dimana pada tabel mobil memiliki foreign key user_id. User_id berada di tabel Users yang diberikan secara otomatis oleh RoR selain nama dan alamat.


Seperti biasa selalu migrasikan ke tabel dengan instruksi rake. Buka command prompt baru khusus untuk menjalankan server. Arahkan folder ke project.

rails server

Buka http://localhost:3000/users dan masukan satu data baru. Jalankan dan ketika menekan tombol show, kita akan menambahkan mobil milik user yang bersangkutan. Maka pada metode show, kita harus memanggil variabel mobil. Pada \controller\user_controller.rb tambahkan pada metode show (def show):

@mobil = Mobil.new(user_id: @user.id)

Artinya kita akan menambahkan mobil baru berdasarkan user_id dari pemilikinya yang saat ini sedang tampil. Jika tidak diisi, ketika akan menambahkan mobil pada users#show, akan muncul eror di form_for (cannot contain nil .. dst). Secara default, show pada daftar user tidak menyertakan data mobil, oleh karena itu sisipi kode pada \view\user\show.html.erb:

<% unless @user.mobils.empty? %>

<h3><%= pluralize(@user.mobils.size, Mobil) %></h3>

<% end %><div id=”mobils”>

<% unless @user.mobils.empty? %>

<%= render @user.mobils %>

<% end %>

</div>

 

<h3>Add a Car:</h3>

 

<%= render partial: ‘mobils/form’ %>

Letakkan kode di atas sebelum link_to. Di sini render partial: bemaksud menyisipi form menambahkan mobil baru pada form menampilkan (show) user.

Buat satu file baru di \views\mobils\ dengan nama _mobil.html.erb. Isi dengan kode berikut:

<div class=”mobil” data-time=”<%= mobil.created_at.to_i %>”>

<strong><%= mobil.merek %></strong>

<em>on <%= mobil.created_at.strftime(‘%b %d, %Y at %I:%M %p’) %></em>

<%= simple_format mobil.no_seri %>

</div>

File _mobil.html.erb merupakan file template untuk render @user.mobil. Jika tidak ada ini maka akan ada pesan “Missing Templat Users#show”. Jalankan Server, Anda harus menghasilkan aplikasi sederhana yang menambah user disertai dengan kendaraannya.

Coba masukan satu user dengan satu mobil. Pastikan berjalan dengan baik.

Setelah ditambahkan Mobil, ketika suatu user dilihat, akan tampak daftar mobil yang dimilikinya (has_many :mobils). Yang sedikit janggal adalah konsep jamak dan singuler pada RoR, yakni jamak mobil menjadi mobils.

Problem Error Controller Create di Rails 4 (ActiveModel::ForbiddenAttributesError)

Lagi asyik mengikuti tutorial pembuatan simple application di rails, tiba-tiba saat dirunning, ada masalah. Sudah saya teliti, tidak ada sintax yang error, hampir saja saya putus asa dan meninggalkan kerjaan saya. Untungnya saya iseng searching di google, dan ternyata ada yang bernasib sama dengan saya. Ternyata masalah muncul perbedaan kompatibilitas antara rails yang lama dengan yang terbaru. Berikut problema yang terjadi ketika melakukan proses penambahan record dengan controller method create. Jika script ini dijalankan:

def create

    @movie = Movie.new(params[:movie]) dst

Muncul error yang menunjuk pada baris kode tersebut. Ternyata solusinya berdasarkan yang saya searching adalah untuk rails 4 tidak bisa dengan menggunakan params seperti itu. Ganti dengan seperti ini:

@movie = Movie.new(movie_params)

Tetapi harus didefinisikan di bawah end method dengan baris seperti ini (bullets tidak ikut diketik):

  • private
    • def movie_params
    • params.require(:movie).permit(:title, :year)
    • end

Ketika dijalankan langsung, OK.

Rails on Windows .. Layak kah?

Ingin sekali saya mengembangkan Ruby on Rails (RoR) setelah saya selesai kuliah di sini karena karakternya yang cocok dengan materi yang sering saya ajar yaitu “Pemrograman Berorientasi Obyek”. Biasanya saya menggunakan Java sebagai bahasa untuk prakteknya, tetapi saya memiliki kesulitan ketika membuat koneksi antara kelas dengan sistem basis data yang berkarakter non obyek.

Berbeda dengan PHP yang sangat kompatibel dengan windows walaupun lebih cocok dengan linux, RoR sangat disarankan menggunakan linux. Tetapi untuk meningkatkan jumlah penggemar jenis bahasa baru ini mau tidak mau harus menggandeng windows mengingat jumlah pengguna windows yang masih menggurita di Indonesia. Berikut ini pengalaman saya menggunakan RoR yang berbasis windows.

Pertama-tama kita harus berkomunikasi dengan situs resmi RoR untuk memperoleh informasi dan software open source-nya. Untuk yang berplatform Windows kita dapat mengunduh dari: http://railsinstaller.org/en. Klik pada link download untuk Windows:

Jika Anda masih pemula, jangan khawatir dengan link-link di bawahnya karena dengan mengunduh Windows Ruby 1.9 Anda berarti mengunduh semua perlengkapan di bawahnya tersebut. Setelah di download, Anda tinggal mengekstrak dan menginstall dengan single click ala Microsoft, di mana untuk instalasi tinggal mengklik langsung jadi. Beda jika Anda menginstall lewat ubuntu misalnya. Anda harus menginstall apache dulu, menginstall postgresql atau mysql dulu, tetapi dengan download untuk windows, Anda tinggal menjalankan saja.

Saya sudah mencobanya, sedikit ada masalah ketika melakukan proses routing. Routing adalah proses yang mengarahkan suatu page ke arah tertentu. Misalnya Anda membuka situs http://rahmadya.com, maka Anda akan diarahkan ke mana oleh route aplikasi tersebut. Ternyata routing tidak berjalan, setelah saya selidiki ternyata Anda harus mengupgrade ke Rails versi terakhir (ketika saya buat tulisan ini masih berversi 4.0.0). Untuk apgrade, hubungi situs resmi rails yang menyediakan GEM. Gem adalah fasilitas rails seperti library di Windows. Situsnya: http://rubygems.org/gems/rails. Search saja di kolom searching, isi dengan kata kunci “rails”, maka Anda akan menjumpai rails versi terakhir. Ikuti cara downloadnya.

Ternyata ada rails terbaru versi 4.0.1. Untuk mengecek versi rails Anda, masuk ke command promt (Start – run – cmd), ketik saja ‘rails –v‘.

Ternyata versi rails saya masih 4.0.0. Anda tidak diharuskan mengupgrade, tetapi ada baiknya diupgrade untuk memperoleh hasil yang maksimal dari RoR. Untuk menginstallnya ada dua pilihan:

  1. Pada command windows ketik: ‘gem install rails’
  2. Pada Gemfile yang terletak di <folder_project>, tambahkan: ‘gem “rails”, “~> 4.0.1”

Tampak proses upgrade dari rails 4.0.0 ke rails 4.0.1. Berikutnya kita tinggal membuat aplikasi dengan rails, sangat mudah dan tidak membutuhkan banyak waktu.