Browsed by
Category: Web Developer

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…

 

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 :

cara upload file dengan coding ajax sederhana

cara upload file dengan coding ajax sederhana

Hei.. sekarang sudah tahun 2017, dimana teknologi bukan hanya terpusat pada teknologi desktop. Sekarang aplikasi mengarah ke penggunaan Software As a Service yakni aplikasi yang bersifat mobile, multiuser dan flexible. Membangun aplikasi dengan beberapa kriteria diatas tidak semudah ndas mu…  😀 . Misalnya saja dibangun di PHP ada banyak tutorial, script contoh, framework serta coding standard yang berbeda-beda dalam menerapkan suatu pembangunan aplikasi.

PHP merupakan bahasa berbasis komunitas sehingga untuk aturan coding dan beberapa hal terkati penggunaannya diserahkan sepenuhnya ke komunitas. sehingga sangat berbeda dengan coding berbasis proprietary based dimana coding sudah standar.

Sebenarnya paragraf diatas cuman kalimat pembuka aja, daripada cuman langsung to the point kan ga mesra hehe… Cukup deh kalimat pembukanya. sekarang kita to the point aja deh…

saya akan membagikan cara sederhana untuk mengupload file dengan menggunakan ajax.

berikut script yang harus kalian siapkan.

  1. Script utama uploader berbasis javascript
  2. script ajax sebagai eksekutor uploader
  3. script HTML sebagai user interface atau tampilan dasar aplikasi
  4. script server based uploader dengan PHP.

Script Utama uploader berbasis javascript :

uploader berbasis javascript
 
  1. //https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
  2. //UPLOAD CLASS
  3. var baseUrl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname.split('/')[1];
  4. var Upload = function (file) {
  5.     this.file = file;
  6. };
  7. Upload.prototype.getType = function() {
  8.     return this.file.type;
  9. };
  10. Upload.prototype.getSize = function() {
  11.     return this.file.size;
  12. };
  13. Upload.prototype.getName = function() {
  14.     return this.file.name;
  15. };
  16. Upload.prototype.doUpload = function (attachment_type, form_token, dom) {
  17.     var that = this;
  18.     var formData = new FormData();
  19.   
  20.     // add assoc key values, this will be posts values
  21.     formData.append("file", this.file, this.getName());
  22.     formData.append("upload_file", true);
  23.     formData.append("attachment_type", attachment_type );
  24.     formData.append("form_token", form_token );
  25.     $.ajax({
  26.         type: "POST",
  27.         url: baseUrl + "/your url/php_uploader.php",
  28.         xhr: function () {
  29.             var myXhr = $.ajaxSettings.xhr();
  30.             if (myXhr.upload) {
  31.                 myXhr.upload.addEventListener('progress', that.progressHandling, false);
  32.             }
  33.             return myXhr;
  34.         },
  35.         success: function (data) {
  36.             // your callback here
  37.             $(dom).hide();
  38.             $(dom).prev('.uploadbutton').hide();
  39.             $(dom).next().next(".upload_keterangan").show();
  40.             $(dom).next().next(".upload_keterangan").find('.icon-status-succes').show();
  41.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  42.         },
  43.         error: function (error) {
  44.             // handle error
  45.             $(dom).next().next(".upload_keterangan").show();
  46.                  $(dom).next().next(".upload_keterangan").find('.icon-status-error').show();
  47.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  48.         },
  49.         async: true,
  50.         data: formData,
  51.         cache: false,
  52.         contentType: false,
  53.         processData: false,
  54.         timeout: 60000
  55.     });
  56. };
  57. Upload.prototype.progressHandling = function (event) {
  58.     var percent = 0;
  59.     var position = event.loaded || event.position;
  60.     var total = event.total;
  61.     var progress_bar_id = ".progress-wrp";
  62.     if (event.lengthComputable) {
  63.         percent = Math.ceil(position / total * 100);
  64.     }
  65.     // update progressbars classes so it fits your code
  66.     $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
  67.     $(progress_bar_id + " .status").text(percent + "%");
  68.     if(percent == 100)
  69.     {
  70.           $(progress_bar_id).fadeOut(2000);
  71.           
  72.     }
  73. };

