Sapa Nyankod. nyankodmagz 15 2

Sapa Nyankod Pertama-tama, sebelum panjang-panjangan dan atau lebar-lebaran, kami selaku tim Nyankod mengucapkan mohon maaf lahir dan batin, atas keterlambatan penerbitan edisi 15 ini. Hehehe... Soalnya sang penulis edisi ini ternyata masih menjalani masa-masa tragis dikejar-kejar dan juga mengejar-ngejar dosen pembimbing serta segala sesuatu yg terkait skripsi. Seperti kata Patkai, beginilah skripsi, deritanya tiada akhir. Oleh karena itu, kami mohon ampun atas hal ini. Ampun juragan... (^_^)v Dan kami selaku tim, dengan tulus meminta supaya nyankoders sekalian mengampuni dosa2 kami dan beliau. Semoga beliau bisa tenang di alam sana, dan ditempatkan ditempat yang layak di sisi-Nya. Semoga semua amal ibadahnya diterima oleh Allah SWT. Amiien. Lah, ini kok kayak ada yg meninggal... O_o Di edisi Lumpia Inheritance ini dibahas mengenai pembuatan aplikasi kotak saran berbasis web dengan menggunakan Roby on Rails. Jadi, yang suka Ruby mana suaranya??? Yaudin, biar cepet... mangga dicicipi Lumpia yang satu ini, semoga bisa berkenan di hati dan selera para programmer sekalian. Go Freedom!! Hihihi....s [Kresna Galuh] [Pimpinan Redaksi nyankodMagz]

www.nyankod.com | nyankodMagz 15

2

#nyanMeme

Harus Bilang Bisa Dulu Biar Tetep Keren


3

Berlangganan nyankodMagz Gratis via Email Mau berlangganan nyankodMagz dan info pemrograman lainnya, caranya gampang: 1. 2. 3.

Buka www.nyankod.com, Isi kolom subscribe dengan email kamu, Tekan tombol Subscribe

Dengan berlangganan Newsletter Nyankod, maka kamu akan menerima nyankodMagz edisi terbaru serta berbagai info pemrograman dan info Nyankod lainnya melalui email kamu. Newsletter dikirim setiap bulan satu hari setelah penerbitan nyankodMagz edisi terbaru. www.nyankod.com | nyankodMagz 15 Pastikan kamu nggak ketinggalan! Buruan subscribe!!

4

Programmer yang baik itu selalu update, biar nggak mati gaya.. Follow nih:

@nyankodTWEET Kamu bisa dapetin berbagai info pemrograman, info terbaru nyankod bahkan bisa ikutan seruseruan ala Nyankod di Twitter... ciyuuus lho!!!!


5

Eiit..... Jangan sampe lupa,

Programmer sejati harus like page Nyankoders di facebook. http://www.facebook.com/nyankod


6

nyanPa


7


8

Hai semuanya, how do you do?? I guess fine right :D ... Begini, di edisi ini saya ga akan bercanda dan akan serius menyampaikan materi sampai karakter terakhir. Mau bagaimanapun atau apapun alasannya saya akan serius dan ga akan main-main.... Camkan itu!!! #lagakMentorSongong Inget, aturan pertama... “SAYA TIDAK PERNAH SALAH”. Aturan kedua.. “KALAU SAYA SALAH KEMBALI KE PERATURAN PERTAMA”. 6(o_<) Ok, setuju kan semua!!! #mukaBengis

Sebelumnya saya minta maaf untuk keterlambatan edisi ini dikarenakan oleh saya sebagai penulis edisi ini sedang galau menghadapi sidang Skripsi #YeahAkhirnya. Dan memang saya yang kurang cerdas mengatur waktu :P. Mohon maaf semua nya.... ^_^

Baiklah, mari kita mulai menggunakan Ruby on Rails...

EDISI

15

ini,

kita

akan

membuat

Website

Jangan seneng dulu, kalau yang terbiasa dengan PHP akan sedikit tercengang bahkan sampai kejang-kejang pas pake Rails disini...SO BE READY!!!!


9

RUBY ON RAILS Ruby On Rails, merupakan salah satu framework untuk membuat Website dengan menggunakan bahasa Ruby. RoR didesain agar pemograman Website lebih mudah dan cepat. Bahkan kode yang dibutuhkan untuk membuat sebuah aplikasi web pun sedikit dibandingkan dengan framework di bahasa pemograman lain. Ruby on Rails begitu sederhana dan efisien, ga percaya?? Gini ya, di Magz sekaranssssg saya akan fokus ke bagaimana cara menggunakan dan menginstal Ruby On Rails pada system kita, ingat disini saya menggunakan Ubuntu sebagai tempat developing web app dengan RoR. Selain itu, apa saja yang akan kita kuasai di Edisi ini, cekidot dave: 1. 2. 3. 4. 5.

Cara install Ruby On Rails dengan RVM di Ubuntu. Daftar Git-Hub dan menggunakannya di system. Menggunakan Postgresql sebagai database. Daftar akun di heroku[dot]com untuk publikasi website rails kita. Membuat Website kotak saran nyan dengan Rails :D

