How to Creating a Simple Dynamic Web Sites with PHP and MySQL.

How to Creating a Simple Dynamic Web Sites with PHP and MySQL.

Creating a 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 the 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 different information in accordance with the flow of the program. Generally, dynamic web pages have different databases. In the dynamic web, there are 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.

  1. 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.
  2. Download and install Notepad ++, we will use Notepad++ to create and write PHP code. Here

Guide to Creating Dynamic Web Site.

  1. Once XAMPP web server is already installed, now launch the XAMPP control panel.
  2. Then, Start the MySql Module from the current window.
    xampp control panel
    XAMPP control panel
  3. Type localhost at the browser address bar to check that XAMPP working on your machine.
  4. If Xampp is already running, continue to create a PHP file.
  5. Create a new project on localhost, create a folder and rename it to dynamic_php at the following folder.
    • C:/xampp/htdocs/dynamic_php
  6. Now, create or type the PHP code below in Notepad ++. Save it with the name index.php
  7. <!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>
  8. 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
  9. 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; 
    }
  10. At this step, you have successfully created a simple dynamic website template.
  11. Then, go to C:/xampp/htdocs/dynamic_php and create a folder, rename this folder with pages.
    creating dynamic website
    creating a dynamic website
  12. Then, we will create some PHP pages that are placed in the pages folder.
  13. Here is the page that we will create.
    • home
    • about
    • data
  14. Now, create or type the following PHP code on Notepad ++ to create home.php
  15. <div class="pages">
     <h2>Home</h2>
     <p>Wellcome to my website</p>
    </div>
  16. Then, create about.php
  17. <div class="pages">
     <h2>About Us</h2>
     <p>This is About Us page</p>
     <p>this is my personal dynamic web pages</p>
    </div>
  18. Now, create or write the following PHP code to create data.php
  19. <div class="pages">
     <h2>Data Page</h2>
     <p>Hello.. this is the data page</p>
    </div>
  20. Now test your page, it's work or not. Type the following URL at the browser address bar.
    • http://localhost/dynamic_php/
  21. If successful, you will see the web page as shown in the picture below.
    creating dynamic website
    creating a dynamic website

0 Response to "How to Creating a Simple Dynamic Web Sites with PHP and MySQL."

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel