Puji Riswanti: 2010

Senin, 29 Maret 2010

PEMROSESAN FORM

Keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang interaktif. 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.

Pada aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP, parameter-parameter GET dapat dibaca melalui superglobal $_GET, sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.

Berikut ini merupakan contoh aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. Yang menggunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan.

Sintaks:
File css.- nya
body {
margin-left: 0px;

margin-right: 0px;
margin-bottom: 0px;
background-color:black;
}

a:visited {
color: #009900;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active {
color: #009900;
text-decoration: none;
}

#ajax_display { position: absolute;top:5px; width:100%; text-align: Left; font-family:Geneva, Arial, Helvetica, sans-serif;font-size:11px; z-index: 5; }

#mainPan{
width:300px;
position:relative;
margin:0 auto;
}

fieldset { border:solid 3px #ccc;padding:20px;}
legend {padding:0 15px 0 10px;font:bold .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#666;text-transform:uppercase;border:1px solid #ccc;background:#f4f4f4;letter-spacing:2px}
.input {0 0 repeat-x; border:solid 1px #cccccc;}
.submit { border:solid 1px #cccccc; 0 0 no-repeat #f4f4f4; padding-left:30px; height:35px; color:#660000;margin-left:55px; }
label { width:140px;color: #660000; }

di Link-an ke Login.php
sintaknya:
<!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">
<?
session_start();
//periksa apakah user telah login atau memiliki session
if(!isset($_SESSION[â��userâ��]) || !isset($_SESSION[â��passwdâ��])) {
?><script language=â��javascriptâ��>alert(â��Anda belum login. Please login duluâ��);
document.location=â��login.phpâ��</script><?
} else {
?>
<html>
<head>
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="746" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="746" height="23" align="center" valign="top"><font face="Verdana, Arial,
Helvetica, sans-serif"><? echo $_SESSION['user'] ?> <a
<strong>LOGOUT</strong></a></font></td>
</tr>
<tr>
<td height="88"> </td>
</tr>
<tr align="center" valign="middle">
<td height="33"<font color="Blue" size="5" face="Arial, Helvetica, sans-serif">SELAMAT DATANG !</font></td>
</tr>
<tr>
<td height="62"> </td>
</tr>
</table>
</body>
</html>

sintaks Indeks.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="ajax_display"></div>

<div id="mainPan">

<form action="login.php" method="post" name="login">
<fieldset>
<legend>Login</legend>
<p>
<label>UserName: </label>
<input type="text" class="input" name="usern" />
</p>
<p>
<label>PassWord: </label>
<input type="password" class="input" name="passw" />
</p>
<input type="submit" value="Login" class="submit" name="login" />
</fieldset>
</form>

</div>
</div>

</body>
</html>

dan hasilnya:

selamat mencoba ya....

Sabtu, 13 Maret 2010

PASSING BY VALUE VS PASSING BY REFERENCE

A.PASSING BY VALUE VS 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.

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

Simpan dengan nama misal function.php

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-nya 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.
Hasil:

Tetapi apabila menggunakan passing by reference akan bernilai 6.

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, 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.
Sintaks:

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

Simpan dengan nama Function2.php

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.

Hasil:

Contoh Lain:
Sintaks:

<?php
function add_some_extra (& $string )
{
$string .= Reference.' ;
}
$str = 'Passing by ' ;
add_some_extra ( $str );
echo $str ; // outputs 'Passing by Reference.'
?>

Simpan dengan nama Passing.php

Hasil:

B.Definisi
1.Fungsi merupakan subprogram/subrutin program yang terdiri dari sekumpulan perintah yang akan melaksanakan suatu tugas tertentu
2.Fungsi memungkinkan program menjadi lebih terstruktur dan juga memudahkan pelacakan kesalahan.
3.Menggunakan fungsi akan mempersingkat waktu pemrogram untuk menuliskan sekumpulan perintah yang sama berkali-kali.

Sintaks:

function nama_fungsi ($arg1, $arg2,..., $arg_n)
{
blok pertanyaan fungsi
}

Keterangan:
Nama_fungsi adalah nama yang akan digunakan untuk memanggil fungsi
$arg1, $arg2, …, $arg_n adalah argumen-argumen (parameter) yang akan disertakan pada saat pemanggilan fungsi untuk diproses dalam fungsi.
Blok pernyataan fungsi adalah pernyataan-pernyataan yang terdapat dalam apitan tanda ({ }) dimana dikerjakan fungsi untuk tugas tertentu.

•Contoh pemanggilan fungsi tanpa parameter:
<?
$x=2+3;
$y=$x+5;
echo " $y<br>";

$x=2+3;
$y=$x+5;
echo " $y<br>";

$x=2+3;
$y=$x+5;
echo " $y<br>";

$x=2+3;
$y=$x+5;
echo " $y<br>";
?>

Jika kita perhatikan kode di atas, maka penjumlahan yang sama berulang-ulang dituliskan beberapa kali dan merupakan pemborosan. Dengan adanya fungsi maka program diatas bisa dibuatkan ke dalam fungsi dan bisa dipanggil beberapa kali.

seLesai..... seLamaT mencoba dan semoga bermanfaat....

Minggu, 07 Maret 2010

DHTML DAN JAVASCRIPT

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.

Contoh pembuatan kalkulator sederhana dengan Java Script Untuk membuat kalkulator sederhana dengan menggunakan Java Script, maka ikutilah langkah-langkah berikut ini :

1.Ketikkan kode berikut ini :

<html>

<title>program kalkulator Lombok</title>
<script language="JavaScript">
window.defaultStatus=

function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value=c
}

function kurang()
{
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 RESET()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""

}

</SCRIPT>

<body onload=kosong()>
<RIGHT>
<h1><strong><font color="Blue"> <font size="5"> Kalkulator</strong></font></h1>

<FORM name="form">
<pre>
Angka a <input type="text" name="a">
Angka b <input type="text" name="b">

Hasil <input type "text" name="hasil" disabled="true">
</pre>

<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" ^ " onClick="pangkat()"><br>
<input type="button" value=" RESET " onClick="RESET()">

</FORM>
</RIGHT>

</body>
</html>

2.Maka hasilnya adalah :

Senin, 01 Maret 2010

Cascading Style Sheet

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.

Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :

1.Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}

#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}Simpan dengan nama mystyle.css

1.Selanjutnya ketikkan kode berikut ini juga :
<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">

<div id="wrapper">
<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>

<div id="footer">
Footer
</div>
</div>
Simpan file dalam bentuk html (Desain.html)
2.Buka file html, maka hasilnya adalah :

1.Langkah selanjutnya adalah membuat isi dari setiap kolom-kolom yang telah ada, misalnya dengan cara mengetikkan kode berikut ini pada file tgs2.css yang sebelumnya :
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: black;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: black;
border: 1px solid white;
}

#top {
float: left;
width: 813px;
height: 135px;
background: black;
border: 1px solid white;
}

#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: black;
border: 1px solid white;
}

#right {
float: right;
width: 357px;
height: 165px;
background: black;
border: 1px solid white;
}

