Selamat datang di Blog CopyPasteKode, pada tutorial kali ini kita akan belajar bagaimana cara membuat fitur Upload Image di Codeigniter 4. Pada tutorial kali ini saya akan menggunakan Menggunakan Project CRUD, yang telah kita buat pada tutorial sebelumnya, bagi teman-teman yang belum mengikuti tutorial sebelumnya silahkan untuk terlebih dahulu mengunjungi link berikut https://copypastekode.blogspot.com/2022/04/tutorial-codeigniter-4-membuat-crud.html atau teman-teman juga bisa langsung mendownload Project CRUD pada link berikut : download disini guys. Agar tidak terlalu panjang tutorial nya, baiklah langsung saja kita mulai tutorial Upload Image kita.
Setelah sudah selesai mendownload Project CRUD Codeigniter 4, jangan lupa untuk mengimport file databasenya pada folder database dengan nama crud.sql
Bagi teman-teman yang sudah mempunyai project CRUD sendiri, bisa teman-teman lewati langkah diatas.
Langkah-langkah membuat Upload Image pada Codeigniter 4 :
- Menambahkan field baru pada table dengan nama foto
- Menambahkan Inputan File pada Views yang kita gunakan untuk tambah data
- Menambahkan Validasi dan Proses input gambar ke database
- Membuat Folder uploads pada Folder app/public
Langsung saja kita mulai dengan langkah yang pertama.
Menambahkan Field
Tambahkan sebuah field baru ke table yang kalian gunakan dengan nama foto. Seperti contoh berikut :
Tambahkan 1 kolom setelah field paling bawah lalu tekan Kirim
Isikan seperti contoh gambar diatas, setelah itu tekan Simpan.
Maka Struktur tabel kita menjadi seperti berikut :
Pada type data foto saya menggunakan varchar dengan panjang 255, kenapa 255 apa tidak terlalu besar?.
Kenapa harus panjang datanya 255 karena kita akan membuat nama random dari file foto yang nantinya akan kita uploads dengan perintah getRandomName(); yang nantinya nama file yang kita upload akan di generate dengan string random yang panjang
Contoh:
"1649252203_51ae33ea505b406b8927.jpeg".
Sebenarnya teman-teman juga bisa menggunakan panjang data 100 atau 125 mungkin itu sudah cukup untuk menampung string dari hasil generate fungsi getRandomName(); ini, penggunaan panjang 255 hanya untuk berjaga-jaga, karena saya sendiri belum mengetahui pasti seberapa panjang nantinya random sting nama dari sebuah file yang akan di generate.
Menambahkan Inputan File
Buka file Views kalian yang digunakan untuk menambahkan data, pada Project CRUD sebelumnya saya menamakan file tambah datanya dengan nama "tambah_data.php" dan bagi teman-teman yang menggunakan project CRUD sendiri, silahkan buka juga file Views yang digunakan untuk menambahkan data. Lalu tambahkan script berikut :
<div class="input-group mb-3">
<span class="input-group-text">Foto</span>
<input type="file" class="form-control
<?= ($validation->hasError('foto')) ? 'is-invalid' : 'is-valid'; ?>"
name="foto" placeholder="Enter no_hp">
<div class="invalid-feedback">
<?= $validation->getError('foto'); ?>
</div>
</div>
sehingga file tambah_data.php menjadi seperti berikut :
<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">
<title>Crud</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body>
<div class="container-fluid mt-5">
<div class="card">
<div class="card-header py-0">
<div class="alert" role="alert">
<div class="row">
<a type="button" class="text-danger col-md-2" onclick="goBack()">
<i class="fas fa-angle-double-left"> Kembali</i>
</a>
<div class="col-md-8 text-gray-900 text-center">
<h5 class="contact-gw">
<i class="fas fa-fw fa-user-graduate"></i> Form Tambah Data
</h5>
</div>
</div>
</div>
</div>
<div class="card-body">
<form action="<?= base_url('crud/simpan'); ?>" method="post" autocomplete="off" enctype="multipart/form-data">
<?= csrf_field(); ?>
<div class="input-group mb-3">
<span class="input-group-text">Username</span>
<input type="text" class="form-control
<?= ($validation->hasError('username')) ? 'is-invalid' : 'is-valid'; ?>"
name="username" value="<?= set_value('username'); ?>" placeholder="Enter Username">
<div class="invalid-feedback">
<?= $validation->getError('username'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Nama</span>
<input type="text" class="form-control
<?= ($validation->hasError('nama')) ? 'is-invalid' : 'is-valid'; ?>"
value="<?= set_value('nama'); ?>" name="nama" placeholder="Enter Nama">
<div class="invalid-feedback">
<?= $validation->getError('nama'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Tempat_Lahir</span>
<input type="text" class="form-control
<?= ($validation->hasError('tempat_lahir')) ? 'is-invalid' : 'is-valid'; ?>"
value="<?= set_value('tempat_lahir'); ?>" name="tempat_lahir" placeholder="Enter Tempat Lahir">
<div class="invalid-feedback">
<?= $validation->getError('tempat_lahir'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Tanggal Lahir</span>
<input type="date" class="form-control
<?= ($validation->hasError('tanggal_lahir')) ? 'is-invalid' : 'is-valid'; ?>"
value="<?= set_value('tanggal_lahir'); ?>" name="tanggal_lahir" placeholder="Enter Tanggal Lahir">
<div class="invalid-feedback">
<?= $validation->getError('tanggal_lahir'); ?>
</div>
</div>
<div class="input-group mb-3 mx-auto">
<span class="input-group-text">Jenis Kelamin</span>    
<span><input type="radio" class="form-check-input"
name="jenis_kelamin" value="Laki-laki"> Laki-laki     </span>
<span><input type="radio" class="form-check-input"
name="jenis_kelamin" value="Perempuan"> Perempuan     </span>
<div class="text-danger small">
<?= $validation->getError('jenis_kelamin'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Program Study</span>
<select name="prodi" class="form-select custom-select
<?= ($validation->hasError('prodi')) ? 'is-invalid' : 'is-valid'; ?>">
<option value="">--- Pilih Program Studi ---</option>
<option value="Matematika">Matematika</option>
<option value="Statistika">Statistika</option>
<option value="Sistem Informasi">Sistem Informasi</option>
</select>
<div class="invalid-feedback">
<?= $validation->getError('prodi'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Email</span>
<input type="email" class="form-control
<?= ($validation->hasError('email')) ? 'is-invalid' : 'is-valid'; ?>"
value="<?= set_value('email'); ?>" name="email" placeholder="Enter email">
<div class="invalid-feedback">
<?= $validation->getError('email'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Alamat</span>
<textarea type="text" class="form-control
<?= ($validation->hasError('alamat')) ? 'is-invalid' : 'is-valid'; ?>"
value="<?= set_value('alamat'); ?>" name="alamat" placeholder="Enter alamat"></textarea>
<div class="invalid-feedback">
<?= $validation->getError('alamat'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">HP</span>
<input type="number" class="form-control
<?= ($validation->hasError('no_hp')) ? 'is-invalid' : 'is-valid'; ?>"
value="<?= set_value('no_hp'); ?>" name="no_hp" placeholder="Enter no_hp">
<div class="invalid-feedback">
<?= $validation->getError('no_hp'); ?>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Foto</span>
<input type="file" class="form-control
<?= ($validation->hasError('foto')) ? 'is-invalid' : 'is-valid'; ?>"
name="foto" placeholder="Enter no_hp">
<div class="invalid-feedback">
<?= $validation->getError('foto'); ?>
</div>
</div>
<div align="center">
<button type="submit" name="submit" value="tambah" class="btn btn-sm btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Setelah menambahkan inputan file kita lanjut ke tahap selanjutnya yaitu membuat validasi dan uploads file.
Menambahkan Validasi Image
Buka Controllers yang kalian gunakan untuk tambah data, kemudian tambahkan validasi berikut :
'foto' => [
'rules' => 'uploaded[foto]|mime_in[foto,image/jpeg,image/png,image/jpg]|max_size[foto,5000]',
'errors' => [
'uploaded' => '{field} wajib diisi!',
'max_size' => 'ukuran {field} terlalu besar!',
'mime_in' => '{field} harus berekstensi png/jpg/jpeg!',
]
],
Ganti script berikut :
return redirect()->to('crud/tambah')->withInput()->with('validation', $this->validation);
Menjadi :
$data = [
'title' => 'Tambah Data Mahasiswa',
'validation' => $this->validation,
];
return view('crud/tambah_data', $data);
Pada perintah Return view arahkan ke file views, Setelah itu tambahkan script berikut sebelum menjalankan perintah untuk meng-insert data ke database :
$randomName = $foto->getRandomName();
Dan tambahkan script berikut setelah proses insert ke database berhasil dijalankan :
$foto->move(ROOTPATH . 'public/uploads', $randomName);
Sehingga script lengkapnya menjadi seperti berikut :
$randomName = $foto->getRandomName();
$simpan = $this->anggota->save([
'username' => $username,
'nama' => $nama,
'tempat_lahir' => $tempat_lahir,
'tanggal_lahir' => $tanggal_lahir,
'jenis_kelamin' => $jenis_kelamin,
'prodi' => $prodi,
'alamat' => $alamat,
'email' => $email,
'no_hp' => $no_hp,
'foto' => $randomName,
]);
$response = "Data Berhasil di Tambahkan";
$foto->move(ROOTPATH . 'public/uploads', $randomName);
Penjelasan :
$randomName = $foto->getRandomName();
Seperti yang saya jelaskan sebelumnya script diatas digunakan untuk membuat nama file menjadi random string, hal ini dilakukan agar setiap file tidak memiliki nama yang sama alias unik sehingga foto/gambar satu dengan yang lainnya tidak bentrok dan aman saat penggunaan Unlink untuk hapus maupun Update file foto/gambarnya dikemudian hari.
$foto->move(ROOTPATH . 'public/uploads', $randomName);
Script diatas merupakan fungsi untuk memindahkan file dari TempName ke folder app/public/uploads secara default file yang kita upload menggunakan fungsi ROOTPATH maka file yang terupload secara default akan terupload ke dalam folder app/public/uploads ini, dan script ini saya jalankan ketika proses insert telah berhasil dijalankan agar file tidak masuk ke dalam folder app/public/uploads saat proses insert ke databasenya gagal dijalankan. Kira-kira seperti itu penjelasannya jika dirasa kurang jelas kalian silahkan baca dokumentasi Codeigniter 4 untuk lebih jelasnya.
Testing Upload Image
Jalankan development server kalian beserta Xampp : Apache dan MySQL
kemudian tambahkan data sembarang beserta gambar/foto seperti contoh berikut:
Klik tombol Simpan
Sampai sini kita berhasil menambahkan 1 baris data baru, sekarang kita cek apakah foto/gambar yang kita upload tadi apakah berhasil tersimpan pada folder app/public/uploads
Buka folder app/public/uploads kemudian lihat apakah file sudah ada atau, jika teman-teman mengikuti semua langkah-langkah diatas dengan teliti harusnya datanya berhasil terupload ke dalam folder app/public/uploads seperti contoh gambar dibawah:
Untuk menampilkan gambar/foto kita hanya perlu menambahkan beberapa baris script seperti contoh gambar dibawah:
Maka akan tampil seperti berikut :
Dan tarraaa...! gambar / foto sudah berhasil ditampilkan pada tabel, kenapa hanya ada 1 saja gambarnya?, gambarnya hanya 1, karena data yang sebelumnya di inputkan belum dengan fitur uploads sehingga hanya ada 1 data yang memiliki gambar/foto, data ini adalah data yang telah kita tambahkan saat melakukan testing tadi.
Sampai disini tutorial kita sudah berhasil dibuat. Bagaimana teman-teman mudah bukan? cara membuat fitur Upload image dengan Codeigniter 4
Saya kira seperti itu bagaimana cara membuat Upload Image di Codeigniter 4, jika ada yang ingin teman-teman tanyakan, jangan ragu untuk bertanya pada kolom komentar dibawah dan sampai jumpa di tutorial-tutorial selanjutnya bye..byee ^^
Tags
Codeigniter