Pages

Tampilkan postingan dengan label PTI 478 (Pemrograman Web). Tampilkan semua postingan
Tampilkan postingan dengan label PTI 478 (Pemrograman Web). Tampilkan semua postingan

Sabtu, 03 April 2010

Aplikasi Login Form Sederhana Tanpa Database dengan PHP

Untuk postingan kali ini, kita akan belajar untuk membuat aplikasi form login sederhana menggunakan PHP. Login form ini tidak menggunakan database. Password dan username langsung dimasukkan ke dalam kode program..
Spesifikasi untuk login form ini adalah:

>> 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.

Ok..script yang harus dimasukkan adalah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Login Form by_Rinda</title>


</head>

<body background="image.JPG" onLoad="document.form1.user.focus();">

<form name="form1" method="post" action="login.php">
<div width="400" height="400">

<div>

<div align="center"><font face="Arial" color="#FFFFFF" size="5"><strong><br>User Name :</strong>

<br>

<font face="Arial" color="#FFFFFF" size="5"><input type="text" name="user" size="35" value="" style="background-color:#FFFFFF">

<br>

<br>

<strong color="#FFFFF">Password : </strong>

<br>

<input type="password" name="pass" size="35" style="background-color:#FFFFFF">

<br>

<br>

</div>

</div>

<br>

<div align="center">

<input type="submit" name="submit" value=" L O G I N " onClick="check()">

</div>

<div id="footer" align="left"><br>


</div>

</div>
</div>
</form>

<script type="text/javascript">

function error1()
{
alert('Masukkan User Name dan Password Terlebih Dahulu ');
}

function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error1();
}
}
</script>

</body>

</html>

Simpan kode program di atas dengan nama login.html

Kemudian buat kode program phpnya:
<!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>Form Administrator</title>

</head>

<body>

<?php

if(($_POST['user']=='rinda') AND ($_POST['pass']=='rinda')) {

echo '<br><br><center>Selamat Datang di Halaman ini USER ' . $_POST['user'];

}

else {

echo "<br><br><br><body text='red'><strong><center>INVALID LOGIN<br><br><a href='login.html'><h4>Kembali ke Login</h4></a></center></strong></body>";

}

?>

</body>

</html>

Simpan kodenya dengan nama login.php
Setelah itu jalankan aplikasi login form ini melalui local host yang sudah diaktifkan..
Tampilan aplikasi login form sederhana tanpa database seperti pada gambar berikut:


Untuk aplikasi login di atas, username yang digunakan adalah rinda dengan password rinda
Selamat belajar :-)
Diposting oleh di Tidak ada komentar:
Label: ,

Sabtu, 20 Maret 2010

Generate Table Secara Fleksibel dengan HTML dan PHP

Setelah kita mengetahui sedikit pengetahuan tentang passing argumen pada PHP, saatnya kita menggabungkan script pada HTML dengan scriptnya PHP.
Hew, serasa apa gitu ya digabung-gabung..wkwkkwk..
Tapi dengan memasukkan script PHP ke dalam script HTML, kita dapat membuat generate tabel secara fleksibel.
Langkah-langkah yang perlu kita lakukan adalah sebagai berikut.

Buat script HTMl dulu dengan nama tbl.html
Script lengkapnya adalah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table Secara Fleksibel</title>
</head>

<body>
<h3 align="center" >Generate Tabel Secara Fleksibel</h3><br />
<form name="frmtabel" method="post" action="tbl.php">
<div align="center">
Baris :
<input name="baris" type=text id="baris" onKeyUp="getmax();" onfocus="this.select();"/>
||||| Kolom :
<input name="kolom" type=text id="kolom" onKeyUp="getmax();" onfocus="this.select();"/>
||||| Sel :
<input name="sel" type=text id="sel" onKeyUp="getmax();" onfocus="this.select();"/><br />
<br />
Maksimal Sel :
<input name="maks" type=text id="maks" disabled="disabled"/><br/>

<br/><input name="enter" type=submit value="Generate"/><br/>
<br/><input name="reset" type=reset value="Reset"/><br/>
</div>
</form>
</body>

<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var myForm = document.frmtabel;
var B = eval(myForm.baris.value);
var K = eval(myForm.kolom.value);
var S = eval(myForm.sel.value);
var cellmax = myForm.maks;
var total = 'N/A';
total = B * K;
cellmax.value = new String(total);
if (S > total)
{
alert('Nilai Sel Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Sel = ' + total);
myForm.total.value = new String();
}
}
//-->
</script>
</html>

