AdityaDees

Postgresql adalah salah satu object-relational database open source yang memiliki banyak fitur enterprise layaknya Oracle. Postgresql juga terkenal sebagai salah satu alternatif database opensource dan gratis yang reliable, rebust dan memiliki performa yang bagus.

Pada saat tulisan ini ditulis, Postgresql telah mencapai versi 13 dan telah tersedia di Windows, Linux dan MacOS. Dan berikut ini adalah dua cara yang dapat digunakan untuk menginstall Postgresql di MacOS.

1. Menggunakan installer dari EnterpriseDB

Ini adalah cara paling mudah dan lengkap untuk menginstall Postgresql di MacOS, yaitu dengan menggunakan file installer berbasis UI yang telah disediakan oleh EnterpriseDB.

File installer Postgresql dari EnterpriseDB dapat diunduh di sini : https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

Seperti disebutkan di atas, EnterpriseDB menyediakan installer untuk beberapa jenis sistem operasi dan beberapa versi Postgresql. Silahkan pilih versi yang sesuai dengan komputer dan kebutuhan Anda, dan pastikan versi Postgresql yang Anda pilih masih disupport oleh Postgresql.

Setelah Anda mengunduh file installer dari EnterpriseDB tersebut di atas, silahkan install dengan cara dobel klik file installer tersebut. Maka akan muncul langkah-langkah untuk menginstall Postgresql dengan basis UI.

Silahkan ikuti dan jalankan installer tersebut sampai selesai. Secara umum, biarkan saja setting default installer tersebut. Kecuali jika Anda menginginkan perubahan setting, misalkan dimana folder dan data akan diinstall, termasuk port yang akan digunakan.

---

Baca juga :
Cara install MariaDB di MacOS dengan menggunakan Homebrew

---

Pada bagian pilihan komponen untuk Postgresql ini, saya sarankan untuk memilih semuanya.

Setelah proses install selesai, maka pada Launchpad MacOS Anda akan muncul beberapa icon PGAdmin dan lain-lain.

Icon pgAdmin 4 untuk menjalankan aplikasi database managemen PGAdmin, sedangkan icon Reload Configuration digunakan untuk mereload setting Postgresql jika Anda melakukan perubahan setting pada Postgresql, misalkan pada file pg_hba.conf.

2. Install Postgresql dengan menggunakan Homebrew

Cara ini cocok untuk Anda yang sudah terbiasa bekerja dengan terminal. Akan tetapi, untuk menggunakan cara ini, pastikan Anda sudah menginstall Homebrew di Mac. Jika belum, maka silahkan install Homebrew terlebih dahulu.

Untuk menginstall Postgresql dengan menggunakan Homebrew, caranya sangat mudah. Anda cukup menjalankan perintah:

brew install postgresql

Dengan perintah di atas, maka Anda akan menginstall Postgresql versi terbaru. Atau jika Anda ingin menginstall Postgresql versi tertentu, maka silahkan jalankan perintah seperti di atas, tetapi kali ini menyertakan versi yang diinginkan yang diawal dengan tanda @. Contoh :

brew install postgresql@10

Selanjutnya Anda tinggal menunggu dan mengikuti proses install tersebut sampai selesai.

Untuk memasukkan Postgresql ke dalam service yang otomatis berjalan setiap kali komputer dinyalakan, maka silahkan jalankan perintah ini:

brew services start postgresql

Atau jika Anda hanya ingin menjalankan Postgresql secara manual, maka silahkan jalankan perintah ini:

/usr/local/opt/postgresql/bin/postgres -D /usr/local/var/postgres

Sekian tip/trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Laravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node.js atau secara umum javascript. Laravel dan npm tidak saling bergantung, artinya Laravel dapat digunakan tanpa npm dan sebaliknya. Akan tetapi, Laravel memberikan kemudahan untuk para penggunanya agar dapat menggunakan javascript dan css untuk membangun UI. Salah satunya dengan menyediakan scaffolding untuk Vue, React dan Bootstrap melalui laravel/ui.

Jika Anda menggunakan laravel/ui untuk membangun UI, maka tentu saja Anda membutuhkan npm dan tentu saja npm membutuhkan node.js. Oleh karena itu, berikut ini adalah langkah-langkah untuk menginstall npm dan menambahkan package di Laravel.

