a

Sunday 14 October 2012

konversi bilangan biner hexa oktal dengan php

bahasa pemrograman, mulai dari HTML/HTML 5 untuk desainya. Kemudian PHP, Javascript untuk proses, alert dan membuat suatu kondisi pada aplikasi saya. Dan tak lupa sedikit sentuhan dari CSS3 untuk mempercantik desainya. Dan sebelum kita mulai, mari membuat 2 file yaitu validasi.php dan juga Konversi.php. Validasi untuk login kalau konversi itu aplikasi webnya.

Setelah itu ketikkan script html seperti biasa pada file validasi.php
1<html>
2     <head>
3        <title></title>
4     </head>
5        <body>
6 
7        </body>
8</html>
Saya disini menggunakan sedikit element CSS3 yaitu box-shadow, text-shadow dan juga warna RGBA (Red, Green, Blue and Alpha) untuk mempercantik HTMLnya. Ok ketikkan kode dibawah ini dan letakkan diatasnya tag </head>
01<style type="text/css">
02            body{
03                background-image: url('1.jpg');
04            }
05            .a{
06                text-shadow:6px 0px 10px lightblue;
07                font-family:Calibri;
08                font-weight:bold;
09                color:white;
10     
11            }
12            .b{
13                text-shadow:6px 0px 10px red;
14                font-weight:bold;
15                color:dark;
16            }
17            form input.klik{
18                background: lightblue;
19                border-radius:5px;
20                padding: 5px;
21  box-shadow:0px 0px 40px yellow, inset 1px 1px 0px;
22            }
23            form input.klik:focus {
24                border: solid 1px dark;
25                background: black;
26                border-radius:5px;
27                box-shadow:0px 0px 40px red, inset 1px 1px 0px;
28  color: white;
29            }
30     legend{
31  font-size:30;
32  color:white;
33                text-shadow:2px 0px 7px lightblue;
34     }
35     legend:hover{
36         font-size:30;
37  color:black;
38                text-shadow:2px 0px 7px red;
39     }
40     fieldset{
41  box-shadow:0px 0px 40px red, inset 1px 1px 0px;
42  background:none repeat scroll 0% 0% padding-box rgba(0,0,0,0.6);
43     }
44     fieldset:hover{
45         box-shadow:0px 0px 40px lightblue, inset 1px 1px 0px;
46  background:none repeat scroll 0% 0% padding-box rgba(255,255,255,0.4);
47     }
48            .tombol a {
49         float: right;
50         display: block;
51         width: 100px;
52         height: 26px;
53         margin-top:
54                padding-top: 4px;
55         font-size: 12px;
56         font-weight: bold;
57         color: #a9a9a9;
58         text-align: center;
59         background:url(tombol.png) no-repeat;
60     }
61 
62     .tombol a:hover {
63         /* text-shadow: 1px 1px 1px #000; */
64  text-decoration: none;
65  background:url(tombol-hov.png) no-repeat;
66     }
67</style>
Kemudian Javascript pada halaman validasi.php ada lumayan banyak. Ketikkan Javascript berikut, dan taruh sebelum rag </head>
01<script>
02date = new Date();
03 
04if ((date.getUTCHours() - date.getHours()) != 0) (date = date.getHours())
05else (date = (8 + date.getHours()));
06if (date < 4) {alert("Selamat Malam!")}
07else {if (date < 11) {alert("Selamat Pagi,, Selamat Beraktifitas!\n\n\n\nDan selamat datang si site ini :D\n\nRegard: Asong")}
08else {if (date < 16) {alert("Selamat Siang!\n\n\n\nDan selamat datang si site ini :D\n\nRegard: Asong")}
09else {if (date < 20) {alert("Selamat Sore!\n\n\n\nDan selamat datang si site ini :D\n\nRegard: Asong")}
10else {alert("Selamat Malam Semuanya. Jangan bosan-bosan mengunjungi site ini :D\n\n\n\n\nDan selamat datang si site ini :D\n\nRegard: Asong")}}}}
11 
12var gx = /Firefox/gi;
13 
14if(gx.exec(navigator.userAgent)){
15 
16alert("Kamu Pakek FireFox yah?");
17alert("Jika iya, saya anjurkan menggunakan Google Chrome saja deh, hehehehe.\n\nChrome Sangat Cepat Dan Stabil :D");
18alert("Best Viewed on Chrome....");
19alert("Terima kasih ^_^");
20 
21//return ngakbisakeluar();
22//window.location ="http://www.google.com";
23//window.confirm
24var answer = confirm("Mau mencoba Google Chrome??")
25 if (answer){
26  alert("Jelajahi situs ini dengan cepat melalui Google Chrome :D\n\nBuka Pop-Up agar bisa membuka page Download Google Chrome\n\n\nRgd by Asong\nSee You..")
27  window.open("https://www.google.com/chrome/index.html")
28 }
29 else{
30  alert("Ya sudah kami gak memaksa anda untuk menggunakan Chrome, Terima kasih telah browsing di Situs ini Menggunakan Mozilla Firefox")
31 }
32}
33 
34var xx = /Chrome/gi;
35if(xx.exec(navigator.userAgent)){
36alert("Browser yang anda Gunakan adalah Google Chrome..... :D");
37alert("Selamat menikmati tampilan terbaik via Google Chrome :D");
38 
39}
40 
41</script>
Kemudian, ini merupakan desain dari file validasi.php, ketikkan script dibawah ini, letakkan sesudahnya tag <body>

