Membuat unggah File atau Gambar Pada Sebuah Formulir

Membuat unggah File atau Gambar Pada Sebuah Formulir

Fitur untuk unggah file atau gambar merupakan salah satu kebutuhan penting pada sebuah website, ini karena pada beberapa formulir sering kali terdapat field yang mengharuskan pengguna untuk mengunggah file terutama sebuah photo. Untuk Membuat unggah File atau Gambar Pada Sebuah Formulir itu sendiri meskipun terlihat mudah dan sederhana, namun bagi beberapa pengelola atau developer pemula(maaf) tidaklah sesederhana dan semudah yang dibayangkan. Pada dasarnya untuk membuat field yang memiliki tombol browse dan unggah memang cukup mudah, anda hanya perlu merubah type pada field terkait menjadi type="file". Maka secara otomatis field yang diberikan type="file" tersebut akan dilengkapi dengan tombol browse file. Tapi apakah file yang diunggah melalui field atau formulir tersebut benar-benar dapat dieksekusi dan di unggah pada direktori website? Ternyata tidak...! Mengapa tidak...? Karena anda tidak menambahkan perintah untuk mengidentifikasi dan mengeksekusi file yang anda unggah.

Sebelum melangkah lebih lanjut, akan lebih baik jika anda mengetahui keuntungan dan kelemahan fitur unggah gambar yang ingin anda buat.

Keuntungan fitur unggah file pada formulir: Jelas keuntunganya adalah pengguna dapat dengan mudah melakukan unggah file yang diminta pengelola website melalui formulir terkait.

Kelemahan fitur unggah file pada formulir: Kelemahan fitur unggah file adalah meningkatnya ancaman keamanan website yang anda kelola. Karena bisa saja seseorang mengunggah file untuk tujuan yang tidak baik terhadap website yang anda kelola. Mereka adalah orang-orang yang kurang bertanggung jawab yang dapat merugikan orang lain oleh perbuatan yang mereka lakukan, sebut saja mereka adalah cracker atau hacker(meskipun sesungguhnya keduanya adalah berbeda).

Berikut adalah cara agar field pada formulir anda dapat melakukan eksekusi file yang di unggah.

Sebagai contoh, dalam hal ini saya akan menambahkan dan melengkapi fitur unggah gambar pada komponen testimonial yang telah kita buat bersama-sama, melalui artikel sebelumnya. Bagi anda yang belum membaca artikel tersebut, maka sebaiknya anda membaca artikel sebelumnya tentang "Membuat Komponen dan widget Testimonial". Agar anda tidak mengalami tingkatan terlalu curam dalam mengikuti artikel yang saya buat ini!

Membuat unggah File atau Gambar Pada Formulir Testimonial

Silahkan buka file testimonnial.php pada root_dir/po-content/component/testimonial/testimonial.php
Berikut adalah script yang terdapat pada file testimonial.php tersebut:

<?php
/*
 *
 * - PopojiCMS Front End File
 *
 * - File : testimonial.php
 * - Version : 1.0
 * - Author : Clark
 * - License : MIT License
 *
 *
 * Ini adalah file php yang di gunakan untuk menangani proses di bagian depan untuk halaman testimonial.
 * This is a php file for handling front end process for testimonial page.
 *
*/

/**
 * Router untuk menampilkan request halaman testimonial.
 *
 * Router for display request in testimonial page.
 *
*/
$router->match('GET|POST', '/testimonial', function() use ($core, $templates) {
  $alertmsg = '';
  $lang = $core->setlang('testimonial', WEB_LANG);
  if (!empty($_POST)) {
    if (!empty($_POST['name'])) {
      $core->poval->filter_rules(array(
        'name' => 'trim|sanitize_string',
        'job' => 'trim|sanitize_string',
        'testimoni' => 'trim|sanitize_string',
        'rating' => 'trim|sanitize_string',
        'url' => 'trim|sanitize_string',
        'date' => 'trim|sanitize_string',
        'active' => 'trim|sanitize_string',
      ));
      $validated_data = $core->poval->run($_POST);
      if ($validated_data === false) {
        $alertmsg = '<div id="contact-form-result">
          <div class="alert alert-warning" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Error! Please check again before submit.
          </div>
        </div>';
      } else {
      $data = array(
        'name' => $_POST['name'],
        'seotitle' => $core->postring->seo_title($_POST['name']),
        'job' => $_POST['job'],
        'testimoni' => $_POST['testimoni'],
        'rating' => $_POST['rating'],
        'url' => $_POST['url'],
        'date' => $_POST['date'],
      );
      $query = $core->podb->insertInto('testimonial')->values($data);
      $query->execute();
      unset($_POST);
      $alertmsg = '<div id="contact-form-result">
        <div class="alert alert-success" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          Thank you, your data successfully submited.
        </div>
      </div>';
    }
    } else {
      $alertmsg = '<div class="alert alert-warning" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        Error! '.ucfirst('name').' is required.
      </div>';
    }
  }
  $info = array(
    'page_title' => 'Testimonial',
    'page_desc' => 'Testimonial',
    'page_key' => 'Testimonial',
    'social_mod' => 'Testimonial',
    'social_name' => $core->posetting[0]['value'],
    'social_url' => $core->posetting[1]['value'].'/testimonial',
    'social_title' => 'Testimonial',
    'social_desc' => 'Testimonial',
    'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
    'page' => '1',
    'alertmsg' => $alertmsg
  );
  $adddata = array_merge($info, $lang);
  $templates->addData(
    $adddata
  );
  echo $templates->render('testimonial', compact('testimonial', 'lang'));
});

/**
 * Router untuk menampilkan request halaman testimonial.
 *
 * Router for display request in testimonial page.
 *
*/
$router->match('GET|POST', '/testimonial/page/(d+)', function($page) use ($core, $templates) {
  $alertmsg = '';
  $lang = $core->setlang('testimonial', WEB_LANG);
  if (!empty($_POST)) {
    if (!empty($_POST['name'])) {
      $core->poval->filter_rules(array(
        'name' => 'trim|sanitize_string',
        'job' => 'trim|sanitize_string',
        'testimoni' => 'trim|sanitize_string',
        'rating' => 'trim|sanitize_string',
        'url' => 'trim|sanitize_string',
        'picture' => 'trim|sanitize_string',
        'date' => 'trim|sanitize_string',
        'active' => 'trim|sanitize_string',
      ));
      $validated_data = $core->poval->run($_POST);
      if ($validated_data === false) {
        $alertmsg = '<div id="contact-form-result">
          <div class="alert alert-warning" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Error! Please check again before submit.
          </div>
        </div>';
      } else {
        $data = array(
          'name' => $_POST['name'],
          'seotitle' => $core->postring->seo_title($_POST['name']),
          'job' => $_POST['job'],
          'testimoni' => $_POST['testimoni'],
          'rating' => $_POST['rating'],
          'url' => $_POST['url'],
          'picture' => $_POST['picture'],
          'date' => $_POST['date'],
        );
        $query = $core->podb->insertInto('testimonial')->values($data);
        $query->execute();
        unset($_POST);
        $alertmsg = '<div id="contact-form-result">
          <div class="alert alert-success" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Thank you, your data successfully submited.
          </div>
        </div>';
      }
    } else {
      $alertmsg = '<div class="alert alert-warning" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        Error! '.ucfirst('name').' is required.
      </div>';
    }
  }
  $info = array(
    'page_title' => 'Testimonial',
    'page_desc' => 'Testimonial',
    'page_key' => 'Testimonial',
    'social_mod' => 'Testimonial',
    'social_name' => $core->posetting[0]['value'],
    'social_url' => $core->posetting[1]['value'].'/testimonial',
    'social_title' => 'Testimonial',
    'social_desc' => 'Testimonial',
    'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
    'page' => $page,
    'alertmsg' => $alertmsg
  );
  $adddata = array_merge($info, $lang);
  $templates->addData(
    $adddata
  );
  echo $templates->render('testimonial', compact('testimonial', 'lang'));
});


/**
 * Router untuk menampilkan request halaman detailtestimonial.
 *
 * Router for display request in detailtestimonial page.
 *
 * $seotitle = string [a-z0-9_-]
*/
$router->match('GET|POST', '/detailtestimonial/([a-z0-9_-]+)', function($seotitle) use ($core, $templates) {
  $lang = $core->setlang('testimonial', WEB_LANG);
  $testimonial = $core->podb->from('testimonial')->where('seotitle', $seotitle)->limit(1)->fetch();
  if ($testimonial) {
    $info = array(
      'page_title' => $testimonial['name'],
      'page_desc' => $core->posetting[2]['value'],
      'page_key' => $core->posetting[3]['value'],
      'social_mod' => $lang['front_testimonial'].' '.$testimonial['name'],
      'social_name' => $core->posetting[0]['value'],
      'social_url' => $core->posetting[1]['value'].'/detailtestimonial/'.$testimonial['seotitle'],
      'social_title' => $core->posetting[0]['value'],
      'social_desc' => $core->posetting[2]['value'],
      'social_img' => BASE_URL.'/'.DIR_CON.'/uploads/medium/medium_'.$testimonial['picture'],
    );
    $adddata = array_merge($info, $lang);
    $templates->addData(
      $adddata
    );
    echo $templates->render('detailtestimonial', compact('lang', 'testimonial'));
  } else {
    $info = array(
      'page_title' => $lang['front_testimonial_not_found'],
      'page_desc' => $core->posetting[2]['value'],
      'page_key' => $core->posetting[3]['value'],
      'social_mod' => $lang['front_testimonial'],
      'social_name' => $core->posetting[0]['value'],
      'social_url' => $core->posetting[1]['value'],
      'social_title' => $lang['front_testimonial_not_found'],
      'social_desc' => $core->posetting[2]['value'],
      'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png'
    );
    $adddata = array_merge($info, $lang);
    $templates->addData(
      $adddata
    );
    echo $templates->render('404', compact('lang'));
  }
});

