checkmark

Django

Introduction to Django

What is Django How Django Works Installation and setup Creating Your First Django Project File Structure in Django Project Manage.py file in Django

Configuration in Settings File

Database Configuration No SQL Database Configuration Template Configuration Static Folder Configuration Media Configuration Tailwind Configuration

Apps in Django

Introduction Creating an app Routing app with project Displaying Welcome Message Rendering Template

Manage.py Commands

Help Command RunServer Command Shell Command Flush Command Creating Custom Command

Registration and Authentication - Default User Model

Introduction and Project Setup for User Authentication Routing authentication app with project Creating home page Restricting access to web page Register User Logout User Login User Redirection to Login Page Handling Next in Login

Models in Django

Characteristics of Models Creating a Model Interactive Shell for Model Operations String Representation for Model Generating Dummy Data Retrieving Data From Models Filters in Model Exclude in Models Field Lookups Q expressions Retrieving Single Record Updating A Record Updating Multiple Records Overriding save() method Annotate in Models F expressions Order By in Models Retrieving specific columns Prefetch particular columns alone Custom Methods in Model Data Types in Models One-To-One Relationship One-To-Many Relationship Many-to-Many Relationship Meta Class in Models Unique Parameter Static Method in Models

A basic Notes App

Introduction and Setup Configuring Templates and Static Folder Creating an app Creating Model Adding sample notes Display Notes Adding Note through form Edit Notes Delete a Note Display Bug Update Admin Panel Register Note Model Customize Admin Page Editing Fields in List Downloading Notes as CSV file

Data Types in Models

Data Type Demo App creation Char Field Text Field Integer Field Float Field Decimal Field

College Event Registration Website

CampusConnect Introduction and Setup Configuring settings file for template, static and media files Setting up Tailwind Creating Custom User Model Creating Super User for CampusConnect Registering Custom User Model Search and Filter for User Model Serving Media Files During Development Categorizing Departments Linking Department with HOD Creating Abstract Model for Event Creating Model for Workshop Customizing Admin Page for Workshop Update in Model AbstractEvent Adding Instructor for Workshop Instructor Model Admin Page Adding Poster Field in Abstract Event Providing Access to HOD Access Update for HOD Restricting HOD Access to Particular Department AbstractEvent On Spot Registration Field Creating Workshop Object Creating and Linking Home Page Displaying Workshop on Home Page Styling Home Page Adding Workshop Detail Page Link Workshop Detail Page Workshop Detail Page Styling Workshop Instructor Details Workshop Detail Contact Contact Admin Page Many to Many Field for Contact Displaying Contact on Workshop Detail Page Adding Title for Workshop Detail Page Adding Gallery for Workshop Workshop Gallery Admin Page Displaying Gallery Images on Website Through Context Displaying Gallery Images on Website through template tags Authentication for users User Registration User Registration Submission Logout Functionality For User Login Functionality for User Model For Workshop Registration Workshop Registration Admin Page Register Workshop Function Register Button in Workshop Page Validations Before Workshop Registration Workshop Registration Closed Validaiton User Already Registered for Workshop Validation Workshop Registration Report From Admin Page Export using Library in Django Admin Extending Abstract Event for Hackathons
menu Back to Edkool

Tailwind Configuration

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. Instead of relying on pre-defined components and styles, Tailwind encourages you to compose styles using utility classes for a more flexible and custom approach to styling your web applications.

First you need to install tailwind, this can be done using the following command :

pip install django-tailwind

alt text After tailwind is installed, it needs to be added inside the INSTALLED_APPS in settings.py file.

'tailwind',

After this, you can create a django compatible tailwind app using the following command :

python manage.py tailwind init

alt text You can give a custom name for your tailwind app, here we would leave it with theme itself. The following message would be displayed on the terminal :

Tailwind application 'theme' has been successfully created. Please add 'theme' to INSTALLED_APPS in settings.py, then run the following command to install Tailwind CSS dependencies: `python manage.py tailwind install`

As the message says, you need to add theme inside the INSTALLED_APPS.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tailwind',
    'theme',
]

Now you shall continue to register the theme app and specify the internal ips in the settings.py file.

TAILWIND_APP_NAME = 'theme'

INTERNAL_IPS = [
    "127.0.0.1",
]

After this, the tailwind css dependencies can be installed using the following command :

python manage.py tailwind install

alt textIf you get an error like this while running the command, the reason is Tailwind CSS requires Node.js to be installed on your machine. Node.js is a JavaScript runtime that allows you to run JavaScript code outside the browser. If you don't have Node.js installed in your system, you would need to install it first.

Sometimes, python is not able to find the npm binary installed on the system. In those cases it needs to specified manually in the settings.py file.

NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"

Add the line in the settings.py file and replace the path with the path of npm in your system. This path would be for windows.

For Linux/Mac :

NPM_BIN_PATH = '/usr/local/bin/npm'

After specifying the npm path, now try to run the command :

python manage.py tailwind install

alt textNow, tailwind is successfully installed and a folder named theme will be created which will contain all the necessary tailwind configuration.

The following tags needs to be added inside the template file for tailwind to be loaded.

{% load static tailwind_tags %}

and

{% tailwind_css %}

The {% tailwind_css %} tag loads the tailwinds stylesheet.

Finally you will be able to use tailwind css classes in your template file. You can start to build the tailwind css by running the following command :

python manage.py tailwind start

alt textNow whenever the tailwind classes are changed in the templates file, it will automatically keep rebuilding itself. You can open another terminal and start your development server using python manage.py runserver.

Previous Media Configuration
Next Introduction