Prerequisites
- Python 3.x
- Flask
- SQLite (for simplicity, though you can use any database)
- HTML/CSS knowledge
Project Structure
arduinoCopy codee_learning/
│
├── app.py
├── templates/
│ ├── base.html
│ ├── index.html
│ ├── login.html
│ ├── register.html
│ └── courses.html
├── static/
│ └── style.css
└── database.db
Step 1: Install Flask
Make sure you have Flask installed:
bashCopy codepip install Flask
Step 2: Create app.py
This file will contain the main application logic.
pythonCopy codefrom flask import Flask, render_template, redirect, url_for, request, session
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
app = Flask(__name__)
app.secret_key = 'your_secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)
# Database model
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
password = db.Column(db.String(120), nullable=False)
class Course(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(200), nullable=False)
description = db.Column(db.String(500), nullable=False)
db.create_all()
# Routes
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
user = User.query.filter_by(username=username).first()
if user and check_password_hash(user.password, password):
session['user_id'] = user.id
return redirect(url_for('courses'))
return render_template('login.html')
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form['username']
password = generate_password_hash(request.form['password'], method='sha256')
new_user = User(username=username, password=password)
db.session.add(new_user)
db.session.commit()
return redirect(url_for('login'))
return render_template('register.html')
@app.route('/courses')
def courses():
if 'user_id' not in session:
return redirect(url_for('login'))
courses = Course.query.all()
return render_template('courses.html', courses=courses)
if __name__ == '__main__':
app.run(debug=True)
Step 3: Create HTML Templates
base.html
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>E-Learning Platform</title>
</head>
<body>
<header>
<h1>E-Learning Platform</h1>
<nav>
<a href="{{ url_for('index') }}">Home</a>
{% if 'user_id' not in session %}
<a href="{{ url_for('login') }}">Login</a>
<a href="{{ url_for('register') }}">Register</a>
{% else %}
<a href="{{ url_for('courses') }}">Courses</a>
<a href="{{ url_for('logout') }}">Logout</a>
{% endif %}
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
index.html
htmlCopy code{% extends 'base.html' %}
{% block content %}
<h2>Welcome to the E-Learning Platform</h2>
<p>Your journey of learning starts here!</p>
{% endblock %}
login.html
htmlCopy code{% extends 'base.html' %}
{% block content %}
<h2>Login</h2>
<form method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
{% endblock %}
register.html
htmlCopy code{% extends 'base.html' %}
{% block content %}
<h2>Register</h2>
<form method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
{% endblock %}
courses.html
htmlCopy code{% extends 'base.html' %}
{% block content %}
<h2>Available Courses</h2>
<ul>
{% for course in courses %}
<li>{{ course.title }}: {{ course.description }}</li>
{% endfor %}
</ul>
{% endblock %}
Step 4: Create CSS File
style.css
cssCopy codebody {
font-family: Arial, sans-serif;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
h2 {
color: #333;
}
form {
display: flex;
flex-direction: column;
max-width: 300px;
}
Step 5: Run the Application
- Initialize the database:bashCopy code
pythonThen run:pythonCopy codefrom app import db db.create_all() exit() - Start the Flask app:bashCopy code
python app.py - Open your browser and go to
http://127.0.0.1:5000.
Leave a Reply