Jumat, 28 September 2018

CKeditor Pada Aplikasi Ruby on Rails Lanjutan - Plugins Youtube

Sebelum menambahkan plugins youtube pada ckeditor, kalian bisa mengikuti tutorial pada halaman http://www.belajarrubyonrails.com/2014/02/installasi-ckeditor-pada-aplikasi-ruby.html terlebih dahulu untuk menginstal ckeditor.


Langkah - langkah untuk menambahkan plugins youtube adalah sebagai berikut :

1. Tambahkan require di bawah ini pada file app/assets/javascripts/application.js
//= require ckeditor/init

2. Buatlah file dan tambahkan config dibawah ini pada :
app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = Function (config) {
  config.extraPlugins = ‘youtube’;
}

3. Buatlah file dan tambahkan icon dibawah ini pada :
app/assets/javascripts/ckeditor/plugins/youtube/images/icon.png



4. Buatlah file dan tambahkan lang dibawah ini untuk bahasa :
Untuk bahasa inggris tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/en.js

Code :

CKEDITOR.plugins.setLang('youtube', 'en', {
  button : 'Embed Youtube Video',
  title : 'Embed Youtube Video',
  txtEmbed : 'Paste Embed Code Here',
  txtUrl : 'Paste Youtube Video URL',
  txtWidth : 'Width',
  txtHeight : 'Height',
  chkRelated : 'Show suggested videos at the video\'s end',
  txtStartAt : 'Start at (ss or mm:ss or hh:mm:ss)',
  chkPrivacy : 'Enable privacy-enhanced mode',
  chkOlderCode : 'Use old embed code',
  noCode : 'You must input an embed code or URL',
  invalidEmbed : 'The embed code you\'ve entered doesn\'t appear to be valid',
  invalidUrl : 'The URL you\'ve entered doesn\'t appear to be valid',
  or : 'or',
  noWidth : 'You must inform the width',
  invalidWidth : 'Inform a valid width',
  noHeight : 'You must inform the height',
  invalidTime : 'Inform a valid start time'
});

Untuk bahasa jepang tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/ja.js

Code :

CKEDITOR.plugins.setLang('youtube', 'ja', {
  button : 'Youtube動画埋め込み',
  title : 'Youtube動画埋め込み',
  txtEmbed : '埋め込みコードを貼り付けてください',
  txtUrl : 'URLを貼り付けてください',
  txtWidth : '幅',
  txtHeight : '高さ',
  chkRelated : '動画が終わったら関連動画を表示する',
  txtStartAt : 'Start at',
  chkPrivacy : 'プライバシー強化モードを有効にする',
  chkOlderCode : '以前の埋め込みコードを使用する',
  noCode : '埋め込みコードまたはURLを入力してください',
  invalidEmbed : '不適切な埋め込みコードが入力されました',
  invalidUrl : '不適切なURLが入力されました',
  or : 'または',
  noWidth : '幅を指定してください',
  invalidWidth : '幅指定に誤りがあります',
  noHeight : '高さを指定してください',
  invalidHeight : '高さ指定に誤りがあります',
  invalidTime : 'Inform a valid start time'
});

Untuk bahasa portugis tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/pt.js

Code :

CKEDITOR.plugins.setLang('youtube', 'pt', {
  button : 'Inserir Vídeo do Youtube',
  title : 'Inserir Vídeo do Youtube',
  txtEmbed : 'Cole aqui o código embed de um vídeo do Youtube',
  txtUrl : 'Cole aqui uma URL de um vídeo do Youtube',
  txtWidth : 'Largura',
  txtHeight : 'Altura',
  chkRelated : 'Mostrar vídeos sugeridos ao final do vídeo',
  txtStartAt : 'Iniciar em (ss ou mm:ss ou hh:mm:ss)',
  chkPrivacy : 'Ativar o modo de privacidade aprimorada',
  chkOlderCode : 'Usar código de incorporação antigo',
  noCode : 'Você precisa informar um código embed ou uma URL',
  invalidEmbed : 'O código informado não parece ser válido',
  invalidUrl : 'A URL informada não parece ser válida',
  or : 'ou',
  noWidth : 'Você deve informar a largura do vídeo',
  invalidWidth : 'Informe uma largura válida',
  noHeight : 'Você deve informar a altura do vídeo',
  invalidHeight : 'Informe uma altura válida',
  invalidTime : 'O tempo informado é inválido'
});

5. Buatlah file dan tambahkan plugins dibawah ini pada : 
app/assets/javascripts/ckeditor/plugins/youtube/plugins.js 


6. Tambahkan ckeditor pada file assets config/initializers/assets.rb
Rails.application.config.assets.precompile +=%w(ckeditor/* )

7. Tampilan pada ckeditor 

8. Pada saat icon 'youtube' di click akan tampil seperti dibawah ini. 

Untuk menampilkan video pada website kita, diperlukan URL video youtube dan paste pada column 'Paste Youtube Video URL'.
Cari tahu lebih banyak tentang tutorial Ruby on Rails di Belajar Ruby on Rails

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