Membuat Zoeken Sorteren Pagineren Mengunakan JqueryDataTables Php Bootstrap Mysqli

door portgastea · juni- 29, 2015

Hai All ketemu lagi di bulan puasa yang berkah ini dengan pria ganteng asli sunda he..he, tutorial kali ini adalah Membuat Searching Sorting Pagging Mengunakan JqueryDataTables Php Bootstrap Mysqli.
DataTable adalah salah satu plugin dari jquery yang digunakan untuk menampilkan data dalam bentuk grid (Table) Beberapa fitur yang ada pada DataTable diantaranya :

– Searching (Pencarian Data)

– Sorting (Mengurutkan Data Berdasarkan Header Kolom)

– Pangging (Halaman)

– Batas tampilan da perhalaman dalam bentuk combobox

Sebelum kita mulai download terlebih dahulu JqueryDataTable & Bootstrap nya, lalu simpan di folder htdocs anda, setelah itu kita buat database dengan nama Tutorial & Tabel baru di mysql seperti dibawah ini :

master.tbl

CREATE TABLE IF NOT EXISTS `master` (
`id_daftar` int(5) NOT NULL,
  `s_nama` varchar(150) NOT NULL,
  `s_jk` int(1) NOT NULL,
  `s_agama` int(1) NOT NULL,
  `s_tmp_lahir` varchar(100) NOT NULL,
  `s_tgl_lahir` date NOT NULL,
  `jrsn_pil1` int(4) NOT NULL,
  `jrsn_pil2` int(4) NOT NULL,
  `tgl_daftar` date NOT NULL,
  `nisn` varchar(15) NOT NULL,
  `noreg` varchar(10) NOT NULL,
  `Alamat` text NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=172 ;

Kita insert juga data ke tabel master seperti dibawah ini

Insert Table Master

INSERT INTO `master` (`id_daftar`, `s_nama`, `s_jk`, `s_agama`, `s_tmp_lahir`, `s_tgl_lahir`, `jrsn_pil1`, `jrsn_pil2`, `tgl_daftar`, `nisn`, `noreg`, `Alamat`) VALUES
(30, 'GUSTI SUMAINDRA', 1, 1, 'sadadad', '2009-03-01', 1103, 1254, '2015-04-08', '0001', '0001', ''),
(31, 'AFIF PRASETYA', 1, 0, '', '0000-00-00', 0, 0, '2015-04-08', '0002', '0002', ''),
(32, 'RIO RIVALDO', 1, 1, 'BEKASI', '1999-06-19', 1289, 1103, '2015-04-08', '9994256564', '0003', ''),
(33, 'MITA OKTAVIANI', 2, 1, 'JAKARTA', '2000-10-16', 2063, 1174, '2015-04-09', '0004', '0004', ''),
(34, 'MUHAMMAD NAJRI ALGHIFARI', 1, 0, '', '0000-00-00', 0, 0, '2015-04-11', '0005', '0005', ''),
(35, 'MUHAMAD YUSUP', 1, 1, 'JAKARTA', '2000-04-01', 1254, 1289, '2015-04-13', '0006', '0006', ''),
(39, 'RIZKI RAHMAN', 1, 1, 'Jakarta', '2000-01-06', 1289, 1254, '2015-04-14', '0008', '0008', ''),
(40, 'MIZAM FADHLAN ANANDA', 1, 1, 'Jakarta', '2000-08-24', 2063, 1289, '2015-04-15', '0009', '0009', ''),
(41, 'AZKIYAI FAIZIN', 1, 1, 'JAKARTA', '1999-12-29', 2063, 1289, '2015-04-15', '0010', '0010', ''),
(42, 'ANDIKA FEBRIANA', 1, 1, '04', '2000-02-04', 2063, 1174, '2015-04-15', '0011', '0011', ''),
(43, 'ANAK ANUNG ANINDITO', 1, 1, 'JAKARTA', '2000-06-04', 2063, 1174, '2015-04-15', '0012', '0012', ''),
(44, 'RIZKY APRIANTO', 1, 1, 'Bekasi', '2000-04-15', 2063, 1174, '2015-04-15', '0013', '0013', ''),
(45, 'AVREDHO OZA YAMADHA', 1, 1, 'ngawi', '2000-03-25', 1289, 1103, '2015-04-15', '0014', '0014', ''),
(46, 'SAYYID MUHAMMAD', 1, 1, 'BEKASI', '2000-08-25', 1289, 1174, '2015-04-16', '0015', '0015', '');

Jika sudah kita buat file koneksi.php seperti dibawah ini :

Source code

<?php
 
$db = new mysqli('localhost','root', '12345', 'tutorial');
 
if($db->connect_errno > 0){
 
die('Unable to connect to database [' . $db->connect_error . ']');
 }
?>

Selanjutnya kita buat file index.php seperti dibawah ini :

Source code

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Serching Sorting Pagging Mengunakan JqueryDataTables Php Bootstrap Mysqli</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
	<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen"> 
	<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
 
  </head>
 
  <body>
 
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://andeznet.com">AndezNet</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="media.php">Back To Home</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div> 
  </div>
  	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
 
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->
 
 <div class="container">
<div class="table-responsive">
 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Noreg</th>
						<th>Naam</th>
						<th>Tempat Lahir</th>
						<th>Tanggal Lahir</th>
						<th>Tanggal Daftar</th>
 
					</tr>
				</thead>
 
 
				<tbody>
				<?php
				include "koneksi.php";
				$view=mysqli_query($db,"select * from master");
				$no=0;
				while($row=mysqli_fetch_array($view)){
				?>
					<tr>
						<td><?php echo $row['10'];?></td>
						<td><?php echo $row['1'];?></td>
						<td><?php echo $row['4'];?></td>
						<td><?php echo $row['5'];?></td>
						<td><?php echo $row['8'];?></td>
 
					</tr>
				<?php
				}
				?>
				</tbody>
 
 </table>
</div>
</div>
 
 
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></a>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">Gudang Teknologi & Informasi</p>
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->	
 
 
	 <script src="assets/js/jquery.js"></script>
	  <script src="assets/js/jquery.dataTables.js"></script>
	  <script src="assets/js/jquery.dataTables.min.js"></script>
 
	  <script>
	  $(document).ready(function() {
    $('#example').DataTable();
} );
	  </script>
 
  </body>
</html>

Jika sudah benar maka akan muncul seperti gambar dibawah ini :

Ok sekian tutorial dari saya semoga bermanfaat di bulan puasa yang penuh berkah ini.

DOWNLOAD

erik zegt:

juni- 30, 2015 Bij 12:31 ben

dank je

Antwoord
- portgastea zegt:
  
  juni- 30, 2015 Bij 12:48 ben
  
  Ok gan
  
  Antwoord
rivaldi zegt:

juni- 30, 2015 Bij 4:25 ben

mantav om..
nuhun tutorialnya.

kalau ditambahkan read bagaimana ya om?
jadi kita klik salah satu datanya,trus nampilin datanya.

Antwoord
- portgastea zegt:
  
  juni- 30, 2015 Bij 4:52 ben
  
  tiangal tambah aja belakangna
  
  bisa di satukan dengan modal bootstrap jga ketika di klik
  
  Antwoord
  - rivaldi zegt:
    
    juni- 30, 2015 Bij 5:03 ben
    
    punya tutorial atau reperensi nya om ?
    
    Antwoord
    - portgastea zegt:
      
      juni- 30, 2015 Bij 6:01 ben
      
      Download ASKA ada di web ini, disitu ada kok.
      
      Antwoord
      - rivaldi zegt:
        
        juni- 30, 2015 Bij 7:25 ben
        
        nuhun ah kang portgastea.
        
        kang punya reperensi situs belajar php mysql yang baik + complete ?

Membuat Zoeken Sorteren Pagineren Mengunakan JqueryDataTables Php Bootstrap Mysqli

Dit vind je misschien ook leuk...

7 reacties

Laat een antwoord achter antwoord annuleren

Laatste artikels

Categorieën

Archieven

Webgebaseerde applicatie-ontwikkelingsservices

Bezoekers

Membuat Zoeken Sorteren Pagineren Mengunakan JqueryDataTables Php Bootstrap Mysqli

Dit vind je misschien ook leuk...

Membuat Form Login dengan PHP Jquery Mysqli Bootstrap

Autocomplete Search dengan PHP, MySQLi, Ajax dan jQuery

Membuat Costume JqueryDataTable dengan Range Datepicker

7 reacties

Laat een antwoord achter antwoord annuleren

Populair

Laatste artikels

Categorieën

Archieven

Webgebaseerde applicatie-ontwikkelingsservices

Bezoekers