WordPress - Implementasi Low-Code Builder

Pada kesempatan kali ini, kita akan membahas tentang Implementasi Low-Code Builder pada WordPress. Seperti yang kita ketahui, WordPress adalah salah satu CMS (Content Management System) yang sangat populer digunakan untuk membangun website. Namun, apakah kalian tahu bahwa pengembangan website dengan WordPress dapat menjadi lebih efisien dengan menggunakan Low-Code Builder?

 

Apa itu Low-Code Builder? Low-Code Builder adalah sebuah platform yang memungkinkan kita untuk membangun aplikasi atau website dengan kode yang minim atau bahkan tanpa kode sama sekali. Dengan Low-Code Builder, kita dapat membuat website dengan cepat dan mudah tanpa harus memiliki keahlian pemrograman yang mendalam.

 

Nah, mengapa kita harus menggunakan Low-Code Builder pada WordPress? Dalam pengembangan website dengan WordPress, terkadang kita memerlukan plugin atau tema yang dibuat khusus untuk memenuhi kebutuhan website kita. Namun, tidak semua plugin atau tema yang tersedia di pasar dapat memenuhi kebutuhan kita dengan sempurna. Dalam hal ini, Low-Code Builder dapat membantu kita untuk membuat plugin atau tema yang sesuai dengan kebutuhan website kita.

 

Selain itu, dengan menggunakan Low-Code Builder, kita dapat menghemat waktu dan biaya dalam pengembangan website. Dalam waktu yang singkat, kita dapat membuat website yang kompleks dan sesuai dengan kebutuhan kita tanpa harus menyewa tenaga ahli atau programmer yang mahal.

Salah satu platform low-code builder yang cukup populer dan sudah kita gunakan di materi-materi sebelumnya adalah elementor, ini merupakan salah satu plugin untuk membuat page yang digunakan oleh banyak orang. Melalui plugin ini kamu bisa membuat page baru atau mengubah page yang sudah ada. Semisalkan kita akan menyesuaikan halaman about saat ini, kita tidak perlu banyak menyentuh kode pemrograman kita hanya perlu elementor dan melakukan drag-and-drop elemen yang dibutuhkan

Gambar halaman about.

Tutorial

Saat ini kita akan menyesuaikan kontak, semisal pada contoh gambaran awalnya seperti yang ditunjukan gambar dibawah ini.

Gambar halaman kontak sebelum penyesuaian.

 

Kita ubah sesuaikan text dan videonya menjadi sebagai berikut. Jika kamu ingin mengubah color text kamu klik text yang ingin warnanya kamu ubah dan pergi ke style. Untuk video kamu klik videonya dan di sidebar kamu akan melihat choose File dan upload menggunakan self hosted. Seperti yang ditandai dengan warna merah dan orange pada gambar.

Gambar section 1 yang sesudah penyesuaian.

 

Untuk section berikutnya kamu bisa ubah icon yang berwarna kuning.

Gambar Section 2 sebelum diubah.

 

Untuk mengubah ikon tersebut kamu bisa klik ikonnya dan pada menu sidebar kamu bisa pilih choose image tentukan dengan ikon yang kamu miliki berikutnya untuk size kamu ubah pada image size menjadi 150x150.

Gambar Section 2 setelah diubah.

Kita akan mengubah text tersebut menjadi sesuai dengan logo Vitech

Gambar Section 3 sebelum text color diubah.

 

Untuk menyesuaikannya seperti sebelumnya kita klik text yang ingin kita ubah pergi ke style dan pada bagian Text color kita ganti dengan warna yang kita inginkan.

Gambar Section 3 setelah text color diubah.

Section berikutnya kita ubah, gambar member tersebut menjadi member Virtech. Kita akan menghapus kolomnya langsung dengan cara menekan tanda silang seperti yang ditandai pada gambar.

Gambar Section 4 sebelum diubah.

Pada gambar bawah ini, tarik image ke posisi yang ditunjukan pada gambar.

Gambar Section 4 saat proses pengubahan.

Untuk memasukan gambar yang kita miliki kamu bisa mengklik area yang ditandai dengan warna merah seperti yang ditunjukan gambar dibawah ini.

Gambar Section 4 setelah diubah.

Berikut merupakan hasil dari apa yang telah kita ubah mengikuti tutorial diatas, hasilnya ditunjukan oleh gambar dibawah ini.

Gambar halaman kontak setelah diubah.

 

Meningkatkan Produktivitas Tim

