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 36

Assalamualaikum Warahmatullahi Wabarokatuh Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas tentang OOP (Object Oriented Programming) pada php. OOP merupakan konsep/metode programming berorientasi pada objek. Jadi didalam OOP semua digambarkan sebagai objek yang di representasikan. Terdiri dari 3 struktur diantaranya : Class, property, dan method/function. Ok kita langsung saja ke materinya. Coba teman-teman buat sebuah file bernama dan berekstensi seperti ini : HewanPeliharaan.php nah disini kita akan membuat struktur class yang dimana hewan ini memiliki 3 property diantaranya nama, jenis, dan makanan. Untuk lebih jelasnya seperti ini: nama = $nama; $this->jenis = $jenis; $this->makanan = $makanan; } } Tag phpnya tidak perlu ditutup karena ini merupakan class dan kita tidak akan menambahkan code seperti html/js disini. __construct merupakan function yang ada di php, construct ini merupakan bagian code yang akan pertama...

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 36

Haikal PG - XI RPL 1 - PWPB Sesi 25

Haikal PG - XI RPL 1 - PWPB Sesi 7