0. Menginstall node.js

Seperti disebutkan di atas, bahwa npm memerlukan node.js dan bahkan jika Anda menginstall node.js, maka secara otomatis akan terinstall npm juga. Oleh karena itu langkah pertama adalah silahkan install node.js terlebih dahulu dengan cara mengunduh di sini : https://nodejs.org

Node.js sudah tersedia untuk Windows, Linux dan MacOS, maka silahkan pilih node.js yang sesuai dengan sistem operasi Anda. Untuk versi, sangat disarankan untuk memilih versi yang LTS (Long Term Support), dikarenakan versi ini adalah versi yang paling stabil dan akan mendapatkan support jangka panjang (30 bulan).

Anda dapat melihat versi node.js dan npm yang terinstall dengan menggunkan perintah :

node --version

npm --version

---

Baca juga :
Apakah Node.js, npm dan bagaimana menginstallnya

---

1. Menginstall dan menambahkan package yang diperlukan

Untuk menginstall package npm yang sudah ditambahkan di dalam project laravel Anda, jalankan perintah : npm install. Dengan perintah ini, npm akan menginstall semua package beserta dependensinya dari file package.json.

Untuk menambahkan package yang Anda inginkan, silahkan masuk ke dalam folder project laravel Anda, kemudian jalankan perintah npm install nama_package . Contoh :

npm install vuetify

2. Compile Javascript dan CSS

Untuk mengcompile javascript dan css tersebut diatas, silahkan jalankan perintah :

npm run dev

Perintah di atas akan mengcompile semua javascript dan css yang digunakan menjadi bundle yang ramah debug. Artinya jika terjadi kesalahan, akan terlihat jelas di console. Atau jika Anda ingin agar setiap perubahan yang Anda lakukan pada script atau css otomatis dicompile ulang, maka gunakan perintah :

npm run watch

Dan jika Anda sudah selesai melakukan pengembangan dan ingin mendeploy aplikasi Anda, maka jalankan perintah di bawah ini untuk mengcompile javascript dan css dalam mode production. Dalam mode ini, proses compile akan menjadi lebih lama dan hasil akhirnya tidak ramah debug tetapi ukuran file menjadi jauh lebih kecil.

npm run production

Sekian artikel tentang cara menambah dan menginstall package npm ke dalam Laravel. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

MariaDB selain tersedia di Windows dan Linux, juga tersedia di MacOS dan dapat diinstall dengan menggunakan homebrew. Berikut ini adalah langkah-langkah dalam menginstall MariaDB versi terbaru dengan menggunakan homebrew.

0. Sudah terinstall Homebrew

Pastikan terlebih dahulu MacOS Anda sudah terinstall homebrew. Jika belum, maka silahkan install homebrew terlebih dahulu.

1. Menginstall MariaDB

MariaDB dapat diinstall dengan menggunakan perintah berikut ini:

brew install mariadb

Proses install biasanya membutuhkan waktu selama beberapa saat, jadi silahkan tunggu sampai proses selesai.

Jika terjadi error seperti gambar di bawah ini, maka abaikan saja.

Kecuali jika Anda memang menginginkan fitur tersebut, maka silahkan jalankan perintah : xcode-select --install

---

Baca juga :
Cara install VSCode di Ubuntu - 2021

---

2. Menjalankan MariaDB

Setelah proses install MariaDB selesai, maka sampai disini, kita sudah bisa langsung menjalankan MariaDB dengan menggunakan perintah :

mysql.server start

Dalam kondisi awal seperti ini, kita bisa terhubung ke MariaDB dengan menggunakan socket dengan perintah :

mysql

Dengan menjalankan perintah mysql ini, tanpa parameter apapun, artinya kita menggunakan current user MacOS yang sedang login, untuk terhubung dengan MariaDB.

atau, jika ingin terhubung ke MariaDB sebagai root, maka jalankan perintah berikut :

sudo mysql -u root

Perintah mysql.server start ini hanya menjalankan MariaDB, tetapi tidak mendaftarkan ke dalam service. Artinya jika komputer Anda restart, maka MariaDB tidak otomatis jalan. Jika ingin agar MariaDB otomatis dijalankan setiap kali komputer dinyalakan, maka jalankan perintah ini:

brew services start mariadb

