[TUTORIAL] Membuat CMS Company Profile dengan Panada Framework–Bag.10


Memadukan file uppload manager KCFINDER dengan editor TINYMCE

Sudah lama juga saya belum update tutorial tentang panada framework ini, dan setelah membaca bagian terakhir (bagian 9) ternyata ada janji yang belum saya tepati, yaitu bagaimana memadukan file manager dan upload kcfinder dengan tinymce editor yang sudah terpasang pada CMS yang kita buat. Pada saat klik ikon image akan tampil insert/eit image dan di samping baris ‘source’ tidak ada folder untuk ‘browse file’.

tinymce-tanpa-kcfinder
Gb. 10.1 | TinyMCE tanpa KCFinder

Kenapa memilih KCFINDER ?

Kenapa memilih kcfinder? Selain lebih mudah dalam pemasangannyya juga adanya fitur proteksi folder upload dengan session login, sehingga apabila kita mengakses folder tanpa login dahulu (akses langsung URL) akan ada peringatan bahwa anda tidak berhak mengaksesnya. Ini penting kalau sembarang orang bisa upload file ke server kita kan bisa berbahaya. Kalau anda sudah mahir sih tidak masalah dengan file manager yang lain, tinggal sedikit edit source bisa ditambahan sendiri skripnya :).

Sebagai informasi, silahkan anda lihat dua gambar di bawah ini, gambar pertama (gb. 10.2) adalah tampilan saat kita mengakses langsung via URL di browser tanpa login terlebih dahulu. Misalnya saya langsung mengaksesnya melalui url :

http://localhost/panada/app/kcfinder-3.0/browse.php

Peringatan
Gb.10.2 | Peringatan tidak berhak akses, harus login

Gambar yang kedua (gb. 10.3) tampilan saat kita login terlebih dahulu.

kcfinder
Gb. 10.3 | Tampilan kcfinder setelah login

TIPS & TRIK :
Usahakan saat mengekstrak paket kcfinder di ganti folder defaultnya, sehingga akan sedikit kesulitan bagi yang iseng dengan web kita. 🙂 , kalau yang di sini sengaja tidak saya ganti.

Dari dua gambar di atas, terlihat saat mengakses tanpa login terlebih dahulu akan ada peringatan bahwa anda tidak berhak mengakses foldernya, sedangkan saat kita login dulu langsung di tampilkan file managernya. Dan kalau mau upload tinggal klik tombol upload saja. Inilah yang akan saya bahas dalam tutorial bagian ini, tentu saja agar bersambung dengan tutorial sebelumnya, saya akan sedikit mengoreksi skrip pada tutorial sebelumnya.

Langkah 1: Upgrade dulu TinyMCE 3 dengan TinyMCE 4

Kenapa harus upgrade? Niat saya sih agar artikel tutorial ini terlihat ‘uptodate’ , begitu pula dengan CMS yang kita buat menjadi ‘uptodate’ , selain itu saya akan integrasikan TinyMCE 4 ini dengan KCFinder versi terbaru, dalam tutorial ini KCFinder versi 3.0 .

Sesuaikan versi TinyMCE 4 dan KCFinder-nya seperti di bawah ini, dikarenakan saya sudah mencoba dengan versi lainnya (3.10) , selalu ada error (unknown error).

Versi TinyMCE 4.0.22 : http://download.moxiecode.com/tinymce/tinymce_4.0.22.zip

Versi KCFinder 3.0 : https://github.com/sunhater/kcfinder/archive/3.0.zip

Setelah mendownload TinyMCE 4.0.22, silahkan di ekstrak filenya di dalam folder app dan ganti namanya menjadi : tinymce (sebelumnya di hapus dahulu tinymce versi 3). Sekarang buka bagian views/dash/header.php

Pada bagian url js dan tinymce.init(); ganti saja dengan kode berikut ini :


<script type="text/javascript" src="<?php echo $this->uri->baseUri; ?>tinymce/js/tinymce/tinymce.min.js"></script>

