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.
Is this post for you?
If you have the following questions in your head, go right ahead:
- I’ve coded with HTML and CSS before, but don’t quite get how things fit into the real world.
- I kinda understand how a website works but would like to have a clearer picture of the entire architecture.
- 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.
- 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?
- A somewhat shallow, end-to-end understanding of how the website architecture works
- How to front-end and back-end of a website works together
- Be able to throw around cool terms like “localhost” and “self-hosting”.
What would you not get out of this?
- How to code each of the languages needed for a website to work (there are tons of tutorials online to learn from)
- 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:
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,
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.
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 22.214.171.124. 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 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.
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.
This is a lil web page I created named potato.html:
And what you see above is a result of either of the codes below. Both works.
Get above code here
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?
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.
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,
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
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?
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.
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
Turning your own computer into a server itself to see for yourself a website’s back-end.
Creating your own database to understand how SQL works in the big picture
Connecting your website and database to understand how PHP works in the big picture
Get comfortable, brew yourself a cup of coffee, and let’s get to work.
Remember this site?
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:
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.
But thanks to the generosity of the internet, there exists free hosting services out there that we could use for our sample site.
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!
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:
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.
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:
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
- Move all front-end files into the htdocs folder.
- Type “localhost/Potato.html in your browser and,
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.
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.
Go ahead and type “localhost/phpmyadmin” into your browser’s URL, and you should be greeted with a view like this:
For this example, we’re going to attempt to create a table of information, linking dishes made with potatoes and their origins.
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.
CREATE DATABASE potato;
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
CREATE TABLE Dish_origins ( Dish varchar(255), Origin varchar(255));
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)
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.
Now that we have a database all ready to go, all that’s left is to connect it to the website.
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:
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
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:
The second function simply closes the connection when it’s called.
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.
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:
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.
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
closecon($conn); echo "Connection closed"
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)
And now, type “localhost/potato.php” in your browser and,
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.
Get above code here.
If all goes well, “localhost/potato.php” should land you at:
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:
I have above the altered database, and subsequently, the altered website. Can you notice where the change was made?
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.
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.
– Just another dude