SchoolBlog: Pertemuan Keduapuluhlima

M. Syahrul R.
XI-RPL3

Assalamualaikum Wr, Wb.
Kembali lagi dengan saya di SchoolBlog. Untuk postingan di pertemuan kali saya akan membahas tentang Array Asosiatif dan Media Query.

Array Asosiatif
Array yang setiap elmentnya tidak menggunakan index atau nomor element, akan tetapi menggunakan string dan key(kunci). Si kunci inilah yang akan membuat setiap element data berpasangan. Namun jika kita menentukan kunci dari array tsb, maka kuncinya akan otomatis menjadi angka. Untuk lebih jelas kalian bisa melihat kodingan dibawah ini

1. Latihan Array Asosiatif

<!DOCTYPE html>
<html>
<head>
	<title>M Syahrul R XI-RPL3 Sus1</title>
	<style type="text/css">
		h1{
			font-family: News706 BT;
		}
		th{
			width: 20%;
			border-radius: 5px;
			background-color: Salmon;
		}
	</style>
</head>
<body>
	<center>
		<h1>
DATA SISWA MIF</h1>
<table border="1" cellspacing="0" cellpadding="3">
<tr>
				<th>NIS</th>
				<th>Nama</th>
				<th>Kelas</th>
				<th>Jurusan</th>
			</tr>
<?php
			$siswa = array(
				'1314115690' => array("nama"=>"Bruce", "kelas"=>"MIF 1", "jurusan"=>"MIF"),
				'1314115692' => array("nama"=>"Strange", "kelas"=>"MIF 2", "jurusan"=>"MIF"),
				'1314115693' => array("nama"=>"Matt", "kelas"=>"MIF 3", "jurusan"=>"MIF"),
				'1314115699' => array("nama"=>"Peter", "kelas"=>"MIF 1", "jurusan"=>"MIF"),
			);

			foreach ($siswa as $nis => $a) {
				echo "
<tr>";
				echo "<td>".$nis."</td>";
				echo "<td>".$a['nama']."</td>";
				echo "<td>".$a['kelas']."</td>";
				echo "<td>".$a['jurusan']."</td>";
				echo "</tr>
";
			}
		 ?>
		 </table>
</center>
</body>
</html>

Ini hasilnya:

CSS Media Query

Untuk membuat tampilan web menyesuaikan sistemnya, sehingga dengan otomatis menyesuaikan dengan tampilan web di dekstop, tablet, dan handphone. Agar lebih jelasnya bisa lihat contoh kodingan di bawah ini!

Kodingannya:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" >
	<title>M Syahrul R XI-RPL3 CSSmedQuery</title>
	<style type="text/css">
		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){
			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>
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="#">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>

Ini hasilnya

tampilan dekstop:

tampilan handphone:

Alhamdulilah hirobil'alamin, telah sampai di akhir postingan. Semoga apa yang saya bahas di postingan kali ini bermanfaat bagi kalian. Mohon maaf bila ada kesalahan kata atau typo. Bila ada yang ingin di tambahkan bisa langsung komen aja okei!

Assalamualaikum Wr. Wb.

SchoolBlog

inlinecss

Sabtu, 12 Oktober 2019

Pertemuan Keduapuluhlima

Tidak ada komentar:

Posting Komentar