kombinasi keyboard pada sublime text

Setelah lama menggunakan sublime text tidak menyadari selama ini bercoding hanya menggunakan metode yang biasa-biasa. Ternyata baru tahu dalam sublime text dapat menggunakan beberapa kombinasi keyboard untuk mempercepat dalam bercoding. Kombinasi yang baru saya tau adalah

Shift+tab = untuk memundurkan beberpa baris coding dengan cara diblock terlebih dahulu
Ctrl+Shift+/ = untuk memberi komentar pada beberapa baris dengan cara diblock terlebih dulu tentunya

tentunya kalo kombinasi yang dibawah ini sudah lazim digunakan dan yang wajib diketahui
Ctrl+S = untuk save file
Ctrl+Z = untuk undo
Ctrl+Y = untuk redo
Ctrl+tap = untuk pindah halaman file
Ctrl+F = untuk menampilkan Find
Ctrl+W = exit file
Ctrl+Shift+W = untuk close program sublime text
Ctrl+N = untuk new dokumen
Ctrl+a = block all

Mungkin sedikit diatas yang baru saya ketahui, jika ada yang tau lainnya silahkan tambahkan di komentar, dan tentunya saya sangat mengucapkan terimakasih.

CSS

saya akan menulis dalam blog ini tentang apa yang saya gunakan di dalam css selama mengerjakan pojek maupun hanya iseng-iseng saja.

1. overflow

<div style="height:450px;overflow:auto;">
<p>area ini hanya dibatasi dengan tinggi 450px jika text melebihi dari 450px maka akan dibuat box yang secar otomatis akan muncul scroll</p>
</div>

menampilkan data json atau data array menggunakan combo di javascript

Diasumsikan sudah memiliki data json yang dipanggil menggunakan url, disini saya akan memanggil data json md_hari di alamat :

http://127.0.0.1/aplikasi_presensi/index.php/master_data/c_md_data_pegawai/combo_md_organisasi

data yang dipanggil menggunakan url diatas adalah seperti ini :

[{"kd_hari":"001","nm_hari":"Senin","keterangan":"\r"},{"kd_hari":"002","nm_hari":"Selasa","keterangan":null},{"kd_hari":"003","nm_hari":"Rabu","keterangan":null},{"kd_hari":"004","nm_hari":"Kamis","keterangan":null},{"kd_hari":"005","nm_hari":"Jum'at","keterangan":null},{"kd_hari":"006","nm_hari":"Sabtu","keterangan":null},{"kd_hari":"007","nm_hari":"Minggu","keterangan":null}]

permasalahan selanjutnya adalah bagaimana kita memanggil atau mengolah data tersebut dan ditampilkan menggunakan html seperti select option yang berbentuk combo.

Pertama saya menyiapkan file javascript yang berisi script ready function. fungsi tersebut akan dipanggil saat halaman web di load.

$(document).ready(function(){

//script 

});

Setelah itu membuat fungsi untuk memanggil JSON didalam ready(function(){ })

$.getJSON("http://127.0.0.1/aplikasi_presensi/index.php/master_data/c_md_jam_kerja/combo_md_hari", function(result){

//script

});

Setelah dipanggil selanjutnya memikirkan bagaimana agar data tersebut dapat tampil di html menggunakan combo. Sebelumnya saya siapkan file html yang didalamnya berisi script html untuk menampilkan combo.

<select name="kd_hari" id="kd_hari"><select>

Setelah html untuk combo sudah disiapkan kembali ke file javascript dan sekarang mulai poses penempatan data agar dapat diakses melalui combo html diatas. Script ini diisikan didalam function(result){ }

var sel = document.getElementById('kd_hari');
$.each(result, function(i, field){
var opt = document.createElement('option');
opt.innerHTML = result[i].nm_hari;
opt.value = result[i].kd_hari;
sel.appendChild(opt);
});

setelah selesai kembali ke file html dan panggil javascript menggunakan :
<script type="text/javascript" src="js_md_jam_kerja.js"></script>

berikut secript lengkap untuk file js :

//menampilkan combo hari
$.getJSON("http://127.0.0.1/aplikasi_presensi/index.php/master_data/c_md_jam_kerja/combo_md_hari", function(result){
var sel = document.getElementById('kd_hari');
$.each(result, function(i, field){
var opt = document.createElement('option');
opt.innerHTML = result[i].nm_hari;
opt.value = result[i].kd_hari;
sel.appendChild(opt);
});
});

javascript

