Online Learning Portal

—

by

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 codepython 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).

Comments

Leave a Reply Cancel reply