Technische documentatie

Op deze pagina vind je een voorbeeld van hoe je een ERD ontwerpt, die naar een EERD vertaald, daar een SQL bestand van maakt en dit vervolgens als een MVC-structuur binnen je code implementeert.

ERD

EERD

erDiagram
    direction LR

    Event ||..o{ Participant : "has"

    Event {
        INT id "PK"
        VARCHAR name
        VARCHAR description "NULL"
        DATE date
        BOOLEAN archived
    }

    Participant {
        INT id "PK"
        INT eventId "FK"
        VARCHAR name
        INT share
    }

MySQL

/* Tables */
CREATE TABLE `event` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `description` varchar(255) DEFAULT NULL,
  `date` date NOT NULL,
  `archived` tinyint(1) NOT NULL
);

CREATE TABLE `participant` (
  `id` int(11) NOT NULL,
  `eventId` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `share` int(11) NOT NULL
);

/* Primary keys */
ALTER TABLE `event`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `participant`
  ADD PRIMARY KEY (`id`),
  ADD KEY `fk_participant_event` (`eventId`);

/* Auto increment */
ALTER TABLE `event`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

ALTER TABLE `participant`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

/* Foreign keys */
ALTER TABLE `participant`
  ADD CONSTRAINT `fk_participant_event` FOREIGN KEY (`eventId`) REFERENCES `event` (`id`);

/* Data */
INSERT INTO `event` (`id`, `name`, `description`, `date`, `userId`, `archived`) VALUES
(1, 'Boottocht', 'Door de grachten van Amsterdam', '2025-08-21', 1, 0),
(2, 'Maandborrel', 'In Fest', '2025-08-28', 1, 1);

INSERT INTO `participant` (`id`, `eventId`, `name`, `share`) VALUES
(1, 1, 'Lennard', 10),
(2, 1, 'Ronald', 15),
(3, 2, 'Lennard', 64),
(4, 2, 'Ingrid', 64);

Class Diagram

---
config:
  class:
    hideEmptyMembersBox: true
---
classDiagram
    direction LR

    event-add-ts -- event-add-html
    event-delete-ts -- event-delete-html
    event-detail-ts -- event-detail-html
    event-edit-ts -- event-edit-html
    events-overview-ts -- events-overview-html
    event-add-ts *-- EventController
    event-delete-ts *-- EventController
    event-detail-ts *-- EventController
    event-edit-ts *-- EventController
    events-overview-ts *-- EventController
    Controller <|-- EventController
    EventController *-- EventRepository
    EventController o-- Event
    EventRepository o-- Event
    EventRepository -- EventData

    namespace wwwroot {
        class event-add-html {
        }
        class event-delete-html {
        }
        class event-detail-html {
        }
        class event-edit-html {
        }
        class events-overview-html {
        }
    }

    namespace pages {
        class event-add-ts {
        }
        class event-delete-ts {
        }
        class event-detail-ts {
        }
        class event-edit-ts {
        }
        class events-overview-ts {
        }
    }

    namespace controllers {
        class Controller {
            <<abstract>>
            +renderNav() void
        }

        class EventController {
            -eventRepository: EventRepository

            +constructor()
            +renderOverviewPage() Promise~void~
            +renderAddPage() Promise~void~
            +renderEditPage() Promise~void~
            +renderDeletePage() Promise~void~
            +renderDetailPage() Promise~void~
        }
    }

    namespace models {
        class Event {
            -_id: number
            -_name: string
            _description?: string
            _date: Date
            _archived: boolean

            +constructor(id, name, description, date, archived?)
            +get id() number
            +set id(value: number) void
            +get name() string
            +set name(value: number) void
            +get description() string | undefined
            +set description(value: string | undefined) void
            +get date() Date
            +set date(value: Date) void
            +get archived() boolean
            +set archived(value: boolean) void
        }
    }

    namespace repositories {
        class EventData {
            <<type>>
            id: number
            name: string
            description?: string
            date: Date
            archived: boolean
        }

        class EventRepository {
            +getById(id) Event | undefined
            +getAll() Event[]
            +create(name, description, date, archived) Event | undefined
            +update(event: Event) boolean
            +delete(id) boolean
        }
    }