Selasa, 15 Maret 2011

Praktikum Pemrograman Berbasis Web - Modul 02 Pemrosesan Form

TUGAS PRAKTIKUM
validasi.php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='hendri') AND ($_POST['pass']=='12345')){
    echo 'Berhasil, Anda masuk ke halaman sdministrator dengan Username: '.$_POST['user'];
    echo '<br><br>Selamat datang, '. $_POST['user'];
}
else{
    echo "<br><br><br><body text='red'><strong><center>Invalid Login!<br><br><a href='loginform.html'><h4>Back to Login</h4></a></center></strong></body>";
}
?>
</body>
</html>

cek.js
function error1(){
    alert('Masukkan Username dan Password!');
}
function check(){
    if(form1.pass.value == "" || form1.user.value=="")
    {
        error1();
    }
}

model.css
#apDiv1{
    position:absolute;
    width:373px;
    height:330px;
    z-index:1;
    left: 449px;
    top: 136px;
    background-color: #FFFFFF;
    border: 2px solid Blue;
}
#apDiv3{
    position:absolute;
    width:80px;
    height:25px;
    z-index:2;
    left: 289px;
    top: 274px;
}
.style3{
    font-size: 10px;
    font-weight: bold;
}
#apDiv2{
    position:absolute;
    width:412px;
    height:115px;
    z-index:2;
    top: 0px;
    left: 2px;
}
#header{
    width:373px;
    height:98px;
    background-image: url();
}
#footer{
    width:373px;
    height:40px;
    background-image: url();
}
body {
    background-image: url(bws.jpg);
}

loginform.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login</title>
    <link rel="stylesheet" href="model.css" type="text/css"/>
    <script type="text/javascript" src="cek.js"></script>
</head>
<body onLoad="document.form1.user.focus();">
<form name="form1" method="post" action="validasi.php">
<div id="apDiv1">
<div id="header"></div>
<div align="center"><br><br>
<div align="center"><strong><br>Username: </strong><br>
    <input type="text" name="user" size="40" value="" style="background-color:yellow">
    <br><br>
    <strong>Password: </strong>
    <br>
    <input type="password" name="pass" size="40" style="background-color:yellow">
    <br><br><br>
    <input type="submit" name="submit" value="LOGIN" onClick="check()">
    <br>
    <span color="#0000FF" class="style3">&copy;Copyright bang_hendri</span><br>
    <br>
</div>
</div>
<br>
<div align="center" id="apDiv3"></div>
<div id="footer" align="center"><br></div>
</div>
</form>
</body>
</html>

Screenshot
Diposting oleh di Tidak ada komentar:

Selasa, 08 Maret 2011

Praktikum Pemrograman Berbasis Web - Modul 6

STUDI KASUS 1
mod6_studikasus1.php
<html>
<head>
    <title>Studi Kasus 1 Modul 6</title>
</head>

<body>
<center>
<h1>
<?php
function greeting(){
    $date = date ("G : i A");
    if($date>=0 and $date<10){
        echo "Selamat Pagi";
    }
    else if($date>=10 and $date<14){
        echo "Selamat Siang";
    }
    else if($date>=15 and $date<19){
        echo "Selamat Sore";
    }
    else if($date>=19 and $date<24){
        echo "Selamat Malam";
    }
    else echo "Waktu salah";
}
?>
<?php greeting(); ?><br>
</h1>
<h3> Sekarang adalah
<?php
    //Array Hari
    $array_hari = array(1=>"Senin","Selasa","Rabu","Kamis","Jumat", "Sabtu","Minggu");
    $hari = $array_hari[date("N")];
    //Format Tanggal
    $tanggal = date ("j");
    //Array Bulan
    $array_bulan = array(1=>"Januari","Februari","Maret", "April", "Mei", "Juni","Juli","Agustus","September","Oktober", "November","Desember");
    $bulan = $array_bulan[date("n")];
    //Format Tahun
    $tahun = date("Y");
    //Menampilkan hari dan tanggal
    echo "hari $hari, tanggal $tanggal $bulan $tahun";
?>
<br>
Waktu menunjukkan pukul
<?php
    //penulisan waktu
    $date = date ("G : i A");
    echo "$date WIB";
?>
</h3>
</body>
</html>

Screenshot

STUDI KASUS 2
generate2.php
<html><body>
<?php
$b= $_POST['baris'];
$k= $_POST['kolom'];
if(ereg("[^0-9_-]", $b, $str))
    {
    echo 'Masukkan angka pada baris.';
    }
elseif(ereg("[^0-9_-]", $k, $str))
    {
    echo 'Masukkan angka pada kolom.';
    }
elseif (empty($b) || empty($k))
    {
    echo 'Fill in the empty fields.';
    }
