Contoh Modal Popup dengan Bootstrap (Bagian I)

Sebenarnya tutorial yang sedikit ini isinya beberapa hal, diantaranya contoh modal popup hehe, tapi ada juga contoh bagaimana menulis kode php dengan konsep class dan method (walau gak tau deh bener apa gak orang ane juga masih belajar :malu ) setidaknya kita belajar bareng ya, kalau ada yang salah mohon dibenerin, makasih 😀

Bagian pertama ini kita bahas bootstrap dulu, Bootstrap merupakan salah satu css framework yang sering digunakan para pembuat program berbasis web untuk membuat tampilan dengan cepat, responsif, interaktif dan menarik.  Baiklah mari kita latihan untuk membuat kotak dialog simpel dan menempatkan action dimana action tersebut akan memanggil fungsi php.  Contoh kasusnya sebagai berikut :

Seseorang punya pesan didalam sebuah aplikasi website, nah aplikasi yang akan kita buat kali ini seseorang itu bisa memilih apakah pesan akan ditandai telah dibaca atau hanya dibaca saja tapi tidak ditandai sebagai dibaca.  Berikut langkah-langkahnya :

Pertama, kita buat terlebih dahulu databasenya dengan satu table, sqlnya seperti berikut ini :

CREATE TABLE IF NOT EXISTS `pesan` (
  `id_pesan` INT(11) NOT NULL AUTO_INCREMENT,
  `dari` VARCHAR(20) NOT NULL,
  `judul` VARCHAR(50) NOT NULL,
  `deskripsi` VARCHAR(300) NOT NULL,
  `created_date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `is_read` INT(1) NOT NULL DEFAULT '0' COMMENT '1 berarti sudah dibaca 0 berarti belum',
  PRIMARY KEY (`id_pesan`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
--
-- Dumping data untuk tabel `pesan`
--
 
INSERT INTO `pesan` (`id_pesan`, `dari`, `judul`, `deskripsi`, `created_date`, `is_read`) VALUES
(1, 'echolist', 'Belajar Membaca Pesan', 'Pesan ini telah saya baca dan diamati sehingga user dapat menentukan apakah akan ditandai sebagai dibaca atau tidak', '2015-07-21 10:47:02', 1),
(2, 'kamu', 'tanya makan', 'hai hai hai, sudah makan belum ?', '2015-07-21 12:27:03', 1);

setelah itu kita buat halaman utama dari web yang akan kita buat, namakan saja index.php

<?php
//ben gampang kalau banyak class yang di load hehe
function __autoload($class_name) {
    include $class_name . '.php';
}
//instantiate class database
$db = new database();
$hasil = null;
$deskripsi = "";
if(isset($_POST['btnUpdateRead']) && $_POST['btnUpdateRead'] != ""){
	$id = $_POST['txtId'];
	$hasil = $db->updateRead($id, 1);
	$deskripsi = "buka";
}
if(isset($_POST['btnUpdateShow']) && $_POST['btnUpdateShow'] != "") {
	$id = $_POST['txtId'];
	$hasil = $db->updateRead($id);
	$deskripsi = "buka";
}
?>
<html>
	<head>
		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<script>
			$(document).ready(function(){
				$('.bacaPesan').click(function(){
					var id = $(this).attr('data-value');
					$('#txt_idJudul').val(id);
				});
			});
		</script>
 
	</head>
	<body>
		<div class="row">
			<div class="col-lg-12">
				<?php
					if($deskripsi != ""){
				?>
					<div class="form-group">
				    	<label>Nama Pengirim</label>
				    	<br />
				    	<span><?=$hasil[0]['dari']?></span>
				    </div>
				    <div class="form-group">
				    	<label>Judul Pesan</label>
				    	<br />
				    	<span><?=$hasil[0]['judul']?></span>
				    </div>
				    <div class="form-group">
				    	<label>deskripsi</label>
				    	<br />
				    	<span><?=$hasil[0]['deskripsi']?></span>
				    </div>
				    <a href="index.php">Kembali</a>
 
				<?php
					}else{
				?>
				<table class="datatable table table-responsive" id="dtPesan">
					<thead>
						<tr>
							<th>
								Judul
							</th>
							<th>
								Dari
							</th>
							<th>
								Waktu Diterima
							</th>
							<th>
								Status
							</th>
							<th>
								Baca
							</th>
						</tr>
					</thead>
					<tbody>
						<?php
						$rows = $db->getPesan();
						foreach($rows as $row){
							?>
							<tr>
								<td><?=$row['judul']?></td>
								<td><?=$row['dari']?></td>
								<td><?=$row['created_date']?></td>
								<td><?=($row['is_read']==1?"sudah dibaca":"belum dibaca")?></td>
								<td><input type='button' value='lihat pesan' class=' bacaPesan btn btn-lg btn-info' data-toggle="modal" data-target="#myModal" data-value='<?=$row['id_pesan']?>'/></td>
							</tr>
 
							<?php
						}
						?>
					</tbody>
 
				</table>
				<?php
				}
				?>
				<!--my modalnya ditaruh dimari -->
				<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">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">Pesan</h4>
				      </div>
				      <div class="modal-body">
				      	<form method="post" action="">
				      		<input type="hidden" name="txtId" id="txt_idJudul" />
					        <input type="submit" name="btnUpdateRead" class="btn btn-success" value="Baca dan Tandai" />
					        <input type="submit" name="btnUpdateShow" class="btn btn-info" value="Baca Saja"/>
				        </form>
				      </div>
				      <div class="modal-footer">
 
				      </div>
				    </div>
				  </div>
				</div>
			</div>
		</div>
	</body>
</html>

nah databasenya.php seperti ini :

<?php
class database {
	private function getDbase() { 
    	return new mysqli('localhost', 'root', '', 'test'); ; 
  	} 
 
	public function getPesan(){
		//dari sini fungsinya bisa diubah-ubah ndiri gan, misal ditambahin parameter per user
		//tutorialnya yang disini yang simpel aja haha 
 
		//instantiating mysqli query and open it (yakke :v )
		$koneksi = self::getDbase();
		//bikin query 
		$query = "select * from pesan ";
		$result = $koneksi->query($query);
 
		while($row = $result->fetch_array(MYSQLI_ASSOC))
		{
			$rows[] = $row;
		}
 
		//hapus result
		$result->free();
 
		//tutup koneksi
		$koneksi->close();
		//bar, return tabel dari sql
		return $rows;
	}
 
	public function updateRead($id_pesan, $tandai=0){
 
		//instantiating mysqli query and open it (yakke :v )
		$koneksi = self::getDbase();
 
		//jika tandai 1 maka di update
		if($tandai == 1 ){
			$query = "update pesan set is_read = 1 where id_pesan= ? ";
			if($statement = $koneksi->prepare($query)){
				$statement->bind_param("i",$id_pesan);
				$statement->execute();
			}
			$statement->close();
		}
		//bikin query 
		$query = "select id_pesan, dari, judul, deskripsi, created_date from pesan where id_pesan= ? ";
 
		if($statement = $koneksi->prepare($query)){
			$statement->bind_param("i",$id_pesan);
			$statement->execute();
			$statement->bind_result($id_pesan, $dari,$judul,$deskripsi,$tanggal);
			$rows = null;
			while ($statement->fetch()) {
        		$row = array(
        			'id_pesan' => $id_pesan,
        			'dari' => $dari,
        			'judul' => $judul,
        			'deskripsi' => $deskripsi,
        			'tanggal' => $tanggal
        		);
        		$rows[] = $row;
    		}
			//hapus result
			$statement->close();
		}
		//tutup koneksi
		$koneksi->close();
		//bar, return tabel dari sql
		return $rows;		
 
	}
 
 
}
 
 
?>

oke sekarang penjelasan khusus yang bootstrap :ngakak kalau yang lain ntar ye kalau ada waktu kita belajar lagi 😀

Jadi pertama-tama kalau mau pakai bootstrap terlebih dahulu kudu paham paling nggak dasar html terlebih dahulu dan juga javascript dikit-dikit dan css juga dikit-dikit, kalau paham banyak mending baca langsung sumbernya dimari :ngakak lebih lengkap dan jelas :p

Ok, sebelum kita nyoba bootstrap pastikan di bagian header html kalian udah ngelink-kan css dan javascript dari bootstrap sendiri, biasanya ane tambahin jquery sendiri karena ane suka bingung kalau ngutak atik javascriptnya hehe :hammer:

 
		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

nah pas nulis artikel ini yang paling baru bootstrapnya versi 3.3.5 jadi ya hrefnya kesitu, kalau misal ke update lagi ntar tinggal diubah aja linknya.

Setelah itu, kalau udah nha sistem kerjanya bootstrap ini pakai div gan, div bisa dianggep layer kali ya, nha layernya itu pakai css yang udah di standarisasi oleh bootstrap. Oh ya bootstrap itu kan pakai CSS 3 yang dimana CSS 3 itu dapat ngenalin screen (resolusi), makanya bootstrap bisa responsive. cara maennya kurang lebih kek gini contohnya
sekarang masuk ke body gan, copas script ini ye

<div class="row">
			<div class="col-lg-4 col-md-6 col-sm-12">bagian kiri</div>
			<div class="col-lg-4 col-md-6 col-sm-12">bagian tengah</div>
			<div class="col-lg-4 col-md-6 col-sm-12">bagian kanan</div>
</div>

nah sekarang coba buka di browser, ini akan sedikit ajaib :ngakak , pada tampilan desktop atau browser full screen maka otomatis kiri tengah kanan akan sejajar.
sekarang coba kecilin dikit di browser, nanti pas ukurannya sekitar se tablet (mbuh resolusi tablet berapa :ngakak ) bakalan jadi kiri tengah sejajar dan kanan dibawah,
sekarang coba kecilin lagi mpe mentok, maka pas ukurannya se hape dia bakalan jadi undak undik ke bawah semua

Dan masih banyak lagi yang lainnya, seperti kalau kita butuh icon, bootstrap pun udah nyediain, tinggal kita panggil class-classnya. Bahkan untuk membuat modal bootstrap pun dengan mudah dapat membuatnya, caranya gini

<input type='button' value='lihat pesan' class='btn btn-lg btn-info' data-toggle="modal" data-target="#myModal"/>
<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">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">Pesan</h4>
				      </div>
				      <div class="modal-body">
				      	<form method="post" action="">
				      		<input type="hidden" name="txtId" id="txt_idJudul" />
					        <input type="submit" name="btnUpdateRead" class="btn btn-success" value="Baca dan Tandai" />
					        <input type="submit" name="btnUpdateShow" class="btn btn-info" value="Baca Saja"/>
				        </form>
				      </div>
				      <div class="modal-footer">
 
				      </div>
				    </div>
				  </div>
				</div>

Nah kita cuman ngetik kode html doang gan, gak perlu nambah-nambah javascript lagi dah jadi 😀 , yang perlu diperhatikan adalah waktu buat button data-targetnya harus sama dengan id modal. Dah langsung tampil deh hehe. Di dalam modal body pun agan sebenarnya bisa maenan div lagi sehingga modal bootstrap yang ditampilin pas mode desktop dan mode tablet bisa berbeda sesuai kebutuhan. Efek munculnya modal pun bisa diatur, kalau diatas itu fade, jadi kayak siluman, dari gak adajadi ada hehe.
Oke sementara segitu dulu ye gan haha, quota ane habis ternyata :hammer:

Leave a Comment