trik-crud-mysql-query-insert-dengan-javascript-dan-php
trik-crud-mysql-query-insert-dengan-javascript-dan-php

Trik CRUD Mysql Query Insert dengan Javascript dan Php – Part 1

Diposting pada

Penggunaan Mysql Query Insert merupakan suatu instruksi yang familiar digunakan dalam sebuah aplikasi. Mulai dari aplikasi berbasis desktop, webbase maupun aplikasi yang saat ini android pasti selalu ada menggunakan mysql query insert. Pada tutorial kali ini saya akan mencoba memberikan sebuah contoh CRUD sederhana dengan menggunakan bahasa pemberograman PHP, dan database mysql tentunya. Disamping itu saya akan menggunakan sedikit Javascript untuk mepercantik proses transaksi dengan Ajax tentunya.

Untuk menambah wawasan anda silahkan simak artikel kami mengenai sql query untuk mengetahui lebih dalam. Pada tutorial Part 1 ini saya akan membuat CRUD menambahkan Data di suatu tabel di dalam Database Mysql.

adapun langkah-langkahnya adalah pertama anda buat Database dengan nama CRD di mysql.

Membuat Database dan Tabel di Mysql

Jika anda sudah membuat database di mysql, silahkan tambahkan script berikut ini di dalam database anda :

--
-- Struktur dari tabel `datauser`
--

CREATE TABLE `datauser` (
  `id` int(11) NOT NULL,
  `nama` varchar(150) NOT NULL,
  `Alamat` varchar(150) NOT NULL,
  `Pekerjaan` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `datauser`
--
ALTER TABLE `datauser`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `datauser`
--
ALTER TABLE `datauser`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Jika sudah berhasil anda membuat Database CRUD dan tabel dengan nama datauser. Selanjutnya adalah kita membuat sebuah Form Input nya terlebih dahulu ya. Sebelum kita mebuat form desain, buat dulu folder project nya di dalam folder htdocs dengan nama malasngucap_crud ( atau bebas namanya ).

Jika sudah mebuat folder kita buat dahulu file config.php di dalam folder dengan nama config, dan untuk code nya adalah seperti di bawah ini :

<?php
$HOST = 'localhost';
$USER = 'root';
$PASS = '';
$DB = 'CRUD';
// Create connection
$CON = mysqli_connect($HOST,$USER,$PASS,$DB);
// Check connection
if (!$CON) {
  die("Connection failed: " . mysqli_connect_error());
}else{
	echo 'Connection Successfully';
}
?>

Saya sedikit jelaskan tulisan di atas, untuk $HOST ini kalo menurut saya adalah alamat atau ip lah bahasanya tempat server xamp anda di instal. Jika nanti anda ada rencana untuk upload di hosting, kemungkinan besar nama $HOST nya bukan localhost. Bisa saja berupa IP 180.xxx.xxx.

$USER adalah username akses login ke php myadmin anda, biasanya di buatnya root. $PASS word adalah password akses login ke php myadmin anda. $DB adalah nama Databasenya. $CON artinya adalah sebuah variabel untuk membuat sebuah koneksi ke database yang sudah anda seting. Anda bisa mengecek apakah Config.php anda sudah terkoneksi ke database atau belum dengan cara menjalankannya langsung saja di browser.

Jika config.php anda berhasil terkoneksi dengan database, maka akan muncul pesan seperti di gambar ini .

CRUD Mysql Query Insert dengan Javascript dan Php - Part 1 - sukses konek database

Jika koneksi ke database anda gagal, maka akan muncul pesan gagal koneksi seperti gambar di bawah ini.

CRUD Mysql Query Insert dengan Javascript dan Php - Part 1 - gagal konek database

Untuk Errornya sebenarnya anda tidak usah panik, anda cukup membaca saja pesan Error nya dan errornya itu di line berapa. Nanti akan ketemu masalahnya. Setelah koneksi berhasil di buat saatnya kita lanjut untuk membuat form desain.

Membuat Desain Form Dengan Bootstrap

Untuk membuat desain Form nya, saya biasanya menggunakan bootstrap. Silahkan klik aja linknya di atas, nanti anda akan di arahkan ke halaman bootsrapnya ya.

Untuk Desain formnya silahkan saja anda copi langsung source nya di bawah ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>CRUD Mysql</title>
    </head>
    <body>
    <div class="container"> 
      <h2>FORM CRUD MYSQL MALASNGUCAP.COM</h2>
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Nama</label>
          <input type="text" class="form-control" id="nama" aria-describedby="emailHelp">
          <small id="emailHelp" class="form-text text-muted">Input Nama Anda.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Alamat</label>
          <input type="text" class="form-control" id="alamat">
        </div>
          <div class="form-group">
          <label for="exampleInputPassword1">Pekerjaan</label>
          <input type="text" class="form-control" id="pekerjaan">
        </div> 
      </form> 
      <button id="btnSave" class="btn btn-primary">Submit</button>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Jika anda sudah mengcopi source di atas, silahkan anda simpan source tersebut, lalu beri nama index.php. Jangan lupa simpannya di dalam folder htdocs kalian ya. Jika sudah maka tampilan formnya seperti di bawah ini

CRUD Mysql Query Insert dengan Javascript dan Php - Part 1 - form desain crud dengan bootstrap

Jika sudah tampil seperti di atas untuk desain formnya, artinya kalian sudah berhasil ya membuat desain form crud dengan bootstrapnya. Selannjutnya kita akan membuat query insert ke database mysqlnya. seperti yang sudah saya jelaskan di atas, bahwa kita akan menggunakan Javascript dan Ajax ya untuk mysql query insert nya.

Membuat Javascript Code Untuk Eksekusi Mysql Query Insert ke Database

Disini saya menggunakan jquery versi 3.5.1, jika temen-temen bingung menambahkannya. kalian cukup googling saja di google dengan cara ketik jquery cdn, atau kunjungi websitenya. Oh ya, jangan pilih yang slim ya.

<script src="https://code.jquery.com/jquery-3.5.1.js" 
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Di atas adalah url jquerynya, jadi kalau tidak ada itu maka aplikasi webiste kita tidak bisa berjalan javascriptnya. Selanjutnya kita akan membuat source code untuk javascriptnya ya. Silahkan saja teman-teman tinggal copi kan source dibawah ini

<script type="text/javascript">
        $(document).ready(function () { 
        $('#btnSave').click(function(){
            var nama = $("#nama").val(); var alamat = $("#alamat").val(); var pekerjaan = $("#pekerjaan").val();
                $.ajax({
                    type: "POST", 
                    url: "controller/exec.php",
                    data:  "nama="+nama + "&alamat="+alamat + "&pekerjaan="+pekerjaan,
                    dataType: "JSON",
                    beforeSend:function(){
                          
                    },
                    success: function(data){
                         
                    },
                    error: function(data)
                    {

                    }           
              });

        });
      }); 
    </script>

Selanjutnya kita akan membuat file di dalam folder controller, bernama exec.php. Nah nanti nya file inilah yang akan mengekseskusi perintah dari dari javascript, baik itu GET, POST, atau PUT.

Response yang di hasilkan adalah berupa Json ya formatnya. jika sukses maka response json masuk ke dalam function ini success: function(data){ isi } jika gagal akan masuk ke function error: function(data){ }.

Untuk Data yang dikirim dari textbox kita itu ada di url ini .

data: "nama="+nama + "&alamat="+alamat + "&pekerjaan="+pekerjaan,

dimana awalnya kita akan pasing datanya dulu dari text box ke variabel var.

 var nama = $("#nama").val(); var alamat = $("#alamat").val(); var pekerjaan = $("#pekerjaan").val();

Jika masih bingung dari nama $(“#nama”).val(); ini berasal, anda bisa lihat pada codingan saat saat membuat textbox nama. Disana saya mengetik sebuah id=”nama”. Nah id ini lah yang dimasukan kedalam $(“#nama”).val(); untuk mengambil nilai valuenya.

Membuat file eksekusi mysql Query Insert ke database Mysql

Untuk membuat file ini, terlebih dahulu kita membuat folder dengan nama controller. Folder Controller inilah yang nantinya berisikan semua file eksekusi ke database mysql. Baik itu eksekusi insert kedalam database, menampilkan data, menghapus data, dan lain sebagainya.

Langsung saja teman-teman buat file di dalam foldercontroller dengan nama exec.php. Dan copikan source dibawah ini

<?php
require_once('../config/config.php');

$query = mysqli_query($CON, "INSERT INTO datauser
		(nama,Alamat,Pekerjaan)
 		VALUES 
		('$_POST[nama]','$_POST[alamat]','$_POST[pekerjaan]')");  

	if($query){
    	echo json_encode(array('message'=>'Data successfully added.'));
  	}else{
    	echo json_encode(array('message'=>'Data failed to add.'));
  	}
?>

untuk mengetes jalan atau tidak nya source mysql query insert ini, kita bisa menggunakan console untuk mengecek apakah javascript kita berjalan atau tidak. Atau kita menggunakan tab Network untuk mengecek apakah file exec.php ini sukses melakukan eksekusinya. Caranya mudah Silahkan tekan CTRL+SHIFT+I secara bersamaan. Setelah itu, kita coba menginputkan Data di textbox dan klik tombol submit. Maka semua response dan activity terekam disana. berikut hasilnya :

CRUD Mysql Query Insert dengan Javascript dan Php - Part 1 - sukses insert data ke database mysql

Jika berhasil melakukan mysql query insert dengan javascript dan jax, maka akan muncul response json Data Succesfully added.

Kesimpulan

Demikianlah Trik CRUD Mysql Query Insert dengan Javascript dan Php – Part 1. Dimana kita sudah berhasil melakukan mysql query insert ke dalam databsae mysql. Pada tutorial selanjutnya saya akan membuat bagaimana cara menampilkan data.

Jika anda merasa tertarik dan membantu sekali dengan adanya artikel mysql query insert kami, silahkan share artikel kami dan jangan lupa koment jika ada tutorial lainnya yang mau saya buatkan di website ini. terima kasih.