Pemrograman Web ~ Array Asosiatif & Css Media Query
Assalamualikum Warohmatulohi Wabarokatu
Halloo semuanyaa kembali dengan saya , Kali ini sesuai dengan yang saya katakan diArtikel ini akan melanjutkan materi tentang Array dan dengan tambahan Css Media Query. langsung sajaa skuyy
Array Asosiatif
Array Asosiatif dapat dianalogikan sepeti lemari baju yang menglkkelompokkan antara baju, celana , dll dirak yang berbeda agar dapat mudah untuk menggambil pakaiannya. Array Asosiatif juga digunakan untuk mengklompokan kumpulan variable agar mudah saat dipanggil dan digunakan.
berikut contoh penggunaan Array Asosiatif :
<?php
$siswa = array('1819117593' => 'bambank',
'1819117489' => 'Dude',
'1819117604' => 'yanto');
echo $siswa ['1819117593']. '<br>';
echo $siswa ['1819117489']. '<br>';
echo $siswa ['1819117604'];
?>
array juga dapat dipadukan dengan Looping , seperti berikut :
<?php
$siswa = array('1819117593' => 'Bambank',
'1819117489' => 'Dude',
'1819117604' => 'Yanto');
foreach($siswa as $nis =>$nm_siswa){
echo $nm_siswa.' memiliki NIS '. $nis.'<br>';
}
?>
Sebelum melanjutkan materi Css Media Query kita akan mencoba menyelesaikan Studi kasus .
StudiKasus 1
Buat lah Program menggunakan Array Asosiatif dengan Output berikut
Dan ini contoh Source Code nya :
<?php
$siswa = [
[
"NIS" => "1819117289",
"nama" => "Bambank",
"kelas" => "RPL1",
"jurusan" => "RPL"
],
[
"NIS" => "1819117489",
"nama" => "Dude",
"kelas" => "RPL1",
"jurusan" => "RPL"
],
[
"NIS" => "1819117604",
"nama" => "Yanto",
"kelas" => "RPL1",
"jurusan" => "RPL"
],
[
"NIS" => "1819117290",
"nama" => "Ujang",
"kelas" => "RPL1",
"jurusan" => "RPL"
],
];
?>
<!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>TaufikRPL1</title>
<style>
td{
width : 20%;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1 align="center">Data Siswa </h1>
<table border="1" cellspacing="0" align="center">
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<?php foreach ($siswa as $siswa) { ?>
<tr>
<td><?php echo $siswa["NIS"];?></td>
<td><?php echo $siswa["nama"];?></td>
<td><?php echo $siswa["kelas"];?></td>
<td><?php echo $siswa["jurusan"];?></td>
</tr>
<?php } ?>
</table>
</body>
</html>
Oke selanjutnya kita akan mempelajai Tentang CSS Media Query
CSS Media Query
CSS Media Query digunakan untuk menangani perbedaan tampilan pada beberapa resolusi layar. Karena resolusi layar saat ini dibagi menjadi 3 kelompok , yaitu :
Jadi saat User menggunakan diDevice yang berbeda dengan Resolusi yang berbeda akan membuat tampilan Web terkesan Berantakan dan membuat User kesusahan saat membaca Web.
Contohnya saja saat seseorang membuka web dengan menggunakan mobile/HandPhone karena resolusinya kecil membuat tulisan banyak yang terpotong dan harus melakukan scroll horizontal untuk melihat teks yang terpotong.
Saat ini sudah banyak Aplikasi Browser yang sudah mengenali CSS Media Query sehingga programmer tidak perlu menuliskan kode Html untuk meyesuaikan pada semua resolusi.
Bentuk Umum
@media ([keyword]: [value] [and/or][keyword2]:[value2]){
...
}
Bentuk Umum
@media ([keyword]: [value] [and/or][keyword2]:[value2]){
...
}
Kita akan mencoba menggunakan CSS Media Query , Berikut Step-Stepnya :
Buat Lah Tampilan Seperti Berikut :
Step 2 ,Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>TaufikRPL1</title>
<style>
body{
background: ghostwhite;
font-family: 'Segoe UI', 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;
}
</style>
</head>
<body>
<header>
<h1 class="title">Brand Name</h1>
<nav>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>About Us</li>
<li><a href="#"></a>Product</li>
<li><a href="#"></a>Service</li>
<li><a href="#"></a>Testimonial</li>
<li><a href="#"></a>Favorite</li>
<li><a href="#"></a>Promo</li>
<li><a href="#"></a>Deals</li>
<li><a href="#"></a>Contact Us</li>
<li><a href="#"></a>Location</li>
</ul>
</nav>
</header>
</body>
</html>
Step 3 Testing :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>TaufikRPL1</title>
<style>
Step 6 Code Media Query:
@media (max-width: 400px ){
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;
}
}
Step 7 Preview Result
Comments
Post a Comment