Belajar Codeigniter #Part 7: Login and Session

Diposting oleh pada tanggal
0

Belajar Codeigniter #Part 6: Upload Foto

Diposting oleh pada tanggal
Logo Codeigniter, sumber cangkalinfo.blogspot.com


Assalamu alaikum warohmatullahi wabarokatuh.

UploadFoto – rasanya kurang lengkap jika suatu website hanya menampilkan informasi berupa text saja, oleh karena itu upload foto ke dalam website menjadi keharusan untuk melengkapi informasi yang disimpan atau disampaikan di dalam sebuah website.

Pada tutorial kali ini kita akan membahas bagaimana cara untuk mengupload foto ke dalam website kita, menyimpannya ke dalam database dan menampilkannya.

Jika kalian nyasar di tutorial ini ada baiknya kalian baca juga tutorial sebelumnya yaitu di Belajar Codeigniter #Part 5: CRUD-Update and Delete tapi biar lebih tau alurnya kalian harus baca dari awal yaitu Belajar Codeigniter #Part 1: InstalasiCodeigniter , karena artikel ini merupakan seri tutorial.

Di bawah ini garis besar isi artikel ini, simak terus gan:

  1. Merubah Controller dan Menambahkan Fungsi _do_upload()
  2. Merubah Tampilan dan Form
  3. Membuat Javascript (AJAX)
  4. Kesimpulan

 

1.    Merubah Controller dan Menambahkan Fungsi _do_upload()

 

Jika di tutorial sebelumnya tidak ada fungsi untuk upload foto maka kali ini saya akan menambahkan fungsi untuk menangani upload foto, otomatis fungsi save(), update dan delete yang sudah kita buat sebelumnya juga ada sedikit perubahan

 

Ikuti langkahnya:

 

a.    Membuat fungsi _do_upload()

 

Buka file application/controllers/Admin.php kemudian tuliskan fungsi di bawah ini tepat di bawah fungsi delete, sebenarnya penempatannya bebas saja tapi biar urut:

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
function _do_upload()
    {
        $config['upload_path']          = './assets/img/';
        $config['allowed_types']        = 'jpg|png|jpeg';
        $config['max_size']             = 100; 
        $config['max_width']            = 1000; 
        $config['max_height']           = 1000; 
        $config['file_name']            = round(microtime(true) * 1000);

        $this->load->library('upload', $config);

        if(!$this->upload->do_upload('foto')) 
        {
            $data['inputerror'][] = 'foto';
            $data['error_string'][] = $this->upload->display_errors(); 
            $data['status'] = FALSE;
            echo json_encode($data);
            exit();
        }
        return $this->upload->data('file_name');
    }

 

Penjelasan:

-      Di awal fungsi saya mengatur konfigurasinya meliputi path direktori tempat kita menyimpan foto, ekstensi apa saja yang diperbolehkan, size maksimal, lebar dan tinggi foto yang diperbolehkan, dan nama file ketika disimpan nanti

-      Kemudian memanggil library upload bawaan dari codeigniter dan menambahkan variable $config pada parameter ke 2.

-      Kemudian kita membuat kondisi dengan cara memanggil fungsi do_upload() bawaan dari codeigniter dengan parameter ‘foto’ (name inputan dari form), jika nilainya false maka akan mengirimkan pesan error dalam bentuk JSON

-      Jika berhasil maka akan mengupload foto sesuai konfigurasi yang sudah kita atur di awal.

 

b.    Merubah Kode Function Save

 

Pada function save() lakukan perubahan 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
function save()
	{
		$data = array(	'nama' => $this->input->post('nama'),
						'nim' => $this->input->post('nim')
					);

		if(!empty($_FILES['foto']['name']))
        {
            $upload = $this->_do_upload();
            $data['foto'] = $upload;
        }

		$request = $this->sm->save($data);
		
		if ($request) {
			$result = array(
				'status' => 'success',
				'message' => 'Input Success'
			);
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Input Failed'
			);
		}
		echo json_encode($result);
	}

 

