Assalamu 'alaikum wr wb
Saya akan menyambung postingan sebelumnya membuat proyek simpel dengan Framework Laravel,
Sebelum dimulai mari kita awali dengan Bissmillah,,,,
-
buka : http://localhost/magerblog/murid
tampilan awal
kita akan menambahkan datatable dan memper indah tampilan dengan bootstrap kurang lebih akan seperti ini,
pada koding views/murid/index.blade.php kita revisi menjadi seperti ini,
<!DOCTYPE html>
<html>
<head>
<title>mahasiswa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Lat Crud</h1>
</div>
<div class="container">
<br/>
<!-- <a href="v_add_mahasiswa.php">Tambah Mahasiswa</a> -->
<a href="v_add_mahasiswa.php" class="btn btn-success" role="button">Tambah Mahasiswa</a><br/><br/>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Id Mahasiswa(NIM)</th>
<th>Nama Mahasiswa</th>
<th width="200">Jurusan</th>
<th>Jenis Kelamin</th>
<th>Aksi</th>
</tr>
</thead>
<?php
include 'koneksi.php';
$data = mysqli_query($koneksi, "select * from mahasiswa where is_active = 1");
//apa bila data kosong
if (mysqli_num_rows($data) == 0) {
//jika data kosong akan menampilkan
echo '<mark> - Data Belum Kosong - </mark>';
}else{
while ($d = mysqli_fetch_array($data)) {
?>
<tr>
<td><?php echo $d['mahasiswa_id']; ?></td>
<td><?php echo $d['mahasiswa_name']; ?></td>
<td><?php echo $d['mahasiswa_jurusan']; ?></td>
<td><?php echo $d['mahasiswa_jk']; ?></td>
<td>
<a href="v_edit_mahasiswa.php?mahasiswa_id=<?php echo $d['mahasiswa_id']; ?>" class="btn btn-warning" role="button">Edit</a> ||
<a href="action_delete_mahasiswa.php?mahasiswa_id=<?php echo $d['mahasiswa_id']; ?>" class="btn btn-danger" role="button">Hapus</a>
</td>
</tr>
<?php
}
}
?>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
-<html>
<head>
<title>mahasiswa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Lat Crud</h1>
</div>
<div class="container">
<br/>
<!-- <a href="v_add_mahasiswa.php">Tambah Mahasiswa</a> -->
<a href="v_add_mahasiswa.php" class="btn btn-success" role="button">Tambah Mahasiswa</a><br/><br/>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Id Mahasiswa(NIM)</th>
<th>Nama Mahasiswa</th>
<th width="200">Jurusan</th>
<th>Jenis Kelamin</th>
<th>Aksi</th>
</tr>
</thead>
<?php
include 'koneksi.php';
$data = mysqli_query($koneksi, "select * from mahasiswa where is_active = 1");
//apa bila data kosong
if (mysqli_num_rows($data) == 0) {
//jika data kosong akan menampilkan
echo '<mark> - Data Belum Kosong - </mark>';
}else{
while ($d = mysqli_fetch_array($data)) {
?>
<tr>
<td><?php echo $d['mahasiswa_id']; ?></td>
<td><?php echo $d['mahasiswa_name']; ?></td>
<td><?php echo $d['mahasiswa_jurusan']; ?></td>
<td><?php echo $d['mahasiswa_jk']; ?></td>
<td>
<a href="v_edit_mahasiswa.php?mahasiswa_id=<?php echo $d['mahasiswa_id']; ?>" class="btn btn-warning" role="button">Edit</a> ||
<a href="action_delete_mahasiswa.php?mahasiswa_id=<?php echo $d['mahasiswa_id']; ?>" class="btn btn-danger" role="button">Hapus</a>
</td>
</tr>
<?php
}
}
?>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Reload http://localhost/magerblog/murid
-
sekarang tampilan tambah.blade.php
-
tampilan awal
pada koding views/murid/tambah.blade.php kita revisi menjadi seperti ini,
<!DOCTYPE html>
<html>
<head>
<title>Tambah murid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="mg.jpg" alt="MagerBlog" style="width:40px;">
</a>
</nav>
<div class="container-fluid">
<h3>
Tambah Murid
</h3>
<a href="/magerblog/murid" class="btn btn-secondary">Kembali</a>
<br/>
<br/>
<form action="/magerblog/murid/store" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
Nim <br/>
<input type="text" name="nim_mrd" required="required" placeholder="Nomor Induk Murid" class="form-control">
Nama Murid <br/>
<input type="text" name="nama_mrd" required="required" placeholder="Nama Murid" class="form-control">
Foto <br/>
<input type="file" name="foto_mrd" required="required" placeholder="Foto" accept="image/*"><br/><br/>
<input type="submit" value="Simpan" class="btn btn-success">
</form>
</body>
</html>
-<html>
<head>
<title>Tambah murid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="mg.jpg" alt="MagerBlog" style="width:40px;">
</a>
</nav>
<div class="container-fluid">
<h3>
Tambah Murid
</h3>
<a href="/magerblog/murid" class="btn btn-secondary">Kembali</a>
<br/>
<br/>
<form action="/magerblog/murid/store" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
Nim <br/>
<input type="text" name="nim_mrd" required="required" placeholder="Nomor Induk Murid" class="form-control">
Nama Murid <br/>
<input type="text" name="nama_mrd" required="required" placeholder="Nama Murid" class="form-control">
Foto <br/>
<input type="file" name="foto_mrd" required="required" placeholder="Foto" accept="image/*"><br/><br/>
<input type="submit" value="Simpan" class="btn btn-success">
</form>
</body>
</html>
reload http://localhost/magerblog/murid/tambah
kurang lebih akan seperti ini
sekarang tampilan edit.blade.php
tampilan awal
pada koding views/murid/edit.blade.php kita revisi menjadi seperti ini,
<!DOCTYPE html>
<html>
<head>
<title>edit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="mg.jpg" alt="MagerBlog" style="width:40px;">
</a>
</nav>
<div class="container-fluid">
<h3>
Edit Data Murid
</h3>
<a href="/magerblog/murid" class="btn btn-secondary"> Kembali</a>
@foreach($murid as $mrd)
<form action="/magerblog/murid/update" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{ $mrd->id_murid }}"> <br/>
Nim <br/>
<input type="text" required="required" name="nim_mrd" value="{{ $mrd->id }}" class="form-control">
Nama Murid <br/>
<input type="text" required="required" name="nama_mrd" value="{{ $mrd->nama_murid }}" class="form-control"> <br/>
Foto Murid<br/>
<input type="file" required="required" name="foto_mrd" value="{{ $mrd->foto_murid }}" accept="image/*"> <br/><br/>
<input type="submit" value="Update Data" class="btn btn-success">
</form>
@endforeach
</div>
</body>
</html>
-<html>
<head>
<title>edit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="mg.jpg" alt="MagerBlog" style="width:40px;">
</a>
</nav>
<div class="container-fluid">
<h3>
Edit Data Murid
</h3>
<a href="/magerblog/murid" class="btn btn-secondary"> Kembali</a>
@foreach($murid as $mrd)
<form action="/magerblog/murid/update" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{ $mrd->id_murid }}"> <br/>
Nim <br/>
<input type="text" required="required" name="nim_mrd" value="{{ $mrd->id }}" class="form-control">
Nama Murid <br/>
<input type="text" required="required" name="nama_mrd" value="{{ $mrd->nama_murid }}" class="form-control"> <br/>
Foto Murid<br/>
<input type="file" required="required" name="foto_mrd" value="{{ $mrd->foto_murid }}" accept="image/*"> <br/><br/>
<input type="submit" value="Update Data" class="btn btn-success">
</form>
@endforeach
</div>
</body>
</html>
reload http://localhost/magerblog/murid/edit/1
kurang lebih akan seperti ini
desain halaman menggunakan bootstrap mudah kann :D
post berikutnya insya allah akan membuat relasi antara tabel murid dan tabel nilai pada menu home
tungguu yaahh :D
ConversionConversion EmoticonEmoticon