Showing posts with label Tugas Kuliah PTI478. Show all posts
Showing posts with label Tugas Kuliah PTI478. Show all posts

Wednesday, April 21, 2010

Code PHP Halaman Autentikasi Menggunakan Session

Sebelum kita membahas halaman Autentifikasi, alangkah baiknya jika kita menbahas dasar-dasar pada pemrograman PHP Khususnya pada pembahasan cookie dan session, Apa itu cookie? apa itu session?. Nah langsung saja Kita Bahas... Pada dasarnya cookie merupakan mekanisme untuk meletakkan data pada remote browser sehingga memudahkan penelusuran atau identifikasi user. Dapat juga dikatakan bahwa cookie merupakan informasi dalam bentuk teks yang dipertukarkan oleh client dan server, di mana pembuat cookie adalah pihak server. Pada kenyataannya, penggunaan cookie memiliki beberapa masalah atau kendala. Bisa jadi ada browser yang tidak menerima cookie, serta kemungkinan adanya user yang men-disable cookie.  Permasalahan ini merupakan salah satu alasan session PHP menggunakan method cookie/URL ganda.

Salah satu bentuk aplikasi yang sangat memerlukan cookie/session adalah halaman autentikasi. Pada  prinsipnya, autentikasi digunakan untuk memproteksi halaman-halaman sensitif. Untuk mengetahui lebih detail mengenai halaman autentikasi, ikuti langkahlangkah berikut:
1. Buat folder khusus, misalnya autentikasi_cookie.
2. Buat kode untuk halaman index.php.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Autentikasi Halaman</title>
<style type="text/css">
.inner{
margin:200px auto; padding:20px; width:240px; border:1px solid #333;}
</style>
</head>
<body>
<p>
  <?php
ini_set('display_errors', 1);
define('_VALID', 1);
//include file eksternal
require_once('./auth.php');
init_login();
validate();
?>
</p>
<p align="right"><a href="?m=logout">Logout</a></p>
<br/>
<h3 align="center">Simulasi Halaman Admin</h3>
<p align="center">
<a href="?m=logout"></a>
<p align="center">
Menu-menu admin ada di sini
</body>
</html>

3. Buat kode untuk autentikasi dan simpan dengan nama auth.php misalnya.

<?php
defined('_VALID') or die ('not allowed');
//Pemanggilan session
session_start();
function init_login(){
    //Simulasi data account nama dan password
    $nama = 'admin';
    $pass = 'admin'; 

    if (isset($_POST['nama']) && isset ($_POST['pass'])){
        $n = trim($_POST['nama']);
        $p = trim($_POST['pass']);

        if(($n===$nama) && ($p ===$pass)){         

            if(!isset($_SESSION['nlogin']) || !isset($_SESSION['time'])){
                $_SESSION['nlogin'] = $n;
                $_SESSION['time'] = time();
            }
            ?>
            <script type="text/javascript">
            document.location.href="./";
            </script>
            <?php
            }
            else {
                echo 'alert("Nama atau Password Yang Anda Masukkan Salah");';
                return false;
            }
        }
    }

function validate(){
    if(!isset($_SESSION['nlogin']) || !isset($_SESSION['time'])){?>
            <style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
            </style>
           
    <div class="inner">
    <form action="" method="post">
    <table border=0 cellpadding=5>
    <tr>
            <td colspan="2" bgcolor="#000000"><div align="center" class="style1">LOGIN FORM</div></td>
      </tr>
        <tr>
            <td>Nama</td>
            <td><input type="text" name="nama" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="pass" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="E N T E R" /></td>
        </tr>
        <tr>
            <td colspan="2" bgcolor="#000000"><div align="center" class="style1">========================</div></td>
      </tr>
    </table>
    </form>
    </div>

    <?php
    exit;
    }
    if(isset($_GET['m']) && $_GET['m'] == 'logout'){
    //hapus session
    if(isset($_SESSION['nlogin'])){
        unset($_SESSION['nlogin']);
        }
    if(isset($_SESSION['time'])){
        unset($_SESSION['time']);
        }
    //redireksi halaman
    ?>
    <script type="text/javascript">
    document.location.href="./";
    </script>
    <?php
    }
}
?>

Nah begitulah Code PHP Halaman Autentikasi Menggunakan Session semoga bermanfaat
Diposkan oleh di No comments:
Label: , ,

Monday, March 29, 2010

Aplikasi Login Form Sederhana (Tanpa Database) "Final, update 2/4/10"

Pembuatan aplikasi login form sederhana tanpa menggunakan database merupakan dasar dari pembuatan aplikasi login form dengan menggunakan database, seperti My-SQL, Mic. Access, ataupun bisa juga menggunakan text editor untuk menyimpan apapun yang telah kita masukkan didalam input yang telah disediakan. Yang saya bahas kali ini merupakan dasar pemrograman web. Sebenarnya posting kali ini kelanjuttan dari postingan saya sebelumnya tepatnya klik disini.

Nah sekarang sekarang menginjak pada contoh berikutnya dari postingan yang sebelumnya yakni pemrosesan form untuk aplikasi Login Form Sederhana (tanpa database) dengan syarat sebagai berikut :

Aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. Gunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan.
Spesifikasi:

  • Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukan id dan password harus huruf).
  • Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id) Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string. 
  • Jika nilai id dan password sesuai dengan pre-defined value di variabel, munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan.
  • Pada aplikasi ini username = dwipriyatmoko, sedangkan password = rahasia ;

 UPDATE CODE TGL 02-04-2010

