Maret 2010

Senin, 29 Maret 2010

Pemrograman Web

Prefilling pada Combo Box dan Check Box

By Didietz Ultima • Senin, 29 Maret 2010 • 0 Comments

err

Pemrograman Web

Membuat Form Login Sederhana

By Didietz Ultima • • 2 Comments

Halaman login dalam suatu situs sudah hampir menjadi kebutuhan wajib. Halaman ini juga sangat bermanfaat baik untuk kita sebagai webmaster maupun pengunjung karena memberikan identitas tentang pengunjung sebuah situs. Dengan login kita bisa mengatur siapa saja yang berhak masuk ke halaman tertentu dan siapa saja yang tidak boleh. Disamping itu secara tidak langsung, login bisa digunakan untuk mencatat siapa saja yang sedang online, siapa saja yang sering mengunjungi situs kita dan seterusnya.

Bagi kita sebagai webmaster, halaman login memungkinkan kita untuk :

Mendapat informasi penting tentang profil pengunjung situs kita karena pengunjung harus mendaftar untuk mendapatkan akses (misalnya saat mendaftar, kita bisa meminta pengunung memasukkan data-data tertentu tentang nama, alamat, kota, jenis kelamin, dan lain-lain).
Memungkinkan kita untuk melakukan tracking terhadap halaman-halaman favorit seorang pengunjung.
Memberikan layanan lebih dan diferensiasi terhadap pengunjung loyal.
Memungkinkan kita memberikan layanan berbayar bagi pengunjung.

Perlu diingat, bahwa dengan melindungi sebuah halaman situs dengan persyaratan login, artinya kita membatasi search engine untuk mengunjungi situs tersebut. Ini artinya hanya sedikit halaman yang dapat diakses oleh search engine. Efeknya akan sangat tidak menyenangkan, karena rank situs kita akan sulit menembus papan atas dari search engine. Jadi perlu juga mempertimbangkan baik-baik halaman mana saja yang akan dilindungi dengan login. Bagi pengunjung, manfaat yang akan dirasakan tentu saja mendapat akses dan layanan tambahan dari sebuah situs.

Berikut merupakan contoh halaman login pada php sederhana, karena prosesnya yang hanya mencocokkan inputan username dan password. Kemudian dicocokkan dengan data-data di halaman berikutnya. Jika username dan password betul, maka akan muncul komentar bahwa login sukses. Sebaliknya, jika username dan password salah, maka akan muncul pesan bahwa username dan password salah.

login.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">

<head>

<title>Login</title>

<!--

body {

background-color: #8EDAF0;

margin-top:15%;

}

.login {

font-family: Arial, Helvetica, sans-serif;

color: #66CCFF;

}

.text {

font-family: Arial, Helvetica, sans-serif;

color: #666666;

}

.style1 {color: c}

-->

</style>

<body>

<h1 class="login">Login</h1>

</blockquote>

</p>

<p><span class="text">Password : </span>

</blockquote>

</div>

</form>

</center>

</body>

</html>

Sintak ini berfungsi untuk menampilkan tampilan awal dari halaman login. Jika tombol LOGIN ditekan, maka form ini akan memanggil form verify.php yang akan memastikan username dan password yang dimasukkan. Berikut ini adalah tampilan dari form utama (login.php) :

verify.php

<?php

$nama = "didietz";

$sandi = "aiueo";

$username = $_POST["username"];

$password = $_POST["password"];

$polausername = "^[A-Za-z]+$";

$polapassword = "^[A-Za-z]+$";

// Fungsi untuk kembali ke form awal //

?><script language="JavaScript">

function awal(){

document.location='login.php';

}

</script><?php

// Login benar //

if(isset($_POST["username"]) && isset($_POST["password"]) && ($_POST["username"]=="$nama") && ($_POST['password']=="$sandi")){

?><script language="JavaScript">

document.location='sub.php'</script><?php

}

//Login salah //

else if(empty($_POST['username']) || empty($_POST['password'])){

?><script language="JavaScript">alert('Isi username atau password');

awal()</script><?php

}

else if((!eregi($polausername, $username)) || (!eregi($polapassword, $password))){

?><script language="JavaScript">alert('Username atau password harus berupa huruf');

awal()</script><?php

}else if (("$username" != "$nama") || ("$password" != "$sandi")){

?><script language="JavaScript">alert('Username atau password salah');

awal()</script><?php

}

Sintak ini berfungsi untuk memeriksa apakah username dan password yang dimasukkan sudah benar atau belum. Dalam form ini telah ditentukan isi nilai dari username dan password.

$nama = "didietz";

$sandi = "aiueo";

Usernamenya adalah didietz dan passwordnya aiueo. Pada form ini, username dan password harus berupa huruf, tidak boleh menggunakan karakter selain huruf. Untuk itu perlu ditentukan format dari username dan password.

