<marquee>TinyMCE dan KCFinder Pada CMS Lokomedia</marquee>

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.

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:

menjadi {perhatikan tambahan id='loko'}:

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.

Penulis : MumuL Mulyana ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel TinyMCE dan KCFinder Pada CMS Lokomedia ini dipublish oleh MumuL Mulyana pada hari Sabtu, 12 Mei 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan TinyMCE dan KCFinder Pada CMS Lokomedia