MEMBUAT CRUD DENGAN CODEIGNITER #5 UPLOAD GAMBAR
Assalamualaikum Wr, Wb
Postingan kali ini akan melanjutkan proses membuat CRUD mengunakkan framework Codeigniter dan Mysqli, kemarin di part#4 sudah kita bahas tentang bagaimana cara membuat file controller dan view, dan juga dibahas bagaimana menampilkan data ke dalama tabel kemudian kita juga sudah bisa menambahkan dan edit data ke dalam database, yap kali ini kita akan membahas bagaimana sih cara upload gambar di codeigniter, penasaran oke langsung saja.
Studi Kasus Upload Gambar Data Siswa
Intro Dulu ya gaes
Semoga semua dalam keadaan yang baik baik semua, yang sakit segera disembuhkan, yang belum kerja segera dapat kerja, yang punya hajat dari A sampi Z semoga segera terkabulkan, Aminn Amin Ya Robbalalamin.
Melanjutkan dari tutorial part4, kali ini kita akan modif tabel siswa, controler da view agar bisa upload gambar siswa, secara proses hampir sama dengan tambah data, cuma kita akan fokus bagai mana cara gambar bisa tersimpan di folder aplikasi dan di database.
Persiapan Membuat CRUD
- Download Framework Codeigniter Versi 3
- Laptop Sudah terintal server contoh, xampp Pilih sesuai dengan os temen temen
- Editor untuk menulis code saya menggunakan Visual Studio Code
Langkah Langkah
1. Buka tabel siswa sesuaikan sesuai gambar di bawah, menambahkan field baru bernama foto,
2. Buka file view siswa_view.php kemudian tambahkan kode seperti di bawah ini,
<th>Foto</th>
<td><img src="<?=base_url('upload_file/'.$row->alamat);?>" alt="" srcset="" width="60px"></td>
<tr>
<td>Foto</td>
<td>:</td>
<td><input type="file" name="userfile" ></td>
</tr>
public function simpan(){
// configurasi file gambar
$set = array(
'upload_path' => realpath('./uploads'),// folder upload
'allowed_types' => 'png|jpg|jpeg', // jenis file
'max_size' => 90000, // ukuran file
'max_width' => 1024,
'max_height' => 768
);
$this->upload->initialize($set); // bawaan librari upload ci
$this->load->library('upload', $set); // bawaan librari upload ci
if ( ! $this->upload->do_upload('userfile'))
{
$error = array('error' => $this->upload->display_errors());
print_r($error);
}
else
{
$datafile = $this->upload->data(); // bawaan librari upload ci
$nama_file = $_FILES['userfile']['name']; // nilai dari input gambar
$nama = $this->input->post('nama');
$jk = $this->input->post('jeniskelamin');
$alt = $this->input->post('alamat');
$tgl = $this->input->post('tgl');
$data = array(
'nama' => $nama,
'jenis_kelamin' => $jk,
'alamat' => $alt,
'foto' => $nama_file, // menambahkan filed baru di tabel siswa untuk menampung nama foto
'created_at' => $tgl
);
$this->db->insert('tb_siswa',$data);
redirect('siswa/index');
}
}
4. Jangan lupa untuk memanggil library upload di codeigniter untuk pemganggilannya seperti ini, buka folder config, cari file autoload.php persisya seperti ini : namafolder/config/autoload.php tambahkan kode ini:
$autoload['libraries'] = array('database','session','upload');
6. kode lengkap tambah_view.php seperti 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">
<title>Lulusanskom</title>
</head>
<body><center>
<h2> Tambah Data</h2><br>
<form action="<?= base_url('siswa/simpan/')?>" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Nama Siswa"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<select name="jeniskelamin">
<option value="">-Pilih Jenis Kelamin --</option>
<option value="Laki-Laki">Laki Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" cols="16" rows="3" placeholder="Alamat"></textarea></td>
</tr>
<tr>
<td>Foto</td>
<td>:</td>
<td><input type="file" name="userfile" ></td>
</tr>
<tr>
<td>Tgl Input</td>
<td>:</td>
<td><input type="date" name="tgl"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="simpan" value="Simpan"></td>
</tr>
</table></center>
</form>
</body>
</html>
<!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">
<title>Lulusanskom</title>
</head>
<body>
<center>
<a href="<?=base_url('siswa/tambah');?>">Tambah</a><br>
<h2>List Data</h2>
<table width="50%" cellspacing="" border="1px solid">
<tr>
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Foto</th>
<th>Tanggal</th>
<th>Aksi</th>
</tr>
<tbody>
<?php $no=1; foreach ($query as $row):?>
<tr>
<td><?=$no++?></td>
<td><?=$row->nama?></td>
<td><?=$row->jenis_kelamin?></td>
<td><?=$row->alamat?></td>
<td><img src="<?=base_url('uploads/'.$row->foto);?>" alt="" width="200px"></td>
<td><?=$row->created_at?></td>
<td>
<a href="<?= base_url('siswa/tampil_edit/'.$row->id_siswa)?>">Edit</a>
<a href="<?= base_url('siswa/hapus/'.$row->id_siswa)?>" onclick="return confirm('Yakin Hapus?')">Hapus</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
Oke kita sudah bisa menambahkan data dengan gambar ke database, dari seri tutorial ini dan semoga bermangfaat 🙏🏻
