- Node v16.13.0 or later
- NPM v8.5.4 or later
- Yarn v1.22.17 or later
- PHP 8.1 or later
- MySQL 8.0 or later
- Composer 2.2.7 or later
- Run
npm i -g yarnto install yarn. - Run
yarn prepareto install GitHooks. - Run
yarn watchreal-time compiling of CSS/JS files. - Run
php artisan serveto run the application. - Run
./vendor/bin/sail upto run the application in Docker. - Run
php artisan migrateto run the database migrations. - Run
php artisan db:seedto run the database seeders. - Run
php artisan key:generateto generate the application key.
De api's zijn te bereiken via /api.
De API bestaat uit de volgende routes.
Alle API routes
| Route | Methode | Query | Response |
|---------------------------------|---------|---------------------------------------|-------------------------------------------------------------------------------------------|
| /ping | GET | | Pong |
| /questionnaires/{code} | GET | code: code van de participant | Een vragenlijst met daarbij de onderdelen en vragen. |
| /questionnaires/{code} | POST | code: code van de participant | Bericht met dat de vragenlijst is afgesloten. |
| /questions/{question}/{code} | GET | question: ID van de vraag | Een vraag met daarbij de antwoordmogelijkheden en gegeven antwoorden door de participant. |
| | | code: code van de participant | |
| /questions/{question}/{code} | POST | question: ID van de vraag | Bericht met dat het opslaan is geslaagd. |
| | | code: code van de participant | |
Voor een request moet je het volgende instellen
De header bevat de volgende onderdelen:
Content-Typeisapplication/jsonAcceptisapplication/jsonX-API-Keymoet de API key bevatten.
Elke response wordt teruggeven in een json formaat.
GET: /ping
"pong"GET: /questionnaires/{code}
{
"id": 1,
"research_id": 1,
"title": "Vragenlijst toegankelijkheid",
"description": "De algemene vragenlijst.",
"instructions": null,
"open": true,
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"sections": [
{
"id": 1,
"questionnaire_id": 1,
"geofence_id": 1,
"title": "Entree",
"description": "Benoem zowel je positieve als negatieve ervaringen.",
"location_description": "Dit is het gedeelte waar je NEMO binnen komt.",
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"questions": [
{
"id": 1,
"uuid": "ad93f8d7-a593-4564-b8e5-c762cd2575ee",
"version": 1,
"section_id": 1,
"title": "Route",
"question": "Hoe is de route naar NEMO toe?",
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"options": [
{
"id": 1,
"question_id": 1,
"type": "OPEN",
"extra_data": {
"placeholder": "Placeholder question"
},
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"answer": {
"id": 1,
"participant_id": 1,
"question_option_id": 1,
"values": [
"De route was erg prettig, de paden waren breed genoeg en de ingang stond duidelijk aangegeven."
],
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z"
}
},
{
"id": 2,
"question_id": 1,
"type": "IMAGE",
"extra_data": [],
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"answer": null
},
{
"id": 3,
"question_id": 1,
"type": "VIDEO",
"extra_data": [],
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"answer": null
},
{
"id": 4,
"question_id": 1,
"type": "VOICE",
"extra_data": [],
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"answer": null
},
{
"id": 5,
"question_id": 1,
"type": "MULTIPLE_CHOICE",
"extra_data": {
"multiple": true,
"values": [
"Waarde 1",
"Waarde 2",
"Waarde 3"
]
},
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z",
"answer": {
"id": 2,
"participant_id": 1,
"question_option_id": 5,
"values": [
"Waarde 1",
"Waarde 2"
],
"created_at": "2022-05-25T15:51:48.000000Z",
"updated_at": "2022-05-25T15:51:48.000000Z"
}
}
]
}
]
}
]
}
POST: /questionnaires/{questionnaire}
{
"message": "Participant finished!"
}
POST: /questions/{question}/{code}
{
"message": "answers saved!"
}
Text
@php
$extraData = array(
'before' => '$',
'after' => '.00'
);
@endphp
<x-input type="text" name="input" placeholder="input" :extraData="$extraData"></x-input>
Password
<x-input type="password" name="input" placeholder="input"></x-input>
Select
@php
$extraData = array(
'multiple' => true,
'options' => [
['option_1', 'value_1'],
['option_2', 'value_2'],
['option_3', 'value_3'],
]
);
@endphp
<x-input label="test" type="select" name="selectList" :extraData="$extraData" :value="['value_1', 'value_3']"></x-input>
Dates
<x-input type="date" name="input" value="2021-03-21"></x-input>
<x-input type="datetime" name="input" value="2021-03-21T08:00"></x-input>
Switch
<x-input type="switch" name="input" :value="true"></x-input>
Range
@php
$extraData = array(
'min' => 0,
'max' => 5,
'step' => 0.5
);
@endphp
<x-input type="range" name="input" :extraData="$extraData" :value="1.5"></x-input>
File
@php
$extraData = array(
'multiple' => false,
);
@endphp
<x-input type="file" name="input" :extraData="$extraData"></x-input>
Verschillende types zijn: primary, seocndary en remove.
Je kan of een submit knop maken, je hoeft dan alleen het type mee te geven.
<x-button class="mx-4" type="primary">Press me</x-button>
Of je kan een link ervan maken en dan moet je nog de link meegeven.
<x-button class="mx-4" type="primary" link="https://www.google.com">Press me</x-button>
Dit component kan je gebruiken voor een tabel:
<x-table :headers="$headers" :items="$items" :keys="$keys" :rowLink="$rowLink" :tableLinks="$tableLinks"/>
De headers zijn een array waarbij het alleen is toegestaan om te werken met strings.
goed: $headers = ['header_1','header_2']
fout: $headers = [1,true]
De items zijn een array van verschillende items. Hierbij mag de omsluitende array alleen maar array's bevatten.
goed:
$items = [
[
'id' => 1,
'name' => 'Martijn',
'age' => 20,
],
[
'id' => 2,
'name' => 'Martijn_two',
'age' => 180,
]
];
fout:
$items = [
'id' => 1,
'name' => 'Martijn',
'age' => 20,
[
'id' => 2,
'name' => 'Martijn_two',
'age' => 180,
]
];
De keys kunnen in een array van strings worden meegegeven.
$keys = ['key_one', 'key_two'];
Mocht je item er zo uitzien:
$item = [
'id' => 1,
'sub_item' => [
'id' = 1,
],
]
dan is de id van het sub_item als volgt op te halen:
$keys = ['id.sub_item.id', 'key_two'];
DIT WERKT NOG NIET VOOR EEN SUB ITEM MET MEERDERE ARRAYS.
Tabelinks zijn dynamisch gemaakt door een collection van de klasse TableLink te maken.
$tableLinks = collect($tableLink_one, $tableLink_two);
De link van naar een pagina wordt gemaakt op basis van de Laravel Route::class.
De naam in de link wordt gemaakt op basis van een defaults variable display bij de route.
Om een naam te geven aan een url voeg je deze code toe aan je route:
->defaults('display', 'home')
Dan ziet je route er bijvoorbeeld als volgt uit:
Route::get('/', function () {
return view('welcome');
})->name('welcome')->defaults('display', 'home');
Dan ziet een TableLink er als volgt uit:
use App\Utils\TableLink;
$tableLink = new TableLink('welcome`)
Om parameters voor een route mee te geven maak je gebruik van de TableLinkParameter klasse.
Stel je route ziet er als volgt uit:
Route::get('/fake-route/{fake_param_one}')
->name('fake.route.with.one.param')->defaults('display', 'fake');
dan ziet je TableLinkParameter er zo uit:
use App\Utils\TableLinkParameter;
// Let goed op de parameters die je meegeeft, deze MOET je bij naam meegeven!
$tableLinkParameter_one = new TableLinkParameter(
routeParameter: 'fake_param_one',
routeValue: '321'
);
en deze geef je als volgt mee aan je TableLink.
$tableLinkParameters = collect([
$tableLinkParameter_one
]):
$tableLink = new TableLink(
'fake.route.with.one.param`,
$tableLinkParameters
);
Mocht een link veranderen per item (omdat je naar een bepaalde details pagina van een item wilt navigeren) dan kan je dit als volgt doen.
Stel je item ziet er als volgt uit:
$item = [
'item_id' => 9876,
'name' => 'Martijn',
];
Dan ziet je TableLinkParameter er als volgt uit:
use App\Utils\TableLinkParameter;
// Let goed op de parameters die je meegeeft, deze MOET je bij naam meegeven!
$tableLinkParameter_one = new TableLinkParameter(
routeParameter: 'fake_param_one',
itemIndex: 'item_id'
);
hierdoor zal per tabelrij worden gezocht naar de juiste waarde voor de parameter.
Ook deze TableLinkParameter geef je als volgt mee aan de TableLink:
$tableLinkParameters = collect([
$tableLinkParameter_one
]):
$tableLink = new TableLink(
'fake.route.with.one.param`,
$tableLinkParameters
)
De rowlink is een TableLink en deze kan je ook als TableLink meegeven.
Voorbeeld:
$rowLink = new TableLink('welcome');
Een breadcrumb instellen is heel simpel.
Voeg deze code toe aan de view:
<x-breadcrumb />
Om een naam te geven aan een url voeg je deze code toe aan je route:
->defaults('display', 'Tekst welke wordt weergegeven in de breadcrumb')
->defaults('model', 'Modelnaam (als dit van toepassing is voor de route)')
Dan zie je route er bijvoorbeeld als volgt uit:
Route::get('/', function () {
return view('welcome');
})->name('welcome')->defaults('display', 'home');
Mocht je geen specifieke naam willen voor je route (omdat er bijv een ID in zit verwerkt) dan hoef je bovenstaande code niet te gebruiken.
Voorbeeld:
Route::get('/users/{id}', function () {
return view('users.details');
})->name('users.details');
Dan wordt de naam van je breadcrumb het {id} (bijvoorbeeld: 1)
De rest is magie 🤯
Geef een lijst met tabs mee aan het component en de tab die actief is. Geef de sections dezelfde naam als de namen in de meegegeven lijst. Het component zorgt er met javascript voor dat de juiste section wordt getoond.
@extends('layouts.app')
@section('content')
<h1>Welcome to this page</h1>
<x-tabs :tabs="['Details', 'Vragenlijsten']">
@section('Details')
Details
@endsection
@section('Vragenlijsten')
Vragenlijsten
@endsection
</x-tabs>
@endsection