Well, untuk edisi ini akan kita bahas ke 5 hal tersebut, akan menjadi pondasi kita di project rails berikutnya :)

Oh iya, dan syarat utama saat developing website dengan Ruby On Rails adalah... JENG JENG JENG.... KONEKSI INTERNET!!!


10

Tanya kenapa??? lihat halaman bawah RoR itu unik, ketika membuat suatu aplikasi website maka kita perlu mendownload semua peralatan dan teknologi yang dibutuhkan khusus untuk web itu sendiri. Kebayang maksudnya apa? Jadi setiap kali membuat website dengan rails maka website tersebut mempunyai tempat spesial dan fasilitas yang spesial pula, tidak bisa dicampuradukkan satu proyek website dengan lainnya. Oh ya, daripada bingung yuk kita install dulu rails dan ruby di komputer kamu dengan RVM dan gem. Cara installnya sudah saya pisahkan di dalam source code edisi ini. Kalau digabung bingung juga nnti hahaha... Well saya anggap RVM, ruby, rails dan database postgresql sudah terpasang di komputer kamu. Kalau ada error silahkan tanyakan lewat nyankodTweet atau fansPage nyankod yaa :D Sekarang mari buat project baru. BUKA TERMINAL ::: masuk ke folder RubyDOJO ~$ cd RubyDOJO Buat proyek website rails baru, kita kasih nama proyek “KotakSaranNyan” : ~:RubyDojo$ rails new KotakSaranNyan -d postgresql lalu tekan enter, maka rails akan me-generate Proyek KotakSaranNyan dengan database postgresql, sampai tuntas..


11

Setelah itu masuk ke folder Proyek Kita tadi :

Coba kita lihat isi direktori proyek kita, ketik ls Ini adalah struktur dari Framework rails


12

Baiklah kita kenali dulu struktur dari rails framework ini, pertama bagian “app”: Weee, ada 3 folder yang di blok, apa itu??? Itulah MODEL, VIEW, CONTROLLERS. Yaph bener banget, inilah Komponen utama arsitektur atau konsep MVC. Framework dengan konsep MVC sangat digandrungi oleh khalayak programmer webApp masa kinih dan juga masa laluh. NAH, MVC itu apa?? mau tau...mau tau banget...ato mau tauuuuu banget??? Hehe... cari tau sendiri deh yah :P


13

POWER UP Perintah sebaris saja tadi rails new KotakSaranNyan -d postgresql kita telah membangun proyek kita dengan database postgresql, sekarang kita konfigurasi dulu di abstract class database kita, buka folder proyek kita menggunakan gedit atau sublimetext, dan tampilkan sidebar untuk melihat tree dari folder framework rails website KotakSaranNyan tadi. Buka file database.rb di dalam folder config : Isi bagian username dan password dengan username dan password yg tadi kita buat di dalam postgresql untuk proyek ini. Dan tambahkan baris host:localhost Kenapa??? File ini bisa disebut dengan Abstract Class, jadi semua urusan framework rails ini terhadap database cukup di atur disini, tidak seperti biasanya bila kita mendevelope website dengan cara konvensional semua koneksi tersebar di berbagai pelosok Kode >_<. Yah dan dengan file ini pula kita bisa dengan mudah migrasi apabila kita berganti database menjadi Mysql, sqlite dan sebagainya, so tak perlu khawatir apabila kita ada proyek trus diminta ganti database, well tinggal migrasi aja, cukup beberapa detik #Songong. Hahahaha OK yuk lanjut, nah setelah koneksi di konfigurasi, sekarang kita tes yuk website kita, buka terminal yang tadi lalu ketik perintah :


14

~:RubyDojo/KotakSaranNyan$ rails server Berikut tampilannya

Rails memiliki web service sendiri yang bernama WEBrick, jadi tak perlu xampp dsb karena web service tersebut sudah terintegrasi ke dalam framework nya Rails.. Keren Kaaann!!! Tuh lihat bagian yang di blok, itu adalah alamat dan port dari WEBrick untuk melihat website kita, oh ya http://0.0.0.0:3000 itu artinya sama dengan http://localhost:3000 Buka browser, saya sarankan gunakan firefox, lalu masukkan alamat tadi dan voilla... Website kita sudah berfungsi dengan halaman default dari Rails :D.... Sekarang coba klik “about your application's environment”... Di sana akan terlihat daftar senjata yang website kita gunakan :D. Kalau terdapat eror “database not created” itu artinya tahapan yang kamu lakukan saat konfigurasi dan membuat database blum lengkat, lihat lagi file nya yah :D


15

Ok website selanjutnya....

sudah

berjalan,

sekarang

GENERATE

saatnya

kita

masuk

ke

bagian

'CRUD' KOTAK SARAN

Sekarang saatnya bagi kita untuk ngoding :D CRUD Yaaay.... apa itu CRUD? Itu adalah basic dari pemograman web, CRUD adalah Create Read Update Destroy


16

Nah apa saja yang perlu kita buat : 1. 2. 3. 4. 5. 6. 7. 8. 9.