else {
    echo "<table width='200' border='2' cellspacing='1' cellpadding='1'>";
    for($i=0;$i<$b;$i++)
    {
    print "<tr>";
    for($j=0;$j<$k;$j++)
        {
        print "<td> &nbsp; </td>";
        }
    }
    print "</tr>";
    echo "</table>";
}
?> </body></html>

mod6_studikasus2.html
<!Doctype html>
<html lang="en">
<head>
<title>Studi Kasus 2 Modul 6
</title>
</head>
<body>

<form action='generate2.php' method='post'>
  <table width="500" border="0" cellspacing="4" cellpadding="3">
    <tr>
      <td width="152">Jumlah Baris </td>
      <td width="324">:
      <input width='150' type='text' name='baris' size='15'  /></td>
    </tr>
    <tr>
      <td>Jumlah Kolom </td>
      <td>:
      <input width='150' type='text' name='kolom' size='15'  /></td>
    </tr>
    <tr>
      <td><div align="center"></div></td>
      <td>
        <div align="left">
          <input type='submit' value='Generate'/>
        </div></td>
    </tr>
  </table>
  <p></br>
</p>
  <p>&nbsp;</p>
  <p></br>
  </p>
</form>

</body>
</html>
Screenshot


TUGAS PRAKTIKUM 1
mod6_tp1_value.php
<?php
    function jumlah($nilai){
    $nilai++;
    }
    $input=9;
    jumlah($input);
    echo $input;
?>
Screenshot


mod6_tp1_reference.php
<?php
    function jumlah(&$nilai){
    $nilai++;
    }
    $input=9;
    jumlah($input);
    echo $input;
?>
Screenshot


TUGAS PRAKTIKUM 2
generate.php
<html>
<head>
    <title>Hasil</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"?>
</head>

<body>
<?php
    $rows = 1;
    $columns = 1;
    $cells = 1;
?>
    <?php $rows = (int) $_POST["RowsTotal"]; ?>
    <?php $columns = (int) $_POST["ColumnsTotal"]; ?>
    <?php $cells = (int) $_POST["CellsTotal"]; ?>
    Anda membuat <?php echo $rows; ?> baris,
    <?php echo $columns; ?> kolom,
    dan membutuhkan <?php echo $cells; ?> sel.<br/><br/>

<?php
    $width = $columns * 75;
    echo "<table width=".$width." border=1>";
    $rw = 0;
    $cel = 1;
    while ($rw < $rows && $cel <= $cells){
        echo "<tr>";
        $cl = 0;
        while ($cl < $columns)
    {
    if ($cel <= $cells){
        echo "<td><div align=center>".$cel."</div></td>";
        $cel++;
    }
    $cl++;
    }
    echo "</tr>";
    $rw++;
    }
    echo "</table>";
?>
</body>
</html>
mod6_tp2.html
<html>
<head>
    <title>Studi Kasus 2 Modul 6</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"?>
</head>

<body>
<form method="post" action="generate.php">
<p><h2>GENERATE TABEL</h2></p>
<table width="277"? border="0"?>
<tr>
    <td width="89"?>Baris</td>
    <td width="172"?><strong>: </strong><input name="RowsTotal" type="text" id="RowsTotal" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
    <td><label>Kolom</label></td>
    <td><strong>: </strong><input name="ColumnsTotal" type="text" id="ColumnsTotal" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
    <td>Jumlah Sel</td>
    <td><strong>: </strong><input name="CellsTotal" type="text" id="CellsTotal" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
    <td>Sel Max</td>
    <td><strong>: </strong><input name="maxcells" type="text" id="maxcells" readonly="readonly" style="background-color:#999999"?>
    </td>
</tr>

<tr>
<td>
<div align="center">
<br />
    <input type="reset" name="Reset" value="Reset">
</div></td>

<td>
<div align="right">
<br />
<input type="submit" name="Generate" value="Generate">
</div></td>
</tr>

</table>
</form>
    <script language="JavaScript" type="text/javascript">
<!–
function getmax(){
    var R = parseInt(document.getElementById('RowsTotal').value);
    var C = parseInt(document.getElementById('ColumnsTotal').value);
    var X = parseInt(document.getElementById('CellsTotal').value);
    var cellmax = document.getElementById('maxcells');
    var total = 'N/A';
    total = R * C;
    cellmax.value = new String(total);
    if (X > total){
        alert('Limit Exceed, max cells is ' + total);
        document.getElementById('CellsTotal').value = new String();
    }
}
//–>
</script>

</body>
</html>
Screenshot
 
Diposting oleh di Tidak ada komentar:

Selasa, 01 Maret 2011

Praktikum Pemrograman Berbasis Web - Modul 5

STUDI KASUS
1. Seperti di modul

