Artikel 40
Setelah menulis tutorial sebelumnya dimana memasang TinyMCE pada lokomedia, memasang beberapa plugin yang digunakan oleh editor WYSIWYG, seperti AjaxFileManager, CKFinder, KCFinder, MCImageManager, dan saya mencoba mencari plugin yang paling sedikit celahnya, akhirnya pilihan jatuh pada KCFinder (bukan CKFinder lho, karena CKFinder termasuk yang paling banyak dijebol). Alasan utamanya, security di KCFinder menerapkan teknik session, dimana user diperbolehkan upload gambar di website kita apabila dia sudah login secara sah melalui Admin di CMS tersebut, artinya KCFinder tidak membuat session secara tersendiri untuk aplikasinya, tapi menyatu dengan CMS, sehingga dapat langsung memeriksa session Username dan Password yang digunakan Admin CMS tersebut. Saya sangat bersyukur dan berterimakasih sekali pada pak Husada yang bersedia sharing teknik session di KCFinder ini.
Setelah menulis tutorial sebelumnya dimana memasang TinyMCE pada lokomedia, memasang beberapa plugin yang digunakan oleh editor WYSIWYG, seperti AjaxFileManager, CKFinder, KCFinder, MCImageManager, dan saya mencoba mencari plugin yang paling sedikit celahnya, akhirnya pilihan jatuh pada KCFinder (bukan CKFinder lho, karena CKFinder termasuk yang paling banyak dijebol). Alasan utamanya, security di KCFinder menerapkan teknik session, dimana user diperbolehkan upload gambar di website kita apabila dia sudah login secara sah melalui Admin di CMS tersebut, artinya KCFinder tidak membuat session secara tersendiri untuk aplikasinya, tapi menyatu dengan CMS, sehingga dapat langsung memeriksa session Username dan Password yang digunakan Admin CMS tersebut. Saya sangat bersyukur dan berterimakasih sekali pada pak Husada yang bersedia sharing teknik session di KCFinder ini.
Nantinya kita akan memadukan TinyMCE dan KCFinder untuk
dipasang di CMS Lokomedia. Oleh karena itu, saya akan memulainya dari
awal lagi (mengulang langkah pada tutorial sebelumnya), yaitu dari
pemasangan TinyMCE terlebih dahulu. Adapun langkah-langkahnya sebagai
berikut:
- Download TinyMCE yang telah saya modifikasi dan tambah beberapa plugin penting di http:\\www.bukulokomedia.com/jscripts.rar
- Ekstrak file jscripts.rar, nanti hanya ada satu folder yaitu jscripts. Copy-kan folder jscripts ke folder lokomedia/tinymcpuk yang ada di CMS Lokomedia, sebaiknya/sebelumnya hapus semua file yang ada di folder tinymcpuk kecuali folder gambar, sehingga nantinya folder tinymcpuk hanya berisi dua folder, yaitu jscripts dan gambar. Untuk lebih jelasnya, lihat gambar berikut:
- Selanjutnya, buka file media.php yang ada di folder lokomedia/adminweb, lalu hapus baris 25 s/d 84, gantikan dengan dua baris kode, lihat perubahan pada baris kode di skrip media.php (perhatikan baris kode 25 dan 26) berikut:
<?php session_start(); error_reporting(0); include "timeout.php"; if($_SESSION[login]==1){ if(!cek_login()){ $_SESSION[login] = 0; } } if($_SESSION[login]==0){ header(location:logout.php); } else{ if (empty($_SESSION['username']) AND empty($_SESSION['passuser']) AND $_SESSION['login']==0){ echo "<link href='style.css' rel='stylesheet' type='text/css'> <center>Untuk mengakses modul, Anda harus login <br>"; echo "<a href=index.php><b>LOGIN</b></a></center>"; } else{ ?> <html> <head> <title>Administrator CMS Lokomedia</title> <script src="../tinymcpuk/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> <script src="../tinymcpuk/jscripts/tiny_mce/tiny_lokomedia.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> // ...kode selanjutnya
Dan terakhir, tambahkan id='loko' pada masing-masing
inputan yang menggunakan textarea, misalnya form berita, maka buka
file berita.php yang ada di folder adminweb/modul/mod_berita, ubah
kode pada baris ke-138 yang semula:
<textarea name='isi_berita' style='width: 600px;
height: 350px;'></textarea>
menjadi {perhatikan tambahan id='loko'}:
<textarea
name='isi_berita' id='loko'
style='width: 600px; height: 350px;'></textarea>
Lakukan hal yang sama pada baris ke-196 untuk Edit
Berita, lalu simpan file berita.php.
Untuk melihat hasilnya, silahkan masuk/login ke halaman
Administrator CMS Lokomedia, lalu klik menu Berita dan klik tombol
Tambah Berita, maka pada bagian Isi Berita sudah terlihat editor
TinyMCE sudah melekat pada elemen textarea. Lihat gambar berikut:
Selanjutnya, kita akan memasang KCFinder dan
memadukannya dengan TinyMCE. Adapun langkahnya:
- Download KCFinder yang telah saya modifikasi di http:\\www.bukulokomedia.com/jscripts.rar
- Ekstrak file kcfinder, nanti hanya ada satu folder yaitu kcfinder. Copy-kan folder kcfinder ke root folder utama website Anda, dalam kasus ini adalah folder lokomedia.
- Selanjutnya, kita akan membuat session untuk KCFinder di admin CMS Lokomedia. Buka file cek_login.php yang ada di folder lokomedia/adminweb, lalu tambahkan empat baris kode, lihat pada baris kode 25 s/d 28 pada skrip cek_login.php berikut:
<?php include "../config/koneksi.php"; function anti_injection($data){ $filter = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES)))); return $filter; } $username = anti_injection($_POST['username']); $pass = anti_injection(md5($_POST['password'])); // pastikan username dan password adalah berupa huruf atau angka. if (!ctype_alnum($username) OR !ctype_alnum($pass)){ echo "Sekarang loginnya tidak bisa di injeksi lho."; } else{ $login=mysql_query("SELECT * FROM users WHERE username='$username' AND password='$pass' AND blokir='N'"); $ketemu=mysql_num_rows($login); $r=mysql_fetch_array($login); // Apabila username dan password ditemukan if ($ketemu > 0){ session_start(); include "timeout.php"; $_SESSION['KCFINDER']=array(); $_SESSION['KCFINDER']['disabled'] = false; $_SESSION['KCFINDER']['uploadURL'] = "../tinymcpuk/gambar"; $_SESSION['KCFINDER']['uploadDir'] = ""; $_SESSION[namauser] = $r[username]; $_SESSION[namalengkap] = $r[nama_lengkap]; $_SESSION[passuser] = $r[password]; $_SESSION[leveluser] = $r[level];
Demikianlah cara memasang editor TinyMCE ke CMS
Lokomedia dan memadukannya dengan KCFinder, pada tutorial berikutnya
akan saya sambung dengan cara input beberapa gambar sekaligus di
TinyMCE.
Catatan
Penting:- Gambar yang dimasukkan ke textarea akan tersimpan di folder tinymcpuk/gambar/image, namun kalau dijalankan secara localhost tidak akan tampil di halaman pengunjung, tapi ketika di online-kan akan tampil (settingannya memang untuk online atau input gambar secara online).
- Daripada nanti ada yang bertanya, mengapa id='loko'? Silahkan lihat settingannya atau buka file tiny_lokomedia.js yang ada di folder tinymcpuk/jscripts/tiny_mce/.
- Apakah folder penyimpanan gambar (tinymcpuk/gambar) bisa diubah? Tentu saja bisa, silahkan lihat skrip cek_login.php pada baris 27.
- Editor TinyMCE dan KCFinder yang kita bahas ini merupkan versi terbaru saat tutorial ini saya buat, yaitu TinyMCE 3.5 dan KCFinder 2.5.1.
- Intinya, editor tersebut selalu dikembangkan dan up to date sehingga security dan bugnya selalu diperbaiki, begitu juga dengan fiturnya selalu bertambah
- O iya, TinyMCE dan KCFinder sudah berhasil saya integrasikan dengan CMS Lokomedia, tunggu pada update versi 1.5.8 yang akan saya posting akhir bulan April 2012 ini.