Buat tabel dalam database Buat Controller untuk posting saran Buat Model untuk posting saran Buat View untuk posting saran. Migrasi database untuk posting saran. Routing home page ke halaman membuat saran baru. Hapus file index.html di folder public Konfigurasi layout halaman kirim saran. Lakukan validasi terhadap input di saran.

Ok ke delapan tahap di atas akan kita lakukan di edisi ini,.... Wok: *_* BANG BANYAK BANGET BANG!!! Pegel donk gue... >_< Wek: ^_^ ah masa, liat dulu deh yuk lanjut dave....

4 in 1 (Tabel Database, Models, Views, Controllers) Kita akan melakukan 4 tahap awal dengan satu baris perintah di terminal, YA SATU BARIS PERINTAH SODARA SODARAA ... Perintah itu dikenal dengan the power Of Scaffolding :D, yuk kita coba buka terminal mu kalau web service belum mati segera matikan dengan ctrl+c. ~:RubyDojo/KotakSaranNyan$ email:string saran:text

rails

generate

scaffold

Post

nama:string

Perintah itu akan meng-Generate Models, Controllers, dan View untuk CRUD web kotak saran yang akan kita buat :D


17

Nah sebelum kita cek web nya, database perlu kita migrate dulu, atau kata lainnya harus di segarkan *bahasaIndonesiaNyaRefresh hahaha... ketik perintah berikut: ~:RubyDojo/KotakSaranNyan$ rake db:migrate Dengan perintah tersebut maka rails akan memodifikasi dan mengupdate tabel dalam database, update nya tersebut disertai dengan waktu lho dan kita bisa merevert atau mengembalikan database ke versi yang sebelumnya :D jadi kalau kita lupa dan melakukan kesalahan saat migrasi database ya tinggal di restore lagi ke yang sebelumnya hihihi... Sekarang buka folder proyek kita di editor dan lihat ke folder app>view, ada folder baru yang bernama post bukan? Nah itu telah kita buat barusan dengan perintah scaffold, tak hanya itu di dalam folder tersebut sudah dibuatkan simple CRUD nya loh, sudah tersedia Controller, Models dan View yang siap kita gunakan. Dan juga... tabel post di database sudah dibuatkan oleh perintah scaffolding ini >_< MANTAP GA TUH!!!... Ok sekarang lihat folder post Nah, lihat 5 file HTML di folder post sudah siap kita gunakan, fole index.html.erb merupakan file default ketika kita masuk ke post, di dalamnya terdapat fitur untuk melihat, edit, dan hapus saran. New.html.erb menghandle ketika kita mau memasukkan saran baru, dan show untuk menampilkan saran yang kita buat. Edit.html.erb tentu untuk mengedit atau memperbaharuai saran yang sudah kita buat dengan memuat kembali saran yang dibuat berdasarkan id saran, dan yang paling rails banget disini ialah adanya _form.html.erb. Tau gak apa itu? _form.html.erb itu merupakan template atau isi yang dipanggil oleh new.html.erb dan edit.html.erb.


18

Keduanya memiliki tampilan form yang sama, bedanya bila di new.html.erb bagian input text nama, email dan saran dikosongkan dan linkage nya diperuntukkan untuk submit saran baru ke database, sedangkan edit.html.erb menampilkan saran yang sudah kita buat ke dalam input text dari nama, email, dan saran tadi dan ketika di submit maka akan menjalan perintah update database. Keduanya memiliki tampilan form yang sama, bedanya bila di new.html.erb bagian input text nama, email dan saran dikosongkan dan linkage nya diperuntukkan untuk submit saran baru ke database, sedangkan edit.html.erb menampilkan saran yang sudah kita buat ke dalam input text dari nama, email, dan saran tadi dan ketika di submit maka akan menjalan perintah update database. Coba kita cek file new.html.erb, edit.html.erb dan form.html.erb...


19

Apa sih itu maksudnya? Jadi setiap kali kita masuk ke halaman edit atau new,

_form.html.erb

maka akan dipanggil oleh masing-masing halaman tersebut untuk menampilkan template form yang sama namun dengan spesifikasi perintah yang berbeda. Inilah kelebihan dari OOP dan cara ini lah yang paling kental dalam Ruby On

DRY (Don't Repeat Yourself)

Rails, artinya dalam membuat suatu aplikasi jangan pernah atau hindari melakukan ketik ulang kode yang sama, bila kode tersebut digunakan lebih baik dipisahkan dan bisa dipanggil oleh perintah tertentu dengan parameter yang berbeda sesuai kebutuhan. Ya seperti form ini :D...

Routing Default Page Apa sih maksudnya Routing, inget kan tadi ketika kita menjalankan web service untuk web KotakSaranNyan langsung masuk ke halaman “WELCOME ABOARD”. Tau kah kamu dimana letak fila itu berada?? Yaph coba cek folder public, disana terdapat index.html itu adalah halaman default dari Rails framework, dan ini adalah routing default nya. Sekarang kita akan mengubah routing tersebut, jadi ketika web service dijalankan dan kita masuk ke web local KotakSaranNyan, maka akan langsung masuk ke bagian new.erb.html. Jadi langsung memasukkan sran gitu, yuk sekarang buka file routes.rb di folder config lalu sesuaikan isinya seperti berikut ini :


20

Baris ini akan memandu rails ketika di akses maka akan langsung membuka halaman new.html.erb. Untuk melengkapi tujuan kita menggati routing dari web app rails KotakSaranNyan, kita harus menghapus file index.html di dalam folder public tadi, ini merupakan langkah yang diperlukan karena apabila index.html tidak di hapus maka rails akan tetap menganggap bahwa halaman index.html merupakan halaman utamana dia meskipun routing sudah kita buat. Selanjutnya yuk kita cek, jalankan web service nya di terminal dengan perintah: ~:RubyDojo/KotakSaranNyan$ rails server Dan lihat, sekarang kita bisa langsung isi saran dan data diri kita di website rails dengan scaffolding :D Horray, kita berhasil membuat halaman untuk mengimput saran dari user, dengan format nama email dan saran. Coba kamu tes dan isi datanya dengan benar lalu create post, kamu akan langsung melihat bahwa sran telah berhasil masuk, itu di redirect ke halaman, show.html.erb lhoo .... Ok misi routing selesai, nah sekarang ada masalah lagi nih, ketika kamu masukan data email tidak dengan format email, nama dengan angka ataupun semua data dikosongkan tapi tetap disimpan ke database, ga Keren banget kan?? Yuk kita atasi semua ini dengan bermain di Models, yaitu file yang bertanggungjawab sebagai satpam pemeriksa ketika ada masukan dari user sebelum di push ke database.


21

VALIDASI MASUKAN USER (models) Ok, sekarang kita akan melakukan validasi, validasi itu sat kita membuat web dengan cara konvensional tentu harus dilakukan disana sini bukan? Repot banget (-_”), nah kenyamanan dalam Framework Rails kamu ga usah gusar galau atau terhenyak ketika diminta “VALIDASI INPUTAN HARUS KETAT” , cukup edit satu file yaitu file models..... :D Karena yang kita buat yaitu Posts, maka sekarang

buka folder

models di app, dan edit file post.erb ... Lalu samakan isinya dengan gambar berikut.

Perintah di atas akan saya jelaskan dalma bentuk tabel yaa


Nama

Penjelasan

Validates

Perintah untuk validasi secara umum dan pendefinisian validasi dapat bertingkat dengan separtor tanda koma (,) setiap usai satu bentuk validasi

:nama | :email | :saran

Merupakan nama dari bagian yang akan divalidasi, diletakkan setelah tulisan validates.

22

:presence

Artinya tidak boleh kosong

:format

Menspesifikkan format yang harus ada ketika memasukan inputan. Di keterangan selanjutnya itu artinya : [semua karakter]+@+[semua karakter]+.+[karakter a-z baik kapital maupun keci]. Itulah cara mengenali apakah user memasukan format seusai dengan format email atau tidak seperti [email protected]

:uniqueness

Ini artinya bahwa ketika inputan email valid akan di cek ke database apakah terdapat email yang sama atau tidak, jadi email hanya dapat digunakan satu kali per saran yang dikirim.

:length

Ini memberikan syarat untuk jumlah dimasukkan, bisa minimum atau maksimum.

karakter

yang

Gimana tuh? Sederhana bukan? Ga usah repot-repot membuat javascript sendiri untuk hal validasi, semua sudah tersedia di Rails :D Coba kamu tes deh web nya, dan masukan alamat email yang salah atau saran yang cuma 2 karakter atau kosongkan jangan diisi, pasti muncul peringatan :D Lihat bener kan, rails langsung protes dengan kesan keras menggunakan warna merah :D Ini sebenarnya javascript, namun kita cukup menggunakannya. Hemh, tapi ada masalah baru nih, Kan kita tujuannya untuk membuat kotaksaran, kalau seperti ini setiap orang yang membuat saran bisa mengedit dan menghapus saran selain punya dia juga donk. Nah loh, gimana coba???


23

Login?? ADMIN??? ROLE ??? eitss tidak perlu sejauh itu untuk sekarang, kita hanya perlu merestrict hak akses ke halaman index.html.erb dari Posts nya saja dan menghapus semua link yang mengarah pada halaman index. Yuk Lanjut maang.... >O<

RESTRICTED PAGE (controllers) Apa yang terbayang oleh kamu waktu denger kata “RESTRICTED”??? Gembok, Rantai, Pintu besi, atau tak bisa membayangkan karena tidak tau artinya apa (-_-”)? hadeeh... Yaph, sekarang kamu akan membuat perizinan khusus untuk mengakses halaman index.html.erb dari Posts Saran. Gimana caranya??? Sebelumnya saat melakukan validasi inputan user kita mengedit bagian Models bukan yang bertanggung jawab terhadap database, nah sekarang untuk hal restricted, update, create, delete, view data dari database maka kita akan melakukan konfigurasi di bagian Controllers. Sekarang edit file posts_controller.rb di folder controllers dalam app. Kemudian kita tambahkan kode berikut di awal setelah baris class PostsController < ApplicationController . http_basic_authenticate_with :name => "nyankod", :password => "rahasia", :except => [:new, :show, :create, :edit, :update] Simpan, lalu sekarang kita perlu mengubah link_to di setiap halaman yang memang ditujukan untuk user tersebut, yakni file new.html.erb, show.html.erb, edit.html.erb.


24

Siap, mari edit ke 3 file tersebut, lalu hapus baris kode <%= link_to 'Back', posts_path %> baris kode di atas merupakan link menuju ke

halaman index.html.erb.

Lalu sekarang coba kamu refresh halaman web KotakSaranNyan, dan lihat apa yang terjadi.... :D Horee kita berhasil menghalangi, user untuk tidak dapat masuk ke bagian index.html.erb dari kumpulan saran... Eh tapi, terus gimana cara kita sebagai pemilik web untuk mengecek data saran yang masuk??? Gampang, kita cukup memasukkan URL manual yang merujuk ke halaman index.html.erb, caranya... Klik di address bar, kemudian setelah http://locahost:3000/ tambahkan baris posts/. Ketika di enter, ini akan merujuk ke halaman index.html.erb

TAPI..TUNGGU DULU!!! kenapa ada pop-up authentifikasi minta username dan password??? kapan kita buat user??


25

Inilah restricted page yang baru saja kamu konfigurasi di dalam file post_controller.rb. Trus password dan username nya apa?? Coba kamu cek lagi file post_controller.rb, lihat di bagian kode yang kita tambahkan pada awal kode file post_controller, disana ada nyankod sebagai username, dan rahasia sebagai passwordnya. :D Well itulah keamanan ringan dan dasar yagn kita terapkan di halaman index.html.erb. Wok: Oh gitu ya Om, tapi saya mau yang ada adminnya donk om. Wek: (-_-”) sabar napa, kalau langsung admin sekarang bisa muntah-muntah kamu. Belajar Hash lagi dulu sanah baru minta gituan...#janganNgeres. Wow, akhirnya semua tahapan inti dari KotakSaranNyan selesai :D YAAAYYY.... Hemh, tapi kurang indah ya tampilannya, yaudah yuk sekarang kita terapkan CSS ke halaman kotakSaran yang kamu buat tadi.

Make-Up pan Dulu (CSS) Buka source-Code edisi ini, kemudian buka folder attachment, lalu salin file nyankod.css, headUp.png, dan mulut-Bawah.png.

nyankod.css di folder app>assets>stylesheet headUp.png mulut-Bawah.png di folder app>assets>images. Simpan file


. Dan gambar

26

Sekarang kita edit file application.html.erb di folder view>layout. Kemudian sesuaikan kode nya dengan kode di bawah ini

Lalu sekarang edit file _form.html.erb yang di render oleh halaman edit.html.erb dan new.html.erb di folder view>post. Lalu sesuaikan kode seperti gambar di samping : Simpan kedua file tersebut, lalu jalankan webService dan lihat apa yang terjadi dengan tampilan KotakSaran kita :D Oh ya, file CSS ini dibuat oleh Nyankodist Toni Haryanto Loh, saya hanya penyumbang ide dan gambar hihihi... Di rails, tempat stylesheet dan gambar begitu terstruktur dan rapih... tak bingung lagi kalau mau pake tinggal simpen di folder nanti terload otomatis :D


27

Wohohoho, keren banget kan.. Oh iya maaf kalau kurang rapih, saya belum terlalu jago kalo pake CSS hihihi :P Ok tahap Make-Up an telah selesai. Tahap terakhir untuk sekarang adalah mempublikasikan website KotaksaranNyan yang sudah kita buat dengan Ruby On Rails ke Seluruh Pelosok Dunia.


28

GIT dan HEROKU Akhirnya selesai juga kotakSaranNyan yah, sekarang kamu akan belajar mengupload hasil web rails we web hosting yang gratis dan bisa di katakan musti dicoba untuk developer Rails. Akun git dan Heroku sudah kita buat sebelumnya yah, sekarang kamu konfigurasi dulu proyek KotakSaranNyan. Yosh, buka terminalnya kawan, matikan web service KotakSaranNyan dengan ctrl+c. Sekarang ketik perintah berikut di terminal ~:RubyDojo/KotakSaranNyan$ git init ~:RubyDojo/KotakSaranNyan$ git add . ~:RubyDojo/KotakSaranNyan$ git commit -m “Malam Pertama KotakSaran” Apa sih yang udah kamu lakukan dengan kode di atas? Di atas kita menginisialisasi proyek kita supaya dikenali oleh git sebagai objek yang akan di commit. Well, selanjutnya kita butuh gem heroku agar proyek rails kita dapat di hosting di heroku : ~:RubyDojo/KotakSaranNyan$ gem install heroku Lanjutkan ke proses berikutnya, di proses ini karena untuk pertama kalinya kamu pakai heroku maka akan dimintai username dan password akun kamu di heroku.com ~:RubyDojo/KotakSaranNyan$ heroku create KotakSaranNyan


29

Dengan memberikan nama spesifik di depan create, maka kamu akan menghosting website dengan nama awal KotakSaranNyan.heroku.com :D Sekarang saatnya push / kirim proyek KotakSaranNyan ke heroku ~:RubyDojo/KotakSaranNyan$ git push heroku master ~:RubyDojo/KotakSaranNyan$ heroku run rake db:migrate Tunggu sampai proses pengiriman selesai, baru update database di server heroku dengan perintah rake db:migrate tersebut. Lihat ketika proses selesai, kamu diberikan link Rails web app KotakSaranNyan. Salin dan buka link tersebut di browser... VOILAAAA.... Website pertama kita dengan Ruby On Rails telah terpublikasikan ke DUNIA!!! Yaayyy \(^o^)/


30

Alhamdulillah yah sessuatu banget ini mah aselina... Kita berhasil membuat website dengan framework rails menggunakan bahasa pemograman Ruby :D coba kamu inget-inget lagi, barusan berapa banyak kamu ngoding untuk buat website KotakSaranNyan? Sedikit banget bukan :D hahahaha, jangan terkesima dulu...ini baru permulaan lho, banyak kelebihan lain dari Ruby On Rails yang bisa membuat bulu ketek mu merinding Harlem Shake XD Nah untuk seterusnya kalau ingin belajar tentang rails, bisa Fork github saya, atau lihat di artikel nyan ya... Insya Allah saya akan rajin buat proyek secara periodik untuk kita pelajari bersama :D Akhir kata, salam Nyankod kepada seluruh Nyankoders di muka bumi ini.

Hirokakaoshi, nyankodist Ruby


31

__NyanInfo

Metro UI CSS


32

Hai Nyankoders :D, bagaimana kabarnya ???? sudah tak sabar menunggu info terbarukan heheheh.... Siapa ayo yang suka membuat website, pasti website butuh style yang ciamik kan ? Biasanya nih kita membuat secara manual kan style yang kita inginkan. Nah ada juga yang menggunakan style – style yang sudah ada seperti Twitter Bootstrap yang dipakai di NyanAssistant, di NyanProject kita tempo lalu.Ada juga nih style bagus yang dibuat oleh seorang developer asal Ukraina namanya Metro UI CSS. Style ini dibuat oleh Sergey Pimenov dari Kiev, Ukraina. Style ini ditujukan bagi web designer yang ingin membuat tampilan website menjadi terlihat seperti Windows 8 Style atau dulu dikenal dengan Metro UI Style.Metro UI CSS ini terdiri dari berbagai komponen – komponen style yang bisa digunakan sesuai kebutuhan web designer. Metro UI CSS berada di bawah dua tipe lisensi yaitu MIT License dan Commercial License. Metro UI CSS sendiri dibuat dengan menggunakan LESS. LESS adalah bahasa stylesheet dinamis yang dibuat oleh Alexis Sellier. LESS membuat pengembangan CSS pada website menjadi lebih cepat dan udah. Nah untuk menjamin kompatibilitas stylesheet ini pada browser disarankan menggunakan beberapa browser yang disarankan oleh Sergey Pimenov seperti berikut ini :


33

Lalu komponen dan fitur apa aja nih yang bisa digunain dari Metro UI CSS ? Berikut adalah komponen dan fitur yang bisa kita pakai untuk mengembangkan website kita dengan menggunakan Metro UI CSS :

Scaffolding   

Global styles Layout and templates Grid system

Base CSS      

Typography Tables Forms Buttons Images Icons

Components         


Tiles Menu and Navigation Sidebar Page control Accordion Buttons Set Rating Progress bars Carousel

34

   

List view Slider Notices and Replies Bonus – Deck of Cards

Banyak banget yah :D, akan menjadi cerita suntuk satu malam kalau ditulis disini semua ahahahh. Lalu dimanakah kita bisa mendapatkan Metro UI CSS ini ?. Jika Nyankoder ingin mengunjungi website reseminya Nyankoders bisa mengunjungi alamat berikut ini :

http://metroui.org.ua Dan untuk mendapatkan kode sumber beserta dokumentasinya, Nyankoder bisa klik link download yang ada disebelah pojok kanan bawah website tadi, yang akan mengarahkan Nyankoder ke http://github.com/olton/Metro-UI-CSS.

www.nyankod.com|| __NyanInfo nyankodMagz–15Metro UI CSS © by Ridwan Fadjar Septian 2012, nyankodMagz-15

35

[nyanTips] Tips Ngoding Cepet Pernah ga, kita bikin aplikasi, katakanlah satu atau dua fungsi, yang menurut kita bisa diselesaikan dalam waktu 2 jam saja, eh nyatanya habis waktu seharian dan bahkan ga cukup sehari? Hal ini sering dialami terutama oleh programmer yang menerapkan sistem seruduk-ngoding. hahaha.. Saya katakan demikian karena tidak sedikit dari kita yang jadi programmer, membuat aplikasi tanpa perencanaan yang matang. Setiap ide tacit yang masih di kepala, langsung saja dituangkan ke dalam kode, mulai dari interfacing sampai logical. Nyatanya hal tersebut bukannya mempercepat pekerjaan, justru memperlambat pekerjaan bahkan menghabiskan tenaga dan waktu lebih besar dari yang semestinya bisa diefisienkan. Kita tidak melarang atau mengecam model pengembangan seperti itu. Tapi, kalaupun kita tidak dapat menghindari hal tersebut (karena tidak semua perusahaan menerapkan tahapan pengembangan standar yang ideal atau kita sedang dalam keadaan tidak memungkinkan untuk meluangkan waktu membuat perencanaan), paling tidak ada beberapa tips yang boleh jadi masukan agar proses pengembangan berjalan lebih efektif dan efisien. Pertama, buatlah mockup di atas sebuah kertas atau menggunakan aplikasi mockup atau wireframing untuk menggambarkan layout user interface dari aplikasi yang akan kita buat. Jangan langsung menuangkan layout tersebut ke dalam kode karena percayalah, sulit untuk menentukan indikator ketercapaian dari layout yang diinginkan karena selama proses pembuatan kode layout, otak kita akan terus mengkritisi dan akhirnya waktu akan terbuang dengan revisi-revisi yang tidak perlu. Lain halnya bila kita membuat mockup terlebih dahulu. Semua ide layout yang diinginkan dituangkan ke dalam coretan-coretan, dan setelah fix dan cocok, barulah dituangkan ke dalam baris-baris kode. Ingat, taatlah pada mockup yang telah dibuat dan biarkan proses kritis dituangkan dalam mockup lain dan diimplementasikan di tahap selanjutnya.


36

Kedua, Pisahkan proses interfacing dengan logical. Jangan mengerjakan proses logical dengan interfacing, karena selain menguras tenaga, fokus kita juga akan selalu berubah dan pada akhirnya menghambat ketercapaian pengembangan aplikasi. Idealnya, bila bekerja dalam sebuah tim, bagian interfacing dan logical adalah dua orang yang berbeda. Kalopun harus diborong sendiri, buatlah interface terlebih dulu beserta data dummy-nya, agar dapat dijadikan panduan saat membuat program logisnya. Ketiga, sediakan selalu senjata utama dalam membuat program: user guide. Kalo kamu programmer PHP, maka siapkanlah manual PHP, begitu pula dengan bahasa lainnya. Jangan menunda pekerjaan hanya karena tidak tahu harus menggunakan fungsi apa. Carilah segera di user guide. Sepertinya tidak ada programmer yang hapal seluruh fungsi yang tersedia dalam suatu bahasa pemrograman, kecuali fungsi-fungsi yang biasa digunakan. Keempat, manfaatkan internet untuk mencari pemecahan suatu kasus. Banyak forum tanya jawab di internet yang bisa kita manfaatkan untuk mendukung pekerjaan kita. Bahkan kalo perlu, gabunglah dengan satu atau beberapa forum diskusi agar permasalahan yang belum bisa kita pecahkan bisa kita tanyakan kepada orang lain yang lebih tau atau yang sudah pernah melewati masalah tersebut. Tapi ingat, jangan hanya karena tidak ada koneksi internet, lantas kamu jadi tidak mengerjakan pekerjaan tersebut. Manfaatkan user guide dan dokumentasi aplikasi, dan terus ulik. Kelima, mungkin kamu harus melakukan beberapa kali jeda pendek ketika ngoding untuk istirahat dan melihat pemandangan ke luar ruangan. Seringkali permasalahan yang nampaknya rumit dan suliit dipecahkan, nyatanya bisa diselesaikan dengan mudah setelah beristirahat atau break sejenak. Karena boleh jadi permasalahan yang kita anggap sulit dipecahkan, atau error yang terus muncul tidak ditemukan solusinya hanya karena kita tidak aware oleh suatu kesalahan kecil, yang mungkin hanya disebabkan tanda petik atau titik koma yang tertinggal.


37

Terakhir, buatlah tahapan atau roadmap pengembangan dengan batasan yang jelas dan terukur. Hal ini akan sangat membantu kita dalam menentukan kapan aplikasi selesai dibuat, kapan proses debungging dimulai dan kapan aplikasi dapat digunakan tanpa ada masalah. Batasan yang tidak jelas akan membuat kita kehilangan kontrol terhadap aplikasi yang sedang dibuat dan berpeluang besar menimbulkan kejenuhan. Lain halnya bila kita tau batasan pengembangan, kita bisa lebih termotivasi untuk segera menyelesaikan dan punya ancang-ancang untuk pengembangan berikutnya. Kalau perlu buatlah nomor versi yang sesuai dengan tahapan yang telah dibuat. Kemahiran membuat aplikasi berbanding lurus dengan jam terbang latihan kita. Semakin sering kita ngoding, semakin banyak hal yang bisa diulik yang membantu otak kita menemukan pola-pola tertentu yang membuat kita semakin cepat dalam memecahkan suatu kasus. Sekali kamu dapet pola-pola dalam memprogram, akan semakin kamu membuat aplikasi, bahkan dengan bahasa pemrograman apapun. Yang penting, terus berlatih dan nikmati prosesnya. Salam koding. :) [Toni Haryanto]


