TUGAS PEMROGAMAN WEB
Carlito Gomes
201401251044
Crud (Create, Read, Update, dan Delete) adalah kebutuhan sebuah aplikasi web yang dinamis untuk mengolah data, dengan membuat crud menggunakan modal bootstrap akan memperindah tampilan halaman CRUD dan memberikan UX yang lebih user friendly, disini saya akan membahas bagaimana cara membuat CRUD Dengan Modal Bootstrap yang mungkin menjadi kebutuhan dan solusi dari permasalahan yang sobat hadapi, oke langsung saja ….
Sebelum kita memulai saya akan memberikan screen dari popup edit data menggunakan modal bootstrap, seperti gambar dibawah ini.
Tampilan diatas lebih menarik bukan?, dibandingkan kita mengedit data dengan tampilan standart.
Langkah Pertama
Dowload bootstrap disini , dan download jquery disini
Langkah Kedua
Extract file bootstrap dan jquery yang sobat download kedalam root aplikasi sobat, root aplikasi saya di c:\xampp\htdocs\php7\modal, sesuaikan dengan folder root yang sobat miliki.
Langkah Ketiga
Sobat buat database, database milik saya namanya dbphp7 kalau sobat terserah mau buat apa namanya, dan buat tabel dengan nama modal
Langkah Keempat
Setelah ketiga langka diatas sobat lakukan, ketiklah kode dibawah ini, simpan dengan nama, index.php
Langkah Kelima
Buat file dengan nama modal_edit.php :
Langkah Keenam
Buat koneksi dabatase mysqli, simpan dengan nama koneksi.php
Langkah Ketujuh
Buat proses simpan data dengan nama proses_save.php
Langkah Kedelapan
Buat proses edit data dengan nama proses_edit.php
Langkah Kesembilan
Buat proses delete data dengan nama proses_delete.php
Langkah Kesepuluh
Silahkan sobat test program yang sobat buat, jika berhasil maka indexnya akan muncul seperti gambar dibawah ini .
NB : Sobat harus download code dari link yang sudah saya siapkan dibawah ini, karena kode diatas tidak lengkap.
201401251044
Crud (Create, Read, Update, dan Delete) adalah kebutuhan sebuah aplikasi web yang dinamis untuk mengolah data, dengan membuat crud menggunakan modal bootstrap akan memperindah tampilan halaman CRUD dan memberikan UX yang lebih user friendly, disini saya akan membahas bagaimana cara membuat CRUD Dengan Modal Bootstrap yang mungkin menjadi kebutuhan dan solusi dari permasalahan yang sobat hadapi, oke langsung saja ….
Sebelum kita memulai saya akan memberikan screen dari popup edit data menggunakan modal bootstrap, seperti gambar dibawah ini.
Tampilan diatas lebih menarik bukan?, dibandingkan kita mengedit data dengan tampilan standart.
Langkah Pertama
Dowload bootstrap disini , dan download jquery disini
Langkah Kedua
Extract file bootstrap dan jquery yang sobat download kedalam root aplikasi sobat, root aplikasi saya di c:\xampp\htdocs\php7\modal, sesuaikan dengan folder root yang sobat miliki.
Langkah Ketiga
Sobat buat database, database milik saya namanya dbphp7 kalau sobat terserah mau buat apa namanya, dan buat tabel dengan nama modal
1234567CREATE TABLE `modal` (
`modal_id` int(11) NOT NULL AUTO_INCREMENT,
`modal_name` varchar(255) DEFAULT NULL,
`description` text,
`date` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`modal_id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
Langkah Keempat
Setelah ketiga langka diatas sobat lakukan, ketiklah kode dibawah ini, simpan dengan nama, index.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<!doctype html>
<html lang="en">
<head>
<title>Aguzrybudy.com | Crud Menggunakan Modal Bootstrap (popup)</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<meta content="Aguzrybudy" name="author"/>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>
Crud PHP 7 Menggunakan Modal Bootstrap (Popup)</h2>
<p>
Bootstrap Modal (Popup) By Aguzrybudy, Selasa 19 April 2016</p>
<p>
<a href="#" class="btn btn-success" data-target="#ModalAdd" data-toggle="modal">Add Data</a></p>
<table id="mytable" class="table table-bordered"><thead> <th>No</th> <th>Name</th> <th>Description</th> <th>Action</th> </thead> <?php
include "koneksi.php";
$no = 0;
$modal=mysqli_query($koneksi,"SELECT * FROM modal");
while($r=mysqli_fetch_array($modal)){
$no++;
?>
<tr> <td><?php echo $no; ?></td> <td><?php echo $r['modal_name']; ?></td> <td><?php echo $r['description']; ?></td> <td>
<a href="#" class='open_modal' id='<?php echo $r['modal_id']; ?>'>Edit</a>
<a href="#" onclick="confirm_modal('proses_delete.php?&modal_id=<?php echo $r['modal_id']; ?>');">Delete</a>
</td> </tr>
<?php } ?> </table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".open_modal").click(function(e) {
var m = $(this).attr("id");
$.ajax({
url: "modal_edit.php",
type: "GET",
data : {modal_id: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
function confirm_modal(delete_url)
{
$('#modal_delete').modal('show', {backdrop: 'static'});
document.getElementById('delete_link').setAttribute('href' , delete_url);
}
</script>
</body>
</html>
Langkah Kelima
Buat file dengan nama modal_edit.php :
123456<?php
include "koneksi.php";
$modal_id=$_GET['modal_id'];
$modal=mysqli_query($koneksi,"SELECT * FROM modal WHERE modal_id='$modal_id'");
while($r=mysqli_fetch_array($modal)){
?>
Langkah Keenam
Buat koneksi dabatase mysqli, simpan dengan nama koneksi.php
12345678910<?php
$host="localhost";
$user="root";
$pass="";
$database="dbphp7";
$koneksi=new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
trigger_error('Koneksi ke database gagal: ' . mysqli_connect_error(), E_USER_ERROR);
}
?>
Langkah Ketujuh
Buat proses simpan data dengan nama proses_save.php
1234567<?php
include "koneksi.php";
$modal_name = $_POST['modal_name'];
$description = $_POST['description'];
mysqli_query($koneksi,"INSERT INTO modal (modal_name,description) VALUES ('$modal_name','$description')");
header('location:index.php');
?>
Langkah Kedelapan
Buat proses edit data dengan nama proses_edit.php
12345678<?php
include "koneksi.php";
$modal_id=$_POST['modal_id'];
$modal_name = $_POST['modal_name'];
$description = $_POST['description'];
$modal=mysqli_query($koneksi,"UPDATE modal SET modal_name = '$modal_name',description = '$description' WHERE modal_id = '$modal_id'");
header('location:index.php');
?>
Langkah Kesembilan
Buat proses delete data dengan nama proses_delete.php
123456<?php
include "koneksi.php";
$modal_id=$_GET['modal_id'];
$modal=mysqli_query($koneksi,"Delete FROM modal WHERE modal_id='$modal_id'");
header('location:index.php');
?>
Langkah Kesepuluh
Silahkan sobat test program yang sobat buat, jika berhasil maka indexnya akan muncul seperti gambar dibawah ini .
Add Data
Edit Data
Delete Data
NB : Sobat harus download code dari link yang sudah saya siapkan dibawah ini, karena kode diatas tidak lengkap.
Untuk PHP 7
Untuk PHP 5
Untuk Datatables
link ke web yang saya buat KLik
Komentar
Posting Komentar