Jumat, 31 Maret 2017

PWEB Tugas 4

Source Code

<!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="utf-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <title>Beauty Village</title>  
   <link href="css/bootstrap.min.css" rel="stylesheet">  
   <link href="css/bootstrap.css" rel="stylesheet">  
   <link href="css/style.css" rel="stylesheet">  
  </head>  
  <body>  
   <div>  
    <nav class="navbar navbar-default">  
     <div class="container-fluid">  
      <div class="navbar-header">  
       <a class="navbar-brand" href="#">Beauty Village</a>  
      </div>  
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
       <ul class="nav navbar-nav">  
        <li class="active"><a href="#">Home</a></li>  
        <li><a href="#">Find Place</a></li>  
        <li><a href="#">About</a></li>  
       </ul>  
       <ul class="nav navbar-nav navbar-right">  
        <li><a href="#">Login</a></li>  
        <li><a href="#">Register</a></li>  
        </li>  
       </ul>  
      </div>  
     </div>  
    </nav>  
   </div>  
   <div>  
    <h1 align="center">The Beauty of Village</h1>  
    <p align="center">you just can't imagine how beatiful it is</p>  
    <p align="center">-----</p>  
    <br>  
   </div>  
   <div id="myCarousel" class="carousel slide" data-ride="carousel">  
    <ol class="carousel-indicators">  
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
     <li data-target="#myCarousel" data-slide-to="1"></li>  
     <li data-target="#myCarousel" data-slide-to="2"></li>  
     <li data-target="#myCarousel" data-slide-to="3"></li>  
    </ol>  
    <div class="carousel-inner" role="listbox">  
     <div class="item active">  
      <img src="farza.jpg" alt="Chania">  
     </div>  
     <div class="item">  
      <img src="2.jpg" alt="Chania">  
     </div>  
     <div class="item">  
      <img src="3.jpg" alt="Flower">  
     </div>  
     <div class="item">  
      <img src="4.jpg" alt="Flower">  
     </div>  
    </div>  
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">  
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  
     <span class="sr-only">Previous</span>  
    </a>  
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">  
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  
     <span class="sr-only">Next</span>  
    </a>  
   </div>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
   <script src="js/bootstrap.min.js"></script>  
  </body>  
 </html>
Diposting oleh di Tidak ada komentar:

PWEB Tugas 3

FORM MAHASISWA

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<script type="text/javascript">
 function myFunction(){
  var conf = window.alert("Login Berhasil");
 }
</script>
<style type="text/css">
 *{
  margin: 0px;
  padding: 0px;
  font-family: calibri;
 }
 .navbar{
  background-color: #9c27b0;
  padding: 20px;
  color: white;
 }
 .head{
  color: grey;

 }
 .head_al{
  padding-top: 50px;
 }
 .table{
  margin-top: 20px;
 }
 input{
  padding-left: 10px;
  border: none;
  border-bottom: 2px solid grey;
  height: 20px;
  width: 250px;
  font-size: 15px;
 }
 td{
  padding: 5px;
  padding-right: 15px;
 }
 button{
  margin: 40px;
  padding: 10px;
  background-color: #9c27b0;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 15px;
  font-weight: bold;
 }
 button:hover{
  background-color: purple;
 }
 .footer{
  background-color: #9c27b0;
  height: 300px;
 }
 img{
  margin-top: 20px;
  height: 100px;
  border: 2px solid #9c27b0;
  border-radius: 100px;
 }
