Django - Let's make your Homepage, Templates ! (Connecting FrontEnd to BackEnd)

-

In this chapter, We're going to learn "Templates" !


main - Templates - "making new folder" , let's name "main"


main - templates - main - "creating html file" 


<html>
<head>
    <title>Jay's World</title>
</head>

<body>
    <p>Base Template</p>

</body>

</html>

I named that file as "base.html"


Making another file named "home.html"

{% extends 'main/base.html '%}

It means  you're going to use "base.html" at every single pages. In other words, you can save a lot of time to make same things that you'd like to show on the every webpage that you make such as menu bars.


and going to main- views.py 

from django.shortcuts import render
from django.http import HttpResponse
from .models import ToDoList, Item

# Create your views here.

def index(response, id):
    ls = ToDoList.objects.get(id=id)
    return render(response, "main/base.html", {})

def home(response):
    return render(response, "main/base.html", {})

render(response # parameter that lines up with, "main/base.html" # templates location, {} #open dictionary) 


main - urls.py 

Making homepage!

from django.urls import path

from . import views

urlpatterns = [
path("<int:id>", views.index, name="index"),
path("", views.home, name="home")
]



Now go to the server ! 


You see the home page name "Jay's world" and   Base template ! 



Now I typed   /1  at the end of the address and "Base Template" shows again... !


With this function, On the next chapter, YOU will learn more cool things ๐Ÿ˜™

Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt ๋Š”  ๊ทธ ๊ฐ’์˜ ์•„๋ž˜๋Š” ์ „๋ถ€ ๋ถˆ๋Ÿฌ์˜ด. ์˜ˆ๋ฅผ๋“ค์–ด Banana๋ฅผ ์ž…๋ ฅํ–ˆ์„ ๊นจ 500๊ณผ ๊ทธ ์•„๋ž˜ ๊ฐ’๋“ค๋„ ๋ชจ๋‘ ๋ถˆ๋Ÿฌ์˜ด. ๋•Œ๋ฌธ์— break ๋ฅผ ์จ์ค˜์•ผํ•จ default๋Š” ํ•ด๋‹นํ•˜์ง€ ์•Š๋Š” ๊ฐ’์„ ์ž…๋ ฅํ–ˆ์„ ๋•Œ ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more