SIMPLE LOGIN JAVA SCRIPT


Hhaaiiii..
balik lagi deh ke belajar form login,
kalu cuman mau nampilin form kosongan aja tanpa disain apa2 sih ringan gann..
Pada dasarnya sih mudah, kalu cuman mau nampilin form nya aja loh ya,,

suport by :


naHh ini guYss untuk script java scriptnya sendiri , simak yah..
file name nya " uts.js " hihi, jadi ngeshare tugas Q kuliah daHh, karena memang dulu suruh buat ginian seh..

function cekSubmit(form){
        if (form.elements[0].value == "" || form.elements[1].value  == "" || form.elements[2].value == "" || form.elements[3].value == "" ||form.elements[4].value == ""||form.elements[5].value == "" )
        {
        alert("Silakan isikan nama atau email serta data anda secara lengkap anda");
        } else {
        alert("Deskripsi singkat : " +form.elements[0].value +" adalah seorang manusia yang tinggal di kota "+form.elements[3].value +" tepatnya di "+form.elements[2].value +" dengan alamat kode pos "+form.elements[4].value + ". Bila anda ingin menghubungi silahkan mengirim email di :"+form.elements[1].value );
        }
        //alert("Deskripsi singkat : " +form.elements[0].value +" adalah seorang manusia yang tinggal di kota "+form.elements[3].value +" tepatnya di "+form.elements[2].value +" dengan alamat kode pos "+form.elements[4].value + ". Bila anda ingin menghubungi silahkan mengirim email di :"+form.elements[1].value );
        return(true);
        }
       
   

singkat juga ternyata ya, di bandingin kalu kita pake PHP yg saya benernya belon ngerti..
trus kita panggil dah di html nya,
silahkan di simak lg yah scriptnya, atau mungkin kalian seneng nyebut coding nya..
namanya "html.html"
nih nimatin :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sign Up</title>
       <script language="JavaScript"type="text/javascript" src="uts.js"></script>
    </head>
    <body>
               <h2>::Sign Up Form::</h2>
            <form name="calc" action="#">
                First Name :
                <br>
                <font color="white">spasinya</font>
                <input type="text" size="25" name="inputan1">
                <br>
                Last Name:
                <br>
                <font color="white">spasinya</font>
                <input type="text" size="25" name="inputan2">
                <br>
                User Name:
                <br>
                <font color="white">spasinya</font>
                <input type="text" size="25" name="inputan3">
                 <br>
                Email:
                <br>
                <font color="white">spasinya</font>
                <input type="text" size="25" name="inputan4">
                <br>
                Password:
                <br>
                <font color="white">spasinya</font>
                <input type="text" size="25" name="inputan4">
                <br>
                Retype Password:
                <br>
                <font color="white">spasinya</font>
                <input type="text" size="25" name="inputan5">
                <br><br>
                <font color="white">spasinya</font>
                <input type="submit" value="Process" onClick = "cekSubmit(this.form)"><br>
            </form>
          </body>
</html>

untuk tampilanya harusnya kayak gini ni guySs..

FORM LOGIN DENGAN JAVA SCRIP


hai, guyss..
ketemu lagi sama aq, lagi2 kali ini kita harus belajar dengan html lagi. moga gak bosen daHh..
untuk pertemuan ini saya akan memberikan contoh aplikasi sederhana penggunaan konsep JacaScript dalam mendisain sebuah form Login yg biasa digunakan dalam sebuah jejaring atau hal lainnya, nah yg ini lumayan rumit juga sih guys, saya juga akan enggunakan konsep dari CSS untuk membangun sebuah halaman WEB nya, mogha kalian gak bingung daHh.. hehe
kali ini postingan Q di suport by :


untuk yg pertama
Kita mulai daHh dengan membangun konsep halaman nya terlebih dahulu menggunakan konsep CSS seperti yg dulu sudah pernah kita pelajai di postingan saya sebelumnya, simak script berikut guySs..
file ini aku kasih nama " kode css.css "

#wrapped {
width : 70%;
margin : auto;
}

#border {
height : 100px;
background : pink;
}

#borderkanan{
float : right;
height : auto;
width : 40%;
}

#middle {
height : 525px;
background-image : url("middle2.jpg");
}

#kolomkiri{
float : left;
height : auto;
width : 60%;
background-image : url();
}

#kolomkanan{
float : right;
height : auto;
width : 40%;
}

.mlebu {
background : transparent url("p.jpg") no-repeat bottom left;
display : block;
float : left;
width : 60px;
height : 24px;
font : tahoma 14px;
text-decoration : none;
color : white;
}
.mlebuok{
overflow : hidden;
width: 100%;
}

.daftar {
background : transparent url("daftar.jpg") no-repeat right;
display : block;
float : left;
width : 150px;
height : 30px;
font : tahoma 14px;
padding : 10px 0px 0px 0px;
text-decoration : none;
}

.tulisan{
    font-family: tahoma;
    font-size: 14px;
    text-align: left;
    color: white;
    border: 0px;
}