insert file diatas dihalaman HTML nantinya dalam block <script> </script>

 

script ajax sebagai eksekutor uploader

 
 
  1. //lihat disini ada class .upload_input yang akan digunakan sebagai trigger atau pemicu pemanggilan kelas ini
  2. $(document).on('change','.upload_input',function(){
  3.       
  4.     var file = $(this)[0].files[0];
  5.     var upload = new Upload(file);
  6.    
  7.     // may check size or type here with upload.getSize() and upload.getType()
  8.     // execute upload
  9.     upload.doUpload(attachment_type, form_token, this);
  10. });

script tampilan HTML

 
 
  1. //jangan lupa diinsert script diatas ya di halaman HTML ini
  2. <input type="file" name="file_upload" class="upload_input" >

 

PHP uploader

php_uploader.php
 
  1. //http://php.net/manual/en/features.file-upload.post-method.php
  2. <?php
  3. // In PHP versions earlier than 4.1.0, $HTTP_POST_FILES should be used instead
  4. // of $_FILES.
  5. $uploaddir = 'tentukan_directory_mu';
  6. $uploadfile = $uploaddir . basename($_FILES['file_upload']['name']);
  7. echo '<pre>';
  8. if (move_uploaded_file($_FILES['file_upload']['tmp_name'], $uploadfile)) {
  9.     echo "File is valid, and was successfully uploaded.\n";
  10. } else {
  11.     echo "Possible file upload attack!\n";
  12. }
  13. echo 'Here is some more debugging info:';
  14. print_r($_FILES);
  15. print "</pre>";
  16. ?>

Selesai ?

Tentu saja belum mang enak aja… hehe  😛 , yang diatas tersebut cuman script sederhana doang, ga ada pemeriksaan ukuran file yang diupload, pemeriksaan jenis file atau mime, pengamanan terhadap isi file, upload dengan banyak file / multiple file upload, upload berbasis chunk. but…. dengan script sederhana diatas tinggal dikembangin aja bagaimana cara agar bisa mencapai beberapa prinsip keamanan dalam upload file.

sebagai bonus berikut akan dituliskan agar tampilan browse (pada tombol input pemilihan file di tampilan HTML) menjadi tidak boring, maka kita akan menambahkan trigger dengan menggunakan jquery sehingga tampilan pemilihan file akan bebas kita styling sesuai dengan kesukaan ndas mu.

 

Yang kita perlukan adalah.
1. File HTML .

pengaturan style pada file input
 
  1. <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>
  2.  
  3. <input type="file" name="form_name" class="upload_input"  id="upload_form"  id="upload" style="visibility:hidden;">

2. Script javascript mentrigger class uploadbutton untuk membuka browser file
ini ndas. ..  😛

 
 
  1. //to remove ugly button browser html
  2. //hoi jangan lupa ya ini harus ada jquerynya
  3. $(document).on('click','.uploadbutton',function(){
  4.     $(this).next('input[type=file]').click();
  5.  });

akhirnya selesai ?

nda sekarang aku akan menyelesaikan pekerjaan coding ini… ga akan selesai sampai kiamat hahaha

 

Memanfaatkan realtime error syntax di Sublime text

Memanfaatkan realtime error syntax di Sublime text

Realtime Error sintak dan instalasi Sublime Linter di Sublime text

Alangkah mudahnya jika kita dapat menerapkan penandaan error secara realtime apabila kita mencoding berbagai script dengan menggunakan ST3. Hal ini selain menghemat waktu pengerjaan proyek app kita tentunya juga mempermudah kita sebagai developer mendeteksi blok atau baris kode mana yang perlu kita perbaiki sebelum kita running di server. Misalnya kita ketinggalan semi colon, salah penulisan if – else dan lain sebagainya.

