# Haptiplan - Onboarding

Sammlung von Hinweisen für den Einstieg in das Projekt "haptische Planspiel"

## CI/CD
von OK

# Laravel CI/CD Workflow

This document outlines the GitHub Actions workflow for the Laravel application, which integrates Continuous Integration (CI) and Continuous Deployment (CD).

## Workflow-Übersicht

Dieser Workflow automatisiert den Prozess von:

1. Continuous Integration (CI):

* Installiert Abhängigkeiten.
* Führt Migrationen aus.
* Stellt sicher, dass die Anwendung bereit für die Bereitstellung ist.

2. Continuous Deployment (CD):

* Stellt die Anwendung auf einem Remote-Server bereit, nachdem die CI-Schritte erfolgreich abgeschlossen wurden.

Der Workflow wird bei Push-Ereignissen auf den main-Branch ausgelöst.

### Workflow YAML Configuration

name: Laravel CI/CD

on:
  push:
    branches: [ main ]

jobs:
  laravel-ci:
    runs-on: ubuntu-latest
    services:
      mysql:
        image: mysql:8
        env:
          MYSQL_ROOT_PASSWORD: root
          MYSQL_DATABASE: laravel
          MYSQL_USER: laravel
          MYSQL_PASSWORD: secret
        ports:
          - 3306:3306
        options: >-
          --health-cmd="mysqladmin ping --silent"
          --health-interval=10s
          --health-timeout=5s
          --health-retries=3

    steps:
      - uses: actions/checkout@v3

      - name: Set up PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.2'
          extensions: mbstring, bcmath, pdo, pdo_mysql, curl
          coverage: none

      - name: Copy .env
        run: cp .env.example .env

      - name: Install dependencies
        run: composer install --no-progress --prefer-dist --optimize-autoloader

      - name: Generate app key
        run: php artisan key:generate

      - name: Set up database
        run: php artisan migrate --force

  deploy:
    runs-on: ubuntu-latest
    needs: laravel-ci
    if: github.ref == 'refs/heads/main' && success()
    steps:
      - uses: actions/checkout@v3

      - name: Set up PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.2'
          extensions: mbstring, bcmath, pdo, pdo_mysql, curl
          coverage: none

      - name: Copy .env
        run: cp .env.example .env

      - name: Install dependencies
        run: composer install --no-progress --prefer-dist --optimize-autoloader

      - name: Generate app key
        run: php artisan key:generate

      - name: Set up SSH key for deployment
        uses: webfactory/ssh-agent@v0.5.3
        with:
          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}

      - name: Deploy to server
        run: |
          ssh -o StrictHostKeyChecking=no user@your-server-ip "cd /path/to/your/laravel/project && git pull origin main && composer install --no-dev --optimize-autoloader && php artisan migrate --force && php artisan config:cache && php artisan route:cache && php artisan view:cache"

### Erklärung der Jobs
#### 1. laravel-ci Job (Continuous Integration)

Dieser Job ist verantwortlich für die Einrichtung der Umgebung und die Vorbereitung der Anwendung für die Bereitstellung. Er umfasst folgende Schritte:

* **Code auschecken**: Ruft den neuesten Code aus dem Repository ab.
* **PHP einrichten**: Konfiguriert die benötigte PHP-Version und -Erweiterungen für die Laravel-Anwendung.
* **.env kopieren**: Kopiert die Datei .env.example zu .env, um die Umgebungsvariablen zu konfigurieren.
* **Abhängigkeiten installieren**: Installiert die Projektabhängigkeiten mit Composer.
* **App-Schlüssel generieren**: Erzeugt den Laravel-App-Schlüssel.
* **Datenbankmigrationen ausführen**: Führt Migrationen aus, um sicherzustellen, dass die Datenbank mit der Anwendung synchronisiert ist.

#### 2. deploy Job (Continuous Deployment)

Nachdem der Job laravel-ci erfolgreich abgeschlossen wurde, wird der Deployment-Job ausgeführt. Dieser beinhaltet folgende Schritte:

* **Code auschecken**: Ruft erneut den neuesten Code aus dem Repository ab.
* **PHP einrichten**: Richtet erneut die PHP-Umgebung ein (zur Gewährleistung der Konsistenz).
* **Abhängigkeiten installieren**: Installiert Produktionsabhängigkeiten mit Composer.
* **App-Schlüssel generieren**: Stellt sicher, dass der Anwendungsschlüssel generiert ist.
* **SSH-Schlüssel einrichten**: Konfiguriert den SSH-Zugang zum Server für die Bereitstellung.
* **Auf Server bereitstellen**: Holt den neuesten Code vom ```main``` Branch auf dem Remote-Server, installiert Produktionsabhängigkeiten, führt Migrationen aus und leert den Cache.

### Workflow Triggers

* ***Auslöser(Trigger)***: Dieser Workflow wird bei ```push``` Ereignissen auf den ```main``` branch ausgelöst.
* ***Erfolgreiche Bereitstellung***: Der Deployment-Job wird nur ausgeführt, wenn der ```laravel-ci``` job erfolgreich abgeschlossen wurde. So wird sichergestellt, dass die Anwendung bereit ist, bevor sie bereitgestellt wird.

### Einrichtungsanleitung
#### 1. SSH-Schlüssel einrichten

Ein privater SSH-Schlüssel muss zu den GitHub Secrets hinzugefügt werden, um einen sicheren Zugriff auf den Deployment-Server zu ermöglichen. So geht’s:

* Gehe zu **Einstellungen > Secrets > Neues Repository-Secret**
* Vergib den Namen ```SSH_PRIVATE_KEY```
* Füge deinen privaten SSH-Schlüssel in das Wertefeld ein

#### 2. Server-Voraussetzungen

Stelle sicher, dass der Server so eingerichtet ist, dass er:

* SSH-Verbindungen akzeptiert
* Git, PHP, Composer und alle erforderlichen Erweiterungen installiert hat

#### 3. Umgebungs-Konfiguration

Die Datei ```.env.example``` wird während des CI/CD-Prozesses in ```.env``` kopiert. Die ```.env``` -Datei kann je nach Umgebung angepasst werden.

## Fazit

Diese CI/CD-Pipeline automatisiert den Prozess der Einrichtung und Bereitstellung einer Laravel-Anwendung auf einem Server. Der Workflow stellt sicher, dass alle Abhängigkeiten installiert und die Migrationen durchgeführt werden, bevor die Anwendung bereitgestellt wird. Durch die Nutzung von GitHub Actions wird der Prozess effizient und erfordert weniger manuelle Eingriffe.

## Frontend

### HTML Drag&Drop API
von NM

<!-- Element zum Löschen auf Löschbereich ziehen -->
<div id="item" draggable="true" ondragstart="dragItem(event)">
    <div class="name" id="item_name">Item Name</div>
    <div class="price" id="item_price">$20.00</div>
    <form class="delete_form">
        <input type="hidden" name="item_id">
    </form>
</div>

<!-- Löschbereich -->
<div id="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)">
  Löschbereich
</div>

#item {
  margin:20px;
  padding:10px;
  width:90px;
  background-color:#E1EEE1;
}

#drop-zone {
  margin:20px;
  padding:10px;
  background-color:#E1EEE1;
  /*Feste Position für den Löschbereicht auf dem Bildschirm*/
  position: fixed;
  top: 25%;
  right: 5%;
}

/* Optional */
.dragging {
  opacity:0.5;
}

// Drag & Drop ermöglichen
function allowDrop(event) {
  event.preventDefault();
}

// Drop in den Löschbereich
function drop(event) {
  event.preventDefault();
  // Item löschen
  item.remove();
}

// Drag des Items
function dragItem(event) {
  // ID vom Item speichern
  const item_id = event.target.querySelector('input[name="item_id"]').value;
  event.dataTransfer.setData("text/plain", item_id);
  // Optional: nur für CSS
  event.target.classList.add("dragging");
  event.target.addEventListener('dragend', dragEnd);
}

// Optional: nur für CSS
function dragEnd(event) {
  event.target.classList.remove("dragging");
}

<iframe height="300" style="width: 100%;" scrolling="no" title="Drag&amp;Drop" src="https://codepen.io/ninamerkt/embed/RwdYPGy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/ninamerkt/pen/RwdYPGy">
Drag&amp;Drop</a> by ninamerkt (<a href="https://codepen.io/ninamerkt">@ninamerkt</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Backend

### DAO (Data Access Object)

DAO steht für Data Access Object. Es ist ein Entwurfsmuster, das dazu dient, die Datenzugriffsschicht einer Anwendung von der Geschäftslogik zu trennen. Es kapselt die Datenbankinteraktionen.

Zusätzlich definiert das DAO meistens Schnittstellen, die die grundlegenden CRUD-Operationen(Create, Read, Update, Delete) für die Daten festlegt.

Durch die Verwendung von DAO müssen Model-Klassen sich nicht mehr um die Details der Datenbankverbindung kümmern. Das bedeutet, dass die Model-Klassen sich auf ihre Hauptaufgabe, nämlich die Datenrepräsentation, konzentrieren können, während DAO sich um den Datenbankzugriff kümmert. Das führt zu saubererem, besser strukturiertem Code und erleichtert die Wartung und Tests der Anwendung.