CodeIgniter merupakan salah satu framework terbaik yang banyak digunakan oleh para developer PHP. Framework CodeIgniter memberikan fitur yang mudah dan lengkap untuk pembangunan website berbasis PHP. Selain itu, cara upload file di CodeIgniter tergolong mudah.
Lantas, bagaimana cara upload file di CodeIgniter? Simak tutorialnya pada artikel berikut ini.
Cara Upload File dengan CodeIgniter
Berikut adalah langkah-langkah upload file dengan CodeIgniter:
1. Membuat form
<?php
class Upload extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->helper(array('form', 'url'));
}
public function index(){
$this->load->view('v_upload', array('error' => ' ' ));
}
public function aksi_upload(){
$config['upload_path'] = './gambar/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 100;
$config['max_width'] = 1024;
$config['max_height'] = 768;
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('berkas')){
$error = array('error' => $this->upload->display_errors());
$this->load->view('v_upload', $error);
}else{
$data = array('upload_data' => $this->upload->data());
$this->load->view('v_upload_sukses', $data);
}
}
}
2. Mengaktifkan helper url dan helper form
Tahap berikutnya untuk upload file pada CodeIgniter adalah mengaktifkan helper url dan helper form. Langkah ini berfungsi untuk membantu proses saat unggah file di CodeIgniter. Pada contoh berikut ini akan menggunakan function construct() untuk memanggil helper url dan helper form.
function __construct(){
parent::__construct();
$this->load->helper(array('form', 'url'));
}
3. Membuat form upload
Kamu bisa menggunakan view v_upload seperti pada contoh berikut untuk membuat form upload dan view index.
public function index(){
$this->load->view('v_upload', array('error' => ' ' ));
}
4. Membuat view
Langkah keempat untuk upload file pada CodeIngniter adalah membuat view sesuai dengan nama v_upload yang selanjutnya akan dpanggil pada mehod index.
<html>
<head>
<title>sobatjagoan.com</title>
</head>
<body>
<center><h1>Membuat Upload File Dengan CodeIgniter | sobatjagoan.com</h1></center>
<?php echo $error;?>
<?php echo form_open_multipart('upload/aksi_upload');?>
<input type="file" name="berkas" />
<br /><br />
<input type="submit" value="upload" />
</form>
<script id="perfmatters-delayed-scripts-js">const pmDelayClick=true;const pmDelayTimer=setTimeout(pmTriggerDOMListener,10*1000);const pmUserInteractions=["keydown","mousedown","mousemove","wheel","touchmove","touchstart","touchend"],pmDelayedScripts={normal:[],defer:[],async:[]},jQueriesArray=[],pmInterceptedClicks=[];var pmDOMLoaded=!1,pmClickTarget="";function pmTriggerDOMListener(){"undefined"!=typeof pmDelayTimer&&clearTimeout(pmDelayTimer),pmUserInteractions.forEach(function(e){window.removeEventListener(e,pmTriggerDOMListener,{passive:!0})}),document.removeEventListener("visibilitychange",pmTriggerDOMListener),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",pmTriggerDelayedScripts):pmTriggerDelayedScripts()}async function pmTriggerDelayedScripts(){pmDelayEventListeners(),pmDelayJQueryReady(),pmProcessDocumentWrite(),pmSortDelayedScripts(),pmPreloadDelayedScripts(),await pmLoadDelayedScripts(pmDelayedScripts.normal),await pmLoadDelayedScripts(pmDelayedScripts.defer),await pmLoadDelayedScripts(pmDelayedScripts.async),await pmTriggerEventListeners(),document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),window.dispatchEvent(new Event("perfmatters-allScriptsLoaded")),pmWaitForPendingClicks().then(()=>{pmReplayClicks()})}function pmDelayEventListeners(){let e={};function t(t,n){function r(n){return e[t].delayedEvents.indexOf(n)>=0?"perfmatters-"+n:n}e[t]||(e[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},delayedEvents:[]},t.addEventListener=function(){arguments[0]=r(arguments[0]),e[t].originalFunctions.add.apply(t,arguments)},t.removeEventListener=function(){arguments[0]=r(arguments[0]),e[t].originalFunctions.remove.apply(t,arguments)}),e[t].delayedEvents.push(n)}function n(e,t){let n=e[t];Object.defineProperty(e,t,{get:n||function(){},set:function(n){e["perfmatters"+t]=n}})}t(document,"DOMContentLoaded"),t(window,"DOMContentLoaded"),t(window,"load"),t(window,"pageshow"),t(document,"readystatechange"),n(document,"onreadystatechange"),n(window,"onload"),n(window,"onpageshow")}function pmDelayJQueryReady(){let e=window.jQuery;Object.defineProperty(window,"jQuery",{get:()=>e,set(t){if(t&&t.fn&&!jQueriesArray.includes(t)){t.fn.ready=t.fn.init.prototype.ready=function(e){pmDOMLoaded?e.bind(document)(t):document.addEventListener("perfmatters-DOMContentLoaded",function(){e.bind(document)(t)})};let n=t.fn.on;t.fn.on=t.fn.init.prototype.on=function(){if(this[0]===window){function e(e){return e=(e=(e=e.split(" ")).map(function(e){return"load"===e||0===e.indexOf("load.")?"perfmatters-jquery-load":e})).join(" ")}"string"==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=e(arguments[0]):"object"==typeof arguments[0]&&Object.keys(arguments[0]).forEach(function(t){delete Object.assign(arguments[0],{[e(t)]:arguments[0][t]})[t]})}return n.apply(this,arguments),this},jQueriesArray.push(t)}e=t}})}function pmProcessDocumentWrite(){let e=new Map;document.write=document.writeln=function(t){var n=document.currentScript,r=document.createRange();let a=e.get(n);void 0===a&&(a=n.nextSibling,e.set(n,a));var i=document.createDocumentFragment();r.setStart(i,0),i.appendChild(r.createContextualFragment(t)),n.parentElement.insertBefore(i,a)}}function pmSortDelayedScripts(){document.querySelectorAll("script[type=pmdelayedscript]").forEach(function(e){e.hasAttribute("src")?e.hasAttribute("defer")&&!1!==e.defer?pmDelayedScripts.defer.push(e):e.hasAttribute("async")&&!1!==e.async?pmDelayedScripts.async.push(e):pmDelayedScripts.normal.push(e):pmDelayedScripts.normal.push(e)})}function pmPreloadDelayedScripts(){var e=document.createDocumentFragment();[...pmDelayedScripts.normal,...pmDelayedScripts.defer,...pmDelayedScripts.async].forEach(function(t){var n=t.getAttribute("src");if(n){var r=document.createElement("link");r.href=n,"module"==t.getAttribute("data-perfmatters-type")?r.rel="modulepreload":(r.rel="preload",r.as="script"),e.appendChild(r)}}),document.head.appendChild(e)}async function pmLoadDelayedScripts(e){var t=e.shift();return t?(await pmReplaceScript(t),pmLoadDelayedScripts(e)):Promise.resolve()}async function pmReplaceScript(e){return await pmNextFrame(),new Promise(function(t){let n=document.createElement("script");[...e.attributes].forEach(function(e){let t=e.nodeName;"type"!==t&&("data-perfmatters-type"===t&&(t="type"),n.setAttribute(t,e.nodeValue))}),e.hasAttribute("src")?(n.addEventListener("load",t),n.addEventListener("error",t)):(n.text=e.text,t()),e.parentNode.replaceChild(n,e)})}async function pmTriggerEventListeners(){pmDOMLoaded=!0,await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-readystatechange")),await pmNextFrame(),document.perfmattersonreadystatechange&&document.perfmattersonreadystatechange(),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-load")),await pmNextFrame(),window.perfmattersonload&&window.perfmattersonload(),await pmNextFrame(),jQueriesArray.forEach(function(e){e(window).trigger("perfmatters-jquery-load")});let e=new Event("perfmatters-pageshow");e.persisted=window.pmPersisted,window.dispatchEvent(e),await pmNextFrame(),window.perfmattersonpageshow&&window.perfmattersonpageshow({persisted:window.pmPersisted})}async function pmNextFrame(){return new Promise(function(e){requestAnimationFrame(e)})}function pmReplayClicks(){window.removeEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.removeEventListener("mousedown",pmTouchStartHandler),pmInterceptedClicks.forEach(e=>{e.target.outerHTML===pmClickTarget&&e.target.dispatchEvent(new MouseEvent("click",{view:e.view,bubbles:!0,cancelable:!0}))})}function pmWaitForPendingClicks(){return new Promise(e=>{window.pmIsClickPending?pmPendingClickFinished=e:e()})}function pmPendingClickStarted(){window.pmIsClickPending=!0}function pmPendingClickFinished(){window.pmIsClickPending=!1}function pmClickHandler(e){e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmInterceptedClicks.push(e),e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),pmPendingClickFinished()}function pmTouchStartHandler(e){"HTML"!==e.target.tagName&&(pmClickTarget||(pmClickTarget=e.target.outerHTML),window.addEventListener("touchend",pmTouchEndHandler),window.addEventListener("mouseup",pmTouchEndHandler),window.addEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.addEventListener("mousemove",pmTouchMoveHandler),e.target.addEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"onclick","pm-onclick"),pmPendingClickStarted())}function pmTouchMoveHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler),e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmPendingClickFinished()}function pmTouchEndHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler)}function pmRenameDOMAttribute(e,t,n){e.hasAttribute&&e.hasAttribute(t)&&(event.target.setAttribute(n,event.target.getAttribute(t)),event.target.removeAttribute(t))}window.pmIsClickPending=!1,window.addEventListener("pageshow",e=>{window.pmPersisted=e.persisted}),pmUserInteractions.forEach(function(e){window.addEventListener(e,pmTriggerDOMListener,{passive:!0})}),pmDelayClick&&(window.addEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.addEventListener("mousedown",pmTouchStartHandler)),document.addEventListener("visibilitychange",pmTriggerDOMListener);var pmeDeviceMode,pmeAnimationSettingsKeys,pmeCurrentAnimation;function pmeAnimation(){(pmeDeviceMode=document.createElement("span")).id="elementor-device-mode",pmeDeviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(pmeDeviceMode),requestAnimationFrame(pmeDetectAnimations)}function pmeDetectAnimations(){pmeAnimationSettingsKeys=pmeListAnimationSettingsKeys(getComputedStyle(pmeDeviceMode,":after").content.replace(/"/g,"")),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(a=>{let b=a.getBoundingClientRect();if(b.bottom>=0&&b.top<=window.innerHeight)try{pmeAnimateElement(a)}catch(c){}})}function pmeAnimateElement(a){let b=JSON.parse(a.dataset.settings),d=b._animation_delay||b.animation_delay||0,c=b[pmeAnimationSettingsKeys.find(a=>b[a])];if("none"===c)return void a.classList.remove("elementor-invisible");a.classList.remove(c),pmeCurrentAnimation&&a.classList.remove(pmeCurrentAnimation),pmeCurrentAnimation=c;let e=setTimeout(()=>{a.classList.remove("elementor-invisible"),a.classList.add("animated",c),pmeRemoveAnimationSettings(a,b)},d);window.addEventListener("perfmatters-startLoading",function(){clearTimeout(e)})}function pmeListAnimationSettingsKeys(b="mobile"){let a=[""];switch(b){case"mobile":a.unshift("_mobile");case"tablet":a.unshift("_tablet");case"desktop":a.unshift("_desktop")}let c=[];return["animation","_animation"].forEach(b=>{a.forEach(a=>{c.push(b+a)})}),c}function pmeRemoveAnimationSettings(a,b){pmeListAnimationSettingsKeys().forEach(a=>delete b[a]),a.dataset.settings=JSON.stringify(b)}document.addEventListener("DOMContentLoaded",pmeAnimation)</script></body>
</html>
5. Mengarahkan form pada method
Memberi nama form adalah tahap kelima untuk upload file di CodeIgniter. Kamu bisa memberi nama “Berkas” dan mengarahkannya ke method aksi_upload pada controller upload. Berikut contohnya.
public function aksi_upload(){
$config['upload_path'] = './gambar/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 100;
$config['max_width'] = 1024;
$config['max_height'] = 768;
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('berkas')){
$error = array('error' => $this->upload->display_errors());
$this->load->view('v_upload', $error);
}else{
$data = array('upload_data' => $this->upload->data());
$this->load->view('v_upload_sukses', $data);
}
}
Proses paling penting pada tahap ini ada di bagian method aksi_upload karena hal tersebut akan menjadi pengatur dari cara unggah file di CodeIgniter.
$config['upload_path'] = './gambar/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 100;
$config['max_width'] = 1024;
$config['max_height'] = 768;
6. Menetapkan batasan ukuran dan ekstensi file
Kamu juga bisa melakukan pembatasan terhadap ukuran file dan ekstensi dokumen yang bisa diunggah pada CodeIgniter. Pengaturannya dapat dilakukan pada:
$config['allowed_types'] = 'gif|jpg|png'; // file yang di perbolehkan
$config['max_size'] = 100; // maksimal ukuran
$config['max_width'] = 1024; //lebar maksimal
$config['max_height'] = 768; //tinggi maksimal
7. Kode syntax
Setelah membuat folder, perhatikan syntax pada method aksi_upload di bawah ini.
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('berkas')){
$error = array('error' => $this->upload->display_errors());
$this->load->view('v_upload', $error);
}else{
$data = array('upload_data' => $this->upload->data());
$this->load->view('v_upload_sukses', $data);
}
Jika pengaturan yang telah dibuat tidak muncul atau terdapat error, maka kamu bisa mengatasinya dengan cara berikut ini.
$error = array('error' => $this->upload->display_errors());
$this->load->view('v_upload', $error);
Jika telah berhasil diunggah, kamu bisa memasukkannya ke dalam variabel $data untuk proses parsing di view v_upload_sukses.php melalui application/view/v_upload_sukses.
<html>
<head>
<title>sobatjagoan.com<</title>
</head>
<body>
<center><h1>Membuat Upload File Dengan CodeIgniter | sobatjagoan.com</h1></center>
<ul>
<?php foreach ($upload_data as $item => $value):?>
<li><?php echo $item;?>: <?php echo $value;?></li>
<?php endforeach; ?>
</ul>
</body>
</html>
Itu dia tutorial cara upload file pada CodeIgniter yang bisa dilakukan dengan mudah. Yuk, simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia, ya. Jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting untuk bantuan lebih lanjut melalui Live Chat.