38

/* nyanReview */ Kroco, Penyingkat URL Buatan Lokal


39

Hallo.. ketemu lagi di rubrik nyanreview. Rubrik yang ngebahas ploduk ploduk startup Indonesia yang keren bro!!! . Kali ini yang mau kita bahas adalah tools penyingkat url berbasis web bikinan lokal. Eh.. tunggu dulu tunggu dulu.. . Btw pada tau penyingkat url gak nih, ato bahasa sundanya suka disebut Url Shortener ??? taooo!!! itu kan yang buat nyuci hahaha bukan bro, itu mah softener #maksa. Nih tools berguna banget buat nyingkat link-link kita yang panjang-panjang, biar kagak ngabisin tempat. Apalagi buat penggokil twitter, yang sering ngetweet. Di twitter kan dibatasin tuh karakternye. Yah harus pinter ngatur tempat kalo ngetweet alias ngirit. Kita tengok yo penampakannya ..


40

Mantab kan?? Tampilannya simple bro. Tinggal masukin url panjang ente langsung klik kroco!! Jadi deh url baru yang lebih pendek. Yang lebih asik lagi, kita gak cuma bisa dapetin url pendek disitu. Ada fitur twitter client bro!!


41

Fasilitas ini bisa kita pake buat ngetweet pake cara baru. Form buat ngetweet dibikin lebih lengkap, ada fitur auto translation, nyomot macem-macem smiley,dan masih banyak lagi. Mantab dah pokonya!!. Oya, kalo diliat-liat namanya lucu juga ya. Menurut info, nama kroco artinya siput kecil. Tuh, liat aja di logonya ada gambar seafood.. eh siput maksudnya. Hehe. Siapa kah orang keren dibalik app ini, tengok yo!! :      

