Table of Contents
- Introduction
- Prerequisites
- Setup and Software
- Step 1: Creating a Flask Web App
- Step 2: Designing the User Interface
- Step 3: Implementing User Authentication
- Step 4: Managing Course Content
- Step 5: Tracking User Progress
- Conclusion
Introduction
In this tutorial, we will learn how to build a Python application for e-learning using the Flask web framework. We will create a web app that allows users to access courses, track their progress, and interact with course materials. By the end of this tutorial, you will have a basic understanding of building a web app with Flask and implementing user authentication.
Prerequisites
Before starting this tutorial, you should have a basic understanding of Python programming language and web development concepts. Familiarity with HTML, CSS, and JavaScript is helpful but not required.
Setup and Software
To follow along with this tutorial, you will need to have the following software installed on your machine:
- Python 3
- Flask
- SQLAlchemy
- Flask-WTF
- Flask-Login
You can install these dependencies using pip:
shell
pip install flask sqlalchemy flask-wtf flask-login
Once you have the necessary software installed, we can start building our e-learning app.
Step 1: Creating a Flask Web App
To begin, let’s create a new directory for our project and set up a virtual environment:
shell
mkdir elearning
cd elearning
python3 -m venv venv
Activate the virtual environment:
shell
source venv/bin/activate
Next, we’ll install Flask and create the main application file:
shell
pip install flask
touch app.py
Open app.py in a text editor and import the necessary modules:
```python
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'Welcome to our E-Learning App!'
if __name__ == '__main__':
app.run(debug=True)
``` Run the Flask app:
```shell
python app.py
``` You should see the message "Welcome to our E-Learning App!" when you visit http://localhost:5000 in your web browser.
Step 2: Designing the User Interface
Now that we have the basic Flask app set up, let’s design the user interface using HTML and CSS. We’ll create templates for the different views of our app.
Create a new directory called templates:
shell
mkdir templates
cd templates
In this directory, create a file called base.html:
shell
touch base.html
Open base.html and add the following code:
```html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<header>
<h1>E-Learning App</h1>
<nav>
<a href="/">Home</a>
<a href="/login">Login</a>
<a href="/register">Register</a>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
``` This code defines the basic structure of our app's pages, including a header with navigation links and a main content area.
Next, create a file called home.html:
shell
touch home.html
Open home.html and add the following code:
```html
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h2>Welcome to our E-Learning App!</h2>
{% endblock %}
``` This code extends the `base.html` template and overrides the title and content blocks to display the home page content.
Repeat the same process for the login.html and register.html templates. Make sure to change the title and content to match the respective pages.
Step 3: Implementing User Authentication
To add user authentication functionality to our app, we’ll use Flask-Login and SQLAlchemy.
First, create a new directory called models:
shell
mkdir models
cd models
In this directory, create a new file called user.py:
shell
touch user.py
Open user.py and add the following code:
```python
from flask_login import UserMixin
from werkzeug.security import generate_password_hash, check_password_hash
from . import db
class User(UserMixin, db.Model):
__tablename__ = 'users'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(100), unique=True, nullable=False)
password_hash = db.Column(db.String(128), nullable=False)
def set_password(self, password):
self.password_hash = generate_password_hash(password)
def check_password(self, password):
return check_password_hash(self.password_hash, password)
``` This code defines a User model with username and password fields. It also includes methods for setting and checking the password using hashed values.
Next, open app.py and update it to include the necessary imports and configuration to use Flask-Login and SQLAlchemy:
```python
from flask import Flask, render_template
from flask_login import LoginManager
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///elearning.db'
db = SQLAlchemy(app)
login_manager = LoginManager(app)
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
# ...
if __name__ == '__main__':
app.run(debug=True)
``` This code initializes the Flask app with a secret key and sets up the SQLAlchemy database connection. It also configures the login manager to load the user from the database based on the user_id.
Step 4: Managing Course Content
Now that we have our basic app structure and user authentication implemented, let’s add the ability to manage course content.
First, create a new directory called courses:
shell
mkdir courses
cd courses
In this directory, create a new file called course.py:
shell
touch course.py
Open course.py and add the following code:
```python
from . import db
class Course(db.Model):
__tablename__ = 'courses'
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
description = db.Column(db.Text, nullable=False)
``` This code defines a Course model with title and description fields.
Next, open app.py and add the following routes and functions to manage courses:
```python
from flask import Flask, render_template, request, flash, redirect, url_for
from flask_login import LoginManager, login_user, logout_user, login_required
from flask_sqlalchemy import SQLAlchemy
from .models.user import User
from .models.course import Course
# ...
@app.route('/courses')
@login_required
def courses():
courses = Course.query.all()
return render_template('courses.html', courses=courses)
@app.route('/create-course', methods=['GET', 'POST'])
@login_required
def create_course():
if request.method == 'POST':
title = request.form['title']
description = request.form['description']
course = Course(title=title, description=description)
db.session.add(course)
db.session.commit()
flash('Course created successfully!', 'success')
return redirect(url_for('courses'))
return render_template('create_course.html')
@app.route('/delete-course/<int:course_id>', methods=['POST'])
@login_required
def delete_course(course_id):
course = Course.query.get_or_404(course_id)
db.session.delete(course)
db.session.commit()
flash('Course deleted successfully!', 'success')
return redirect(url_for('courses'))
``` These routes handle displaying a list of courses, creating a new course, and deleting a course. We also added authentication decorators to ensure only logged-in users can access these routes.
Step 5: Tracking User Progress
Lastly, let’s implement the functionality to track user progress within a course.
Open app.py and update the Course model to include a relationship with the User model:
```python
from flask_login import UserMixin
from werkzeug.security import generate_password_hash, check_password_hash
from . import db
class User(UserMixin, db.Model):
__tablename__ = 'users'
# ...
courses = db.relationship('Course', secondary='progress')
class Progress(db.Model):
__tablename__ = 'progress'
user_id = db.Column(db.Integer, db.ForeignKey('users.id'), primary_key=True)
course_id = db.Column(db.Integer, db.ForeignKey('courses.id'), primary_key=True)
completed = db.Column(db.Boolean, default=False)
``` This code creates a many-to-many relationship between the `User` and `Course` models through the `Progress` model.
Next, let’s add a route to mark a course as completed.
Update app.py with the following route:
```python
@app.route(‘/complete-course/
if course in current_user.courses:
progress = Progress.query.filter_by(user_id=current_user.id, course_id=course.id).first()
progress.completed = True
db.session.commit()
flash('Course marked as completed!', 'success')
return redirect(url_for('courses'))
``` This route checks if the current user has access to the course and updates the progress accordingly.
Conclusion
In this tutorial, we have built a basic Python app for e-learning using the Flask web framework. We started by creating a Flask app and designing the user interface using HTML and CSS templates. We then implemented user authentication using Flask-Login and SQLAlchemy. Furthermore, we added functionality to manage course content and track user progress within the courses.
With this foundation, you can expand and customize the app to suit your specific e-learning needs. Some potential enhancements could include adding multimedia support, enabling discussions between users, and implementing a recommendation system based on user progress.
Remember to explore the Flask and SQLAlchemy documentation for additional features and best practices.
Happy coding!