Array Asosiatif pada PHP & CSS Media Query


Assalamualaikum, pada blog kali ini saya akan menjelaskan materi tentang Array Asosiatif pada Bahasa Pemogramman PHP dan CSS Media Query ( responsive ).

A. Array Asosiatif

Array Assosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya tetapi menggunakan string yang kita definisikan sendiri.

 Contoh Array Asosiatif

 1. LatArrayAsosiatif.php

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

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

?>

Hasil Kodingan di atas



2. Array Asosiatif Feat looping

<?php 

    $siswa = array ('1314116598' => 'Wanda', '1314116599' => 'Vision', '1314115700' => 'Danvers');

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

Hasil Kodingan di atas

3. Studi Kasus Array Asosiatif

Kasus :


Kodingan :

<?php 

    $heroes = array(
        '1314115690' => array ( 'nama' => 'Joe Taslim', 'kelas' => 'RPL1', 'jurusan' => 'Rekayasa Perangkat Lunak'),
        '1314115691' => array ( 'nama' => 'Pevita Pearce', 'kelas' => 'RPL2', 'jurusan' => 'Rekayasa Perangkat Lunak'),
        '1314115692' => array ( 'nama' => 'Chelsea Islan', 'kelas' => 'RPL3', 'jurusan' => 'Rekayasa Perangkat Lunak'),
        '1314115693' => array ( 'nama' => 'Chiko Jerico', 'kelas' => 'RPL1', 'jurusan' => 'Rekayasa Perangkat Lunak') 
    );

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Muhammad Fahru Rozi</title>
    <style>
        table {
            border : 3px solid cyan;
        }
        th {
            background : #1BAEE4;
        }
        tr:nth-child(even) {
            background : blueviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="3" cellpadding="5" bgcolor="skyblue">
        <tr>
            <th>NIS</th>
            <th>Nama</th>
            <th>Kelas</th>
            <th>Jurusan</th>
        </tr>        
        <?php 
            foreach ($heroes as $isi => $data) {
                echo "<tr>";
                echo "<td>$isi</td>";     
                echo "<td>$data[nama]</td>";
                echo "<td>$data[kelas]</td>";
                echo "<td>$data[jurusan]</td>";
                echo "</tr>";       
            }
        ?>                
    </table>
</body>
</html>

Hasil Kodingan di atas :


B. CSS Media Query

CSS Media Query digunakan untuk menangani perbedaan tampilan pada beberapa resolusi layar. Resolusi layar saat ini dibagi menjadi 3 kelompok yaitu : Computer ( 1440px X 900px), Tablet ( 768px X 1024px ), Mobile ( 320px X 480px ).

 Manfaat CSS Media Query 
Web Browser modern sudah dapat mengenali CSS Media Query (Chrome, Chrome Mobile Browser, Opera, Opera Mini, UC Browser, dsb) sehingga Programmer tidak perlu menulis kode HTML untuk menyesuaikan pada semua resolusi 

 Contoh Kodingan Website yang menggunakan CSS Media Query 

 Kodingan 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Muhammad Fahru Rozi XI RPL 2</title>
    <style>
        body {
            background: ghostwhite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-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;
                width: 100%;
            }
            nav a {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1 class="title">Fahru Store</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="#">Services</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>

Hasil Kodingan pada Laptop atau Computer :


Hasil Kodingan pada  Mobile :


Sekian penjelasan yang dapat saya berikan semoga bermanfaat , wassalmualaikum.