Steps to run the app

Please make sure to have npm, composer and php version 8 and above installed

1) clone the repo and cd into web-portal

2) run "composer install" on terminal

3) run "npm install" again on terminal

4) run "cp .env.example .env"

5) run "php artisan key:generate"

6) run "php artisan serve"

7) visit http://127.0.0.1:8000 on browser to see the app live!

The files that contains the main codes are:

- app.js and app.css found in web-portal/public/

- helpers.php found in web-portal/app/misc/

- welcome.blade.php found in web-portal/resources/views/

- web.php found in web-portal/routes/

Hello dear web portal dev prospect!

This repository is a playground for your submission which should use PHP in the backend and HTML/JS in the frontend.

Before getting started, please hit the Use this template button to create a new repository on which you commit and push your code regularly for the task below. Once you are done, please mail us the link to your repository.

Good luck and have fun ☘️

Task

Develop a web page that connects to a remote API, downloads a dataset, displays a table with the downloaded dataset, and provides some basic search and filter functions.

In particular, the web page should:

• Request the data located at https://api.baubuddy.de/dev/index.php/v1/tasks/select from PHP
• Display the downloaded data in a table showing task, title, description and colorCode. The displayed HTML element for the colorCode should have its color set accordingly
• Create a search which allows searching for any of the data in the table
• Implement auto-refresh functionality which requests the data from above every 60 minutes and updates the table with the new data without reloading the web page. The data should be fetched via PHP
• Outside the table, create a button that opens a modal. In this modal, there should be another button that allows you to select any image from the file system. When you have selected the image, it will be displayed in the modal
  • Note that this is not linked to the data from above

Authorization

It is mandatory that your requests to the API are authorized. You can find the required request below:

This is how it looks in curl:

curl --request POST \
  --url https://api.baubuddy.de/index.php/login \
  --header 'Authorization: Basic QVBJX0V4cGxvcmVyOjEyMzQ1NmlzQUxhbWVQYXNz' \
  --header 'Content-Type: application/json' \
  --data '{
        "username":"365",
        "password":"1"
}'

The response will contain a JSON object, having the access token in json["oauth"]["access_token"]. For all subsequent calls this has to be added to the request headers as Authorization: Bearer {access_token}.

A possible implementation in PHP could be the following. You don't have to adopt this, you can also customize it or use another network library.

<?php
$curl = curl_init();
curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.baubuddy.de/index.php/login",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "{\"username\":\"365\", \"password\":\"1\"}",
  CURLOPT_HTTPHEADER => [
    "Authorization: Basic QVBJX0V4cGxvcmVyOjEyMzQ1NmlzQUxhbWVQYXNz",
    "Content-Type: application/json"
  ],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
?>