Tampilannya seperti yang tampak dibawah ini dengan posisi kursor pada User Name:

Untuk validator menunjukkan warning, dikarenakan adanya code "autocomplite", saya sengaja memberikan code tersebut, dikarenakan ketentuan pembuatan

Nah sekarang kita langsung saja membahas, dan mengerjakan dengan kode-kode berikut ini :

** Ini merupakan kode dasar dari pembuatan aplikasi login form, simpan file ini dengan nama cobatugaslogin.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>Login Form by_Dwipriyatmoko</title>
</head>

<body onLoad="document.form1.user.focus();">
<form name="form1" action="<?php $_SERVER['PHP_SELF'];?>"  method="post" onsubmit="return check(this)">
<div id="apDiv1">
  <div id="header">
    <br>
  </div>
  <div>
    <div align="center"><strong><br>User Name :</strong>   
    <br>
    <input type="text" name="user" size="35" value="" title="Input berupa harus huruf" autocomplete="off" onKeyPress="return Huruf(event)">
    <br>
    <br>
    <strong>Password : </strong> 
    <br>
    <input type="password" name="pass" size="35" title="Input berupa harus huruf" autocomplete="off" onKeyPress="return Huruf(event)">
    <br>
    <br>
    </div>
  </div>
  <br>
    <div id="apDiv3">
     <input type="submit" name="submit" value=" E N T E R " >
    </div>
     <div id="footer" align="left"><br>
     <span class="style3">&copy;Copy Right By_Dwipriyatmoko</span><br>
    </div>
  </div>
</form>
</body>
</html>

** Sebagai tambahan untuk kode java script yang berfungsi sebagai fungsi untuk mengeluarkan peringatan jika input username ataupun password tidak diisi, dan peringatan jika anda menginputkan selain huruf.
taruh kode ini pada kode diatas :

<script type="text/javascript">
// Fungsi check digunakan untuk mengecheck kosong atau tidaknya inputtan username dan password
function check()
{
    if(form1.user.value == "")
    {
        alert('Masukkan User Name Terlebih Dahulu ');
        document.form1.user.focus();
        return false;
    }
    else if(form1.pass.value=="")
    {   
        alert('Masukkan Password Terlebih Dahulu ');
        document.form1.pass.focus();
        return false;
    }   
return true;
}

// Fungsi Huruf digunakan untuk mengecheck penggunaan selain huruf tidak diperbolehkan
function Huruf(evt)
{
    evt = (evt) ? evt : window.event
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if ((charCode > 31 && charCode < 65) || (charCode > 90 && charCode < 97) || charCode > 122) {
        alert('Masukkan User Name dan Password Harus Berupa Huruf ');
        return false;
    }
    return true;
}
</script>

=> Nah jika anda belum mengisikan Username dan Password akan muncul peringatan seperti pada gambar dibawah :


Pada aplikasi ini saya urutkan dalam pengisian input, yakni pembacaan Username terlebih dahulu kemudian pembacaan password, jika username anda inputkan, dan password tidak anda inputkan akan tampil peringatan seperti gambar dibawah :


Secara otomatis kursor akan menuju text field yang belum anda isi. Dan jika anda menginputkan berupa Angka ataupun kode-kode lain selain huruf pada saat menekan akan otomatis muncul peringatan seperti pada gambar dibawah :


Itulah fungsi dari code java script yang tertulis diatas.

** Selanjutnya merupakan code css yang saya gunakan sebagi style div maupun font, dan gambar, gabungkan kode css ini ke dalam kode html diatas :

<style type="text/css">
#apDiv1 {
    position:absolute;
    width:373px;
    height:330px;
    z-index:1;
    left: 441px;
    top: 62px;
    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(headerlogin.JPG);
}
#footer{
    width:373px;
    height:40px;
    background-image: url(footer.JPG);
}
body {
    background-color: #99CCCC;
}
#apDiv4 {
    position:absolute;
    width:409px;
    height:221px;
    z-index:2;
    left: 426px;
    top: 411px;
}
</style>

