Kamis, 12 Juli 2012

Website pada umumnya:
  1. Terlebih dahulu mendesain halaman-halaman website dengan menggunakan bahasa pemrograman web seperti HTML, PHP, ASP, XML, dll. Biasanya menggunakan bantuan software seperti dreamweaver atau frontpage.
  2. Halaman-halaman tersebut selanjutnya kita simpan dalam sebuah webserver (hosting) termasuk file-file atau dokumen-dokumen yang digunakan sebagai sumber membangun halaman-halaman tersebut, misalnya gambar. Selanjutnya kita juga perlu mendapatkan sebuah alamat website (domain).
  3. Untuk mengelolanya, biasanya kita atau dalam hal ini disebut webdeveloper, harus berhubungan langsung dengan halaman-halaman yang sudah kita simpan tadi. Maksudnya seperti ini, misalkan kita ingin menambah kalimat pada halaman yang sudah kita simpan, maka kita perlu masuk ke dalam hosting kita kemudian melakukan perubahan pada halaman tersebut.
  4. Kita dapat mendesain dari awal halaman yang kita inginkan secara keseluruhan dan dapat merubahnya secara keseluruhan juga.
  5. Sekarang ini website sudah banyak berbasis database sehingga memungkinkan pengelolaannya semakin mudah, misalnya sudah memakai halaman administrator. Selain itu, penggunaan database membuat website semakin canggih, misalnya bisa digunakan untuk jual beli di internet, dll. Sumber database itu sendiri adalah milik kita sebagai webdeveloper.
  6. Website yang yang kita bangun sendiri bisa merupakan website yang independen, artinya tidak mempunyai keterikatan dengan website lain.

Minggu, 13 Maret 2011

MODUL6 - TUGAS RUMAH 2

MASIH PROSES

MODUL6 - TUGAS RUMAH 1

MASIH PROSES

MODUL 6 - STUDI KASUS (GENERATE TABLE)

Pada studi kasus ini membuat tabel dengan  fungsi sederhana untuk men-generate matriks sel pada tabel.
misalkan diberikan argumen 5 (baris) dan 5 (kolom), maka program akan menampilkan tabel dengan 5 baris dan 5 kolom.


SOURCECODE :

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

<head>
<title>Generate Table</title>
</head>

<body bgcolor="white">

<center>
<h1>FUNCTION GENERATE TABLE</h1>
<h3>membuat table dengan inputan argumen</h3>
<hr />
<br>
<br>

<?php
function Create_table($baris, $kolom)
{

echo("<table border=\"1\">\n");

for($b = 0; $b < $baris; $b++) {
echo("<tr height=\"30px\">\n");

for($k = 0; $k < $kolom; $k++) {
echo("<td width=\"100px\"></td>\n");
}

echo("</tr>\n");
}
echo("</table>\n");

echo("<h3>Tabel : $baris baris dan $kolom kolom</h3>");
}
Create_table(5,5);
?>

</center>
</body>
</html>


begitu pula denga membuat 7 baris dan 5 kolom
maka cukup dengan mengubah Create_table(7,5);

MODUL 6 - STUDI KASUS (FUNGSI GREETING)



SOURCE CODE :

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

<head>
<title>Greeting</title>

</head>

<body bgcolor="green">
<center>
<h1>ADA YANG BILANG JELEK KU GAK PEDULI</h1>
<hr />
<img src="images/banyuwangi.png">

<?php
$d=date("G");
if ($d > "0" && $d < "6") {
echo "<<h1>Selamat Subuh</h1>". date("G");
echo "<h2>Selamat Datang di SIMPLE LAREOSING</h2>";
echo "<h3>Sekarang adalah hari ". date("l"). " tanggal ". date("d m Y");
echo "<br>Waktu menunjukkan pukul ". date("H:i"). " WIB";
}

elseif ($d > "6" && $d < "12") {
echo "<h1>Selamat pagi</h1>";
echo "<h2>Selamat Datang di SIMPLE LAREOSING</h2>";
echo "<h3>Sekarang adalah hari ". date("l"). " tanggal ". date("d m Y");
echo "<br>Waktu menunjukkan pukul ". date("H:i"). " WIB";
}


elseif ($d > "12" && $d < "18"){
echo "<h1>Selamat Siang</h1>";
echo "<h2>Selamat Datang di SIMPLE LAREOSING</h2>";
echo "<h3>Sekarang adalah hari ". date("l"). " tanggal ". date("d m Y");
echo "<br>Waktu menunjukkan pukul ". date("H:i"). " WIB";
}

else {
echo "<h1>Selamat Malam</h1>";
echo "<h2>Selamat Datang di SIMPLE LAREOSING</h2>";
echo "<h3>Sekarang adalah hari ". date("l"). " tanggal ". date("d m Y");
echo "<br>Waktu menunjukkan pukul ". date("H:i"). " WIB";
}

?>

</center>
</body>
</html>

Sabtu, 05 Maret 2011

MODUL 5 - TUGAS PRAKTIKUM

Program Kasir Warung

tampilan awal


setelah di klik batal


warung.css

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

header,section,footer{
display:block;
border:1px solid blue;
}

header{
height:60px;
background : #4380d4;
}


section{
padding: 10px;
height:400px;
}


footer{
clear:both;
height:20px;
background : #4380d4;
}


warung.js

function JumlahTotal(){

var myForm=document.form1;
var total1;
var total2;
var total3;
var total4;
var total5;

total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);

