[What is a web app?] It’s actually simple, let’s create a simple web app with Python

what-is-webapp

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.

TOC

What is a web app?

What is a web app? Its essence is,

What is a Web App?

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 app characters
  • 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 don’t press the button, the time won’t update.

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.

Major programming languages ​​for creating web servers
  • HTML
  • CSS
  • Java
  • JavaScript
  • Python
  • PHP
  • Ruby
  • Go

At this point, those new to programming may ask the following questions:

Questions about web apps
  • 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”.

Frontend and Backend
  • 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.

Major programming languages ​​for creating 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.

Let's share this post !

Comments

To comment

CAPTCHA


TOC