link frontend website with django backend part1

Spread To Friends

Link frontend website with django backend part1

link frontend website with django backend. Every time we develop any website, we are used to creating the frontend first, and then we just link it to the backend, but every time we do that there appears a bunch of problems that we need to solve before getting connected to the backend. The same case is also applicable for linking your frontend to Django. Here in this entire post, I will just teach you how to link a frontend website made with HTML, CSS, and js with a Django backend, so let’s get started.

 

First, install python on your device, just go to this link and install the exe file and easily install it, just click next and next …. After installing, open your PowerShell and type pip install Django. Django will be installed on your system in a couple of minutes based on your internet speed.

 

Now go to the drive where you want to make your project, there make a folder of your own.

If you are in windows 10 then shift + right-click and select open PowerShell window, then your PowerShell window will be opened on that folder or if you are in another operating system then you can manually open the folder with your terminal.

 

Now when your folder is opened in your PowerShell window, you have to make a project for Django, to do that, first type the command django-admin startproject <your project name> (in <> this quotes there will be your project name without <>) then in few seconds you will get the project made by Django. Now type cd <any project name of your choice> to go to your project directory. After that type python manage.py startapp <any app name of your choice> then again in a couple of seconds that will also be ready. 

 

Now type python manage.py runserver on your PowerShell window and go to your browser and type 127.0.0.1:8000 

 

For more details about how Django looks like if everything is successfully installed. visit this post.

 

Now when everything is ready. Minimize the PowerShell window and go to the directory where you made your project then you will see a folder with the name you gave the project before. Go to that folder and there you will find another folder with your project name under that you will find a file called settings.py edit that file with any of the code editors, I will prefer to use visual studio code for the project. There find for the keyword TEMPLATES after that keyword you will see many codes you will have to find ‘DIRS’: [] after you find that you need to replace this keyword to 

‘DIRS'<your app name>/templates’] then save the file and go back to a folder there you will see a folder named to the app that you gave before. There create a folder named templates.

 

Now go to your folder where you made your frontend part and copy all the files and folder inside that folder after pasting all files you need to go to your project folder where the settings.py file was and there you will find a file called urls.py you just need to clear all code from there and paste the code given below.

from django.contrib import admin
from django.urls import path,include
 
urlpatterns = [
    path(admin/', admin.site.urls),
    path('',include('<your app name>.urls')),
]

Now go to your app folder where views.py file exists, on that folder make a new file called urls.py and open it with vscode or any other IDE now paste all the codes given below:

from django.urls import path
from <your app folder name> import views
 
 
urlpatterns = [
         path('',views.index,name='Home'),
]


Then simply close the file and find views.py file there and open, you just need to clear all codes and paste the below code:

from django.shortcuts import render
 
# Create your views here.
def index(request):
    return render(request, '<your template name which you want to surf first. e.g. index.html>')

Now you need to re open the powershell window and there you need to type python manage.py runserver then go to your web browser and in the url bar type 127.0.0.1:8000/ then you will find that your template will work fine.

To add another Template you need to just update your app urls.py as if I want to add a about template I will just update the urls.py as below:

from django.urls import path
from <your app folder name> import views
 
urlpatterns = [
         path('',views.index,name='Home'),
         path('about/',views.about,name='about'),
]

Then you need to Update the views.py file also, as I want to add a about page that I made before the code will like below:

from django.shortcuts import render
 
# This is index page
def index(request):
    return render(request, '<your template name which you want to surf first. e.g. index.html>')
 
# This is about page
def about(request):
    return render(request, '<your template name which you want to surf. e.g. about.html>')

In this way you can add pages.

You need to update your links in your html pages when you are developing frontend then you will use the links like below:

<a class="nav-link" href="C:\your-folder\about.html">About Us</a>

But when you used your backend this will work no more, you need to define the highlighted section from below

In your links:

path('about/',views.about,name='about'),

So now the new link would be like this:

<a class="nav-link" href="/about.html/">About Us</a>

Note: in every link you need to give a slash(/) or the link will not work

I know that there are so many more things to cover like you are also getting errors on loading images, which means your images are not loading after shifting it to your backend Django, the CSS and js files are not working means those files are not loading, I know that problems are coming but don’t worry I will make the next post on how to fix those things and make all working perfectly Until then Check Out other posts: Beautiful Website Making Tip #2.

close
Oval@3x 2

Don’t miss these updates!

We don’t spam! Read our privacy policy for more info.


Spread To Friends

2 thoughts on “link frontend website with django backend part1

Leave a Reply

Your email address will not be published. Required fields are marked *