Creating Django Personal App – Part 2

So far we have created the home page of our personal application. Let’s modify the template so it will contain all the other pages including a link holder to the blog page.

I am going to use Bootstrap and some custom CSS styling.

Creating the header.html file

The header.html file is our template. It will be part of all of the other pages of the website.

I have modified the header.html file. It contains links to the Bootstrap files necessary for styling the appearance of the website, custom styling for the footer (I wanted the footer to stick to the bottom if the content of the page doesn’t fill the entire page), a header, and a navigation bar.

Here you have the entire header.html file.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>John Lee | Marketing Specialist</title>

<!-- load static files -->
{% load staticfiles %}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->

<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
	text-align: center;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text-muted {
  margin: 20px 0;
}
</style>

</head>
<body>
<div class="container">

	<!-- site header -->
		<div class="row">
			<div class="col-md-12" style="padding-bottom: 30px; text-align: center;">
				<h1>John Lee  <small>Marketing Specialist</small></h1>
			</div>
		</div>


	<!-- site menu -->
	<div class="row">
		<div class="col-md-12" id="main-menu">
			<nav class="navbar navbar-default">

					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="about">About</a></li>
						<li><a href="portfolio">Portfolio</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="contact">Contact</a></li>
					</ul>

			</nav>
		</div>
	</div>


	<div>
		{% block content %}
		{% endblock %}
	</div>

</div>


<footer class="footer">
	<div class="container">
		<p class="text-muted">copyright information</p>
	</div>
</footer>

</body>
</html>

Notice the navigation menu; it contains the links to the other pages.

Creating the about.html file

I have created the about.html page and below is the entire code:

{% extends "personal/header.html" %}

{% block content %}

<h2>About</h2>
<div>
<p>The Lorem Ipsum text goes here</p>
</div>

<!--
    {% include "personal/includes/snippet.html" %}
-->
{% endblock %}

I have commented out the part that includes the snippet.html. I don’t need it now.

Creating the view for the about.html page

I have created the view for the about page, the same as we created the index.

from django.shortcuts import render

# Create your views here.

from django.shortcuts import render

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

def about(request):
	return render(request, 'personal/about.html')

Creating the url patterns for the about.html file

Of course, I also added to the urlpatterns in the urls.py file the URL to the about view.

from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^about$', views.about, name='about'),
]

Creating the other files

The same way as I created the about view, url, and template, go ahead and add the portfolio and contact page.

Here is what I have at the end:

The file personal/views.py

from django.shortcuts import render

# Create your views here.

from django.shortcuts import render

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

def about(request):
	return render(request, 'personal/about.html')

def portfolio(request):
	return render(request, 'personal/portfolio.html')

def contact(request):
	return render(request, 'personal/contact.html')

The file personal/urls.py

from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^about$', views.about, name='about'),
    url(r'^portfolio$', views.portfolio, name='portfolio'),
    url(r'^contact$', views.contact, name='contact'),
]

The file portfolio.html

{% extends "personal/header.html" %}

{% block content %}

<h2>Portfolio</h2>

<div style="padding-bottom: 30px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
    Quisque suscipit bibendum magna ac sagittis. Sed cursus malesuada nulla ut porta..</p>
</div>

<div class="row">

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project One"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project One</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Amet numquam aspernatur eum quasi sapiente nesciunt?</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Two"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Two</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Three"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Three</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Four"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Four</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
                euismod odio, gravida pellentesque urna varius vitae. Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Five"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Five</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
                euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Six"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Six</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum
                nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Seven"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Seven</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
                euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="http://placehold.it/150x100" alt="Project Eight"></a>
            <div class="card-body">
              <h4 class="card-title">
                <a href="#">Project Eight</a>
              </h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Eius adipisci dicta dignissimos neque animi ea, veritatis, provident hic.</p>
            </div>
          </div>
        </div>

</div>

<!--
    {% include "personal/includes/snippet.html" %}
-->
{% endblock %}

The file contact.html

{% extends "personal/header.html" %}

{% block content %}

<h2>Contact</h2>
<div>
<p>This is the contact page<br>
We will add a contact form here.</p>
</div>

<!--
    {% include "personal/includes/snippet.html" %}
-->
{% endblock %}

Here we will add a contact form so the users will be able to contact us easily.

Here are screenshots for each of the pages we have created.

hone.html

Home page with Django

about.html

About page with Django

portfolio.html

Portfolio page with Django

contact.html

Contact page with Django

The contact page will contain a contact form.
For the blog part we are going to create a new app and it will be done differently.

Leave a Reply