Penjelasan:

-      Pertama kita menghapus index ‘foto’ dari variable array $data karena kita akan menambahkannya nanti di bawah.

-      Kemudian membuat kondisi jika inputan dengan tipe file dan dengan name foto tidak kosong maka kita memanggil fungsi _do_upload() yang baru saja kita buat.

-      Adapun return an dari fungsi _do_upload() tadi berupa nama file, maka nama file tersebut kita masukkan ke dalam variable array $data dengan index ‘foto’, lalu kita kirim ke model seperti biasa.

 

c.    Merubah Kode Function Update

 

Untuk kode pada fungsi update perubahannya agak banyak, yaitu 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
function update()
	{
		$data = array(	'id' => $this->input->post('id'),
						'nama' => $this->input->post('nama'),
						'nim' => $this->input->post('nim')
					);

		if($this->input->post('hapusfoto')) // if remove photo checked
        {
            if(file_exists('./assets/img/'.$this->input->post('hapusfoto')) && $this->input->post('hapusfoto'))
                unlink('./assets/img/'.$this->input->post('hapusfoto'));
            $data['foto']='';
        }
        if(!empty($_FILES['foto']['name']))
        {
            $upload = $this->_do_upload();
            // $unit 	= $this->session->userdata('MSU_KODE');
            $siswa = $this->sm->getById($this->input->post('id'))->result_array();
            // var_dump($siswa);exit();

            if(file_exists('./assets/img/'.$siswa[0]['foto']) && $siswa[0]['foto'])
            	unlink('./assets/img/'.$siswa[0]['foto']);
            $data['foto']=$upload;
        }

		$request = $this->sm->update($data);

		if ($request) {
			$result = array(
				'status' => 'success',
				'message' => 'Update Success'
			);
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Update Failed'
			);
		}
		echo json_encode($result);
	}

 

Penjelasannya:

-      Hapus index ‘foto’ dari variable array $data.

-      Jika user menginginkan fotonya dihapus ketika merubah data, caranya dengan membuat kondisi jika ada inputan dengan nama hapusfoto maka menjalankan kondisi didalamnya, yaitu jika ada file di dalam path assets/img dengan nama yang sama dengan inputan maka file itu dihapus dengan fungsi unlink(), kemudian index ‘foto’ diset kosong.

-      Kemudian membuat kondisi lagi jika ada inputan foto maka memanggil fungsi _do_upload() dan menghapus foto yang lama dengan alur logika seperti diatas, hanya saja nama filenya kita mengambil dari database dengan memanggil fungsi getById() dari model dengan parameter id siswa yang akan kita update, lalu kita ambil nama file fotonya saja dari kolom foto.

-      Mengganti index ‘foto’ dengan nama file hasil return an dari fungsi _do_upload(), kemudian mengirim ke model seperti biasa.

 

d.    Merubah Kode Function Delete

 

Ubah kode pada fungsi delete menjaid 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
function delete($id)
	{
		if (isset($id)) {
			try
			{
				$siswa = $this->sm->getById($id)->result_array();

				if(file_exists('./assets/img/'.$siswa[0]['foto']) && $siswa[0]['foto'])
					unlink('./assets/img/'.$siswa[0]['foto']);

				$request = $this->sm->delete($id);
				$result = array(
					'status' => 'success',
					'message' => 'Delete Success'
				);
				echo json_encode($result);
			}
			catch(Exception $e){

			}
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Please provide an id'
			);
			echo json_encode($result);
		}
	}

 

Penjelasan:

-      Di fungsi delete ini intinya kita hanya mengirimkan id ke model sebagai syarat query delete.

-      Namun kita juga ingin menghapus file foto dari direktori assets/img, dengan alur logika sama persis pada fungsi update, yaitu memanggil fungsi getById() dari model dan kita ambil nama file fotonya saja kemudian kita hapus dengan menggunakan fungsi unlink().