javascript
function rumus(){
    var proses = document.form;
    var a = parseInt(proses.a.value);
    var b = parseInt(proses.b.value);
    pilih = (proses.option.value);

    if(pilih == "tambah"){
        c = a + b;
        proses.hasil.value = c;
        }
    else if(pilih == "kurang"){
        c = a - b;
        proses.hasil.value = c;
        }
    else if(pilih == "kali"){
        c = a * b;
        proses.hasil.value = c;
        }
    else if(pilih == "bagi"){
        c = a / b;
        proses.hasil.value = c;
        }
    else if(pilih == "pangkat"){
        c = Math.pow(a, b);
        proses.hasil.value = c;
        }
}

function kosong(){
        form.a.focus()
        form.a.value=""
        form.b.value=""
        form.hasil.value=""
}


html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Studi Kasus Modul 5</title>
    <script type="text/javascript" src="sk.js"></script>
</head>

<body>
<form name="form">
    <input type="text" name="a"/>
    <select name="option">
        <option value="tambah">+</option>
        <option value="kurang">-</option>
        <option value="kali">*</option>
        <option value="bagi">/</option>
        <option value="pangkat">^</option>
    </select>
    <input type="text" name="b"/>
    <input type="button" value="=" onClick="rumus()"/>
    <input type="text" name="hasil"/>
    <input type="button" value="Clear" onClick="kosong()">
</form>
</body>
</html>


Screenshot
2. Seperti gambar
html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kalkulator Sederhana</title>
</head>

<body>
<script language="JavaScript" type="text/javascript">
    function kurang(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a-b
        form.hasil.value=c
    }
       
    function tambah(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a+b
        form.hasil.value = c
    }

    function kali(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a*b
        form.hasil.value=c
    }

    function bagi(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a/b
        form.hasil.value = c
    }

    function pangkat(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=Math.pow(a, b)
        form.hasil.value = c
    }

    function kosong(){
        form.a.focus()
        form.a.value=""
        form.b.value=""
        form.hasil.value=""
    }
</script>

<body onload=kosong()>
<form name="form">
    <hr width="350" size="8" color="yellow" align="left">
    <h3>Kalkulator Sederhana Dengan Java Script</h3></hr>
    <hr width="350" size="8" color="yellow" align="left"/>
    Masukkan nilai pertama :<br>
    <input type="text" name="a"><br>
    Masukkan nilai kedua :<br>
    <input type="text" name="b"><br>
    Pilih operasi :<br>
    <input type="button" value="  +  " onClick="tambah()">
    <input type="button" value="  -  " onClick="kurang()">
    <input type="button" value="  x  " onClick="kali()">
    <input type="button" value="  /  " onClick="bagi()">
    <input type="button" value="  ^  " onClick="pangkat()"><br>
    Hasil :<br>
    <input type "text" name="hasil" disabled="true"><br>
    <input type="button" value="Clear" onClick="kosong()">
    <hr width="350" size="8" color="yellow" align="left"/>
    bang_hendri Production &copy 2011
</form>
</body>
</html>


Screenshot


TUGAS PRAKTIKUM
javascript
function hitung(){
    var proses = document.form1;
    var sate = 12000 * parseInt(proses.menu1.value);
    var soto = 10000 * parseInt(proses.menu2.value);
    var rujak = 15000 * parseInt(proses.menu3.value);
    var degan = 5000 * parseInt(proses.menu4.value);
    var campur = 7000 * parseInt(proses.menu5.value);
    var hasil = sate + soto + rujak + degan + campur;
   
    if (hasil > 50000){
        proses.total.value = hasil;
        proses.diskon.value = 10000;
        proses.bayar.value = hasil - 10000;
    }
    else{
        proses.total.value = hasil;
        proses.diskon.value = 0;
        proses.bayar.value = hasil - 0;
    }
    proses.bayar1.value=sate;
    proses.bayar2.value=soto;
    proses.bayar3.value=rujak;
    proses.bayar4.value=degan;
    proses.bayar5.value=campur;
}

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tugas Praktikum Modul 5</title>
    <script type="text/javascript" src="tp.js"></script>
</head>

<body>
<h1 align="center">WARUNG PA' SAKERA</h1>
<form name="form1" action="#">
<table border="2" align="center">
<tr bgcolor="#999999">
    <th>No</th>
    <th>Makanan/Minuman</th>
    <th>Harga</th>
    <th>Pesan</th>
    <th>Total</th>