</style>
<body>
 <div class="navbar">
  <h3>TUGAS JAVA SCRIPT</h3>
 </div>
 
 <div align="center" class="head_al">
  <h2 class="head">REGISTRASI MAHSISWA</h2>
  <img src="http://www.unklab.ac.id/sites/default/files/default_images/default_profile_picture.png">
  <table class="table">
   <tr>
    <td>Nama</td>
    <td>
     <input type="text" name="" list="nama">
     <datalist id="nama">
     </datalist>
     <script>
      var nama = ["Aditya Dwicahyo","Joko Widodo","Steve Jobs","Cahyo","Siti Markonah","Adit DC"];
      var options = '';
      for(var i=0; i<nama.length; i++){
       options += '<option value="'+nama[i]+'">';
      }
      document.getElementById('nama').innerHTML = options;
      console.log(options);
     </script>
    </td>
   </tr>
   <tr>
    <td>NRP</td>
    <td>
     <input type="text" name="" list="NRP">
     <datalist id="NRP">
     </datalist>
     <script>
      var nrp = ["5115100087","5115100127","5114100087","5116100087","5112100127","5111100127"];
      var options = '';
      for(var i=0; i<nrp.length; i++){
       options += '<option value="'+nrp[i]+'">';
      }
      document.getElementById('NRP').innerHTML = options;
      console.log(options);
     </script>
    </td>
   </tr>
   <tr>
    <td>Mata Kuliah</td>
    <td>
     <input type="text" name="" list="matkullist">
     <datalist id="matkullist">
     </datalist>
     <script>
      var matkul = ["Otomata","Pemrograman Web","Kecerdasan Buatan","Perancangan Analisis Algoritma II","Jaringan Komputer","Manajemen Basis Data", "Probabilitas dan Statistika", "Dasar Pemrograman", "Rekayasa Perangkat Lunak"];
      var options = '';
      for(var i=0; i<matkul.length; i++){
       options += '<option value="'+matkul[i]+'">';
      }
      document.getElementById('matkullist').innerHTML = options;
      console.log(options);
     </script>
    </td>
   </tr>
   <tr>
    <td>Dosen</td>
    <td>
     <input type="text" name="" list="dosen">
     <datalist id="dosen">
     </datalist>
     <script>
      var dosen = ["Ir. Muchammad Husni, M.Kom.","Prof.Ir. Supeno Djanali, M.Sc.,Ph.D","Baskoro Adi Pratomo, S.Kom, M.Kom","Ir. Siti Rochimah, MT.,Ph.D"," Fajar Baskoro, S.Kom.,MT.","Nurul Fajrin Ariyani, S.Kom.,M.Sc.","Sarwosri, S.Kom.,M.T.","Imam Kuswardayan, S.Kom.,MT.", "Ridho Rahman Hariadi, S.Kom.,M.Sc.", "Victor Hariadi, S.Si.,M.Kom.", "Rully Sulaiman, S.Kom.,M.Kom."];
      var options = '';
      for(var i=0; i<dosen.length; i++){
       options += '<option value="'+dosen[i]+'">';
      }
      document.getElementById('dosen').innerHTML = options;
      console.log(options);
     </script>
    </td>
   </tr>
  </table>
 </div>
 <div align="center">
  <button type="button" onclick="myFunction()">DAFTAR</button>
 </div>
 <div class="footer">
 </div>
</body>
</html>
Diposting oleh di Tidak ada komentar:

PWEB Tugas 2