myForm.JumTotal.value=total1+total2+total3+total4+total5;
}

function potongan(){
var myForm=document.form1;

if (myForm.JumTotal.value < 50000){
myForm.Diskon.value = 0;
}
else{
myForm.Diskon.value = 10000;
}
}

function JumlahBayar(){
var myForm=document.form1;

myForm.JumBayar.value = myForm.JumTotal.value - myForm.Diskon.value ;
}

function proses(){
JumlahTotal();
potongan();
JumlahBayar();
reset();
}

function reset(){
var elemen = document.pemesanan;

elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}


warung.html

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

<head>
<title>Warung Rung</title>
<script language="JavaScript" type="text/javascript" src="warung.js"></script>
<link rel="stylesheet" href="warung.css" type="text/css" />
</head>

<body>

<header>
<h1 align="center">WARUNG RUNG</h1>
</header>

<section>
<form name="form1" action="#">
<table border=1 cellpadding=3>
<tr>
<th>No.</th>
<th width = 200px >Makanan / Minuman </th>
<th width = 200px >Harga</th>
<th>Pesan</th>
</tr>

<tr>
<td>1</td>
<td>Bakso Istimewa </td>
<td>@<input type="text" name="harga1" value="12000" readonly /></td>
<td><input type="text" name="pesan1" value="0" onChange ="proses()"/></td>
</tr>

<tr>
<td>2</td>
<td>Soto Spesial </td>
<td>@<input type="text" name="harga2" value="10000" readonly /></td>
<td><input type="text" name="pesan2" value="0" onChange ="proses()" /></td>
</tr>

<tr>
<td>3</td>
<td>Mie Ayam Super </td>
<td>@<input type="text" name="harga3" value="15000" readonly /></td>
<td><input type="text" name="pesan3" value="0" onChange ="proses()" /></td>
</tr>

<tr>
<td>4</td>
<td>Es Degan </td>
<td>@<input type="text" name="harga4" value="5000" readonly /></td>
<td><input type="text" name="pesan4" value="0" onChange ="proses()" /></td>
</tr>

<tr>
<td>5</td>
<td>Es Campur </td>
<td>@<input type="text" name="harga5" value="7000" readonly /></td>
<td><input type="text" name="pesan5" value="0" onChange ="proses()" /></td>
</tr>

<tr>
<td colspan=3>Jumlah</td>
<td><input type="text" name="JumTotal" readonly /></td>
<tr>

<tr>
<td colspan=3>Diskon</td>
<td><input type="text" name="Diskon" readonly /></td>
<tr>

<tr>
<td colspan=3>Jumlah Dibayar</td>
<td><input type="text" name="JumBayar" readonly /></td>
<tr>

</table>

<br>
<!--<input type="button" value="Proses" onclick="proses()" />-->
<input type="button" name="batal" value="Batal" onclick="reset()"/>

</form>
</section>

<footer>
<center> &copy; alifable </center>
</footer>

</body>
</html>

MODUL 5 - STUDI KASUS

Membuat Calculator Sederhana



cal.js

