This device is not compatible.

PROJECT


Build an E-Learning Website Using Flask

In this project, we’ll build an e-learning course catalog website with a built-in search functionality. We’ll develop the web application with the Flask framework and the SQLAlchemy database. In the end, we’ll have a fully functional e-learning website built on Flask.

Build an E-Learning Website Using Flask

You will learn to:

Apply the fundamentals of Flask

Create and use the database using SQLAlchemy

Write dynamic HTML with Bootstrap

Use Model-View-Controller (MVC) architecture

Configure routes, models, views, and controllers

Bind the SQLAlchemy with Flask

Skills

Web Frameworks

Database

Web Development

Prerequisites

Intermediate knowledge of Flask and templates

Basic understanding of Python 3

Basic understanding of SQLAlchemy

Basic understanding of MVC patterns

Technologies

Flask

Python

Bootstrap

Project Description

In this Flask project, we’ll develop an e-learning course catalog website to display the list of all courses on the website. Each course will have the following:

  • A title
  • An image
  • An author
  • A description
  • A “Visit Website” button

The website will also allow users to search the available courses with a search bar.

The figure below shows a preview of the website’s final layout:

An interface of the project

We will build this project step-by-step. We’ll begin by implementing the course catalog. Next, we’ll fetch the data from seeds into the SQLAlchemy database, and then load it into active records.

Once the layout is designed, we’ll add the search functionality to our web application. When a user searches the name of a course, our application will search the keyword in all existing course titles and display the relevant courses.

Project Tasks

1

Create Course Listings

Task 0: Get Started

Task 1: Configure Database

Task 2: Create a Database

Task 3: Create a Course Model

Task 4: Load Data from the `.json` File

Task 5: Create a Base View

Task 6: Create a Course View

Task 7: Add the Course Routes

2

Create a Search Bar

Task 8: Add a Search Bar

Task 9: Add a Search Controller

Congratulations!