<script type="text/javascript">
tinymce.init({
selector: "textarea",
relative_urls : false,
remove_script_host : false,
document_base_url : "",
theme: "modern",
width: 425,
height: 300,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]
});
</script>

Skrip di atas saya ambil dari dokumentasi advanced tinymce4 : http://www.tinymce.com/wiki.php/Advanced dan sedikit di edit dan di tambah baris ke 4-6 saja. Kalau sudah benar silahkan masuk ke admin area dan pilih edit salah satu halamannya, maka sekarang textarea editor anda sudah berubah, lihat gambar 10.1.

Langkah 2: Mendowload file manager KCFINDER dan mengekstraknya.

Selamat. Tinymce 3 anda sudah berhasil di ganti menjadi Tinymce 4. Sekarang saatnya kita mengintegrasikannya dengan KCFinder 3.0 sehingga Tinymce 4 kita bisa ada file manager dan upload/download file – khususnya dalam kasus ini file gambar.

Ingat ya KCFinder versi 3.0 yang sudah saya pasang dan berhasil.

Lihat gambar 10.3 , terlihat file manager dari KCFinder. Silahkan saatnya mendownload, apabila sudah mendownload dan mengekstraknya di dalam folder app lakukan langkah berikutnya.

Versi KCFinder 3.0 : https://github.com/sunhater/kcfinder/archive/3.0.zip

lokasi-tinymce-kcfinder
Gb. 10.4 | Lokasi folder tinymce 4 dan kcfinder-3.0

Langkah 3: Mengedit kembali file views/dash/header.php CMS

folder browse
Gb. 10.5 | Ikon folder browse

Supaya kcfinder dapat di panggil dari tinymce4 , kita akan kembali menambahkan skrip ‘pemanggil’ , ikon ‘folder browse’ saat di klik. buka kembali file views/dash/header.php masukkan skrip di bawah ini ke bagian tinymce.init() simpan saja pada bagian atas tinyme.init(). Jika berhasil , kemudian klik iikon gambar pada editor , maka akan tampil ikon ‘folder browse’ seperti ini.

