Membuat Website Sederhana dengan PHP bag.1


berikut akan saya share cara membuat website sederhana menggunakan html, css, dan PHP. langsung aja berikut scriptnya.

1. buat folder di htdocs dengan nama webposting (opsi terserah).
2. semua file berikut tarus di dalam folder webposting
a. file index.php
<html>
<head>
<title>Website Sederhana</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”wrap”>
<div class=”header”>
<h2>WEB SEDERHANA BY XIDOC</h2>
</div>
<div class=”menu”>
<a href=”index.php”>Home</a> | <a href=”?p=about”>About</a> | <a href=”?p=contact”>Contact</a>
</div>
<div class=”content”>
<?php include”main.php”; ?>
</div>
<div class=”footer”>
Website &copy; 2015 By <a href=”https://informatika11d.wordpress.com&#8221; target=”blank”>XIDOC</a>, Design <a href=”http://handexcel.blogspot.com&#8221; target=”blank”>Hand Excel</a>
</div>
</div>
</body>
</html>

b. file style.css

body{
background:#e0e0e0;
padding: 0;
margin: 0;
}

.wrap{
width: 980px;
margin: auto;
}

.header{
height:100px;
background:whitesmoke;
padding: 10px;
text-align: center;
color: #444;
}

.menu{
height:20px;
padding: 5px;
background:#444;
}

.menu a{
color:#fff;
text-decoration: none;
}

.menu a:hover{
color:#fff;
text-decoration: underline;
}

.content{
min-height:400px;
background:whitesmoke;
padding: 5px;
text-align: justify;
}

.footer{
height: 30px;
background: #444;
color:#fff;
text-align: center;
padding: 10px 5px 5px 5px;
}

c. file main.php

<?php
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
if($_GET[‘p’]==”about”) {
include”about.php”;
}
elseif($_GET[‘p’]==”contact”) {
include”contact.php”;
}
else {
include”content.php”;
}
?>

d. file content.php

<h2>Selamat Datang di Website Sederhana By XIDOC</h2>

e. file about.php

<h2>About Me</h2>
hanya sekedar membuat hal yang bisa bermanfaat buat orang lain

f. file contact.php

<h2>Contact Me</h2>
hubungi kami di <a href=”https://informatika11d.wordpress.com&#8221; target=”blank”>website</a>

Running ketik localhost/webposting

selanjutnya anda bisa kembangkan sendiri biar lebih baik interfacenya.
mungkin cukup sekian untuk bagian 1… nanti akan dilajutkan untuk bagian kedua

One Comment Add yours

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s