Insert Database MYSQL Dengan Electron Framewrok

Hai sobat, kali ini saya akan membagikan sedikit hal yang saya tahu berkaitan dengan postingan sebelumnya yaitu : Membuat Koneksi Electron Dengan Mysql    , jika teman-teman belum sempat membacanya maka saya anjurkan teman-teman untuk membaca postingan tersebut karena postingan kali ini sangat berkaitan dengan postingan sebelumnya. Baik pada postingan kali ini saya akan menjelaskan langkah-langkah unutk membuat form insert data sederhana ke database MYSQL dengan framework Electron. Bahan-bahan yang kita perlukan yaitu “XAMPP” , “Text editor”, dan “file index.html” yang ada pada postingan sebelumnya. Disini saya akan mengedit file index.html tersebut. Berikut langkah-langkahnya :

1. Pastikan “XAMPP” sudah aktif. Berikut isi folder "totory" saya :
 Jika teman-teman belum pernah menginstal electron silakan install terlebih, langkah-langkah install  electron dan membuat hello world bisa klik : DISINI

2. Buka file “index.html” dengan text editor berikut isi dari file index.html
   Penjelasan source code di atas :

  • Di antara tag “body” kita membuat code untuk menambahkan 2 buah textbox untuk input nama dan usia, kita juga menbahkan tombol yang nanti jika tombol tersebut di klik maka akan memanggil fungsi “tambah_data()”.
  • Pada fungsi tambah data kita membuat “var mysql” untuk melakukan koneksi nantinya antara electron dengan mysql.
  • Kemudian kita mengambil nilai dari textbox yang mempunya “id=’nama’ dan id=’usia’ ”. pada gambar di atas var nama = document.getElementById("nama").value maksudnya variabel nama (var nama) akan mengambil nilai dari elemen html yang mempunyai id=”nama” begitu juga dengan variabel usia (var usia) akan mengambil nilai dari elemn yang mempunyai id=”usia”.
  • Kemudian kita buat variabel connection yang di dalamnya terdapat hal-hal yang dibuthkan untuk membuat koneksi dengan database mysql.
  • Connection.conect() digunakan unutk menghubungkan koneksi dengan mysql.
  • Seleanjutnya pada gambar di bawah ini adalah sintax unutk melakukan query ke database. Dimana kita gunakan query insert, dan data yang diinsertkan ke database adalah nilai dari variabel ‘nama’ dan ‘usia’. Terakhir kita tutup koneksi dengan connection.end().
          Sampai langkah ini kita sudah berhasil membuat sintax unutk insert data ke mysql.
3. Langkah selanjutnya adalah kita coba jalankan electron, buka cmd dan arahkan ke direktory “tutory” dengan cara “cd C:\tutory” lalu enter, kemudian ketik “npm start” seperti gambar di bawah :
   



4. Kemudian kita insertkan nama dan usia lalu klik simpan data, jika berhasil akan tampil peringatan “Data Berhasil Disimpan” seperti gambar di bawah :
     


5. Untuk memastikan data telah ditambahkan, maka kita bisa buka phpmyadmin di browser dan lihat data bases ‘tutory’ tabel ‘user’ maka akan tampil seperti berikut :

 untuk mendownload file index.html saya, silakan klik link download berikut : download index.html


Comments

Popular posts from this blog

Membuat Koneksi Electron Dengan Mysql

Menampilkan Database MYSQL Dengan Electron Framework

Membuat Aplikasi Hello World Dengan Electron Framework