01<h1 class='a'>
02<?php echo $cek ?></h1>
03<fieldset>
04            <legend>Form Login</legend>
05<br>
06        <form action="Konversi.php" method="post" name="form1">
07            <p>
08<h3 class='b'>
09Nama : <input class='klik' placeholder="Masukkan Namamu" required="required" type="text" name="nama" size ="30" value="<?php echo $nama ?>"/></h3>
10</p>
11<p>
12<h3 class='b'>
13Apa Jenis Kelamin anda? <br>
14                <input type="radio" name="gender" value="L"
15                               <?php ($gender=="L")? print 'checked=""' : print ''; ?>/>
16                Laki-Laki<br>
17                <input type="radio" name="gender" value="P"
18                       <?php ($gender=="P")? print 'checked=""' : print ''; ?>/>
19                Perempuan
20            </h3>
21</p>
22<input type="submit" name="submit" value="Login">
23        </form>
24</fieldset>

Ok, setelah kita membuat desain, style dan mengasih sedikit Javascript kali ini kita akan membuat file prosesnya yaitu PHPnya! script dibawah bisa ditaruh diatas tag <html>  dan juga bisa ditaruh dibawah tag </html>

01<?php
02if(isset($_POST['submit'])){//apakah data tersebut tersubmit
03$nama=$_REQUEST['nama'];
04    if(isset($_POST['gender'])){
05        $gender=$_REQUEST['gender'];
06    }
07    else{
08        $gender='';
09    }
10$cek='';
11}
12else{
13    $nama='';
14    $gender='';
15    $cek='Login dahulu sebelum anda masuk kedalam area Konversi!!! :)';
16}
17?>

Ok kita sudah selesai membuat file PHP validasi.php sebelum saya beranjak ke file PHP Konversi.php saya akan jelaskan sedikit tentang script saya:
mulai dari yang warna kuning, itu kita memberikan efek pada form jenis input dengan memberikan nama klik maka kita akan memanggil style berikut dengan cara class="klik"; klik:focus itu maksudnya saat kita klik maka stylenya seperti yang telah kita buat.

Legend:hover artinya setiap kita menggunakan tag legend (HTML 5), maka otomatis saat kursor kita melewati tag legend akan berubah sesuai dengan style yang telah kita buat.

