Thursday, March 16, 2017

JavaScript - Pemrograman Web







<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
  function myFunction(){
   var conf = window.alert("Pendaftaran Berhasil");
  }
  </script>
  <style type="text/css">
  *{
   margin: 0px;
   padding: 0px;
   font-family: arial;
  }
  .navbar{
   background-color: #333;
   padding: 20px;
   margin-bottom:5em;
   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: #333;
   border: none;
   border-radius: 8px;
   color: white;
   font-size: 15px;
   font-weight: bold;
  }
  button:hover{
   background-color: #ffce42;
  }
  .footer{
   background-color: #333;
   height: 300px;
  }
  img{
   margin-top: 20px;
   height: 100px;
   border: 2px solid #333;
   border-radius: 100px;
  }
  </style>
</head>
<body>
  <div class="navbar">
    <h3>LOVE.ME</h3>
  </div>
  <div align="center">
    <h2 class="head">PENDAFTARAN MEMBER</h2>
    <table class="table">
      <tr>
        <td>Nama</td>
        <td>
          <input list="nama" name="" type="text">
        </td>
      </tr>
      <tr>
        <td>Status</td>
        <td>
          <input list="status" name="" type="text"> <datalist id="status">
          </datalist>
          <script>
           var statusli = ["Single","In Relationship","Complicated"];
           var options = '';
           for(var i=0; i<statusli.length; i++){
            options += '<option value="'+statusli[i]+'">';
           }
           document.getElementById('status').innerHTML = options;
           console.log(options);
          </script>
        </td>
      </tr>
    </table>
  </div>
  <div align="center">
    <button onclick="myFunction()" type="button">DAFTARKAN SAYA!</button>
  </div>
  <div class="footer"></div>
</body>
</html>

Thursday, March 2, 2017

PWEB 2

<!DOCTYPE html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
margin:0 auto;
}
#navigasi{
background:#78a5ed;
display:block;
position: relative;
height:50px;
width: 100%
}
#navigasi ul li{
list-style: none;
float:right;
padding-left:20px;
}
#navigasi ul li a{
color:#fff;
text-decoration: none;
}
#header{
height:400px;
display: block;
}
ul.left{
float:left;
}
ul.right{
float:right;
padding-right:20px;
}
.wrapper{
width:960px;
margin: 0 auto;
}
#header{
width: 100%;
height: 80px;
border-bottom: 2px solid #444;
margin: 0 auto;
text-align: center;
}
#konten{
width:100%;
height:500px;
padding-top:40px;
margin: 0 auto;
}

table {
 border-collapse: separate;
 background:#fff;
 margin:50px auto;

}

thead {
background:#3576dd;
}

thead th {
 font-family: 'Patua One', cursive;
 font-size:16px;
 font-weight:400;
 color:#fff;
 text-align:left;
 padding:20px;
 border-top:1px solid #858d99;
}

tbody tr td {
 font-family: 'Open Sans', sans-serif;
 font-weight:400;
 color:#5f6062;
 font-size:13px;
 padding:20px 20px 20px 20px;
 border-bottom:1px solid #e0e0e0;

}

tbody:hover > tr td {

}

tbody:hover > tr:hover td {

}
@import "compass/css3";


form {
  max-width: 600px;
  text-align: center;
  margin: 20px auto;

 }

 input, textarea {
    border:1px solid #ccc; outline:0;
    padding: 1em;
    width: 100%;
    font-family: 'Open sans', sans-serif;
 
 
   }
 #input-submit {
    color: white;
    cursor: pointer;
 
 }

 textarea {
     height: 126px;
 }

</style>
</head>
<body>
<div id="navigasi">
<ul class="left">
<li>Pemesanan Tiket Kereta Api Online</li>
<li><a href="#">Daftar Harga Kelas KA</a></li>
<li><a href="#">Daftar Jadwal KA</a></li>
<li><a href="#">Daftar Pesanan Tiket</a></li>
</ul>
<ul class="right">
<li><a href="#">Logout</a></li>
</ul>
</div>
<div id="header">
<div class="wrapper">
<h1 class="title">Selamat Datang!!!</h1>
</div>
</div>
<div id="konten">
<div id="wrapper">
 <form action="" method="GET" name="giuliamalaroda">

   <label for="name">Nama Kereta</label>
   <input type="text" name="name" id="name" placeholder="Name" required><br>

   <label for="berangkat">Tanggal Berangkat</label>
   <input type="date" name="berangkat" id="berangkat" placeholder="berangkat" required><br>

   <label for="tiba">Tanggal Tiba</label>
   <input type="date" name="tiba" id="tiba" placeholder="tiba" required><br>

   <label for="jamber">Jam Berangkat</label>
   <input type="datetime-local" name="jamber" id="jamber" placeholder="jamber" required><br>

   <label for="jamtiba">Jam Tiba</label>
   <input type="datetime-local" name="jamtiba" id="jamtiba" placeholder="jamtiba" required><br>

   <label for="dari">Dari</label>
   <input type="text" name="dari" id="dari" placeholder="tujuan" required><br>

   <label for="tujuan">Ke</label>
   <input type="text" name="tujuan" id="tujuan" placeholder="Email" required><br>

   <label for="essay">Kelas</label>
   <input type="dropdown"><br>

   <input type="submit" value="Submit">
 </form>

 <table>
 <thead>
       <tr>
           <th>No</th>
           <th>Nama Kereta</th>
           <th>Jadwal Berangkat</th>
           <th>Jadwal Tiba</th>
           <th>Dari</th>
           <th>Ke</th>
           <th>Harga (Kelas)</th>
           <th>Action</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>1</td>
           <td>Argo Paralayang</td>
           <td>2014-4-5</td>
           <td>2015-4-1</td>
           <td>Gambir, Jakarta Pusat</td>
           <td>Bandung</td>
           <td>Bisnis - 90.000</td>
           <td>
            <button>Edit</button>
            <button>Delete</button>
           </td>
       </tr>
       <tr>
           <td>2</td>
           <td>Argo Paralayang</td>
           <td>2015-4-5</td>
           <td>2016-4-1</td>
           <td>Gambir, Jakarta Pusat</td>
           <td>Surabaya</td>
           <td>Ekonomi - 50.000</td>
           <td>
            <button>Edit</button>
            <button>Delete</button>
           </td>
       </tr>
   </tbody>
</table>
</div>
</div>
</body>



PEMROGRAMAN WEB 1 - Pengenalan HTML CSS

<!DOCTYPE html>
 <html>
 <head>
      <title>Muflich Kamil Portfolio</title>
      <style type="text/css">
           body{
                background:#444;  
                color: white;
                text-align: center;
                font-family: century gothic;
                padding: 10px;
           }  
           p {
                border: 1px;
                padding: 30px;
color:#444;
width:30%;
margin:0 auto;
                background-color : #f5f5f5;
           }
      </style>
 </head>
 <body>
      <h1>Hello World!</h1>
      <img src="C:\Users\organizer\Desktop\Impormen\pict_muflichkamil.jpg" height="180">
      <h2>@kamilolimak</h2>
      <p>Nama : Muflich Kamil
           <br>Jenis Kelamin : Laki-laki
           <br>Tempat & Tanggal Lahir : Gresik, 25 September 1997
           <br>Alamat : Jl Mulyosari Tengah
           <br>Agama : Islam
           <br>No HP : 085648819192
      </p>
 </body>
 </html>