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.
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 :
1 2 3 4 5 6 7 8 9 10 11 12 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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'; ?> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <?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"> |
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
1 2 3 | </div><!--container--> </body> </html> |
Untuk melihat data dan menampilkannya pada browser, maka kamu harus menuliskan kode program seperti berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <?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'; ?> |
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.