2. Membuat database dan user baru

Setelah berhasil menginstall MariaDB, biasanya langkah selanjutnya adalah membuat database dan user baru untuk aplikasi yang akan dibuat. Saya pribadi lebih nyaman untuk tidak menggunakan user root, dan membiarkan user root hanya bisa diakses dengan menggunakan socket dari komputer local. Dan adalah termasuk best practice jika setiap aplikasi yang menggunakan database dibuatkan database dan user khusus yang hanya bisa mengakses database tersebut.

Untuk membuat database baru, silahkan masuk terlebih dahulu ke dalam MariaDB dengan menggunakan root atau user Anda. Contoh, kita akan membuat database baru bernama toko .

CREATE DATABASE `toko`;

Setelah itu, buat user baru, misalkan user_toko dengan password 12345.

CREATE USER 'user_toko' IDENTIFIED BY '123456';

Agar user tersebut dapat terhubung ke dalam MariaDB, maka lakukan grant usage darimana user tersebut dapat login. Adalah termasuk best practice juga jika user hanya boleh masuk lewat localhost.

GRANT USAGE ON *.* TO 'user_toko'@localhost IDENTIFIED BY '123456';

Sampai di sini, user diatas baru bisa masuk ke dalam MariaDB via localhost, tetapi masih belum bisa mengakses database toko. Oleh karena itu, silahkan tambahkan grant privileges ke database yang Anda inginkan. Untuk contoh ini adalah database toko.

GRANT ALL privileges ON `toko`.* TO 'user_toko'@localhost;

Karena menggunakan perintah GRANT ALL, maka user_toko dapat melakukan apapun terhadap database toko, mulai dari view, create sampai dengan drop. Oleh karena itu, jika diperlukan, silahkan sesuaikan privileges yang Anda inginkan.

Dengan begini, maka Anda berhasil membuat database dan user baru, dimana user baru tersebut hanya dapat terhubung ke MariaDB melalui localhost.

Sekian tip/trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Sumber :
https://mariadb.com/kb/en/installing-mariadb-on-macos-using-homebrew/

Desain halaman dan dialog tambah data biasanya adalah, User klik tombol yang akan memunculkan dialog, dimana dialog akan otomatis tertutup setelah User menekan tombol simpan dan proses simpan berhasil. Tetapi, adakalanya User ingin dialog tidak otomatis tertutup setelah berhasil simpan data. Ini biasanya berguna jika perlu input banyak data sekaligus. Kali ini kita akan mencoba meng-implementasikan kebutuhan insert data tanpa menutup modal dengan menggunakan Vue.js.

Untuk contoh ini, penulis menggunakan UI framework Vue Material. Anda tidak harus menggunakan Vue Material, yang penting framework yang anda gunakan menyediakan komponen Modal.

Kemudian yang paling penting, solusi ini akan menjadi berguna jika komponen halaman utama/daftar terpisah dengan dialog. Maksudnya, jika halaman utama dan dialog tidak dipisah, maka solusi ini menjadi kurang menarik karena bisa langsung Anda selesaikan dengan mudah dengan memodifikasi langsung state-nya.

Jika halaman utama dan dialog dipisah, maka akan menjadi lebih menarik dan modular, dimana sekarang Modal/Dialog tidak boleh bergantung dengan parent yang memanggil dia.

0. Membuat halaman utama dan modal secara terpisah

Seperti disebutkan disebutkan sebelumnya, kita akan membuat 2 buah komponen, yaitu halaman utama dan dialog. Secara umum struktur folder dan file yang saya buat kurang lebih seperti gambar dibawah ini.

Komponen untamanya adalah App.vue, sedangkan komponen untuk modal dialognya adalah Modal.vue yang berada di folder components.

<template>
  <div id="app">
    <md-toolbar>
      <md-button @click="addData" class="md-primary">Add Data</md-button>
    </md-toolbar>
    <md-list class="md-double-line">
      <md-list-item  v-for="(i, index) in items" :key="index">
        <div class="md-list-item-text">
          <span>{{ i.nama }}</span>
          <span>{{ i.alamat }}</span>
        </div>
      </md-list-item>
    </md-list>
    <Modal ref="dlg" />
  </div>
</template>

