Create a django Project from scratch

We are going to create a complete django application from scratch it contains all scenarios

Download as pdf

Create Django Project

# Create a virtual environment
python -m venv env
# Activate the virtual environment
source env/bin/activate
pip install django
# Start the django project
django-admin startproject aws_demo_project 
cd aws_demo_project
# Create an app for our project
python manage.py startapp aws_app
# aws_demo_project/settings.py

INSTALLED_APPS = [
    ...
    
    'aws_app',
]
# aws_demo_project/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('aws_app.urls')),
]

Create a new file: aws_app/urls.py

# aws_app/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name="index"),
    path('<str:username>', views.greet, name='greet'),
]

We have not yet created the views so lets create that:

# aws_app/views.py

from django.shortcuts import render

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

def greet(request, username):
    return render(request, 'aws_app/greet.html', {
        "username" : username
    })

We have not yet created the templates so lets create it:

create aws_app/templates/aws_app/index.html and aws_app/templates/aws_app/greet.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>
    <h1>This is the main page</h1>
</body>
</html>

greet.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{username}}</title>
</head>
<body>
    <h1>Hello {{username}}</h1>
</body>
</html>

Now lets see whether this is working:
start the server by:

python manage.py runserver

In the browser go to http://localhost:8000
You can see the index.html

goto http://localhost:8000/rahul
you can see hello rahul

Which means everything is working.

Now lets create some database stuff:

First install mysql in the machine

sudo apt install mysql-server
sudo mysql_secure_installation

Now lets enter the mysql and create a new user

sudo mysql
CREATE USER 'rahul'@'localhost' IDENTIFIED BY '123456';
GRANT ALL PRIVILEGES ON *.* TO 'rahul'@'localhost' WITH GRANT OPTION;
exit

Now lets try to enter mysql using newly created user

mysql -u rahul -p

# Lets create a database
CREATE DATABASE aws_demo_db;

SHOW DATABASES;
#  This will show all the databases

Now lets come back to django

To connect django with mysql install mysqlclient

pip install mysqlclient

If this shows any error 

sudo apt-get install python-dev python3-dev
sudo apt-get install libmysqlclient-dev  
pip install mysqlclient
# aws_demo_project/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'aws_demo_db',
        'USER': 'rahul',
        'PASSWORD': '123456',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

Now lets migrate all the databases provided by the django itself, for that

python manage.py migrate

Now lets check the tables are created in the database, for that ,

mysql -u rahul -p
USE aws_demo_db;
SHOW TABLES;

#  You can see this, Thes are the tables created by django itself
+----------------------------+
| Tables_in_aws_demo_db      |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
+----------------------------+

Now lets create our own model !!

# aws_app/models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=50)
    content = models.TextField()
    image = models.ImageField(upload_to='uploads/')

    def __str__(self):
        return self.title

Inorder to add images we have to install pillow:

pip install pillow

Now lets migrate this to the database for that:

python manage.py makemigrations
python manage.py migrate

Now if you check the tables in our database you can see this table there!!

Django Admin

so inorder to add posts we want to access admin panel so lets create the admin site,

python manage.py createsuperuser

Inorder to add the model to the admin site:

# aws_app/admin.py

from django.contrib import admin
from .models import Post

admin.site.register(Post)

Now if you go to http://localhost:8000/admin/ You can see the Posts model there, You can add new post there

After uploading an image, you can see that image will be saved in the uploads folder in our project

Now lets render the details of database to our templates

# aws_app/views.py
from .models import Post

def posts(request):
    posts = Post.objects.all()
    return render(request, 'aws_app/posts.html', {
        "posts" : posts
    })

Now lets create the url for this view

# aws_app/urls.py

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

We didn't created the html page so lets create the template

create a new file `aws_app/templates/aws_app/posts.html

<!--posts.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posts</title>
</head>
<body>
    <h1>ALL POSTS</h1>
    
    {% for post in posts %}
        <div class="post">
            <h1>{{post.title}}</h1>
            <img src="{{post.image.url}}" alt="">
            <p>{{post.content}}</p>
        </div>
    {% endfor %}
</body>
</html>

Now lets add some styling for this webpage

create this folder: aws_app/css/index.css

Add this to index.css

.post{
    width: 60%;
    margin: auto;
	margin-bottom: 30px;
    background-color: #222;
    color: #fff;
    padding: 30px;
}
.post h1{
    color: #ffc107;
}
.post img{
    width: 300px;
}

{% raw %}

Now lets link this css to the posts.html For that add {% load static %} at the top of posts.html and inside head lets link the css by <link rel="stylesheet" href="{% static 'css/index.css' %}">

{% endraw %}

if you go to http://localhost:8000/posts/ You can see the posts that you have entered through the admin panel

If the styling doesnt happen, just restart the server, it will be fine But wait where is the image ???

inorder to render the image in webpage we have to do some additional stuffs :

# aws_demo_project/settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/uploads/'
# aws_demo_project/urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

now just restart the server and delete the posts that is created and also you can delete the uploads folder in your project folder

Now just create a new post and woow, you can see the posts in the webpage, at http://localhost:8000/posts/

Now before deploying the application we have to gather all the static files:

for that add this line to aws_demo_project/settings.py :

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Then to gather all the static files, just type:

python manage.py collectstatic

now you will see that a new static folder is created in the root directory of you project. This is similar to the media folder creted earlier, when we upload an image.

# aws_demo_project

ALLOWED_HOSTS = ['*']

Finally lets create a requirements.txt file by

pip freeze > requirements.txt

Now our project is ready for deployment