Selasa, 09 Oktober 2018

PWEB-C formulir tagihan

Pada kesempatan kali ini saya berkesempatan membuat fromulir tagihan listrik. Berikut saya lampirkan source codenya:
1. index.php

 <?php  
  session_start();  
 ?>  
 <!DOCTYPE html>  
  <head>  
  <link rel="stylesheet" href="style.css">  
  </head>  
  <body>  
  <div id="wrapshopcart">  
   <h1>Form Registrasi</h1>  
   <p>Silakan lengkapi form di bawah ini untuk membayar tagihan anda (*=wajib). </p>  
   <form action="invoice.php" method="POST">  
   <label>Nama Depan* : </label><input type="text" name="nama_depan" class="inputan" required />  
   <label>Nama Belakang : </label><input type="text" name="nama_belakang" class="inputan" />  
   <label>Email* : </label><input type="email" name="email" class="inputan" required />  
      <br>  
   <label>No Pelanggan* : </label><input type="number" name="no_pel" class="inputan" required pattern=".{6,}" />  
  <br>  
   <label>No Telp : </label><input type="text" name="no_telp" class="inputan" />  
  <br>  
   <label>Alamat* :</label><textarea name="alamat" class="textan" required></textarea>  
   <input type="submit" name="kirim" value="Kirim Isi Formulir!" class="submitbtn" />  
   </form>  
  </div>    
  </body>  
 </html>  
2. tagihan.php

 <?php  
  session_start();  
  $total = NULL;  
  $post = $_POST;  
  $_SESSION['cart'] = array(  
     array('productid' => 'TL01', 'product' => 'Listrik yang terpakai (Kwh)' , 'qty' => 57.67       ),  
     array('productid' => 'BA01', 'product' => 'Biaya Administrasi' , 'qty' => 1),  
     array('productid' => 'PJ01', 'product' => 'Pajak' , 'qty' => 1)  
    );  
  $_SESSION['price'] = array(  
     'TL01' => 1600,  
     'BA01' => 5000,  
     'PJ01' => 10000  
    );   
 ?>  
 <!DOCTYPE html>  
  <head>  
  <link rel="stylesheet" href="invoice.css">  
  </head>  
  <body>  
   <div id="wrapshopcart">  
   <h1>Invoice 637462i9</h1>  
   <p>Silahkan save halaman ini. </p>  
   <h3>Berikut adalah data lengkap Anda : </h3>  
   </label><table><tr></tr></table>  
   <label>Nama Lengkap : <?php echo $post['nama_depan'] . ' ' . $post['nama_belakang'] ;?> </label><table><tr></tr></table>  
   <label>Email : <?php echo $post['email'] ;?> </label></label><table><tr></tr></table>  
   <label>No Pelanggan: <?php echo $post['no_pel'] ;?></label></label><table><tr></tr></table>  
   <label>No Telp : <?php echo $post['no_telp'] ;?></label></label><table><tr></tr></table>  
   <label>Alamat : <?php echo $post['alamat'] ;?></label></label><table><tr></tr></table>  
   <h3>Total tagihan anda: </h3>  
   <table>  
   <tr><th width="70%">Produk</th><th width="10%">Quantity</th><th width="20%">Jumlah</th></tr>  
   <?php foreach($_SESSION['cart'] as $row):?>  
    <?php   
    $jumlah = $_SESSION['price'][$row['productid']] * $row['qty'];   
    $total += $jumlah;  
    ?>  
    <tr><td><?php echo $row['product'];?></td><td><?php echo $row['qty'];?></td><td><?php echo $jumlah; ?></td></tr>  
   <?php endforeach;?>  
   <tr class="total"><td></td><td >Total</td><td><?php echo $total;?></td></tr>  
   </table>    
   <h3>Silahkan Lakukan Pembayaran Ke Kantor PLN terdekat</h3>  
  </div>   
  </body>  
 </html>  
