Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

Tinymce + upload dan konfigurasi user upload

Hallo para pengujung Dokumen Ary…

Sudah lama sekali rasanya saya tidak ngepost artikel yak… ke asikan jualan template si… hihihihi

Sebelum masuk ke pembahasan, pernah suatu ketika saat saya menangani salah satu project di sebuah instansi pendidikan, projectnya membuat sebuah website yang di dalamnya ada 3 level user yang menggunakan web tersebut, yaitu admin, guru, dan siswa…

Dan didalam website tersebut ada sebuah vasilitas dimana user dengan level admin dan guru dapat memposting sebuah artikel yang nantinya bisa di baca oleh siswa,,, ya langsung saya kerjakan no, waktu itu belum ada update cms lokomedia yang sekarang yang sudah dapat mengupload gambar dari editor text tinymce nya, saya googling dan dapet editor tinymce yang sudah dapat upload gambar dari editornya langsung…

Tapi ada satu permasalahan yang muncul, pihak instansi pendidikan tersebut menginginkan setiap gambar yang di upload oleh admin tidak dapat di lihat oleh user dengan level guru, dan guru dapat melihat gambar yang di upload oleh guru lain… begitu rule nya… 

Dengan sedikit configurasi masalah tersebut terselesaikan. Jujur saja sampai sekarang saya lebih suka menggunakan editor yang ini di banding dengan bawaan cms lokomedia yang sekarang, karena lebih mudah memasangnya, tidak banyak configurasi yang di lakukan… #menurutsayasih… 😀

Hasilnya dapat di lihat di SINI, dan download file nya di SINI

Jika anda sudah mendownload file contoh yang saya kasih, di dalamnya cuma ada 1 folder yang bernama tinymce yang merupakan file editor dari tinymce nya…

Cara Memasang:

1. Seperti yang ada pada file beranda.php pada contoh yang saya kasih, kita hanya cukup memanggilnya dengan code seperti berikut :

<script type="text/javascript" src="tinymce/jquery.tinymce.js"></script>
  <script type="text/javascript">
  $().ready(function() {
  $('textarea.tinymce').tinymce({
  // Location of TinyMCE script
  script_url : 'tinymce/tiny_mce.js',
 // General options
  theme : "advanced",
  plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist,imagemanager",
 // Theme options
  theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,|,insertimage",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,

  });
  });
  </script>

Yang terpenting adalah pemanggilan file jquery.tinymce.js yang harus benar dan jangan lupa jquery.js nya…

2. Pada bagian autentikasi login projek anda, daftarkan SESSION berikut $_SESSION[‘isLoggedIn’] = true; , jika $_SESSION[‘isLoggedIn’] = false atau belum di daftarkan maka editor belum bisa di gunakan.

3. Agar tampil editornya, setiap form textarea berikan class dengan nama tinymce seperti contoh berikut :

<textarea class='tinymce' name=''></textarea>

Konfigurasi User :

Dalam projek saya tersebut, saya tambahkan SESSION baru yang membedakan antara admin dengan guru, yaitu jika admin ditemukan makan $_SESSION[‘level’] = “admin”; dan jika guru ditemukan maka $_SESSION[‘level’] = “user”;

Langkah pertama, buat folder dengan nama admin dan user di tinymce\plugins\imagemanager, folder admin di gunakan untuk menampung gambar yang di upload oleh admin, dan folder user digunakan untuk menampung gambar yang di upload oleh guru.

langkah kedua, buka file config.php yang ada di tinymce\plugins\imagemanager, rubah baris ke 38 yang sebelumnya

$mcImageManagerConfig['filesystem.rootpath'] = 'admin';

rubah menjadi

if ($_SESSION['level']=="admin"){
	$mcImageManagerConfig['filesystem.rootpath'] = 'admin'; 
}
elseif ($_SESSION['level']=="user"){
	$mcImageManagerConfig['filesystem.rootpath'] = 'user'; 
}

Sekarang saatnya tes drive 🙂 , untuk mencobanya bisa di coba dari contoh saya saja ya…

A. Sisi Admin

1. Masuk sebagai admin username dan passwordnya= admin

2. Coba tambahkan gambar baru, dengan cara seperti gambar berikut :

Maka hasilnya akan seperti berikut :

B. User lain

1. Logout dahulu, kemudian login lagin dengan username dan password = user

2. Coba tekan tombol seperti gambar berikut :

Maka gambar yang telah di upload oleh admin tadi tidak terlihat di user lain, di karenakan folder tiap user sudah sendiri-sendiri…

Jika anda tidak menginginkan pembagian folder yang saya terapkan di atas, anda cukup merubah sedikit kode pada file config.php yang ada di tinymce\plugins\imagemanager menjadi seperti berikut :

$mcImageManagerConfig['filesystem.rootpath'] = 'filess';

Oke sekian dulu posting kali ini, semoga apa yang saya berikan ini dapat bermanfaat bagi para pengunjung website ini..

terima kasih.. 🙂

