BERMULA DARI MIMPI: March 2010

Ingin membuat sebuah login form sederhana seperti di bawah ini? di mana aplikasi web ini bisa berfungsi untuk menerima masukan dari user, ataupun saat administrator butuh masuk pada sistem. Tentunya memerlukan login form.

Pada aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga
metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP,
parameter-parameter GET dapat dibaca melalui superglobal $_GET,
sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.

Berikut akan ditulis cara membuat sebuah login form sederhana menggunakan html. Dengan tampilan sebagai berikut:

dan kemudian diisi dengan user dan password dengan tampilan berikut (pada kali ini penulis menggunakan contoh password standart 00000 yang user dan passwordnya akan dapat di ubah pada file admin.php:

Berikut adalah kode html yang harus dibuat disimpan dengan nama ame6.html:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Login Form Ameliza</title> <link rel="stylesheet" href="ame.css" type="text/css" /> </head> <body onLoad="document.form1.user.focus(); backgroundimage= "bunga.jpg"> <form name="form1" method="post" action="admin.php"> <div id="apDiv1"> <div id="header"> </div> <div> <div align="center"> <img src="header.jpg" align="center"> <div align="center" height="50"> User Name : <input type="text" name="user" size="40" value="" style="background-color:#00FFFF"> Password : <input type="password" name="pass" size="40" style="background-color:#00FFFF"> <input type="submit" name="submit" value=" M A S U K " onClick="admin()"> </div> </div> <div align="center" id="apDiv3"> </div> <div id="footer" align="center"> ©Copyright --> Amee </div> </div> </form> </body> </html>

jangan lupa juga membuat file css-nya disimpan dengan nama ame.css:

 <style type="text/css"> #apDiv1 { position:absolute; width:370px; height:300px; z-index:1; left: 449px; top: 136px; background-color: #FFFFFF; border: 2px solid Red; } .style3 { font-size: 10px; font-weight: bold; } #apDiv2 { position:absolute; width:412px; height:115px; z-index:2; top: 0px; left: 2px; } #header{ left:450px; width:430px; height:85px; background-image: url(); } #footer{ position:absolute; width:373px; height:40px; } body { background-image: url(pudency.png); } </style> 

berikut adalah file php nya yang digunakan sebagai penyimpan data user dan login password di file inilah dapat mengubah password dan usernya. simpan dengan nama admin.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"> <head> <title>Form Administrator</title> </head> <body> <?php if(($_POST['user']=='ameliza') AND ($_POST['pass']=='00000')) { echo 'Selamat, Anda Telah Berhasil Masuk Halaman Administrator Dengan User Name :'.$_POST['user']; echo ' Haiiii...yang udah masuk makasih ' . $_POST['user']; } else { echo " <body text='red'><center>Terdapat Kesalahan Pada saat Anda Login...! <a href='ame6.html'><h4>Kembali Ke Login</h4></a></center></body>"; } ?> </body> </html>

Kemudian buat file javasriptnya yang disimpan dengan nama javasript.js:

 <script type="text/javascript"> function error1() { alert('Masukkan User Name dan Password Terlebih Dahulu '); } function check() { if(form1.pass.value == "" || form1.user.value=="") { error1(); } } </script> 

Pada form ini jika berhasil melakukan login maka akan muncul halaman konfirmasi keberhasilan memasuki sistem sebagai berikut:

dan jika gagal maka akan muncul konfirmasi adanya kesalahan dalam login user. dan jika di klik perintah kembali maka akan kembali ke form login awal :

Terimakasih, karena mungkin dalam tulisan ini masih banyak kesalahan mohon dimaklumi karena kita semua masih berada dalam taraf belajar.

Membuat halaman web agar lebih mudah dapat memanfaatkan Cascading Style Sheet atau akrab disebut dengan CSS. Dengan CSS, akan mempermudah kita dalam mendesain layout untuk web dengan lebih ringan. Untuk dapat membuat tampilan layout web seperti berikut dengan mengunakan CSS:

Yang pertama dilakukan adalah dengan membuat CSS sebagai berikut, yang disimpan dengan nama modul3_1.css (untuk nama file bisa dirubah sesuai dengan kebutuhan asal tetap dengan ekstensi file .css/ pada tulisan ini nama tersebut hanyalah sebagai contoh)

#wrapper { margin: auto; width: 750px; border: 1px solid red; } #header { height: 80px; border: 1px solid blue; } #inner { float: left; margin: 5px 0; border: 1px solid black; } #sidebar { float: left; margin-right: 20px; width: 180px; height: 330px; border: 1px solid red; } #content1 { float: left; width: 544px; height: 330px; border: 1px solid green; } #top { float: left; width: 544px; height: 120px; border: 1px solid blue; } #content { float: left; width: 374px; height: 207px; border: 1px solid red; } #right { float: right; width:170px; height: 170px; border: 1px solid orange; } #footer { clear: both; height: 50px; border: 1px solid blue; }

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

Setelah selesai layout telah siap dan dapat segera di edit sesuai dengan kebutuhan web yang diperlukan. Berikut ini adalah sedikit contoh untuk mengisi layout-layout tersebut, menjadi sebuah halaman web dengan tampilan berikut ini:

Tidak berbeda jauh dengan sebelumnya awal membuatnya pun dengan membuat file CSS sebagai berikut: (dalam tulisan ini file disimpan dengan nama modul3_2.css)

 #wrapper { margin: auto; width: 750px; border: 0px solid red; } #header { height: 80px; border: 0px solid blue; } #templatemo_menu_panel{ width: 750px; height: 80px; repeat: x; background: url(back.png); } #templatemo_menu_section ul { float: right; width: 350px; margin: 0; padding: 0 27px 0 0; list-style: none; } #templatemo_menu_section ul li a{ float: left; width: 50px; font-size: 10px; font-weight: bold; text-align: center; text-decoration: none; color: #00034b; border-right: 1px solid #5f3b11; } #searchfield{ border: 1px solid #ffffff; color: #000000; font-size: 13px; font-variant: normal; height: 15px; line-height: normal; width: 100px; } #searchbutton{ float: right; cursor: pointer; font-size: 10px; font-weight: bold; height: 20px; margin: 0 0 0 7px; text-align: center; vertical-align: bottom; white-space: pre; width: 50px; } #boxImage{ float: left; margin: 10px; width: 70px; height: 50px; } #boxText{ float: left; margin: 10px; padding: 10px 0 0 0; width: 250px; height: 50px; font-size: 20px; font-weight: bold; text-align: left; color: blue; } #boxButton{ float: right; padding: 30px 0 0 0; width: 50px; height: 15px; } #boxTF{ float: right; padding: 30px 50px 0 0; width: 170px; height: 15px; } #inner { float: left; height:330px; border: 0px solid black; } #sidebar { float: left; width: 200px; height: 330px; background: #ffff78; border: 0px solid red; } #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: #6cae15 no-repeat left center; margin: 0px 0px 1px; color: #ffffff; } #leftmenu a:hover{ background: #5e9711 no-repeat left center; color: #ffffff; } #content1 { float: left; width: 550px; height: 330px; border: 0px solid green; background: yellow; } #top { float: left; width: 550px; height: 100px; border: 0px solid blue; } #content { float: left; width: 374px; height: 230px; border: 0px solid red; background: #ff70ff; } #right { float: right; width: 150px; height: 150px; font-size: 12px; font-weight: bold; background: #ffffff; border: 0px solid orange; } #fontRight{ font-size: 10px; font-weight: bold; } #footer { clear: both; text-align: center; height: 50px; border: 0px solid blue; background:blue; } 
Lalu buat kode html 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>Desain Layout Sederhana</title> <link rel="stylesheet" href="modul3_2.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="templatemo_menu_panel"> <div id="boxImage" align="right"> <img src="um.jpg" height="70" width="70" /> </div> <div id="templatemo_menu_section"> <ul> <li><a href="#home">Home</a></li> <li><a href="#Situs_Map">Situs Map</a></li> <li><a href="#RSS">RSS</a></li> <li><a href="#Contact">Contact</a></li> <li><a href="#About_US">About Us</a></li> </ul> </div> <div id="boxText"> TEKNIK ELEKTRO </div> <div id="boxTF"> <input type="text" name="q" size="10" id="searchfield" title="searchfield" /> </div> <div id="boxButton"> <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /> </div> </div> </div> <div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#News_and_Media">News and Media</a></li> <li><a href="#Tutorials">Tutorials</a></li> <li><a href="#Tips_and_Tricks">Tips and Tricks</a></li> <li><a href="#Downloads">Downloads</a></li> </ul> </div> </div> <div id="content1"> <div id="top"> <img src="teknik_pict.png" height="250" width="625" /> </div> <div id="content"> <h3 align="center">Website Elektro</h3>  " Kejujuran adalah hal yang paling berharga dan tak dapat dinilai dengan uang. Tapi terkadang nilai kejujuran menjadi relatif, ketika kita dihadapkan pada sesuatu yang terkadang menyulitkan posisi kita. Tak terasa kadang kita mampu menggadaikannya." <hr align="left" style="color:red" width="200" /> <img src="confuse.png" align="left" border="3" style="color:black" width="40" height="40" /> </div> <div id="right"> EVENTS <div id="fontRight"> <ul> <li>Lomba Panjat tiang listrik</li> <li>Lomba Tarik Kabel</li> <li>Balap Karung 10 KM</li> </ul> </div> </div> </div> </div> <div id="footer"> © 2010 Teknik Elektro UM Malang, Indonesia </div> </div> </body> </html> 

Pastikan gambar yang digunakan dalam desain web anda telah disimpan dalam folder yang sama dengan kode html dan css-nya.

Dalam tulisan kali ini, penulis masih menemukan kelemahan yakni belum validnya halaman web yang telah dibuat, mohon dimaklumi. Jika ada yang bisa bertukar ilmu dan berkenan memberi tahu dimana letak kesalahannya terimakasih sebelumnya.Kita selalu belajar sebagai manusia dan terus saling melengkapi.

BERMULA DARI MIMPI

Wednesday, March 31, 2010

Membuat Halaman Login Form Sederhana (Tanpa DataBase)

Wednesday, March 3, 2010

Membuat layout dan web sederhana menggunakan CSS

My Favourite Site

About Me

Blog Archive

..

Categories

TIME

More

Followers