Haikal PG - XI RPL 1 - PWPB Sesi 14

Assalamualaikum Warahmatullahi Wabarokatuh
Pada sesi kali ini kita akan membahas tentang penerapat struktur kontrol percabangan. Sistem percabangan terbagi menjadi 4 yaitu :

IF
ELSE IF
ELSE
SWITCH

IF digunakan jika hanya memiliki satu pernyataan yang akan dijalankan dengan syarat tertentu. Contoh IF sebagai berikut

ELSE IF digunakan saat kita memiliki banyak kondisi (2 atau lebih) pernyataan. Contoh ELSE IF sebagai berikut

Else If

ELSE digunakan jika pernyataan yang disyaratkan semuanya tidak terpenuhi maka block ELSE ini akan dijalankan. Contoh penggunaan ELSE

Else

SWITCH adalah sebuah struktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut.Contoh penggunaan SWITCH

Switch

Ok itu dia macam macam struktur kontrol percabangan. Sekarang kita akan memulai latihannya :

if1Umur.html

Kita akan membuat if untuk mengecek sebuah umur. Contohnya jika umur kurang dari 17 maka ia dilarang mengikuti pemilu dan jika umur lebih dari 17 ia bisa mengikuti pemilu. Untuk lebih jelasnya lihat contoh code berikut :

HTML dan Embedded JS

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gutiansyah XI RPL 1 Bua</title>
 <link rel="stylesheet" type="text/css" href="css/Buatif.css">
</head>
<body>
 <p id="cobaan">
<script type="text/javascript">
   var umur;
   umur = prompt("Masukkan umur anda : ");
   umur = parseInt(umur);
   if (umur < 17) {
    alert("Kami belum dapat mengikuti pemilu");
   }
   alert("Kamu dapat mengikuti pemilu");
  </script>
 </p>
</body>
</html>

CSS

body{
 background-color: orange;
}
p{
 color: white;
 text-align: center;
 font-family: consolas;
}
script{
 font-family: cursive;
 color: red;
}

Jika kode diatas dijalankan maka akan ada tampilan seperti berikut:

Tampilan di atas ditampilkan dengan prompt dan kemudian dimasukkan kedalam variable umur. Setelah dimasukkan maka akan ada IF-ELSE yang akan mengecek umur. Jika umur lebih dari 17 maka akan mucnul alert/pesan sebagai berikut :

Jika kurang dari 17 maka akan mucul alert/pesan sebagai berikut :

Gimana mudah bukan?

if2Olahraga.html
Kita coba buat lagi if nya dengan code sebagai berikut :
HTML dan Embedded JS

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 if2Olahraga</title>
 <link rel="stylesheet" type="text/css" href="css/Buatif.css">
</head>
<body>
 <p id="coba">
<script type="text/javascript">
  var olahraga;
  olahraga = prompt("Masukkan olahraga yang kamu sukai?, terjun payung atau sepeda gunung");
  if (olahraga == "terjun payung" || olahraga == "sepeda gunung") {
   alert("Kami menyukai olahraga ekstrim");
  }
 </script>
 </p>
</body>
</html>

CSS

body{
 background-color: orange;
}
p{
 color: white;
 text-align: center;
 font-family: consolas;
}
script{
 font-family: cursive;
 color: red;
}

Jika dijalankan maka tamplanya akan seperti :

Jika kita mengisi dengan terjun payung atau sepeda gunung maka akan tampil seperti berikut :

if3-jam.html
Di Javascript juga bisa mengambil date/tanggal dan hours dengan method yang sudah disediakan oleh Javascript. dengan date(); newHours();. Kita akan coba buat sebuah pernyataan jika jam kurang dari 18:00 akan menampilkan pesan Good Day! dan jika lebih akan tampil Good Evening. Contoh tampilan.

IF+ELSE.html
Kita coba lagi buat dengan function date() dan Hours() kita buat lagi seperti diatas.Ini codenya:

IF+ELSE IF+ELSE.html
Kita coba lagi hehe dengan IF-ELSE IF-ELSE. Ini codenya :

SWITCHCASE1-PULSA.html
Kita coba menggunakan SWITCH, hasilnya sama seperti IF-ELSE IF-ELSE namun penulisannya jadi lebih singkat jika menggunakan SWITCH ini. Codenya:

HTML dan Embedded JS

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 SwitchCase1-Pulsa</title>
</head>
<body>
 <script type="text/javascript">
  var pilihan = prompt("Pilihan untuk cek pulsa\n1. Informasi pulsa anda\n2.Informasi masa aktif dan masa tenggang")
  pilihan = parseInt(pilihan);
  switch(pilihan){
   case 1: alert("Jumlah pulsa andas adalah sembilah belas ribu rupiah");
   break;
   case 2: alert("Masa aktif kartu anda hingga 7 Agustus 2019");
   break;

   default:
   alert("Pilihan sesuai nomor yang ada");
   break;
  }
 </script>
</body>
</html>

CSS

body{
 background-color: orange;
}
p{
 color: white;
 text-align: center;
 font-family: consolas;
}
script{
 font-family: cursive;
 color: red;
}

Jika code diatas dijalankan maka tampilannya :

Jika kita menuliskan pada prompt dengan angka 1 maka akan seperti ini:

Jika kita isi dengan angka 2:

Dan jika tidak keduanya maka block default akan dijalankan dengan pesan "Pilihan sesuai no yang ada";

SWITCHCASE2-RMPADANG.html
Sekarang kita coba buat dengan opsinya menu-menu makanan padang. Jika di pilih maka akan ada alert makanan yang dipilih. Codenya :
HTML dan Embedded JS

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 SwitchCase2-RMPADANG</title>
 <link rel="stylesheet" type="text/css" href="css/Buatif.css">
</head>
<body>
 <script type="text/javascript">
  alert("MENU MAKANAN PADANG\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\n Klik ok untuk melanjutkan");

  var pilihan = prompt("1.Rendang........................Rp.14.000\n2.Ikan Balado ..........................Rp.13.000\n3. Dendeng Balado......................Rp.12.000\nSoto Padang\n4. Soto Padang ...................Rp.15.000\n5. Gulai.......................Rp.20.000");

  pilihan = parseInt(pilihan);

  switch(pilihan){
   case 1: alert("Menu yang anda pilih : rendang");
   break;
   case 2: alert("Menu yang anda pilih : Ikan Balado");
   break;
   case 3: alert("Menu yang anda pilih : Dendeng Balado");
   break;
   case 4: alert("Menu yang anda pilih : Soto Padang");
   break;
   case 5: alert("Menu yang anda pilih : Gulai");
   break;
   default:alert("Menu yang anda pilih : tidak ada/Silahkan pilih menu yang lain terimakasih");
  }
 </script>
</body>
</html>

CSS

body{
 background-color: orange;
}
p{
 color: white;
 text-align: center;
 font-family: consolas;
}
script{
 font-family: cursive;
 color: red;
}

Jika kode diatas dijalankan maka akan ada tampilan berikut :

Jika kita pilih salah satu opsi diatas maka akan tampil seperti berikut, contoh :

Maka akan ada alert menu yang dipilih.

QUIZZ 14

Buatlah sebuah halaman sederhana yang berisi menu-menu perhitungan aritmatika
Menggunakan funsi if-elseif-else / switch case
Menu perhitungan minimal 5 perhitungan
Menggunkan input dari keyboard (prompt)
Posting di Blog, hanya hasilnya saja tanpa coding.

Hasilnya :

Input 1

Memilih operator

Input 2

Hasil

Begitulah......

Coba kalian buat seperti foto diatas.. hehe..

Sekian pada pertemuan kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh.

Haikal PG - XI RPL 1 - PWPB Sesi 27

Assalamualaikum Warahmatullahi Wabarakatuh Halo teman-teman gimana kabarnya? semoga sehat selalu ya... . Pada sesi kali ini kita akan memasuki materi database . Kita akan menggunakan Mysql sebagai DBMS (Database Management System) yang singkatnya merupakan software yang digunakan untuk membuat basis data. Kenapa kita menggunakan Mysql ? padalah masih banyak DBMS yang lain?. Alasannya yaitu karena Mysql ini Open Source~~. Materi kali ini kita akan mencoba membuat database dan hal pertama yang harus dilakukan karena kita menggunakan Mysql adalah menginstall XAMPP, karena kita sudah menginstallnya dan bagi yang belum menginstallnya silahkan install terlebih dahulu dan jika sudah terinstall kalian nyalakan XAMPP seperti berikut: Nyalakan Mysql dan Apache. Maka jika sudah maka teman-teman ketik di URL Web Browser masing-masing seperti ini : localhost/phpmyadmin . Maka akan tampil halaman seperti berikut: phpmyadmin. Phpmyadmin merupakan perangkat lunak yang dibuat dengan bahas

Baca selengkapnya

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 14

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 19

Haikal PG - XI RPL 1 - PWPB Sesi 27

Haikal PG - XI RPL 1 - PWPB Sesi 12