RSS

Category Archives: PTI478

Membuat Login Form sederhana

Pemrosesan  form  (form  processing)  merupakan  operasi  mendasar  pada  aplikasi  web.  Dalam  konteks  pengembangan  aplikasi  web  dinamis,  langkah  ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu  diperlukan  sekali  form  isian  dan  cara  pemrosesannya.  Begitu  pula halnya  ketika  administrator  ingin  masuk  ke  sistem,  tentu  memerlukan  suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak  diperlukan dalam membangun aplikasi web yang interaktif.

Berikut ini adalah cara untuk membuat login form tanpa menggunakan database.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>

<head>

<title>Login Form Koala</title>

<style>

#apDiv1 {

position:absolute;

width:380px;

height:330px;

z-index:1;

left: 449px;

top: 136px;

background-color: #81A9F6;

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:380px;

height:98px;

background-image: url(way.jpg);

}

#footer{

width:380px;

height:40px;

background-image: url(way.jpg);

}

body {

background-image: url(koala.jpg);

}

</script>

</head>

<body onLoad=”document.form1.user.focus();”>

<form method=”post” action=”check.php”>

<div>

<div>

</div>

<div>

<div align=”center”><strong><br>User Name :</strong>

<br>

<input name=”user” size=”35″ value=”” style=”background-color:#C9EFF6″>

<br>

<br>

<strong>Password : </strong>

<br>

<input name=”pass” size=”35″ style=”background-color:#C9EFF6″>

<br>

<br>

</div>

</div>

<br>

<div>

<input name=”submit” value=” E N T E R ” onClick=”check()”>

</div>

<div align=”left”><br>

</div>

</div>

</form>

</body>

</html>

Sedangkan untuk memberikan warning kepada user untuk mengisi nama dan password,

Gunakan script seperti di bawah ini (masukkan dalam body):

</style>

<script>

function error1()

{

alert(‘Masukkan User Name dan Password Terlebih Dahulu ‘);

}

function check()

{

if(form1.pass.value == “” || form1.user.value==””)

{

error1();

}

}

Simpan dengan nama case1.html. Jika dijalankan, akan tampil seperti gambar di bawah ini

Selanjutnya, buat PHP sebagai simulasi verifikasi data yang dimasukkan. Karena tidak menggunakan database, maka data diikutkan dalam script. Pada kesempatan kali ini, id yang digunakan adalah “michael buble” dan password-nya adalah “190389”

Script yang digunakan sebagai berikut:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Form Admin</title>

</head>

<body>

<?php

if(($_POST[‘user’]==’michael buble’) AND ($_POST[‘pass’]==’190389′)) {

echo ‘Halo selamat datang. Semoga hari Anda menyenangkan, ‘.$_POST[‘user’];

}

else {

echo “<br><br><br><body text=’red’><strong><center>Id dan Password salah, silahkan coba lagi.

<br><br><a href=’case1.html’><h4>Kembali Ke Login</h4></a></center></strong></body>”;

}

?>

</body>

</html>

Script ini berfungsi mendeteksi kesalahan dalam memasukkan nama atau password. Jika id dan password benar, akan muncul seperti gambar di bawah ini:

Dan jika salah, akan memunculkan peringatan salah. Seperti ini:

Namun jika salah satu kolom tidak terisi, javascript sebagai warning akan muncul seperti ini:

-selamat mencoba-

 
3 Comments

Posted by on April 1, 2010 in Dunia Kampus, PTI478

 

Passing By Value and Passing By Reference

1.PASSING BY VALUE
Argumen fungsi yang dilewatkan secara pass by value (default dalam php) berarti membuat copy dari argumen yang asli sehingga argumen asli tersebut tidak ikut berubah dengan adanya proses pada fungsi terhadap argumen tersebut.
Secara default, semua nilai yang di-pass masuk atau keluar dari fungsi adalah passing by value, bukan by reference. Ini berarti PHP membuat copian dari nilai original dan nilai copian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya. Dengan begitu bagaimanapun kita ubah nilai itu, tidak akan mengubah nilai originalnya.

Sintaks:

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

Simpan dengan nama passing by inputvalue.php

hasilnya? Yah seperti gambar di bawah ini…

2.PASSING BY REFERENCE
Argumen fungsi yang dilewatkan secara pass by reference berarti membawa argumen asli ke dalam fungsi sehingga argumen asli tersebut akan ikut berubah dengan adanya proses pada fungsi terhadap argumen tersebut.
Berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi. Untuk mengubah jadi passing by reference, kita hanya cukup menambahkan operator & pada argumennya.

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

Simpan dengan nama passing by inputref.php

Hasilnya seperti ini (gambar yang di bawah tulisan ini)…

