dalam pembuatan form login,ita bisa menggunakan bahasa pemrograman PHP yang dikombinasikan dengan HTML. Disini saya akan coba sharing untuk membuatnya. adapun tampilan dari form yang akan kita buat adalah sebagai berikut:
dalam bagian ini, harus memasukkan username dan password secara benar. ketentuanya adalah:
1. username dan password harus huruf
2. bila kedua kolom tersebut kosong, maka akan keluar peringatan sebagai berikut:
3. bila username atau password salah, maka akan keluar peringatan sebagai berikut:
kemudian apabila diklik "klik disini", maka akan kembali lagi ke form login.
4. bila username dan password benar, maka akan keluar tampilan berikut:
untuk membuat form login seperti diatas
untuk membuat action, ketikkan script dibawah ini, kemudian save dengan nama file codelogin.php
scriptnya adalah sebagai berkut:
<!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>Admin status</title>
</head>
<body>
<?php
if(($_POST['user']=='adityaimam') AND ($_POST['pass']=='arema')) {
echo '<strong>W E L C O M E :</strong> '.$_POST['user'];
}
else {
echo "<br><body text='red'><strong>maaf anda melakukan kesalahan pengisian username atau password<br></strong></body>";
echo "<a href='http://localhost/modul6/login.html'><strong>klik disini</a> untuk login kembali</strong>";
}
?>
</body>
</html>
setelah itu untu membuat HTML nya, ketikkan script dibawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FORM LOGIN</title>
</head>
<style type="text/css">
#body {
position:absolute;
width:350px;
height:240px;
z-index:1;
left: 350px;
top: 100px;
background-color: #FFFFFF;
border: 2px solid Black;
}
#bawah{
position:absolute;
width:80px;
height:30px;
z-index:2;
left: 250px;
top: 130px;
}
#header{
width:350px;
height:60px;
top:10px;
background-color:#cc33cc;
}
#tengah{
top:20px;
}
.style2{
font-size: 17px;
font-weight: bold;
}
.style1{
position:absolute;
font-size:20px;
top:20px;
left:140px;
}
</style>
<script type="text/javascript">
function error()
{
alert('Masukkan User Name dan Password');
}
function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error();
}
}
</script>
<body onLoad="document.form1.user.focus();" style="background-color:#cc99ff">
<form name="form1" method="post" action="codelogin.php">
<div id="body">
<div id="header">
<div class="style1"><strong> L O G I N </strong></div>
</div>
<div id="tengah" >
<div align="left">
<table width="350" border="0">
<tr>
<td width="121" style="text-align:left"><strong>username<strong></td>
<td width="196">
<input name="user" type="text" size="30" value="" style="background-color:#cccccc" autocomplete="off"></td>
</tr>
<tr>
<td style="text-align:"><strong>password</strong></td>
<td>
<input type="password" name="pass" size="30" style="background-color:#cccccc" autocomplete="off"></td>
</tr>
</table>
</div>
</div>
<div id="bawah">
<input type="submit" name="submit" value=" L O G I N " onClick="check()">
</div>
</div>
</form>
</body>
</html>
demikianlah.. semoga bisa bermanfaat... SALAM SATU JIWA!!!!
dengan menggunakan bahasa PHP, kita bisa membuat generate tabel. kinerja dari generate table adalah hanya dengan memasukkan angka pada kolom "columns" dan "rows" yang tersedia, kemudian pada bagian "cells" akan mengkalkulasidengan cara mengalikan secara otomatis, sesuai dengan angka yang di inputkan pada "columns" dan "rows".
misal:
rows = 4
columns = 5
maka,
cells = 20
adapun tampilan dari generate tabel otomatis adalah sebagai berikut:
setelah itu kita klik tombol "generate", hasilnya sebagai berikut:
untuk scripnya adalah sebagai berikut:
anda membuat bahasa PHP terlebih dahulu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hasil Generate Tabel</title>
</head>
<body>
<div align="left">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>
<strong> HASIL GENERATE </strong>
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</div>
</body>
</html>
kemudian save dengan nama file : tgsmod5.php
setelah itu buatlah program HTML nya, adapun scriptnya adalah sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>-GENERATE TABLE-</title>
<style type="text/css">
<!--
#TOMBOL {
position:absolute;
width:178px;
height:24px;
left: 50px;
top: 170px;
}
.-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function input() {
var row = parseInt(document.getElementById('JumlahRow').value);
var col = parseInt(document.getElementById('JumlahColum').value);
var X = document.getElementById('JumlahCell');
var total = 0 ;
total = row * col;
X.value = new String(total);
}
}
//-->
</script>
</head>
<body>
<form method="post" action="tgsmod5.php">
<h3 align="left"><strong><u>TABEL GENERATE FLEKSIBEL</u></strong></h3>
<div align="left">
<table width="327" border="0">
<tr>
<td width="121" style="text-align:center">Rows</td>
<td width="196"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="input();" onfocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><label>Columns</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="input();" onfocus="this.select();"></td>
</tr>
<tr>
<tr bgcolor="#0066cc">
<td style="text-align:center">Cell Total </td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="input();" onFocus="this.select();"></td>
</tr>
</table>
</div>
<div id="TOMBOL">
<input type="submit" name="Generate" value="G e n e r a t e"><input type="reset" name="Reset" value="R e s e t">
</div>
</form>
</body>
</html>
demikianlah program generate table otomatis.... Semoga bisa bermanfaat... SALAM SATU JIWA
1. Passing by value
Semua nilai yang di-pass masuk atau keluar dari fungsi adalah passing by value, bukan by reference. ini berarti PHP membuat kopian dari nilai original dan nilai kopian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya. Dengan begitu bagaimanapun kita ubah nilai itu, tidak akan mengubah nilai originalnya
Variable yang diberikan oleh parameter hanya akan diolah didalam fungsi, variable yang berada diluar fungsi akan tetap. Dengan kata lain variable yang dipakai oleh suatu fungsi tidak akan mempengaruhi variable yang ada diluar.
CONTOH:
<?php
function jumlah($nilai)
{
$nilai++;
}
$input=5;
jumlah($input);
echo $input;
?>
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 sbb:
$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
2. Passing by reference
berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas, kita akan modifikasi menjadi mekanisme passing by reference.
Untuk mengubah jadi passing by reference, kita hanya cukup menambahkan operator & pada argumennya.
<?php
function jumlah(&$nilai) {
$nilai++;
}
$input=5;
jumlah($input);
echo $input;
?>
Penjelasan:
Sesuai dengan penjelasan passing by reference diatas, nilai yang diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi fungsilah yang gunakan sebagai outputnya, yaitu 6.
SUMBERpada web programming kita bisa memanfaatkan java script untuk membuat suatu aplikasi. contohnya adalah sebagai berikut:
adapun script dari aplikasi ini adalah sebagai berikut:
function warung()
{
var catat = document.formwarung;
var hargaOskab = parseInt(catat.hrgOskab.value) * parseInt(catat.jmlOskab.value);
var hargaOtos = parseInt(catat.hrgOtos.value) * parseInt(catat.jmlOtos.value);
var hargaNaged= parseInt(catat.hrgNaged.value) * parseInt(catat.jmlNaged.value);
var hargaHet = parseInt(catat.hrgHet.value) * parseInt(catat.jmlHet.value);
var hargaJoshua= parseInt(catat.hrgJoshua.value) * parseInt(catat.jmljoshua.value);
var hargasemua = hargaOskab + hargaOtos + hargaNaged + hargaHet + hargajoshua;
if (hargasemua > 50000)
{
catat.TotalBayar.value = hargasemua;
catat.Diskon.value = 10000;
catat.JumlahBayar.value = hargasemua - parseInt(catat.Diskon.value);
}
else
{
catat.TotalBayar.value = hargasemua;
catat.Diskon.value = 0;
catat.JumlahBayar.value = hargasemua;
}
}
function awal(){
document.formwarung.reset();
}
kemudian simpan dengan nama: warung.js
kemudian, ketikkan
<!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>WAROENG AREMA</title>
<script type="text/javascript" src="warung.js"></script>
</head>
<body>
<h1><strong>DAFTAR MENU WARUNG AREMA BRO....</strong></h1>
<form name="formwarung" action="#">
<table border="1" style="width:589" style="background-color:#CCFF99">
<tr>
<th style="width:27" scope="col">No</th>
<th style="width:181" scope="col">Daftar Menu</th>
<th style="width:185" scope="col">Harga</th>
<th style="width:166" scope="col">pesan</th>
</tr>
<tr>
<td><div style="text-align:center"><strong>1.</strong></div></td>
<td><strong>Oskab Ngalam Kane </strong></td>
<td><strong>@
<input type="text" name="hrgOskab" value="7000" size="20" readonly="readonly"/>
</strong></td>
<td><input name="jmlOskab" type="text" onkeyup="warung()" value="0" onfocus="this.select();"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>2.</strong></div></td>
<td><strong>Otos Maya nayamul</strong></td>
<td><strong>@
<input type="text" name="hrgOtos" value="5000" size="20" readonly="readonly"/>
</strong></td>
<td><input name="jmlOtos" type="text" onkeyup="warung()" value="0" onfocus="this.select();"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>3.</strong></div></td>
<td><strong>Es Naged Oji</strong></td>
<td><strong>@
<input type="text" name="hrgNaged" value="3000" size="20" readonly="readonly"/>
</strong></td>
<td><input name="jmlNaged" type="text" onkeyup="warung()" value="0" onfocus="this.select();"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>4.</strong></div></td>
<td><strong>Es Het</strong></td>
<td><strong>@
<input type="text" name="hrgHet" value="1500" size="20" readonly="readonly"/>
</strong></td>
<td><input name="jmlHet" type="text" onkeyup="warung()" value="0" onfocus="this.select();"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>5.</strong></div></td>
<td><strong>Es Joshua ria</strong></td>
<td><strong>@
<input type="text" name="hrgJoshua" value="3500" size="20" readonly="readonly"/>
</strong></td>
<td><input name="jmlJoshua" type="text" onkeyup="warung()" value="0" onfocus="this.select();"></td>
</tr>
<tr>
<td colspan="3"><div style="text-align:right"><strong>Total </strong></div></td>
<td><input name="TotalBayar" type="text" style="text-align:right" readonly="readonly" value="0"></td>
</tr>
<tr>
<td colspan="3"><div style="text-align:right"><strong>Diskon</strong></div></td>
<td><input name="Diskon" type="text" style="text-align:right" readonly="readonly" value="0"></td>
</tr>
<tr>
<td colspan="3"><div style="text-align:right"><strong>Jumlah bayar</strong></div></td>
<td><input name="JumlahBayar" type="text" style="text-align:right" readonly="readonly" value="0"></td>
</tr>
</table>
<div id="Layer1" style="position:left; width:166px; height:50px;">
<input type="button" value="reset" onclick="awal()"/>
</div>
</form>
</body>
</html>
selamat mencoba......
setelah membuat kerangka web, maka kita bisa membuat web sederhana dengan menggunakan script html..... adapun contohnya adalah sebagai berikut:
untuk membuat ini kita bisa mencoba dengan mempelajari source code nya:
source code:
<!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>aditya_WEB</title>
</head>
<style type="text/css">
<!--
#wrapper {
margin: auto;
width: 950px;
border: 0;}
#header {height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('Head1.jpg');}
#logoum {
float: left;
height: 85px;
width:85px;
margin-top:20px;
margin-left:30px;
border: 0;
background:red url('um.PNG');}
#judul {
float: left;
height: 35px;
width:300px;
margin-top:15px;
margin-left:10px;}
#head_right {
float: left;
height: 70px;
width:350px;
margin-left:20px;
margin-top:2px;
border: 0;}
#searcharea {
clear:both;
float: right;
height: 20px;
width:200px;
margin-top:0px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:50px;
margin-left:10px;
margin-top:1px;
border: 0;}
#search2 {
float: right;
height: 20px;
width:120px;
margin-right:2px;
margin-top:0px;
border: 1px solid black;
background:white;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 230px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar1.jpg');
}
#Inner2 {
float: left;
width: 718px;
height: 400px;
border: 0;
}
#top{
height: 90px;
border: 0;
background:blue url('inneratas.jpg');
margin-left:5px;
border: 1px solid black;
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}
#footer {
clear: both;
height: 80px;
border: 1px solid white;
background:blue url('sidebar1.jpg');
}
#right {
float: left;
width: 205px;
height: 200px;
margin-left:18px;
margin-top:10px;
border: 1px solid green;
background:blue url('hati.jpg.jpg');
}
#leftmenu ul {
width: 230px;
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: blue url('tombol.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}
.style1{
font-size: 24px;
font-weight: bold;
color: #000099;}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
color: "black";
font-weight: bold;}
.style3 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;}
.style4 {color: "black"}
.style5 {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
color: "black";
font-weight: bold;}
-->
</style>
<body>
<div id="wrapper">
<!--header-->
<div id="header">
<div id="logoum"></div>
<div id="judul" class="style2" >TEKNIK ELEKTRO</div>
<div id="head_right">
<div class="style3" id="head_right">
<div align="right"><a href="http://google.co.id" target="_blank" class="style4">Home</a> | <a href="http://google.co.id" target="_blank" class="style4">Sitemap</a> | <a href="http://google.co.id" target="_blank" class="style4">RSS</a> | <a href="http://google.co.id" target="_blank" class="style4">Contact</a> | <a href="http://google.co.id" target="_blank" class="style4">About Us</a> </div>
</div>
<div id="searcharea">
<div class="style4" id="search1">
<strong>Search</strong></div>
<div id="search2"></div>
</div>
</div>
</div>
<!-- TENGAH -->
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<div align="center"><a href="http://google.co.id">Home</a></div>
</li>
<li>
<div align="center"><a href="http://google.co.id">News & Media </a></div>
</li>
<li>
<div align="center"><a href="http://google.co.id">Tutorial</a></div>
</li>
<li>
<div align="center"><a href="http://google.co.id">Tips and Trik</a></div>
</li>
<li>
<div align="center"><a href="#">Download</a></div>
</li>
</ul>
</div>
</div>
<div id="Inner2">
<div id="top">
</div>
<div id="content">
<p class="style1"><u>Desain Grafis</u></p>
<p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat.</p>
<p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div id="right">
</div>
</div>
</div>
<!--FOOTER-->
<div id="footer">
<p align="center" class="style5">2010 © aditya imam pratama</p>
</div>
</div>
</body>
</html>
semoga bisa bermanfaat....
dalam pembuatan web.. kita bisa mencoba untuk membuat kerangka terlebih dahulu, karena dengan begitu web akan bisa terlihat lebih rapi......
berikut akan kita tampilkan contoh kerangka web:
adapun source code adalah 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>kerangka_WEB_aditya</title>
</head>
<style type="text/css">
<!--
#wrapper {
margin: auto;
width: 800px;
border: 1px solid Blue;
}
#header {
height: 80px;
border: 1px solid purple;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 210px;
height: 335px;
border: 1px solid red;
}
#center{
float: left;
width: 563px;
height: 335px;
border: 1px solid green;
}
#top{
height: 80px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 10px;
width: 320px;
height: 240px;
border: 1px solid green;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid magenta;
}
-->
</style>
<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="center">
<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>
dalam bahasa pemrograman berbasis web, juga bisa menampilkan tabel....
untuk lebih jelasnya mari kita common....
download script tabel
semoga bisaa bermanfaat,,,,,,
time
about ayas
- ADITYAAREMA
- nama ayas sebetulnya bukan ADITYAAREMA, tapi Aditya Imam Pratama, ADITYAREMA merupakan sebuah nama yang menggambarkan bahwa ayas sangat bangga menjadi AREMA. ayas biasa dipanggil imam - pon - dita - adit. Anda bisa panggil saya terserah yang penting bukan Mince atau nama2 bencis sebangsanya, serta jangan menyinggung rasisme :D... saya lahir di Kota Malang, I Love this city, tanggal 7 Agustus 1989, tepatnya di RSSA bukan dukun beranak... jadi secara otomatis sejak saya lahir, saya adalah AREMA cukup sekian perkenalannya ya... kalo mau lebih intim lagi add aja di FB - aditya_tothemax@yahoo.co.id -
