Building a Learning Management Platform: Week 1

This week was all about laying a strong foundation for the learning platform. From designing core pages to implementing a secure login system and building features for blog post creation, I focused on creating a user-friendly, functional website.

Here’s a day-by-day breakdown of my progress and the features we developed.

Day 1: Setting up Basic Routes and Templates

The project began with setting up the essential routes and designing templates for key pages: Homepage, About Us, and Contact Us. The objective was to create a welcoming user interface, so I focused on layout and design consistency.

- Homepage: This page serves as the main landing area, introducing users to the platform's offerings and highlighting key features.

- About Us: Provides an overview of the platform’s mission, objectives, and team background.

- Contact Us: A simple form where users can reach out to the support team with questions or feedback.

I used HTML, CSS, and Bootstrap for styling to ensure a professional, responsive design that looks great across devices. By the end of Day 1, I developed a working framework for the primary pages, which set the stage for the rest of the project.

Day 2: Developing the Blog Route and Template

With the foundation in place, I focused on developing a blog feature to share updates, news, and educational content. The blog route connects to a simple template, and for demonstration purposes, I populated the page with dummy data from a MySQL database.

- Blog Route: The route fetches blog posts from the database and renders them on the blog page, displaying a title, author, and snippet of each post.

- Blog Template: A clean, easy-to-read design where blog posts are displayed in a grid layout. Each post links to its dedicated page for a full read.

This basic blog structure allows one to easily scale and add more complex functionalities in the future, such as categorizing posts or displaying the most popular posts.

Day 3: Creating a Secure Admin Login Page

Security is crucial, so I implemented a secure login system for admins to access the backend dashboard. The login system uses hashlib to hash passwords before storing them in the database, ensuring sensitive information is safeguarded.

- Admin Login Page: This page is designed with Bootstrap to maintain a consistent look and feel with the rest of the site.

- Redirect to Dashboard: Upon successful login, admins are redirected to a dashboard where they can manage blog posts, courses, and user accounts.

Day 4: Adding Blog Post Creation and Editing Functionality

I then developed the route that enabled admins to create and edit blog posts directly from their dashboard. Admins can input the post title, content, and category, while the author and date fields autofill based on the logged-in admin and the current date.

- Form Validation: I implemented basic validation checks to ensure data integrity.

- Auto-fill Functionality: Automatically populates certain fields to simplify the admin’s workflow.

This feature enhances efficiency, allowing admins to focus on content creation without manual input for repetitive fields.

Day 5: Styling the Blog Page and Individual Blog View Pages

To improve user experience, I focused on styling the main blog page and individual post view pages. Bootstrap and custom CSS were used to achieve a clean, visually appealing design.

- Main Blog Page: Displays all blog posts in an organized format, with a preview of each post's title and introduction.

- Individual Blog View: Clicking on a post title brings the user to a dedicated page where they can read the full article.

This cohesive design ensures that readers have an enjoyable experience and can easily navigate between posts.

Day 6: Adding Routes for Editing and Deleting Blog Posts

I added functionality for editing and deleting blog posts, empowering admins to fully manage blog content. These actions are accessible only to logged-in admins, adding a layer of privacy and control.

- Edit Blog Post: Allows admins to modify existing blog posts.

- Delete Blog Post: Admins can remove blog posts from the site if they’re outdated or no longer relevant.

These CRUD (Create, Read, Update, Delete) functionalities are essential for maintaining a dynamic and up-to-date blog.

Day 7: Embedding Videos and Blog Sorting

To add multimedia content, I created a route for adding embedded video links, specifically YouTube videos. Embedding videos allows admins to share educational content or tutorials alongside written posts.

- Video Embedding Feature: Admins input a YouTube embed link, which is saved in the MySQL database and displayed on the front end.

- Video Display Template: Videos are displayed in a responsive layout that integrates smoothly with other content.

Finally, I added filtering options to allow users to sort blog posts by category, date posted, and author. This enables readers to easily find relevant articles, enhancing the platform's usability and functionality.

- Filter by Category: Users can select specific categories to view only posts related to those topics.

- Sort by Date: Users can view the most recent or older posts based on their preferences.

- Filter by Author: Ideal for readers who follow specific authors on the platform.

With these filtering options, users can quickly access the content they’re interested in, making for a more customized and efficient experience.

Conclusion

Week 1 was highly productive as I established the core structure of the platform. With routes, templates, and essential features like secure login, blog management, and video embedding in place, I have built a solid foundation to expand upon. In the coming weeks, my goal is to enhance the user interface, add more features, and refine existing ones to provide a seamless experience for both users and admins.

Technologies I Used

- Flask: For backend routing and request handling.

- MySQL: To store and manage data, such as blog posts, videos, and user information.

- HTML/CSS: For structuring and styling web pages.

- Bootstrap: To ensure responsive, clean layouts and a professional design.

- hashlib: For secure password hashing and storage.

Keep looking out for more updates.