Setelah kita mempelajari pembuatan web mengenai CSS, saat ini kita akan memulai untuk mempelajari pembuatan web dengan menggunakan javascript. Berikut studi kasus dengan aplikasi kalkulator berbasis javascript :

a. Berikut sintaks program apliksi kalkulator (kalkulator.js) :

function kalkulator()
{
var isi = document.form1;
var angka1 = parseInt(isi.angka1.value);
var angka2 = parseInt(isi.angka2.value);
var pilihan = isi.pilihan.value;
var perhitungan;

if(pilihan == "tambah")
{
perhitungan = angka1 + angka2;
}
else if(pilihan == "kurang")
{
perhitungan = angka1 - angka2;
}
else if(pilihan == "kali")
{
perhitungan = angka1 * angka2;
}
else if(pilihan == "bagi")
{
perhitungan = angka / angka2;
}
else
{
perhitungan = angka % angka2;
}

isi.perhitungan.value = perhitungan;
}

function resetisi()
{
document.form1.reset();
}


b. Dan berikut sintaks untuk file html :

<!DOCTYPE html>
<html lang="en">

<head>
<title>STUDI KASUS MODUL 5 </title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js">
</script>
</head>

<body bgcolor="#4380d4">
<center>
<link type="image/x-icon" rel="icon" href="um.jpg">
<h3>TUGAS PRAKTIKUM MODUL 5</h3>
<br>
<br>
</br>
</br>
<h3>KALKULATOR SEDERHANA</h3>
<br>
</br>
<form name="form1" action="#">
<input type="text" size="5" name="angka1">
<select name="pilihan">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">*</option>
<option value="bagi">:</option>
<option value="mod">%</option>
</select>
<input type="text" size="5" name="angka2">
<input type="button" value="=" onclick="kalkulator()"/>
<input type="text" size="10" name="perhitungan" readonly>
<input name="pilihan" type="button" value="Reset"onclick="resetisi()" />
</form>
</center>
<br>
<br>
<br>
<left>
<i> Shofiyah Al Idrus - 109533423228 - PTI 2009 OFF B </i>
</left>
</body>
</html>

Berikut adalah hasil printscreen sintaks diatas :

Saat ini kita akan membuat template sederhana pada sebuah web, semua hal tersebut telah kita pelajari pada modul 4 pada materi Web CSS.

Berikut adalah studi kasus pada modul 4 :

a. Sintaks pada file.css (cobastyle.css)

body
{
margin :10px auto;
width : 750px;
}

header,nav,article,aside,section,footer
{
display:block;
border:1px solid green
}


header
{
height:80px;
border:1px solid green;
}

nav
{
float:left;
width:748px;
height:30px;
border:1px solid blue;
}

article
{
clear:both;
margin-top:10px;
margin-left:30px;
float:left;
width:450px;
height:370px;
border:1px dashed red;
}

aside
{
margin-top:10px;
margin-left:530px;
margin-right:50x;
width:200px;
height:370px;
border:1px dashed black;
}

section
{
clear:both;
margin=left:400px;
width:748px;
height:400px;
border:1px solid red;
}

footer
{
clear:both;
heigth:20px;
border:1px solid green;
}

b. Sintaks pada file.html (coba.html)

<!DOCTYPE HTML>
<html lang="en">

<head>
<title>DESAIN LAYOUT MODUL 4</title>
<link rel="stylesheet" href="cobastyle.css" type="text/css"/>
</head>

<body>

<header>
header
</header>

<nav>
nav
</nav>

<section>
<article>
article
</article>

<aside>
aside
</aside>
section
</section>

<footer>
footer
</footer>

</body>
</html>

Dan berikut adalan printscreen sintaks diatas :

Setelah kita mempelajari modul 2, sekarang kita memasukki modul 3 yang bertemakan Cascading Style Sheet, dan berikut adalah studi kasus pada MODUL 3 :

a. Sintaks Pada Studi Kasus Adalah Sebagai Berikut :

<!DOCTYPE HTML>
<html lang="en">

<head>
<title> STUDI KASUS MODUL 3</title>
<h1>CONTOH-CONTOH BORDER PADA STUDI KASUS MODUL 3</h1>
<style type="text/css">

