modul 9 pw

LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

MODUL 9

Disusun oleh :

NAMA : Nugroho Ari Saputro

NIM : L200120105

JURUSAN TEKNIK INFORMATIKA

FAKULTAS KOMUNIKASI DAN INFORMATIKA

UNIVERSITAS MUHAMMADIYAH SURAKARTA

2014

A. TUJUAN
Kita dapat memahami bahasa XML sebagai bahasa pengolah data dalam web server.

B. LANDASAN TEORI

XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet.

XML didesain untuk mampu menyimpan data secara ringkas dan mudah diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah bisa memberikan informasi.

XML menyediakan suatu cara terstandarisasi namun bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya, XML dapat digunakan untuk menggambarkan sembarang view database, tetapi dengan suatu cara yang standar.

C. ALAT DAN BAHAN

1. PC / Komputer

2. Notepad ++

3. Browser Google Chrome / Mozila firefox

4. Internet

5. Modul Praktikum Pemrograman Web

D. LANGKAH PRAKTIKUM

PERCOBAAN 1

1. buka aplikas Notepad++, kemudian kita ketikkan script berikut :

2. Kita simpan dengan nama data.xml

3. Kemudian kita buka dengan web browser.

4. Hasil percobaan sebagai berikut :

PERCOBAAN 2 ( XML dan CSS )

1. Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :

{

display:block

}

NIM

{

color:red

}

Nama

{

color:blue;

font-weight:bold;

font-size:20pt;

background-color:yellow

}

Kota

{

font-family:verdana;

font-style:italic

}

2. Kita buka kembali file data.xml menggunakan notepad++ dan kita tambahkan script pada baris ke dua diatas tag <Mahasiswa> :

<?xml-stylesheet type="text/css" href="data.css"?>

3. Kita simpan file tersebut.

4. Kita buka file data.xml tersebut dengan web browser.

5. Hasil percobaan sebagai berikut :

PERCOBAAN 3 ( XML dan CSS bag.2 )

1. Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :

<html>

<body>

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest();

}

else

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","data.xml",false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");

var x=xmlDoc.getElementsByTagName("ID");

document.write("

<tr><td>");

document.write("<b>NIM</b>");

document.write("</td><td>");

document.write("<b>Nama</b>");

document.write("</td><td>");

document.write("<b>Kota</b>");

document.write("</td></tr>

");

for (i=0;i<x.length;i++)

{

document.write("

<tr><td>");

document.write(x[i].getElementsByTagName("NIM")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("Nama")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("Kota")[0].childNodes[0].nodeValue);

document.write("</td><td>");

}

document.write("</table>

");

</script>

</html>

2. Kita simpan dengan data2.css.

3. Kita buka kembali data.xml dan kita tambahkan script baris kedua di atas tag <Mahasiswa> dan ganti script sebagai berikut dan disimpan dan buka file tersebut :

4. Hasil percobaan sebagai berikut :

PERCOBAAN 4 ( XML dan HTML )

1. Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :

<html>

<head><title>Data Mahasiswa</title>

</head>

<body>

<h2>

Data Mahasiswa</h2>

<thead>

</thead>

</tr>

</table>

</html>

2. Kita simpan dengan nama data.html

3. Kita buka file dengan web browser.

4. Hasil percobaan sebagai berikut :

PERCOBAAN 5 ( XML dan HTML bag.2 )

1. Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :

<html>

<body>

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest();

}

else

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","data.xml",false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");

var x=xmlDoc.getElementsByTagName("ID");

document.write("

<tr><td>");

document.write("<b>NIM</b>");

document.write("</td><td>");

document.write("<b>Nama</b>");

document.write("</td><td>");

document.write("<b>Kota</b>");

document.write("</td></tr>

");

for (i=0;i<x.length;i++)

{

document.write("

<tr><td>");

document.write(x[i].getElementsByTagName("NIM")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("Nama")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("Kota")[0].childNodes[0].nodeValue);

document.write("</td><td>");

}

document.write("</table>

");

</script>

</html>

2. Kita simpan dengan nama data2.html

3. Kita buka file dengan web browser.

4. Hasil percobaan sebagai berikut :

PERCOBAAN 6 ( XML dan PHP )

1. Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :

<html>

<body>

<?php

$dataxml = simplexml_load_file('data.xml');

$no = 1;

foreach ($dataxml->PERSON as $hasil) {

echo "

<tr>";

echo "<td>".$no."</td>";

echo "<td>".$hasil->NIM."</td>";

echo "<td>".$hasil->NAMA."</td>";

echo "<td>".$hasil->KOTA."</td>";

echo "</tr>

$no++;

}

</table>

</html>

2. Kita simpan dengan nama xmlphp.php

3. Kita buka file dengan web browser.

4. Hasil percobaan sebagai berikut :

E. TUGAS
Tulislah Scriptnya seperti berikut :

<html>

<head><title>Data Mahasiswa</title>

</head>

<body>

<h2>

Data Mahasiswa<h2>

<thead>

</thead>

</tr>

</table>

</html>

Script cssnya :

body {background:blue}

h2 {font-family:comic sans ms; background-color:skyblue;text-align:center}

table {background:aqua}

.td {font-weight:bold}

.dashed

{

border-style:dashed;

border-color:#ff0000;

}
Hasilnya sebagai berikut :

NGOPREK - NGOPREK IT

Jumat, 26 Desember 2014

modul 9 pw

Tidak ada komentar:

Posting Komentar