PENDIDIKAN & INFORMATIKA: Maret 2010

Minggu, 28 Maret 2010

PEMROSESAN FORM

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. Contoh : aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. dengan variabel di PHP untuk mensimulasikan
verifikasi data yang dimasukkan.

1. Buat halaman login dengan kode seperti dibawah ini, dan simpan dengan nama index.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="htmlExampleTarget"></div>
<div id="mainPan">
<div id="formPan">
<form action="periksa.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>
<center> <input type="submit" value="Login" class="submit" name="login" /></center>
</fieldset>
</form>
</div>
</div>
</body>
</html>

2. Setelah ltu buat untuk memerikasa password dan simpan dengan nama periksa. Php dengan kode seperti dibawah ini:

<!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="htmlExampleTarget"></div>
<div id="mainPan">
<div id="formPan">
<form action="periksa.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>
<center> <input type="submit" value="Login" class="submit" name="login" /></center>
</fieldset>
</form>
</div>
</div>
</body>
</html>

3. Kode di atas berfungsi untuk memeriksa password, setelah itu baru masuk ke halaman login jadi hubungkan ke halaman login. Conto disini menampilkan anda berhasil login. Contohnya sebagai berikut untuk halaman berhasil login, jangan lupa simpan dengan nama berhasil.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="htmlExampleTarget"></div>
<div id="mainPan">
<div id="formPan">
<form action="periksa.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>
<center> <input type="submit" value="Login" class="submit" name="login" /></center>
</fieldset>
</form>
</div>
</div>
</body>
</html>

4. Jangan lupa membuat file .css sebagai berikut : (simpan dengan nama style.css)

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:white;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: black;
}

a:link {
color: grey;
text-decoration: none;
}
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: center; font-family:Geneva, Arial, Helvetica, sans-serif;font-size:11px; z-index: 5; }

#mainPan{
width:300px;
position:relative;
margin:0 auto;
}
#formPan
{
margin-top:100px;
}

#htmlExampleTarget { text-align:center;
color:#009900;
position:absolute;
top:0; left:0;
padding:10px 0px;
border-top:solid 5px #76B306;
display:block;
width:100%;
background: #EEFFC6; }

#divTarget { background-color:#EEFFC6; padding:5px; }
#htmlForm { padding:20px;}
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 { background:url('../images/sbar_a_hili.gif') 0 0 repeat-x; border:solid 1px #cccccc;}
.submit { border:solid 1px #cccccc; background: url('../images/star.png') 0 0 no-repeat #f4f4f4; padding-left:30px; height:35px; color:#660000;margin-left:55px; }
label { width:140px;color: #660000; }

Hasil halaman login

Hasil ketika memasukan password

Senin, 15 Maret 2010

passing argumen di PHP

Passing by Value
Program:
<?php
function jumlah($nilai) {
$nilai++;
}
$input=5;
jumlah($input);
echo $input;
?>

Hasil:

Passing by Reference
Program:
<?php
function jumlah(&$nilai) {
$nilai++;
}
$input=5;
jumlah($input);
echo $input;
?>

Hasil:

Minggu, 14 Maret 2010

DASAR PEMROGRAMAN PHP

Php merupakan pemrograman lanjutan dari prmrograman html. Untuk mengetahui apa itu php dan apa keggunaaya mari kita simak tentang php dan contoh aplikasinya
1. PHP
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.

2. Tipe Data
PHP mendukung delapan tipe primitif, yang terdiri dari empat tipe skalar
(boolean, integer, float/double, dan string), dua tipe gabungan (array
dan object), dan sisanya adalah tipe khusus (NULL dan resource). Meskipun
keberadaan tipe data dalam deklarasi variabel tidak penting, namun dalam
tahap selanjutnya sangatlah penting.

3. Komentar
PHP mendukung tiga jenis sintaks untuk menuliskan baris komentar, meliputi
style C, C++, dan Perl/Shell.
4. Tag PHP
Parser PHP bekerja dengan menguraikan instruksi-instruksi yang diletakkan
di antara tag pembuka dan penutup. Ada empat jenis style tag yang dapat kita
gunakan untuk menyatakan bahwa kode merupakan instruksi PHP.
CONToh APLIKASI PHP
UMPAMA kita Buat fungsi greeting yang menerima argumen integer jam (format 24 jam) dan mengembalikan nilai string (Selamat Pagi, Selamat Siang, atau Selamat
Malam). Dan Jika nilai tidak memenuhi maka akan mengembalikan string kosong.
Cara pertama buka note pad yang berada pada komputer atau laptop kemudian isikan sintak berikut n yang paling penting jangan lupa penyimpan harus diakhiri dengan .php
Sintaknya sbb:

<!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>Greeting_by: uus swetzy</title>
</head>

<body>

<?php
function ShowGreet($jam)
{
echo 'Pukul ';echo $jam;
if($jam<=10){echo ': Selamat Pagi';}
if($jam>=11&&$jam<=14){echo ': Selamat Siang';}
if($jam>=15&&$jam<=18){echo ': Selamat Sore';}
if($jam>=19&&$jam<=23){echo ': Selamat Malam';}
}
ShowGreet(18);
?>

</body>
</html>

Hasilnya sebagai berikut :

Minggu, 07 Maret 2010

BELAJAR DHTML DAN JAVASCRIPT YUK !!!!!! BAGI BEBERAPA ORANG YANG BARU MENGENAL PEMROGRAMAN BERBASIS WEB PASTI BERTANYA-TANYA APA SIH ARTINYA DAN BAGA

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. Sebagai contoh keggunaan sebagai berikut, untuk membuat program perhitungan.

Gambar diatas merupakan contoh aplikasi java script untuk membuat calculator, dan scriptnya sebagai berikut :

<!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>Kalkulator</title>
</head>

<body>
<script language="JavaScript" type="text/javascript">


</script>

<form name="form1" action="#">

<p align="center"> MEMBUAT CALCULATOR .HTML </p>

<input type="text" name="a" />
<select name="has">

<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali" > * </option>
<option value="bagi"> / </option>

</select>

<input type="text" name="b" />
<input type="button" value="=" onClick="rumus()" />
<input type="text" name="hasil" disabled="true" />

<br/>

<p align="center"> Created by: Candra Kurniawan </p>

</form>
</body>
</html>

Senin, 01 Maret 2010

CASCADING STYLE SHEET (CSS)

Kalau sebulum ini kita mempelajari membuat tabel melalui cara manual, yaitu dengan mengetikan sintaknya, dalam kesempatan kali ini kita akan belajar membuat tabel dengan CASCADING STYLE SHEET, sebelum kita masuk kepembuat tabel kita perlu mepelajari beberapa dasar mengenai ccs,
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.

Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Contoh pemanfaatan css:
Dalam contoh ini kita akan belajar mengimplementasikan ccs. Dan bagaimana ya kita membuat supaya terbentuk tabel sebagai berikut ya????????????????

Supaya menghasilkan seperti tabel tersebut langkah pertama tuliskan script berikut pada note pad dan simpan dengan format . html

<!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 Sederhana</title>
<link rel="stylesheet" href="latihan.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
Top
</div>
<div id="content">Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>

Langkah kedua setelah kita menuliskan kode tersebut buat kerangka atau link yang nantinya dapat terhubung dengan kode program di atas dan simpan dengan nama latihan.css

#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;}
#header {
height: 85px;
border: 1px solid blue;}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;}
#sidebar {
float: left;
margin-right: 20px;
width: 200px;
height: 357px;
border: 1px solid red;}#top {
float: left;
width: 524px;
height: 120px;
border: 1px solid red;}
#content {
float: left;
margin-right: 20px;
width: 275px;
height: 235px;
border: 1px solid green;}
#right {
float: right;
width: 227px;
height: 180px;
border: 1px solid red;}
#footer {
clear: both;
height: 75px;
border: 1px solid blue;}