.tombol a kita membuat selector dengan nama tombol, cara memanggilnya sama seperti klik tadi. Dan a setelah tombol itu maksudnya style ini dibuat untuk tag a.
yang warnanya ijo itu merupakan script dari browser detection, terus kita baru membuat kondisinya semisal alert lah. Contoh: browsermu firefox ea? dan bla... bla.. bla...
Kalau yang warna ungu itu adalah window.confirmation jawabanya adalah iya dan tidak. Semisal kita membuat kondisi jika kamu mau mendownload google chrome maka tekan Ok, jika tidak maka browser akan exit atau error. Tapi disini saya membuatnya jika tidak mau mendownload chrome maka ndak akan apa-apa.
Ok setelah saya menjelaskan tentang potongan-potongan script yang ada pada validasi.php kali ini kita akan membuat file Konversi.php
Seperti biasa, pertama ketikkan strktur HTML di file Konversi.php setelah itu ketikkan kode berikut diatas tag <html>
01<?php
02if(isset($_POST['submit1'])){
03$decimal=$_REQUEST['decimal'];
04    if(isset($_POST['pilih'])){
05        $pilih=$_REQUEST['pilih'];
06    }
07    else{
08        $pilih='';
09    }
10}
11else{
12    $decimal='';
13    $pilih='';
14}
15?>
 Kemudian ketikkan script style berikut sebelum tag </head>