function proses(){
var myForm=document.form1;

if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else {
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}


cal.html

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

<head>
<title>Simple Calculator</title>
<script language="JavaScript" type="text/javascript" src="cal.js"></script>
</head>

<body bgcolor="#4380d4">

<center>
<h1> SIMPLE CALCULATOR</h1>
<form name=form1 action="#">
<table border="1">
<tr>
<td>Bilangan1 <input type="text" name="bil1"/></td>
</tr>
<tr>
<td align="center"><select name="operasi" >
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>

<td>Bilangan2 <input type="text" name="bil2" /></td>

</tr>

<tr>
<td align="center"><input type="button" value="=" onclick="proses()" /></td>
</tr>
<tr>
<td>Hasil &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="hasil" /></td>
</tr>

</table>
</form>
<br>
&copy; alifable
</center>

</body>
</html>

Sabtu, 26 Februari 2011

MODUL 4 - STUDI KASUS


Source Code :

a. CSS
body {
margin: 10px auto;
width: 750px;
}

header,nav,section,footer{
display:block;
border:1px solid blue;
}

header{
height:80px;
}

nav{
padding : 5px;
height:30px;
}

section{
height:500px;
}

article,aside{
display:block;
border:1px dashed blue;
}

article{
float:left;
margin-top:20px;
margin-right: 20x;
margin-left: 20px;
width: 400px;
height:450px;

}

aside{
float:left;
margin-top:20px;
margin-right:20x;
margin-left:40px;
width: 250px;
height:450px;
border:1 px solid black;
}

footer{
clear:both;
height:20px;
}

button{
margin-left:10px;
outline-width: 0;
border: 1px solid #000;
border-radius: 50px;
-moz-border-radius: 50px;
background-color : blue;
color : black;
}

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

<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>

<body>

<header>
header
</header>

<nav>
<button style="font: bold 14px verdana">Home</button>
<button style="font: bold 14px verdana">Profil</button>
<button style="font: bold 14px verdana">Info</button>
<button style="font: bold 14px verdana">Image</button>
</nav>

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

<footer>
footer
</footer>

</body>
</html>

MODUL 4 - TUGAS PRAKTIKUM


Source code :
a. CSS-nya

body {
margin: 10px auto;
width: 750px;
background-color : black;
}

header,nav,footer{
display:block;
border:1px solid black;
}

logo{
margin-top : 75px;
margin-left : 10px;
margin-right :10px;
float : left;
height : 100px;
}

tulisan{

margin-left : 70px;
margin-top : 130px;
float : left;
height : 100px;
}

header{
background-image: url(images/sma.jpg);
height:300px;
}

nav{
padding : 8px;
height:20px;
background-image: url(images/awan.jpg);
}

section,article,aside{
display:block;
border:1px solid black;;
}

section{
float:left;
height:480px;
width : 295px;
padding :5px;
background-color : blue;
}

article{
-moz-border-radius : 5px;
padding :2px;
float:right;
width: 435px;
height:345px;
background-color : blue;

}

aside{
padding: 2px;
float:right;
width: 430px;
height:130px;
background-color:#80aa5b;
-moz-border-radius : 5px;
-webkit-border-radius: 5px;
border : 3px solid green;
}

footer{
clear:both;
height:20px;
background-image: url(images/awan.jpg);
}

button{
float: right;
margin-left:5px;
outline-width: 0;
border: 1px solid #000;
border-radius: 30px;
-moz-border-radius: 30px;
background-color : green;
color : black;
}


b. HTML-nya
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>SMAN 1 Rogojampi</title>
<link rel="stylesheet" href="tugas4.css" type="text/css"/>
<link rel="icon" type="image/icon" href="image/icon.jpg">
</head>

<body>

<header>
<logo>
<img src="images/logo.png">
</logo>
<tulisan>
<img src="images/rogojampi.png">
</tulisan>
</header>

<nav>

<input type="submit" name="sa" value="Search" />
<input type="text" name="q" size="22" />



<script type="text/javascript" src="/cse/brand?form=cse-search-box&lang=en"></script>
<button style="font: bold 14px verdana">Prestasi</button>
<button style="font: bold 14px verdana">Guru</button>
<button style="font: bold 14px verdana">Profil</button>
<button style="font: bold 14px verdana">Home</button>
</nav>

<section>
<img src="images/2.jpg">
<img src="images/3.jpg">
</section>
<article>
<h3 align="center"> Awan dan Firma Pa-Pi SmanRog 2010</h2>
<p>
Dwi Setiawan dari kelas XI IPA dan Firma Yudha (XI IPA ) terpilih sebagai Putra dan Putri Smanrog 2010, Sabtu (11/4). Keduanya berhasil menyisihkan 63 peserta, setelah melewati berbagai tes, seperti tes akademik (tertulis IPA/IPS), wawancara, tes kpribadian, tes pengetahuan umum, bakat dan seni, serta olahraga.<p>
<p>
Siswahyudi S.Pd, salah satu juri untuk lomba Putra-Putri Smanrog 2010 menjelaskan, tujuan pemilihan Putra-Putri Smanrog 2010 adalah untuk menyalurkan kreativitas siswa melalui kegiatan positif. �Dalam hal ini, siswa dituntut memiliki tanggung jawab menjadi duta atau perwakilan dalam event-event di luar sekolah,� ujar Siswanto. Ditambahkannya, kegiatan tersebut merupakan agenda tahunan dari OSIS SMAN 1 Rogojampi.</p>
</article>
<aside>
<h3>Berita terkini :</h3>
<a href="terima-kasih-bapak.html">Guru kita yang telah pensiun</a><br>
<a href="terima-kasih-bapak.html">SMAN 1 Rogojampi berkreasi</a><br>
<a href="terima-kasih-bapak.html">Hotspot Baru SMAN 1 Rogojampi</a>
</aside>


<footer>
<font align="center">&copy alif akbar fitrawan</font>
</footer>

</body>
</html>

Minggu, 20 Februari 2011

MODUL 3 - STUDI KASUS


Script :

<!DOCTYPE html>
<html lang="en">
<title>Demo Rounded Borded</title>
<style type="text/css">
<!--
.lingkaran{
background-color:#ddccb5;
-moz-border-radius: 180px;
-webkit-border-radius: 2px;
border : 2px solid #897048;
padding : 30px;
width : 120px;
height : 120px;
}
-->

<!--
.kotak{
background-color:#ddccb5;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius: 10px;
border : 4px solid #897048;
padding : 10px;
width : 250px;
height : 50px;
}
-->

<!--
.shadow{
background-color:#ddccb5;
-moz-border-radius-topleft: 0px;
-moz-box-shadow: 10px 10px 5px;
-webkit-border-radius: 10px;
border : 1px solid #897048;
padding : 10px;
width : 250px;
height : 50px;
}
-->
</style>
</head>

<body>
<div class="lingkaran" align="center">
Yang ini border
lingkaran
Pendekata yang digunakan masih
sma lho. Ayo,
kreasikan sendiri ya??
</div>
<br />

<div class="kotak">
Bisa juga bikin kreasi border seperti ini.
Mmmmmm......
</div>

<br />

<div class="shadow">
Bisa juga bikin kreasi border seperti ini.
Mmmmmm......
</div>

</body>

</html>

MODUL 3 - TUGAS PRAKTIKUM



script :


<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to face-mu</title>
<link type="icon" rel="icon" href="icon.png">

<style type="text/css">
.header{
height : 75px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
background-color:black;
}
#tengah{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 400px;
height: 200px;
font-family : Comic Sans MS;
font-size : small;
font-weight : bold;
color: black;
}
.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Comic Sans MS;
font-size : small;
background-color:black;
}
#button_masuk , #button_daftar{
background-color : black;
color : white;
}
#lebar{
width : 1000px;
}
.background{
height : 480px;
background-image : url(bg.bmp);
background-color : white;
background-repeat : repeat-x;
}
.login{
float : right;
color : white;
font-family : Comic Sans MS;
font-size : small;
}
#kiri {
padding: 5px;
float: left;
width: 780px;
height: 480px;
}
#kanan{
float: left;
padding: 5px;
width:500px;
height: 480px;
}
#font{
font-family : Comic Sans MS;
font-size : small;
font-weight : bold;
line-height : 30px;
color: black;
}
#logo{
float : left;
margin-top : 20px;
height : 35px;
}