Dibawah

poval->filter_rules(array());

Anda harus menambahkan kode script yang berfungsi untuk mengidentifikasi, melakukan validasi, dan melakukan eksekusi untuk unggah gambar. Berikut adalah kode script tersebut:

if(!empty($_FILES['picture']['tmp_name'])){
  $picture_name_exp = explode('.', $_FILES['picture']['name']);
  $picture_name = $core->postring->seo_title($picture_name_exp[0]);
  $file_exists = DIR_CON.'/uploads/testimonial/'.$picture_name.'.jpg';
  if (file_exists($file_exists)){
    $datapic = array(
      'picture' => $picture_name.'.jpg'
    );
  } else {
    $upload = new PoUpload($_FILES['picture']);
    if ($upload->uploaded) {
      $upload->file_new_name_body = $picture_name;
      $upload->image_convert = 'jpg';
      $upload->image_resize = true;
      $upload->image_x = 900;
      $upload->image_y = 600;
      $upload->image_ratio = true;
      $upload->process(DIR_CON.'/uploads/testimonial/');
      if ($upload->processed) {
        $datapic = array(
          'picture' => $upload->file_dst_name
        );
        $upload_medium = new PoUpload($_FILES['picture']);
        if ($upload_medium->uploaded) {
          $upload_medium->file_new_name_body = 'medium_'.$picture_name;
          $upload_medium->image_convert = 'jpg';
          $upload_medium->image_resize = true;
          $upload_medium->image_x = 640;
          $upload_medium->image_y = 426;
          $upload_medium->image_ratio = true;
          $upload_medium->process(DIR_CON.'/uploads/testimonial/medium/');
          if ($upload_medium->processed) {
            $upload_thumb = new PoUpload($_FILES['picture']);
            if ($upload_thumb->uploaded) {
              $upload_thumb->file_new_name_body = $picture_name;
              $upload_thumb->image_convert = 'jpg';
              $upload_thumb->image_resize = true;
              $upload_thumb->image_x = 122;
              $upload_thumb->image_y = 91;
              $upload_thumb->image_ratio = true;
              $upload_thumb->process(DIR_CON.'/thumbs/testimonial/');
              if ($upload_thumb->processed) {
                $upload_thumb->clean();
                $upload_medium->clean();
                $upload->clean();
              }
            }
          }
        }
      } else {
        $datapic = array();
      }
    }
  }
} else {
  $datapic = array();
}

Tambahkan kode script tersebut diatas

$validated_data = $core->poval->run($_POST);

Setelah anda menambahkan script kode diatas anda harus menambahkan dan melakukan sedikit kode dibawahnya, tepatnya pada bagian eksekusi formulir berikut:

$query = $core->podb->insertInto('testimonial')->values($data);
$query->execute();
unset($_POST);
$alertmsg = '<div id="contact-form-result">
  <div class="alert alert-success" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Thank you, your data successfully submited.
  </div>
</div>';

Tambah sebaris kode dan lakukan sedikit perubahan script diatas menjadi seperti berikut:

$datafinal = array_merge($data, $datapic);
$query = $core->podb->insertInto('testimonial')->values($datafinal);
$query->execute();
unset($_POST);
$alertmsg = '<div id="contact-form-result">
  <div class="alert alert-success" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Thank you, your data successfully submited.
  </div>
</div>';

Kita telah membuat dan menambahkan script kode untuk melakukan eksekusi file yang diunggah melalui formulir testimonial. Berikutnya adalah melakukan penyesuaian formulir itu sendiri, berikut adalah formulir testimonial yang telah kita buat sebelumnya melalui pembuatan komponen testimonial:

