Cara Membuat Auto Load More Menggunakan PHP Mysql part 1

Dalam sebuah website kita pasti mengenal yang namanya pagination yaitu merupakan sebuah fitur yang digunakan untuk membatasi tampilan atau isi dari website tersebut sehingga menjadi lebih rapi, pada pembahasan kali ini kita akan membahas tentang Cara Membuat Auto Load More Menggunakan PHP Mysql, nah cara kerja dari Auto Load More hampir sama dengan pagination yaitu untuk membatasi isi dari website yang kita miliki seperti yang telah saya jelaskan diatas, namun pada Auto Load More ini ada sedikit perbedaan yaitu ketika kita membuka sebuah website dan isi dari website tersebut harus kita kita batasi bisa menggunakan pagination atau Auto Load More, jika kita menggunakan Auto Load More ini tidak perlu mengklik tobol next atau pun prev, karena pada Auto Load More akan secara otomatis me-load isi dari content tersebut ketika muse kita scroll kebawah tanpa harus ada fungsi untuk mengklik tombol next ataupun prev, pada tutorial Cara Membuat Auto Load More Menggunakan PHP Mysql kita akan membagi menjadi dua part pada tutorial Cara Membuat Auto Load More Menggunakan PHP Mysql part 1, kita akan membuat sebuah database, dan file koneksi.php, dan file index.php. untukÂ prosesnya kita akan bahas pada Cara Membuat Auto Load More Menggunakan PHP Mysql part 2.

oke teman teman kita langsung saja masuk ke study case nya tentang Cara Membuat Auto Load More Menggunakan PHP Mysql part 1, pada tutorial Cara Membuat Auto Load More Menggunakan PHP Mysql part 1 yang pertama kita akan membuat sebuah database dengan nama auto_load didalam database tersebut kita akan membuat sebuah table auto seperti dibawah ini

Atau teman-teman bisa menggunakan sql yang terdapat dibawah ini pada database auto_load yang telah kita buat

CREATE TABLE AUTO(
ID INT NOT NULL AUTO_INCREMENT ,
description text NOT NULL ,
PRIMARY KEY ( ID )
)

CREATE TABLE AUTO(

ID INT NOT NULL AUTO_INCREMENT ,

description text NOT NULL ,

PRIMARY KEY ( ID )

)

Setelah kita membuat database dan table berikutnya kita akan membuat file koneksi untuk menghubungkan script yang kita buat dengan database, dan silahkan teman-teman simpan script dibawah ini dengan nama koneksi.php

<?php 
$servername = "localhost";
$username	= "root";
$password	= "";
$dbname 	= "auto_load";

$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
	die ("Connection failed: " .mysqli_connect_error());

}

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "auto_load";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if (!$conn) {

die ("Connection failed: " .mysqli_connect_error());

}

Selanjutnya kita akan membuat file index.php pada file index.php kita menggunakan bootstrap, sehingga content yang kita gunakan menjadi responsive nah silahkan teman-teman simpan script dibawah ini dengan nama index.php

<!DOCTYPE html>
<html>
<head>
	
	<title>Cara Membuat Auto Load More Menggunakan PHP Mysql </title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="load.js"></script>
	<!-- jQuery -->
</head>

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Auto Load More</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
	<h2>Cara Membuat Auto Load More Menggunakan PHP Mysql</h2>		
	<div id="results">
		<?php include "data.php"; ?>
	</div>
	<div id="load" style="text-align:center;"><img src="loader.gif" /></div>
	<div>
		<a class="btn btn-default" href="#" title="">Back to TOP</a>			
	</div>	
</div>	
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Auto Load More Menggunakan PHP Mysql </title>

</head>

<body>

</div>

<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

<h2>Cara Membuat Auto Load More Menggunakan PHP Mysql</h2>

<?php include "data.php"; ?>

</div>

<div>

</div>

</body>

</html>

Oke teman-teman sekian dulu pembahasan kita pada pada tutorial Cara Membuat Auto Load More Menggunakan PHP Mysql part 1 untuk prosesnya akan kita bahas pada Cara Membuat Auto Load More Menggunakan PHP Mysql part 2

Semoga bermanfaat.

Terimakasih

Cara Membuat Auto Load More Menggunakan PHP Mysql part 2

Cara Membuat Auto Load More Menggunakan PHP Mysql part 1

Facebook DUMET School

Konsultasi Gratis

Categories