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

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
 

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