TUGAS 7 PEMROGRAMAN WEB

MEMBUAT FORM PEMBAYARAN PDAM DAN BUKTI PEMBAYARAN


Karina Soraya P
05111740000003
PWEB - C


  • Source Code HTML
 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>PDAM</title>  
  <link rel="icon" type="image/png" href="pd.png">  
 </head>  
 <style type="text/css">   
 fieldset{  
   width : 700px;  
   height : 500px;  
 }  
  form  
  {  
    margin:2em 0 0 0;  
  }  
  label  
  {  
    display:inline-block;  
    margin : 0 auto;  
    width:12em;  
    text-align :left;  
  }  
  input{   
  padding-left: 7px;   
  border: none;   
  border-bottom: 2px solid black;   
  height: 20px;   
  width: 250px;   
  font-size: 15px;   
  }   
  select{  
  padding-left: 10px;   
  border: none;   
  border-bottom: 2px solid black;   
  height: 20px;   
  width: 250px;   
  font-size: 15px;   
  }  
  .btn  
  {  
    display:inline-block;  
    padding:2px;  
    border:1px solid #ddd;  
    background:#eee;  
    color:#000;  
    text-decoration:none;  
  }  
  </style>   
 <body>  
   <div align="center" class="head_al">  
  <h2 class="head">PEMBAYARAN TAGIHAN PDAM</h2>  
   <form method = 'post' action= "aksiForm.php">  
   <fieldset>  
     <p>  
       <label>Kode Pelanggan &nbsp; :</label>  
       <select name="pelanggan">  
         <option value="SU">SU</option>  
         <option value="SosKhus">SK</option>  
         <option value="SKS">SKS</option>  
         <option value="RT">RT</option>  
         <option value="KK">KK</option>  
         <option value="N1">N1</option>  
         <option value="N2">N2</option>  
         <option value="N3">N3</option>  
         <option value="IN1">IN1</option>  
         <option value="IN2">IN2</option>  
         <option value="IN3">IN3</option>  
         <option value="NK">NK</option>  
       </select>  
     </p>  
     <p>  
       <label>Nama &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :</label>  
       <input type="text" name="nama" />  
     </p>  
     <p>  
       <label>Tipe &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :</label>  
       <select name="tipe">  
         <option value="Sos">Sosial</option>  
         <option value="NN">Non Niaga</option>  
         <option value="N">Niaga</option>  
         <option value="I">Industri</option>  
         <option value="NK">Niaga Khusus</option>  
       </select>  
     </p>  
     <p>  
       <label>Biaya Beban &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :</label>  
       <input type="text" name="beban" />  
     </p>  
     <p>  
       <label>Jumlah Pemakaian :</label>  
       <input type="text" name="pemakaian" />  
     </p>  
     <p>  
       <label>Total Tagihan &nbsp; &nbsp; &nbsp; &nbsp; :</label>  
       <input type="text" name="tagihan" />  
     </p>  
     <p>  
       <label>Pajak &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:</label>  
       <input type="text" name="pajak"/>   
     </p>  
     <p>  
       <label>Pembayaran &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :</label>  
       <input type="text" name="bayar"/>   
     </p>  
     <br>  
     <br>  
     <p>  
       <input type="submit" name="proses" value="Proses" class="btn" href="aksiForm.php"/>  
       <input type="reset" name="hapus" value="Hapus" class="btn" />  
     </p>  
  </fieldset>  
  </form>  
 </body>  
 </html>  
  • Source Code PHP
 <?php  
  session_start();  
  $total = NULL;  
  $post = $_POST;  
  $numrows_invoice_db = 234;  
  $invoice = $numrows_invoice_db + 7;  
 ?>  
 <!DOCTYPE html>  
  <head>  
    <title>PDAM</title>  
    <link rel="icon" type="image/png" href="pd.png">  
  <style type="text/css">  
 fieldset{  
   width : 700px;  
   height : 500px;  
   color :     #ADD8E6;  
 }  
  form  
  {  
    margin:2em 0 0 0;  
  }  
  label  
  {  
    display:inline-block;  
    margin : 0 auto;  
    width:12em;  
    text-align :left;  
  }  
  input{   
  padding-left: 7px;   
  border: none;   
  border-bottom: 2px solid black;   
  height: 20px;   
  width: 250px;   
  font-size: 15px;   
  }   
  select{  
  padding-left: 10px;   
  border: none;   
  border-bottom: 2px solid black;   
  height: 20px;   
  width: 250px;   
  font-size: 15px;   
  }  
  .btn  
  {  
    display:inline-block;  
    padding:2px;  
    border:1px solid #ddd;  
    background:#eee;  
    color:#000;  
    text-decoration:none;  
  }  
  #lst{  
    width:70%;  
    margin:3em auto;  
    padding:30px;  
    background:#fff;  
    box-shadow:0 0 15px #ddd;  
  }  
  </style>  
  </head>  
  <body>  
    <h1><center>BUKTI PEMBAYARAN PDAM</center></h1>  
   <div id="lst">  
   <h3>Berikut data anda : </h3>  
   </label><table><tr></tr></table>  
   <label>KP &nbsp; &nbsp; &nbsp; : <?php echo $post['pelanggan'] ;?> </label><table><tr></tr></table>  
   <label>Nama &nbsp; : <?php echo $post['nama'] ;?> </label><table><tr></tr></table>  
   <label>Tipe &nbsp; &nbsp; : <?php echo $post['tipe'] ;?> </label></label><table><tr></tr></table>  
   <h3>Pembayaran : </h3>  
   </label><table><tr></tr></table>  
   <label>Total Biaya &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : <?php echo $post['tagihan']+$post['pajak'] ;?> </label><table><tr></tr></table>  
   <label>Uang Dibayarkan &nbsp; : <?php echo $post['bayar'] ;?> </label><table><tr></tr></table>  
   <label>Sisa Tagihan &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : <?php echo $post['tagihan']-$post['bayar']+$post['pajak'] ;?> </label></label><table><tr></tr></table>  
   <h4>TERIMA KASIH TELAH MELAKUKAN PEMBAYARAN PDAM</h4>  
  </div>  
  </body>  
 </html>  
  • Hasil


Ketika di klik proses, maka akan muncul bukti pembayarannya


Komentar

Postingan Populer