$polausername = "^[A-Za-z]+$";

$polapassword = "^[A-Za-z]+$";

Skrip tersebut digunakan untuk menentukan pola dari username dan password, untuk huruf digunakan A-Za-z. Setelah itu username dan password akan diperiksa apakah sudah benar atau salah. Username dan password akan bernilai benar jika username=didietz dan password=aiueo. Dan username dan password akan bernilai salah jika username atau password kosong,

tidak menggunakan huruf,

atau tidak cocok.

sub.php

<html>

<head>

<title>Selamat Datang</title>

<!--

body {

background-color: #8EDAF0;

margin-top:15%;

}

.style1 {

font-size: medium;

font-weight: bold;

color: #0066FF;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

.style2 {

font-size: large;

font-weight: bold;

font-family: Arial, Helvetica, sans-serif;

color: #FF0000;

}

.style3 {color: #000000}

-->

</style>

</head>

<body>

function out(){

document.location='logout.php'

}

</script>

<p class="style1">Selamat Datang</p>

<p class="style2">Anda telah login ke Didietz Ultima Weblog </p>

</div>

</body>

</html>

}

Form ini ini akan muncul jika username dan password bernilai benar. Jika tombol LOGOUT di tekan, maka logout.php akan dipanggil untuk menampilkan keterangan bahwa pengguna telah logout dari form ini. Berikut ini adalah tampilan dari form sub :

logout.php

<!--

body {

background-color: #8EDAF0;

margin-top:15%;

}

.style1 {

color: #009933;

font-size: large;

font-family: Arial, Helvetica, sans-serif;

}

-->

</style>

<div>

<h3 align="center" class="style1">Terima kasih telah mengunjungi Didietz Ultima Weblog</h3>

<?php

include "login.php"

</div>

Form ini akan muncul jika pengguna telah melakukan logout pada form sub. Form ini akan memanggil komponen-komponen yang ada pada form login, sehingga akan terlihat tampilan awal dari form login. Berikut ini adaah tampilan dari form logout :

Contoh di atas merupakan contoh halaman login sederhana, masih banyak contoh-contoh halaman login di situs-situs yang ada di internet. Beberapa situs juga ada yang menerapkan sistem keamanan yang lebih canggih. Mungkin dengan contoh halaman login ini, bisa menambah sedikit ilmu pemrograman web kepada kita semua. Terima kasih atas perhatiannya.

Keep Fighting Spirit On The Fire...

Minggu, 14 Maret 2010

Pemrograman Web

Passing Argument Menggunakan PHP Pada Website

By Didietz Ultima • Minggu, 14 Maret 2010 • 0 Comments

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

Sintaks :

function nama_fungsi($arg1, $arg2, .., arg_n)

{

blok pernyataan fungsi

}

Argumen fungsi

Secara default, argumen dikirimkan ke fungsi adalah berupa nilai saja, jadi tidak bisa mengubah nilai variabel yang dipakai sebagi argumen di dalam fungsi. Jika mengubah nilai argumen di dalam fungsi, maka nilai asli pada variabel tetap. Agar dapat mengubah nilai asli variabel di dalam fungsi, maka harus ada pengiriman berdasarkan reference, caranya dengan menambah tanda "&" di depan variabel saat memanggil fungsi. Berikut ini penjelasan jenis-jenis argumen fungsi :

1. Pass by Value

Argumen fungsi yang dilewatkan secara pass by value (default dalam php) berarti membuat kopi dari argumen yang asli sehingga argumen asli tersebut tidak ikut berubah dengan adanya proses pada fungsi terhadap argumen tersebut.

<html>

<head>

<title>Pass By Value</title>

</head>

<body>

<?php

function jumlah($nilai) {

$nilai++;

}

$input=5;

jumlah($input);

echo $input;

</body>

</html>

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 sebagai berikut :

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

Berikut ini adalah tampilan outputnya :

2. Pass by Reference

Berbeda dengan passing by value yang bersifat mengkopi, 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.

<html>

<head>

<title>Pass By Referance</title>

</head>

<body>

<?php

function jumlah(&$nilai) {

$nilai++;

}

$input=5;

jumlah($input);

echo $input;

</body>

</html>

Penjelasan:

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

Berikut ini adalah tampilan outputnya :

Itulah beberapa penjelasan singkat tentang argumen fungsi. Semoga dengan ilmu tersebut dapat membantu kita semua dalam pembuatan program sederhana dengan menggunakan fungsi-fungsi PHP.

Pemrograman Web

Fungsi Greeting Menggunakan PHP Pada HTML

By Didietz Ultima • • 0 Comments

Salam adalah cara bagi seseorang untuk secara sengaja mengkomunikasikan kesadaran akan kehadiran orang lain, untuk menunjukkan perhatian, dan untuk menegaskan atau menyarankan jenis hubungan serta status sosial antar individu/kelompok orang yang berhubungan satu sama lain. Seperti juga cara komunikasi lain, salam juga sangat dipengaruhi budaya dan situasi serta dapat berubah akibat status dan hubungan sosial. Salam dapat diekspresikan melalui ucapan dan gerakan, atau gabungan dari keduanya.

Saat kita sedang chating atau posting testimony di internet, ada kalanya kita ingin menyapa penggunjung yang lain dengan ucapan, misalnya : "Hai", "halo", "apa kabar", “selamat pagi”, “selamat datang” dan sebagainya sebagai bentuk interaksi kita terhadap pengunjung situs tersebut. PHP sebagai salah satu bahasa web programming yang saat ini banyak digunakan, dapat dengan mudah membuat ucapan-ucapan tersebut, misalnya seperti halaman web dengan fungsi greeting yang menerima argumen integer waktu "format 24 jam" dan mengembalikan ke dalam nilai string "Selamat pagi, selamat siang, selamat sore, dan selamat malam". Jadi halaman web ini akan menyapa pengunjung berdasarkan waktu saat pengunjung masuk ke dalam situs tersebut.

Berikut ini adalah listing PHP dari website Greeting :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Greeting</title>

</head>

<body>

<h1>

<?php

function greeting()

{

$date = date ("G : i A");

if ($date>=0 and $date<10) {

echo "Selamat Pagi";

} else if ($date>=10 and $date<15) {

echo "Selamat Siang";

} else if ($date>=15 and $date<19) {

echo "Selamat Sore";

} else if ($date>=19 and $date<00) {

echo "Selamat Malam";

}else echo "Waktu salah)";

}

<?php greeting(); ?><br>

</h1>

<h2> Selamat Datang di didietz-ultima.blogspot.com</h2>

<h3> Sekarang adalah

<?php

//Array Hari

$array_hari = array(1=>"Senin","Selasa","Rabu","Kamis","Jumat", "Sabtu","Minggu");

$hari = $array_hari[date("N")];

//Format Tanggal

$tanggal = date ("j");

//Array Bulan

$array_bulan = array(1=>"Januari","Februari","Maret", "April", "Mei", "Juni","Juli","Agustus","September","Oktober", "November","Desember");

$bulan = $array_bulan[date("n")];

//Format Tahun

$tahun = date("Y");

//Menampilkan hari dan tanggal

echo "hari $hari, tanggal $tanggal $bulan $tahun";

<br>

Waktu menunjukkan pukul

<?php

//penulisan waktu

$date = date ("G : i A");

echo "$date WIB";

</h3>

</body>

</html>

Dari listing tersebut akan di dapat tampilan seperti berikut :

Fungsi greeting() berguna dalam melakukan perhitungan pengelompokan jam pada pagi, siang, sore dan malam hari yang akan menampilkan sebuah string bedasarkan waktu.

<?php

function greeting()

{

$date = date ("G : i A");

if ($date>=0 and $date<10) {

echo "Selamat Pagi";

} else if ($date>=10 and $date<15) {

echo "Selamat Siang";

} else if ($date>=15 and $date<19) {

echo "Selamat Sore";

} else if ($date>=19 and $date<00) {

echo "Selamat Malam";

}else echo "Waktu salah)";

}

Fungsi tersebut akan dipanggil pada bagian berikut untuk menampilkan string yang dihasilkan.

<?php greeting(); ?>

Potongan skrip di bawah ini berguna untuk menampilkan hari, tanggal, dan waktu pada saat penggunjung membuka browser ini.

<?php

//Array Hari

$array_hari = array(1=>"Senin","Selasa","Rabu","Kamis","Jumat", "Sabtu","Minggu");

$hari = $array_hari[date("N")];

//Format Tanggal

$tanggal = date ("j");

//Array Bulan

$array_bulan = array(1=>"Januari","Februari","Maret", "April", "Mei", "Juni","Juli","Agustus","September","Oktober", "November","Desember");

$bulan = $array_bulan[date("n")];

//Format Tahun

$tahun = date("Y");

//Menampilkan hari dan tanggal

echo "hari $hari, tanggal $tanggal $bulan $tahun";

<?php gWaktu menunjukkan pukul

<?php

//penulisan waktu

$date = date ("G : i A");

echo "$date WIB";

?>reeting(); ?>

Demikianlah penjelasan tentang fungsi greeting menggunakan PHP pada HTML, semoga bermanfaat untuk semuanya.

Keep Fighting Spirit On The Fire...

Sabtu, 06 Maret 2010

Pemrograman Web

Kalkulator Sederhana pada Website Menggunakan JavaScript

By Didietz Ultima • Sabtu, 06 Maret 2010 • 1 Comments

Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.

Selain sebagai fungsi tambahan pada komputer, kalkulator juga bisa berfungsi secara online melalui HTML. Penggunaan JavaScript pada pembuatan aplikasi kalkulator merupakan salah satu cara agar kalkutator bisa digunakan pada sebuah halaman web.

JavaScript sendiri merupakan 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 situsweb (sebagaiJavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain.

Walaupun memiliki nama serupa, 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. Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>. Berikut ini adalah contohnya (yang akan menampilkan sebuah dialog box berisi Halo Dunia! ketika sebuah tombol diklik oleh pengguna):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">

<head>

<title>Simple Calculator</title>

</head>

<body>

<!--

function hasil()

{

if (operator.value == '+')

{bil3.value = eval(bil1.value)+eval(bil2.value);}

else if (operator.value == '-')

{bil3.value = eval(bil1.value)-eval(bil2.value);}

else if (operator.value == 'x')

{bil3.value = eval(bil1.value)*eval(bil2.value);}

else if (operator.value == ':')

{bil3.value = eval(bil1.value)/eval(bil2.value);}

}

//-->

</script>

</select>

</form>

</body>

</html>

Skrip di atas jika di-execute akan memiliki tampilan seperti berikut :

Contoh di atas merupakan salah satu contoh dasar dari kalkulator sederhana dengan menggunakan JavaScript. Dari contoh dasar tersebut dapat dikembangkan bermacam-macam kalkulator JavaScript yang lebih baik. Contoh di bawah ini merupakan salah satu entuk pengembangan kalkulator JavaScript dengan tampilan yang hampir sama dengan kalkulator sederhana yang beredar di pasaran.

Halaman HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Calculator</title>

</head>

<body>

<TBODY>

<TR>

</TR>

<TR>

<TD>

</TR>

<TR>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

</TR>

<TR>

</TR>

</TBODY>

</TABLE>

</BLOCKQUOTE>

</DIV>

</FORM>

<!--

var FKeyPad = document.Keypad;

var Accum = 0;

var FlagNewNum = false;

var PendingOp = "";

function NumPressed (Num) {

if (FlagNewNum) {

FKeyPad.ReadOut.value = Num;

FlagNewNum = false;

} else {

if (FKeyPad.ReadOut.value == "0")

FKeyPad.ReadOut.value = Num;

else

FKeyPad.ReadOut.value += Num;

}

function Operation (Op) {

var Readout = FKeyPad.ReadOut.value;

if (FlagNewNum && PendingOp != "=");

else

{

FlagNewNum = true;

if ( '+' == PendingOp )

Accum += parseFloat(Readout);

else if ( '-' == PendingOp )

Accum -= parseFloat(Readout);

else if ( '/' == PendingOp )

Accum /= parseFloat(Readout);

else if ( '*' == PendingOp )

Accum *= parseFloat(Readout);

else

Accum = parseFloat(Readout);

FKeyPad.ReadOut.value = Accum;

PendingOp = Op;

}

function Decimal () {

var curReadOut = FKeyPad.ReadOut.value;

if (FlagNewNum) {

curReadOut = "0.";

FlagNewNum = false;

} else {

if (curReadOut.indexOf(".") == -1)

curReadOut += ".";

}

FKeyPad.ReadOut.value = curReadOut;

}

function ClearEntry () {

FKeyPad.ReadOut.value = "0";

FlagNewNum = true;

}

function Clear () {

Accum = 0;

PendingOp = "";

ClearEntry();

}

function Neg () {

FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;

}

function Percent () {

FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);

}

// -->

</SCRIPT>

</body>

</html>

Dan hasil tampilannya adalah sebagai berikut :

Kedua contoh program kalkulator JavaScript di atas merupakan contoh kalkulator sederhana yang mungkin bermanfaat untuk pembelajaran pemograman web dengan JavaScript. Selain contoh-contoh tersebut, ada juga beberapa program kalkulator yang beredar di internet dengan berbagai variasi seperti kalkulator scientific, kalkulator dengan PHP, dan lain-lain yang dikembangkan oleh programer di belahan bumi ini. Pengembangan ini merupakan salah satu fakta bahwa bahasa pemograman akan terus berkembang.

Didietz Ultima

Senin, 29 Maret 2010

Prefilling pada Combo Box dan Check Box

Membuat Form Login Sederhana

Minggu, 14 Maret 2010

Passing Argument Menggunakan PHP Pada Website

Fungsi Greeting Menggunakan PHP Pada HTML

Sabtu, 06 Maret 2010

Kalkulator Sederhana pada Website Menggunakan JavaScript

Ketik judul

Chat

JOIN US ON FACEBOOK

CATEGORIES

LATEST STORIES

ADVERTISEMENT

About this blog

Popular Posts

Labels