i-Good Luck-

 
Leave a comment

Posted by on March 25, 2010 in PTI478

 

PROGRAM SEDERHANA “GENERATE TABEL”

Untuk 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 2(sel) dan 2 (kolom). Maka Sintax untuk program tersebut adalah

<body>
<form method=”post” action=”tabelku.php”>
<p><font color=”F28500″ face=”comic sans ms” size=”5″><strong>GENERATE TABEL</strong></p>
<table width=”277″ border=”0″>
<tr>
<td width=”89″>Jumlah Baris</td>
<td width=”172″><strong>: </strong><input name=”totalBaris” type=”text” id=”totalBaris” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td><label>Jumlah Kolom</label></td>
<td><strong>: </strong><input name=”totalKolom” type=”text” id=”totalKolom” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td>Jumlah Sel</td>
<td><strong>: </strong><input name=”totalSel” type=”text” id=”totalSel” onKeyUp=”getmax();” onFocus=”this.select();”></td>
</tr>
<tr>
<td>Sel Maksimal</td>
<td><strong>: </strong><input name=”jmlSelMax” type=”text” id=”jmlSelMax” readonly=”true” 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>
<br>

<script language=”JavaScript” type=”text/javascript”>
<!–
function getmax() {
var R = parseInt(document.getElementById(‘totalBaris’).value);
var C = parseInt(document.getElementById(‘totalKolom’).value);
var X = parseInt(document.getElementById(‘totalSel’).value);
var cellmax = document.getElementById(‘jmlSelMax’);
var total = 0;
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert(‘Jumlah sel yang anda inginkan melewati batas maksimal sel =’ + total);
document.getElementById(‘totalSel’).value = new String();
}
}
//–>
</script>

maka hasilnya akan nampak seperti berikut:

kemudian isikan jumlah baris, kolom dan sel yang ingin dibuat..misalkan jumlah baris isikan 2, jumlah kolom 2 dan sel 2. hasil tabel yang dapat di generate adalah seperti gambar di bawah….

-Good Luck-

 
Leave a comment

Posted by on March 25, 2010 in PTI478

 

Membuat Form Pemesanan Dengan JavaScript

Banyak program aplikasi yang dapat dibuat menggunakan Javascript. Salah satunya adalah  program aplikasi form pemesanan makanan/minuman. Program alikasi ini dapat dimanfaatkan oleh berbagai warung atau rumah makan untuk memudahkan pelayanan terhadap customer

Adapun program aplikasi pemesanan makanan/minuman yang dibuat memiliki spesifikasi antara lain:

  • Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
  • Jika  pesan  disi,  maka  field  jumlah  total  secara  otomatis  akan menghitung totalnya, termasuk juga field jumlah dibayar.
  • Rumus:

Jumlah Total = ∑ (harga * pesan)

