Membuat form upload download search dengan bootstrap

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.

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

Akan saya jelaskan sedikit kegunaan-kegunaan dari file-file yang telah di buat di atas. pada file download.php kita akan membuat form Tampilan File Download. pada file Upload.php kita akan membuat tampilan upload sekaligus proses upload file. Pada file form.php kita akan membuat tampilan pencarian file jadi file yang di cari di form download akan menampilkan di form.php dan akan di proses di file seach.php. kemudian pada file config.php kita akan membuat koneksi database php dan mysql. lalu yang terakhir folder yang bernama files akan kita gunakan sebagai folder yang menyimpan file yang di upload. jadi file yang di upload akan tersimpan ke folder file sini.

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>

Dalam file download ini akan menampilkan sebuah Table yang berisi file-file yang telah di upload, dan akan ada link untuk men-Download file tersebut.

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>

File ini akan membuat Form untuk Upload File dan juga Proses untuk Upload File.

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>

Form tersebut akan otomatis masuk kedalam file form.php dan akan mengeksekusi hasil pencarian yang anda inginkan..

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>

File search tersebut akan memproses menampilkan file ke form.php

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];
}
?>

silahkan teman-teman sesuaikan password dan yg lainnya. di sini kita menggunakan database dengan nama “jangkung”. jadi silahkan teman-teman buat database dengan nama jangkung. lalu buat table dengan nama download. atau biar lebihenaknya lihat gambar di bawah ini.

Oke selesai teman-teman. sekian dulu tutorial Membuat Upload File Dengan PHP Dan MySQL Menggunakan Bootstrap

source code : Haodaci

Membuat form upload download search dengan bootstrap

Persiapan Membuat Upload File Dengan PHP Menggunakan Bootstrap

Membuat Upload Download Search File Dengan PHP Dan MySQL Menggunakan Bootstrap

No comments:

Recent

Popular

Comments

Facebook

Labels

Populer Post

Random Posts

Most Recent