Dynamic Web Site Model
When we work with the backend components of a dynamic website, we need to know what those components are and what they do. This document is meant to do just that.
Vocabulary
Before we can understand all of this we need to differentiate static from dynamic web sites.
Static
Back in the WDD 230 class, when all web pages were built and the content simply typed into them, that is "static". The content is fixed and doesn't change until a human edits the content.
Dynamic
When data is stored in a database and a computer language (e.g. JavaScript) is used to extract data from the database and insert it into a web page (hereafter referred to as a view) based on a click or a form submission we have a dynamic site. It is the dynamic model that illustrates how this happens.
The Model
The Client
The client is generically a human being or a web browser or application on any device that displays the interaction components of a website. Most typically it is a web page (view) where content is displayed and contains links and/or forms that allow the human to click or complete in order to tell the server what we want to do next.
A View
A view is a web page (html, css, content, javascript) that appears in the browser or app on the client. It is what the human interacts with and where the content is displayed. The view is always the beginning point of a dynamic interaction and the end point displaying the results of the interaction.
When a link is clicked or a form submitted from a view, the data is sent to the Web Server using the "Request". The request has two common sub-methods or sub-objects to move information from the client to the server: the GET and the POST. Links and their data are always passed through the GET! Forms and their data are typically passed through the POST. Knowing this is important because you have to know where to look to get the incoming data.
The Server
The illustration shows the web, app(lication) and database servers as separate devices, which they can be. However, in our local development environment, they are a single software application that handles all web, JS (because Node and Express are both built on JavaScript, I will abbreviate using JS), and database operations.
The server is the "backend". The vast majority of what we do this semester happens here. The Node and Express implementation of JavaScript resides ONLY on the server. SQL lives and works ONLY on the server. The database and its management tools exist on a server.
Web Server
When a request for a HTML page (e.g. file.html) is made the web server handles it alone. The App and Database servers are usually not involved. This server simply finds the file or resources being "requested" and delivers it to the client.
App(lication) Server
When a request for dynamic view (e.g. index.ejs) is made, the web server hands the request to the App server to take care of. The App server processes the JS or other code. If content from the database is needed, it sends a "query" using SQL to the database server. The database server sends the data back as a "Result Set" which the App server has to use to build the content into a view. When the view is ready, the App server sends the view to the web server who in turn sends it back to the client in a "Response".
Query
A query is Structured Query Language (SQL) command that the database server understands. It can be a simple or involved. In this class we will use primarily "Data Manipulation" queries intended to Create (INSERT), Read (SELECT), Update or Delete data from the database server. These are referred to as CRUD interactions.
Response Set
A response set is returned from the database server when a SELECT query is run. It is the data extracted from the database and meant to be used in building the content in a view. Otherwise, the database server usually supplies a simple "response" indicating the result of an INSERT, UPDATE or DELETE (simply put, an indication that the query worked or not).
Database Server
The database server can host many databases, but usually is limited to a particular type of database. On Render.com the database is a PostgreSQL database. The database server understand Structured Query Language (SQL) which is how we ask our questions (queries). The database server typically replies with a result set of data, formatted as an "array" (a collections of multiple values).
Summary
Knowing the components of this model, their names, the directions which they move and what they do is base knowledge for understanding how a dynamic web site functions. We will use this model daily in our class. You must know it.