Lesson 6 - Static Server

LEARN

Sensei Login

• Reworked the user registrations to extend the capability
• I may have broken some user logins
• If you cannot login then email me
• Send your email and desired password
• I will configure and test your specific user

Class-based views

• Defines all of the view logic as a Python object class
• Override any behavior you wish
• TemplateView shows an HTML template as a view
• Design patterns for custom Django views

TemplateView template

templates/hulk.html

<h1>Hulk Profile</h1>

<img src="hulk.jpg" alt="Hulk">

TemplateView views.py

views.py

from django.views.generic import TemplateView

class HulkView(TemplateView):
    template_name = 'hulk.html'

TemplateView urls.py

urls.py

from django.urls import path
from django.views.generic import HulkView, WidowView

urlpatterns = [
    path('hulk', HulkView.as_view()),
]

BUILD

Templates with Images

templates/hulk.html

<h1>Hulk Profile</h1>
<img src="hulk.jpg" alt="Hulk">

templates/black_widow.html

<h1>Black Widow</h1>
<img src="black_widow.jpg" alt="Hulk">

urls.py

from django.urls import path
from django.views.generic import HulkView, WidowView

urlpatterns = [
    path('hulk', HulkView.as_view()),
    path('black_widow', WidowView.as_view()),
]

pages/views.py

from django.views.generic import TemplateView

class HulkView(TemplateView):
    template_name = 'hulk.html'

class WidowView(TemplateView):
    template_name = "black_widow.html"

templates/

hulk.jpg
black_widow.jpg

Pages may Contain Images

• Django serves pages expected to be processed
• Static content is passed directly through without processing
• Django contains a static server that can be enabled

Add Custom Django Views

static/images/

hulk.jpg
black_widow.jpg

templates/hulk.html

<h1>Hulk Profile</h1>
<img src="/static/images/hulk.jpg" alt="Hulk">

templates/black_widow.html

<h1>Black Widow</h1>
<img src="/static/images/black_widow.jpg" alt="Hulk">

settings.py

• STATIC_URL = '/static/'
• STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]

Images, CSS, Javascript

• < img src='/static/img/treetops.200.jpg' >
• < link rel='stylesheet' href='/static/unc.css' >
• < script href='/static/wow.js' >

Add Data to Django Views

templates/hero.html

<h1>Hero: {{ hero }}</h1>
<img src="/static/images/{{ hero }}.jpg" alt="{{ hero }}">

Data as dictionary

Define what goes in the variable slots

{
    'hero': 'hulk', 
}

{
    'hero': 'black_widow', 
}

Hero View

pages/views.py

 class HulkView(TemplateView):
    template_name = 'hero.html'

    def get_context_data(self, **kwargs):
        return { 'hero': 'hulk' }


 class WidowView(TemplateView):
    template_name = "hero.html"

    def get_context_data(self, **kwargs):
        return { 'hero': 'black_widow' }

Demo Code in Github

• Mark-Seaman/BACS350
• Look at my code after you create your own
• You learn by doing - practice makes perfect

Exercise

• Start with my code
• Build a new view template, "profile.html"
• Create a URL route, "profile" that shows the view
• Add a home link to the page template
• Define the context for all pages to take you home
• Create template with HTML that validates