Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap
Assalamalaikum Wr Wb.
Sebelum kita melanjutkan ke pembelajaran selanjutnya agar lebih baiknya anda melihat artikel sebelumnya tentang Membuat Koneksi Database Lebih Sederhana Bagi Pemula Untuk Pemrograman PHP Kenapa saya ingin anda melihat postingan artikel saya sebelumnya, karena yang akan saya sampaikan pada artikel ini yaitu berhubungan juga dengan Membuat Koneksi Database Lebih Sederhana Bagi Pemula Untuk Pemrograman PHP .
Studi kasus yang kita ambil adalah Tabel Jurusan pada sekolah SMK.
Langsung saja kita mulai, saya akan menyampaikan artikel saya yang berjudul Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap . Pertama yang anda siapkan adalah file Bootstrap dan file Jquery nya, anda bisa mendownload file Bootstrap Disini dan file Jquery nya anda bisa download Disini .
Apabila anda sudah mempersiapkan dari file-file di atas maka anda bisa langsung membuat file coba.php. masukan file Jquery dan Bootstrap di dalam file coba.php, Contohnya :
Sebelumnya kita buat terlebih dahulu tabel database, Contohnya :
Selanjutnya anda bisa memasukan file untuk modal dan tabel untuk menampilkan data di bawah ini dengan benar. Contohnya :
Setelah semua koding di atas sudah di persiapkan kita masukan file PHP untuk menyimpan, mengubah dan menghapus data. Letakkan file PHP di bawah ini tepat di atas <head>.
ScreenShoot Hasil dari di atas :
Sekian Postingan artikel dari saya, semoga bermanfaat. Trimakasih
Wassalamualaikum Wr Wb.
BACA JUGA ARTIKEL
1. Pengenalan Metode (Fungsi) Objek Number dan Objek Array Pada JavaScript
2. Membuat Proses Pengolahan Data Insert, Update Bagi Pemula Untuk Pemrograman PHP
3. Belajar HTML Dengan Mudah dan Cepat Untuk Pemula
4. Input Data Lebih Dari Satu Dengan PHP Paling Mudah
5. Cara Mempercepat Tampilan Dengan Plugin Boostrap
Sebelum kita melanjutkan ke pembelajaran selanjutnya agar lebih baiknya anda melihat artikel sebelumnya tentang Membuat Koneksi Database Lebih Sederhana Bagi Pemula Untuk Pemrograman PHP Kenapa saya ingin anda melihat postingan artikel saya sebelumnya, karena yang akan saya sampaikan pada artikel ini yaitu berhubungan juga dengan Membuat Koneksi Database Lebih Sederhana Bagi Pemula Untuk Pemrograman PHP .
Studi kasus yang kita ambil adalah Tabel Jurusan pada sekolah SMK.
Langsung saja kita mulai, saya akan menyampaikan artikel saya yang berjudul Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap . Pertama yang anda siapkan adalah file Bootstrap dan file Jquery nya, anda bisa mendownload file Bootstrap Disini dan file Jquery nya anda bisa download Disini .
Apabila anda sudah mempersiapkan dari file-file di atas maka anda bisa langsung membuat file coba.php. masukan file Jquery dan Bootstrap di dalam file coba.php, Contohnya :
Sebelumnya kita buat terlebih dahulu tabel database, Contohnya :
create table jurusan(id_jurusan int primary key auto_increment,
-> jurusan varchar(25));
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
Selanjutnya anda bisa memasukan file untuk modal dan tabel untuk menampilkan data di bawah ini dengan benar. Contohnya :
<body>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Master Jurusan</h3>
</div>
<div class="panel-body">
<!-- Button Modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Form Tambah Jurusan</h4>
</div>
<div class="modal-body">
<form action="" method="POST" role="form">
<div class="form-group">
<label for="">Jurusan</label>
<input type="text" name="jurusan" class="form-control" id="" placeholder="Input field">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="simpan" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
<br>
<table class="table table-striped table-bordered data">
<thead>
<tr>
<th>Id</th>
<th>Jurusan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php $query = mysql_query("select * from master_jurusan");
while ($data= mysql_fetch_row($query)) {
?>
<tr>
<td><?php echo $data[0]; ?></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my<?php echo $data[0]; ?>">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<!-- Modal -->
<div class="modal fade" id="my<?php echo $data[0]; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Form Update Jurusan</h4>
</div>
<div class="modal-body">
<form action="" method="POST" role="form">
<div class="form-group">
<input type="hidden" name="id_jurusan" class="form-control" value="<?php echo $data[0]; ?>" id="" placeholder="Input field">
</div>
<div class="form-group">
<label for="">Jurusan</label>
<input type="text" name="jurusan" class="form-control" value="<?php echo $data[1]; ?>" id="" placeholder="Input field">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="update" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myy<?php echo $data[0]; ?>">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
<!-- Modal -->
<div class="modal fade" id="myy<?php echo $data[0]; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Form Update Jurusan</h4>
</div>
<div class="modal-body">
<form action="" method="POST" role="form">
Apakah Anda Ingin Menghapus Data <?php echo $data[1]; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="hapus" value="<?php echo $data[0]; ?>" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
}
$data++;
?>
</tbody>
</table>
</div>
</div>
</body>
Setelah semua koding di atas sudah di persiapkan kita masukan file PHP untuk menyimpan, mengubah dan menghapus data. Letakkan file PHP di bawah ini tepat di atas <head>.
<?php include('config.php'); //file database yang sudah di buat
if (isset($_POST['simpan'])) {
$jurusan= $_POST['jurusan'];
$query= mysql_query("insert into master_jurusan values ('','$jurusan')") or die(mysql_error());
echo "<script> alert ('Data Behasil di Tambahkan');
document.location='index.php?menu=jurusan';
</script>";
}
elseif (isset($_POST['update'])) {
$id= $_POST['id_jurusan'];
$jurusan= $_POST['jurusan'];
$query= mysql_query("update master_jurusan set id_jurusan='$id',jurusan='$jurusan' where id_jurusan='$id' ") or die(mysql_error());
echo "<script> alert ('Data Behasil di Tambahkan');
document.location='index.php?menu=jurusan';
</script>";
}
elseif (isset($_POST['hapus'])) {
$id= $_POST['hapus'];
$query= mysql_query("delete from master_jurusan where id_jurusan='$id' ") or die(mysql_error());
echo "<script> alert ('Data Behasil di Tambahkan');
document.location='index.php?menu=jurusan';
</script>";
}
?>
ScreenShoot Hasil dari di atas :
Sekian Postingan artikel dari saya, semoga bermanfaat. Trimakasih
Wassalamualaikum Wr Wb.
BACA JUGA ARTIKEL
1. Pengenalan Metode (Fungsi) Objek Number dan Objek Array Pada JavaScript
2. Membuat Proses Pengolahan Data Insert, Update Bagi Pemula Untuk Pemrograman PHP
3. Belajar HTML Dengan Mudah dan Cepat Untuk Pemula
4. Input Data Lebih Dari Satu Dengan PHP Paling Mudah
5. Cara Mempercepat Tampilan Dengan Plugin Boostrap