<script>
import Modal from "./components/Modal";
export default {
  name: "App",
  data() {
    return {
      items: [
        { nama: "Fulan", alamat: "Jl. Berbatu nan terjal" },
        { nama: "Fulana", alamat: "Jl. Berkelok nan menanjak" },
      ],
    };
  },
  components: {
    Modal,
  },
  methods: {
    addData() {
      this.$refs.dlg.open();
    },
  },
};
</script>

<template>
  <md-dialog :md-active.sync="showDialog">
    <md-dialog-title>Add data</md-dialog-title>
    <md-card>
      <md-card-content>
        <md-field>
          <label>Nama</label>
          <md-input v-model="nama"></md-input>
        </md-field>

        <md-field>
          <label>Alamat</label>
          <md-textarea v-model="alamat"></md-textarea>
        </md-field>
      </md-card-content>
    </md-card>
    <md-dialog-actions>
      <md-button class="md-primary" @click="showDialog = false"
        >Close</md-button
      >
      <md-button class="md-primary" @click="apply">Save</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      resolve: null,
      reject: null,

      nama: "",
      alamat: "",
    };
  },
  methods: {
    open() {
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
        this.showDialog = true;
      });
    },
    apply() {},
  },
};
</script>

<style>
</style>

Tampilan awalnya kurang lebih seperti ini.

Pada kode awal di atas. Pada halaman utama (App.vue), user akan menekan tombol Add Data yang akan membuka dialog. Setelah user mengisi dan menekan tombol Save, maka data akan otomatis bertambah pada halaman utama tanpa perlu menutup Dialog.

---

Baca juga :
Vue+Vuetify : Menggunakan VDialog/v-dialog agar menjadi Promise based komponen

---

1. Komunikasi Child to Parent dengan menggunakan event

Design halaman Utama dengan Modal seperti ini bisa disebut dengan Parent (App.vue) Child (Modal.vue). Komponen Modal perlu berkomunikasi dengan Parent (yang memanggil) pada saat ditekan tombol Save. Maka solusinya adalah dengan menggunakan custom event yang dikirim dengan menggunakan $emit.

Untuk contoh ini, kita akan menambahkan custom event bernama on-save di komponen Modal.vue, yang akan di trigger pada saat user menekan tombol save. Pada contoh ini, pada saat tombol Save ditekan, akan memanggil method apply.

Tambahkan custom event dengan menggunakan $emit(<nama event>,<data yang dikirim>) pada method apply di komponen Modal.vue.

<template>
  ...
</template>

<script>
export default {
  ...
  methods: {
    ...
    apply() {
      this.$emit("on-save", {
        nama: this.nama,
        alamat: this.alamat,
      });
      // reset
      this.nama = "";
      this.alamat = "";
    },
  },
};
</script>

on-save adalah nama custom event yang di trigger. Dan data yang dikirimkan adalah object yang berisi nama dan alamat yang diinput user.

Untuk menangkap event on-save ini, silahkan tambahkan v-on:<nama_event> di halaman utama (App.vue). Dalam hal ini adalah v-on:on-save atau disingkat dengan @on-save.

<template>
  <div id="app">
    ...
    <Modal ref="dlg" v-on:on-save="simpan" />
  </div>
</template>

<script>
import Modal from "./components/Modal";
export default {
  ...
  methods: {
    ...
    simpan(obj) {
      this.items.push(obj);
    },
  },
};
</script>

v-on:on-save="simpan" artinya, pada saat terjadi event on-save pada komponen Modal, panggil method simpan. Dimana pada method simpan, data yang diinput akan dimasukkan ke dalam array.

Di bawah ini kira-kira hasil akhirnya.

Mudah sekali bukan. Dalam banyak kasus, custom event ini akan sangat membantu aliran data child ke parent. Dimana hal ini akan sering terjadi jika Anda membagi aplikasi ke dalam komponen-komponen terpisah, yang harus saling berkomunikasi.

Sekian tip/trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Jika Anda adalah seorang desainer atau programmer yang sering utak-utik desain theme Wordpress, maka mungkin Anda akan sering menginstall beberapa website Wordpress di local komputer. Dan hal ini bukan hal yang sederhana, terutama untuk yang belum terbiasa dengan apa itu database, webserver atau hostname dan lain-lain. Kira-kira bisa tidak Wordpress itu diinstall di local hanya dengan klak-klik langsung bisa dipakai ? Jawabannya bisa.