Sehingga kode akhir dari controllers/Admin.php menjadi 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<?php 
/**
 * 
 */
class Admin extends CI_Controller
{
	
	function __construct()
	{
		parent::__construct();
		$this->load->model('Siswa_model','sm');
	}

	function index()
	{
		$data = array( 'title' => 'Daftar Siswa',
					'isi' => 'siswa/list');

		$this->data['siswa'] = $this->allSiswa();

		$this->load->view('layout/wrapper', $data, $this->data);
	}

	function refreshTabel()
	{
		$this->data['siswa'] = $this->allSiswa();
		$this->load->view('siswa/tabel',$this->data);
	}

	function allSiswa()
	{
		$request = $this->sm->getAll();
		return $request;
	}

	function siswaById()
	{
		$id = $this->input->post('id');
		$request = $this->sm->getById($id);
		// var_dump($request);exit();
		echo json_encode($request->result());
	}

	function save()
	{
		$data = array(	'nama' => $this->input->post('nama'),
						'nim' => $this->input->post('nim')
					);

		if(!empty($_FILES['foto']['name']))
        {
            $upload = $this->_do_upload();
            $data['foto'] = $upload;
        }

		$request = $this->sm->save($data);
		
		if ($request) {
			$result = array(
				'status' => 'success',
				'message' => 'Input Success'
			);
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Input Failed'
			);
		}
		echo json_encode($result);
	}

	function update()
	{
		$data = array(	'id' => $this->input->post('id'),
						'nama' => $this->input->post('nama'),
						'nim' => $this->input->post('nim')
					);

		if($this->input->post('hapusfoto')) // if remove photo checked
        {
            if(file_exists('./assets/img/'.$this->input->post('hapusfoto')) && $this->input->post('hapusfoto'))
                unlink('./assets/img/'.$this->input->post('hapusfoto'));
            $data['foto']='';
        }
        if(!empty($_FILES['foto']['name']))
        {
            $upload = $this->_do_upload();
            // $unit 	= $this->session->userdata('MSU_KODE');
            $siswa = $this->sm->getById($this->input->post('id'))->result_array();
            // var_dump($siswa);exit();

            if(file_exists('./assets/img/'.$siswa[0]['foto']) && $siswa[0]['foto'])
            	unlink('./assets/img/'.$siswa[0]['foto']);
            $data['foto']=$upload;
        }

		$request = $this->sm->update($data);

		if ($request) {
			$result = array(
				'status' => 'success',
				'message' => 'Update Success'
			);
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Update Failed'
			);
		}
		echo json_encode($result);
	}

	function delete($id)
	{
		if (isset($id)) {
			try
			{
				$siswa = $this->sm->getById($id)->result_array();

				if(file_exists('./assets/img/'.$siswa[0]['foto']) && $siswa[0]['foto'])
					unlink('./assets/img/'.$siswa[0]['foto']);

				$request = $this->sm->delete($id);
				$result = array(
					'status' => 'success',
					'message' => 'Delete Success'
				);
				echo json_encode($result);
			}
			catch(Exception $e){

			}
		}else{
			$result = array(
				'status' => 'failed',
				'message' => 'Please provide an id'
			);
			echo json_encode($result);
		}
	}

	function _do_upload()
    {
        $config['upload_path']          = './assets/img/';
        $config['allowed_types']        = 'jpg|png|jpeg';
        $config['max_size']             = 100; 
        $config['max_width']            = 1000; 
        $config['max_height']           = 1000; 
        $config['file_name']            = round(microtime(true) * 1000);

        $this->load->library('upload', $config);

        if(!$this->upload->do_upload('foto')) 
        {
            $data['inputerror'][] = 'foto';
            $data['error_string'][] = $this->upload->display_errors(); 
            $data['status'] = FALSE;
            echo json_encode($data);
            exit();
        }
        return $this->upload->data('file_name');
    }
}


 ?>

 

