Bootstrap adalah framework yang
digunakan untuk mempermudah dan mempercepat pembuatan halaman website. Kenapa
mempercepat dan mempermudah, karena bootstrap sudah menyediakan css dan
javascript yang siap pakai dan mudah dikembangkan. Maka dari itu sebenarnya
Bootstrap ini adalah framework yang dikhususkan untuk front-end.
Modal adalah seperti Pop up yang digunakan
bisa melakukan konfirmasi dan bisa juga menampilkan pesan, missal kita mau
menghapus data, kita bisa menggukan modal untuk mengkonfirmasi data itu apakah
kita ingin menghapus data atau tidak, dan contoh lain bisa menampilkan data, seperti
kita ingin mengedit data tanpa harus berpindah kehalaman keberikutnya artinya
tetap dihalaman itu sendiri. Nah itu bisa kita gunakan mengunakan modal.
Contoh Pengenalan modal mengunakan
bootstrap, saya disini mengunakan konsep codeigniter, tampak data guru pada gambar dibawah, nah
seandainya saya ingin mengedit data atau mengubah data yang saya lakukan
menekan tombol edit yang tampak seperti gambar dibawah
Pada saat tombol edit dipilih makan akan muncul modal untuk form untuk edit data, tampak seperti pada gambar dibawah ini.
//Untuk Model
<?php
class
M_data extends CI_Model{
function tampil_guru(){
return
$this->db->get('tbl_guru')->result();
}
?>
//Untuk Controler
function tbl_guru(){
$data['guru']=$this->M_data->tampil_guru();
$this->load->view('admin/v_inputguru',$data);
}
// Untuk View
<section>
<title>Data
Guru</title>
<link rel="stylesheet"
type="text/css" href="<?php echo
base_url().'css/css/bootstrap.css'?>">
<script type="text/javascript"
src="<?php echo
base_url().'css/css/jQuery-2.1.4.min.js'?>"></script>
<script type="text/javascript"
src="<?php echo
base_url().'css/css/bootstrap.js'?>"></script>
<legend>Data
Guru</legend>
<table class="table
table-bordered table-striped">
<thead>
<tr>
<th>Nip</th>
<th><center>Nama
Guru</center></th>
<th>Alamat</th>
<th>Tanggal
Lahir</th>
<th>Status</th>
<th>Status
Pegawai</th>
<th>Mata
Pelajaran</th>
<th>Foto
Pegawai</th>
<th><center>Aksi</center></th>
</tr>
</thead>
<style>//
Sedikit saya tambahkan css untuk mempercantik kolom, baris dan fotonya
td{
font-size:12px;
text-align:center;
width:16px;
}
tr{
padding:10px
12px
}
th{
font-size:10px;
text-align:center;
}
img{
width:50%;
}
#pilih{
width:25%;
}
</style>
<?php
foreach($guru as $sq)
{
?>
<tbody>
<tr>
<td><?php
echo $sq->Nip ?></td>
<td><?php
echo $sq->Nama ?> </td>
<td><?php
echo $sq->Alamat ?></td>
<td><?php
echo $sq->Tgl_Lahir ?> </td>
<td><?php
echo $sq->Status ?></td>
<td><?php
echo $sq->Status_Pegawai ?> </td>
<td><?php
echo $sq->Kode_Mapel ?></td>
<td><img
src="<?php echo base_url();?>simpanfoto/<?php echo
$sq->Nama_Foto?>"> </td>
<td
id="pilih"><a href="<?php echo
base_url().'admin/cek/hapus_guru/'.$sq->Nip.'/'.$sq->
Nama_Foto?>"
class="btn btn-primary">Hapus</a
<a
href="<?php echo
base_url().'admin/cek/edit_guru/'.$sq->Nip.'/'.$sq->Nama_Foto?>" data-toggle="modal" data-target="#myModal" class="btn
btn-primary">Edit</a>
<a
data-toggle="modal" data-target="#myModal" class="btn
btn-primary">Tambah</a>
</td>
</tr>
</tbody>
<?php
}
?>
</table>
//Modal
<div id="myModal"
class="modal fade" role="dialog">
<div
class="modal-dialog" id="box">
<div
class="modal-content">
<div
class="modal-header">
<button
type="button" class="close"
onClick="window.location.reload()" data-dismiss="modal"
aria- hidden="true">x</button>
<h3
class="modal-title" id="myModalLabel">Tambah Data
Guru</h3>
</div>
<form class="form-horizontal"
method="post"
enctype="multipart/form-data"
action="<?php echo base_url().'admin/cek/upload'?>">
action="<?php echo base_url().'admin/cek/upload'?>">
<div
class="modal-body">
<div
class="form-group">
<label
class="control-label col-xs-3" > Masukkan Nip</label>
<div
class="col-xs-6">
<input
name="nip" class="form-control" type="text"
placeholder="Nip" required>
</div>
</div>
<div
class="form-group">
<label
class="control-label col-xs-3" >Nama Guru</label>
<div
class="col-xs-6">
<input
type="text" name="nama"
class="form-control" placeholder="Nama Guru"/>
</div>
</div>
<div class="form-group">
<label
class="control-label col-xs-3" >Alamat</label>
<div
class="col-xs-6">
<input
type="text" name="alamat"
class="form-control" placeholder="Alamat"/>
</div>
</div>
<div class="form-group">
<label class="control-label
col-xs-3" >Tanggal Lahir</label>
<div
class="col-xs-3">
<input
type="date" name="tgllahir" class="form-control"
/>
</div>
</div>
<div class="form-group">
<label class="control-label
col-xs-3" >Status</label>
<div
class="col-xs-3">
<select
name="statusguru" class="form-control">
<option
value="">--Status--</option>
<option
value="Menikah">Menikah</option>
<option
value="Belum Menikah">Belum Menikah</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label
col-xs-3" >Status Pegawai</label>
<div
class="col-xs-3">
<select
name="status" class="form-control">
<option
value="">--Status--</option>
<option
value="Tetap">Tetap</option>
<option
value="Tidak Tetap">Tidak Tetap</option>
<option
value="Honor">Honor</option>
</select>
</div>
</div>
<div class="form-group">
<label
class="control-label col-xs-3" >Bidang Studi</label>
<div
class="col-md-3">
<select
name="bidangasuh" class="form-control">
<option
value="">--Kode Mapel--</option>
<?php
foreach($mapel
as $sq)
{
?>
<option
value="<?php echo $sq->Kode_Mapel ?>"><?php echo
$sq->Kode_Mapel?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label
col-xs-3" >Input Foto</label>
<div
class="col-sm-3">
<input
type="file" name="gambar"/>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal"
onClick="window.location.reload()"
aria-hidden="true">Tutup</button>
<button class="btn
btn-info">Simpan</button>
</div>
</div>
</div></div></div>
</section>
Komentar
Posting Komentar