#PHP

Multiple Upload Gambar Dengan PHP MySQLi

By Muzanni
5 May 2020
PHP

Hallo selamat datang kembali di seri tutorial lengkap PHP dari malasngoding. Pada kesempatan ini akan kita bahas bagaimana sih cara membuat multiple upload gambar dengan php mysqli.

Pada artikel sebelumnya pernah kita bahas cara upload file menggunakan php dan mysqli. Bedanya pada artikel kali ini dimana sebelumnya hanya satu file yang bisa di upload dalam satu form upload, namun kali ini kita akan membuat banyak file yang bisa di upload dalam satu form.

Multiple Upload Gambar Dengan PHP MySQLi

Multiple upload gambar adalah mengupload gambar dengan jumlah yang lebih dari satu, bisa dua, tiga dan seterusnya. Dalam multiple upload agak sedikit berbeda dengan upload file biasanya. Untuk perbedaannya bisa dilihat pada contoh yang akan di bahas di bawah.

Meyiapkan Database

Pertama-tama siapkan database tempat kita menyimpan nama gambar nantinya, disini saya membuat database dengan nama tutorial dan tabel yang digunakan untuk menyimpannya bernama gambar. Untuk strukturnya bisa dilihat di gambar berikut:

Struktur database multiple upload gambar

Atau bisa juga dengan mengimport file tutorial.sql berikut di phpmyadmin :

Tutoria.sql

-- phpMyAdmin SQL Dump

-- version 4.8.0

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Generation Time: Apr 26, 2020 at 04:42 PM

-- Server version: 10.1.31-MariaDB

-- PHP Version: 5.6.35

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- Database: `tutorial`

-- --------------------------------------------------------

-- Table structure for table `gambar`

