Browsed by
Author: Muhammad Hendra

Membuat form html posting ke telegram

Membuat form html posting ke telegram

Mungkin bro pernah mengalami ingin membuat form di html dan tanpa ribet-ribet ga pengen bikin database buat nampung form tersebut.
Selain menampung ke database bisa Mysql – MariaDB atau apa aja lah… hasil form juga ribet kan mesti diperiksa manual dengan membuka aplikasi dulu…

Nah sekarang kan zamannya keterbukaan (open access) kenapa ga memanfaatin layanan pihak ketiga aja ya…
Layanan pihak ketiga bisa menggunakan misalnya emailing dengan memanfaatkan php_mailer dari php atau layanan lainnya seperti api dari telegram atau  WA (ga terbuka banget sih WA mengenai keterbukaan akses mereka jadi ini ga rekomended).

Pada awalnya saya udah memanfaatkan email sistem (gmail) untuk menampung dan menerima hasil isian form HTML namun sepertinya layanan gmail cukup ketat dan berdasarkan pengalaman apabila anda merubah hosting maka tentunya akan diblokir oleh Google terhadap akses ke pengiriman emailnya.. (walah repot jadinya ada klien menuliskan pesan ternyata ga sampai-sampai deh). Pemblokiran akses pengiriman email ini tidak hanya apabila ada perubahan IP namun  dari aktivitas yang mencurigakan oleh Google. Dengan menggunkan sistem emailing ini sepertinya kurang handal diterapkan.

Artikel ini akan membahas metode kedua yakni memanfaatkan Api (Application Programming Interface) yang disediakan oleh telegram melalui bot.

untuk menerapkannya anda bisa baca dulu referensi bot telegram disini
Perlu diperhatikan bahwa metode akses API disini menggunakan polling bukan webhooks… nah apa sih perbedaaan dua metode tersebut, akang yohanes sudah mengajari kita disini untuk lebih jelasnya buka ya guys

Berikut langkah perlangkahnya… tenang aja guys ga rumit ko….

1.  Buat dulu botnya, minta permisi dulu sama bosnya bot alias BotFather caranya :

2. ketikan /start pada BotFather

3. Buat bot baru …. lihat dibawah ini perintahnya :

4. Sekarang tambahkan bot tadi sebagai teman anda ya…

5. Ketikkan perintah berikut ini :

6. Sekarang bisa deh kita akses pesan tersebut yang diterima oleh bot dengan arahkan browser anda ke url ini :
https://api.telegram.org/botTokenBotAnda/getUpdates

makan akan menghasilkan data json sebagai berikut :

{"ok":true,"result":[{"update_id":301413893,
"message":{"message_id":3,"from":{"id":xxxxxx,"is_bot":false,"first_name":"muhammad","last_name":"hendra","username":"muhammad_hendra","language_code":"en"},"chat":{"id":xxxxxx,"first_name":"muhammad","last_name":"hendra","username":"muhammad_hendra","type":"private"},"date":1510796658,"text":"fafafa"}}

nah yang perlu bro perhatikan dan simpan adalah nilai chat_id di data json diatas. Dari nilai chat_id tersebutlah kita bisa mengkoneksikan form html kita dengan telegram.

sekarang tinggal tuliskan koding php berikut :

Koding php telegram api
 
  1. //File Name telegram_post.php
  2. $email = $_POST['email'];
  3. $pesan = $_POST['pesan'];
  4. $date = date('d F Y').'%0A';
  5. $message = $date.'Bro ada pesan ni di share-system.com dari '.$email.' : %0A'.$pesan.'';
  6. $api = 'https://api.telegram.org/botTokenBotAnda/sendMessage?chat_id=xxxx&text='.$message.'';
  7. $ch = curl_init($api);
  8. curl_setopt($ch, CURLOPT_HEADER, false);
  9. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  10. curl_setopt($ch, CURLOPT_POST, 1);
  11. curl_setopt($ch, CURLOPT_POSTFIELDS, ($params));
  12. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  13. $result = curl_exec($ch);
  14. curl_close($ch);
  15. var_dump($api);

Jangan lupa ya guys buat form HTMLnya… dan jangan lupa coba klo ada error silahkan komentar ya.. biar kita sama-sama diskusikan (pelit coding  😛 )

oke guys karena gua lagi baik nih form htmlnya… ya… :

 
 
  1. <form action="telegram_post.php" method="post" data-form-title="MESSAGE" id="frmpesan">
  2. <input type="hidden" value="nWmyXojkFcrwN18JgVE77mVh1UhMHd/Lk3kD63XTVSh/kwfJk0usXWaWvuX4Rwwk5KB0TiZ/FxIpTdXPw7KRS6KDW3m149e/aSLWs6wi97Sm2e13G9wjVfLESYXg0SvX" data-form-email="true">
  3. <div class="form-group" align="center" style="margin-bottom: 0; padding-top: 8px;">
  4. <h5>Kontak Kami Sekarang Juga</h5>
  5. </div>
  6. <div class="form-group">
  7. <label class="form-control-label" for="contacts3-2l-email">Email<span class="form-asterisk">*</span></label>
  8. <input type="email" class="form-control input-sm input-inverse" name="email" data-form-field="Email" id="contacts3-2l-email" >
  9. </div>
  10. <div class="form-group">
  11. <label class="form-control-label" for="contacts3-2l-message">Pesan<span class="form-asterisk">*</span></label>
  12. <textarea class="form-control input-sm input-inverse" name="message" data-form-field="Message" rows="5" id="contacts3-2l-message"></textarea>
  13. </div>
  14. <div><a href="#" class="btn btn-sm btn-black" id="btnkirim" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Sending Email">Kirim Pesan!</a></div>
  15. </form>

oke guys gampang kan…

Benchmark Sublime Text 3 vs Visual Code

Benchmark Sublime Text 3 vs Visual Code

 

Sebelum kita head to head antara ST3 dan vscode perlu ada pengantar dulu guy, skripsi aja klo ga ada bab 1 dan 3 ga bakal nyampe ke bab 4 lho. Ingikut deh ajaran dosen terdahulu mesti ada pengatar biar asik… hehe…

Sublime Text 3

Sublime text  dikembangkan merupakan editor source code proprietary sejak 18 januari 2008 lalu yang dikembangkan dengan menggunakan Bahasa Pyhton. ST ini mendukung banyak Bahasa pemograman dari bahasa sql, css, php, javascript, java, c++ dan banyak lagi. . Yang paling menarik dari ST3 adalah adanya ekosistem plugin yang sangat berjibun yang dapat dimanfaatkan dengan adanya package control. Namun sayangnya package control ini tidak ada secara default jadi harus di install secara manual lho. Klo pengen tahu plugin apa saja yang perlu bisa cek pada artikel saya yang dituliskan pada blog ini ya guys.

Daftar plugin wajib di Sublime Text 3

.

Sublime text ini karena bersifat proprietary bukan open source (CMIIW) sehingga pengembangannya bukan pada komunitas tapi pada perusahaan  atau developer yang menjual code editor ini yakni Jon Skinner. Dampaknya adalah pengembangannya terkesan lambat klo pengen bukti yang versi 3 aja (Sublime text 3) sampai artikel ini ditulis masih aja versi BETA alias belum stable sejak di rilis pertama dari tanggal 29 January 2013.

Sublime Text 3 is currently in beta. The latest build is 3126.

Last develop :  23 September 2016

 

liat deh di halaman github mereka ga ada source code untuk ST3 ini, mana ada tuh source code mereka dirilis :

 

Vscode

Vs code atau Visual Studio Code merupakan editor koding atau source code editor yang dibangun dan dikembangkan oleh Microsoft diperuntukkan bagi berbagai platform OS. VScode dibuat dengan berdasarkan Electron. Suatu Framework yang digunakan untuk men deploy node.js.

VsCode diumumkan pada tanggal 29 April 2015 oleh Microsoft dan kemudian dirilis dalam lisensi MIT pada tanggan 18 November 2015 yang saat itu di posting di halaman github sebagai open source pada tanggal 14 April 2016.

ini nih halaman github mereka, bisa dilihat berapa banyak yang berkontribusi dalam mengembangkan app ini dan secara rentang waktu app ini pengembangannya sangat aktif (12 Juli 2017).

 

Time to benchmark, let’s go

Jadi benchmark ini tentang closed source dan open source. Waduh terlalu frontal guy.. tujuan artikel ini bukan membandingkan closed source source editor dan open source source editor loh… terlalu luas jika kita membandingkan dua konsep tersebut. Artikel ini cukup agar menjadi referensi dan sebagai catatan artikel ini hanya relevan untuk versi yang penulis tulis saat ini ya ST3 build version 3126 dan Vscode 1.13. dan benchmark ini hanya membahas yang penulis pahami untuk membandingkan tingkat kecepatan dan konsumsi resource dua app ini dengan menggunakan app windows ga tau klo di linux atau MacOS dan ga tau deh klo pakai metode lain yang mungkin pembaca pahami lebih relevan dalam membenchmark.

Ingat ya guys tulisan ini tidak membandingkan yang mana yang paling bagus baik dari segi fitur dan lain sebagainya tapi hanya tulisan pembanding kecepatan saja.

Sebelum kita lanjut melakukan benchmark maka agar fair kita perlu menonaktifkan seluruh plugin yang penulis pasang pada aplikasi sebelum menonaktifkan perlu dulu diketahui paket apa aja yang terpasang berikut paket yang terpasang dan dijelaskan sekalian cara menonaktifkan paket yang ada :

Cara menonaktifkan paket di sublime text 3 yakni :

Gambar :

Letak file sublime.settings : C:\Users\yourName\AppData\Roaming\Sublime Text 3\Packages\User

Screenshot melihat paket aktif

Screen shot setting di ignored package

jadinya begini :

Restart, periksa apakah masih ada paket yang terload misalnya dengan menekan tombol kombinasi ctrl+shift+p . jika tidak ada perintah misalnya kita ketikkan install maka jelas package control telah non aktif.

 

Nah sekarang saatnya kita lakukan Benchmark dengan melihat penggunaan memory dan cpu (screenshot), metode benchmark sangat sederhana cukup dilakukan melalui monitoring task manager :

Dapat dilihat bahwa VScode sangat kecil dalam menggunakan konsumsi memory hanya sekitar 15 MB lebih dikit dan ST3 waduh.. .berapa kali lipatnya Vscode dalam memakai sumber daya 51Mb guys… keterlaluan kau ST3 jadi gara2 kau aku harus upgrade RAM.. wkwkwkw.

Selesai guy. sudah siap move on nih.. hehehe… klo belum siap gpp saya juga ko.. hehehe….

Give your appreciation please share this article bro  😀 Jangan lupa diskusikan apabila ada yang tidak jelas di kolom komentar dibawah ini.

 

Cara membuat floating label dengan javascript

Cara membuat floating label dengan javascript

Pernah kan guys kalian lihat tampilan form dengan format berikut :

Tampilan diatas merupakan tampilan form pada aplikasi android yang seringkali kita temui. Title yang dikasih dengan kode warna itu oren tersebut disebut dengan floating label. User Interface atau tampilan aplikasi dengan menggunakan format label floating / melayang tersebut sangat bermanfaat.  Berikut beberapa manfaatnya :

Pertama element label akan lebih mudah dibaca dan akan lebih ringkas dalam pembuatan form karena developer tidak perlu menambahkan element html di tiap form input.

Kedua, floating label ini akan mempermudah bagi user yang sudah terbiasa bagi interface mobile untuk berinteraksi di app yang dibangun dengan basis web.

Walaupun diantara beberapa kemudahan tersebut, label melayang di tidak bisa dibuat secara mudah. HTML 5 tidak menyediakan secara langsung dukungan terhadap floting label tersebut. Tidak seperti misalnya dukungan terhadap attribut required yang telah didukung oleh HTML 5 dan banyak browser terkini sehingga dengan menambahkan attribut tersebut anda tidak perlu menyertakan library validasi javascript untuk mengecek input yang harus diisi oleh user.

Ada dua cara dalam menerapkan floating label tersebut :

  1. Dengan menambahkan library javascript misalnya yang tersedia di alamat berikut : https://datuhealth.github.io/floating-label/

label floating atau label melayang2.  Membuat sendiri koding floating tabel tersebut dengan javascript dan css.

Disini kita akan membahas langkah 2 yakni membuat sendiri floating label tersebut dengan javascript dan css.

  1. Buat file floating-placeholder.js atau tambahkan coding berikut di halaman html dalam block <script> –disini tambahkan </script>
 
 
/*Addding placeholder floating*/
$(document).on('focus','input.floating_placeholder, select.floating_placeholder, textarea.floating_placeholder ',function(e){
    var placeholder = $(this).attr('placeholder');
    var placeholder_dom = '<span class="floating_placeholder" style="display: none;">'+placeholder+'<span>';
   
    if ($(this).prev('span.floating_placeholder').length != 1) 
    {
        $(this).before(placeholder_dom);
          $(this).prev().css('color', '#535FFC');
         $(this).prev().fadeIn();
    }
    else { 
        //$(this).before(placeholder_dom);
        $(this).prev().css('color', '#535FFC');
         $(this).prev().fadeIn();
       
    }
});
$(document).on('blur','input, select, textarea',function(e){
     $(this).prev('span.floating_placeholder').css('color', '#B4B4B4');
    //$(this).prev('i').css('color', ''); 
});
/*End placeholder floating style*/

 

2. Tuliskan coding css berikut :

 
 
span.floating_placeholder { font-size: 12px; display:block }

 

that’s it silahkan coba sendiri guys….

Apa kamu punya library atau script javascript sendiri… sharing disini dong guys…

 

cara agar script jquery jalan di load ajax

cara agar script jquery jalan di load ajax

yo…  pasti deh kita pernah ketemu jika kita pernah menload suatu dom dari hasil eksekusi ajax tapi kok script javascript tidak jalan. misalnya kita mencoba mengeksekusi fungsi tertentu jika ada event di suatu selector/dom. atau misalnya saja kita buat script yang akan menghilangkan suatu element div tertentu tapi ko setelah dari hasil load ajax tidak jalan script / fungsi tersebut. Kita akan membagikan bagaimana trik agar seluruh script yang kita tulis akan dapat berjalan di dom hasil dari dom ajax.

biasanya kita akan menangkap event yang disediakan oleh jquery dengan menggunakan script berikut :

 
 
  1. $(document).ready(function() { 
  2.  $("#someIDdiv").on("click", function(){    
  3.   alert("The paragraph was clicked.");  
  4.  }); 
  5. });

script diatas hanya akan berjalan pada dom yang sudah terload atau script diatas tidak akan jalan jika id #someIDdiv merupakan hasil dari load ajax. Agar script dapat berjalan maka script diatas dapat kita rubah dengan script berikut.

 
 
  1. $(document).on("click", "#someIDdiv", function(e) {
  2. //proses fungsi javascript disini ya bro
  3. });

Demikian atas perhatiannya terima kasih… hahah kaya dokumen resmi aja. sudah bro selamat coding lagi .

Upload file dengan pemisahan tampilan php dan javascript

Upload file dengan pemisahan tampilan php dan javascript

Ini  hanya tulisan dokumentasi kerja agar nantinya di pekerjaan mendatang akan dapat memudahkan saya dalam menggunakan script ini. script yang dituliskan disini berfungsi dalam proses upload file. kesulitannya adalah ada banyak file yang harus diupload dan tiap file tersebut memiliki identitas yang berbeda-beda misalnya pencatatan identitas penduduk ada beberapa lampiran yang harus direkam di database yakni ktp_ayah, ktp_ibu, ktp_anak, kartu_keluarga dan lain sebagainya. sehingga akan ada tampilan yang banyak menggunakan file input upload.

Ini screenshot atau tampilan ilustrasi diatas :

Jadi setiap user mengklik kotak check box akan muncul tampilan  tombol pilihan browse file.

mudah sebenarnya kita tinggal copas aja coding HTML di tiap pilihan lampiran tersebut. berikut file HTML yang dimaksud.

 
 
  1. <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>
  2. <input type="file" name="'.$form_name.'" class="upload_input" data-token='.$form_token.' id="upload_form"  id="upload" style="visibility:hidden;">
  3. <div class="progress-wrp" >
  4.     <div class="progress-bar"></div>
  5.     <div class="status">0%</div>
  6. </div>
  7. <div class="upload_keterangan">
  8.       
  9.       <span class="file_name"> </span>
  10.       <span class="succces_upload pull-right"> 
  11.             <i class="glyphicon glyphicon-ok icon-status-success "> </i>
  12.              <a href="#" class="reupload pull-right" >Upload ulang ?</a> 
  13.       </span>
  14.       <span class="error_upload pull-right"> <i class="glyphicon glyphicon-remove icon-status-error "> </i></span>
  15. </div>

dan kita akan mengatur reaksi tiap dom dengan menggunakan javascript (jquery). namun memang mudah diawal susah diakhir. bagaimana jika kita ingin melakukan perubahan pada DOM ?? tentunya kita akan mengedit banyak baris kode yang ada pada lampiran tersebut, terutama file reaksi user yang kita tuliskan dengan bantuan event di jquery.

agar mudah di pelihara / maintainable maka mestinya hanya ada satu struktur DOM. Satu struktur dom akan dapat diterapkan dengan menggunakan bantuan ajax yakni tiap ada user yang mengklik input checkbox akan mentrigger ajax meminta ke sisi server untuk meminta tampilan yang sama.

berikut scriptnya :

upload_dom_php.php
 
  1. //template buat form upload
  2.       public function create_upload_html()
  3.       {
  4.             
  5.             $form_name = $this->input->get('form_name');
  6.             $form_token = $this->input->get('form_token');
  7.             $upload_form = '
  8.                                                             
  9.                         <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>
  10.                           <input type="file" name="'.$form_name.'" class="upload_input" table_reference='.$table_reference.' data-token='.$form_token.' id="upload_form"  id="upload" style="visibility:hidden;">
  11.                         <div class="progress-wrp" >
  12.                             <div class="progress-bar"></div>
  13.                             <div class="status">0%</div>
  14.                         </div>
  15.                         <div class="upload_keterangan">
  16.                               
  17.                               <span class="file_name"></span>
  18.                               <span class="succces_upload pull-right"> 
  19.                                     <i class="glyphicon glyphicon-ok icon-status-success "> </i>
  20.                                      <a href="#" class="reupload pull-right" >Upload ulang ?</a> 
  21.                               </span>
  22.                               <span class="error_upload pull-right"> <i class="glyphicon glyphicon-remove icon-status-error "> </i></span>
  23.                         </div>
  24.                   ';
  25.             echo $upload_form;
  26.       }

 

oh sebelumnya mestinya adalah script upload file dengan basis javascript object yang bersumber dari :

https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload

script diatas sudah saya modifikasi agar menampilkan nama file setiap proses upload berhasil dan menghilangkan status progress upload apabila selesai upload.

upload_hander_javascript.js
 
  1. //UPLOAD CLASS
  2. var Upload = function (file) {
  3.     this.file = file;
  4. };
  5. Upload.prototype.getType = function() {
  6.     return this.file.type;
  7. };
  8. Upload.prototype.getSize = function() {
  9.     return this.file.size;
  10. };
  11. Upload.prototype.getName = function() {
  12.     return this.file.name;
  13. };
  14. Upload.prototype.doUpload = function (object, dom) {
  15.     var that = this;
  16.     var formData = new FormData();
  17.  
  18.     // add assoc key values, this will be posts values
  19.     formData.append("file", this.file, this.getName());
  20.     formData.append("upload_file", true);
  21.     formData.append("object", JSON.stringify(object) );
  22.    
  23.     $.ajax({
  24.         type: "POST",
  25.         url: baseUrl + "/web/admin/attachment_upload/upload",
  26.         xhr: function () {
  27.             var myXhr = $.ajaxSettings.xhr();
  28.             if (myXhr.upload) {
  29.                 myXhr.upload.addEventListener('progress', that.progressHandling, false);
  30.             }
  31.             return myXhr;
  32.         },
  33.         success: function (data) {
  34.             // your callback here
  35.             $(dom).hide();
  36.             $(dom).prev('.uploadbutton').hide();
  37.             $(dom).next().next(".upload_keterangan").show();
  38.             $(dom).next().next(".upload_keterangan").find('.icon-status-succes').show();
  39.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  40.         },
  41.         error: function (error) {
  42.             // handle error
  43.             $(dom).next().next(".upload_keterangan").show();
  44.                  $(dom).next().next(".upload_keterangan").find('.icon-status-error').show();
  45.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  46.         },
  47.         async: true,
  48.         data: formData,
  49.         cache: false,
  50.         contentType: false,
  51.         processData: false,
  52.         timeout: 60000
  53.     });
  54. };
  55. Upload.prototype.progressHandling = function (event) {
  56.     var percent = 0;
  57.     var position = event.loaded || event.position;
  58.     var total = event.total;
  59.     var progress_bar_id = ".progress-wrp";
  60.     if (event.lengthComputable) {
  61.         percent = Math.ceil(position / total * 100);
  62.     }
  63.     // update progressbars classes so it fits your code
  64.     $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
  65.     $(progress_bar_id + " .status").text(percent + "%");
  66.     if(percent == 100)
  67.     {
  68.         $(progress_bar_id).fadeOut(2000);
  69.         
  70.     }
  71. };
  72. sekarang file ajax dan file terkait dengan reaksi app terhadap prilaku user :
upload_trigger.js
 
  1.  var baseUrl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname.split('/')[1];
  2. $(document).ready(function() {
  3.  
  4. $( '.form_floating_placeholder' ).floatingPlaceholder();
  5. $(document).on("click", ".upload_check_box", function(e) {
  6.         
  7.     $(this).closest( "tr" ).find('.upload_form').toggle(500);
  8.     
  9.     var attachment_type = $(this).attr('form-name');
  10.     var form_token = $(this).attr('form-token');
  11.     var table_reference  = $(this).attr('table_reference');
  12.     var object = {attachment_type: attachment_type, form_token: form_token, table_reference:table_reference};
  13.     //if sudah ada jangan load ajax lagi tapi tampilkan yang sudah ada
  14.     if ($(this).closest( "tr" ).find('.upload_form').find( ".upload_keterangan" ).find(".file_name").text().length) {
  15.         // element exists
  16.         $(this).closest( "tr" ).find('.upload_form').find( ".upload_keterangan").show();
  17.     }
  18.     else {
  19.         create_html_upload_dom(this, object);
  20.     }
  21.     
  22. });
  23.     
  24. //upload multi handler
  25. function create_html_upload_dom(dom, object)
  26. {
  27.     var url =  baseUrl + "/web/admin/attachment_upload/create_upload_html";
  28.     $.ajax({
  29.         url: url,
  30.         type: 'POST',
  31.         dataType: 'html',
  32.         data: {object: object},
  33.     })
  34.     .done(function(data) {
  35.         $(dom).closest( "tr" ).find('.upload_form').html(data);
  36.         $(dom).closest( "tr" ).find('.upload_form').find('.progress-wrp').hide();
  37.         $(dom).closest( "tr" ).find('.upload_form').find('.upload_keterangan,.icon-status-succes,.icon-status-error').hide();
  38.     });
  39.     
  40.     
  41. }
  42. }); //end document ready
  43. //to remove ugly button browser html
  44. $(document).on('click','.uploadbutton',function(){
  45.     $(this).next('input[type=file]').click();
  46.  });
  47. //Change id to your id
  48. $(document).on('change','.upload_input',function(){
  49.     
  50.     var file = $(this)[0].files[0];
  51.     var upload = new Upload(file);
  52.     var attachment_type = $(this).attr('name');
  53.     var form_token = $(this).attr('data-token');
  54.     var table_reference  = $(this).attr('table_reference');
  55.     var object = {attachment_type: attachment_type, form_token: form_token, table_reference:table_reference};
  56.     $(this).next().show();
  57.     // maby check size or type here with upload.getSize() and upload.getType()
  58.     // execute upload
  59.     upload.doUpload(object, this);
  60. });
  61.     
  62. //Change id to your id
  63. $(document).on('click','.reupload',function(e){
  64.     e.preventDefault();
  65.     
  66.     $(this).parent().parent().parent().find('.uploadbutton').toggle(500);
  67.  
  68. });
  69.     

file css agar dapat menstyling :

style_upload.css
 
.upload_form { width: 90%; margin-top: 5px; padding: 0px 0px 15px 10px;  }
.upload_keterangan { color: #6A6969 !important; font-size: 1em; }
.reupload { margin-left: 15px; }
.progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    height: 10px;
    border-radius: 3px;
    margin: 5px;
    text-align: left;
    background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
.progress-wrp .progress-bar{
    height: 100%;
    border-radius: 3px;
    background-color: #078321;
    width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
.progress-wrp .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}
.icon-status-success { color: #078716; font-size: 1.1em; }
.icon-status-error { color: #EC0C3B; font-size: 1.1em; }

 

di file html utama kita akan sangat mudah dalam memanggil tampilan tersebut cukup dengan coding berikut (yang bercetak tebal) :

 
 
  1. <table class="lampiran_upload">
  2.       <tr>
  3.             <td class="title">Rekaman SBU yang diregistrasi oleh lembaga 
  4.             <br>
  5.             <!-- Ajax Upload Form -->
  6.             <span class="upload_form display_none">
  7.             </span>
  8.             <!-- End Ajax Upload Form -->
  9.             </td>
  10.             <td>
  11.                   <input type="checkbox" class="upload_check_box" 
  12.                         form-name="sbu_upload_form" 
  13.                         form-token="<?php echo $form_token;?>"
  14. table_reference="<?php echo $table_reference;?>"
  15.                   > 
  16.             </td>
  17.       </tr>
  18.             <td class="title">Rekaman SBU yang diregistrasi oleh lembaga 
  19.             <br>
  20.             <!-- Ajax Upload Form -->
  21.             <span class="upload_form display_none">
  22.             </span>
  23.             <!-- End Ajax Upload Form -->
  24.             </td>
  25.             <td>
  26.                   <input type="checkbox" class="upload_check_box" 
  27.                         form-name="sbu_upload_form" 
  28.                         form-token="<?php echo $form_token;?>"
  29.                   > 
  30.             </td>
  31.       </tr>
 
 
  1. </table>

 

file menerima file upload dari html form. file name : upload.php

 
 
  1. public function upload()
  2.       { 
  3.             $this->load->library('upload');
  4.             //print_r($_FILES['file']['name']);
  5.             $file_ext = (strlen($_FILES['file']['name']) >  18) ? '.'.ltrim(strrchr($_FILES['file']['name'], '.'),'.') : '';
  6.            
  7. echo $file_name = character_limiter($_FILES['file']['name'], 18).$file_ext;
  8.             //cari dulu berdsasarkan token jika tidak ada insert baru, jika ada maka hapus yang lama insert yang baru
  9.             $parameter = json_decode($_POST['object']);
  10.             echo $parameter->attachment_type;
  11.       }

 

tampilan screenshot waktu proses upload adalah sebagai berikut :

"