</tr>
<tr>
    <td width="20"><div align="center">1</div></td>
    <td width="153">Sate Madura</td>
    <td width="136">@<input type="text" name="sate" value="12000" size="15" disabled="true"/></td>
    <td width="150"><input type="text" name="menu1" value="0" onChange="hitung()"/></td>
    <td width="148" align="right"><input type="text" name="bayar1" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">2</div></td>
    <td>Soto Madura</td>
    <td>@<input type="text" name="soto" value="10000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu2" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar2" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">3</div></td>
    <td>Rujak Madura</td>
    <td>@<input type="text" name="rujak" value="15000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu3" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar3" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">4</div></td>
    <td>Es Degan Ijo</td>
    <td>@<input type="text" name="degan" value="5000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu4" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar4" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">5</div></td>
    <td>Es Campur</td>
    <td>@<input type="text" name="campur" value="7000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu5" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar5" disabled="true"/></td>
</tr>
<tr bgcolor="#FF0000">
    <td colspan="4" align="right"><strong>Jumlah Total</strong></td>
    <td><input type="text" name="total" disabled="true" /></td>
</tr>
<tr bgcolor="#FFFF00">
    <td colspan="4" align="right"><strong>Diskon</strong></td>
    <td><input type="text" name="diskon" disabled="true" /></td>
</tr>
<tr bgcolor="#00FF00">
    <td colspan="4" align="right"><strong>Jumlah Dibayar</strong></td>
    <td><input type="text" name="bayar" disabled="true" align="right"/></td>
</tr>
</table>
<input type="reset" value="Batal"/>
</form>
</body>
</html>


Screenshot
Diposting oleh di Tidak ada komentar:

Selasa, 22 Februari 2011

Praktikum Pemrograman Berbasis Web - Modul 4

STUDI KASUS
css
body{
    margin:10px auto;
    width:750px;
}
header{
    height:80px;
    display:block;
    border:1px solid green;
    background-color:green;
}
nav{
    float:top;
    width:748px;
    height:30px;
    display:block;
    border:1px solid blue;
    background-color:blue;
}
section{
    width:748px;
    height:370px;
    display:block;
    border:1px solid red;
    background-color:red;
}
footer{
    clear:both;
    height:20px;
    display:block;
    border:1px solid green;
    background-color:green;
}
article{
    float:left;
    margin-top:20px;
    margin-left:20px;
    height:325px;
    width:500px;
    border:1px dashed black;
    background-color:white;
}
aside{
    float:right;
    margin-top:20px;
    margin-right:20px;
    height:325px;
    width:180px;
    border:1px dashed black;
    background-color:white;
}

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

<head>
    <title>Studi Kasus Modul 4</title>
    <link rel="stylesheet" href="style_sk.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>

Screenshot