Jika dahulu user harus sedikit kerepotan jika ingin meng-install Wordpress di local, mulai dengan meng-install database, kemudian webserver + php dan kadang harus setting hostname juga, maka saat ini Wordpress sudah dapat diinstall di local komputer dengan sangat mudah dan cepat. User hanya perlu klik-klik saja maka akan langsung selesai dan bisa digunakan. Nah, salah satu installer Wordpress yang penulis rekomendasikan adalah Local

Local adalah sebuah aplikasi atau tool untuk mempermudah dalam pengembangan di lingkungan Wordpress. Jadi, sesuai namanya, jangan pernah menggunakan Local untuk men-deploy Wordpress di production. Berikut ini adalah cara mudah untuk meng-install Wordpress di local komputer dengan menggunakan Local.

1. Unduh file installer Local

Seperti biasa, silahkan Anda unduh terlebih dahulu file installer Local di sini : https://localwp.com/. Local tersedia untuk Windows, Linux dan Mac.

2. Install Local

Setelah Anda mengunduh file installer Local. Selanjutnya silahkan install dengan cara dobel klik file tersebut. Untuk selanjutnya silahkan ikuti langkah-langkah-nya dengan seksama. Di bawah ini adalah contoh langkah-langkah installer di Windows.

Sampai di sini, Anda sudah berhasil meng-install Local di komputer Anda. Silahkan centang pilihan Run Local untuk menjalankan Local setelah Anda menekan tombol Finish.

3. Membuat website di Local

Jika Anda baru meng-install Local, maka akan ada informasi Terms of Service. Silahkan centang dan klik tombol I Agree.

Selanjutnya akan muncul halaman create account yang bisa Anda abaikan dengan menekan tombol X di pojok kanan atas (di bawah window X).

Selanjutnya silahkan mulai membuat website baru bisa dengan menekan tombol Create a new site.

Silahkan tuliskan nama website yang Anda inginkan. Contoh : Guru Berbagi. Local akan secara otomatis memilihkan nama domain dan lokasi install untuk website Anda. Untuk contoh ini, maka Local akan otomatis memilihkan guru-berbagi.local sebagai domain lokal yang nantinya bisa Anda akses dari Browser. Silahkan sesuaikan dengan kebutuhan Anda jika diperlukan. Klik continue untuk melanjutkan.

Klik tombol Advanced Options untuk melain detail setting dari website yang akan Anda buat.

---

Baca juga :
Cara install VSCode di Ubuntu - 2021

---

Halaman ini berisi informasi tentang environment dari website yang akan Anda buat. Mulai dari versi database, php dan webserver. Jika tidak ada yang khusus, maka biarkan pilihan di Preferred saja. Kecuali jika Anda menginginkan versi yang custom, maka silahkan pilih Custom. Klik continue.

Halaman selanjutnya ini adalah satu-satunya yang Anda harus mengetik. Silahkan tuliskan username dan password untuk website Wordpress ini. User ini nanti akan otomatis menjadi user pertama dan Administrator. Sedangkan isian email bisa Anda abaikan saja.

Tekan tomboll Add Site untuk mulai membuat dan men-setting website tersebut. Pada proses ini, mungkin akan muncul permintaan untuk input password administrator Komputer. Maka silahkan masukkan password administrator komputer Anda. Hal ini dikarenakan ada proses membuat hostname atau lainnya yang membutuhkan hak akses administrator.

Selain itu, jika Anda menggunakan Windows atau sistem operasi lain yang menggunakan firewall, maka akan muncul popup konfirmasi untuk meng-allow akses Local. Silahkan klik tombol Allow access.

Silahkan tunggu proses install dan setting website selesai. Di sini Local akan secara otomatis mengunduh kode sumber Wordpress untuk kemudian di install. Oleh karena itu, pastikan Anda mempunyai akses internet dan kuota yang cukup tentunya.

Seperti inilah kira-kira tampilan Local jika proses install dan setting website Anda selesai.

Pada tampilan di atas, terdapat dua tombol yaitu Admin dan Open Site. Tombol Admin akan mengarahkan Anda langsung ke halaman wp-admin, sedangkan open site akan mengarahkan ke halaman depan.

Kesimpulan

Aplikasi Local ini berhasil membuat proses install dan setting Wordpress yang jika dikerjakan secara manual akan sangat menyulitkan, menjadi sangat mudah dan cepat. Bahkan pengguna yang kurang terbiasa dengan pemrograman pun akan bisa.

Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Package Control, sesuai dengan namanya, adalah sebuah Package Manager yang berguna untuk mengatur semua package atau kalau di Text Editor lain adalah ekstensi. Dengan menggunakan Package Manager ini, maka pengguna Sublime Text akan lebih mudah dalam meng-install atau meng-uninstall package yang ada.

Sampai dengan tulisan ini ditulis, Package Control ini anehnya tidak otomatis ter-install di Sublime Text. Pengguna harus meng-install sendiri, yang untungnya saat ini sudah jauh lebih mudah dibandingkan dengan Sublime Text versi yang lama. Berikut ini adalah cara untuk meng-install Package Conctrol di Sublime Text 3 atau 4 dengan mudah.

Silahkan jalankan Sublime Text, kemudian klik menu Tools > Install Package Control.

Kemudian silahkan tunggu selama beberapa detik sampai dengan proses install Package Control selesai, yang ditandai dengan informasi seperti gambar di bawah. Dengan ini nmaka Anda sudah berhasil meng-install Package Control di Sublime Text. Sangat mudah bukan.

---

Baca juga :
Cara mudah menginstall Package Control di Sublime Text

---

Untuk meng-install atau meng-uninstall package, silahkan klik menu Tools > Command pallette,

kemudian ketikkan : install, lalu pilih Package Controll : Install Packageuntuk meng-install. Atau ketikkan remove, lelu pilih Package Control : Remove Package untuk meng-hapus/uninstall package.

Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

GrapesJS adalah sebuah Web Builder Framework yang gratis dan opensource yang ditujukan untuk mempermudah pengguna dalam membuat template HTML tanpa pengetahuan coding sama sekali. GrapeJS ini juga dapat diintegrasikan ke dalam framework javascript lain seperti Angular, Reactjs atau Vue. Berikut ini adalah salah satu cara untuk meng-install dan meng-integrasikan GrapesJS ke dalam Vue 2.

Sebelum lanjut, pastikan Anda sudah meng-install node.js yang secara otomatis sudah termasuk npm. Bisa juga Anda meng-install yarn sebagai alternatif lain dari npm.

---

Baca juga :
Apakah Node.js, npm dan bagaimana menginstallnya

---

0. Menyiapkan project Vue 2

Jika Anda belum membuat project vue, maka silahkan buat terlebih dahulu, bisa dengan menggunakan vue cli atau dengan cara manual.

vue create test_grapesjs

Silahkan buka project Vue Anda dengan menggunakan text editor. Jika Anda baru membuat project Vue dengan cli seperti contoh di atas, maka di bawah ini tampilan struktur project Anda.

Silahkan buka komponen App.vue lalu hapus komponen-komponen dan css yang tidak diperlukan. Untuk contoh ini, kita tidak membutuhkan komponen HelloWorld dan css untuk id #app. Seperti ini kira-kira struktur akhir dari komponen App.vue

1. Install/menambahkan GrapesJS

Dengan menggunakan Terminal kesayangan Anda, silahkan masuk ke dalam folder tempat project Anda berada. Kemudian jalankan perintah yarn add grapesjs jika Anda menggunakan yarnatau npm i grapesjs jika Anda menggunakan npm.

2. Import GrapesJS

Setelah Anda meng-install GrapesJS, maka selanjutnya kita akan tambahkan GrapesJS ke dalam project dengan cara import langsung ke komponen App.vue.

Anda bisa saja membuat komponen terpisah untuk GrapesJS ini, akan tetapi kali ini kita akan langsung menambahkan GrapesJS ke dalam App.vue karena lebih mudah dan sederhanan.

Silahkan import GrapesJS beserta css nya seperti kode di bawah ini.

<template>
  <div id="app">
  </div>
</template>

<script>
import grapesJS from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

export default {
  name: 'App',
}
</script>

<style>
</style>

---

Baca juga :
Apakah Node.js, npm dan bagaimana menginstallnya

---

3. Render GrapesJS

