Tampilkan postingan dengan label jquery. Tampilkan semua postingan
Tampilkan postingan dengan label jquery. Tampilkan semua postingan

Senin, 27 Februari 2012

Mencegah Data NULL di MySQL

Dalam artikel ini, akan dipaparkan bagaimana cara mencari data NULL ini dalam MySQL.
Oya.. artikel ini saya tulis berdasarkan pengalaman pribadi ketika mengemban tugas negara  (Halah.. kelihatan kalo didramatisir)

Di sini saya akan mengambil contoh sederhana, misalkan kita memiliki tabel ‘mhs’ dengan struktur sebagai berikut
Struktur Tabel dengan NULL
Bila kita perhatikan struktur tabel di atas, maka untuk field ‘alamat’, ‘sex’, dan ‘tgllhr’ membolehkan adanya nilai NULL ini.
Nah.. selanjutnya misalkan kita mengentri beberapa data atau record ke dalam tabel tersebut sebagaimana tampak pada gambar di bawah ini
Data dengan NULL
Dalam contoh tersebut, data mahasiswa bernim ‘M0004′ dan ‘M0005′ sengaja saya buat beberapa nilai kosong pada ketiga field yang membolehkan NULL.
Kemudian, yang menjadi pertanyaan adalah bagaimana cara mencari data mahasiswa yang memiliki nilai NULL tersebut, misalnya pada field ‘alamat’. Siapa sajakah mahasiswa yang alamatnya masih NULL alias belum diisi?
Nah.. untuk mencari mahasiswa dengan alamat masih NULL ini, Anda tidak bisa menggunakan query SQL sebagai berikut
SELECT * FROM mhs WHERE alamat = '';
Bila Anda gunakan query SQL di atas, maka tidak akan muncul hasil yang diharapkan. Ingat !! nilai atau data NULL bukanlah string kosong (empty string).
Lantas.. bagaimana caranya? Caranya adalah dengan menggunakan ‘IS NULL’.
SELECT * FROM mhs WHERE alamat IS NULL;
Bila Anda jalankan query di atas, maka akan menampilkan dua buah record terkait dengan alamat yang NULL sebagaimana tampak pada gambar berikut ini
Data dengan NULL
Untuk mencegah adanya nilai NULL ini, Anda bisa hindari ketika mengcreate tabel pertama kali yaitu dengan menambahkan NOT NULL pada properti fieldnya
CREATE TABLE mhs (
  nim varchar(5) NOT NULL,
  nama varchar(20) NOT NULL,
  alamat text NOT NULL,
  sex varchar(1) NOT NULL,
  tgllahir date NOT NULL,
  PRIMARY KEY(nim)
)
Lantas.. mungkin Anda bertanya dalam hati. Misalkan suatu field diset NOT NULL (tidak boleh ada NULL), maka bagaimana jika field tersebut tidak diisi? Nah… bila field tersebut tidak diisi, maka isi nilainya (default value) adalah karakter kosong (empty string) jika tipe data fieldnya karakter, atau akan bernilai 0 jika tipe datanya berupa bilangan, atau bernilai ’0000-00-00′ untuk tipe data date.
Trus.. bagaimana bila sudah telanjur menset suatu field bisa menerima NULL menjadi tidak membolehkan NULL? Nah.. ubah saja properti field tersebut dengan perintah ALTER seperti contoh berikut ini
ALTER TABLE mhs CHANGE alamat alamat TEXT NOT NULL;
Perintah SQL di atas untuk mengubah status yang membolehkan NULL menjadi NOT NULL pada field ‘alamat’ dalam tabel ‘mhs’.
atau secara umum sintaksnya adalah
ALTER TABLE namatabel CHANGE namafield namafield tipedatafield NOT NULL;
OK paham ya dengan penjelasan di atas? Mudah-mudahan artikel di atas berguna bagi Anda yang sedang pusing dengan cara mencari data NULL dan cara menghindarinya.

Selasa, 21 Februari 2012

Memasang star rating di blogspot

Coba cari kesana kemari gak ketemu ketemu alhasil ngoprek sendiri ma temen kosan nah gini lah cara buatnya langsung aja kita mulai :
pergi ke alamat di bawah ini untuk mendapatkan kode star rating 
http://www.mypagerank.net/service_starrating_index


Contoh kode :
<!-- Star Rating Start Code --> <script type="text/javascript" src="http://www.mypagerank.net/services/starrating/rating.php?rid=759613491811219e154f53abbe2cc603d0aa9f097c415a02150c6df726a648240f69c9dba45eb7c94837a257&rima=3"></script><!-- Star Rating End Code -->
setelah itu untuk mencobanya masukkan kode pasang di gadget (js/html) => save template


untuk demo kunjungi di blog ane yang udah ane kasih di info iphone


Cara lain memasang star rating Dibawah Halaman Posting
  1. Login ke Blogger
  2. Design > Edit HTML > Centang Expand Witget Templates
  3. Cari Kode <div class=’post-body entry-content’>
  4. Untuk memudahkan tekan ctrl + F di keybord.
  5. Sisipkan script kode script berikut tepat di bawah kode <div class=’post-body entry-content’><b:if cond=’data:blog.pageType == "item"’>[kode star rating disini]</b:if>
  6. Save Template

Jumat, 04 November 2011

Belajar Ajax dengan PHP dan Jquery

Ajax dengan PHP dan Jquery web desain grafisBanyak sekali permintaan yang datang kepada penulis perihal bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan php. Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.
Banyak cara juga untuk dapat menghasilkan ajax ini, ada develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin, seperti jquery misalnya.
Di tutorial kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya tentang pengenalan jquery.
Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirimdata, kemudian file yang digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah jquery librarynya itu sendiri.
Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();