TUGAS PRAKTIKUM
css
body{
    margin:10px auto;
    width:1100px;
    background-color:silver;
}
header{
    background-image:url(Header.jpg);
    height:80px;
    display:block;
    padding:3px;
}
nav{
    float:top;
    width:1100px;
    height:50px;
    display:block;
    background-color:#B0E0E6;
}
.button_nav{
    background-color:RoyalBlue;
    float:right;
    color:white;
    margin-left:2px;
    height:30px;
    border:1px solid RoyalBlue;
}
section{
    width:1100px;
    height:425px;
    display:block;
    background-color:#AFEEEE;
}
aside{
    float:left;
    height:418px;
    width:300px;
    border:4px solid black;
}
article{
    margin-right:9px;
    float:right;
    height:300px;
    width:782px;
    background-color:white;
}
events{
    background-color:#B0E0E6;
    float:right;
    border:1px solid blue;
    margin-right:9px;
    margin-left:1px;
    margin-top:1px;
    margin-bottom:1px;
    height:122px;
    width:780px;
}
footer{
    background-image:url(Footer.jpg);
    clear:both;
    height:43px;
    display:block;
    padding:1px;
}
.text_footer{
    color:white;
    margin:1px;
}
#logo{
    margin-top:3px;
    margin-left:50px;
    float:left;
}
#text_logo{
    margin-top:15px;
    margin-left:30px;
    float:left;
    color:white;
    font-size:40px;
    font-weight:bold;
}
#text_search{
    margin-top:15px;
    margin-left:30px;
    float:left;
    color:#0099CC;
}
#box_search{
    margin-top:15px;
    margin-left:10px;
    float:left;
}
.text_events{
    color:#0099CC;
    font-size:20px;
    font-weight:bold;
}
a{color:purple;}
li{color:#0099CC;}

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

<head>
    <title>Tugas Praktikum Modul 4</title>
    <link rel="shortcut icon" href="Logo UM.png"/>
    <link rel="stylesheet" href="style_tp.css" type="text/css"/>
</head>

<body>
<header>
    <div id="logo"><img src="Logo UM.png" width="73" height="73"/></div>
    <div id="text_logo">S1 PTI 2009 OFFERING C</div>
</header>
<nav>
    <div id="text_search">Search</div>
    <div id="box_search"><input type="text"/></td></div>
    <input type="submit" value="Downloads" class="button_nav"/>
    <input type="submit" value="Tips & Tricks" class="button_nav"/>
    <input type="submit" value="Tutorials" class="button_nav"/>
    <input type="submit" value="News & Media" class="button_nav"/>
    <input type="submit" value="Home" class="button_nav"/>
</nav>
<section>
    <aside>
        <img src="Gunung Baung.jpg" width="300" height="418"/>
    </aside>
    <article>
    Nama saya Hendriyanto, biasa dipanggil Hendri.<br>
    Saya berasal dari Sumenep, kabupaten paling timur pulau Madura.<br>
    Saya kuliah di Universitas Negeri Malang (UM), Fakultas Teknik,
    Jurusan Teknik Elektro, Program Studi S1 Pendidikan Teknik Informatika.
    <br><br>
    Halaman web ini adalah halaman tugas praktikum modul 4.<br>
    Text link di bawah ini tidak terhubung dengan link manapun,
    melainkan link "no action".
    </article>
    <events>
    <div class="text_events">Events:</div>
    <ul>
    <li><a href="#">Mengerjakan Tugas Kuliah</a></li>
    <li><a href="#">Nyanyi Dangdut Lawas (Bukan Koplo, Apalagi Remix)</a></li>
    <li><a href="#">Freestyle Soccer</a></li>
    <li><a href="#">Capoeira</a></li>
    </ul>
    </events>
</section>
<footer>
    <div class="text_footer" align="center">
    Home | News & Media | Tutorials | Tips & Tricks | Downloads</div>
    <div class="text_footer" align="right">
    &copy bang_hendri</div>
</footer>
</body>
</html>

Screenshot
Diposting oleh di Tidak ada komentar:

Selasa, 15 Februari 2011

Praktikum Pemrograman Berbasis Web - Modul 3

STUDI KASUS
script
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Studi Kasus Border</title>
  <style type="text/css">
  <!--
  .round{
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -khtml-border-radius: 100px;
    -ms-border-radius: 100px;
    -chrome-border-radius: 100px;
    background-color: yellow;
    border: 2px solid black;
    padding: 5px;
    width: 150px;
    height:150px;
  }
 
  .round1{
    -moz-border-radius-topleft:25px 25px;
    -moz-border-radius-bottomright:25px 25px;
    -webkit-border-radius-topleft:25px 25px;
    -webkit-border-radius-bottomright:25px 25px;
    -o-border-radius-topleft:25px 25px;
    -o-border-radius-bottomright:25px 25px;
    -khtml-border-radius-topleft:25px 25px;
    -khtml-border-radius-bottomright:25px 25px;
    -ms-border-radius-topleft:25px 25px;
    -ms-border-radius-bottomright:25px 25px;
    -chrome-border-radius-topleft:25px 25px;
    -chrome-border-radius-bottomright:25px 25px;
    background-color:white;
    border:4px solid green;
    padding:10px;
    width: 400px;
    height:40px;
  }
 
  .round2 {
    -moz-box-shadow:10px 10px 10px black;
    -webkit-box-shadow:10px 10px 10px black;
    -o-box-shadow:10px 10px 10px black;
    -khtml-box-shadow:10px 10px 10px black;
    -ms-box-shadow:10px 10px 10px black;
    -chrome-box-shadow:10px 10px 10px black;
    background-color:white;
    border:2px solid red;
    padding:5px;
    width: 400px;
    height:40px;
  }
  -->
  </style>
 
</head>
<body>

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

  <div class="round1">
  Bisa juga bikin kreasi border seperti ini.<br>
  Mmmmm....!!!
  </div>
  <br/>

  <div class="round2">
  Kalau yang ini semacam efek shadow.<br>
  Keren kan?
  </div>

</body>
</html>
Screenshot

TUGAS PRAKTIKUM
script
html (script)
<!DOCTYPE html
public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

<head>
    <title>Selamat Datang di Face-mu</title>
    <link rel="shortcut icon" href="icon.png"/>
    <style type="text/css">
<!--
    .header{
    background-color:RoyalBlue;
    padding: 15px;
    height: 55px;
    }
    .content{
    background-image:url(bg.jpg);
    padding: 15px;
    height: 457px;
    }
    .footer{
    background-color:RoyalBlue;
    padding: 1px;
    height: 25px;
    }
    .font{
    font-family: Arial, Helvetica, sans-serif;
    color: RoyalBlue;
    }
    .font2{
    font-family: Arial, Helvetica, sans-serif;
    color: RoyalBlue;
    font-size: 12px;
    }
    .font3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: RoyalBlue;
    font-weight: bold;
    }
    .font4{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    }
    .font5{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: RoyalBlue;
    font-weight: bold;
    }
    .font6{
    font-family: Arial, Helvetica, sans-serif;
    color: White;
    font-size: 12px;
    }
    .font7{
    font-family: Arial, Helvetica, sans-serif;
    color: White;
    font-size: 11px;
    }
    .button-daftar{
    -moz-border-radius-topleft:5px 5px;
    -moz-border-radius-topright:5px 5px;
    -moz-border-radius-bottomleft:5px 5px;
    -moz-border-radius-bottomright:5px 5px;
    -webkit-border-radius-topleft:5px 5px;
    -webkit-border-radius-topright:5px 5px;
    -webkit-border-radius-bottomleft:5px 5px;
    -webkit-border-radius-bottomright:5px 5px;
    -o-border-radius-topleft:5px 5px;
    -o-border-radius-topright:5px 5px;
    -o-border-radius-bottomleft:5px 5px;
    -o-border-radius-bottomright:5px 5px;
    -khtml-border-radius-topleft:5px 5px;
    -khtml-border-radius-topright:5px 5px;
    -khtml-border-radius-bottomleft:5px 5px;
    -khtml-border-radius-bottomright:5px 5px;
    -ms-border-radius-topleft:5px 5px;
    -ms-border-radius-topright:5px 5px;
    -ms-border-radius-bottomleft:5px 5px;
    -ms-border-radius-bottomright:5px 5px;
    -chrome-border-radius-topleft:5px 5px;
    -chrome-border-radius-topright:5px 5px;
    -chrome-border-radius-bottomleft:5px 5px;
    -chrome-border-radius-bottomright:5px 5px;
    background-color: RoyalBlue;
    border: 1px solid white;
    padding: 0px;
    width: 100px;
    height:25px;
    font-family: Arial, Helvetica, sans-serif;
    color: White;
    font-size: 12px;
    font-weight: bold;
    }
    .button-masuk{
    -moz-border-radius-topleft:5px 5px;
    -moz-border-radius-topright:5px 5px;
    -moz-border-radius-bottomleft:5px 5px;
    -moz-border-radius-bottomright:5px 5px;
    -webkit-border-radius-topleft:5px 5px;
    -webkit-border-radius-topright:5px 5px;
    -webkit-border-radius-bottomleft:5px 5px;
    -webkit-border-radius-bottomright:5px 5px;
    -o-border-radius-topleft:5px 5px;
    -o-border-radius-topright:5px 5px;
    -o-border-radius-bottomleft:5px 5px;
    -o-border-radius-bottomright:5px 5px;
    -khtml-border-radius-topleft:5px 5px;
    -khtml-border-radius-topright:5px 5px;
    -khtml-border-radius-bottomleft:5px 5px;
    -khtml-border-radius-bottomright:5px 5px;
    -ms-border-radius-topleft:5px 5px;
    -ms-border-radius-topright:5px 5px;
    -ms-border-radius-bottomleft:5px 5px;
    -ms-border-radius-bottomright:5px 5px;
    -chrome-border-radius-topleft:5px 5px;
    -chrome-border-radius-topright:5px 5px;
    -chrome-border-radius-bottomleft:5px 5px;
    -chrome-border-radius-bottomright:5px 5px;
    background-color: RoyalBlue;
    border: 1px solid white;
    padding: 0px;
    width: 50px;
    height:20px;
    font-family: Arial, Helvetica, sans-serif;
    color: White;
    font-size: 11px;
    font-weight: bold;
    }
-->
</style>

</head>
<body>

<div class="header">
    <img src="facemu.png" align="left"/>
    <form action="" method="post">
    <table border=0 align="right">
    <tr>
        <td><span class="font6">E-mail :</span></td>
        <td>
        <span class="font6">Password :</span></td>
        <tr><td>
        <input type="text"/>
        </td>
        <td>
        <input type="text"/>
        </td>
        <td><input type="submit" value="Masuk"
        class="button-masuk"/></td>
        </tr>
    </tr>
    <tr>
        <td>
        <input type="checkbox">
        <span class="font7">Biarkan saya tetap masuk</span>
        </td>
        <td>
        <span class="font7"><u>Lupa kata sandi Anda?</u></span>
        </td>
    </tr>
    </table>
</div>

<div class="content">
    <img src="face-mu6.png" align="left"/>
    <h1><span class="font">Mendaftar</span></h1>
    <span class="font">Gratis, sampai kapanpun</span>
    <hr align="left" width="310" color="RoyalBlue"/>
    <form action="" method="post">
    <table border=0>
    <tr>
        <td><span class="font2">Nama Depan</span></span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Nama Belakang</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">E-mail Anda</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Masukkan Ulang E-mail
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Kata Sandi Baru</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Saya Seorang</span></td>
        <td>
        <select name="Jenis Kelamin"/>
        <option>Pria</option>
        <option>Wanita</option></select>
        </td>
    </tr>
    <tr>
        <td><span class="font2">Tanggal Lahir</span></td>
        <td>
        <select name="Tanggal"/>
        <option>01</option><option>02</option><option>03</option>
        <option>04</option><option>05</option><option>06</option>
        <option>07</option><option>08</option><option>09</option>
        <option>10</option><option>11</option><option>12</option>
        <option>13</option><option>14</option><option>15</option>
        <option>16</option><option>17</option><option>18</option>
        <option>19</option><option>20</option><option>21</option>
        <option>22</option><option>23</option><option>24</option>
        <option>25</option><option>26</option><option>27</option>
        <option>28</option><option>29</option><option>30</option>
        <option>31</option>
        </select>
        <select name="Bulan"/>
        <option>Jan</option><option>Feb</option><option>Mar</option>
        <option>Apr</option><option>Mei</option><option>Jun</option>
        <option>Jul</option><option>Agu</option><option>Sep</option>
        <option>Okt</option><option>Nov</option><option>Des</option>
        </select>
        <select name="Tahun"/>
        <option>'94</option><option>'93</option><option>'92</option>
        <option>'91</option><option>'90</option><option>'89</option>
        <option>'88</option><option>'87</option><option>'86</option>
        <option>'85</option><option>'84</option><option>'83</option>
        <option>'82</option><option>'81</option><option>'80</option>
        <option>'79</option><option>'78</option><option>'77</option>
        <option>'76</option><option>'75</option><option>'74</option>
        <option>'73</option><option>'72</option><option>'71</option>
        <option>'70</option><option>'69</option><option>'68</option>
        <option>'67</option><option>'66</option><option>'65</option>
        <option>'64</option><option>'63</option><option>'62</option>
        <option>'61</option><option>'60</option><option>...</option>
        </select>
        </td>
    </tr>
    <tr>
    <td><td>
        <span class="font5">Mengapa saya perlu mengisinya?
        </span></td></td>
    </tr>
    <tr>
        <td><td>
        <input type="submit" value="Mendaftar" class="button-daftar"/>
        </td></td>
    </tr>
    </table>
    <hr align="left" width="310" color="RoyalBlue"/>
    <tr align="center"><span class="font3">Buat halaman</span>
    <span class="font4">untuk selebritis, grup musik, atau bisnis
    </span></tr>
