Fhieka Blog _ Sharing: Maret 2014

Jumat, 21 Maret 2014

Contoh Mudah Menggunakan jQueryUI

jQuery ini sebenernya keumpulan javaScript yang jlimet dibuat oleh mereka-mereka untuk mempermudah dalam melakukan penulisan untuk java script, seperti misalanya kita membuat sebuah animasi transisi pada layer di HTML, tidak perlu menuliskan dari awal transisinya yang saya yakin sangat panjang, setelah adanya jQuery hal-hal yang panjang tadi dapat dipersingkat kita tinggal menuliskan “.slideDown()”. Apalagi ada turunannya bernama jQueryUI — sangat membantu anda dalam mengindahkan halaman web.

IMPLEMENTASI

Disini saya tidak akan membahas tentang dasar-dasar HTML, CSS dan Java Script ya. Kita langsung mengimplementasikan penggunaan jQuery dan jQueryUI (karena jQueryUI membutuhkan jQuery :P).

ok, saya memiliki sebuah halaman sederhana sebagai berikut:

<html>

<head><title>jQueryUI sample </title></head>

<body>

<h1>Test jQueryUI</h1>

<form action="#" method="post" id="formTest">

Tanggal (dd/mm/yyyy) : <input type="text" id="tanggal" name="tanggal">  <br>

<input type="button" id="Simpan" value="Simpan">

</form>

</body>

</html>

gambar 1:

http://silverx.files.wordpress.com/2012/05/1.jpg

sekarang kita sudah memiliki halaman tanpa “bumbu”, karena kita menggunakan jQueryUI maka kita harus meng-include-kan file pendukung jQueryUI, seperti jQuery, jQueryUI, dan CSS sehingga kita menambahkan tag seperti berikut setelah tag </head>:

<link rel="Stylesheet" href="pathAnda/page/css/cupertino/jquery-ui-1.8.13.custom.css" type="text/css" />

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-1.5.1.min.js'></script>

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-ui-1.8.13.custom.min.js'></script>

setelah itu tinggal kita gunakan tag-tag jQueryUInya. kita gunakan 
jQueryUInya seperti javaScript biasa, berikut implementasinya:

<script type="text/javascript">

$(document).ready(function() {

$("#Simpan").button();

});

</script>

gambar 2:

perhatikan text #Simpan, itu merupakan ID dari tambolm yang kita buat, 
anda dapat mengimplementasikannya juga pada tag <div> sesuai 
dengan kebutuhan. selain ID anda jg dapat menggunakan CLASSnya biasanya 
pada <div class=”bla-bla”>. setelah itu perhatikan tombol yang 
kita buat, setidaknya nilai estetikanya lebih daripada sebelumnya. 
sekarang kita tambahkan lagi date picker untuk textfield tanggal. kita 
hanya menambahkan :

$("#tanggal").datepicker({

showOn: "button",

buttonImage: 'pathAnda/page/'+"images/calendar.gif",

showAnim:"show",

dateFormat:"dd-mm-yy",

buttonImageOnly:true

});

sekarang di samping text field terdapat gambar kalender yang dapat anda gunakan untuk menentukan tanggal. mudah bukan??? :D

Ini code lengkapnya : 

<html>

<head><title>jQueryUI sample </title></head>

<link rel="Stylesheet" href="pathAnda/page/css/cupertino/jquery-ui-1.8.13.custom-without-tabs.css" type="text/css" />

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-1.5.1.min.js'></script>

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-ui-1.8.13.custom.min.js'></script>

<script type="text/javascript">

$(document).ready(function() {

$("#Simpan").button();

$("#tanggal").datepicker({

showOn: "button",

buttonImage: 'pathAnda/page/'+"images/calendar.gif",

showAnim:"show",

dateFormat:"dd-mm-yy",

buttonImageOnly:true

});

});

</script>

<body>

<h1>Test jQueryUI</h1>

<form action="#" method="post" id="formTest">

Tanggal (dd/mm/yyyy) : <input type="text" id="tanggal" name="tanggal">  <br>

<input type="button" id="Simpan" value="Simpan">

</form>

</body>

</html>

</script>
  
Sumber : http://silverx.wordpress.com/2012/05/09/contoh-mudah-menggunakan-jqueryui/

Pengantar dan Penggunaan jQuery pada Website

Website - jQuery pertama kali dibuat oleh John Resig pada tahun 2005 dan pertama kali dirilis pada tanggal 14 Januari 2006. jQuery merupakan sebuah framework dari Javascript dan cara baru dalam menuliskan kode Javascript. jQuery akan mempercepat dan meringkaskan library Javascript sehingga dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat.

jQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.

Bagaimana Cara Membuatnya ?!

Pertama anda harus menyertakan framework jQuery di file HTML anda silahkan download framework jQuery di sini jQuery Latest.

Sementara anda menunggu file di download, Saya terangkan salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), fungsi load sendiri memiliki tiga parameter yaitu load(url, params, callback).

url (string), merupakan URL dari file html yang akan di load
params (object), merupakan pilihan optional yang digunakan untuk mengirim Data ke server
callback (function), merupakan pilihan optional tentang Fungsi yang akan dijalankan ketika data berhasil di load

Untuk mengimplementasikan fungsi load tersebut, langsung saja praktek dan buat tag HTML seperti dibawah:

<html>

<head>

