Skip to content

Building Spokane Tech: Part 5

Welcome to part 5 of the "Building Spokane Tech" series! In this article, we'll explore the django views and templates used to server web pages in the initial web app.

See the live site at: https://www.spokanetech.org

See the latest code on: github

Pages

The initial release of spokanetech.org includes a small set of pages, including the landing page, an about page, a calendar page, and event and group pages. Here is a brief description of each page:

Index: Home page of spokanetech.org

About: Informational page for spokanetech.org

Calendar: Monthly Calendar listing all events per month

Group List: Page listing all tech groups

Event List: Page listing all upcoming events

Group Detail: Page detailing a specific tech group

Event Detail: Page detailing a specific event

Views

The views are designed to support both htmx and non-htmx requests. A different template will be used accordingly when the "template_name" and "htmx_template_name" parameters are provided. Selection of the template is handled by the base class.

For our main entities we have a detail, list, and modal views to present data as applicable on web pages. Below is a snapshot of the tech group views. See github for the latest and complete code.


class TechGroupView(HtmxOptionDetailView):
    """Render detail page for a TechGroup instance"""
    model = TechGroup
    htmx_template_name = "web/partials/detail/group.htm"
    template_name = "web/full/detail/group.html"


class TechGroupsView(HtmxOptionMultiFilterView):
    """Render a list of TechGroup instances"""
    htmx_list_template_name = "web/partials/list/groups.htm"
    htmx_list_wrapper_template_name = "web/partials/list/wrapper_list.htm"
    htmx_template_name = "web/partials/marquee/groups.htm"
    queryset = TechGroup.objects.filter(enabled=True)
    template_name = "web/full/list/groups.html"


class TechGroupModalView(ModelDetailBootstrapModalView):
    """Render Bootstrap 5 modal displaying get details of a TechGroup instance"""
    modal_button_submit = None
    modal_size = "modal-lg"
    modal_template = "web/partials/modal/group_information.htm"
    modal_title = "Group Info"
    model = TechGroup

Templates

Templates are split into to sections, full and partials. Templates in the full subdirectory hold the template that extend the django base template and are used when the request to the page is not htmx. Templates in the partials subdirectory are used by htmx requests. We use a filename convention where full pages have the .html extension and partials have the .htm extension.

Here is the directory structure of the templates directories:

.
├── src
│   ├── django_project
│   │   ├── core
│   │   │   └── templates
│   │   │       └── base.htm
│   │   ├── web
│   │   │   └── templates
│   │   │       └── web
│   │   │           ├──  full
│   │   │           │    ├──  custom
│   │   │           │    │    ├──  about.html
│   │   │           │    │    ├──  calendar.html
│   │   │           │    │    └──  index.html
│   │   │           │    ├──  detail
│   │   │           │    │    ├──  event.html
│   │   │           │    │    └──  group.html
│   │   │           │    └──  list
│   │   │           │         ├──  events.html
│   │   │           │         └──  groups.html
│   │   │           │
│   │   │           └──  partials
│   │   │                ├──  custom
│   │   │                │    ├──  about.htm
│   │   │                │    ├──  calendar.htm
│   │   │                │    └──  index.htm
│   │   │                ├──  detail
│   │   │                │    ├──  event.htm
│   │   │                │    └──  group.htm
│   │   │                ├──  list
│   │   │                │    ├──  events.htm
│   │   │                │    └──  groups.htm
│   │   │                ├──  marquee
│   │   │                │    ├──  events.htm
│   │   │                │    └──  groups.htm
│   │   │                └──  modal
│   │   │                     ├──  event.htm
│   │   │                     └──  group.htm
│   │   └── ...