26 responses to “Tinymce + upload dan konfigurasi user upload

  1. gibas June 28, 2012 at 2:56 am

    thnx atas tutorny, bermanfaat bgt

  2. awan November 6, 2012 at 6:42 pm

    mas punya saya kog ga bisa ya ?

  3. adinpai January 31, 2013 at 10:32 am

    sebelumnya terimakasih banyak atas tutornya.. tapiii…
    kenapa belum bisa upload ke server.. setelah pilih gambar k simpan ternyata tidak bisa
    keluar tulisan “No access on this file/folder”

    • Almazari February 2, 2013 at 4:12 am

      Coba cek folder nya sudah ada atau belum? untuk admin foldernya bernama admin, dan untuk user foldernya bernama user, folder terletak di tinymce\plugins\imagemanager

  4. william March 14, 2013 at 10:37 am

    mas saya mau tanya dong , ko pas saat saya , upload gambar nya gak keluar ? dan terus saya mau tanya kalau saya gak tambahin

    $_SESSION[‘isLoggedIn’] = true;
    $_SESSION[‘isLoggedIn’] = false
    ngaruh gak ?
    misal nya saya tidak ada pembagian folder antara admin atau user sudah saya ikutin perintah seperti ini

    $mcImageManagerConfig[‘filesystem.rootpath’] = ‘filess’;

    pasa saya mau upload image malah minta username adan password , mohon pencerahan nya mas ,, terimakasih

    • Almazari March 14, 2013 at 11:41 am

      itu karna $_SESSION[‘isLoggedIn’] nya FALSE mas… session tersebut sangat penting, fungsinya yaitu untuk membuka file managernya, ya seperti itu mas kalo g ditambahin $_SESSION[‘isLoggedIn’] = true; pada loginnya..

  5. igund April 6, 2013 at 4:18 pm

    ga kok punya ane ga jd yah pas ane pidah ke program lain?:O

  6. neph April 13, 2013 at 10:39 am

    mas mohon pencerahannya…
    puna saya kok ga jadi yah malah setiap buka web kluar warning”load jquery first”…
    trus cara ngeload jquery.na gmn? padahal sudah saya pake session login tuh…

    • Almazari April 13, 2013 at 11:18 am

      berarti itu jquery nya belum di load mas, atau cara loadnya belum benar…? sediakan dulu jquerynya, kalo belum punya bisa di ambil dari sini https://code.google.com/p/c0d3/downloads/detail?name=jquery-1.7.min.js&can=2&q=, atau didalam file contoh.

      setelah itu tinggal di panggil dengan code berikut :
      <script type="text/javascript" src="jquery-1.7.min.js"></script>

      jika file yang telah di download diletakkan pas di luar folder file yang berisi script diatas, maka manggilnya seperti ini:
      <script type="text/javascript" src="../jquery-1.7.min.js"></script>

      jika diluar dan didalam folder lagi, misalnya foldernya js, maka manggilnya seperti ini :
      <script type="text/javascript" src="../js/jquery-1.7.min.js"></script>

  7. vismoc April 26, 2013 at 2:11 pm

    cara menyeting width nya gimana min? soalnya di tampilan gag ada scrolnya

    • Almazari April 27, 2013 at 6:55 am

      untuk menyeting widthnya tergantung btn apa yang ditampilkan pada pengaturan javascriptnya heme_advanced_buttons1 : “bla bla”,
      heme_advanced_buttons2 : “bla bla”,

      semakin sedikit semakin kecil… sedangkan untuk mengatur height nya bisa langsung menambahkan style pada form textareanya, misal : <textarea class=’tinymce’ name=’pertanyaan’ style=’height:500px;’></textarea>

  8. arez July 10, 2013 at 1:18 pm

    ini kalo konfigurasinya user saja bagaimana ? jadi user kan beda-beda akunnya,biar tiap mau upload gambaryang keluar adalah gambar dari satu akun itu saja …

  9. winaldi July 26, 2013 at 6:23 am

    pertamax gan.. thankssss a lottt

  10. danie November 7, 2013 at 2:10 am

    terimakasih boss .
    lancar dah buat wodpressnya

  11. hendry December 8, 2013 at 5:52 am

    punya saya jg ga jalan neh mas
    klik icon insert image nya ga ngefek.. diam trs tuh knp??

  12. Ajurna December 19, 2013 at 5:08 am

    tanya donk mas, kalau mau mengalihkan directorinya ke namadomain.com/images misalnya gimana ya. kok saya setting di folder admin ataupun user nya gak ngaruh tetap larinya ke root imagemanager

    • Almazari January 13, 2014 at 12:37 pm

      aduh gimana ya.. saya belum pernah nyaba utak atik masalah ini… filing saya si pasti settingannya ada di plugin/filemanager gan…
      yang sebelumnya kan $mcImageManagerConfig[‘filesystem.rootpath’] = ‘admin’; mungkin kalo ditambahkan $mcImageManagerConfig[‘filesystem.rootpath’] = ‘../../../admin’; bisa.. (../) tergantung berapa banyak folder yang dilewati untuk menuju ke root /images

  13. jaburan January 29, 2014 at 2:11 am

    klo untuk insert bisa dijalankan…tapi pas edit gambar’y tdk keluar..
    gmana ya gan..???

  14. Rizky March 7, 2014 at 9:04 am

    kalo cara tampilin datanya gimana ya? saya udah berhasil cuma pas ditampilin datanya gambarnya rusak

  15. Yusak May 17, 2014 at 5:59 pm

    Mas kalau konfigurasi untuk kcfinder bisa ng ya , jadi masing-masing user hanya bisa melihat gambar yang di upload nya saja ? tapi menggunakan kcfinder dan tinymce ..

  16. Denmasz September 5, 2014 at 6:03 pm

    mas saya mau tanya, button yang di atas gak nampak terutama ketika kita mau upload gambar, button-nya jadi gini mas
    {#common.createdir}
    {#common.upload}
    {#common.refresh}
    {#common.filemanager}
    solusinya gamana mas??

  17. Nikko June 13, 2015 at 6:17 am

    Thanks Juragan.. dari sekian banyak plugin yang di coba… berhari2 gentayang di dunia maya sampai ke bulek..
    Akhirnya Alhamdulillah dapat..
    mangkin sukses selalu dokumenary.wordpress.com di tunggu updatean terbarunya thks.

  18. Amin Oto November 27, 2017 at 2:48 pm

    ini pake tinymce versi berapa ya bos, ditempat saya kok gak ada imagemanager pada : tinymce\plugins\imagemanager

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: