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

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.


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.