Subscribe Us

Create Custom Homage in Django | Default Homepage to custom Homepage

Anil Singhania January 06, 2021

Hello Friends how are you, Today in this post "Create Custom Homage in Django" i am going to teach you how you create a custom Homepage in Django Python and how you run it on server. If you want to learn complete django and want to create website in django this post will help you definitely. In the upcoming post i will give you a complete web project on Django so subscribe my website to get the all the latest post.

Now I am going to explain everything step by step.

If you want to understand this through video then watch this video i have explained it step by step live

Step 1: Install Pycharm : To install Pycharm into your system first click here , When you visit this link you will get official webpage for downloading Pycharm. On that page there are two download button (blue and black) in which blue download button is for professional version and black download button is for Community version. You have to download Professional Version because in community version there is no facility to create Django project. Just download from there and install it.

Step 2: Create Django Project: After installation of Pycharm open it and click on create new project and then you will get a screen like below.

Create Custom Homage in Django

Here in the above screenshot first step is to select Django then the second step is to Select directory in which you want to create your project and after the directory name for your project for example in my case my project name is HomepageInDjango and the directory is H. Third step is to click on more setting and type a name for Application , in my case Application name is MyApp. After typing application name click on create button and wait for sometime it will take  to create your project in the system. After successful creation of project you will get a screen like below

Create Custom Homage in Django


Step 3:Run Project: To run the django project click on terminal button which is in left bottom of screen

Create Custom Homage in Django

When you click on this Terminal button you will get a console area like below

Create Custom Homage in Django

Here in the above console area you have to type python manage.py runserver like below

Create Custom Homage in Django

When you will press enter after typing this command you will get output like below screenshot

Create Custom Homage in Django

Now in the above screenshot you have to click on the obtained URL and you will get output screen like below

Create Custom Homage in Django

Now its done successfully. It is the default home screen for Django website.

Step 4:Customize Home Page:

Create Html Page: To customize this default home screen first we have to create a HTML page, so right click on templates select new and then click on Html File

Create Custom Homage in Django

When you will click on Html File then you will get a text box and in this textbox type Homepage and press enter

Create Custom Homage in Django

Now open this Html page (Homepage.html) file and type the following code
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
{% load static %}
<html>
<head>
    <title>KrazyProgrammer</title>
    <style>
        a{
            color:white;
            background-color:red;
            padding:5px 15px 5px 15px;
            text-decoration:none;
            border-radius:5px;
            display: block;
            width: 120px;
        }
        body
        {
            background-image:url({% static 'images/food.png' %});
        }

        * {box-sizing: border-box;}
        body {font-family: Verdana, sans-serif;}
        .mySlides {display: none;}
        img {vertical-align: middle;}

        /* Slideshow container */
        .slideshow-container {

            position: relative;
            margin: auto;
        }

        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active {
            background-color: #717171;
        }

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
            .text {font-size: 11px}
        }
    </style>
</head>
<body>
<table border="0" width="100%" height="10%"  style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;border-bottom:1px dotted white;box-shadow:1px 1px 5px white;">
    <tr>

        <td style="color:red;font-size:50px;font-weight:bold;text-shadow:2px 2px 2px white">Food Ordering</td>
        <td width="10%" align="center"> <a href="index">Home</a></td>
        <td width="10%" align="center"> <a href="about">About</a></td>
        <td width="10%" align="center"> <a href="projectreg">Contact</a></td>
        <td width="10%" align="center"> <a href="projectlist">Gallery</a></td>
        <td width="10%" align="center"> <a href="admin">Admin</a></td>

    </tr>
</table><br><br><br><br><br><br><br>

<table border="0" style="box-shadow:1px 1px 10px white" width="70%" height="70%" align="center">
    <tr>
        <td align="center" valign="top">
            <div class="slideshow-container">

                <div class="mySlides fade">
                    <div class="numbertext">1 / 4</div>
                    <img src="{% static 'images/fbn1.png' %}" style="width:1100px" height="350px">
                    <div class="text">Caption Text</div>
                </div>

                <div class="mySlides fade">
                    <div class="numbertext">2 / 4</div>
                    <img src="{% static 'images/fbn2.png' %}" style="width:1100px" height="350px">
                    <div class="text">Caption Two</div>
                </div>

                <div class="mySlides fade">
                    <div class="numbertext">3 / 4</div>
                    <img src="{% static 'images/fbn3.jpg' %}" style="width:1100px" height="350px">
                    <div class="text">Caption Three</div>
                </div>

                <div class="mySlides fade">
                    <div class="numbertext">4 / 4</div>
                    <img src="{% static 'images/fbn4.jpg' %}" style="width:1100px" height="350px">
                    <div class="text">Caption Text</div>
                </div>
            </div>
            <br>

            <div style="text-align:center">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        </td>
    </tr>
    <tr style="background-color:red;color:white;height:25px">
        <td><marquee behavior="alternate">
            Welcome of You in my Project.
        </marquee></td>
    </tr>
</table>

<script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>
</body>
</html>

Create Static Folder and Store Images: To make this homepage attractive i have used 5 images in which one is for background image and the remaining four images for image sliding. To create static folder right click on MyApp select new and then click on Directory.

Create Custom Homage in Django

When you click on Directory you will get a Text box in which you have to type static

Create Custom Homage in Django
After typing static press enter and you will see that a new directory(static) in Folder MyApp is created. Now its time to create a new folder inside static folder to store images. So right click on static select new and then click on directory

Create Custom Homage in Django

When you will click on directory then you will get  a textbox and in that textbox type images and press enter
Create Custom Homage in Django

Now store 5 images into folder images and you project directory will look like below screenshot.

Create Custom Homage in Django

Here from the above diagram you can see that i have stored 5 images and the name of images are fbn1.png ,fbn2.png ,fbn3.jpg, fbn4.jpg and food.png. Here food.png images is for background image and the remaining images are for image sliding. The size of image fbn1 to fbn4 is 1100x350 and size of background image food.png is 1920x1080. 
Note:Store the images with same name and extension otherwise you will have to change in the Html file.

After this now open urls.py and add two lines into it , If you have any doubt then you can watch the above video i have explained everything live.

Create Custom Homage in Django

And at last open views.py file and add the following lines.

Create Custom Homage in Django

Now again run your project and at this time you will get output screen like below

Create Custom Homage in Django

I hope now you can  create "Create Custom Homage in Django". If you have any doubt regarding this post  or you want something more in this post then let me know by comment below i will work on it definitely.
 

Request:-If you found this post helpful then let me know by your comment and share it with your friend. 
 
If you want to ask a question or want to suggest then type your question or suggestion in comment box so that we could do something new for you all. 

If you have not subscribed my website then please subscribe my website. Try to learn something new and teach something new to other. 

If you like my post then share it with your friends. Thanks😊Happy Coding.

Tags

Post a Comment

0 Comments