28 Maret 2010

Membuat Login Form sederhana dengan PHP

berikut ini langka-langkah membuat Login Form sederhana dengan menggunakan PHP dan Javascript tanpa menggunakan Database. disni hanya menggunakan nilai string dalam validasi form.


contohnya jadinya seperti ini <<==klik
*note
username = sufyan
password = 12345


untuk membuat tamplan form seperti diatas membutuhkan dua file PHP yaitu index.php dan proses.php.
dalam index.php terdapat CSS serta 2 text field dan 1 buah button. scripnya sebagai berikut:

<style type="text/css">

<!--

.border1 {

border: 2px solid red;

background: #6cae15;

margin: auto;

width: 300px;

height: 250px;

margin-top:100px;

}

.border2 {

background: #6cae15;

padding: 5px 40px 5px 40px;

}

body {

background-color: #CC6;

}

-->

</style>

</head>

<body>

<form id="loginForm" action="proses.php" method="post">

<div class="border1">

<div class="border2">

<h3 align="center">LOGIN </h3>

<hr/>

<p><strong>User Name</strong><br />

<input type="text" name="username" size="30"/>

</p>

<p><strong>Password</strong><br />

<input type="password" name="password" size="30"/>

</p>

<p>

<input type="submit" value="Login" onclick="login();"/>

</p>

</div>

</div>

</form>

</body>

</html>

Dalam index.php juga terdapat JavaScript yang berguna jika Text Field blum diisi maka ada peringatan untuk mengisi terlebih dahulu. script JavaScriptnya seperti berikut :

<script type="text/javascript">

function login() {

var loginForm = document.getElementById("loginForm");

if (loginForm.username.value == "") {

alert("Silahkan Masukkan User Name");

return false;

}

if (loginForm.password.value == "") {

alert("Silahkan Masukkan Password.");

return false;

}

}

</script>

untuk validasi Form, terdapat pada file proses.php, yang berfungsi untuk memfalidasi dari index.php. scriptnya sebagai berikut :

<div align = "center">

<?php

require_once('index.php');

$user = 'sufyan';

$pass = '12345';

if ((isset($_REQUEST['username']) == $user)&&($_POST['password'] == $pass)){

echo "<strong><font face='Verdana' size='3' color=red>selamat datang<br></strong></center>". $_POST['username'];

}

else {

echo "<strong><font face='Verdana' size='3' color=red>Username & Password yang anda masukkan salah, Coba lagi<br></strong></center>";

}

?>

==SELAMAT MENCOBA ==

Readmore »»

04 Maret 2010

Membuat kalkulator dengan Javascript

JavaScript adalah 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 situs web (sebagai JavaScript 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>.


untuk melihat hasil lebih lanjut silahkan klik link ini kalkulator javascript

script untuk membuat kalkulator seperti diatas scriptnya sebagai berikut

<html>

<title>Kalkulator javascript </title>

<SCRIPT LANGUAGE="JavaScript">

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 kosong()

{

form.a.focus()

form.a.value=""

form.b.value=""

form.hasil.value=""

}


</SCRIPT>

<body onload=kosong()>

<CENTER>

<FORM name="form">

<table width="0" border="0" align="center" cellpadding="2" cellspacing="0">

<tr>

<td width="270" height="45" align="center" bgcolor="#CCCCFF"><strong>PROGRAM KALKULATOR</strong></td>

</tr>

<tr>

<td align="center" bgcolor="#CCCCFF"><strong>Angka 1</strong> <input type="text" name="a"></td>

</tr>

<tr>

<td align="center" bgcolor="#CCCCFF"><strong>Angka 2</strong> <input type="text" name="b"></td>

</tr>

<tr>

<td align="center" bgcolor="#CCCCFF"><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()">

</tr>

<tr>

<td align="center" bgcolor="#CCCCFF"><strong>Hasil</strong> <input type "text" name="hasil"></td>

</tr>

<tr>

<td align="center" bgcolor="#CCCCFF"><input type="button" value="Clear" onClick="kosong()"></td>

</tr>

<tr>

<td align="center" bgcolor="#CCCCFF">By : <a href="http://5ufy4n.blogspot.com/">5ufy4n.blogspot.com</a></td>

</tr>

</table>

</FORM>

</CENTER>

</body>

</html>



Readmore »»

27 Februari 2010

Membuat Layout Website dengan CSS

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

berikut layout website yang menggunakan CSS

contoh layout menggunakan CSS

dalam membuat layout seperti gambar diatas membutuhkan linked CSS dan HTML. buka notepad terus tulis script berikut ini :


#wrapper {

margin: auto;

width: 900px;

padding:5px 2px 5px 2px;

border: 1px solid red;

}