$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>

</head>
<body>
<form method=”POST” id=”ajaxTest”>
<input type=”input” name=”ajaxInput” />
<input type=”submit” name=”ajaxBtn” value=”Test Button” />
</form>
<div id=”waiting”></div>
<div id=”result”></div>
</body>
</html>

selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :

<?php
echo $_POST['ajaxInput'];
?>

dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4. Yang perlu disorot adalah jquery script yang ada dibagian headnya :
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>

jquery action selalu diawali dengan
$(document).ready(function(){
dan di akhiri dengan
});
kemudian baris selanjutnya adalah :
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();

ini berarti submit form yang tadinya disubmit secara langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.
kemudian baris selanjutnya adalah :
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),

url berisi halaman penerima data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.
sedangkan baris selanjutnya penulis yakin Anda sudah paham maknanya,
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},

success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});

Belajar JQuery tahap 1

WebDesigner mana yang nggak kenal dengan library javascript yang satu ini? Bahkan webdesigner dari gunung sekalipun penulis yakin sudah mengetahui library yang satu ini. Mohon maaf bagi anda webdesigner dari gunung, bukan maksud penulis mengolok-olok, tapi jangan salahkan ibu mengandung, jangan salahkan bapak mengundang. :D. Meskipun sebetulnya selain Jquery ada juga library yang sama tangguhnya, seperti mootools, scriptaculous, dan banyak lagi yang aneh-aneh, sering juga perhelatan mengenai mana yang paling bagus tetap ada hingga sekarang, penulis sendiri di tengah saja, karena masing-masing library memiliki kelebihan masing-masing, gimana seleranya aja. Yang jelas untuk menggunakan jquery dasar yang harus anda kuasai adalah, HTML, CSS, dan sedikit saja bekal pengetahuan javascript, seperlunya dan sesuai selera.
Sebetulnya apa yang menarik dari JQuery? Selain penggunaanya diketik menggunakan keyboard, library yang lengkap, manual dan tutorial yang berjibun banyaknya di internet, pluginnya pun cukup banyak sekali, bagi anda yang dikejar deadline mungkin bisa langsung membuka http://www.jqueryplugins.com untuk mendapatkan efek jquery yang di inginkan. Sementara untuk artikel yang sekarang ini penulis hanya akan mengkhususkan belajar jquery dari dasar bukan untuk menggunakan plugin jquery.
Untuk artikel kali ini penulis akan memulai pembahasan pondasi dari jquery, yakni Memulai Jquery dengan Selector.
Mengapa jquery bisa membuat efek yang begitu memukau, memainkan HTML sehingga menjadikan suatu website jadi sangat interaktif? Salah satu alasannya adalah penggunaan selector yang mudah. Apa sebetulnya selector ? Konsep selector miliki jquery bisa dibilang mengadopsi dari konsep selectornya CSS. Ada selector id, selector class, dan selector tag. Bingungkan ??? Sama dong kita. Lebih baik kita langsung terjun bebas saja untuk mempraktikan jquery. Bagaimana???
Hal pertama yang dilakukan adalah kita download terlebih dahulu JQuery, anda bisa mengunjungi http://docs.jquery.com/Downloading_jQuery untuk langsung mendownloadnya, atau bisa juga mengklik link ini http://code.jquery.com/jquery-1.4.2.js sama saja. Saya tidak sedang berusaha untuk menipu anda. :D. Oke, letakkan file tersebut misalnya di c:belajarjqueryjquery-1.4.2.js. Selesai? Lanjutkan! Lebih cepat lebih baik.
Oke, selanjutnya siapkan satu buah file html, dan letakkan satu direktori dengan jquery-1.4.2.js yang tadi kita download. Berikan namanya misalkan, latihan.selector1.html
Kemudian isi di bagian body seperti ini :
<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Al-Khilafah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>
Kemudian kita sisipkan script ini dibagian head :
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>
Oke, bagaimana ? masih bingung ?? Mari kita bahas javascriptnya. Pertama kita memanggil library jquery,
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
Jangan sampai pertanyaan mengapa itu ada. Apa? Ya, karena bagaimana mungkin kita bisa menggunakan fasilitas jquery tanpa kita menyisipkan jquery ke dalam tag head. Oke kita lanjut.
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
Ketika halaman html telah di load sepenuhnya
$(“document”).ready(function(){
Dan ketika selector tag ‘a’ di halaman website tersebut di klik
$(“a”).click(function(){
Rubah kalimatnya yang berada dalam selector tag p dengan selector class samadengan kalimat menjadi warna merah
$(“p.kalimat”).css(“color”, “red”);
Kemudian berikan style untuk selector id kotakkotaknora.
$(“#kotakkotaknora”).addClass(“red”);
Penutupnya.
});
});

Sehingga yang harus di catat adalah, untuk memanggil elemen yang memiliki id, misalnya elemen div dia memiliki id, maka jquerynya memanggil dengan selector #id.
Sehingga <div id=”kotakotaknora”></div> di panggil oleh jquery dengan $(“#kotakkotaknora”).
Begitu pun halnya class dalam css, misalnya <p class=”kalimat”></p>
Lalu yang terakhir adalah tag selector, misalnya <a href=”#”> karena dia tidak memiliki id maupun class maka jquery memanggilnya dengan $(“a”).
Mudah ya? Oke kita perdalam lagi untuk tutorial selanjutnya.
Script lengkapnya adalah seperti ini, atau bisa juga download di sini
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5″>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>
</head>
<body>
<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Negara Daulah Al-Khilafah Islamiyah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>
</body>
</html>