Cara Membuat Multiple Upload File Dengan PHP MySQL

Initekno.com – Bismillah.. Multiple upload file dengan php sebenarnya sudah banyak bertebaran di internet cara membuatnya, namun kali ini akan saya batasi saja pembahasannya, agar lebih ringkas, intinya agar kamu bisa membuat fitur upload file dengan banyak data sekaligus. Baik, untuk memahami artikel ini pastikan kamu sudah pernah menggunakan bahasa pemrograman “PHP”, database “MYSQL”, server lokal “APACHE” dan Text Editor “Visual Studio Code”.

Sebelumnya baca terlebih dahulu artikel berikut ini, karena ada beberapa kaitannya di seputaran sistem template.

Cara Membuat Aplikasi Chatting Dengan PHP PDO dan MYSQL

Untuk langkah awal, jalankan server lokal pada komputer kamu yaitu xampp, pastikan komponen mysql dan apache telah kamu jalankan, dengan cara klik start pada jendela pengaturan xampp. Contohnya bisa di lihat gambar berikut ini

Seperti pada tutorial lainnya, kamu buat terlebih dahulu folder website yang berada pada direktori C:\xampp\htdocs/nama_folder_website_kamu

disini saya akan membuatnya dengan nama “pamegatim1“, jadi direktori saya nanti akan seperti ini :

C:\xampp\htdocs/pamegatim1

Dalam direktori tersebut buat lagi sebuah folder dengan nama “jadwal“, maka akan menjadi seperti ini :

C:\xampp\htdocs/pamegatim1/jadwal, nah, pada direktori ini kita akan menyimpan file kode tersebut.

Adapun untuk hasil file upload bisa di simpan pada direktori assets/file_pdf

Jangan lupa untuk membuat folder bernama “config“, untuk menaruh file konfigurasi database kamu.

dan berikut adalah kerangka tabel yang saya buat.

Langkah selanjutnya yaitu membuat file baru pada text editor kamu. Beri nama dengan dbcon.php dan simpan pada direktori berikut C:\xampp\htdocs/pamegatim1/config

tulis kode dbcon.php seperti ini :

<?php
  $DB_host = "localhost";
  $DB_user = "root";
  $DB_pass = "";
  $DB_name = "db_mt1webapp";
  $koneksi = new MySQLi($DB_host,$DB_user,$DB_pass,$DB_name);
  //cek koneksi
     if($koneksi->connect_errno)
     {
         die("ERROR : -> ".$koneksi->connect_error);
     }
?>

<?php

$DB_host = "localhost";

$DB_user = "root";

$DB_pass = "";

$DB_name = "db_mt1webapp";

$koneksi = new MySQLi($DB_host,$DB_user,$DB_pass,$DB_name);

//cek koneksi

if($koneksi->connect_errno)

{

die("ERROR : -> ".$koneksi->connect_error);

}

dan tambahkan file baru lagi, beri nama dengan index.php. Simpan pada direktori folder jadwal di dalam folder website kamu. Tulis kodenya seperti berikut