tinymce.init({
// …ini yang di tambahkan


 file_browser_callback: function(field, url, type, win) {
 tinyMCE.activeEditor.windowManager.open({
 file: '<?php echo $this->uri->baseUri; ?>kcfinder-3.0/browse.php?opener=tinymce4&field=' + field + '&type=' + type+'&dir=../image',
 title: 'KCFinder',
 width: 700,
 height: 500,
 inline: true,
 close_previous: false
 }, {
 window: win,
 input: field
 });
 return false;
 }, 

// …sampai sini

selector: “textarea”,
bla-bla-bla dan seterusnya. 🙂

Langkah 4: Mengedit metode login pada file controller Boardadmin.php

Seperti yang sudah saya katakan sebelumnya, dengan kcfinder kita bisa memproteksi folder upload hanya bagi yang sudah login saja. Untuk menindaklanjutinya agar bisa seperti itu, kita harus memasukkan session kcfinder pada saat kita login ke admiin area (boardadmin). Dan pada CMS yang sedang kita buat adanya pada file controller Boardadmin.php pada bagian metod login. Tambahkan skrip berikut ini pada bagian kita menset nilai session.

$this->session->setValue( array(

‘logadmin’ => true,

‘username’ => $hslcek->username,

));

//yang ditambahkan

 

$_SESSION['KCFINDER'] = array();
$_SESSION['KCFINDER']['disabled'] = false;
$_SESSION['KCFINDER']['uploadURL'] = "http://localhost/panada/app/uploads";
$_SESSION['KCFINDER']['uploadDir'] = "/var/www/panada/app/uploads";

Yang perlu di perhatikan adalah pada baris :

$_SESSION[‘KCFINDER’][‘uploadURL’] = “http://localhost/panada/app/uploads“;

URL-nya dalam hal ini saya isi seperti di atas, dikarenakan saya akan menyimpan file-file gambar yang di upload melalui kcfinder pada folder : app/uploads. Kalau anda ingin berbeda silahkan di sesuaikan. Yang terpenting untuk anda pengguna liinux seperti saya jangan lupa menset permission-nya menjadi “777” agar bisa di tulisi foldernya.

$_SESSION[‘KCFINDER’][‘uploadDir’] = “/var/www/panada/app/uploads”;

Adalah lokasi direktori secara fisiknya, biasanya bisa di dapatkan dengan melihat dokumen root ($_SERVER[‘DOCUMENT_ROOT’]) + lokasi folder. Kalau saya dalam hal ini meletakan file uploads di direktori “/var/www/panada/app/uploads”; Bagi anda yang berbeda silahkan di sesuaikan.

Lanjutkan ke langkah berikutnya….

Langkah 5: Mengedit file config.php dan core/autoload.php KCFinder.

File kcfinder-3.0/config.php

Langkah berikutnya sebelum kita mencobanya yaitu, kita luangkan waktu mengedit file kcfinder-3.0/config.php ini terutama pada beberapa bagian. Yaitu :

‘disabled’ => true,

‘uploadURL’ => “http://localhost/panada/app/uploads&#8221;,

‘uploadDir’ => “/var/www/panada/app/uploads”,

‘theme’ => “default”,

Nilai disabled harus ‘true’, dikarenakan yang kita inginkan adalah hanya orang yang login saja bisa mengupload ke server. Kalau nilainya ‘false’ semua orang bisa masuk ke file manager upload kita tanpa harus login, hanya dengan mengetik url pada url browser – lihat penjelasan saya di awal artikel ini.

Untuk uploadURL dan uploadDir kita sesuaikan seperti yang ada pada bagian session diatas. Berikutnya kita hilangkan tanda komen pada bagian ini dan sesuaikan dimana letak tinymce :

‘_tinyMCEPath’ => “../tinymce”,

File kcfinder-3.0/core/autoload.php

Ini bagian penting juga. Yaitu kita harus menambahkan session_name CMS kita pada kcfinder yaitu dengan menambahkan baris ini , pada bagian atas file core/autoload.php. Kalau tidak di tambahkan maka akan terjadi pemberitahuan bahwa anda tidak berhak mengkases foldernya.

session_name(‘PAN_SID’);

Darimana saya tahu nama session-nya PAN_SID ? Itu adalah nama session default pada panada framework, silahkan lihat pada file app/config/session.php , nah kalau di sana bagian ‘name’ sudah di ganti ya anda harus samakan juga ‘session_name’ dengan nama penggantinya.

Langkah 6: Mengganti folder permission uploads agar bisa di tulisi.

Bagian ini sebenarnya hanya untuk anda yang menggunakan OS Linux seperti saya. Tetapi tentu saja penting, karena di dunia internet sebagian server hosting menggunakan OS Linux, jadi anda harus mengetahuinya.

Kita harus mengganti permission folder uploads-nya menjadi “777”; agar bisa di tulisi.

Langkah 7: Saatnya mencoba.

Sekarang saatnya kita mencoba.

  • Masuk lah ke admin area

  • Cobalah edit halaman sehingga akan masuk ke editor html

  • Kemudian klik ikon gambar, akan terlihat seperti tampilan gambar 10.5,

  • Klik ikon ‘folder browse’ , akan tampilan seperti gambar 10.3 .

  • Klik saja tombol upload dan pilih nama file yang akan anda upload

  • Jika berhasil akan tampil gambar ‘thumbnail’ seperti di bawah ini.

  • Untuk memasukkan ke dokumen kita tinggal klik ganda saja ‘thumbnail’ nya.

Gb. 10.6 | Berhasil upload file gambar
Gb. 10.6 | Berhasil upload file gambar

Selamat ya jika anda berhasil mengikuti tutorial ini, apabila tidak berhasil atau ada error silahkan isi komentar-nya, mudah-mudah saya bisa menjawabnya.

Salam Berbagi.

Karawang, 21 April 2014 jam 04:31

Hasannuh BZ

 

Iklan

3 pemikiran pada “[TUTORIAL] Membuat CMS Company Profile dengan Panada Framework–Bag.10

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s