--> Skip to main content

PHP Display File PDF dari Database


Pada tutorial sebelumnya yang berjudul : "Menampilkan Dokumen PDF pada Web", kita telah membahas cara bagaimana file PDF dapat ditampilkan pada web secara statik. Dalam hal ini proses menampilkannya dilakukan secara statik, tanpa menggunakan database.

Untuk edisi tutorial kali ini, file PDF yang ditampilkan berasal dari database dengan menggunakan bahasa pemrograman PHP. Untuk sisi frontend-nya, disini kita menggunakan Bootstrap.

Berikut ini adalah output dari hasil akhir tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :




(Gambar.1)


Langkah-langkahnya

1. Create database
Disini 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=2 ;

INSERT INTO `filepdf` (`id`, `judul`, `jenis`, `namafile`) VALUES
(1, 'KAWASAN EKONOMI KHUSUS TANJUNG KELAYANG', 'Peraturan Pemerintah', 'kawasanekonomi');

2. Create file koneksi.php
File koneksi.php bertujuan untuk membangun koneksi antara aplikasi dengan database.
<?php
$con=mysqli_connect("localhost","root","","dbpdf");
?>

3. Create file index.php

File index.php ini akan menampilkan dokumen/file PDF dari database.
<?php include "koneksi.php"; ?>
<!DOCTYPE html>
<html lang="en">
<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 -->
    
</head>
<body>
<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>
<!--- Bagian Judul-->   
<div class="container"> 
    <h2>Contoh Mengload Dokumen PDF</h2> 

    <div class="row">
        
        <?php 
        $query=mysqli_query($con,"select * from filepdf ");
        $data=mysqli_fetch_row($query);
        ?>
        
        <div class='col-md-12'>
            <div class='panel panel-primary'>
                <div class='panel-heading'>
                    <div class='pull-left'>Undang-Undang Dasar Negara Republik Indonesia 1945</div>
                    <br>
                </div>
                <div class='panel-body'>
                
                    <div style='border-bottom:1px solid #000'><?php echo $data[1]; ?></div>
                    <div><?php echo $data[2]; ?></div><br>
                    <div>
                        <embed src="hukumPdf/<?php echo $data[3]; ?>.pdf" type='application/pdf' width='100%' height='700px'/>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</div> 
</body>
</html>

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar