Home / Tutorial / Website / Cara Membuat Website Lengkap dengan Background Full Screen, Kotak Komentar, dan Halaman Login

Saturday, 19 January 2013

Cara Membuat Website Lengkap dengan Background Full Screen, Kotak Komentar, dan Halaman Login

Date - 


1. Buat folder-folder dibawah ini di document komputer anda :

- includes (nantinya akan terdiri dari file "footer.php, header.php, nav.php, dan sidebar.php")
- variables (nantinya akan terdiri dari file "variables.php")

2. Buat juga 3 File di notepad dan saat disimpan beri nama :

- index.php
- about.php
- contact.php

3. File-file di dalam folder includes diisi dengan bahasa pemrograman masing-masing :

footer.php

<?php include('variables/variables.php'); ?> // php include digunakan untuk memanggil isi file variables.php

<div id="footer"> // diberi id supaya dpt dipanggil oleh file lain nantinya
<p><?php echo $footer ?></p> // echo utk menampilkan isi tulisan $footer
</div> <!-- end #footer --> // mengakhiri id footer

header.php

<?php include('variables/variables.php'); ?>

<div id="header">
<h2><?php echo $heading ?></h2>
</div> <!-- end #header -->

nav.php

<div id="nav">

<a href="index.php">Home</a>
<a href="about.php">About</a>
<a href="contact.php">Contact</a>

</div> <!-- end #nav -->

sidebar.php

<div id="sidebar">

<h3><span style="color: #750404;">Navigation</span></h3>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>

</div> <!-- end #sidebar -->

4. variables.php diisi dengan bahasa php berikut :

<?php

$heading='<a href="index.php">My Biography</a>';
$footer='<span style="color: #ccc;">Copyright &copy; 2012 topwebsitemaker.blogspot.com </span>';

?>

5. index.php diisi dengan bahasa pemrogaman berikut ini, index.php ini nantinya yang akan menjadi  halaman backgroun full screen :

<!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=UTF-8"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>Home</title>
<link href="layoutIndex.css" type="text/css" rel="stylesheet" media="all"/>

<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
</head>

<body>
<!-- enter image -->
<script language="JavaScript">
<!--
// bg1.jpg sampai bg3.jpg adalah sumber gambar
img = new Array();
img[0] = "/bg1.jpg";
img[1] = "/bg2.jpg";
img[2] = "/bg3.jpg";
n = Math.floor(Math.random()*img.length);
document.write("<a href='about.php'><img src='"+img[n]+"' id='bg' border='0'></a>");
//-->
</script>
</div> <!-- /enter image -->

<form method="post" action="login.php">
<label>Pengguna : <input name="user" type="text"></label>
<label>Sandi : <input name="password" type="password" ></label>
<input name="Submit" type="submit" value="Login">
</form>

</body>
</html>

6. about.php diisi dengan bahasa pemrograman berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>About</title>
</head>

<body>
<div id="wrapper">

<?php include('includes/header.php'); ?>
<?php include('includes/nav.php'); ?>

<div id="content">
<h3>About My Page</h3>
<p>
Isikan Atikel Anda Di Sini
</p>
</div> <!-- end #content -->

<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>

</div> <!-- End #wrapper -->
 </body>
</html>

7. Untuk contact.php (tempat untuk kotak komentar) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

<head >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Kevin Site</title>
</head>
<body>
<div id="wrapper">

<?php include('includes/header.php'); ?>
<?php include('includes/nav.php'); ?>

<div id="content">

<?php
mysql_connect("host","root","");
mysql_select_db("root");
$name=$_POST['name'];
$comment=$_POST['comment'];
$submit=$_POST['submit'];

$dbLink = mysql_connect("host", "root", "");
mysql_query("SET character_set_client=utf8", $dbLink);
mysql_query("SET character_set_connection=utf8", $dbLink);

if($submit)
{
if($name&&$comment)
{
$insert=mysql_query("INSERT INTO commenttable (name,comment) VALUES ('$name','$comment') ");
}
else
{
echo "please fill out all fields";
}
}
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comment box</title>
</head>

<body>
<form action="#" method="POST">
<table>
<tr><td>Name: <br><input type="text" size="60" name="name"/></td></tr>
<tr><td colspan="2">Comment: </td></tr>
<tr><td colspan="5"><textarea name="comment" rows="7" cols="60"></textarea></td></tr>
<tr><td colspan="2"><input type="submit" name="submit" value="Comment"></td></tr>
</table>
</form>

<?php
$dbLink = mysql_connect("host", "root", "");
mysql_query("SET character_set_results=utf8", $dbLink);
mb_language('uni');
mb_internal_encoding('UTF-8');

$getquery=mysql_query("SELECT * FROM commenttable ORDER BY id DESC");
while($rows=mysql_fetch_assoc($getquery))
{
$id=$rows['id'];
$name=$rows['name'];
$comment=$rows['comment'];
echo $name . '<br/>' . '<br/>' . $comment . '<br/>' . '<br/>' . '<hr size="1"/>'
;}
?>

</body>
</html>
</div> <!-- end #content -->
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</div> <!-- End #wrapper -->
</body>
</html>


Share this