Minggu, 30 Mei 2010

Minggu ke-13

XML

Konsep XML Web Services


Dalam pengertian yang sederhana , XML Web Services dapat di definisikan sebagai aplikasi yang diakses oleh aplikasi yang lain. Mungkin orang berpendapat itu semacam web site, tetapi itu bukan demikian. Ada perbedaan – perbedaan yang membedakan dengan web site.

Sesuai dengan namanya, XML Web Service menyimpan datanya dalam format XML dan karenanya menjadi multi platform dalam hal accessibilitynya. Bagi anda yang telah mengenal pemrograman dengan VB6, Delphi, Java, atau bahasa lain maka anda telah mengenal adanya berbagai library yang didalamnya terdapat berbagai function, property, dan event untuk memudahkan pembuatan aplikasi. Web Service dapat disamakan dengan library tersebut tetapi tidak memerlukan registrasi khusus ke dalam sistem operasi yang menyimpannya. Web Service tersimpan di Web Server sehingga dapat diakses oleh berbagai bahasa pemrograman dengan lebih mudah baik dalam lingkungan LAN maupun Internet.

Sistem Web Service ini diharapkan meningkatkan kolaborasi antar pemrogram dan perusahaan, yang memungkinkan sebuah fungsi di dalam Web Service dapat dipinjam oleh aplikasi lain tanpa perlu mengetahui detil pemrograman yang terdapat di dalamnya.

sumber: www.ilmukomputer.org



Minggu, 23 Mei 2010

Minggu ke-12

XML


code HTMLnya:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<!-- Edited by XMLSpy® -->
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>

SIMPAN DENGAN .xml

css:

CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="css1.css" ?>

Minggu, 16 Mei 2010

Minggu ke-11

Program Lain dari JavaScript:




Code HTMLnya:

<html>
<head>
<script language="JavaScript">
function hijau(){
document.bgColor="green";
}
function merah(){
document.bgColor="red";
}
function textkuning(){
document.fgColor="yellow";
}
function textbiru(){
document.fgColor="blue";
}
</script>
</head>
<body>
<H1>Efek Perubahan Warna</H1>
<input type="button" value="latar Belakang Hijau" onClick="hijau()"><br>
<input type="button" value="latar Belakang Merah" onClick="merah()"><br>
<input type="button" value="Tulisan Kuning" onClick="textkuning()"><br>
<input type="button" value="Tulisan Biru" onClick="textbiru()">
</body>
</html>

Membuat Jam Digital

Code HTMLnya:
<html>
<head>
<script language="JavaScript">
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
document.theClock.theTime.value = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
</script>
</head>
<body onload="StartClock()" onunload="KillClock()">
<form name="theClock"><input type="text" name="theTime" size="8" style="font-family: Verdana,sans-serif; font-size: 0.6em; font-weight: bold;"></form>
</body>
</html>


Menghitung Rata-Rata:



Code HTMLnya:

<html>
<head>
<script language="javascript">
function rata(){
var a=parseInt(l.a.value);
var b=parseInt(l.b.value);
var c=parseInt(l.c.value);
var d=parseInt(l.d.value);
var rata=(a+b+c+d)/4;

l.r.value=rata;
}
</script>
</head>
<body>
<h1>Hitung Rata-Rata</h1>
<form name="l">
<table>
<tr><td>Angka Pertama</td><td><input type="text" name="a"></td></tr>
<tr><td> Angka kedua</td><td><input type="text" name="b"></td></tr>
<tr><td>Angka Ketiga</td><td><input type="text" name="c"></td></tr>

<td>Angka Keempat</td><td><input type="text" name="d"></td>
</tr>
<tr>
<td> Hasil</td><td><input type="text" name="r" READONLY></td>
</table>
</form>
<input type="button" value="Hitung" onClick="rata()">
</body>
</html>

Senin, 10 Mei 2010

Minggu ke-10

Contoh Program Menarik Menggunakan JavaScript