2.    Merubah Tampilan dan Form

 

a.    Merubah View Tabel

 

Buka file application/views/siswa/tabel.php kemudian ubah 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
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-body">
				<table id="example3" class="table table-bordered table-stripped display responsive wrap" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>No</th>
							<th>Nama</th>
							<th>NIM</th>
							<th>Foto</th>
							<th>Aksi</th>
						</tr>
					</thead>
					<tbody>
						<?php 
						$i=1;
						foreach ($this->data['siswa'] as $key => $value): ?>
							<tr>
								<td><?php echo $i ?></td>
								<td><?php echo $value['nama'] ?></td>
								<td><?php echo $value['nim'] ?></td>
								<td><img src="<?=base_url()?>./assets/img/<?=$value['foto'];?>" width="30px"></td>
								<td>
									<a class="btn btn-xs text-success" href="#modalSiswa" onclick="submit(<?php echo $value['id'] ?>)" data-toggle="modal">
										<i class="glyphicon glyphicon-edit"></i>Update
									</a><br>
									<a onClick="deleteConfirm('<?php echo site_url('admin/delete/'.$value['id']) ?>')"
										href="#!" class="btn btn-xs text-danger">
										<i class="glyphicon glyphicon-trash"></i>Delete
									</a>
								</td>
							</tr>
							<?php $i++; endforeach ?>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

 

Penjelasan:

-       Perubahan hanya terjadi di kolom foto, kita menambahkan tag <img> dan memanggil file dari direktori assets/img untuk ditampilkan.

 

b.    Merubah Form

 

Buka file application/views/layout/modal.php dan ubah kodenya menjadi 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
<div class="modal fade" id="modalSiswa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header text-center" style="background-color: lightblue">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 id="modal-title" class="modal-title w-100 font-weight-bold"><b>SISWA</b></h4>
		</div>
		<form actionrole="form" onSubmit="return false" enctype="multipart/form-data" id="formSiswa">
			<input type="hidden" name="id" id="id" value="">
			<div class="modal-body">
				<div class="form-group">
					<label>Nama</label>
					<input type="text" class="form-control" id="nama" name="nama" placeholder="Nama" placeholder="Nama Siswa">
				</div>
				<p id="nama_alert" style="color: red"></p>

				<div class="form-group">
					<label>NIM</label>
					<input type="text" class="form-control" id="nim" name="nim" placeholder="NIM" placeholder="NIM">
				</div>
				<p id="nim_alert" style="color: red"></p>

				<div class="form-group" id="photo-preview">
					<label class="control-label col-md-3">Preview</label>
					<div class="col-md-9">
						(No photo)
						<span class="help-block"></span>
					</div>
				</div>

				<div class="md-form mb-5">
					<label for="select-beast-selectized"><strong>Foto</strong></label>
					<p>* maximal ukuran file 100 kb, format (jpg/jpeg/png)</p>
						<div class="form-group">
							<input type="file" name="foto" class="form-control" id="foto">
						</div>
					<p id="foto_alert" style="color: red"></p>
				</div>
			</div>
			<div class="modal-footer d-flex justify-content-center">
				<button class="btn btn-light" data-dismiss="modal">Cancel <i class="fa fa-times ml-1"></i></button>
				<button class="btn btn-info" id="btn-update" onclick="update()">Update <i class="fa fa-paper-plane-o ml-1"></i></button>
				<button class="btn btn-info" id="btn-add" onclick="add()">Save <i class="fa fa-paper-plane-o ml-1"></i></button>
			</div>
		</form>
	</div>
</div>
</div>

 

Penjelasan:

-      Saya menambahkan div lagi di bawah inputan NIM, untuk menampilkan preview foto yang akan kita update nanti, kita kosongkan saja karena nanti akan kita isi dengan manipulasi dom di javascript.