Setelah membuat script HTML sperti di atas, berikutnya buat script PHPnya..
Simpan script ini dengan nama tbl.php
Script lengkapnya adalah:
<!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["baris"]; ?>
<?php $columns = (int) $_POST["kolom"]; ?>
<?php $cells = (int) $_POST["sel"]; ?>

<br />
<strong>Jumlah baris yang diisikan</strong> <?php echo $rows; ?> <em>rows</em><br />
<strong>Jumlah kolom yang diisikan</strong> <?php echo $columns; ?> <em>columns</em><br />
<strong>Jumlah sel yang diperlukan</strong> <?php echo $cells; ?> <em>cells</em><br />
<br />
<strong>Hasil Generate Tabel</strong>
<br />
<br />

<?php
$width = $columns * 80;
echo "<table width=".$width." border=2>";
$ro = 0;
$cel = 1;
while ($ro < $rows && $cel <= $cells)
{
echo "<tr>";
$co = 0;
while ($co < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$co++;
}
echo "</tr>";
$ro++;
}
echo "</table>";
?>

</div>
</body>
</html>

Hwaa..selesai dehh penulisan scriptnya..Jika ingin menjalankan script ini, jangan lupa untuk mengaktifkan local hostnya..Lalu panggil script dengan nama tbl.html
Selamat mencoba ya..^^

Berikut ini tampilan awal halaman web Generate Table Secara Fleksibel dengan HTML dan PHP.




Misalnya kita memasukkan suatu nilai pada Baris, Kolom dan Sel..maka tampilannya adalah:


Untuk menghasilkan tabel yang fleksibel, klik langsung pada button Generate. Maka tabel yang diharapkan sudah terbentuk. Tampilannya adalah:


Jika kita ingin memasukkan nilai Baris, Kolom dan Sel yang berbeda atau ingin mengulang lagi, langsung aja klik Reset.

Pada pembuatan tabel ini, jumlah nilai Sel yang dimasukkan tidak boleh melebihi Total Sel yang tersedia. JIka kita memasukkan nilai Sel yang lebih besar daripada Total Sel yang tersedia, maka akan muncul message box seperti berikut:
Diposting oleh di Tidak ada komentar:
Label: ,

Passing Argumen di PHP

PHP (PHP: Hypertext Preprocessor) merupakan salah satu bahasa web-
scripting 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.
PHP sendiri dibuat oleh Rasmus Lerdorf, PHP bersifat open source dan telah digunakan oleh hampir seluruh web developer di seluruh dunia, situs resmi php bisa dikunjungi di www.php.net. Karena sifatnya yang open source dan semakin banyaknya user membuat bahasa pemprogaman ini mengalami perkembangan yang sangat cepat.

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.

Ketika pass-by-values terjadi, method membuat sebuah salinan dari nilai variable yang dikirimkan ke method. Walaupun demikian, method tidak dapat secara langsung memodifikasi nilai variabel pengirimnya meskipun parameter salinannya sudah dimodifikasi nilainya di dalam method.

Contoh kode passing by value:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fungsi Pass By Value</title>
</head>

<body>
<p>Hasil Pengolahan Fungsi Pass By Value</p>
<?php
function jumlah($nilai) {
$nilai++;
}
$input=30;
jumlah($input);
echo $input;
?>
</body>
</html>

Simpan kode di atas dengan nama passbyval.php
Keterangan:
Pada fungsi jumlah($input); jumlah dipanggil, fungsi tersebut akan memasukkan nilai dari variabel $input kedalam argumennya, jadi disini argumen fungsi jumlah adalah 30. Selanjutnya PHP meng-copy nilai asli tersebut, kemudian hasil copy-nya digunakan untuk proses manipulasi fungsi, sedangkan nilai yang asli dibiarkan tidak berubah. Proses manipulasinya yaitu:

$value++;
$value = $value + 1
$value = 30 + 1
$value = 31
Untuk output,
echo $input;

Passing by value tidak merubah nilai variabel aslinya jika nilai argumen dalam fungsi berubah. Jadi outputnya adalah 30.
Tampilan output:




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.
Untuk mengubah jadi passing by reference, kita hanya cukup menambahkan operator & pada argumennya.

Contoh kode passing by reference:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fungsi Pass By Reference</title>
</head>

<body>
<p>Hasil Pengolahan Fungsi Pass By Reference</p>
<?php
function jumlah(&$nilai) {
$nilai++;
}
$input=30;
jumlah($input);
echo $input;
?>
</body>
</html>

Simpan kode di atas dengan nama passbyref.php
Pada passing by reference, nilai yang diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi fungsilah yang gunakan sebagai outputnya, yaitu 31.
Tampilan output:




