Kumpulan jQuery :
- jquery.min.js
- jquery-1.3.1.js
- jquery-1.4.4.js
- jquery-1.4.js
- jquery-1.5.js
- jquery-1.5.1.js
- jquery-latest.js
contoh jquery :
Selasa, 05 Juli 2011
downloads
Menampilkan data dengan pemanfaatan fungsi .change() pada jquery
untuk kali ini kita akan mencoba membahas tentang pemanfaatan .change() pada jquery.
Metode ini adalah cara pintas untuk .bind('change', handler) dalam satu variasi.
untuk pilihannya dapat kita manfaatkan <select>,<input type="radio">,dll,
dan dapat di tampilkan pada <table>,<textarea>,<div>,dll
nah....sekarang saya akan mencoba menjelaskannya dengan penggunaan <select> untuk pilihan,dan <textarea> untuk menampilkannya.
berikut DEMO nya :
berikut scriptnya:
atau bisa juga Download File
READ MORE - Menampilkan data dengan pemanfaatan fungsi .change() pada jquery
Metode ini adalah cara pintas untuk .bind('change', handler) dalam satu variasi.
untuk pilihannya dapat kita manfaatkan <select>,<input type="radio">,dll,
dan dapat di tampilkan pada <table>,<textarea>,<div>,dll
nah....sekarang saya akan mencoba menjelaskannya dengan penggunaan <select> untuk pilihan,dan <textarea> untuk menampilkannya.
berikut DEMO nya :
berikut scriptnya:
atau bisa juga Download File
Senin, 04 Juli 2011
show/hidden dalam satu tombol
tutorial ini hampir sama seperti posting sebelumnya tetapi yang membedakan disini yaitu show dan hidden menggunakan satu tombol,nah lansung saja....
<script>
$(".showhide").click(function () {
$("#show").toggle("slow");
});
</script>
dengan memanfaatkan element toogle,maka button akan mempunyai fungsi show dan hidden sekaligus dalam satu button/tombol,
#show = ditampilkan id show
.showhide = button class
slow = kecepatan ,bisa juga diganti dengan angka
Download File
READ MORE - show/hidden dalam satu tombol
<script>
$(".showhide").click(function () {
$("#show").toggle("slow");
});
</script>
dengan memanfaatkan element toogle,maka button akan mempunyai fungsi show dan hidden sekaligus dalam satu button/tombol,
#show = ditampilkan id show
.showhide = button class
slow = kecepatan ,bisa juga diganti dengan angka
Download File
show/hidden sederhana dengan jQuery
untuk membuat button yang mempunyai efek show dan hidden sangatlah mudah,dengan bantuan jQuery-1.4.js,kita tidak perlu lagi mengetikan coding yang begitu panjang dan rumit,hanya dengan beberapa baris syntax saja sudah cukup..
tombol show/hidden ini dapat kita gunakan untuk menyembunyikan atau menampilkan text dan image,
ok kita lansung saja ke TKP gan,
buat new file di dreamweaver,Notepate atau notepate++ dan ketikan code berikut:
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sembunyi").click(function(){
$("#isi").hide("normal");
});
$(".tampil").click(function(){
$("#isi").show("normal");
});
});
</script>
</head>
<body>
<button class="sembunyi">Hide</button>
<button class="tampil">Show</button>
<p id="isi" >TAMPILKAN TEKS / GAMBAR DISINI</p>
</body>
</html>
=======================================================================
Berikut penjelasannya:
pada <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script> merupakan syntax memanggilan file jQuery,
$(".sembunyi").click(function(){
$("#isi").hide("normal");
});
$(".tampil").click(function(){
$("#isi").show("normal");
jika button yang mempunyai class .sembunyi di klik,maka text/image yang ada pada <p id="isi" > akan di sembunyikan,begitu pula sebaliknya,jika jika button yang mempunyai class .tampil di klik,maka text/image yang ada pada <p id="isi" > akan di ditampilkan
.hide("normal");
.show("normal");
normal disini merupakan kecepatan sembunyi dan tampil,kita juga bisa merubahnya dengan slow atau nominal misalnya 1000 .
Download File
Kamis, 30 Juni 2011
Sekilas tentang jQuery
Apa itu jQuery?
jQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript.
Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan :
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
Oke, sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery.
Sintaks jQuery
Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Sintaks :
$(selector).action()
• Tanda dollar, untuk mendefinisikan jQuery
• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
Contoh :
$(this).hide() – menyembunyikan elemen saat ini
$("p").hide() – menyembunyikan semua paragraf atau konten dari tag <p>
$(".test").hide() – menyembunyikan elemen yang mempunya class="test"
$("#test").show() – menampilkan elemen yang mempunyai id="test"
Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.
$(document).ready(function(){
//kode anda di sini
});
Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini :
window.onload = function(){ //kode anda di sini }
Sekarang mari kita lihat .
$(".tombol1").click(function(){
$("p").hide(1000);
});
Kode $(".tombol1") adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $("p").hide(1000); Fungsi hide() dan show() adalah fungsi built in dari jQuery, nanti akan kita lihat lebih lanjut fungsi-fungsi built in dari jQuery. jQuery Selectors Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen HTML menggunakan jQuery.
jQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal.
jQuery Element Selectors
jQuery mirip CSS dalam hal memilih elemen HTML.
$("p") memilih semua elemen <p>
$("p.intro") memilih semua elemen <p> yang mempunyai class="intro".
$("p#demo") memilih elemen <p> yang mempunyai id="demo".
jQuery Attribute Selectors
jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.
$("[href]") memilih semua elemen dengan atribut href.
$("[href='#']") memilih semua elemen dengan atribut href bernilai="#".
$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama
dengan "#".
$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
sekilas tentang PHP
PHP
ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 , .php. atau .php5
Struktur Kontrol
READ MORE - sekilas tentang PHP
adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan sebuah bahasa scripting yang terpasang pada HTML.tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web,menulis halaman web dinamik dengan cepat.
PHP dikenal sebgai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages) dan JSP (Java Server Pages).Hubungan PHP dengan HTML
Halaman web biasanya disusun dari kode-kode html yang disimpan dalam sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke browser, kemudian browser menerjemahkan kode-kode tersebut sehingga menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 , .php. atau .php5
Penulisan Variable
Dalam PHP setiap nama variable diawali tanda dollar ($). Misalnya nama variable dalam PHP ditulis dengan $namavariable. Jenis suatu variable ditentukan pada saat jalannya program dan tergantung pada konteks yang digunakan.Struktur Kontrol
IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat.
Cara penulisannya adalah sebagai berikut:
if (syarat)
{statement}
else
{statement lain}
WHILE
Bentuk dasar dari statement While adalah sebagai berikut:
while (syarat)
{statement}
Arti dari statemant While adalah memberikan perintah untuk menjalankan statement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi.
FOR
Cara penulisan statement FOR adalah sebagai berikut:
for (ekspresi1; ekspresi2 ; ekspresi3)
statement
ekspresi1 -> menunjukkan nilai awal untuk suatu variable
ekspresi1 -> menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant
ekspresi1 -> menunjukkan pertambahan nilai untuk suatu variable
SWITCH
Statement SWITCH digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan. Struktur Switch adalah sebagai berikut:
switch (variable)
case nilai:
statement
case nilai:
statemant
case nilai:
statement
REQUIRE
Statement Require digunakan untuk membaca nilai variable dan fungsi-fungsi dari sebuah file lain. Cara penulisan statement Require adalah:
require(namafile);
Statement Require ini tidak dapat dimasukkan diadalam suatu struktur looping misalnya while atau for. Karena hanya memperbolehkan pemangggilan file yang sama tersebut hanya sekali saja.
INCLUDE
Statement Include akan menyertakan isi suatu file tertentu. Include dapat diletakkan didalam suatu looping misalkan dalam statement for atau while.
contoh pemanggilan file koneksi:
<?php
include "koneksi.php"
?>
Langkah-langkah Koneksi PHP-MySQL
1. Membuka koneksi ke server MySQL
mysql_connect()
Digunakan untuk melakukan uji dan koneksi kepada server database MySQL.
Sintaks:
$conn = mysql_connect (”host”,”username”,”password”);
$conn adalah nama variabel penampung status hasil koneksi kepada database.
Host adalah nama host atau alamat server database MySQL.
Username adalah nama user yang telah diberi hak untuk dapat mengakses server database.
Password adalah kata sandi untuk username untuk dapat masuk ke dalam database.
2. Memilih database yang akan digunakan di server
mysql_select_db()
Digunakan untuk melakukan koneksi kepada database yang dalam server yang berhasil dikoneksi dengan perintah mysql_connect().
Sintaks:
$pilih = mysql_select_db(”namadatabase”,$conn);
$pilih berisi status koneksi kepada database.
$conn merupakan koneksi kepada server database yang berhasil.
Namadatabase adalah nama database yang akan dikenai proses.
2. Mengambil record dari database
a. mysql_fetch_array()
Digunakan untuk melakukan pemrosesan hasil query yang dilakukan dengan perintah mysql_query(), dan memasukkannya ke dalam array asosiatif, array numeris atau keduanya.
Sintaks: $row = mysql_fetch_array($hasil);
$row adalah array satu record dari record $hasil yang diproses nomor record
$hasil adalah record set yang akan diproses.
b. mysql_fetch_assoc()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan hanya array asosiatif.
Sintaks: $row = mysql_fetch_assoc($hasil);
c. mysql_fetch_row()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan hanya array numeris.
Sintaks: $row = mysql_fetch_row($hasil);
d. mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database.
Sintaks: $jml = mysql_num_rows($hasil);
$jml akan memiliki nilai sesuai dengan jumlah record yang ada.
