Website using Django - ashBabu/Utilities GitHub Wiki

Open PyCharm. If you have Pycharm Professional, then File --> New Project --> Django. If you have Pycharm Community, then follow these steps *File --> New Project --> DjangoProject where DjangoProject is the folder where you want to create it

Use a virtual environment and install Django in it

  • Test if Django is installed by creating a new python file and import django print(django.get_version())

  • Open the terminal and cd to DjangoProject and enter

django-admin startproject mysiteName (AshPortfolio)

  • Run Server

cd AshPortfolio python manage.py runserver

You are able to start Django server at http://127.0.0.1:8000/

  • Create the application

cd AshPortfolio python manage.py startapp webappName (myContents)

  • Create superuser

python manage.py migrate

python manage.py createsuperuser and follow the instructions and go to http://127.0.0.1:8000/admin/

The startapp command above creates a folder with contents that has views.py. This is the one where it receives requests from client and forwards a repsonse.

  • settings.py-->TEMPLATES--> DIRS:[os.path.join(BASE_DIR, 'home/templates')]

  • Notes

<div class="container "> </div> centre aligns

  • Add HTML

Create myContents\templates\myContents\, add base.html (which can be copied in all other html files using {% extends 'myContents/base.html' %}. Use {% block content %} {% endblock %}

inside body tag in base.html and use {% block content %} <p> this is publications</p> {% endblock %}

in other html files to add content to the base file)

  • Add images

Inside myContents\static\myContents\images\ add images. Note myContents has to be there twice. Begin html file with the tag {% load static %} and use something like <a class="navbar-brand" href="#"> <img src="{% static 'myContents/images/AI_endoscopy.png' %}" width="30" height="30" alt=""> </a> to add images

<div class="navbar-nav mx-auto">
   <a class="nav-item nav-link active" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
</div>

Here mx-auto does centering. In myContents\urls.py , add

from django.urls import path
from . import views

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

In views.py 

from django.shortcuts import render

def index(request):
    return render(request, 'myContents/index.html')

def contact(request):
    return render(request, 'myContents/contact.html')
  • Adding database

In models.py

from django.db import models

class Student(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)

    def __str__(self):
        return self.first_name


class Contact(models.Model):
    email = models.EmailField()
    subject = models.CharField(max_length=196)
    message = models.TextField()

    def __str__(self):
        return self.email

In admin.py

from django.contrib import admin
from .models import Student, Contact

# Register your models here.

admin.site.register(Student)
admin.site.register(Contact)
  • Troubleshooting

Close server. Inside AshPortfolio, Run python manage.py makemigrations myContents python manage.py migrate. Start server again by python manage.py runserver

⚠️ **GitHub.com Fallback** ⚠️