Skip to main content

PWEB C- Tugas membuat form pendaftaran


Nama : Bobbi Aditya
NRP : 05111740000099
Kelas : PWEB C

Disini saya akan menyampaikan source code dan hasil dari tugas pembuatan form pendaftaran pembayaran air, beserta dengan bukti pembayarannya.

Source Code laman pendaftaran
 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Rekening Air</title>  
      <link rel="stylesheet" type="text/css" href="form.css">  
      <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">   
      <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">  
 </head>  
 <body>  
      <?php  
      $namaErr = $alamatErr = $nomorErr ="";  
      $nama = $alamat = $nomor = $daerah = $tipe ="";  
      $pemakaian = $harga = $beban = $pajak = $tagihan = $pembayaran="";  
      ?>       
      <h1>  
           Pembayaran rekening air  
      </h1>  
      <form method="post" action="invoice.php">  
           <div class="content">  
                Nama  
                <br>  
                <div>  
                <input type="text" name="nama" value="">  
                </div>       
           </div>  
           <div class="content">  
                Alamat  
                <br>  
                <div><input type="text" name="alamat" value="">  
                </div>  
           </div>  
           <div class="content">  
                Nomor Pelanggan  
                <br>  
                <div><input type="number" name="nomor" value="">  
                </div>  
           </div>  
           <div class="content">  
                Daerah  
                <br>  
                <div><input type="text" name="daerah" value="">  
                </div>  
           </div>  
                <div class="content">  
                Tipe  
                     <div>  
                          <select name="tipe">  
                          <option value="rumah">Rumah</option>  
                          <option value="rm">Rumah Makan</option>  
                          <option value="kantor">Kantor</option>  
                          <option value="toko">Toko</option>  
                          <option value="pabrik">Pabrik</option>  
                          </select>  
                     </div>  
           </div>  
           <div class="content" style="float: left; width: 290px;">  
                Pemakaian air(m3)  
                <br>  
                <div><input type="number" name="pemakaian" value="">  
                </div>  
           </div>  
           <div class="content">  
                Beban  
                <br>  
                <div style="width: 50%; float: right;padding-left: 5px;"><input type="number" name="beban" value="">  
                </div>       
           </div>  
           <div class="content" style="float: left; width: 290px;">  
                Harga(setiap m3)  
                <br>  
                <div><input type="number" name="harga" value="">  
                </div>  
           </div>  
           <div class="content">  
                Pajak  
                <br>  
                <div style="width: 50%; float: right; padding-left: 5px;"><input type="number" name="pajak" value="">  
                </div>  
           </div>  
           <div class="content">  
                Tagihan  
                <br>  
                <div><input type="number" name="tagihan" value="">  
                </div>  
           </div>  
                <div class="btnn">  
                     <button type="submit" class="btn" value="">Submit</button>            
                </div>  
 </body>  
 </html>
Source code bukti pembayaran
 <!DOCTYPE html>  
 <html>  
 <head>  
      <link rel="stylesheet" type="text/css" href="form.css">       
      <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">   
      <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">  
      <title>Bukti Pembayaran</title>  
 </head>  
 <body>  
      <h1>Pembayaran rekening air</h1>  
      <h1>PT Samudra Air</h1>  
      <div class="content" style="padding-left: 120px">  
           <br>  
           <br>  
           <pre><p>Nama     : <?php echo $_POST["nama"]; ?></p></pre>  
           <pre><p>Nomor     : <?php echo $_POST["nomor"]; ?></p></pre>  
           <pre><p>Alamat     : <?php echo $_POST["alamat"]; ?></p></pre>  
           <pre><p>Daerah     : <?php echo $_POST["daerah"]; ?></p></pre>  
           <pre><p>Tipe          : <?php echo $_POST["tipe"]; ?></p></pre>  
      </div>  
      <br>  
      <br>  
      <div style="padding-left: 120px">  
           <pre><p>Pemakaian          : <?php echo $_POST["pemakaian"] ; ?> KWh</p></pre>  
           <pre><p>Harga               : Rp <?php echo $_POST["beban"]; ?></p></pre>  
           <pre><p>Pajak               : Rp <?php echo $_POST["pajak"]; ?></p></pre>  
           <pre><p>Total pembayaran: Rp <?php echo $_POST["tagihan"]; ?></p></pre>  
      </div>  
      <br>  
      <br>  
      <div style="float: right;padding-right: 180px;">  
           Malang, 20 Oktober 2020  
           <br>  
           <br>  
           <br>  
           <br>  
           <br>  
           <br>  
           <?php echo $_POST["nama"]; ?>  
      </div>  
 </body>  
 </html>

