↓Skip to main content

To-Do List App - Part 1

·887 words·5 mins
Programming Web Application Python
A fun way to start making real applications is to create a Web App. Instead of a stand-alone program, your application will run in a web browser. During development you can run it on your own computer, but once it is finished, you can also deploy it online. That way, everyone can use your application without having to download it. Another advantage is that you can use your app on any device and with any operating system, as long as you can use a browser.

If you want to create a program with a graphical user interface (GUI), you can either use a GUI library, or write a web application. In this project, we will create a web application. The user interface will be running in your browser, so you basically have to create web pages. For our first web app, we will write a to-do list. For this application, the logic is fairly simple: we just have to display a list of to-do items and be able to add or delete them. Instead of writing a complex application, we can focus on the technical things we will need.

Since we are using a browser, we don’t need to learn a complicated GUI library, but we do need to know how websites work. Don’t worry, we will go through all the details of what we need. First, let’s think about what a to-do app needs:

  • we will show a list of to-do items
  • we need to be able to add a new item, so we also need an input box to type in the item
  • we also want to be able to delete items
  • it would be nice if we could mark items as ‘done’

I think that covers the basic functionality. Of course there are improvements that we can add later:

  • it should look nice
  • maybe we want to keep track of when an item has to be finished
  • or when a done item was completed
  • if you deploy your app, we should make sure that not everybody can access your list
  • maybe multiple users can have their own lists

In order to write any web application, we need to know how they work. Let’s start with the basics.

What you see in your browser are web pages. These pages are written in HTML and CSS. The HTML-file contains the content of the web page, along with markup to indicate the role of the content. For example, if a text is a header or a regular paragraph of text. If you look at a web page, you can probably identify different types of text: menu items, headers, text paragraphs, links, tables, a copyright message in the footer, and so on. Usually the type is clear from how they look, but HTML is only about the text type. So the HTML page does define if a text is a header or part of a table, but not what it should look like. This is where CSS comes in. A CSS file defines what all the elements should look like, for example that headers should have a large font in a certain colour, and that links are blue and underlined.

When you visit a web page in your browser, a request is sent to a server. That will be the computer where your web application is running. That can be your own computer, but usually your app will be running somewhere else. For example, if you have your own website hosting, you can run your applications on the server of your hosting provider.

The server determines what the visitor is requesting. This can be a certain fixed page, but it can also be a page filled with personal data about that visitor. The server can either send a standard page (HTML and CSS), or build a personal page by creating a custom HTML page with specific data. For our app, we need to build the HTML page by filling it with the current list of to-do items of the visitor.

Backend rendering

For our app we will use ‘backend rendering’. That means that our app will retrieve the data (our to-do list) and use it to create our HTML page. It then sends that completed HTML page to the browser of the user.

For now, we will be ignoring JavaScript. JavaScript a programming language that runs in the browser of the visitor. By using JavaScript, it is possible to run part of the app in the browser. The browser part will then only retrieve the data (such as the to-do list) from the server, and create the HTML page itself.

Fortunately, we don’t need to build everything from scratch. We will build our app using Flask, and we can simplify the CSS part by using an existing CSS framework so our app will look good on both mobile and on large computer screens.

Flask is a simple but powerful Python web application framework. It will take care of the server part, routing (sending different url’s to the correct page), and it contains a template engine that makes filling the HTML pages with data much easier.

We will cover everything you need to know about Flask, but you can always refer to the Flask documentation .

In the next section , we will have a closer look at Flask.

↑