Guide | Creating a Simple Dynamic Web Sites with PHP and MySQL.
Creating Dynamic Website With PHP and MySQL. In this guide, you can learn how to create a simple dynamic website using PHP and MYSQL. The web created here is very simple because of learning purpose. By creating a dynamic website users and servers can interact in a complex way. By using the browser, the user can change a certain page. The requests from users will be processed by the server so as to display a different information in accordance with the flow of the program. Generally, dynamic web pages have different databases. In the dynamic web, there are a varies data and information depending on the input of each client. As well as documents that can be read by the client will be different from the documents stored on the server.
Prerequisite.
- Download and install XAMPP on your PC. why we use XAMPP? Because XAMPP creates a reliable source to set up the right environment for PHP programming in a fast way.
- Download and install Notepad ++, we will use Notepad++ to create and write PHP code. Here
Guide to Creating Dynamic Web Site.
- Once XAMPP web server is already installed, now launch the XAMPP control panel.
- Then, Start the MySql Module from the current window.
XAMPP control panel - Type localhost at the browser address bar to check that XAMPP working on your machine.
- If Xampp is already running, continue to create a PHP file.
- Create a new project on localhost, create a folder and rename it to dynamic_php at the following folder.
- C:/xampp/htdocs/dynamic_php
- Now, create or type the PHP code below in Notepad ++. Save it with the name index.php
- To make your dynamic web page look more interesting, please create the following css file on your Notepad ++ and then save it with name style.css
- At this step, you have successfully created a simple dynamic website template.
- Then, go to C:/xampp/htdocs/dynamic_php and create a folder, rename this folder with pages.
creating a dynamic website - Then, we will create some PHP pages that are placed in the pages folder.
- Here is the page that we will create.
- home
- about
- data
- Now, create or type the following PHP code on Notepad ++ to create home.php
- Then, create about.php
- Now, create or write the following PHP code to create data.php
- Now test your page, it's work or not. Type the following URL at the browser address bar.
- http://localhost/dynamic_php/
- If successful, you will see the web page as shown in the picture below.
creating a dynamic website
<!DOCTYPE html>
<html>
<head>
<title>creating dynamic website | Guidebelajar.blogspot.com</title>
<!-- menghubungkan dengan file css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- menghubungkan dengan file jquery -->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<!--
Author : asyraf_singh
Site : guidebelajar.blogspsot.com
-->
<div class="content">
<header>
<h1 class="judul">Asyraf_singh</h1>
<h3 class="deskripsi">Creating A Dynamic Website with PHP & MySql</h3>
</header>
<div class="menu">
<ul>
<li><a href="index.php?page=home">HOME</a></li>
<li><a href="index.php?page=tentang">About</a></li>
<li><a href="index.php?page=data">Data</a></li>
</ul>
</div>
<div class="badan">
<?php
if(isset($_GET['page'])){
$page = $_GET['page'];
switch ($page) {
case 'home':
include "pages/home.php";
break;
case 'tentang':
include "pages/about.php";
break;
case 'data':
include "pages/data.php";
break;
default:
echo "<center><h3>Sory .. pages not found !</h3></center>";
break;
}
}else{
include "pages/home.php";
}
?>
</div>
</div>
</body>
</html>body{
background-color:#d3dce3;
font-size:16px
color:#444;
font-family: aqua;
}
.content{
width: 65%;
margin: 10px auto;
}
/*header*/
header{
background-color: #83b2d6;
padding: 20px 10px;
border-radius: 5px;
border: 1px solid #f0f0f0;
margin-bottom: 10px;
}
header h1.judul,
header h3.deskripsi{
text-align: center;
}
/*menu navigasi*/
.menu{
background-color: #2685cc;
border: 1px solid #f0f0f0;
border-radius: 8px;
margin-bottom: 10px;
}
div.menu ul {
list-style:none;
overflow: hidden;
}
div.menu ul li {
float:left;
text-transform:uppercase;
}
div.menu ul li a {
display:block;
padding:0 20px;
text-decoration:none;
color:#01f2f9;
font-family: sans-serif;
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}
div.menu ul li a:hover,
div.menu ul li a.hoverover {
cursor: pointer;
color:#fff;
}
div.badan{
background-color: #d9ddee;
border-radius: 5px;
border: 1px solid #f0f0f0;
margin-bottom: 10px;
}
div.halaman{
text-align: center;
padding: 30px 20px;
}
<div class="pages">
<h2>Home</h2>
<p>Wellcome to my website</p>
</div><div class="pages">
<h2>About Us</h2>
<p>This is About Us page</p>
<p>this is my personal dynamic web pages</p>
</div><div class="pages">
<h2>Data Page</h2>
<p>Hello.. this is the data page</p>
</div>
Finish.
Download Source Code.
Download Source Code.
