Selasa, 09 Oktober 2018

Membuat form pembayaran Listrik Beserta invoice

Nama : Hafidz Firman Asqalany
NRP   : 05111740000195
Kelas  : PWEB C

Source code untuk form registrasi :

 <?php  
  session_start();  
 ?>  
 <!DOCTYPE html>  
  <head>  
  <style type="text/css">  
  body  
  {  
       background:#D3D3D3;  
       font-family:arial;  
  }  
  #wrapshopcart  
  {  
       width:50%;  
       margin:3em auto;  
       padding:30px;  
       background:#fff;  
       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  
  {  
     position:relative;  
     box-sizing:border-box;  
     display:block;  
     width:100px;  
     border: 0px none;  
     padding: 0px 15px;  
     text-align:center;  
     font-family:Century;  
     font-weight:400;  
     text-shadow: 0px 0px 0px transparent;  
     border-radius: 4px;  
     color:#FFF;  
     background:#000000 none repeat scroll 0% 0%;  
     height: 30px;  
     line-height: 29px;  
     font-size: 16px;  
     margin:auto;  
     margin-top:10px;  
     }  
        .reset{  
     position:relative;  
     box-sizing:border-box;  
     display:block;  
     width:100px;  
     border: 0px none;  
     padding: 0px 15px;  
     text-align:center;  
     font-family:Century;  
     font-weight:400;  
     text-shadow: 0px 0px 0px transparent;  
     border-radius: 4px;  
     color:#FFF;  
     background:#b22222 none repeat scroll 0% 0%;  
     height: 30px;  
     line-height: 29px;  
     font-size: 16px;  
     margin:auto;  
     margin-top:10px;  
     }  
  };  
  </style>  
  </head>  
  <body>  
  <div id="wrapshopcart">  
   <h1>Form Registrasi</h1>  
      <script type="text/javascript">  
      function validasi_input(form)  
      {  
        pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        pola_nopel=/^[0-9\_\-]{6,100}$/;  
           if (form.nama_depan.value == "")  
           {  
                alert("Nama depan anda masih kosong.");  
                form.nama_depan.focus();  
                return (false);  
           }  
           else if (form.nama_belakang.value =="")  
           {  
                alert ("Nama belakang anda masih kosong.");  
                form.nama_belakang.focus();  
                return false;  
           }  
           else if (!pola_email.test(form.email.value))  
           {  
                alert ('Penulisan Email tidak valid.');  
                form.email.focus();  
                return false;  
           }  
           else if (!pola_nopel.test(form.no_pel.value))  
           {  
                alert ('Nomor pelanggan terdiri dari 6 angka.');  
                form.no_pel.focus();  
                return false;  
           }  
           else if (form.alamat.value == "")  
           {  
                alert("Alamat anda masih kosong");  
                form.alamat.focus();  
                return (false);  
           }  
      return (true);  
      }  
      </script>  
   <form action="invoice.php" method="POST" onsubmit="return validasi_input(this)">  
   <label>Nama Depan : <input type="text" name="nama_depan" class="inputan" /></label><table></table>  
   <label>Nama Belakang : <input type="text" name="nama_belakang" class="inputan" /></label><table></table>  
   <label>Email : <input type="text" name="email" class="inputan" /></label><table></table>  
   <label>No Pelanggan : <input type="text" name="no_pel" class="inputan" /></label><table></table>  
   <label>No Telp : <input type="text" name="no_telp" class="inputan" /></label><table></table>  
   <label>Alamat :<textarea name="alamat" class="textan"></textarea></label><table></table>  
   <input type="submit" name="kirim" value="Submit" class="submitbtn" />  
   </form>  
  </div>  
  </body>  
 </html>  

Source Code untuk Invoice :

 <?php  
  session_start();  
  $total = NULL;  
  $post = $_POST;  
  /* untuk invoice bisa di ambil dari database, karena pada dasarnya invoice tidak akan pernah recordnya itu di delete */  
  /* berapa jumlah invoice kemudian di tambahkan 1 */  
  $numrows_invoice_db = 565;  
  $invoice = $numrows_invoice_db + 7;  
 ?>  
 <!DOCTYPE html>  
  <head>  
  <style type="text/css">  
  body  
  {  
       background:#efefef;  
       font-family:arial;  
   }  
  #wrapshopcart  
  {  
       width:70%;  
       margin:3em auto;  
       padding:30px;  
       background:#fff;  
       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: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>  
  </head>  
  <body>  
   <div id="wrapshopcart">  
   <h1>Invoice <?php echo $invoice;?></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><table><tr></tr></table>  
   <label>No Pelanggan: <?php echo $post['no_pel'] ;?></label><table><tr></tr></table>  
   <label>No Telp : <?php echo $post['no_telp'] ;?></label><table><tr></tr></table>  
   <label>Alamat : <?php echo $post['alamat'] ;?></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 sebelum jatuh tempo</h3>  
  </div>  
  </body>  
 </html>  

tampilan dari source code di atas :




Tidak ada komentar:

Posting Komentar