Tutorial Codeigniter Part 13 – Menggunakan WYSIWYG Editor TinyMCE

codeigniter-kcdev
Advertisements

Selamat berjumpa kembali diks. Kali ini kita akan membahas mengenai cara menggunakan WYSIWYG Editor pada codeigniter. WYSIWYG adalah singkatan dari “What You See Is What You Get“. WYSIWYG editor adalah solusi yang sempurna untuk mengatur konten dan teks secara cepat, mengatur tata letak konten dengan mudah, memasukan gambar, menentukan ukuran tulisan, mengatur indentasi, bullet & numbering. Kalau kace bilang sih penggunaanya sangat mirip dengan microsoft office word. Sebenarnya ada banyak sekali WYSIWYG editor yang bisa kita gunakan secara gratis, namun di tutorial ini kita akan menggunakan TinyMCE karena UI yang simple, kemudahan dalam instalasi dan konfigurasinya. TinyMCE ini akan kita pasang pada modul lowongan kerja yang sudah kita rencanakan pada tutorial part 0. Oke langsung saja kita mulai.

1. Download Plugin TinyMCE

Silahkan mengunjungi website resmi TinyMCE untuk mengunduh file plugin nya atau adiks bisa langsung klik disini saja. Kemudian file plugin tersebut akan kita letakkan di dalam folder assets/plugins/tinymce. Jadi struktur folder project kita akan terlihat seperti di bawah ini.

2. Membuat Tabel Loker Pada Database

3. Membuat Controller Loker

Pada folder application/controllers buat sebuah file baru bernama Loker.php yang berisi kode berikut.

4. Membuat Model Loker

Tugas kita selanjutnya adalah membuat model loker. Pada folder application/models buat file baru bernama Model_loker.php.

5. Membuat View Untuk Modul Loker

Tugas berikutnya adalah membuat 4 file view sama seperti di modul events. Yaitu:

File application/views/loker/lokerList.php

File application/views/loker/lokerDetail.php

File application/views/loker/lokerAdd.php

File application/views/loker/lokerEdit.php

Advertisements

6. Memperbarui Template Sidebar, Template Footer dan Kcdev.js

Pada template sidebar kita akan menambahkan menu baru yaitu menu Lowongan Kerja. Menu baru ini bisa dilihat oleh semua level user.

sidebar.php

footer.php

Dan file kcdev.js

7. Testing

Tampilan awal modul lowongan kerja yang sudah jadi.

tutorial-codeigniter-part-13-menggunakan-wysiwyg-editor-tinymce

Saat kita ingin menambahkan loker, maka akan tampil wysiwyg editor kita pada bagian deskripsi.

tutorial-codeigniter-part-13-menggunakan-wysiwyg-editor-tinymce

Saat kita mengklik tombol detail pada tabel lowongan kerja akan tampil seperti berikut.

Advertisements

tutorial-codeigniter-part-13-menggunakan-wysiwyg-editor-tinymce

Mission Completed Diks. Untuk mengunduh tutorial ini silahkan mengunjungi github saya -> disini <-

“Sedekah gak harus uang melulu, satu baris kode yang kamu bagikan pun insya Allah bernilai ibadah”

Sekian tutorial kali ini, semoga bermanfaat.

kaceManaf

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

8 Replies to “Tutorial Codeigniter Part 13 – Menggunakan WYSIWYG Editor TinyMCE

  1. halo kak, kalau error seperti ini problemnya ada di mana ya kak?
    tinymce.min.js:11 Uncaught TypeError: u is not a constructor

  2. gan saya mau disable user pada saat di halaman event pada button edit sama delete, saya coba samakan dengan loker tapi gak bisa, bagaimana ya gan terima kasih

Leave a Reply

Your email address will not be published. Required fields are marked *