Lesson 22 -  View Layout

LEARN

Django for Beginners - Chapter 10 - Bootstrap

• JavaScript
• CSS
• Crispy Forms
• Bootstrap Basics

Today

• Reusable Views
• Refactoring
• Building a theme

W3Schools

• Getting Started
• Containers
• Typography
• Colors
• Buttons
• Grid

Reusable Views

• Create reusable code for common tasks
• Don't repeat yourself
• Learn to smell the duplication

Refactoring

• Incremental redesign after the code is written
• Code naturally decays with technical debt
• Make code live forever

Building a Theme Template

• Start with a simple page template
• Recognize the changing content
• Build replacable content

Blocks

theme.html

```html

{% block content %}

No body content given

{% endblock content %} ```

list.html

```html {% extends 'theme.html' %}

{% block content %}

{% for account in object_list %} {% endfor %}

{{ account.first_name }} {{ account.last_name }}

{{ account.email }}

{% endblock content %} ```

Includes & Partial templates

• Gather content into file
• Include the file where it is needed
• Use _ to represent partial templates
• Makes templates easier to read

theme.html

```html

{% include 'user_info.html' %}

{% block content %}
{% endblock content %}

```

user_info.html

```html

{% if user.is_authenticated %}
• Hello {{ user.username }} Log out
{% else %}
• You are not logged in.
• Log In
• Sign Up
{% endif %}

```

Navbar, Header, Main, Footer

• Create a template with defined blocks
  • Title
  • Navbar
  • Header
  • Main
  • Footer
• Use Includes where needed
• Make the code easy to read

container, col, card

• Main content block should use "container" or "container-fluid"
• Decide on when columns are needed
• Use cards to organize the visual space

BUILD

Demo Code for Reuse

• Week 8 Demo
• Lessons App Demo

Refactoring

• Build standard view
• Convert view to "theme.html"
• Define blocks: Title, Navbar, Header, Main, Footer
• Use "theme" in all pages
• Test & Commit