** Nah sekarang kita masuk kedalam pengkodean PHP, yang di gunakan untuk mengecheck nilai dari input yang telah dimasukkan, letakkan kode ini jadi satu dengan kode diatas. 
Aturan peletakkan tepat dibawah kode </form>  :

<div id="apDiv4">
<?php
// digunakan untuk pengecheckkan apakah isi dari inputan user dan password berupa string dan apakah sudah benar atau tidak
if(is_string($_POST['user']) AND ($_POST['pass']))
{   
    if (($_POST['user']=='dwipriyatmoko')AND($_POST['pass']=='rahasia'))
    {
        echo 'Sukses, Anda Telah Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
        echo '<br>Hallo, Mr/Mrs ' . $_POST['user'];
    }
    else
    {
        echo "<script>alert ('Username atau Password Anda Kemungkinan Salah, Silahkan Mencoba Kembali...!!');</script>";
    }
   
}

?>
</div>

=> Pada kode php ini telah dijelaskan fungsinya, dan jika masukan anda bernilai benar dengan variabel yang tertulis pada code php tampilan aplikasi akan muncul seperti gambar dibawah :


Dan jika masukan yang anda ketikkan bernilai salah atau tidak sama dengan nilai variabel, akn muncul peringatan seperti pada gambar dibawah :


Setelah anda tekan OK, secara otomatis kursor akan aktif di text field yang sudah kosong, dan diharapkan anda mengisikan kembali.

** Nah untuk pembahasan kali ini cukup sekian, jika ada kesalahan, atau saran dari pembaca, saya harap untuk menuliskan didalam komentar. Terimakasih semoga bermanfaat

NB : Untuk elemen-lemen pendukung (Gambar) aplikasi ini dapat di download disini, dan file-file yang telah dibuat dengan kode diatas tadi jadikan didalam satu folder ini. Kemudian jalankan.
Diposkan oleh di No comments:
Label: , , ,

Tuesday, March 16, 2010

Membuat Tabel Fleksibel Dengan PHP

Pembuatan tabel fleksibel menggunakan Pemrograman PHP sangatlah penting, kita hanya perlu menggenerate row, coloum, maupun cell yang kita inginkan. berikut sekilas penjelasan tentang PHP (PHP: Hypertext Preprocessor) merupakan salah satu bahasa webscripting yang sangat powerful. Sejak pertama kali diperkenalkan, bahasa ini dimaksudkan untuk menghasilkan halaman-halaman web yang dinamis.
Hingga saat ini, PHP banyak sekali digunakan dalam membuat aplikasi web-baik lokal maupun Internet-dinamis dan atraktif.

Berikut saya akan membahas tentang bagai mana kita membuat program sederhana untuk men-generate sel tabel secara fleksibel. Tekniknya, buat sebuah fungsi yang menerima argumen berupa jumlah sel dan jumlah kolom. Jadi, pembentukan sel tabel didasarkan pada nilai jumlah sel dan jumlah kolom yang diberikan. Sebagai contoh, hasil program dengan argumen 12 (sel) dan 3 (kolom) diperlihatkan seperti pada gambar 1. mod4tgs2 :



Pada Gambar Tersebut Setelah Di Klik Generate Untuk Menghasilkan Tabel yang dinginkan sehingga dapat diperoleh hasil seperti pada gambar 2. mod4tgs2 :


Program sederhana tersebut diperoleh dari code berikut :

Mau Cari Uang Sendiri??? Mau Jajan Tanpa Minta Orang Tua??? click disini
Atau click banner ini...

 

>> Code berikut merupakan code PHP (tgsmod5.php), yang codenya tertulis sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hasil Generate Tabel</title>
</head>
<body>
<div align="center">
  <?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
 
  <?php $rows = (int) $_POST["JumlahRow"]; ?>
  <?php $columns = (int) $_POST["JumlahColum"]; ?>
  <?php $cells = (int) $_POST["JumlahCell"]; ?>
 
  <strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>rows,</em><br />
  <strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>columns,</em><br />
  <strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><br />
  <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>";
?>
</div>
</body>
</html>