#header {

height: 100px;

margin-bottom:5px;

border: 1px solid red;

}

#inner {

margin: auto;

border: 1px solid red;

}

#sidebar {

float: left;

width: 200px;

height: 350px;

border: 1px solid red;

}

#content {

float: right;

width: 690px;

height: 350px;

border: 1px solid red;

}

#contentgambar {

height: 100px;

border: 1px solid red;

}

#tekskanan{

float: left;

width: 400px;

height:230px;

border: 1px solid red;

}

#tekskiri {

float: right;

width: 235px;

height: 150px;

border: 1px solid red;

}

#footer {

clear: both;

height: 50px;

border: 1px solid red;

}

setelah itu simpan script diatas dengan nama mystyle.css

setelah itu buat lagi script 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>MY Website</title>

<link rel="stylesheet" href="mystyle1.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="content">

<div id="contentgambar">

gambar

</div>

<div id="tekskanan">

Content

</div>

<div id="tekskiri">

Right

</div>

</div>

</div>

<div id="footer">

Footer

</div>

</div>

</body>

</html>

simpan dengan nama terserah, misal layout.html. ingat file CSS dan HTML harus ada dalam satu folder.

berikut ini adalah hasil desain website dengan menggunakan CSS.

contoh layout sudah jadi menggunakan CSS

scripnya sebagai berikut

untuk CSS:

#wrapper {

margin: auto;

width: 900px;

padding:5px 2px 5px 2px;

background-color: #f6a00b;

}

#header {

height: 100px;

margin-bottom:5px;

padding: 5px 0px 5px 20px;

background-color: #F00;

}

#cari {

height: 20px;

padding-right: 10px;

text-align: right;

color: #0F0;

}

#logo {

float: auto;

height: 30px;

text-align:left;

color: #0F0;

}

#headermenu{

height: 20px;

padding-right: 10px;

text-align: right;

color: #0F0;

}

#inner {

margin: auto;

color: #0F0;

background-color: white;

}

#sidebar {

float: left;

width: 200px;

height: 350px;

background-color: #C93;

}

#content {

float: right;

width: 700px;

height: 350px;

color: #0F0;

background-color: #9FF;

}

#contentgambar {

height: 100px;

border: 1px solid red;

}

#tekskanan{

float: left;

width: 400px;

height:230px;

color: #300;

padding-left:20px;

}

#tekskiri {

float: right;

width: 235px;

height: 150px;

background-color: #C93;

color: #0F0;

padding-left:20px;

}

#footer {

clear: both;

height: 50px;

padding-top:20px;

text-align: center;

background-color: #F00;

color: #0F0;

}

#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: #9C0 no-repeat left center;

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

}

#leftmenu a:hover{

background: #5e9711 no-repeat left center; color: #F00;

}

Untuk 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>MY Website</title>

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

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

<body>

<div id="wrapper">



<div id="header">

<img src="logo.jpg" width="100" height="100" align="left" />

<div id="headermenu">

<strong>Home RSS About Us</strong>

</div>

<div id="logo">

