Konversi Bilangan (PHP) with LOGIN

Nah Bertemu lagi dengan pelajaran PHP, Kali ini saya akan berbagi tugas dengan anda,
tugas kali ini yaitu membuat sebuah program konversi bilangan yang ditampilkan melalui browser, kali ini sedikit berbeda kawan karena yang satu ini harus menggunakan LOG IN
lets GO..

-Pertama buat newPHP webpage lalu berinama dengan KonversiBilanganWithLogin lalu masukan Script Berikut :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bustomi Arifin</title>
<link rel="stylesheet" href="SettingHalamanKonversiLengkapWithLogIn.css"/>
</head>
<body>
<div id="f_megacont">
<div id="f_cont">
<center><h1 class="tittle">Untuk masuk diharuskan mengisi pertanyaan dibawah ini</h1></center>
<form method="post" action="KonversiLengkapWithLoginKonverter.php">
<table align="center">
<tr>
<th>
<label for="f_nama">NAMA </label>
<td>:</td>
</th>
<td>
<input type="text" name="f_nama" id="f_nama" placeholder="Isi nama...." />
</td>
</tr>
<tr>
<th>
<label>GENDER</label>
</th>
<td>:</td>
<td>
<input type="radio" name="f_jk" value="L" id="f_lk" />
<label for="f_lk">COWOK</label><br/>
<input type="radio" name="f_jk" value="P" id="f_pr" />
<label for="f_pr">CEWEK</label>
</td>
</tr>
<tr>
<th>
<label for="f_age">UMUR</label>
</th>
<td>:</td>
<td>
<select name="f_age" id="f_age">
<option value="" >
------------CHOOSE------------
</option><br/>
<option value="A" >
>30 th
</option><br/>
<option value="B" >
<30 th
</option>
</select>
</td>
</tr>
<tr><td colspan="3" class="submit">
<input type="submit" value="Log In" name="submit"/>
</td></tr>
</table>
</form>
</div>
</div>
</body>
</html>

-Yang Kedua buat lagi New webpage dengan nama KonversiBilanganWithLoginKonverter dan ketik Script ini

