@startuml
skinparam packageStyle rectangle
skinparam linetype polyline

package "Web Client" {
    rectangle View as V {
        component "HTML/CSS/JS" as HTML
    }
}

package "Web Server" {
    component Middleware as MW {
        [Authentication]
        [Request Parsing]
    }

    component Controller as C {
        [Request Handling]
        [Routing Logic]
    }

    component Model as M {
        [Business Logic]
        [Data Validation]
    }
}

package "Database" {
    database "DB" as DB
}

V -down-> MW : "Request (GET, POST, etc.)"
MW -down-> C : "Validated/Processed Request"
C --> M : "Business Logic Call"
M --> DB : "Query/CRUD Operations"
DB --> M : "Data Response"
M --> C : "Processed Data"
C -up-> MW : "Response (Data/HTML)"
MW -up-> V : "Response (Processed)"
@enduml
