Scribd Logo
Upload

Welcome to Scribd!

  • Memadukan TinyMCE Dan KCFinder Di CMS Lokomedia

    Uploaded by

    Cipto Heri Setiono
    322 views5 pages
    Tulisan ini menjelaskan cara memadukan editor WYSIWYG TinyMCE dan file manager KCFinder di CMS Lokomedia untuk meningkatkan keamanan dalam mengunggah gambar. Penulis menerangkan alasan memilih KCFinder karena menerapkan session untuk otentikasi pengguna sebelum diizinkan mengunggah file. Langkah-langkahnya adalah menginstal TinyMCE dan KCFinder, lalu mengonfigurasi session KCFinder dan menambahkan TinyMCE ke textarea yang

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Tulisan ini menjelaskan cara memadukan editor WYSIWYG TinyMCE dan file manager KCFinder di CMS Lokomedia untuk meningkatkan keamanan dalam mengunggah gambar. Penulis menerangkan alasan memilih KCFinder karena menerapkan session untuk otentikasi pengguna sebelum diizinkan mengunggah file. Langkah-langkahnya adalah menginstal TinyMCE dan KCFinder, lalu mengonfigurasi session KCFinder dan menambahkan TinyMCE ke textarea yang

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    322 views5 pages

    Memadukan TinyMCE Dan KCFinder Di CMS Lokomedia

    Uploaded by

    Cipto Heri Setiono
    Tulisan ini menjelaskan cara memadukan editor WYSIWYG TinyMCE dan file manager KCFinder di CMS Lokomedia untuk meningkatkan keamanan dalam mengunggah gambar. Penulis menerangkan alasan memilih KCFinder karena menerapkan session untuk otentikasi pengguna sebelum diizinkan mengunggah file. Langkah-langkahnya adalah menginstal TinyMCE dan KCFinder, lalu mengonfigurasi session KCFinder dan menambahkan TinyMCE ke textarea yang

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Memadukan TinyMCE dan KCFinder di CMS Lokomedia

    Setelah menulis tutorial sebelumnya yang berjudul Memasang Editor WYSIWYG TinyMCE di CMS Lokomedia, saya mendapatkan banyak sekali respon dari pembaca, baik melalui email maupun komentar di website bukulokomedia.com, bahkan yang lebih penting lagi ada yang sudah coba-coba melakukan aksi penjebolan melalui editor TinyMCE ke website ini. Beberapa hari ini, saya mencoba menelusuri informasi di Google mengenai editor WYSIWYG yang digunakan oleh CMS-CMS ternama seperti Joomla, Wordpress, dan Drupal. Ternyata, sebagian besar aksi penjebolan terhadap website yang menggunakan CMS-CMS tersebut dilakukan melalui celah yang ada di editor WYSIWYG, terutama di fitur upload gambar/filenya, dimana sebenarnya fitur tersebut sangat berguna untuk memasukkan beberapa gambar/media ke TextArea untuk mendukung isi artikel/berita ditulis, dan tentu saja saya tidak akan membahas cara menjebolnya disini, karena itu masih diluar domain keahlian saya. Oleh karena itu, saya mencoba 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. Oke langsung saja, 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 langkahlangkahnya sebagai berikut:

    Download TinyMCE yang telah saya modifikasi dan tambah beberapa plugin penting dihttp://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:

    1. 2. 3. 4. 5. 6. if($_SESSION[login]==1){ 7. if(!cek_login()){ 8. $_SESSION[login] = 0; 9. } 10. } 11. if($_SESSION[login]==0){ 12. header(location:logout.php); 13. }

    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";

    14. else{ 15. if (empty($_SESSION['username']) AND empty($_SESSION['passuser']) AND $_SESSION['login']==0){ 16. echo "<link href='style.css' rel='stylesheet' type='text/css'> 17. <center>Untuk mengakses modul, Anda harus login <br>"; 18. echo "<a href=index.php><b>LOGIN</b></a></center>"; 19. } 20. else{ 21. ?> 22. <html> 23. <head> 24. <title>Administrator CMS Lokomedia</title> 25. <script src="../tinymcpuk/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> 26. <script src="../tinymcpuk/jscripts/tiny_mce/tiny_lokomedia.js" type="text/javascript"></script> 27. 28. <link href="style.css" rel="stylesheet" type="text/css" /> 29. </head> 30. <body> 31. // ...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:

    1. 2. 3. 4.

    5. 6. 7. 8. $username = anti_injection($_POST['username']); 9. $pass = anti_injection(md5($_POST['password'])); 10.

    Download KCFinder yang telah saya modifikasi di http://bukulokomedia.com/kcfinder.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; }

    11. // pastikan username dan password adalah berupa huruf atau angka. 12. if (!ctype_alnum($username) OR !ctype_alnum($pass)){ 13. echo "Sekarang loginnya tidak bisa di injeksi lho."; 14. } 15. else{ 16. $login=mysql_query("SELECT * FROM users WHERE username='$username' AND password='$pass' AND blokir='N'"); 17. $ketemu=mysql_num_rows($login); 18. $r=mysql_fetch_array($login); 19. 20. // Apabila username dan password ditemukan 21. if ($ketemu > 0){ 22. session_start(); 23. include "timeout.php"; 24. 25. $_SESSION['KCFINDER']=array(); 26. $_SESSION['KCFINDER']['disabled'] = false; 27. $_SESSION['KCFINDER']['uploadURL'] = "../tinymcpuk/gambar"; 28. $_SESSION['KCFINDER']['uploadDir'] = ""; 29. 30. $_SESSION[namauser] = $r[username]; 31. $_SESSION[namalengkap] = $r[nama_lengkap]; 32. $_SESSION[passuser] = $r[password]; 33. $_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.

    You might also like