<h1> 5ufy4n website</h1>

</div>

<div id="cari"><strong>cari </strong>

<input type="text" />

</div>

</div>

<div id="inner">

<div id="sidebar">

<div id="leftmenu">

<ul>

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

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

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

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

<li><a href="#"><strong>My Friend</strong></a></li>

</ul>

</div>

</div>

<div id="content">

<div id="contentgambar">

<img src="g1.jpg" width="349" height="100" /><img src="g2.jpg" width="349" height="100" />

</div>

<div id="tekskanan">

<h3>Dont Sleep Away The Night</h3>

<p><strong>26 Februari 2010 [13:00]</strong><br />

Tomorrow's near, never I felt this way<br />

Tomorrow, how empty it'll be that day<br />

It tastes a bitter, obvious to tears to dried<br />

To know that you're my only light<br />

I love you, oh I need you<br />

Oh, yes I do</p>

<p><strong>Raad More...</strong></p>

</div>

<div id="tekskiri">

<p><strong>Lagu terbaru</strong>

</p>

<ul>

<li>Nothing to lose</li>

<li>Tears in Heaven</li>

<li>Wonderful Tonight</li>

<li>Tears in Heaven</li>

</ul>

</div>

</div>

</div>

<div id="footer">

&copy; 2010 By Sufyan

</div>

</div>

</body>

</html>

simpan kedua file diatas dengan nama mystyle.css dan desain.html dalam satu folder.


tunggu tutorial selanjutnya..

Readmore »»

21 Februari 2010

Upgrade Flash Disk 1 GB menjadi 2 GB

bagi yang mempunyai Flash Disk 1 GB, ini kabar baik bagi anda semua.

dengan tool kecil ini Flas Disk 1 GB dapat dirubah menjadi 2 GB,,,

100% berhasil...

bagi yang tidak berhasil,,,resiko ditanggung sendiri hehehe

download toolnya disini

cara menggunakannya sangat mudah,,pilih Drive Flash Disk anda,,,setelah itu klik fix

warning !! hanya berlaku Flash Disk 1 GB, selain itu terserah anda,,,rusak tinggal beli lagi..

Readmore »»

18 Februari 2010

Membuat Template Desain Web dengan Tabel



Dalam membuat Template Desain Web diatas menggunakan table.

Pertama-tama buat atribut table.

Scripnya seperti dibawah ini

<table width="980" height="550" border="1" align="center" cellspacing=0 cellpadding=5>

Scrip diatas membuat ukuran table dengan ukuran 980 x 550. Dengan posisi di tengah.


Untuk membuat desain seperti diatas dibutuhkan 4 tabel, yaitu header, footer, left menu, contens dan right menu.

Pembuatan Header menggunakan script sebagai berikut :

<td height="104"colspan=3 align ="center" >Header</td>

Script diatas menggabungkan 3 tabel menjadi satu

Pembuatan Header menggunakan script sebagai berikut :

<td height="90"colspan=3 align ="center" >Footer</td>

Script diatas menggabungkan 3 tabel menjadi satu


Pembuatan left menu, contens dan right menu dibutuhkan 3 tabel. Scripnya seperti berikut :

<td width="180" valign="top">left menu</td>

<td width="600" valign="top">contens</td>

<td width="180" valign="top">right menu</td>


Script keseluruhannya seperti 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>Template Desain Web</title>

</head>

<body>

<table width="980" height="530" border="1" align="center" cellspacing=0 cellpadding=5>

<tr>

<td height="104"colspan=3 align ="center" >Header</td>

</tr>

<tr>

<td width="180" valign="top">left menu</td>

<td width="600" valign="top">contens</td>

<td width="180" valign="top">right menu</td>

</tr>

<tr>

<td height="90"colspan=3 align ="center" >Footer</td>

</tr>

</table>

<p align = center> &copy; Copyright By sufyan</p>

</body>

</html>

Readmore »»