Proses penandaan ini dikenal dengan Linting. ST3 secara default tidak memiliki fitur linting ini namun dengan semakin banyaknya komunitas yang menggunakan ST3 maka mempermudah kita juga dalam mengintergrasikan plugin linting ini kedalam ST3.

Sebenarnya ada dua yang saya kenal plugin linting ini pertama sublimecodeintel dan sublimelinter. Jika menggunakan opsi pertama maka mencakup keseluruhan Bahasa yang support dalam penandaan error ini. Namun kita akan menggunakan opsi kedua yakni sublimelinter.

Dalam memanfaatkan sublimelinter yang perlu diperhatikan bahwa plugin ini hanya plugin framework linting alias untuk linting berbagai Bahasa perlu ditambahkan sublimelinter-bahasa lain. Misalnya untuk support php maka anda perlu menginstal sublimelinter-php dan lain sebagainya. Berikut kita akan lebih merincikan detail langkah menerapkan plugin ini.

Oh iya sebelum beranjak melalui tahapan linting ini kita wajib menginstall nodeJs dulu di computer local kita. Silahkan download disini :

https://nodejs.org/en/download/

 

pada saat proses instalasi nantinya akan ada pilihan “install node into windows PATH” (saya lupa tepatnya) jangan lupa centang atau aktifkan pilihan tersebut. Hal ini agar perintah npm yang merupakan perintah default nodejs dapat diakses di cmd windows.

setelah selesai proses instalasi, pastikan nodejs dapat berjalan di command prompt kita. Caranya buka command prompt kemudian ketikkan perintah berikut : npm version

berikut contoh yang saya jalankan di komputer saya :

tantangan dalam mengaktifkan fitur realtime checker ini adalah setiap paket bahasa pemograman harus diinstall secara manual. Tidak cukup menginstal saja ada konfigurasi juga yang harus tepat sehingga dapat digunakan 😕

Disini kita akan menginstalasi 3 paket linting ini yakni untuk fitur bahasa PHP, CSS, Javascript. untuk itu kita harus menginstal 4 paket berikut :

  1. SublimeLinter
  2. SublimeLinter-php
  3. SublimeLinter-jshint
  4. SublimeLinter-csslint

 

klo pengen cepat ini silahkan template contoh konfigurasi file linter SublimeLinter Konfigurasi Template

Silahkan install seluruh paket tersebut di package control. apabila ST anda belum terinstall package control silahkan ikuti langkah-langkahnya pada artikel berikut :

Berikut akan dijelaskan secara detail requirement setiap paket linting tersebut :

Linter PHP

  1. SublimeLinter-php agar bisa aktif anda harus bisa menjalankan perintah PHP pada perintah yang anda tulis di CMD

untuk mengecek perintah PHP bisa dijalankan di CMD silahkan ketik php -version di windows CMD anda ;

Install paket plugin sublimelinter di package control  dengan nama : “sublimelinter-php” , kemudian

  1. Edit configurasi sublimelinter user menjadi :
 
 
  1. {
  2.     "SublimeLinter": {
  3.         "linters": {
  4.             "php": {
  5.                 "cmd": "/path/to/php"
  6.             }
  7.         }
  8.     }
  9. }

jangan lupa edit /path/to/php ya sesuai dengan letak file php.exe di komputer anda.

Linter Javascript

  • Install paket NPMnya contoh
    • Jshint : npm install -g jshint
  • Cek versinya untuk memastikan sudah terinstal dan bisa diakses oleh CMD windows :

 jshint –-version

Contoh :

 
 
  1. C:\Users\hendra>jshint --version
  2.       jshint v2.9.4

Kalau pesan diatas muncul di CMD maka selamat jshint sudah terinstall dengan baik .

  • install Paket plugin jshint melalui sublime text 3 à misalnya :
    • ctrl + shift + p , install package lalu tuliskan “SublimeLinter-jshint
  • setting konfigurasi di sublimelinter user setting :

contoh :

 

Linter CSS

