Django mini project github free download

django 3+ mini project

In this blog, I’m setting up a Django mini project. Where I’m going to tell you how URLs, views, and templates interact with each other. So this will be one of the small Django example projects you can say.

So this blog will be useful for those who are doing their studies in Information Technology and having Python subject in their curriculum. If they got any assignment on python mini project so they can use this Django mini project. As well as any fresher who wants to make a career in python they can also use this Django open source projects.

Introduction

If you are reading this article, that means I’m assuming you have some basic knowledge about Python & Django. As we know Django is a Web-based Framework that is written in Python and this is based on MVT(Model View Template) pattern.

model view template pattern

The Process to create a Django mini project

To start any python-based framework we have to follow common steps of installation. So if you have done with all the installation then Cheers!!.

If you have not yet done with this installation then you can refer my previous blogs. The links are below.

Django Installation on Windows machine

https://techpluslifestyle.com/technology/how-to-install-django-3-on-windows

Django Installation on Ubuntu Linux machine

https://techpluslifestyle.com/technology/how-to-install-django-3-on-ubuntu/

Let’s start with our Django mini project and understand the workflow of the MVT pattern.

django-admin startproject project_name

To start a Django mini project we need django-admin command-line utility with startproject command with the project name.

Write the below command in the command line which will create default files that we required in the Django mini project.

django-admin startproject my_profile

Running Application Locally

Command to run the application locally.

python manage.py runserver

By default, the application will run on 8000 port. If you want to run on different ports just run with below command.

python manage.py runserver 0.0.0.0:8080

If without any error your application is running that means you have successfully created the Django project and you achieved the first stage, the creation of the Django mini project.

Let’s start with a Django mini project. In this blog, we are going to learn how to create a basic Django mini project without using any database. We are checking how to render templates and  how to use variables in Django templates.

Settings Module

As you can see in the above image which files are created at the time of the creation of the Django mini project. So now we will check the setting file configuration.

As you know setting.py is the auto-generated file that contains project-related configuration like database related information if any, middleware, one random SECRET_KEY, DEBUG mode, etc…

Let’s create a templates folder where you can add all HTML related files. Create this folder at the inner my_profile folder level.

After the creation of the ‘templates’ folder, we have to configure the templates part in the settings file. In Short when Django serves any templates in its application then that template folder should be pointed to the setting file.

In the settings file, there is a Template variable where the dictionary is declared. In that DIRS key, we have to write os.path.join(BASE_DIR, ‘templates’) this code. So BASE_DIR will be the path of your project and we will attach the template folder to it.

Now we will create our landing page.

Home Page Coding

Let’s create the view file to write the back-end code. This file we have to create in the inner of my profile folder and then we will write a function for the landing page.

Add URL for the home page

add the below code in urlpatterns.

path('',  views.index, name='home'),

Function for landing page

from django.shortcuts import render

def index(request):
    context= {'name': 'Emma SILVA', 'about':'SOFTWARE DEVELOPER & GAME ADDICT'}
    return render(request, "index.html",  context)

Index Template

Add index.html file to templates folder.

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>My Profile</title>
<link rel="icon" type="image/png" href="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body  {
  background-image: url(https://images.pexels.com/photos/3815729/pexels-photo-3815729.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
  background-color: #cccccc;
  background-size: 100%;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="home page-template page-template-template-homepage page-template-template-homepage-php page page-id-18">
    <div id="wrapper" class="clearfix" style="margin-left:45%;margin-top:20%">
        <div id="headerwrap">
            <div class="container" style="color:white">
                <div class="row">
                    <div class="col-lg-9 col-lg-offset-3">
                        <h4>HELLO PEOPLE, MY NAME IS</h4>
                        <h1>{{name}}</h1>
                        <h4>{{about}}</h4>
                    </div>
                </div>
            </div>
        </div>
        <a href="{% url 'about' %}" class="btn btn-light" style="font-weight: 500;margin-top: 5%;margin-left: 2%;">Check My Full Profile</a>
    </div>
</body>
</html>

If you run above code then you will get below result.

django 3+ mini project

About Page Coding

In this feature, we are covering an introduction part of the user profile.

Add URL for about page

path('about/', views.about, name='about'),

Function for about page

Add the function below to the views.py file. In this function you have to send the information related to the user to the template, so that this information you can show on the front end.

def about(request):
    context = {'name': 'Emma SILVA', 'skills': ['Python','Java','PHP','.Net'], 'user_id':'emma123',
               'email':'emma@gmail.com', 'about':'SOFTWARE DEVELOPER & GAME ADDICT', 'phone': '0000000000', 'profession': 'Software Developer'}
    return render(request, "about.html", context)

About Template

Add about.html in template folder.

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>

<style>
body{
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.emp-profile{
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
    border-radius: 0.5rem;
    background: #fff;
}
.profile-img{
    text-align: center;
}
.profile-img img{
    width: 70%;
    height: 100%;
}
.profile-img .file {
    position: relative;
    overflow: hidden;
    margin-top: -20%;
    width: 70%;
    border: none;
    border-radius: 0;
    font-size: 15px;
    background: #212529b8;
}
.profile-img .file input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
}
.profile-head h5{
    color: #333;
}
.profile-head h6{
    color: #0062cc;
}
.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}
.proile-rating{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
}
.proile-rating span{
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}
.profile-head .nav-tabs{
    margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
    font-weight:600;
    border: none;
}
.profile-head .nav-tabs .nav-link.active{
    border: none;
    border-bottom:2px solid #0062cc;
}
.profile-work{
    padding: 14%;
    margin-top: -15%;
}
.profile-work p{
    font-size: 12px;
    color: #818182;
    font-weight: 600;
    margin-top: 10%;
}
.profile-work a{
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}
.profile-work ul{
    list-style: none;
}
.profile-tab label{
    font-weight: 600;
}
.profile-tab p{
    font-weight: 600;
    color: #0062cc;
}

</style>
<body>
<div class="container emp-profile">
    <a style="float:right" href="{% url 'home' %}" class="btn btn-primary">Back</a>
    <div class="row">
        <div class="col-md-4">
            <div class="profile-img">
                <img src="https://images.pexels.com/photos/2453104/pexels-photo-2453104.jpeg?cs=srgb&dl=photo-of-woman-wearing-maroon-beanie-2453104.jpg&fm=jpg" alt=""/>
            </div>
        </div>
        <div class="col-md-6">
            <div class="profile-head">
                <h5>
                    {{name}}
                </h5>
                <h6>
                    {{about}}
                </h6>
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="profile-work">
                <p style="margin-left: 40px;">SKILLS</p>
                <ul>
                    {% for each in skills %}
                        <li style="color:black;font-size:15px;">{{each}}</li>
                    {% endfor %}
                </ul>

            </div>
        </div>
        <div class="col-md-8">
            <div class="tab-content profile-tab" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="row">
                        <div class="col-md-6">
                            <label>User Id</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{user_id}}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Name</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{name}}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Email</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{email}}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Phone</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{phone}}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Profession</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{profession}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Profile page will be look like below image.

You can also clone or download django mini projects github. Check below link.

https://github.com/pranalikambli/django_mini_app

In my up coming blog I’m going to cover How to run a Django project downloaded from github? or How to download django project from github?. Stay connected with us.

I hope you understand each and every step of How to create django app (django mini project) process. If you still have any query do comment below.

If you have any requirement related to Python application and any other technology related projects do contact us on contact@techpluslifestyle.com

Leave a Comment