<?php
 include_once '../config/dbcon.php';
 include_once '../template/header.php';
 if (empty($_SESSION['nopeg']) AND empty($_SESSION['user'])) {
	header("location:../auth.php");
}else {
    //PROSES UPLOAD DATA
if(isset($_POST['submit'])){
    $targetDir = "../assets/file_pdf/";
    //format pdf bisa di ganti ke format file lain seperti JPG, PNG, GIF
    $allowTypes = array('pdf');
    
    $statusMsg = $errorMsg = $insertValuesSQL = $errorUpload = $errorUploadType = '';
    if(!empty(array_filter($_FILES['files']['name']))){
        foreach($_FILES['files']['name'] as $key=>$val){
            // tempat file upload
            $fileName = basename($_FILES['files']['name'][$key]);
            $targetFilePath = $targetDir . $fileName;
            //ambil nilai dari form select
            $ta = $_POST['ta'];
            $smt = $_POST["smt"];
            $pk = $_POST["pk"];
            
            $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
            if(in_array($fileType, $allowTypes)){
                // unggah file ke server
                if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], $targetFilePath)){
                    //masukkan dalam $insertValuesSQL
                    $insertValuesSQL .= "('".$fileName."','".$ta."','".$smt."','".$pk."', NOW()),";
                }else{
                    $errorUpload .= $_FILES['files']['name'][$key].', ';
                }
            }else{
                $errorUploadType .= $_FILES['files']['name'][$key].', ';
            }
        }
        
        if(!empty($insertValuesSQL)){
            $insertValuesSQL = trim($insertValuesSQL,',');
            // query insert mysql
            $insert = $koneksi->query("INSERT INTO images (file_name, ta ,smt ,pk, uploaded_on) VALUES $insertValuesSQL");
            if($insert){
                $errorUpload = !empty($errorUpload)?'Upload Error: '.$errorUpload:'';
                $errorUploadType = !empty($errorUploadType)?'File Type Error: '.$errorUploadType:'';
                $errorMsg = !empty($errorUpload)?'<br/>'.$errorUpload.'<br/>'.$errorUploadType:'<br/>'.$errorUploadType;
                $statusMsg = "* Surat tugas berhasil di upload.".$errorMsg;
            }else{
                $statusMsg = "* Upss, Maaf, ada kesalahan upload file..!";
            }
        }
    }else{
        $statusMsg = '* Mohon pilih file dengan format PDF';
    }
    // tampilkan pesan status upload
    echo $statusMsg;
}
//---------------------------------------------------------------------------------------------
?>
<h5>Upload Surat Tugas</h5> 
<a href="../dashboard.php" class="btn btn-light btn-rounded-light btn-sm"><span class="fa fa-arrow-left"></span> Balik</a>
<br>
<form action="" method="post" enctype="multipart/form-data">
    <select name="ta" multiple>
        <option value="0">--TAHUN AJARAN--</option>
        <option value="2017-2018">2017-2018</option>
        <option value="2018-2019">2018-2019</option>
        <option value="2019-2020">2019-2020</option>
        <option value="2020-2021">2020-2021</option>
        <option value="2020-2021">2021-2022</option>
    </select>
    <select name="smt" multiple>
        <option value="0">--SEMESTER--</option>
        <option value="Semester 1">Semester 1</option>
        <option value="Semester 2">Semester 2</option>
    </select>
    <select name="pk" multiple>
        <option value="0">--PEKAN--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
    </select>
    <br><br>
    Pilih Semua File PFD:
    <input type="file" name="files[]" multiple >
    <input type="submit" name="submit" value="Upload">
</form>
<u><a href="view.php">Lihat file upload</a></u>

<?php
}
 include_once '../template/footer.php';
?>

100

101

102

103

104

105

106

107

108

109

<?php

include_once '../config/dbcon.php';

include_once '../template/header.php';

if (empty($_SESSION['nopeg']) AND empty($_SESSION['user'])) {

header("location:../auth.php");

}else {

//PROSES UPLOAD DATA

if(isset($_POST['submit'])){

$targetDir = "../assets/file_pdf/";

//format pdf bisa di ganti ke format file lain seperti JPG, PNG, GIF

$allowTypes = array('pdf');

$statusMsg = $errorMsg = $insertValuesSQL = $errorUpload = $errorUploadType = '';

if(!empty(array_filter($_FILES['files']['name']))){

foreach($_FILES['files']['name'] as $key=>$val){

// tempat file upload

$fileName = basename($_FILES['files']['name'][$key]);

$targetFilePath = $targetDir . $fileName;

//ambil nilai dari form select

$ta = $_POST['ta'];

$smt = $_POST["smt"];

$pk = $_POST["pk"];

$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);

if(in_array($fileType, $allowTypes)){

// unggah file ke server

if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], $targetFilePath)){

//masukkan dalam $insertValuesSQL

$insertValuesSQL .= "('".$fileName."','".$ta."','".$smt."','".$pk."', NOW()),";

}else{

$errorUpload .= $_FILES['files']['name'][$key].', ';

}

}else{

$errorUploadType .= $_FILES['files']['name'][$key].', ';

}

if(!empty($insertValuesSQL)){

$insertValuesSQL = trim($insertValuesSQL,',');

// query insert mysql

$insert = $koneksi->query("INSERT INTO images (file_name, ta ,smt ,pk, uploaded_on) VALUES $insertValuesSQL");

if($insert){

$errorUpload = !empty($errorUpload)?'Upload Error: '.$errorUpload:'';

$errorUploadType = !empty($errorUploadType)?'File Type Error: '.$errorUploadType:'';

$errorMsg = !empty($errorUpload)?'<br/>'.$errorUpload.'<br/>'.$errorUploadType:'<br/>'.$errorUploadType;

$statusMsg = "* Surat tugas berhasil di upload.".$errorMsg;

}else{

$statusMsg = "* Upss, Maaf, ada kesalahan upload file..!";

}

}else{

$statusMsg = '* Mohon pilih file dengan format PDF';

}