CSSLINT :

  1. Install csslint melalui NPM : npm install -g csslint.
  2. Temukan path linter : Cmd windows :
 
 
  1. C:\Users\hendra>where csslint
  2. C:\Users\hendra\AppData\Roaming\npm\csslint
  3. C:\Users\hendra\AppData\Roaming\npm\csslint.cmd
  • install Paket plugin csslintmelalui sublime text 3 à misalnya : ctrl + shift + p , install package lalu tuliskan “SublimeLinter-csslint

Linter HTML

Htmlhint

  1. Install htmlint via npm :  npm install -g htmlhint
  2. Temukan path htmlhint Cmd windows :
 
 
  1. C:\Users\hendra>where htmlhint
  2. C:\Users\hendra\AppData\Roaming\npm\ htmlhint
  3. C:\Users\hendra\AppData\Roaming\npm\htmlhint.cmd
  • install Paket plugin htmlhint melalui sublime text 3 à misalnya : ctrl + shift + p , install package lalu tuliskan “SublimeLinter-htmlhint

tahap yang paling penting adalah mengatur konfigurasinya agar bisa digunakan atau diintegrasikan di sublime : berikut contoh konfigurasi tersebut (gunakan script dibawah ini sebagai contoh file konfigurasi, edit sesuai dengan konfigurasi yang ada pada komputer anda) :

 

 
 
  1. {
  2.     "user": {
  3.         "debug": false,
  4.         "delay": 0.25,
  5.         "error_color": "D02000",
  6.         "gutter_theme": "Packages/SublimeLinter/gutter-themes/Blueberry/round/Blueberry - round.gutter-theme",
  7.         "gutter_theme_excludes": [],
  8.         "lint_mode": "background",
  9.         "linters": {
  10.               "php": {
  11.                 "@disable": false,
  12.                 "args": [],
  13.                 "excludes": []
  14.             },
  15.             "htmlhint": {
  16.                 "@disable": false,
  17.                 "args": [],
  18.                 "cmd": "C:/Users/hendra/AppData/Roaming/npm",
  19.                 "excludes": []
  20.             },
  21.             "jshint": {
  22.                 "@disable": false,
  23.                 "args": [],
  24.                 "cmd": "C:/Users/hendra/AppData/Roaming/npm",
  25.                 "excludes": []
  26.             },
  27.           
  28.             "summitlinter": {
  29.                 "@disable": false,
  30.                 "args": [],
  31.                 "cmd": "C:/Users/hendra/AppData/Roaming/npm",
  32.                 "excludes": [],
  33.                 "globals": "",
  34.                 "ignore": "channel",
  35.                 "limit": null,
  36.                 "only": ""
  37.             }
  38.         },
  39.         "mark_style": "outline",
  40.         "no_column_highlights_line": false,
  41.         "passive_warnings": false,
  42.         "paths": {
  43.             "linux": [],
  44.             "osx": [],
  45.             "windows": [
  46.                 "C:/Users/hendra/AppData/Roaming/npm/"
  47.             ]
  48.         },
  49.         "python_paths": {
  50.             "linux": [],
  51.             "osx": [],
  52.             "windows": []
  53.         },
  54.         "rc_search_limit": 3,
  55.         "shell_timeout": 10,
  56.         "show_errors_on_save": false,
  57.         "show_marks_in_minimap": true,
  58.         "syntax_map": {
  59.             "html (django)": "html",
  60.             "html (rails)": "html",
  61.             "html 5": "html",
  62.             "javascript (babel)": "javascript",
  63.             "magicpython": "python",
  64.             "php": "php",
  65.             "python django": "python",
  66.             "pythonimproved": "python"
  67.         },
  68.         "tooltip_fontsize": "1rem",
  69.         "tooltip_theme": "Packages/SublimeLinter/tooltip-themes/Default/Default.tooltip-theme",
  70.         "tooltip_theme_excludes": [],
  71.         "tooltips": false,
  72.         "warning_color": "DDB700",
  73.         "wrap_find": true
  74.     }
  75. }
Give your appreciation please share this article bro  😀 Jangan lupa diskusikan apabila ada yang tidak jelas di kolom komentar dibawah ini.

 

