Ajax pramana rwxr-xr-x 0 3:59 am

Filename	Ajax
Permission	rw-r--r--
Author	pramana
Date and Time	3:59 am
Label
Action

Asal Mula Bahasa Pemrograman Ajax

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll. Perhatikan mekanisme proses AJAX menggunakan PHP berikut ini

Pada mekanisme di atas, proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Bandingkan dengan mekanisme biasa dalam menjalankan PHP seperti yang ditunjukkan pada gambar berikut

Pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang sekali. Sedangkan kekurangan AJAX dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi, karena programmer harus menguasai 4 hal yaitu HTML-(XHTML), Javascript, XML dan juga server side programming seperti PHP dan lain sebagainya.

Mengapa Harus Ajax

Pada website tradisional biasa jika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refresh dimana document HTML akan di baca dari awal dan layar browser akan menjadi blank sesaat karena pada saat itu browser sedang meminta/merequest data dari web server dan hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server. Saat ini Ajax sudah menjadi teknologi yang wajib diterapkan bagi website-website moderen (Web 2.0).

Contoh aplikasi Ajax

Pada artikel ini saya akan coba memberikan contoh ajax yang paling sederhana karena aplikasi-aplikasi website yang besar dimulai dari sesuatau yang sederhana. Untuk memulainnya silahkan anda buat sebuah File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama index.html

