1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer...

10
Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST localhost 2b) POST hetzner.de 1a)GET Abfrage localhost per Angular C:\xampp\htdocs\slim3rk Datenbank: schueler db.php:

Transcript of 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer...

Page 1: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Verwendung einer eigenen API - erstellt mit SLIM 3

Inhalt:

1a) GET localhost

1b) GET hetzner.de

2a) POST localhost

2b) POST hetzner.de

1a)GET Abfrage localhost per Angular

C:\xampp\htdocs\slim3rk

Datenbank: schueler

db.php:

Page 2: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Öffne die „index.php“.

Ändere auf „schueler“ und verwende nur drei Elemente aus den Datensätzen nämlich

s_id

Vorname

Nachname

Info: Man kann nicht alles (*) selektieren, da auch ein Bild (blob) vorkommt und damit aber nichts

ausgegeben werden kann. Somit würde nichts angezeigt werden.

Ergebnis:

Diese URL kann nun auch im Beispiel mit Angular verwendet werden, nämlich für die Abfrage der

Anzeige der „Schüler“.

Öffne daher die „service.ts“ und ändere den Code in Zeile 14 von

http://digbizmistelbach.at/angular/angular_schueler.php

auf diese URL der api2:

ABER: Fehler

Keine Anzeige möglich, da „Cross-Origin“ die Anfrage blockiert.

Page 3: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Lösung: Die .htaccess (im Ordner public )muss noch einen Code erhalten, nämlich folgenden:

# Set the headers for the restful api Header always set Access-Control-Allow-Origin http://localhost:4200 Header always set Access-Control-Max-Age "1000" Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Header always set Access-Control-Allow-Origin "*" Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Access-Control-llow-Origin" Header always set Access-Control-Allow-Methodes "PUT, GET, POST, DELETE, OPTIONS" Ergebnis:

Jetzt passt es:

Page 4: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

1b)GET-Abfrage SLIM auf Hetzner Server http://digbizmistelbach.at/slim3rkhetzner/public/api/schueler Upload des SLIM-Ordners per FTP auf den Hetzner-Server:

Details zur Get-Abfrage: Daten von der Datenbank:

Öffne die „db.php“

Beachte:

Page 5: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Auf Hetzner heißt die ID nicht „s_id“ sondern nur „id“. Daher muss die GET-Abfrage in „index.php“ geändert werden.

Ergebnis:

Funktioniert auch direkt als URL:

Page 6: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

2a) POST localhost (SLIM) Das Formular der Rotes Kreuz-Anwendung soll Schüler in die Datenbank „schueler“ schreiben. Öffne die Angular-Seite mit dem Formular:

Hier sind vor allem die Elemente „name“ wichtig, da diese in die Datenbank wandern. Hier gibt es daher folgende Felder:

vorname

nachname

geschlecht

klasse

gehalt

Das sind auch die aus der Datenbank:

Geburtsdatum und Foto wird nicht befüllt. Öffne den Editor „visual studio code“ und dann den SLIM Ordner „slim3rk“. Dann die „index.php“. Danach kopiere das fertige Skript aus der Site: https://applerinquest.com/how-to-create-the-rest-api-with-slim-framework/ Dort genau jenen Teil der POST betrifft.

Page 7: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Füge es in der „index.php“ ein, nachdem der Code von der GER-Abfrage fertig ist. Nun müssen ein paar Änderungen vorgenommen werden: Hier das Original noch

Füge darunter statt „name“ und „address“ folgende Elemente ein, nämlich die, die auch im Formular vorkommen und in die Datenbank wandern sollen:

Page 8: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Darunter muss man alle nochmals verwenden:

Dann nochmals darunter ändere wieder den Code mit den neuen Elementen:

Statt dem englischen Text kann man einen besseren eingeben: Test mit POSTMAN: http://localhost/slim3rk/public/api/postForm/add

Ergebnis mit POSTMAN testen http://localhost/slim3rk/public/api/schueler

Page 9: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

2b)POST mit SLIM auf hetzner.de Öffne den Ordner „slim3rkhetzner“. Da die „db.php“ bereits aktualisiert wurde, müssen jetzt manche Elemente der POST-Abfrage in der „index.php“ angepasst werden. Öffne die „index.php“.

Page 10: 1a)GET Abfrage localhost per Angulareberhart.media/pdfs/slim/1.slim3rk.pdf · Verwendung einer eigenen API - erstellt mit SLIM 3 Inhalt: 1a) GET localhost 1b) GET hetzner.de 2a) POST

Testen auf POSTMAN:

Ergebnis:

Info: