Wednesday, October 18, 2017

Drawing Bot Bebras 1 UK

The robot 'Drawbot' can drive and draw at the same time!
You can give the drawbot the following instructions: square, triangle, forward, turn.
The instructions work as follows:

You can also give a sequence of
commands to drawbot:
For instance: square, forward, triangle
The image below shows what will happen.
Which sequence of instructions causes
this to happen?
Answer :

triangle, turn, forward, square

Visualisation : https://scratch.mit.edu/projects/180821613/

Thursday, March 23, 2017

Tugas Pemrograman Web 3

Form Mahasiswa

Source Code :



<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<script type="text/javascript">
 function myFunction(){
  var conf = window.alert("Berhasil Login");
 }
</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 3 Pemrograman Web</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 = ["Romi Yehezkiel","Dwiyan Satria","Rochman Soleh","Adiwinoto","Rizal S","Yusuf Dimas"];
      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 = ["5114100054","51154100140","5114100075","511710035","5112100001","5111100169"];
      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>


TAMPILAN FORM :





Saat berhasil Login :


Simple Form HTML

Source Code HTML :

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>website KAI</title>


<body class="bodystyles">

<ul>
  <li><a class="active" href="#home">Pemesanan Tiket Kereta Api Online</a></li>
  <li><a href="#news">Daftar Harga Kelas KA</a></li>
  <li><a href="#contact">Daftar Jadwal KA</a></li>
  <li><a href="#about">Daftar Pesanan Tiket</a></li>
</ul>

 <div class="header">
  <img src="kaai.png" alt="LogoKAI" />
  <h1>Selamat Datang    !!!</h1>
 </div>
 <br><br>
<hr>
<div>
 <table class="tablestyles" >
  <form name ="input" action="html_form_action.asp" method="get">
      <tr><td> Nama Kereta:</td><td><input type="text" name="name" align="center" id="name" required></td></tr>
      <tr><td> Tanggal Berangkat:</td><td><input type="date" name="departdate" align="center" required></td></tr>
      <tr><td> Tanggal Tiba:</td><td><input type="date" name="arrivedate" align="center" required></td></tr>
      <tr><td> Jam Berangkat:</td><td><input type="time" name="departtime" align="center" required></td></tr>
      <tr><td> Jam Tiba:</td><td><input type="time" name="arrivetime" align="center" required></td></tr>
      <tr><td> Dari:</td> <td><input type="text" name="from" align="center" required></td></tr>
      <tr><td> Ke:</td><td><input type="text" name="to" align="center" required></td></tr>
      <tr><td> Kelas:</td><td><select name="Kelas" form="kelasform">
                              <option value="Eksekutif">Eksekutif</option>
                              <option value="Bisnis">Bisnis</option>
                              </select></td></tr>

  <tr>
  <td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
  <td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
  </tr>


 </table>
</div>

<div class="tablestyles1">
    <table>
        <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>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">Argo Parahyangan</td>
            <td align="center">2014-04-22 - 06:00</td>
            <td align="center">2014-04-22 - 08:45</td>
            <td align="center">Gambir, Jakarta Pusat</td>
            <td align="center">Bandung, Bandung</td>
            <td align="center">Bisnis - 90.000</td>

            <td class="input1"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td align="center">Argo Parahyangan</td>
            <td align="center">2014-04-23 - 13:01</td>
            <td align="center">2014-04-23 - 15:00</td>
            <td align="center">Gambir, Jakarta Pusat</td>
            <td align="center">Surabaya</td>
            <td align="center">Eksekutif  - 100.000</td>

            <td class="input2"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
        </tr>

    </table>
    </div>


</body>

</head>

</html>

Tampilan :

Thursday, February 23, 2017

Membuat Profil Sederhana Dengan HTML Text Editor

Source Code :

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
  
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>Profil Mahasiswa</h1>
</header>
 
<nav>
<img src="FotoProfil.jpg" alt="HTML5 Icon" style="width:150px;height:200px;">
</nav>

<article>
  <h1>Profil</h1>
  <p>Nama             : Romi Yehezkiel Purba</p>
  <p>Panggilan       : Romi</p>                                            
  <p>Jenis Kelamin   : Laki Laki                   
  <p>NRP              : 5114100054</p>
  <p>TTL             : Medan, 2 April 1997</p>
  <p>Agama           : Kristen Protestan</p>
  <p>Hobi             : Baca, gaming</p>
</article>

<footer></footer>

</div>

</body>
</html>

 Visual :