Sehubungan dengan kebutuhan untuk dapat menampilkan daftar file PDF, dalam tutorial pemrograman web kali ini, kita juga akan membuat bagaimana memanggil sekumpulan daftar file PDF dari database dengan menggunakan PHP dan Bootstrap sebagai interfacenya.
Berikut ini adalah ouput dari akhir tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini:
 |
| Gambar.1 |
Dan jika kita klik pada salah satu link dari daftar file PDF yang dimunculkan pada Gambar.1, maka akan diload file PDF dan ditampilkan seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
 |
| Gambar.2 |
Langkah-langkahnya
1. Create databaseDisini database diberinama dbpdf, yang memiliki sebuah tabel bernama filepdf. Berikut ini adalah script untuk database dbpdf :
CREATE TABLE IF NOT EXISTS `filepdf` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`judul` varchar(255) NOT NULL,
`jenis` enum('Peraturan Pemerintah','Peraturan Presiden','Keputusan Menteri') NOT NULL,
`namafile` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
INSERT INTO `filepdf` (`id`, `judul`, `jenis`, `namafile`) VALUES
(1, 'KAWASAN EKONOMI KHUSUS TANJUNG KELAYANG', 'Peraturan Pemerintah', '1'),
(2, 'PENATAAN PEGAWAI NEGERI SIPIL KEMENTERIAN PENDIDIKAN NASIONAL', 'Keputusan Menteri', '2'),
(3, 'TUNJANGAN KINERJA PEGAWAI DI LINGKUNGAN KEMENTERIAN AGAMA', 'Peraturan Presiden', '3');
2. Create file connect.php
File connect.php bertujuan untuk membangun koneksi antara aplikasi dengan database.
<?php
$con=mysqli_connect("localhost","root","","dbpdf");
?>
3. Create file head.php
File head.php bertujuan untuk memanggil sejumlah librari css dan js. Karena dalam tutorial ini kita menggunakan Bootstrap, maka dalam file ini kita akan memanggil file-fle css dan js dari Bootstrap.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Menampilkan Dokumen PDF</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<!--<link rel='stylesheet' href='assets/css/jquery-ui-custom.css'>-->
<!-- Akhir dari Bagian css -->
<!-- Bagian js -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- akhir dari Bagian js -->
<style type="text/css">
.grsbawah{
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #AD0B47;
}
</style>
</head>
4. Create file navigasi.php
File navigas.php bertujuan untuk membentuk menu-menu (navigasi) :
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br>
5. Create file index.php
Dalam file index.php, kita memanggil file connect.php, file head.php dan file navigasi.php. File index.php akan menampilkan daftar-daftar dari dokumen PDF yang disajikan dalam bentuk jenis/Kategori file PDF beserta judulnya yang memiliki link ke file PDF tersebut.
<?php include "connect.php"; ?>
<!DOCTYPE html>
<html lang="en">
<?php include "head.php";?>
<body>
<?php include "navigasi.php";?>
<!--- Tampil Judul dan Kategori PDF-->
<div class="container">
<h2>Contoh Mengload Dokumen PDF</h2>
<div class="row">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="pull-left">DOKUMEN PDF</div>
<br>
</div>
<div class="panel-body">
<?php
$qu=mysqli_query($con,"select * from filepdf order by id desc limit 3");
$no=1;
while($has=mysqli_fetch_row($qu))
{
if($no<10)
$no='0'.$no;
echo "
<div class='row' style='margin-bottom:12px;padding-left:15px'>
<div class='col-md-2' style='background-color:#EE0930 ;color:#eee' ;>
<h2 style='text-align:center'>$no</h2>
</div>
<div class='col-md-10'>
<h5 style='padding-bottom:0px;'>$has[2]</h5>
<hr class='grsbawah'>
<h5><a href='load_pdf.php?id=$has[0]'>$has[1]</a></h5>
</div>
</div>";
$no++;
}
?>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir Tampil Judul dan Kategori PDF -->
</body>
</html>
6. Create file load.php
Ketika anda mengklik link pada bagian judul yang muncul pada file index.php, maka file load.php akan menampilkan dokumen PDF yang relevan.
<?php include "connect.php"; ?>
<!DOCTYPE html>
<html lang="en">
<?php include'head.php'; ?>
<body>
<?php include "navigasi.php"; ?>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="row">
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="pull-left">DOKUMEN PDF</div>
<br>
</div>
<div class="panel-body">
<?php
$data=mysqli_fetch_row(mysqli_query($con,"select * from filepdf where id='".$_GET['id']."'"));
?>
<div style='border-bottom:1px solid #000'><?php echo $data[1]; ?></div>
<div><?php echo $data[2]; ?></div><br>
<div>
<embed src="docPDF/<?php echo $data[0]; ?>.pdf" type="application/pdf" width="100%" height="700"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Terima kasih gan...
BalasHapusSangat bermanfaat artikelnya brooo..
BalasHapusklo boleh tambahkan artikelnya untuk upload filenya ke folder...
udah lama ku cari2 tidak ketemu juga...
ini email ku broo : delishulu.com@gmail.com