Cara Menyimpan Data Dynamic Form Field Dalam Database

Cara Menyimpan Data Dynamic Form Field Dalam Database - Jika sebelumnya kita sudah membuat Dynamic Form Field kali ini kita akan belajar cara menyimpan data dari dynamic form filed ke dalam Database MySql dengan menggunakan PHP. Secara teknis dalam proses insert ke dalam database tidak ada yang berbeda, akan tetapi data yang di kirimkan dari form adalah berupa array jadi pertama kita perlu memecahnya dengan menggunakan perulangan kemudian menyimpannya per-data. Untuk lebih jelasnya langsung saja kita ke prakteknya.

Apabila anda belum membuat Dynamic Form Filednya baca di sini untuk cara membuatnya : Cara Membuat Dynamic Form Field Keren Dengan Bootstrap

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Pertama pindahkan terlebih dahulu folder Dynamic_field ke dalam webserver anda. karena kita menggunakan database dan PHP jadi kita memerlukan webserver.

Database

Pertama buat sebuah database dengan nama db_anime dan buatlah sebuah tabel di dalamnya dengan nama tbl_karakter dengan struktur :

Name	Type	Size	Extra	Primary
id	INT	100	auto_increment	yes
nama_char	VARCHAR	50

HTML

Ubah sedikit file index.html anda dengan menambahkan sebuah tombol submit dan memberikan tujuan action form ke save_data.php sehingga script anda menjadi sekarang seperti di bawah :

<!doctype html>
<html lang="en">
<head>
 <title>Menyimpan Data Dynamic Field Dengan PHP | Jin Toples Programming</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .entry{
   margin-bottom:10px;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .form-control{
   border-radius:0px;
  }
  
  .btn {
   border-radius:0px;
  }
 </style>
 <script src="js/jquery-1.8.3.js"></script>
 <script src="js/script.js"></script>
</head>
<body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menyimpan Data Dynamic Field Dengan PHP</h1>
  <form action="save_data.php" method="post">
   <div class="controls"> 
    <div class="form-group">
     <div class="entry input-group">
      <input class="form-control" name="data[]" type="text" placeholder="Entry..." required>
      <span class="input-group-btn">
       <button class="btn btn-success btn-add" type="button">
        <span class="glyphicon glyphicon-plus"></span>
       </button>
      </span>
     </div>
      </div>      
   </div>
   <button class="btn btn-success" type="submit">Submit</button>
  </form>
 </div>
</body>
</html>

PHP

Buat sebuah file PHP baru dalam folder Dynamic_field dengan nama save_data.php dengan isi script :

<?php
 //connect ke database
 mysql_connect("localhost","root","");
 mysql_select_db("db_anime");
 
 //menankap data inputan field dari form
 $data = $_POST['data'];
 
 //perulangan untuk mengekstrak array dari lemparan isi field form
 foreach($data as $row){
  //menyimpan data ke dalam tablel tbl_karakter
  mysql_query('INSERT INTO tbl_karakter (nama_char) VALUES ("'.$row.'") ');
 }  
 
 //pesan alert tersimpan dan redirect kembali
 echo "<script>
   alert('data berhasil tersimpan');
   window.location.href='index.html';
  </script>";
?>

Penjelasannya anda dapat baca sendiri di atas.

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda, dengan mengetikan url :

http://localhost/dynamic_field

kemudian cobalah tambah beberapa field dan isi data kemudian submit, apakah data tersimpan dalam database ?

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Menyimpan Data Dynamic Form Field Dalam Database anda sekarang sudah selesai, baca juga tutorial program PHP lainnya.