#footer {
clear:both;
height: 50px;
background: black;
border: 1px solid white;
}

#leftmenu ul {
width: 175px;
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: maroon no-repeat left center;
margin: 0px 0px 1px; color: blue;
}
#leftmenu a:hover {
background: blue no-repeat left center; color: white
}

#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: black;
border: 1px solid white;
}

#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}

#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}

#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}

#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: white;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}

#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 200px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}

2.Dan mengetikkan kode berikut pada file html-nya :
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="tgs2.css" type="text/css">

<div id="wrapper">

<div id="header">
<div id="box1">
<img src="http://www.blogger.com/top.gif" />
</div>
<div id="box7">
<img src="http://www.blogger.com/imgad2.jpg" />
</div>
<div id="box5">
</div>
<div id="box6"><span style="color:white;"> Search :
</span></div><span style="color:white;">
</span><div id="box2"><span style="color:white;">
<a href="http://www.blogger.com/link.html"> <span style="color:white;">About Us</span></a></span><p></p><span style="color:white;"><span style="color:white;">
</span></span></div><span style="color:white;"><span style="color:white;">
</span></span><div id="box3"><span style="color:white;"><span style="color:white;">
<a href="http://www.blogger.com/link.html"><span style="color:white;"> Profil</span></a></span></span><p></p><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span><div id="box4"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<a href="http://www.blogger.com/link.html"><span style="color:white;"> Tips</span></a></span></span></span><p></p><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">

</span></span></span></span><div id="inner"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="sidebar"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="leftmenu"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><ul><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<li><ahref="#"><span style="color:white;">Home</span></ahref="#"></li>
<li><ahref="#"><span style="color:white;">Artikel</span></ahref="#"></li>
<li><ahref="#"><span style="color:white;">News</span></ahref="#"></li>
<li><ahref="#"><span style="color:white;">Mix</span></ahref="#"></li>
</span></span></span></span></ul><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="top"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="box8"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<img src="http://www.blogger.com/new.jpg" width="400" />
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="box9"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<img src="http://www.blogger.com/15.jpg" width="400" />
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="content"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<b>Pengumuman
</b>

Untuk Temen-temen PTI Input 08

Jangan Lupa ngerjain Tugas ya...

Tugasnya buanyaaaak:

ada Laporan Basis Data

Laporan Jarkomdat

Buat proposal skripsi

Pusing dech...., SMANGAAAATTTT!!!

</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="right"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<b>Schedule :</b>
</span></span></span></span><ul><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<li>Pemotretan </li>
<li>Syuting Iklan</li>
<li>Kuliah pastinya. . . .</li>
</span></span></span></span></ul></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="footer"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<h3align="center"><marquee><span style="color:white;"><b>snowbellpoo.blogspot.com</b></span></marquee><span style="color:white;"><b></b></span><b></b>
</h3align="center"></span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">

Maka hasilnya adalah :