Browsed by
Category: coding

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

 

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.
Instal package control di sublime text 3

Instal package control di sublime text 3

Saat ini Sublime Text (ST3) 3 merupakan text editor favorit bagi banyak editor. Hal ini disebabkan bahwa ST ini memiliki banyak fungsi yang intuitif juga sangat banyak dukungan ekosistem ST ini yang dikenal dengan paket / package. Paket tersebut bagi web developer atau full stack developer sangat berguna. Misalkan saja ada paket error checking penulisan sintak PHP misalnya, jadi sebelum file dijalankan oleh webserver di browser maka error yang kita tuliskan akan segera di berikan tanda oleh ST3 Plugin ini.

fitur realtime error checking tersebut mirip dengan yang disediakan oleh berbagai IDE seperti netbeans, visual studio editor, Delphi dan lain sebagainya. Namun karena ST3 cenderung bukan IDE yang memiliki fitur sangat banyak dan komplek yang seringkali sangat mubazir karena tidak pernah kita gunakan  😀 ,  maka ST3 jika dikomparasikan dengan berbagai IDE tersebut cenderung jauh lebih ringan.

Sebelum kita dapat memaksimalkan fungsi dari ST3 dan paket yang tersedia secara gratis tersebut kita perlu konfigurasi yang akan dipaparkan di tulisan ini. stay up guys.

Disini saya akan membagikan langkah-langkah awal instalasi paket control yang disediakan oleh komunitas pengguna ST3.

jika sudah terpasang maka anda dapat berpindah ke artikel selanjutnya berikut yang membahas tentang yang terkait dengan optimalisasi sublime text plugin.

Upload otomatis script FTP menggunakan SublimeText 3

SFTP sublime text
Tentunya kita akan sangat kesulitan apabila kita selalu perlu untuk mengupload tiap perubahan yang kita lakukan di local server kita ke server remote. Biasanya kita akan menggunakan aplikasi ftp desktop seperti filezilla atau fireftp. Namun ST3 memudahkan kita dalam sinkronisasi file local kita ke server remote dengan melakukan beberapa langkah berikut :

Install SFTP di package Control (instalasi package control ada di link berikut : instalasi Paket control di ST3 )
Buat file

read more read more

Daftar plugin wajib di Sublime Text 3

 

Instalasi package Control

Sebelum kita dapat menginstal berbagai plugin kita mesti menginstal plugin manager yang disebut dengan package control di st3. Berikut cara menginstall package control :

Silahkan tampilkan console ST3 (tekan ctrl + `) kemudian copas kode berikut :

instalasi paket control
 
  1. import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
tekan ctrl + ` di sublime akan muncul kolom pada gambar, lalu copas kode diatas

tunggu hingga instalasi package control selesai.

Kemudian kita coba aktifkan package control dengan menekan ctrl + shift + p. ketikkan install package. Jika paket control berhasil silahkan ketik install jika muncul tampilan berikut maka anda telah berhasil menginstalasi paket control.

 

 

Berhasil, nah saat ini anda akan mulai dapat memanfaatkan Sublime text dengan menginstal berbagai alat bantu / plugin yang akan dijelaskan pada artikel di website ini.

Silahkan kunjungi related post ya guys…
oh iya silahkan berikan komentar apabila ada yang kurang jelas  🙂

 

membuat database backup terjadwal di plesk parallel

membuat database backup terjadwal di plesk parallel

x

  1. pada opsi pertama perintah tersebut akan dijalankan setiap hari pada jam 23 menit 59 dengan format file db-backupharibulantahun.sql pada folder database_backup

berikut perintahnya agar mudah di copas :

 
 
  1. /usr/bin/mysqldump -h 192.168.23.207 -u ojs -p'y1Nki@49' ojsstiep_ojs > /var/www/vhosts/ojs.stiepancasetia.ac.id/httpdocs/database_backup/db-backup-$(/bin/date +\%d\%m\%Y).sql

2. pada perintah kedua yakni melakukan penghapusan terjadwal terhadap file backup yang menumpuk setiap hari minggu dengan script php sebagai berikut :

 
 
  1. <?php
  2. $files = glob(cacheme_directory()."*");
  3. $now   = time();
  4. foreach ($files as $file)
  5. if (is_file($file))
  6. if ($now - filemtime($file) >= 60 * 60 * 24 * 10) // 10 days
  7. unlink($file);
  8. ?>

 

 

"