</style>
</head>

<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="facemu.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td></td>
</tr>

<tr>
<td ><input type="text"></td>
<td ><input type="password"></td>
<td ><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>

<tr>
<td ><input type="checkbox" checked>Ingat password</td>
<td >Lupa password ?</td>
</tr>
</table>
</div>
</div>
</div>

<div class="background">
<form action="my_action.jsp">
<div id="kiri">
<div id="tengah">
<font size="4">PERAWATAN DAN PERBAIKAN WAJAH<br></font>
<hr style="color:black" width="450">
<img src="wajah.png">
<hr style="color:black" width="450">
<font size="3">Wajah Anda Bermasalah ? <br>
Segera daftarkan wajah anda</font>
</div>
</div>

</form>
<div id="kanan">
<div id="font">
<h2>Silahkan Registrasi wajah anda </h2>

<form action="my_action.jsp">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Ulangi Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option >Laki-laki
<option >Perempuan
<option >Maho
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Daftarkan wajah" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
&copy;face-mu 2011
</div>
</body>
</html>

Minggu, 13 Februari 2011

Modul 2 - Tugas Praktikum

1. Membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel


Source code :

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Grafik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<tr>
<td align="right">100</td>
<td rowspan=11 bgcolor=black></td>
<td width="15" height="20" colspan=25>
</tr>

<tr>
<td align="right">90</td>
<td width="15" height="20" colspan=26></td>
</tr>

<tr>
<td align="right">80</td>
<td width="15" height="20" colspan=25></td>
</tr>

<tr>
<td align="right">70</td>
<td width ="15" rowspan=7></td>
<td width ="15" height="40" rowspan=2></td>
<td width ="15" height="140" bgcolor=yellow rowspan=7></td>
<td width ="15" height="20" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=7></td>
<td width ="15" rowspan=7></td>

<td width ="15" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=4></td>
<td width ="15" rowspan=7></td>

<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=4></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=7></td>

<td rowspan=5></td>
<td rowspan=6></td>
<td rowspan=6></td>
<td rowspan=4></td>
<td rowspan=3></td>

<td width ="15" rowspan=7></td>
</tr>

<tr >
<td align="right">60</td>
<td width ="15" bgcolor=green rowspan=6></td>
<td width ="15" height="120" bgcolor=red rowspan=6></td>
</tr>

<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
</tr>

<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=blue rowspan=4></td>
<td width ="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=green rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>

<tr >
<td align="right">30</td>
<td width ="15" height="60" bgcolor=purple rowspan=3></td>
<td width ="15" bgcolor=blue rowspan=3></td>
<td width ="15" bgcolor=blue rowspan=3></td>
</tr>

<tr >
<td align="right">20</td>
<td width ="15" height="40" bgcolor=green rowspan=2></td>
<td width ="15" bgcolor=blue rowspan=2></td>
<td width="15" bgcolor=purple rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
</tr>

<tr >
<td align="right">10</td>
<td width="15" height="20" bgcolor=yellow rowspan=1></td>
<td width="15" bgcolor=green rowspan=1></td>
</tr>

<tr>
<td></td>
<td colspan=25 bgcolor=black></td>
</tr>

<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>Herlambang</b></td>
<td></td>
<td colspan=5 align="center"><b>Nidhom</b></td>
<td></td>
<td colspan=5 align="center"><b>Bian</b></td>
<td></td>
<td colspan=5 align="center"><b>Sonny</b></td>
<td></td>
</table>

<br>
<br>

<table border=0 align="center" cellspacing=0 cellpadding=0>
<tr>
<td><b>Keterangan</b></td>
</tr>

<tr>
<td bgcolor=red width="40"></td>
<td>: Kemampuan membaca</td>
</tr>

<tr>
<td bgcolor=yellow width="40"></td>
<td>: Kemampuan menulis</td>
</tr>

<tr>
<td bgcolor=green width="40"></td>
<td>: Kemampuan mendengar</td>
</tr>

<tr>
<td bgcolor=blue width="40"></td>
<td>: Kemampuan berbicara</td>
</tr>

<tr>
<td bgcolor=purple width="40"></td>
<td>: Kemampuan menggambar</td>
</tr>

</table>
</body>
</html>


2. Desain tabel perbandingan sikap dengan memanfaatkan fitur pengelompokan




Source codenya :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Perbandingan Sikap</title>
</head>
<body>
<h2 align="center">PERBANDINGAN SIKAP</h2>
<table border=1 align="center" cellspacing=0 cellpadding=3>
<tr>
<td width="30">No.</td>
<td width="120">Spesifikasi Sikap</td>
<td width="30">Poin</td>
<td width="100" align="center">Herlambang</td>
<td width="100" align="center">Nidhom</td>
<td width="100" align="center">Bian</td>
<td width="100" align="center">Sonny</td>
</tr>