<!--
.lingkaran
{
background-color:#ddccb5;
-moz-border-radius: 200%;
-webkit-border-radius: 1px;
border:2px solid #897048;
padding:20px;
width:150px;
height:150px;
font-family : Calibri;
font-size : medium;
}
.cekung
{
background-color:#ddccb50;
-moz-border-radius-bottomright:25px;
-moz-border-radius-topleft:25px;
border:2px solid #897048;
padding:15px;
width:300px;
height:25px;
font-family : Calibri;
font-size : medium;
color : blue;
}
.shadow
{
background-color:#ddccb20;
border:2px solid #897048;
padding:15px;
width:300px;
height:30px;
-moz-box-shadow: -5px 5px 5px #100;
font-family : Forte;
font-size : medium;
font-style : italic
font-weight : blod
color : red;
}
.round
{
background-color:#aaccb7;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:2px solid #897048;
padding:10px;
width:310px;
font-family : Courier New;
}
-->
</style>
</head>

<body>
<div class ="lingkaran" align="center">
Yang ini border lingkaran. Pendekatan yang digunakan masih sama lho. Ayo, kreasikan sendiri ya???
</div><br>
<div class="cekung">
Bisa juga bikin kreasi border seperti ini.
Mmmm.........
</div><br>
<div class="shadow" align="center">
Kalau yang ini semacam efek shadow. Keren kan???
</div><br>
<div class="round" align="center">
Ini adalah contoh lain bentuk border.
</div><br>

<i>Shofiyah Al Idrus-February, 2011</i><br>
<i>109533423228-PTI09/OFFB</i><br>

</body>

</html>

b. Dan berikut adalah printscreen untuk studi kasus diatas :

STUDI KASUS MODUL PRAKTIKUM

Dan berikut adalah sintaks pada studi kasus modul 2 :


A. Sintaks Untuk Film


<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku</title>
<body>
<center>
<font face = "impact" size = 5 color = "green">DOWNLOAD DATAKU!</font></center>
<font face = "arial" size = 4>
<table align = "center" border = 0>
<tr>
<th width = "200" height = "60" bgcolor = "green"><a href=film.html>Film</a></td>
<th width = "200" height = "60" bgcolor = "green"><a href=dokumen.html>Dokumen</a></td>
<th width = "200" height = "60" bgcolor = "green"><a href=musik.html>Musik</a></td>
</tr>
<tr>
<td colspan=3 bgcolor = "green">
<ol>
<li><a href = "Angel and Demons.avi">Angel and Demons</a></li>
<li><a href = "Hachiko.avi">Hachiko</a></li>
<li><a href = "Barbie.avi">Barbie</a></li>
<li><a href = "HP7.avi">Harry Potter 7</a></li>
<li><a href = "Narnia.avi">Narnia</a></li>
</td>
</table>
</font>
</body>
</html>

B. Sintaks Untuk Musik
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku</title>
<body>
<center>
<font face = "impact" size = 5 color = "green">DOWNLOAD DATAKU!</font></center>
<font face = "arial" size = 4>
<table align = "center" border = 0>
<tr>
<th width = "200" height = "60" bgcolor = "green"><a href=film.html>Film</a></td>
<th width = "200" height = "60" bgcolor = "green"><a href=dokumen.html>Dokumen</a></td>
<th width = "200" height = "60" bgcolor = "green"><a href=musik.html>Musik</a></td>
</tr>
<tr>
<td colspan=3 bgcolor = "green">
<ol>
<li><a href = "Dia Dia Dia">Afgan- Dia Dia Dia</a></li>
<li><a href = "Laguku">Ungu - Laguku</a></li>
<li><a href = "Peri Cintaku">Marcell - Peri Cintaku</a></li>
<li><a href = "wajahmu mengalihkan duniaku">afgan - wajahmu mengalihkan duniaku</a></li>
<li><a href = "Tak Pernah Setengah Hati">Tompi - Tak Pernah Setengah Hati</a></li>
</td>
</table>
</font>
</body>
</html>