</div>

<div class="footer">
    <span class="font6">
    Face-mu &copy 2011 - bang_hendri Production
    </span>
</div>

</body>
</html>
Screenshot

Diposting oleh di Tidak ada komentar:

Selasa, 08 Februari 2011

Praktikum Pemrograman Berbasis Web - Modul 2

STUDI KASUS
html (script)
<html>

<head>
  <title>Studi Kasus 2</title>
</head>

<frameset rows="20%,60%,20%">
<frame src="link2.html"/>

    <frameset cols="10%,80%,10%">
    <frame src="link1.html"/>
    <frame src="1_link_internal.html"/>
    <frame src="link1.html"/>
    </frameset>

<frame src="link2.html"/>
</frameset>

</html>

Screenshot (silahkan klik alamat di bawah ini)

http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_studikasus_ss.jpg

TUGAS PRAKTIKUM

1. Grafik berbasis tabel.
html (script)
 <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

<head>
    <title>Grafik Berbasis Tabel 1</title>
</head>

<body>
<p><strong>HENDRIYANTO_209533421948_PTI09 OFF C</strong></p>
<p><strong>Modul 2: Tugas Praktikum nomor 1  </strong></p>
<table width="600" >
<tr>
<td width="600" colspan="2">
<table rules="rows" frame="hsides" align="left" cellspacing="0" cellpadding="10">
<tr>
    <th width="200">Perusahaan</th>
    <th width="500">Pendapatan</th>
</tr>
</table>

</td>
</tr>
<tr>
<td>

<table frame="below" align="left" cellspacing="0" cellpadding="3">
<tr>
    <td width="200">Angin Reboot Ltd</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="150" colspan="5" >
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" >
<tr>
<th width="150" height="16" colspan="5" bgcolor="green"></th>
</tr>
</table>
</td>
    <td >+150%</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>   
</tr>
<tr>
    <td width="200">Command Prompt, Inc</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="50" colspan="2">
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" >
<tr>
<td width="55" height="16" colspan="2" bgcolor="green">
</td>
</tr>
</table>
</td>
    <td width="25">+55%</td>
    <td width="25"></td>
    <td width="25"></td>
</tr>
<tr>
    <td width="200">Hibernate Ltd</td>
    <td width="50"></td>
    <td width="25"></td>
    <td width="25" align="right">&nbsp;</td>
    <td width="25">-23%
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" align="right">
<tr>
<td width="23" height="16" bgcolor="yellow">
</td>
</tr>
</table>
</td>
  <td width="25"></td>
  <td width="25"></td>
