How to Create Dynamic Page in Php

If you’re looking to take your website to the next level, there are several types of dynamic websites you might consider. The most common type of dynamic page is a database-driven, interactive web page that uses form fields and web applications. Dynamic pages give your website visitors a sense of interactivity and keep them coming back for more. Learn how to create dynamic pages using PHP, a programming language commonly used for dynamic websites.

You can easily create a dynamic page with the help of php and mysql. This method is very similar to tutorial for creating database in Mysql? This article explains how to create a dynamic web page.

How to create dynamic HTML pages ?

  • Last Updated : 18 May, 2021

In this article, we will know How to create a dynamic HTML page using HTML, CSS, and JavaScript. Let us first know what actually is a dynamic HTML page.

Dynamic HTML page, as the name suggests refers to an HTML page that is dynamic in such a way that it is customizable and changeable according to user input. For example:-

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • Using CSS we can change the background color of the web page each time the user clicks a button on the webpage.
  • Using JavaScript we can ask the user to enter his/her name and then display it dynamically on the webpage.

If you want to get to know more about Dynamic HTML pages, you can have a look at this article  DHTML JavaScript
.

Let us take some examples to know how to create a dynamic HTML page using HTML and CSS.

File structure

MainFolder
-file:   index.php
-file:   index.html (base-template file)
-folder: incl/
-file:   incl/header.php
-file:   incl/footer.php
-file:   incl/config.php
-file:   incl/functions.php
-folder: css/
-file:   css/mainstyles.css
-folder: img/

Create the base-template file (index.html)

This is where we build our website as a normal .html file with headers, body, footer, and the whole layout in one file.
This will in turn be our base template to later disect into 3 pieces (header.php for header code, index.php for body and site code, footer.php for endpage-code)

Our base-template file will be very basic and simple and can be seen below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>This will be our first Dynamic website using PHP dynamic templating techniques :)</title>
<!-- Below is our main stylesheet for the page -->
<link href="css/mainstyles.css" rel="stylesheet" type="text/css" media="all" />
<!-- Below adds a 'shortcut-icon' a.k.a. 'bookmark/favorite icon'-->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- Make browser understand this is responsive site and not in need of 'pinch-zoom-ins' - Commented for now- remove if u want to use this-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<!-- Below allows for addition of this particular page's description for SEO -->
<meta name="description" content="" />
<!-- Below allows for ability to define SEO keywords for this particular page-->
<meta name="keywords" content="" />
<!-- Below Meta-tags tells SE-Indexation spiders to index page and follow pagelinks of site -->
<meta name="robots" content="index, follow" />
</head>
<body>
<div id="mainContainer"> <!-- Wrapper for page -->
 <header>
 <img src="img/logo.jpg" width="200" height="60" alt="" />
 <h1>Our homepage</h1>
 <p>- Slogan for this website</p>
 </header>
 <nav>
 <ul>
 <li><a href="#" target="_top">Home</a></li>
 <li><a href="#" target="_top">Portfolio</a></li>
 <li><a href="#" target="_top">About us</a></li>
 <li><a href="#" target="_top">Contact</a></li>
 </ul>
 </nav>
 <article>
 <h1>Content area for site is here...</h1>
 <p>And this is where all the content for the individual pages will end up.</p>
 </article>
 <footer>
 <p>&copy; Copyright <?php echo date('Y'); ?>. All rights reserved.</p>
 <hr />
 <a href="#" target="_top">Sitemap</a>
 <a href="#" target="_top">FAQ</a>
 <p>Phone: 070X-XX-XX-XX &bull; Email: test@testsite.org &bull; Address: Fictionstreet 32B, CA, USA</p>
 </footer>
</div> <!-- End of Wrapper for the page -->
</body>
</html>

Breaking this down for ya in detail how this is going to work.

Okay, so the idea is to divide this website we just created into different parts (header, content and footer)- and we do this by analyzing which parts will be recurring throughout every single subpage of the website.
For example we can be pretty sure that all the code belonging to the “header” section including the main menu will be available on every single subpage- as will the footer code. This means that we can take all this code and place it in separate files – in our case we call these files header.php & footer.php and have them placed in a folder named: incl, which stands for “includes”.

Why do we do this then? Well the idea is to later include these separated external files which together contains all the code for the entire page layout.
In this way we “re-create” the website section by section by including these parts into the “main-subpage-file” – such as index.php for the mainpage, and contact.php for the contact page for example, etc.

Making Pages Dynamic

As we are done with our main page and we have created other pages, now its turn to make those pages dynamic. We will just have to change the url to get the requested page and after that use GET variable to catch the value and assign it to another variable. Then we can just print that variable and we will get all the content from other pages on our main page.

Add this php code on top of your main page:

<?php
 if(isset($_GET['page'])){
 $page = $_GET['page'];
 }
 else
 $page = NULL;
 ?>

So basically what we have done here is, we have checked if the value in GET is set or not and if it is set we have assigned the value in GET to page variable and if it is not set we have set page variable equal to NULL.
Secondly we need to add some code to our main page where we want to show the content of other pages. As we need to show the content of other pages after our navigation so put these line after closing ul tag.

<?php
 if(empty($page)){
 echo "This is our main page.";
 }
 else
 include($page);
 ?>

Here we are checking if the page variable is empty then show the content of main page and if the page variable is not empty then we will include page variable. Basically the page variable contains our page which we want to show on our main page, don’t worry it will all make sense in a minute.

Changing Links:

After our main page is all set the last thing we need to do is to change our link in the main page. So just make these changes in the links of main page.

<ul>
 <li><a href="index.php?page=products.php">Products</a></li>
 <li><a href="index.php?page=blog.php">Blog</a></li>
 <li><a href="index.php?page=about.php">About</a></li>
 </ul>

As you can see all these pages are referring to the index.php but here our concern is the part after the index.php that is the part after ?. After ? we are using a variable or you can say reference name ‘page’, you can use any name here but you will have to change the GET variable too. We are taking page equal to our required page.

After it’s all set you can try it and hopefully it will work.

PHP Dynamic Page

PHP Dynamic Page

Conclusion

You can do whatever you want with this page! If you follow these instructions, and insert your text between the tags that draw the lines, your text will appear in the lines drawn by those tags.

0 Comments

No Comment.