3. style.css

  body  
  {  
    background:#fff;  
    font-family:arial;  
  }  
  #wrapshopcart  
  {  
    width:70%;  
    margin:3em auto;  
    padding:30px;  
    background:#efefef;  
    box-shadow:0 0 15px #ddd;  
  }  
  h1  
  {  
    margin:0;  
    padding:0;  
    font-size:2.5em;  
    font-weight:bold;  
  }  
  p  
  {  
    font-size:1em;  
    margin:0;  
  }  
  table  
  {  
    margin:2em 0 0 0;  
    border:1px solid #eee;  
    width:100%;  
    border-collapse: separate;  
    border-spacing:0;  
  }  
  table th  
  {  
    background:#fafafa;  
    border:none;  
    padding:20px ;  
    font-weight:normal;  
    text-align:left;  
  }  
  table td  
  {  
    background:#fff;   
    border:none;  
    padding:12px 20px;   
    font-weight:normal;  
    text-align:left;   
    border-top:1px solid #eee;  
  }  
  table tr.total td  
  {  
    font-size:1.5em;  
  }  
  .btnsubmit  
  {  
    display:inline-block;  
    padding:10px;  
    border:1px solid #ddd;  
    background:#eee;  
    color:#000;  
    text-decoration:none;  
    margin:2em 0;  
  }  
  form  
  {  
    margin:2em 0 0 0;  
  }  
  label  
  {  
    display:inline-block;  
    width:12em;  
  }  
  input[type=text]  
  {  
    border:1px solid #bbb;  
    padding:10px;  
    width:30em;  
  }  
  textarea  
  {  
    border:1px solid #bbb;  
    padding:10px;  
    width:30em;  
    height:5em;  
    vertical-align:text-top;  
    margin:0.3em 0 0 0;  
  }  
  .submitbtn  
  {  
    font-size:1.5em;  
    display:inline-block;  
    padding:10px;  
    border:1px solid #ddd;  
    background:#eee;  
    color:#000;  
    text-decoration:none;  
    margin:0.5em 0 0 8em;  
  };  
4. invoice.css

  body  
  {  
    background:#fff;  
    font-family:arial;  
   }  
  #wrapshopcart  
  {  
    width:70%;  
    margin:3em auto;  
    padding:30px;  
    background:#efefef;  
    box-shadow:0 0 15px #ddd;  
   }  
  h1  
  {  
    margin:0;  
    padding:0;  
    font-size:2.5em;  
    font-weight:bold;  
   }  
  p  
  {  
    font-size:1em;  
    margin:0;  
   }  
  table  
  {  
    margin:2em 0 0 0;  
    border:1px solid #eee;  
    width:100%;   
    border-collapse: separate;  
    border-spacing:0;  
   }  
  table th  
  {  
    background:#fff;  
    border:none;  
    padding:20px ;  
    font-weight:normal;  
    text-align:left;  
   }  
  table td  
  {  
    background:#efefef;   
    border:none;   
    padding:12px 20px;  
    font-weight:normal;  
    text-align:left;   
    border-top:1px solid #eee;  
   }  
  table tr.total td  
  {  
    font-size:1.5em;  
   }  
  .btnsubmit  
  {  
    display:inline-block;  
    padding:10px;  
    border:1px solid #ddd;  
    background:#eee;  
    color:#000;  
    text-decoration:none;  
    margin:2em 0;  
   }  
  form  
  {  
    margin:2em 0 0 0;  
   }  
  label  
  {  
    display:inline-block;  
    width:auto;  
   }  
  input[type=text]  
  {  
    border:1px solid #bbb;  
    padding:10px;  
    width:30em;  
   }  
  textarea  
  {  
    border:1px solid #bbb;  
    padding:10px;  
    width:30em;  
    height:5em;  
    vertical-align:text-top;  
    margin:0.3em 0 0 0;  
   }  
  .submitbtn  
  {  
    font-size:1.5em;  
    display:inline-block;  
    padding:10px;  
    border:1px solid #ddd;  
    background:#eee;  
    color:#000;  
    text-decoration:none;  
    margin:0.5em 0 0 8em;  
  }  
  </style>  

Berikut saya lampirkan pula hasil compilenya;
1. halaman formulir

2. halaman tagihan

Tidak ada komentar:

Posting Komentar