Mapel : Pemrograman Web & Perangkat Bergerak
Kelas : XI RPL
Guru Mapel : Hari Zulianto, ST
KD 16 : Operasi File di PHP
KD3.16 : Menerapkan operasi file
KD4.16 : Membuat kode program untuk operasi file
Tema : Membuat Menu Navigasi Pada Website Dengan PHP
Deskripsi :
Pada pemrograman dasar PHP kita mengenal pembuatan file PHP yang sesuai dengan peruntukannya. Aplikasi yang dibuat dengan php dapat menjadi lebih efisien jika kita membuatnya dengan meminimalkan sesuatu yang berulang. Sebuah website minimal terbagi atas tiga komponen utama yaitu header, content dan footer. Dimana biasanya bagian yang tetap adalah header dan footer, sedangkan bagian yang berubah adalah bagian content.
Header dan footer dapat kita buat secara terpisah agar pada saat kita membuat banyak content, file header dan footer tersebut dapat di include kan kedalam file content. Pembuatan navigasi merujuk pada menu yang tersedia pada aplikasi tersebut. Menu yang jelas membantu user untuk dengan mudah menuju dari satu halaman ke halaman lain tanpa harus menebak-nebak halaman yang dibuka.
Bentuk yang sederhana dan efisien seperti dropdown menu menjadi solusi untuk memanfaatkan ruang yang minimal untuk menampung menu dalam jumlah yang banyak. Hal ini juga membantu dalam mengelompokan menu-menu berdasarkan kesamaannya.
Alat & Bahan :
Personal Komputer / Laptop
Modul Pemrograman Web dengan Php & MySQL
Apliaksi XAMPP (Apache & MariaDB / MySQL)
Langkah Kerja :
Pertama kali kita buat terlebih dahulu file index.php dari aplikasi yang ingin dibangun. Dimana pada file ini terdapat header dan footer yang bersifat statis.
Nama file : index.php
<?php include "function.php"; ?> <!DOCTYPE html> <html> <head> <title>Membuat Menu Navigasi Pada Website Dengan PHP</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <h1>Membuat Menu Navigasi Pada Website Dengan PHP</h1> <hr> <div class="menu"> <ul id="navigasi"> <li><a href="index.php">Home</a></li> <li><a href="index.php?m=about">About</a></li> <li><a href="#">News</a> <ul> <li><a href="index.php?m=international">International</a></li> <li><a href="index.php?m=national">National</a></li> </ul> </li> </ul> </div> <div class="content"> <?php //menampilkan content yang diinginkan $file = content($_GET['m']); include "page/$file"; ?> </div> <div class="footer"> Copyright © 2018 - <a href="www.belajarwebpedia.com">www.belajarwebpedia.com</a> </div> </body> </html>
|
Kemudian kita buat function.php untuk melakukan filter konten yang ditampilkan function.php.
Nama file : function.php
<?php function content($m) { $cek = trim($m); if($cek == "") { $file = "beranda.php"; } if($cek == "about") { $file = "about.php"; } if($cek == "international") { $file = "international.php"; } if($cek == "national") { $file = "national.php"; } return $file; } ?>
|
fungsi content() digunakan untuk menampilkan kontent berdasarkan menu yang dipilih oleh pengguna. berikut contoh file about.php
nama file : about.php
<hr> <b>User Profil</b> <hr> <div style="width: 200px; float: left;"> <img src="images/profil.jpg" width="200" height="240"> </div> <div style="float: left;"> <table width="100%" cellpadding="5"> <tr> <th width="120" align="left">Name</th> <td>: John Doe</td> </tr> <tr> <th width="120" align="left">Department</th> <td>: Marketing</td> </tr> <tr> <th width="120" align="left">Email</th> <td>: john.doe@hismail.com</td> </tr> <tr> <th width="120" align="left">Phone</th> <td>: 0123456789</td> </tr> </table> </div> <hr style="clear: both">
|
konten lain dapat dilihat pada file yang dapat di download dibawah nanti. untuk membuat menu dropdown dapat menggunakan css dibawah ini. simpan dengan nama style.css
nama file : style.css
body { font-family: verdana; font-size: 0.85em; } .menu { display: block; background-color:#00A6BB; height:46px; } .content { clear: both; padding:5px 0; min-height: 200px; } .footer { clear: both; margin-top:10px; background-color: #eee; padding:10px 8px; } #navigasi { position:relative; line-height:30px; margin:0; padding:0; list-style-type:none; list-style-position:outside; } #navigasi a { display:block; padding:8px 16px; background-color:#00A6BB; color:#fff; text-decoration:none; } #navigasi a:hover { background-color:#00BCD4; color:#fff; } #navigasi li { position:relative; float:left; } #navigasi ul { position:absolute; display:none; margin:0; padding:0; list-style-type:none; list-style-position:outside; } #navigasi li ul a{ width:12em; height:auto; float:left; } #navigasi li:hover ul{ display:block; } #navigasi li:hover ul ul{ display:none; } .news { background: #ddd; } .judul { padding: 4px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-weight: bold; } .sinopsis { padding: 4px; margin-bottom: 5px; }
|
file dasar yang dibutuhkan secara umum sudah selesai, berikut adalah struktur keseluruhan file dalam aplikasi ini:
Tugas
- Ringkaslah materi praktek diatas kedalam selembar kertas !
- Gambarlah Output / Hasil dari coding diatas !
- Kumpulkan dengan cara foto dan kirim lewat WA atau akun facebook pak guru !
0 comments:
Post a Comment