PHP Display Multiple PDF File From Database
In relation to the need to be able to display a list of PDF files, in this web programming tutorial, we will create how to invoke a set of PDF file lists from a database using PHP and Bootstrap as their interfaces.
Here is the output or final result of this tutorial, as shown in Figure 1 below:
And if we click on one of the links from the list of PDF files that appear in Figure 1, it will load the PDF file and displayed as shown in Figure.2 below:
Step by Step Guide: Display Multi PDF File From Database
1. Create databaseThe database is named as "dbpdf" which has a table named as "filepdf" :
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 connect.php file
The connect.php file aims to build connections between applications and databases.
<?php
$con=mysqli_connect("localhost","root","","dbpdf");
?>3. Create head.php file
The head.php file aims to invoke a number of css and js libraries. Because in this tutorial we use Bootstrap, then in this file we will call the css and js files from 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 navigation.php file
This file will create navigation menu :
<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 index.php file
In the index.php file, we call file of connect.php file, head.php file and navigation.php file. The index.php file will display the list of PDF documents presented in the form of PDF file types / categories along with the titles that have links to the PDF files.
<?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 load.php file
When you click a link in the title section that appears in the index.php file, the load.php file will display the relevant PDF document.
<?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>