dari pembuatan tabel atau kolom diatas dapat dikembangkan sesuai dengan keinginan kita sebagai contoh kita dapat menambahkan isi maupun foto di dalam kolom supaya tampilan lebih menarik, la !!!!!!!!! terus bagaimana ya caranya biar bisa menarik. Caranya begini dari tabel yang kita buat tadi kita kembangkan dan caranya sama seperti pembuatan tadi ya.

Contoh pengembangan :

Langkanya tulis kode html dan css-nya kdenya sebagai berikut :
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 Sederhana</title>
<link rel="stylesheet" href="belajar css.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="logo_sc.jpg">
</div>
<div id = "box7">
<img src="header.jpg">
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> Search :
</div>
<div id = "box2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Profil</a></p>
</div>
<div id = "box4">
<a href="link.html"><font color="black"> Foto</a></p>
</div>
</div><div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="edu.jpg">
</div><div id = "box9">
<img src="motorku.jpg"></div>
</div>
<div id="content">
<b> Grafik 2D <br/></b>
<br/>
Fitur Java 2D yang diperkenalkan pada platform Java 2 membawa dampak
peningkatan kemampuan yang signifikan di bidang grafis. Dengan dukungan
keunikan bahasa pemrograman Java, API 2D ini menawarkan pilihan atraktif
untuk menghasilkan beragam aplikasi grafis.. <br/></div>
<div id="right">
<b>lomba:</b>
<ul>
<li>Pelaksanaan lomba akan dimulai hari rabu" </li>

</div>
</div>
<div id="footer">
<h3 align="center"><b>email: Sincan_um@yahoo.co.id</b></h3>
</div>
</div>
</body>
</html>

dan kode cssnya sebagai berikut:

#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: grey;
border: 1px solid white;
}
#inner {
float: left;
margin: 1px 0;
border: 1px solid white;
}
#sidebar {float: left;
margin-right: 5px;
width: 175px;
height: 350px;
background: grey;
border: 1px solid white;
}

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

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

#footer {
clear:both;
height: 50px;
background: #6cae15;
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: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}

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

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

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

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

#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 49px;
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: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}

Eit!!!!!!!!!!!! Jangan lupa nama foto dan css-nya harus sama dengan yang ditulis lo

PENDIDIKAN & INFORMATIKA

selamat