Array Assoc dan CSS Media Query - Praktikum 13


 

Assalamu'alaikum warahmatullahi wabarakatuh.

Halo teman-teman semuanya! Bagaimana kabarnya? Semoga dalam kondisi dan keadaan yang prima dan baik-baik saja ya, sekarang di Indonesia terutama Jakarta keadaan covid makin gaswat nih, tetap jaga protokol kesehatan dan selalu berdoa demi keselamatan bersama!

Perkenalkan kembali lagi bersama saya Ilham, saya dari kelas XI RPL 2 yang sekarang dalam artikel kali ini, kita akan membahas tentang "Array Assosiative pada PHP dan CSS Media Query",  tanpa berlama-lama lagi mari langsung saja kita ke bahasan materinya!


Array Assosiative

Sebelum masuk ke program dan codingan, sebaiknya kita harus mengetahui terlebih dahulu apa itu array assosiative agar lebih mudah dalam nanti proses penulisan syntax/codingannya.

Array Assosiative adalah komponen array terdiri dari pasangan kunci (key) dan nilai (value). Key adalah penunjuk posisi dimana value disimpan. Perhatikan juga bahwa PHP menggunakan tanda panah (=>) untuk memberikan nilai/value kepada masing-masing key. Agar kebayang bagaimana bentuk dan penggunaannya berikut kami sajikan contoh sederhana dari Array assosiative:


Source code/codingannya:
<?php 

$siswa = [
     '1920118111' => 'Ilham',
     '1920118112' => 'Prabu',
     '1920118113' => 'Zaky'
];

echo $siswa['1920118111'] . '<br>';
echo $siswa['1920118112'] . '<br>';
echo $siswa['1920118113'];

?>

Nah disana terlihat bahwa terdapat key yang mengarah terhadap nilai, yang dipisahkan dengan tanda => dengan format (key => value). Dengan menggunakan format demikian pemanggilan nilai pada array pun menjadi lebih mudah yakni dengan memakai nama key untuk pemanggilan nilainya.
Array Assosiative Dengan Looping

Selain menggunakan nama key untuk memanggil nilai dari array assosiative yang dilakukan secara manual, terdapat juga langkah/metode pengambilan nilai array assosiative dengan memakai pengulangan atau looping.

Looping yang dipakai adalah looping dengan keyword foreach. Looping ini merupakan looping khusus untuk mengakses nilai pada setiap elemen array assosiative. Dengan begitu pemanggilan nilai pun akan terlihat lebih rapi dan efektif, berikut merupakan contoh dari pemanggilan nilai array menggunakan klausa foreach.


Source code/codingannya: 
<?php 

$siswa = [
     '1920118111' => 'Ilham',
     '1920118112' => 'Prabu',
     '1920118113' => 'Zaky'
];
// $nis sebagai key || $nama_siswa sebagai value dari key
foreach ($siswa as $nis => $nama_siswa) {
     echo $nama_siswa . ' memiliki NIS ' . $nis . '<br>'; 
}

?>

Studi Kasus Array Assosiative

Setelah mempelajari dasar-dasar dari array assosiative disini juga kita akan melakukan suatu studi kasus yang merupakan pengimplementasian dari pemahaman materi yang telah kita pelajari. 

Studi kasus ini sangatlah sederhana dan mudah, yakni mengakses nilai pada setiap elemen array dengan memakai looping foreach yang setiap nilai/hasil dimasukan kepada table pada elemen tag html.

Sudah kebayang bukan cara dan langkahnya? Mari kita langsung ke hasil dan codingannya!


Source code/codingannya:
<?php 

$siswa = [
     [
          'nis' => '1314115690',
          'nama' => 'Bruce Banner',
          'kelas' => 'MIF 1',
          'jurusan' => 'MIF'
     ],
     
     [
          'nis' => '1314115692',
          'nama' => 'Stephen Strange',
          'kelas' => 'MIF 2',
          'jurusan' => 'MIF'
     ],

     [
          'nis' => '1314115693',
          'nama' => 'Matt Murdock',
          'kelas' => 'MIF 3',
          'jurusan' => 'MIF'
     ],

     [
          'nis' => '1314114799',
          'nama' => 'Peter Parker',
          'kelas' => 'MIF 1',
          'jurusan' => 'MIF'
     ]
];
?>

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Array Assoc</title>
</head>

<body>
    <div class="container table-responsive ">
        <table class="table table-bordered table-striped mt-5">
            <caption>Daftar siswa</caption>
            <thead class="thead-primary">
                <tr>
                    <th scope="col">NIS</th>
                    <th scope="col">Nama</th>
                    <th scope="col">Kelas</th>
                    <th scope="col">Jurusan</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($siswa as $s) : ?>
                <tr>
                    <td><?= $s['nis']; ?></td>
                    <td><?= $s['nama']; ?></td>
                    <td><?= $s['kelas']; ?></td>
                    <td><?= $s['jurusan']; ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
    </script>
</body>

</html>

CSS Media Query

CSS @media query merupakan sebuah teknik css layout yang membebaskan kita untuk menyeting tampilan dengan CSS di berbagai resolusi dan lebar, tinggi daripada browser yang sedang kita gunakan secara spesifik.

CSS Media Query digunakan untuk menangani perbedaan tampilan pada beberapa
resolusi layar.

Resolusi layar saat ini terbagi menjadi 3 kelompok:

Resolusi Width Height
Computer 1440px 900px
Tablet 768px 1024px
Mobile 320px 480px


CSS Media Query sangat diperlukan saat terjadi transisi/perpindahan layout size pada suatu elemen contoh jika kita membuat website pada desktop yang pada umumnya itu memiliki resolusi kurang lebih 1368px x 764px ketika dibuka dimobile maka tentu size tersebut akan menjadi terlihat berantakan.

Mengapa? karena kita membuat ukurannya itu berdasarkan ukuran pada suatu desktop yang tidak relatif compatibel pada device yang memiliki ukurang berbeda terutama yang lebih kecil darinya.

Untuk mengatasi hal tersebut disinilah kehadiran CSS Media Query itu dibutuhkan.

Pengimplementasian CSS Media Query

Setelah mempelajari dasar-dasar dan tujuan dipakainya CSS Media Query, disini kita akan  mencoba hal tersebut dalam pembuatan header website sederhana yang responsive baik dibuka di desktop maupun di mobile atau device lain.

Berikut merupakan contoh dari pengimplementasiannya


Source code/codingannya:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Media Query</title>
    <link rel="stylesheet" href="style.css">
</head>

<body cl>
    <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>
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: #666666;
     text-decoration: none;
}

nav a:hover {
     transition: .3s;
     font-weight: bold;
}

Mungkin cukup sekian materi pengelolaan struktur kontrol dan percabangan pada PHP-nya. Cukup singkat materinya dimulai dari pengenalan hingga pengimplementasiannya. Semoga sobat-sobat codingers paham, mengerti dan menguasainya. 

Mohon maaf jika terdapat tutur kata yang tidak berkenan dihati anda. Mohon maaf atas semua kesalahan yang telah saya perbuat, tolong berikan koreksi mengenai bagian mana yang salah/kurang pas dalam postingan ini, untuk pengembangan lebih baik kedepannya.

Sekian, saya ucapkan terimakasih banyak atas waktu yang telah diluangkan, saya ucapkan kembali mohon maaf atas segalanya kesalahan. 

Wabilahiltaufik walhidayah,
Wassalamu'alaikum warahmatullahi wabarakatuh
Keep Coding Stay Awesome

0 Response to "Array Assoc dan CSS Media Query - Praktikum 13"

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel