How to create a simple demo PHP website

How to create a simple demo PHP website

If you already do not know what this PHP is all about, PHP is a language that is used at the backend of a web application to control the flow of the application. Based on the inputs that the user enters in the front-end, the script prepares, understands, manipulates, calculates and returns relevant data. That’s where we have the concept of a static and a dynamic website.

A demo PHP website may help you understand better, the concept of server side scripting. If you are new to web development and want to learn PHP as your first server side scripting language, then creating demo sites will prove very helpful.

Believe me, you actually get to experiment with so much of it, when you are creating a demo PHP website.

Building a demo site is simple. First, you need to chalk out what you want from your demo PHP website. After that, it is just the HTML CSS designing and running them with PHP.

Building our first demo PHP website

Where will you write? An editor? No, just open a notepad file and name it as “.php”

For the first demo, we obviously do the “Hello World” program. For this program, we do not require extensive HTML and CSS. The simple “echo” statement or “print” statement of PHP can do this.

However, since we need the HTML structure for further proceedings, we might create a frame of a website that will be helpful to us further down the line.

At the moment, we just create a container “div” in our PHP file. PHP tags are very friendly and can be implemented within HTML tags.

So, we create a file called “index.php” and store it in a folder. The file will contain the script for our first demo PHP website along with the HTML. The PHP tags will be in between the HTML tags. So, whatever data we need to display into a particular HTML area, we write the respective PHP code inside that HTML tag.

It’s simple.

Have a look at the below code. In our beginner’s demo PHP website, we have created a “container div” in HTML. Inside that, we have a header tag. Inside the tag, we print “Hello World” with the help of PHP.


<html>
<head>
<title>My first PHP application</title>
</head>
<body>
<div id="container">
<h1>
<?php echo "Hello World!"; ?>
</h1>
</div>
</body>
</html>

Doing another demo PHP website – applying conditional statements

Applying conditions, iterations and data from the backend – that’s what all server side scripting languages are about. So, this time, we will provide some data from the front-end to our backend script and get output accordingly.

Doesn’t that sound interesting? Oh yes it does! It’s going to be fun too! Let’s dive into it.

how-to-create-a-simple-demo-php-website-1

In this tutorial, our target is to create an HTML form. From the form, we will pass the user filled data to the server end, and then according to the user’s input, a conditional output shall be displayed.

This is not achievable with only HTML.

So, first we create the form. Creation of a form is very simple. So, we would not focus too much on that here.

Once the form is created, in the “action” attribute of the form tag, we will supply our PHP destination file that will handle the data. In the method attribute of the form, we will have “GET”.

Why we use GET here instead of POST is interesting.

Just for a quick knowledge, GET sends the data through the URL, this is viewable on the address bar unlike POST. In case the data is sensitive such as password, we usually do not use GET method.

In our case, we are not having any sensitive data field. Just name and place of birth.

Have a look at the below code, which contains the code for the form, including all details.

<html>
<head>
<title>My first PHP application</title>
</head>
<body>
<div id="container">
<form action="file.php" method="GET">
<input type="text" name="name" />
<input type="text" name="place" />
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>

Now, let us design the PHP file for our demo PHP website. Our PHP file will have a simple conditional check and display a statement according to it.

Our code will check whether the user has entered both fields. If he has, then we will display “Thanks for filling the form”. Otherwise, we will display, “The form is incomplete”.

Below is the PHP code –

<html>
<head>
<title>Destination page for PHP application</title>
</head>
<body>
<div id="container">
<?php 
if(isset($_GET['submit'])){
// This div element will display according to the validation of the following.
if($_GET['name']!=='' && $_GET['place']!==''){
    echo 'Thanks for filling the form';
}
else{
    echo 'The form is incomplete';
}
}
?>
</div>
</body>
</html>

Once the codes are ready, just keep all the files inside a folder with your custom provided name.

Now, how to test your demo PHP project?

Every server side scripting language requires a server configuration to be set up. Server configuration software include Apache and Tomcat. These software are used to transmit data in the form of HTTP requests.

Step 1: In our case we need not worry about all those complexities. Just install wampserver software and it will take care of the rest.

Step 2: If you are having a windows system, wampserver installation and usage will be super smooth. Once installed, just put your demo PHP project folder inside the path “wamp/www”.

Step 3: After putting the folder there, start the wampserver software by clicking on the shortcut exe icon.

Step 4: Once the software is running, open any browser and type “localhost/[your demo PHP project folder name]” and hit enter! That’s it. Your project will be running live before you.

In case you have any concerns, do let me know in the comments section.

Comments are closed.