Posts

Showing posts from October, 2013

Geocode di Rails

Image
Pada sesi sebelumnya kita telah mempelajari bagaimana cara instalasi Google Maps v3 pada aplikasi Rails  yang kita buat dan juga field autocomplete dengan menggunakan jQuery Flexbox .  Sesi kali ini akan membahas kasus lain dari google maps dan pointing lokasi berdasarkan input nama daerah atau lebih dikenal dengan nama geocode . Sebagai contoh di sini provinsi dan nama kota berasal dari Indonesia.  Misalkan kita input Jawa Barat sebagai provinsi dan Bandung sebagai nama kotanya, maka google maps akan pointing ke kota Bandung provinsi Jawa Barat. Pertama kita buat model user yang berisi nama serta informasi lokasinya rails g model user name:string city_name:string state_name:string country_name:string Untuk memuat data lokasi sebagai opsi, buat juga model city dan statenya rails g model city name:string state_id:integer rails g model state name:string dan rake db:migrate Setelah itu buat relasi antara city dan state  app/models/city.rb class City > ActiveRec...

Field Autocomplete Menggunakan jQuery Flexbox di Ruby on Rails

Image
Field autocomplete memudahkan kita dalam memilih opsi dari data sangat banyak. Dengan field autocomplete kita tidak perlu direpotkan untuk scroll field dropdown apabila data yang ditampilkan sangat banyak. Dan data yang ditampilkan hanyalah data yang kriterianya sesuai dengan kata kunci (keyword).  Pada sesi kali ini akan dibahas mengenai instalasi jQuery Flexbox yang digunakan untuk field autocomplete dan integrasi dengan Rails.  Sebagai contoh adalah field autocomplete untuk mencari nama User.  Persiapan Pertama download terlebih dahulu versi terbaru dari jQuery Flexbox  di sini . Setelah itu extract isi folder zip dan copy file jquery.flexbox.min.js   ke dalam folder aplikasi rails app/assets/javascripts/ dan file jquery.flexbox.css  ke dalam folder app/assets/stylesheets/ . Jangan lupa untuk tag masing-masing assets javascript dan stylesheet tersebut di layout, misalkan layout yang dipakai adalah app/views/layouts/application.html.erb : <!DOCTYPE ht...

Instalasi Google Maps v3 pada Rails

Image
Google Maps API memudahkan kita dalam memuat google maps pada aplikasi web yang kita buat. Berikut ini adalah langkah-langkah instalasi google maps pada Ruby on Rails. Get Google API Key Langkah berikut ini menjelaskan bagaimana mendapatkan google maps API key yang akan kita gunakan pada aplikasi kita. Pertama, pastikan kita memiliki akun google. 1. Masuk ke halaman console API google  dan login dengan menggunakan account google atau gmail.  2. Klik link Services pada menu di sebelah kanan.  3. Aktivasi servis Google Maps API v3 dengan klik tombol switch pada bagian kanan, lalu ikuti langkah selanjutnya dengan klik checkbox agree 4. Klik link API Access , dan API key untuk google maps telah tersedia di halaman ini.  Instalasi dengan Ruby on Rails Misalkan pada aplikasi yang kita buat akan menampilkan profile user dan menampilkan lokasi di map berdasarkan alamat usernya.  Pertama buat model user yang berisi nama:string, city:string dan state:string rails g ...

Membuat Pretty URL Menggunakan FriendlyId

FriendlyId merupakan gem untuk membuat url menjadi lebih bersahabat. Misal pada aplikasi kita terdapat model user, ketika kita ingin melihat detail dari user tertentu biasanya url menunjukan /users/id_user. Akan lebih bermakna jika url tersebut menjadi /users/nama_user, nah agar FriendlyId merupakan gem yang bisa membantu kita menjadikan url tidak menggunakan id tapi slug. Pada kesempatan ini akan dijelaskan mengenai cara menggunakan FriendlyId pada aplikasi ruby on rails, berikut langkah-langkahnya:  - Tambahkan pada Gemfile gem "friendly_id" - Kemudian pada console jalankan    gem "friendly_id" - Buat User menggunakan scaffold rails generate scaffold user name:string slug:string - Edit file migration untuk create user, lalu pada file migration tersebut tambahkan script berikut add_index :users, :slug, unique: true - Kemudian pada console jalankan  rake db:migrate - Edit model user sehingga menjadi seperti berikut class User < ActiveRecord::Base   exten...