Directory Structure
online_learning_portal/
│
├── app.py
├── templates/
│ ├── base.html
│ ├── index.html
│ └── course.html
└── static/
└── style.css
1. Setting Up the Flask App
app.py
from flask import Flask, render_template, url_for, redirect
app = Flask(__name__)
# Sample data for courses
courses = [
{'id': 1, 'title': 'Python for Beginners', 'description': 'Learn Python from scratch!'},
{'id': 2, 'title': 'Web Development with Flask', 'description': 'Build web applications using Flask.'},
]
@app.route('/')
def index():
return render_template('index.html', courses=courses)
@app.route('/course/<int:course_id>')
def course(course_id):
course = next((c for c in courses if c['id'] == course_id), None)
return render_template('course.html', course=course)
if __name__ == '__main__':
app.run(debug=True)
2. Creating the HTML Templates
templates/base.html
<!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>Online Learning Portal</title>
</head>
<body>
<header>
<h1>Online Learning Portal</h1>
<nav>
<a href="{{ url_for('index') }}">Home</a>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>&copy; 2024 Online Learning Portal</p>
</footer>
</body>
</html>
templates/index.html
{% extends 'base.html' %}
{% block content %}
<h2>Available Courses</h2>
<ul>
{% for course in courses %}
<li>
<a href="{{ url_for('course', course_id=course.id) }}">{{ course.title }}</a> - {{ course.description }}
</li>
{% endfor %}
</ul>
{% endblock %}
templates/course.html
htmlCopy code{% extends 'base.html' %}
{% block content %}
<h2>{{ course.title }}</h2>
<p>{{ course.description }}</p>
<a href="{{ url_for('index') }}">Back to Courses</a>
{% endblock %}
3. Adding Some Basic Styles
static/style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background: #007BFF;
color: white;
padding: 1rem;
}
nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
}
footer {
text-align: center;
padding: 1rem;
background: #f1f1f1;
position: relative;
bottom: 0;
width: 100%;
}
4. Running the App
- Navigate to the project directory.
- Run the app using the command:bashCopy code
python app.py - Open your web browser and go to
http://127.0.0.1:5000/.
Future Enhancements
- User authentication (login/signup).
- Course content management (videos, quizzes).
- Database integration (like SQLite or PostgreSQL) for persistent data storage.
- A more complex frontend (using frameworks like React or Vue.js).
Online Learning Portal