<?
error_reporting(0);
if(isset($_POST['submit'])&&$_POST['f_jk']!=''&&$_POST['f_nama']!=''&&$_POST['f_age']!=''){
$f_jk = $_POST['f_jk'];
$f_nama = $_POST['f_nama'];
$f_age = $_POST['f_age'];
if($f_jk=="L"){
if($f_age=="A"){
$ff = "Bapak";
}
else {
$ff = "boy";
}
}
else{
if($f_age=="A"){
$ff = "Ibu";
}
else {
$ff = "girl";
}
}
}
else{
echo "<script>alert('LENGKAPI DATA DIRI ENTE');
document.location.href='KonversiLengkapWithLogIn.php';</script>";
}
$syarat = isset($_POST['f_des'])&&(isset($_POST['f_bin'])||isset($_POST['f_oct'])||isset($_POST['f_hex']))&&!(preg_match('/[^0-9]/',$_REQUEST['f_des']));
if($syarat){
$des = $_REQUEST['f_des'];
$f_oct = $_REQUEST['f_oct'];
$f_hex = $_REQUEST['f_hex'];
$f_bin = $_REQUEST['f_bin'];

//konversi ke biner
if($f_bin == "bin"){
$biner = "";
$hit = $des;
while ($hit > 0) {
if ($hit%2 == 0) {
$biner .= 0;
$hit /= 2;
}
else {
$biner .= 1;
$hit = ($hit/2)-0.5;
}
}
$biner = strrev($biner);
}

//konversi ke hexa
if($f_hex == "hex"){
$hex = "";
$hit = $des;
while($hit>0){
$hasil=$hit%16;
switch($hasil){
case 0: $hex.="0"; break;
case 1: $hex.="1"; break;
case 2: $hex.="2"; break;
case 3: $hex.="3"; break;
case 4: $hex.="4"; break;
case 5: $hex.="5"; break;
case 6: $hex.="6"; break;
case 7: $hex.="7"; break;
case 8: $hex.="8"; break;
case 9: $hex.="9"; break;
case 10: $hex.="A"; break;
case 11: $hex.="B"; break;
case 12: $hex.="C"; break;
case 13: $hex.="D"; break;
case 14: $hex.="E"; break;
case 15: $hex.="F";
default : break;
}
if($hit/16==0){
$sisa=($hit%16);
$hit=$sisa;
}
else{
$sisa=($hit/16);
$hit=$sisa%16;
}
}
$hexa = strrev($hex);
}

//konversi ke octal
if($f_oct == "oct"){
$oct = "";
$hit = $des;
while($hit>0){
$hasil=$hit%8;
switch($hasil){
case 0: $oct.="0"; break;
case 1: $oct.="1"; break;
case 2: $oct.="2"; break;
case 3: $oct.="3"; break;
case 4: $oct.="4"; break;
case 5: $oct.="5"; break;
case 6: $oct.="6"; break;
case 7: $oct.="7"; break;
default : break;
}
if($hit/8==0){
$sisa=($hit%8);
$hit=$sisa;
}
else{
$sisa=($hit/8);
$hit=$sisa%8;
}
}
$octal = strrev($oct);
}
}
else if($_POST['submit']=="Convert"){
echo "<script>alert('data yang diinputkan masih kurang lengkap atau salah');</script>";
}

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bustomi Arifin | Konversi bilangan</title>
<link rel="stylesheet" href="SettingHalamanKonversiLengkapWithLogIn.css"/>
</head>
<body>
<div id="f_megacont" style="padding-top:50px;padding-bottom:70px">
<div id="f_cont">
<h2 class="salam">WELCOME <? echo $ff." ".$f_nama." !"; ?></h2>
<h1 class="tittle">SILAKAN ISI BILANGAN & PILIH KONVERSI</h1>
<form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
<table align="center">
<tr>
<td><label for="f_des">Inputkan bilangan desimal</label></td>
<td>:</td>
<td>
<input type="text" name="f_des" id="f_des" value="<?php echo $des ?>" placeholder="Bilangan Desimal..." />
</td>
</tr>
<tr>
<td>Pilih konversi</td>
<td>:</td>
<td>
<input type="checkbox" id="f_bin" name="f_bin" value="bin"
<?php ($f_bin=="bin") ? print 'checked=""': print ''; ?>/>
<label for="f_bin">Desimal to Biner</label><br/>
<input type="checkbox" id="f_oct" name="f_oct" value="oct"
<?php ($f_oct=="oct") ? print 'checked=""': print ''; ?>/>
<label for="f_oct">Desimal to Octal</label><br/>
<input type="checkbox" id="f_hex" name="f_hex" value="hex"
<?php ($f_hex=="hex") ? print 'checked=""': print ''; ?>/>
<label for="f_hex">Desimal to Hexa</label><br/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="hidden" name="f_jk" value="<? echo $f_jk ?>"/>
<input type="hidden" name="f_nama" value="<? echo $f_nama ?>"/>
<input type="hidden" name="f_age" value="<? echo $f_age ?>"/>
<input type="submit" name="submit" value="Convert"/>
</td>
</tr>
<tr>
<td colspan="3">
<?
if($syarat){
?>
Bilangan desimal <? echo $des; ?> dikonversikan ke :
<ul>
<?
if(isset($_POST['f_bin'])){
echo "<li>Biner = $biner</li>";
}
?>
<?
if(isset($_POST['f_oct'])){
echo "<li>Octal = $octal</li>";
}
?>
<?
if(isset($_POST['f_hex'])){
echo "<li>Hexa = $hexa</li>";
}
?>
</ul>
<? } ?>
<br/>
<a href="KonversiLengkapWithLogIn.php" type="submit">KEMBALI</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>

lalu kita buat CSS nya dengan new Cascading Style sheet lalu masukan scriptnya

/*
    Document   : SettingHalamanKonversiLengkapWithLogIn
    Created on : Sep 9, 2012, 12:25:31 PM
    Author     : Indri
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root {
    display: block;
}

body{
margin:0;
}
#f_megacont{
background-image:url("a.JPG");
height: 100%;
margin: 0;
}
#f_cont{
background-image:url("a.JPG");
position: relative;
text-align: center;
padding:40px;
width: 70%;
margin:auto;
top:10%;
border-radius: 20px;
border: #000 double 4px;
box-shadow: 0 0 10px #333;
}
.f_message{
color: red;
font-size: 20px;
text-shadow: 0 0 3px #fff;
text-align: left;
}
.salam {
color: blueviolet;
text-shadow: 0 0 3px #fff;
font-weight: bold;
}
.tittle{
color: #06f;
text-shadow: 0 0 1px #000;
}
table{
font-size: 120%;
font-weight: bold;
}
table td,table th{
padding:5px;
vertical-align:top;
text-align:left;
}
table td.submit{
text-align: center;
}
th label{
color:orangered;
}
[type="text"],select{
width: 200px;
border-top-left-radius: 8px;
font-size: 18px;
padding:1px 0 1px 8px;
}
[type="text"]:focus,select:focus{
box-shadow: 0 0 5px red;
color: blue;
}
[type="submit"]{
border-radius: 15px;
padding:5px;
cursor: pointer;
font-size: 120%;
color: #fff;
border: solid 2px #000;
background: #999;
}
[type="submit"]:focus{
box-shadow: 2px 3px 5px #000;
text-shadow: 0 0 3px #000;
}

OUTPUTNYA
- Tampilan awal