Skip to content

Instantly share code, notes, and snippets.

@prodeveloper
Created June 7, 2017 13:41
Show Gist options
  • Save prodeveloper/b8288a7ebe1b380f00bd021b9886d67c to your computer and use it in GitHub Desktop.
Save prodeveloper/b8288a7ebe1b380f00bd021b9886d67c to your computer and use it in GitHub Desktop.
Rendering basic html using Django

In the last class, we were able to successfully show some text on the homepage.

This was just a simple text “Welcome to Akirachix”

In this class, we will look at how to show not just a simple text but a html page. By the end of the class, you should be able to integrate elements from your frontend class directly into django.

Django refers to your html files as templates.

##Step 1

The first thing we need to do is tell Django where our templates will be. Open your settings.py file and locate the list called TEMPLATES

To the DIRS list, add the folder where you intend to put in your templates (html files).

With the directory registered, you now need to create it. It’s simply another folder within the akirachix module folder

Now name the folder templates so that Django can find it.

##Step 2

Now that our folder is created, lets go ahead and start populating it. We will transfer the welcome message to a welcome_students.html page.

Inside the templates folder. Create a new file called welcome_students.html

Let us now put in some welcoming message to the document. Type the following html into it

This is just the usual html that you learnt from the frontend class.

##Step 3

With all the content ready, we would now want to show our html on the browser. Lets go back to our views.py file and now return this html

Start your project and load the browser

You notice your new page now renders. You can also inspect element on the browser to see the raw html sent back by the server.

##Assignment

Using bootstrap, make your welcome message look good. Use the getting started guide here http://getbootstrap.com/getting-started/

Your page should look like this

##Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment