Django 5 + Integration with Vue 3 and Bootstrap 5

U1: Introduction to Django

• Introduction
• Required Software
• Check the access command for Python 3 and Pip
• Prepare the environment
• Install Django
• Project vs Application
• Project structure
• Hello World
• Command line in Django
• MTV
• Optional: Select the Python interpreter in VSC and/or create venv

U2: Getting started with Python (Reinforcement)

• Introduction
• Interactive console/Python console
• Python Files
• Variables and data types
• Mathematical operations
• String Concatenation
• Castings
• Lists
• Conditionals
• Cycles
• Functions
• Functions part 2
• Dictionaries
• Classes, First steps
• Classes, First classes
• Classes, Constructor Method
• Classes, Inheritance

 U3: Create a CRUD type application

• Introduction
• Models
• Challenge: Create a comment template
• Introduction to migrations
• View database
• Reversing migrations
• Render a template
• Passing parameters to the template
• Container folders for templates
• Shortcut, help functions
• Forms and handling requests from the view/controller
• Create a model object and register it in the database
• Templates for forms
• Database operations
• Shell
• CRUD: List
• CRUD: Edit
• CRUD: Delete
• Redirects
• Pagination
• Find or 404: Detail
• Find or 404: Listings
• Faker: First tests
• Faker: Create script
• Publish on Github

 U4: Django Admin

• Introduction
• Presentation
• Create super user
• Adding our own relationships
• Customize query options
• Customize save options
• Registering classes using a decorator
• Register the model for types and categories
• Register the model for the elements
• Group management fields, fields
• Group management fields, fieldset
• Customize form fields
• Create customizable fields
• Save Options
• Online models
• Customize CRUD management methods
• Custom validations
• Create element slug automatically in → Django admin
• Theme and static CSS, JS files...
• Publish on Github

U5: Forms

• Introduction
• Presentation
• Form for the elements
• View to process the form
• Challenge: Create a ModelForm for the elements
• List
• Validations: Introduction
• Show validation errors
• Extra: Route correction
• Custom validations
• Reference form fields and labels individually
• Form Assets (Media class): Introduction
• Form Assets (Media class): Widget attribute
• Form Assets (Media class): Widget class
• Form Assets (Media class): Widget class part 2
• Form Assets (Media class): Field types
• Form Assets (Media class): Modify attributes
• Form Assets (Media class): Django widgets
• field group
• Publish on github

U6: Templates: Master templates, labels and filters

• Introduction
• Presentation
• Master template
• Reusing templates from other applications
• Include templates or fragments
• Template fragments and parameters
• Other uses of blocks in templates
• Logical tags: if and for, presentation
• Programming our own labels
• Filters: Presentation
• Filters: cut
• Filters: date
• Filters: now
• Filters: lower
• Filters: upper
• Filters: add
• Filters: with
• Filters: cycle
• Filters: default
• Filters: length
• Filters: safe
• Filters: join
• Nested Filters
• Programming our own filters
• Switching template engine - Jinja2
• Publish on Github

U7: Working with QuerySets

• Introduction
• Create an object
• Get an object
• Update an object
• Recovering objects
• Filter objects
• Exclude results
• Order
• Deleting objects

U8: Create a Rest API with Django Rest Framework

• Introduction
• Presentation
• Install package and configure
• Define serialization
• Define viewset (view)
• Routes
• Testing with the Rest Api
• Problems when creating/updating an item
• Customizing ViewSets classes
• Enable pagination
• many=true, inverse relationship
• Custom methods for serializations
• Custom methods for viewsets
• Hooks methods in viewsets
• Authentication: Presentation
• Authentication: Session and Basic
• Authentication: Token: Base Configuration
• Authentication: Token: Login function
• Authentication: Token: Login function
• Setting up CORS
• Publish on github

U9: Application with Vue 3, NaiveUI, consume Rest API

• Introduction
• Vue CLI
• Create the project
• Install and configure Vue Router
• Install axios and first request
• Create a repository in git
• Create a category listing
• Task: Create a list of types
• Navigation between pages
• About, Install, Configure and First Test with Naive UI
• Table component for categories and types
• Space: Container
• Layout: Basic skeleton
• Menu: with menu component
• Menu: Set up RouterLink
• Adapt menu in a separate component
• Menu: Dynamic Listing Options
• Header for categories and types
• Buttons for RouterLink
• Integrate Tailwinds.css
• Adapt visual details
• List of items
• Extra: Group routes
• List of items by category
• Task: Listing elements by type
• Extra: Introduction to overriding the NaiveUI theme
• Detail view of the elements
• Publish to git

U10: Application in Vue 3: CRUD and forms

• Introduction
• Form for categories, initial structure
• Form for categories, create
• Form for categories, error handling
• Form for categories, edit
• Task: Form for types
• Form for elements, initial scheme
• Form for elements, create lists
• Integrate CKEditor
• Enabling CKEditor CSS
• Publish to git

U11: View 3: Adjustment

• Enable category and type menu options
• Arrange date elements
• Redirect in Vue Router
• Visual changes
• Multiple router-views: Title at the base

U12: Class-Based Views (CBV): Book Web

