Haikal PG - XI RPL 1 - PWPB Sesi 25

Assalamualaikum Warahmatullahi Wabarokatuh
Kembali lagi dengan saya Haikal Putra Gustiansyah yang dimana pada sesi kali ini kita akan membahas array assosiatif dan media query. Array assosiatif merupakan sebuah tipe data yang memungkinkan kita menyimpan data yang memiliki tipe data yang berbeda bisa berupa string,numerik, dll. Media Query merupakan salah satu fitur CSS3 yang memungkinkan kita agar membuat halaman yang web yang responsif. Simak materi pada sesi kali ini.

Array Asosiatif
Array Asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya.

Jika tidak ditentukan kunci dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka. Perbedaanya hanya bagaimana kita mengakses data/elemen-elemen tersebut. Copykan code berikut:

LatArrayAsosiatif.php

<?php 
 $siswa = array('1819117579' => 'Haikal',
     '1819117580' => 'Milyardin',
     '1819117581' => 'Steph~~');

  echo $siswa['1819117579'] . '<br>';
  echo $siswa['1819117580'] . '<br>';
  echo $siswa['1819117581'];
 ?>

Temn-teman perhatikan code diatas kita memasukkan sebuah data berupa string nama yang kemudian kita masukkan dengan tanda '=>' dan kemudian kita panggil menggunakan echo dan array asosiatifnya. Dan coba jalankan juga jangan lupa nyalakan dulu apache nya.

ArrayAsocFeatLooping.php
Karena memanggil data satu persatu didalam array itu melelahkan kita bisa menggunakan foreach untuk memanggilnya. Copykan code berikut:

<?php 
 $siswa = array('1819117579' => 'Haikal',
     '1819117580' => 'Milyardin',
     '1819117581' => 'Steph~~');

  foreach ($siswa as $nis => $nama) {
   echo $nama . ' memiliki NIS ' . $nis . '<br>';
  }
 ?>

Kita masukkan data kedalam array terlebih dahulu lalu kita panggil dengan foreach. struktur foreach:
foreach($variable as $key => $value){
// Statement yang akan dijalankan
}
Kita panggil dengan echo dan jika dijalankan maka akan tampil seperti berikut:

Study Kasus 1
Kita mulai study kasus kali ini. Perhatikan gambar berikut:

Masalahnya yaitu bagaimana cara kita menampilkan tabel tersebut dengan array asosiatif?. Mudah saja kita akan gunakan loop untuk menampilkan data-datanya dan array assosiatif multidimensi Copykan code berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Tabel Array Assosiatif</title>
 <style type="text/css">
  th{
   background-color: lightgreen;
   border: 1px solid orange;
  }
  td{
   background-color: aqua;
   border: 1px solid salmon;
  }
  body{
   background-color: lightgrey;
  }
 </style>
</head>
<body>
 <table border="1" cellpadding="5" align="center">
<tr>
   <th>NIS</th>
   <th>Nama</th>
   <th>Kelas</th>
   <th>Jurusan</th>
  </tr>
<?php $siswa = [
   ['NIS' => '1314115690',
   'Nama' => 'Bruce Banner',
   'Kelas' => 'MIF1',
   'Jurusan' => 'MIF'],
   ['NIS' => '1314115692',
   'Nama' => 'Stephen Strange',
   'Kelas' => 'MIF2',
   'Jurusan' => 'MIF'],
   ['NIS' => '1314115692',
   'Nama' => 'Stephen Strange',
   'Kelas' => 'MIF2',
   'Jurusan' => 'MIF'],
   ['NIS' => '1314115692',
   'Nama' => 'Stephen Strange',
   'Kelas' => 'MIF2',
   'Jurusan' => 'MIF']


  ];

  for ($i=0; $i < 4 ; $i++) { 

   echo "<tr>";
   echo "<td>" . $siswa[$i]['NIS'] . "</td>";
   echo "<td>" . $siswa[$i]['Nama'] . "</td>";
   echo "<td>" . $siswa[$i]['Kelas'] . "</td>";
   echo "<td>" . $siswa[$i]['Jurusan'] . "</td>";
   echo "</tr>
";
  }

  ?>
 </table>
</body>
</html>

Dan jika dijalankan maka akan seperti ini:

Maka semua data didalam array akan terpanggil.

Media Query
Media Query merupakan salah satu fitur CSS3 yang memungkinkan web developer membuat website yang responsif. Karena resolusi web di Desktop dan Mobile itu berbeda makanya media query ini dipakai agar tampilan website user friendly. Contoh web yang tidak responsif :
Tampilan di Desktop:

Tampilan di Mobile:

Tampilan di mobile yang tidak responsif maka dari itu kita gunakan media query :). Untuk lebih jelas copykan full code berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Media Query</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
  body{
   background: ghostwhite;
   font-family: 'Segoe UI' ,serif;
  }
  header{
   text-align: center;
  }
  header h1{
   padding: 0;
   margin: 0;
  }
  nav{
   margin-top: 10px;
   display: inline-block;
  }
  nav ul{
   list-style: none;
   display: inline-block;
   padding: 0;
   margin: 0;
  }
  nav ul li{
   display: inline-block;
   margin-right: 10px;
   font-size: 24px;
  }
  nav a{
   transition: .3s;
   color: #666;
   text-decoration: none;
  }
  nav a:hover{
   transition: .3s;
   font-weight: bold;

  }
  @media (max-width: 320px){
   nav {
    width: 100%;
   }
   nav ul, nav ul li{
    display: block;
   }
   nav ul li{
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
   }
   nav a{
    font-size: 12px;
   }
  }

 </style>
</head>
<body>
 <header>
  <h1 class="title">
Brand Nama</h1>
<nav>
   <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Favorite</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Contac Us</a></li>
<li><a href="#">Location</a></li>
</ul>
</nav>
 </header>
</body>
</html>

Dan coba jalankan maka tampilan hasilnya akan responsif.
Deskripsi:

@media ([keyword]: [value] [and/or] [keyword2]: [value2]) {

/* Tulis Style Disini */

}

Mungkin hanya segitu saja materi pada sesi kali ini dan sampai jumpa lagi di sesi yang akan datang. Wassalamualaikum Warahmatullahi Wabarokatuh.

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 25

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