Scribd
Unggah
12 tayangan

Tutorial Upload File

tutorial

Diunggah oleh

Altera Rani
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
12 tayangan

Tutorial Upload File

tutorial

Diunggah oleh

Altera Rani
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

Tutorial Upload File/Gambar

1. Buat table dengan nama “tbl_upload” dengan tampilan sbb :

2. Tambahkan 3 record data pada table tersebut.


3. Buka VSC, lalu buka file nav.php kemudian tambahkan script untuk membuat menu
“Upload”
4. Buat folder controller dan buat sebuah file baru dengan nama “Upload.php”,
kemudian ketik script berikut ini :

<?php
namespace App\Controllers;
use CodeIgniter\Controller;

class Upload extends BaseController


{
public function index()
{
$data = [
'title' => 'Upload Gambar',
'isi' => 'v_upload',
];
echo view('layout/v_wrapper', $data);
}
}

5. Buka folder Views dan buat sebuah file baru dengan nama “v_upload.php”
6. Test hasil sementara
7. Masih dalam file v_upload.php, lanjutkan dengan ketik script. Untuk memudahkan
silahkan copas dari file v_tambah.php dan perbaiki sehingga tampak sbb :

<div class="col-md-6">
<div class="card card-primary">
<div class="card-header">

<h3 class="card-title">Upload Gambar</h3>


</div>
<?= form_open_multipart(base_url('upload/save')); ?>
<div class="card-body">
<div class="form-group">
<label>Keterangan</label>
<input name="ket" class="form-control" placeholder="Keterangan"
required>
</div>
<div class="form-group">
<label>File/Gambar</label>
<input type="file" name="gambar" class="form-control" required>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>

8. Buka controller Upload.php, tambahkan script __construct diatas function index


seperti tampak dibawah ini :

<?php
namespace App\Controllers;
use CodeIgniter\Controller;

class Upload extends BaseController


{
public function __construct()
{
helper('form');
}

public function index()


{
$data = [
'title' => 'Upload Gambar',
'isi' => 'v_upload',
];
echo view('layout/v_wrapper', $data);
}
}

9. Buka kembali file v_upload.php, tambahkan script untuk membuat table dan letakkan
dibagian bawah form, kemudian test hasil sementara

<div class="col-sm-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Keterangan</th>
<th>Upload Gambar</th>
</tr>
</thead>
<tbody>
<tr>
<td</td>
<td</td>
<td</td>
</tr>
</tbody>
</table>
</div>

10. Buat sebuah file model dengan nama “UploadModel.php” dan ketik script berikut :
(contoh file ProductModel.php)

<?php

namespace App\Models;
use CodeIgniter\Model;

class UploadModel extends Model


{
public function get_upload()
{
return $this->db->table('tbl_upload')->get()->getResultArray();
}

public function insert_upload($data)


{
return $this->db->table('tbl_upload')->insert($data);
}
}

11. Buka controller Upload.php dan tambahkan script berikut :

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\UploadModel;

class Upload extends BaseController


{
protected $UploadModel;

public function __construct()


{
helper('form');
$this->UploadModel = new UploadModel();
}

public function index()


{
if (!$this->validate([]))
{
$data = [
'title' => 'Upload Gambar',
'data' => $this->UploadModel->get_upload(),
'validation' => $this->validator,
'isi' => 'v_upload',
];
echo view('layout/v_wrapper', $data);
}
}
}

12. Buka file v_upload.php dan tambahkan script looping table dengan foreach sbb :

<div class="col-sm-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Keterangan</th>
<th>Upload Gambar</th>
</tr>
</thead>
<tbody>
<?php $no=1; foreach($data as $key => $value) { ?>
<tr>
<td><?= $no++; ?></td>
<td><?= $value['ket']; ?></td>
<td>><?= $value['gambar']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

13. Buat terlebih dahulu sebuah folder dengan nama “folder_upload” didalam folder
“public” (jika ada folder public) untuk menampung data gambar
14. Buka controller Upload.php lalu dan buat function baru dengan nama “save’ sbb :

Public function save()


{
If ($this->request->getMethod() !=='post') {
Return redirect()->to(base_url('upload/index'));
}

$validated = $this->validate([
'gambar' => 'uploaded[gambar]|mime_in[gambar,image/jpg,image/
gif,image/jpeg,image/png]|max_size[gambar,2000]'
]);
If ($validated == FALSE) {
Return $this->index();
}else {
$file_gambar = $this->request->getFile('gambar');
$file_gambar->move(ROOTPATH.'folder_upload');

$data = [
'ket' => $this->request->getPost('ket'),
'gambar'=>$file_gambar->getName(),
];

$this->UploadModel->insert_upload($data);
Return redirect()->to(base_url('upload/index'))->
with('success','Data Berhasil di Upload !!!');
}
}
15. Lakukan test hasil sementara

16. Buka file v_upload.php, tambahkan script dimulai dari baris ke-4 sbb :

<!--jika upload berhasil-->


<?php if (!empty(session()->getFlashdata('success'))) { ?>
<div class="alert alert-success">
<?php
echo session()->getFlashdata('success');
?>
</div>
<?php } ?>

<!--jika upload gagal-->


<?php
$errors = $validation->getErrors();
if (!empty($errors)) { ?>
<div class="alert alert-danger">
<?php
echo $validation->listErrors();
?>
</div>
<?php } ?>

17. Buka file v_upload dan perbaiki script <td><?= $value[‘gambar’]; ?></td> dengan
script berikut :

<td><img src="<?= base_url('folder_upload/'.$value['gambar']); ?>"


width='100px' height='100px'></td>

18. Pastikan setiap perubahan script sudah tersimpan dan lakukan test hasil akhir.
Semoga berhasil

Anda mungkin juga menyukai