So we have our homepages app, but need to make it functional. That involves editing 7 files.
That probably sounds arduous - much more work than ftp-ing a folder of html as we used to in the "old days". Bear with it though, this ground work will simplify future additions and the maintenance of our site.
We need to tell our "project" that our "app" exists. To do this open the settings file, and find the line which says
INSTALLED_APPS = (
'django.contrib.admin',
'......
edit this to match the following
INSTALLED_APPS = (
'homepages',
'django.contrib.admin',
'......
NOTE - it is important to put this app above the other apps you have already enabled (or were enabled by default). This is because of the way that django will search looking for templates.
Remember the message about us not having any urls configured yet?
Let's put that right.
The file urls.py was created when you first started your project.
We need to alter the "urlpatterns" tuple within this file, so that our "app" urls are considered for matches when a user browses our site.
Edit this file to look like something like this....
from django.conf.urls import patterns, include, url
from django.contrib import admin
urlpatterns = patterns('',
url(r'^', include('homepages.urls')),
url(r'^admin/', include(admin.site.urls)),
)
Again put this near the top of that list to ensure our urls are caught before any other matches
Now let's edit the urls.py file we added to our homepages app, and just told the project about. We are going to add 2 pages - a "home" page and an "about" page.
Insert this text into the file
from django.conf.urls import patterns, url
from homepages import views
urlpatterns = patterns(
'',
url(r'^$',
views.HomeView.as_view(),
name='home/home'),
url(r'^about$',
views.AboutView.as_view(),
name='home/about'),
)
What we have now done is told django where to look if someone visits http://our-site.com or http://our-site.com/about the trouble is... the views we have pointed to do not yet exist!
Let's sort that next.
If you open up this file, it should already contain something like...
from django.shortcuts import render # Create your views here.
Delete all of that (we are going to use class based views, so don't need the render function).
Change the file so that it contains the following.
from django.views.generic import TemplateView
class HomeView(TemplateView):
template_name = "homepages/home.html"
class AboutView(TemplateView):
template_name = "homepages/about.html"
We have created the two python classes which our urls now point at.
Nearly there.... we now need to create the templates that those classes use.
Hold the phone.... no one mentioned base.html
Django templates are a variant on html syntax. It is customary to use the ".html" suffix for them all, and this has the benefit that text editors will syntax highlight them. However, they are capable of MUCH more (dynamic lookups, replacements, for loops, conditional statements etc...). Above all of this they can be "inherited" or "included" by/in other templates.
Our "base.html" will be the daddy of them all, giving us a common menu for all pages which inherit from it.
You can search the web for "HTML5 boilerplate django" at a later date. For now, let's use a trivial base.html.
You WILL be editing this file a lot!
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{% block title %}MyProject{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="MyProject">
<meta name="keywords" content="MyProject">
<meta name="author" content="{% block author %}YOUR NAME{% endblock %}">
<link rel="shortcut icon" href="{% static 'favicon.ico' %}" />
</head>
<body>
{% block content %}
<h1>THIS PAGE HAS NO CONTENT!</h1>
<p>sorry!</p>
{% endblock %}
<ul>
<li><a href="{{ ROOT_URL }}" title="MyProject Homepage">Home</a></li>
<li><a href="{{ ROOT_URL }}about">About</a></li>
</ul>
</body>
</html>
So base.html is horrid, agreed? And what we have just witnessed is about as simple as it gets in the modern html world. However, let's reap the benefits by editing home.html
{% extends 'base.html' %}
{% block content %}
<h1>HOME PAGE</h1>
<p>Not much to see here yet though....</p>
{% endblock %}
much easier, and trivial to add to later.
{% extends 'base.html' %}
{% block content %}
<h1>ABOUT</h1>
{% endblock %}
And that's all done (for now) - let's test it!
Page 5 of 8.