Lesson 23 - View Widgets

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

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

Lessons App

• Lessons App Demo
• Templates
  • theme.html, _header.html, _footer.html
  • _navbar.html
• Blocks
  • title
  • navbar
  • header
  • content
  • footer

Apply Reusable Theme

• Move base templates
  • theme.html, _header.html, _footer.html, _navbar.html
  • Customize to app
• Extend theme.html

Encapsulation

• Wrap functionality and give it a name
• Control the custom features
• Hide the details
• Think about the forrest not the trees

Merge in Accounts Code

• Copy files from Users App
• Update URLs, Views
• Test and fix

Using Crispy Forms

Install Crispy Forms

$ pip install django-crispy-forms

config/settings.py

INSTALLED_APPS = [ ... 'crispy_forms', ]

templates/signup.html

{% extends 'theme.html' %}
{% load crispy_forms_tags %}

{% block content %}
<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit">Sign Up</button>
</form>
{% endblock content %}

BUILD

Project 7 - Superhero Data Views

• Build a reusable theme
  • Build view inheritance
  • Use Bootstrap and Crispy Forms
• Define Superhero Views
  • List, Detail, Add, Edit, Delete
  • All views have same look
• Define User Accounts
  • Users can register
  • Users can login
  • User info is displayed
  • Only registered users can edit
• Test
  • CRUD test for Hero and User Account
  • Views test for Hero and User Account
  • Lines of product code = Lines of test code
  • 16 Tests