Smoga info mengenai passing argumen pada PHP ini bermanfaat :-)
Diposting oleh di Tidak ada komentar:
Label: ,

Rabu, 10 Maret 2010

Membuat Form Pemesanan Makanan menggunakan Java Script

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.
Waa..apa itu scripting??? terdengar ngerii...wkwkkwk..



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.
Yup..pada bagian ini, kita akan belajar membuat form pemesanan makanan dengan menggunakan java script. Pembuatan form pemesanan makanan ini akan membantu pemilik warung/restoran untuk menghitung nota pemesanan dengan mudah n tidak perlu menggunakan kalkulator..
Satu lagi,,form yang sudah terisi dengan daftar harga pemesanan makanan juga dapat dikosongkan kembali cukup dengan mengklik button "Batal" yang sudah disusun menggunakan kode reset value.
Untuk kolom Harga dan Total,,otomatis terisi ketika kolom Pesan diisi. Jadi tidak bisa diisi secara manual karena fungsinya di disable..
Berikut ini adalah kode lengkap pembuatan form pemesanan makanan menggunakan java script.

</br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Form Pemesanan Berbasis JavaScript</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var myForm = document.form1;
var bakso = 12000 * eval(myForm.menu1.value);
var soto = 10000 * eval(myForm.menu2.value);
var mie = 15000 * eval(myForm.menu3.value);
var degan = 5000 * eval(myForm.menu4.value);
var campur = 7000 * eval(myForm.menu5.value);
var hasil = bakso + soto + mie + degan + campur;
if (hasil > 50000){
myForm.Total.value = hasil;
myForm.Diskon.value = 10000;
myForm.Bayar.value = hasil - 10000;
} else {
myForm.Total.value = hasil;
myForm.Diskon.value = 0;
myForm.Bayar.value = hasil - 0;
}

myForm.bayar1.value=bakso;
myForm.bayar2.value=soto;
myForm.bayar3.value=mie;
myForm.bayar4.value=degan;
myForm.bayar5.value=campur;
}

//-->
</script>
<h3>Nota Pemesanan Makanan</h3>
<form name="form1" action="#">
<table border="5">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
<th>Total</th>

</tr>
<tr>
<td width="15">1</td>
<td width="200">Bakso Istimewa</td>
<td width="150">@<input type="text" name="bakso" value="12000" size="15" disabled="true"/></td>
<td width="150"><input type="text" name="menu1" value="0" onChange="hitungPesan()"/></td>
<td width="150" align="right"><input type="text" name="bayar1" disabled="true"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="soto" value="10000" size="15" disabled="true"/></td>
<td><input type="text" name="menu2" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar2" disabled="true"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="mie" value="15000" size="15" disabled="true"/></td>
<td><input type="text" name="menu3" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar3" disabled="true"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="degan" value="7000" size="15" disabled="true"/></td>
<td><input type="text" name="menu4" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar4" disabled="true"/></td>
</tr>
<tr>
<td>5</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="hitungPesan()"/></td>
<td><input type="text" name="bayar5" disabled="true"/></td>
</tr>
<tr>
<td colspan="4" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan="4" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan="4" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="reset" value="Batal" />
</form>
</body>
</html><
Ok..selamat mencoba..:-)
Diposting oleh di 2 komentar:
Label: ,

Sabtu, 06 Maret 2010

Membuat Desain Halaman Web Atraktif (2)

Setelah kita berhasil membuat layout halaman web dengan division, kita dapat mengembangkan layout tersebut menjadi sebuah halaman web yang atraktif.
Halaman web yang akan dibahas disini adalah halaman web sederhana sehingga mudah untuk dibuat.

Seperti sebelumnya, karena kita bekerja menggunakan CSS, maka terlebih dahulu kita buat file CSS dengan nama template.css
Kode selengkapnya seperti di bawah ini.



Setelah itu kita membuat kode html dengan nama template.html
Kode selengkapnya seperti di bawah ini.



Setelah mengetikkan kode-kode di atas, kita dapat menjalankan file template.html dengan browser yang sudah ada. Jangan lupa untuk mengaktifkan local hostnya.
Tampilan desain halaman web sederhana yang atraktif dapat dilihat seperti gambar di bawah ini.



Perlu diketahui pula bahwa dalam pembuatan desain web di atas, kita memerlukan beberapa sumber gambar.
Diposting oleh di 1 komentar:
Label:

Jumat, 05 Maret 2010

Membuat Desain Layout Web Memanfaatkan CSS (1)

