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

<!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>

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

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; 
}

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

<div class="pages">
 <h2>Home</h2>
 <p>Wellcome to my website</p>
</div>

Then, create about.php

<div class="pages">
 <h2>About Us</h2>
 <p>This is About Us page</p>
 <p>this is my personal dynamic web pages</p>
</div>

Now, create or write the following PHP code to create data.php

<div class="pages">
 <h2>Data Page</h2>
 <p>Hello.. this is the data page</p>
</div>

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

Finish.
Download Source Code.

smartdroid

Pages

Saturday, 30 December 2017