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

Creating and Linking Home Page

As the workshop object has been created, that can now be displayed on the website for students to view it and register for it. In this topic you would see how you can create a home page and link it with a url.

To start we shall create a base.html file in the templates folder and link it with tailwind css which has already been installed.

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static tailwind_tags %}
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    {% tailwind_css %}
</head>
<body class="bg-gray-900 text-white font-sans">

    <nav class="bg-gray-800 p-4">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-3xl font-semibold">Campus Connect</h1>
        </div>
    </nav>

    <div class="container mx-auto mt-8">
        {% block content %}{% endblock %}
    </div>

    <footer class="bg-gray-800 p-4 mt-8">
        <div class="container mx-auto">
            <p class="text-center">&copy; 2023 Campus Connect. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

Here base.html file is created with a basic template, navbar and a footer. The navbar and footer section would be updated further as the tutorial proceeds.

Now this base.html file is ready to be extended in other templates. Continuing this, we shall create an event folder inside the templates folder and create a home.html file inside it.

{% extends 'base.html' %}

{% block title %}
Campus Connect
{% endblock %}

{% block content %}

    <h2 class="text-2xl font-semibold mb-4">Upcoming Workshops</h2>


{% endblock %}

The home.html file extends the base file and contains the title and content for that page. For now, it only contains a text saying Upcoming Workshops.

In order to link this file with a url, a function needs to be created and this file needs to be rendered with that function. Inside the event/views.py file,

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'event/home.html')

The function just renders the content of the home.html file as such.

This function needs to be linked with the urls.py file. For this in the CampusConnect/urls.py file, we will link it with all the urls of the event app and create a separate urls.py file for the event app.

Inside the CampusConnect/urls.py, we will add the following line :

from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include('event.urls')),
]

So now, the event app is linked with the projects urls. Now you can create a urls.py file inside the event app and all its urls will be linked with the project.

Inside the event/urls.py create the url patterns as such:

from django.urls import path
from .import views

urlpatterns = [
    path("", views.home, name='home'),
]

This will link the home function with the specified path. Now if you run the server and visit http://localhost:8000/, you will see a web page like this. Before running the server make sure to run the following command in another terminal :

python manage.py tailwind start

This is responsible for interpreting the tailwind css classes and styling it appropriately. alt textOnce its done, you will see a web page like this. alt text Further, in the upcoming sections you will see how you can display the workshop and other events on the home page.

Previous Creating Workshop Object
Next Displaying Workshop on Home Page