mirror of
https://github.com/Alvin-Zilverstand/school.git
synced 2026-03-06 13:26:22 +01:00
challenge_14
This commit is contained in:
Alvin
2
projects/year_02/challenge_14/Challenge_14_Magazijn_App_plannen/.gitignore
vendored
Normal file
2
projects/year_02/challenge_14/Challenge_14_Magazijn_App_plannen/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
*.aup3
|
||||||
|
*.wav
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,68 @@
|
|||||||
|
# Challenge 14: Magazijn App
|
||||||
|
|
||||||
|
## Over dit project
|
||||||
|
|
||||||
|
Voor studenten en docenten liggen er in het magazijn veel materialen die ze kunnen gebruiken. Een app om deze spullen te lenen is een goede oplossing om alles netjes te organiseren. Met de app kun je makkelijk bijhouden wie wat leent en wanneer het terug moet. Zo raken spullen niet meer kwijt. Dit bespaart tijd, zorgt voor minder verwarring en maakt het voorraadbeheer een stuk makkelijker.
|
||||||
|
|
||||||
|
## Functies
|
||||||
|
|
||||||
|
Dit zijn de belangrijkste functies van de app:
|
||||||
|
|
||||||
|
* **Gebruikers:** Je kunt verschillende rollen aanmaken (beheerder, medewerker, gebruiker).
|
||||||
|
* **Items:** Je kunt spullen toevoegen, aanpassen en verwijderen.
|
||||||
|
* **Uitleensysteem:** Een systeem om spullen te lenen en terug te brengen.
|
||||||
|
* **Status:** Je kunt zien of iets is uitgeleend, teruggebracht of te laat is.
|
||||||
|
* **Notificaties:** Gebruikers krijgen een berichtje, bijvoorbeeld als ze iets moeten terugbrengen.
|
||||||
|
* **Boetes:** Een systeem voor boetes als spullen te laat terugkomen.
|
||||||
|
|
||||||
|
## Database Opbouw (ERD)
|
||||||
|
|
||||||
|
Hieronder zie je hoe de database is opgebouwd.
|
||||||
|
|
||||||
|
### Entiteiten en Attributen
|
||||||
|
|
||||||
|
**1. Gebruiker**
|
||||||
|
* `gebruiker_id` (PK)
|
||||||
|
* `gebruikersnaam`
|
||||||
|
* `wachtwoord`
|
||||||
|
* `e-mail`
|
||||||
|
* `rol` (beheerder, medewerker, gebruiker)
|
||||||
|
* `registratiedatum`
|
||||||
|
|
||||||
|
**2. Item**
|
||||||
|
* `item_id` (PK)
|
||||||
|
* `naam`
|
||||||
|
* `beschrijving`
|
||||||
|
* `categorie`
|
||||||
|
* `beschikbaarheid` (boolean)
|
||||||
|
* `locatie`
|
||||||
|
|
||||||
|
**3. Uitleen**
|
||||||
|
* `uitleen_id` (PK)
|
||||||
|
* `gebruiker_id` (FK)
|
||||||
|
* `item_id` (FK)
|
||||||
|
* `uitleendatum`
|
||||||
|
* `retourdatum`
|
||||||
|
* `status` (uitgeleend, geretourneerd, te laat)
|
||||||
|
|
||||||
|
**4. Notificatie**
|
||||||
|
* `notificatie_id` (PK)
|
||||||
|
* `gebruiker_id` (FK)
|
||||||
|
* `bericht`
|
||||||
|
* `datum`
|
||||||
|
* `gelezen` (boolean)
|
||||||
|
|
||||||
|
**5. Boete**
|
||||||
|
* `boete_id` (PK)
|
||||||
|
* `uitleen_id` (FK)
|
||||||
|
* `bedrag`
|
||||||
|
* `betaald` (boolean)
|
||||||
|
|
||||||
|
### Relaties
|
||||||
|
|
||||||
|
* Een **Gebruiker** kan meerdere spullen **lenen** (meerdere Uitleen-records).
|
||||||
|
* Een **Item** kan door meerdere mensen **geleend worden** (meerdere Uitleen-records).
|
||||||
|
* Elke **Uitleen** hoort bij één **Gebruiker** en één **Item**.
|
||||||
|
* Een **Gebruiker** kan meerdere **Notificaties** krijgen.
|
||||||
|
* Een **Notificatie** hoort bij één **Gebruiker**.
|
||||||
|
* Een **Uitleen** kan een **Boete** hebben (als het te laat is).
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Vista College Color Palette: #FEFEFE, #CCCECF, #D3705A, #CD977E, #1F4952 -->
|
||||||
|
|
||||||
|
<!-- Main Building -->
|
||||||
|
<rect x="4" y="12" width="24" height="16" fill="#1F4952" rx="1"/>
|
||||||
|
|
||||||
|
<!-- Roof with 3D effect -->
|
||||||
|
<path d="M2 12L16 4L30 12L16 8Z" fill="#D3705A"/>
|
||||||
|
|
||||||
|
<!-- Main Door -->
|
||||||
|
<rect x="13" y="16" width="6" height="12" fill="#CD977E"/>
|
||||||
|
<circle cx="18" cy="22" r="0.5" fill="#FEFEFE"/>
|
||||||
|
|
||||||
|
<!-- Windows -->
|
||||||
|
<rect x="7" y="15" width="3" height="3" fill="#CCCECF" rx="0.5"/>
|
||||||
|
<rect x="22" y="15" width="3" height="3" fill="#CCCECF" rx="0.5"/>
|
||||||
|
|
||||||
|
<!-- Loading Dock -->
|
||||||
|
<rect x="11" y="27" width="10" height="1" fill="#CCCECF"/>
|
||||||
|
|
||||||
|
<!-- Subtle Shadow -->
|
||||||
|
<rect x="4" y="28" width="24" height="0.5" fill="rgba(0,0,0,0.2)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 929 B |
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Magazijn-App</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<header>
|
||||||
|
<div class="header-buttons">
|
||||||
|
<div class="left-buttons">
|
||||||
|
<button>home</button>
|
||||||
|
<button>info</button>
|
||||||
|
<button>Magazijn</button>
|
||||||
|
</div>
|
||||||
|
<div class="right-buttons">
|
||||||
|
<button>winkelmand</button>
|
||||||
|
<button>vertalen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div id="info">
|
||||||
|
placegolder
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
// Main application code
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Initialize any variables or state
|
||||||
|
|
||||||
|
// Add event listeners
|
||||||
|
|
||||||
|
// Define helper functions
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Utility functions can be defined here
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
body{
|
||||||
|
background: linear-gradient(to right, #d3705a, #cd977e);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
background-color: #1f4952;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-buttons, .right-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
color: white;
|
||||||
|
font-size: large;
|
||||||
|
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
|
||||||
|
background-color: #d3705a;
|
||||||
|
height: 75px;
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: black solid 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover{
|
||||||
|
background-color: #cd977e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info{
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border:black solid 2px ;
|
||||||
|
margin: auto;
|
||||||
|
background-color: white;
|
||||||
|
max-width: 90%;
|
||||||
|
height: 75vb;
|
||||||
|
margin-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user