.kata{
    font-family: tahoma;
    font-size: 26px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.tulisan2{
    font-family: tahoma;
    font-size: 13px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.tulisan3{
    font-family: tahoma;
    font-size: 16px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.kopi {
font-family: tahoma;
    font-size: 13px;
    text-align: left;
    color: gray;
}

.bahasa {
display : block;
color : #5d3c1c;
text-decoration : none;
overflow : hidden;
}

#footer {
clear : both;
background : white;
height : 75px;
}



NaHh, kemudian untuk memanggilnya di html kalian bisa mengetikan script berikut guySs, tentunya ini udah termasuk script javascriptnya guySs.. so kalian tinggal simak lagi script mumet di bawah ini, hehe
file ini aq kasih nama " www.pesbuk.kom.html"

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd">
<html xlmns="htt<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
<TITLE>Welome to Komunitas Balita</TITLE>
<link rel="ICON" href="ym.ico" />
<script language="JavaScript"type="text/javascript" src="uts.js"></script>
<link rel="stylesheet" href="kode css.css" type="text/css" />
</HEAD>
<BODY>
<div id="border">
<div id="wrapped">
<div class="tulisan">
<br>
<img src="bayi.jpg" height="85" width="200">
<div id="borderkanan">
<table border=0 align="right" cellspacing=0 cellpadding=2>
<tr>
<td>Email</td>
<td width=10 ></td>
<td>Kata Sandi</td>
</tr>
<tr>
<td><form><input type="email" name="email" size="25" /></form></td>
<td></td>
<td><form><input type="password" name="pwd" size="25"  /></form></td>
<td width=3></td>
<td><div class="mlebuok" align="center">
<a class="mlebu" href="http://www.facebook.com">
<span>Masuk</span></a></div>
</td>
</tr>
<tr>
<td><input type="checkbox" />stay in page</td>
<td></td>
<td>Lupa kata sandi ? </td>
</tr>
</table></div>
</div></div>
</div></div>
<div id="middle">
<div id="wrapped">
<div id="kolomkiri">
<div class="kata">
<br>
Daftarkan Balita Anda<br>
Dalam Komunitas Balita Indonesia<br>
Sebagai Simbol Putra Bangsa
<br><br>
<div align="left">
<img src="indonesia.png" height="200" >
</div>
</div>
</div>
<div id="kolomkanan">
<div class="tulisan3">
<br><br>

<font size="3"><b><h2> ::Registrasi:: </h2></b></font><br>
<form name="calc" action="#">
<font size="4"> Gratis, sampai kapan pun.</font>
<Table Border=0 cellspacing=10 align="right">
<tr>
<td colspan=2 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
<tr>
<td align="right">First Name:</td>
<td><input type="text" size="25" name="inputan1">
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input type="text" size="25" name="inputan2">
</tr>
<tr>
<td align="right">User Name :</td>
<td><form><input type="text" size="25" name="inputan3">
</tr>
<tr>
<td align="right">Email :</td>
<td><form><input type="text" size="25" name="inputan4">
</tr>
<tr>
<td align="right">Password:</td>
<td><form><input type="text" size="25" name="inputan4"></td>
</tr>
<tr>
<td align="right">ReType Password:</td>
<td><form><input type="text" size="25" name="inputan5"></form></td>
</tr>

<tr>
<td align="right">Gender:</td>
<td><select><option value="-1">Jenis Kelamin:</option>
<option>Male</option>
<option>Female</option>
</select>
</tr>

<tr>
<td></td>
<td><div class="mlebuok" align="center">
<br><br>
<font color="white"></font>
<input type="submit" value="Process" onClick = "cekSubmit(this.form)"><br>
</form>

</tr>
<tr>
<td colspan=2 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
<td colspan=2 align="center">
<b>Category Balita</b> <font color=#464646>cute, lucu, dan familiar.</font>
</td>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapped">
<div class="tulisan2">
<table width=100% border=0 align="left">
<tr>
<td><a class="bahasa" href="http://www.indonesia.com">Bahasa Indonesia</a></td>
<td><a class="bahasa" href="http://www.sunda.com">Bahasa Sunda</a></td></td>
<td><a class="bahasa" href="http://www.bali.com">Bahasa Bali</a></td>
<td><a class="bahasa" href="http://www.bahasatubuh.com">Bahasa Tubuh</a></td></td>
<td><a class="bahasa" href="http://www.melayu.com">Bahasa Melayu</a></td>
<td><a class="bahasa" href="http://www.next.com">>></a></td>
<td width=500px></td>
</tr>
<tr>
<td colspan=8 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
</table><br>
<table border=0 cellspacing=1 cellpadding=2>
<tr>
<td width="155px"><a class="kopi">Balita Indonesia &copy; Copyright 2011</a></td>
<td width=""><a class="bahasa" href="http://www.aksarajawa.com">Indonesia</a></td>
<td width="299px"></td>
<td><a class="bahasa" href="http://www.seluler.com">Seluler</a></td>
<td><a class="bahasa" href="http://www.cariteman.com">Cari Teman</a></td>
<td><a class="bahasa" href="http://www.lencana.com">Lencana</a></td>
<td><a class="bahasa" href="http://www.orang.com">Orang</a></td>
<td><a class="bahasa" href="http://www.halaman.com">Halaman</a></td>
<td><a class="bahasa" href="http://www.tentang.com">Tentang</a></td>
<td><a class="bahasa" href="http://www.iklan.com">Iklan</a></td>
<td><a class="bahasa" href="http://www.foto.com">foto</a></td>
<td><a class="bahasa" href="http://www.karier.com">Karier</a></td>
<td><a class="bahasa" href="http://www.privasi.com">Privasi</a></td>
<td><a class="bahasa" href="http://www.ketentuan.com">Ketentuan</a></td>
<td><a class="bahasa" href="http://www.bantuan.com">Bantuan</a></td>
</tr>
</table>
</div>
</div>
</div>
</BODY>
</HTML>

NaHhh, untuk tampilan nya jadi form kayak gini ni gaNn..


naHh, selesai daHh,,
jika masih bantyak kekurangan wajar gann, karena aq ndiri juga lagi coba2 aja ini, hehe..
so,
masih butuh banyak saran dari master master web. hehe
di tunggu daHh info nya..

andibayu. Diberdayakan oleh Blogger.

PEMBELAJARAN BERBASIS ONLINE