SIMPLE FORM HTML

  1. <!DOCTYPE html/>
  2. <html lang="em"><head>
  3.     <title>Situs Resmi PT KAI</title>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  7.     <link rel="stylesheet" href="form.css" type="text/css">
  8.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9.     <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. </head>
  12. <body>
  13.     <nav class="navbar navbar-default">
  14.       <div class="container-fluid">
  15.         <div class="navbar-header">
  16.             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  17.                 <span class="icon-bar"></span>
  18.                 <span class="icon-bar"></span>
  19.                 <span class="icon-bar"></span>  
  20.             </button>
  21.           <a class="navbar-brand" href="#" style="color: #0AC7D1">Pemesanan Tiket Kereta Online</a>
  22.         </div>
  23.         <div class="collapse navbar-collapse" id="myNavbar">
  24.             <ul class="nav navbar-nav">
  25.               <li><a href="#" style="color: #0AC7D1">Daftar Harga Kelas KA</a></li>
  26.               <li><a href="#" style="color: #0AC7D1">Daftar Jadwal KA</a></li>
  27.               <li><a href="#" style="color: #0AC7D1">Data Pesanan Tiket</a></li>
  28.             </ul>
  29.             <ul class="nav navbar-nav navbar-right">
  30.               <li><a href="#" style="color: #0AC7D1"><spanclass="glyphicon glyphicon-log-out" style="color: #0AC7D1"></span> Logout</a></li>
  31.             </ul>
  32.         </div>
  33.       </div>
  34.     </nav>
  36.     <div class="container">
  37.         <div class="col-sm-2">
  38.             <img class="img-responsive" src="KAI.jpg" alt="PT KAI">
  39.         </div>
  40.         <div class="col-sm-9">
  41.             <h1 style="color : #2E0AD1"><left>Selamat Datang !!!</center></h1>
  42.         </div>
  43.     </div>
  45.     <hr>
  47.     <div class="container">
  48.       <form class="form-horizontal" role="form" method="post"action="send.php">
  49.         <div class="form-group">
  50.           <label class="control-label col-sm-offset-3 col-sm-2"for="pilihan-kereta">Pilih Kereta:</label>
  51.           <div class="col-sm-3">
  52.             <select class="form-control" id="pilihan-kereta">
  53.             <option> </option>
  54.             <option>Argo Anggrek</option>
  55.             <option>Jayabaya</option>
  56.             <option>Kertajaya</option>
  57.             <option>Bima</option>
  58.             <option>Argo Bromo</option>
  59.             </select>
  60.           </div>
  61.         </div>
  62.         <div class="form-group">
  63.           <label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>
  64.           <div class="col-sm-3">          
  65.             <input type="date" class="form-control" id="tgl-berangkat">
  66.           </div>
  67.         </div>
  68.         <div class="form-group">
  69.           <label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>
  70.           <div class="col-sm-3">          
  71.             <input type="time" class="form-control" id="jam-berangkat">
  72.           </div>
  73.         </div>
  74.         <div class="form-group">
  75.           <label class="control-label col-sm-offset-3 col-sm-2"for="tempat-asal">Dari:</label>
  76.           <div class="col-sm-3">
  77.             <select class="form-control" id="tempat-asal">
  78.             <option> </option>
  79.             <option>Bandung</option>
  80.             <option>Cirebon</option>
  81.             <option>Jakarta</option>
  82.             <option>Kediri</option>
  83.             <option>Semarang</option>
  84.             <option>Surabaya</option>
  85.             <option>Yogyakarta</option>
  86.             </select>
  87.           </div>
  88.         </div>
  89.         <div class="form-group">
  90.           <label class="control-label col-sm-offset-3 col-sm-2"for="tempat-tujuan">Ke:</label>
  91.           <div class="col-sm-3">
  92.             <select class="form-control" id="tempat-tujuan">
  93.             <option> </option>
  94.             <option>Bandung</option>
  95.             <option>Cirebon</option>
  96.             <option>Jakarta</option>
  97.             <option>Kediri</option>
  98.             <option>Semarang</option>
  99.             <option>Surabaya</option>
  100.             <option>Yogyakarta</option>
  101.             </select>
  102.           </div>
  103.         </div>
  104.         <div class="form-group">
  105.           <label class="control-label col-sm-offset-3 col-sm-2"for="kelas">Kelas:</label>
  106.           <div class="col-sm-3">
  107.             <select class="form-control" id="kelas">
  108.             <option> </option>
  109.             <option>Eksekutif</option>
  110.             <option>Bisnis</option>
  111.             <option>Ekonomi</option>
  112.             </select>
  113.           </div>
  114.         </div>
  115.         <div class="form-group">        
  116.           <div class="col-sm-offset-6 col-sm-2">
  117.             <button type="submit" class="btn btn-primary">Pesan Tiket</button>
  118.             <button type="submit" class="btn btn-warning"style="color:black">Batal</button>
  119.           </div>
  120.         </div>
  121.       </form>
  122.     </div>
  123.  </div>
  124.   <div align="center" style="margin-top:10px; padding-top: 30px">  
  125.   <table>  
  126.    <tr>  
  127.     <th width="50">No</th>  
  128.     <th width="170">Nama Kereta</th>  
  129.     <th width="170">Jadwal Berangkat</th>  
  130.     <th width="170">Jadwal Tiba</th>  
  131.     <th width="180">Dari</th>  
  132.     <th width="180">Ke</th>  
  133.     <th width="140">Harga(Kelas)</th>  
  134.     <th></th>  
  135.    </tr>  
  136.    <tr>  
  137.     <td id="td_s">1</td>  
  138.     <td id="td_s">Argo Laru</td>  
  139.     <td id="td_s">2014-04-22 - 06.00</td>  
  140.     <td id="td_s">2014-04-22 - 08.45</td>  
  141.     <td id="td_s">Gambir, Jakarta Pusat</td>  
  142.     <td id="td_s">Bandung, Bandung</td>  
  143.     <td id="td_s">Binis - 90000</td>  
  144.     <td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button"class="btn btn-danger">Hapus</button></td>  
  145.    </tr>  
  146.    <tr>  
  147.     <td id="td_s">2</td>  
  148.     <td id="td_s">Argo Laru</td>  
  149.     <td id="td_s">2014-04-23 - 13.01</td>  
  150.     <td id="td_s">2014-04-23 - 15.00</td>  
  151.     <td id="td_s">Gambir, Jakarta Pusat</td>  
  152.     <td id="td_s">Surabaya</td>  
  153.     <td id="td_s">Eksekutif - 100000</td>  
  154.     <td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button"class="btn btn-danger">Hapus</button></td>  
  155.    </tr>  
  156.   </table>  
  157.  </div>  
  159. </body></html>
Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)