<tr>
<td rowspan=5>
1<br>
2<br>
3<br>
4<br>
5<br>
</td>
<td rowspan=5>
Kerja keras<br>
Tekun<br>
Tidak Sombong<br>
Sabar<br>
Pemaaf<br>
</td>
<td rowspan=5>
8<br>
9<br>
6<br>
7<br>
10<br>
</td>
<td align="center" rowspan=5>
X<br>
X<br>
X<br>
X<br>
X<br>
</td>
<td align="center" rowspan=5>
X<br>
X<br>
-<br>
-<br>
-<br>
</td>
<td align="center" rowspan=5>
-<br>
X<br>
-<br>
-<br>
-<br>
</td>
<td align="center" rowspan=5>
-<br>
-<br>
-<br>
-<br>
-<br>
</td>
</tr>
</table>

<table border=1 align="center" cellspacing=0 cellpadding=3>
<tr>
<td width="30" rowspan=1>
6<br>
7<br>
8<br>
9<br>
10<br>
</td>
<td width="120" rowspan=1>
Pemalas<br>
Ceroboh<br>
Tinggi hati<br>
Pendendam<br>
Kurang vitamin<br>
</td>

<td width="30" rowspan=1>
-5<br>
-3<br>
-7<br>
-10<br>
-11<br>
</td>

<td width="100" align="center" rowspan=1>
-<br>
-<br>
-<br>
-<br>
-<br>
</td>

<td width="100" align="center" rowspan=1>
-<br>
-<br>
X<br>
X<br>
X<br>
</td>

<td width="100" align="center" rowspan=1>
X<br>
X<br>
-<br>
X<br>
-<br>
</td>

<td width="100" align="center" rowspan=1>
X<br>
X<br>
X<br>
X<br>
X<br>
</td>
</tr>

<tr>
<td colspan=3 align="center">Jumlah poin</td>
<td align="center">40</td>
<td align="center">-11</td>
<td align="center">1</td>
<td align="center">-36</td>
</tr>
</table>

<i>Source : Forbes Magazine, February, 2011</i>
<br>
&copy;ADH
</body>
</html>

MODUL 2 - Studi Kasus

Dengan memanfaatkan elemen tabel dan hyperlink, membuat halaman website terdiri dari 3 buah tab menu. bila diklik pada salah satu menu maka akan menunjukkan isi yang berbeda. Tiap halaman berisi link untuk mendownload data data yang telah disediakan.
berikut ini tampilannya.

Film


Document


Music




Source codenya

1. Film

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Free Download Manager</title>
<link rel="icon" href="image/icon.jpg">
</head>
<body >
<h1 align="center">INDONESIA FREE DOWNLOAD MANAGER</h1>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<tr>
<td width="15" bgcolor=#2456c5 rowspan=7></td>
<td></td>
<th width="150" bgcolor=#5674b9><a href ="studikasus1.html">Film</a></th>
<td></td>
<th width="150" bgcolor=#2456c5><a href ="studikasus2.html">Document</a></th>
<td></td>
<th width="150" bgcolor=#2456c5><a href="studikasus3.html">Musik</a></th>
<td></td>
<td width="15" bgcolor=#2456c5 rowspan=7></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="Charice - Pyramid.flv" target="_blank" title ="Charice - Pyramid">
1. Charice - Pyramid</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="How to Flare Tutorial by Bboy Kiki.flv" target="_blank" title ="How to Flare Tutorial">
2. How to Flare Tutorial</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="How To Hip Hop Dance.flv" target="_blank" title="How to Hip Hop Dance">
3. How to Hip Hop Dance</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="How to Tune a Guitar.flv" target="_blank" title ="How to Tune a Guitar">
4. How to Tune a Guitar</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="SM-SH - I HEART YOU - Corner Parodies Ver..flv" target="_blank" title ="Corner Parodies - I HEART YOU">
5. Corner Parodies - I HEART YOU </a></td>
</tr>
<tr bgcolor=#2456c5>
<td colspan=9 align="center">alif_lareosing&trade;</td>
</tr>
</table>
</body>
</html>

2. Document

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Free Download Manager</title>
<link rel="icon" href="image/icon.jpg">
</head>
<body>
<h1 align="center">INDONESIA FREE DOWNLOAD MANAGER</h1>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<tr>
<td width="15" bgcolor=#2456c5 rowspan=7></td>
<td></td>
<th width="150" bgcolor=#2456c5><a href ="studikasus1.html">Film</a></th>
<td></td>
<th width="150" bgcolor=#5674b9><a href ="studikasus2.html">Document</a></th>
<td></td>
<th width="150" bgcolor=#2456c5><a href="studikasus3.html">Musik</a></th>
<td></td>
<td width="15" bgcolor=#2456c5 rowspan=7></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="proposal.doc" target="_blank" title ="Proposal">
1. Proposal</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="LAPORAN PRAKTIKUM VISUAL 1.docx" target="_blank" title ="Laporan Praktikum Visual 1">
2. Laporan Praktikum Visual 1</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="LAPORAN PRAKTIKUM VISUAL 2.docx" target="_blank" title ="Laporan Praktikum Visual 2">
3. Laporan Praktikum Visual 2</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="sistem operasi.docx" target="_blank" title ="Sistem Operasi">
4. Sistem operasi</a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="SUSUNAN ACARA.docx" target="_blank" title ="Susunan Acara">
5. Susunan Acara</a></td>
</tr>
<tr bgcolor=#2456c5>
<td colspan=9 align="center">alif_lareosing&trade;</td>
</tr>
</table>
</body>
</html>

3. Musik

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Free Download Manager</title>
<link rel="icon" href="image/icon.jpg">
</head>
<body>
<h1 align="center">INDONESIA FREE DOWNLOAD MANAGER</h1>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<tr>
<td width="15" bgcolor=#2456c5 rowspan=7></td>
<td></td>
<th width="150" bgcolor=#2456c5><a href ="studikasus1.html">Film</a></th>
<td></td>
<th width="150" bgcolor=#2456c5><a href ="studikasus2.html">Document</a></th>
<td></td>
<th width="150" bgcolor=#5674b9><a href="studikasus3.html">Musik</a></th>
<td></td>
<td width="15" bgcolor=#2456c5 rowspan=7></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="Wali - Aku Bukan Bang Toyib.mp3" target="_blank" title ="She - Bukan Untuk Sembarang Hati">
1. Wali - Aku Bukan Bang Toyib </a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="She - Bukan Untuk Sembarang Hati.mp3" target="_blank" title ="She - Bukan Untuk Sembarang Hati">
2. She - Bukan Untuk Sembarang Hati </a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="SMASH - I Heart You.mp3" target="_blank" title ="SMASH - I Heart You">
3. SM*SH - I Heart You </a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="REPVBLIK - Sudah Cukup.mp3" target="_blank" title ="REPVBLIK - Sudah Cukup">
4. REPVBLIK - Sudah Cukup </a></td>
</tr>
<tr bgcolor=#5674b9>
<td colspan=7><a href="Repvblik - Telah Aku Berikan.mp3" target="_blank" title ="REPVBLIC - Telah Aku Berikan">
5. REPVBLIK - Telah Aku Berikan </a></td>
</tr>
<tr bgcolor=#2456c5>
<td colspan=9 align="center">alif_lareosing&trade;</td>
</table>
</body>
</html>

Modul 1 - Studi Kasus

Nama : ALIF AKBAR FITRAWAN
NIM : 109533423227


Membuat halaman web sederhana yang melibatkan elemen teks, garis, warna dan gambar. Dimana terdapat minimal sebuah heading dan garis berwarna, bambar dengan menggunakan sorce berupa relative path, favicon dan halaman utama dengan latar belakang gambar sembarang.

Hasil printscreen






















Source Code :

Minggu, 05 September 2010

PERKEMBANGAN TEKNOLOGI INFORMASI


Sejarah Teknologi Informasi

1.   Natural / Manual
      Dalam masa awal ini teknologi informasi menggunakan tangan manusia.
-  Zaman Purba, contohnya adalah Goresan/gambar pada batu dan goa.
-  Cina/Mesir/Romawi, pada masa ini medianya berupa lempung dan kertas, serta alatnya berupa abacus/suan pan dan jari tangan.
-  Abad 17-18, pada abad ini telah ditemukan napier’s bones dan slide rule

2.   Mekanis
      Pada masa ini peralatan berbentuk mekanikk yang digerakkan oleh tenaga manusia.
-     Pascaline, oleh Blaise Pascal, pada tahun 1642.
-     Deffence & analytical engine oleh Charles Babbage, tahun 1830, ini merupakan penemuan bersejarah yang mendorong ditemukannya komputer, oleh karna itu charles babbage dijuluki bapak komputer.
-     Kartu perforasi oleh Hollerith tahun 1889, kartu ini mempercepat perhitungan sensus di USA, sebelumnya perhitungan sensus membutuhkan waktu 6 tahun, dan setelah ditemukannya karto perforasi hanya membutuhkan waktu 3 minggu saja.