Memasukan Jumlah angka yang akan dimasukan dan harus genap!

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
var Arr= new Array;
var x,i,a,b;
x=parseInt (window.prompt("Masukkan Jumlah Bilangan"));
i=0
while (i<x)
{
Arr[i]=parseInt (window.prompt("Masukkan Jumlah Bilangan "+(i+1)));
if(Arr[i]%2!=0)
{
alert("Bilangan Harus Genap");
}
else
{
i++;
}
}

document.write("Hasil Ascending<BR>");
a=Arr.sort();
for(i=0; i<x; i++)
{
document.write(" "+Arr[i]);
}
document.write("<BR>");
document.write("Hasil Descending<BR>");
b=Arr.reverse();
for(i=0; i<x; i++)
{
document.write(" "+Arr[i]);
}
</SCRIPT>
</BODY>
</HTML>



Memasukan berapa kolom dan verapa baris contoh baris=5; kolom=5;

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<style type="text/css">
.a{color:white;}
</style>
</HEAD>

<BODY>
<SCRIPT TYPE="Text/JavaScript">
var i,j;
var kol,bar,hasil;

hasil=0;
kol=window.prompt("masukkan Jumlah Baris");
bar=window.prompt("masukkan Jumlah Kolom");
document.write("<TABLE BORDER='1'>");
for(i=1; i<=parseInt(kol); i++)
{
document.write("<TR>");
for(j=1; j<=parseInt(bar); j++)
{
hasil=i*j;
if(i==j)
{
document.write("<TD class='a' BGCOLOR='Black'>"+hasil+"</TD>");
}
else
{
document.write("<TD>"+hasil+"</TD>");
}
}
document.write("</TR>");
}
document.write("</TABLE>");

</SCRIPT>

</BODY>
</HTML>








code HTMLnya:
<HTML>
<HEAD>
<TITLE>Hitung Klick</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">

var n,i;
n=window.prompt("Masukkan Jumlah Klik Yang Anda Inginkan ???");
for(i=0; i<n; i++)
{
window.alert("Anda Tinggal Klik-"+(i+1));
}

document.write("Anda tadi meng-klik sebanyak "+i+" kali");

</SCRIPT>
</BODY>
</HTML>

Jumat, 30 April 2010

Minggu ke-9

JavaScript Conditional If ... Else

<html>
<body>

<script type="text/javascript">
var d = new Date();
var time = d.getHours();

if (time < 10)
{
document.write("<b>Selamat Pagi</b>");
}
else
{
document.write("<b>Selamat Siang</b>");
}
</script>

<p>
Ini Contoh IF
</p>

</body>
</html>

Di Browser akan muncul "Selamat Pagi" karena menunjukan pukul 10.


SWITCH CASE

<html>
<body>
<script type="text/javascript">
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;
case 0:
document.write("<b>Sleepy Sunday</b>");
break;
default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}
</script>

<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

</body>
</html>


di browser akan muncul:

"I'm really looking forward to this weekend!"

This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.


LOOP

<html>
<body>

<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>

<p>Explanation:</p>

<p>This for loop starts with i=0.</p>

<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>
</html>


HASILNYA:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

Explanation:

i is equal to 0.

While i is less than , or equal to, 5, the loop will continue to run.

i will increase by 1 each time the loop runs.


ALERT

<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("SAYA ALERT BOX!");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()" value="KLICK BOS" />

</body>
</html>

akan muncul:


Minggu, 25 April 2010

MInggu ke-8

Java Script

Java Script merupakan bahasa pemrograman yang dieksekusi di sisi klien atau yang biasa dikenal dengan
istilah client side programming di mana suatu kode program akan dikirimkan ke klien dan dieksekusi /
dijalankan oleh web browser dan bukannya dieksekusi di web server.
Dalam implementasinya, suatu kode program Java Script akan disisipkan pada suatu dokumen HTML dengan
menggunakan pasangan tag di atribut LANGUAGE dari tag

Syntaxnya:
<SCRIPT LANGUAGE=JavaScript>
...
...
...
</SCRIPT>
Contoh:

code htmlnya:


<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<H1>Aksara Jawa</H1>");
</SCRIPT>
<I>Tulisan di atas dihasilkan oleh Java Script</I>
</BODY>
</HTML>

