Assalamualaikum Wr. Wb.
Pada tutorial kali ini saya akan share tutorial cara Membuat Upload Download Seach File Dengan PHP Dan MySQL Menggunakan Booststrap. dan menyimpan data gambar nya ke database. di tutorial ini kita akan belajar tentang cara membuat upload download search file dengan php. dan kemudian nama dari file tersebut akan kita simpan pada database berikut ini tutorialnya.
Oke, langsung saja mulai ke tutorialnya
Selanjutnya buat file baru dengan nama upload.php, dan isi kodenya seperti di bawah ini
Selanjutnya buat file baru dengan nama form.php, dan isi kodenya seperti di bawah ini
Selanjutnya buat file baru dengan nama search.php, dan isi kodenya seperti di bawah ini
Selanjutnya buat file baru dengan nama config.php, dan isi kodenya seperti di bawah ini
Oke selesai teman-teman. sekian dulu tutorial Membuat Upload File Dengan PHP Dan MySQL Menggunakan Bootstrap
Silahkan Untuk mendownload di bawah ini...
Pada tutorial kali ini saya akan share tutorial cara Membuat Upload Download Seach File Dengan PHP Dan MySQL Menggunakan Booststrap. dan menyimpan data gambar nya ke database. di tutorial ini kita akan belajar tentang cara membuat upload download search file dengan php. dan kemudian nama dari file tersebut akan kita simpan pada database berikut ini tutorialnya.
Persiapan Membuat Upload File Dengan PHP Menggunakan Bootstrap
Untuk persiapan nya. apa-apa saja yang harus teman-teman buat adalah sebagai berikut. buat lah:- download.php
- upload.php
- form.php
- search.php
- config.php
Oke, langsung saja mulai ke tutorialnya
Membuat Upload Download Search File Dengan PHP Dan MySQL Menggunakan Bootstrap
langsung saja buat file dan beri nama download.php, dan isi kodenya seperti di bawah ini <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Pencarian sederhana dengan PHP, MySQL dan Bootstrap">
<meta name="author" content="Hakko Bio Richard">
<title>SMA-SMK Mulia Buana | Parungpanjang</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link rel="shortcut icon" href="images/mb.png" />
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://kangjangkung.blogspot.com">BACKSPACE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="download.php"><span class="glyphicon glyphicon glyphicon-import "></span> Download</a></li>
<li><a href="upload.php"><span class="glyphicon glyphicon glyphicon-export"></span> Upload</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<center><h2>Pencarian Data Mahasiswa</h2></center>
<form action="form.php" method="post" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type='text' placeholder='Cari Berdasarkan Judul' name='term' class='form-control'> <br/>
</div>
<button type="submit" value="search" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>
<a href="download.php" class="btn btn-info"> <span class="glyphicon glyphicon-ok"></span> All Data </a>
</form>
<br/>
<br/>
<br/>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Silahkan download file yang sudah di Upload di website ini. Untuk men-Download Anda bisa mengklik Judul file yang di inginkan</h3>
</div>
<div class="panel-body">
<table class="table table-hover" >
<th>
<td><center>Tanggal Upload</center></a></td>
<td>Nama File</a></td>
<td><center>Tipe File</center></a></td>
<td><center>Ukuran File</center></a></td>
</th>
<?php
include('config.php');
$sql = mysql_query("SELECT * FROM download ORDER BY id DESC");
if(mysql_num_rows($sql) > 0){
$no = 1;
while($data = mysql_fetch_assoc($sql)){
echo '
<tr bgcolor="#fff">
<td align="center">'.$no.'</td>
<td align="center">'.$data['tanggal_upload'].'</td>
<td><a href="'.$data['file'].'">'.$data['nama_file'].'</a></td>
<td align="center">'.$data['tipe_file'].'</td>
<td align="center">'.formatBytes($data['ukuran_file']).'</td>
</tr>
';
$no++;
}
}else{
echo '
<tr bgcolor="#fff">
<td align="center" colspan="4" align="center">Tidak ada data!</td>
</tr>
';
}
?>
</table>
</p>
</div>
</div>
</body>
</html>
Selanjutnya buat file baru dengan nama upload.php, dan isi kodenya seperti di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Pencarian sederhana dengan PHP, MySQL dan Bootstrap">
<meta name="author" content="Hakko Bio Richard">
<title>SMA-SMK Mulia Buana | Parungpanjang</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link rel="shortcut icon" href="images/mb.png" />
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://kangjangkung.blogspot.com">BACKSPACE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="download.php"><span class="glyphicon glyphicon glyphicon-import "></span> Download</a></li>
<li><a href="upload.php"><span class="glyphicon glyphicon glyphicon-export"></span> Upload</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<br/>
<br/>
<br/>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Upload file Anda dengan melengkapi form di bawah ini. File yang bisa di Upload hanya file dengan ekstensi <b>.doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .rar, .zip,jpg,png</b> dan besar file (file size) maksimal hanya 1 MB.</h3>
</div>
<?php
include('config.php');
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
if($_POST['upload']){
$allowed_ext = array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'rar', 'zip','jpg','png');
$file_name = $_FILES['file']['name'];
$file_ext = strtolower(end(explode('.', $file_name)));
$file_size = $_FILES['file']['size'];
$file_tmp = $_FILES['file']['tmp_name'];
$nama = $_POST['nama'];
$tgl = date("Y-m-d");
if(in_array($file_ext, $allowed_ext) === true){
if($file_size < 1044070){
$lokasi = 'files/'.$nama.'.'.$file_ext;
move_uploaded_file($file_tmp, $lokasi);
$in = mysql_query("INSERT INTO download VALUES(NULL, '$tgl', '$nama', '$file_ext', '$file_size', '$lokasi')");
if($in){
echo "<div class='alert alert-info' role='alert'>Data Berhasil Disimpan untuk melihat data klik<a href='download.php'> <b>disini</b> </a></div>" ;
}else{
echo "Data gagal disimpan" ;
}
}else{
echo "<div class='alert alert-info' role='alert'>ERROR: Besar ukuran file (file size) maksimal 1 Mb!</div>";
}
}else{
echo "<div class='alert alert-info' role='alert'>ERROR: Ekstensi file tidak di izinkan</div>";
}
}
?>
<p>
<div class="container">
<form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2">Judul Berkas</label>
<div class="col-sm-4">
<input type="text" name="nama" class="form-control" placeholder="Judul Berkas" required >
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Pilih File</label>
<div class="col-sm-4"><input type="file" name="file" required /></div>
</div>
<div class="form-group">
<div class ="col-sm-4">
<button type="submit" name="upload" value="Upload" onClick="return confirm('Apakah Anda yakin?')" class="btn btn-primary"><span class="glyphicon glyphicon-circle-arrow-up"></span> Upload</button>
</div>
</div>
</form>
</p>
</div>
</div>
</body>
</html>Selanjutnya buat file baru dengan nama form.php, dan isi kodenya seperti di bawah ini
<?php
$db_hostname = 'localhost';
$db_username = 'root';
$db_password = '';
$db_database = 'jangkung';
// Database Connection String
$con = mysql_connect($db_hostname,$db_username,$db_password);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db_database, $con);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Pencarian sederhana dengan PHP, MySQL dan Bootstrap">
<meta name="author" content="Hakko Bio Richard">
<link rel="shortcut icon" href="images/mb.png" />
<title>SMA-SMK Mulia Buana | Parungpanjang</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://kangjangkung.blogspot.com">BACKSPACE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="download.php"><span class="glyphicon glyphicon glyphicon-import "></span> Download</a></li>
<li><a href="upload.php"><span class="glyphicon glyphicon glyphicon-export"></span> Upload</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<center><h2>Pencarian Data Mahasiswa</h2></center>
<form action="form.php" method="post" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type='text' placeholder='Cari Berdasarkan Judul' name='term' class='form-control'> <br/>
</div>
<button type="submit" value="search" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>
<a href="download.php" class="btn btn-info"> <span class="glyphicon glyphicon-ok"></span> All Data </a>
</form>
</div>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"><b> HASIL PENCARIAN</b> Silahkan download file yang sudah di Upload di website ini. Untuk men-Download Anda bisa mengklik Judul file yang di inginkan</h3>
</div>
<div class="panel-body">
<table class="table table-hover"
<tr>
<td><center>No</center></td>
<td><center>Tanggal Upload</center></td>
<td>Nama File</td>
<td><center>Tipe File</center></td>
<td><center>Ukuran (byte)</center></td>
<td><center>File</center></td>
</tr>
<?php
$db_hostname = 'localhost';
$db_username = 'root';
$db_password = '';
$db_database = 'jangkung';
// Database Connection String
$con = mysql_connect($db_hostname,$db_username,$db_password);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db_database, $con);
?>
<?php
if (!empty($_REQUEST['term'])) {
$term = mysql_real_escape_string($_REQUEST['term']);
$sql = "SELECT * FROM download WHERE nama_file LIKE '%".$term."%'";
$r_query = mysql_query($sql);
while ($data = mysql_fetch_assoc($r_query)){
echo "
<tr>
<td><center>".$data['id']."</center></td>
<td><center>".$data['tanggal_upload']."</center></td>";
echo '<td><a href="'.$data['file'].'">';
echo "".$data['nama_file']."";
echo'</a></td>';
echo "
<td><center>".$data['tipe_file']."</center></td>
<td><center>".$data['ukuran_file']."</center></td>
<td><center>".$data['file']."</center></td>
</tr>";
}
echo "</table>";
}
?>
</body>
</html>
Selanjutnya buat file baru dengan nama search.php, dan isi kodenya seperti di bawah ini
<?php
$db_hostname = 'localhost';
$db_username = 'root';
$db_password = '';
$db_database = 'jangkung';
// Database Connection String
$con = mysql_connect($db_hostname,$db_username,$db_password);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db_database, $con);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Pencarian sederhana dengan PHP, MySQL dan Bootstrap">
<meta name="author" content="Hakko Bio Richard">
<link rel="shortcut icon" href="images/mb.png" />
<title>SMA-SMK Mulia Buana | Parungpanjang</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://kangjangkung.blogspot.com">BACKSPACE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="download.php"><span class="glyphicon glyphicon glyphicon-import "></span> Download</a></li>
<li><a href="upload.php"><span class="glyphicon glyphicon glyphicon-export"></span> Upload</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<center><h2>Pencarian Data Mahasiswa</h2></center>
<form action="form.php" method="post" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type='text' placeholder='Cari Berdasarkan Judul' name='term' class='form-control'> <br/>
</div>
<button type="submit" value="search" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>
<a href="download.php" class="btn btn-info"> <span class="glyphicon glyphicon-ok"></span> All Data </a>
</form>
</div>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"><b> HASIL PENCARIAN</b> Silahkan download file yang sudah di Upload di website ini. Untuk men-Download Anda bisa mengklik Judul file yang di inginkan</h3>
</div>
<div class="panel-body">
<table class="table table-hover"
<tr>
<td><center>No</center></td>
<td><center>Tanggal Upload</center></td>
<td>Nama File</td>
<td><center>Tipe File</center></td>
<td><center>Ukuran (byte)</center></td>
<td><center>File</center></td>
</tr>
<?php
$db_hostname = 'localhost';
$db_username = 'root';
$db_password = '';
$db_database = 'jangkung';
// Database Connection String
$con = mysql_connect($db_hostname,$db_username,$db_password);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db_database, $con);
?>
<?php
if (!empty($_REQUEST['term'])) {
$term = mysql_real_escape_string($_REQUEST['term']);
$sql = "SELECT * FROM download WHERE nama_file LIKE '%".$term."%'";
$r_query = mysql_query($sql);
while ($data = mysql_fetch_assoc($r_query)){
echo "
<tr>
<td><center>".$data['id']."</center></td>
<td><center>".$data['tanggal_upload']."</center></td>";
echo '<td><a href="'.$data['file'].'">';
echo "".$data['nama_file']."";
echo'</a></td>';
echo "
<td><center>".$data['tipe_file']."</center></td>
<td><center>".$data['ukuran_file']."</center></td>
<td><center>".$data['file']."</center></td>
</tr>";
}
echo "</table>";
}
?>
</body>
</html>
Selanjutnya buat file baru dengan nama config.php, dan isi kodenya seperti di bawah ini
<?php
//koneksi ke database
mysql_connect("localhost", "root", "");
mysql_select_db("jangkung");
//fungsi untuk mengkonversi size file
function formatBytes($bytes, $precision = 2) {
$units = array('B', 'KB', 'MB', 'GB', 'TB');
$bytes = max($bytes, 0);
$pow = floor(($bytes ? log($bytes) : 0) / log(1024));
$pow = min($pow, count($units) - 1);
$bytes /= pow(1024, $pow);
return round($bytes, $precision) . ' ' . $units[$pow];
}
?> 
Oke selesai teman-teman. sekian dulu tutorial Membuat Upload File Dengan PHP Dan MySQL Menggunakan Bootstrap
Silahkan Untuk mendownload di bawah ini...
4shared
Google Drive
password nya ap mas,heheh
ReplyDeleteemail
ReplyDeleteMaaf mas..password nya apa ya ??
ReplyDeletefiskodoni[at]gmail.com
putcer99@gmail.com
ReplyDeleteijin sedot gan..sekalian minta pass rar boni9207@gmail.com
ReplyDeleteboleh tahu pass zipnya mas, trims. putcer99@gmail.com
ReplyDeletemas boleh minta pass rarnya? abimarib@gmail.com, terimakasih
ReplyDeleteminta password gan ke haeltretze@gmail.com
ReplyDeletepasswordnya gan..
ReplyDeletebagasen09@gmail.com
ReplyDeletepassword nya naon kangmas,heheh