Understanding websites in 3 levels

We surf them; search them; do payments with them; sell and buy with them; even perform the (arguably) despicable acts of self-pleasuring with them.

They come in different forms – from search engines (Google, Bing, Yahoo etc), e-commerce (eBay, Zalora, Lazada etc), to social media sites (Facebook, Instagram, Google plus etc). Yet, all of them follow a similar, if not same framework that could be easily understood to its core, and I’m about to attempt to guide your through them in three different levels.

How should you approach this post

For each level, we’re going to lay things out from top to bottom. First from 10,000 feet view above to have a broad overview of things, and proceeding lower and lower, covering thing in more detail as we go along. The main goal of this post isn’t to turn you into a pro at understanding and creating websites, but hopefully allows you to have a better perspective at how the entire architecture works from A to Z.

Prerequisites

It’s best if you have some sort of experience coding with a couple of these languages – HTML, CSS, Javascript, PHP, SQL – it’ll greatly enhance your ability to follow up and understand this post. But if you don’t, it’s still cool. For some, reading this before diving in any of the languages mentioend above might even lubricate their understand later on. Just take your time and go step by step. Don’t skim through things.

Is this post for you?

If you have the following questions in your head, go right ahead:

  1. I’ve coded with HTML and CSS before, but don’t quite get how things fit into the real world.
  2. I kinda understand how a website works but would like to have a clearer picture of the entire architecture.
  3. I’m a daily user of the internet and with no idea at all on how websites work, but would like to know – down to its very core.
  4. I’m bored.

If not then you probably have something else more important in your life worth paying attention to.

What would you be getting out of this?

  1. A somewhat shallow, end-to-end understanding of how the website architecture works
  2. How to front-end and back-end of a website works together
  3. Be able to throw around cool terms like “localhost” and “self-hosting”.

What would you not get out of this?

  1. How to code each of the languages needed for a website to work (there are tons of tutorials online to learn from)
  2. How to break into a bank and get away with it

LEVEL 1 – CORE CONCEPT

Imagine a library. In a library, there are shelves after shelves of books, written by authors, and read by readers. If you’re an author and would like your book to be read by others, you would first have to find a way to get your book up onto the shelves; and if you’re a reader and would like to read someone’s book, you would first have to find a way to get to the library, find the name of the book that you wanted, and ta-da, there it is your book.

So, there are three characters at play in the entire system:
untitled.png

The architecture of a website works in pretty much the same way. A website could be equated as a book in the library. So in the context of websites,

untitled2.png

A website owner/developer codes the website in his/her own computer, uploads it to a server which provides hosting services and a client accesses the website from the site’s domain (imagine something like http://www.google.com or http://www.pornhub.com) via a browser (imagine something like Chrome, Mozilla, Internet Explorer etc) . So the next time you type a domain (e.g. justanotherdude.com) into a web browser and a web page shows up, what’s happening essentially is you’ve made a REQUEST to a server (e.g. Hostgator, the hosting company I’m currently using), and it RESPONSES to you by showing up a web page coded by the author of the site onto your web browser.

Terminologies
Hosting services: The service of bringing a website online, up on the internet.
Client: The party visiting the page. If you visit google.com, you’re a client to the site.
Domain: A website’s name. A domain really just is a disguise for an I.P. address. An I.P. address can be seen as a personal identification number for a website – not much different than your own identification card or student card number. It’s unique to each holder. Just like my name Daniel Kwok Zheng Xian is a disguise for my university’s student I.D. 017130, Google has an IP address of 172.217.24.174. You could read more about IP address here.

Author – Website author

Library – Server

Books – Websites

Books’ names – Website’s domains

Reader – Client

LEVEL 2 – DEEPER DIVE

Let’s dive deeper into the architecture. Every website you’ve ever laid eyes on has two parts to it – front-end and back-end.

Front-end

Front-end is the stuff that clients usually interact with. They’re the content, look and feel of the website. 99% of the time, a client of a site would be looking at the front-end of a website. To have a look at the front end code, all you have to do is just load up any website (even this very one), and press Ctrl+U on your keyboard. You should be greeted with what seems to be a mess – but is actually everything you’re looking on that site currently.

view source
All that you see on the left, is create directly from the right

The front-end is usually coded with three languages:

HTML (Hypertext Markup Language) – responsible for the content, frame, outline of the site. You could kinda equate this to words and pictures in a book.

CSS (Cascading Style Sheet) – responsible for the look and feel of the site. You could kinda equate this to the colours, positioning, size etc of the contents in the book.

Javascript – responsible for any animations or effects. You could kinda equate this to the animations of the contents of the book (if books could be animated).

To create the front-end of a website, code out the HTML, CSS, and Javascript and save them as files with .html, .css, and .javascript extensions respectively. For smaller projects, you could also type them all in a single file. All you have to do then is to host it on a server (place it onto the library), and voila, your website’s frontend is up.

This is a lil web page I created named potato.html:

giphy.gif
Two lines of sentences and a green square that slides to the right when clicked. Impressive, huh.

And what you see above is a result of either of the codes below. Both works.

label1
HTML, CSS, and Javascript in a single file

Get above code here

label2
HTML, CSS, Javascript in separate files. HTML calls CSS and Javascript to be used when needed.

Get above code here

Okay cool.  So now we are able to create something that looks like a website. But how do we actually turn it into a website? One that we could imagine in our head? One that is accessible with just a quick Google Search or a couple keystrokes in the browser’s URL? One that changes and updates according to real-time data?

Back-end

The back-end is where web developers, site admins, engineers work. They’re the engine of the site. Without it, a website is nothing more than a glorified television advertisement. The backend includes the site’s server and database.

A server, as explained in the previous level, is the place where your website’s hosted on. It is what enables a website to be coded in one computer, once hosted, be accessible by millions of devices around the world with just a URL.

In essence, a server brings a website ONLINE.

A database, as the name might hint a thing or two, is a place where you store data. Information. It allows for systematic sorting of huge chunks of information and easy access to it. If you’ve used something like Microsoft access or even Microsft excel (to some extent), you should have an idea of what I’m talking about.

In essence, a database allows for DATA MANAGEMENT.

Why do we need a database? What sort of information could possibly so big that we would need a separate entity for it?

Imagine an e-commerce site. Something like lazada.com.my.

Lazada website

Just take a look at their women dress category. What you’re looking at above, is just one page. In case you couldn’t see the number of pages they have for this category alone,

Number of pages
11836 pages. That’s a heck lot of dresses to choose from

With 36 items per page and 11836 pages in total (let’s just round it up to 10000 shall we), that’s 360000 items for the category women’s dress alone. Surely there is a need for all of this information to be sorted properly? On top of that, there’s

  • Constant update of change of price, quantity, position etc of each item
  • Addition and removal of items to the list
  • Backups

etc

Don’t forget this is all for one category only. There’s also a ton of other categories, and along with all of the relationships between them (an RM20 singlet might find its way in the men’s category and “below RM30” category at the same time)。

The database is usually coded with two languages:

SQL (Structure Query Language) – Building, populating, managing database

PHP (Hypertext Preprocessor) – Connecting database to website, and any exchange of data between them

In addition to server and database, back-end of a website could comprise out of tons of other stuff, e.g. business logic, calculations, algorithms etc. These could be built with virtually any programming language in existence (Ruby, C/C++, Python etc).

Front-end and Back-end

How both of them work together?

PHP retrieves data from a database created by SQL and displays it on the website via HTML. If there’s any data inserted by the client into the website (something like a contact form), PHP retrieves data and adds it into SQL. CSS and Javascript make HTML look better, more interactive, and user-friendly.

LEVEL 3 – NITTY GRITTY DETAILS

Congratulations on making it so far without melting your brain! This next section is intended for people who have coded a little with most of the languages mentioned above. If you do have zero coding experience, this might not be exactly pleasant for you. I would highly encourage you to learn at least the basics of each language – at least till you could get the hang of the syntax.

In this section, we’re going to break it down into several smaller section so you could understand how front-end, server, and database works.

PART 1

Using an existing hosting service to get a front-end side of a website online to familiarize yourself with the process of using a hosting service

PART 2

Turning your own computer into a server itself to see for yourself a website’s back-end.

PART 3

Creating your own database to understand how SQL works in the big picture

PART 4

Connecting your website and database to understand how PHP works in the big picture

dazzle (1).jpg

Ready?

Get comfortable, brew yourself a cup of coffee, and let’s get to work.

p1.jpg

Remember this site?

giphy.gif

If you have not downloaded the front-end code for the page above, click either here or here and download the code.

For this example, I will go with this.

Download the files as a zip compressed folder, extract it, and save it somewhere easily accessible (I’m saving it on my desktop)

Double click and open up potato.html, and you should see something similar to this yourself:

Image 42

However, look at the URL of the website. It doesn’t look like anything close to the domains that we’re used to. Why? Because Chrome is accessing a file from the very same computer (you could see it from the URL) which means yes, even though you might be able to access this page by clicking it, every other device cannot because those browsers are unable to locate the file. The web page, is not online. To do so, we’ve gotta put it onto a server.

This is usually the part where even if you’re a web developer yourself, would cost you some capital because web hosting, is basically a service. It really isn’t much different than renting a room in an apartment. You are physically renting a tiny little space in a server somewhere on this planet.

server1

But thanks to the generosity of the internet, there exists free hosting services out there that we could use for our sample site.

Step 1
Step 1: Sign up an account at http://www.000webhost.com
Step 2
Step 2: Login, and you should be greeted with a view similar to this. Click on “Manage Website”
Step 3
Step 3: Click on “Upload Own Website”
Step 4
Step 4: And welcome to your website’s back-end! In the library analogy, this would be your shelf. THIS is where you would keep your HTML, CSS and Javascript files. Whenever someone visits your website, they’re indirectly accessing the files in here. You’re going to upload all the potato html, css, and javascript files here.
Step 5
Step 5: Select on all of these files and click “Open”
Step 6
Step 6: Ta da! Oh, and you’ve gotta rename potato.html to index.html. This is because by default, the first page that you get when visiting a particular domain is the page index.html. This is the file name that the browser will first search for.
Step 7
Step 7: To visit your site, just head over to your domain. If you aren’t aware of what your domain is, just come back to this page and click on “Details”
Step 8
Step 8: And there it is your domain. Basically the name with a “.000webhostapp.com” behind it.
Step 9
Step 9: Voila! There it is! Your very first live website! It might not be impressive, but it is, and qualified to be called a website.

Hopefully you haven’t hit on any walls along the way, but basically, that’s how most servers work. Upload your files, and they’ll host it for you with a domain name. Done!

Moving on.

p2

Why create a DIY server? Because with most hosting companies, you don’t really need to mess around with the database side of things. Hence, to really open up this black box, we’re going to turn out own computer into a server.

For this, we’re going to use a neat little software called XAMPP (you could refer to here for more information on what is XAMPP). In oversimplified terms, it’s a collection of a bundle of programs that could turn a computer into a server.

To install XAMPP:

Step 1
Step1: Search XAMPP
Image 25
Step 2: Probably this
Image 26
Step 3: Download it, respective of your operating system
Image 1
Step 4: Next
Step 5
Step 5: Next again
Step 6
Step : Next once more (DO NOT change the directory from C:\xampp to anything else)
Step 7
Step 7: Up to you to check or un-check this. I prefer to keep my inbox clean
Step 8
Step 8: Next one last time
Step 9
Step 9: This is the part where you go out and get a life for a bit while it loads
Step 10
Step 10: Aaand we’re done! Let’s open up XAMPP’s control panel
Step 11
Step 11: Tada! Go ahead and click ‘Start’ on Apache and MySQL.

To check if XAMPP is working smoothly, open up a web browser, and type “localhost” into the URL and you should get a view like this:

P.S. The name of our server is called localhost. It’s just a terminology. Keep that in mind. To know why read this.

Image 16

If you do, great! You’ve managed to turn your laptop into a server! It might not be a huge or impressive as any other huge servers out there, but it is, and is qualified to be called as, a server. Now, head over to C:\xampp\htdocs in your computer’s file directory and you should have a view like this:

Image 17

This, htdocs folder, is analogous to the Step 4 of the previous part. .This is where you put all your website’s HTML, CSS etc files. To host your site onto your very own server, all you gotta do now is just

  1. Move all front-end files into the htdocs folder.
  2. Type “localhost/Potato.html in your browser and,

giphy (1)

What just happened, is that when you type “localhost/potato.html”, what’s actually happening is like a real server out there, you’ve made a request to the server, and the server returned the page to your browser, just like a real server. The only difference is, everything’s happening in the same computer.

p3

I’m going to once again assume you have some understanding on what are databases, tables, fields etc. If not, spare yourself the pain and do some quick googling before proceeding.

Database structure
Taken from http://fadziee-sharoon.blogspot.my/2011/02/database-dictionary.html

Go ahead and type “localhost/phpmyadmin” into your browser’s URL, and you should be greeted with a view like this:

Image 1
Welcome, ladies and gents, to your website’s database (or more accurately, the place where you manage your databases), or at least, a graphical version of it.  Databases are usually operated through a terminal, i.e. the black scary screens that you usually see on movie hacker scenes.

For this example, we’re going to attempt to create a table of information, linking dishes made with potatoes and their origins.

Origin of dishes

If you remember from the previous level, databases are created using the language SQL. Let’s get our hands dirty and type some SQL code.

To create a table, we first need to create a database to store the table in.

sql tab
Click the SQL tab
create database
Type: create database (your database name);

SQL Code:

CREATE DATABASE potato;

Code explanation:

You’ve created a database named potato.

Congrats! You’ve created your database, ready to be filled with tables.

Step2 – Creating a table with data in it

Image 7
Click on SQL tab once more, and type in the following code into it (if you’re wondering, it doesn’t matter where you access the SQL tab from. Just click it)

SQL Code:

CREATE TABLE Dish_origins ( Dish varchar(255), Origin varchar(255));

Code explanation:

You’ve created a TABLE named Dish_origins. Dish_origins contains two columns, Dish and Origin, and both of them are text. (Varchar(255) simply means a character variable storing 255bytes of value. Nothing terribly important to understand at this moment)

table success
Click on to your newly-formed table
empty-table-e1504083823746.png
There it is. Your very first table, all waiting to be filled with information by you.
image-81.png
Click on the SQL tab once more, and type in this line of code.

SQL Code:

INSERT INTO `dish_origins`(`Dish`, `Origin`) VALUES ('French fries', 'Belgium'), ('Tater tots', 'USA'), ('Hash browns', 'Switzerland'), ('Potato soup', 'Wales')

Code explanation:

As you could’ve guessed, we’re INSERTING INTO the columns of the table DISH_ORIGINS – DISH and ORIGIN with the VALUES French fries and Belgium, Tater tots and USA, Hash browns and Switzerland, Potato soup and Wales, respectively.

Go back to your table, and voila, it’s filled with data.

filled table

Now that we have a database all ready to go, all that’s left is to connect it to the website.

dazzle (1)

Now, we’re going to attempt to connect our potato.html with our database right here. For this, we’re going to use the language PHP.

First, we’re going to create two more files with a .php extension and save it in our htdocs:

db_connection.php

index.php

I like to think of db_connection.php as like a socket on my database and index.php as a two-way plug. Like how a socket on the wall provides electricity for your appliances to be used, the socket prepares all that is needed for the connection to work, and the plug connects.

WEBSITE  >-(connect)-<  index.php  >-(connect)-<  db_connection  >-(connect)-<  database

db_connection
db_connection.php:

Code explanation:

In this file, you create two functions (to understand what are functions read my other post ). The first function creates a connection using several arguments:

$dbhost = the database server’s name (localhost)

$dbuser = database user name (root)

$dbpass = database user password (whatever password that you use)

$db = and database name (mine’s potato)

For $dbhost and $dbuser, leave it as “localhost” and “root”. For the $dbpass, you’re gonna have to setup your own password with four simple steps:

This slideshow requires JavaScript.

The second function simply closes the connection when it’s called.

index
index.php

Code explanation:

By using the keyword include, it is as if you’ve copied and pasted the entire code in db_connection.php right there. With the variable $conn, you’re basically calling the function opencon() and would print out the word “Connected Successfully” if the connection worked.

Get the code for both files here. Download, and save it in htdocs.

htdocs folder
Remember to keep all of your files in htdocs. If you do decide to create a sub-folder to store things in a more ordered manner, remember to edit the directory in the php code too. (Don’t do so unless you know what you’re doing)

P.S. You don’t HAVE TO type the code in these external files in order for it to work. In fact, you could just type them in potato.html, but I think it keeps things neat because whenever you need it, you could just include it in the code instead of re-writing the whole thing again.

Now, to test if the connection to database worked, type “localhost/index.php”, and you should have this:

success

Image 32.png

Great! With the plug attached to the socket, all you’ve gotta do now is just to connect the other end of the plug to your website. To do this, we just gotta include index.php with potato.html, and close the connection once we’re done with closecon() function.

potato.php.jpg

Get above code here.

Oh, once you’ve typed in the PHP code, you’re gonna have to change your extension from “.html” to “.php”.

If you’ve noticed, I’ve added PHP codes at the top and bottom of the code Anything that goes within these tags are PHP code

PHP code:
include 'index.php';
closecon($conn); echo "Connection closed"

Code explanation:

First, you’ve basically connected the website to database via index.php. With the second line of php code at the bottom of the code, you’ve closed it up.

 

As a final recap, your htdocs should have the files

  • potato.php (The main site’s file)
  • potato.css
  • potato.js
  • index.php
  • db_connection.php

 

Image 64
This is what my htdocs currently looks like. Make sure these files are included within

And now, type “localhost/potato.php” in your browser and,

giphy (2)

 

 

 

If you got what I have above, faaaaaantastic! If not, go back up, and retrace your steps all the way to Part One to make sure you haven’t done any mistakes.

Now that we’ve managed to create a connection, all that’s left is to display our dish_origin table back in Part Three in the website, Once again, PHP is the language for this.

potato.php

Get above code here.

If all goes well, “localhost/potato.php” should land you at:

giphy (3).gif

And we’re all done for Part Four!

Congratulations once again! Now, it might not be anything near what you would call “aesthetic” or “good design”, but is it functional. It’s online, and dynamic. Any changes you make to the database would cause the website to be altered. Try altering one of the records in the database:

Image 69Image 70

 

I have above the altered database, and subsequently, the altered website. Can you notice where the change was made?

 

 

ENLIGHTENMENT

As you can see, when stripped down to its very building block, a website is nothing more, than words typed onto a file and hosted in a server. You could see for yourself how each gear interacts with another. However, for someone who isn’t super into building websites but would like one to leverage his/her business, this isn’t wouldn’t exactly a walk in the park. For those who couldn’t be bothered with coding things from scratch, there are tons upon tons of free and premium themes online, designed and coded by other web designers – and having the understanding of how HTML, CSS, and servers work together, allows you to implement and customize their themes according to your specifications. You now, have the power, to build something on top of a foundation created by others, and make tweaks here and there to your very own likings.

For those who couldn’t be bothered with coding things from scratch, there are tons upon tons of free and premium themes online, designed and coded by other web designers – and having the understanding of how HTML, CSS, and servers work together, allows you to implement and customize their themes according to your specifications. You now, have the power, to build something on top of a foundation created by others, and make tweaks here and there to your very own likings.

In terms of servers, there’s a whole long list of hosting companies for you to choose from like Hostgator( which is what I’m using personally), Bluehost, Weebly etc.

Today, there are even free software and websites like WIX, Squarespace, WordPress, Webflow etc that allows one to create websites, without looking at even a single line of code. They allow for code-frees designing of websites, and does all of the messy bits so you don’t have to. There are even thousands upon thousands of drag-and-drop themes to work from. Need a square to be somewhere on the page? No need to adjust it using CSS – just a drag of mouse would get it done. On top of that, most if not all of the websites created by these platforms are automatically compatible with all devices (desktop, tablets, and phones of different screen sizes. Most of them also provide hosting services and you don’t even have to deal with the database, which means, no more tedious SQL or PHP. It’s all settled for you. Powerful stuff.

Image

 

It’d been one long-ass journey from the start of the post to where we are now. You’ve cruised through more than 4000 words in total, and hopefully, you’ve got a thing or two out of it. Of course, if you’re pretty new to this, you wouldn’t be able to get it in one shot. Take a break, and come back again another day for round two, and three, and four etc.

Happy learning!

 

– Just another dude

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: