Basics of Dynamic Websites

What is a Dynamic Website?

Unlike static websites, a dynamic website or a webpage displays the content differently each time when a visitor reloads or refreshes the page. In addition, it can also provide more interactive features within a webpage without reloading. Most importantly dynamic webpages are created by assembling multiple static or dynamic pages together. Let us take an example of a PHP blog post as shown below. This page is a assembly of header.php, footer.php, sidebar.php and main-content.php files.

Such a dynamic pages are created using the following two methods based on the processing:

Client side scripting
Server side scripting

Client Side Scripting

Client side scripting is used to control the dynamic behavior within a webpage based on an action from the mouse movement or keyboard input. In this case the dynamic behavior is created in the user’s web browser running on a local computer instead of a web server located remotely. Hence the dynamic webpages need not to be reloaded for the client side dynamic behaviors. First the browser retrieve the initial content from the server and generates the dynamic controls within the browser based on the user’s input. Client side scripting languages includes JavaScript, ActionScript and Flash.

Remember the following points:

You need to enable JavaScript in your browser in order to see a dynamic page running a JavaScript.
Java and JavaScript are two different languages.
Java is a complex language developed by Sun Microsystems currently owned by Oracle Corporation. Whereas JavaScript is a script language developed by Netscape.

Example of How Client Side Scripting Works with JavaScript

Here is an example code of a dynamic page which asks the user name and then displays it in the browser window as “Hello USERNAME” using HTML and JavaScript.

<HTML>
<HEAD>
<TITLE>WebNots - Dynamic Page Example with JavaScript</TITLE>
<SCRIPT Language = JavaScript>
var name = prompt("Enter your name", "Name");
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language = "JavaScript">
document.write("<H2> Hello " + name  + "</H2>");
</SCRIPT>
</BODY>
</HTML>

Assume this code is stored in a web server with the page name as “http://www.example.com/dynamicjavascript.html” and a visitor is looking for this page in a Chrome browser.
Once the request is received from the browser, web server does not process any of the code and sends the HTML document “dynamicjavascript.html” as it is stored.
Browser receives the HTML document, interprets the markups, process the script and load the content as a webpage.

A typical example of client side scripting is a validation of form entries submitted by the users. For example, if you don’t enter the mandatory filed email id then the JavaScript code at browser level will stop submitting the form to server.

Server Side Scripting

Server side scripting allows the same page to display different content every time it is loaded. The content of a dynamic page is stored in a server’s database and the dynamic behavior is controlled by the scripting programs running at server side. Hence reloading of the page is required by the browser every time to retrieve the dynamic content. Server side scripting languages include PHP, JSP, Perl, ASP, ASP.NET, ColdFusion, Ruby and WebDNA.

Example of How Server Side Scripting Works with PHP

Here is an example code for the server side scripting to display different content every time the page is loaded using HTML and PHP.

<html>
<head>
<title>WebNots - Dynamic Page Example with PHP</title>
</head>
<BODY STYLE="background-color:#f1f1f1; color:red;">
<?php $dynamicsites = array("This is a HTML site", "This is a site created with PHP", "This is a free Weebly Site", "This is a free site created by Wix"); 
$item = rand(0, sizeof($websites )-1); ?>
<h1>
<?php echo $websites [$item] ?>
</h1>
</body>
</html>

Assuming this code is stored in a server as “http://www.example.com/dynamicphp.php”.
When the browser requesting this URL for first time, server first processes the PHP code in the document and sends the first content “This is a HTML site”.
Browser receives this content, interprets for the markups and displays it as heading.
When the page is requested for the second time, server responds with the second element “This is a site created with PHP” and the process continues.

A typical example of dynamic processing is serving of advertisements on a webpage with programs like Google AdSense. You will see different advertisement on the page every time it is loaded based on the highest cost offered by the advertiser.

Features of a Dynamic Webpage

Dynamic pages offer customized information according to the user needs.
Provides more interactive elements to engage the visitors long time in a webpage.
Server side scripting needs access to the server and hence needs hosting account with the service provider like GoDaddy, Bluehost, SiteGround, HostGator, etc.
Though free website builder tools like Weebly allows dynamic assembly of content (at least for blog post in Weebly), you can’t access the server for troubleshooting.
Basic form validations are done with client side scripting and complex processing are achieved through server side scripting.

Learn dynamic vs static websites.

Basics of Dynamic Websites