Memberi Komentar
ada dua cara memberi komentar pada javascript yaitu:
1. Menggunakan penanda //
Penanda // digunakan untuk menuliskan komentar dalam satu baris
2. Mengunakan pasangan penanda /* dan */
Pasangan penanda /* dan */ digunakan untuk menuliskan komentar yang lebih dari satu baris

Tipe Data dan Deklarasi Variabel
Dalam Java Script terdapat tiga macam t ipe data utama, yaitu tipe data String (kumpulan karakter) , tipe data
bilangan / numerik, dan tipe data logika / boolean. Pada tipe data boolean akan mengenal dua buah ni lai yaitu
true dan false.
Pendeklarasian v ariabel dalam Ja va Script ditandai dengan penggunaan kat a kunci var dan diikuti dengan
nama variabel. Tipe data dari suatu variabel ditentukan oleh nilai yang diisikan ke dalam variabel tersebut dan
bukannya dideklarasikan seca ra eksplisit

contoh:
<SCRIPT LANGUAGE=JavaScript>
var kota = bandung// deklarasi variabel bernama kota bertipe data string
var gaji = 0; // deklarasi variabel bernama gaji bertipe data integer
var ipk= .75; // dklarasi variabel benama ipk bertpe data float
var status_cekal = false; // deklarasi variabel bernama status_cekal bertipe data boolean
</SCRIPT>

Operator Aritmatika

Operator aritmatika adalah operator yang digunakan untuk menangani /mengoperasikan suatu n ilai bertipe
data numerik.
Berikut ini adalah daftar tipe data numerik:


contoh:

code htmlnya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Aritmatika</H1>
<SCRIPT LANGUAGE="JavaScript">
var a, b, c;
a = 7; b = 4; c = 0;
document.write("nilai variabel a = " + a +"<BR>");
document.write("nilai variabel b = " + b +"<BR>");
c = a + b;
document.write("a + b = " + c + "<BR>");
c = a b;
document.write("a b = " + c+ "<BR>");
c = a * b;
document.write("a * b = " + c + "<BR>");
c = a / b;
document.write("a / b = " + c + "<BR>");
c = a % b;
document.write("a% b = " + c + "<BR>");
a++;
document.write("a++ maka nilai a sekarang adalah " + a + "<BR>");
a;
document.write("b maka nilai a sekarang adalah "+Â b);
</SCRIPT>
</BODY>
</HTML>

Operator Pemberian Nilai / Assignment

Operator penugasan / assignment adalah operator yang digunakan untuk memberikan / memasukkan nilai ke
dalam suatu v ariabel.




