Aldi My Teacher is WWW. #Tidak ada rugi untuk belajar hal baru.

Tutorial Membuat Tampilan PDF di Website

2 min read

tampilpdf min

Kali ini saya akan membuat sebuah Tutorial Membuat Tampilan PDF di Website dengan sangat simple

Contoh tampilan websitenya seperti ini :

pdfshow min

Berikut Tutorial Membuat Tampilan PDF di Website dari saya index my id :

1.Kamu harus membuat database nya dulu dengan nama pdf

CREATE TABLE IF NOT EXISTS `filepdf` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `judul` varchar(255) NOT NULL,
  `jenis` enum('1','2','3') 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, 'INDEX MY ID', '1', 'indexmyid.pdf');
2. buat koneksi.html dengan code :
<?php
$con=mysqli_connect("localhost","root","","test");
?>
3.buat index.html dengan code:
<?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">
    <title>Menampilkan Dokumen PDF</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    <script src="assets/js/bootstrap.min.js"></script>
    
</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">
           INDEX MY ID TUTORIAL</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="#">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'>Preview PDF</div>
                    <br>
                </div>
                <div class='panel-body'>
              
                  
                    <div>
                 
                        <embed src="<?php echo $data[3]; ?>" type='application/pdf' width='100%' height='700px'/>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</div> 
</body>
</html>
Note : Perlu diperhatikan jika tampilan kacau kamu perlu menambah asset boostrap dan jquery
Aldi My Teacher is WWW. #Tidak ada rugi untuk belajar hal baru.

Leave a Reply

Your email address will not be published. Required fields are marked *