blogE cah_0353: 2010

Minggu, 28 Maret 2010

Membuat Aplikasi Login sederhana menggunakan Variabel di PHP

Aplikasi login User dalam suatu situs dinamis menggunakan php sudah hampir menjadi kebutuhan wajib. Tanpa adanya login rasa-rasanya ada yang kurang dari suatu 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.

Membuat Tampilan Awal Login
Buatlah file dengan nama login.php sebagai tampilan awal halaman login 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">

<html>

<head>

<title>Form login</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">



</style>

</head>

<body>

<div align="center">

<form action="periksa.php" method="post" name="login">

<table width="286" border="0" cellpadding="0" cellspacing="0">



<tr bgcolor="black">

<td height="19" colspan="2" align="center" valign="middle">

<font color="#FFFFFF">LOGIN DI SINI</font></td>

</tr>

<tr>

<td width="106" height="27"> </td>

<td width="180"> </td>

</tr>

<tr>

<td height="18" align="right" valign="middle">Username : </td>

<td valign="middle">

<input name="username" type="text" id="username" size="20"></td>

</tr>

<tr>

<td height="18" align="right" valign="middle">Password : </td>

<td valign="middle">

<p>

<input name="password" type="password" id="password" size="20"></td>

</p>

</tr>

<tr>

<td height="19"> </td>

<td></td>

</tr>

<tr>

<td height="18" valign="top"> </td>

<td valign="middle">

<input name="login" type="submit" id="login" value=" Login "></td>

</tr>

<tr>

<td height="28"> </td>

<td></td>

</tr>

<tr bgcolor="black">

<td height="18" colspan="2" valign="top"> </td>

</tr>

</table>

</form>

</div>

</body>

</html>

hasil tampilan login dari script diatas,

Dari program tampilan awal di atas, kita bisa lihat bahwa program menggunakan form inputan sbb :
- username bertype text
- password bertype password
- tombol login bertype submit
Jika tombol login ditekan maka isi form akan diproses di halaman periksa.php sesuai dengan action pada tag form.

Membuat Halaman Pemeriksaan Login
Setelah tampilan awal kita buat, maka kita buat halaman pemeriksaan login untuk memeriksa apakah username dan password yang diinputkan benar atau salah. Buatlah file dengan nama periksa.php 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>Hasil login</title>

</head>

<body>

<div align="center">

<?php

$acc_user = 'user';

$acc_pas = 'user';

if (isset($_POST['login'])) {

$username = $_POST['username']; // diambil dari nama input di form login

$password = $_POST['password']; // diambil dari nama input di form login

$username = strip_tags($username);

$password = strip_tags($password);

if (($username==$acc_user) && ($password==$acc_pas))

{

session_start();

$_SESSION['user'] = $username;

echo 'Selamat datang, Login Anda berhasil. ';

} else {

echo 'Masukan Username dan password Anda dengan benar'.

'<br/>'.

'<a href="login.php">Ulangi Login</a>'.

'<br/>';

}

}

?>

Hasil tampilan dari pemeriksaan Login.

user dapat memasukan username dan password dengan benar.

user tidak dapat memasukan username dan password dengan benar.

apabila user tidak dapat memasukan username dan password dengan benar maka dapat melakukan login ulang.

Untuk ikut mencoba hasil dari aplikasi Login sederhana diatas dapat klik disini, username dan password "user".

Jumat, 05 Maret 2010

Aplikasi kalkulator sederhana menggunakan JavaScript

Java script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer . Dengan kata lain, kita tidak perlu menuliskan program Javascript pada file terpisah.

Contoh Javascript Sederhana

Membuat aplikasi kalkulator sederhana dengan menggunakan JavaScript

Dibawah ini merupakan scripting keseluruhan untuk pembuatan aplikasi kalkulator sederhana yang telah saya buat.

<!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>Calkulator</title>

</head>

</body>

