Getting started with Dynamic Websites

We have discussed about setting up a static website. Static websites can be designed to look attractive using CSS and many websites still hold static content. But there are a few drawbacks of maintaining a static website. First, the same content is viewed everywhere, with no preference for users. For instance, a user might want to see personalized content on a webpage rather than static content which is common for everyone. Secondly, static websites have very limited interaction with the users. Users can only interact with client side JavaScript functionality. Thirdly, updating a static website is a complicated task. There is no way you can change the contents from within the website’s interface. You need to modify the core HTML codes in order to update your website. Obviously, this method isn’t secure or feasible for large updates.

To make your site interactive and more user friendly, it should consist of dynamic web pages. Dynamic websites open up a lot of options to make it interactive. Users can save their preferences in a personalized account. As a result, users have the option to log in with their own set of credentials. After the logging in, the contents of the website change from user to user. Also, unique sessions are maintained for each user for saving their login status.  A dynamic website thus needs to keep track of data for each individual user to provide unique user-preferred site contents. All this data is stored inside a database which is accessed by the website at run-time.

A dynamic website can also be updated without having to modify actual source code files. A Content Management System (CMS) helps us to manage the contents of a website. We will use WordPress as a CMS because it is customizable, user friendly, and most importantly, easy to learn.

A well-known example of a dynamic website is your email web client. You might have seen that right after you login to your email account, you are greeted with a message that contains your name. Similarly, other users logging in to the same website will see their names on the message. Not only that, the entire mailbox is user specific. Dynamic pages make it possible to view your personal inbox whenever you login to your mail account. All your emails are stored in a data storage unit (database) and mapped uniquely to your account.

Unlike static websites, dynamic programming languages (For example. PHP) are used to create such webpages . The server receives user requests, executes PHP code and generates browser understandable HTML webpages at runtime. The server then sends the HTML pages back to the browser so that users can view them. The major between a static webpage and a dynamic one is that, static webpages are already present on the server in hard-coded form and are directly sent to the client’s browser. On the other hand, a dynamic webpage is only created after the user requests for it.

Since a dynamic programming language can generate HTML codes at runtime, it can include dynamic data during the code generation process. Consider that you want to show the user’s name  on a specific webpage. Assuming the data is already present in the server, it will first determine which user has requested the page. As PHP executes, the server generates an HTML file which displays the name of the user when the web browser opens it.

Copy

 

Solution Stack

We had previously run a static web page on a browser by simply double-clicking the HTML file. Running a dynamic web page/site however, is a bit complex. PHP cannot directly run on a web browser. The PHP handler(executer) needs to reside on the server. Other than that it needs to connect to a database to store and maintain user data.

A dynamic website is dependent on three key factors, collectively known as the Solution Stack.

– Web Server (Eg. Apache): Typically, a web server is a computer that serves web pages. Any computer can be converted into a web server by installing server software on it.

– Database (Eg. MySQL): Where user data is stored, managed and maintained.

– Dynamic Programming Language (Eg. PHP): To generate HTML pages at runtime at the server end which are sent to the client side web browser for viewing.

Copy

 

Creating a dynamic web page

To create and view a dynamic web page, we will set up a Solution Stack on our local computer. Using a server software like Apache, it will act as a web server. The local server will then be able to execute PHP and generate HTML web pages for the web browser. In this tutorial, we are going to use WAMP Solution Stack on Windows. If you are on Mac or Linux, don’t worry. Alternative Solution Stacks are also available. We will be creating a simple dynamic website that displays the name of a user depending on his/her ID. Let us first set up WAMP on a local system.

1. Download and install the latest version of WAMP.

2. After installation is complete, you will find a directory named “www” in the install directory. This is the root of our server’s domain (localhost) where all the PHP files are placed.

3. To start the server, go to Programs >> WAMP >> Start WAMP Server.

4. A red “W” icon should appear on the Notification area. Wait till it turns green (online).

5. It’s time to test the running local server. Open up your browser and type “http://localhost” or “127.0.0.1” on the address bar. If everything is fine, you should see WAMP’s default webpage.

6. To setup the user data, we create a new database with the help of phpMyAdmin. Right Click on the WAMP icon in the notification area and launch phpMYAdmin. For our example, we will create the following table:

