Rabu, 04 Oktober 2017

Selection Sort

SELECTION SORT
Pengertian dari selection sort adalah mencari elemen yang tepat untuk diletakkan di posisi yang telah diketahui, dan meletakkannya di posisi tersebut setelah data tersebut ditemukan,
Selection Sort Membandingkan elemen yang sekarang dengan elemen yang berikutnya sampai dengan elemen yang terakhir. Jika ditemukan elemen lain yang lebih kecil dari elemen sekarang 
maka dicatat posisinya dan kemudian ditukar.
Pengurutan data dalam struktur data sangat penting untuk data yang beripe data numerik ataupun karakter.Pengurutan dapat dilakukan secara ascending (urut naik) dan descending (urut turun) Pengurutan (Sorting) adalah proses menyusun kembali data yang sebelumnya telah disusun dengan suatu pola tertentu, sehingga tersusun secara teratur menurut aturan tertentu.
Contoh:
Data Acak    : 5 6 8 1 3 25 10
Ascending    : 1 3 5 6 8 10 25
Descending    : 25 10 8 6 5 3 1
Konsep Selection Sort Algoritma pengurutan sederhana salah satunya adalah Selection Sort. Ide dasarnya adalah melakukan beberapa kali pass untuk melakukan penyeleksian elemen struktur data. Untuk sorting ascending (menaik),
elemen yang paling kecil di antara elemen-elemen yang belum urut,  disimpan indeksnya, kemudian dilakukan pertukaran nilai elemen dengan indeks yang disimpan tersebut dengan elemen yang paling depan yang belum urut. Sebaliknya, untuk sorting descending (menurun), elemen yang paling besar yang disimpan indeksnya kemudian ditukar.
Selection Sort diakui karena kesederhanaan algoritmanya dan performanya lebih bagus daripada algoritma lain yang lebih rumit dalam situasi tertentu. Algoritma ini bekerja sebagai berikut:
1. Mencari nilai minimum (jika ascending) atau maksimum (jika descending) dalam sebuah list
2. Menukarkan nilai ini dengan elemen pertama list 
3. Mengulangi langkah di atas untuk sisa list dengan dimulai pada posisi kedua. Secara efisien kita membagi list menjadi dua bagian yaitu bagian yang sudah diurutkan, yang didapat dengan membangun dari kiri ke kanan dan dilakukan pada saat awal, dan bagian list yang elemennya akan diurutkan.
Simulasi Selection Sort Untuk lebih jelasnya, perhatikanlah simulasi Selection Sort Ascending berikut dengan menggunakan larik 

Senin, 17 April 2017

PWEB Tugas 1

Source code HTML

<!DOCTYPE html>  
 <html>  
 <head>  
      <title>Biodata</title>  
      <link rel="stylesheet" href="styleku.css"/>  
 </head>  
 <body>  
      <form action="#" style="width: 1000px"class="posisi";>  
           <fieldset class="h"/>  
                <table style="width: 980px;">  
                     <tr>  
                          <td rowspan="15" width="250px">  
                          <img src="IMG_0503.jpg" width="250px" height="420px"/>  
                          </td>  
                     </tr>  
                     <tr>  
                          <td><b>Nama Lengkap</b></td>  
                          <td>:</td>  
                          <td>Failaqul Haq</td>  
                     </tr>  
                     <tr>  
                          <td><b>Nama Panggilan</b></td>  
                          <td>:</td>  
                          <td>Feliq</td>  
                     </tr>  
                     <tr>  
                          <td><b>Tempat, Tanggal Lahir</b></td>  
                          <td>:</td>  
                          <td>Lamongan, 04 Desember 1996</td>  
                     </tr>  
                     <tr>  
                          <td><b>Umur</b></td>  
                          <td>:</td>  
                          <td>20 Tahun</td>  
                     </tr>  
                     <tr>  
                          <td><b>Jenis Kelamin</b></td>  
                          <td>:</td>  
                          <td>Laki - Laki</td>  
                     </tr>  
                     <tr>  
                          <td><b>Gol. Darah</b></td>  
                          <td>:</td>  
                          <td>B</td>  
                     </tr>  
                     <tr>  
                          <td><b>Agama</b></td>  
                          <td>:</td>  
                          <td>Islam</td>  
                     </tr>  
                     <tr>  
                          <td><b>Alamat</b></td>  
                          <td>:</td>  
                          <td>Dsn. Melik Canditunggal, Kec. Kalitengah, Kab.Lamongan</td>  
                     </tr>  
                     <tr>  
                          <td><b>Status</b></td>  
                          <td>:</td>  
                          <td>Belum Menikah</td>  
                     </tr>  
                     <tr>  
                          <td><b>Pekerjaan</b></td>  
                          <td>:</td>  
                          <td>Mahasiswa</td>  
                     </tr>  
                     <tr>  
                          <td><b>Kewarganegaraan</b></td>  
                          <td>:</td>  
                          <td>Indonesia</td>  
                     </tr>  
                </table>  
      </fieldset>  
      </form>  
 </body>  
 </html>  

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>  

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>

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