Jumat, 11 September 2015

Mengintegrasikan TinyMCE4 Dengan RESPONSIVE Filemanager

Dulu kita sudah belajar menyimpan data dari TinyMce ke dalam database MySQL. Untuk yang belum tahu, silahkan lihat di sini. Sekarang, bagaimana kita meng-upload file ke dalam tinymce? Di sini kita akan menggunakan RESPONSIFE filemanager sebagai plugin tinymce, agar kita bisa meng-upload file dan terintegrasikan dengan baik.

Pertama, kita download dulu responsive filemanager di http://responsivefilemanager.com/.

Setelah itu, kita buat sebuah folder dengan nama 'testing' pada htdocs atau folder yang bisa diakses oleh localhost.

Kemudian, kita ekstak tinymce kita dan pindahkan folder tinymce yang berada di dalam folder js ke dalam folder 'testing' yang telah kita buat di htdocs. Kalau belum punya tinymce, silahkan ikuti tutorial berikut terlebih dahulu untuk memasang tinymce.

Lalu ekstrak responsive_filemanager.zip yang telah kita download. Nanti akan ada 4 buah folder, yaitu 'tinymce', 'souce', 'thumbs' dan 'filemanager'. Pindahkan semua folder kecuali folder tinymce ke dalan folder 'testing'.

Kembali ke folder ekstrakan responsive_filemanager. Buka folder tinymce, buka folder plugin yang ada di dalamnya. Pindahkan folder 'responsivefilemanager' ke dalam folder 'plugin' dalam tinymce yang tadi kita pindah ke folder 'testing'.

Lalu buat sebuah file dengan nama 'index.php' dan isi:

<!doctype html>
<html>
<head>
 <title>TinyMCE ResponsiveFileManager</title>
 <script type="text/javascript" src="tinymce/tinymce.min.js"></script>
</head>
<body>

<form action="" method="post">
 <textarea></textarea>
</form>

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});
</script>
</body>
</html>

Sehingga nanti akan terlihat seperti berikut.

Untuk mengintegrasikan responsivefilemanager, masukkan script tambahan sehingga seluruh scriptnya akan menjadi seperti ini :

<!doctype html>
<html>
<head>
 <title>TinyMCE ResponsiveFileManager</title>
 <script type="text/javascript" src="tinymce/tinymce.min.js"></script>
</head>
<body>

<form action="" method="post">
 <textarea></textarea>
</form>

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste responsivefilemanager"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager",
    image_advtab: true,
 external_filemanager_path:"filemanager/",
    filemanager_title:"Responsive Filemanager",
    //external_plugins: {"filemanager" : "filemanager/plugin.min.js"}
});
</script>
</body>
</html>

Yang ada kuning-kuningnya itu adalah script tambahannya.

Terakhir, buka folder filemanager, buka config, dan kita setting config.php.

Hal pertama yang kita setting adalah base_url. Buat seperti ini:

'base_url' => ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] && ! in_array(strtolower($_SERVER['HTTPS']), array( 'off', 'no' ))) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST']. '/testing',

Kemudian setting juga :

'upload_dir' => '/source/',

'current_path' => '../source/',

'thumbs_base_path' => '../thumbs/',

Lalu coba buka lagi, http://localhost/testing/index.php

Untuk lebih jelasnya, silahkan download source code-nya di sini.

Kamis, 10 September 2015

Mendownload Video Dari Youtube Menggunakan Terminal

Ada banyak cara yang banyak cara yang bisa kita gunakan untuk mendownload video yang ada di YouTube. Mulai dari memasang plugin pada browser, sampai softwarea downloader. Tapi, bagaimana jika menggunakan terminal?

Untuk mendownload video youtube menggunakan terminal, kita perlu memasang youtube-dl terlebih dahulu pada laptop kita. Untuk memasangnya, cukup ketikkan perintah:

sudo apt-get install youtube_dl

Setelah kita memasang Youtube DL, lalu bagaimana kita mendownload videonya?

Mudah saja. Untuk mendownload video youtube, cukup masukkan perintah pada terminal :

youtube-dl URL

atau

youtube-dl https://www.youtube.com/watch?v=9yKFZxVxzi8

Youtube DL memiliki banyak fitur yang bisa digunakan ketika mendownload video. Beberapa diantaranya adalah:

1. -c

Dengan perintah seperti di atas, ketika koneksi terputus maka kita harus mendownload ulang dengan cara menjalankan ulang perintah tersebut. Untuk mengatasi hal tersebut, kita dapat menambahkan opsi "-c" ketika menjalankan perintah youtube-dl seperti berikut:

youtube-dl -c https://www.youtube.com/watch?v=9yKFZxVxzi8

dengan begitu, meski koneksi terputus kita tidak perlu mendownload ulang dari awal video yang kita unduh.

2. -r

Kalau kita ingin membatasi penggunaan bandwidth ketika mendownload, kita bisa menambahkan opsi "-r".

youtube-dl -c -r 50k https://www.youtube.com/watch?v=9yKFZxVxzi8

dengan perintah di atas, kita membatasi penggunaan bandwidth maksimal 50kB/s.

3. -a

Bagaimana jika kita ingin mendownload file berurutan? Cukup catat link-link yang akan kita download ke dalam sebuah file, katakan saja list_youtube.txt, maka kita hanya perlu manambahkan "-a" sehingga terlihat seperti ini:

youtube-dl -c -a list_youtube.txt

4. -q

Jika kita ingin mendownload secara background (sehingga proses download tidak terlihat pada terminal), kita cukup manambahkan opsi "-q".

youtube-dl -cq https://www.youtube.com/watch?v=9yKFZxVxzi8

Lalu bagaimana kita melihat proses download secara background tersebut? Um... Saya lupa. Tapi, ketika menggunakan opsi "-q" saya sarankan gunakan juga opsi "--console-title" sehingga proses download akan terlihat di title (judul) pada terminal.

youtube-dl -c -q --console-title https://www.youtube.com/watch?v=9yKFZxVxzi8
5. -s

Bagaimana jika kita tidak ingin mendownload apapun? Kita hanya ingin menguji apakah perintah yang kita gunakan pada youtube-dl sudah betul atau salah. Untuk itu, kita bisa menambahkan opsi "-s". Dengan opsi ini, kita tidak akan mendownload apapun ke hardisk kita.

youtube-dl -c -s https://www.youtube.com/watch?v=9yKFZxVxzi8

6. Beberapa opsi bisa digabungkan

Bagaimana jika kita menggabungkan opsi "-c" "-r" "-q" "-a" dan "-s"?

youtube-dl -cqsr 50k --console-title https://www.youtube.com/watch?v=9yKFZxVxzi8
youtube-dl -csa list_youtube.txt
youtube-dl -csqr 50k --console-title -a list_youtube.txt


Bagaimana? Menarik bukan? Silahkan dicoba dan jangan sungkan bertanya jika ada yang tidak dipahami.

Rabu, 09 September 2015

Mengistall Widget/Extension Yii2


Kali ini kita akan memasang Widget atau Extension pada projek yii2 kita. Soalnya, kalau hanya mengandalkan yii2 tanpa widget atau extension itu 'rasanya ada yang kurang gitu...'. Tapi tetap saja, harus sesuai dengan keperluan projek kita. Baiklah, kita mulai saja.

Buka terminal dan buka folder projek kita.

cd /opt/lampp/htdocs/advanced

Lalu install Composer dengan mengetikkan perintah:

curl -sS https://getcomposer.org/installer | php

Composer kita perlukan untuk memasang widget atau extension yii2. Jangan lupa pastikan komputer atau laptop kita tersambung dengan internet.

Jika Curl belum terpasang, silahkan install Curl dengan mengetikkan perintah:

sudo apt-get install curl

Jika composer terpasang, pada folder advanced (projek kita) akan mucul file dengan nama "composer.phar". Kemudian kita lanjutkan dengan menginstall extension yang kita butuhkan. Misalnya, kita akan memasang extension "date time picker". Maka kita buka dulu situs resmi yii.

Lalu tekan tulisan extension yang ada di atas (tulisannya kecil). Akan muncul halaman yang menampilkan berbagai extension.


Karena kita akan mencari extension "date time picker", jadi kita masukkan kata kunci "date time picker yii2" dan tekan find.


Setelah halaman hasil pencarian sudah terlihat, pilih dan klik salah satu extension yang menurut kita cocok.


Nanti akan muncul halaman extension tersebut. Dan di sana sudah tertulis dengan jelas perintah apa yang digunakan untuk menginstall extension tersebut.



Pada halaman yang saya pilih, cara memasang extension date time picker adalah dengan memasukkan perintah berikut pada terminal:

php composer.phar require "2amigos/ yii2-date-time-picker-widget" "*"

Setelah itu tekan enter dan tunggu sampai proses instalasi extension ke projek kita selesai.

Bagaimana cara penggunaan widget yang telah kita pasang itu? Silahkan lihat halaman widget / extension tersebut pada situs yii.

Misalnya, pada extension yang baru saja kita pasang, cara penggunaannya adalah sebagai berikut :




Untuk lebih jelasnya mengenai cara penggunaan dan pengaturan widget atau extension tersebut, silahkan buka situs resmi widget tersebut dan baca dokumentasinya. Saya yakin kita semua bisa jika mau membaca dan berusaha.



Silahkan ber-experiment-ria dan semoga berguna.

Selasa, 08 September 2015

Cara Menginstall YII2 Advanced Template via Archive File

Beberapa waktu yang lalu kita sudah belajar caranya memasang Yii, khususnya Yii Basic Template. Nah, sekarang kita akan belajar caranya memasang Yii yang Advance Template. Cara pemasangan Yii Basic Template dengan Yii Advance Template agak beda. Kalau Yii Basic Template kita hanya perlu download Archive File-nya, ekstrak, pindah ke folder yang bisa diakses oleh localhost (htdocs atau www) dan tinggal isi cookieValidationKey. Jadi deh! Yii Advance Template agak beda nih.

Pertama, kita download dulu Yii Advance Template dari http://www.yiiframework.com/download/



Kemudian kita ekstak dan pindah hasil ekstakan tersebut (folder advanced) ke htdocs atau www (tergantung yang ada yang mana).

Setelah itu buka terminal (linux) atau cmd (windows) dan buka direktori htdocs atau www (tergantung yang kita gunakan).

linux: cd /opt/lampp/htdocs/advanced

windows: cd c:\xampp\htdocs\advanced

Lalu masukkan perintah

php init

Pastikan lampp kita sudah berjalan. Kalau lampp belum berjalan, akan terjadi error. Tapi jika server lokal (xampp, lampp, atau wampp) sudah berjalan dan masih terjadi error, berarti ada masalah.

Untuk Linux, bisa diatasi dengan memasang/menginstall php5-cli :

sudo apt-get install php5-cli

Selain dengan memasang php5-cli, cara lain yang bisa kita lakukan adalah dengan menggunakan php yang sudah ada :

linux: sudo /opt/lampp/bin/php /opt/lampp/htdocs/advanced/init

windows: c:\xampp\bin\php c:\xampp\htdocs\advanced\init

Kalau masih error, coba buka folder bin yang ada pada xampp atau lampp dan cari file dengan nama php atau php-5.*.*. Contoh, di laptop saya (linux) pada folder bin tidak ada file dengan nama php, tapi yang ada adalah php-5.6.11. Maka perintah di atas kita sesuaikan menjadi :

linux: sudo /opt/lampp/bin/php-5.6.11 /opt/lampp/htdocs/advanced/init

windows: c:\xampp\bin\php-5.6.11 c:\xampp\htdocs\advanced\init

Note : Cara di atas merupakan hipotesis saya. Ada kemungkinan berhasil dan gagal. Tapi, silahkan dicoba.

Mari kita lanjutkan pemasangan Yii Advance-nya.

Setelah kita memasukkan perintah php init, akan muncul pilihan Development atau Production. Kita akan memakai yang Development saja, jadi ketikkan 0 dan enter. Lalu ketikkan yes pada terminal/cmd dan enter lagi.

Buka http://localhost/advanced/frontend/web/index.php untuk melihat frontend-nya. Jika belum kelihatan, berarti error. Buka juga http://localhost/advanced/backend/web/index.php untuk melihat backend-nya, tapi harus login dulu. Username sama passwordnya apa?

Agar kita bisa masuk, kita harus mendaftar. Tapi sebelum mendaftar, kita harus buat database terlebih dahulu. Mari kita buat database dengan nama yii2advanced dan collation utf8_general_ci pada phpMyAdmin. Biarkan databasenya kosong.

Buka main_local.php pada folder config di dalam folder common pada projek kita. Lalu sesuaikan nama database, username, password dan yang lainnya.

Kembali ke terminal, ketikkan perintah :

php yii migrate

Jika error seperti ini:



Berarti ada masalah. Berdasarkan hasil surfing di google, ada beberapa solusi.

Pertama, ganti 'dsn' => 'mysql:host=localhost; yang ada di main_local.php menjadi 'dsn' => 'mysql:host=127.0.0.1;