<p align="left"><font face="verdana" size="-1">This desaign by cah_0353</font><br>

<a href="www.mainjet.blogspot.com">www.mainjet.blogspot.com</a></font></p>

</body>

</html>

Dari Scripting diatas diperoleh tampilan desain kalkulator sederhana sebagai berikut:

Sabtu, 27 Februari 2010

Desain web memanfaatkan Cascading Style Sheet (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 perelemen 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.

Berikut ini merupakan contoh desin web yang menggunakan CSS

untuk langakah pertama membutuhkan linked CSS dan HTML. Buka notepad terus tulis script berikut ini :

#wrapper {

margin: auto;

width: 1000px;

padding:5px 2px 5px 2px;

border: 1px solid green;

}

#header {

height: 100px;

margin-bottom:5px;

border: 1px solid blue;

}

#inner {

margin: auto;

border: 1px solid green;

}

#sidebar {

float: left;

width: 200px;

height: 390px;

border: 1px solid blue;

}

#top {

float: right;

width: 750px;

height: 390px;

border: 1px solid green;

}

#content {

height: 100px;

border: 1px solid blue;

}

#isi{

float: left;

width: 400px;

height:220px;

border: 1px solid green;

}

#info {

float: right;

width: 235px;

height: 150px;

border: 1px solid green;

}

#footer {

clear: both;

height: 50px;

border: 1px solid blue;

}

setelah menuliskan file diatas simpan dalam satu folder dengan nama style.css

kemudian buka notepad lagi dan tuliskan list 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>

<title>Tugas2 Desain Layout sederhana </title>

<link rel="stylesheet" href="style.css" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div id="wrapper">

<div id="header">

Header

</div>

<div id="inner">

<div id="sidebar">

Sidebar

</div>

<div id="top">

<div id="content">

Gambar atas

</div>

<div id="isi">

Isi

</div>

<div id="info">

Info

</div>

</div>

</div>

<div id="footer">

Footer

</div>

</div>

</body>

</html>

Simpan file tersebut dalam satu folder dengan file.css yang sudah ada, misalnya dengan nama style.html

Berikut hasil dari kedua list diatas:

Gambar layout desain web.

Untuk membuat desain web menggunakan css diperlukan list layout dasar sperti diatas.
Selain itu menambahkan list lagi yang diperlukan untuk tampilan dari desain web tersebut.
Dibawah ini contoh list untuk desain web.

#wrapper {

margin: auto;

width: 1000px;

background-color:#C00;

padding: 5px 2px 5px 2px;

}

#header {

height: 100px;

background-color:#03C;

}

#header1 {

height: 20px;

text-align:right;

padding-right: 10px;

color:#FFF;

}

#header2 {

height: 35px;

color:#FF0;

}

#header3 {

height: 25px;

text-align:right;

color:#FFF;

padding-right: 10px;

}

#inner {

margin:auto;

}

#sidebar {

float: left;

width: 200px;

height: 400px;

background-color:#399;

}

#top {

float: right;

width:800px;

height: 400px;

}

#content {

height: 100px;

}

#isi {

float: left;

width: 580px;

padding-left: 10px;

height: 300px;

background-color:#6C6;

}

#info {

float: right;

width: 200px;

height: 300px;

padding-left: 10px;

background-color:#666;

}

#footer {

clear: both;

height: 50px;

color:#FFF;

background-color:#00C;

}

#leftmenu ul {

width: 200px;

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: #0FF no-repeat left center;

margin: 0px 0px 1px; color: #000;

}

#leftmenu a:hover {

background: #0F0 no-repeat left center; color: #FFF;

}

Simpan file diatas dengan nama terserah contoh desain.css

kemudian buat lagi list 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>

<title>Tugas2 Desain Layout Sederhana</title>

<link rel="stylesheet" href="desain.css" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="header">

<img src="gambar1.jpg" width="104" height="97" align="left" />