Deddy Andaka Deni Surya MB Ardianto Ketut Widarta Nyoman Suka Ada Agus Sumberdana

Oia, yang mau tanya-tanya perihal kro.co bisa langsung mention pelopornya, @deddyandaka, @denisurya, or langsung di official twitternya @krocoID. Sekian nyanreview kali ini. Maju terus IT Indonesia.. !! Kita tunggu giliran nyankoders buat berkarya !! (kalo udah ada jangan lupa kasih tau kita ya!! )

[Ahmad Oriza Sahputra]


42

[aduy]

Mengungkapkan Cinta Ala Programer Semua orang tentu pernah ngalamin yg namanya jatuh cinta, ya termasuk programer. Kecuali mungkin hanya bagi mereka yg nggak punya hati atau hatinya udah nggak berfungsi gara2 kelamaan di depan komputer. Kali ini Nyan mau cerita tentang gimana sih cara mengungkapkan cinta ala seorang programer.


43

Bikin web Ungkapan cinta yang nggak perlu repot mesti capek-capek keluar rumah dan cukup di depan laptop adalah bikin web. Tinggal bikin web yang isinya ungkapan cinta, terus minta si cewek buat buka. Hehehe... mantap. Apalagi kalo web-nya udah pake HTML5, terus ada game gamenya juga. Pasti si cewek bakalan klepek-klepek tuh.


