Tutorial php sederhana cocok untuk pemula dan mudah untuk dipelajari, tutorial ini saya dapat dari youtube nya pak Sandhika Galih.
Diharapkan Kalian sudah memiliki atau paham mengenai konsep dasar php, berikut komponen untuk mengikuti tutorial ini :
- Local Server seperi xampp [Download] atau bisa wampp,
- Text Editor seperti sublime text3 [Download],
- Browser, saya menggunakan browser Google Chrome. [Download],
- Dan mungkin Segelas Kopi, nyantai aja,
- Stay focus.
1. Start Apache dan MySql pada Xmpp nya
2. Siapkan Assets Pendukung
Disini saya akan sediakan asset pendukung agar tampilannya menarik dan juga mendukung datatables.
Silahkan extract didalamnya sudah terdapat file pendukung seperti bootstrap, jquery dll.
2. Siapkan databasenya berikut
Copy saja code berikut ini selanjutnya :
- buat database dengan nama i_mahasiswa
- Setelah itu copy code dibawah ini dan letakan di sql, lalu tekan go
-- phpMyAdmin SQL Dump
-- version 4.6.5.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: May 13, 2017 at 11:09 AM
-- Server version: 10.1.21-MariaDB
-- PHP Version: 7.1.1
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `i_mahasiswa`
--
-- --------------------------------------------------------
--
-- Table structure for table `is_mahasiswa`
--
CREATE TABLE `is_mahasiswa` (
`nim` varchar(10) NOT NULL,
`nama` varchar(30) NOT NULL,
`tempat_lahir` varchar(30) NOT NULL,
`tanggal_lahir` date NOT NULL,
`jenis_kelamin` enum('Laki-laki','Perempuan') NOT NULL,
`agama` varchar(20) NOT NULL,
`alamat` varchar(100) NOT NULL,
`telepon` varchar(13) NOT NULL,
`foto` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ROW_FORMAT=COMPACT;
--
-- Dumping data for table `is_mahasiswa`
--
INSERT INTO `is_mahasiswa` (`nim`, `nama`, `tempat_lahir`, `tanggal_lahir`, `jenis_kelamin`, `agama`, `alamat`, `telepon`, `foto`) VALUES
('1731200001', 'Dedi Saputra', 'Bandar Lampung', '1990-02-01', 'Laki-laki', 'Islam', 'Jalan Gatot Subroto No. 10, Bandar Lampung', '085758857775', 'img-2.png'),
('1731200002', 'Iskadina Eka Putri', 'Jakarta', '1993-05-02', 'Perempuan', 'Islam', 'Jalan Pagar Alam No. 15, Kedaton, Bandar Lampung', '085789892909', 'img-11.png'),
('1731200003', 'Indra Styawantoro', 'Purbolinggo', '1991-05-15', 'Laki-laki', 'Islam', 'Perum Griya Gedung Meneng Blok C2 No. 2, Rajabasa, Bandar Lampung', '085669919769', 'img-6.png'),
('1731200004', 'Ayu Nurlina', 'Jakarta', '1994-12-19', 'Perempuan', 'Islam', 'Jalan Radin Intan No. 77, Tanjung Karang, Bandar Lampung', '089977955772', 'img-9.png'),
('1731200005', 'Rio Rinaldo', 'Metro', '1979-03-16', 'Laki-laki', 'Islam', 'Jalan Zaenal Abidin Pagaralam No. 1, Bandar Lampung', '081922919212', 'img-5.png'),
('1731200006', 'Rinaldi', 'Jakarta', '1993-06-06', 'Laki-laki', 'Islam', 'Jalan Yos Sudarso No. 135, Bandar Lampung', '081388955767', 'img-4.png');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `is_mahasiswa`
--
ALTER TABLE `is_mahasiswa`
ADD PRIMARY KEY (`nim`);
/*!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 */;
3. Buatlah Folder Projectnya Di C:\xampp\htdocs
4. Kemudian Folder lagi di dalam project kalian dengan nama config
5. Kemudian Buat File baru di dalam folder config dengan nama database.php
Isi dari file database.php :
<?php
$hostname = 'localhost';
$username = 'root';
$password = '090980';
$database = 'i_mahasiswa';
try{
$pdo = new PDO("mysql:host=$hostname;dbname=$database",$username,$password);
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
echo "Koneksi Gagal :" .$e->getMessage();
}
?>
6. Kemudian kita buat file index.php
Buatlah file baru di luar folder config dengan nama index.php
Isi index.php :
<?php
require_once "config/database.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Aplikasi CRUD</title>
<!-- favicon -->
<link rel="shortcut icon" href="assets/img/favicon.png">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/datepicker.min.css" rel="stylesheet">
<link href="assets/js/dataTables/css/dataTables.bootstrap.css" rel="stylesheet">
<!-- styles -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Fungsi untuk membatasi karakter yang diinputkan -->
<script language="javascript">
function getkey(e)
{
if (window.event)
return window.event.keyCode;
else if (e)
return e.which;
else
return null;
}
function goodchars(e, goods, field)
{
var key, keychar;
key = getkey(e);
if (key == null) return true;
keychar = String.fromCharCode(key);
keychar = keychar.toLowerCase();
goods = goods.toLowerCase();
// check goodkeys
if (goods.indexOf(keychar) != -1)
return true;
// control keys
if ( key==null || key==0 || key==8 || key==9 || key==27 )
return true;
if (key == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
};
// else return false
return false;
}
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand -->
<div class="navbar-header">
<a class="navbar-brand" href="index.php">
<i class="glyphicon glyphicon-check"></i>
Aplikasi CRUD PHP Data Object (PDO) dan Bootstrap Modal
</a>
</div>
</div> <!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<?php
include "tampil-data.php";
?>
</div> <!-- /.container-fluid -->
<footer class="footer">
<div class="container-fluid">
<p class="text-muted pull-left">© 2017 <a href="http://www.indrasatya.com/">www.indrasatya.com</a></p>
<p class="text-muted pull-right ">Theme by <a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a></p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<!-- DataTables -->
<script src="assets/js/dataTables/js/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
$(function () {
//datepicker plugin
$('.date-picker').datepicker({
autoclose: true,
todayHighlight: true
});
// toolip
$('[data-toggle="tooltip"]').tooltip();
// datatables
$('#dataTables-example').dataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 10
} );
})
</script>
<!-- Javascript untuk popup modal Edit-->
<script type="text/javascript">
$(document).ready(function () {
$(".open_modal").click(function(e) {
var id = $(this).attr("id");
$.ajax({
url: "form-ubah.php",
type: "GET",
data : {nim: id},
success: function (ajaxData){
$("#modal_ubah").html(ajaxData);
$("#modal_ubah").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<!-- Javascript untuk popup modal Delete-->
<script type="text/javascript">
function confirm_modal(delete_url)
{
$('#modal_hapus').modal('show', {backdrop: 'static'});
document.getElementById('link_hapus').setAttribute('href' , delete_url);
}
</script>
</body>
</html>
6. Kemudian kita buat lagi file dengan nama tampil-data.php
<div class="row">
<div class="col col-md-12">
<div class="page-header">
<h4>
<i class="glyphicon glyphicon-user"></i> Data Mahasiswa
<a class="btn btn-success pull-right" href="#" data-target="#modal_tambah" data-toggle="modal">
<i class="glyphicon glyphicon-plus"></i> Tambah
</a>
</h4>
</div>
</div>
</div>
<?php
// fungsi untuk menampilkan pesan
// jika alert = "" (kosong)
// tampilkan pesan "" (kosong)
if (empty($_GET['alert'])) {
echo "";
}
// jika alert = 1
// tampilkan pesan Sukses "Mahasiswa baru berhasil disimpan"
elseif ($_GET['alert'] == 1) {
echo "<div class='alert alert-success alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-ok-circle'></i> Sukses!</strong> Data mahasiswa berhasil disimpan.
</div>";
}
// jika alert = 2
// tampilkan pesan Sukses "Mahasiswa berhasil diubah"
elseif ($_GET['alert'] == 2) {
echo "<div class='alert alert-success alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-ok-circle'></i> Sukses!</strong> Data mahasiswa berhasil diubah.
</div>";
}
// jika alert = 3
// tampilkan pesan Sukses "Mahasiswa berhasil dihapus"
elseif ($_GET['alert'] == 3) {
echo "<div class='alert alert-success alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-ok-circle'></i> Sukses!</strong> Data mahasiswa berhasil dihapus.
</div>";
}
// jika alert = 4
// tampilkan pesan Gagal "NIM sudah ada"
elseif ($_GET['alert'] == 4) {
echo "<div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Gagal!</strong> NIM $_GET[nim] sudah ada.
</div>";
}
// jika alert = 5
// tampilkan pesan Upload Gagal "Pastikan file yang diupload sudah benar"
elseif ($_GET['alert'] == 5) {
echo " <div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Upload Gagal!</strong> Pastikan file yang diupload sudah benar.
</div>";
}
// jika alert = 6
// tampilkan pesan Upload Gagal "Pastikan ukuran file foto tidak lebih dari 1MB"
elseif ($_GET['alert'] == 6) {
echo " <div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Upload Gagal!</strong> Pastikan ukuran file foto tidak lebih dari 1MB.
</div>";
}
// jika alert = 7
// tampilkan pesan Upload Gagal "Pastikan file yang diupload bertipe *.JPG, *.JPEG, *.PNG"
elseif ($_GET['alert'] == 7) {
echo " <div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Upload Gagal!</strong> Pastikan file yang diupload bertipe *.JPG, *.JPEG, *.PNG.
</div>";
}
?>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Data Mahasiswa</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>Foto</th>
<th>NIM</th>
<th>Nama</th>
<th>Tempat, Tanggal Lahir</th>
<th>Jenim Kelamin</th>
<th>Agama</th>
<th>Alamat</th>
<th>Telepon</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
try {
$no = 1;
// sql statement untuk menampilkan semua data dari tabel is_mahasiswa
$query = "SELECT * FROM is_mahasiswa ORDER BY nim DESC";
// membuat prepared statements
$stmt = $pdo->prepare($query);
// eksekusi query
$stmt->execute();
// tampilkan data
while ($data = $stmt->fetch(PDO::FETCH_ASSOC)) {
$tanggal = $data['tanggal_lahir'];
$tgl = explode('-',$tanggal);
$tanggal_lahir = $tgl[2]."-".$tgl[1]."-".$tgl[0];
echo "<tr>
<td width='50' class='center'>$no</td>";
if ($data['foto']=="") { ?>
<td><img class='img-mahasiswa' src='foto/default_user.png' width='45'></td>
<?php
} else { ?>
<td><img class='img-mahasiswa' src='foto/<?php echo $data['foto']; ?>' width='45'></td>
<?php
}
echo " <td width='60'>$data[nim]</td>
<td width='150'>$data[nama]</td>
<td width='180'>$data[tempat_lahir], $tanggal_lahir</td>
<td width='120'>$data[jenis_kelamin]</td>
<td width='100'>$data[agama]</td>
<td width='250'>$data[alamat]</td>
<td width='80'>$data[telepon]</td>
<td width='100'>
<div class=''>
<a href='#' data-toggle='tooltip' data-placement='top' title='Ubah' style='margin-right:5px' class='btn btn-success btn-sm open_modal' id='$data[nim]' >
<i class='glyphicon glyphicon-edit'></i>
</a>";
?>
<a href="#" onclick="confirm_modal('proses-hapus.php?&nim=<?php echo $data['nim']; ?>');" data-nim="<?php echo $data['nim']; ?>" data-toggle="tooltip" data-placement="top" title="Hapus" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
<?php
echo "
</div>
</td>
</tr>";
$no++;
}
// tutup koneksi database
$pdo = null;
} catch (PDOException $e) {
// tampilkan pesan kesalahan
echo "ada kesalahan pada query : ".$e->getMessage();
}
?>
</tbody>
</table>
</div>
</div>
<!-- modal popup tambah data -->
<div id="modal_tambah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">
<i class="glyphicon glyphicon-plus"></i>
Tambah Data Mahasiswa
</h4>
</div>
<div class="modal-body">
<form action="proses-simpan.php" method="POST" name="modal_popup" enctype="multipart/form-data">
<div class="form-group">
<label>NIM</label>
<input type="text" class="form-control" name="nim" autocomplete="off" maxlength="10" required/>
</div>
<div class="form-group">
<label>Nama Mahasiswa</label>
<input type="text" class="form-control" name="nama" autocomplete="off" required/>
</div>
<div class="form-group">
<label>Tempat Lahir</label>
<input type="text" class="form-control" name="tempat_lahir" autocomplete="off" required/>
</div>
<div class="form-group">
<label>Tanggal Lahir</label>
<div class="input-group">
<input type="text" class="form-control date-picker" data-date-format="dd-mm-yyyy" name="tanggal_lahir" autocomplete="off" required>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
<div class="form-group">
<label>Jenis Kelamin</label>
<div class="radio">
<label class="radio-inline">
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki
</label>
<label class="radio-inline">
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
</label>
</div>
</div>
<div class="form-group">
<label>Agama</label>
<select class="form-control" name="agama" placeholder="Pilih Agama" required>
<option value=""></option>
<option value="Islam">Islam</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
</select>
</div>
<div class="form-group">
<label>Alamat</label>
<textarea class="form-control" name="alamat" rows="3" required></textarea>
</div>
<div class="form-group">
<label>Telepon</label>
<input type="text" class="form-control" name="telepon" autocomplete="off" maxlength="13" onKeyPress="return goodchars(event,'0123456789',this)" required>
</div>
<div class="form-group">
<label>Foto</label>
<input type="file" name="foto" required>
<p class="help-block">
<small>Catatan :</small> <br>
<small>- Pastikan file yang diupload bertipe *.JPG atau *.PNG</small> <br>
<small>- Ukuran file foto max 1 Mb</small>
</p>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success btn-submit" name="simpan" value="Simpan">
<button type="reset" class="btn btn-danger btn-reset" data-dismiss="modal" aria-hidden="true">Batal</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modal_ubah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<!-- Modal Popup untuk hapus -->
<div class="modal fade" id="modal_hapus">
<div class="modal-dialog">
<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"><i style="margin-right:7px" class="glyphicon glyphicon-trash"></i> Anda yakin ingin menghapus data mahasiswa ?</h4>
</div>
<div class="modal-footer">
<a href="#" type="button" class="btn btn-danger btn-submit" id="link_hapus">Ya, Hapus</a>
<button type="button" class="btn btn-default btn-reset" data-dismiss="modal">Batal</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
7. Selanjutnya buat lagi file bernama tampil-data.php
Isi file tampil-data.php :
<div class="row">
<div class="col col-md-12">
<div class="page-header">
<h4>
<i class="glyphicon glyphicon-user"></i> Data Mahasiswa
<a class="btn btn-success pull-right" href="#" data-target="#modal_tambah" data-toggle="modal">
<i class="glyphicon glyphicon-plus"></i> Tambah
</a>
</h4>
</div>
</div>
</div>
<?php
// fungsi untuk menampilkan pesan
// jika alert = "" (kosong)
// tampilkan pesan "" (kosong)
if (empty($_GET['alert'])) {
echo "";
}
// jika alert = 1
// tampilkan pesan Sukses "Mahasiswa baru berhasil disimpan"
elseif ($_GET['alert'] == 1) {
echo "<div class='alert alert-success alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-ok-circle'></i> Sukses!</strong> Data mahasiswa berhasil disimpan.
</div>";
}
// jika alert = 2
// tampilkan pesan Sukses "Mahasiswa berhasil diubah"
elseif ($_GET['alert'] == 2) {
echo "<div class='alert alert-success alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-ok-circle'></i> Sukses!</strong> Data mahasiswa berhasil diubah.
</div>";
}
// jika alert = 3
// tampilkan pesan Sukses "Mahasiswa berhasil dihapus"
elseif ($_GET['alert'] == 3) {
echo "<div class='alert alert-success alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-ok-circle'></i> Sukses!</strong> Data mahasiswa berhasil dihapus.
</div>";
}
// jika alert = 4
// tampilkan pesan Gagal "NIM sudah ada"
elseif ($_GET['alert'] == 4) {
echo "<div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Gagal!</strong> NIM $_GET[nim] sudah ada.
</div>";
}
// jika alert = 5
// tampilkan pesan Upload Gagal "Pastikan file yang diupload sudah benar"
elseif ($_GET['alert'] == 5) {
echo " <div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Upload Gagal!</strong> Pastikan file yang diupload sudah benar.
</div>";
}
// jika alert = 6
// tampilkan pesan Upload Gagal "Pastikan ukuran file foto tidak lebih dari 1MB"
elseif ($_GET['alert'] == 6) {
echo " <div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Upload Gagal!</strong> Pastikan ukuran file foto tidak lebih dari 1MB.
</div>";
}
// jika alert = 7
// tampilkan pesan Upload Gagal "Pastikan file yang diupload bertipe *.JPG, *.JPEG, *.PNG"
elseif ($_GET['alert'] == 7) {
echo " <div class='alert alert-danger alert-dismissible' role='alert'>
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong><i class='glyphicon glyphicon-remove-circle'></i> Upload Gagal!</strong> Pastikan file yang diupload bertipe *.JPG, *.JPEG, *.PNG.
</div>";
}
?>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Data Mahasiswa</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>Foto</th>
<th>NIM</th>
<th>Nama</th>
<th>Tempat, Tanggal Lahir</th>
<th>Jenim Kelamin</th>
<th>Agama</th>
<th>Alamat</th>
<th>Telepon</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
try {
$no = 1;
// sql statement untuk menampilkan semua data dari tabel is_mahasiswa
$query = "SELECT * FROM is_mahasiswa ORDER BY nim DESC";
// membuat prepared statements
$stmt = $pdo->prepare($query);
// eksekusi query
$stmt->execute();
// tampilkan data
while ($data = $stmt->fetch(PDO::FETCH_ASSOC)) {
$tanggal = $data['tanggal_lahir'];
$tgl = explode('-',$tanggal);
$tanggal_lahir = $tgl[2]."-".$tgl[1]."-".$tgl[0];
echo "<tr>
<td width='50' class='center'>$no</td>";
if ($data['foto']=="") { ?>
<td><img class='img-mahasiswa' src='foto/default_user.png' width='45'></td>
<?php
} else { ?>
<td><img class='img-mahasiswa' src='foto/<?php echo $data['foto']; ?>' width='45'></td>
<?php
}
echo " <td width='60'>$data[nim]</td>
<td width='150'>$data[nama]</td>
<td width='180'>$data[tempat_lahir], $tanggal_lahir</td>
<td width='120'>$data[jenis_kelamin]</td>
<td width='100'>$data[agama]</td>
<td width='250'>$data[alamat]</td>
<td width='80'>$data[telepon]</td>
<td width='100'>
<div class=''>
<a href='#' data-toggle='tooltip' data-placement='top' title='Ubah' style='margin-right:5px' class='btn btn-success btn-sm open_modal' id='$data[nim]' >
<i class='glyphicon glyphicon-edit'></i>
</a>";
?>
<a href="#" onclick="confirm_modal('proses-hapus.php?&nim=<?php echo $data['nim']; ?>');" data-nim="<?php echo $data['nim']; ?>" data-toggle="tooltip" data-placement="top" title="Hapus" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
<?php
echo "
</div>
</td>
</tr>";
$no++;
}
// tutup koneksi database
$pdo = null;
} catch (PDOException $e) {
// tampilkan pesan kesalahan
echo "ada kesalahan pada query : ".$e->getMessage();
}
?>
</tbody>
</table>
</div>
</div>
<!-- modal popup tambah data -->
<div id="modal_tambah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">
<i class="glyphicon glyphicon-plus"></i>
Tambah Data Mahasiswa
</h4>
</div>
<div class="modal-body">
<form action="proses-simpan.php" method="POST" name="modal_popup" enctype="multipart/form-data">
<div class="form-group">
<label>NIM</label>
<input type="text" class="form-control" name="nim" autocomplete="off" maxlength="10" required/>
</div>
<div class="form-group">
<label>Nama Mahasiswa</label>
<input type="text" class="form-control" name="nama" autocomplete="off" required/>
</div>
<div class="form-group">
<label>Tempat Lahir</label>
<input type="text" class="form-control" name="tempat_lahir" autocomplete="off" required/>
</div>
<div class="form-group">
<label>Tanggal Lahir</label>
<div class="input-group">
<input type="text" class="form-control date-picker" data-date-format="dd-mm-yyyy" name="tanggal_lahir" autocomplete="off" required>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
<div class="form-group">
<label>Jenis Kelamin</label>
<div class="radio">
<label class="radio-inline">
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki
</label>
<label class="radio-inline">
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
</label>
</div>
</div>
<div class="form-group">
<label>Agama</label>
<select class="form-control" name="agama" placeholder="Pilih Agama" required>
<option value=""></option>
<option value="Islam">Islam</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
</select>
</div>
<div class="form-group">
<label>Alamat</label>
<textarea class="form-control" name="alamat" rows="3" required></textarea>
</div>
<div class="form-group">
<label>Telepon</label>
<input type="text" class="form-control" name="telepon" autocomplete="off" maxlength="13" onKeyPress="return goodchars(event,'0123456789',this)" required>
</div>
<div class="form-group">
<label>Foto</label>
<input type="file" name="foto" required>
<p class="help-block">
<small>Catatan :</small> <br>
<small>- Pastikan file yang diupload bertipe *.JPG atau *.PNG</small> <br>
<small>- Ukuran file foto max 1 Mb</small>
</p>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success btn-submit" name="simpan" value="Simpan">
<button type="reset" class="btn btn-danger btn-reset" data-dismiss="modal" aria-hidden="true">Batal</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modal_ubah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<!-- Modal Popup untuk hapus -->
<div class="modal fade" id="modal_hapus">
<div class="modal-dialog">
<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"><i style="margin-right:7px" class="glyphicon glyphicon-trash"></i> Anda yakin ingin menghapus data mahasiswa ?</h4>
</div>
<div class="modal-footer">
<a href="#" type="button" class="btn btn-danger btn-submit" id="link_hapus">Ya, Hapus</a>
<button type="button" class="btn btn-default btn-reset" data-dismiss="modal">Batal</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
8. Sampai disini kalian dapat menampilkan data dari database
Tutorial Php Crud Ajax Pdo Mysql Database Menampilkan Data
Reviewed by kilhem
on
11/27/2017 12:37:00 pm
Rating:
Reviewed by kilhem
on
11/27/2017 12:37:00 pm
Rating:
No comments:
Jangan malu untuk berkomentar