7.7. Application Servers¶
All the web pages we’ve created so far are static web pages. They don’t change.
Interactive web pages require an application server. Application servers can dynamically change and respond to requests. They work like this:
The application server can take an original html document and modify it before it displays on the screen.
There are many types of application servers out there. Some of the most popular:
- PHP
- Java Servlets / JSP
- .NET / ASP
Often, we change the file ending to show that they should be processed
by the application engine. We’ll use PHP, and all PHP files end in
.php
instead of .html
.
7.7.1. Telling Time With PHP¶
Create this file in a directory that you can pull up via XAMPP.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php date_default_timezone_set('America/Chicago'); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Document</title> </head> <body> <h1>Test PHP File</h1> <p>The current month is: <?php echo date("M"); ?> </p> <p>The current day of the week is: <?php echo date("l"); ?> </p> <p>The current time is: <?php echo date("h:i:s a"); ?> </p> <p>The current date is: <?php echo date("m/d/Y"); ?> </p> </body> </html> |
Once you’ve created it, pull it up via the web browser, and directly by dragging it onto your web browser. Do a “view source.” Notice how PHP changes the HTML.
You can read more about the PHP Date function here.
7.7.2. The Include Statement¶
We won’t do that much with application servers during this semester. However, I do want to introduce one main thing you can do with an application server. Include other files.
Say you have a web page like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Document</title> </head> <body> <!-- Navigation Bar --> <h1>My Website</h1> <ul class="nav navbar-nav"> <li><a href="example_01.php">Example 1</a></li> <li><a href="example_02.php">Example 2</a></li> <li><a href="example_03.php">Example 3</a></li> </ul> <!-- Main content --> <h1>My Stuff</h1> <div class="container"> <p>This is page 1</p> <p>It has some stuff.</p> </div> <!-- Footer --> <footer> © Simpson College </footer> </body> </html> |
There are a lot of common elements on that page. The navigation and the footer should not change from page to page. So if we had 20 pages on our website, we’ll have 20 copies of the navigation. And if it changes, we have to change it in 20 spots. That’s no good!
We can use a PHP include()
statement. We will put all the navigation
information in a file called navigation.php
and all the footer information
in a file called footer.php
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Document</title> </head> <body> <?php include 'navigation.php'; ?> <!-- Main content --> <h1>My Stuff</h1> <div class="container"> <p>This is page 1</p> <p>It has some stuff.</p> </div> <?php include 'footer.php'; ?> </body> </html> |
Attention
Notice in the navigation file below, how we now need to link to .php
files instead of the original .html
files.
1 2 3 4 5 6 7 | <!-- Navigation Bar --> <h1>My Website</h1> <ul class="nav navbar-nav"> <li><a href="example_01.php">Example 1</a></li> <li><a href="example_02.php">Example 2</a></li> <li><a href="example_03.php">Example 3</a></li> </ul> |
1 2 3 4 | <!-- Footer --> <footer> © Simpson College </footer> |
The result, the application server will basically to a cut/paste of the
navigation.php
and footer.php
into the example_01.php
file:
If you do a “view source” you will see the assembled HTML document, but not
the include()
statement. The include()
never gets send to the user.
The application server modifies the example_01.php
before sending it
to the user.
While the page to the user looks the same, we now have just one place that has our navigation bar and footer. This is a lot easier to manage.
7.7.3. Common Mistake¶
A very common mistake is to try this, and then have nothing happen. Take a look at the image below:
Why did my navigation and footer fail to show up? The reason can be seen in
the URL. The URL starts with file:///
. That means I loaded the file directly
from the disk. It never went through the web server. It never went through the
application server. Without the application server involved, there was no
piece of software to perform the include()
. In fact, you could do a
“view source” and see the include statement still sitting there, unprocessed.
7.7.4. Another Common Mistake¶
Another common mistake is to run an HTML validation of the “part” pages. Of course, the validation will fail because it isn’t a complete page. So, the developer fixes that by adding the other page parts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- This is an example of what NOT to do. So don't follow this. --> <!DOCTYPE html> <html lang="en"> <head> </head> <body> <!-- Footer --> <footer> © Simpson College </footer> </body> </html> |
But what happens when you include this into the main file? You get something like this:
There are mini-documents inside of documents! That’s not valid at all!
If you really want to validate your documents (which you should), then you can have CSE Validator fetch the web page from the web, rather than a file:
You can paste in your web address for a localhost reference, or your AWS server.
However! Realize while you can edit the file you download off the server, it won’t change the original source file you have for your project. Anything you change will be lost. Make sure you edit your original source file, not the result.
7.7.5. Better Directory Organization¶
The example above is ok, but not great. There are two issues:
- It is entirely possible for the user to go to
http://simpson.edu/footer.php
and just see the footer. While that isn’t bad, it isn’t desired. Nor it is likely to be part of our testing plan. And what if loading just part of a document exposes a security risk? - It is unorganized. We have page parts mixed in will full pages in the main directory. How do you know what’s a “real” page and what is a pieces-part?
You can fix this by putting the page-parts into their own directory. Specifically,
one that isn’t in public_html
. Because if it isn’t in public_html
the
user can’t get directly to it. Here’s a better directory structure
my_project
public_html
example_01.php
example_02.php
example_03.php
resources
footer.php
navigation.php
We are close to working, but not there yet. No longer can we do this:
<?php include 'navigation.php'; ?>
Why? The include
command assumes that navigation.php
is in the same
directory we are. But that file no longer is. It is up a directory, and in the
resources
folder. How do we get there? Easy! See below:
<?php include '../resources/navigation.php'; ?>
The ..
goes up a directory. Then we go into resources
to fetch
our file!