<?=htmlspecialchars_decode($this->e($alertmsg));?>
<form name="form-testimonial" action="<?=BASE_URL;?>/testimonial" method="post">
  <div class="col-md-4">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" class="form-control" id="name" value="<?=(isset($_POST['name']) ? $_POST['name'] : '');?>" placeholder="Name" required/>
    </div
    <div class="form-group">
      <label for="url">Website</label>
      <input type="text" name="url" class="form-control" id="url" value="<?=(isset($_POST['url']) ? $_POST['url'] : '');?>" placeholder="https://your-domain.com" required/>
    </div>
    <div class="form-group">
      <label for="picture">Picture</label><br/>
      <div class="input-group">
        <input type="text" name="picture" class="form-control" id="picture" value="<?=(isset($_POST['picture']) ? $_POST['picture'] : '');?>" placeholder="picture"/>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="form-group">
      <label for="testimoni">Testimoni</label>
      <textarea name="testimoni" class="form-control" id="testimoni" rows="3" placeholder="Testimoni" style="width:100%; height:250px;" required><?=(isset($_POST['testimoni']) ? $_POST['testimoni'] : '');?></textarea>
    </div>
    <button type="submit" class="button button-3d nomargin" style="float: right;">Submit</button>
  </div>
</form>

Pada tahap pertama kita harus merubah dan menambahkan kode pada form tersebut menjadi:

<form enctype="multipart/form-data" name="form-testimonial" action="<?=BASE_URL;?>/testimonial" method="post">
</form>

Penambahan kode: enctype="multipart/form-data" adalah untuk formulir yang dilengkapi dengan field untuk unggah file.

Pada tahap kedua kita harus merubah field unggah gambar itu sendiri menjadi seperti berikut:

<input title="Search File" type="file" name="picture" class="form-control" id="picture" value="<?=(isset($_POST['picture']) ? $_POST['picture'] : '');?>" placeholder="picture" class="filestyle" data-buttonText="<?=$this->e($action_7);?>" style="padding:0 0 23px 0;" required/>

Perubahan pada type="text" menjadi type="file" adalah untuk field yang berfungsi untuk unggah file, baik file gambar atau file dokummen lain. Dengan merubah type="text" menjadi type="file", maka field terkait akan dilengkapii dengan tombol browse file. Tambahkan juga "required" untuk mengharuskan field diinput file gambar seperti yang diinginkan.

Sehingga formulir testimonial secara keseluruhan menjadi seperti berikut:

<?=htmlspecialchars_decode($this->e($alertmsg));?>
<form enctype="multipart/form-data" name="form-testimonial" action="<?=BASE_URL;?>/testimonial" method="post">
  <div class="col-md-4">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" class="form-control" id="name" value="<?=(isset($_POST['name']) ? $_POST['name'] : '');?>" placeholder="Name" required/>
    </div>
    <div class="form-group">
      <label for="url">Website</label>
      <input type="text" name="url" class="form-control" id="url" value="<?=(isset($_POST['url']) ? $_POST['url'] : '');?>" placeholder="https://your-domain.com" required/>
    </div>
    <div class="form-group">
      <label for="picture">Picture</label><br/>
      <!-- a href="#" data-toggle="modal" data-target=".login-modal" class="btn btn-default btn-small" style="color:#5775BF;border:1px #eee solid;"><b><i>Unggah Photo</i></b></a -->
      <div class="input-group">
        <input title="Search File" type="file" name="picture" class="form-control" id="picture" value="<?=(isset($_POST['picture']) ? $_POST['picture'] : '');?>" placeholder="picture" class="filestyle" data-buttonText="<?=$this->e($action_7);?>" style="padding:0 0 23px 0;" required/>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="form-group">
      <label for="testimoni">Testimoni</label>
      <textarea name="testimoni" class="form-control" id="testimoni" rows="3" placeholder="Testimoni" style="width:100%; height:250px;" required><?=(isset($_POST['testimoni']) ? $_POST['testimoni'] : '');?></textarea>
    </div>
    <button type="submit" class="button button-3d nomargin" style="float: right;">Submit</button>
  </div>
</form>

Selamat mencoba dan mudah-mudahan anda berhasil!
Jika dalamm praktik anda mengalami kegagalan dan berhadapan dengan error, silahkan buka sebuah diskusi melalui formulir komentar dibawah. Hanya lakukan diskusi melalui formulir komentar dibawah! Pertanyaan terkait artikel ini melalui media lain tidak dapat saya tanggapi!
Kontribusi dan kerjasama dengan membagikan artikel ini akan sangat saya hargai! Dan untuk itu saya ucapkan terimakasih.
Dengan demikian maka pembuatan komponen testimonial telah selesai. Semoga bermanfaat dan dapat membantu anda para pembaca setia multibbisnisindo. Dikusi atau pertanyaan terkait artikel ini hanya saya tanggapi melalui formulir komentar, bukan melalui media lain. Terimakasih atas partisipasi dan dukungan anda dengan membagikan link artikel ini, atau melalui tombol share disamping.