Belajar pemrograman
Kumpulan tutorial pemrograman untuk pemula
Form Ala Aplikasi Desktop
Sengaja saya memberi tulisan ini dengan judul diatas, karena disini kita akan membuat sebuah form yang dibuat semirip mungkin dengan form pada aplikasi desktop. Perbedaan utama yang paling saya rasakan ketika mengisi form pada aplikasi web dan aplikasi desktop adalah perpindahan dari sebuah field inputan ke field inputan berikutnya. Pada aplikasi desktop kita dapat menggunakan tombol enter sedangkan pada aplikasi web bila kita menggunakan tombol Enter maka yang terjadi adalah data kita dalam form akan segera dikirim ke server ( proses submit ). Untuk itulah dengan bantuan jquery disini kita akan membuat form yang mirip dengan form pada aplikasi desktop. Berikut ini kodenya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>kaji ( asligresik.wordpress.com )</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.20" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
</head>
<body>
<div>
<form id="form">
<div>
<label class="kiri">Nama</label><input type="text" class="kanan" /><span class="ket">harus diisi</span>
</div>
<div>
<label class="kiri">Alamat</label><input type="text" class="kanan" /><span class="ket">harus diisi</span>
</div>
<div>
<label class="kiri">Agama</label><input type="text" class="kanan" /><span class="ket">harus diisi</span>
</div>
<div>
<label class="kiri"> </label><input type="submit" class="kanan" value="Simpan"/><span class="ket">Sedang diproses ...... </span>
</div>
</form>
</div>
</body>
<script>
$(function(){
$("input:first").focus(); // focus pada inputan pertama ketika pertama kali halaman diload
$("#form").submit(function(){
var juml_inputan = $(".kanan").length - 1;
for(var i = 0; i < juml_inputan; i++){
if($(".kanan").eq(i).val() == ""){
$(".kanan").eq(i).focus();
$(".ket").eq(i).show();
return false;
}
else{
$(".ket").eq(i).hide();
}
}
// masukkan kode untuk mengolah data disini
$(".ket:last").addClass("proses").show();
return false;
})
})
</script>
<style>
div{
margin:3px;
font-style:oblique;
}
.kiri{
width:150px;
float:left;
text-decoration:underline;
}
.kanan{
border:1px solid green;
font-style:oblique;
font-size:85%;
}
.ket{
display:none;
border:1px solid #B80D0D;
background-color:#EE8181;
padding:2px;
font-size:65%;
color:#FFFFFF;
margin-left:10px;
}
.proses{
background-color:#319515;
}
</style>
</html>
Ket :
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
kode ini merujuk pada path dimana kita menyimpan file jquery, karena disini kita menggunakan library jquery untuk mempermudah pekerjaan
$("#form").submit(function(){
var juml_inputan = $(".kanan").length - 1;
for(var i = 0; i < juml_inputan; i++){
if($(".kanan").eq(i).val() == ""){
$(".kanan").eq(i).focus();
$(".ket").eq(i).show();
return false;
}
else{
$(".ket").eq(i).hide();
}
}
// masukkan kode untuk mengolah data disini
$(".ket:last").addClass("proses").show();
return false;
})
kode diatas dijalankan ketika user menekan enter atau mengklik button submit, sebelum data dikirim ke server terlebih dahulu data diperiksa apakah masih ada inputan yang belum diisi, bila ditemukan ada inputan yang masih kosong maka pointer akan difocuskan pada field tersebut dan muncul keterangan harus diisi pada sisi sebelah kanan. Ketika semua field telah diisi semua maka data akan dikirim ke server.
ini adalah kode yang melakukan pemeriksaan isi dari field inputan
if($(".kanan").eq(i).val() == ""){
$(".kanan").eq(i).focus();
$(".ket").eq(i).show();
return false;
}
Kira – kira seperti ini hasilnya
form ala desktop
Semoga dapat dimengerti, sekian dari saya terima kasih. ” Silakan bertanya bila kurang paham ………..”
Mendapatkan Kode ASCII Dengan Javascript
Mungkin timbul pertanyaan, memangnya apa yang bisa kita lakukan ketika kita mengetahui kode ASCII dari sebuah tombol yang kita tekan. Salah satu keuntungan ketika kita dapat mengetahui tombol apa yang ditekan oleh user adalah kita bisa mengontrol apilkasi kita dengan lebih baik dan meminimalkan penggunaan mouse sehingga aplikasi yang kita buat lebih mirip dengan aplikasi desktop.
Berikut ini contoh aplikasi sederhana untuk mendapatkan kode ASCII
<head>
<script LANGUAGE="JavaScript">
function tampil(e)
{
alert("kode ascii tombol yang ditekan adalah :" + e.keyCode );
}
</script>
</head>
<body onload='document.getElementById("nama").focus()'>
<label>Nama :</label>
<input type="text" id="nama" size="15" onKeyUp="tampil(event);"> <br>
</body>
Setelah kita mengetahui cara mendapatkan kode ascii, maka disini akan diberikan contoh penggunaannya dengan contoh program yang sangat sederhana sekali. Dalam program ini ketika user menekan tombol tanda panah bawah maka secara otomatis cursor akan berpindah ke textbox selajutnya. Baca tulisan ini lebih lanjut
Mencari Selisih Tanggal Dengan Javascript
Yups, ane balik lagi kawan. Setelah sekian bulan blog ini tidak terurus ( maksudnya gak ada yang baru ) maka hari ini saya kembali mencoba untuk berbagi sedikit pengalaman saya dengan javascript. Baiklah sebenarnya ini berawal dari seorang teman yang bertanya kepada saya mengenai pencarian selisih tanggal dengan menggunakan javascript. Baiklah tanpa banyak lagi saya akan memberikan sebuah program demo dalam bentuk file html yang dapat anda sekalian coba di browser masing – masing. Berikut ini adalah source codenya ( hasil adopsi dari berbagai sumber ) : Baca tulisan ini lebih lanjut
Langkah – langkah install italc
Italc ( Intelligent Teaching And Learning With Computer) adalah sebuah software yang digunakan dan sangat didedikasikan untuk keperluan belajar mengajar seorang guru dengan media komputer. Dengan menggunakan software ini seorang guru dapat melihat dan mengontrol komputer lain dalam sebuah jaringan dengan beberapa cara ( hanya melihat, melakukan remote control atau mengirimkan pesan dll). Software ini mendukung sistem operasi Windows (XP, Vista dan 7 ) sebagaimana keterangan dalam situs aslinya http://italc.sourceforge.net/.
Hal yang sangat menarik adalah bahwa software ini menggunakan lisensi GPL dan gratis sehingga anda tidak perlu mengeluarkan biaya sepeserpun, kecuali anda berminat untuk memberikan donasi untuk pengembangan software ini. Berikut ini beberapa fitur yang terdapat dalam software ini adalah :
- Melihat apa yang dilakukan siswa di komputernya dengan menggunakan overview mode dan mengambil snapshotnya
- Remote control computer mengendalikan komputer secara remote / jarak jauh
- Show a demo layar komputer dari guru dapat diperlihatkan di seluruh komputer siswa pada saat yang sama.
- Lock workstations untuk mengalihkan perhatian agar fokus pada keterangan guru
- Mengirim pesan teks kepada siswa
- Menghidupkan, mematikan dan merestart komputer secara remote.
- Logon dan logout serta mengeksekusi baris perintah secara remote
- Home scholling siswa dapat bergabung dengan menggunakan jaringan VPN hanya dengan menginstall italc client dikomputernya
Menyisipkan Video Youtube
Ketika kita selesai mengupload sebuah video di youtube, maka kita akan mendapatkan baris kode yang dapat digunakan untuk menempelkan video tersebut kedalam halaman web / blog kita, namun bagaimana jika kita ingin menempelkan video orang lain ?? Bila kita menggunakan wordpress atau mesin lainnya yang mendukung penambahan video di blog kita mungkin hal ini tidak lagi menjadi masalah, namun bagaimana jika fasilitas seperti itu tidak tersedia di blog / web kita. Nah untuk mengatasi hal tersebut maka kita dapat menggunakan iframe, untuk menyisipkan video tersebut. Misalkan kita telah menonton video dengan url www.youtube.com/watch?v=vMUdKgxJqFY, maka kita dapat menyisipkannya kedalam iframe dengan kode seperti ini, perhatikan kode terakhir setelah tanda = yaitu vMUdKgxJqFY, link ini yang akan kita gunakan. Jadi kodenya akan seperti ini
<iframe title="YouTube video player" type="text/html" width="425" height="349" src="http://www.youtube.com/embed/vMUdKgxJqFY" frameborder="0"></iframe>
sumber : http://www.quickonlinetips.com/archives/2010/10/embed-youtube-videos-in-iframes/
sekian dulu dari saya semoga bermanfaat
copy tabel di mysql
Dalam tulisan ini saya hanya akan memberikan sedikit tips singkat yang berhubungan dengan mysql. Dari judulnya saja anda sekalian pasti sudah mengerti apa yang saya bahas disini, yups …. bener sekali kali ini saya akan mencoba untuk membuat sebuah tabel dengan struktur dan data yang sama dengan tabel yang telah ada dalam sebuah database, sederhananya kita akan melakukan copy / penggandaan atau cloning sebuah tabel. Misalkan kita akan membuat tabel absensi dan absensi_mapel dengan struktur seperti dibawah ini
https://asligresik.files.wordpress.com/2012/05/tabel.png
perhatikan kedua tabel diatas, yang membedakan kedua tabel tersebut hanya terletak pada baris ketiga yaitu field kd_kelas ( tabel absensi ) dan field id_mengajar (tabel absensi_mapel), oleh karena itu kita dapat membuat tabel absensi_mapel dari tabel absensi dan kemudian mengedit field yang berbeda saja. Untuk menggandakan tabel kita dapat melakukan query seperti ini :
create table absensi_mapel as select * from absensi
maka akan terbentuk tabel baru dengan nama absensi_mapel dengan data dan struktur tabel sama persis dengan tabel absensi, trik ini juga dapat digunakan untuk keperluan merubah nama sebuah tabel, copy dengan nama yang baru lalu hapus tabel yang lama. Ini hanyalah trik dasar saja dan masih dapat dikembangkan lagi sesuai dengan kebutuhan anda. Demikian dari saya semoga bermanfaat ……….
Convert grafik flash menjadi image
Sebenarnya ide ini muncul ketika seorang teman bertanya kepada saya bagaimana caranya mengubah grafik yang digenerate oleh fusionchart free menjadi sebuah image (.jpg / .png) tujuannya adalah agar gambar tersebut bisa ditampilkan dalam laporan dengan format pdf ( konversi menggunakan tcpdf ). Setelah bertanya kepada mbah google dan berkunjung ke situs fusionchart free akhirnya didapat sebuah kesimpulan untuk versi free hal ini sangat sulit dilakukan, akhirnya saya mencoba untuk mencari tools lain yang dapat mengenerate grafik dalam format flash seperti fusionchart free sehingga jatuhlah pilihan saya pada open flash chart 2 ( http://teethgrinder.co.uk/open-flash-chart-2/ ).
Baca tulisan ini lebih lanjut
Export Menjadi File Excel Dari Aplikasi Web
Ketika kita membuat sebuah aplikasi yang berbasis web terkadang kita dituntut untuk bisa menghasilkan data dalam bentuk excel (.xls) biasanya berupa data laporan berbentuk tabel. Berikut ini saya berikan cara sederhana untuk melakukannya dalam bentuk code sederhana, dibawah ini :
<?php
$xlsfile = "kaji".date("d-m-Y").".xls"; // nama file
header("Content-type: application/vnd.ms-excel");
header("Content-Disposition: attachment; filename=$xlsfile");
?>
<table>
<tr>
<td>Kolom1</td>
<td>Kolom2</td>
<td>Kolom3</td>
<td>Kolom4</td>
<td>Kolom5</td>
</tr>
<tr>
<td>kaji kolom 1</td>
<td>kaji kolom 2</td>
<td>kaji kolom 3</td>
<td>kaji kolom 4</td>
<td>kaji kolom 5</td>
</tr>
<tr>
<td>Kaji Baris 2</td>
<td>Kaji Baris 2</td>
<td>Kaji Baris 2</td>
<td>Kaji Baris 2</td>
<td>Kaji Baris 2</td>
</tr>
</table>
Hasilnya seperti ini ketika file yang didownload dari aplikasi dibuka dengan menggunakan libreoffice:
silakan dicoba, intinya ada pada baris 3 dan 4 gan ………..
sumber : http://www.thetechnologytalk.com/2011/05/export-to-excel2003-xls-using-php/
Install game same-gnome di linux mint 12
Dulu ketika menggunakan ubuntu 9.10 saya sering bermain same-gnome, sebuah permainan sederhana namun cukup menarik bagi saya dan keponakan kecil saya. Dimana permainan tersebut hanya mencocokkan bola yang sama sampai semua bola yang tersedia tidak tersisa lagi. Ketika saya menginstall distro linux yang lainnya yaitu linux mint 12 ( ini masih keturunan ubuntu juga ) saya tidak mendapatkannya, perkiraan saya mungkin secara default pengembang linux mint tidak memasukkannya, maka saya mencoba untuk menginstallnya secara manual dengan mengetikkan perintah ajaib dalam terminal sudo apt-get install same-gnome namun hasilnya tidak seperti yang diharapkan, sepertinya paket tersebut tidak terdapat dalam repository linux mint. Setelah bertanya pada mbah google akhirnya ketemu juga paket tersebut di https://launchpad.net/ubuntu/lucid/i386/same-gnome/1:2.28.0-0ubuntu1 dan tanpa berpikir panjang langsung aja saya download paket tersebut disini . Setelah didownload lakukan penginstalan paket tersebut, yang paling mudah adalah buka file hasil download tersebut dengan aplikasi pemasang paket GDebi ( pilih aplikasi tersebut lalu klik kanan dan pilih open with – pemasang paket GDebi ), seperti gambar berikut ini
install paket
setelah itu klik aja pilihan install / pasang, dan tunggu sampai proses instalasi selesai lalu silakan jalankan aplikasi tersebut. Bila melalui terminal ketikkan same-gnome atau melalui menu seperti gambar berikut ini :
http://asligresik.files.wordpress.com/2012/04/same-gnome.png
Ini adalah screenshot dari permainan tersebut :
oke, selamat mencoba…… hanya berbagi bukan menggurui kawan
Setting modem smartfren ec1261-2 di Linuxmint 12 “lisa”
Setelah berhasil menginstall distro linuxmint 12 codename ” lisa “, tentunya saya ingin menginstall beberapa aplikasi tambahan yang diperlukan seperti geany, eclipse, web browser chromium dan menambahkan plug in firebug pada firefox bawaan distro ini. Untuk itu saya memerlukan koneksi internet dan saya memutuskan menggunakan modem smartfren ec1261-2 yang biasa saya gunakan di distro blankOn. Saya yakin distro ini dapat mengenalinya dengan baik sebagaimana keluarga ubuntu lainnya. Setelah memasang modem tersebut dan menunggu beberapa saat akhirnya modem terdeteksi dengan baik, dan langsung saja lakukan setup seperti biasanya. Namun ketika saya mencari mencari menu untuk memberi username dan password pada network manager, saya tidak berhasil menemukannya ( biasanya di network manager pada distro blankon dan ubuntu terdapat menu edit connection pada bagian paling bawah ). Ternyata menu tersebut berada pada menu utama seperti di bawah ini :
setelah itu sambungkan ke jaringan mobile broadband yang baru tadi melalui network manager seperti dibawah ini
yes, akhirrnya bisa juga terhubung ke internet, demikian sedikit pengalaman saya dan semoga bermanfaat. ” hanya berbagi pengalaman aja “
Menambah dan Mengurangi Option List di Combo Box (Select)
Dalam kesempatan kali ini kita akan sedikit bermain – main dengan elemen select ( combo box ), dimana kita akan mencoba untuk menambahkan dan menghapus option list ( daftar pilihan ) dalam sebuah halaman web menggunakan jquery. Baiklah langsung saja kita lihat code yang telah saya buat berikut ini : Baca tulisan ini lebih lanjut
Install Moodle 2.2
Moodle merupakan salah satu LMS yang cukup terkenal dan banyak digunakan di dunia pendidikan untuk membangun sebuah e-learning dengan cepat dan mudah. Mungkin karena bersifat open source sehingga software ini banyak diminati. Sebelumnya saya sudah pernah melakukan instalasi moodle 1.9.9 dan semua berjalan lancar dan mudah sekali hanya tinggal mengikuti perintah yang disediakan dan klik next – next – selesai. Namun pada versi 2.2 ternyata ada sedikit perubahan dimana moodle 2.2 mensyaratkan menggunakan database dengan charset utf8_unicode_ci dimana default di database mysql biasanya adalah utf8_general_ci , dan mengaktifkan php_extension xmlrpc dan intl . Untuk mengaktifkan kedua extension tersebut pada server berbasis debian dan turunannya dapat menginstallnya dengan perintah Baca tulisan ini lebih lanjut
Mencari Kata Dasar Dengan Stemming Arifin-Setiono
Berikut ini code program stemming Arifin-Setiono untuk melakukan pencarian kata dasar dalam bahasa Indonesia, dalam code ini disertai dengan komentar program sehingga anda dapat dengan mudah memahami maksud dari kode yang ditulis atau akan mempermudah anda ketika ingin memperbaiki kode ini bila ditemukan hal – hal yang tidak sesuai dengan harapan.
ini adalah screenshot penggunaan stemming dalam aplikasi :
Baca tulisan ini lebih lanjut
Perulangan (Looping) Sederhana
Looping atau perulangan , seleksi kondisi merupakan dua hal yang sangat penting diketahui bila anda berminat untuk terjun ke dunia pemrograman komputer, tidak perduli bahasa apa yang anda gunakan tetap saja anda akan bersentuhan dengan yang namanya looping dan seleksi kondisi. Untuk saat ini saya akan membahas sedikit mengenai looping dan dalam contoh kasus ini saya menggunakan bahasa pemmrograman php dan javascript. Baca tulisan ini lebih lanjut
Komentar Terakhir