Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Integrasi Custom Media Gallery Dengan TinyMCE Dan Bootstrap
Jul 18th, 2019

Tutorial : Integrasi Custom Media Gallery Dengan TinyMCE Dan Bootstrap

Category : Programmings, Tutorials | Posted by G-admin at at July 18th, 2019 13:23 pm
277 | 0

Holllaa…! Apa kabar para calon-calon programer handal yang baik dan budiman! Semoga setelah kalian membaca artikel-artikel Gaswad.Com sebelum-sebelumnya, insya allah kemampuan programing kalian naik level-nya dan siap-siap menjadi saingan penulis ya’. Amiiinn… Hehe…

Okey, pada artikel kali ini penulis ingin berbagi tutorial bagaimana cara meng-integrasikan Custom Media Gallery ke dalam konten editor WYSIWYG (What You See Is What You Get) TinyMCE dengan bantuan Bootstrap.

Apa itu TinyMCE dan Bootstrap untuk lebih jauh bagi kalian yang belum mengenal kedua modul ini bisa merujuk ke URL berikut :

Mungkin beberapa dari kalian sudah mengetahui atau mungkin baru mengetahui bahwa modul TinyMCE sebenarnya sudah menyediakan fitur Media Gallery secara bawaan yang bernama MoxieManager,  namun plugin tersebut merupakan fitur Premium dari TinyMCE dimana kalian harus membayar sekitar $10 terlebih dahulu agar dapat menggunakan plugin ini dengan maksimal.

Penulis mah apa atuh cuma nyari yang gratisan doank… $10 mending penulis buat bayar bensin… 😀

Jadi untuk mengakalinya penulis membuat Custom Media Gallery ‘tandingan’ yang dapat di integrasikan ke modul TinyMCE, dengan bantuan dari Bootstrap.

Sebenarnya Custom Media Gallery ini pernah penulis integrasikan ke Text Editor lain yaitu Trumbowyg, namun ada beberapa hal yang menurut penulis kurang maksimal fiturnya jika menggunakan Trumbowyg.

Membuat Custom Media Gallery untuk TinyMCE ini cukup 3 langkah saja, dimana tiap langkah-langkahnya memiliki anaknya sendiri-sendiri, untuk lebih jelasnya silahkan ikuti tutorial di bawah ini.

 

Langkah 1 – Integrasi Bootstrap

Untuk membuat Custom Media Gallery, pertama-tama kita membutuhkan salah satu fitur yang dimiliki oleh Bootstrap yang di sebut dengan Modals, oleh karena itu kita harus meng-integrasikan Bootstrap ke dalam website terlebih dahulu. Lebih jelasnya silahkan kalian ikuti langkah-langkah berikut ini :

  1. Buat folder baru dengan nama /media_gallery, di dalam folder root Virtual Server milik kalian. Bagi yang menggunakan XAMPP bisa di simpan ke dalam folder /htdocs.
  2. Silahkan kalian download Source Code dari artikel berikut, setelah selesai silahkan kalian copy-paste ke dalam folder /media_gallery yang sudah kalian buat pada poin 1 di atas, jangan lupa di extract.
  3. Setelah selesai langkah di atas, selanjutnya silahkan kalian ubah ekstensi file index.html menjadi index.php.
  4. Buka file index.php lalu masukan baris perintah berikut ke dalam tag <head>, tepatnya setelah baris “<script src=”tinymce/js/tinymce/tinymce.min.js”></script>” :
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  5. Selanjutnya, tambahkan pula baris perintah berikut tepat sebelum tag </body> di dalam file index.php :
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  6. Selesai.

Langkah di atas merupakan cara meng-integrasikan modul Bootstrap, khsususnya pada poin 4 dan 5. Untuk saat ini jika kalian akses http://localhost/media_gallery di halaman browser kalian sepintas tidak akan ada perubahan apa-apa karena kita belum menjalankan fitur-fitur Bootstrap di dalamnya.

 

Langkah 2 – Membuat Media Gallery

Seperti yang sudah di bahas sebelumnya, untuk membuat Custom Media Gallery ini kita menggunakan salah satu fitur yang dimiliki oleh Bootstrap, yaitu Modals. Modals sendiri merupakan sebuah jendala yang akan tampil (Pop-Up) jika salah satu tombol atau link yang men-triger jendela Modals tersebut di klik.

