popy cahya h

Senin, 29 Maret 2010

Membuat aplikasi Login 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.php terlebih dahulu, contoh tampilannya seperti gambar di atas. Dan scripnya seperti di bawah ini :

<html>

<head>

<title>Login here</title>

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

<style type="text/css">

<!--

table {

font-family: Times New Roman, Arial, Helvetica, sans-serif;

font-size: 41px;

}

input {

font-family: Times New Roman, Arial, Helvetica, sans-serif;

font-size: 12px;

height: 45px;

}

-->

</style>

</head>

<body>

<div align="center">

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

<table width="486" border="0" cellpadding="1" cellspacing="0">

<!--DWLayoutTable-->

<tr bgcolor="#FF0000">

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

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

</tr>

<tr>

<td width="406" height="47">&nbsp;</td>

<td width="480">&nbsp;</td>

</tr>

<tr>

<td height="48" align="right" valign="middle">Username :&nbsp;</td>

<td valign="middle">

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

</tr>

<tr>

<td height="48" align="right" valign="middle">Password :&nbsp;</td>

<td valign="middle">

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

</tr>

<tr>

<td height="49">&nbsp;</td>

<td></td>

</tr>

<tr>

<td height="48" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>

<td valign="middle">

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

</tr>

<tr>

<td height="49">&nbsp;</td>

<td></td>

</tr>

<tr bgcolor="#FF0000">

<td height="48" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>

</tr>

</table>

</form>

</div>

</body>

</html>

Tampilan untuk melihat login

Jika kita mengisikan Username dan password salah maka akan muncul pesan seperti di bawah :




Jika kita mengisikan Username dan password salah maka akan muncul pesan seperti di bawah :

Selanjutnya membuat file untuk mengecek login, misalkan Username : cahya dan password : popy. Jika Username dan passwordnya salah ataupun benar akn ada pemberitahuan seperti tampilan di atas.

Di bawah ini merupakan script pada tampilan di atas :

<!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 = 'cahya';

$acc_pas = 'popy';

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, Anda berhasil Login <<<<<------------ ';

} else {

echo 'Username dan password Anda salah Masukan dengan benar'.

'<br/>'.

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

'<br/>';

}

}

?>

------------------------à>>>>Selamat Mencoba<<<ß----------------------------

Minggu, 07 Maret 2010

dhtml dan java script

cara membuat aplikasi kalkulator





berikut gambarnya









setelah diisi sebagai contoh penambahan


dan berikut merupakan scriptnya

<html>
<title
>Membuat program kalkulator sederhana menggunakan textbox </title>
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="popy cahya"
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 kosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""
}
</SCRIPT>
<body onload=kosong()>
<CENTER>
<font size="5">Program Kalkulator</font>
<hr size="5" color="green">
<FORM name="form">
<pre>
Angka 1 <input type="text" name="a">
Angka 2 <input type="text" name="b">

Hasil <input type "text" name="hasil" disabled="true"> </pre> <hr size="2" color="purple"> <input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()"> <input type="button" value=" / " onClick="bagi()"> <input type="button" value=" ^ " onClick="pangkat()"><br> <input type="button" value=" Kosong " onClick="kosong()">

<br>
Oleh: Popy cahya<br>
lt;/FORM>
</CENTER>

</body>
</html>

Senin, 01 Maret 2010

Layout dengan css


hasil ini kita bisa peroleh dengan membuat linked css dan html.

berikut merupakan scrip css yang saya beri nama popy.css :


#wrapper {

margin: auto;

width: 1000px;

background-color:#00FFFF;

padding: 5px 2px 5px 2px;

}

#header {

height: 100px;

background-color:#00000B;

}

#header1 {

height: 20px;

text-align:right;

padding-right: 10px;

color:#000000;

}

#header2 {

height: 35px;

color:#FF0;

}

#header3 {

height: 25px;

text-align:right;

color:#00FFFF;

padding-right: 10px;

}

#inner {

margin:auto;

}



#sidebar {

float: left;

width: 200px;

height: 400px;

background-color:#00007F;

}



#top {

float: right;

width:800px;

height: 400px;

}

#content {

height: 100px;

}

#isi {

float: left;

width: 580px;

padding-left: 10px;

height: 300px;

background-color:#FFF5EE;

}



#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;

}



dan berikut scrip htmlnya yang saya kasih nama popy.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>Tugas2 Desain Layout Sederhana</title>

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



</head>



<body>



<div id="wrapper">

<div id="header">

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

<div id="header1">Home | RSS | Contact | About Me</div>

<div id="header2">

<h1>popy cahya h </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="#">Photo</a></strong></li>

<li><strong><a href="#">About Me</a></strong></li>

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

</ul>

</div>

</div>

<div id="top">

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

<div id="isi">

<h2>stack</h2>

<p><br />

Stack atau tumpukan adalah suatu stuktur data yang penting dalam pemrograman, dimana stack bersifat LIFO (Last In First Out) yang dimana suatu benda yang masuk pertama kali akan dikeluarkan paling akhir. Contohnya antara lain : Suatu kerupuk yang dimasukan didalam sebuah kerodong yang pertama diambil adalah kerupuk yang dimasukkan paling akhir.</p>

<p>2010</p>

</div>

<div id="info">

<p><strong>cetak/ekspor

</strong>

<ul>

<li>Untuk Buku</li>

<li>Sebagai PDF</li>

<li>Versi Cetak</li>

</ul>

</div>

</div>

</div>





<div id="footer">

<p align="center">

&copy; 2010 Popy_cahya_h@yahoo.co.id

</div>



</div>



</body>



</html>



slamat mencoba........