7. Click on the WAMP icon and open phpMyAdmin. To create a new database click on the Database tab and provide a suitable name (for example, “TestDB”) in the Create New Database input box. Let the other fields to their default values and click on “Create“. The new database should be added to the list of databases in the left panel. But the database contains no tables. We have to create a table to store the required user information.

Before you create and use a database, it is advisable to have a basic knowledge about databases. Search and learn about databases from the Internet. A few good links have been provided here.

MySQL Introduction

PHP: Mysql – Manual

8. In the Create New Table input box, provide the name of the table (for example “User”). Enter the  number of columns in the next input field (2 in this case) and click on Go. The new table will be added to the database TestDB (seen in the left pane). Click on the table name to select it.

9. Now you will be taken to a page where you need to define the name and datatype of each column. Name the columns as shown in the table above. Define datatype as INT for UserID and VarChar for the FullName column and set UserID as Primary key (as UserIDs are unique). Also, set the Length of FullName column to any number between 0 and 255. Remember that Length attribute defines he maximum number of characters in the field, so set the value accordingly.

10. Open up the Run Query Window (the second icon on the left pane) and fire the following SQL statements to complete your table.

INSERT INTO USER VALUES (1, 'Dennis');
INSERT INTO USER VALUES (2, 'Christopher');
INSERT INTO USER VALUES (3, 'John');

11. Select all the three queries and click on “Run Query” to execute the SQL statements.

12. Now we should write the PHP code for creating our dynamic web page. Save the following code in a file as index.php. Create a folder of your choice (for example, My_First_PHP) inside the www directory.

<html>
<head>
<title>My First PHP</title>
</head>
<body>
<?php $user=$_GET["uid"];
$name=mysql_query("SELECT FullName FROM User where UserID='$user'");
if(!$name){
echo 'Could not connect!';
}
else
{
$row=mysql_fetch_array($name);
echo "Welcome ". $row['FullName'];
}
mysql_close();
?>
</body>
</html>

This code fetches the value of the “uid” variable, that we are going to pass in the URL when we open the page in the browser.

13. Assuming user data is already maintained within the database. When the HTML code is generated, the variable Name is replaced by the user’s name from the database. For this, the PHP programme needs to connect to a database. This is done by adding the  following lines at the beginning of your index.php file and save it.

<?php $mysql_hostname = "localhost";
$mysql_username = "root";
$mysql_password ="";
$mysql_database = "TestDB";
$conn = mysql_connect($mysql_hostname, $mysql_username, $mysql_password) or die("Oops some thing went wrong");
mysql_select_db($mysql_database, $conn) or die("Oops some thing went wrong");
?>

Here, we use mysql_connect() function to connect to MySql. The mysql_select_db()  function selects the database to be used. The following information is used:

Host Name – This is a tag used to connect to the server which hosts the specific database (database server). Usually, the database is hosted from the same server which hosts the php files. If that is the case, localhost will indicate the database host too.

User Credentials (Username and Password) – This authenticates the user (database administrator) connecting to the database.

Database Name: Finally, the name of the database you want to use.

15. Making sure WAMP is still running, open your browser and navigate to http://localhost/My_First_PHP/index.php?uid=1.

The web page should now display the following:

Welcome Dennis

Similarly, opening the URL http://localhost/My_First_PHP/index.php?uid=3 will display

Welcome John

The same php file thus is able to generate different output according to the value passed in the URL.

Copy

 

Setting up WordPress

However, using a CMS, maintaining a dynamic website becomes a lot easier. You don’t even have to write PHP code. Just install WordPress on your local system and you can start building an attractive website. WordPress also allows you to customize the look and feel of your site by installing themes. You can find many themes in WordPress Theme Gallery as well as some third party websites too. Some themes are available for free while others are available as paid ones (Premium Themes). Use the guide to set up WordPress on your local system.

Now you can manage your website’s content within an easy to use environment. In the future articles, we’ll be discussing on how to deploy your website on a hosted server and make it available online around the world. Stay tuned for more articles on Web Development.

Prev: [Setting up your first Website]

Next: [Deploying your Website on the Internet]