Untuk membuat Modals, silahkan kalian ikuti langkah-langkah berikut :

  1. Masih di halaman file index.php, silahkan kalian masukan baris perintah berikut ke dalam tag <body>, tepatnya setelah tag </form> :
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle">Media Gallery</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          
          <div class="modal-body">
            ...
          </div>
        </div>
      </div>
    </div>

    Sekarang, silahkan kalian refresh kembali halaman http://localhost/media_gallery di browser kalian, maka satu buah tombol akan tampil dan jika di klik maka satu buah jendela Modals juga akan ikut tampil.

  2. Selanjutnya, silahkan kalian ubah baris perintah berikut :
    <div class="modal-body">
      ...
    </div>

    Menjadi :

    <div class="modal-body">
      <div class="form-row">
        <?php
          $folder = 'images/';
          $scandir = scandir($folder);
          foreach ($scandir as $file) {
            if (!in_array($file, ['.', '..'])) {
              $filePath = $folder.$file;
              if (is_file($filePath) && preg_match('/^.*\.(jpg|jpeg|png|bmp)$/', $file)) {
                print '<div class="col-2"><img class="imageSelect rounded img-fluid" src="'.$filePath.'" alt="no-img"></div>';
              }
            }
          }
        ?>
      </div>
    </div>


    Pada baris perintah di atas kita menggunakan salah satu fungsi PHP, yaitu scandir(). Fungsi ini akan me-mapping semua file dan folder yang ada di dalam folder ‘/images’, lalu selanjutnya kita menggunakan fungsi foreach() untuk melakukan perulangan dan memfilter jenis file yang akan di tampilkan.

    Dalam baris perintah tersebut hanya file gambar dengan ekstensi *.jpg, *.jpeg, *.png dan *.bmp yang di tampilkan, file-file dengan ekstensi selain tersebut tidak akan di tampilkan.

  3. Terakhir, silahkan kalian buat folder baru dengan nama /images di dalam folder /media_gallery, satu level dengan file index.php, lalu silahkan kalian masukan beberapa file gambar ke dalam folder /images tersebut.

    Jika semua langkah yang kalian lakukan sudah benar, maka tampilan Custom Media Gallery kurang lebih akan seperti pada gambar di bawah ini :

Langkah-langkah di atas merupakan salah satu cara untuk membuat dan menampilkan jendela Custom Media Gallery dengan menggunakan Bootstrap, Custom Media Gallery di atas belum terintegrasi ke dalam modul TinyMCE, jadi meskipun kalian klik gambar-gambar tersebut tidak akan ada respon ke modul TinyMCE.

 

Langkah 3 – Integrasi Custom Media Gallery

Langkah ini merupakan langkah terakhir, yaitu dengan menambahkan satu buah tombol ke dalam toolbar Text Editor TinyMCE, saat tombol tersebut di klik secara otomatis akan menampilkan jendela Custom Media Gallery yang sudah kita buat di atas, ketika salah satu gambar di jendela Custom Media Gallery di klik, maka otomatis gambar tersebut akan masuk ke form input textarea yang aktif.

