Kamis, 16 Maret 2017

Tugas PWEB 2 Form html dan css

Form : form.html
Tujuan Form : tujuanform.php



source code untuk form.html


 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>Tugas P-Web 2</title>  
  <link rel="stylesheet" type="text/css" href="style.css">  
  <link href="css/bootstrap.min.css" rel="stylesheet">  
 </head>  
 <body style="margin: 0">  
  <div>  
      <nav class="navbar navbar-inverse">  
       <div class="container-fluid">  
           <!-- Brand and toggle get grouped for better mobile display -->  
           <div class="navbar-header">  
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">  
                <span class="sr-only">Toggle navigation</span>  
                <span class="icon-bar"></span>  
                <span class="icon-bar"></span>  
                <span class="icon-bar"></span>  
            </button>  
            <a class="navbar-brand" href="#">Pemesanan Tiket Kereta Api</a>  
           </div>  
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
            <ul class="nav navbar-nav">  
                <li><a href="#">Harga Tiket Kelas KA</a></li>  
                <li><a href="#">Daftar Jadwal KA</a></li>  
                <li><a href="#">Data Pesanan Tiket</a></li>  
            </ul>  
            <ul class="nav navbar-nav navbar-right">  
                <li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>  
            </ul>  
           </div><!-- /.navbar-collapse -->  
       </div><!-- /.container-fluid -->  
      </nav>  
 </div>  
  <div style="padding: 10px">  
  <table>  
   <tr>  
   <td>  
    <img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nKARHBTDVFFAAR2mhHgqM9oARgUDAonD6bhMJAISzowHOBWja2EUdYQ2Dl5Qml__Awlj3AtGZwPZQAnXgOyys1BS11s-lXgYE1VeHaOwCLzDYwP-c1HTFhvWvP3nG7pTML88PLGlbRhF/w1200-h630-p-k-nu/logo+kereta+api.png">  
   </td>  
   <td style="padding-left: 40px">  
    <h2 style="font-family: arial">Selamat Datang!!!</h2>  
   </td>  
   </tr>  
  </table>  
  </div>  
  <div style="padding-top: 20px" class="container" >  
  <form action="tujuanform.php" method="post">  
      <table align="center">  
        <tr>  
                <td>  
                 Nama Kereta  
                </td>  
                <td style="padding-left: 20px">  
                     <input type="text" class="form-control" name="nama" >  
                </td>  
        </tr>  
                <tr>  
                <td>  
                 Tanggal Berangkat  
                </td>  
                <td style="padding-left: 20px">  
                     <input type="date" class="form-control" name="t_berangkat" >                  
                </td>  
        </tr>  
        <tr>  
                <td>  
                 Tanggal Tiba  
                </td>  
                <td style="padding-left: 20px">                  
                     <input type="date" class="form-control" name="t_tiba" >  
                </td>  
        </tr>  
        <tr>  
                <td>  
                     Jam Berangkat   
                </td>  
                <td style="padding-left: 20px">  
                     <input type="time" class="form-control" name="jam_berangkat" >       
                </td>  
        </tr>  
        <tr>  
                <td>  
                     Jam Tiba   
                </td>  
                <td style="padding-left: 20px">  
                     <input type="time" class="form-control" name="jam_tiba">  
                </td>  
        </tr>  
        <tr>  
                <td>  
                     Dari   
                </td>  
                <td style="padding-left: 20px">  
                     <input type="text" class="form-control" name="dari" >  
                </td>  
        </tr>  
        <tr>  
                <td>  
                     Ke   
                </td>  
                <td style="padding-left: 20px">  
                 <input type="text" class="form-control" name="ke" >  
                </td>  
        </tr>  
        <tr>  
                <td>  
                     Kelas  
                </td>  
                <td style="padding-left: 20px">  
                     <select class="form-control" name="kelas">  
                          <option>Ekonomi</option>  
                          <option>Bisinis</option>  
                          <option>Eksekutif</option>  
                     </select>  
                </td>  
        </tr>  
      </table>  
      <div align="center" style="padding-top: 10px">  
           <button type="submit" class="btn btn-primary">Simpan</button> <button class="btn btn-danger">Batal</button>  
      </div>  
  </form>  
  </div>  
  <div align="center" style="padding-top: 30px" class="container">   
  <table class="table">   
   <tr>   
   <td width="20">No</td>   
   <td width="170">Nama Kereta</td>   
   <td width="140">Jadwal Berangkat</td>   
   <td width="140">Jadwal Tiba</td>   
   <td width="180">Dari</td>   
   <td width="180">Ke</td>   
   <td width="140">Harga(Kelas)</td>  
   </tr>   
   <tr>   
   <td >1</td>   
   <td >Argo Laru</td>   
   <td >2014-04-22 - 06.00</td>   
   <td >2014-04-22 - 08.45</td>   
   <td >Gambir, Jakarta Pusat</td>   
   <td >Bandung, Bandung</td>   
   <td >Binis - 90000</td>   
   <td ><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>   
   </tr>   
   <tr>   
   <td >2</td>   
   <td >Argo Laru</td>   
   <td >2014-04-23 - 13.01</td>   
   <td >2014-04-23 - 15.00</td>   
   <td >Gambir, Jakarta Pusat</td>   
   <td >Surabaya</td>   
   <td >Eksekutif - 100000</td>   
   <td ><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>   
   </tr>   
  </table>   
  </div>   
 </body>  
 </html>  

