PHP: Membuat
Homepage Yang Mencakup Menu Dropdown dan Frame
Pada tutorial
ini, saya sedang belajar “Bagaimana cara membuat homepage yang mencakup menu
dropdown dan frame?” Homepage adalah halaman awal dari sebuah website. Frame adalah
suatu kolom yang mencakup kolom konten, menu, header, dan footer.
1. Buka Macromedia
Dreamweaver
2. Ketik script
ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Making HomePage</title>
</head>
<body>
<div>
<table align="center" width="700"
border="5" bordercolor="#999999">
<tr>
<td
colspan="2"><?php include "menu.php";
?></td>
</tr>
<tr>
<td width=600
rowspan="2"><?php include "content.php";
?></td>
<td width=200
height="20">
<a
href="?page=why_frame">Why Must Be Blogging?</a>
</tr>
<tr>
<td
height="600">Other menus</td>
</tr>
<tr>
<td
colspan="2">©2013, Komarudin Tasdik, <a
href="http://100keyboard.blogspot.com">http://100keyboard.blogspot.com</a></td>
</tr>
</table>
</div>
</body>
</html>
3. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: index.php
4. File – New (untuk
membuat file baru lagi)
5. Ketik script
ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Menu</title>
<link rel="stylesheet" type="text/css"
href="jquerycssmenu.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="jquerycssmenu.js"></script>
<style type="text/css">
<!--
body {
margin-left: 200px;
margin-right: 210px;
margin-top: 1px;
}
-->
</style></head>
<body>
<div id="myjquerymenu" class="jquerycssmenu">
<!--ke atas tambahan dari folder tesis-->
<ul>
<li><a
href="?page=dashboard">Beranda</a>
<?php
//lanjutkan session yang sudah dibuat sebelumnya
session_start();
//hapus session yang sudah dibuat
session_destroy();
?>
</li>
<li><a
href="#">Profile</a>
<ul>
<li><a
href="?page=profile_frame">About My Blog</a></li>
<li><a
href="#">etc.</a></li>
</ul>
</li>
<li><a
href="#">Next Menu</a>
<ul>
<li><a
href="#">Sub Menu</a></li>
<li><a
href="#">etc.</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
6. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: menu.php
7. File – New (untuk
file baru lagi)
8. Ketik script
ini:
<?php
if(isset($_GET['page'])){
$page=$_GET['page'];
$file="$page.php";
if (!file_exists($file)){
include
("dashboard.php");
}else{
include
("$page.php");
}
}else{
include
("dashboard.php");
}
?>
9. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: content.php
10. File – New (untuk
membuat file baru lagi)
11. Ketik script
ini:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
This is first page on my content.
</body>
</html>
12. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: dashboard.php
13. File – New (untuk
membuat file baru lagi)
14. Ketik script
ini:
<html>
<head>
<title>Profile Page</title>
</head>
<body>
Welcome to http://100keyboard.blogspot.com.<br />
This blog is my note book about Information System and PHP programming.
</body>
</html>
15. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: profile.php
16. File – New (untuk
membuat file baru lagi)
17. Ketik script
ini:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<iframe Â
src="profile.php" name="isi" width="100%"
height="800"
border="0" scrolling="auto">
</iframe>
</body>
</html>
18. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: profile_frame.php
19. File – New (untuk
membuat file baru lagi)
20. Ketik script
ini:
<html
<head>
<title>Why Must do Blogging</title>
</head>
<body>
Why must I do blogging?<br />
Blogging is a learning media for me. By blogging, I can learn how to
write anything, and pubhishing it online.<br />
Blogging also gives me some benefits, such as greetings, suggestion,
knowledge, and others from visitors.
</body>
</html>
21. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: why.php
22. File – New (untuk
membuat file baru lagi)
23. Ketik script
ini:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<iframe Â
src="why.php" name="isi" width="100%"
height="800"
border="0" scrolling="auto">
</iframe>
</body>
</html>
24. Simpan di direktori
C:\wamp\www\100ori\frame dengan
file name: why_frame.php
25. Buka Wampserver
26. Buka browser
Firefox
27. Pada address
bar, ketik http://localhost/100ori/frame/
28. Enter
29. Hasilnya
seperti berikut:
File
pendukung di bawah ini dapat diunduh secara gratis dari Internet melalui search
engine Google:
jquery-1.3.2.min
jquerycssmenu
jquerycssmenu
Tiga file di
atas adalah untuk membuat menu dropdown. Jika anda tidak menemukannya, silahkan
berkomentar di tutorial ini, insyaAllah saya akan menyediakan file-file-nya
agar bisa diunduh di blog ini!
Referensi
Admin Skin by www.netdreams.co.uk S.I.N.O © Copyright Ri32
Network Project.
***
Diterjemahkan
dari tutorialku:
Komarudin
Tasdik. 2013. PHP: Making Homepage Including Dropdown Menu and Frame.
100keyboard.blogspot.com.
|
"Boleh Konsultasi Masuk Jurusan Sistem Informasi via IG atau Tiktok."
|
|
Tips Skripsi Program Studi Sistem Informasi |
|
|
No comments:
Post a Comment