Silahkan kalian ikuti langkah-langkah berikut :

  1. Silahkan kalian buat folder baru dengan nama /mediaGallery di dalam folder /htdocs/media_gallery/tinymce/js/tinymce/plugins/.
  2. Buka folder /mediaGallery, lalu buat satu buah file baru dengan nama ‘plugin.min.js‘ di dalam folder tersebut, buka file plugin.min.js lalu masukan baris perintah berikut :
    tinymce.PluginManager.add('mediaGallery', function(editor, url) {
      var openDialog = function () {
        $('#exampleModalCenter').modal('show');
      };
      
      // Add a button that opens a window
      editor.ui.registry.addButton('mediaGallery', {
        icon: 'gallery',
        onAction: function () {
          // Open window
          openDialog();
        }
      });
    
      return {
        getMetadata: function () {
          return  {
            name: "Media Gallery",
            url: "https://www.gaswad.com"
          };
        }
      };
    });

    Baris perintah di atas merupakan kode untuk membuat plugin TinyMCE yang dapat kalian lihat kode lengkapnya pada URL berikut :

    Pada baris perintah diatas, penulis hanya menambahkan kode berikut :

    $('#exampleModalCenter').modal('show');

    Kode di atas berfungsi untuk mencari dan menampilkan jendela Modals yang memiliki atribut id=”exampleModalCenter”.

  3. Selanjutnya, silahkan kalian tambahkan plugin dan toolbar ‘mediaGallery ke dalam file index.php kalian masing-masing, lebih jelasnya silahkan lihat pada gambar berikut :

    Saat ini jika kalian refresh kembali halaman http://localhost/media_gallery di browser kalian, maka tombol Gallery secara otomatis akan tampil pada toolbar Text Editor TinyMCE, yang mana jika di klik akan menampilkan jendela Custom Media Gallery.
  4. Selanjutnya silahkan kalian tambahkan baris perintah berikut ke dalam file index.php tepat sebelum tag </body> :
    <script>
      $('.imageSelect').click(function() {
        var ed = tinymce.activeEditor;
        var src = $(this).attr('src');
        var img = '<img src="' + src + '" alt="no-img" style="border-radius:.25rem;">';
        
        ed.selection.setContent(img);
        $('#exampleModalCenter').modal('hide');
      });
    </script>


    Baris perintah diatas akan berfungsi jika salah satu gambar di dalam jendela Custom Media Gallery, yang memiliki classimageSelect‘ di klik, lalu selanjutnya akan di respon oleh TinyMCE melalui fungsi bawaannya, yaitu ed.selection.setContent();.

  5. Terakhir, silahkan kalian hapus baris perintah berikut untuk menghilangkan tombol Modals :
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
      Launch demo modal
    </button>
    

    Saat ini jika salah satu gambar di jendela Custom Media Gallery kalian klik, maka gambar tersebut secara otomatis akan masuk ke form input textarea yang aktif.

Selesai tutorial kali ini, semoga dapat bermanfaat dan membantu kalian yang ingin memiliki Media Gallery buatan sendiri. See you in next tutorial…

 

Share social media :



Your response about this article :


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Posts

Tutorial : Belajar Menggunakan Laravel – Part 5 (Form Input Data)
Tutorial : Belajar Menggunakan Laravel – Part 5 (Form Input Data)
Category : Laravel, Tutorials | November 1st, 2018
1523 | 0

