Jumat, 21 September 2018

Membuat Datepicker Bootstrap dan Jquery

Membuat Datepicker

Datepicker adalah alat input yang digunakan untuk tanggal dengan bentuk box
dengan desain dalam bentuk kalender.

Membuat Datepicker ada beberapa cara :
1.    Datepicker menggunakan Jquery
2.    Datepicker Bootstrap

Cara Membuat Datepicker Menggunakan Jquery

1.     Masukkan code dibawah ini didalam <head> sintak HTML.
             Code dibawah berfungsi untuk tampilan.

2.   Masukkan code dibawah ini didalam <head> sintak HTML.
       Code dibawah berfungsi untuk perintah.
       

       Untuk poin 1 dan 2 hanya memanggil secara otomatis.
       Apabila koneksi internet tidak ada, Code tersebut tidak akan berfungsi.

3.    Masukkan code dibawah ini didalam <head> sintak HTML.
        
4.    Copy code dibawah ini didalam <body> sintak HTML.
       <p>Date: <input type="text" id="datepicker"></p>

       Pada poin 3 didalam script sudah dibuat ID dengan nama "datepicker", 
        maka pada tampilan di poin 4, ID tersebut kita panggil.

5.     Tampilannya akan terlihat seperti berikut.
         

Cara Membuat Datepicker Bootstrap

1.     Masukkan code berikut pada gemfile.
gem 'bootstrap-datepicker-rails'

2.   Lalu install gem tersebut pada dengan memasukkan code dibawah pada terminal. 
   bundle install

3.     Masukkan code dibawah pada file app/assets/stylesheets/application.css 
  *= require bootstrap-datepicker
# kalau memakai bootstrap v3 pakai yang ini :
*= require bootstrap-datepicker3

4.     Masukkan code dibawah pada file app/assets/javascripts/application.js
   //= require bootstrap-datepicker 

5.     Masukkan code dibawah pada folder view didalam file yang akan memakai 
      datepicker.
     
6.     Tampilannya akan terlihat seperti berikut. 
       




Jumat, 07 September 2018

Seri Belajar Ruby on Rails Bagian 11 - Membuat Aplikasi Manajemen Tugas (Homework Management)

Hai, semangattt! ini bagian terakhir dari Seri Belajar Ruby on Rails loh, kali ini kita akan belajar membuat aplikasinya langsung. Aplikasi nya yang simple-simple aja ya kalian pasti bisa kok, apalagi kalo kalian udah baca bagian yang lain. So kita yang langsung aja ya.

Kali ini kita akan membuat aplikasi yang namanya Homework Management yaitu aplikasi yang bisa kalian gunakan untuk mengatur jadwal perkerjaan rumah guys. Berikut step-step cara pengerjaan nya :


Buat Project Baru


Buka terminal, dan jalankan code berikut:
$ rails new homework_management
$ bundle install
$ rake db:create
Setting devise untuk authentikasi (jika diperlukan)
Note: untuk setting device kalian bisa belajar disini [Link]
Contoh tampilan untuk devise


Membuat Table, Models, Views, dan Controllers

Contoh struktur table

Kita akan menggunakan 2 (dua) tabel untuk membuat aplikasi ini yaitu tabel Category dan Homework, kita akan menggunakan metode scaffold untuk mengenerate table, models, views serta controllers-nya. Berikut cara membuat schema nya :

$ rails g scaffold Category name:string
$ rails g scaffold Homework homework_name:text category:string deadline:date description:text category_id:integer
Setelah berhasil di generate jalankan migration :
$ rake db:migrate


Relasi dan Validasi

Di section ini kita akan membuat relasi dan validasi untuk tabel, relasi dan validasi ini biasa nya di simpan pada models, berikut contoh nya :





Custom Views


Karena kita telah membuat relasi otomatis kita perlu merubah tampilan CRUD yang telah tergenerate oleh scaffold tadi agar lebih optimal, seperti merubah field text menjadi select agar ada suggestion ketika membuat record yang telah terelasi.

Ubah pada bagian app/views/homeworks/_form.html.erb menjadi :


Setelah semua step sudah dikerjaan, buka terminal dan nyalakan rails server
$ rails s

Buka pada browser localhost:3000/categories untuk mengakses CRUD tabel Category dan  localhost:3000/homeworks untuk mengakses CRUD tabel Homework

Contoh tampilan Homeworks (localhost:3000/homeworks)
Contoh tampilan Categories (localhost:3000/categories)



Nah akhirnya selesai juga seri belajar kali ini, semoga bermanfaat bagi kamu yang telah mengikuti pelajaran ini dari bagian awal, sampai jumpa di seri-seri belajar yang akan datang, coming soon yaaa last but not least. Keep Shining Like Ruby :)

Download contoh aplikasi disini [Download]

Kamis, 06 September 2018

Seri Belajar Ruby on Rails Bagian 10 - Menambahkan Css dan Javascript


Hai lanjut lagi, setelah sebelumnya belajar tentang mengimplementasikan authentikasi menggunakan Devise, kali ini kita akan belajar tentang penggunaan assets untuk css dan javascript di Ruby on Rails.

Assets


Di dalam Ruby on Rails ada yang dinamakan 'Asset Pipeline', ini berguna untuk menggabungkan/mengkompres assets seperti Javascript & CSS maupun File Gambar (.jpg, .png dll). Di dalam assets ini juga kita bisa mengkombinasikan dengan fitur yang ada pada gem dengan cara memanggilnya di dalam file css atau js.

  • Stylesheets untuk folder penyimpanan file css.
  • Javascripts untuk folder penyimpanan file js.
  • Images untuk folder penyimpanan file gambar (.jpg, .png dll)

Contoh folder assets
Di dalam folder stylesheets biasanya ada file application.css yang digunakan untuk menginput/memanggil file css


Cara memanggil css dengan menambahkan *= require nama_file_css 

*= require_self digunakan bila file application.css akan digunakan untuk menuliskan code css juga.
*= require_tree . untuk memanggil semua file css yang ada di folder assets/stylesheets

    Note: adapun stub yaitu kebalikan dari require untuk excluding/membuang css ketika kita menggunakan require_tree dan suatu css tidak diperlukan, maka gunakan metode stub (Contoh: *= stub nama_file_css)

    Tidak jauh beda dengan css, penambahkan javascript biasanya diletakan di folder assets/javascripts dengan file induknya application.js

    Sama seperti css hanya saja penulisan code setelah require diganti dengan //=




    Layouts & View

    Nah setelah kita setup dibagian assets, untuk memanggil nya di view kita hanya menambahkan code berikut
    • Untuk css

      <%= stylesheet_link_tag    'application', media: 'all' %>
      


    • Untuk javascript

      <%= javascript_include_tag    'application', media: 'all' %>

    Sekian untuk pembelajaran kali ini mengenai penambahan Css dan Javascript di Ruby on Rails. Diharapkan tutorial ini menjadi salah satu pembelajaran yang mudah dimengerti bagi kita semua. Stay tune.


    Dicky Trifadillah | C-aio Indonesia