Project 11 - Accordion & Tabs

Goals

• Extend Data Views with Components
• Build an applications that uses generic Django views for the CRUD operations
• Use View Tricks
  • View Inheritance
    • templates/superhero_theme.html
  • Partial Templates
    • include "_navbar.html"
    • include "_user.html"
    • include "_header.html"
    • include "_footer.html"
    • include "_card.html"
    • include "_cards.html"
    • include "_doc.html"
    • include "_tabs.html"
    • include "_accordion.html"
• Django View Design Patterns
  • CardView
  • TableView
  • DocumentView
  • AccordionView
  • TabsView
  • Navbar - main menu
• User Management
  • Users can Register
  • Users login/logout
  • Edit operations require login

Steps

Create a Superhero News website. Implement the these pages.

Home - Landing page with information about the website

• Contains Superhero page theme with Header, Navbar, Main, Footer
• Display info in a Bootstrap Card and Container
• Navbar shows brand, menu items (List, Add), user info

List - Show list of heros as an Accordion view

• Each hero entry shows name and small photo
• Each panel shows hero details: Name, Small photo, Link to Detail page

Detail - Detail page show read-only details

• Superhero Record
  • name
  • identity
  • description
  • strength
  • weakness
  • image

Add - Add page allows logged in users to add a new hero

• Superhero Record
  • name
  • identity
  • description
  • strength
  • weakness
  • image
• Images are added on the back-end or by setting an external URL
• Redirect to the list detail after add

Edit - Edit page allows logged in users to edit an existing hero

• Superhero Record
  • name
  • identity
  • description
  • strength
  • weakness
  • image
• Redirect to the detail view after edit

Delete - Delete page allows logged in users to delete a hero

• Confirm the deletion
• Redirect to the list view after delete

Requirements

Details provided later