code htmlnya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Pemberian Nilai / Assignment</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
a = 7;
document.write("a = 7 <BR>");
document.write("nilai variabel a = " + a + "<BR>");
a += 3;
document.write("a += 3<BR>");
document.write("nilaiÂvariabel a =" + a + "<BR>");
a = 5;
document.write("a­= 5<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a *= 4;
document.write("a *= 4<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a /= 2;
document.write("a /= 2<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a %= 4;
document.write("a %=4<BR>");
document.write("nilai variabel a = " + a + "<BR>");
</SCRIPT>
</BODY>
</HTML>


Operator Pembanding / Comparison

Operator pembanding adalah operat or yang digunakan untuk membandingkan dua buah nilai dan akan
menghasilkan nilai bertipe data boolean yaitu benar(true) atau salah (false).



contoh:

code htmlnya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Pembandingan Nilai / Comparison</H1>
<SCRIPT LANGUAGE="JavaScript">
var a, b, x;
a = 7; b = 15;
document.write("nilai variabel a = "+ a + "<BR>");
document.write("nilai variabel a = " + b + "<BR><BR>");
x =(a==b);
document.write("x = (a==b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a>b);
document.write("x = (a&gt; b)<BR>");
document.write("nilai variabel x="+x+ "<BR><BR>");
x =(a<b);
document.write("x =(a &lt; b)");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a>=b);
document.write("x = (a &gt; =b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x= (a<=b);
document.write("x = (a &lt; =b)<BR>");
document.write("nilai variabel x= " + x + "<BR><BR>");
</SCRIPT>
</BODY>
</HTML>


Operator Logika
Operator logika adalah operator yang digunakan untuk mengoperasikan nilai­nilai bertipe data boolean yang
bernilai true atau false.
Berikut ini adalah daftar operator logika


contoh:


code htmlnya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Logika</H1>
<SCRIPT LANGUAGE="JavaScript">
var x;
x = (7>4) && (5<9);
document.write("x = (7 &gt; 4) &amp;&amp; (5 &lt; 9)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (9>12) || (8<3);
document.write("x = (9 &gt; 12) || (8 &lt; 3)<BR>");
document.write("nilaivariabel x = " + x + "<BR><BR>");
x =!(9<4);
document.write("x = !(9&lt; 4)<BR>");
document.write("nilai variabel x = " + x);
</SCRIPT>
</BODY>
</HTML>

Rabu, 24 Maret 2010

Minggu ke-7

CSS Bagian 2

Penggunaan ID dalam CSS


adanya ID dimaksudkan untuk mentupi kelemahan dari html itu sendiri yaitu style yang ditetapkan
akan berlaku untuk keseluruhan penggunaan satu tag tertentu.
enggunaan ID
pada CSS menjadikan implementasi style CSS pada tagtag
HTML lebih fleksibel.
Penamaan ID dalam CSS diawali dengan karakter “#” dan diikuti dengan ID nya.

contoh code html nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:BLUE;
BACKGROUN-DCOLOR:
PINK;}
#dua {TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 Style satu</H1>
<H1 ID="dua">Header1 Style dua</H2>
<P ID="satu">
Paragraf ini menggunakan
style dua looo....
</P>
</BODY>
</HTML>

yang dikeluarkan adalah seperti berikut:

Penggunaan Class dalam CSS

Penggunaan CLASS dalam CSS memiliki kemiripan dengan ID, bahkan keduanya bisa digunakan secara
bersamasama
dan diimplementasikan pada tag HTML yang sama.
Penamaan CLASS dalam CSS diawali dengan karakter “.” (karakter titik) dan diikuti dengan nama CLASS
nya.

code htmlnya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:WHITE;
BACKGROUN-DCOLOR:
BLACK;}
.dua { TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 ID satu</H1>
<H1 CLASS="dua">Header1 CLASS dua</H2>
<P ID="satu" CLASS="dua">
Paragraf ini menggunakan
ID satu dan Class dua lhooo..
</P>
</BODY>
</HTML>

keluaran yang dihasilkan:

Model Pendefinisian:

Model pendefinisian dibagi menjadi dua yaitu:
  • Internal
  • Eksternal
Model Pendefinisian Internal yaitu, Model pendefinisian secara internal dilakukan dengan menempatkan definisi style CSS di antara pasangan tag
<STYLE> dan </STYLE> yang ditempatkan di bagian HEAD dari suatu dokuken HTML yang akan
mengimplementasikan style CSS tersebut. Model pendefinisian semacam inilah yang digunakan pada contohcontoh
sebelumnya.

contoh:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1 STYLE="COLOR:WHITE; BACKGROUND-COLOR:
BLACK; TEXT-DECORATION:
LINE-THROUGH;">
Menggunakan Model Pendefinisian In Line
</H1>
</BODY>
</HTML>

Model Pendefinisian Eksternal, yaitu memungkinkan beberapa file dokumen HTML untuk
menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan
menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS
diberi tag <LINK>. Adapun format lengkap dari tag <LINK> yang digunakan adalah sebagai berikut
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css>

contoh yang disimpan dalam ekstensi .css :
H1.satu {COLOR:GREEN;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
BLUE;
FONT-SIZE:
12pt;}
H1.dua {COLOR:RED;
BACKGROUND-COLOR:
YELLOW;
BORDER-STYLE:
SOLID;
FONT-SIZE:
20pt;}

.html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul Halaman1</TITLE>
</HEAD>
<BODY>
<LINK REL="STYLE-SHEET" TYPE="TEXT/CSS" HREF="gaya.css">
<H1 CLASS="satu">Menggunakan Class satu secara eksternal dari file gaya.css</H1>
<H1 CLASS="dua">Menggunakan Class dua secara eksternal dari file gaya.css</H1>
</BODY>
</HTML>

keluarannya: