GBP

Fixed Knowledge Base

Get all the help you need here.

Code Fundamentals

Posted 04th October, 2018

The fundamentals of code as easy to grasp, and a basic understand can simplify even the most seemingly complicated issues.

Backend vs Frontend

What is stored on a web server is not necessarily the same as what is on the frontend website. The frontend site is just the ‘rendered output’ of the website. Originally, most websites were built in plain HTML. This contained all the text formatting you would need for a webpage, for instance:

  • A paragraph is text wrapped in <p> tags.
  • A header is text wrapped in <h1> or <h2> tags.
  • Bolded text is wrapped in <strong> tags.
  • An image is included like <img src=”image.jpg”>

The code that was transmitted to the user web browser who visited the page, was identical to the code that was on the web server. Files built in plain HTML, no matter which server has the data, will always be the same on the server and the client side.

Components can be split out into separate files. CSS (Cascading Style Sheets) stores styling information. For instance, it can define the spacing, font-size, or colour, of a paragraph. It can set the thickness of a border on a table, or the radius of a corner. Javascript can be used to add dynamic features to a page: a table to be filtered, an image carousel that rotates through pictures. Javascript is code that the browser reads fully and then interprets, all the rendering of the code happens on the user end.

Still, all of this website data (html, css, javascript) is entirely visible to the outside world.

In many cases, websites contain some data or logic that you do not want to expose to the outside world. For instance, a page may require you to enter a password, or run some logic - it needs to be able to give you information: the password is correct, or run the secret logic, without giving you all the information behind the scenes.

Backend code therefore runs on the web server, and is hidden from the client view. Common languages include PHP, .NET, Java. These run behind the scenes and then output html. A simple PHP calculator script might look like the following. *(Note: In PHP, text with a dollar sign before it signifies a variable which stores data)

// Run the secret formula
$x = 6+(4*12); // calculate a value ‘x’
echo $x; // echo prints out ‘x’;

In this instance, all the html that will be outputted is the value of $x, which is 54.

Databases

Databases store the majority of website content, and hidden code like above is used to connect to the database. For instance$x might be a value stored in a database, in which case the logic might go something like:

// Get the value of X from the database
$db = connect_to_database(‘database_host’, ’database_user’, ’database_password’);
$x = $db->get_x; // ‘database value read from database’;
echo $x; // echo prints out ‘x’;

Obviously the site owner would not want the site visitor to know the database host, username or password. Most databases we see are built using MySQL, which is a structured database.

Databases can be hosted on the same server, or remotely.

Modern SPA sites

Increasingly websites are being built in javascript frameworks like Vue.js (like my.fixed.net), React, or Angular.