A. Open the PowerShell on Windows.

1. mkdir 'Website'

2. cd Website

3. mkdir 'PersonalWebsite'

4. cd PersonalWebsite

5. (for creating virtual environment)

-virtualenv . OR virtualenv -p python3 .

(and if virtualenv is not installed, we should install it first)

-pip install virtualenv

6. (Then activate virtualenv)

- .\scripts\activate

7. (Now install Django)

-pip install django==2.0.7

8. (For fresh start, in new PowerShell Windows begin the steps 2,4, and 6 again.)

(You can also look for Django version installed using the command 'pip freeze' in same path.)
# Creating Blank Django project

1. cd Website/PersonalWebsite

2. .\scripts\activate

3. django-admin startproject 'trydjango' .

4. python manage.py runserver

Or

(Go to the project folder and inside src folder we type "python manage.py runserver" to run server in
PowerShell)

# Setting up the Admin for Django project.

(In new PowerShell Windows)

1. cd Website/PersonalWebsite

2. .\scripts\activate

3. python manage.py migrate

4. python manage.py createsuperuser

# App Component

(In new PowerShell Windows)

1. cd Uthon/trydjango

2. .\scripts\activate

3. python manage.py startapp 'mysite' (we can create as many apps we need)

4. In PersonalWebsite<settings.py<Installed apps add " 'mysite', "........(We should do this whenever we

created new app)

5. In 'mysite', we create 'templates' directory.

6. Again in mysite>templates we create 'mysite' directory.

7.In mysite>templates>mysite, we create 'base.html', 'index.html', 'portfolio.html', 'contact.html' and

‘thank.html’

8. In mysite we create the following folders:

- mysite/static/mysite/images

And in mysite/static/mysite/images, will keep images we need for web development.

9. In mysite\views.py:

from django.shortcuts import render

import requests, json

from .models import Contact

def index(request):

if request.method == 'POST':

firstname = request.POST.get('fname')

lastname = request.POST.get('lname')

print(firstname)

r= requests.get('http://api.icndb.com/jokes/random?firstName=' + firstname + '&lastName=' +

lastname)

json_data = json.loads(r.text)

joke = json_data.get('value').get('joke')

context = {'joker': joke}

return render(request, 'mysite/index.html', context)

else:

firstname = 'Uttam'

lastname = 'Joshi'

print(firstname)

r = requests.get('http://api.icndb.com/jokes/random?firstName=' + firstname + '&lastName=' +

lastname)

json_data = json.loads(r.text)
 joke = json_data.get('value').get('joke')

context = {'joker': joke}

return render(request, 'mysite/index.html', context)

def portfolio(request):

return render(request, 'mysite/portfolio.html')

def contact(request):

if request.method == "POST":

email_r = request.POST.get('email')

subject_r = request.POST.get('subject')

message_r = request.POST.get('message')

c = Contact(email=email_r, subject=subject_r, message=message_r)

c.save()

return render(request, 'mysite/thank.html')

else:

return render(request, 'mysite/contact.html')

- In mysite app we create a folder 'urls.py'

- In mysite>urls.py:

from django.urls import path

from . import views

urlpatterns = [

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

path('portfolio', views.portfolio, name='portfolio'),

path('contact', views.contact, name='contact'),

- And in PersonalWebsite>urls.py

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('', include('mysite.urls')),

]
10. In mysite/models.py:

from django.db import models

# Create your models here.

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
- And in terminal down there:

python manage.py makemigrations

python manage.py migrate

(Remember to Run migration commands if changes are made to models.py)

OR, in PowerShell:

cd Website/PersonalWebsite

scripts/activate

python manage.py makemigrations

python manage.py migrate

-In mysite/admin.py:

from django.contrib import admin

from .models import Student, Contact

# Register your models here.

admin.site.register(Student)

admin.site.register(Contact)
Note: If we figured out any problem during Django, we simply delete 'mysite/migrations/0001_initial.py'
and 'db.sqlite3' folder but if we have numerous data we do not delete db.sqlite3.

- We have to use migration commands(will create deleted database folders again) again and
create superuser again if we deleted db.sqlite3 and 0001_initial folders respectively.

python manage.py migrate

python manage.py makemigrations

python manage.py migrate

python manage.py createsuperuser

NOTE1:- To access project object from shell, we write a command on PowerShell :

-python manage.py shell

-from mysite.models import Student, Contact

-Student.obejects.all()

-Contact.obejects.all()

NOTE2: We can also create object directly from the Powershell command:

-Student.objects.create(first_name='Danearys', last_name='Targerean')

-Contact.objects.create(email='noidea@gmail.com', subject='Miss you', message='Hello')

(Another method to create and save is)

a=Contact(email='noidea@gmail.com', subject='Miss you', message='Hello')

a.save()
- Sample of base.htm, index.html, portfolio.html and contact.html codes:

-In mysite>templates>mysite>base.html:

{% load static %}

<!doctype html>

<html lang="en">

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<title>Dear World!</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

 <div class="container">

<a class="navbar-brand" href="#">

<img src="{% static 'mysite/images/pic.png' %}" width="70" height="70" alt="">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav mx-auto">

<li class="nav-item active">

<a class="nav-link" href="{% url 'home' %}">Home <span class="sr-

only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link" href="{% url 'portfolio' %}">Portfolio</a>

</li>

<li class="nav-item">

<a class="nav-link" href="{% url 'contact' %}">Contact</a>

</li>

</ul>

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link social" href="https://www.facebook.com/uttam.joshi.338">

<img src="{% static 'mysite/images/facebook.png' %}" width="40" height="40" alt="">

</a>

</li>

<li class="nav-item">

<a class="nav-link social" href="https://twitter.com/Uttamjoshi1463">

 <img src="{% static 'mysite/images/twitter.png' %}" width="40" height="40" alt="">

</a>

</li>

<li class="nav-item">

<a class="nav-link social" href="https://www.instagram.com/wootam1463">

<img src="{% static 'mysite/images/instagram.png' %}" width="40" height="40" alt="">

</a>

</li>

</ul>

</div>

</div>

</nav>

{% block content %}

{% endblock %}

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

crossorigin="anonymous"></script>

</body>
</html>

-In mysite>templates>mysite>index.html:

{% extends 'mysite/base.html' %}

{% block content %}

<div class="container">

<div class="row" style="margin-top: 100px">

<div class="col-sm-6">

<form class="form-inline" action="{% url 'home' %}" method="post">

{% csrf_token %}

<label class="sr-only" for="inlineFormInputName2">First Name</label>

<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2"

placeholder="First Name" name="fname">

<label class="sr-only" for="inlineFormInputName2">Last Name</label>

<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2"

placeholder="Last Name" name="lname">

<button type="submit" class="btn btn-secondary mb-2">Tell me a Chuck Norris Joke!</button>

</form>
 </div>

<div class="col-sm-6">

<div class="card" style="width: 40rem;">

<div class="card-body">

<h5 class="card-title">Chuck Norris</h5>

<p class="card-text">

{{ joker }}

</p>

<a href="{% url 'portfolio' %}" class="card-link">Check out my portfolio</a>

</div>

</div>

</div>

</div>

</div>

{% endblock %}
-In mysite>templates>mysite>portfolio.html:

{% extends 'mysite/base.html' %}

{% load static %}

{% block content %}

<div class="container" style="margin-top: 100px">

<div class="card-deck">

<div class="card">

<img class="card-img-top" src="{% static 'mysite/images/unopinion.png' %}" alt="Card image

cap">

<div class="card-body">

<h5 class="card-title">Unopinion</h5>

<p class="card-text">This is my startup whose aim is help Youtube content creators achieve
success..</p>

<p class="card-text">

<small class="text-muted">www.unopinion.com</small>

</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="{% static 'mysite/images/firefight.jpg' %}" alt="Card image cap">

<div class="card-body">

<h5 class="card-title">FireFight</h5>

<p class="card-text">IOT Application to help firefighters. Includes Facial Tracking and

Environment

detection</p>
 <p class="card-text">

<small class="text-muted">Internet of Things</small>

</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="{% static 'mysite/images/kupika.jpg' %}" alt="Card image cap">

<div class="card-body">

<h5 class="card-title">Kupika</h5>

<p class="card-text">Smart Container for Babies - IOT based Application and hardware</p>

<p class="card-text">

<small class="text-muted">Android Developement</small>

</p>

</div>

</div>

</div>

</div>

{% endblock %}
-In mysite>templates>mysite>contact.html:

{% extends 'mysite/base.html' %}

{% block content %}

<div class="container">

<div class="row">

<div class="col-sm-6 mx-auto" style="margin-top: 70px">

<form action="{% url 'contact' %}" method="post">

{% csrf_token %}

<div class="form-group row">

<label for="example-email-input" class="col-2 col-form-label">Email</label>

<div class="col-10">

<input name="email" class="form-control" type="email" id="example-email-input">

</div>

</div>

<div class="form-group row">

<label for="example-email-input" class="col-2 col-form-label">Subject</label>

<div class="col-10">

<input name="subject" class="form-control" type="text">

</div>

</div>

<div class="form-group row">

<label for="example-email-input" class="col-2 col-form-label">Message</label>

<div class="col-10">

<textarea name="message" class="form-control"></textarea>

 </div>

</div>

<div class="pull-right">

<button type="submit" class="btn btn-primary float-right">Submit</button>

</div>

</form>

</div>

</div>

</div>

{% endblock %}

- In mysite/templates/mysite/thank.html:

{% extends 'mysite/base.html' %}

{% block content %}

<p>Thank you, I'll get back to you as soon as I can.</p>

{% endblock %}