Menampilkan Database MYSQL Dengan Electron Framework

Hai kawan, kali ini saya ingin berbagi cara untuk menampilkan isi dari database dalam bentuk tabel melalui framework Electron. Untuk menampilkan/mencetak isi database Mysql dalam bentuk tabel kita menggunakan javascript. Pada tutorial sebelumnya kita telah berhasil melakukan insert data kedalam database Mysql jadi pasti data tersebut harus kita tampilkan, nah bagi teman-teman yang belum tahu cara melakukan insert data ke database mysql dengan electron silakan kunjungi link berikut  Insert Database MYSQL Dengan Electron Framewrok . Baik jika teman-teman sudah tahu cara insert kita mulai langkah-langkahnya.

Hal yang perlu disiapkan yaitu “XAMPP”, “text editor”, ”database disini saya menggunakan database dengan nama ‘tutory’ ”, dan “file index.html”. untuk file “index.html” teman-teman bisa download  DISINI , atau teman-teman juga bisa membuatnya sendiri. Apakah harus nama filenya “index.html” ? jawabannya adalah tidak, jika teman-teman ingin membuat file dengan nama lain boleh saja namun ingat path yang dituju pada file “main.js” harus kalian sesuaikan dengan nama “nama_file.html” tersebut.

1. Langkah pertama kita aktfikan “XAMPP”, Barikut isi folder “tutory” saya :

2. Selanjutnya kita edit file “index.html” dengan text editor, berikut isi file “index.html” yang saya buat :

Penjelasan gambar di atas :

• Pada bagian body kita membuat sebuah tombol yang nantinya jika tombol tersebut diklik maka akan memanggil fungsi “cetak_tabel()”. Kemudian kita juga membuat tag “table” dengan id=”tabel” yang di dalamnya berisi sebuah tag “div dengan id=’dvTable’ ”. kenapa di dalam tag table tersebut hanya berisikan sebuah tag div ? karena nantinya kita akan membuat sebuah tabel secara dinamis yaitu tabel yang dibuat ketika aplikasi berjalan, nah tag div tersebutlah yang nantinya kita gunakan sebagai properti untuk membuat isi dari tabel yang akan kita cetak baik berupa “tabel header”, “kolom”, ”baris”, dan “cell” pada tabel.

• Di dalam fungsi cetak tabel kita inisialisasikan sebuah array dengan nama data, dimana kita “push” atau masukan ke array data berupa ‘Id’, ‘Nama’, dan ‘Usia’ karena data tersebut akan kita gunakan sebagai ‘tabel header’ dari tabel yang akan kita buat. Variabel “panjang” digunakan untuk menghitung panjang atau ‘length’ dari array ‘data’. Variabel panjang dikurangi 1 karena length array data ada 4 termasuk ‘0’ , kita hanya akan mencetak ‘Id’, ‘Nama’, dan ‘Usia’ sehingga length array yang kita perlukan yaitu 3. Variabel ‘i’ sebagai variabel bantu pada looping.

• var table = document.getElementById("tabel") maksudnya adalah kita membuat variabel table (var table) yang berasal dari elemen html dengan id=”table” (lihat bagian body). Kita set border tabel menjadi 2 atau bebas berapa pun boleh.

• Kita inisialisasi var row yang nantinya digunakan untuk menambahkan 1 buah baris, nilainya yaitu -1 karena jika tidak -1 maka akan error (saya sudah coba 😊)

• Selanjutnya terdapat looping yang digunakan untuk membuat header dari tabel. Di dalam looping terdapat var header yang digunakan untuk membuat elemen html baru yaitu “TH” atau table header. heder.innerHTML = data[0][i] ini digunakan untuk mencetak nilai yang tersimpan pada array data.

• Setelah proses looping untuk mencetak header selsesai maka kita membuat koneksi database mysql karena kita akan mencetak isi database mysql yaitu database dengan nama ‘tutory’. Jika sobat belum tahu cara untuk koneksi database mysql dengan electron silakan klik link berikut Membuat Koneksi Electron Dengan Mysql

• Pada bagian connection.query kita masukan query untuk mencetak semua isi tabel ‘user’. Nah jika query tidak error maka data akan dicetak.

• Proses mencetak data atau value dari database kita gunakan perulangan ‘forEach’ karena agar kita tidak perlu menentukan banyaknya baris yang ada pada tabel database yaitu tabel ‘user’. Setelah itu kita buah variabel array dengan nama ‘a’ dan kita push data kedalamnya. Data yang dipush ke array ‘a’ adalah nilai dari database setiap baris yaitu nilai dari “user_id”, “nama”, dan “usia”. Setiap perulangan maka nilai dari variabel array ‘a’ ini akan berubah sesuai dengan nilai dari baris dalam databasenya.

• Selanjutnya hampir sama ketika kita membuat header disini kita juga membuat variabel untuk menambahkan sebuah baris yaitu variabel ‘ro’. Untuk variabel panjang digunakan untuk menampung panjang dari array ‘a’. 

• Proses perulangan ‘for’ tersebut digunakan untuk mencetak baris beserta isi dari array ‘a’ dimana array ‘a’ isinya adalah nilai tiap baris pada database. 

• Setelah semua isi database tercetak maka koneksi akan diakhiri (connection.end()).

3. Setelah selesai membuat file “inedex.html” maka ingat save dan sekarang coba buka “Electron” melalui CMD, caranya teman-teman pasti sudah tahu. Tampilan electron sebagai berikut :

4. Sekarang coba klik tombol “Cetak Tabel” maka tabel akan di cetak seperti gambar berikut :

Jika teman-teman ingin mendownload file “index.html” saya silakan klik link berikut :

Download "index.html"