// tampilkan pesan status upload

echo $statusMsg;

}

//---------------------------------------------------------------------------------------------

<h5>Upload Surat Tugas</h5>

<a href="../dashboard.php" class="btn btn-light btn-rounded-light btn-sm"><span class="fa fa-arrow-left"></span> Balik</a>

<br>

<option value="0">--TAHUN AJARAN--</option>

</select>

<option value="0">--SEMESTER--</option>

<option value="Semester 1">Semester 1</option>

<option value="Semester 2">Semester 2</option>

</select>

<option value="0">--PEKAN--</option>

</select>

Pilih Semua File PFD:

</form>

<u><a href="view.php">Lihat file upload</a></u>

<?php

}

include_once '../template/footer.php';

Kode diatas adalah seluruh rangkaian kode php dan html yang saya satukan menjadi satu halaman. Jangan lupa untuk membuat sebuah file header.php karena file itu berisi external css dan javascrip yang akan kita panggil di karangka kode paling atas dalam kode index.php.

buat file baru, dan copy kode header.php dibawah ini.

<?php 
	session_start(); 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
	<!--css external load-->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<!-- UIkit CSS
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.8/css/uikit.min.css" /> -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-12/css/fontawesome.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
	<link type="text/css" href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
	<link type="text/css" href='https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css' rel='stylesheet'>
	<link type="text/css" href='https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css' rel='stylesheet'>
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/Start/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">


	<!--javascript external load-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-12/js/fontawesome.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>

	<!-- UIkit JS
	<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.8/js/uikit.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.8/js/uikit-icons.min.js"></script> -->
	
	<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
	
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/highcharts-3d.js"></script>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	
	<title>PA-MEGATIM1</title>
	<style>
	.form-rounded {
		border-radius: 50rem;
	}
	.btn-rounded {
		color: #fff;
		background-color: #007bff;
		border-radius: 50rem;
	}
	.btn-rounded-success {
		color: #fff;
		background-color: #28a745;
		border-radius: 50rem;
	}
	.btn-rounded-danger {
		color: #fff;
		background-color: #dc3545;
		border-radius: 35rem;
	}
	.btn-rounded-info {
		color: #fff;
		background-color: #17a2b8;
		border-radius: 50rem;
	}
	.btn-rounded-light {
		color: #343a40;
		background-color: #f8f9fa;
		border-radius: 50rem;
	}
	.btn-rounded-dark {
		color: #fff;
		background-color: #343a40;
		border-radius: 50rem;
	}
	.btn-rounded-warning {
		color: #fff;
		background-color: #ffc107;
		border-radius: 50rem;
	}
	.btn-rounded-secondary {
		color: #fff;
		background-color: #868e96;
		border-radius: 50rem;
	}
	/*
	.btn-success {
  		color: #fff;
  		background-color: #28a745;
  		border-radius: 35px;
  		border: 1px solid rgba(21, 87, 36, 0.75);
	}
 */
	</style>
</head>
<body>
    <div class="container">

100

101

102

103

104

105

106

<?php

session_start();

<!DOCTYPE html>

<head>

<!-- UIkit CSS

<!-- UIkit JS

<title>PA-MEGATIM1</title>

<style>

.form-rounded {

border-radius: 50rem;

}

.btn-rounded {

color: #fff;

background-color: #007bff;

border-radius: 50rem;

}

.btn-rounded-success {

color: #fff;

background-color: #28a745;

border-radius: 50rem;

}

.btn-rounded-danger {

color: #fff;

background-color: #dc3545;

border-radius: 35rem;

}

.btn-rounded-info {

color: #fff;

background-color: #17a2b8;

border-radius: 50rem;

}

.btn-rounded-light {

color: #343a40;

background-color: #f8f9fa;

border-radius: 50rem;

}

.btn-rounded-dark {

color: #fff;

background-color: #343a40;

border-radius: 50rem;

}

.btn-rounded-warning {

color: #fff;

background-color: #ffc107;

border-radius: 50rem;

}

.btn-rounded-secondary {

color: #fff;

background-color: #868e96;

border-radius: 50rem;

}

.btn-success {

color: #fff;

background-color: #28a745;

border-radius: 35px;

border: 1px solid rgba(21, 87, 36, 0.75);

}

</style>

</head>

<body>

ada beberapa dalam kode header.php yang tidak saya gunakan di studi kasus ini, tetapi telah saya gunakan pada tutorial sebelumnya dan buat juga kode footer.php sebagai sambungan dari kerangka template kode header.php

    </div><!--container-->
</body>
</html>

</div>

</body>

</html>

Untuk melihat data dan menampilkannya pada browser, maka kamu harus menuliskan kode program seperti berikut ini:

<?php
 include_once '../config/dbcon.php';
 include_once '../template/header.php';
 if (empty($_SESSION['nopeg']) AND empty($_SESSION['user'])) {
	header("location:../auth.php");
}else { ?>
<h5>Surat Tugas Mengajar</h5> 
<a href="index.php" class="btn btn-light btn-rounded-light btn-sm"><span class="fa fa-arrow-left"></span> Balik</a>
<br>   
            <table class="table table-striped table-hover table-bordered table-sm">
                <thead>
                    <tr>
                        <th>nama-berkas</th>
                        <th>tahun-ajaran</th>
                        <th>semester</th>
                        <th>pekan</th>
                        <th>tgl-upload</th>
                        <th colspan="2">opsi</th>
                    </tr>
                </thead>
                <tbody>
<?php $query = $koneksi->query("SELECT * FROM images ORDER BY file_name ASC");
if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){ ?>

                <tr>
                    <td><?php echo $row['file_name']; ?></td>
                    <td><?php echo $row['ta']; ?></td>
                    <td><?php echo $row['smt']; ?></td>
                    <td><?php echo $row['pk']; ?></td>
                    <td><?php echo $row['uploaded_on']; ?></td>
                    <td><a href="../assets/file_pdf/<?php echo $row['file_name']; ?>" target="_blank"><span class="fa fa-folder"></span> Buka</a></td>
                    <td><a href="../assets/file_pdf/<?php echo $row['file_name']; ?>" download><span class="fa fa-download"></span> Download</td>
                </tr>

<?php }  ?>
                </tbody>
            </table>

<?php }else{ ?>
    <p>Tidak ada surat tugas, Kosong..!</p>
    <u><a href="index.php">Upload sekarang</a></u>

<?php } 
}
    include_once '../template/footer.php';
?>

<?php

include_once '../config/dbcon.php';

include_once '../template/header.php';

if (empty($_SESSION['nopeg']) AND empty($_SESSION['user'])) {

header("location:../auth.php");

}else { ?>

<h5>Surat Tugas Mengajar</h5>

<a href="index.php" class="btn btn-light btn-rounded-light btn-sm"><span class="fa fa-arrow-left"></span> Balik</a>

<br>

<thead>

<tr>

<th>nama-berkas</th>

<th>tahun-ajaran</th>

<th>semester</th>

<th>pekan</th>

<th>tgl-upload</th>

</tr>

</thead>

<tbody>

<?php $query = $koneksi->query("SELECT * FROM images ORDER BY file_name ASC");

if($query->num_rows > 0){

while($row = $query->fetch_assoc()){ ?>

<tr>

<td><a href="../assets/file_pdf/<?php echo $row['file_name']; ?>" target="_blank"><span class="fa fa-folder"></span> Buka</a></td>

<td><a href="../assets/file_pdf/<?php echo $row['file_name']; ?>" download><span class="fa fa-download"></span> Download</td>

</tr>

<?php } ?>

</tbody>

</table>

<?php }else{ ?>

<p>Tidak ada surat tugas, Kosong..!</p>

<u><a href="index.php">Upload sekarang</a></u>

<?php }

}

include_once '../template/footer.php';

Simpan kode diatas dengan nama view.php kode ini akan kita kaitkan dengan kode index.php diatas. Sekarang coba jalankan pada browser kamu. Kurang lebih hasilnya akan seperti berikut :

dan untuk data yang di tampilkan dalam tabel, seperti berikut :

Sekian, tutorial yang singkat ini, semoga bermanfaat buat kamu yang sedang membuat project tentang multiple upload file.

Related Posts

Tinggalkan Balasan Batalkan balasan