Membuat Koneksi Electron Dengan Mysql

Hai sobat, sekarang saya mau membagi sedikit pengetahuan saya mengenai langkah-langkah dan source code untuk membuat koneksi dari framework electron dengan mysql. Kenapa perlu koneksi ke mysql? Tentunya dengan adanya koneksi dengan mysql maka aplikasi yang kita buat dengan electron dapat mengakses atau menggunakan mysql untuk databasenya. Baik berikut langkah-langkahnya:

1. Hal yang pertama perlu diingat adalah aktifkan ‘XAMPP’.

2. Disini saya meletakan semua file yang dibutuhkan di dalam folder ‘tutory’

3. Selanjutnya kita buka command promt (CMD) lalu masuk ke direktory tutory dengan “cd C:\tutory” lalu enter, Selanjutnya kita harus menginstal mysql dengan cara ketik “npm install mysql” lalu tekan enter, tunggu proses download file selesai hingga tampilannya seperti gambar berikut :

Setelah langkah ini maka sekarang kita bisa membuat koneksi ke mysql.

4. Disini saya telah membuat sebuah database dengan nama “tutory” dan nama tabel “user”

5. Selanjutnya buka file index.html dengan texteditor, kemudian tambahkan kode berikut

Penjelasan kode di atas :

Jadi di dalam body kita buat sebuah tombol yang nantinya ketika diklik (onclick) maka button akan memanggil fungsi “coba_koneksi()” yang berada pada tag script.

·   Kita membuat variabel mysql (var mysql) untuk dapat melakukan koneksi dengan mysql.

·    Membuat variabel connection yang di dalamnya terdapat host yaitu alamat localhost, teman-teman bisa isi dengan “host : localhost” atau “host : ‘127.0.01’ ”, biasanya jika kita pakai “host : localhost” maka kemungkinan error akan sering muncul saya juga tidak tahu alasannya 😃. Jadi kita pakai “host : 127.0.01”. “user : ‘root’ ” karena kita memakai xampp maka usernya adalah root, “password : ‘’ “ password bisa teman-teman sesuaikan dengan password yang teman-teman setting. Karena saya tidak pernah setting password jadi saya kosongkan saja. “database : ‘tutory’ ” nama dari database yang kita gunakan.

·   Connection.query merupakan fungsi dimana kita meletakan query untuk mengolah database kita. saya akan menginsert data nama = ramanda, dan usi = 30 ke dalam database tutory tabel user.

·     Terakhir kita akhiri koneksi yang kita buat dengan “connection.end()”.

Mungkin penjelasannya sudah cukup semoga dapat dipahami, ingat save file tersebut.

1.      6. Selanjutnya kita buka cmd dan ketik “npm start” lalu tekan enter

Maka aplikasi yang kita buat tadi akan muncul seperti tampilan berikut 

Sekarang coba tekan tombol “klik unutk insert data”, jika berhasil maka akan tampil peringatan bahwa data berhasil ditambahkan.

7. Sekarang coba kita lihat database yang kita buat tadi di phpmyadmin maka data dengan nama ramanda dan usia 30 akan dimasukkan ke dalam database. Untuk id karena saya set auto increament maka tidak perlu kita insertkan.

Jika teman-teman ingin mendownload file index.html saya, maka silakan klik link berikut :

Download via google drive


Jika Teman-teman masih bingung membuat aplikasi desktop dengan electron mungkin teman-teman bisa melihat tutorial saya sebelumnya di link berkut :

Lihat Tutorial Membuat Aplikasi Hello World Dengan Electron

Sekian Tutorial dari saya terimakasih