Run your First Django Project with a Modularised App

This post will guide to getting started with Django

Kalhara Tennakoon
Towards Dev

--

Photo by Safar Safarov on Unsplash

Introduction

Django is an open-source Full-Stack framework that allows you to create web pages using Python and HTML. Django uses MVT(Model, View, Template) architecture. In this post, I explain how you can get started with Django web development as a beginner. But before beginning Django development, you need to be familiar with Python. You can also use your HTML knowledge to create your own web pages.

Installation

To install Django on your local machine you need to have pip installed. If you don’t have pip on your local machine, you below commands to get pip installed.

$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py$ python get-pip.py$ pip --version

Once you’ve installed pip you can run the below command to install Django on your local machine.

pip install django

This command will install Django on your local machine and you’re good to go with creating your first Django project.

Create your First Django Project

You can create a Django project using the below command.

django-admin startproject <project-name> .ex: django-admin startproject myapp .

The above command will create the myapp project inside the current directly. Creating a Django project is that much easy. Next, you can run the Django server with the default configurations and display the webpage on the browser.

Run your Project

Once you run the above command you could see that it has created a myapp directory and also amanage.py file. So, when you need to run the Django server, all you need to do is execute the manage.py file as below. It will start the server with the default configurations and you can open it on the browser via 127.0.0.1:8000 or localhost:8000 .

python manage.py runserver
Screenshot by the Author | 127.0.0.1:8000

Create your First App

Django allows you to create isolated apps inside a Django project and whenever you need, you can remove only a particular app without deleting the entire project. Creating an app inside the project is also easy. You can use the below command to create an app inside the project.

django-admin startapp <app-name>ex: django-admin startapp home

This command will create a separate directory called home inside the project. We can use this app to create our own customised web pages. When you go inside the home directory you can see the views.py file and we use it to render our web pages. We can directly pass a text to display on the browser or we can pass a separate HTML page via this views.py file. Before adding content to our views.py file we need to add our home app to settings.py file. Open the settings.py file and add home as below.

# filename -> settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'home',
]

Next, we can add content to the views.py file.

First, we need to import Httpresponse through django.http . Then create the home function as below. In this code snippet, we just pass a text to display on the browser.

Next, we need to update the urls.py file to apply the page navigation. Once you open the urls.py file, you can see it already has a path set admin and we use that path to log in to our database inside the project. When you navigate to 127.0.0.1:8000/admin you could see the login page.

Screenshot by the Author | 127.0.0.1/admin

Let’s update the urls.py file as below.

Now, when you navigate to 127.0.0.1:8000 you would get an 404 error as below. But it shows our home path in the list.

Screenshot by the Author | 127.0.0.1:8000

Let’s navigate to 127.0.0.1:8000/home and then you’d see your customised web page as below.

Screenshot by the Author | 127.0.0.1:8000/home

Add HTML Pages

Let’s create two directories inside the home app. The first one is templates and the other one is home and it should be created inside the templates directory. We usually put all HTML pages inside the templates directory. So, this time we put them inside the templates/home directory so that it’d be easy to identify files and paths when we have multiple apps inside our project. So the directory structure would be as follows. Let’s create the index.html file inside the home directory as follows.

home
├── templates
│ └── home
│ └── index.html

Then we need to update our views.py file to render the HTML page.

Screenshot by the Author | displaying index.html

Let’s add another page and pass a value

Let’s create an about.html page as follows and we can pass a value to this HTML page via our views.py file.

So, in views.py file, we need to create a separate function for this about.html file.

Then, we need to add the path to urls.py file accordingly.

After that, you can navigate to 127.0.0.1/about to see your changes on the browser.

Screenshot by the Author

Modularise the App

You can see even we create a separate home app, we still depend on the project’s urls.py. But when we modularise our app, it’s easy for us to handle it. As I mentioned earlier we could have multiple apps inside our Django project. So, if we could apply the modularisation concept and isolate them we can easily remove any of the apps when we don’t need them anymore.

Let’s create a separate urls.py file inside the homeapp.

Then we need to update the urls.py file in myappdirectory accordingly.

Now, we’re almost done with modularising our home app. Let’s navigate again to those two paths on the browser and verify whether we get the output.

Screenshot by the Author | After modularised the ‘home’ app

When you run the server using python manage.py runserver command, you could see a warning in the terminal, which says that you have unapplied migrations. You can get rid of that warning using the below command.

python manage.py migrate

Next time when you run the server, you will not see that warning.

Congratulations!

Great Work!. You have successfully run your First Django Project with a modularised app. Hope you’ve liked, enjoyed and found the information useful in this article.

References

Thank you for reading!

Happy Coding!👨🏻‍💻

> Stay tuned for more posts ✌️<

Now you can support my work via ‘Buy me a coffee’

--

--