Skip to main content

Django Custom Webpage

In this tutorial, we’re going to create our first custom webpage in django. The main goal of this article for you to understand the whole flow of information in django website like if someone asks for specific url then how do we route them into the correct places and ultimately give them back some HTML.

So before starting this article I am assuming that you’ve started the local server using python3 manage.py runserver command in project directory.

We’ve seen that whenever we create a project and run it in browser then django’s default page shows up.

Django Custom Webpage 1

That’s isn’t our creation right.

So let’s see how to create our own webpage in django.

In previous articles, we’ve seen that anytime someone is looking for a URL on our website it comes to this “urls.py”.

Django Custom Webpage 2

Django Custom Webpage 3

Currently we’ve path of admin/ in the list urlpatterns. That means when user goes to our website (currently = http://127.0.0.1:8000/)  and add a /admin in the url, user will be redirected to admin page of our django website.

Django Custom Webpage 4

Note: That domain-name/admin (currently domain-name is http://127.0.0.1:8000/) is going to help us eventually work with the database but we don’t really need to worry about that right now.

How to Change URL of Existing Webpages

Let’s say we want to change the URL for our admin page then we can modify our urls.py file like this:

Django Custom Webpage 5

Now open your web browser and open domain-name/admin (http://127.0.0.1:8000/admin)

The result will be an error showing that page can not be found or something like this because we have changed the address of our admin page. So our new address is doman-name/mypage (http://127.0.0.1:8000/mypage). Open this address and the result will be:

Django Custom Webpage 6

That how we can change any existing web-page’s URL.

Note: In django, anytime you make a change to a file, it is going to auto-reload the server for you. So we don’t have to manually go back to stop and start the server to pick-up the new changes.

Creating Our Own Custom Webpage in Django

Now our task is to make our own custom webpage so let’s do it.

Firstly, we don’t need that admin page so delete that path entirely.

Django Custom Webpage 7

In fact we can delete the first line about admin in our urls.py as we don’t need admin anymore.

Django Custom Webpage 8

Now let’s say we’re going to add a path for our own page. Let’s say homepage. So when someone comes to the homepage of our website then we’ll show them our own custom homepage instead of that default django template page.

To do this, open your urls.py and add a new path. Basically if someone comes to our homepage means they don’t need to any thing extra our domain-name (http://127.0.0.1:8000/), so we’ll put a empty string in path, like this:

Django Custom Webpage 9

Now in path put a comma after the empty string and after comma (,) we’ll add another thing that will show that when someone comes to our homepage then where we want to send the user to.

Here we have to create a new file called views.py which essentially allows us to send back some information.

So we’ll create a new file in same directory where our urls.py exists. Now we’ve a new file called views.py here:

Django Custom Webpage 10

To use views.py into our urls.py, we’ve to import views.py in urls.py file. So open urls.py and add the following line:

Django Custom Webpage 11

In above picture dot (.) means current directory.

Now add a function to call in our path into urls.py.

Django Custom Webpage 12

It is showing that if someone goes to our homepage then call the function ‘home’ which is located in our views.py, but we don’t have any function called home in our views.py yet.

So let’s create it. Open views.py and add a new function called home.

Django Custom Webpage 13

Here we’ve to pass request parameter in home function, anytime someone is coming for URL of our website it sends this request object which basically says that what’s the url they looking for and some more advanced information like some cookies and what browser they are using. So that type of information comes through this request object.

Then we’re returning something back to the user using return keyword But we can’t return a simple string back from our function, we’ve to give back an HTTP response. So in order to do that we’ve to use function HttpResponse(string) and to use HttpsResponse(string) we’ve to import some package using

from django.http import HttpResponse

Now save this file and reload your website. The output will be:

Django Custom Webpage 14

Congratulations, we have our own creation on our homepage.

Flow of Information in Our Django Website

If somebody is opening our website’s homepage (http://127.0.0.1:8000/) then they will be redirected to our urls.py file. Urls.py check the entered url by the user. As there is no extra string after the domain-name in above example. So in urlpatterns, it will check for the empty string and as we’ve one path having an empty string, it will be redirected to the function written in path with empty string, that is views.home in our case. Now that home function in views.py is finally returning some HttpsResponse that is ‘hello’. So user have the information that he/she requested for.

That’s how the flow of information works in django.

Creating Multiple Webpages in Django

As we make one custom webpage, we can also add some more web-pages having unique addresses assigned to them.

Open urls.py  and add a new path like:

Django Custom Webpage 15

and open your views.py and create a new function for page1 .

Django Custom Webpage 16

That’s all.

Now go to domain-name/page1 (http://127.0.0.1:8000/page1 and here is your page1:

 Django Custom Webpage 17

That’s how we can create multiple pages in our website.

Actually that string we’re returning is some HTML so we can also use HTML tags in it like:

Django Custom Webpage 18

and refresh http://127.0.0.1:8000/page1

Django Custom Webpage 19

Conclusion

After reading and using this tutorial you’ll learn how to add a custom URL to any page, adding custom webpage in django website, creating multiple web-pages in django and the most important thing that is flow of information in django website.

Comment down below if you have any queries.

The post Django Custom Webpage appeared first on The Crazy Programmer.



from The Crazy Programmer https://www.thecrazyprogrammer.com/2018/10/django-custom-webpage.html

Comments

Popular posts from this blog

Rail Fence Cipher Program in C and C++[Encryption & Decryption]

Here you will get rail fence cipher program in C and C++ for encryption and decryption. It is a kind of transposition cipher which is also known as zigzag cipher. Below is an example. Here Key = 3. For encryption we write the message diagonally in zigzag form in a matrix having total rows = key and total columns = message length. Then read the matrix row wise horizontally to get encrypted message. Rail Fence Cipher Program in C #include<stdio.h> #include<string.h> void encryptMsg(char msg[], int key){ int msgLen = strlen(msg), i, j, k = -1, row = 0, col = 0; char railMatrix[key][msgLen]; for(i = 0; i < key; ++i) for(j = 0; j < msgLen; ++j) railMatrix[i][j] = '\n'; for(i = 0; i < msgLen; ++i){ railMatrix[row][col++] = msg[i]; if(row == 0 || row == key-1) k= k * (-1); row = row + k; } printf("\nEncrypted Message: "); for(i = 0; i < key; ++i) f...

Data Encryption Standard (DES) Algorithm

Data Encryption Standard is a symmetric-key algorithm for the encrypting the data. It comes under block cipher algorithm which follows Feistel structure. Here is the block diagram of Data Encryption Standard. Fig1: DES Algorithm Block Diagram [Image Source: Cryptography and Network Security Principles and Practices 4 th Ed by William Stallings] Explanation for above diagram: Each character of plain text converted into binary format. Every time we take 64 bits from that and give as input to DES algorithm, then it processed through 16 rounds and then converted to cipher text. Initial Permutation: 64 bit plain text goes under initial permutation and then given to round 1. Since initial permutation step receiving 64 bits, it contains an 1×64 matrix which contains numbers from 1 to 64 but in shuffled order. After that, we arrange our original 64 bit text in the order mentioned in that matrix. [You can see the matrix in below code] After initial permutation, 64 bit text passed throug...

Experimental: Reducing the size of .NET Core applications with Mono's Linker

The .NET team has built a linker to reduce the size of .NET Core applications. It is built on top of the excellent and battle-tested mono linker . The Xamarin tools also use this linker so it makes sense to try it out and perhaps use it everywhere! "In trivial cases, the linker can reduce the size of applications by 50%. The size wins may be more favorable or more moderate for larger applications. The linker removes code in your application and dependent libraries that are not reached by any code paths. It is effectively an application-specific dead code analysis ." - Using the .NET IL Linker I recently updated a 15 year old .NET 1.1 application to cross-platform .NET Core 2.0 so I thought I'd try this experimental linker on it and see the results. The linker is a tool one can use to only ship the minimal possible IL code and metadata that a set of programs might require to run as opposed to the full libraries. It is used by the various Xamarin products to extract...