01<style type="text/css">
02            body{
03                background-image: url('JatimCrew.jpg');
04            }
05            .color{
06                color: silver;
07                text-shadow:4px 0px 7px lightblue;
08                font-weight:bold;
09            }
10            .bunshin{
11                text-shadow:6px 0px 10px lightblue;
12                font-weight:bold;
13                color:white;
14            }
15            form input.klik{
16                background: lightblue;
17                border-radius:5px;
18                padding: 5px;
19    box-shadow:0px 0px 40px yellow, inset 1px 1px 0px;
20            }
21            form input.klik:focus {
22                border: solid 1px dark;
23                background: black;
24                border-radius:5px;
25                box-shadow:0px 0px 40px lightblue, inset 1px 1px 0px;
26    color: white;
27            }
28            .shadow{
29                text-shadow:4px 0px 7px red;
30                font-weight:bold;
31                color:white;
32            }
33            h5{
34                text-shadow:6px 0px 10px lightblue;
35                font-weight:bold;
36    font-size:17;
37                color:white;
38            }
39   legend{
40   font-size:30;
41   color:white;
42            text-shadow:2px 0px 7px lightblue;
43   }
44   legend:hover{
45   font-size:30;
46   color:black;
47            text-shadow:2px 0px 7px red;
48   }
49   fieldset{
50    box-shadow:0px 0px 40px red, inset 1px 1px 0px;
51    background:none repeat scroll 0% 0% padding-box rgba(0,0,0,0.6);
52   }
53   fieldset:hover{
54    box-shadow:0px 0px 40px lightblue, inset 1px 1px 0px;
55    background:none repeat scroll 0% 0% padding-box rgba(255,50,50,0.6);
56   }
57   .tombol a {
58    display: block;
59    width: 100px;
60    height: 26px;
61    margin-top: 10px;
62    padding-top: 4px;
63    font-size: 12px;
64    font-weight: bold;
65    color: #a9a9a9;
66    text-align: center;
67    background:url(tombol.png) no-repeat;
68    text-decoration: none;
69   }
70 
71   .tombol a:hover {
72    /* text-shadow: 1px 1px 1px #000; */
73    text-decoration: none;
74    background:url(tombol-hov.png) no-repeat;
75   }
76        </style>
Setelah sobat mengetikkan script CSSnya, ketikkan script PHP berikut sesudah tag <body>
001    <h2 class="color">
002Zona Konversi Bilangan....</h2>
003<table border="0" align ="center">
004<tr>
005    <td align ="center">
006    <!-- Proses Pilih Gender dari file validasi.php -->
007    <?php
008        if(isset ($_POST['submit'])){
009            $nama=$_REQUEST['nama'];
010            if(isset($_POST['gender'])){
011                $gender=$_REQUEST['gender'];
012            }
013            else{
014                $gender='';
015            }
016        }
017        if(isset ($_POST['submit'])){
018        if($nama==''|| $gender==''){
019            echo"<script>
020                 alert('Maaf data yang anda masukkan kurang lengkap ? Isi Nama dan Jenis Kelamin terlebih dahulu');
021                 document.location.href='validasi.php';
022                 </script>";
023        }
024        else{
025            //cek jenis kelamin
026            if($gender=='L'){
027                echo"<br><h1 class='bunshin'>
028Selamat Datang Bang, $nama !!</h1><h5>di Asong Convertion</h5>
029";
030                 
031            }
032            else{
033                echo"<br><h1 class='bunshin'>
034Selamat Datang Neng Geulis, $nama !!</h1><h5>--== Asong Konverter ==--</h5>
035";
036            }
037        }
038        }
039    ?>
040    <!-- End Proses Pilih Gender dari file validasi.php -->
041    </td>
042    </tr>
043</table>
044<fieldset>
045            <legend>AsongConverter_Apps</legend>
046    <table border="0" align ="center" class='shadow'>
047<tr>
048    <td align ="center">
049    <p>
050<form action="<?php echo $_SERVER['PHP_SELF']; ?>
051"
052          method="POST" name="form1">
053        <h2>
054 Tuliskan nilai bilangan Desimal nya : </h2>
055<input class='klik' placeholder="Isikan dengan Bilangan Desimal" required="required" type="text" name="decimal" size ="28" value="<?php echo $decimal ?>"/><br>
056        <h2>
057 Pilih salah satu Konversi : <br>
058        <input type="radio" name="pilih" value="B"
059               <?php ($pilih=="B")? print 'checked=""' : print ''; ?>/>
060        Biner<br>
061        <input type="radio" name="pilih" value="H"
062               <?php ($pilih=="H")? print 'checked=""' : print ''; ?>/>
063        Hexa<br>
064         <input type="radio" name="pilih" value="O"
065               <?php ($pilih=="O")? print 'checked=""' : print ''; ?>/>
066        Oktal<br>
067        </h2>
068<center>
069<input type="submit" class="tombol" name="submit1" value="Convert"><br>
070<center>
071 
072    </form>
073    <!-- Proses Konversi -->
074        <?php
075        if(isset($_POST['submit1'])){//apakah data tersebut tersubmit
076        $decimal=$_REQUEST['decimal'];
077            if(isset($_POST['pilih'])){
078                $pilih=$_REQUEST['pilih'];
079            }  
080            else{
081                $pilih='';
082            }
083        }
084        else{
085            $decimal='';
086            $pilih='';
087        }
088        if(isset ($_POST['submit1'])){
089        if($decimal==''|| $pilih==''){
090            echo"<script>alert('Maaf anda kurang dalam melakukan prosedur pengisian data! Isi nilai Desimal dan pilih ke Biner, Hexa mupun Oktal terus tekan Convert !!')</script>";
091        }
092        else{
093            if($pilih=='B'){
094            //Konversi ke Biner
095            if (isset($_POST['decimal'])) {
096                $decimal = $_POST['decimal'];
097                $original = $_POST['decimal'];
098                $binary = '';
099                if (preg_match('/[^0-9]/',$decimal)) {
100                        die ("Maaf. Yang anda masukkan salah, yang betul isian adalah angka...!!!");
101                }
102                else {
103                    while ($decimal > 0) {
104                        if ($decimal%2 == 0) {
105                            $binary .= 0;
106                            $decimal /= 2;
107                        }
108                        else {
109                            $binary .= 1;
110                            $decimal = ($decimal/2)-0.5;
111                        }
112                    }
113                    $result = strrev($binary);
114                    echo "<br><h2>
115Bilangan desimal $original. Jika dijadikan Biner hasilnya adalah $result.</h2>
116";
117                    }
118                }
119                else {
120 
121                }
122            }
123            else{
124                    if($pilih=='H'){
125                    //Konversi ke Hexa
126    $self = $_SERVER['PHP_SELF'];
127       if(isset($_POST['decimal'])){//apakah data tersebut tersubmit
128          $des = $_POST['decimal'];
129          $original = $_POST['decimal'];
130          $hex='';
131            if(preg_match('/[^0-9]/',$des)){//memastikan inputan bukan char ataupun huruf melainkan angka, kalau perlu ditambahi regex biar lebih valid.
132                die("Maaf yang anda masukkan salah, mohon masukkan angka..");
133  }
134        else {
135          while($des>0){
136               $hasil=$des%16;
137switch($hasil){
138          case 0: $hex.="0"; break;
139          case 1: $hex.="1"; break;
140          case 2: $hex.="2"; break;
141          case 3: $hex.="3"; break;
142          case 4: $hex.="4"; break;
143          case 5: $hex.="5"; break;
144          case 6: $hex.="6"; break;
145          case 7: $hex.="7"; break;
146          case 8: $hex.="8"; break;
147          case 9: $hex.="9"; break;
148          case 10: $hex.="A"; break;
149          case 11: $hex.="B"; break;
150          case 12: $hex.="C"; break;
151          case 13: $hex.="D"; break;
152          case 14: $hex.="E"; break;
153          case 15: $hex.="F";
154          default:break;
155}
156      if($des/16==0){
157         $sisa=($des%16);
158         $des=$sisa;
159}
160     else if ($des/16 >= 16) {
161          $sisa = ($des/16);
162          $des = $sisa;
163}
164else{
165    $sisa=($des/16);
166    $des=$sisa%16;
167}
168}
169       }
170     $result = strrev($hex);
171                                    echo "<br><h2>
172Bilangan desimal $original. Jika dijadikan Hexadecimal hasilnya adalah $result.</h2>
173";
174                        }
175                    }
176                    else{
177                        //Konversi ke Oktal
178                         if(isset($_POST['decimal'])){
179                         $des=$_POST['decimal'];
180                         $original=$_POST['decimal'];
181                         $octal='';
182                         while ($des>0){
183                         $hasil=$des%8;
184                         switch($hasil){
185                         case 0 : $octal.="0"; break;
186                         case 1 : $octal.="1"; break;
187                         case 2 : $octal.="2"; break;
188                         case 3 : $octal.="3"; break;
189                         case 4 : $octal.="4"; break;
190                         case 5 : $octal.="5"; break;
191                         case 6 : $octal.="6"; break;
192                         case 7 : $octal.="7";
193                         default:break;
194                         }
195                         if($des/8>0){
196                            $sisa=($des/8);
197                            $des=$sisa%8;
198                            }
199                            else{
200                            $sisa=($des%8);
201                            $des=$sisa;
202                            }}
203                            $result = strrev($octal);
204                            echo "<br><h2>
205Bilangan desimal $original. Jika dijadikan Oktal hasilnya adalah $result.</h2>
206";
207                            }
208                            else{
209 
210                            }
211                    }
212            }
213        }
214        }
215        echo "<br><center>
216<div class='tombol'><a href='validasi.php'>RESET</a></div></center>
217 
218<br>";
219        ?>
220    <!-- End proses Konversi -->
221    </td>
222    </tr>
223</table>
224</fieldset>
Sudah selesai deh, susah-susah gampang membuat aplikasi web konversi seperti diatas. Saya saja masih ngintip-ngintip sedikit milik teman saya yaitu Aldena Octavia dan file percobaan yang telah dibuat bersama dengan pak hadi wijaya selaku guru saya PHP dan juga JAVA.
Jika sobat masih bingung akan penempatan-penempatan script diatas dan bingung dengan apa yang saya maksudkan pada penempatan koding. Maupun yang gagal melulu kodingnya. JANGAN KUATIR, Saya sudah merangkum semua source diatas dan menggabungkanya menjadi satu file yaitu file zip, silahkan download script tersebut.
MEDIAFIRE
Jika sobat masih bingung dan ada sesuatu yang ingin ditanyakan, silahkan koment di artikel ini. Dan jika ada kata saya yang salah dan ada kekeliruan syntax. Mohon maafkan saya, karena manusia tak luput dari kecerobohan. please, correct me if i'm wrong with coment in this blog!!
Post di

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)