-      Kemudian buat div lagi di bawahnya sebagai tempat inputan foto, jangan lupa sediakan tag <p> dengan id foto_alert sebagai tempat menampilkan error, dan jangan lupa namenya ‘foto’ karena sudah kita sesuaikan di controllers tadi.

-      Untuk foto preview nanti hasilnya seperti ini.


 

3.    Membuat Javascript (AJAX request)

 

Di file javascript kita juga akan melakukan perubahan di beberapa function, buka file application/views/layout/js.php ikuti langkahnya seperti berikut:

 

a.    Merubah Function submit()

 

Di function submit ubah 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
function submit(x){
		if (x=='add') {
			$('#btn-add').show();
			$('#btn-add').html('Add <i class="fa fa-paper-plane-o ml-1"></i>');
			$('#btn-add').attr('disabled',false);
			$('#btn-update').hide();
			$('#photo-preview').hide();
			$('#modal-title').html('<b>Add Siswa</b>');

			$("[name='id']").val('');
			$("[name='nama']").val('');
			$("[name='nim']").val('');
			// $('#nama_alert, #nim_alert').hide()
		}else{
			$('#btn-add').hide();
			$('#btn-update').show();
			$('#btn-update').attr('disabled',false);
			$('#btn-update').html('Update <i class="fa fa-paper-plane-o ml-1"></i>');
			$('#modal-title').html('<b>Update Siswa</b>');
			// $('#nama_alert, #nim_alert').hide()

			$.ajax({
				type:"POST",
				data:'id='+x,
				url:'<?php echo base_url('index.php/admin/siswaById') ?>',
				dataType:'JSON',
				success: function(data){
					// console.log(data)
					var base_url = '<?php echo base_url();?>';
					$('[name="nama"]').val(data[0].nama);
					$('[name="nim"]').val(data[0].nim);
					$('[name="id"]').val(data[0].id);
					$('#photo-preview').show();

					if(data[0].foto){
                		$('#label-photo').text('Change Photo'); // label photo upload
                		$('#photo-preview div').html('<img src="'+base_url+'./assets/img/'+data[0].foto+'" width="40px" class="img-responsive">'); // show photo
                		$('#photo-preview div').append('<input type="checkbox" name="hapusfoto" value="'+data[0].foto+'"/> Hapus foto ketika menyimpan ?'); // remove photo
            		}else{
                	// $('#label-photo').text('Upload Photo'); // label photo upload
                		$('#photo-preview div').text('(No photo)');
            		}
        		}
    		})
		}
	}

 

Penjelasan:

