🌐

Quick Start Guide for Django

Jun 22, 2024

Quick Start Guide for Django

Introduction

  • Django: A popular Python-based framework for web development.
  • Objective: Simplify Django setup and connect all pieces together (HTML, CSS, JavaScript).
  • Presenter: Maria from Python Simplify.

Setting Up Django Development Environment

Creating a Virtual Environment

  • Use Anaconda (or another method) to create a new environment: conda create -n django_qs python=3.9 conda activate django_qs conda install -c anaconda django # or pip install django

Creating Django Project

  • Create a new directory for the project: mkdir django_qs cd django_qs
  • Start a new Django project: django-admin startproject myproject
  • Navigate to the project directory and run the development server: cd myproject python manage.py runserver
  • Access the server at: localhost:8000 (default) or specify a port python manage.py runserver 8080.

Creating a Django App

  • To terminate server: Ctrl + C
  • Start a new app inside the project: python manage.py startapp myapp
  • Create a templates directory in the app and add an HTML file (index.html): mkdir myapp/templates echo "<p>Can you read this?</p>" > myapp/templates/index.html

Linking Templates Directory

  • Update settings.py to include template directory path: import os TEMPLATES = [ { ... 'DIRS': [os.path.join(BASE_DIR, 'myapp/templates')], ... }, ]

Views and URL Routing

  • Define a view function in views.py to render the template: from django.shortcuts import render def myview(request): return render(request, 'index.html')
  • Create urls.py in the app and map the view function: from django.urls import path from . import views urlpatterns = [ path('myview/', views.myview, name='myview'), ]
  • Link app URL configurations in myproject/urls.py: from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('myapp/', include('myapp.urls')), ]

Adding Static Files (CSS and JavaScript)

CSS

  • Create a static directory in the app, and then a css directory within it with a style sheet: mkdir myapp/static mkdir myapp/static/css echo "*{background-color: slategray; text-align: center; color: white;}" > myapp/static/css/style.css
  • Update settings.py to include the static directory path: STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'myapp/static') ]
  • Add a link to the CSS file in the HTML template: <!DOCTYPE html> <html> <head> <title>First Django App</title> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> </head> <body> <p>Can you read this?</p> </body> </html>

JavaScript

  • Create a js directory within the static directory and a script file: mkdir myapp/static/js echo "console.log('yoyoyo');" > myapp/static/js/script.js
  • Add a script tag to link the JS file in the HTML template: <script type="text/javascript" src="{% static 'js/script.js' %}"></script>

Running the Server

  • Navigate to the project directory and run the server: python manage.py runserver
  • Access the server at: localhost:8000/myapp/myview
  • To remove 'myview' from URL, update myapp/urls.py path to empty string and rerun the server.

Conclusion

  • Django setup complete with HTML rendering, styled with CSS, and added JavaScript functionality.
  • Encourage viewers to share, like, comment, and subscribe.

Full transcript