>> Dan dilanjutkan denga code HTML untuk kelanjutan program diatas, sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table by_dwipriyatmoko</title>
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    width:178px;
    height:24px;
    z-index:1;
    left: 284px;
    top: 189px;
}
.style1 {
    color: #0000CC;
    font-weight: bold;
}
-->
</style>
</head>
<body>
<form method="post" action="tgsmod5.php">
  <h3 align="center" class="style1">__Tabel Fleksibel Dengan Generate Table__</h3>
  <div align="center">
    <table width="327" border="0" bgcolor="#FFFFFF">
      <tr bgcolor="#FFFFCC">
        <td width="121" style="text-align:center">Rows</td>
              <td width="196"><strong>=  </strong>
        <input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
            </tr>
      <tr bgcolor="#CCFFCC">
        <td style="text-align:center"><label>Columns</label></td>
        <td><strong>=  </strong>
        <input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
      </tr>
      <tr bgcolor="#FFFFCC">
        <td style="text-align:center">Cell Total </td>
        <td><strong>=  </strong>
        <input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td>
      </tr>
      <tr bgcolor="#CCFFCC">
        <td style="text-align:center">Max Cells </td>
        <td><strong>=  </strong>
        <input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td>
      </tr>
    </table>
  </div>
  <div id="apDiv1">
  <input type="submit" name="Generate" value="G e n e r a t e"><input type="reset" name="Reset" value="R e s e t">
  </div>
</form>
</body>
</html>

>> Dan ditambahkan untuk code javascript untuk program tersebut (apa itu javascript?? click here), sebagai berikut :

<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
    var R = parseInt(document.getElementById('JumlahRow').value);
    var C = parseInt(document.getElementById('JumlahColum').value);
    var X = parseInt(document.getElementById('JumlahCell').value);
    var cellmax = document.getElementById('maxcells');
    var total = 'N/A';
    total = R * C;   
    cellmax.value = new String(total);
    if (X > total)
    {
        alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
        document.getElementById('CellsTotal').value = new String();
    }
}
//-->
</script>


____Demikian penjabaran dari program sederhana diatas...jika ada kesalahan atau apa gitu, mari kita sharing...oke mamen...____
Diposkan oleh di No comments:
Label: , , , ,

Tentang Passing by Value dan by Reference

>> Passing by  Value

Secara  default, semua nilai yang di-pass masuk atau keluar dari fungsi  adalah passing by value, bukan by reference. ini berarti PHP membuat  nilai copy'an dari nilai original dan nilai copy'an itulah yang kita akses  dan kita manipulasi, bukan nilai originalnya. Dengan  begitu bagaimanapun kita ubah nilai itu, tidak akan mengubah nilai originalnya… 

 
 contoh: 


<?php 
function jumlah($nilai) 
{ 
$nilai++; 
} 
$input=5; 
jumlah($input); 
echo $input; 
?>

Penjelasan:

Pada  saat fungsi jumlah dipanggil,

jumlah($input);

Fungsi  tersebut akan memasukkan nilai dari variabel $input kedalam  argumennya, jadi disini argumen fungsi jumlah adalah 5 (ini adalah  nilai aslinya). selanjutnya PHP meng-copy nilai asli tersebut,  kemudian hasil copy'annya digunakan untuk proses manipulasi fungsi,  sedangkan nilai yang asli dibiarkan tidak berubah. Proses  manipulasinya sbb:

$nilai++;
$nilai = $nilai + 1
$nilai = 5  + 1
$nilai = 6

Untuk  output, 

echo $input;

nilai  variabel $input yang diambil disini adalah nilai variabel aslinya,  sehingga hasil manipulasi fungsi tadi tidak dipakai, karena bukan  nilai asli. Jadi outputnya adalah 5

Tampilan output:

5

tetapi  apabila menggunakan passing by reference akan bernilai 6. Bagaimana  outputnya akan bernilai 6? akan saya jelaskan lebih dahulu tentang  passing by reference.

>> Passing by  Reference
Berbeda  dengan passing by value yang bersifat mengkopi, passing by reference  memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan  contoh yang sama seperti diatas, kita akan modifikasi menjadi  mekanisme passing by reference.Untuk  mengubah jadi passing by reference, kita hanya cukup menambahkan  operator & pada argumennya.



Contoh:

<?php
function jumlah(&$nilai)
{
$nilai++;
}
$input=5;
jumlah($input);
echo $input;
?>

Penjelasan:

Sesuai  dengan penjelasan passing by reference diatas, nilai yang diakses &  dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi  fungsilah yang gunakan sebagai outputnya, yaitu 6.

Tampilan  Outputnya:

6

Demikian sedikit pengertian tentang Passing by Value dan by Reference pada PHP...Semoga Bermanfaat

Sumber : http://www.ilmuwebsite.com/
Diposkan oleh di No comments:
Label: , , ,

Saturday, March 6, 2010

Pengaplikasian Form Penjualan/Pembelian Menggunakan JavaScript

JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain. Selain itu biasa juga sering dipakai untuk memberi efek animasi pada halaman web kita.
JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self.
biasanya javascript di tulis dalam tag yang bisa di taruh dalam tag Head, atau body dari suatu halaman web page. Desain yang tampak diatas merupakan rancangan pembuatan dari contoh yang akan saya paparkan.


**Adapun source code dalam pengaplikasian Form Penjualan dan Pembelian yang Memanfaatkan JavaScript seperti yang akan saya jelaskan dibawah ini :**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>Warung Informatika_By : Dwipriyatmoko</title>
 

**Ini merupakan Code CSS dari HTML yang saya buat untuk memudahkan dalam penggunaan Style Dalam pengkodean saya...Adapun pembahasan yang lebih jelas dari postingankali ini saya yang membahas tentang CSS dapat anda pelajari di sini**
 
<style type="text/css">
<!--
.style1 {color: #0099FF}
.style3 {color: #0000FF}
.style4 {color: #FF9900}
.style5 {color: #FF0000}
.style7 {
    color: #FF0000;
    font-size: 18px;
    font-weight: bold;
}
.style9 {color: #0000FF; font-weight: bold; }
-->
</style>

**Selanjutnya, Ini merpakan pengkodean JavaScript yang telah saya buat untuk menghasilkan web seperti pada tampilan yang telah saya lampirkan, yang isinya mencakup tentang fungsi-fungsi yang saya butuhkan untuk menghasilkan HTML seperti pada gambar yang saya telah mengusahakan sebaik mungkin. Untuk cara peletakkan pengkodean dari JavaScript dapat seperti saya ini, ataupun anda letakkan setelah code <body>**
 
<script language = "JavaScript" type="text/JavaScript">
<!--
function warung()
{
    var catat = document.formwarung;
    var hargasatujam = parseInt(catat.satu.value) * parseInt(catat.satujamaa.value);
    var hargalimajam = parseInt(catat.lima.value) * parseInt(catat.limajamaa.value);
    var hargaroti= parseInt(catat.roti.value) * parseInt(catat.rotiaa.value);
    var hargajus = parseInt(catat.jus.value) * parseInt(catat.jusaa.value);
    var hargagoreng= parseInt(catat.goreng.value) * parseInt(catat.gorengaa.value);
    var hargasemua = hargasatujam + hargalimajam + hargaroti+ hargajus + hargagoreng;
    if (hargasemua > 50000)
    {
        catat.TotalBayar.value = hargasemua;
        catat.Diskon.value = 10000;
        catat.JumlahBayar.value = hargasemua - parseInt(catat.Diskon.value);
     }
     else
     {
        catat.TotalBayar.value = hargasemua;
        catat.Diskon.value = 0;
        catat.JumlahBayar.value = hargasemua;
    }   
}
function awal(){
document.formwarung.reset();
}
//-->
</script>
</head>

**Ini merupakan code HTMLnya,yang penggunaannya kali ini menggunakan form yang berupa 'textfield' yang peletakannya terdapat pada tabel, yang digunakan untuk mengambil nilai value dari input yang diisikan oleh user**

<body>
<h2 align="center" class="style1">DAFTAR MENU-HARGA WARUNG TIK</h2>
<form name="formwarung" action="#">
<table border="1" align="center" style="width:589">
<tr bgcolor="#FFCC00">   
<th style="width:27" scope="col">No</th>
<th style="width:181" scope="col">Daftar Menu</th>
<th style="width:185" scope="col">Harga</th>
<th style="width:166" scope="col">Order</th>
</tr>
<tr>
<td style="text-align:center"><strong>1.</strong></td>
<td><strong>Hotspot 1 Jam </strong></td>
<td><strong>@
<input type="text" name="satu" value="4500" size="20" disabled="disabled"/>
</strong></td>
<td><input name="satujamaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr style="background-color:#CCFF99">
<td style="text-align:center"><strong>2.</strong></td>
<td><strong>Hotspot 5 Jam </strong></td>
<td><strong>@
<input type="text" name="lima" value="18000" size="20" disabled="disabled"/>
</strong></td>
<td><input name="limajamaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr>
<td style="text-align:center"><strong>3.</strong></td>
<td><strong>Roti Bakar <span class="style5">&quot;Opera&quot;</span> </strong></td>
<td><strong>@
<input type="text" name="roti" value="10000" size="20" disabled="disabled"/>
</strong></td>
<td><input name="rotiaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr style="background-color:#CCFF99">
<td style="text-align:center"><strong>4.</strong></td>
<td><strong>Juice <span class="style3">&quot;Internet Explorer&quot;</span> </strong></td>
<td><strong>@
<input type="text" name="jus" value="12500" size="20" disabled="disabled"/>
</strong></td>
<td><input name="jusaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr>
<td style="text-align:center"><strong>5.</strong></td>
<td><strong>Gorengan <span class="style4">&quot;Mozilla&quot;</span> </strong></td>
<td><strong>@
<input type="text" name="goreng" value="1500" size="20" disabled="disabled"/>
</strong></td>
<td><input name="gorengaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr style="background-color:#FF99FF">
<td colspan="3" style="text-align:center"><strong>Jumlah Total</strong></td>
<td><input name="TotalBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"/></td>
</tr>
<tr>
<td colspan="3" style="text-align:center"><strong>Diskon )*</strong></td>
<td><input name="Diskon" type="text" style="text-align:center" disabled="disabled" value="-" size="20"/></td>
</tr>
<tr style="background-color:#FF99FF">
<td colspan="3" style="text-align:center"><strong>Jumlah Bayar</strong></td>
<td><input name="JumlahBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"/></td>
</tr>
</table>
<p align="center"><span class="style7">)* </span><span class="style9">: Menunjukkan Jumlah potongan dikarenakan Pemesanan telah melebihi Rp. 50.000,00. Potongan tidak berlaku kelipatan</span> <br/>
</p>
<div id="Layer1" style="position:absolute; width:166px; height:40px; z-index:1; left: 644px; top: 368px;">
<input type="button" value="B a t a l" onclick="awal()"/>
</div>
</form>
</body>
</html>

** Setelah dilakukan pengisian pada input pada form warung yang telah disediakan, fungsi dapat berjalan dengan baik sehingga tampak pada gambar dibawah ini **




**Demikian akhir pembahasan materi untuk postingan kali ini, untuk kali ini saya tidak menyediakan file downloadnya...Apabila dalam pencobaan code ini anda menemukan kesalahan, kekeliruan, kesulitan, atau apapun anda bisa menghubungi saya...terimakasih, Semoga bermanfaat. Jangan Lupa Komentarnya ya...**
Diposkan oleh di No comments:
Label: , , , ,

Monday, March 1, 2010

Desain Halaman Web Sederhana Menggunakan CSS

CSS adalah kepanjangan dari Cascading Style Sheets, yaitu sebuah halaman terpisah dari halaman web yang dipergunakan untuk pengaturan komponen style seperti font, warna, layout dan sebagainnya. CSS bekerja sebagai pelengkap pada HTML. Jika anda baru mempelajari HTML, maka cobalah untuk sekaligus belajar CSS. Dan anda akan terkejut dengan hasilnya..!!
CSS memungkinkan web developer untuk memisahkan HTML dari aturan-aturan untuk membentuk tampilan sebuah website. Tapi terkadang, banyak orang yang baru belajar HTML, menganggap remeh kekuatan dan fleksibilitas dari sebuah css. Banyak kegunaan CSS yang telah saya posting diwaktu sebelumnya, kilik disini untuk kembali ke Posting sebelumnya yang membahas tentang CSS

Update TGL 04-03-2009

Pembuatan Web seperti pada gambar dapat dipermudah dengan adanya CSS, berikut merupakan code CSS yang saya simpan dengan nama file mod3tgs2.css. Berikut Kodenya :


#wrapper {
margin: auto;
width: 997px;
border: 0;
}

#header {
height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('Header2.jpg');
}
#Gambarum {
float: left;
height: 63px;
width:61px;
margin-top:20px;
margin-left:50px;
border: 0;
background:red url('UM warna 3D.PNG');
}
#Te {
float: left;
height: 35px;
width:300px;
margin-top:35px;
margin-left:5px;
}
#aaaa {
float: right;
height: 120px;
width:400px;
border: 0;
}
#atas {
float: left;
height: 25px;
width:350px;
margin-left:30px;
margin-top:2px;
border: 0;
}
#search {
clear:both;
float: right;
height: 20px;
width:300px;
margin-top:67px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:120px;
margin-left:10px;
margin-top:4px;
border: 0;
}
#search2 {
float: right;
height: 17px;
width:110px;
margin-right:35px;
margin-top:4px;
border: 0;
background:0;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 250px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar.jpg');
}
#Inner2 {
float: left;
width: 745px;
height: 420px;
border: 0;
}
#top{
height: 80px;
border: 0;
background:blue url('header5.jpg');
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}
#right {
float: left;
width: 250px;
height: 200px;
margin-top:10px;
border: 1px solid green;
background:blue url('JuaraFutsal.jpg');
}
#Rightup {
float: left;
width: 250px;
height: 80px;
margin-top:3px;
border: 1px solid Blue;
background-color:#0066CC;
}
#Rightbot {
float: left;
width: 250px;
height: 26px;
margin-top:10px;
border: 0;

}
#footer {
clear: both;
height: 80px;
border: 1px solid blue;
background:blue url('Footer1.jpg');
}
.style2 {
    font-size: 24px;
    font-weight: bold;
    color: #000099;
}
.style3 {
    color: #0000CC;
    font-weight: bold;
}
.style4 {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
    color: #FFFFFF;
    font-weight: bold;
}
.style6 {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}
.style7 {color: #FFFFFF}
.style8 {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
}
.style10 {
color: #FFFFFF; font-size: 12px;
}
.style11 {
    color: #000066;
    font-weight: bold;
}
#leftmenu ul {
width: 250px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: blue url('button.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}

Untuk Koce HTML nya:

<!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>Desain Halaman Web By_Dwipriyatmoko</title>
<link rel="stylesheet" href="mod3tgs2.css" type="text/css" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="Gambarum">
        </div>
        <div class="style4" id="Te">TEKNIK ELEKTRO
        </div>
        <div id="aaaa">
            <div class="style6" id="atas">
              <div align="right" class="style7"><a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Home</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Sitemap</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">RSS</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Contact</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">About Us</a> </div>
            </div>
            <div id="search">
                <div class="style7" id="search1">
                  <div align="right"><em><strong>
                  Search
                    </strong></em></div>
                </div>
                <div id="search2">
                 
                      <input type="text" name="textfield" id="textfield" />
                   
                </div>           
          </div>
           
        </div>
    </div>
    <div id="inner">
        <div id="sidebar">
            <div id="leftmenu">
            <ul>
            <li>
              <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Home</a></div>
            </li>
            <li>
              <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">News &amp; Media </a></div>
            </li>
            <li>
              <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Tutorial</a></div>
            </li>
            <li>
              <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Tips and Trik</a></div>
            </li>
            <li>
              <div align="center"><a href="#">Download</a></div>
            </li>
            </ul>
            </div>
        </div>
        <div id="Inner2">
            <div id="top">
            </div>
            <div id="content">
              <p class="style2">Lomba Desain WE</p>
              <p class="style3">By : Dwipriyatmoko</p>
              <p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
                nisi ut aliquip ex ea commodo consequat.</p>
              <p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
              nisi ut aliquip ex ea commodo consequat. </p>
            </div>
            <div id="right">
            </div>
            <div id="Rightup">
              <p align="center" class="style8">Juara Pertama FUTSAL KAJUR CUP, PTI 07 </p>
            </div>
            <div id="Rightbot">
              <div align="center" class="style11"><u>TEKNIK ELEKTRO UM</u>
              </div>
            </div>
        </div>
    </div>
    <div id="footer">
      <p align="right" class="style10">Design By Dwipriyatmoko &copy; PTI 07 </p>
    </div>
</div>
</body>
</html>


Pembuatan Web diatas diperlukan banyak komponen pembangunnya, seperti gambar header, footer,dll. File pendukung maupun kode dapat di copas Terima kasih atas kunjungannya...semoga bermanfaat, jangan lupa comment'nya ya...mungkin kalau ada saran ataupun kritik...
Diposkan oleh di No comments:
Label: , , ,

Friday, February 26, 2010

Layout Web Sederhana Dengan Memanfaatkan <div>

Pada pemrograman web kita akan disuguhkan dalam penempatan fungsi <div>, penggunaan fungsi tersebut lumayan sedikit membuat kita berpikir, karena penempatan yang setting deffaultnya selalu pojok kiri ataupun pojok kanan.Pendekatan yang sangat tepat dalam penempatan, dan penggunaan fungsi <div> yakni dengan menggunakan CSS, apa itu CSS? Dalam posting sebelumnya saya telah membahas hal tersebut, klik disini untuk belajar apa itu CSS dibawah ini merupakan contoh sederhana dari sebuah desain web yang menggunakan fungsi <div>

Pembuatan desain seperti diatas lebih mudah dibuat dengan menggunakan CSS, dibawah ini merupakan code CSS dan Code HTMLnya untuk membuat desain web seperti diatas...
Code CSS yang disimpan dengan nama mod3tgs1.css:
#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#top{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}


Selanjutnya merupakan kode HTMLnya:
<!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>Desain_Layout_Halaman_Web_By_DwiPriyatmoko</title>
<link rel="stylesheet" href="mod3tgs1.css" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div id="header">
    Header</div>
    <div id="inner">
        <div id="sidebar">
        Sidebar
        </div>
        <div id="inner2">
            <div id="top">
            Top
            </div>
            <div id="content">
            Content
            </div>
            <div id="right">
            Right
            </div>
        </div>
    </div>
    <div id="footer">
    Footer
    </div>
</div>

</body>
</html>

Klik disini untuk mengunduh file html maupun file CSS-nya..

Terima kasih atas kunjungannya...semoga bermanfaat, jangan lupa comment'nya ya...mungkin kalau ada saran ataupun kritik...
Diposkan oleh di No comments:
Label: , ,

Saturday, February 20, 2010

Memanfaatkan Elemen Tabel, Pada Pemrograman Web

Kita sering menjumpai pada halaman web sering kali melihat penggunaan tabel, bagai manakah cara untuk membuat hal tersebut...

Mari kita belajar Pemrograman web dengan menggunakan pemanfaattan fungsi tabel...

1. Pemanfaatan sebagai grafik batang yang dapat ditunjukkan dari gambar dibawah ini
 

Adapun code yang didapat dari gambar diatas :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Untitled Document</title><style type="text/css"><!--
.style1 {
    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 14px;    color: #000000;
    font-weight: bold;    font-style: italic;}
body {    background-image: url(Vista_sbliss.jpg);}
.style3 {
    color: #FFFF00;    font-weight: bold;}
.style5 {
    color: #FF6600;    font-weight: bold;}
.style6 {
    color: #FF66CC;    font-weight: bold;}
.style7 {
    color: #CC0033;    font-weight: bold;}
.style8 {
    color: #FFFF00;    font-style: italic;    font-weight: bold;}
.style9 {
    color: #FF3300;    font-style: italic;    font-weight: bold;}
.style10 {
    color: #CC33CC;    font-style: italic;    font-weight: bold;}
.style11 {
    color: #CC0033;    font-style: italic;    font-weight: bold;}
.style12 {color: #FFFFFF}
-->
</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>
<p class="style1">Tabel yang digunakan dalam pembacaan fungsi Grafik Batang pada suatu Perusahaan</p><hr align="left" width="640">
<table width="634" border="0">  <tr>    <td width="321"><strong>Perusahaan</strong></td>    <td width="303"><strong>Pendapatan</strong></td>  </tr></table><hr align="left" width="640"><table width="643" border="0">
  <tr>    <td width="151"><span class="style3">Angin Reboot, Ltd </span></td>    <td colspan="3">&nbsp;</td>
    <td colspan="2"><table width="150" border="0" bgcolor="#FFFF00">
     .... Kelanjuttan File Code Dapat di Download disini


2. Desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.

Seperti pada gambar 
 
Code Untuk Pembuatannya :

<!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>Bermain Tabel Ke-2</title>
<style type="text/css">
<!--
.style3 {font-family: Geneva, Arial, Helvetica, sans-serif; font-weight: bold; }
.style4 {
    font-size: x-large;
    color: #FF0000;
}
.style5 {color: #FFFF00}
.style6 {color: #CC0000}
body {
    background-image: url(Vista_sbliss.jpg);
}
-->
</style>
</head>

<body>

<table width="470" border="0" align="center" >
  <tr>
    <td colspan="8" style="border-bottom:#000000 solid;"><div align="center" class="style4">Perbandingan Fitur </div></td>
  </tr>
  <tr>
    <td width="31"align="center"><span class="style3">No</span></td>
    <td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="208" align="center"><span class="style3">Fitur</span></td>
    <td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0">&nbsp;</td>
    <td width="92" align="center"><span class="style3">Enterprise</span></td>
    <td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="0"align="center"><span class="style3">Pro</span></td>
    <td width="0"align="center"><span class="style3">Free</span></td>
  </tr>

... Code selengkapnya dapat diDownload Di Sini

Semoga Bermanfaat...Setelah download jangan lupa kasih Comment ya...Terimakasih
Diposkan oleh di No comments:
Label: , , ,

Friday, February 12, 2010

Tugas 1 Pemrograman Berbasis Web

Ini sekedar tampilan yang akan keluar untuk Kode program yang akan saya tunjukkan dibawah screen shot dari gamabar dibawah ini :
 

Adapun kode program untuk membuatnya :
Diposkan oleh di No comments:
Label: , , ,
Subscribe to: Posts (Atom)
auto insurance, auto insurance quotes, auto insurance companies, auto insurance florida, auto insurance quotes online, auto insurance america, auto insurance comparison, auto insurance reviews, auto insurance calculator, auto insurance score, auto insurance quotes, auto insurance companies, auto insurance florida, auto insurance quotes online, auto insurance america, auto insurance comparison, auto insurance reviews, auto insurance calculator, auto insurance score, auto insurance ratings

Follow us on Facebook :P

Blogger news