Yang akan saya tulis dibawah ini tentang javascript yang saya gunakan untuk memecahkan permasalahan, bukan semua yang ada pada javascript. Saya menulis ini karena jika suatu saat saya ingin menggunakan atau menemukan masalah yang sama saya akan lebih mudah untuk mencarinya.

OnKeyUp = digunakan jika pada form input saat di isi maka akan memanggil fungsi yang sudah dibuat menggunakan javascript.
-------------------------------------------------------------------------------------------------------
var Teks = document.forminput.textinput.value.length; 
script diatas berfungsi membuat variable baru yang hasilnya merupakan jumlah karakter atau huruf dari string.
atau dapat disederhanaan seperti ini:

var teks = "Hello World!";
var n = teks.length;
-------------------------------------------------------------------------------------------------------

untuk menghapus class

$('#sub_list_kiri').removeClass('span12');

untuk menambahkan class

$('#sub_list_kiri').addClass('span7');

untuk menghilangkan display css none

document.getElementById("sub_list_kanan").style.display = "";

untuk menambahkan atribut disabled

$('#ambil_data_penjagaan').attr('disabled','disabled');

untuk menghapus atribut disabled

$('#ambil_data_penjagaan').removeAttr("disabled");

Membuat timepicker menggunakan JQuery-ui

Membuat timepicker menggunakan Jquery sangat mudah. Tetapi jika lama tidak dicoba untuk membuatnya terkadang hal kecil seperti membuat timepicker sering terlupa. Saya menulis ini bertujuan untuk mengisi kekosongan waktu yang banyak ini agar tidak membosankan. Selain itu jika suatu saat saya lupa untuk membuat timepicker saya akan membuka blog saya sendiri ini. Banyak tutorial di internet yang membahas tentang menggunakan time picker. Karena saking banyaknya malah membuat bingung untuk memilih. Salah satunya menggunakan timepicker menggunakan bootstrap. Tetapi yang saya gunakan saat ini tidak menggunakan bootstrap karena saya coba dan tidak berhasil. Saya menggunakan jquery biasa yang memanfaatkan beberapa plugin. Plugin-plugin yang saya gunakan sudah saya siapkan beserta file index.html dan images yang sudah siap dijalankan, filenya dapat di download disini.

1. Membuat folder time_picker
2.dalam folder tersebut diisi dengan file css dan js

• jquery-1.9.0.min.js
• jquery-ui-timepicker-addon.css
• jquery-ui-timepicker-addon.js
• jquery-ui.css
• jquery-ui.min.js

3. membuat folder image didalam time_picker untuk menyimpan image yang akan digunakan

• ui-bg_flat_75_ffffff_40x100.png
• ui-bg_glass_55_fbf9ee_1x400.png
• ui-bg_glass_65_ffffff_1x400.png
• ui-bg_glass_75_dadada_1x400.png
• ui-bg_glass_75_e6e6e6_1x400.png
• ui-bg_highlight-soft_75_cccccc_1x100.png
• ui-icons_222222_256x240.png

4. membuat file index.html untuk membuat form input waktu yang menggunakan time_picker

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>

<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css"/>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css"/>

<div class="example-container">

<p>Format the time:</p>

    <div>

    <input type="text" name="basic_example_3" id="basic_example_3" value="" />

</div>



<script>

    $(document).ready(function(){

        $('#basic_example_3').timepicker();

    });

</script>

convert date string in javacscript

Kali ini saya akan menuliskan tentang bagaimana mengconvert atau mengubah format tanggal dari variable string di javascript. Tulisan kali ini akan semakin saya perbaiki berdasarkan pengalaman yang sudah-sudah. Sebelumnya saya menulis dokumentasi yang saya peroleh secara asal-asalan. Tetapi seiring waktu berjalan saya akan memperbaikiya.

Langsung saja ketopik masalahnya, yaitu mengubah data string tanggal pada javascript sesuai dengan yang kita inginkan. Implementasi script ini tentunya menggunakan javascript. yang ditulis pada file html sebagai berikut:

<script>
var tl = new Date("2014-02-17");
var tanggal_lahir = tl.getDate()+"/"+(tl.getMonth()+1)+"/"+tl.getFullYear();
alert(tanggal_lahir);
</script>

Maka hasil yang akan ditampilkan dari hasil convert tanggal diatas adalah 17/02/2014

Untuk sekarang saya baru bisa menulis dengan sangat-sangat sederhana apa yang telah saya peroleh, tetapi untuk selanjutnya semoga dapat lebih lengkap dan jelas.