Author Profile Altaf Shaikh
Altaf Shaikh

BE Engg | Python Dev | Content Writer | Founder of TeachMeBro | Blockchain Dev | Django

Django- Templates

February 13th 2020   408

What are Django Templates?
What are Django Templates?

In this tutorial, we will learn what are Templates in Django and where to store templates or HTML pages in Django. Along with Templates, we will also see how to handle and store Static files in Django. Static files include Js, Css, Images.

So in our previous TUTORIAL, we have successfully created our views in views.py file. Let's create templates for each view in this tutorial.

Django Templates

Django makes it possible to separate python and HTML, the python goes in views and HTML goes in templates. To link the two, Django relies on the render function and the Django Template language.

Now create a template folder inside accounts/ folder and inside template folder create registration folder and inside registration folder create signup.html and an index.html file. This folder will store all of your HTML files. The directory structure should look like below:

account/
       templates/
              registration/
                 signup.html
                 index.html

Also, create another folder inside the account app named it static and create an account folder inside the static/ folder and create a css folder inside the account folder(inner) and download the style.css file from here and move inside /static/account/css/ folder.

Now open the signup.html and put the following code inside it:

<!-- signup.html -->

<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/png" href="/static/logo.png"/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href="/static/account/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">

</head>
<body>
	<div class="main-w3layouts wrapper">
		<h1>SignUp</h1>
		<div class="main-agileinfo">
			<div class="agileits-top">
				<form method="post">

					{% csrf_token %}
					{{form.as_p}}
					<div class="wthree-text">
						<label class="anim">
							<input type="checkbox" class="checkbox" required="">
							<span>I Agree To The Terms & Conditions</span>
						</label>
						<div class="clear"> </div>
					</div>
					<input type="submit" value="SIGNUP">
				</form>
				<p>Already have an Account? <a href="#"> Login Now!</a></p>
			</div>
		</div>

		<div class="w3copyright-agile">
			<p>© 2020 TeachmeBro SignUp Form. All rights reserved | Design by Team TeachmeBro</p>
		</div>
	
		<ul class="w3lsg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<!-- //main -->
</body>
</html>

Now open the index.html and put the following code inside it:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>

    {% if user.is_authenticated %}
        <h1>Welcome, {{user.username}} You Successfully Logged In</h1>
    {% else %}
        <h1><p><a href="{% url 'signup' %}"> Signup</a></p></h1>
    {% endif %}
</body>
</html>

That's it! we have written our first templates. Next, we only need to create a URL mapping for each view function, so will see it in our next tutorial.

In this tutorial, we have successfully written Templates in Django. So in the next tutorial, we will see what are URLs in Django.