<html> <head> <title>Contoh AJAX title> <script language="javascript"> function GetXmlHttpObject(){     var xmlHttp=null;     try {     //Untuk Browser Firefox, Opera 8.0+, Safari         xmlHttp=new XMLHttpRequest();     }     catch (e){     //Untuk Browser Internet Explorer         try {                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");         }         catch (e){                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");         }     }     return xmlHttp; } function getpages(url,centercol) {     xmlHttp=GetXmlHttpObject();     if (xmlHttp) {         var obj = document.getElementById(centercol);         xmlHttp.open("GET", url);         xmlHttp.onreadystatechange = function() {             if (xmlHttp.readyState == 1) {                 obj.innerHTML = '<img alt=\"Halaman Sedang Dimuat \" src=\"images/wait.gif\" alt=\"loading\" / >';             }             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {                 obj.innerHTML = xmlHttp.responseText;             }         }         xmlHttp.send(null);     } } </script> </head> <body> <h1>Request File Dari HTML </h1> <form>     <input value="Request File  " onclick="getpages('request.html','centercol')" type="button"> </form> <div id="centercol">   File request.html akan ditampilkan disini </div> </body> </html>

Sekarang buat file HTML dengan nama request.html yang disimpan dengan folder yang sama dengan File diatas kemudian isilah dengan text berikut ini:

Text ini ditampilkan dengan metode proses request <strong>Ajax</strong>

Berikut saya terangkan
Awalnya kita perlu membuat object XMLHttpRequest, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:

function GetXmlHttpObject(){     var xmlHttp=null;     try {     //Untuk Browser Firefox, Opera 8.0+, Safari         xmlHttp=new XMLHttpRequest();     }     catch (e){     //Untuk Browser Internet Explorer         try {                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");         }         catch (e){                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");         }     }     return xmlHttp; }

Pertama-tama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru xmlHttp = new XMLHttpRequest(); Khusus untuk Internet Explorer, karena menggunakan ActiveX untuk membuat XMLHttpRequest kita harus membuat kode xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi function getpages(url,centercol), yang didalamnya terdapat xmlHttp.open ("GET", url); yang berarti kita mengambil url dengan method get. dengan menggunakan method get maka kita harus mengirimkan sesuatu keserver, tapi karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode: xmlHttp.send(null);
xmlHttp.onreadystatechange = function() merupakan sebuah fungsi dimana nanti kita akan memperoleh status dari request file yang telah kita lakukan. xmlHttp.readyState memiliki 4 status yaitu:

• 0 Request kita belum dibuat
• 1 Request kita sedang dalam proses (biasanya kita menggunakan gambar loading dengan ini)
• 2 Request kita sudah dikirim tapi hasil belum diterima
• 3 Request kita sedang diproses dikomputer klien
• 4 Request sudah sukses dikirim dan kita sudah sukses menerimanya

xmlHttp.status merupakan status http. Jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua status tersebut dengan kode if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = xmlHttp.responseText Dimana ini berarti kita menampilkannya di obj, sementara variabel obj telah kita isi dengan centercol, ini kode ketika kita mengisi obj dengan centercol, var obj = document.getElementById(centercol).

Terakhir Kita memanggil fungsi getpages pada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages: <input type="button" value="Tampilkan Request" onclick="getpages('request.html' ,'centercol')">.

Tugas P.WEB *HTML, ASP, & PHP pramana rwxr-xr-x 0 2:07 am

Filename	Tugas P.WEB *HTML, ASP, & PHP
Permission	rw-r--r--
Author	pramana
Date and Time	2:07 am
Label
Action

 Nama kelompok

1. INDRA PRAMANA    [ 11018068 ]

2. AGUS SISWANTO     [ 11018065 ]

3. ZAINAL I FIRDAUS   [ 11018081 ]

4. DONI SISWANDI       [ 11018079 ]

5. AGUS SUSILO           [ 11018085 ]

1. Mencari nilai terbesar dari 2 inputan menggunakan form HTML pada ASP ?

*first : we make the form of HTML ..

next the form that executed the name_file.asp

Tapi sebelum  name_file.asp di executed, kita harus mengaktifkan iis dulu ..

IIS adalah Internet Information Service...Dalam windows 7 iis sdh tersedia tinggal kita mengakatifkannya..

this is source code of form HTML :

 

<html>
<head>
    <style type="text/css">

body{
background : gray;
color : black;
}

h1{
font-size : 150%;
}

    </style>
</head>

<body> <p> <center>
<table border="2px" bgcolor="red">
<form action="tgs.asp" method="POST">

<tr><td> Nilai I :</td> <td> <input type="text" name="i" /> </td> </tr>
<tr><td> Nilai J :</td><td> <input type="text" name="j" /> </td> </tr>
<tr> <td></td> <td><input type="submit" value="proses" /> </td> </tr>

</form>
</table>

</body>
</html>

// this file must save with name_file.html

 *second : after creating a form in html, we will create a script in asp...

Caranya kita buat folder di C setelah iis di aktifkan t4 "c:\inetpub\wwwroot\foldermu\nama_file.asp"

this is source code :  

 <%

response.write(request.form("i"))
response.write(" | " & request.form("j"))
response.write(" = ")

if(request.form("i")>request.form("j")) response.write("Nilai i lebih besar dari j")
else response.write("Nilai j lebih besar dari i")
%>

// this file must save with name_file.asp

2. Aplikasi perulangan mengguakan for,while, dan do while pada PHP ?

*file HTML

pada PHP kita menggunakan aplikakasi apache sama mysql ex : xampp

Source code :

<html>
<body bgcolor="pink">

<p>
<center>
<table border="2px" bgcolor="red">
<form action="loop.php" method="post">

<tr><td>Masukan bilangan :</td><td><input type="text" name="banyak" />
</td></tr>
<tr><td colspan="2"><center><input type="submit" value="proses" />
</td></tr>
</form>
</table>


</body>
</html>

*file PHP

this is source code:

<html>
<body>

<?php

//perulangan for
echo "perkalian ".($_POST["banyak"])." dari 1 sampai 10 ! <br><br>";
for($a=1;$a<=10;$a++){
echo ($_POST["banyak"])." x ".($a)." = ".($_POST["banyak"]*$a)."<br>";
}echo"<br>";

//perulangan while
echo "Menjumlahkan ".($_POST["banyak"])." dari 1 sampai 10 ! <br><br>";
$i=1;
while($i<=10)
{
echo $_POST["banyak"]." + " .$i." = ".($_POST["banyak"]+$i)."<br>";
$i++;
}echo"<br>";

//perulangan do while
echo "Mengurangkan ".($_POST["banyak"])." dari 1 sampai 10 ! <br><br>";
$b=1;
do{
echo $_POST["banyak"]." - " .$b." = ".($_POST["banyak"]-$b)."<br>";
$b++;
}
while($b<=10)


?>

</body>
</html>

3. Membuat aplikasi menggunakan function !

*file HTML

this is source code :

<html>

<body bgcolor="chocolate">

<center> <table border="0px" bgcolor="cream">

<form action="fungsi.php" method="post">

<tr><td>nilai a :</td><td> <input type="text" name="a" /></td></tr>

<tr><td>nilai b :</td><td><input type="text" name="b" /></td></tr>

<tr><td></td><td><input type="submit" value="proses" /></td></tr>

</form>

</table>

</body>

</html> 

*file PHP

source code :

<html>
<body>

<?php

echo "  KALKULATOR <br><br>";

function tambah()
{
$total=$_POST["a"]+$_POST["b"];
return $total;
}

function kurang()
{
$total=$_POST["a"] - $_POST["b"];
return $total;
}

function kali()
{
$total=$_POST["a"] * $_POST["b"];
return $total;
}

function bagi()
{
$total=$_POST["a"] / $_POST["b"];
return $total;
}

function mod()
{
$total=$_POST["a"] % $_POST["b"];
return $total;
}

echo "hasil jumlah [".$_POST["a"]." + ".$_POST["b"]. "] =" .tambah()."<br />";
echo "hasil kurang [".$_POST["a"]." - ".$_POST["b"]. "] =" .kurang()."<br />";
echo "hasil kali [".$_POST["a"]." x ".$_POST["b"]. "] =" .kali()."<br />";
echo "hasil bagi [".$_POST["a"]." : ".$_POST["b"]. "] =" .bagi()."<br />";
echo "sisa pembagian [".$_POST["a"]." / ".$_POST["b"]. "] =" .mod();
?>

</body>
</html>

Pengertian dan Perbedaan Web statik dan dinamis pramana rwxr-xr-x 0 1:31 am

Filename	Pengertian dan Perbedaan Web statik dan dinamis
Permission	rw-r--r--
Author	pramana
Date and Time	1:31 am
Label
Action

Pengertian Web Statis
Web Statis adalah web yang content atau isinya tidak berubah – ubah. Maksudnya adalah isi dari dokumen yang ada di web tersebut tidak dapat diubah secara mudah. Ini dikarenakan karena script yang digunakan untuk membut web statis tidak mendukung untuk mengubah isi dokumen.
Karena script yng digunakan untuk membuat web statis ini seperti HTML dan Cascading Style Sheet atau biasa disebut dengan CSS. Maka dari itu untuk perubahan isi dokumen pada web statis harus mengubah isi file HTML atau CSS tersebut. Tentunya bagi orang awam atau orang yang tidak mengerti soal program atau script HTML dan CSS akan sangat sulit sekali dilakukan. Untuk itu jika kita ingin mengubah dokumen web statis harus mengerti benar scipt HTML atau CSS atau sering disebut programmer yang dapat melakukan perubahan isi dokumen sebuah web statis.
Web statis ini biasanya digunakan oleh website yang menggunakan HTML, Web Search Engine, atau web Company Profile.


Pengertian Web Dinamis
Web Dinamis adalah Web yang content atau isinya dapat berubah – ubah setiap saat. Karena dalam teknologi pembuatan web dinamis sudah dirancang semudah mungkin bagi user yang menggunakan web dinamis tersebut.
Untuk perubahan content atau isi dokumen dalam sebuah web dinamis dibilang mudah ketimbang web statis yang harus memiliki keahlian khusus pada bagian scripting web tersebut. Ketika kita akan mengubah content atau isi dari sebuah web dinamis kita hanya perlu masuk kebagian control panel atau bagian administrator web yang telah disediakan oleh script web dinamis.
Jadi untuk pengubahan content atau isi dokumen dalam sebuah web dinamis tidak perlu memiliki keahlian programming atau seorang programmer saja yang dapat mengubah isi dokumen pada web dinamis. Untuk membuat web dinamis diperlukan beberapa komponen yaitu client side scripting ( HTML, JavaScript, Casing Style Sheet atau CSS) dan server side scripting seperti PHP dan program basis data seperti database MySQL untuk menyimpan data – data yang ada di web dinamis.
Web Dinamis ini banyak sekali bertebaran di internet seperti Web Berita, Personal Blog, Toko Online/Web Pasng Iklan, dll.