Source code css
 body{  
      margin: auto;  
      background: #CFEFF0;  
      background-size: auto;  
      font-family: 'Comfortaa', cursive;  
 }  
 h1{  
      text-align:center;  
      font-family: 'Inconsolata', monospace;  
      background: #F6FEFE;  
      margin-top: 0;  
      margin-bottom: 0;  
 }  
 form {  
      border-radius: 5px;  
      max-width: 600px;  
      width: 100%;  
      margin: 5% auto;  
      background-color: white;  
      overflow: hidden;  
 }  
 content{  
 /*     margin: auto;  
 */     background: #016B6E;  
 }  
 .btn{  
      background-color: #00595B;  
   border: none;  
   color: white;  
   padding: 15px 32px;  
   margin-top: 10px;  
   text-align: center;  
   text-decoration: none;  
   display: inline-block;  
   font-size: 16px;  
   border-radius: 5px;  
 }  
 .btn:hover{  
      background-color: #08E0E6;  
 }  
 input[type=text] {  
   width: 100%;  
   padding: 12px 20px;  
   margin: 8px 0;  
   box-sizing: border-box;  
   border: none;  
   background-color: #00C3C8;  
   color: white;  
 }  
 input[type=number]  
 {  
      width: 100%;  
   padding: 12px 20px;  
   margin: 8px 0;  
   box-sizing: border-box;  
   border: none;  
   background-color: #00C3C8;  
   color: white;  
 }  
 select{  
      width: 30%;  
   padding: 12px 20px;  
   margin:8px 0;  
   box-sizing: border-box;  
   border: none;  
   background-color: #00C3C8;  
   color: white;  
 }  
 .btnn {  
      text-align: center;  
      margin-top: 10px;  
 }  
 table{  
      border-collapse: collapse;  
      margin: 0 auto;  
      background: #00C3C8;  
 }  
 table,td,tr  
 {  
      text-align: center;  
      border: 2px black solid;;  
 }  
 p  
 {   
      font-family: 'Comfortaa', cursive;  
      margin:5px; font-size: 16px;  
 }

Hasilnya adalah seperti berikut, atau bisa langsung dicoba di link berikut(Ini linknya)
 

Labels:

Comments

Post a Comment

Popular posts from this blog

PBO-A Tugas Membuat Rumah

Berikut saya sertakan codingan saya dalam membuat rumah dalam BlueJ. Saya menggunakan 5 kelas dalam mengerjakannya. Class yang pertama adalah canvas. Di dalam class canvas ini berisi fungsi fungsi untuk membuat tempat agar bisa ditempati objek-objek. Berikut codingannya: import javax.swing.*; import java.awt.*; import java.util.List; import java.util.*; public class Canvas { private static Canvas canvasSingleton; public static final Color hijau_pekat = new Color(0,153,0); public static final Color coklat = new Color(102,51,0); public static final Color abuabu = new Color(153,153,153); public static final Color abuabu_gelap = new Color(51,51,51); public static Canvas getCanvas() { if(canvasSingleton == null) { canvasSingleton = new Canvas("BlueJ Shapes Demo", 600, 400, Color.white); } canvasSingleton.setVisible(true); return canvasSingleton; } pr...
1 comment
Read more

PBO - EAS 2018

Nama : Bobbi Aditya Kelas : PBO A NRP : 05111740000099 Berikut adalah dokumentasi dari hasil pekerjaan EAS PBO saya, soal pertama adalah saya diberi tugas untuk merancang tampilan interface dari image viewer saya. Tampilan image viewer saya yang dulu adalah seperti ini Dari tampilan awal yang seperti itu, saya ingin membuat menu-menu pada bagian kiri (bagian smaller,larger). Sehingga fitur-fitur image viewer saya akan terdapat pada bagian tersebut. Rancangan class diagram saya berubah menjadi seperti dibawah ini: Terdapat 7 class dalam imageviewer saya ini. 1. Image Viewer Image Viewer adalah kelas utama dalam program ini, didalam kelas ini terdapat segala proses image viewer. Mulai dari open file,save file,close file, apply filter, membuat interfaces dll. 2.Image File Manager Image File manager adalah kelas untuk open file dan save file ke disk komputer. Segala proses yang berhubungan dengan disk akan berada di dalam class ini. 3.Image Panel Image Panel adalah kel...
Post a Comment
Read more

PWEB-FRAMEWORK

Nama : Bobbi Aditya Kelas : PWEB C NRP : 05111740000099 Dalam kesempatan kali ini, saya melanjutkan tutorial dari petanikode dari tutorial 4 sampai tutorial 6 Dalam tutorial 4, saya belajar untuk melakukan partisi-partisi dalam tampilan index website. Saya melakukan partisi halaman menjadi 7 partisi. Berikut adalah source code dari masing-masing partisi: -head.php <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title><?php echo SITE_NAME .": ". ucfirst($this->uri->segment(1)) ." - ". ucfirst($this->uri->segment(2)) ?></title> <!-- Bootstrap core CSS--> <link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet"> <!-- Custom fonts for this te...
Post a Comment
Read more