</tr>
<tr>
    <td width="200">Shutdown Ltd</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25">-75%</td>
    <td width="100">
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" align="right">
<tr>
<td width="75" height="16" colspan="3" bgcolor="red">
</td>
</tr>
</table>
</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
Screenshot (silahkan klik alamat di bawah ini)
http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_tp1_ss.jpg


2. Tabel perbandingan item.
html (script)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabel Perbandingan Item</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p><strong>HENDRIYANTO_209533421948_PTI09 OFF C</strong></p>
<p><strong>Modul 2: Tugas Praktikum nomor 2 </strong></p>
<table width="408" rules="rows" frame="below" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="5" ><div align="center">PERBANDINGAN FITUR </div></td>
  </tr>
  <tr>
    <td width="32" style="border-right:black solid thin;"><div align="center"><strong>No</strong></div></td>
    <td width="173" style="border-right:black solid thin;"><div align="center"><strong>Fitur</strong></div></td>
    <td width="103" style="border-right:black solid thin;"><div align="center"><strong>Enterprise</strong></div></td>
    <td width="44" style="border-right:black solid thin;"><div align="center"><strong>Pro</strong></div></td>
    <td width="44" ><div align="center"><strong>Free</strong></div></td>
  </tr>
  <tr>
    <td style="border-right:black solid thin;"><p align="center">1</p>
    <p align="center">2</p>
    <p align="center">3</p>
    <p align="center">4</p>
    <p align="center">5</p></td>
    <td style="border-right:black solid thin;"><p>Garansi seumur hidup</p>
    <p>Multiuser</p>
    <p>Update otomatis</p>
    <p>Cetak laporan</p>
    <p>Notifikasi error    </p></td>
    <td style="border-right:black solid thin;"><p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p>    </td>
    <td style="border-right:black solid thin;"><p align="center">-</p>
    <p align="center">-</p>
    <p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p></td>
    <td><p align="center">-</p>
    <p align="center">-</p>
    <p align="center">-</p>
    <p align="center">-</p>
    <p align="center">X</p></td>
  </tr>
  <tr>
    <td style="border-right:black solid thin;"><p align="center">6</p>
    <p align="center">7</p></td>
    <td style="border-right:black solid thin;"><p>Ubah tema</p>
    <p>Try ikon </p></td>
    <td style="border-right:black solid thin;"><p align="center">X</p>
    <p align="center">X</p></td>
    <td style="border-right:black solid thin;"><p align="center">X</p>
    <p align="center">X</p></td>
    <td><p align="center">X</p>
    <p align="center">X</p></td>
  </tr>
</table>
</body>
</html>
Screenshot (silahkan klik alamat di bawah ini)
http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_tp2_ss.jpg

TAMBAHAN NOMOR 2
html (script)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grafik Berbasis Tabel 2</title>
</head>
<body>
<p><strong>HENDRIYANTO_209533421948_PTI09 OFF C</strong></p>
<p><strong>Modul 2: Tugas Praktikum nomor 2  </strong></p>
<table width="390" border="0">
<tr>
    <td colspan="8" style="border-bottom:black solid thin;" align="center">PERBANDINGAN FITUR</td>
</tr>
<tr>
    <td width="30"align="center"><b>No</b></td>
    <td width="0" rowspan="10" style="border-left:black solid thin;"></td>
    <td width="250" align="center"><b>Fitur</b></td>
    <td width="0" rowspan="10" style="border-left:black solid thin;"></td>
    <td width="80" align="center"><b>Enterprise</b></td>
    <td width="0" rowspan="10" style="border-left:black solid thin;"></td>
    <td width="30"align="center"><b>Pro</b></td>
    <td width="0"align="center"><b>Free</b></td>
</tr>
<tr>
    <td colspan="8" style="border-top:black solid thin;"></td>
</tr>
<tr>
    <td align="center">1</td>
    <td align="left">Garansi seumur hidup </td>
    <td align="center">X</td>
    <td align="center">-</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">2</td>
    <td align="left">Multiuser</td>
    <td align="center">X</td>
    <td align="center">-</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">3</td>
    <td align="left">Update otomatis </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">4</td>
    <td align="left">Cetak Laporan </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">5</td>
    <td align="left">Notifikasi error </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
</tr>
<tr>
    <td colspan="8" style="border-top:black solid thin;"></td>
</tr>
<tr>
    <td align="center">6</td>
    <td align="left">Ubah tema </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
</tr>
<tr>
    <td align="center">7</td>
    <td align="left">Try ikon</td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
</tr>
<tr>
    <td colspan="8" style="border-top:black solid thin;"></td>
</tr>
</table>
</body>
</html>
Screenshot (silahkan klik alamat di bawah ini)
 http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_tp22_ss.jpg
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)