Logical Breakdown

Prerequisites: Project Initialization

Objective

Identify and list all components needed for the project before starting development. This analysis step allows planning the architecture and anticipating developments.

Info

This step creates no code. We only identify and list components to develop.

Identify Page Types

Based on design analysis, the site includes 3 different page types.

Home Page

Role: Present Blackcube CMS and its main features

  1. Full-width hero with image
  2. 3-column feature grid
  3. Conversion CTA
Characteristics:

Blackcube Type: Home

Documentation Pages

Role: Technical content with complete navigation

  1. 3-column layout (Sidebar + Content + TOC)
  2. Breadcrumb and prev/next navigation
  3. Varied content blocks
Characteristics:

Blackcube Type: Documentation

Contact Page

Role: Contact form with information

  1. Input form
  2. Info cards in sidebar
  3. Confirmation after submission
Characteristics:

Blackcube Type: Contact

Identify Layout Widgets

Layout widgets structure pages and handle navigation.

Systematic Widgets

  1. Logo
  2. Main menu
  3. Language switcher (FR/EN)
  4. Mobile menu
Header: Present on all pages

  1. Copyright
  2. Secondary menu
  3. External links
Footer: Present on all pages

Conditional Widgets

  1. Node/Composite tree
  2. Active page highlight
  3. Hierarchical navigation
Sidebar: Documentation pages only

  1. Table of contents
  2. List of H2/H3 headings
  3. Anchor links
TOC: Documentation pages only

  1. Breadcrumb trail
  2. Parent Node hierarchy
  3. Current page
Breadcrumb: Documentation pages only

  1. Previous link
  2. Next link
  3. Between Composites of same Node
Navigation: Documentation pages only

Summary: 6 layout widgets identified

Identify Content Widgets

Content widgets display blocks created in the back-office.

Main Widgets

  1. Main header
  2. Variants based on page type
  3. Fields: title, description, lang, image, CTA, breadcrumbTitle
Hero: All pages

  1. Highlight with icon
  2. 3-column grid display
  3. Automatic grouping
Feature: Home page

  1. H2, H3, H4 headings
  2. Anchor generation
  3. TOC feed
Title: Documentation pages

  1. Rich WYSIWYG content
  2. Paragraphs and lists
Content: Documentation pages

  1. Code blocks with highlighting
  2. Multi-language support
  3. Copy button
Code: Documentation pages

  1. Colored alerts (info, warning, error)
  2. Info boxes
Info: Documentation pages

  1. Call-to-action
  2. Internal links
CTA: Home and documentation pages

  1. Info cards
  2. SVG icons
  3. Optional CTAs
Card: Contact page

  1. Form configuration
  2. Return messages
Contact: Contact page

Summary: 9 content widgets identified

Special Components

Block Dispatcher

Role: Detect each block type and call appropriate widget

  1. Loops through block array
  2. Detects individual Block or grouped Block array
  3. Calls corresponding widget
Operation:

Name: Blocs.php

Block Grouping

Role: Group consecutive Blocks for grid display

  1. Detects consecutive Blocks with same blocTypeId
  2. Groups in array
Operation:

Example: SectionFeatures.php widget (in addition to BlocFeature.php)

Planned Architecture

File Structure

Info

This structure is an example organization. Blackcube doesn't impose any particular structure: adapt the tree according to your project needs.

    common/
├── admin/
│   ├── bloc_card.php
│   ├── bloc_cta.php
│   └── bloc_hero.php
├── helpers/
│   ├── Parameters.php
│   └── CmsHelper.php
└── models/
    └── MailContact.php

webapp/
├── behaviors/
│   └── HrefLangBehavior.php
├── controllers/
│   ├── CmsController.php
│   └── RedirectController.php
├── views/
│   └── cms/
│       ├── home.php
│       ├── documentation.php
│       ├── contact.php
│       └── contact-success.php
└── widgets/
    ├── Blocs.php                    # Dispatcher
    ├── BlocHero.php                 # + 3 views
    ├── BlocFeature.php
    ├── SectionFeatures.php
    ├── BlocTitle.php
    ├── BlocContent.php
    ├── BlocCode.php
    ├── BlocInfo.php
    ├── BlocCta.php
    ├── BlocCard.php
    ├── Header.php
    ├── Footer.php
    ├── Sidebar.php
    ├── Toc.php
    ├── Breadcrumb.php
    └── Navigation.php

Component Dependencies

  1. Parameters: Used by all widgets and controllers
  2. CmsHelper: Used by controllers and dispatcher
Helpers:

  1. Use helpers
  2. Pass data to views
Controllers:

  1. Call widgets
  2. No business logic
Views:

  1. Use helpers
  2. Can call other widgets
Widgets:

Validation

Before continuing, verify all components are identified:

  1. Home
  2. Documentation
  3. Contact
Page types:

  1. Header
  2. Footer
  3. Sidebar
  4. TOC
  5. Breadcrumb
  6. Navigation
Layout widgets:

  1. Hero
  2. Feature (+ SectionFeatures)
  3. Title
  4. Content
  5. Code
  6. Info
  7. CTA
  8. Card
  9. Contact
  10. Blocs (dispatcher)
Content widgets:

  1. Parameters
  2. CmsHelper
Helpers:

  1. HrefLangBehavior
Behaviors:

  1. CmsController
  2. RedirectController
Controllers:

  1. MailContact
Models:

Total: 6 layout widgets + 10 content widgets + 2 helpers + 1 behavior + 2 controllers + 1 model

<< Project Initialization Types Planning >>