Jika pada pembahasan sebelumnya kita membuat desain web menggunakan HTML saja, maka pada postingan kali ini kita akan membahas bagaimana cara membuat desain layout halaman web menggunakan CSS (Cascading Style Sheet). Wew,,apa itu CSS??
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

Rekomendasi CSS menguraikan tiga jenis style:
- Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
- Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
- Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak
disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Ok,,udah tau sekilas tentang CSS kn??so,,udah gk gitu ngeri lagi klu dengar kata-kata CSS.

Untuk membuat desain web dengan CSS ini,,kita harus mengetikkan kode yang disimpan dengan ekstensi css. Untuk pembahasan kali ini,,file css yang kita gunakan kita beri nama layout.css

Kode lengkapnya seperti di bawah ini.



Jika sudah mengetikkan kode di atas, maka kita perlu untuk mengetikkan kode dengan ekstensi html. Dalam pembuatan desain web kali ini file html yang kita gunakan diberi nama layout.html
Kode lengkapnya seperti di bawah ini.



Setelah mengetikkan kode di atas, maka jalankan file layout.html melalui browser yang tersedia. Jangan lupa untuk mengaktifkan local host yang akan digunakan.
Tampilan desain layout halaman web CSS dengan division seperti pada gambar di bawah ini.
Diposting oleh di Tidak ada komentar:
Label:

Rabu, 24 Februari 2010

Modul 2 Komponen HTML Lanjut (2)

Untuk komponen HTML lanjut berikutnya adalah membuat desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.
Pembuatan desain tabel ini menggunakan kode HTML seperti halnya membuat tabel biasa, namun dengan modifikasi pada beberapa bagian.

Tabel ini terdiri dari beberapa kolom dan baris. Pada baris ke 6, diberikan tambahan garis horizontal yang tergabung menjadi satu kesatuan dengan tabel. Screen shoot tampilan halaman web desain tabel dapat dilihat pada gambar di atas.

Untuk membuat tampilan seperti pada screen shoot di atas, kode HTML yang harus dimasukkan adalah sebagai berikut.

Diposting oleh di Tidak ada komentar:
Label:

Modul 2 Komponen HTML Lanjut (1)

Pada pembahasan komponen HTML lanjut ini, kita akan belajar untuk membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel.
Pembuatan grafik batang menggunakan kode HTML ternyata tidak sesulit yang dibayangkan.


Kita bisa mengatur panjang dan lebar masing-masing batang statisnya. Selain itu, kita juga dapat memberikan warna backcolour pada masing-masing batang statis.
Pembuatan kreasi grafik batang statis ini menggunakan elemen tabel yang dimerge menjadi satu.
Gambar di atas adalah screen shoot tampilan halaman web kreasi grafik batang statis dengan memanfaatkan elemen tabel.


Diposting oleh di Tidak ada komentar:
Label:

Selasa, 16 Februari 2010

Modul 1 Membuat Halaman Web Sederhana


Membuat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar.

Untuk memberikan heading pada tampilan halaman web sederhana, gunakan code
&ltbr/>

<head> <title>Modul 1 PEMROGRAMAN BERBASIS WEB</title></head>


Untuk memberikan background image pada halaman web, kita dapat menggunakan code

&ltbr/>

<body background ="siip.jpg">



Dalam hal ini, kita mengimpor file gambar dengan nama siip.jpg dari direktori kita.


Untuk menambahkan teks, langsung ketikkan teks yang diingankan di bawah body, misalnya kita ingin menambahkan tulisan "Halaman Web Sederhana" dengan format Bold, maka code yang harus diketikkan adalah


&ltbr/>

<b>Halaman Web Sederhana



Untuk memberikan garis horizontal berwarna, code html yang harus dituliskan adalah


&ltbr/>

<hr style = "color:#0000FF">



Code di atas menghasilkan garis horizontal dengan warna biru.


Pemberian garis horizontal dapat ditentukan sendiri ukuran panjangnya, yaitu dengan code
&ltbr/>

<hr style = "color:#0000FF" align="right" width="200">



Code di atas menghasilkan garis horozontal dengan align right dan width 200 berwarna biru.


Untuk menuliskan teks berwarna dapat menggunakan code


&ltbr/>

<span style="color:#800000;"><b>Rinda Wahyu Iksanti



Kita dapat menyisipkan gambar yang memiliki border, misalkan foto ke dalam halaman web dengan menggunakan code


&ltbr/>

<img src="baby.jpg" align="right" border="8/" />



Pada screen shoot halaman web di atas, source code lengkap yang digunakan adalah

Diposting oleh di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)