3.   Elektronis
      Pada masa ini peralatan yang bekerja sudah secara elektronik, pada masa ini perkembangan komputer dibagi menjadi 4 generasi, yaitu :
      a.   Komputer Generasi 1
             Pada komputer generasi pertama ini menggunakan tabung hampa (vacuum tube), tabung gelas dengan sirkuit di dalamnya. Tabung hampa ini merupakan cikal bakal prosessor pada saat itu. Accumulator yang terdiri dari 28 vacuum tubes, untuk menentukan berapa perhitungannya.
             Karakteristik komputer generasi 1 :
             -  Berukuran fisik sangat besar
             - Menggunakan konsep, stored-program dengan memori utamanya adalah magnetic core storeage.
             - Cepat panas, sehingga memerlukan pendingin.
             - Prosesnya kurang cepat.
             - Membutuhkan daya listrik yang besar
             Contohnya adalah ENIAC (Electronic Numerical Integrator and Computer)
             Terdiri dari    :  17.468 vacuum tube
                                            7.200 diode
                                            70.000 resistor
                                            10.000 capasitor
             Dengan luas 63 m2, berat 27 ton dan membutuhkan power 150 Kw, Instruksi 300 perkalian/menit dan 5000 penjumlahan (10 digit)/menit.
             Hal ini menunjukkan bahwa ENIAC tidak memuaskan dan lambat.
      b.   Komputer Generasi 2
             Komputer generasi 2 sudah menggunakan transistor yang ukurannya tidak lagi besar untuk menggantikan tabung hampa.
             Karakteristik :
             -  Transistor mulai digunakan di komputer pada tahun 1956.
             -  Mengganti bahasa mesin(bahasa rakitan) dengan bahasa assembly.
             -  Kapasitas memori utama sudah cukup besar sampai puluhan ribu karakter.
             - Beberapa bahasa pemrograman tingkat tinggi mulai bermunculan, seperti Common Business-Oriented Language (COBOL), Formula Translator (FORTRAN), Algorithmic Language (ALGOL).
             Contohnya adalah UNIVAC (UNIVersal Automatic Computer), yang telah dirilis luas, dan ukurannya cukup ramping.
      c.   Komputer Generasi 3
             Pada masa ini, transitor dianggap cepat panas dan cukup besar. Oleh karena itu pada tahun 1958 Jack Kilby, seorang insinyur di Texas Instruments mengembangkan sirkuit terintegrasi (IC, integrated circuit) yang ukurannya lebih kecil. IC mengombinasikan tiga komponen elektronik dalam sebuah piringan silikon kecil. Oleh karena itu para ilmuan kemudian berhasil memasukkan lebih banyak komponen ke dalam suatu chip tunggal yang disebut semikonduktor.
             IC terbuat dari material pasir kuarsa, didalam IC terdapat transistor, resistor dan kapasitor yang diintegrasikan ke dalam chip tunggal.
             Pada tahun 1971 muncullah mikroprosesor pertama, contohnya adalah intel 4004 Microprosessor yang dikeluarkan oleh Microsoft.
      d.   Komputer Generasi 4
             Pada masa ini tujuan pengembangan menjadi lebih jelas yaitu mengecilkan ukuran sirkuit dan komponen-komponen elektrik. Dengan ditemukannya Large Scale Integration (LSI) yang dapat memuat ratusan komponen dalam sebuah chip sehingga kemampuannya diperluas dan dengan fisik chip yang mengecil.
      e.   Komputer Generasi 5
             Pada tahun 1980-an, dikembangankan Very Large Scale Integration (VLSI), memuat ribuan komponen dalam sebuah chip tunggal, sehingga semakin banyak komponen yang dimasukkan.
      f.    Komputer Generasi 6
             Pada generasi ini semakin canggih perkembangannya, dengan adanya Ultra Large Scale Integration (ULSI), meningkatkan jumlah komponen yang ada didalamnya menjadi jutaan.

Dari perkembangan keenam generasi diatas dapat diambil kesimpulan dari generasi 1 ke generasi 6 bahwa ukurannya dari besar menjadi kecil, harganya dari mahal menjadi murah, kecepatannya (speed) dari lambat menjadi cepat, dan memorinya dari kecil menjadi besar.
     
Klasifikasi Komputer
Komputer diklasifikasikan menjadi 5 yaitu :
1.   Supercomputer
      Komputer dengan kapasitas mesin yang sangat tinggi, serta kemampuan maksimal yang terdiri dari ratusan ribu prosessor dengan kecepatan perhitungannya 1 triliun kalkulasi/detik. Yang digunakan untuk proses komputasi yang maksimal, contohnya : ramalan cuaca, simulasi nuklir, pemerintahan dll.
2.   Mainframe
      Komputer ini ukurannya bisa dikondisikan dari kecil, sedang dan besar, yang tergantung permintaan yang kemampuannya sangat tinggi, dibawah supercomputer. Contohnya adalah server.
3.   Workstations
      Komputer ini mahal, yang bentuknya seperti komputer rumah pada umumnya tetapi digunakan untuk perhitungan matematika, ilmiah, mesin dan juga desain yang menuntut kemampuan maksimal daripada komputer rumah biasa.
4.   Microcomputers
      Microcomputers ini seperti komputer yang kita gunakan sehari hari, seperti komputer rumahan (PC), notebook, PDA dll.
5.   Microcontroller
      Merupakan komputer yang tertanam yang bentuknya sangat kecil yang didesain khusus untuk pekerjaan terbatas tidak seperti prosessor. contohnya adalah robot, AC, kulkas dll.

Sejarah Teknologi Informasi

1.   Natural / Manual
      Dalam masa awal ini teknologi informasi menggunakan tangan manusia.
-  Zaman Purba, contohnya adalah Goresan/gambar pada batu dan goa.
-  Cina/Mesir/Romawi, pada masa ini medianya berupa lempung dan kertas, serta alatnya berupa abacus/suan pan dan jari tangan.
-  Abad 17-18, pada abad ini telah ditemukan napier’s bones dan slide rule

2.   Mekanis
      Pada masa ini peralatan berbentuk mekanikk yang digerakkan oleh tenaga manusia.
-     Pascaline, oleh Blaise Pascal, pada tahun 1642.
-     Deffence & analytical engine oleh Charles Babbage, tahun 1830, ini merupakan penemuan bersejarah yang mendorong ditemukannya komputer, oleh karna itu charles babbage dijuluki bapak komputer.
-     Kartu perforasi oleh Hollerith tahun 1889, kartu ini mempercepat perhitungan sensus di USA, sebelumnya perhitungan sensus membutuhkan waktu 6 tahun, dan setelah ditemukannya karto perforasi hanya membutuhkan waktu 3 minggu saja.

