Kali ini saya akan membuat sebuah Tutorial Membuat Tampilan PDF di Website dengan sangat simple
Contoh tampilan websitenya seperti ini :
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