-      Pada kondisi yang pertama jika tombol add di klik maka sembunyikan photo preview dengan cara $(‘#photo-preview’).hide()

-      Kemudian di kondisi ke dua jika tombol update di klik setelah request ajax sukses maka <div> dengan id photo-preview ditampilkan dan masukkan html untuk menampilkan fotonya, oya variable base_url sudah di deklarasikan di awal function success,

-      Tambahkan juga checkbox untuk fitur hapus foto ketika menyimpan.

-      Tapi jika siswa tidak memiliki foto maka tampikan text ‘No photo’.

 

b.    Merubah function add()

 

Tuliskan kodenya seperti di bawah 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
function add(){
		if ($('#nama').val()=='') {
			$('#nama_alert').text('Name can not be empty').fadeIn().delay(5000).fadeOut()
		}else if($('#nim').val()==''){
			$('#nim_alert').text('NIM can not be empty').fadeIn().delay(5000).fadeOut()
		}else if($('#foto').val()==''){
			$('#foto_alert').text('Photo can not be empty').fadeIn().delay(5000).fadeOut()
		}else{
			$('#btn-add').html("<i class='fa fa-spinner fa-spin'></i> Saving...");
			$('#btn-add').attr('disabled',true);
			var formData = new FormData($('#formSiswa')[0]);

			$.ajax({
				type:'POST',
				data: formData,
				contentType: false,
				processData: false,
				url:'<?php echo base_url('index.php/admin/save') ?>',
				dataType : 'JSON',
				success : function(hasil){
					console.log(hasil)
					if (hasil.status == 'success'){
						$("#modalSiswa").modal('hide');
						refreshTabel();
						$("#success-message").html(hasil.message).fadeIn().delay(5000).fadeOut()
					}else if(hasil.inputerror){
						$('#foto_alert').html(hasil.error_string).fadeIn().delay(5000).fadeOut()
						$('#btn-add').html("<i class='fa fa-paper-plane-o ml-1'></i> Add")
						$('#btn-add').attr('disabled',false)
					}
				}
			})
		}
	}

 

Penjelasan:

-      Tambahkan validasi di awal function, jika foto tidak diisi maka menampilkan pesan error

-      Kemudian setelah request AJAX sukses jika terjadi error dalam proses input foto maka akan menampilkan pesan error yang dikirim dari fungsi _do_upload() di dalam controller tadi.

-      Untuk tampilan validasinya nanti seperti ini, disini saya mengupload file pdf.

 


a.    Merubah function update()

 

Ubah function update menjadi seperti di bawah 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
function update(){
		if ($('#nama').val()=='') {
			$('#nama_alert').text('This field can not be empty').fadeIn().delay(5000).fadeOut()
		}else if($('#nim').val()==''){
			$('#nim_alert').text('This field can not be empty').fadeIn().delay(5000).fadeOut()
		}else{
			$('#btn-update').html("<i class='fa fa-spinner fa-spin'></i> Updating...");
			$('#btn-update').attr('disabled',true);
			var formData = new FormData($('#formSiswa')[0]);

			$.ajax({
				type:'POST',
				data: formData,
				contentType: false,
				processData: false,
				url: '<?php echo base_url('index.php/admin/update') ?>',
				dataType: 'JSON',
				success: function(hasil){
					if (hasil.status == 'success') {
						$('#modalSiswa').modal('hide')
						refreshTabel()
						$("#success-message").html(hasil.message).fadeIn().delay(5000).fadeOut()
						$("[name='id']").val('');
						$("[name='nama']").val('');
						$("[name='nim']").val('');
					}else if(hasil.inputerror){
						$('#foto_alert').html(hasil.error_string).fadeIn().delay(5000).fadeOut()
						$('#btn-update').html("<i class='fa fa-paper-plane-o ml-1'></i> Update")
						$('#btn-update').attr('disabled',false)
					}
				}
			})
		}
	}

 

Penjelasan:

-      Untuk function update tidak menggunakan validasi field foto

-      Kemudian setelah request AJAX selesai maka akan memunculkan kode error jika input foto tidak sesuai dengan konfigurasi yang sudah kita tetapkan di controller tadi, validasi ini mirip dengan fungsi add().

 

4.    Kesimpulan

Kesimpulan dari tutorial kali ini adalah:

1. Untuk membuat fitur upload foto, Codeigniter sudah menyediakan library bawaan, kita     hanya perlu merubah pada controllers saja

2. Tidak perlu ada perubahan pada model

3. Menampilkan foto menggunakan tag <img> pada tabel.

4. Menambahkan field upload foto dengan tipe file

5. Melakukan sedikit validasi pada kode Javascript

 

Berikut adalah gambar demonya:

input data

hasil input


Untuk selanjutnya kita akan membahas Login and Session di artikel selanjutnya yang berjudul Belajar Codeigniter #Part 7: Login and Session.

 

Terimakasih sudah membaca, untuk mendapatkan info terbaru mengenai artikel yang saya posting kalian bisa klik ‘Langganan’ di pojok kiri atas.


Lokasi: Indonesia
Web Developer, passionate in PHP, Python and NodeJS

Komentar

Posting Komentar