Assalamualaikum Semua
pada kodingan di atas terdapat '1314115698' nah nilai tersebut adalah nama kunci untuk mengakses isi dalam array yaitu untuk memanggil 'Loki' sama halnya dengan memanggil Thor dan Stephen dan hasilnya akan seperti ini
Bisa disimpulkan bahwa untuk mengganti atau menamai kunci untuk mengakses isi array struktur dasarnya adalah
'nama_kunci' => 'data'
(menamai)
echo $nama_array['nama_kunci'].;
(memanggil/mengakses)
Contoh Lainnya
nah di sini adalah untuk memanggil semua array yang telah diubah kucinya. bisa dilihat di kodingan atas caranya. dan hasilnya akan seperti ini:
Contoh lainnya lagi
Hasilnya:
CSS Media Query
Apa itu CSS Media Query? CSS Media Query digunakan untuk menangani perbedaan tampilan pada beberapa resolusi layar
Resolusi layar saat ini terbagi menjadi 3 kelompok:
contoh website yang tidak menggunakan CSS Media Query
Hasilnya Ketika Dilihat Di Laptop
Dilihar Pada Resolusi iphone 5/SE (pada Chrome)
Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang PHP langsung saja tanpa banyak basa basi lagi yu urang belajar PHP
Apa itu Array Assosiatif? Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Maksudnya untuk mengakses array tersebut harus menggunakan kunci yang sudah diberikan. Array Biasanya akan menggunakan kunci default yaitu angka dari 0 sampai seterusnnya jika tidak diberi nama kunci lain untuk mengakses nya.
Contoh array Assosiatif
Apa itu Array Assosiatif? Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Maksudnya untuk mengakses array tersebut harus menggunakan kunci yang sudah diberikan. Array Biasanya akan menggunakan kunci default yaitu angka dari 0 sampai seterusnnya jika tidak diberi nama kunci lain untuk mengakses nya.
Contoh array Assosiatif
<?php
$siswa = array('1314115698' => 'Loki',
'1314115699' => 'Thor',
'1314115700' => 'Stephen');
echo $siswa['1314115698'].'<br>';
echo $siswa['1314115699'].'<br>';
echo $siswa['1314115700'];
?>
$siswa = array('1314115698' => 'Loki',
'1314115699' => 'Thor',
'1314115700' => 'Stephen');
echo $siswa['1314115698'].'<br>';
echo $siswa['1314115699'].'<br>';
echo $siswa['1314115700'];
?>
pada kodingan di atas terdapat '1314115698' nah nilai tersebut adalah nama kunci untuk mengakses isi dalam array yaitu untuk memanggil 'Loki' sama halnya dengan memanggil Thor dan Stephen dan hasilnya akan seperti ini
Bisa disimpulkan bahwa untuk mengganti atau menamai kunci untuk mengakses isi array struktur dasarnya adalah
'nama_kunci' => 'data'
(menamai)
echo $nama_array['nama_kunci'].;
(memanggil/mengakses)
Contoh Lainnya
<?php
$siswa = array('1314115698' => 'Wanda',
'1314115699' => 'Nakia',
'1314115700' => 'Carol');
foreach ($siswa as $nis => $nm_siswa ) {
echo $nm_siswa.' memiliki NIS '. $nis .'<br>';
}
?>
$siswa = array('1314115698' => 'Wanda',
'1314115699' => 'Nakia',
'1314115700' => 'Carol');
foreach ($siswa as $nis => $nm_siswa ) {
echo $nm_siswa.' memiliki NIS '. $nis .'<br>';
}
?>
nah di sini adalah untuk memanggil semua array yang telah diubah kucinya. bisa dilihat di kodingan atas caranya. dan hasilnya akan seperti ini:
Contoh lainnya lagi
<?php
$i = 1;
$siswa = array([
'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' => '1314115699',
'Nama' => 'Peter Parker',
'Kelas' => 'MIF 1',
'Jurusan' => 'MIF'
]);
echo "<table>";
echo "<tr style='background-color: blue'>";
echo "<td>NIS</td>";
echo "<td>Nama</td>";
echo "<td>Kelas</td>";
echo "<td>Jurusan</td>";
echo "</tr>";
foreach($siswa as $data){
if ($i %2 != 0) {
$warna = 'aqua';
}
else
{
$warna = 'gray';
}
echo "<tr style='background-color: $warna'>";
echo "<td>".$data["NIS"]."</td>";
echo "<td>".$data["Nama"]."</td>";
echo "<td>".$data["Kelas"]."</td>";
echo "<td>".$data["Jurusan"]."</td>";
echo "</tr>";
$i++;
}
?>
$i = 1;
$siswa = array([
'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' => '1314115699',
'Nama' => 'Peter Parker',
'Kelas' => 'MIF 1',
'Jurusan' => 'MIF'
]);
echo "<table>";
echo "<tr style='background-color: blue'>";
echo "<td>NIS</td>";
echo "<td>Nama</td>";
echo "<td>Kelas</td>";
echo "<td>Jurusan</td>";
echo "</tr>";
foreach($siswa as $data){
if ($i %2 != 0) {
$warna = 'aqua';
}
else
{
$warna = 'gray';
}
echo "<tr style='background-color: $warna'>";
echo "<td>".$data["NIS"]."</td>";
echo "<td>".$data["Nama"]."</td>";
echo "<td>".$data["Kelas"]."</td>";
echo "<td>".$data["Jurusan"]."</td>";
echo "</tr>";
$i++;
}
?>
Hasilnya:
CSS Media Query
Apa itu CSS Media Query? CSS Media Query digunakan untuk menangani perbedaan tampilan pada beberapa resolusi layar
Resolusi layar saat ini terbagi menjadi 3 kelompok:
contoh website yang tidak menggunakan CSS Media Query
Apa Masalahnya?
Tampilan tidak User Friendly, User harus melakukan scroll horizontal untuk melihat menu dan text nya
Tampilan terkesan berantakan
Untuk tingkat lanjut, User Experience ketika mengakses halaman web kurang tepat
Ketika sudah menggunakan CSS Media Query Hasilnya
Manfaat CSS Media Query?
Web Browser modern sudah dapat mengenali CSS Media Query (Chrome, Chrome Mobile Browser, Opera, Opera Mini, UC Browser, dsb) sehingga Programmer tidak perlu menulis kode HTML untuk menyesuaikan pada semua resolusi
Bentuk Umum CSS Media Query
Bentuk Umum:
@media ([keyword]: [value] [and/or] [keyword2]: [value2]) {
/* Tulis Style Disini */
}
Example:
@media(min-width: 320px and max-width: 720px)
Media Query untuk resolusi antara 320 s.d 720px
Contohnya
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>M. Aslam </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: 100px;
}
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="#">Teastimonial</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>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>M. Aslam </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: 100px;
}
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="#">Teastimonial</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>
Hasilnya Ketika Dilihat Di Laptop
Dilihar Pada Resolusi iphone 5/SE (pada Chrome)
Comments
Post a Comment