tag:blogger.com,1999:blog-3631191408720104892024-03-04T07:26:15.870+07:00Sekedar TutorialTutorial Sederhana Untuk PemulaAndi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.comBlogger103125tag:blogger.com,1999:blog-363119140872010489.post-90450249674482098982016-03-03T12:02:00.001+07:002016-04-07T18:34:00.054+07:00Download Web CMS Sederhana Berbasis PHP dan MySQL<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExvv8YF1NtYht77yUuehUC8jmNUVuXJ30F0hzVCPhx0ermm6ypN55WjNsFJMlj4xORyEvONsThyphenhyphen4kYFwyKz2OAG14X7UMSPgid30c-DJqIQNJGQH0GAzGQik4k2ZDriJOVKXa9YwE6b0/s1600/screenshot-localhost+2016-03-03+10-21-41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExvv8YF1NtYht77yUuehUC8jmNUVuXJ30F0hzVCPhx0ermm6ypN55WjNsFJMlj4xORyEvONsThyphenhyphen4kYFwyKz2OAG14X7UMSPgid30c-DJqIQNJGQH0GAzGQik4k2ZDriJOVKXa9YwE6b0/s640/screenshot-localhost+2016-03-03+10-21-41.png" width="640" /></a></div>
Kali ini saya ingin share website yang pernah saya buat untuk tugas KP (Kerja Praktek) saya waktu kuliah dulu. Web ini dibangun dengan PHP dan MySQL tanpa framework, karena waktu itu belum tau cara menggunakan framework PHP.<br />
<br />
Tampilan Web CMS ini masih menggunakan template CSS karena saya belum kenal dengan Twitter Bootstrap. Contoh web sederhana ini saya rasa cocok untuk teman-teman yang masih pemula dan ingin tau cara bikin website CMS sendiri. Berikut ini adalah screenshot web CMS sederhana ini:<br />
<br />
<a name='more'></a><div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b>Halaman Depan :</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74dbHnmDnJJiEQ8_AiMSllPxMBGm6bDfhB1SY05I5I5a3IOgI8tfHVUQG5Y9_NEeIthKnsR8SQAd5x7vNOdeQnjRRoxWkEawn6JEK32rEzioprQWe52R_M7bfJtrCiPpxguTWKRrMKAw/s1600/screenshot-localhost+2016-03-03+10-18-27.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74dbHnmDnJJiEQ8_AiMSllPxMBGm6bDfhB1SY05I5I5a3IOgI8tfHVUQG5Y9_NEeIthKnsR8SQAd5x7vNOdeQnjRRoxWkEawn6JEK32rEzioprQWe52R_M7bfJtrCiPpxguTWKRrMKAw/s640/screenshot-localhost+2016-03-03+10-18-27.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Halaman Depan</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPd8ywLulopCwhmlsrf7RR0HIKXBn_3EWmtCd9mLGDkkU5Cq_CCk8uhON4m0305WnbY2oXaB1mjbcEHnJ_4XBiH-jNf6xDKYiMh4pmjOGby0HM-6XEUowMF0EAp8Y4XoL4gJ5LTBj4v4/s1600/screenshot-localhost+2016-03-03+10-19-01.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPd8ywLulopCwhmlsrf7RR0HIKXBn_3EWmtCd9mLGDkkU5Cq_CCk8uhON4m0305WnbY2oXaB1mjbcEHnJ_4XBiH-jNf6xDKYiMh4pmjOGby0HM-6XEUowMF0EAp8Y4XoL4gJ5LTBj4v4/s640/screenshot-localhost+2016-03-03+10-19-01.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Form Hubungi Kami</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<b>Tampilan Saat Mode "Maintenance" di "Pengaturan" Diaktifkan :</b></div>
<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9prh39xxPeo-mdGxZ_-sSwS2omZK843dZICfjysJnSscJFYqrrmBHI8tVH1RY69CGNldka1MWf_4wU7EgKlMpXweFZ4TmJoG0p-diSwEnsq08SclHyzTgC5M017aeLGx6st00WP1NdAw/s1600/screenshot-localhost+2016-03-03+10-23-09.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9prh39xxPeo-mdGxZ_-sSwS2omZK843dZICfjysJnSscJFYqrrmBHI8tVH1RY69CGNldka1MWf_4wU7EgKlMpXweFZ4TmJoG0p-diSwEnsq08SclHyzTgC5M017aeLGx6st00WP1NdAw/s640/screenshot-localhost+2016-03-03+10-23-09.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Maintenance</td></tr>
</tbody></table>
<br /></div>
<div style="text-align: justify;">
<br />
<b>Tampilan Login Administrator :</b></div>
<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDObb2NpOpaaxfCWKaCpg_K_AaTxTdRjoRdjKkKMFxQ6rwZHbHypb2LoHxwB-a65NPI_PgJY5_n79YeIkS0CuOexNBN88SjhgoUIlUs9v2MKdV1M-KViDtnaDoz2bu5tcfeTfCoPyADc/s1600/screenshot-localhost+2016-03-03+10-21-00.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDObb2NpOpaaxfCWKaCpg_K_AaTxTdRjoRdjKkKMFxQ6rwZHbHypb2LoHxwB-a65NPI_PgJY5_n79YeIkS0CuOexNBN88SjhgoUIlUs9v2MKdV1M-KViDtnaDoz2bu5tcfeTfCoPyADc/s640/screenshot-localhost+2016-03-03+10-21-00.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Login Administrator</td></tr>
</tbody></table>
<br />
<br />
<b>Tampilan Halaman administrator : </b></div>
<div style="text-align: justify;">
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExvv8YF1NtYht77yUuehUC8jmNUVuXJ30F0hzVCPhx0ermm6ypN55WjNsFJMlj4xORyEvONsThyphenhyphen4kYFwyKz2OAG14X7UMSPgid30c-DJqIQNJGQH0GAzGQik4k2ZDriJOVKXa9YwE6b0/s1600/screenshot-localhost+2016-03-03+10-21-41.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExvv8YF1NtYht77yUuehUC8jmNUVuXJ30F0hzVCPhx0ermm6ypN55WjNsFJMlj4xORyEvONsThyphenhyphen4kYFwyKz2OAG14X7UMSPgid30c-DJqIQNJGQH0GAzGQik4k2ZDriJOVKXa9YwE6b0/s640/screenshot-localhost+2016-03-03+10-21-41.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Halaman Dashboard</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<b></b></div>
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrqXNEtko6KUfQzuDYK-7ly5SYaGWuD7l3HFz3NPKFoDebToyZqPi4RWlr5Drlpby_uhjGDlceCdbzLMDQre8w9ecFe2pIAVtNK7MK-V5cDlPRaxI5_Gii2DcfnVDI8u9u-vKn5IHxNs/s1600/screenshot-localhost+2016-03-03+10-22-10.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrqXNEtko6KUfQzuDYK-7ly5SYaGWuD7l3HFz3NPKFoDebToyZqPi4RWlr5Drlpby_uhjGDlceCdbzLMDQre8w9ecFe2pIAVtNK7MK-V5cDlPRaxI5_Gii2DcfnVDI8u9u-vKn5IHxNs/s640/screenshot-localhost+2016-03-03+10-22-10.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tambah Konten</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoP7PhunJIVNbnfy8XWWdoazkwyw-zYC_LT7s5sk0Ie0tvTc-y1Fh6b4ot80HDJbkq8q9KccYl_91nvs757NkqSnu6iWiU3wT8oenv814OWRF3VUXxcj9aoi092bNHUY7b1Bkk7lrKjD0/s1600/screenshot-localhost+2016-03-03+10-22-36.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoP7PhunJIVNbnfy8XWWdoazkwyw-zYC_LT7s5sk0Ie0tvTc-y1Fh6b4ot80HDJbkq8q9KccYl_91nvs757NkqSnu6iWiU3wT8oenv814OWRF3VUXxcj9aoi092bNHUY7b1Bkk7lrKjD0/s640/screenshot-localhost+2016-03-03+10-22-36.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Pengaturan Website</td></tr>
</tbody></table>
<br />
Demo website URL :<br />
<a href="http://demo.asanoer.com/sholihin.com/simple-cms/"><b>http://demo.asanoer.com/sholihin.com/simple-cms/</b></a><br />
<br />
<br />
Demo admin URL :<br />
<a href="http://demo.asanoer.com/sholihin.com/simple-cms/myadmin/"><b>http://demo.asanoer.com/sholihin.com/simple-cms/myadmin/</b></a><br />
<br />
<br />
Link downloadnya :<br />
<span style="color: blue;"><b><a href="https://github.com/andi-sholihin/simpleweb" target="_blank">https://github.com/andi-sholihin/simpleweb</a></b></span><br />
<br />
Panduannya dan link downloadnya ada di bagian bawah, dari tombol "Download Zip" di pojok atas juga bisa. Buat yang mau otak-atik juga silahkan. Jangan lupa di "Star" ya teman-teman. Seperti biasa saya tunggu kritik dan sarannya. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com67tag:blogger.com,1999:blog-363119140872010489.post-89362480368609958052015-07-10T04:56:00.001+07:002015-07-10T15:36:12.645+07:00Fungsi var_dump(), Senjata Para Master PHP Menghadapi Error<div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjET-I8eA5WqLdwDLL1zPO2XR9s23ZohhwKQ_Qm76vJvYEI2MPUzpIJ8uKp52D5HslOqXDnU1SaWJU_23XNmh4Tg4hOVKHrqSt7SnfPfF2inKf8j0AO0EWjReYEe2xaLQJnLoCMOFC4Xi4/s1600/keep-calm-and-var-dump-2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjET-I8eA5WqLdwDLL1zPO2XR9s23ZohhwKQ_Qm76vJvYEI2MPUzpIJ8uKp52D5HslOqXDnU1SaWJU_23XNmh4Tg4hOVKHrqSt7SnfPfF2inKf8j0AO0EWjReYEe2xaLQJnLoCMOFC4Xi4/s640/keep-calm-and-var-dump-2.png" width="548" /></a></div><div style="text-align: justify;">Sebenarnya niat saya menulis artikel ini untuk share pengalaman saja dengan teman-teman semua tentang trik sederhana namun masih jarang dipakai oleh programmer pemula dalam mengembangkan aplikasi kebanggaannya. Walaupun sangat sederhana namun kita perlu tau apa dan bagaimana menangani error yang sering membuat kita pusing tujuh keliling saat program kita tidak berjalan sesuai yg kita harapkan, padahal solusinya ternyata cukup mudah.</div><br />
<a name='more'></a><br />
<b>Tentang Error di PHP</b><br />
<div style="text-align: justify;"><b>Syntax Error</b> : Ini error yang relatif mudah kita atasi, error ini sering kita dapatkan saat kita salah ketik, lupa titik koma, lupa mendeklarasikan variabel dan semacamnya. Error ini terjadi karena compiler tidak mengenali bagian sourcecode atau menemukan codingan yang tidak sesuai dengan struktur sintaks yang seharusnya. Misalnya kita mendapatkan error :</div><pre>Parse error: syntax error, unexpected T_ECHO in /var/www/andi/example.php on line 3</pre><div style="text-align: justify;">dari pesan error itu dengan mudah kita tau ternyata kita lupa memberi titik koma ( ; ) di baris sebelum baris 3.</div><br />
<div style="text-align: justify;"><b>Semantic Error</b> : Nah, error ini yang sering bikin kita pusing dan tidak jarang membuat kita putus asa karena relatif susah diatasi. Error semantik tidak menampilkan pesan error seperti pada sintaks error karena program kita berjalan lancar tanpa hambatan namun hasil atau output yang keluar tidak sesuai dengan harapan kita. Jika kita bertemu dengan error semacam ini maka tidak perlu khawatir karena seperti kata pepatah "dimana ada kemauan disitu ada jalan". Salah satu senjata yang akan kita gunakan adalah fungsi var_dump();</div><br />
<br />
<b>Apa itu var_dump?</b><br />
<div style="text-align: justify;">Secara sederhana fungsi <i>var_dump()</i> mirip dengan <i>echo</i>, sama-sama bisa menampilkan isi dari variabel, bedanya <i>var_dump()</i> bisa menampilkan informasi terstruktur dari suatu ekspresi baik berupa variabel, object, array, dan lainnya.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Lalu kalau <i>var_dump</i> hampir sama dengan <i>echo</i> kenapa tidak pakai <i>echo</i> saja? Jawabannya sederhana, karena echo tidak bisa memberikan apa yang kita butuhkan saat debug aplikasi. Masih penasaran juga? mari kita perhatikan contoh berikut ini:</div><br />
<b>Contoh 1 :</b><br />
<pre class="brush:php"><?php
$data = array('apel', 'manggis', 'jeruk', 'durian');
echo $data;
?>
</pre><br />
Outputnya: <br />
<b>Array</b><br />
<br />
mari kita ubah sedikit menjadi : <br />
<pre class="brush:php"><?php
$data = array('apel', 'manggis', 'jeruk', 'durian');
var_dump($data);
?>
</pre><br />
Outputnya :<br />
<pre>array(4) { [0]=> string(4) "apel" [1]=> string(7) "manggis" [2]=> string(5) "jeruk" [3]=> string(6) "durian" }</pre><br />
<div style="text-align: justify;">Nah, sudah tau kan bedanya? hmmm tapi sepertinya output masih tidak rapi dan tidak mudah dibaca, mari kita tambahi tag <b><pre></b> yang mengapit <i>var_dump()</i>. tag <b><pre></b> berguna untuk membuat teks yg diapit tampil apa adanya seperti teks biasa di notepad.</div><br />
<pre class="brush:php"><?php
$data = array('apel', 'manggis', 'jeruk', 'durian');
echo '<pre>';
var_dump($data);
echo '</pre>';
?>
</pre>Outputnya:<br />
<pre>array(4) {
[0]=>
string(4) "apel"
[1]=>
string(7) "manggis"
[2]=>
string(5) "jeruk"
[3]=>
string(6) "durian"
}</pre><br />
<div style="text-align: justify;">Nah, contoh berikutnya kita akan belajar menangani error yang dibilang cukup bikin bingung kita-kita yang masih pemula alias <b>newbie</b> kata orang madura :v</div><br />
<b>Contoh 2:</b><br />
<pre class="brush:php"><?php
$a = 2;
$b = 4 * 0.5;
if ($a === $b) {
echo 'A sama dengan B';
} else {
echo 'A tidak sama dengan B';
}
?>
</pre><br />
Kalau dilihat sekilas maka outputnya :<br />
<b>A sama dengan B</b><br />
<br />
tapi tunggu dulu, output program diatas adalah :<br />
<b>A tidak sama dengan B</b><br />
<br />
padahal kan <br />
<b>4 * 0.5 = 2</b><br />
<br />
kenapa <b>$a</b> tidak sama dengan <b>$b</b>?<br />
Mari kita cek dengan fungsi <b>var_dump()</b><br />
<br />
<pre class="brush:php"><?php
$a = 2;
$b = 4 * 0.5;
var_dump($a);
var_dump($b);
var_dump($a === $b);
if ($a === $b) {
echo 'A sama dengan B';
} else {
echo 'A tidak sama dengan B';
}
?>
</pre><br />
Output:<br />
<pre>int(2)
float(2)
bool(false)
A tidak sama dengan B</pre><br />
<div style="text-align: justify;">Ternyata dari output di atas kita jadi tau ternyata variabel <b>$a</b> tipe datanya integer sedangkan variabel <b>$b</b> tipe datanya float sehingga jika kita bandingkan dengan operator perbandingan <b>===</b> hasilnya false karena operator perbandingan tersebut selain membandingkan value juga membandingkan tipe datanya apakah sama atau tidak.</div><br />
<div style="text-align: justify;">Untuk memperbaikinya bisa dengan mengganti operator perbandingan <b>===</b> menjadi <b>==</b> saja, contoh :</div><pre class="brush:php"><?php
$a = 2;
$b = 4 * 0.5;
if ($a == $b) {
echo 'A sama dengan B';
} else {
echo 'A tidak sama dengan B';
}
?>
</pre><br />
Output: <br />
<pre><b>A sama dengan B</b></pre><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Mungkin cukup sekian, selebihnya silakan teman-teman meng-explore sendiri contoh-contoh yang lain. Akhirnya saya tunggu kritik dan sarannya, <a hre="http://plat-m.com" href="https://plat-m.com/" target="_blank">Salam Blogger Madura</a>.</div>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com3tag:blogger.com,1999:blog-363119140872010489.post-37169745544414247782015-06-10T21:02:00.001+07:002015-06-10T21:09:50.410+07:00Berkenalan dengan Server-sent Events<div style="text-align: justify;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://techtach.com/wp-content/uploads/2013/06/server-sent1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://techtach.com/wp-content/uploads/2013/06/server-sent1.png" height="272" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : http://techtach.com</td></tr>
</tbody></table>
<div style="text-align: justify;">
<b><i>Server-sent Events,</i> Apa dan Bagaimana?</b></div>
<div style="text-align: justify;">
Jika biasa halaman <i>web</i> harus <i>request </i>ke <i>server </i>dulu untuk mendapatkan data baru maka dengan <i>Server-sent Events </i>server dapat langsung mengirim data baru ke halaman <i>web</i> tersebut. Nah ini tentu berbeda dengan <i>AJAX </i>yang walaupun berjalan di latar belakang namun harus <i>request</i> terlebih dahulu baru mendapatkan data. Hal ini tentu sangat menguntungkan jika menginginkan aplikasi web yang langsung menampilkan <i>update</i> data terbaru dari <i>server</i> seperti monitor jaringan internet, monitor kondisi <i>server</i>, media sosial, dan lain sebagainya.</div>
<div style="text-align: justify;">
<br />
<a name='more'></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Tak Kenal Maka Tak Sayang</b></div>
<div style="text-align: justify;">
Nah, kali ini kita akan berkenalan lebih jauh tentang <i>Server-sent Events </i>agar tidak mengalami seperti yang dikatakan pepatah "Tak kenal maka tak sayang". Kita akan memulai membuat sebuah program sederhana. Tujuan program ini adalah untuk menerima waktu terbaru dari <i>server</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Menerima <i>Events</i> dari <i>Server</i></b></div>
<div style="text-align: justify;">
API <i>(Application Programming Interface)</i> dari <i>Server-sent Event </i>ini terdapat di <b><span style="color: blue;"><a href="https://developer.mozilla.org/en/Server-sent_events/EventSource" target="_blank">EventSource</a></span></b> interface. Untuk membuka koneksi ke server dan memulai menerima <i>events </i>dari <i>server </i>buatlah <i>object</i> <b><span style="color: blue;"><a href="https://developer.mozilla.org/en/Server-sent_events/EventSource" target="_blank">EventSource</a> </span></b>baru dan tentukan alamat URI yang meng-generate <i>events</i> tersebut, misalnya:<br />
<br />
<pre class="brush: javascript">var evtSource = new EventSource("server-send.php");
</pre>
<br />
Jika <i>script</i> yang meng-<i>generate</i> <i>event</i> berada di alamat <i>domain</i> yang berbeda maka kita harus membuat <b><span style="color: blue;"><a href="https://developer.mozilla.org/en/Server-sent_events/EventSource" target="_blank">EventSource</a></span></b> object baru dengan menentukan URI dan <i>options</i> <i>dictionary</i>,misalnya:<br />
<br />
<pre class="brush:javascript">var evtSource = new EventSource(
"http://localhost/andi/server-send.php",
{
withCredentials: true
}
);
</pre>
<br />
Jika kita sudah meng-instansiasi <i>EventSource</i> maka kita dapat memulai me-<i>listen</i> <i>message</i> dari <i>server</i>.<br />
<br />
<pre class="brush:javascript">evtSource.onmessage = function(e) {
document.getElementById("jam").innerHTML = e.data;
}
</pre>
<br />
<br />
<b>Mengirim <i>Event</i> dari <i>Server</i></b><br />
Script program di server yang bertugas mengirimkan data <i>event</i> harus merespon menggunakan <i><b>MIME type text/event-stream</b></i>. Setiap notifikasi dikirimkan berupa <i>text</i> yang diakhiri oleh dua buah baris baru. Contohnya dalam program PHP adalah sebagai berikut:<br />
<br />
<pre class="brush:php"><?php
header("Content-Type: text/event-stream");
echo "id: ".time().PHP_EOL;
echo "data: waktu server saat ini : ".date("Y-m-d H:i:s").PHP_EOL.PHP_EOL;
ob_flush();
flush();
?>
</pre>
<br />
<b><br />
</b> <b>Penanganan <i>Error</i> (<i>Error handling</i>)</b><br />
Ketika terjadi masalah (misalnya karena jaringan terputus atau masalah hak akses), sebuah <i>error</i> <i>event</i> di-<i>generate</i>. Kita bisa menangani masalah ini dengan menggunakan <b><i>onerror</i></b> <i>callback</i> di <b><i>EventSource</i></b> <i>object</i>.<br />
<br />
<pre class="brush:javascript">evtSource.onerror = function(e) {
alert("Maaf, terjadi kesalahan.");
};
</pre>
<br />
<br />
<b>Memutuskan Koneksi <i>Events</i></b><br />
Secara <i>default</i>, jika koneksi antara <i>client</i> dan <i>server</i> terputus, maka koneksi akan dihubungkan kembali. Kita bisa mengakhiri koneksi ini dengan <i>method</i> <b>.<i>close</i></b>().<br />
<br />
<pre class="brush:javascript">evtSource.close();
</pre>
<br />
Untuk yang masih bingung bisa mencobanya dengan Download Program Demonya di <a href="https://app.box.com/s/ll7vm9wb7711wj0rkovg2fw3fscs979m"><span style="color: blue;"><b>https://app.box.com/s/ll7vm9wb7711wj0rkovg2fw3fscs979m</b></span></a><br />
<br />
Referensi : <a href="https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events">https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events</a><br />
<br />
Mungkin ini saja yang dapat saya sampaikan, saya tunggu kritik dan saran dari teman-teman. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura</a></div>
Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com9tag:blogger.com,1999:blog-363119140872010489.post-11602710385224404352015-06-03T12:01:00.000+07:002015-07-08T13:00:48.880+07:00Membuat Jam Digital Sesuai Waktu Server dengan PHP dan Javascript<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2JjqW0ky6cLnnQVzLLzIG0zOqOV4JdOMYgl8ta_pyjX2qbYbgMG1_JEzOAQ7wzKo8jVXxYdH7FJL0bIHu3nxM-mzz0zl-X04VeHgO7h0lJSCc1CwicsZAd-mEh_MeqKX2UIhAK1lwas/s1600/Screenshot+from+2015-06-03+11%253A52%253A12.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2JjqW0ky6cLnnQVzLLzIG0zOqOV4JdOMYgl8ta_pyjX2qbYbgMG1_JEzOAQ7wzKo8jVXxYdH7FJL0bIHu3nxM-mzz0zl-X04VeHgO7h0lJSCc1CwicsZAd-mEh_MeqKX2UIhAK1lwas/s1600/Screenshot+from+2015-06-03+11%253A52%253A12.png" /></a></div><br />
Kali ini kita akan belajar program sederhana yaitu jam digital yang waktu awalnya diambil dari server sehingga tidak terpengaruh oleh jam yang ada di client. Ok deh langsung saja ke codingnya:<br />
<a name='more'></a><br />
<pre class="brush:javascript"><script type="text/javascript">
var detik = <?php echo date('s'); ?>;
var menit = <?php echo date('i'); ?>;
var jam = <?php echo date('H'); ?>;
function clock()
{
if (detik!=0 && detik%60==0) {
menit++;
detik=0;
}
second = detik;
if (menit!=0 && menit%60==0) {
jam++;
menit=0;
}
minute = menit;
if (jam!=0 && jam%24==0) {
jam=0;
}
hour = jam;
if (detik<10){
second='0'+detik;
}
if (menit<10){
minute='0'+menit;
}
if (jam<10){
hour='0'+jam;
}
waktu = hour+':'+minute+':'+second;
document.getElementById("clock").innerHTML = waktu;
detik++;
}
setInterval(clock,1000);
</script>
<div style="text-align:center;">
<h3>WAKTU SAAT INI :</h3>
<h1 id="clock"></h1>
</div></pre><br />
mudah sekali kan sobat cara bikinnya, sekarang kita sudah tau cara membuat jam dengan javascript. Saya tunggu kritik dan sarannya. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com8tag:blogger.com,1999:blog-363119140872010489.post-53891077838031376152015-04-01T22:14:00.004+07:002022-03-09T11:45:01.327+07:00Sistem Informasi Akademik Sekolah Berbasis Web Dengan PHP dan MySQL<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTJyyBzbNrFARyE2SDeURiz0IO9UykQ6oreLhSrg8cCkVhpv7xxPTVPteVFJEh_FHjqYpaXDWWru_FaAIjR_2Jntm14DXb3B9Gvfv6bf8tRLGgG1su_bYDKq6q7hpNnLbNEChbMZuqrc/s1600/akademik2.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTJyyBzbNrFARyE2SDeURiz0IO9UykQ6oreLhSrg8cCkVhpv7xxPTVPteVFJEh_FHjqYpaXDWWru_FaAIjR_2Jntm14DXb3B9Gvfv6bf8tRLGgG1su_bYDKq6q7hpNnLbNEChbMZuqrc/s1600/akademik2.png" /></a> <br />
Waktu lagi iseng buka folder semasa dulu, di folder semester 5 ada folder Rekayasa Perangkat Lunak saya menemukan final project alias tugas akhir semester.<br />
<br />
Saya inget waktu itu saya dan kelompok saya mengajukan untuk membuat Sistem Informasi Akademik Sekolah berbasis web dengan PHP dan mySQL atau disingkat "SIRSAK", ya semacam Sistem Informasi Rapor Online gitu lah pokoknya. Hasil nilainya kami sekelompok dapat nilai A dari dosen mata kuliah Rekayasa Perangkat Lunak ini.<br />
<a name='more'></a><br />
Nah daripada program ini sia-sia tidak terpakai di laptop mending saya bagikan di blog ini, siapa tau lebih bermanfaat buat teman2 semua.<br />
<br />
Aplikasi Sistem Informasi Sekolah ini terdiri dari 2 sisi yaitu halaman Admin dan halaman User.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzB8jtjS94ZyUZ5sF3UIRY5oLBLIjtP5BATdzNXvNZxUC9KsE7wqpt2OIsYSuROrNoDRPgv_TcM1YeUBcHkuJKstiW0kMI5ORXgbWqqVNjDDPyvHwCxKD6UZR5UyjIrlJBY2y2xstm5s/s1600/login-utama.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzB8jtjS94ZyUZ5sF3UIRY5oLBLIjtP5BATdzNXvNZxUC9KsE7wqpt2OIsYSuROrNoDRPgv_TcM1YeUBcHkuJKstiW0kMI5ORXgbWqqVNjDDPyvHwCxKD6UZR5UyjIrlJBY2y2xstm5s/s1600/login-utama.png" /></a><br />
<br />
<br />
Halaman Admin untuk login :<br />
– Super Admin (username: <b>admin</b>, password: <b>admin</b>)<br />
– Staff TU (username: <b>sofyan</b>, password: <b>12345</b>)<br />
– Kepala Sekolah (username: <b>hasan</b>, password: <b>12345</b>)<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FEZpWK8XvkhOlud20a0dbWTCewwqA8hChEDoxtLiUUBFOBQJxNR0jeUASXUgYLyYJgPW61AhPACQEe-qFp34AbWyhvK3eJ10_mBNPm-9B1PoEK-4lMFMspTKsTcB0-mgrfYB7x3l6-k/s1600/admin0.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FEZpWK8XvkhOlud20a0dbWTCewwqA8hChEDoxtLiUUBFOBQJxNR0jeUASXUgYLyYJgPW61AhPACQEe-qFp34AbWyhvK3eJ10_mBNPm-9B1PoEK-4lMFMspTKsTcB0-mgrfYB7x3l6-k/s1600/admin0.png" /></a><br />
<br />
<br />
Sedangkan halaman User untuk login :<br />
– Siswa atau Peserta Didik (username: <b>1234</b>, password: <b>12345</b>)<br />
– Orang Tua Siswa (username: <b>001234</b>, password: <b>12345</b>)<br />
– Guru Pengajar (username: <b>11</b>, password: <b>12345</b>)<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazlItrwITZDpO4kAMHI_pmbngJk8PzwhLgjBYCKRyTcFliWNyT91Aob2nscTvoyg1pjVmjWW4QRMZXQMy-ZVWyCtAe0M5kKBdSFlwX1Hl4HuHWgC40s6JRacCv-jCYvYSfN-_uCYe3Rk/s1600/akademik1.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazlItrwITZDpO4kAMHI_pmbngJk8PzwhLgjBYCKRyTcFliWNyT91Aob2nscTvoyg1pjVmjWW4QRMZXQMy-ZVWyCtAe0M5kKBdSFlwX1Hl4HuHWgC40s6JRacCv-jCYvYSfN-_uCYe3Rk/s1600/akademik1.png" /></a> <br />
<br />
Masing-masing user tersebut punya level hak akses masing-masing untuk mengakses menu. Berikut ini adalah beberapa fitur yang ada di sistem informasi sekolah ini:<br />
<br />
<b>1. Rekapitulasi Nilai</b><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHUgozFQTxmkGQSOk1Wpn8B0tdqGbos_Xh2ABjRTmGqAASflS1KUpnXGAPdR70CG5HTFWXUKpfUyDmcmp-UaZAf9Pui8RX7qPid9c5qa6XwXi3w_vUGZ6tB6fX-yypqU4qozJkDDaVNQ/s1600/admin2.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHUgozFQTxmkGQSOk1Wpn8B0tdqGbos_Xh2ABjRTmGqAASflS1KUpnXGAPdR70CG5HTFWXUKpfUyDmcmp-UaZAf9Pui8RX7qPid9c5qa6XwXi3w_vUGZ6tB6fX-yypqU4qozJkDDaVNQ/s1600/admin2.png" /></a><br />
<br />
<br />
<br />
<b>2. Input Jadwalan Pelajaran</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxNnmf1y-z2uk1aMYChuRI0bC8peaxiHvggM-3J00M0p8TMnNz6pVRbPjNbH-QZ1syclvcvl0xZ5k7JOGKk7kekKXYzWs7kJlmGnBK31HhhSWJlx0hojWUyjjHaOwRCvuFegd40KvSrY/s1600/admin3.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxNnmf1y-z2uk1aMYChuRI0bC8peaxiHvggM-3J00M0p8TMnNz6pVRbPjNbH-QZ1syclvcvl0xZ5k7JOGKk7kekKXYzWs7kJlmGnBK31HhhSWJlx0hojWUyjjHaOwRCvuFegd40KvSrY/s1600/admin3.png" /></a><br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazlItrwITZDpO4kAMHI_pmbngJk8PzwhLgjBYCKRyTcFliWNyT91Aob2nscTvoyg1pjVmjWW4QRMZXQMy-ZVWyCtAe0M5kKBdSFlwX1Hl4HuHWgC40s6JRacCv-jCYvYSfN-_uCYe3Rk/s1600/akademik1.png"><br />
</a> <b><complete id="goog_1102722879">3. Diagram </complete>Statistik Nilai Siswa</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiae8cSQjd9HvVgf2QQdRK2dL9gOV3c9gTNZdOMWUdNtjuKpWzVO17YYw_XL-xwIvDo7HdiwOfE2PGYibw9WI8h-YvtpxKdht5lJ44IMd2qgfdQg3DvIVBmEEsHLiGFFeqW-T-AOMl36QY/s1600/akademik3.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiae8cSQjd9HvVgf2QQdRK2dL9gOV3c9gTNZdOMWUdNtjuKpWzVO17YYw_XL-xwIvDo7HdiwOfE2PGYibw9WI8h-YvtpxKdht5lJ44IMd2qgfdQg3DvIVBmEEsHLiGFFeqW-T-AOMl36QY/s1600/akademik3.png" /></a><br />
<br />
<br />
<b>4. Lihat Jadwal Pelajaran dan Foto Guru</b><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6NhWzSUndHdxBfsnoSo0wj2H48tUIoOYE_LAP1jkJ79G0Wmy-xusjqIV-w3LbHxqt3iWbDkgHsWjPmvjm4Uj5bQg20KODWhyphenhyphendDUlCnQwEP-_oGpzp563mjpmoX4u1zkt3XlIald-2Ew/s1600/akademik4.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6NhWzSUndHdxBfsnoSo0wj2H48tUIoOYE_LAP1jkJ79G0Wmy-xusjqIV-w3LbHxqt3iWbDkgHsWjPmvjm4Uj5bQg20KODWhyphenhyphendDUlCnQwEP-_oGpzp563mjpmoX4u1zkt3XlIald-2Ew/s1600/akademik4.png" /></a><br />
<br />
<br />
<b>5. Input Nilai Siswa oleh Guru Mata Pelajaran</b><br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3uK3FUlnZZ0AC38VwhybiaipIuQSBOG3UMkhcyFc6hnc9VYNn5B_sALXHQh95YE1sAamIcvn0OlrpfyBc5p54jPpt1buKdxS_pyAhq5yFhLokTlfGBcSYEXLXOJ9ydmxVC3mUiAI-c_E/s1600/akademik5.png" /><br />
<br />
Dan masih banyak lagi fitur yang lain seperti input data SPP, data kelas, data guru, data siswa, data wali murid, data admin, lihat teman sekelas dan masih banyak lagi yang lainnya.<br />
<br />
kalau kamu penasaran silakan mencobanya langsung:<br />
<span style="color: blue;"><br />
</span><span style="font-size: large;"><span style="color: orange;"><span style="color: blue;"><b><span style="color: blue;"><a href="http://demo.asanoer.com/sirsak/" target="_blank">Demo Program</a></span> <span style="color: black; font-size: small;">(thanks Kang Asanoer)</span></b></span> </span>atau <span style="color: blue;"><b><a href="https://app.box.com/s/gndw8be5g8ih9no1gzbes5fy8j8sfnam" target="_blank">Download Disini</a> </b></span></span><br />
<span style="font-size: large;"><span style="color: blue;"><b><br />
</b></span></span> <span style="font-size: small;">Sistem informasi ini masih banyak kekurangan dimana-mana, maklum namanya juga mahasiswa semester 5 yang bikin, hehehe. Jika menemui kendala jangan sungkan-sungkan berkomentar, semoga dapat bermanfaat</span>.<br />
<br />
Kunjungi juga <b><a href="http://www.sholihin.com/2016/03/download-web-cms-sederhana-berbasis-php.html" target="_blank">Download Web CMS Sederhana Berbasis PHP dan MySQL</a></b><br />
<br />
<a href="http://plat-m.com/" target="_blank">Salam Blogger Madura!</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com258tag:blogger.com,1999:blog-363119140872010489.post-33700221770087382852015-02-13T11:08:00.000+07:002015-02-14T14:29:20.280+07:00Program PHP untuk Mencari Jarak Tempuh Antara Dua Alamat<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbuZz55NksbCJDNaE7-mcW1_CdTySAu3fw-tCjrZ6VNO2ZutqGwANiFt34Itxgkn9YGT8hwAsdP1Y1vYih8b5iNn2bC78U7TD-7GAe_KugTFvo62DHDmnvDQgmSkVr8VnIh3CIbXVEPlU/s1600/scriptcase.net.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbuZz55NksbCJDNaE7-mcW1_CdTySAu3fw-tCjrZ6VNO2ZutqGwANiFt34Itxgkn9YGT8hwAsdP1Y1vYih8b5iNn2bC78U7TD-7GAe_KugTFvo62DHDmnvDQgmSkVr8VnIh3CIbXVEPlU/s1600/scriptcase.net.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Kesempatan kali ini kita akan belajar tentang cara membuat program mencari atau menghitung jarak tempuh dan waktu tempuh dari dua alamat dengan menggunakan PHP dan Google Maps API Web Services. Google Maps API Web Services ini terdiri dari banyak service yang bisa kita manfaatkan yaitu :<br />
<a name='more'></a><br />
- Directions API<br />
- Distance Matrix API<br />
- Elevation API<br />
- Geocoding API<br />
- Time Zone API<br />
<br />
Nah, Service yang akan kita gunakan adalah Google Distance Matrix API. Misalnya kamu mau menghitung atau mencari jarak tempuh dari Jalan Perak Timur Surabaya ke Jalan Wonokromo Surabaya, hasilnya 12,4 KM dengan waktu tempuh kurang 22 menit.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjivzNi90qRgHiY2aTEgy45CIcFozlfmcIUDEopeKh3GOtZWWcbmSAdXD2T9klrGIr2VVcTMQtGdbWrksB5Gk6sBBx_r2l2yAv6ezTNwJPVPdnZ3kvV76bf78CBEecpDw_OXv9uS0HJ9_4/s1600/distance-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjivzNi90qRgHiY2aTEgy45CIcFozlfmcIUDEopeKh3GOtZWWcbmSAdXD2T9klrGIr2VVcTMQtGdbWrksB5Gk6sBBx_r2l2yAv6ezTNwJPVPdnZ3kvV76bf78CBEecpDw_OXv9uS0HJ9_4/s1600/distance-2.png" /></a></div>
<br />
<br />
Bagaimana cara membuat program PHP-nya? Ayo kita ikuti langkah-langkah berikut ini:<br />
<br />
1. Buat folder baru di htdocs dengan nama <b>distance</b><br />
<br />
2. kita buat halaman depan untuk inputnya, kita simpan dengan nama <b>index.html</b><br />
<pre class="brush:html"><html>
<head>
<title>Hitung Jarak - Google Distance Matrix API</title>
</head>
<body>
<form name="form" action="distance.php" method="post">
<p>
Alamat Asal :<br />
<input type="text" name="asal" required="required" size="40" />
</p>
<p>
Alamat Tujuan :<br />
<input type="text" name="tujuan" required="required" size="40" />
</p>
<input type="submit" name="submit" value="Cari Jarak" />
</form>
</body>
</html>
</pre>
<br />
3. Lalu kita buat program intinya, kita simpan dengan nama <b>distance.php</b><br />
<pre class="brush:php"><?php
$asal = !empty($_POST['asal']) ? urlencode($_POST['asal']) : null;
$tujuan = !empty($_POST['tujuan']) ? urlencode($_POST['tujuan']) : null;
$urlApi = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$asal."&destinations=".$tujuan."&language=id-ID";
$result = file_get_contents($urlApi);
$data = json_decode($result, true);
?>
<p>
Alamat Asal : <br />
<strong><?php echo $data['origin_addresses'][0] ?></strong>
</p>
<p>
Alamat Tujuan : <br />
<strong><?php echo $data['destination_addresses'][0] ?></strong>
</p>
<p>
Jarak Tempuh : <br />
<strong><?php echo $data['rows'][0]['elements'][0]['distance']['text'] ?></strong>
</p>
<p>
Waktu Tempuh : <br />
<strong><?php echo $data['rows'][0]['elements'][0]['duration']['text'] ?></strong>
</p>
<button onclick="history.back()">Kembali</button>
</pre>
<br />
4. Mari kita coba program ini, pastikan komputer kita terhubung dengan internet. masukkan alamat http://localhost/distance<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_IUZEMD86OCRemzv2X6LiScxE-achTMndV-sH976DofEl0VtzSOgvjwk4d-RpZnnhZB-Wu5DhNHdcXVUsvJ5wGVyxZgT3WEyk_2FpXMHpRlsPM4YwC0n8WlNPtteVfnwoaMT8-HNQrAs/s1600/distance-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_IUZEMD86OCRemzv2X6LiScxE-achTMndV-sH976DofEl0VtzSOgvjwk4d-RpZnnhZB-Wu5DhNHdcXVUsvJ5wGVyxZgT3WEyk_2FpXMHpRlsPM4YwC0n8WlNPtteVfnwoaMT8-HNQrAs/s1600/distance-1.png" /></a></div>
<br />
<br />
Masih bingung? mari kita coba dengan demo program berikut ini :<br />
<br />
<a href="http://sirs.is-best.net/distance" target="_blank"><b>Demo Program</b></a> atau <a href="https://app.box.com/s/3lpxz2hwqbc2p7ejc5nc9evtq9d5vcr6" target="_blank"><b>Download Source Code</b></a><br />
<br />
Bagaimana sob, mudah bukan? seperti biasa saya tunggu kritik dan sarannya. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com29tag:blogger.com,1999:blog-363119140872010489.post-36973709444519785452014-12-19T22:15:00.001+07:002014-12-24T10:40:52.579+07:00Cara Menghapus Virus/Malware Santri Mabuk/Gadis Mabuk di Facebook<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFGja000XCeXMoiOUad5fYdfbER1Lx6DKw3o3Y-2oe4zuV0laYPq6VK6awp7M4NR7K7YHzCmGhZIYebjvCm2RMQ24DKVFD63uNvSSAvlC6pdH0f1yqsU2kUgeGhr_BSF_a6OCwqmW4Iw/s1600/Image+4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFGja000XCeXMoiOUad5fYdfbER1Lx6DKw3o3Y-2oe4zuV0laYPq6VK6awp7M4NR7K7YHzCmGhZIYebjvCm2RMQ24DKVFD63uNvSSAvlC6pdH0f1yqsU2kUgeGhr_BSF_a6OCwqmW4Iw/s1600/Image+4.png" /></a></div>
<br />
Lagi iseng nyobain nge-klik virus Santri Mabuk Setelah Pesta, sebenarnya belum masuk kategori virus sih. Malware kayak gini emang lagi mewabah di fb atau facebook dan sudah banyak teman saya jadi korbannya. Setelah dicobain ternyata virus santri mabuk ini menyamar sebagai addons di Mozilla Firefox bernama <b>Astro Play</b> atau extension di Chrome bernama <b>Temp Show</b>. Saya lihat di blog lain namanya beda. Opera masih kebal sama virus ini :D<br />
<a name='more'></a><br />
<b>Pencegahan agar profil fb kita tidak ditag / ditandai:</b><br />
Aturlah pengaturan privasi kamu agar jika kamu ditandai teman kamu tidak langsung muncul di beranda melainkan harus kita setujui.<br />
<ol>
<li>Klik Menu -> <b>Pengaturan</b>, lalu klik tab <b>Kronologi dan Penandaan.</b><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14B8jqm0YkqMJ_VHBsoS6t-8unCYRrXZ82PiXmyz3fibGMjBP-nQp1WiBO85UVlWnDNi0wtjzFfr368hoShBEUpyTjp-Ge7FBb-xAV88XxKgVt31dlzWJ5isWXJxLTGHat2fEb7u4ATE/s1600/menu-pengaturan.png" height="368" width="640" /></li>
<br />
<li>aturlah sesuai selera kamu, pokoknya semua kiriman, tag / penanda harus kamu setujui dulu. Contohnya berikut pengaturan privasi FB saya:<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAa0X0wHB6yL-b-mIhp2o6CgmbWUa96Ehm_XnuCf-kk9LjSAzCHse3lP8-XQorHkRII-23uxiEldVFyprDtmrkkOgdK8042BKybNBeIsq-z0LsADoyAqSJXn36YlOs6NksiQ8S7v0q6Bk/s1600/pengaturan-privasi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAa0X0wHB6yL-b-mIhp2o6CgmbWUa96Ehm_XnuCf-kk9LjSAzCHse3lP8-XQorHkRII-23uxiEldVFyprDtmrkkOgdK8042BKybNBeIsq-z0LsADoyAqSJXn36YlOs6NksiQ8S7v0q6Bk/s1600/pengaturan-privasi.png" height="330" width="640" /></a></div>
</li>
</ol>
<div>
<ol></ol>
</div>
<b><br />
</b> <b>Cara menghapus virus di Mozilla Firefox:</b><br />
<ol>
<li>Menu Tools -> Addons -> Extensions atau kalo bingung nyarinya langsung aja ketik alamat "about:addons" (tanpa tanda petik) lalu tekan tombol Enter.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomMdM57JqGb7-Lix_7___8cWI5_U7goZDhVaWVj9nmhiKWdm9ADskn1Qv3GI3IeFns0tXNhec5fUCNQ2XhZUHo-PWNFcCeVj-rBL-LxmQpasB3Sz7tVj216pHebQggUGmm-FD37gV9Z8/s1600/Image+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomMdM57JqGb7-Lix_7___8cWI5_U7goZDhVaWVj9nmhiKWdm9ADskn1Qv3GI3IeFns0tXNhec5fUCNQ2XhZUHo-PWNFcCeVj-rBL-LxmQpasB3Sz7tVj216pHebQggUGmm-FD37gV9Z8/s1600/Image+2.png" height="347" width="640" /></a></div>
</li>
<li>Cari Addons yang logonya seperti pemutar video, namanya bisa macem2. bisa aja namanya Astro Play. pokoknya addons yg gak kamu kenal hapus aja langsung dengan klik Remove.</li>
<li>Tutup Mozilla kamu dan buka lagi.<div>
<br /></div>
</li>
</ol>
<b>Cara menghapus virus di Chrome :</b><br />
<ol>
<li>Menu -> Tools -> Extensions atau kalo bingung nyarinya langsung aja ketik alamat "chrome://extensions/" (tanpa tanda petik) lalu tekan tombol Enter.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw0d3_SDp7F_Smlboq2DLXzl1cQfgKqjgWaMYph2MBCHKum184sqGNOvAEgOTw8sv8B2Q53lDEmsg0j8Y0Hmy5BHpwRkxzBP0q-E-nGihchd83spQ-cyVFGn3ghjdl95LVOanKzfjBI1E/s1600/Image+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw0d3_SDp7F_Smlboq2DLXzl1cQfgKqjgWaMYph2MBCHKum184sqGNOvAEgOTw8sv8B2Q53lDEmsg0j8Y0Hmy5BHpwRkxzBP0q-E-nGihchd83spQ-cyVFGn3ghjdl95LVOanKzfjBI1E/s1600/Image+3.png" height="459" width="640" /></a></div>
</li>
<li>Cari extensions yang bernama Temp Show atau apapun namanya, pokoknya yang gak kamu kenal hapus aja langsung dengan klik tombol icon "Tempat Sampah"</li>
<li>Tutup Chrome kamu dan buka lagi.</li>
</ol>
<br />
Oh iya, segera ganti password facebook kamu dan semua password yang kamu miliki seperti email, blog, internet banking dan lain-lain. Takutnya virus ini sudah merekam password yang kamu ketik dan mengirimnya ke si "Hacker".<br />
<br />
Mudah-mudahan virusnya sudah hilang, selamat mencoba.Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com32tag:blogger.com,1999:blog-363119140872010489.post-36331046981131888662014-09-03T00:35:00.000+07:002014-09-04T18:48:32.049+07:00Cara Menampilkan Format SELECT DateTime / Tanggal di MySQL Sesuka Hati Kita<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6LzJLKSigrE9CrPtpwq_XIBtWCiSPuMB8DAGUvEWdbKXR8ORobP-zJJ-3PpJp3HsNLCtvu9ETJUStZmXzBm8XIO2Mz3tCiu1Wf7Kqnw-nDKa6xsT7_-Xu0Reuz0pJCesH_efKktpv-M/s1600/logo-mysql.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6LzJLKSigrE9CrPtpwq_XIBtWCiSPuMB8DAGUvEWdbKXR8ORobP-zJJ-3PpJp3HsNLCtvu9ETJUStZmXzBm8XIO2Mz3tCiu1Wf7Kqnw-nDKa6xsT7_-Xu0Reuz0pJCesH_efKktpv-M/s1600/logo-mysql.png" height="206" width="400" /></a></div>
<br />
Tantangan yang sering kita hadapi saat ingin menampilkan data tanggal bertipe DateTime dari Database MySQL karena tidak sesuai dengan apa yang kita inginkan. Kadang kita harus meneriman kenyataan bahwa data yang dihasilkan dari database mengikuti format default yaitu YYYY-MM-DD HH:II:SS. Padahal sebenarnya format tanggal dari database cukup mudah kita manipulasi dengan menggunakan fungsi bawaan MySQL yaitu <b>DATE_FORMAT(<i>field_tanggal</i>, <i>format</i>)</b>. Misalnya kita ingin menampilkan tanggal dengan format DD-MM-YYYY HH:II:SS maka contoh query-nya berikut ini:<br />
<pre class="brush:sql">SELECT *, DATE_FORMAT(tanggal_masuk, '%D-%M-%Y %H:%I:%S') AS tanggal_input FROM `CDS`;
</pre>
Maka hasil yang akan kita peroleh seperti berikut ini :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MiQ8owsESrgo8VBo_Euq7KFlL89LmwQjvuOVrOSOvSJO419F4ZDrtjfyiwAYcxFk6ckCUhy51lBKz4rSTmvy0ql03i-TEOiD0iIp11C0xv5cHdQIoY67T_rO1h7_pvBmGdoCCXsxMbE/s1600/New+Picture.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MiQ8owsESrgo8VBo_Euq7KFlL89LmwQjvuOVrOSOvSJO419F4ZDrtjfyiwAYcxFk6ckCUhy51lBKz4rSTmvy0ql03i-TEOiD0iIp11C0xv5cHdQIoY67T_rO1h7_pvBmGdoCCXsxMbE/s1600/New+Picture.png" height="376" width="640" /></a></div>
<br />
Bagaimana jika ingin menampilkan tanggal dari database MySQL dengan format lain?<br />
Berikut tabel yang bisa kita pakai untuk mendapatkan format tanggal sesuai dengan yang kita inginkan, jangan lupa menuliskan tanda persen ( % ) di awal setiap format tanggal :<br />
<table border="1" class="reference notranslate" style="border-collapse: collapse;"><tbody>
<tr style="background-color: #dadada;"> <th style="width: 15%;">Format</th> <th>Keterangan</th> </tr>
<tr><td>%a</td><td>Singkatan nama hari (Bahasa Inggris) (Sun..Sat)</td></tr>
<tr><td>%b</td><td>Singkatan nama bulan (Bahasa Inggris) (Jan..Dec))</td></tr>
<tr><td>%c</td><td>Bulan, dalam bentuk angka/numeric (0..12)</td></tr>
<tr><td>%D</td><td>Hari di bulan ini diakhiri suffix Bahasa Inggris (0th, 1st, 2nd, 3rd, …)</td></tr>
<tr><td>%d</td><td>Hari di bulan ini, angka (00-31)</td></tr>
<tr><td>%e</td><td>Hari di bulan ini, angka (0-31)</td></tr>
<tr><td>%f</td><td>Microsecond (000000..999999)</td></tr>
<tr><td>%H</td><td>Jam (00-23)</td></tr>
<tr><td>%h</td><td>Jam (01-12)</td></tr>
<tr><td>%I</td><td>Jam (01-12)</td></tr>
<tr><td>%i</td><td>Menit, angka (00-59)</td></tr>
<tr><td>%j</td><td>Hari dalam setahun (001-366)</td></tr>
<tr><td>%k</td><td>Jam (0-23)</td></tr>
<tr><td>%l</td><td>Jam (1-12)</td></tr>
<tr><td>%M</td><td>Nama Bulan (January..December)</td></tr>
<tr><td>%m</td><td>Bulan, angka (00-12)</td></tr>
<tr><td>%p</td><td>AM atau PM</td></tr>
<tr><td>%r</td><td>Waktu, 12-jam (hh:mm:ss AM or PM)</td></tr>
<tr><td>%S</td><td>Detik (00-59)</td></tr>
<tr><td>%s</td><td>Detik (00-59)</td></tr>
<tr><td>%T</td><td>Waktu, 24-jam (hh:mm:ss)</td></tr>
<tr><td>%U</td><td>Pekan (00-53) dengan Minggu sebagai awal pekan, WEEK() mode 0</td></tr>
<tr><td>%u</td><td>Pekan (00-53) dengan Senin sebagai awal pekan, WEEK() mode 1</td></tr>
<tr><td>%V</td><td>Pekan (01-53) dengan Minggu sebagai awal pekan, digunakan dengan %X</td></tr>
<tr><td>%v</td><td>Week (01-53) dengan Senin sebagai awal pekan, digunakan dengan %x</td></tr>
<tr><td>%W</td><td>Nama Hari, Bahasa Inggris</td></tr>
<tr><td>%w</td><td>Hari dalam seminggu (0=Minggu, 6=Sabtu)</td></tr>
<tr><td>%X</td><td>Tahun dalam pekan dengan Minggu sebagai awal pekan, empat angka, digunakan dengan %V</td></tr>
<tr><td>%x</td><td>Tahun dalam pekan dengan Senin sebagai awal pekan, empat angka, digunakan dengan %v</td></tr>
<tr><td>%Y</td><td>Tahun, empat angka</td></tr>
<tr><td>%y</td><td>Tahun, dua angka</td></tr>
</tbody></table>
<br />
Contohnya :<br />
Example<br />
Query berikut menggunakan fungsi DATE_FORMAT() untuk menampilkan format yang berbeda-beda. Kita akan menggukan fungsi <b>NOW()</b> untuk mendapatkan waktu saat ini:<br />
<pre class="brush:sql">DATE_FORMAT(NOW(),'%b %d %Y %h:%i %p')
DATE_FORMAT(NOW(),'%m-%d-%Y')
DATE_FORMAT(NOW(),'%d %b %y')
DATE_FORMAT(NOW(),'%d %b %Y %T:%f')
</pre>
<br />
Hasilnya akan terlihat seperti berikut:<br />
<pre class="brush:sql">Nov 04 2008 11:45 PM
11-04-2008
04 Nov 08
04 Nov 2008 11:45:34:243
</pre>
<br />
Mungkin cukup sekian artikel kali ini. Silakan tinggalkan komentar jika ada sesuatu yang ingin ditanyakan atau sekedar memberi masukan, saya tunggu. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com4tag:blogger.com,1999:blog-363119140872010489.post-90688438193070426352014-08-31T23:45:00.000+07:002014-09-19T01:22:31.678+07:00 Google Keep : Senjata Ampuh untuk Para Pelupa<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtItitDWAzo8UnNrJu_pQJ79HW2vztA-O2fGA3ME1Bf_RmSVVxXszxGJXwafmqLNZiEUwLqs2aQGfWosHnMbUAV4xJ98UBu4pC7PqYSUuoG69Ex15HOaYqXdzKHTqcsZVhe5mvQkfvlG4/s1600/Google-keep-logo.jpg" height="180" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : http://www.viwoinc.com</td></tr>
</tbody></table>
<b>Sebuah Pengantar </b> <br />
Sebagai seorang pemimpi yang suka berimajinasi dan menuangkannya dalam bentuk tulisan, tentu kita akan selalu dibanjiri dengan ide-ide segar yang kadang-kadang aneh di setiap waktu. Seperti kata Sayyidina 'Ali R.A :<b> "Ikatlah Ilmu dengan Menuliskannya"</b>.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRsC4A06vBr-CK-9j1NBfX2C_DPby75c6-2j3cd_kmPbRROUUQ2cyPRD9LSDKjEX2dlTdypkkQEYBe_xZxTPM1uKL0g3OhJnDLqRNgCRc0VrbiP-Zwxbq74GtSQRs8qhZqJ6g0O1sdUc/s1600/write-your-story.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRsC4A06vBr-CK-9j1NBfX2C_DPby75c6-2j3cd_kmPbRROUUQ2cyPRD9LSDKjEX2dlTdypkkQEYBe_xZxTPM1uKL0g3OhJnDLqRNgCRc0VrbiP-Zwxbq74GtSQRs8qhZqJ6g0O1sdUc/s1600/write-your-story.jpg" height="256" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : http://savvysassyme.com</td></tr>
</tbody></table>
Ada banyak cara-cara unik yang selalu kita pakai untuk menyimpan ide-ide maupun hal-hal lain yang kita anggap penting agar suatu saat tidak lupa. Biasanya sih anak-anak muda jaman sekarang suka menulis catatan di perangkat pintar alias smartphone, termasuk saya sendiri :D. Tapi semenjak tragedi hilangnya handphone saya jadi kapok menulis catatan di handphone. Yang disayangkan bukan nilai ekonomisnya tapi lebih ke arah kekayaan intelektual yang sekian lama disimpan program 'Notepad' HP itu. Ngomong-ngomong kok jadi curhat gini ya?<br />
<b></b><br />
<b>Perkenalkan, Google Keep</b><br />
Sebuah layanan dari raksasa internet Google untuk menyimpan dan mengorganisir catatan penting kita baik itu berupa pengingat, puisi-puisi cinta, catatan pekerjaan, kata-kata mutiara, catatan perjalanan, tutorial komputer, <i>code snippet</i>, kata-kata romantis dari kekasih, dan lainnya.<br />
<br />
Google Keep memang terlihat sederhana, namun dibalik kesederhaannya ternyata layanan ini dilengkapi dengan berbagai fitur canggih, mulai dari pengingat yang bisa kita sesuaikan, ganti warna tampilan catatan, foto, dan yang pasti gratisss. Selain itu kita juga dapat melakukan sinkronisasi dengan perangkat kita tanpa khawatir kehilangan catatan lagi dimanapun kita berada.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuwaDXGZ7wbLvi2ntgC7Rq0Q_fdkKbgYJYZfw3LF3JlN0f4KZNlZ1QKYgMyk3MbmIB960UCawvlfBS84i3ROnO9GaTe95y_gQ_bIPNwzwa3AjS_DqM7wneAdMYtVBBjWngd9G7oCDi6w/s1600/google+keep.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuwaDXGZ7wbLvi2ntgC7Rq0Q_fdkKbgYJYZfw3LF3JlN0f4KZNlZ1QKYgMyk3MbmIB960UCawvlfBS84i3ROnO9GaTe95y_gQ_bIPNwzwa3AjS_DqM7wneAdMYtVBBjWngd9G7oCDi6w/s1600/google+keep.png" height="275" width="640" /></a></div>
<br />
<b>Ayo Mainkan!!</b><br />
Untuk mulai menggunakan Google Keep kita tidak perlu melakukan registrasi yang ribet, cukup dengan satu akun Google saja kita langsung bisa menikmati layanan ini. belum punya akun Google buruan daftar di <a href="https://accounts.google.com/SignUp">https://accounts.google.com/SignUp</a>.<br />
<br />
1. Kalau sudah punya Akun Google langsung saja kita akses ke alamat <a href="https://keep.google.com/keep/">https://keep.google.com/keep/</a><br />
<br />
2. Tulis atau Copy-Paste hal-hal menarik yang perlu kita catat, jika sudah selesai bisa langsung klik diluar kotak editor atau dengan tombol <b>Esc</b>. Selamat, data kita telah disimpan dengan aman di server Google.<br />
<br />
Gimana? mudah kan sobat, semoga ini membantu kita yang sebagai manusia biasa yang tentu tak luput dari salah dan lupa. Dari kesalahan dan lupa kita bisa memetik pelajaran dan berusaha untuk senantiasa tidak mengulangi untuk yang ke sekian kalinya. Seperti biasa silakan berkomentar untuk sekedar memberi masukan dan kritik yang membangun. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura</a>.Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com0tag:blogger.com,1999:blog-363119140872010489.post-50657006327518358912014-08-31T19:59:00.000+07:002015-02-14T16:51:04.399+07:00Cara Mudah Membuat Aplikasi Google Maps Dengan JQuery Gmap3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhqyCjF8ZQkz4kK1CvdkXb2-CmCsgYsnSw9VOffzYkOhTk01phl9QYAoYhdPTrMcNzm96jc5QRJueQiuXipfVVQf5QZr1CACoZeqvfPg6WlRGWhob-oIzkyP7EKPpMldkdAM57xuF-q00/s1600/screenshot-gmap3+net+2014-08-31+19-55-35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhqyCjF8ZQkz4kK1CvdkXb2-CmCsgYsnSw9VOffzYkOhTk01phl9QYAoYhdPTrMcNzm96jc5QRJueQiuXipfVVQf5QZr1CACoZeqvfPg6WlRGWhob-oIzkyP7EKPpMldkdAM57xuF-q00/s1600/screenshot-gmap3+net+2014-08-31+19-55-35.png" height="169" width="400" /></a></div>
<br />
Ceritanya begini, kan awalnya dapet tantangan membuat aplikasi peta menggunakan google maps. Yah semacam GIS atau Sistem Informasi Geografis gitu gan. Nah, masalahnya saya gak punya skill sama sekali buat bikin program peta kayak gitu. Gak gitu aja, fitur yang diminta cukup kompleks dan cukup bikin saya gak bisa tidur gara-gara kepikiran sama tantangan. Apalagi waktu pertama kali buka dokumentasi Google Maps di <a href="https://developers.google.com/maps/documentation/javascript/tutorial" target="_blank">https://developers.google.com/maps/documentation/javascript/tutorial</a> rasanya mau nangis aja.<br />
Lalu saya teringat akan sebuah nasehat seorang Ulama' terkenal di republik ini, kata beliau: <br />
<br />
<b>"Orang yang pesimis adalah orang yang sudah mengubur sebelah kakinya sebelum melangkah."</b><br />
<br />
Langsung saat itu saya cari jalan keluar, browsing sana sini dan akhirnya ketemu sama JQuery Gmap3. Sebuah plugin JQuery yang dapat membantu kita yang ingin membuat aplikasi maps berbasis Google Maps tapi tidak tahu harus mulai dari mana. Silakan teman-teman mengunjungi situs resminya di <a href="http://gmap3.net/">http://gmap3.net/</a> untuk download library yg dibutuhkan<br />
<br />
<br />
<b>Memulai, Apa dan bagaimana?</b><br />
Pastikan teman-teman mencoba tutorial ini saat terkoneksi dengan internet karena kita akan menggunakan google maps.<br />
<br />
<br />
<b>1. Pertama,</b> kita buat folder untuk percobaan. Siapkan library JQuery dan dan Gmap3 yang sudah teman-teman download dalam folder tadi. belum download?? ya udah, silakan download disini :<br />
<br />
<ul>
<li><a href="http://gmap3.net/en/upload/gmap3/gmap3-6.0.0.zip" target="_blank">http://gmap3.net/en/upload/gmap3/gmap3-6.0.0.zip</a></li>
<li><a href="http://code.jquery.com/jquery-1.11.1.min.js">http://code.jquery.com/jquery-1.11.1.min.js</a> -> Klik Kanan -> Save Link As... -> simpan di folder yang tadi kita buat</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0VN4qNMKaNZAYml8-js6rse0vOS3IdEteyvSYFru4QJI-zb7WtfIDCwBagLBiwP0cnYrfFt5a_upo4AJ-ANI9knCnRI6rp5V_W1HRKxMXyV71HdWEJIDqvaTuadEZBxziOud-57b61hI/s1600/gmap3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0VN4qNMKaNZAYml8-js6rse0vOS3IdEteyvSYFru4QJI-zb7WtfIDCwBagLBiwP0cnYrfFt5a_upo4AJ-ANI9knCnRI6rp5V_W1HRKxMXyV71HdWEJIDqvaTuadEZBxziOud-57b61hI/s1600/gmap3.png" /></a></div>
<br />
<b>2. Kedua,</b>bikin file baru dengan nama maps.html atau terserah teman-teman apa namanya, saya mah ikut aja. Buka file tadi dengan editor kesayangan teman-teman, mau Notepad, Notepad++, Geany,GEdit, nano, vim dll. Yang perlu kita lakukan adalah memanggil file JQuery, Gmap3 dan Google Maps API kedalam file kita.<br />
<pre class="brush:js"> <script src="http://maps.google.com/maps/api/js?sensor=false&language=en" type="text/javascript"></script>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="gmap3.min.js" type="text/javascript"></script>
</pre>
<br />
<br />
<b>3. Ketiga, </b> buat sebuah kotak dengan menggunakan tag DIV, jangan lupa mengatur tinggi dan lebar kotaknya<br />
<pre class="brush:html"> <div id="peta_ku" style="height: 400px; width: 500px;">
</div>
</pre>
<br />
<br />
<b>4. Keempat, </b>kita buat panggil fungsi Gmap3-nya untuk menampilkan peta.<br />
<br />
<pre class="brush:js"> <script type="text/javascript">
/** menampilkan peta dengan pengaturan default */
$('#peta_ku').gmap3();
</script>
</pre>
Untuk menyesuaikan peta dengan apa yang kita inginkan seperti lokasi yang akan ditampilkan, perbesaran gambar peta (zoom), tipe peta dapat kita sesuaikan dengan menambahkan beberapa pengaturan seperti berikut ini:<br />
<br />
<pre class="brush:js"> <script type="text/javascript">
/** menampilkan peta dengan pengaturan kita sendiri */
$('#peta_ku').gmap3({
map:{
options:{
center:[-7.257700, 112.747926],
zoom:12,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
marker:{
latLng:[-7.285967, 112.765436]
}
});
</script>
</pre>
<br />
<br />
<div id="petaku" style="height: 400px; margin: auto; width: 600px;">
</div>
<br />
<br />
Lebih jelasnya silakan teman2 kunjungi situs resmi Gmap3 di alamat <a href="http://gmap3.net/">http://gmap3.net/</a>, disana dijelaskan panjang lebar tentang cara penggunaan Gmap3 ini. Biar kamu gak penasaran juga, silakan download contoh sederhana yang saya buat: <a href="https://drive.google.com/file/d/0B-LtgU2JdEvsd0t3YjFvdG5VZ3c/edit?usp=sharing" target="_blank">Download Contoh</a><br />
<br />
Seperti biasa, jangan komentar untuk menyampaikan kritik dan saran. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura!</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com1tag:blogger.com,1999:blog-363119140872010489.post-47758180572495020692014-06-01T01:24:00.000+07:002015-07-08T12:42:31.076+07:00Inilah Tempat Keren Buat Hunting Foto di Pamekasan Madura<img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1lK9eJDD3pTTIHAVMkKyI54bVDfIFtaiUgmfQ2qMf6LH_dS6owhes01mbDYZtaPW8cijy_UAPiKY9dx3yaabqIXaWBsq74h1wXw8PxO7rHGBXGrRCxxhGaU0XKcXRF3EQd927NRmfGU/s1600/IMG_0700.JPG" width="640" /><br />
Kamu orang pamekasan atau bukan orang Pamekasan yang lagi berkunjung ke Pamekasan atau juga ada rencana berkunjung pamekasan? Yap tepat sekali, artikel yang satu ini pas buat kamu. Kali ini saya tidak akan membahas tentang tempat-tempat wisata di Pamekasan yang sudah umum dikenal khalayak ramai berikut ini:<br />
<a name='more'></a><br />
-> Monumen Arek Lancor, (<a href="https://www.google.co.id/maps/place/7%C2%B009%2737.5%22S+113%C2%B028%2757.6%22E/@-7.160424,113.482676,794m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)<br />
-> Pantai Jumiang, (<a href="https://www.google.co.id/maps/place/7%C2%B014%2700.5%22S+113%C2%B033%2705.0%22E/@-7.233476,113.551404,794m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>, <a href="http://www.sholihin.com/2011/11/jumiang-pantai-sejuta-cinta-dan.html" target="_blank"><span style="color: blue;">Artikel Pantai Jumiang</span></a>)<br />
-> Pantai Talang Siring, (<a href="https://www.google.co.id/maps/place/7%C2%B008%2716.9%22S+113%C2%B035%2723.0%22E/@-7.138015,113.58973,397m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)<br />
-> Api Tak Kunjung Padam (<a href="https://www.google.co.id/maps/place/7%C2%B012%2717.8%22S+113%C2%B027%2740.0%22E/@-7.2058341,113.4630636,794m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)<br />
-> Kawasan Wisata Kuliner "Sae Salera" (<a href="https://www.google.co.id/maps/place/7%C2%B009%2747.3%22S+113%C2%B029%2702.8%22E/@-7.163128,113.484113,794m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>) (malam hari)<br />
-> Wisata Religi "Pasarean Batu Ampar" (<a href="https://www.google.co.id/maps/place/7%C2%B005%2757.4%22S+113%C2%B022%2737.2%22E/@-7.0996988,113.3771297,199m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)<br />
<br />
Nama-nama tempat wisata tersebut sudah banyak dibahas di website atau di blog lain. Nah, tempat yang ingin saya ceritakan ini masih di Pamekasan juga hanya sayangnya belum dijadikan tempat wisata. Padahal di Kabupaten Pamekasan banyak sekali tempat bagus yang masih belum terjamah oleh pemerintah daerah. Apa sajakah tempat-tempat itu, berikut saya ceritakan.<br />
<br />
<br />
<b>1. Pelabuhan Branta (<a href="https://www.google.co.id/maps/place/7%C2%B013%2742.9%22S+113%C2%B026%2756.7%22E/@-7.2260483,113.4498353,794m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)</b><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnaJlCbbDeBQuy0CU57wK_R_a24uO9t6LylJnkpoLviwG442E2OifGYuTnEUGkINX_5wWIzlJ0HZnLHuDmM8ga2Cz59aAZ-ft_cDgA0_dqUGlOSbyxVa72Mg8zgbdlBrPrgE9Bia3Pro/s1600/branta-wonder-woman.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnaJlCbbDeBQuy0CU57wK_R_a24uO9t6LylJnkpoLviwG442E2OifGYuTnEUGkINX_5wWIzlJ0HZnLHuDmM8ga2Cz59aAZ-ft_cDgA0_dqUGlOSbyxVa72Mg8zgbdlBrPrgE9Bia3Pro/s640/branta-wonder-woman.jpg" width="640" /></a><br />
Pelabuhan yang terletak di desa Branta ini adalah tempat favorit remaja-remaja masa kini untuk sekedar menghabiskan waktu sore hari memandangi langit senja dan indahnya suasana matahari terbenam di ufuk barat sambil menikmati secangkir kopi, tapi ingat kopinya harus bawa dari rumah, he he he.<br />
<br />
<img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1lK9eJDD3pTTIHAVMkKyI54bVDfIFtaiUgmfQ2qMf6LH_dS6owhes01mbDYZtaPW8cijy_UAPiKY9dx3yaabqIXaWBsq74h1wXw8PxO7rHGBXGrRCxxhGaU0XKcXRF3EQd927NRmfGU/s1600/IMG_0700.JPG" width="640" /><br />
<br />
Akses ke Pelabuhan Branta ini cukup mudah, hanya dari jalan utama Sampang Pamekasan ketika kita hampir memasuki kota Pamekasan, Pelabuhan Branta sudah terlihat di sisi selatan jalan. Selain keren untuk foto-foto, pelabuhan ini juga menjadi tempat favorit bagi para penggemar hobi memancing <strike>sambil liatin cewek</strike>.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN48gbuePvFbpQPK_1E8FGJ3LE47sCOerpcYWJruXfSfGiO1kInCz7T6juBgKrhu5J3rj7dnk6XHYwotDZUMfcMeZSkXNBr2owdrYTIH7EkVrgW8gubZEbxu9fDd3OjWxhNHUHiBI_JmA/s1600/IMG_0681.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN48gbuePvFbpQPK_1E8FGJ3LE47sCOerpcYWJruXfSfGiO1kInCz7T6juBgKrhu5J3rj7dnk6XHYwotDZUMfcMeZSkXNBr2owdrYTIH7EkVrgW8gubZEbxu9fDd3OjWxhNHUHiBI_JmA/s1600/IMG_0681.JPG" width="640" /></a><br />
Nah, jika temen-temen berminat mengunjunginya sangat disarankan berkunjung saat sore hari untuk menikmati momen yang pas <strike>bersama sang kekasih</strike> saat matahari senja mulai terbenam.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCGLKY5fASaVP9ByttM_NJdTbVgsuNlql96bj19e6AZYNNpL4Y8-63tx1pJKzLw9gUVGlXLmZxN2kvQiuaqjqhmawHB2pESNG625GAfueq2kDyKscOydTGx5n2nDZQO1zbrX7VcaUrrQ/s1600/branta-sunset.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCGLKY5fASaVP9ByttM_NJdTbVgsuNlql96bj19e6AZYNNpL4Y8-63tx1pJKzLw9gUVGlXLmZxN2kvQiuaqjqhmawHB2pESNG625GAfueq2kDyKscOydTGx5n2nDZQO1zbrX7VcaUrrQ/s640/branta-sunset.jpg" width="640" /></a><br />
<br />
<br />
<br />
<b>2. Air Terjun Palesteran (<a href="https://www.google.co.id/maps/place/7%C2%B007%2732.1%22S+113%C2%B029%2739.6%22E/@-7.125571,113.494327,794m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)<br />
</b> Air terjun Palesteran adalah air terjun yang terbentuk dari bendungan sungai. Konon katanya air terjun bendungan ini sudah ada sejak zaman penjajahan Belanda. Terletak di keluraha Kowel nyerempet dikit ke desa Toronan. Walaupun air terjun ini bersifat <i>artificial </i>namun tak kalah kerennya dengan air terjun alami di tempat lain.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWaAxipqT36q41hRWyGRIj1PaJGpq_IkzaBJnTg7oKiBgh2hCXhXz6c45L6YfZkSdpDV3nIGmqTnFx08Bz8tiAfpaMNOgPsiupDRbAWr6J8Eqc1DZX7dk0ZdRiI5t0cZVq4J_LoXfiq4/s1600/plesteran2.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWaAxipqT36q41hRWyGRIj1PaJGpq_IkzaBJnTg7oKiBgh2hCXhXz6c45L6YfZkSdpDV3nIGmqTnFx08Bz8tiAfpaMNOgPsiupDRbAWr6J8Eqc1DZX7dk0ZdRiI5t0cZVq4J_LoXfiq4/s1600/plesteran2.JPG" width="640" /></a><br />
Kebetulan ini tempat saya belajar renang dulu sewaktu masih kecil. Selain karena tempatnya dekat dengan rumah, pemandangan sekitarnya juga bagus.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmrF3nhx37merP0oOFrWuh3832pcQ4ke1NUMNAIQkTBzhqg_cnmVHsmE1KDGYBVCwKX_KCxXz06-gOiOxw7XMa7Yo_Z1mUapHrX_EkA1ErIOlVTm7Rjvtc31pkeDsZ_24Bbjfruq-ZQlA/s1600/plesteran.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmrF3nhx37merP0oOFrWuh3832pcQ4ke1NUMNAIQkTBzhqg_cnmVHsmE1KDGYBVCwKX_KCxXz06-gOiOxw7XMa7Yo_Z1mUapHrX_EkA1ErIOlVTm7Rjvtc31pkeDsZ_24Bbjfruq-ZQlA/s1600/plesteran.JPG" width="640" /></a><br />
Oh iya, air terjun ini dekat dengan air terjun Dhurbhugan yang pernah saya ceritakan di Artikel <b><a href="http://sekedar-tutorial.blogspot.com/2012/05/air-terjun-durbugan-palesteran.html"><span style="color: blue;">http://sekedar-tutorial.blogspot.com/2012/05/air-terjun-durbugan-palesteran.html</span></a></b>.<br />
<br />
<br />
<b>3. Tambak di Desa Pandan Kecamatan Galis (<a href="https://www.google.co.id/maps/place/7%C2%B010%2718.8%22S+113%C2%B033%2700.6%22E/@-7.171901,113.550179,794m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)<br />
</b> Tambak yang berlokasi di desa Pandan kecamatan Galis Pamekasan ini emang jadi tempat yang pas buat buat foto-foto bernuansa senja<b>.</b><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1etgbsTdHyg3I8JwFk_E5k8P0-vH_WsrRMcQh22iKvS0OGZEITUnCN4paI-upoJddwWkzdXurtDrgXhlIe0lDbaJ3o8L6MDdgnoajWCJf9LFHLTd8Ic6G08i0AzwiCToS60mVDFz2QQ/s1600/pandan-behind-the-scene.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1etgbsTdHyg3I8JwFk_E5k8P0-vH_WsrRMcQh22iKvS0OGZEITUnCN4paI-upoJddwWkzdXurtDrgXhlIe0lDbaJ3o8L6MDdgnoajWCJf9LFHLTd8Ic6G08i0AzwiCToS60mVDFz2QQ/s1600/pandan-behind-the-scene.jpg" /></a><br />
<br />
Pemandangan yang indah didukung dengan angin sepoi-sepoi dan lambaian pepohonan rindang adalah alasan utama kenapa kita harus mengunjungi tempat ini.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5BnEZU-yDIx2m0S83hKfRwomAOE63xRlxpEQDK5KaymjFJzdearZm5fxPc9h0c6s6kgadZfZzgn3R0ZwqK0zF9jAXBcccR_bjmVbco6EWkIgUQZJ-7yfCAcxmjJRtcnq2967KedGCcY/s1600/IMG_4148.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5BnEZU-yDIx2m0S83hKfRwomAOE63xRlxpEQDK5KaymjFJzdearZm5fxPc9h0c6s6kgadZfZzgn3R0ZwqK0zF9jAXBcccR_bjmVbco6EWkIgUQZJ-7yfCAcxmjJRtcnq2967KedGCcY/s1600/IMG_4148.JPG" width="640" /></a><br />
Desa Pandan dekat dengan laut tapi masih agak juga sih, hehe. Anginnya juga Aksesnya cukup lurus ke arah timur dari Monumen arek lancor Pamekasan lalu ke Jalan Jokotole lalu ke Jalan Pasar Pao, pokoknya lurus aja ke arah timur sampai di pertigaan galis lurus lagi ke timur sampai ketemu pertigaan ke selatan balai desa Galis. Nah kalau ketemu pertigaan yang di sebelah timurnya balai desa Galis belok kanan kearah selatan sampai ke pinggir tambak di desa Pandan.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQ3z3QFv6WiIfp8ObarpPjVLJ7zsBx7kRX0aAvJyMlxgE5cWZVLntZNFyYCwZvsHZoB6A-sM672Y2V9hJVkKVJhNRGxOLyQI0U9rMAB7165GjgrEFwV0n701VJhkbl19FDuz9DsRnH9Q/s1600/IMG_4003.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQ3z3QFv6WiIfp8ObarpPjVLJ7zsBx7kRX0aAvJyMlxgE5cWZVLntZNFyYCwZvsHZoB6A-sM672Y2V9hJVkKVJhNRGxOLyQI0U9rMAB7165GjgrEFwV0n701VJhkbl19FDuz9DsRnH9Q/s1600/IMG_4003.JPG" width="640" /></a> <br />
<br />
<br />
<b>4. Bukit Waru (<a href="https://www.google.co.id/maps/place/6%C2%B057%2725.2%22S+113%C2%B033%2712.3%22E/@-6.957003,113.553427,795m/data=!3m2!1e3!4b1!4m2!3m1!1s0x0:0x0?hl=id" target="_blank"><span style="color: blue;">Lihat Peta</span></a>)</b><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05SyQam1szqO4QG8BngUhDzWLtKq9eJiIXf-qUtkvctH7N_FmsiyaUzm2P81M92Xnen9jvqgRkC8zMxMEUeJlLzZgAOZyD7hkcOM5WxAW00eAqH_4a6FVtHYMTF7o0gQroYrf3UNErtI/s1600/waru-climbing.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05SyQam1szqO4QG8BngUhDzWLtKq9eJiIXf-qUtkvctH7N_FmsiyaUzm2P81M92Xnen9jvqgRkC8zMxMEUeJlLzZgAOZyD7hkcOM5WxAW00eAqH_4a6FVtHYMTF7o0gQroYrf3UNErtI/s640/waru-climbing.jpg" width="640" /></a><br />
Sebuah bukit batu di Kecamatan Waru dengan pemandangan yang eksotik, Terletak di daerah utara Kab. Pamekasan. Bukit Waru sebenarnya sangat <br />berpotensi menjadi tempat wisata.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjygrLv_D1qf7wF9QByuo2sITLE1eB_tAKc4PQ-zqTpeRoEroBu1k7X_kKXrrXCeFlFETEk5ibC6Ie5zuERWI_wnZzaZ0e5iXOvJoeZ0xcvzKTWmezd9vm3SG0SUexW8BXhKimIR-RVE/s1600/waru1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="479" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjygrLv_D1qf7wF9QByuo2sITLE1eB_tAKc4PQ-zqTpeRoEroBu1k7X_kKXrrXCeFlFETEk5ibC6Ie5zuERWI_wnZzaZ0e5iXOvJoeZ0xcvzKTWmezd9vm3SG0SUexW8BXhKimIR-RVE/s640/waru1.jpg" width="640" /></a> <br />
<br />
Bukit Waru memiliki pemandangan yang indah, sangat pas buat kamu yang suka foto-foto dengan latar belakang pemandangan.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXiLdsrKPoq0FMPWsc1o5dj2E_t4jqgpKDL57Q33nwj3bWZOmyom6SeppdbdKOM0Y7w2cM7M2vLsVmwbMIanD6zdbTh9DYBxAq2iSsziGsWPZPgxqpSqlRIQuHYndYLiPaBypQAy-whwg/s1600/waru4.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXiLdsrKPoq0FMPWsc1o5dj2E_t4jqgpKDL57Q33nwj3bWZOmyom6SeppdbdKOM0Y7w2cM7M2vLsVmwbMIanD6zdbTh9DYBxAq2iSsziGsWPZPgxqpSqlRIQuHYndYLiPaBypQAy-whwg/s640/waru4.jpg" width="640" /></a><br />
<br />
<br />
Ya sudah, cukup sekian mungkin yang bisa saya tulis. sampai jumpa di artikel wisata Pamekasan berikutnya. Seperti biasanya kritik dan saran dari teman-teman pembaca sangat saya harapkan. Salam <a href="http://plat-m.com/" target="_blank">Blogger Madura ^_^</a><br />
<br />
<br />Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com2tag:blogger.com,1999:blog-363119140872010489.post-8970468874295716482014-05-22T22:34:00.000+07:002015-02-27T08:25:15.859+07:00Membuat Form Input Tanggal Kalender (Date Picker) Dengan Zebra DatePicker<div class="separator" style="clear: both; text-align: center;">
<a href="http://stefangabos.ro/wp-content/uploads/covers/zebra-datepicker-630x300.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://stefangabos.ro/wp-content/uploads/covers/zebra-datepicker-630x300.jpg" /></a></div>
Mumpung ada sedikit waktu luang kali ini saya mau sharing tentang datepicker menggunakan Zebra DatePicker, sebuah plugin JQuery untuk menginput tanggal ke form HTML dengan berbagai fitur canggih.<br />
<br />
<b>1. Apa itu Datepicker?</b><br />
Datepicker adalah sebuah program javascript berbentuk seperti kalender yang dapat dipasang di form HTML untuk menginput atau memasukkan tanggal dengan valid dan sesuai dengan format yang diinginkan. Dengan datepicker kita dapat mempermudah melakukan validasi terhadap inputan user yang berupa tanggal sehingga data yang dimasukkan bisa lebih valid dan mencegah user memasukkan tanggal yang tidak valid seperti 31 Februari, kan gak pernah ada tuh tanggal 31 Februari?<br />
<a name='more'></a><br />
<b>2. Sedikit tentang Zebra Datepicker</b><br />
Zebra Datepicker adalah plugin datepicker canggih dan mudah digunakan. Program javascript ini adalah plugin JQuery sehingga jika kita ingin menggunakannya Zebra Datepicker kita harus memanggil JQuery terlebih dahulu. Untuk yang belum kenal JQuery saya jelaskan sedikit, JQuery adalah javascript framework yang mampu mengatasi permasalahan yang rumit di javascript, untuk kalian yang baru belajar pemrograman web sangat disarankan mempelajari JQuery. Jangan takut! JQuery mudah dipelajari dan banyak sekali tutorial tentang JQuery jadi tidak ada alasan untuk tidak mencoba.<br />
<br />
<b>3. Kesaktian Zebra Datepicker</b><br />
Agar kesaktian Zebra Datepicker dapat kita saksikan secara langsung, berikut ini saya coba tampilkan demo programnya yang diterjemahkan dari website resmi Zebra Datepicker:<br />
<br />
<b>Kebutuhan</b><br />
Zebra_Datepicker tidak memiliki depedensi/kebutuhan selain jQuery 1.5.2 dan versi diatasnya, tapi halaman yang menggunakan plugin ini harus menggunakan "strict doctype" seperti ini: <br />
<br />
<pre class="brush:html"><!doctype html>
</pre>
<br />
<b>Cara Menggunakan</b><br />
<br />
Pertama, panggil jQuery versi terakhir baik dari local maupun dari internet.<br />
<pre class="brush:js"><script src="folder/library/jquery.min.js" type="text/javascript"></script>
</pre>
<br />
Lalu panggil Zebra_Datepicker jQuery plugin, seperti berikut ini:<br />
<pre class="brush:js"><script src="path/to/zebra_datepicker.js" type="text/javascript"></script>
</pre>
<br />
Setelah itu, panggil tema yang tersedia (default, metallic, bootstrap) :<br />
<pre class="brush:css"><link href="path/to/default.css" rel="stylesheet" type="text/css"></link>
</pre>
<br />
Nah, di dalam event DOM-ready, arahkan plugin Zebra_Datepicker ke <b><input type="text" /></b> contohnya : <br />
<pre class="brush:css">$(document).ready(function() {
// diasumsikan elemen yang ingin kita isi datepicker
// sudah memiliki class "datepicker"
$('input.datepicker').Zebra_DatePicker();
});
</pre>
<br />
Hal ini akan menambahkan icon kalender ke elemen yg ditentukan. Jika icon diklik maka datepicker akan muncul.<br />
<br />
Untuk mendapatkan reference ke instance Zebra_DatePicker yang ditambahkan ke elemen tersebut, caranya seperti berikut:<br />
<pre class="brush:js">var $zdp = $('#element').data('Zebra_DatePicker');
</pre>
<br />
<b>Demo Program</b><br />
<br />
<b>1.</b> Datepicker dengan pengaturan default.<br />
<pre class="brush:js">$('#datepicker-example1').Zebra_DatePicker();
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example1" type="text" /><br /></div>
</form>
<br />
<br />
<br />
<b>2.</b> Tanggal yang bisa dipilih hanya tanggal di masa depan, dimulai dari satu hari di masa setelah hari ini.<br />
<br />
<pre class="brush:js">$('#datepicker-example2').Zebra_DatePicker({
direction: 1 // tipe boolean true akan membuat date picker hanya untuk tanggal yang akan datang saja
// tapi dimulai dari hari ini, bukan esok hari
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example2" type="text" /></div>
</form>
<br />
<br />
<br />
<b>3.</b> Tanggal dapat dipilih hanya tanggal yang akan datang saja, dimulai dari hari ini. Selain itu, Sabtu dan Minggu selalu dinonaktifkan.<br />
<br />
<pre class="brush:js">$('#datepicker-example3').Zebra_DatePicker({
direction: true,
disabled_dates: ['* * * 0,6'] // semua hari, semua bulan, semua tahun
// akhir pekan adalah 0 atau 6 (Minggu atau Sabtu)
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example3" type="text" /></div>
</form>
<br />
<br />
<br />
<b>4.</b> Tanggal yang dapat dipilih adalah didalam interval, dimulai dari besok sampai 10 hari setelah besok.<br />
<br />
<pre class="brush:js">$('#datepicker-example4').Zebra_DatePicker({
direction: [1, 10]
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example4" type="text" /></div>
</form>
<br />
<br />
<br />
<b>5.</b> Tanggal yang dapat dipilih berada diantara 2 tanggal yang ditentukan.<br />
<br />
<pre class="brush:js">$('#datepicker-example5').Zebra_DatePicker({
// ingatlah bahwa cara penulisan tanggal
// bergantung pada value dari property "format"!
direction: ['2012-08-01', '2012-08-12']
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example5" type="text" /></div>
</form>
<br />
<br />
<br />
<b>6.</b> Yang dapat dipilih adalah tanggal yang akan datang, dimulai dari tanggal yg ditentukan.<br />
<br />
<pre class="brush:js">$('#datepicker-example6').Zebra_DatePicker({
// ingatlah bahwa cara penulisan tanggal
// bergantung pada value dari property "format"!
direction: ['2012-08-01', false]
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example6" type="text" /></div>
</form>
<br />
<br />
<br />
<b>7.</b> Tanggal di date picker yang kedua dimulai dari isi dari date picker pertama ditambah 1 hari<br />
<br />
<pre class="brush:js">$('#datepicker-example7-start').Zebra_DatePicker({
direction: true,
pair: $('#datepicker-example7-end')
});
$('#datepicker-example7-end').Zebra_DatePicker({
direction: 1
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example7-start" type="text" /><br />
<input id="datepicker-example7-end" type="text" /><br /></div>
</form>
<br />
<br />
<br />
<b>8.</b> Mengatur format dari tanggal yang dipilih:<br />
<br />
<pre class="brush:js">$('#datepicker-example8').Zebra_DatePicker({
format: 'M d, Y'
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example8" type="text" /></div>
</form>
<br />
<br />
<br />
<b>9.</b> Menampilkan nomor awal pekan<br />
<br />
<pre class="brush:js">$('#datepicker-example9').Zebra_DatePicker({
show_week_number: 'Wk'
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example9" type="text" /></div>
</form>
<br />
<br />
<br />
<b>10.</b> Memulai dengan pilihan “tahun” – direkomendasikan ketika user memilih tanggal lahirnya. Ingatlah bahwa Anda dapat berganti tampilan dengan meng-klik header date picker diantara tombol “previous” dan “next”<br />
<br />
<pre class="brush:js">$('#datepicker-example10').Zebra_DatePicker({
view: 'years'
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example10" type="text" /></div>
</form>
<br />
<br />
<br />
<b>11.</b> Berhenti setelah memilih bulan<br />
<br />
<pre class="brush:js">$('#datepicker-example11').Zebra_DatePicker({
format: 'm Y' // perhatikan bahwa hal itu karena tidak ada hari di dalam format
// user tidak dapat memilih tanggal hari
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example11" type="text" /></div>
</form>
<br />
<br />
<br />
<b>12.</b> meng-handle event "onChange". jika callback function di tempatkan pada event "onChange", ini bisa dipanggil kapanpun user mengubah tampilan (hari/bulan/tahun), serta ketika user meng-klik icon "next"/"previous" di semua tampilan. callback function yang dipanggil oleh event ini mengambil dua argumen/parameter - tampilan (hari/bulan/tahun) dan element yang "aktif" (tidak non aktif) di dalam tampilan tersebut, sebagai elemen jQuery memungkinkan kustomisasi dan interaksi dengan sel-sel tertentu di dalam tampilan date picker:<br />
<br />
<pre class="brush:js">$('#datepicker-example12').Zebra_DatePicker({
// eksekusi function ketika user mengubah tampilan (hari/bulan/tahun)
// serta ketika user meng-klik tombol "next"/"previous" di tampilan date picker
onChange: function(view, elements) {
// pada tampilan hari...
if (view == 'days') {
// iterasi setiap elemen yg aktif di tampilan saat ini
elements.each(function() {
// untuk memudahkan pencarian tanggal tertentu, setiap elemen mengambil
// atribut data "date" yang berbentuk :
// - YYYY-MM-DD untuk elemen dalam tampilan "hari"
// - YYYY-MM untuk elemen dalam tampilan "bulan"
// - YYYY untuk elemen dalam tampilan "tahun"
// jadi, karena kita berada di tampilan "hari",
// ayo kita temukan tanggal 24 menggunakan regular expression
// (ingat bahwa ini akan diterapkan pada setiap tanggal 24
// setiap bulan pada setiap tahun)
if ($(this).data('date').match(/\-24$/))
// dan sorot tanggal tersebut!
$(this).css({
backgroundColor: '#C40000',
color: '#FFF'
});
});
}
}
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example12" type="text" /></div>
</form>
<br />
<br />
<br />
<b>13.</b> Kalender selalu ditampilkan. Atur properti "always_visible" yang ditujukan ke elemen jQuery<br />
yang akan memuat date picker<br />
<br />
<pre class="brush:js">$('#datepicker-examples13').Zebra_DatePicker({
always_visible: $('#date-container')
});
</pre>
<br />
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-examples13" type="text" /><br />
<div id="date-container" style="height: 260px; margin: 10px 0 0 0;">
</div>
</div>
</form>
<br />
Nah, buat contoh pemakaiannya silakan download :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://onedrive.live.com/redir?resid=A24ABA6A7DF3D58E!119&authkey=!AOKe4ekqg1yXjRg&ithint=file%2c.zip" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2TAemufa9tg610yZcVwKNejnQus1bhFis7FsKhUTeu23qBiIMm3T8axgen1mms43eeth3Mml9xs7ifkkkmFiBC459eGGnivGvj0s79Ct8kVN6-W9MLl-mTdVzhfSkNuxX5HMc1FiuQs/s1600/download-buttons-preview.jpg" height="38" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://onedrive.live.com/redir?resid=A24ABA6A7DF3D58E!119&authkey=!AOKe4ekqg1yXjRg&ithint=file%2c.zip" target="_blank">Download Demo Program</a></td></tr>
</tbody></table>
<br />
Ya begitulah yang dapat jelaskan, untuk lebih jelasnya silakan teman-teman mengunjungi website aslinya di <a href="http://stefangabos.ro/jquery/zebra-datepicker" target="_blank">http://stefangabos.ro/jquery/zebra-datepicker</a><br />
<br />
Seperti biasa, saya tunggu kritik dan saran dari teman-teman pembaca. Salam <a href="http://plat-m.com/" target="_blank">Blogger Madura</a> ^_^<br />
<br />
<br />Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com54tag:blogger.com,1999:blog-363119140872010489.post-57765442635947712012013-11-20T17:08:00.000+07:002015-03-27T13:58:30.880+07:00Belajar Lebih Dalam Data Manipulation Language (DML) di MySQL<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.hdlost.com/download/code-8bit-like-sql-1920x1200.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.hdlost.com/download/code-8bit-like-sql-1920x1200.jpg" height="200" width="320" /></a></div>
Pada artikel sebelumnya tentang <a href="http://sekedar-tutorial.blogspot.com/2013/11/berkenalan-dengan-data-manipulation.html" target="_blank">Berkenalan dengan Data Manipulation Language</a>, di artikel ini kita akan belajar lebih jauh tentang Data Manipulation Language (DML). Oke deh, langsung saja.<br />
<a name='more'></a><br />
1. Klausa AS (Alias)<br />
Perintah Select dapat dilakukan dengan memberikan nama ALIAS yaitu dapat digunakan untuk mengganti nama_kolom dan nama_tabel.<br />
contohnya : <br />
<pre class="brush:sql">SELECT nama AS 'Nama Mahasiswa’ FROM mahasiswa</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjTwQttfH5ESf-FryYSYPJZ8IQsKsLGkzbI1d_DQhKjGV11AT9TLEzSqDFLwcpIrMLRBwvni5oE0Ikffdso2pk0rcRutS8JzVbxZmEEcuy8UXV4pi-hyETRVhqAJEGwbFWKXnY0nYx7dI/s1600/as.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjTwQttfH5ESf-FryYSYPJZ8IQsKsLGkzbI1d_DQhKjGV11AT9TLEzSqDFLwcpIrMLRBwvni5oE0Ikffdso2pk0rcRutS8JzVbxZmEEcuy8UXV4pi-hyETRVhqAJEGwbFWKXnY0nYx7dI/s200/as.png" height="200" width="157" /></a></div>
<br />
2. Menampilkan Data Dari Beberapa Tabel<br />
Perintah Select juga dapat dilakukan untuk beberapa tabel sekaligus dengan syarat bahwa tabel-tabel yang akan ditampilkan semua mempunyai relasi baik secara implisit maupun eksplisit.<br />
Contohnya : <br />
<pre class="brush:sql">SELECT mahasiswa.nrp, nama, kodemk FROM mahasiswa, krs
WHERE krs.nrp = mahasiswa.nrp
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVD6Tcq71TKy3H7i8u7OIPg2zkbicMMBA4rIqnJqmhT06YbLkzSMyG1Ylm8EnuTYKqNXydmhn-891yoOif2fDAMKq7Goy1PL64KY-HxqclfU_dq_hZVaH4HL81dmhTNUzm49Y1qOTJtnU/s1600/dua-tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVD6Tcq71TKy3H7i8u7OIPg2zkbicMMBA4rIqnJqmhT06YbLkzSMyG1Ylm8EnuTYKqNXydmhn-891yoOif2fDAMKq7Goy1PL64KY-HxqclfU_dq_hZVaH4HL81dmhTNUzm49Y1qOTJtnU/s320/dua-tabel.png" height="192" width="320" /></a></div>
<br />
3. ORDER BY<br />
Klausa ORDER BY digunakan untuk mengurutkan data, defaultnya secara Ascending.<br />
Contohnya : <br />
<pre class="brush:sql">SELECT * FROM `mahasiswa` ORDER BY NRP
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADRFwegQ_3-JPNABe6zFWPyZk4g9R-bhfdRxuYjxH0woLoh693cPEp8dGSi041YwHQYrQEQ1BElqELpI8vSQIPjDaK9iDG-4LBMEXIR59E1LAz6OgdCZbGkCFRoO3HNY2lWO-AdUjfl4/s1600/order-by.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADRFwegQ_3-JPNABe6zFWPyZk4g9R-bhfdRxuYjxH0woLoh693cPEp8dGSi041YwHQYrQEQ1BElqELpI8vSQIPjDaK9iDG-4LBMEXIR59E1LAz6OgdCZbGkCFRoO3HNY2lWO-AdUjfl4/s1600/order-by.png" /></a></div>
<br />
Contoh lagi : Secara Descending<br />
<pre class="brush:sql"> SELECT * FROM `mahasiswa` ORDER BY NRP DESC
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0Fm99qa-c9WldoACVb99LawbPFByZebPtrPnf-Zuw74_KHIRa-h5OFPHXI0OJNEMrA30QosJf_UztHpXcq1a-41lAYYItvEsmgmwhw2KktLhY-TV8mB5zDu0f2wft7ZCadTGJTt3X3U/s1600/order-by-desc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0Fm99qa-c9WldoACVb99LawbPFByZebPtrPnf-Zuw74_KHIRa-h5OFPHXI0OJNEMrA30QosJf_UztHpXcq1a-41lAYYItvEsmgmwhw2KktLhY-TV8mB5zDu0f2wft7ZCadTGJTt3X3U/s1600/order-by-desc.png" /></a></div>
<br />
4. Operator AND dan OR<br />
AND dan OR menggabungkan dua atau lebih kondisi pada klausa WHERE<br />
Contohnya : Tampilkan data mahasiswa yang alamatnya dari sumenep atau dari lamongan<br />
<pre class="brush:sql">SELECT * FROM `mahasiswa`
WHERE alamat = 'sumenep’
OR alamat = 'lamongan'</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ17W2mwfeAVYTWPAINeis3rESLdGiX8eR3GCoJpJjuiHbUBo4lCXJYDKvof8r3At3BDlqVE6UaWOM84N6Vv2d86c6PENsCF0Sp4HS-ARBLHSVI8Wf1zHfo3i_2xB2RpqJg22N3orykzI/s1600/or.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ17W2mwfeAVYTWPAINeis3rESLdGiX8eR3GCoJpJjuiHbUBo4lCXJYDKvof8r3At3BDlqVE6UaWOM84N6Vv2d86c6PENsCF0Sp4HS-ARBLHSVI8Wf1zHfo3i_2xB2RpqJg22N3orykzI/s1600/or.png" /></a></div>
<br />
Contoh lagi : Tampilkan data mahasiswa yang berjenis kelamin laki-laki dan beralamat di Pamekasan<br />
<pre class="brush:sql">SELECT * FROM `mahasiswa`
WHERE alamat = 'pamekasan'
AND jeniskelamin = 'Laki-laki'</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ckjlfB0gmlI8ddpdRqba9XSqdo9lNJfGdr8rjySKK_60nCmUAcnSqQSADnd0eBTqVJZ2Q-nHNnykswv3_7Upp8YMcdcYU0vElRN4TDh6K5P10ZU1cEGQfwebEkJJsTjYOLWDkTWrtEI/s1600/and.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ckjlfB0gmlI8ddpdRqba9XSqdo9lNJfGdr8rjySKK_60nCmUAcnSqQSADnd0eBTqVJZ2Q-nHNnykswv3_7Upp8YMcdcYU0vElRN4TDh6K5P10ZU1cEGQfwebEkJJsTjYOLWDkTWrtEI/s1600/and.png" /></a></div>
<br />
5. GROUP BY<br />
klausa GROUP BY digunakan untuk menggabungkan baris(-baris) yang kolomnya memiliki nilai yang sama<br />
Contoh : Tampilkan kota dan jumlah mahasiswa dari kota tersebut<br />
<pre class="brush:sql">SELECT alamat, count( alamat ) AS Jumlah
FROM mahasiswa
GROUP BY alamat
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8flOQbWuRmAPa3nH_OuxSpwACpHGIN2fXOpX22_jb7C8OfI5X1anKWvdv-TNWKONYKayJnqGQoqUNO9lzVSCU6oqb_913joJPm81LWwc1_K22sOFxp7ONixASapBpBDygN8747gvYjVY/s1600/group-by.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8flOQbWuRmAPa3nH_OuxSpwACpHGIN2fXOpX22_jb7C8OfI5X1anKWvdv-TNWKONYKayJnqGQoqUNO9lzVSCU6oqb_913joJPm81LWwc1_K22sOFxp7ONixASapBpBDygN8747gvYjVY/s200/group-by.png" height="145" width="200" /></a></div>
<br />
6. HAVING<br />
Klausa HAVING disediakan untuk mendukung klausa GROUP BY. Kegunaannya adalah untuk menentukan kondisi bagi GROUP BY. Kelompok yang memenuhi kondisi HAVING saja yang akan dihasilkan.<br />
Contoh : Tampilkan nama kota dan jumlahnya yang menjadi alamat lebih dari 2 mahasiswa<br />
<pre class="brush:sql">SELECT alamat, count( alamat ) AS Jumlah
FROM mahasiswa
GROUP BY alamat
HAVING COUNT( alamat ) > 2
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6lXQlw4D_Qm-cChywvqZ-i_-ULXVm4NXzcKQAW0SwYhm2BYNzdjmDPML8HRPndM6tOIWugjk8vVAH9eU-sJivqRMMG8ID03-sSX5XTqgCR1m5PEKmKYbN4vdd5TLZC_n7X-kM7iwHXs/s1600/having.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6lXQlw4D_Qm-cChywvqZ-i_-ULXVm4NXzcKQAW0SwYhm2BYNzdjmDPML8HRPndM6tOIWugjk8vVAH9eU-sJivqRMMG8ID03-sSX5XTqgCR1m5PEKmKYbN4vdd5TLZC_n7X-kM7iwHXs/s200/having.png" height="88" width="200" /></a></div>
<br />
7. Fungsi Aggregate<br />
Fungsi aggregate digunakan untuk melakukan perhitungan statistikal dalam tabel. Secara umum, hanya field yang bertipe numerik yang bisa dikenakan fungsi ini.<br />
<table border="1" style="border-collapse: collapse; width: 80%;"> <tbody>
<tr>
<th>Fungsi</th>
<th>Keterangan</th>
</tr>
<tr>
<td>AVG</td>
<td>Menghitung rata-rata dari suatu kolom</td>
</tr>
<tr>
<td>COUNT</td>
<td>Menghitung jumlah baris dari suatu kolom</td>
</tr>
<tr>
<td>MAX</td>
<td>Mengambil nilai tertinggi dari suatu kolom</td>
</tr>
<tr>
<td>MIN</td>
<td>Mengambil nilai terendah dari suatu kolom</td>
</tr>
<tr>
<td>SUM</td>
<td>Menjumlahkan semua data pada suatu kolom</td>
</tr>
</tbody></table>
<br />
Demikian yang dapat saya perkenalkan, sebenarnya masih banyak lagi yang perlu kita pelajari tentang SQL ini. Saya tunggu kritik dan saran dari teman-teman pembaca. Salam <a href="http://plat-m.com/" target="_blank">Blogger Madura</a>.Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com2tag:blogger.com,1999:blog-363119140872010489.post-70331265469545184122013-11-20T15:11:00.001+07:002015-03-27T13:57:40.225+07:00Belajar Tentang Data Manipulation Language (DML) di MySQL<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqN5a5o_rjqL1Kg2Wi4nFm5qJmMtAg_CxYxaeAeWnONnEH5mP4h16l_P7dXJktElry7Rq5qpChb0URIUlP-IB4uNU3CkVd_Dop3pKCzbLwP1PU2cJJqLNXKRX8l3pbql54HXQ2MnbzZ8/s1600/database_mysql.png" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqN5a5o_rjqL1Kg2Wi4nFm5qJmMtAg_CxYxaeAeWnONnEH5mP4h16l_P7dXJktElry7Rq5qpChb0URIUlP-IB4uNU3CkVd_Dop3pKCzbLwP1PU2cJJqLNXKRX8l3pbql54HXQ2MnbzZ8/s320/database_mysql.png" height="320" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : <span class="irc_ho" dir="ltr" style="margin-right: -2px; overflow: hidden; padding-right: 2px; text-overflow: ellipsis;">ardiancaisar.blogspot.com</span></td></tr>
</tbody></table>
<br />
Jika kita berbicara tentang query atau kita biasa kita menyebutnya dengan SQL (Structured Query Language) tentu yang akan terbayang di benak kita adalah sekulumit perintah yang <s>mengerikan</s> membingungkan. Padahal dengan bahasa inilah RDBMS (Relational Database Management System) mau bertekuk lutut tak berkutik di hadapan kita. Untuk itu kita harus menguasai SQL untuk membuat program yang spektakuler.<br />
<a name='more'></a>1. DML, Benda apakah itu?<br />
Menurut modul praktikum yang pernah saya baca dulu, DML adalah bahasa yang memungkinkan pengguna mengakses atau memanipulasi data seperti yang diatur oleh model data. Dengan kata lain, dengan menggunakan DML kita dapat memasukkan, mengambil, mengedit, menghapus atau melakukan apapun yang kita terhadap data yang kita miliki.<br />
<br />
Bagaimana perintah-perintah untuk memanipulasi data kita? berikut ini contoh sederhananya:<br />
<br />
a. INSERT<br />
Pernyataan INSERT INTO digunakan untuk memasukkan data baru kedalam tabel.<br />
Sintaks :<br />
<pre class="brush:sql">INSERT INTO nama_tabel (kolom1, kolom2, ...)
VALUES (nilai1, nilai2, ...)</pre>
Contohnya gini :<br />
<pre class="brush:sql">INSERT INTO `akademik`.`mahasiswa` (`NRP` ,`Nama` ,`JenisKelamin` , `Semester` ,`Jurusan` ,`Alamat` )
VALUES ('090411100001', 'Eka Nanda', 'Laki-laki', '4', 'Teknik Informatika', 'Lamongan Jawa Timur’);
</pre>
Contoh lainnya :<br />
<pre class="brush:sql">INSERT INTO `akademik`.`mahasiswa`
VALUES ('090411100001', 'Eka Nanda', 'Laki-laki', '4', 'Teknik Informatika', 'Lamongan Jawa Timur’);</pre>
Nah, bagaimana jika data yang dimasukkan lebih dari 1 baris? berikut ini contohnya :<br />
<pre class="brush:sql">INSERT INTO akademik.matakuliah
VALUES
('tkj111', 'Matematika1', '3', 'A'),
('tkj112', 'Statistika', '3', 'B’),
('tkj123', 'Fisika', '3', 'A’),
('tkj321', 'Algoritma Pemrograman', '3', 'C');
</pre>
<br />
b. UPDATE<br />
Pernyataan UPDATE digunakan untuk modifikasi data yang ada didalam tabel.<br />
Sintaks : <br />
<pre class="brush:sql">UPDATE nama_tabel
SET nama_ko lom = nilai_baru
WHERE nama_kolom = nilai</pre>
<br />
Contoh, bila kita ingin mengubah nama mahasiswa yang memiliki NRP tertentu :<br />
<pre class="brush:sql">UPDATE akademik.mahasiswa
SET Nama = 'Andi S' WHERE NRP = '090411100011'</pre>
<br />
Contoh lagi, bila kita ingin mengubah nama sekaligus alamat mahasiswa yang memiliki NRP tertentu :<br />
<pre class="brush:sql">UPDATE akademik.mahasiswa
SET Nama = 'Andi Sholihin',
Alamat = 'Pamekasan'
WHERE NRP = '090411100011'</pre>
<br />
c. DELETE<br />
Pernyataan DELETE digunakan untuk menghapus baris pada tabel.<br />
Sintaks :<br />
<pre class="brush:sql">DELETE FROM nama_tabel
WHERE nama_kolom = nilai</pre>
<br />
Contohnya, bila kita ingin menghapus data mahasiswa yang memiliki NRP tertentu :<br />
<pre class="brush:sql">DELETE FROM `akademik`.`mahasiswa`
WHERE `mahasiswa`.`NRP` = '090411100001'</pre>
<br />
d. SELECT<br />
Secara umum perintah SELECT hanya difungsikan untuk menampilkan data yang ada di dalam suatu tabel. Tapi, walaupun hanya menampilkan data, statement SELECT memiliki beragam variasi yang menarik untuk menampilkan data kita.<br />
Contohnya, bila kita ingin menampilkan semua data dari sebuah tabel : <br />
<pre class="brush:sql">SELECT * FROM mahasiswa</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42A-rRf7nk30OGmAJcMbqrB3ucay_K8peVOuHZBg08Tz_89mpLP7X9-rKNdOyVq6NOIHmdJK6BfBT_pVP5dSUbP66nXIdpN4G83y5Esj_4jW2gBdhE4Di7mI4dkw1_9B4ym3CTLNDiAY/s1600/select1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42A-rRf7nk30OGmAJcMbqrB3ucay_K8peVOuHZBg08Tz_89mpLP7X9-rKNdOyVq6NOIHmdJK6BfBT_pVP5dSUbP66nXIdpN4G83y5Esj_4jW2gBdhE4Di7mI4dkw1_9B4ym3CTLNDiAY/s1600/select1.png" /></a></div>
<br />
Nah, bila kita ingin memilih hanya nilai yang berbeda, gunakan pernyataan SELECT DISTINCT, contohnya :<br />
<pre class="brush:sql">SELECT DISTINCT Alamat FROM mahasiswa</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTcn6tGpYUVAB00JixO1JaSnI6d61LohiH6Lzv-zIQJBM39p8QyHe_kdUUdOCRej6JmllpPpVOl2isfPajw3G8xoC0Ho-LWeUyydEyYsYDLlgzPFQnG_zCbfsmpFSxKBOwthU5javXvY/s1600/select2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTcn6tGpYUVAB00JixO1JaSnI6d61LohiH6Lzv-zIQJBM39p8QyHe_kdUUdOCRej6JmllpPpVOl2isfPajw3G8xoC0Ho-LWeUyydEyYsYDLlgzPFQnG_zCbfsmpFSxKBOwthU5javXvY/s200/select2.png" height="200" width="181" /></a></div>
<br />
Lalu, jika kita ingin menampilkan data dengan kondisi tertentu kita dapat menggunakan klausa WHERE, misalnya : <br />
<pre class="brush:sql">SELECT * FROM `mahasiswa` WHERE Alamat = 'Pamekasan'</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcSK10CmoQpar5iKUkwgVwDfy-ek2elxBgVd25NkYX4riS4fBDo9CMRMOJOnLp7usP3mcZnxlWew7r8M9e6KNwzCKTdkLwRgUDDSatK82Ap2VNDT16NJVDa77G5axhgG-FvDI109RLbY/s1600/select3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcSK10CmoQpar5iKUkwgVwDfy-ek2elxBgVd25NkYX4riS4fBDo9CMRMOJOnLp7usP3mcZnxlWew7r8M9e6KNwzCKTdkLwRgUDDSatK82Ap2VNDT16NJVDa77G5axhgG-FvDI109RLbY/s1600/select3.png" /></a></div>
<br />
Selanjutnya, jika kita ingin menentukan pencarian berdasarkan pola tertentu pada suatu kolom, kita dapat menggunakan klausa LIKE.<br />
Contoh: Tampilkan nrp dan nama mahasiswa yang memiliki huruf “i” pada posisi huruf sebelum huruf terakhir dari namanya.<br />
<pre class="brush:sql">SELECT NRP, Nama FROM `mahasiswa` WHERE Nama LIKE '%i_'</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUUym7oBZIAqujsnymTiI2S5wls7biasf0BdAThnvvGBcuwQOUOOm8BDn4Xvn7-osxJUGhQ2YujED3r66XEk84wHYzBARX9OR1E8u5C-glibmF16ZCOm2Jq8PV9sLWjcW3qYvG1wJEo4/s1600/select4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUUym7oBZIAqujsnymTiI2S5wls7biasf0BdAThnvvGBcuwQOUOOm8BDn4Xvn7-osxJUGhQ2YujED3r66XEk84wHYzBARX9OR1E8u5C-glibmF16ZCOm2Jq8PV9sLWjcW3qYvG1wJEo4/s320/select4.png" height="116" width="320" /></a></div>
<br />
Contoh lagi : Tampilkan Nama dan Alamat mahasiswa yang memiliki huruf “an” pada namanya<br />
<pre class="brush:sql">SELECT nama, alamat FROM `mahasiswa` WHERE nama LIKE '%an%'</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt-KkzlwvK8IB0iJgzXzG27bDnkJfCmWdWFB2eYpmEffnB4_AedV0M9W3xjRJloS5ciZDVCQu1pNZLvPdlvApmzMkEl2nvvNW5j3dD-f6S0-fb8bez7j3CNvWt0F86LTmZ3asim5KG8M/s1600/select5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt-KkzlwvK8IB0iJgzXzG27bDnkJfCmWdWFB2eYpmEffnB4_AedV0M9W3xjRJloS5ciZDVCQu1pNZLvPdlvApmzMkEl2nvvNW5j3dD-f6S0-fb8bez7j3CNvWt0F86LTmZ3asim5KG8M/s320/select5.png" height="153" width="320" /></a></div>
<br />
Mungkin cukup sekian perkenalan, di artikel berikutnya kita akan belajar menggunakan statement SELECT lebih jauh lagi. Jika ingin belajar lebih jauh silakan baca artikel <a href="http://sekedar-tutorial.blogspot.com/2013/11/berkenalan-lebih-jauh-dengan-data.html" target="_blank">Berkenalan Lebih Jauh dengan DML</a> Seperti biasa saya tunggu kritik dan saran dari teman-teman pembaca. Salam <a href="http://plat-m.com/" target="_blank">Blogger Madura</a>.Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com0tag:blogger.com,1999:blog-363119140872010489.post-60086644657699964302013-11-07T11:10:00.000+07:002014-01-29T19:32:45.888+07:00Membuat Tabel Zebra HTML Warna Warni dengan CSS3Adakalanya ketika kita ingin membuat tabel yang menampilkan data kita di sistem informasi yang kita buat dengan tampilan yang berbeda. Misalnya kita ingin membuat tampilan seperti berikut ini :<br />
<a name='more'></a><br />
<br />
<style type="text/css">
table {
border-collapse:collapse;
width:90%;
}
table, td, th {
border:1px solid black;
}
tbody tr:nth-child(odd) {
background-color: #ccc;
}
</style><br />
<table><thead>
<tr> <th>No</th> <th>Nama</th> <th>Jurusan</th> </tr>
</thead> <tbody>
<tr> <td>1</td> <td>Andi Sholihin</td> <td>Teknik Informatika</td> </tr>
<tr> <td>2</td> <td>Eka Nanda</td> <td>Teknik Informatika</td> </tr>
<tr> <td>3</td> <td>Winda Sarifati</td> <td>Teknik Informatika</td> </tr>
<tr> <td>4</td> <td>Rahilah</td> <td>Teknik Informatika</td> </tr>
</tbody> </table>
<br />
caranya mudah, pertama mari kita buat tabelnya dulu.<br />
<pre class="brush:html"><table>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi Sholihin</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>2</td>
<td>Eka Nanda</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>3</td>
<td>Winda Sarifati</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>4</td>
<td>Rahilah</td>
<td>Teknik Informatika</td>
</tr>
</tbody>
</table>
</pre>
<br />
<br />
Selanjutnya kita pasang CSSnya seperti berikut ini.<br />
<pre class="brush:css"><style type="text/css">
table {
border-collapse:collapse;
width:90%;
}
table, td, th {
border:1px solid black;
}
tbody tr:nth-child(odd) {
background-color: #ccc;
}
</style>
</pre>
<br />
<br />
Mudah kan? sekian tutorial kali ini, semoga bermanfaat. Salam <a href="http://plat-m.com/">Blogger Madura</a>.Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com2tag:blogger.com,1999:blog-363119140872010489.post-13116004988850838232013-09-19T08:48:00.000+07:002016-03-12T12:20:19.580+07:00Cara Membuat Input, View, Update, Delete Data (CRUD) dengan PDO PHP & MySQLKetika kita kuliah di jurusan yang ada hubungannya dengan coding, pasti suatu saat kita akan mengambil mata kuliah yang ada hubungannya dengan database alias basis data. Tentu saja dalam mata kuliah tersebut kita wajib mempelajari SQL (Structured Query Language), sebuah bahasa query untuk membuat RDBMS (Relational Database Management Systems) bertekuk lutut di hadapan kita.<br />
<a name='more'></a>Setelah kita paham tentang SQL tiba saatnya sang dosen memberi hadiah berupa tugas, tentu saja tugas yang diberikan tak pernah kita kerjakan sebelumnya yaitu mengaplikasikan SQL yang telah kita kuasai ke dalam sebuah bahasa pemrograman yang biasa disebut dengan PHP. Tapi tenang saja, berbekal ilmu dari mbah Google dan sedikit kreatifitas kita akan menjawab tantangan dosen tersebut.<br />
<br />
<b>A. Persiapan, Apa dan Bagaimana?</b><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://warungkopi.org/wp-content/uploads/2014/09/xampp-logo-trio1.jpg" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://warungkopi.org/wp-content/uploads/2014/09/xampp-logo-trio1.jpg" height="256" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : <a href="http://warungkopi.org/">http://warungkopi.org</a></td></tr>
</tbody></table>
Jika kita berhadapan dengan bahasa pemrograman web mau tidak mau kita harus tau tentang HTML. Selain itu kita juga harus menginstal web server di komputer (atau laptop) kita. Web server PHP yang paling banyak digunakan dan mudah pengoperasiannya adalah XAMPP. XAMPP adalah software web server dimana Apache (server PHP) dan MySQL terintegrasi didalamnya, sehingga kita tidak perlu repot-repot menginstal Apache dan MySQL secara terpisah. Mengenai cara instalasi XAMPP silakan cari di Google karena di artikel ini hanya fokus pada masalah membuat aplikasi input, view, update dan delete data berbasis web dengan menggunakan PHP dan MySQL.<br />
<br />
<br />
<b>B. Let's Rock, Ayo Mainkan!</b><br />
<br />
1. Pertama, buka XAMPP yang sudah kita instal lalu kita klik tombol start di sebelah Apache dan tombol start di sebelah MySQL sampai muncul tanda running. kemudian kita buka browser kesayangan kita baik itu Mozilla Firefox, Google Chrome atau lainnya, lalu arahkan ke alamat http://localhost/phpmyadmin, sampai disini kita telah berada di halaman PHPMyAdmin.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgDCmmCn7JPLTIojAOqBA5wd3zePdggHhqRrpwdYEj4m1l94tEZrSIjhNRr6tYvDzbuw7bPo5ky1pMqFtJ-lmc5cAcxlprCwkgA-0-rfHc0cAB9qMYDxbouNY4QIvI-Cs7MdlRTXT5Kw/s1600/phpmyadmin1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgDCmmCn7JPLTIojAOqBA5wd3zePdggHhqRrpwdYEj4m1l94tEZrSIjhNRr6tYvDzbuw7bPo5ky1pMqFtJ-lmc5cAcxlprCwkgA-0-rfHc0cAB9qMYDxbouNY4QIvI-Cs7MdlRTXT5Kw/s400/phpmyadmin1.png" width="400" /></a></div>
<br />
2. Buatlah sebuah database sesuai keinginan kita misalnya kita beri nama 'biodata' (tanpa tanda petik). Setelah itu, kita buat table baru yang kita beri nama 'tabel_biodata' misalnya. contoh SQLnya seperti berikut ini:<br />
<pre class="brush:sql">CREATE TABLE IF NOT EXISTS `tabel_biodata` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`jenis_kelamin` enum('Laki-Laki','Perempuan') NOT NULL,
`alamat` varchar(100) NOT NULL,
`no_hp` varchar(12) NOT NULL,
PRIMARY KEY (`id`)
);
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8r_N_BtieqmoWKGQ7KPo2UG4x0LY9qbdWGayvzi-pVxkT9L6AgVT2zhvs39zFx_f1FHmQ9v5waXi7GsijeZdsoWH-XTniJ6G5ex-ATVKeTPehCgqLKNOFpPn4VPsZyuBeY9v4DQiC5eQ/s1600/Image+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8r_N_BtieqmoWKGQ7KPo2UG4x0LY9qbdWGayvzi-pVxkT9L6AgVT2zhvs39zFx_f1FHmQ9v5waXi7GsijeZdsoWH-XTniJ6G5ex-ATVKeTPehCgqLKNOFpPn4VPsZyuBeY9v4DQiC5eQ/s1600/Image+2.png" width="640" /></a></div>
<br />
3. buat sebuah folder di folder C:\xampp\htdocs\ misalnya kita beri nama 'biodata'. Kemudian buka text editor kesayangan kita baik itu Notepad++, Adobe Dreamweaver, Geany, Gedit atau yang lainnya. Sekarang kita buat file untuk koneksi ke database mysql, Ketikkan <s>mantra-mantra</s> code program berikut ini (jangan di copy-paste loch!):<br />
<pre class="brush:php"><?php
$dsn = "mysql:dbname=biodata;host=localhost";
$user = "root";
$pass = "";
try {
$dbh = new PDO($dsn, $user, $pass);
} catch (PDOException $e) {
echo "Koneksi ke database gagal: ".$e->getMessage();
}
?>
</pre>
lalu kita simpan dengan nama 'connect.php' di dalam folder 'C:\xampp\htdocs\biodata'.<br />
<br />
4. Selanjutnya kita buat file baru untuk input data, ketikkan code program berikut ini:<br />
<pre class="brush:php"><h1 align="center">Input Biodata</h1>
<fieldset style="width: 50%; margin: auto;">
<legend>Form Input Biodata</legend>
<form action="simpan.php" method="post">
<p>
Nama Lengkap<br />
<input type="text" name="nama" required />
</p>
<p>
Jenis Kelamin<br />
<input type="radio" name="jenis_kelamin" value="Laki-Laki" id="laki-laki" /><label for="laki-laki">Laki-Laki</label>
<input type="radio" name="jenis_kelamin" value="Perempuan" id="perempuan" /><label for="perempuan">Perempuan</label>
</p>
<p>
Alamat Lengkap<br />
<textarea name="alamat" cols="50" required></textarea>
</p>
<p>
Nomor Handphone<br />
<input type="text" name="no_hp" required />
</p>
<p>
<input type="submit" value="Simpan" />
<input type="reset" value="Reset" onclick="return confirm('hapus data yang telah diinput?')">
</p>
</form>
</fieldset>
<br />
<center><a href="index.php">≪ Tabel Biodata</a></center>
</pre>
kita simpan dengan nama 'input.php', lalu coba kita akses di alamat 'http://localhost/biodata/input.php'. Tapi ini masih belum bisa menyimpan data, agar data kita bisa tersimpan kita lanjut ke langkah berikutnya.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hQ1PJp3YP4oljwWzn6SiychGLgxcSrNiJ5BhyphenhyphenGTAtf2Q1iG8ZLMfu_A557JB3xI4GYDj0ioUWH2VMqIAJ4TrL_2gUe46yzyhk0SdadbhRNhouEM1OoFkXSw0t7YOw8eRPkkjGxe_F00/s1600/crud-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hQ1PJp3YP4oljwWzn6SiychGLgxcSrNiJ5BhyphenhyphenGTAtf2Q1iG8ZLMfu_A557JB3xI4GYDj0ioUWH2VMqIAJ4TrL_2gUe46yzyhk0SdadbhRNhouEM1OoFkXSw0t7YOw8eRPkkjGxe_F00/s400/crud-1.png" width="400" /></a></div>
<br />
5. Setelah kita membuat tampilan untuk input data, kita buat file untuk menyimpan data yang kita inputkan. Code programnya seperti berikut ini:<br />
<pre class="brush:php"><?php
include 'connect.php';
if (isset($_POST)) {
$sql = "INSERT INTO tabel_biodata VALUES ('', '$_POST[nama]', '$_POST[jenis_kelamin]', '$_POST[alamat]', '$_POST[no_hp]')";
$dbh->exec($sql);
}
header("location:index.php");
?>
</pre>
lalu kita simpan dengan nama 'simpan.php'. Lalu bagaimana untuk menampilkan datanya? lanjut ke langkah berikutnya.<br />
<br />
6. Setelah diinput, kita akan melihat data kita dalam bentuk tabel. code program untuk menampilkan datanya seperti berikut ini:<br />
<pre class="brush:php"><?php
include 'connect.php';
?>
<style>
tbody > tr:nth-child(2n+1) > td, tbody > tr:nth-child(2n+1) > th {
background-color: #ededed;
}
table{
width: 70%;
margin: auto;
border-collapse: collapse;
box-shadow: darkgrey 3px;
}
thead tr {
background-color: #36c2ff;
}
</style>
<h1 align="center">Tabel Biodata</h1>
<center><a href="input.php">Input Biodata ≫ </a></center>
<br />
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>No Hp</th>
<th>Pilihan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM tabel_biodata ORDER BY id";
$no = 1;
foreach ($dbh->query($sql) as $data) :
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $data['nama'] ?></td>
<td><?php echo $data['jenis_kelamin'] ?></td>
<td><?php echo $data['alamat'] ?></td>
<td><?php echo $data['no_hp'] ?></td>
<td align="center">
<a href="edit.php?id=<?php echo $data['id'] ?>">edit</a>
<a href="hapus.php?id=<?php echo $data['id'] ?>" onclick="return confirm('Anda yakin akan menghapus data?')">hapus</a>
</td>
</tr>
<?php
endforeach;
?>
</tbody>
</table>
</pre>
lalu simpan dengan nama 'index.php' agar jika kita buka alamat 'http://localhost/biodata' langsung tampil tabel datanya.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiiqFRchYU97ut1ITv45xksT48Of_BSsWlHdxhPnFbXq-a8kGlD89i8lwS8tRhVKMScZtnAkzUIvtJrFPK-2NC9hePb1br_BbgBNNsZbeSxdzwAwYSVdV_XQZZwypMZIcPVRbRmVhKnWk/s1600/crud-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiiqFRchYU97ut1ITv45xksT48Of_BSsWlHdxhPnFbXq-a8kGlD89i8lwS8tRhVKMScZtnAkzUIvtJrFPK-2NC9hePb1br_BbgBNNsZbeSxdzwAwYSVdV_XQZZwypMZIcPVRbRmVhKnWk/s640/crud-2.png" width="640" /></a></div>
<br />
7. Selanjutnya kita akan membuat file agar data kita yang sudah masuk ke database bisa di edit lagi. Berikut ini code programnya:<br />
<pre class="brush:php"><?php
include 'connect.php';
if (isset($_GET['id'])) {
$query = $dbh->query("SELECT * FROM tabel_biodata WHERE id = '$_GET[id]'");
$data = $query->fetch(PDO::FETCH_ASSOC);
} else {
echo "ID tidak tersedia!<br /><a href='index.php'>Kembali</a>";
exit();
}
if ($data === false) {
echo "Data tidak ditemukan!<br /><a href='index.php'>Kembali</a>";
exit();
}
?>
<h1 align="center">Edit Biodata</h1>
<fieldset style="width: 50%; margin: auto;">
<legend>Form Input Biodata</legend>
<form action="update.php" method="post">
<input type="hidden" name="id" value="<?php echo $data['id']; ?>" />
<p>
Nama Lengkap<br />
<input type="text" name="nama" required value="<?php echo $data['nama']; ?>"/>
</p>
<p>
Jenis Kelamin<br />
<?php if ($data['jenis_kelamin'] === "Laki-Laki") : ?>
<input type="radio" name="jenis_kelamin" value="Laki-Laki" id="laki-laki" checked /><label for="laki-laki">Laki-Laki</label>
<input type="radio" name="jenis_kelamin" value="Perempuan" id="perempuan" /><label for="perempuan">Perempuan</label>
<?php else : ?>
<input type="radio" name="jenis_kelamin" value="Laki-Laki" id="laki-laki" /><label for="laki-laki">Laki-Laki</label>
<input type="radio" name="jenis_kelamin" value="Perempuan" id="perempuan" checked /><label for="perempuan">Perempuan</label>
<?php endif; ?>
</p>
<p>
Alamat Lengkap<br />
<textarea name="alamat" cols="50" required><?php echo $data['alamat']; ?></textarea>
</p>
<p>
Nomor Handphone<br />
<input type="text" name="no_hp" required value="<?php echo $data['no_hp']; ?>" />
</p>
<p>
<input type="submit" value="Simpan" />
<input type="reset" value="Reset" onclick="return confirm('hapus data yang telah diinput?')">
</p>
</form>
</fieldset>
<br />
<center><a href="index.php">≪ Tabel Biodata</a></center>
</pre>
lalu kita simpan dengan nama 'edit.php'.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjflf1jzqEXYir8vf1dayBaZDaE3GH08WCFO1CCo3soOA_CjLcAzJLYcijPwOX6-xdufv4krHVM-I1DlaARI1IVsGO0CHGFZ44_OKwb-ZP4ImNHgq9jTjAjUWMWDgIdshjPRSnZ-Tq-g/s1600/crud-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjflf1jzqEXYir8vf1dayBaZDaE3GH08WCFO1CCo3soOA_CjLcAzJLYcijPwOX6-xdufv4krHVM-I1DlaARI1IVsGO0CHGFZ44_OKwb-ZP4ImNHgq9jTjAjUWMWDgIdshjPRSnZ-Tq-g/s400/crud-3.png" width="400" /></a></div>
<br />
8. Selanjutnya kita akan membuat file yang bertugas mengupdate data yang telah kita edit. berikut code programnya : <br />
<pre class="brush:php"><?php
include 'connect.php';
if (isset($_POST)) {
$sql = "UPDATE tabel_biodata SET nama = '$_POST[nama]',
jenis_kelamin = '$_POST[jenis_kelamin]',
alamat = '$_POST[alamat]',
no_hp = '$_POST[no_hp]'
WHERE id = '$_POST[id]' ";
$dbh->exec($sql);
}
header("location:index.php");
?>
</pre>
lalu kita simpan dengan nama 'update.php'.<br />
<br />
9. Nah, bagian terakhir adalah membuat file yang bertugas untuk menghapus data yang kita pilih untuk dihapus, code programnya seperti berikut ini:<br />
<pre class="brush:php"><?php
include 'connect.php';
if (isset($_GET['id'])) {
$dbh->exec("DELETE FROM tabel_biodata WHERE id = '$_GET[id]'");
}
header("location:index.php")
?>
</pre>
kita simpan file tersebut dengan nama 'hapus.php'.<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;">
Demo Program : <a href="http://crud.is-best.net/" target="_blank"><b>Klik Disini</b></a></span></div>
<br />
Masih bingung? Download aja sourcecode programnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://drive.google.com/file/d/0B-LtgU2JdEvsN3p6eVJDajVFYlE/edit?usp=sharing" target="_blank"><img alt="https://drive.google.com/file/d/0B-LtgU2JdEvsN3p6eVJDajVFYlE/edit?usp=sharing" border="0" height="38" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2TAemufa9tg610yZcVwKNejnQus1bhFis7FsKhUTeu23qBiIMm3T8axgen1mms43eeth3Mml9xs7ifkkkmFiBC459eGGnivGvj0s79Ct8kVN6-W9MLl-mTdVzhfSkNuxX5HMc1FiuQs/s200/download-buttons-preview.jpg" title="download program input biodata" width="200" /></a></div>
<br />
Jika kamu masih bingung mengimpor databasenya, silakan baca <b><a href="http://sekedar-tutorial.blogspot.com/2012/11/cara-memindahkan-database-export-dan.html" target="_blank">Cara Memindahkan Database (Export/Import) MySQL</a></b>.<br />
<br />
Kunjungi juga <b><a href="http://sekedar-tutorial.blogspot.com/2015/04/download-sistem-informasi-akademik.html" target="_blank">Sistem Informasi Akademik Sekolah Berbasis Web Dengan PHP dan MySQL</a></b> <br />
<br />
Kunjungi juga <b><a href="http://www.sholihin.com/2016/03/download-web-cms-sederhana-berbasis-php.html" target="_blank">Download Web CMS Sederhana Berbasis PHP dan MySQL</a></b><br />
<br />
Sampai disini kita telah membuat sebuah program yang dapat membantu kita untuk input data, menampilkan data, mengupdate data dan menghapus data. Sekarang kita coba lagi program kita buat dengan mengakses ke alamat 'http://localhost/biodata'. sudah tampil kan programnya? selamat belajar, dan pesan saya jangan sering begadang ngerjain tugas gara-gara waktunya udah mepet mepet sama deadline. Jika ada pertanyaan jangan malu-malu untuk bertanya, salam <a href="http://plat-m.com/" target="_blank">Blogger Madura </a>^_^Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com127tag:blogger.com,1999:blog-363119140872010489.post-59188738216210831872013-09-12T12:18:00.000+07:002015-10-29T11:12:24.032+07:00Aplikasi Keren yang Harus di Instal di Linux UbuntuSetelah sebelumnya kita pernah belajar tentang <a href="http://sekedar-tutorial.blogspot.com/2012/11/cara-install-aplikasi-di-linux-ubuntu.html" target="_blank">cara instal program aplikasi di Linux Ubuntu</a>, kali ini kita akan menginstal aplikasi-aplikasi ubuntu yang gak kalah keren sama tetangga sebelah. Sebagai informasi awal saja, kita akan mencoba mengenal aplikasi keren yang (sebaiknya) harus diinstal di komputer Ubuntu kita. Selanjutnya temen-temen silakan bereksplorasi sendiri mencari pengalaman, kan orang bilang pengalaman adalah guru yang baik.<br />
<br />
<a name='more'></a>Langsung saja, berikut ini aplikasi yang coba kita jelajahi kedahsyatannya :<br />
<br />
<b>1. GRAPHIC EDITOR</b><br />
Aplikasi image editor selalu menjadi aplikasi wajib yang harus ada di komputer terutama untuk kita yang sangat hobi edit-edit foto ataupun suka melukis secara digital.<br />
<br />
<b>a. GIMP (GNU Image Manipulating Program)</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIqIfuS6aqNq96W74uSZRAOQlH3GC88qjipHy7fSzSjVIsAQ7Xso25-ODSJOC-XtYFfasCxboZbsmb5_nPGvJ5GwTPsgg87729wMHnxIrJTSm0Fd2TS1VmFANBgUzPj_ToHJWwJJ3Hxg/s1600/gimp_logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIqIfuS6aqNq96W74uSZRAOQlH3GC88qjipHy7fSzSjVIsAQ7Xso25-ODSJOC-XtYFfasCxboZbsmb5_nPGvJ5GwTPsgg87729wMHnxIrJTSm0Fd2TS1VmFANBgUzPj_ToHJWwJJ3Hxg/s200/gimp_logo.png" width="200" /></a></div>
Gimp adalah aplikasi image editor yang mirip dengan aplikasi Photoshop milik tetangga sebelah. Meski hadir dengan ukuran file yang jauh lebih kecil namun kemampuannya tidak dapat diremehkan. Selain itu, Gimp adalah aplikasi yang multiplatform, tidak hanya berjalan di lingkungan Linux tapi juga dapat berjalan di OS tetangga. Jika temen-temen penasaran dengan GIMP dan ingin mempelajarinya, silakan download panduannya di artikel <a href="http://sekedar-tutorial.blogspot.com/2013/01/tutorial-gimp-sebuah-panduan-gimp-untuk.html" target="_blank">tutorial gimp untuk pemula</a>.<br />
<br />
<b><br /></b>
<b><br /></b>
<b>b. Inkscape</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.h-online.com/imgs/43/7/0/9/1/2/3/InkscapeLogo200-34c51c7e065ab810.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.h-online.com/imgs/43/7/0/9/1/2/3/InkscapeLogo200-34c51c7e065ab810.png" height="200" width="168" /></a></div>
Jika kita sudah familiar dengan CorelDraw, maka di Linux pun kita juga bisa menggunakan Inkscape, sebuah aplikasi yang mempunyai kemampuan yang hampir sama dengan sepupunya di OS sebelah. Kemampuan Inkscape dalam hal olah gambar vektor sudah tidak bisa kita ragukan lagi. Kita dapat berkreasi dengan imajinasi tanpa terhalang platform yang kita pakai.<br />
<br />
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b>c. Dia</b><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Dia-icon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Dia-icon.png" height="200" width="200" /></a>Aplikasi ini dapat dijadikan alternatif pengganti Office Visio, sebagai aplikasi yang dapat kita gunakan untuk menggambar berbagai macam diagram di lingkungan Linux baik use case, UML, dan lain sebagai. Dia juga aplikasi yang dapat dijalankan di berbagai platform sistem operasi.<br />
<br />
<b><br /></b>
<b> </b><br />
<br />
<br />
<br />
<b>2. MULTIMEDIA</b><b><br /></b>
<b>a. VLC Player</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://images.videolan.org/images/largeVLC.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://images.videolan.org/images/largeVLC.png" height="200" width="200" /></a></div>
Siapa yang tak kenal dengan aplikasi VLC player, aplikasi yang gratis ini tidak kalah bila dibandingkan dengan aplikasi pemutar video dan musik lainnya. Tak hanya berjalan di lingkungan platform tetangga sebelah tapi juga di lingkungan sistem operasi Linux. Kemampuan memutar berbagai macam format video sudah tidak bisa kita ragukan lagi.<br />
<br />
<br />
<br />
<br />
<b><br /></b>
<b>b. Audacious</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://itsfoss.com/wp-content/uploads/2012/08/audacious-music-player-linux-logo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://itsfoss.com/wp-content/uploads/2012/08/audacious-music-player-linux-logo.jpg" height="200" width="200" /></a></div>
Jika kita sudah terbiasa dengan Winamp dan saat kita berada di lingkungan Linux masih bingung dengan Rhythmbox yang cenderung membingungkan bagi pemula maka Audacious adalah jawaban kebingungan kita. Audacious memiliki tampilan dan performa yang mirip dengan Winamp. Jadi kita tak perlu bingung lagi saat memutar musik kesayangan kita.<br />
<br />
<br />
<br />
<b><br /></b>
<b>c. Audacity</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://leeji.files.wordpress.com/2009/11/audacity-logo-r_50pct_sq_trans.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://leeji.files.wordpress.com/2009/11/audacity-logo-r_50pct_sq_trans.png" /></a></div>
Audacity adalah aplikasi sound editor gratis yang sangat powerfull dan dapat diandalkan dalam hal editing suara baik musik atau yang lainnya. Audacity juga dapat digunakan untuk merekam suara di komputer kita. Selain itu kita juga dapat berkreasi membuat berbagai macam karya seperti iklan radio, ringtone hp, dan lain sebagainya. Audacity dipersenjatai dengan berbagai efek memukau yang akan membantu kita dalam hal editing suara. Selain itu, aplikasi ini juga berjalan di berbagai macam platform sistem operasi.<br />
<br />
<b>3.APLIKASI OFFICE</b><br />
<b>a. WPS Office</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ngubuntu.com/wp-content/uploads/2013/03/wps-office-ribbon-750x404.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://ngubuntu.com/wp-content/uploads/2013/03/wps-office-ribbon-750x404.jpg" height="172" width="320" /></a></div>
WPS Office adalah aplikasi office yang secara tampilan mirip dengan Microsoft Office. Software ini tidak hanya berjalan di linux tapi juga di Windows dan Mac OS. Meskipun di linux sudah ada Libre Office tapi kalian perlu mencoba WPS Office karena tampilannya tidak membosankan dan membuat dokumen di Linux jadi lebih menyenangkan. Kita bisa mendapatkan master installer WPS Office di website resminya di <a href="http://www.kingsoftstore.com/"><cite class="_Rm">www.kingsoftstore.com/</cite></a><br />
<br />
Mungkin cukup sekian dulu artikel kali ini, penulis sudah capek ngetik, bersambung ke bagian berikutnya. Bagi yang masih bingung tentang cara instal aplikasi di linux silakan buka catatan tentang <a href="http://sekedar-tutorial.blogspot.com/2012/11/cara-install-aplikasi-di-linux-ubuntu.html" target="_blank">Cara Instal Program Aplikasi di Linux Ubuntu</a><br />
<br />
Seperti biasa, saran dan kritik temen-temen selalu saya tunggu. <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura ^_^</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com2tag:blogger.com,1999:blog-363119140872010489.post-43309783600952650472013-08-03T09:53:00.001+07:002013-08-03T10:13:35.342+07:00Ternary Operator, Cara Singkat Menulis Statement IF di PHP <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://vendyxiao.com/wp-content/uploads/2009/10/persimpangan.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="231" src="http://vendyxiao.com/wp-content/uploads/2009/10/persimpangan.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : http://vendyxiao.com/</td></tr>
</tbody></table>
Sejak kita mengenal dunia pemrograman, statement IF pasti sudah tidak asing lagi bagi kita. Statement percabangan seperti ini tersedia di semua bahasa pemrograman dan salah satu statement pemrograman yang penting. <br />
<a name='more'></a>contohnya sebagai berikut : <br />
<br />
<pre class="brush:php"><?php
$nilai = 90;
if ($nilai >= 80) {
$hasil = "keren gan, nilai diatas 80";
} else {
$hasil "nilai kurang dari 80";
}
echo $hasil;
?>
</pre>
<br />
Tentu kita akan dengan mudah menebak hasil dari program diatas. Ya tepat sekali, ouputnya : <br />
<pre><span style="color: red;">keren gan, nilai diatas 80</span></pre>
<br />
<b>Perkenalkan, Ternary Operator</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.moreonfew.com/wp-content/themes/Elegant/phpThumb/phpThumb.php?src=/wp-content/uploads/2012/12/Ternary-Operator.jpg&h=225&w=647&zc=1&q=100" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="139" src="http://www.moreonfew.com/wp-content/themes/Elegant/phpThumb/phpThumb.php?src=/wp-content/uploads/2012/12/Ternary-Operator.jpg&h=225&w=647&zc=1&q=100" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : http://www.moreonfew.com/</td></tr>
</tbody></table>
<br />
Sebenarnya jika kita menggunakan bahasa PHP, statement IF diatas dapat kita perpendek dengan menggunakan ternary operation seperti berikut ini:<br />
<br />
<pre class="brush:php"><?php
$nilai = 90;
$hasil = $nilai >= 80 ? "keren gan, nilai diatas 80" : "nilai kurang dari 80";
echo $hasil;
?>
</pre>
<br />
outputnya masih sama seperti sebelumnya : <br />
<pre><span style="color: red;">keren gan, nilai diatas 80</span></pre>
<br />
Dengan ternary operation statement IF menjadi lebih singkat dan lebih hemat baris.<br />
Contoh lainnya tentang penggunaan ternary operator:<br />
<pre class="brush:php"><?php
$nilai = 80;
echo "nilai Anda : ".$nilai.", maka Anda dinyatakan ".($nilai >= 55 ? "LULUS" : "TIDAK LULUS");
?>
</pre>
Outputnya : <br />
<pre><span style="color: red;">nilai Anda : 80, maka Anda dinyatakan LULUS</span></pre>
<br />
Selain itu, mungkin kita pernah mendapat pesan error yang menyebalkan seperti berikut ini:<br />
<pre>Notice: Undefined index: nama in /var/www/andi/ternary.php on line 2</pre>
<br />
Ternyata setelah kita lihat baris 2 di coding kita, yang kita temui adalah<br />
<pre class="brush:php"><?php
$nama = $_POST['nama'];
?>
</pre>
<br />
Loh, apanya yang salah?? sebenarnya pesan error seperti itu terjadi karena index 'nama' tidak didefinisikan, dengan kata lain belum ada value yang disubmit dari form ke script ini. nah, gimana cara mengatasinya? salah satu caranya kita bisa menggunakan ternary operator dengan bantuan fungsi isset(). isset() adalah fungsi bawaan PHP yang digunakan untuk memeriksa apakah suatu variabel telah didefinisikan atau belum. Sehingga code kita menjadi seperti berikut ini:<br />
<br />
<pre class="brush:php"><?php
$nama = isset($_POST['nama']) ? $_POST['nama'] : '';
?>
</pre>
<br />
Dengan demikian error tadi sudah tidak ada lagi.<br />
<br />
Bagaimana jika kita ingin menulis statement IF menggunakan Ternary Operator dengan kondisi seperti contoh berikut ini:<br />
<pre class="brush:php"><?php
$nilai = 40;
if ($nilai >= 80) {
$hasil = "nilai baik";
} elseif ($nilai >= 60) {
$hasil = "nilai cukup";
} else {
$hasil = "nilai kurang";
}
echo $hasil;
?>
</pre>
Mudah saja, cukup kita tuliskan seperti berikut ini:<br />
<pre class="brush:php"><?php
$nilai = 40;
$hasil = $nilai >= 80 ? "nilai baik" : ($nilai >= 60 ? "nilai cukup" : "nilai kurang");
echo $hasil;
?>
</pre>
Output : <br />
<pre><span style="color: red;">nilai kurang</span></pre>
<span style="color: red;"><br />
</span> Tapi ingat, Penulisan code seperti diatas sebaiknya kita hindari karena dan lebih memilih menggunakan statement yang biasa. Walaupun terlihat hemat baris namun Ternary Operator yang terlalu "Nested" seperti itu cenderung lebih sulit dibaca daripada struktur IF yang biasa dan cenderung membuat programmer pemula seperti saya kebingungan mengartikannya.<br />
<br />
Demikian tutorial ini, semoga bermanfaat. Saya tunggu kritik dan saran dari sobat. Salam <a href="http://plat-m.com/" target="_blank">Blogger Madura!</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com6tag:blogger.com,1999:blog-363119140872010489.post-59845591470471434922013-07-25T12:26:00.000+07:002013-07-25T12:40:53.999+07:00Petualangan Menjelajahi Luar Angkasa dengan Stellarium<br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmjkZNHomZf1T51jlYMTWc46Hm2rFXc6utraa33uWsszngQE2jFAFLd__iP4Oc9wkYJqxWP58T5_NBsl5DUSqjz2owVObMp1-KUTP9b1YmMAuWzPvjR7Xu-zNpP4uBwxcYl0p8hoOWmA/s1600/Screenshot+from+2013-06-21+11%253A29%253A44.png" style="width: 100%;" /><br />
<br />
<b>Indahnya Luar Angkasa</b> <br />
Luar angkasa memang selalu menyimpan misteri dan keindahan, ruang yang seakan tak terbatas untuk dijelajahi. Kita tentu sangat menyukai indahnya gemerlap taburan bintang di malam hari sambil tiduran di halaman rumah kita. Ternyata manusia hanya sebutir tepung bila dibandingkan dengan luasnya alam semesta. Subhanallah, alangkah indahnya ciptaan Allah SWT.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jjTMGgMjsSFZqqrqEP6RUyNkmetL4dZbFgcIAfw8OA8T5nHuqkXnz6WeUZTEtj__WJ1Cv6gHzjWsKYQ7fUw0KhtpOmmrzgPi4ENVc07znJ79lRPaVd-0t1rao3ho5PycJSuhruH8180/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jjTMGgMjsSFZqqrqEP6RUyNkmetL4dZbFgcIAfw8OA8T5nHuqkXnz6WeUZTEtj__WJ1Cv6gHzjWsKYQ7fUw0KhtpOmmrzgPi4ENVc07znJ79lRPaVd-0t1rao3ho5PycJSuhruH8180/s1600/8.png" width="100%" /></a></div>
<div style="text-align: justify;">
Rasanya ingin sekali melihat lebih dekat bintang-bintang, bulan, planet-planet dan semua objek langit itu. Tapi bagaimana caranya? kita kan tidak punya teleskop? kita kan jauh dari planetarium? Apakah kita akan menyerah dan mengubur keinginan kita? Tentu saja tidak. </div>
<br />
<a name='more'></a><br />
<b>Perkenalkan, Stellarium</b><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRvhaDjdHx7-yqGJiHPN1HSVjjkCFVkBJQLs4uESGV9TxHX0xWmIXsTKaMaXZtn5vO_LaK9tGLpbWEkKMBHN6dsEJmTkPr4mMq6cGsqv71N4Va8mBdDBc1RH5IJq3YrfQPeQ2fZHYecI/s1600/2.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRvhaDjdHx7-yqGJiHPN1HSVjjkCFVkBJQLs4uESGV9TxHX0xWmIXsTKaMaXZtn5vO_LaK9tGLpbWEkKMBHN6dsEJmTkPr4mMq6cGsqv71N4Va8mBdDBc1RH5IJq3YrfQPeQ2fZHYecI/s320/2.png" width="302" /></a></div>
<div style="text-align: justify;">
Berawal dari rasa penasaran itu akhirnya kita membuka situs pencarian terbesar di jagat dunia maya, Google. Kita ketikkan mantra-mantra pencarian yang dapat menghadirkan informasi yang kita butuhkan untuk mengobati rasa penasaran kita. Ternyata dari hasil pencarian itu ada sebuah software simulasi luar angkasa dengan berbagai fitur canggihnya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Stellarium adalah software komputer berlisensi GPL yang tentu saja gratis yang dapat menampilkan angkasa yang realistis secara real time menggunakan OpenGL. Dengan Stellarium, kamu benar-benar dapat melihat apa yang dapat kamu lihat dengan mata, teropong atau teleskop kecil. Stellarium juga digunakan di Planetarium.</div>
<div style="text-align: justify;">
Jika kita ingin mencobanya, kunjungi saja website resmi Stellarium di <a href="http://stellarium.org/" target="_blank">http://stellarium.org/</a> lalu download installernya. Stellarium tidak hanya tersedia untuk sistem operasi Linux tetapi juga tersedia untuk Windows dan Mac OS. Setelah selesai di download tinggal instal ke komputer kita.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<b>Pengaturan Awal</b><br />
Saat pertama kali memakai Stellarium ada beberapa pengaturan yang harus kita lakukan agar software ini bekerja dengan baik.<br />
<br />
a. Pengaturan Lokasi<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak1J6rD9Zmfp3FIZegrzRoIObrF32TJ1NUR9A610jzX3IKg7p6TfzrPYLvunmgdWBYGj8rq-vH4EVnHvqvPD5iBLLoCY-Sj37ThCMiqcP4eTOaYKhWkOdpo1ARiL-ZO2a4T7x8s7pN_I/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak1J6rD9Zmfp3FIZegrzRoIObrF32TJ1NUR9A610jzX3IKg7p6TfzrPYLvunmgdWBYGj8rq-vH4EVnHvqvPD5iBLLoCY-Sj37ThCMiqcP4eTOaYKhWkOdpo1ARiL-ZO2a4T7x8s7pN_I/s400/4.png" width="400" /></a></div>
<ol>
<li>Pilih menu Location Window pada bagian samping kiri layar</li>
<li>ketikkan nama kota kita pada kolom pencarian, misalnya pamekasan</li>
<li>pilih nama kota yg kita ketik tadi</li>
<li>tutup Location Window dan sekarang Stellarium sudah sesuai dengan lokasi kita saat ini.</li>
</ol>
b. Pengaturan Landscape<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXu1SS2yQLXttREFn_9Q0cHhgN9DOpG0N-Fg-RxwMXUz2jBy6ArlBXJYKepCetGvY0Gt2lwmVTfvS37urU83o5MMpXpztyP6Y0QSYIE5DwenvMKo43XbwqavCpEynVxJYWSZDf6GAl5Wc/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXu1SS2yQLXttREFn_9Q0cHhgN9DOpG0N-Fg-RxwMXUz2jBy6ArlBXJYKepCetGvY0Gt2lwmVTfvS37urU83o5MMpXpztyP6Y0QSYIE5DwenvMKo43XbwqavCpEynVxJYWSZDf6GAl5Wc/s400/5.png" width="400" /></a></div>
<ol>
<li>Pilih Sky and Viewing Options Window pada bagian samping kiri layar</li>
<li>Pilih Tab Landscape lalu pilih landscape yang kita inginkan</li>
<li>Tutup Sky and Viewing Options Window</li>
</ol>
c. Pengaturan Bahasa<br />
Pengaturan ini bersifat opsional, boleh diubah boleh tidak sesuai keinginan kita. Stellarium tersedia dalam bahasa Indonesia.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaZkf3Gj9iLfRli4Xjbizwd0DyU-w7OGNBTes3TmZZziosjlyRfxAFDhUkEAaid1wO3l9iIwRiJXMr7XtglhbIGOUsAUlD1EPVVfy3HiKocetf9DhmPqyvU_m2VvL6aJb5Aiybjlzpfk/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaZkf3Gj9iLfRli4Xjbizwd0DyU-w7OGNBTes3TmZZziosjlyRfxAFDhUkEAaid1wO3l9iIwRiJXMr7XtglhbIGOUsAUlD1EPVVfy3HiKocetf9DhmPqyvU_m2VvL6aJb5Aiybjlzpfk/s400/6.png" width="400" /></a></div>
<ol>
<li>Pilih Configuration Window di sebelah kiri layar</li>
<li>Pilih bahasa yang kita inginkan</li>
<li>Tutup Configuration Window</li>
</ol>
Setelah semua pengaturan kita sesuaikan sekarang saatnya kita menjelajahi luar angkasa. Selain, pengaturan-pengaturan yang disebutkan sebelumnya terdapat juga beberapa tombol yang membantu navigasi luar angkasa kita. berikut ini penjelasan tombol-tombol navigasi yang terdapat di Stellarium.<br />
<ol>
<li><img align="left" alt="time_button.png" src="http://stellarium.org/wikiimg/UserManual/time_button.png" />Date/time Window [F5]<br />
Berfungsi untuk mengatur waktu dan tanggal sesuai yang kita inginkan, misalnya kita ingin melihat hilal pada awal atau akhir bulan Ramadhan<br />
<br />
</li>
<li><img align="left" alt="find_button.png" src="http://stellarium.org/wikiimg/UserManual/find_button.png" />Search Window [F3]<br />
Berfungsi untuk mencari objek langit yang kita inginkan, misalnya kita ingin mencari planet Saturnus tapi kita tidak tahu lokasi planet ini dimana, kita bisa menggunakan tombol Search window ini.<br />
<br />
</li>
<li><img align="left" alt="help_button.png" src="http://stellarium.org/wikiimg/UserManual/help_button.png" />Help Window [F1]<br />
Berfungsi untuk menampilkan bantuan yang sangat membantu kita untuk menjelajahi luar angkasa.<br />
<br />
</li>
<li><img align="left" alt="constellation_button.png" src="http://stellarium.org/wikiimg/UserManual/constellation_button.png" />Constellation Lines [C]<br />
Jika tombol ini diaktifkan maka Stellarium akan menampilkan garis rasi bintang, sangat berguna jika kita ingin melihat garis rasi bintang<br />
<br />
</li>
<li><img align="left" alt="constellation_name_button.png" src="http://stellarium.org/wikiimg/UserManual/constellation_name_button.png" />Constellation Label [V]<br />
Constellation Lines hanya menampilkan garis rasi bintang saja, nah dengan Constellation Label ini kita bisa melihat nama-nama dari rasi bintang.<br />
<br />
</li>
<li><img align="left" alt="constellation_art_button.png" src="http://stellarium.org/wikiimg/UserManual/constellation_art_button.png" />Constellation Art [R]<br />
Dengan tombol ini kita tidak hanya melihat garis dan nama rasi bintang tetapi lengkap dengan gambaran rasi tersebut, misalnya Leo berbentuk Singa dan Pisces berbentuk ikan<br />
<br />
</li>
<li><img align="left" alt="eq_grid_button.png" src="http://stellarium.org/wikiimg/UserManual/eq_grid_button.png" />Equatorial Grid [E]<br />
Berfungsi untuk menampilkan garis equator atau garis khatulistiwa<br />
<br />
</li>
<li><img align="left" alt="az_grid_button.png" src="http://stellarium.org/wikiimg/UserManual/az_grid_button.png" />Azimuthal Grid [Z]<br />
Berfungsi untuk menampilkan garis Azimuth<br />
<br />
</li>
<li><img align="left" alt="ground_button.png" src="http://stellarium.org/wikiimg/UserManual/ground_button.png" />Ground [G]<br />
Jika tombol ini diaktifkan maka kita mengamati langit seolah-olah sedang berdiri di atas tanah. jika tidak diaktifkan maka seolah-olah kita melayang-layang di angkasa.<br />
<br />
</li>
<li><img align="left" alt="cardinal_button.png" src="http://stellarium.org/wikiimg/UserManual/cardinal_button.png" />Cardinal Points [Q]<br />
Berfungsi untuk menampilkan arah mata angin<br />
<br />
</li>
<li><img align="left" alt="atmosphere_button.png" src="http://stellarium.org/wikiimg/UserManual/atmosphere_button.png" />Atmosphere [A]<br />
Berfungsi untuk menampilkan atmosfir bumi atau tidak. jika tidak diaktifkan maka kita akan melihat bintang seperti malam hari walaupun saat ini adalah siang hari.<br />
<br />
</li>
<li><img align="left" alt="nebulae_button.png" src="http://stellarium.org/wikiimg/UserManual/nebulae_button.png" />Nebulas [N]<br />
Berfungsi untuk menampilkan Galaksi dan Nebula atau tidak. Nebula adalah awan antarbintang yang terdiri dari debu, gas, dan plasma<br />
<br />
</li>
<li><img align="left" alt="planets_button.png" src="http://stellarium.org/wikiimg/UserManual/planets_button.png" />Planets Labels [P]<br />
Berfungsi untuk menampilkan nama-nama dari planet yang kita amati<br />
<br />
</li>
<li><img align="left" alt="coord_type_button.png" src="http://stellarium.org/wikiimg/UserManual/coord_type_button.png" />Switch between equatorial and azimuthal mount [Ctrl+M]<br />
Berguna untuk mengubah antar sudut pandang equatorial atau azimuthal.<br />
<br />
</li>
<li><img align="left" alt="goto_button.png" src="http://stellarium.org/wikiimg/UserManual/goto_button.png" />Center on Selected Object [Spasi]<br />
Berguna untuk memfokuskan pengamatan terhadap objek langit yang kita pilih, dengan tombol ini kita bisa mendekati objek yang kita amati secara fokus dengan menggunakan scroll pada mouse atau touchpad kita.<br />
<br />
</li>
<li><img align="left" alt="night_mode_button.png" src="http://stellarium.org/wikiimg/UserManual/night_mode_button.png" />Night Mode<br />
Berfungsi untuk melihat dalam modus malam<br />
<br />
</li>
<li><img align="left" alt="fullscreen_button.png" src="http://stellarium.org/wikiimg/UserManual/fullscreen_button.png" />Fullscreen Mode [F11]<br />
Berfungsi untuk melihat Stellarium dalam mode Layar Penuh atau tidak.<br />
<br />
</li>
<li><img align="left" alt="timerate_decrease.png" src="http://www.stellarium.org/wikiimg/UserManual/timerate_decrease.png" />Drecrease Time Speed [J]<br />
Untuk memperlambat waktu di Stellarium<br />
<br />
</li>
<li><img align="left" alt="timerate_normal.png" src="http://www.stellarium.org/wikiimg/UserManual/timerate_normal.png" />Set Normal Time Rate [K]<br />
Untuk mengubah kecepatan waktu yang diperlambat atau dipercepat menjadi kecepatan waktu normal.<br />
<br />
</li>
<li><img align="left" alt="time_normal.png" src="http://www.stellarium.org/wikiimg/UserManual/time_normal.png" />Set Time to Now [8]<br />
Untuk mengubah waktu yang sebelumnya dipindah ke tanggal dan waktu lain menjadi waktu saat ini juga sesuai waktu di komputer kita.<br />
<br />
</li>
<li><img align="left" alt="timerate_increase.png" src="http://www.stellarium.org/wikiimg/UserManual/timerate_increase.png" />Increase Time Speed [L]<br />
Untuk mempercepat waktu di Stellarium.<br />
<br />
</li>
<li><img align="left" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7B6zMLaZnVIcitvRtVtvcgVDjPmfUL1u-92aXsq5IsmufkIOu_HDDqTidPg83FKBQkwVP7oL648IAje4SATrBCkGHl7059iJ43XoTyk0q7_kqDioq5wKTj2PHXAi9NI7XCp1lCdVai4/s1600/quit.png" />Quit [Ctrl+Q]<br />
Untuk keluar dari program Stellarium </li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4zz-SOQDyX9OBa979Cc1gWr1Vw1vKlJzqCcJ-or__wQRqs9pABD6cbO8HfGpYQVto5flD5G8orVdRcqXNZJI5OMg5DuwP-G-8NzI8vfnnRA_vuL41aTIjfJwbgzoBm77aSfwslPMBCMM/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div>
Bagaimana sobat? sangat mengasyikkan bukan? dengan software Stellarium ini kita dapat mengamati indah alam semesta. Sebenarnya Stellarium hanya salah satu dari sekian software planetarium lainnya.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4zz-SOQDyX9OBa979Cc1gWr1Vw1vKlJzqCcJ-or__wQRqs9pABD6cbO8HfGpYQVto5flD5G8orVdRcqXNZJI5OMg5DuwP-G-8NzI8vfnnRA_vuL41aTIjfJwbgzoBm77aSfwslPMBCMM/s1600/7.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4zz-SOQDyX9OBa979Cc1gWr1Vw1vKlJzqCcJ-or__wQRqs9pABD6cbO8HfGpYQVto5flD5G8orVdRcqXNZJI5OMg5DuwP-G-8NzI8vfnnRA_vuL41aTIjfJwbgzoBm77aSfwslPMBCMM/s640/7.png" width="640" /></a> <br />
Masih banyak software lain yang bisa kita manfaatkan untuk mengobati rasa haus kita akan ilmu pengetahuan. Akhirnya saya tunggu kritik dan sarannya. Selamat menjelajahi luar angkasa, <a href="http://plat-m.com/" target="_blank">Salam Blogger Madura!</a>Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com3tag:blogger.com,1999:blog-363119140872010489.post-53408193130434033332013-07-08T13:11:00.001+07:002013-07-09T10:12:14.155+07:00Function untuk Membuat Font Kapital Setiap Kata pada Input Form dengan JQuery<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8SwAa1HrQe2yJst4zp2KZTN_MeAxTMF6kYo3uicgf_qsBJ0oQS0uzfwdb3nnwN5-jf60oSaWtCormZyXRVtN01mSc85RZGZviWt6diwyhdFw67qz6N-RoOm-fSzkc26kGa9KqnlolZCc/s1600/Screenshot+from+2013-07-09+10:10:01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8SwAa1HrQe2yJst4zp2KZTN_MeAxTMF6kYo3uicgf_qsBJ0oQS0uzfwdb3nnwN5-jf60oSaWtCormZyXRVtN01mSc85RZGZviWt6diwyhdFw67qz6N-RoOm-fSzkc26kGa9KqnlolZCc/s1600/Screenshot+from+2013-07-09+10:10:01.png" height="112" style="cursor: move;" width="320" /></a></div>
Untuk Function berikut ini berguna saat kita ingin user mengisi input form (misalnya nama) bisa menjadi huruf capital pada huruf pertama setiap kata, contoh: Andi Sholihin Ganteng Sekali. berikut adalah code scriptnya.<br />
<br />
<pre class="brush: js">$.fn.capitalize = function() {
return this.each(function() {
var $field = $(this);
$field.on('keyup change', function() {
$field.val(function(i, old) {
if (old.indexOf(' ') > -1) {
var words = old.split(' ');
for (i = 0; i < words.length; i++) {
words[i] = caps(words[i]);
}
return words.join(' ');
} else {
return caps(old);
}
});
});
});
function caps(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
};
</pre>
Cara pemakaiannya sebagai berikut, pastikan JQuery sudah terload dengan baik.
<br />
<pre class="brush: js">$(document).ready(function(){
$("#nama").capitalize();
});
</pre>
Salam Blogger Madura ^_^Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com2tag:blogger.com,1999:blog-363119140872010489.post-5671038596592211842013-05-02T16:08:00.002+07:002013-05-02T17:17:15.623+07:00Membuat Tanda Tangan Digital Online Berbasis Web Dengan JQuery UI SignatureAwalnya saya berpikir bagaimana jika suatu saat kita harus membuat aplikasi berbasis web yang harus menampilkan dokumen yang dapat langsung ditanda tangani layaknya dokumen kertas. Berawal dari rasa penasaran saya tentang tanda tangan digital pada aplikasi berbasis web tersebut akhirnya saya iseng-iseng nyari di google dengan kata kunci <b>jquery ui signature</b>.<br />
<a name='more'></a>Ternyata tanda tangan digital berbasis web tersebut mudah sekali dibuat dengan memanfaatkan JQuery UI Plugin yang bernama JQuery UI Signature.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi406P69EnhXANdffo_9wdo8WqXJL-q68e-oOJfkf7StlRR7w-0nWCgKqf2uSAmw4l2eIkcc14_r9tKRMH561jIsU6KTFwgaGVBWQ3iFl7NL3w0e2NU9lGGkyVelO440w_HLeP2ss4oUS4/s1600/Screenshot+from+2013-05-02+17:11:24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi406P69EnhXANdffo_9wdo8WqXJL-q68e-oOJfkf7StlRR7w-0nWCgKqf2uSAmw4l2eIkcc14_r9tKRMH561jIsU6KTFwgaGVBWQ3iFl7NL3w0e2NU9lGGkyVelO440w_HLeP2ss4oUS4/s320/Screenshot+from+2013-05-02+17:11:24.png" title=" " width="320" /></a></div>
Di website resminya juga dicontohkan cara menggunakannya, Anda dapat langsung menuju situs resminya disini : <a href="http://keith-wood.name/signature.html" target="_blank">JQuery UI Signature</a>.<br />
Berikut ini saya kasih contoh aplikasi jadinya : <br />
<br />
<fieldset>
<legend>Demo Tanda Tangan Digital</legend><br />
<center>
<b><br />
Tanda Tangan Anda</b><br />
<br />
<div id="tandatangan">
</div>
<br />
<button id="hapus">Hapus</button><br />
<button id="json">Format ke JSON</button><br />
<br />
<b><br />
Tampilan Tanda Tangan</b><br />
<button id="draw">Tampil Tanda Tangan</button><br />
<br />
<div id="salinan">
</div>
</center>
</fieldset>
<br />
Source code program tersebut bisa Anda download dengan mengklik link download berikut ini:<br />
<br />
<div style="text-align: center;">
<b><a href="https://skydrive.live.com/redir?resid=6E8780C1EF64C6EF!148" target="_blank">Download Program Tanda Tangan</a></b></div>
<br />
Atau silakan langsung kunjungi Website resminya di link berikut : <br />
<br />
<div style="text-align: center;">
<a href="http://keith-wood.name/signature.html" target="_blank">JQuery UI Signature</a>.</div>
<br />
Oke dech, sekian tulisan ini. Saya tunggu kritik dan sarannya. Salam Blogger Madura ^_^Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com18tag:blogger.com,1999:blog-363119140872010489.post-24241411364565715272013-04-30T15:46:00.001+07:002013-04-30T15:58:24.614+07:00Membuat Validasi Input Form Sederhana dengan Javascript<br />
Kali ini ini saya lagi pengen nulis tutorial tentang javascript, tentunya untuk pemula. Nah, skenarionya seperti ini: saya kan punya form inputan, nah saya ingin form itu hanya akan menyimpan data yang valid. Sementara jika data yang dimasukkan<br />
tidak valid maka akan tampil peringatan bahwa data yang dimasukkan salah atau tidak valid sehingga program tersebut tidak jadi disimpan. <br />
<a name='more'></a>Untuk lebih jelasnya silakan perhatikan gambar berikut ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPENeB9ySbUUmLOwkbUXnathFn09Z2JN8gp3V-Lc_8ulaBdP9-8Tkr3nLkP0VpwA3HddtulsA6aiJ6RX5rI8s8tljaVj5KPywUqMZYcLAyOHPut1uSpxBM4FK0Hsc0x9EIXwS7rgUlzL4/s1600/Screenshot+from+2013-04-30+15:36:31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPENeB9ySbUUmLOwkbUXnathFn09Z2JN8gp3V-Lc_8ulaBdP9-8Tkr3nLkP0VpwA3HddtulsA6aiJ6RX5rI8s8tljaVj5KPywUqMZYcLAyOHPut1uSpxBM4FK0Hsc0x9EIXwS7rgUlzL4/s1600/Screenshot+from+2013-04-30+15:36:31.png" title=" " /></a></div>
<br />
Nah, gimana sobat? sudah paham kan maksudnya?<br />
Sekarang kita akan memulai membuatnya, pertama buat formulir HTMLnya seperti code berikut:<br />
<pre class="brush: html"><fieldset style="margin:auto; width:40%;">
<legend>Formulir Biodata</legend>
<form name="formulir" action="simpan_data.php" method="post" onSubmit="return validasi()">
<p>
Nama Lengkap : <br />
<input type="text" name="nama" placeholder="nama lengkap Anda" />
</p>
<p>
Jenis Kelamin : <br />
<select name="jenis_kelamin">
<option value="">-Pilih-</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select>
</p>
<p>
Email Anda : <br />
<input type="text" name="email" placeholder="email Anda" />
</p>
<p>
<input type="submit" value="Simpan Data" name="submit" />
<input type="reset" value="Reset Form" name="reset" />
</p>
</form>
</fieldset>
</pre>
simpan dengan ekstensi *.html.<br />
<br />
selanjutnya kita tambahi kode javascripnya pada file yg kita buat tadi, code javascript validasinya adalah sebagai berikut:<br />
<pre class="brush: js"><script>
function validasi(){
var namaValid = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailValid = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
var nama = formulir.nama.value;
var jeniskelamin = formulir.jenis_kelamin.value;
var email = formulir.email.value;
var pesan = '';
if (nama == '') {
pesan = '-Nama tidak boleh kosong\n';
}
if (nama != '' && !nama.match(namaValid)) {
pesan += '-nama tidak valid\n';
}
if (jeniskelamin == '') {
pesan += '-jenis kelamin harus dipilih\n';
}
if (email == '') {
pesan += '-email tidak boleh kosong\n';
}
if (email !='' && !email.match(emailValid)) {
pesan += '-alamat email tidak valid\n';
}
if (pesan != '') {
alert('Maaf, ada kesalahan pengisian Formulir : \n'+pesan);
return false;
}
return true
}
</script></pre>
<pre class="brush: js"> </pre>
sehingga skrip lengkap form inputan kita menjadi seperti dibawah ini.<br />
<pre class="brush: html"><script>
function validasi(){
var namaValid = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailValid = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
var nama = formulir.nama.value;
var jeniskelamin = formulir.jenis_kelamin.value;
var email = formulir.email.value;
var pesan = '';
if (nama == '') {
pesan = '-Nama tidak boleh kosong\n';
}
if (nama != '' && !nama.match(namaValid)) {
pesan += '-nama tidak valid\n';
}
if (jeniskelamin == '') {
pesan += '-jenis kelamin harus dipilih\n';
}
if (email == '') {
pesan += '-email tidak boleh kosong\n';
}
if (email !='' && !email.match(emailValid)) {
pesan += '-alamat email tidak valid\n';
}
if (pesan != '') {
alert('Maaf, ada kesalahan pengisian Formulir : \n'+pesan);
return false;
}
return true
}
</script>
<fieldset style="margin:auto; width:40%;">
<legend>Formulir Biodata</legend>
<form name="formulir" action="simpan_data.php" method="post" onSubmit="return validasi()">
<p>
Nama Lengkap : <br />
<input type="text" name="nama" placeholder="nama lengkap Anda" />
</p>
<p>
Jenis Kelamin : <br />
<select name="jenis_kelamin">
<option value="">-Pilih-</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select>
</p>
<p>
Email Anda : <br />
<input type="text" name="email" placeholder="email Anda" />
</p>
<p>
<input type="submit" value="Simpan Data" name="submit" />
<input type="reset" value="Reset Form" name="reset" />
</p>
</form>
</fieldset>
</pre>
oke sekarang saatnya testing, buka file tadi dengan browser kesayangan sobat (Mozilla Firefox atau Google Chrome atau Opera atau Internet Explorer atau terserah apa aja ^_^)<br />
<br />
sekian tutorial yang sangat sederhana ini, semoga bermanfaat. Salam Blogger Madura ^_^Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com15tag:blogger.com,1999:blog-363119140872010489.post-46027002383481504832013-03-27T13:28:00.000+07:002013-03-27T13:28:20.590+07:00Cheese, Program Aplikasi Webcam di Linux Ubuntu<div class="separator" style="clear: both; text-align: center;">
<a href="http://projects.gnome.org/cheese/data/images/cheese-big.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://projects.gnome.org/cheese/data/images/cheese-big.png" title=" " width="200" /></a></div>
<blockquote class="tr_bq">
Setelah kemarin sempet nulis <a href="http://sekedar-tutorial.blogspot.com/2012/11/cara-install-aplikasi-di-linux-ubuntu.html" target="_blank">cara menginstal aplikasi di linux ubuntu</a> sekarang saya ingin menjelaskan salah satu aplikasi di linux yaitu Cheese. Cheese adalah software untuk menggunakan kamera webcam di laptop maupun di komputer untuk menangkap foto atau merekam video untuk pengguna Linux baik ubuntu maupun linux yang lain. <br />
<a name='more'></a>Menurut situs resminya di <a href="http://projects.gnome.org/cheese/">http://projects.gnome.org/cheese/</a> cheese dilengkapi dengan fitur-fitur canggih yang tak kalah hebat dengan aplikasi webcam lainnya. Berikut ini penjelasan dari situs resmi Cheese<br /></blockquote>
<br />
<blockquote class="tr_bq">
"Cheese uses your webcam to take photos and videos, applies fancy special effects and lets you share the fun with others. It was written as part of Google's 2007 Summer of Code lead by daniel g. siegel and mentored by Raphaël Slinckx. Under the hood, Cheese uses GStreamer to apply fancy effects to photos and videos. With Cheese it is easy to take photos of you, your friends, pets or whatever you want and share them with others. After a success of the Summer of Code, the development continued and we still are looking for people with nice ideas and patches ;) " </blockquote>
<br />
<blockquote class="tr_bq">
ini dia screenshot aplikasi Cheese ^_^</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO-MNv-8IudXZTb6D2CI6gfjLZlywIrC9rPY0nWg6RGTDDtFm5Pxeu7CD1t60dr0L2HdwPxEgrhO5FuwFou6Z5t-mIKKyBYfbhX_hBFt-PiEcWj1ZH1sUQc9_6ZHL4n88K2Gmz5jqvfI/s1600/Screenshot+from+2013-03-27+12:22:59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO-MNv-8IudXZTb6D2CI6gfjLZlywIrC9rPY0nWg6RGTDDtFm5Pxeu7CD1t60dr0L2HdwPxEgrhO5FuwFou6Z5t-mIKKyBYfbhX_hBFt-PiEcWj1ZH1sUQc9_6ZHL4n88K2Gmz5jqvfI/s400/Screenshot+from+2013-03-27+12:22:59.png" title=" " width="400" /></a></div>
keren kan? hehe... maaf numpang eksis..<br />
<br />
<b>Cara Install Cheese</b><br />
Cara instal cheese cukup mudah, jika komputer kita terhubung dengan internet cukup buka terminal (Ctrl+Alt+T) lalu ketikkan mantra berikut ini :<br />
<h3 style="text-align: center;">
<span style="font-family: "Courier New",Courier,monospace;">sudo apt-get install cheese</span></h3>
<div style="text-align: left;">
<span style="font-family: inherit;">lalu</span> bagaimana buat yang gak konek internet? jangan khawatir, cukup download file installernya yang berekstensi *.deb di situs resminya di <a href="http://projects.gnome.org/cheese/download">http://projects.gnome.org/cheese/download</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Sekian artikel kali ini, saya tunggu kritik dan sarannya yach. Salam Blogger Madura ^_^</div>
Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com5tag:blogger.com,1999:blog-363119140872010489.post-83692939040827326632013-02-07T07:09:00.000+07:002013-11-14T09:03:37.894+07:00Cara Membuat Folder atau Direktori Baru di Windows dan LinuxKali ini saya ingin berbagi hal yang sederhana tapi terkadang membuat bingung para pencinta IT yang masih pemula. Memang ada banyak hal yang membuat hal-hal yang sangat mudah begitu membingungkan untuk kita yang baru belajar dan baru kenal apa itu yang dinamakan komputer. Salah satu yang membingungkan mungkin adalah bagaimana cara membuat folder atau direktori baik itu di Windows atau di Linux.<br />
<br />
Nah, oke deh teman-teman kita mulai belajar caranya. Disini saya akan memberikan tutorial cara membuat folder / direktori di Windows dan Linux Ubuntu.<br />
<br />
<a name='more'></a><br />
<b>1. Membuat Folder di Windows XP</b><br />
caranya mudah banget, berikut ini langkah-langkahnya:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBMMa53Z63456cKSFULHJ7oKIe1q_FT8tlpuItqdDzA2CSbu74s_LrWTR5Uq-uOnhOUCM503vXGw2ehFbfswuflgONVA4RzjzZyUOLZ5zjUaDfVu2d7RIxWHtJ_xBGc-FDQdgoVE98PI/s1600/Image+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div><ol><li>Buka Windows Explorer, caranya klik kanan di start menu di pojok lalu pilih Explore atau tekan dan tahan tombol windows di keyboard (yang gambarnya 4 kotak) lalu tekan huruf E.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBMMa53Z63456cKSFULHJ7oKIe1q_FT8tlpuItqdDzA2CSbu74s_LrWTR5Uq-uOnhOUCM503vXGw2ehFbfswuflgONVA4RzjzZyUOLZ5zjUaDfVu2d7RIxWHtJ_xBGc-FDQdgoVE98PI/s1600/Image+1.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBMMa53Z63456cKSFULHJ7oKIe1q_FT8tlpuItqdDzA2CSbu74s_LrWTR5Uq-uOnhOUCM503vXGw2ehFbfswuflgONVA4RzjzZyUOLZ5zjUaDfVu2d7RIxWHtJ_xBGc-FDQdgoVE98PI/s1600/Image+1.png" /></a></li>
<li>Masuk ke folder yang diinginkan lalu klik kanan lalu pilih New --> Folder<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgqda2Nvr0Q7UgAGgsvkmF8qcG9HuxPYtwuypzF_4-98f-cUO9w70npHcag96r4mevh1EMgjp5FlGlS-ozNSBTYSD95AMP2qNvuUJrUxz_MNNsTClfIONVt9txLg_W3Qw0Vc72qnoTFs/s1600/Image+2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgqda2Nvr0Q7UgAGgsvkmF8qcG9HuxPYtwuypzF_4-98f-cUO9w70npHcag96r4mevh1EMgjp5FlGlS-ozNSBTYSD95AMP2qNvuUJrUxz_MNNsTClfIONVt9txLg_W3Qw0Vc72qnoTFs/s1600/Image+2.png" /></a></li>
<li>Nah tulis deh nama folder yang diinginkan setelah tekan tombol Enter</li>
</ol><b>2. Membuat Folder di Linux Ubuntu</b><br />
Cara membuat hampir sama dengan di windows, cuma ada sedikit perbedaan. langkah-langkahnya sebagai berikut:<br />
<ol><li>buka<b> </b>folder yang ingin dijadikan tempat folder baru</li>
<li>klik kanan --> New Folder<a href="http://i.stack.imgur.com/MR3Ue.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.stack.imgur.com/MR3Ue.png" /></a></li>
<li>tulis nama folder barunya</li>
<li>tekan tombol Enter.</li>
</ol><div><b>Membuat Folder di File System Ubuntu?</b></div><div>langkahnya sama seperti diatas tapi sebelum membuat kita masuk ke terminal terlebih dahulu lalu ketik :</div><div><pre class="brush:js">sudo nautilus</pre>lalu masukkan password, setelah itu kita tinggal membuat folder seperti biasanya.</div>Nah, mudah sekali kan sobat? selamat mencoba dan saya tunggu kritik dan sarannya. Salam <a href="http://plat-m.com/" target="_blank">Blogger Madura.</a><br />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAB30lEQVQ4EZVTSy8DURT%2BZjpm6GhL0pKQphYeCZF4hIVEWLDowsaCxMJC8AP8AMI%2FsBQWFhKPxMpGbIgFK6vWe0WoRVOPPihth3vmTm%2FTUuEs7r3zzfnO950zdySw6Nz6%2FKT9v3EyIknSX8idHiZSBRzcA1fP%2BTK%2FFiDiXBdQo%2BdI%2Fp00wklFALI4FRxm2oCl%2FnwypXS7E8gYGZH9YwFSHWvgOUehd0zsPYJ2CqcqI5lK8pdszXmxICIP1fGHueMXLAcS0BQNTW4bemqAu1gGhmElsy2vAKkWkl12F3RNR2UpJwUjKSisYDZEC44SYKqFw2SXlLNkQvuZ%2Bn3cwFkkzYppkCWeKwqQMhWhWAly26RMQV%2BhsQLYvXmHqqgwIMOwbo5ooa%2FWzDUXFxuUXmp5ZgjNhWLjIg67Wo50sRnwNGC%2Bx4mnwxQ%2BmMp0M7tEHjY8Zv%2BU9V%2FtUmG5N9OFg1CCJxJKn2p1IDcowm6jbHiygnaPzXRw%2FgRQF2IG69dAlCSLhNehYKpVx2Iv4PcBUuEQ6Y5P7mdMm1Qj%2BmFg8%2BoVg9thE%2FM6bBiu1zC%2B94a1ixSyv5%2B0cDmaJxtP6jh%2FaADtii0Nt%2BMR3sqQwJxlMXT4AswBp5lGCosU6eIbPNu0KX0BMmqe8Db%2Bbr8AAAAASUVORK5CYII%3D" style="cursor: pointer; left: 32px; padding: 2px; position: absolute; top: 1618px; z-index: 1000000;" title="Click to edit this image in Aviary" />Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com3tag:blogger.com,1999:blog-363119140872010489.post-38169447000545945802013-01-30T18:15:00.000+07:002013-01-30T18:27:05.345+07:00Nasi di Atas Wadah, Lauk di Atas Piring, dan Sebuah Tradisi“Masih jam segini, kurang 28 menit lagi ”, sambil melihat HP kulanjutkan lamunanku saat duduk diantara para undangan buka bersama di rumah salah seorang warga dekat posko KKN-ku. Ku perhatikan diantara mereka ada yang ngobrol dengan undangan di sebelahnya sambil sesekali tertawa lepas. Ada yang diam seperti sedang memikirkan masalah yang rumit dan ada juga yang memberi isyarat pada anak-anak muda untuk segera menghidangkan santapan berbuka puasa. Sambil menatap karpet merah yang ku duduki aku mengingat-ingat kembali apa yang terjadi hingga aku sampai di tempat ini.<br />
<br />
Masih teringat di anganku bagaimana suara tawa riang remaja MTs Tanwirul Hija mengikuti les komputer yang ku beri nama Computer Fun Training. “OK adek-adek, siap belajar komputer?”, serentak gemuruh suara mereka memenuhi balai desa Cangkreng ini. Meski hanya duduk diatas lantai keramik putih tanpa alas, calon-calon pemimpin masa depan ini terlihat antusias dengan wajah merona di depan laptop yang telah dipersiapkan sebelumnya. “Adek-adek, kakak-kakak KKN akan mendampingi adek-adek pada masing-masing laptop yang tersedia, bagaimana adek-adek? Siap?”. Begitulah les komputer komputer itu dimulai dengan sedikit instruksi ringan dan dimulailah sharing ilmu komputer di balai desa bercat biru itu. Teman-teman kelompokku terlihat senang membimbing peserta les komputer walaupun sebenarnya ada rasa tidak enak karena sore itu kami diundang untuk menghadiri buka bersama.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwBU6k8DP1-QtRNsxKiHpNm4S1uSgTMm3T-_Ijm0vpburCN5slFah-uN68VNSFQcDNsRbJq6MjLkDKi93wNkH05dt6jKjc-uaMBjJNS4fqiVVjlwGU5moDqbr8sM9GYAHNX8V3M4OEOY/s1600/Image+1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwBU6k8DP1-QtRNsxKiHpNm4S1uSgTMm3T-_Ijm0vpburCN5slFah-uN68VNSFQcDNsRbJq6MjLkDKi93wNkH05dt6jKjc-uaMBjJNS4fqiVVjlwGU5moDqbr8sM9GYAHNX8V3M4OEOY/s1600/Image+1.png" /></a></div>
<br />
“An, sudah jam 5 kurang 10. Ayo cepet diakhiri”, celetuk si Kordes itu menyuruhku. Tepat jam 5 kurang 10, aku yakin sudah terlambat menghadiri undangan, tapi ya sudahlah. Tidak enak juga sama warga kalau tidak hadir meskipun teman kelompokku sebenarnya sudah ada disana. Benar saja, baru saja aku tiba pak kiai, sang opinion leader di desa ini sedang membaca do’a penutup. Sambil memasang tampang tak berdosa kami masuk ke dalam majelis sambil bersalaman pada undangan yang lain. Begitulah aku melamun tentang apa yang baru saja terjadi.<br />
<br />
Tiba-tiba pandanganku tertuju pada anak-anak muda yang berjejer di halaman. Aku yakin ini saatnya hidangan akan disajikan, karena merasa muda akupun ikut dalam barisan itu dan hidangan itupun perlahan berpindah dari satu tangan ke tangan yang lain. Tapi betapa kagetnya, “kok nasi berkat yang dihidangkan tidak dibungkus plastik!?” belum habis rasa heranku keluarlah piring yang membuatku kembali bertanya sendiri, “kok piringnya cuma isi lauk? Gimana cara makannya nih?”.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74hWoVilLSHKSjYCPMCdbhxNvUNm0hPWD0R5SxKiKDbTLu0k0gAtvZovxBmVvOS5JR366tjNbvRviMm8ygZSqvMp3QiK-1oUkKR5WB9kSDysZSS6PfnAR3xrMoWx-wQ5Lcx45ukNQYP8/s1600/Image+2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74hWoVilLSHKSjYCPMCdbhxNvUNm0hPWD0R5SxKiKDbTLu0k0gAtvZovxBmVvOS5JR366tjNbvRviMm8ygZSqvMp3QiK-1oUkKR5WB9kSDysZSS6PfnAR3xrMoWx-wQ5Lcx45ukNQYP8/s1600/Image+2.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74hWoVilLSHKSjYCPMCdbhxNvUNm0hPWD0R5SxKiKDbTLu0k0gAtvZovxBmVvOS5JR366tjNbvRviMm8ygZSqvMp3QiK-1oUkKR5WB9kSDysZSS6PfnAR3xrMoWx-wQ5Lcx45ukNQYP8/s1600/Image+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
Kejadian sore ini benar-benar membuatku heran, ternyata plastik memang ada di wadah nasi itu sengaja tidak dibungkuskan pada nasi berkat agar undangan dapat menikmati nasi dengan lauk yang sudah ada di piring. Nah sisa nasi tadi dibungkus dengan plastik yang memang sudah disediakan di wadah nasi untuk dibawa pulang. Sambil menikmati buka puasa diantara kumandang suara adzan di mosholla aku tersenyum sendiri, “ternyata ini tradisi di Cangkreng, berbeda dengan tradisi didesa tempat aku dibesarkan”, gumamku.<br />
<br />
Ku pikir aku yang anak desa ini tidak akan mengalami hal yang mengherankan karena sudah terbiasa di lingkungan pedesaan. “Ah, pasti tradisinya sama saja dengan desaku di Pamekasan”. Namun kejadian sore ini membuatku semakin tertarik dengan perbedaan tradisi desa ini dengan desaku. “Kalau di desaku nasi dan lauk lengkap dengan kuah biasa disajikan dalam satu porsi piring, nah di Cangkreng ini nasinya diambil sendiri sesuai dengan porsi tiap orang. Benar-benar kreatif dan pemikiran masyarakat yang efektif”, kataku dalam hati sambil menahan senyum sendiri.<br />
<br />
Tradisi hidangan seperti ini membuatku ingin segera pulang dan menceritakannya pada orang tuaku. Karena ku pikir, hidangan seperti itu efektif untuk mengurangi makanan sisa di piring-piring karena tidak sesuainya porsi makanan tiap undangan. Tepat sekali dugaanku, setelah acara selesai aku tidak melihat sisa nasi di piring-piring, semuanya habis. Berbeda sekali dengan desaku yang biasanya banyak sekali nasi yang tersisa setelah selesainya acara undangan.<br />
<br />
Ternyata tepat sekali nasehat almarhum kakekku dulu, “belajar itu bukan hanya di bangku sekolah, tapi dimanapun kamu bisa belajar”. Hari ini aku mendapat pelajaran dan pengalaman berharga dari masyarakat desa Cangkreng ini. Aku berharap dapat menerpakannya di desaku untuk memperkecil angka mubaddzir pada hidangan acara undangan, kompolan, dan sebagainya.<br />
<br />
KKN UTM 2012 di Desa Cangkreng Kec. Lenteng Kab. Sumenep.Andi Sholihinhttp://www.blogger.com/profile/00638625744151656342noreply@blogger.com0Sumenep, Indonesia-7.0017210000000007 113.86421700000005-7.0647610000000007 113.78353600000005 -6.9386810000000008 113.94489800000005