Throughout this course, we have been creating HTML with a text editor and saving .html files. When these are put on a web server, they are then sent as-is to web browsers. In this case, the job of the web server is very simple: find the file and send it out.
We have been able to modify the HTML page with code we have written, but that was all JavaScript code that runs in the web browser. There was never any change in the HTML sent from the server to the browser.
But if you think about many web sites you visit, this method of creating web pages can't be the whole story. On Facebook, your news feed changes each time you load it: nobody is sitting there typing HTML to update it for you. When you search on Google, you might be searching for something nobody has ever searched for before, so there's no way the results can be pre-prepared.
For these sites (and many others), the HTML that is sent from the server to your browser must be generated when you request it. There is a program on the web server that can look at your request (what you searched for, or who you are logged in as, or where you are requesting from, or any other condition) and create an HTML page specifically for that request.
Web pages that come from .html files on the server are called static web pages. Web pages that are created as they are requested are called dynamic web pages.
Writing programs to create dynamic pages is server-side programming since the programs run on the web server. The programming we have been doing in JavaScript, where the programs run in the user's web browser, is called client-side programming.
We have only made static web pages in this course. That has given us a good chance to explore the basic ideas of the web, and given us a place to put JavaScript code to learn about (client-side) programming and do some interaction with the user.
Creating dynamic web pages requires a few more things that we won't be doing in detail here.
First, the web server needs to be configured to actually run a program to generate a response (instead of just finding a file on disk). This is often the biggest barrier to exploring server-side programming: you need a web server and need to set it up appropriately. This isn't terribly difficult or expensive, but it can be a challenge for beginners.
Second, you need to be able to write programs that generate the HTTP response for the user. This generally means creating HTML with your code. Exactly how that is done depends on the page you need to create: it will probably involve reading information from a database, or collecting information from some other source.
Server-Side JavaScript
Dynamic web pages can be created using any programming language (as long at it can run on the web server). Because of that, there are a lot more choices than for client-side programming which must be done in JavaScript. Server-side programs are often written in Python, Ruby, PHP, or C#. JavaScript is also a common choice though, since most web developers already know it.
Here is a short example server-side program in JavaScript:
var http = require('http');
var server = http.createServer(function(req, res) {
res.setHeader('Content-type', 'text/html')
res.writeHead(200);
res.write('<!DOCTYPE html>\n');
res.write('<html><head><meta charset="UTF-8" />\n');
res.write('<title>Node.js app</title></head><body>\n');
res.write('<p>This is a page generated by Node.js.</p>\n');
for ( i=1; i<=10; i+=1 ) {
res.write('<p>Another paragraph.</p>\n');
}
res.write('</body></html>\n');
res.end();
});
server.listen(8080);
The details aren't important, but you can probably see that the res.write() function is being used to create HTML code. This HTML is what will be sent from the server to the browser.
The difference between this and modifying web pages with JavaScript and jQuery on the client-side is that the web browser doesn't need to know how the HTML was generated: it just display the HTML exactly like it would if it was in a .html file.
Server-side code can also access information in a database or other source, which won't be available in the user's web browser. This makes dynamically-generated web pages much more powerful than static pages, since the full range of programming tools are available.
There is no actual programming lesson here: creating dynamic pages on the web server is a very different programming problem that we won't be able to explore in this course.