Arry Asosiatif & CSS Media Query
Halo! Selamat sore :) Di sini saya mau membahas tentang Array asosiatif. Array asosiatif sama saja seperti array biasa, bedanya, di array biasa kita mengakses array menggunakan angka sementara di asosiatif kita menggunakan keyword. Keywordnya bisa berupa apapun. Tentunya hal ini memudahkan agar mudah dibaca.
Langsung saja kita masuk ke latihan, yuk!
Di bawah ini adalah array $siswa. Di dalam array siswa tersebut, terdapat data nama yang bisa diakses dengan menggunakan NIS
Hasil:
Di bawah ini adalah array asosiatif dengan looping foreach. Looping foreach sendiri adalah loop yang tidak perlu dideklarasikan jumlahnya, karna itu akan mengulang habis sampai nilai yang ada di dalam variabel yang kita pakai habis
Di dalam contoh di atas, variabel yang ada di dalam array $pelajar di andaikan sebagai nis dan nm_pelajar.
Hasil:
Sementara d bawah ini adalah koding tabel yang isinya dideklarasikan dengan array asosiatif
Hasil:
Selanjutnya di bawah ini adalah penggunaan CSS media query dalam blog. Css media query berfungsi agar tampilan web tidak amburadul jika berada dalam perangkat lain yang ukurannya berbeda-beda.
Hasilnya bisa anda lihat.
Terima kasih sudah membaca!
Langsung saja kita masuk ke latihan, yuk!
Di bawah ini adalah array $siswa. Di dalam array siswa tersebut, terdapat data nama yang bisa diakses dengan menggunakan NIS
<html lang="en">
<head>
<title>AuliaAgusinaXIRPL1</title>
</head>
<body>
<?php
$pelajar=array('1718777'=>'Juni', '1718778'=>'Fina', '1718779'=>'Fani');
echo $pelajar['1718777'].'<br>';
echo $pelajar['1718778'].'<br>';
echo $pelajar['1718779'].'<br>';
?>
</body>
</html>
Hasil:
Di bawah ini adalah array asosiatif dengan looping foreach. Looping foreach sendiri adalah loop yang tidak perlu dideklarasikan jumlahnya, karna itu akan mengulang habis sampai nilai yang ada di dalam variabel yang kita pakai habis
<html lang="en">
<head>
<title>AuliaAgustinaXIRPL1</title>
</head>
<body>
<?php
$pelajar=array('17187572'=>'Wanda', '17187573'=>'Bidawaruhi', '171875729'=>'Santoso');
foreach ($pelajar as $nis => $nm_pelajar){
echo $nm_pelajar.' memiliki NIS '.$nis.'<br>';
}
?>
</body>
</html>
Hasil:
Sementara d bawah ini adalah koding tabel yang isinya dideklarasikan dengan array asosiatif
<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>AuliaAgustinaXIRPL1</title>
<style>
table#tab{
background-color: deepskyblue;
font-family: Comic sans ms;
color:white;
border: 2px dashed white;
text-align:center;
}
#judul{
background-color:tomato;
text-shadow: 2px 1px 2px navy;
}
</style>
</head>
<body>
<?php
$tabel=[
[
"NIS"=>"1819117570",
"Nama"=> "Agus",
"Kelas"=> "XI RPL 1",
"Jurusan"=>"Komputer"
],
[
"NIS"=>"1819117571",
"Nama"=> "Harry",
"Kelas"=> "XI TB 1",
"Jurusan"=>"Tataboga"
],
[
"NIS"=>"1819117572",
"Nama"=> "Mallik",
"Kelas"=> "XI TITL 1",
"Jurusan"=>"Listrik"
],
[
"NIS"=>"1819117573",
"Nama"=> "Nur",
"Kelas"=> "XI OT 1",
"Jurusan"=>"Otomotif"
]
];
?>
<table id="tab" border="1" cellspadding="10px" cellspacing="2px">
<tr id="judul">
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<?php
foreach($tabel as $tabel){ ?>
<tr>
<td><?php echo $tabel ["NIS"];?></td>
<td><?php echo $tabel ["Nama"];?></td>
<td><?php echo $tabel ["Kelas"];?></td>
<td><?php echo $tabel ["Jurusan"];?></td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Hasil:
Selanjutnya di bawah ini adalah penggunaan CSS media query dalam blog. Css media query berfungsi agar tampilan web tidak amburadul jika berada dalam perangkat lain yang ukurannya berbeda-beda.
Hasilnya bisa anda lihat.
See the Pen qBBEQjB by Ayulia (@arreh_au) on CodePen.
br />Terima kasih sudah membaca!
Komentar
Posting Komentar