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 :
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.
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.
Tidak ada komentar:
Posting Komentar