Server-Side Scripting/Routes and Templates

This lesson introduces modular server-side scripting, using separate source files, routes, and templates.

Objectives and Skills

Objectives and skills for this lesson include:

• Understand the benefits of modular programming
• Understand the use of script routes
• Understand the use of templates to inject content into HTML pages
• Use modules, routes, and templates to create a server-side website

Readings

1. Wikipedia: Modular programming
2. Wikipedia: Template processor
3. Wikipedia: Package manager
4. Medium: Server-side vs Client-side Routing
5. ExpressJS: Routing
6. ExpressJS: Template engine
7. Python Basics: Flask Tutorial - Routes

Multimedia

1. YouTube: NodeJS For Beginners: Working With The Express Router
2. YouTube: Flask Routing
3. YouTube: Flask Templates
4. YouTube: Embedding PHP Inside HTML
5. YouTube: Routing HTTP Requests in PHP

Examples

• Go
• Node.js (Express)
• PHP
• Python (FastAPI)
• Python (Flask)

Activities

Complete the following activities using HTML, CSS, and a server-side scripting language. Apply best practices for user interface design and your selected scripting language, including modules, comments, indentations, naming conventions, and constants. Use HTML and CSS for content and server-side scripts for processing. Add comments at the top of code modules and include references to any resources used.

1. Create a static HTML home page for your course website. Format the page using external CSS. Use a server-side script to return the page as the root / of your website.
2. Use routes to create a logical structure for your website so that there is a separate path for each lesson. Add the Hello world code from the first lesson as a separate module with a route of /lesson1.
3. Add a template page with a route of /lesson2 that displays current server information. Include the current date and time, host name, IP address, operating system, and scripting language platform version. Include anything else you like on the page.
4. Validate your website to ensure that the pages are consistent with W3C HTML and CSS validation. Use a linter and/or code beautifier to validate your server-side script code for structure and formatting.

Lesson Summary

• Modular programming is closely related to structured programming and object-oriented programming, all having the same goal of facilitating construction of large software programs and systems by decomposition into smaller pieces.
• Programming languages such as Perl, Python, PHP, Ruby, C#, and Java support template processing either natively, or through add-on libraries and modules. JavaServer Pages, Active Server Pages, Genshi (for Python), and eRuby are examples of template engines designed specifically for web application development.
• Many scripting languages can use a template engine. Even though they are different engines, they are all similar in a way; they were all developed to make front-end templating quicker and easier to read.
• A package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner. Package managers are used to install external code libraries such as template engines. Examples of package managers include npm (JavaScript) and pip (Python).
• A route is a section of code that associates an HTTP verb (GET, POST, PUT, DELETE, etc.), a URL path/pattern, and a function that is called to handle that pattern.
• Server side routing triggers a full page refresh when the request is sent and the response is delivered.
• By placing '/' as a route path one can designate the home page of a site.
• A template processor (also known as a template engine or template parser) is software designed to combine templates with a data model to produce result documents.
• Advantages of template engine.
  • Improves developer's productivity.
  • Improves readability and maintainability.
  • Single template for multiple pages.
• Express routes: app.method(path, handler).
  • An Express route is a specific URL path and an HTTP request method with a callback function.
  • app - Express instance
  • method - HTTP request method (get, post, put, move, lock, copy, etc.)
  • path - URL or folder path
  • handler - Callback function triggered when the route matches
• Routing is the mechanism by which requests are connected to some code. It is essentially the way you navigate through a website or web-application.
• Routing defines the way in which the client requests are handled by the application endpoints.

Key Terms

API

An application Programming Interface(API) is a programmatic interface consisting of one or more publicly exposed endpoints to a defined request–response message system, typically expressed in JSON or XML.

dynamic routing

A technique that allows a function to read through a list of files in a folder and establish routes to each file, allowing for ease of adding new pages to a website by simply adding the .js file page to the folder of pages.

endpoint

An address that defines the location where a specific resource is, so it can be accessible by the client.

middleware

Examines or modifies the request and/or response objects.

module

A function or group of functions that perform one particular task of an application. Modules can interact with other modules to perform more difficult task.

rendering

A process of combining data with a template.

template processor (template engine)

Software designed to combine templates with a data model to produce result documents.

view

The visual representation of the application's data.

See Also

• MDN: Express Tutorial Part 4: Routes and controllers
• Stanley Ulili: Node.js Modules: Import and use Functions from Another File
• Build Your First Router in Node with Express

References

← Introduction

Server-Side Scripting

Requests →