Jumlah Dibayar = Jumlah Total – Diskon

  • Jika  pembelian  lebih  dari  50000,  maka  field  diskon  secara  otomatis akan  berisi  nilai  diskon  sebesar  10000  (tidak  berlaku  kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang
  • Jika tombol Batal diklik, maka semua field Pesan akan dibersihkan

Tampilan program aplikasi pemesanan makanan/minuman tampak seperti gambar dibawah ini

Untuk Source Code dan JavaScriptnya, kurang lebih seperti ini:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html>

<head>

<title>Rumah Makan Spesial</title>

</head>

<body>

<script language=”JavaScript”>

<!–

function hitungPesan(){

var nota = document.form2;

var hargaBakso = 12000 * eval(nota.qBakso.value);

var hargaSoto = 10000 * eval(nota.qSoto.value);

var hargaMie = 15000 * eval(nota.qMie.value);

var hargaDegan = 5000 * eval(nota.qDegan.value);

var hargaCampur = 7000 * eval(nota.qCampur.value);

var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if (jumlahTotal > 50000){

nota.Total.value = jumlahTotal;

nota.Diskon.value = 10000;

nota.Bayar.value = jumlahTotal – eval(nota.Diskon.value);

} else {

nota.Total.value = jumlahTotal;

nota.Diskon.value = 0;

nota.Bayar.value = jumlahTotal – eval(nota.Diskon.value);

}

}

function resetForm(){

document.form2.reset();

}

//–>

</script>

<h4>FORM PEMESANAN BERBASIS JAVASCRIPT</h4>

<form action=”#”>

<table border=”1px”>

<tr bgcolor=”#298F00″>

<th>No</th>

<th>Makanan/Minuman</th>

<th>Harga</th>

<th>Pesan</th>

</tr>

<tr>

<td>1</td>

<td>Bakso Istimewa</td>

<td>@ <input type=”text” value=”12000″ size=”6″ disabled=”true”/></td>

<td><input name=”qBakso” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>2</td>

<td>Soto Spesial</td>

<td>@ <input type=”text” value=”10000″ size=”6″ disabled=”true”/></td>

<td><input name=”qSoto” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>3</td>

<td>Mie Ayam Super</td>

<td>@ <input name=”mie” value=”15000″ size=”6″ disabled=”true”/></td>

<td><input name=”qMie” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>4</td>

<td>Es Degan</td>

<td>@ <input type=”text” value=”7000″ size=”6″ disabled=”true”/></td>

<td><input name=”qDegan” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>5</td>

<td>Es Campur</td>

<td>@ <input type=”text” value=”7000″ size=”6″ disabled=”true”/></td>

<td><input name=”qCampur” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr bgcolor=”#298F00″>

<td colspan=”3″ align=”right”>Jumlah Total</td>

<td><input name=”Total” disabled=”true” /></td>

</tr>

<tr bgcolor=”#298F00″>

<td colspan=”3″ align=”right”>Diskon</td>

<td><input name=”Diskon” disabled=”true” /></td>

</tr>

<tr bgcolor=”#298F00″>

<td colspan=”3″ align=”right”>Jumlah Dibayar</td>

<td><input name=”Bayar” disabled=”true” align=”right”/></td>

</tr>

</table><br/>

<input type=”button” value=”BATAL” />

</form>

</body>

</html>

 
Leave a comment

Posted by on March 11, 2010 in PTI478

 

Membuat Kalkulator Dengan JavaScript

Sebagaimana  diketahui,  HTML  merupakan  model  dokumen  yang  statis—

begitu ditampilkan tidak akan berubah sampai ada aktivitas navigasi. Adapun

untuk  menjadikan  HTML  sebagai  halaman  dinamis  atau  aktif,  kita  bisa

memanfaatkan bahasa scripting.

Scripting  merupakan  jenis  lain  dari  pemrograman,  yang  umumnya  lebih

mudah  dipahami.  Script  dapat  disisipkan  ke  dalam  dokumen  HTML  dengan

menggunakan  tag  <script>.  Tidak  seperti  style  sheet,  script  bisa  terlihat  di

dalam <head> ataupun <body>.

DHTML  (Dynamic  HTML)  merupakan  suatu  teknik  untuk  menciptakan

halaman  web  yang  interaktif  dengan  cara  mengombinasikan  elemen-elemen

seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis

bahasa  pemrograman  melainkan  hanya  sekadar  istilah  saja.  Pada  bagian  ini,

pembuatan DHTML akan dilakukan dengan memanfaatkan JavaScript.

Berikut contoh Source Code membuat kalkulator sederhana menggunakan JavaScript:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//

EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html>

<head>

<title>Kalkulator</title>

</head>

<body>

<script language=”JavaScript”>

<!–

function hitung(){

var myForm = document.form1;

var x=eval(myForm.x.value);

var y=eval(myForm.y.value);

var pil= myForm.opt.value;

if (pil == “tambah”) {

var z = x + y;

}else if (pil == “kurang”) {

var z = x – y;

} else if (pil == “kali”) {

var z = x * y;

} else if (pil == “bagi”) {

var z = x / y;

}

myForm.hasil.value = z;

myForm.x.value = “”;

myForm.y.value = “”;

}

function resetForm(){

document.form1.reset();

}

//–>

</script>

<form action=”#”>

<input name=”x” />

<select>

<option value=”tambah”> + </option>

<option value=”kurang”> – </option>

<option value=”kali”> * </option>

<option value=”bagi”> / </option>

</select>

<input name=”y” /><br/>

<input value=”=” />

<input name=”hasil” disabled=”true” /><br/>

<br/><input type=”button” value=”RESET” /> <br/><br/>

<hr/>

<font color=”blue” face=”comic sans ms” size=”3″>

Pendidikan Teknik Informatika’07 FT UM</font>

</form>

</body>

</html>

Hasil dari Source Code tersebut tampak pada gambar di bawah ini:


 
3 Comments

Posted by on March 11, 2010 in PTI478

 
 
The Way I Am

Live everyday as if it was your last

Some Good Eats

Eat and don't worry about it

Anggriani

Bacalah! Tulislah !

Padepokan Budi Rahardjo

belajar untuk menjadi manusia ...

Catatanku

Ini adalah album yang berisi catatan yang saya tulis dalam perjalanan waktu hidup. Catatan yang terinspirasi dari apa yang saya lihat, saya baca, saya dengar, dan saya rasakan.

Catatan Bang Akrie

Simplicity.Humble.Joyfull