PHP | Membuat Signup Page

1.         File signup.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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Geodik | Team Registration</title>

</head>

<style>

input{

    border: 2px solid #55ACEE;

    border-radius: 7px;

                transition: all 0.25s ease-in-out;

    -webkit-transition: all 0.25s ease-in-out;

    -moz-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;

    -webkit-transition: all 0.25s ease-in-out;

    -moz-transition: all 0.25s ease-in-out;

}

input:focus {

    outline: none;

    border-color: #55ACEE;

    box-shadow: 0 0 10px #55ACEE;

                box-shadow: 0 0 5px rgba(0, 0, 255, 1);

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);

    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);

}

#daftar{

    box-shadow: 0px 1px 0px #FFF;

    height: 30px;

                background: none repeat scroll 0% 0% #55ACEE;

border-color: #FFF;

color: #FFF;

}

#daftar:hover{

background-color: #55ACEE;

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));

border-color: #3B88C3;

}

 

#daftar:focus{

background-color: #3B88C3;

background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));

border-color: #3B88C3;

}

#atas{

border-top-left-radius:10px;

border-top-right-radius:10px;

background:#55ACEE;

width:550px;

height:30px;

color:#FFFFFF;

font-size:20px;

padding-top:10px;

margin-bottom:10px;

text-align:center;

}

#header{

background:#006666;

height:45px;

color:#FFFFFF;

font-size:20px;

margin-bottom:10px;

margin-top:0px;

text-align:center;

}

marquee{

padding-top:5px;

color:#00FF66;

}

#bawah{

border-bottom-left-radius:10px;

border-bottom-right-radius:10px;

background:#55ACEE;

width:550px;

height:30px;

}

.error {color: #FF0000;}

table{

border-top-left-radius:10px;

border-top-right-radius:10px;

border-bottom-left-radius:10px;

border-bottom-right-radius:10px;

}

body{

background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;

}

.style13 {color: #33FFFF;font-size:14px;}

.style15 {color: #FFFFFF}

.valid{color:red;};

</style>

<body onload="btn()" style="margin:0px;">

<div align="center">

<div id="header"></div>

 

<div align="center">

<div id="inner">

<form action="cek.php" method="post" id="signup" name="signup">

 

  <table bgcolor="#339999" width="550">

    <tr>

    <td  colspan="3"><div id="atas">.: TEAM REGRISTRATION :.</div></td>

    </tr>

  <tr>

    <td width="131"><span class="style13">Nama</span></td>

    <td width="14">:</td>

    <td width="397"><label>

      <input placeholder="isikan nama lengkap" onkeyup="names()" size="40" type="text" name="nama" id="nama" />&nbsp;<span id="nv" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td width="131"><span class="style13">Panggilan</span></td>

    <td width="14">:</td>

    <td width="397"><label>

      <input  size="40" type="text" name="panggilan" id="panggilan" />

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Alamat</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="isikan alamat rumah" onkeyup="alamats()" size="40" type="text" name="alamat" id="alamat" />&nbsp;<span id="av" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Email</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="email valid untuk validasi" onkeyup="ve()" size="40" type="email" name="email" id="email" />&nbsp;<span id="ev" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">No. HP</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="opsional (tidak akan ditampilkan)" size="40" type="text" name="nohp" id="nohp" />

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Universitas</span></td>

    <td>:</td>

    <td><label>

      <input size="40" type="text" onkeyup="univs()" name="univ" id="univ" />&nbsp;<span id="uv" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Jurusan</span></td>

    <td>:</td>

    <td><label>

    <select name="status" id="status">

      <option value="Guru Besar">Guru Besar</option>

      <option value="Dosen">Dosen</option>

      <option value="Mahasiswa">Mahasiswa</option>

      <option value="Pelajar">Pelajar</option>

    </select>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Jenis Kelamin</span></td>

    <td>:</td>

    <td><label>

    <select name="kelamin" id="kelamin">

      <option value="Pria">Pria</option>

      <option value="Wanita">Wanita</option>

    </select>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Password</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="minimal 4 karakter (A-Z, a-z, 0-9)" size="40" type="password" name="password" onkeyup="pass1()" id="password" />&nbsp;<span id="pv" class="valid">*</span><div id=’hasil’></div>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Ulangi Password</span></td>

    <td>:</td>

    <td><label>

      <input onkeyup="pass2()" placeholder="ketik ulang password" size="40" type="password" name="upassword" id="upassword" />&nbsp;<span id="pv1" class="valid">*</span>

    </label></td>

  </tr>

      <tr>

    <td  colspan="3">&nbsp;</td>

    </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>

       </td>

  </tr>

    <tr>

    <td  colspan="3"></td>

    </tr>

                    <tr>

    <td  colspan="3"><span style="color:red;font-size:12px"><i>* Kolom wajib diisi</i></span></td>

    </tr>

    <tr>

    <td align="right" colspan="3"><div id="bawah"><marquee style="width:435px">

      <span class="style15">Selamat bergabung dengan tim pengembang www.geodik.com | Growing With Loving Environment</span>

    </marquee><input  type="submit" name="daftar" id="daftar" value="Daftar" /> </div></td>

    </tr>

</table>

</form>

</div>

</div>

</div>

 

2.         File Cek.php

<?php

$con=mysql_connect("localhost","root","");

mysql_select_db("wave",$con);

$nama=$_POST[‘nama’];

$panggilan=$_POST[‘panggilan’];

$alamat=$_POST[‘alamat’];

$email=addslashes($_POST[’email’]);

$nohp=$_POST[‘nohp’];

$univ=$_POST[‘univ’];

$status=$_POST[‘status’];

$kelamin=$_POST[‘kelamin’];

$password=$_POST[‘password’];

$e_password=md5($password);

mysql_query("INSERT INTO user(nama,panggilan,alamat,email,nohp,univ,status,kelamin,password) values(‘$nama’,’$panggilan’,’$alamat’,’$email’,’$nohp’,’$univ’,’$status’,’$kelamin’,’$e_password’)");

header(‘location:login.php’);

Leave a Reply