Jika masih gagal, coba install php5-mysql.

sudo apt-get install php5-mysql

Kalau males install php5-mysql bisa mencoba perintah :

linux: sudo /opt/lampp/bin/php /opt/lampp/htdocs/advanced/yii migrate

windows: c:\xampp\bin\php c:\xampp\htdocs\advanced\yii migrate

atau

linux: sudo /opt/lampp/bin/php-5.6.11 /opt/lampp/htdocs/advanced/yii migrate

windows: c:\xampp\bin\php-5.6.11 c:\xampp\htdocs\advanced\yii migrate

(php-5.6.11 disesuaikan dengan yang ada di folder bin. Berdasarkan pengalaman saya, it works!)

Jika sudah berhasil, seperti gambar di bawah:


 Maka sudah berhasil juga proses penginstalan atau pemasangan Yii 2 Advance Template. Silahkan buka http://localhost/advanced/frontend/web untuk daftar (signup) agar bisa masuk ke backend.

Note : cara di atas belum saya uji pada windows
Terima kasih... Jika ada pertanyaan, silahkan bertanya.

Senin, 07 September 2015

Membuat Virtual Host Dengan Xampp/Lampp di Ubuntu Linux

Kali ini kita akan membuat Virtual Host menggunakan Lampp di Ubuntu. Tapi sebelum itu, Virtual Host itu apa sih? Dari wikipedia, virtual host adalah sebuah metode untuk hosting beberapa nama domain (dengan penanganan terpisah dari setiap nama) pada server tunggal. Kalau masih ada yang bingung, silahkan cari di google atau wikipedia. Tapi, virtual host dengan xampp yang saya maksud adalah untuk mempermudah mengingat alamat (url) projek kita yang berada pada localhost.

Langsung saja, yang pertama kita lakukan adalah mengubah sedikit isi file httpd.conf yang ada di folder /opt/lampp/ect/. Masukkan perintah pada terminal

sudo nano /opt/lampp/etc/httpd.conf

Lalu cari


dan ubah menjadi

Kemudian buka file httpd-vhosts.conf.

sudo nano /opt/lampp/etc/extra/httpd-vhosts.conf

Cari

dan tambahkan tanda pagar (#) sehingga menjadi seperti ini


Setelah itu, di bawah script yang telah kita beri tanda pagar, tulis konfigurasi virtual host localhost.

<VirtualHost *:80>
        DocumentRoot "/opt/lampp/htdocs"
        ServerName localhost
        <Directory /opt/lampp/htdocs>
                AllowOverride all
                Oerder allow, deny
                Allow from all
        </Directory>
</VirtualHost>
Kemudian tulis konfigurasi virtual host untuk projek kita

<VirtualHost 127.0.0.2:80>
        ServerAdmin webmaster@localhost
        DocumentRoot "/opt/lampp/htdocs/basic/web"
        ServerName yiibasic.local
        ServerAlias www.yiibasic.local
        <Directory /opt/lampp/htdocs/basic/web>
                DirectoryIndex index.php
                AllowOverride all
                Order allow, deny
                Allow from all
        </Directory>
        ErrorLog ${APACHE_LOG_DIR}error.log
        CustomLog ${APACHE_LOG_DIR}access.log combined
</VirtualHost>

Yang perlu kita perhatikan adalah:

  • 1. IP (127.*.*.*) yang kita gunakan tidak boleh ada yang sama.
  • 2. DocumentRoot adalah path/alamat tempat projek kita.

  • 3. ServerName adalah ? Anggap saja nama yang akan tertuju pada projek kita.

  • 4. ServerAlias adalah ? Anggap saja ServerName cadangan.

  • 5. Pada tag <Directory> harus ada path/alamat project (lihat DocumentRoot).

  • 6. DirectoryIndex adalah file yang pertama dibuka. Biasanya index.php, index.html, index.asp dll.
Terakhir, masukkan ip dan nama yang telah kita masukan pada host. Masukkan perintah

sudo nano /etc/host

Kemudian tulis

127.0.0.1 localhost
127.0.1.1 lubuntu
127.0.0.2 yiibasic.net


Lalu coba buka url yiibasic.net, maka akan muncul:


Artinya, virtual host berhasil kita buat. Kalo "File Not Found" atau masuk ke mercusuar berarti ada yang salah.

Sekian yang bisa saya sampaikan dan terima kasih...