Pertemuan25
Assalamualaikum Teman-teman
ketemu lagi nih sama saya di blog yang sama :v
Nah,kali ini saya bakal ngebahas tentang Array Asosiatif & CSS Media Query.
Apa sih Array Asosiatif itu? Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka.
Untuk lebih jelasnya mari kita lihat contoh penggunaan Array Asosiatif cekidot :v :
<!DOCTYPE html>
<html>
<head>
<title>Array Asosiatif</title>
<link rel="stylesheet" type="text/css" href="array.css">
</head>
<body>
<?php
$siswa = array('1819117605' => 'Adji', '1819117606' => 'Aleyda', '1819117607' => 'Alvan');
echo $siswa['1819117605']. '<br>';
echo $siswa['1819117606']. '<br>';
echo $siswa['1819117607'];
?>
</body>
</html>
Nah,inilah hasil codingan di atas :
Selanjutnya Array Assosiatif juga bisa menggunakan looping, akan tetapi looping pada Array Assosiatif berbeda yaitu menggunakan foreach.
Mari kita lihat contohnya :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="array.css">
</head>
<body>
<?php
$siswa = array('1819117632' => 'Puja', '1819117633' => 'Alif', '1819117634' => 'Rizky');
foreach ($siswa as $nis => $nm_siswa) {
echo $nm_siswa .' memiliki NIS '. $nis .'<br>';
}
?>
</body>
</html>
Nah,inilah hasil codingan di atas :
Selanjutnya ke Studi kasus, Mari langsung ke codingan nya :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<table align="center" border="1" cellpadding="10" cellspacing="5">
<h1 align="center">
Data Siswa RPL</h1>
<tr align="center">
<td>NIS</td>
<td>Nama</td>
<td>Kelas</td>
<td>Jurusan</td>
</tr>
<?php
$siswa = array(array('nis' => '1819117608', 'nama' => 'Anandita Fitriani Pratama', 'kelas' => 'RPL 2', 'jurusan' => 'RPL'),
array('nis' => '1819117632', 'nama' => 'Puja Rochmansyah', 'kelas' => 'RPL 2', 'jurusan' => 'RPL'),
array('nis' => '1819117633', 'nama' => 'Alif Rakkan Maulana', 'kelas' => 'RPL 2', 'jurusan' => 'RPL'),
array('nis' => '1819117646', 'nama' => 'Ananda Cipta Pamungkas', 'kelas' => 'RPL 3', 'jurusan' => 'RPL'));
foreach ($siswa as $i) {
echo "
<tr>";
echo "<td>".$i['nis']."</td>";
echo "<td>".$i['nama']."</td>";
echo "<td>".$i['kelas']."</td>";
echo "<td>".$i['jurusan']."</td>";
echo "</tr>
";
# code...
}
?>
</table>
</form>
</body>
</html>
Nah,inilah hasil codingan di atas :
Nah,seperti ini gambarn apabila tidak terjadi error teman - teman
Selain membahas Array Assosiatif aku juga bakal saya akan membahas tentang CSS Media Query.
CSS Media Query ini digunakan untuk membuat layout pada web responsive.
Nah,Bagaimana cara nya ? kita lihat :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Media Query</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){
/*Tulis style css untuk ukuran layar maksimal 320px disini */
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">
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>
Nah,inilah hasil dari codingan di atas :
Ok,Mungkin cukup segitu aja postingan kali ini semoga bermanfaat.
Sampai jumpa dipostingan selanjutnya ok mohon maaf bila ada kekurangan nya :v.
Wassalamualaikum wr.wb
ketemu lagi nih sama saya di blog yang sama :v
Nah,kali ini saya bakal ngebahas tentang Array Asosiatif & CSS Media Query.
Apa sih Array Asosiatif itu? Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka.
Untuk lebih jelasnya mari kita lihat contoh penggunaan Array Asosiatif cekidot :v :
<!DOCTYPE html>
<html>
<head>
<title>Array Asosiatif</title>
<link rel="stylesheet" type="text/css" href="array.css">
</head>
<body>
<?php
$siswa = array('1819117605' => 'Adji', '1819117606' => 'Aleyda', '1819117607' => 'Alvan');
echo $siswa['1819117605']. '<br>';
echo $siswa['1819117606']. '<br>';
echo $siswa['1819117607'];
?>
</body>
</html>
Nah,inilah hasil codingan di atas :
Selanjutnya Array Assosiatif juga bisa menggunakan looping, akan tetapi looping pada Array Assosiatif berbeda yaitu menggunakan foreach.
Mari kita lihat contohnya :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="array.css">
</head>
<body>
<?php
$siswa = array('1819117632' => 'Puja', '1819117633' => 'Alif', '1819117634' => 'Rizky');
foreach ($siswa as $nis => $nm_siswa) {
echo $nm_siswa .' memiliki NIS '. $nis .'<br>';
}
?>
</body>
</html>
Nah,inilah hasil codingan di atas :
Selanjutnya ke Studi kasus, Mari langsung ke codingan nya :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<table align="center" border="1" cellpadding="10" cellspacing="5">
<h1 align="center">
Data Siswa RPL</h1>
<tr align="center">
<td>NIS</td>
<td>Nama</td>
<td>Kelas</td>
<td>Jurusan</td>
</tr>
<?php
$siswa = array(array('nis' => '1819117608', 'nama' => 'Anandita Fitriani Pratama', 'kelas' => 'RPL 2', 'jurusan' => 'RPL'),
array('nis' => '1819117632', 'nama' => 'Puja Rochmansyah', 'kelas' => 'RPL 2', 'jurusan' => 'RPL'),
array('nis' => '1819117633', 'nama' => 'Alif Rakkan Maulana', 'kelas' => 'RPL 2', 'jurusan' => 'RPL'),
array('nis' => '1819117646', 'nama' => 'Ananda Cipta Pamungkas', 'kelas' => 'RPL 3', 'jurusan' => 'RPL'));
foreach ($siswa as $i) {
echo "
<tr>";
echo "<td>".$i['nis']."</td>";
echo "<td>".$i['nama']."</td>";
echo "<td>".$i['kelas']."</td>";
echo "<td>".$i['jurusan']."</td>";
echo "</tr>
";
# code...
}
?>
</table>
</form>
</body>
</html>
Nah,inilah hasil codingan di atas :
Nah,seperti ini gambarn apabila tidak terjadi error teman - teman
Selain membahas Array Assosiatif aku juga bakal saya akan membahas tentang CSS Media Query.
CSS Media Query ini digunakan untuk membuat layout pada web responsive.
Nah,Bagaimana cara nya ? kita lihat :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Media Query</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){
/*Tulis style css untuk ukuran layar maksimal 320px disini */
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">
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>
Nah,inilah hasil dari codingan di atas :
Ok,Mungkin cukup segitu aja postingan kali ini semoga bermanfaat.
Sampai jumpa dipostingan selanjutnya ok mohon maaf bila ada kekurangan nya :v.
Wassalamualaikum wr.wb
Komentar
Posting Komentar