Ingin menyelami lagi berikut artikel yang menambah referensi :

https://scotch.io/bar-talk/best-of-sublime-text-3-features-plugins-and-settings

Daftar plugin wajib di Sublime Text 3

Daftar plugin wajib di Sublime Text 3

Pasti bingung instalasi Sublime Text 3 lalu paket plugin apa saja yang sering dipakai atau digunakan bagi seorang web developer. Hal ini sering penulis alami waktu berpindah dari komputer yang tidak terinstall paket/plugin yang sering penulis pakai. Untuk mempermudah kita dalam mengingat paket apa saja yang sangat penting ada di ST3 editor kita berikut daftar plugin yang “wajib ada” tersebut.

sebelum kita mulai tahap pertamanya di Sublime harus sudah terpasang package control seperti gambar diatas ya.

All Autocomplete

digunakan agar skript dan penamaan variabel,fungsi, class dan lain sebagainya dapat lebih konsisten misalnya kita pernah membuat fungsi cariBarang di suatu file, dan kita akan dapat mengetikkan dengan mudah karena sudah terbantu dengan plugin ini.

Auto Close HTML tags

Mengotomatiskan penutupan tag html misalnya kita ketikkan <p> maka plugin ini akan menuliskan secara otomatis tag penutupnya : </p>

 CSS Completion

Seperti pada list sebelumnya, maka plugin ini bermanfaat menutup tag yang berhubungan dengan sintak css.

Color Picker

Pusing karena harus buka browser yang menyediakan kode warna atau buka aplikasi photoshop cuman untuk mencari kode warna. Plugin ini sangat bermanfaat karena membantu kita agar dapat menambahkan kode warna hanya dengan bantuan klik yang muncul dari dialog/windows color picker. ingat ya setelah selesai install diaktivasi dengan menekan ctrl + shift + c

HTML Attributes

Plugin ini berguna memberikan autocompletion terhadap penulisan sintak html. Misalkan saja anda menuliskan sintak <tab (masih tahap ketik) .. maka plugin ini akan memberikan suggestion untuk tag tersebut <table>. bingung nah coba sendiri deh  😉

Bracket Higlighter

Plugin ini sangat berguna apabila kita lupa dimana letak dari penutup bracker [ } ]. Symbol bracket ini sering kita pakai apabila kita menggunakan sintak if else atau sintak looping (misalnya for, while dan foreach). Bracket ini bisa jadi sumber malapetaka error debugging klo tidak ada semacam visual guide untuk menuntun kita memahami awal dan akhir sintak.

HTML Beautify atau Minify

Ingin mempercepat proses loading dari situs, salah satu triknya adalah dengan mekompresi file statis yang ada di situs kita. File tersebut misalnya adalah file styling CSS, javascript atau bahkan kita ingin mengkompresi file HTML itu sendiri. Selain fitur kompresi plugin ini juga bermanfaat untuk merapikan format perataan pada file HTML. Silahkan baca manual cara penggunaannya pada situs github mereka.

PHP codeBeautifier

Agar kode php tidak menjadi coding yang tidak beraturan atau spaggeti code maka kita sangat disarankan untuk menuliskan koding php dengan cara yang rapi atau terorganisir. Namun bagaimana jika kita terbiasa menuliskan koding dengan cara yang tidak beraturan ?. bersyukurlah ada plugin ini. Plugin ini secara otomatis akan merapikan format penulisan koding php kita.

A File Icon

Apalah artinya sebuah nama, berarti ko. Gimana coba kita nyari file yang namanya sama tapi sebenarnya jenis filenya beda. Nah untuk membantu kita kita dapat memasang plugin A File Icon. plugin ini berguna untuk memberikan visualisasi terhadap icon file yang ada di layar pilihan FOLDERS di sisi kiri tampilan ST3.

Ingat ya Jangan terlalu banyak menginstall plugin, plugin yang terlalu banyak akan menyebabkan ST3 menjadi berat dan tidak responsive.

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