Jika kamu bekerja secara tim maka WordPress Low-Code Dashboard Builder ini bisa meningkatkan produktivitas tim kamu, bagaimana ini bisa meningkatkan produktivitas tim kamu? Berikut penjelasannya.

1. Mempercepat proses pengambilan data

Dengan menggunakan dashboard WordPress, tim kamu bisa melihat datanya dalam satu tempat dan waktu yang sama. Dengan begitu data yang ada mudah diakses dan dibaca, tim akmu juga dapat dengan cepat mengambil keputusan yang berkaitan dengan strategi dan taktik pemasaran.

2. Meningkatkan kolaborasi tim

Dashboard WordPress dapat diakses oleh semua anggota tim, sehingga memungkinkan tim kamu untuk berkolaborasi dengan lebih efektif. Anggota tim juga dapat dengan mudah memperoleh wawasan tentang kinerja dari situs web yang dikelola, membuat perubahan dan memantau hasilnya.

3. Meningkatkan efisiensi tim

Kamu juga dapat melakukan otomatisasi tugas-tugas tertentu dengan dashboard WordPress, untuk menghemat waktu. Misalnya, kamu bisa mengirim email pemberitahuan setiap kali ada komentar baru atau ada yang memesan produk kamu. Ini akan membantu kamu untuk tetap terorganisir dan fokus pada tugas yang lebih penting.

4. Memudahkan pelaporan

Dashboard ini juga memungkinkan tim kamu untuk membuat laporan yang lebih efektif dan akurat. Tim kamu dapat membuat laporan dengan cepat dan mudah, sehingga memberikan informasi yang lebih baik tentang kinerja dan capaian proyek dari situs web yang dikelola.

 

 

Kesimpulannya tools ini sangat berguna untuk meningkatkan produktivitas tim. Dengan kemampuannya yang mudah diakses dan mudah dibaca, tim kamu dapat dengan sangat cepat mengambil keputusan yang berkaitan dengan strategi dan taktik pemasaran.

 

Meningkatkan akurasi dan konsistensi

Selain meningkatkan produktivitas tim, dashboard ini juga dapat meningkatkan akurasi dan konsistensi, ini disebabkan informasi yang divisualisasikan sehingga lebih mudah dipahami.

 

1. Menampilkan data dalam bentuk visual yang mudah dibaca.

Ketika kamu menggunakan dashboard WordPress, data yang terkumpul akan ditampilkan dalam bentuk visual. Ini akan membantu kamu dalam meningkatkan akurasi dan konsistensi karena informasi dapat lebih mudah dipahami dan divisualisasikan.

2. Menyederhanakan proses pengambilan keputusan.

Kamu mungkin pernah menghadapi kasus dimana ketika kamu sedang berdiskusi dengan tim untuk mengambil keputusan namun dikarenakan data yang berbeda-beda dari sumber yang berbeda juga menyebabkan pengambilan keputusan tersebut lama. Hal ini bisa diatasi dengan mengakses informasi yang sama sehingga proses pengambilan keputusan lebih cepat.

3. Mengotomatisasi tugas yang berulang.

Seperti yang sudah dipaparkan pada sub materi sebelumnya, dengan menggunakan dashboard WordPress. Kamu dapat mengotomatisasi beberapa tugas tertentu sehingga menghemat waktu. Ini membuat kamu meninggalkan tugas-tugas yang berulang dan fokus ke tugas lainnya.

4. Mengintegrasikan sumber daya data yang berbeda.

Dashboard WordPress memungkinkan kamu untuk mengintegrasikan sumber daya yang berbeda seperti Google Analytics, Facebook Ads, dan sejenisnya. Dengan dimungkinkannya mengintegrasikan berbagai data dari berbagai sumber, ini membuat dashboard WordPress kamu semakin akurat dan konsisten.

 

Berdasarkan paparan diatas, bisa kita simpulkan bahwa WordPress Low-Code Dashboard Builder adalah sebuah tools yang sangat berguna dalam pengambilan keputusan berdasarkan data. Dengan kemampuan untuk memvisualisasikan data, mengidentifikasi anomali dan masalah, serta membandingkan kinerja, dashboard ini dapat membantu kita memahami tren dan pola dalam data dengan lebih mudah. Disisi lain, penggunaan dashboard ini juga dapat meningkatkan produktivitas tim, meningkatkan akurasi dan konsistensi, serta menyederhanakan proses pengambilan keputusan. Karena itu juga, WordPress Low-Code Dashboard Builder adalah solusi yang tepat untuk meningkatkan efektivitas pada lini bisnis serta pengambilan keputusan yang lebih baik.

 

Implementasi CRUD di Retool

1. Langkah pertama yang harus kamu lakukan adalah membuat akun Retool dengan melakukan registrasi pada halaman ini.
2. Masuk ke halaman utama retool kamu.
3. Pada navigasi pergi ke Database.

4. Buat tabel baru dengan mengklik ikon yang ditandai pada gambar dibawah.

5. Beri nama tabel klik lalu add field untuk menambahkan kolom.

6. Buat kolom title dengan konfigurasi seperti yang diperlihatkan pada gambar.

7. Buat juga kolom description dengan konfigurasi yang sama seperti kolom title.
8. Terakhir buat kolom status dengan konfigurasi seperti gambar dibawah ini (ubah preset menjadi checkbox).

9. Lalu tekan tombol create.
   
10. Berikutnya kita buat data dummy, klik Add row pada halaman tbl_todo.

11. Isikan data dummy yang dibutuhkan sehingga datanya menjadi seperti pada gambar dibawah ini.

12. Berikutnya kita buat App baru dengan cara kembali lagi ke halaman utama dan klik Create app -> App.

 

13. Berikan nama yang kamu inginkan yang dimisalkan disini adalah Todo List, lalu tekan tombol Create app.

14. Setelahnya kamu akan diarahkan ke halaman dibawah ini.

15. Ganti mana query1 dengan getListTodo.

16. Pada bagian statement SQL ubah SQLnya menjadi seperti yang ditunjukan pada gambar (select * from tbl_todo).

 

17. Lalu klik run, maka tabelmu seharusnya seperti gambar yang ditunjukan dibawah ini.

18. Saat ini kita telah menyelesaikan bagian Read.
19. Berikutnya kita akan mengerjakan bagian Update, pada bagian ini kita akan menambahkan tombol mark done (tandai selesai pada todo list).
20. Duplikasi getListTodo dan rename menjadi updateTodo, ubah SQL Mode menjadi GUI Mode, pada bagian tabel pilih tabel yang sudah kita buat dan action type nya atur menjadi Update an existing record. Seperti yang ditunjukan pada gambar dibawah ini.

 

21. Klik tabel dan pada bagian inspector, bagian action tambahkan actione baru dengan mana Mark as done, atur action querynya menjadi updateTodo. Dan pindahkan Column position ke kanan.

22. Kembali lagi pada updateTodo, pada bagian filter by ubah menjadi id = {{table1.data.id[i]}}, dan Changeset nya atur menjadi status dengan value true, seperti yang ditunjukan pada gambar dibawah ini.

23. Scroll kebawah pada bagian event handlenya success klik tanda tambah dan atur Actionnya menjadi Control query dan querynya manjadi getListTodo, seperti yang ditunjukan pada gambar dibawah ini.

24. Lalu coba klik tombol Mark as done yang ada pada tabel baris pertama, jika berhasil maka statusnya akan menjadi ceklis hijau seperti yang ditunjukan gambar dibawah ini.

25. Sekarang kita akan menambahkan fungsi hapus.
26. Duplikasi updateTodo dan rename menjadi deleteTodo. Ubah action typenya menjadi delete a record. Sehingga pengaturannya menjadi seperti yang ditunjukan pada gambar dibawah ini.

 

27. Klik tabel dan pada bagian inspect, tambahkan action delete dan pada bagian action querynya atur menjadi deleteTodo.

28. Lalu coba gunakan tombol delete tersebut. Jika berhasil maka data akan terhapus. Seperti yang ditunjukan pada gambar dibawah ini.

29. Fungsi yang berikutnya kita akan tambahkan adalah fungsi insert atau memasukan data baru.

 

30. Klik bagian bawah pada tabel dan pada bagian inspect centang Show add button.

31. Langkah berikutnya adalah duplikat deleteTodo dan rename menjadi insertTodo. Pada bagian action type ganti menjadi insert a record. Pada bagian Changeset ubah dari Key value pairs menjadi object dan pada kolom object isikan dengan {{ table1.newRow }}. Jadi konfigurasi yang kita lakukan ditunjukan pada gambar dibawah ini.

32. Oke selesai deh tutorial CRUD todo list kita teman-teman bisa explore sendiri lebih jauh lagi dan sesuaikan dengan kebutuhan teman-teman.

 

Praktikum

Ikuti tutorial yang diberikan pada pemaparan diatas dan implementasikan apa yang dijabarkan diatas pada WordPress yang kamu instal di lokal komputer kamu!