Sebelumnya saya telah berbagi PHP : Konverter Bilangan Desimal [LENGKAP]. Nahh.. sekarang saya akan lebih melengkapinya dengan log in terlebih dahulu..Semoga bermanfaat :)
Langkah Pertama, buatlah new file yang bernama KonversiLengkapWithLogIn.php, dan berikut ini script atau codingnya :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Selamat Datang, Silahkan Log In</title>
<link rel="stylesheet" href="SettingHalamanKonversiLengkapWithLogIn.css"/>
</head>
<body>
<div id="f_megacont">
<div id="f_cont">
<h1 class="tittle">Mohon diisi lengkap untuk memasuki halaman konversi Bilangan</h1>
<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>Jenis Kelamin</label>
</th>
<td>:</td>
<td>
<input type="radio" name="f_jk" value="L" id="f_lk" />
<label for="f_lk">Laki-laki</label><br/>
<input type="radio" name="f_jk" value="P" id="f_pr" />
<label for="f_pr">Perempuan</label>
</td>
</tr>
<tr>
<th>
<label for="f_age">Umur</label>
</th>
<td>:</td>
<td>
<select name="f_age" id="f_age">
<option value="" >
------------Pilih------------
</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>
Langkah kedua, buatlah new file yang bernama KonversiLengkapWithLoginKonverter.php, dan berikut ini isi coding/scriptnya :
<?
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 = "agan";
}
}
else{
if($f_age=="A"){
$ff = "Ibu";
}
else {
$ff = "sist";
}
}
}
else{
echo "<script>alert('Silahkan Melengkapi Data Diri Anda');
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 anda masukkan kurang lengkap atau salah');</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rizha Indriantama | 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">SELAMAT DATANG <? 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){
?>
Angka 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">Back</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Langkah ketiga, kita mencoba untuk mengatur tampilannya, yaitu dengan cara membuat file baru tipe css dengan nama SettingHalamanKonversiLengkapWithLogIn.css dan berikut isi script atau codingnya :
/*
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:-moz-repeating-linear-gradient(-45deg, red , white, red 4px);
height: 100%;
margin: 0;
}
#f_cont{
background: rgba(255,255,255,.8);
background: -moz-linear-gradient(top center,rgba(200,200,200,.8) 70%,rgba(255,255,255,1));
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;
}
BERIKUT HASIL YANG DITAMPILKAN :
Tampilan Awal
Contoh Pengisian Data
Contoh Konversi Decimal Ke Biner
Contoh Konversi Decimal Ke Octal
Contoh Konversi Decimal Ke Hexa
Contoh Konversi Decimal Ke Biner, Octal, dan Hexa