<title>Fungsi Memuat JQuery</title>

</head>

<body>

    <div>

        <p><a href="fileyangdipanggil.php" class="link"> Klik Di sini </a

<p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

</div>

<div id="HasilJQ"></div>

</body>

</html>

Apabila anda sudah mendownload framework sekarang mari kita hubungkan file jQuery dengan file HTML.

<html>

<head>

<title>Fungsi Memuat JQuery</title>

<script type="text/javascript" src="NamaFileJquery.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

    $("a.link").click(function() {

        var url = $(this).attr("href");

        $("#loadingimg").fadeIn();

        $('#HasilJQ').load(url, function (){ 

            $('#loadingimg').fadeOut(); 

        });

    return false;

    });

});

</script>

</head>

<body>

    <div>

        <p><a href="fileyangdipanggil.php" class="link"> Klik Disini </a

<p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

</div>

<div id="HasilJQ"></div>

</body>

</html>

Cuku sript itu yang digunakan untuk memanggil halaman tanpa merefresh content, sangat simple berkat jQuery. dibawah ini akan saya bahas satu persatu bagaimana cara kerja fungsi diatas

sebelum memulai membuat fungsi dalam jQuery maka kita harus terlebih dahulu membuat code sebagai berikut

$(document).ready(function() {

    //tuliskan fungsi disini

    $("a.link").click(function() {

        var url = $(this).attr("href");

        $("#loadingimg").fadeIn();

        $('#HasilJQ').load(url, function (){ 

            $('#loadingimg').fadeOut(); 

        });

    return false;

    });

});

$(document).ready(function() berarti kita akan memulai script jQuery dan });
 berarti mengakhiri script jQuery, jQuery kemudian akan membaca element 
html dan attribut yang diberikan, selanjutnya jQuery akan mengeksekusi 
setiap element dan atrribut bila kita memasukan element dan atribut 
tersebut kedalam fungsi yang kita buat

("a.link").click(function(); berarti kita memerintahkan 
jQuery untuk mengeksekusi element a dengan nama atribut class "link" 
(

var url = $(this).attr("href"); berarti kita 
mendefinisikan variable url dimana nilai variable didapatkan dari 
attribut a.link yaitu href (  )

$("#loadingimg").fadeIn(); berarti kita  memerintahkan jQuery untuk mengeksekusi element dengan nama attribut id "loadingimg" .fadeIn(); berarti memunculkan sedangkan .fadeOut(); sebaliknya. 

('#HasilJQ').load(url);  berarti kita  memerintahkan 
jQuery untuk mengeksekusi element dengan nama attribut id "HasilJQ" 
dimana div dengan id tersebut akan dimanipulasi untuk menampilkan data 
URL yang telah kita definisikan variabelnya terlebih dahulu

return false; akhiri setiap fungsi dengan return false hal ini untuk mencegah data di refresh oleh browser pada saat element di eksekusi

OK ini merupakan awal dan pengantar jQuery, semoga bermanfaat. Untuk lebih lanjut tentang jQuery silahkan buka situs resminya http://www.jQuery.com

Sumber: http://www.w3function.com/blog/index.php?p=det&idn=32

Selasa, 11 Maret 2014

Pertemuan keempat matkul Web 2.0 | 8 Maret 2014

Bismillah ....

Pertemuan keempat kali ini, kami di tugaskan untuk memposting apa software yang kami sukai dan kami kuasai,,nah kalo saya sendiri ketika bpk bertanya seperti itu, saya langsung berfikir, klo saya mah semua nya sih biasa2 saja ngak ada yang terlalu saya sukai dan bisanya ya sekedar bisa seperti flash,corell draw,c++,c#,php dan mysql dll.

Dalam hidup kita sehari-hari, dua hal berbeda yang silih berganti adalah kesenangan dan kesusahan. Bahkan menurut beberapa orang, kalau hidup itu indah karena perbedaan tersebut. Tetapi dalam hal ini sesuatu yang saya senangi belum tentu saya kuasai karena kurangnya rasa minat untuk menguasai. begitu juga ketika saya menguasai sesuatu hal kadang2 belum tentu saya sukai. Dan akan menjadi kesusahan ketika seseorang tidak menyukai dan tidak ingin menguasai hal itu maka akan menjadi sesuatu hal yang membosankan...

Ketika seseorang bertanya baik itu dosen, temen, atau orang - orang sekitar menanyakan apa bidang yang saya kuasai dan saya sukai , ya saya menjawab saya tidak menguasai satu hal, tapi saya bisa mengerjakan beberapa hal. Mungkin saat ada yang mengasingkan antara orang yang berkeahlian khusus dengan orang yang tidak memiliki keahlian khusus, maka rasa pesimis itu akan terlintas di benak orang yang tidak memiliki keahlian khusus.

Ada keinginan dalam diri saya untuk menguasai sesuatu, tapi bukan salah satu bidang yang telah saya sebutkan di atas. tapi dlm bidang yang ngak nyambung sama jurusan yang telah saya ambil :D. Banyak dosen yang menekankan agar kita bisa menguasai 1 bidang tapi harus bener - bener menguasai. tapi lebiih baik lagi apabila kita menguasai banyak bidang karena dapat memudahkan hidup kita..hehehehehehe ..

Semoga ilmu yang udah saya dapat walaupun hanya sekedar bisa dapat bermanfaat buat diri saya dan orang lain..........!