Web applications. They may seem incredibly complicated.
Web applications are, in essence, very simple. Let’s create a simple web application with Python and learn the essence.
What is a web app?
What is a web app? Its essence is,
Text generation and display software
That’s it.
There are many different technologies for web apps, but they all just complement this simple interaction.
Web Browsers and Web Servers
Web applications require two things: a web browser and a web server.
- Web Browser Display Text
- Web Server Creates text for display
In essence, that’s all there is to it.
Web Browser: Software that displays text
Web browser = Chrome or Edge that you normally use.
The browser will display the text. However, if the text has a decoration specification, the browser will decorate it. If there is a specification such as “make the text bold,” “make it red,” or “make it centered,” the browser will display it accordingly.
HTML and CSS determine the rules for specifying decoration such as “make the text bold,” “make it red,” and “center it”.
Images and videos can also be displayed by writing “I’ll display the image here” in the HTML.
Web Server: Software that generates and sends text
Web browsers display text formatted in HTML and CSS.
This text is generated by a web server.
The term web server can mean either “software called a web server” or “hardware on which web server software runs“. Here, we are referring to the software.
Let’s create a Web App
Creating and displaying text. If that’s all you need, doesn’t it feel like you can create a web app?
What we create is a Web Server.
A web app requires a web browser and a web server, but the web browser, such as Chrome or Edge, already exists.
So, what we’re going to create now is a web server .
Use Python
There are many programming languages that can be used to create a web server (see below), but here we will use Python.
Python allows you to create a web server without any special frameworks or libraries (although there are frameworks available).
This makes it easy to create a web server.
Web Server(1) Hello Word
First, let’s start with the basics of programming: Hello World. This is a simple web server that just displays Hello World.
Let’s write some code
Write it in Python. No special libraries are required. Just plain Python.
Save it as server.py.
from http.server import HTTPServer
from http.server import BaseHTTPRequestHandler
# Request Handler
class CustomHTTPRequestHandler(BaseHTTPRequestHandler):
# Get
def do_GET(self):
# Response Code
self.send_response(200)
self.send_header('Content-type', 'text/html; charset=utf-8')
self.end_headers()
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>First Web Server</title>'
' </head>'
' <body>'
' <p>Hello,World</p>'
' </body>'
'</html>'
self.wfile.write(html_context.encode())
# Address
server_address = ('localhost', 8080)
# Start Web Server
with HTTPServer(server_address, CustomHTTPRequestHandler) as server:
server.serve_forever()
Let’s run it
Once you’ve finished writing it, start the program with the following command.
python server.py
This will start the web server and it will wait for requests from the browser.
Launch your browser (Chrome or Edge). Type the following into the address bar:
http://localhost:8080
Now you will see Hello World in your browser.
What is going on?
During this process, the following is done:
- Start the Web Server Wait for requests from the web browser
- Enter URL in Web Browser The request is sent from the web browser to the web server.
- Web Server execution The processing is executed on the web server, and the resulting text is returned to the web browser.
- Web Browser display The received text is displayed in the web browser.
Code Explanation
What is happening in the program?
When the program starts, this is the first thing that runs.
# Address
server_address = ('localhost', 8080)
# Start Web Server
with HTTPServer(server_address, CustomHTTPRequestHandler) as server:
server.serve_forever()
- If a request comes in with server_address (localhost 8080)
- Call CustomHTTPRequestHandler
- I’ll be waiting for your request until then (serve_forever)
After this, it will wait patiently until you access it from your browser.
When there is access from the browser, do_GET of CustomHTTPRequestHandler will be executed.
The important part is the content (html_context).
# Get
def do_GET(self):
# Response Code
self.send_response(200)
self.send_header('Content-type', 'text/html; charset=utf-8')
self.end_headers()
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>First Web Server</title>'
' </head>'
' <body>'
' <p>Hello,World</p>'
' </body>'
'</html>'
self.wfile.write(html_context.encode())
The text you set here will be sent to the web browser as HTML text.
This is the HTML text that is sent. (To be precise, this is not the only thing that is sent).
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Web Server</title>
</head>
<body>
<p>Hello,World</p>
</body>
</html>
This is the text that your browser will display.
This is the simplest web server program.
Web Server(2) Clock App
If it’s just Hello, World, it’ll always display the same thing and look lonely.
Next, let’s create a clock app as an application with a changing display.
Write and run code
The code is almost the same as Hello, World. The difference is in creating the content.
The execution method is the same.
from http.server import HTTPServer
from http.server import BaseHTTPRequestHandler
import datetime
# Request Handler
class CustomHTTPRequestHandler(BaseHTTPRequestHandler):
# Get
def do_GET(self):
# Response Code
self.send_response(200)
self.send_header('Content-type', 'text/html; charset=utf-8')
self.end_headers()
# Current Time
dt_now = datetime.datetime.now()
dt_string = dt_now.strftime('%Y-%m-%d %H:%M:%S')
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>Clock</title>'
' </head>'
' <body>'
f' <p>Time:<strong>{dt_string}</strong></p>'
' <form id="myform method="get">'
' <input id="submit" type="submit" value="Display Time">'
' </form>'
' </body>'
'</html>'
self.wfile.write(html_context.encode())
# Address
server_address = ('localhost', 8080)
# Start Web Server
with HTTPServer(server_address, CustomHTTPRequestHandler) as server:
server.serve_forever()
Code Explanation
First, we create the current time as text.
# Current Time
dt_now = datetime.datetime.now()
dt_string = dt_now.strftime('%Y-%m-%d %H:%M:%S')
This current time text is embedded into the returned text in the form of a formatted string literal.
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>Clock</title>'
' </head>'
' <body>'
f' <p>Time:<strong>{dt_string}</strong></p>'
' <form id="myform method="get">'
' <input id="submit" type="submit" value="Display Time">'
' </form>'
' </body>'
'</html>'
We’ve also added a button here, which will submit the page when pressed.
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>Clock</title>'
' </head>'
' <body>'
f' <p>Time:<strong>{dt_string}</strong></p>'
' <form id="myform method="get">'
' <input id="submit" type="submit" value="Display Time">'
' </form>'
' </body>'
'</html>'
A submit is a request to update a page. When this happens, a request is sent to the web server, and the page is updated with the returned HTML text.
When the web server receives a request, it creates and returns the text based on the current time, so the display is updated with the current time.
The following HTML text is sent to the web browser:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
</head>
<body>
<p>Time:<strong>2023-6-1 12:34:56</strong></p>
<form id="myform method="get">
<input id="submit" type="submit" value="Display Time">
</form>
</body>
</html>
The dt_string is replaced with the actual time string sent to the Web browser.
Drawbacks of the Clock App
However, this clock application has a major drawback.
If you want to update automatically, you will need to make a request from your web browser at regular intervals.
However, there is nothing the web server can do about this, since the web server just waits for requests.
JavaScript, which controls the web browser
To update the clock automatically, a mechanism must be incorporated into the web browser.
This is where JavaScript comes in. Using JavaScript , you can implement tricks on the web browser side.
Web Server(3) Improved Clock App with JavaScript
We will improve the clock so that it updates automatically. JavaScript is here.
Code and how to run it
On the web browser side, we use JavaScirpt to create a mechanism that sends requests to the web server at regular intervals.
However, what I’m fixing is the content part on the Python side. The way to run it is the same.
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>Clock</title>'
' </head>'
' <body>'
f' <p>Time:<strong>{dt_string}</strong></p>'
' <form id="myForm" name="myForm" method="get">'
' <input id="submitButton" type="submit" value="Display Time">'
' </form>'
' <script>'
' function submitForm() {'
' document.myForm.submit();'
' }'
' setInterval(submitForm, 1000); '
' </script>'
' </body>'
'</html>'
It’s a strange code, like JavaScript inside of Python.
The HTML text sent to the web browser looks like this, with JavaScript code embedded in it:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
</head>
<body>
<p>Time:<strong>2023-6-1 12:34:56</strong></p>
<form id="myForm" name="myForm" method="get">
<input id="submitButton" type="submit" value="Display Time">
</form>
<script>
function submitForm() {
document.myForm.submit();
}
setInterval(submitForm, 1000);
</script>
</body>
</html>
How JavaScript works
This
JavaScript section does the following:
- It does not run in the Web Server.
- The JavaScript part is also sent to the web browser as text.
- After being sent to the Web Browser, the JavaScript part is executed in the Web Browser.
Let’s look at the JavaScript part.
function submitForm() {
document.myForm.submit();
}
setInterval(submitForm, 1000);
What I am doing is the following:
- setInterval tells the Web Browser to call submitForm every 1000 milliseconds (= 1 second).
- The Web Browser calls submitForm every second.
- submitForm executes submit , which updates the page.
With this mechanism, a submit is executed every second on the web browser side, and the clock is updated.
How to create a real web application?
So far, we have implemented a web server using Python. However, you can also create web apps using other languages besides Python.
What programming language is used to create a Web App?
The following are commonly seen as programming languages for creating web applications.
- HTML
- CSS
- Java
- JavaScript
- Python
- PHP
- Ruby
- Go
At this point, those new to programming may ask the following questions:
- Which is recommended for creating a web app: HTML, PHP, Ruby, Python, Java, or JavaScript?
Now that you’ve gotten this far in building a web server, you’ll probably realize that this question is a bit off-topic.
The programming language you use is not one
Even when developing a simple web application, two languages, Python and JavaScript , are used together.
- PHP, Ruby, Python, Java , etc. are languages used to create web servers, so this is a multiple choice.
- HTML and JavaScript are languages that run web browsers, so they are used separately from the web server.
In other words, instead of choosing one or the other, HTML and JavaScript are used in combination with PHP/Ruby/Python/Java, etc.
Frontend and Backend
“So, do I have to learn all the languages? ” The answer is no.
In actual development, teams are usually divided into “Web browser side” and “Web server side”.
This distinction is often referred to as “Front-End ” and “Back-End”.
- Front-End : Web browser side. Display processing is developed by combining HTML, CSS, and JavaScript.
- Back-End : Web server side. Developing behind-the-scenes processing using PHP, Ruby, Java, etc.
Front-End Engineers and Back-End Engineers are people who develop the respective areas mentioned above.
No, no, how do you develop them separately?
They say we should separate it into front-end and back-end, but with the code up until now,
- Even though it’s divided into Python and JavaScript, it’s written in the same source file!
- How to develop it separately?
Even though we are developing on the web browser side, the code must be embedded on the web server side.
A major challenge in web application development is how to separate the front end from the back end.
The solution to this is a Web Application Framework .
What is a Web Application Framework?
In web application development, a framework effectively separates the front-end from the back-end.
What does the framework do?
Separation of front-end and back-end
Looking at the time application, the following content parts are developed on the front end:
# Contents
html_context = '<html lang="en">'
' <head>'
' <meta charset="UTF-8">'
' <title>Clock</title>'
' </head>'
' <body>'
f' <p>Time:<strong>{dt_string}</strong></p>'
' <form id="myForm" name="myForm" method="get">'
' <input id="submitButton" type="submit" value="Display Time">'
' </form>'
' <script>'
' function submitForm() {'
' document.myForm.submit();'
' }'
' setInterval(submitForm, 1000); '
' </script>'
' </body>'
'</html>'
The back end is the rest.
However, there is one part that involves both the front end and the back end: the part where the time is embedded.
f' <p>Time:<strong>{dt_string}</strong></p>'
Web application frameworks are designed to allow these dynamic changes to be separated.
PHP Example
For example, if you create a clock app using PHP, it will look like this.
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<style>
body {
text-align: center;
font-size: 48px;
margin-top: 200px;
}
</style>
</head>
<body>
<?php
// Current Time
$currentTime = date('H:i:s');
// Display Time
echo $currentTime;
?>
</body>
</html>
The actual PHP program runs at <?php~?> and replaces the content with the processing result.
If you change this <?php~?> part to a call to another module, you can separate it.
Major Web Application Frameworks
Here are some common languages and frameworks used to create web servers.
- Java JSP / JSF / Thymeleaf (SpringBoot)
- Python Django / Flask
- PHP Laravel
- Ruby Ruby on Rails
The basic operation of “responding to a request from a browser” is the same regardless of the language/framework.
The only language for web browsers is JavaScript.
For web browsers, JavaScript is the only option, since browsers only support JavaScript.
However, there are some trends:
- WebAssembly can be used. WebAssembly can be developed in C++ and Rust.
- TypeScript may also become the browser standard
Summary
The essence of web applications
- Software for creating and displaying text
That’s it.
That’s all,
- Embed necessary information in the text (Web server processing)
- Include decoration instructions in the text (HTML)
- Insert code to be executed in the browser (JavaScript) in the text
This is where things get complicated because it requires things like:
To address this complexity, various languages and web frameworks have emerged.
If you correctly understand the essence of web applications, you will be able to fully understand the mechanisms of languages and frameworks.
Comments