Array Asosiatif & CSS Media Query

Oktober 09, 2019

Array Asosiatif & CSS Media Query

PRAKTIKUM 25

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

Yoiiii welcome gaess....

Selamat datang lagi di blog Tutor Gesit, blog pembelajaran serta kumpulan-kumpulan contoh berbagai macam teori pemrograman hheee. pada artikel kaliini kita akan mempelajari tentang Array Asosiatif & CSS Media Query. Ada yang sudah tahu kahh? yapp biar saya jelaskan secara singkat yaa, jadi array asosiatif merupakan 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. Atau bisa juga dijabarkan sebagai array yang setiap elementnya tidak menggunakan nomor element (index) tapi menggunakan string, dan nomor element tersebut dengan key (kunci), nah dengan menggunakan key tersebut dapat membuat data secara berpasangan. Array Asosiatif juga merupakan array yang tidak menggunakan angka sebagai kunci untuk menentukan setiap nilainya, jika kita tidak menentukan key dari sebuah element yang terdapat pada array tersebut, maka kay nya akan secara otomatis berupa angka. supaya lebih jelas berikut merupakan contoh kodingan array asosiatif sederhana yang mudah untuk kalian analisis beserta beberapa contoh kodingan lainnya :

Array Asosiatif

<?php
 $siswa = array('1314115698' => 'Loki',
       '1314115699' => 'Thor',
       '1314115700' => 'Stephen');

 echo $siswa ['1314115698'] . '<br>';
 echo $siswa ['1314115699'] . '<br>';
 echo $siswa ['1314115700'];

Hasilnya :

Array Asosiatif Deangan Looping

<?php
 $siswa = array('1314115698' => 'wanda', 
       '1314115699' => 'Nakia',
       '1314115700' => 'Carol');

foreach ($siswa as $nis => $nm_siswa) {
 echo $nm_siswa . ' Memiliki NIS ' . $nis . '<br>';
 }

?>

Hasilnya :

Studi Kasus

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
  h1{
            font-family: cooper black;
            text-shadow: 3px 3px 3px orange;
        }

        p{
            color: orange;
            text-shadow: 2px 2px 2px black;
            font-family: hobo std medium;
        }
        table{
         border: outset 7px orange;
         background: linear-gradient(to left, #e9be2a 0%, #ed0b0b 100%)
        }
        input{
            border: inset orange;
            background: grey;
        }
 </style>
</head>
<body>
 <table border="1" cellpadding="4">
<tr align="center">
  <td colspan="4"><h1>
Daftar Siswa MIF</h1>
</td>
 </tr>
<tr>
  <td>NIS</td>
  <td>Nama</td>
  <td>Kelas</td>
  <td>Jurusan</td>
 </tr>
<?php
 $siswa = array(
    array('nis' => '1314115690', 'nama' => 'Bruce Banner', 'kelas' => 'MIF 1', 'jurusan' => 'MIF'),
    array('nis' => '1314115691', 'nama' => 'Stephen Strange', 'kelas' => 'MIF 2', 'jurusan' => 'MIF'),
    array('nis' => '1314115692', 'nama' => 'Matt Mudrock', 'kelas' => 'MIF 3', 'jurusan' => 'MIF'),
    array('nis' => '1314115693', 'nama' => 'Peter Parker', 'kelas' => 'MIF 1', 'jurusan' => 'MIF')
 );
 foreach ($siswa as $murid) {
  echo "
<tr>";
  echo "<td>".$murid['nis']."</td>";
  echo "<td>".$murid['nama']."</td>";
  echo "<td>".$murid['kelas']."</td>";
  echo "<td>".$murid['jurusan']."</td>";
  echo "</tr>
";
 }
  ?>
</table>
</body>
</html>

Hasilnya :

Tadi kan yang tentang array asosiatif, naahhhh sekarang giliran CSS Media Query. CSS Media Querry merupakan adaptive design atau merupakan solusi yang digunakan untuk menangani perbedaan resolusi layar yang membuka web tersebut. sehingga web tersebut akan lebih nyaman dan cocok dibuka baik lewat computer ataupun mobile.

CSS Media Query

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title></title>
 <style type="text/css">
  body{
   background: ghost;
   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){
   /*Tulis Style CSS untuk  ukuran layar maksimal 320x disini*/
   nav{
    width: 100%;
   }

   nav ul, nav ul li{
    display: block;
   }

   nav ul li{
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    width: 100%;
   }
   nav a{
    font-size: 12px;
   }
  }
 </style>
</head>
<body>
 <header>
  <h1 class="title">
Brand Name</h1>
<nav>
   <ul>
<li><a href="#">Home</li>
<li><a href="#">About Us</li>
<li><a href="#">Product</li>
<li><a href="#">Service</li>
<li><a href="#">Testimonial</li>
<li><a href="#">Favorite</li>
<li><a href="#">Promo</li>
<li><a href="#">Deals</li>
<li><a href="#">Contact  Us</li>
<li><a href="#">Location</li>
</ul>
</nav>
 </header>

</body>
</html>

Hasilnya :

Mungkin sekian yang dapat saya tuliskan dalam aartikel kaliini, semoga bermanfaat...

Cari Blog Ini

Tutor Gesit

Array Asosiatif & CSS Media Query

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script