Untuk me-render atau memasang GrapesJS, maka kita bisa menggunakan event mounted dari Vue. Silahkan tuliskan kode seperti di bawah ini di dalam event mounted.

export default {
    name: "App",
    mounted() {
        grapesJS.init({
            showOffsets: 1,
            fromElement: 1,
            container: "#app",
            height: "100%",
            avoidInlineStyle: false,
            plugins: [],
            pluginsOpts: {
            },
        });
    },
};

Yang perlu diperhatikan di sini adalah pada property container. Untuk contoh ini diisi dengan #app dikarenakan editor GrapesJS ini akan ditempelkan pada <div id="app">. Silahkan sesuaikan dengan id dari div yang Anda gunakan.

Sampai disini, silahkan coba jalankan aplikasi ini dengan menggunakan perintah yarn serve.

Untuk melihat hasilnya, silahkan buka Browser kemudian tuliskan alamat yang tertera pada hasil yarn serve pada bagian Local. Untuk contoh di atas pada alamat localhost:8082. Bisa jadi ini berbeda dengan milik Anda. Tampak hasilnya kurang begitu sesuai. Hal ini karena kita masih harus melakukan beberapa penyesuaian style.

4. Penyesuaian style

Untuk memperbaiki tmapilan dari editor GrapesJS di atas, maka silahkan tambahkan style berikut ini di bagian bawah dari App.vue.

<template>
    <div id="app"></div>
</template>

<script>
    import grapesJS from "grapesjs";
    import "grapesjs/dist/css/grapes.min.css";

    export default {
        name: "App",
        mounted() {
            grapesJS.init({
                showOffsets: 1,
                fromElement: 1,
                container: "#app",
                height: "100%",
                avoidInlineStyle: false,
                plugins: [],
                pluginsOpts: {},
            });
        },
    };
</script>

<style>
    body,
    html {
        height: 100%;
        margin: 0;
    }
</style>

Maka hasilnya akan menjadi lebih baik.

5. Menambahkan Preset

Jika Anda perhatikan hasil di atas, maka tampak editor GrapesJS tersebut masih kosong dari toolbox (komponen drag drop masih kosong). Hal ini dikarenakan kita belum menambahkan preset ke dalam GrapesJS. Preset ini sederhananya adalah kumpulan setting dan komponen untuk membangun editor GrapesJS. Berikut ini adalah beberapa preset yang sudah disediakan oleh GrapesJS.

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Untuk kali ini, kita akan mencoba menggunakan preset untuk Webpage Builder. Silahkan tambahkan package grapesjs-preset-webpage ke dalam project dengan menggunakan perintah yarn di bawah ini.

yarn add grapesjs-preset-webpage

atau dengan npm.

npm i grapesjs-preset-webpage

Kemudian tambahkan grapesjs-preset-webpage ke dalam GrapesJS sebagai berikut:

import grapesWEB from "grapesjs-preset-webpage";
import "grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css";

export default {
    name: "App",
    mounted() {
        grapesJS.init({
            showOffsets: 1,
            fromElement: 1,
            container: "#app",
            height: "100%",
            avoidInlineStyle: false,
            plugins: [grapesWEB],
            pluginsOpts: {
                [grapesWEB]: {
                    // options
                },
            },
        });
    },
};

Maka tampilan GrapesJS akan berubah menjadi Web Builder dengan toolbox yang lebih lengkap.

Keseluruhan kode App.vue

<template>
    <div id="app"></div>
</template>

<script>
import grapesJS from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

import grapesWEB from "grapesjs-preset-webpage";
import "grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css";

export default {
    name: "App",
    mounted() {
        grapesJS.init({
            showOffsets: 1,
            fromElement: 1,
            container: "#app",
            height: "100%",
            avoidInlineStyle: false,
            plugins: [grapesWEB],
            pluginsOpts: {
                [grapesWEB]: {
                    // options
                },
            },
        });
    },
};
</script>

<style>
body,
html {
    height: 100%;
    margin: 0;
}
</style>

Dengan ini maka Anda sudah berhasil meng-integrasikan GrapesJS ke dalam Vue. Selanjutnya silahkan lakukan eksperimen dengan menggunakan preset yang lain atau bahkan membuat plugin sendiri sesuai dengan kebutuhan.

Sekian tip dan trik kali ini.Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Sumber : https://github.com/artf/grapesjs