CREATE TABLE `gambar` (

`gambar_id` int(11) NOT NULL,

`gambar_nama` varchar(100) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Indexes for dumped tables

-- Indexes for table `gambar`

ALTER TABLE `gambar`

ADD PRIMARY KEY (`gambar_id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `gambar`

ALTER TABLE `gambar`

MODIFY `gambar_id` int(11) NOT NULL AUTO_INCREMENT;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Struktur Project

Ada tiga file yang terlibat dalam membuat multiple upload gambar, untuk struktur projectnya bisa dilihat di gambar berikut :

Struktur project dalam membuat multiple upload

Menyiapkan Koneksi PHP dengan Database

Langkah kedua yaitu menyiapkan file koneksi yang menghubungkan database dengan php. Disini saya beri nama koneksi.php

koneksi.php

<?php

$koneksi = mysqli_connect("localhost","root","","tutorial");

Membuat form upload gambar

Langkah selanjutnya kita siapkan form untuk mengupload gambar. Dalam form ini nantinya akan kita upload banyak gambar dan kita simpan dalam database yang sudah kita siapkan sebelumnya. Untuk form upload disini saya buat dalam file index.php

<html>

<head>

<title>www.malasngoding.com - Upload multi file menggunakan php mysqli</title>

</head>

<body>

<h2 style="text-align: center;">UPLOAD MULTI FILE PHP</h2>

<p style="color: red">Ekstensi yang diperbolehkan .png | .jpg | .jpeg | .gif</p>

</div>

</form>

</div>

</body>

</html>

Untuk Tampilannya bisa dilihat pada gambar berikut :

Tampilan Form Upload

Penjelasan Singkat Membuat Form Upload

Berikut bebrapa uraian penjelasan dari syntax diatas :

1	<form action="proses_act.php" method="post" enctype="multipart/form-data">

Disini kita akan membuat form dengan menggunakan model post untuk mengirim data, dan kita memerlukan atribut enctype dengan nilai multipart/form-data. Enctype merupakan atribut yang berperan dalam menentukan data yang dikirim ke server, dan atribut ini hanya bisa digunakan pada saat menggunakan method post. action=”proses_act.php” adalah file aksi yang digunakan untuk memproses data inputan.

1	<input type="file" name="foto[]" required="required" multiple />

<input type=”file” : Disini kita akan membuat inputan yang bertipe file, tipe file ini sebenarnya untuk umum, bisa berupa file gambar, dokument dan sebegainya.
name=”foto[]” ini maksudnya disini sistem akan mengenal semua yang kita input bernama foto, sedangkan maksud dari kurung siku [] adalah data nantinya kita input bertipe array.
required=”required” adalah suatu fungsi yang menandakan inputan ini tidak boleh dikosongkan.
multiple dimana menandakan banyak file yang bisa kita input didalam inputan ini.

Syntax lengkapnya sebegai berikut :

<html>

<head>

<title>www.malasngoding.com - Upload multi file menggunakan php mysqli</title>

</head>

<body>

<h2 style="text-align: center;">UPLOAD MULTI FILE PHP</h2>

<?php

if(isset($_GET['alert'])){

if($_GET['alert']=="gagal_ukuran"){

<strong>Warning!</strong> Ukuran File Terlalu Besar

</div>

<?php

}elseif ($_GET['alert']=="gagal_ektensi") {

<strong>Warning!</strong> Ekstensi Gambar Tidak Diperbolehkan

</div>

<?php

}elseif ($_GET['alert']=="simpan") {

<strong>Success!</strong> Gambar Berhasil Disimpan

</div>

<?php

}

<p style="color: red">Ekstensi yang diperbolehkan .png | .jpg | .jpeg | .gif</p>

</div>

</form>

</div>

</body>

</html>

Berikut artikel yang berkaitan dengan materi ini :

Membuat file proses input data

Langkah terakhir yaitu kita akan membuat sebuah file aksi dimana file aksi ini berfungsi untuk memproses data yang akan disimpan dalam database, serta file gambar yang akan di upload dalam direktori yang sudah disediakan. Nama file aksi ini harus sesuai dengan action=”proses_act.php” dalam tag form diatas.

<?php

include 'koneksi.php';

$limit = 10 * 1024 * 1024;

$ekstensi = array('png','jpg','jpeg','gif');

$jumlahFile = count($_FILES['foto']['name']);

for($x=0; $x<$jumlahFile; $x++){

$namafile = $_FILES['foto']['name'][$x];

$tmp = $_FILES['foto']['tmp_name'][$x];

$tipe_file = pathinfo($namafile, PATHINFO_EXTENSION);

$ukuran = $_FILES['foto']['size'][$x];

if($ukuran > $limit){

header("location:index.php?alert=gagal_ukuran");

}else{

if(!in_array($tipe_file, $ekstensi)){

header("location:index.php?alert=gagal_ektensi");

}else{

move_uploaded_file($tmp, 'file/'.date('d-m-Y').'-'.$namafile);

$x = date('d-m-Y').'-'.$namafile;

mysqli_query($koneksi,"INSERT INTO gambar VALUES(NULL, '$x')");

header("location:index.php?alert=simpan");

}

1	$limit = 10 * 1024 * 1024;

Variabel limit merupakan variabel yang menyimpan data total ukuran sebesar 10 mb. Ini berfungsi untuk membatasi ukuran file yang boleh di upload nantinya.

1	$ekstensi = array('png','jpg','jpeg','gif');

Variabel ekstensi ini menyimpan data ekstensi yang diperbolehkan. Ini juga berfungsi untuk kita batasi ekstensi yang bisa di upload nantinya.

1	$jumlahFile = count($_FILES['foto']['name']);

Variabel jumlahFile ini adalah variabel yang menyimpan jumlah file yang di upload pada form upload sebelumnya.

Oleh karena file yang kita upload ada beberapa file gambar, maka kita harus membuatnya dalam perulangan yang disini saya menggunakan perulangan for.

1	for($x=0; $x<$jumlahFile; $x++)

$x=0, pertama-tama kita ininsialkan dulu $x=0, ini maksudnya data yang pertama nanti akan diinisilkan array 0.
$x<$jumlahFile, variabel x kurang dari jumlahFile. ini merupakan batasan yang harus kita buat.
$x++, dimana jika batasan belum tercapai atau nilai x masih leih kurang dari jumlahFile maka nilai x+1.

Penjelasan Lanjutan

$namafile = $_FILES['foto']['name'][$x];

$tmp = $_FILES['foto']['tmp_name'][$x];

$tipe_file = pathinfo($namafile, PATHINFO_EXTENSION);

$ukuran = $_FILES['foto']['size'][$x];

Syntax ini merupakan identitas dari file gambar yang kita upload. Dimana identitas yang diperlukan ada nama, tipe file, ukuran. Sedangkan variabel tmp disini menyimpan sebuah fungsi dimana fungsi ini php gunakan untuk mengirim file ke web server.

1	if($ukuran > $limit)

Merupakan perintah pengecekan dimana akan cek jika ukuran file yang diupload lebih besar dari limit (ukuran yang sudah ditetapkan). Maka perintah yang ada dalam pengecekan ini akan dijalankan.

1	if(!in_array($tipe_file, $ekstensi))

Merupakan pengecekan dimana ekstensi yang diperbolehkan. Disini maksudnya jika ekstensi dari file yang diupload tidak sesuai dengan ekstensi yang diperbolehkan maka perintah yang didalam pengecekan ini dijalankan.

1	move_uploaded_file($tmp, 'file/'.date('d-m-Y').'-'.$namafile);

Ini maksudnya adalah file gambar yang kita upload tadinya akan di simpan didalam folder “file/”, dengan nama file dikombinasikan antara tanggal dan nama file yang di upload.

Untuk hasilnya dapat dilihat pada gambar berikut :