<div id="header1">Home | Profil | Contact | About My</div>

<div id="header2">

<h1>Cah_0353 Desain </h1>

</div>

<div id="header3">Search

<input type="text" />

</div>

</div>

<div id="inner">

<div id="sidebar">

<div id="leftmenu">

<ul>

<li><a href="#"><strong>Home</strong></a></li>

<li><strong><a href="#">Profil</a></strong></li>

<li><strong><a href="#">Tutorial</a></strong></li>

<li><strong><a href="#">Tips & Tricks</a></strong></li>

<li><strong><a href="#">Software's</a></strong></li>

</ul>

</div>

</div>

<div id="top">

<div id="content"><img src="gambar.jpg" width="800" height="102" /></div>

<div id="isi">

<h2>Kecerdasan Buatan</h2>

<p>24 Februari 2010 [23:00]<br />

Kecerdasan Buatan (bahasa Inggris: Artificial Intelligence atau AI) didefinisikan sebagai kecerdasan yang ditunjukkan oleh suatu entitas buatan. Sistem seperti ini umumnya dianggap komputer. Kecerdasan diciptakan dan dimasukkan ke dalam suatu mesin (komputer) agar dapat melakukan pekerjaan seperti yang dapat dilakukan manusia. Beberapa macam bidang yang menggunakan kecerdasan buatan antara lain sistem pakar, permainan komputer (games), logika fuzzy, jaringan syaraf tiruan dan robotika.</p>

<p>Raed more...</p>

</div>

<div id="info">

<p><strong>cetak/ekspor

</strong>

<ul>

<li>Untuk Buku</li>

<li>Sebagai PDF</li>

<li>Versi Cetak</li>

</ul>

Simpan file diatas dalam satu folder dengan file desain.css dengan nama yang anda inginkan contoh desain.html

Hasil tampilan dari list desain web diatas yakni sebagai berikut:

Gambar desain web dari list diatas.

Sabtu, 20 Februari 2010

Pembutan template web memanfaatkan table

Membuat template disain web dengan memanfaatkan table. Pertama kali yang diperhatikan dalam membuat desain dengan metode ini yakni menentukan banyaknya kolom yang akan digunakan.

Untuk bagian header membutuhkan tiga buah kolom kemudian dari kolom tersebut di gabung untuk menjadi satu kolom.

Untuk penggabungan kolom tersebut dengan memanfaatkan script sebagai berikut.

<th width="1000" colspan=3 >header</th>

Dalam pembuatan bagian footer sama juga halnya membuat header, yaitu penggabungan tiga kolom menjadi satu kolom.

Untuk pembuatan left menu, right menu dan content membutuhkan tiga table, scripnya sebagai berikut.

<th width="200" height="500" >left menu</th>

<th width="600" height="500" >Contens</th>

<th width="200" height="500" >right menu</th>

Dalam pembuatan template desain web dengan table seperti tampilan gambar diatas yakni script keseluruhannya 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>Tugas1</title>

</head>

<body>

<table border=3 align="center" cellspacing=0 cellpadding=15>

<tr>



<th width="1000" colspan=3 >header</th>

</tr>



<tr>

<th width="200" height="500" >left menu</th>

<th width="600" height="500" >Contens</th>

<th width="200" height="500" >right menu</th>

</tr>

<tr>



<th width="1000" colspan=3 >Footer</th>

</tr>

</table>

</body>

</html>

blogE cah_0353

Minggu, 28 Maret 2010

Membuat Aplikasi Login sederhana menggunakan Variabel di PHP

Jumat, 05 Maret 2010

Aplikasi kalkulator sederhana menggunakan JavaScript

Sabtu, 27 Februari 2010

Desain web memanfaatkan Cascading Style Sheet (CSS)

Sabtu, 20 Februari 2010

Pembutan template web memanfaatkan table

Labels

blog friend's

Blog Archive

About Me

buku tamu