Array Assosiative dan CSS Media Query (Pertemuan 25)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Pembahasan kita kali ini kita masih akan membahas tentang seputar PHP. Kali ini kita hanya akan membahas seputar Array Assosiative dan CSS Media Query , langsung saja kita mulai pembahasannya.

1. Array Assosiative
Array Assosiative adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya, jadi isi dari array ini merupakan sebuah variable yang nantinya dapat kita panggil seperti baisanya. Nah, saya memiliki beberapa contoh mengenai Array Assosiative, untuk lebih jelasnya kalian dapat melihat contoh-contoh dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI RPL 3</title>
 </head>
  <link href="A.css" rel="stylesheet" type = "text/css" >
  <body>
   <center>
    <?php
     $siswa = array('1314115698' => 'Loki',
         '1314115699' => 'Thor',
         '1314115700' => 'Stephen');
         
        echo $siswa['1314115698'] . '<br>';
        echo $siswa['1314115699'] . '<br>';
        echo $siswa['1314115700'];
    ?>
   </center>
</body>
</html>

Dari contoh diatas, saya menggunakan NIS dan nama siswa sebagai isi dari arraynya,, yang kemudian dipanggil menggunakan nama_variable dan isi dari NIS masing-masing siswa.

Contoh selanjutnya, kita akan menggunakan looping untuk menampilkan isi dari array tersebut, sehingga kita hanya perlu mendeklarasikannya 1 kali saja untuk memanggil seluruh atau sebagian dari isi array. Untuk lebih jelasnya kalian dapat melihat pada codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI RPL 3</title>
 </head>
  <link href="A.css" rel="stylesheet" type = "text/css" >
  <body>
   <center>
    <?php
     $siswa = array('1314115698' => 'Wanda',
         '1314115699' => 'Nakia',
         '1314115700' => 'Carol');
         
         foreach($siswa as $nis => $nm_siswa){
          echo $nm_siswa .' memiliki NIS '.
          $nis .'<br>';
         }
    ?>
   </center>
</body>
</html>

Pada contoh diatas, saya menggunakan foreach untuk menampilkan seluruh isi array siswa yang berisi NIS dan Nama Siswa tersebut.

Contoh yang terakhir adalah saya akan mencontohkan pembuatan table siswa yang berisi data-data siswa yang nantinya akan ditampilkan pada bentuk tabel menggunakan pengulangan. Untuk lebih jelasnya, kalian dapat melihat gambar dibawah ini :

2. CSS Media Query
CSS Media Query adalah CSS yang biasa digunakan untuk mengatur tampilan layar pada tampilan web maupun android, biasanya sering terjadi ketidak samaan ukuran antara ukuran layar pada android. Oleh karena itu, kita dapat menggunakan CSS Media Query ini untuk menanganinya. Untuk melihat bagaimana tampilan pada android, kita dapat melihatnya dengancara :

Right Click pada halaman web
Pilih Inspect
Setelah muncul tabel, kalian dapat mencari logo android lalu meng clicknya
Setelah itu, tambahkan tag meta pada bagian bawah title

Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI RPL 3</title>
 </head>
  <link href="A.css" rel="stylesheet" type = "text/css" >
  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  <title>Media Queryy</title>
   <style>
    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 32px 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</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 = "#">Contact US</a></li>
<li><a href = "#">Location</a></li>
</ul>
</nav>
   </header>
  </body>
</html>

Saya menggunakan 1 file CSS untuk seluruh codingan diatas yang tertera dalam codingan dibawah ini :

body{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 18pt;
 color   : Purple;
 text-align : center;
 text-shadow: 3px 3px 10px silver, 
     5px 5px 10px aquamarine;
}
table {
 font-family  : Comic Sans MS;
 font-size  : 18pt;
 color   : Purple;
 text-align : center;
 text-shadow: 3px 3px 10px silver, 
     5px 5px 10px aquamarine;
}

Demikian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penjelasan maupun pengetikan. See You Next!!

Wassalamu'alaikum Wr. Wb

Cyber Information Cafe

Cari Blog Ini

Array Assosiative dan CSS Media Query (Pertemuan 25)

Komentar

Posting Komentar