3.   Elektronis
      Pada masa ini peralatan yang bekerja sudah secara elektronik, pada masa ini perkembangan komputer dibagi menjadi 4 generasi, yaitu :
      a.   Komputer Generasi 1
             Pada komputer generasi pertama ini menggunakan tabung hampa (vacuum tube), tabung gelas dengan sirkuit di dalamnya. Tabung hampa ini merupakan cikal bakal prosessor pada saat itu. Accumulator yang terdiri dari 28 vacuum tubes, untuk menentukan berapa perhitungannya.
             Karakteristik komputer generasi 1 :
             -  Berukuran fisik sangat besar
             - Menggunakan konsep, stored-program dengan memori utamanya adalah magnetic core storeage.
             - Cepat panas, sehingga memerlukan pendingin.
             - Prosesnya kurang cepat.
             - Membutuhkan daya listrik yang besar
             Contohnya adalah ENIAC (Electronic Numerical Integrator and Computer)
             Terdiri dari    :  17.468 vacuum tube
                                            7.200 diode
                                            70.000 resistor
                                            10.000 capasitor
             Dengan luas 63 m2, berat 27 ton dan membutuhkan power 150 Kw, Instruksi 300 perkalian/menit dan 5000 penjumlahan (10 digit)/menit.
             Hal ini menunjukkan bahwa ENIAC tidak memuaskan dan lambat.
      b.   Komputer Generasi 2
             Komputer generasi 2 sudah menggunakan transistor yang ukurannya tidak lagi besar untuk menggantikan tabung hampa.
             Karakteristik :
             -  Transistor mulai digunakan di komputer pada tahun 1956.
             -  Mengganti bahasa mesin(bahasa rakitan) dengan bahasa assembly.
             -  Kapasitas memori utama sudah cukup besar sampai puluhan ribu karakter.
             - Beberapa bahasa pemrograman tingkat tinggi mulai bermunculan, seperti Common Business-Oriented Language (COBOL), Formula Translator (FORTRAN), Algorithmic Language (ALGOL).
             Contohnya adalah UNIVAC (UNIVersal Automatic Computer), yang telah dirilis luas, dan ukurannya cukup ramping.
      c.   Komputer Generasi 3
             Pada masa ini, transitor dianggap cepat panas dan cukup besar. Oleh karena itu pada tahun 1958 Jack Kilby, seorang insinyur di Texas Instruments mengembangkan sirkuit terintegrasi (IC, integrated circuit) yang ukurannya lebih kecil. IC mengombinasikan tiga komponen elektronik dalam sebuah piringan silikon kecil. Oleh karena itu para ilmuan kemudian berhasil memasukkan lebih banyak komponen ke dalam suatu chip tunggal yang disebut semikonduktor.
             IC terbuat dari material pasir kuarsa, didalam IC terdapat transistor, resistor dan kapasitor yang diintegrasikan ke dalam chip tunggal.
             Pada tahun 1971 muncullah mikroprosesor pertama, contohnya adalah intel 4004 Microprosessor yang dikeluarkan oleh Microsoft.
      d.   Komputer Generasi 4
             Pada masa ini tujuan pengembangan menjadi lebih jelas yaitu mengecilkan ukuran sirkuit dan komponen-komponen elektrik. Dengan ditemukannya Large Scale Integration (LSI) yang dapat memuat ratusan komponen dalam sebuah chip sehingga kemampuannya diperluas dan dengan fisik chip yang mengecil.
      e.   Komputer Generasi 5
             Pada tahun 1980-an, dikembangankan Very Large Scale Integration (VLSI), memuat ribuan komponen dalam sebuah chip tunggal, sehingga semakin banyak komponen yang dimasukkan.
      f.    Komputer Generasi 6
             Pada generasi ini semakin canggih perkembangannya, dengan adanya Ultra Large Scale Integration (ULSI), meningkatkan jumlah komponen yang ada didalamnya menjadi jutaan.

Dari perkembangan keenam generasi diatas dapat diambil kesimpulan dari generasi 1 ke generasi 6 bahwa ukurannya dari besar menjadi kecil, harganya dari mahal menjadi murah, kecepatannya (speed) dari lambat menjadi cepat, dan memorinya dari kecil menjadi besar.
     
Klasifikasi Komputer
Komputer diklasifikasikan menjadi 5 yaitu :
1.   Supercomputer
      Komputer dengan kapasitas mesin yang sangat tinggi, serta kemampuan maksimal yang terdiri dari ratusan ribu prosessor dengan kecepatan perhitungannya 1 triliun kalkulasi/detik. Yang digunakan untuk proses komputasi yang maksimal, contohnya : ramalan cuaca, simulasi nuklir, pemerintahan dll.
2.   Mainframe
      Komputer ini ukurannya bisa dikondisikan dari kecil, sedang dan besar, yang tergantung permintaan yang kemampuannya sangat tinggi, dibawah supercomputer. Contohnya adalah server.
3.   Workstations
      Komputer ini mahal, yang bentuknya seperti komputer rumah pada umumnya tetapi digunakan untuk perhitungan matematika, ilmiah, mesin dan juga desain yang menuntut kemampuan maksimal daripada komputer rumah biasa.
4.   Microcomputers
      Microcomputers ini seperti komputer yang kita gunakan sehari hari, seperti komputer rumahan (PC), notebook, PDA dll.
5.   Microcontroller
      Merupakan komputer yang tertanam yang bentuknya sangat kecil yang didesain khusus untuk pekerjaan terbatas tidak seperti prosessor. contohnya adalah robot, AC, kulkas dll.