• Introduction
• Create project and application
• Create initial model
• Create initial form
• Create the first CBV to manage the form and success
• UpdateView: Update
• CreateView: Create
• DeleteView: Delete
• DetailView: Detail
• IndexView: List
• Publish to git

U13: Class-Based Views (CBV): Authentication

• Introduction
• LoginView: View for login
• LogoutView: View for logout
• PasswordChangeView: View to change password
• PasswordChangeRest: View to change reset password
• Publish on github

U14: Managing files

• Introduction
• Presentation
• Create a project and application
• CSV: Getting started
• CSV: Read
• CSV: Read, Dictionary
• CSV: Write a file
• CSV: Write a file
• Close file and reserved word with
• XLSX: Create Application
• XLSX: Read
• XLSX: Write
• Generate PDFs: Create application
• Generate PDFs: Generate a PDF from an HTML page
• Generate PDFs: Weasyprint other options
• Generate PDFs: Generate a PDF from a Canvas
• Circles, rectangles and lines, colors...
• Download any existing file
• Download PDF, reporlab
• Publish on github

U15: Django Channels: Single Channel

• Introduction
• Django Channels, Presentation
• Create project and install dependencies
• Setting up project and server with channels[daphne]
• Create sample models and sample data
• Consumer: First steps and creation
• Client (View and Template): Base structure
• Client (View and Template): WebSocket, Open Channel
• Client (View and Template): WebSocket, Terminal implementation
• Install Bootstrap 5
• Setting up application with B5
• Publish on github

U16: Django Channels: Multiple Channels

• Introduction
• Presentation
• Redis: MacOS
• Redis Channels: Install
• Redis Channels: Configure
• Changes to the chat application: Part 1
• Changes in the chat application: Sending messages
• Changes in the client
• Converting the consumer to asynchronous code
• Publish on Github

U17: DRF, Django Channels and Vue: Alert Messages Application

• Introduction
• Presentation
• Necessary installations and configurations
• Alert template
• Alert serialization
• Authentication using tokens
• Check previous methods
• Consumer
• Create project in Vue
• Install and configure dependencies in Vue
• Vue Component: Login
• Vue Component: Logout
• Component for sending and receiving messages
• Middleware for token authentication at the consumer level: Theory
• Middleware for token authentication at the consumer: Base structure
• Middleware for token authentication at the consumer level
• Display alert messages per user
• Applied design
• Room selection
• Final touches
• Publish on github
• Extra: Block textarea when connecting to websocket and show loading message
• Extra: Destroy authentication token on the server

U18: Tests

• Introduction
• Presentation
• Mathematical tests
• Prepare environments
• What are we going to try?
• Test Client in Django, first steps
• Test Client in Django using classes
• TestCase: setup
• Tools for performing tests
• Context of unit testing
• Comments Crud: Index
• Review
• Comment Crud: Create - Get
• Comment Crud: Create - Post
• Challenge: Comment Crud: Update
• Challenge: Comment Crud: Delete
• Other assertion methods: assertRedirects
• Other assertion methods: assertTemplateUsed
• Other assertion methods: assertHTMLEqual
• Forms: Fields
• Forms: Valid
• Forms: Invalid
• Forms: Create
• Forms: Update
• Improve the file and folder structures of tests
• Run certain tests
• Api: Paginated
• API: Detail
• Api: Detail with Serialization
• Api: Create
• API: Update
• Api: Delete
• Try CommentSerializer
• API: Form with validation errors
• Api: Prepare class
• Api: Paginated
• Api: Format JSON
• Api: Create Element
• Api: Update Element
• API: Form with validation errors
• Api: Delete Item
• Try ElementSerializer
• Authentication
• Factory
• Publish on github

U19: Custom Authentication

• Introduction
• Create project and application
• Expose authentication routes
• Override login template
• Run migrations and create superuser
• next parameter
• Enable static files
• Install Bootstrap and Fontawesome
• Create a master template
• Specifying HTML attributes with django-widget-tweaks
• login.html
• Alert message
• password_change_form.html
• password_change_done.html
• password_reset_form.html
• password_reset_done.html
• Extra: Sending emails, configuring Mailtrap
• password_reset_confirm.html
• password_reset_complete.html
• Register: Initial structure of the view
• Register: Form
• Register: Initial structure of the view
• Demo: Register: Custom Form
• Profile: Base structure
• Upload avatar: Model
• Upload avatar: Define form
• Upload avatar: Use form
• Upload avatar: Search existing userprofile
• Upload avatar: Set MEDIA_ROOT
• Upload avatar: Remove previous avatar image
• Upload avatar: File validations (avatar)
• Other fields: Model, Form and Migration
• Other fields: Template
• Show profile information: Authenticated user
• Show profile information: Avatar
• Publish on github

U20: Signals

• Introduction
• Presentation
• Implement a signal
• Publish on github

Course evaluation

• This course contains a final exam

G-Tools: For Students

• Exclusive access to cutting-edge student tools: improve your employability, participate in exclusive events, take advantage of our intelligent virtual assistant, and more.

⚑ Certificate of completion

• Your personalized digital certificate, a unique badge of your achievements, with international validity, course duration and QR code for instant verification.