source code untuk tujuanform.html


 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>Tugas P-Web 2</title>  
  <link rel="stylesheet" type="text/css" href="style.css">  
  <link href="css/bootstrap.min.css" rel="stylesheet">  
 </head>  
 <body style="margin: 0">  
  <div>  
      <nav class="navbar navbar-inverse">  
       <div class="container-fluid">  
           <!-- Brand and toggle get grouped for better mobile display -->  
           <div class="navbar-header">  
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">  
                <span class="sr-only">Toggle navigation</span>  
                <span class="icon-bar"></span>  
                <span class="icon-bar"></span>  
                <span class="icon-bar"></span>  
            </button>  
            <a class="navbar-brand" href="#">Pemesanan Tiket Kereta Api</a>  
           </div>  
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
            <ul class="nav navbar-nav">  
                <li><a href="#">Harga Tiket Kelas KA</a></li>  
                <li><a href="#">Daftar Jadwal KA</a></li>  
                <li><a href="#">Data Pesanan Tiket</a></li>  
            </ul>  
            <ul class="nav navbar-nav navbar-right">  
                <li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>  
            </ul>  
           </div><!-- /.navbar-collapse -->  
       </div><!-- /.container-fluid -->  
      </nav>  
 </div>  
  <div style="padding: 10px">  
  <table>  
   <tr>  
   <td>  
    <img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nKARHBTDVFFAAR2mhHgqM9oARgUDAonD6bhMJAISzowHOBWja2EUdYQ2Dl5Qml__Awlj3AtGZwPZQAnXgOyys1BS11s-lXgYE1VeHaOwCLzDYwP-c1HTFhvWvP3nG7pTML88PLGlbRhF/w1200-h630-p-k-nu/logo+kereta+api.png">  
   </td>  
   <td style="padding-left: 40px">  
    <h2 style="font-family: arial">Selamat Datang!!!</h2>  
   </td>  
   </tr>  
  </table>  
  </div>  
  <div style="padding-top: 20px" class="container" >  
      <table align="center" width="400px">  
        <tr>  
                <td>Nama Kereta</td>  
                <td>: <?php echo $_POST["nama"]; ?></td>  
        </tr>  
                <tr>  
                <td>Tanggal Berangkat</td>  
                <td>: <?php echo $_POST["t_berangkat"]; ?></td>  
        </tr>  
        <tr>  
                <td>Tanggal Tiba</td>  
                <td>: <?php echo $_POST["t_tiba"]; ?></td>  
        </tr>  
        <tr>  
                <td>Jam Berangkat</td>  
                <td>: <?php echo $_POST["jam_berangkat"]; ?></td>  
        </tr>  
        <tr>  
                <td>Jam Tiba</td>  
                <td>: <?php echo $_POST["jam_tiba"]; ?></td>  
        </tr>  
        <tr>  
                <td>Dari</td>  
                <td>: <?php echo $_POST["dari"]; ?></td>  
        </tr>  
        <tr>  
                <td>Ke</td>  
                <td>: <?php echo $_POST["ke"]; ?></td>  
        </tr>  
        <tr>  
                <td>Kelas</td>  
                <td>: <?php echo $_POST["kelas"]; ?></td>  
        </tr>  
      </table>  
  </div>  
 </body>  
 </html>  

source code untuk css style.css

 #judul{  
  font-family: 'Arial';  
  font-size: 20;  
  padding-left: 50px;  
 }  
 #head-line:hover{  
  padding: 0.5px;  
  background-color: #0099FF;  
 }  
 #head-line{  
  color: white;  
  padding: 0.5px;  
  background-color: #0066FF;  
 }  
 #img{  
  width: 200px;  
  height: auto;  
  padding-left: 100px;  
 }  
 #tabel{  
  padding: 10px;  
  border: solid black;  
 }  
 th{  
  border: 1px solid black;  
  padding: 5px;   
 }  
 #td_s{  
  border: 1px solid black;  
  padding: 5px;   
 }  
 td{  
      width:200px;  
      padding:15px;  
 }  

Tidak ada komentar:

Posting Komentar