Halo semua, kali ini penulis ingin melanjutkan tutorial cara Belajar Menggunakan Laravel, pada tutorial kali ini penulis ingin memberikan tutorial cara memasukan data ke dalam database yang mana salah satu bagian dari CRUD (Create, Read, Updata, Dele...

Continue reading
Syntax error or access violation: 1071 Specified key was too long
Syntax error or access violation: 1071 Specified key was too long
Category : Laravel, Tips & Tricks | October 18th, 2018
548 | 0

Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pernah mengalami pesan error berikut pada saat melakukan migrasi tabel dengan menggunakan perintah migrate : SQLSTATE[42000]: Syntax error or access violation:...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
Category : Laravel, Tutorials | October 18th, 2018
929 | 0

Halo para pembaca Gaswad, menyambung artikel tutorial Belajar Menggunakan Laravel sebelumnya, kali ini kita akan membahas sedikit tentang pengenalan Model dan bagaimana melakukan Konfigurasi Database, namun pastikan kalian sudah membaca tutorial-tuto...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
Category : Laravel, Tutorials | October 9th, 2018
1481 | 0

Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller (webController.php) namun hanya sebatas sebagai Debugger saja. Halaman Controller memang tidak di khususkan untuk di kostumisasi sebagai Front-End website,...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
Category : Laravel, Tutorials | October 9th, 2018
1035 | 0

Pada artikel kali ini, kita akan belajar menggunakan Routing dan Controller dimana Routing dan Controller ini sudah pasti ada dan disediakan di setiap framework khususnya framework PHP. Sebelum kita melangkah terlalu jauh sampai tidak kelihatan, perl...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 1 (Instalasi Laravel)
Tutorial : Belajar Menggunakan Laravel – Part 1 (Instalasi Laravel)
Category : Laravel, Tutorials | October 9th, 2018
1263 | 0

Halo para pembaca Gaswad yang setia menunggu artikel baru dari penulis (pede), setelah sekian lama tidak update-update karena di sibukan dengan pekerjaan kantor akhirnya hari ini, jam ini, menit ini dan detik ini, penulis berhasil menyempatkan diri ...

Continue reading
Perbedaan Localhost Dan Web Hosting
Perbedaan Localhost Dan Web Hosting
Category : Others | September 17th, 2018
1985 | 0

Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana suatu website bisa menampilkan konten-konten atau artikel seketika kita melakukan pencarian baik dengan menggunakan mesin pencari atau search engine seperti...

Continue reading
Membuat Efek Gradasi Warna Menggunakan CSS
Membuat Efek Gradasi Warna Menggunakan CSS
Category : Tutorials | September 4th, 2018
4197 | 2

Pada tutorial kali ini kita akan mencoba membuat gradasi warna, apa itu gradasi warna bisa kalian lihat contohnya pada gambar-gambar berikut : Yup, seperti yang sudah kalian lihat pada gambar-gambar tersebut dimana pada tiap gambar memiliki lebih dar...

Continue reading
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Category : Tips & Tricks | August 14th, 2018
1142 | 2

Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… Okey langsung saja, untuk artikel kali ini penulis ingin coba berbagi sedikit mengenai tips jika iklan adsense kamu ter-klik, mungkin lebih tepatnya ter-kl...

Continue reading
Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
1218 | 0

Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby (bundler) yang menyediakan format standar untuk mengelola dependensi PHP dan library-library yang diperlukan. Sumber : Wikipedia Jadi secara garis besar, d...

Continue reading
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Category : Tips & Tricks | November 13th, 2017
1438 | 0

Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tampilan bahwa domain kalian di blacklist atau di blokir oleh Google, alhasil tentunya website kalian tidak akan bisa di akses. Ada yang pernah ngalamin?? Bebe...

Continue reading
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Category : Tutorials | November 13th, 2017
2098 | 4

Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. Hehe… 😀 Ssetelah sekian lama ngga update akhirnya dapet kesempatan nyolong-nyolong waktu buat nge-update artikel Gaswad. Pada pembahasan artikel k...

Continue reading

Wordpress

  • Sep
    16
    2019
    Tutorial : Membuat Website Multi-Bahasa Dengan WordPress
    Selamat malam semua, pada tutorial kali ini kita akan coba membuat website dengan fitur Multi-B...
    Read more
  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • More articles
Tips & Tricks

  • May
    15
    2019
    Multiple Versi PHP di XAMPP??? Kenapa Tidak!
    Pada artikel kali ini penulis ingin berbagi tips bagaimana menjalankan multiple versi PHP di da...
    Read more
  • Nov
    02
    2018
    8 Tips Memilih Jasa Server Hosting Terbaik
    Pada artikel kali ini penulis ingin memberikan beberapa tips memilih server hosting terbaik. Ba...
    Read more
  • Oct
    18
    2018
    Syntax error or access violation: 1071 Specified key was too long
    Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pern...
    Read more
  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • More articles
Tutorials

  • Sep
    16
    2019
    Tutorial : Membuat Website Multi-Bahasa Dengan WordPress
    Selamat malam semua, pada tutorial kali ini kita akan coba membuat website dengan fitur Multi-B...
    Read more
  • Jul
    18
    2019
    Tutorial : Integrasi Custom Media Gallery Dengan TinyMCE Dan Bootstrap
    Holllaa…! Apa kabar para calon-calon programer handal yang baik dan budiman! Semoga setel...
    Read more
  • Jul
    18
    2019
    Instalasi Text Editor WYSIWYG TinyMCE
    Sesuai pada judul artikel ini, beberapa kalian pasti masih ada yang belum mengenal apa itu Text...
    Read more
  • Apr
    30
    2019
    Tutorial : Belajar Menggunakan Laravel – Part 8 (Delete Data) END
    Artikel kali ini merupakan artikel terakhir tentang tutorial Belajar Menggunakan Laravel, pada ...
    Read more
  • Apr
    30
    2019
    Tutorial : Belajar Menggunakan Laravel – Part 7 (Update/Edit Data)
    (Curcol) Sempat hilang kabar sampai berbulan-bulan akhirnya penulis kembali lagi untuk melanjut...
    Read more
  • More articles
Others

  • Sep
    17
    2018
    Perbedaan Localhost Dan Web Hosting
    Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana s...
    Read more
  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • More articles
Page generated in : 1024.17 ms