Django Tutorial Part #2
What Django Tutorial Part #1 Covered:
- Downloading Python, Django
- Creating first Django project
- Finding a text editor ( I Hope you made the right choice and went with Atom!)
- Creating our first application inside our project.
If you haven’t done these yet, please check out Django Tutorial Part #1
What Django Tutorial Part #2 will cover below:
- Configuring our project settings. This will include a static URL path, templates path, and also a Media Path.
- Introduction of Writing Views and URLs.
- We’ll write a basic HTML file so you can see the work you’re doing
- Brief introduction into Cascading style sheets, CSS.
Django Tutorial Part 2 - Configuring Project Settings
Whenever you create a new project, there’s some basic settings that you need to edit that are widely accepted by the Django community.
The first, is creating a static path that will hold all of the CSS documents and images you want to display on your website. This is the most basic setting that nearly everyone implements as soon as they create a new Django project.
The second one that we’ll cover is one that isn’t exactly necessary for every website, but if you want to accept images from users, save them, and then display them on specific pages, you’ll need this setting configuration as well. If you don’t want things like user profile images, then feel free to skip this setting.
Creating a static path
- Open up your settings.py file inside your Project/Project folder. If you’re picking up with Django Tutorial #2, without Django tutorial #1, My project name is ‘Example’. My settings.py file can be found under The top level ‘Example’ folder, and then inside the second ‘Example’ directory.
- Inside your settings.py file, scroll down towards the bottom until you see your STATIC_URL line.
Once you find your STATIC_URL = ‘/static/’ line, we’re going to add some code directly below that. What we want to do, is we want to create a convenient way to store all our images and CSS files inside each application we make for our project. The idea behind this is to write somewhat reusable applications. If we contain all the files for an app inside the application’s directory, we’ll be able to easily reuse these applications in the future.
- To add a Static directory We’ll want to type the following code directly below the STATIC_URL. The location isn’t all that important, I just like putting it directly below because this is where Django specifies it’s static location on the initial project creation. The code is below.
The base directory in short, is just where the app directory can be found. So we’re saying our static files can be found in the app’s directory in a file called static
Creating a Templates Path
Now we want to create a path similar to our static path that will specify our templates, or .html files.
- In settings.py, locate where your BASE_DIR is located.
- Join a templates path absolutely to the BASE_DIR, just as we did with the static directory. Here’s the code for this:
Creating a Media Path (This one is optional) – Only if you want to accept user submitted images.
Lastly, if we want to accept user submitted issues to our site, we need to specify another path called Media. There’s no spot that makes sense right off hand within in the settings.py file to place this, so I just place it right below my static directory.
- The code for setting up a media path will look like the following:
So now we have created two ( or three) new paths that will become super useful once we dive into the actual project. I’ll be sure to point them out the first time we use them that way it makes sense why we needed to do this in the very beginning.
Installing your application in installed apps.
Finally, under the settings.py, you’ll need to include the app config.
Here, my app name is ‘Appone’ so under installed apps I have Appone.apps.ApponeConfig
This will also our project settings.py to recognize the application.
Django Tutorial Part 2 - Writing our First Webpage
Now, we get to the fun stuff. Let’s dive into writing our first html file and displaying it using a url path.
Now, go and open up your app folder.
You’ll need to create a folder for each of the new paths that we defined above. This is how we’ll use them inside each application.
So, create a folder for each of the following:
- ‘templates’ – this will store our html files that we write.
- ‘static’ – this will store our images if we want to add some to our webpage. It will also store our CSS files which we’ll make in the future.
Your directory tree should look like this one by the time you complete this.
Next, you’ll want to create a directory inside each of these new created files.
This step is kind of preference, however I would recommend that you do it. It makes it easier to easy distinguish which application you’re working in if you’re making a large scale app.
Name this directory inside your templates and static directory after the app. So in my case, ‘Appone’ is the name.
Creating our first html file
Now, inside our Appone/templates/Appone folder, we’re going to create our first html file. Right click within this folder and select “Create new file”
- I’ll name mine ‘index.html’ as this is the typical naming for the first html of any application. However you can name your’s anything. Just be sure to make it a .html file type.
- If you’re using atom, just type in ‘html’ and press enter. This will render the default html file format that we can just fill out. It will look like this:
Let’s briefly fill this out with something, that way we can test if it works by running a local server later.
I filled mine out as the following:
Editing a url path to actually view the html file
We’re almost there, two more steps and we’ll be able to view the webpage locally.
Whenever you load a webpage in your browser, you enter a url in your browser in the form of a request. This request goes to a server and informs the server of the request. The server then has to decide what information to return for the given request.
We want to return the webpage that we’ve just created. So we need to define two things. The first is the url that a user must request to receive this page, and then we’ll have to tell the server to send this page when that specific request is received.
Let’s go ahead and create a urls.py file within our Appone folder. We’ll use it in the next step.
- Editing our urls.py
First, we have to edit our urls.py file located under main project folder. So mine is found under Example/Example/urls.py
In this one, we will need to include the url patterns that we write within the app’s url.py file.
Here, by typing ‘home/’ as the path, that means whenever the url is www.url.com/home/ it will search under the Appone urls file for what to do next.
We will need to import the function ‘include’ since this is our first time using it.
Next, we will need to edit the urls.py file of the specific app that we just created. In this one we will put the specific view we want to return for a specific url that includes /home/
Since this is our first webpage, I want to make this the landing page for when /home/ is typed into the url after the website url.
Therefore, I’ll leave the path blank and type this into the urls.py file:
Also note that we typed urlpatterns = [ ]
This specifies that we have a list of urls included on this document.
Also note that in urls.py of the Appone folder, we imported a function called path, and we imported the views of the same Appone. This will allow us to use the views that we create and the function path just means we can access the given url.
Writing a view for our html file
Lastly, we need to create a view for our html file. Whenever the request is sent, this how the server will decide on what to do with it. Let’s just write a simple view for right now that returns the html file – no questions asked. This is nothing fancy, but we’ll work on that in the future.
Here, we’ve created a view called ‘index’
Breaking it down:
- def – says to django, “This is a function”
- “index” is the name of the function.
- (request): is the argument that the function takes. Here, all our function takes is a request. Which is just a user typing in the url and asking the server for the information related to that url.
- “return” is a function that just returns information.
- “render” is used to display a webpage.
Now, let’s view our webpage
That’s all the hardwork – and something you have to do for every webpage you want to create. But now’s the fun part, getting to view the page!
Open up the terminal on atom and type ‘python manage.py runserver’
This will run a local server from your computer and you can copy the address into a web browser.
Remover, we typed ‘home/’ into our url so we must type that at the end of the address the terminal returns for us to view the view we created.
And that’s it! Every webpage we make from here on our will use similar techniques! So Get good at it. While this tutorial was rather lengthy, once you get to full understanding, these steps do not take nearly as long. Additionally, you don’t really make that many apps per each project. This means you won’t have to set up the files every time – but rather work on previous ones you’ve already made.