44

Bikin aplikasi mobile Zaman udah canggih jou. Semakin kecil dan semakin ringan teknologi, maka semakin keren. Coba deh ungkapin cinta dengan bikin aplikasi mobile, android, iphone, blackberry, windows mobile, semuanya boleh. Pasti lebih terlihat elegan. Cuma pastiin si target bukan pake hape tahun jebot. Pasti repot.


45

Bikin game Orang bilang (nggak tau siapa), ungkapan cinta itu harus romantis, menarik dan menyenangkan. So... game adalah solusinya. Coba bikin game yang menarik, kemudian sisipin ungkapan cinta kamu di situ. Inget bro, semua orang di dunia ini suka game (walaupun beda2 jenisnya). Target pasti akan bertekuk lutut kalo udah kayak gini. Tapi game-nya juga jangan susah2. Ntar malah dia bete duluan.


46

Bikin virus Dan yang paling gila adalah yang terakhir ini. Nyatain cinta lewat virus. Bikin virus, yang pada saat2 tertentu keluar pesan yg isinya ungkapan cinta. Pasti ampuh deh. Karena pada dasarnya cewek itu suka dengan sesuatu yg surprise. Tapi inget, jangan bikin virus yg terlalu agresif sampe-sampe keluar pesan tiap 5 menit sekali. Bisa-bisa dia bakal nyari cara buat ngebersihin virus itu dari komputernya, sebagaimana dia berusaha buat ngebersihin kamu dari peluang hatinya. #jleb


47


48

Di nyankodMagz edisi selanjutnya kita punya ini:

10 Menit Bikin Theme PyroCMS Pengen tau lebih lanjut?? Mangkanya, pantengin terus nyankod.com. Teman coding kamu yang nggak bikin stress.. Catet nih tanggal terbit selanjutnya:

13 Maret 2013


49

Sapa Nyankod. nyankodmagz 15 2

Recommend Documents