Back End Web

MMP 350 > Week 1

In this class we are going to look at web design and development from a new angle.

In previous courses you have learned the technologies required to make websites, but these have been limited to the client side of web development.

Today, most web services rely on a back-end, or persistent user information stored in a database.

We will consider how the back end requirements for a website change the design and look at simple ways of accessing backend information.

Website architecture

You have probably heard terms like front-end, back-end or even full-stack as you have studied web design and development.

Let's review the technologies used to structure the internet.

Front-end

The front-end or client is any device used to display information to a user.

What are some client side applications you use in your daily life?

Historically, the technologies of the client side are HTML, CSS and JavaScript.

HTML is used to create the structure of a website and add content such as text and images.

CSS is added to the HTML to add stylitic elements like colors, typography, layout and visual transitions or animations.

JavaScript is a scriping language used to create interaction between the user and content of a website.

Back-end

The back-end is the code running on a server, which delivers website content to the client.

The back-end also includes a database, which is used to store information which is then sent to the client.

Back-end or server side scripting uses code to interpret a request from a client, in the form of a URL, or Uniform Resource Locator, and respond with the content that will be used by the client to display the webpage.

Database

Why do we need a database?

Websites, such as social networks or other web services, store lots of content. Much of that content looks the same.

It would be impractical to generate a new HTML and CSS document for every user of a website. Most of the documents would be exactly the same except for certain pieces of data, like the user name.

Databases make it possible to associate data with specific pages and add that data into the page without creating an individual page for each user or service.

An example

Let's say we are creating a web service for MEA students to keep track of the courses they have completed.

What would we need to do to make it possible for a student to view their course history?

First off, we need an address where the student can visit on the web to see their personal data.

Let's imagine that URL (this is not a real url).

https://mea.bmcc.cuny.edu/student_id/courses

The student_id part could be mapped to any student. So a student with the CUNY ID 12345555 would go to the URL:

https://mea.bmcc.cuny.edu/12345555/courses

Once the student types that URL into their browser, it will read each section and create a request.

First it reads https://. This tells the browser to use Hyper Text Transfer Protocol. This is a set of rules developed to make the web work. It will know what type of request is being made and go out on the web to make it.

Next comes the (fictional) server address: mea.bmcc.cuny.edu.

This is where our server code lives.

The server exists in the "cloud", meaning that when the request is made, the internet will look for the most accessible copy of this address. In the old days, servers used to be literally one computer sitting in a room somewhere, but now they are more likely to be clusters of computers distributed across the world.

Next is the student_id.

This ID will be cross referenced to a database to gather that students information.

Finally there's the end of the URL, courses.

This tells the server to only return the content used to display which courses a student has taken.

The server will find the right HTML page, CSS styelsheet and anything else associated with this page, like images or videos.

Then it will grab the data from the database and generate a new page with the right data put into the right places.

Finally it will send all of that information across the web, back to the client where the request originated.