C. Sintaks Untuk Dokumen
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku</title>
<body>
<center>
<font face = "impact" size = 5 color = "green">DOWNLOAD DATAKU!</font></center>
<font face = "arial" size = 4>
<table align = "center" border = 0>
<tr>
<th width = "200" height = "60" bgcolor = "green"><a href=film.html>Film</a></td>
<th width = "200" height = "60" bgcolor = "green"><a href=dokumen.html>Dokumen</a></td>
<th width = "200" height = "60" bgcolor = "green"><a href=musik.html>Musik</a></td>
</tr>
<tr>
<td colspan=3 bgcolor = "green">
<ol>
<li><a href = "JAVA">PDF - JAVA</a></li>
<li><a href = "BUS SISTEM">PDF - BUS SISTEM</a></li>
<li><a href = "Penjadwalan">Ms.Word Penjadwalan</a></li>
<li><a href = "Input-Output">PDF - Input-Output</a></li>
<li><a href = "MANAJEMEN PROSES">Ms.Word MANAJEMEN PROSES</a></li>
</td>
</table>
</font>
</body>
</html>

Dan berikut adalah hasil printscreen sintaks diatas :

STUDI KASUS MODUL PRAKTIKUM

Selain tugas praktikum, kita akan menyelesaikan studi kasus yang ada pada modul-modul praktikum. Berikut adalah studi kasus pada modul 1 :
Berikut adalah sintaks program pada studi kasus 1 :
<!DOCTYPE HTML>
<html>
<head>
<title>BUS SISTEM</title>
<link rel="shortcut icon" href="um.ico">
</head>

<body>
<h1 align="center">BUS SISTEM</h1>
<hr>
</body>
<body bgcolor ="aqua">
<body>
<p align="left">
Penjelasan Mengenai Bus Sistem
<p align="justify">
Inti sebuah motherboard (chipset) adalah beberapa bus yang menghantarkan sinyal antar masing-masing komponen. Bus dapat disebut sebagai lintasan umum atau bersama yang digunakan untuk transfer data. Untuk komunikasi data, jalur ini dapat juga untuk komunikasi dua buah komputer atau lebih.
<br />
<p align="justify">
Prosesor, memori utama, dan perangkat I/O dapat diinterkoneksikan dengan menggunakan bus bersama yang fungsi utamanya adalah menyediakan jalur komunikasi untuk transfer data. Bus tersebut menyediakan jalur yang diperlukan untuk mendukung interrupt dan arbitrasi. Protokol bus adalah set aturan yang mengatur kelakuan berbagai perangkat yang terhubung ke bus yaitu kapan harus meletakkan informasi ke dalam bus, menyatakan sinyal control, dan lain sebagainya.
<br />
<img src ="images.jpeg">
<p align="justify">Sinyal kontrol bus juga membawa informasi timing. Sinyal tersebut menetapkan waktu kapan prosesor dan perangkat I/O dapat meletakkan bus atau menerima data dari bus. Skema yang telah ditemukan untuk transfer data melalui bus dapat diklasifikasikan sebagai skema synchronous dan asynchronous.
<br />
<p align="justify">
Dalam setiap operasi transfer data, suatu perangkat memainkan peranan sebagai master, ini adalah perangkat yang menganisiasi transfer data dengan mengeluarkan perintah baca atau tulis.
<br />
<p align="justify">
Bus tersebut mayoritas terdapat dalam komputer komersial. Misal bus pada family prosesor 68000 memiliki dua mode operasi yaitu satu asynchronous dan satu synchronous. Keuntungan bus asynchronous adalah proses handshake menghilangkan kebutuhan sinkronisasi clock sender dan reciever sehingga menyederhanakan desain timing. Kecepatan transfer data pada bus asynchronous yang dikontrol oleh full handshake dibatasi oleh fakta bahwa tiap transfer melibatkan dua jeda round trip.
<br />
<p align="justify">
Bus disusun secara hierarkis, karena setiap bus yang memiliki kecepatan rendah akan dihubungkan dengan bus yang memiliki kecepatan tinggi. Setiap perangkat didalam sistem juga dihubungkan kesalah satu bus yang ada.
<br />
<p align="justify">
Berikut ini beberapa bus dalam komputer :
<br />
a. Bus Prosesor
<br />
b. Bus Arbitrasi
<hr>
<hr width ="500">
<body bgcolor ="aqua">
</body>
</html>

Dan berikut adalah printscreen studi kasus pada sintaks diatas :