Creating a Content Management System

In the previous chapter, you created the application models for the e-learning platform and learned how to create and apply data fixtures for models. You created a custom model field to order objects and implemented user authentication.

In this chapter, you will learn how to build the functionality for instructors to create courses and manage the contents of those courses in a versatile and efficient manner.

You will be introduced to class-based views, which offer a new perspective to build your application compared to the function-based views you have built in previous examples. You will also explore code reusability and modularity through the use of mixins, which are techniques that you can apply in future projects.

In this chapter, you will learn how to:

• Create a content management system (CMS) using class-based views and mixins
• Build formsets and model formsets to edit course modules and module contents
• Manage...

Functional overview

Figure 13.1 shows a representation of the views, templates, and functionalities that will be built in this chapter:

Figure 13.1: Diagram of functionalities built in Chapter 13

In this chapter, you will implement different class-based views. You will create the mixin classes OwnerMixin, OwnerEditMixin, and OwnerCourseMixin, which will contain common functionality that you will reuse in other classes. You will create CRUD (Create, Read, Update, Delete) views for the Course model by implementing ManageCourseListView to list courses, CourseCreateView to create courses, CourseUpdateView to update courses, and CourseDeleteView to delete courses. You will build the CourseModuleUpdateView view to add/edit/delete course modules and ModuleContentListView to list the module’s contents. You will also implement ContentCreateUpdateView to create and update course contents and ContentDeleteView to delete contents. You will finally implement a drag-and-drop...

Creating a CMS

Now that you have created a versatile data model, you are going to build the CMS. The CMS will allow instructors to create courses and manage their content. You need to provide the following functionality:

• List the courses created by the instructor
• Create, edit, and delete courses
• Add modules to a course and reorder them
• Add different types of content to each module
• Reorder course modules and content

Let’s start with the basic CRUD views.

Creating class-based views

You are going to build views to create, edit, and delete courses. You will use class-based views for this. Edit the views.py file of the courses application and add the following code:

from django.views.generic.list import ListView
from .models import Course
class ManageCourseListView(ListView):
    model = Course
    template_name = 'courses/manage/course/list.html'
    def get_queryset(self):
        qs = super().get_queryset()
  ...

Managing course modules and their contents

You are going to build a system to manage course modules and their contents. You will need to build forms that can be used for managing multiple modules per course and different types of content for each module. Both modules and their contents will have to follow a specific order and you should be able to reorder them using the CMS.

Using formsets for course modules

Django comes with an abstraction layer to work with multiple forms on the same page. These groups of forms are known as formsets. Formsets manage multiple instances of a certain Form or ModelForm. All forms are submitted at once and the formset takes care of the initial number of forms to display, limiting the maximum number of forms that can be submitted and validating all the forms.

Formsets include an is_valid() method to validate all forms at once. You can also provide initial data for the forms and specify how many additional empty forms to display. You can learn...

Reordering modules and their contents

We will implement a JavaScript drag-and-drop functionality to let course instructors reorder the modules of a course by dragging them. Drag-and-drop enhances the user interface, offering a natural way to reorder elements that is more intuitive than using numbers or clicking buttons. It is also a time-saver for course instructors, who will be able to reorganize course modules and their contents easily.

To implement this feature, we will use the HTML5 Sortable library, which simplifies the process of creating sortable lists using the native HTML5 Drag and Drop API.

When users finish dragging a module, you will use the JavaScript Fetch API to send an asynchronous HTTP request to the server that stores the new module order.

You can read more information about the HTML5 Drag and Drop API at https://www.w3schools.com/html/html5_draganddrop.asp. You can find examples built with the HTML5 Sortable library at https://lukasoppermann.github.io...

Summary

In this chapter, you learned how to use class-based views and mixins to create a CMS. You acquired knowledge about reusability and modularity that you can apply to your future applications. You also worked with groups and permissions to restrict access to your views, gaining insights into security and how to control actions on data. You learned how to use formsets and model formsets to manage course modules and their content in a flexible manner. You also built a drag-and-drop functionality with JavaScript to reorder course modules and their contents with an improved user interface.

In the next chapter, you will create a student registration system and manage student enrollment in courses. You will also learn how to render different types of content and improve the performance of your application by caching content using Django’s cache framework.

Additional resources

The following resources provide additional information related to the topics covered in this chapter:

• Source code for this chapter: https://github.com/PacktPublishing/Django-5-by-example/tree/main/Chapter13
• Django mixins documentation: https://docs.djangoproject.com/en/5.0/topics/class-based-views/mixins/
• Neapolitan package to create CRUD views: https://github.com/carltongibson/neapolitan
• Creating custom permissions: https://docs.djangoproject.com/en/5.0/topics/auth/customizing/#custom-permissions
• Django formsets: https://docs.djangoproject.com/en/5.0/topics/forms/formsets/
• Django model formsets: https://docs.djangoproject.com/en/5.0/topics/forms/modelforms/#model-formsets
• HTML5 Drag and Drop API: https://www.w3schools.com/html/html5_draganddrop.asp
• HTML5 Sortable library documentation: https://github.com/lukasoppermann/html5sortable
• HTML5 Sortable library examples: https://lukasoppermann.github.io/html5sortable...