The Front End:
The Front End of a web app is what you can see on your browser. The text, the graphics, and the color of everything on your screen are part of the front end. The Front End of my web app was coded in the languages HTML and CSS. For my purposes, HTML codes things such as the letters and words on the screen, along with the functionality of certain buttons. For example, here is how you would add words at the top of your web app:
As you can see, HTML is very easy to interpret. On the left and right of the text, the numbers written after “<h” determine the size of the text on the screen. When written like this, the position of the code determines the basic position of the words on the screen. For example, since <h2> is written below <h1>, the text written in <h2> will appear below “Welcome to my web app.”
CSS is the code that designs the graphics of a web app. This can be as simple or as complex as you can imagine. A simple graphic choice would be having it so that if your cursor hovers over a blue button, it turns red. That code would look something like this:
CSS code is also pretty easy to understand. When your cursor hovers over “button,” the button will change from whatever color it was to red. The complex parts of CSS are when you want to create something such as a complicated background for a web app. Since the code to create things like shapes, or moving gradients become more difficult to create yourself, if you want to have a nice background for your web app, you can easily find free templates online and change them until they look how you want.
The Back End:
The Back End is where the Front End communicates directly to and from for more complicated functions to occur. Something simple that the Back End might do is multiply numbers. The Back End of my web app was coded in the language Python. If the Front end needs to communicate with the Back End, I would simply type {{}} in the Front End HTML code to access something in the Back End Python code. In my code, Python is used to check whether or not a username and password combination exists in my database and to send the user to the next URL (From the login page to the home page) if it does. Although this is one of the only things that I used Python for, it is just the beginning of its capabilities. If my website had to sort through lists or tables, if it had to create graphs, or if it was a full-on videogame, I would most likely use Python to code all those things. Here is what my Python code for logging in looked like:
Although this is more difficult to create than HTML and CSS in some ways, and it might seem like a lot, understanding it can be pretty simple. Basically, it says that if the username and password are viable, then it will do two things:
- It will remember the username to be displayed on the home page.
- It will send the user to the home page URL.
If the username and password are not viable (else), then the user will be kept on the same page, because they are not allowed to get to the next page without logging in. The complicated part about this, is that the username and password must be stored in a database, adding another step to the process.
The Database:
The Database is where information is stored. You can think of it as a table, so for my purposes, there was a username column and a password column, which would store different users’ information. I coded the database using SQL code, which is similar in my opinion to Python in terms of understandability. The database for my website was very simple because the website was, and it required very little information about the users. The database was basically a 2×2 table, with columns named username and password, and then underneath that, my username and password. The code to connect a database to your web app is pretty simple, and would look something like this:
This part is coded in Python, because it is simply coding to connect to the database, not coding the database information itself. It is important to note that in this code I reference “mysql.connector.connect”, which is an external library that would have to be imported at some point in the code. External libraries, or packages, are used to help with certain aspects of coding. For example, if I wanted to create a graph with python, I might import something called “matplotlib”, a library used to deal with all kinds of graphs. Now, going back to the SQL code, mine looked something like this:
First I state that I want to create a table, then I name each column, what will be in it (a string of words, numbers, True/False, etc.), and how many of these things can be in it (how many letters, numbers, etc.) So, would say username, the column name, then varchar, which basically means a string of letters or words, and finally 255, the maximum number of letters that can be in one username.
The Host:
The host for my web app was a website called “PythonAnywhere.” This is where all of my code is stored, where my database was also hosted, and where I created a link for my web app. It is also where I can easily check the error logs for my web app to see where/if things went wrong. I needed to do this when I tried to check the username and password for the user. The problem was that the code was checking the username, but could not check the password, because of a simple error that I never would have noticed myself.
Putting it all Together:
Here I will work backward from the base of the website to what the user sees. First, the host. This is where all of the code is stored. Next, the database. This is where important information is stored. For example, a database for something like Netflix would need to store millions of usernames, passwords, profile pictures, all of the shows that you watched, and maybe even your date of birth. Or it could be as simple as mine with one username, and its corresponding password. After that, the Back End. This is what communicates directly with the database to get your information. It is where important functions are made, where you would code all of the functions on a calculator. After that is the Front End. This is what you see, what makes up all of the graphics. The only step after this is the browser. Where you find the website and can see what the Host, Database, Back End, and Front End really make.
Conclusion:
There are many moving parts to a simple web app such as mine, and it only gets more complicated. But, if you look closely, it’s pretty easy to understand why and how things happen on your screen. Now, hopefully, you can understand all that goes into a simple click when you log in to any application or website that you use every day.
The Code for My Web App:
