Login verbessern mit AJAX/PHP?
Ich habe ein Login gebaut. Jenen sollen wir nun ausschließlich mit AJAX verbessern. (Wir dürfen dabei nicht sowas wie JQUERY verwenden. Das wissen fehlt uns aber dafür an meisten. Vielleicht kann jemand mir dabei helfen mein Login umzubauen und zu verstehen was ich mache.
Mein Login-Quelltext:
<?php
$pdo = new PDO('mysql:host=localhost;dbname=phptest', 'root', '');
if(isset($_GET['login'])) {
$email = $_POST['Email'];
$passwort = $_POST['Passwort'];
$statement = $pdo->prepare("SELECT * FROM login WHERE Email = :Email");
$result = $statement->execute(array('Email' => $email));
$user = $statement->fetch();
//Überprüfung des Passworts
if ($user !== false && password_verify($passwort, $user['Passwort'])) {
$_SESSION['userid'] = $user['ID'];
die('Login erfolgreich. Weiter zu <a href="index.php?site=Startseite">internen Bereich</a>');
} else {
$errorMessage = "E-Mail oder Passwort war ungültig<br>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<?php
if(isset($errorMessage)) {
echo $errorMessage;
}
?>
<form action="Loginseite.php?login=1" method="post">
E-Mail:<br>
<input type="email" size="40" maxlength="250" name="Email" required><br><br>
Dein Passwort:<br>
<input type="password" size="40" maxlength="250" name="Passwort" required><br>
<input type="submit" value="Login">
</form>
</body>
</html>
3 Antworten
Du brauchst dich im Grunde mit JavaScript nur an das submit-Event des Formulars hängen. Die Attribute action und method fliegen dafür im Markup raus.
const form = // get form ...
form.addEventListener("submit", evt => {
evt.preventDefault();
// ...
});
In dem kannst du die Formulardaten sammeln:
const formData = new URLSearchParams(new FormData(form));
gegebenenfalls noch einmal validieren und anschließend verschicken:
fetch("check.php?login=1", { method: "post", body: formData })
.then(response => response.text())
.then(answer => {
// ...
});
Die Antwort, die du erhältst, kann im Callback verarbeitet werden. In answer würde dann der konkrete Text aus dem Response Body stehen.
Den PHP-Teil, der aktuell am Anfang deiner Datei steht, verschiebst du in eine eigene Datei. Meinem Beispielcode zu Folge, müsste sie check.php heißen.
Die Fehlermeldung ($errorMessage) müsstest du nun direkt ausgeben. Mit JavaScript kannst du sie innerhalb des oben erwähnten Callbacks in das DOM einfügen. Sollte die Anmeldung stattdessen erfolgreich gelaufen sein, benötigst du eine Weiterleitung (oder du fügst deinen Link im DOM ein):
location.href = "Ziel-URL...";
Zuletzt noch ein paar Verbesserungsvorschläge zu deinem aktuellen Stand:
1) Verwende überall eine sichere Zeichenkodierung wie UTF-8. Die schützt deine Anwendung vor Injections und reduziert Fehlerfälle.
Änderungen müsstest du dabei an drei Stellen vornehmen. Einmal beim Connectionstring:
$pdo = new PDO('mysql:host=localhost;dbname=phptest;charset=utf8mb4', 'root', '');
Dann sollte die Datenbank natürlich entsprechend konfiguriert werden (Zeichenkodierung utf8mb4 - das ist im Prinzip UTF-8, Kollation: utf8mb4_unicode_ci).
Und zu guter Letzt fehlt noch eine Metaangabe im head deines HTML-Dokuments.
<meta charset="utf-8">
2) Bau weitere Filter / Tests ein, bevor du überhaupt eine Datenbankverbindung herstellst (aktuell verbindest du dich auch dann mit der Datenbank, wenn keine Daten verschickt wurden). In PHP gibt es hierfür Filterfunktionen.
Uns wurde gesagt wir sollen zuerst die PHP Daten auslagern. Und mithilfe eines Scripts auf den PHP Teil dann drauf zugreifen. Diesen Teil haben wir noch jetzt dazu bekommen aber damit anfangen kann ich nichts. Ich verstehe es leider überhaupt nicht. Hier der Teil den wir bekommen haben:*
Vielen Dank erstmal für deine Hilfe ich werde schauen ob ich damit was anstehen kann.
Dieser Abschnitt verschickt einen POST-Request mittels der XHR-API. Diese Methodik ist etwas älter, die von mir gezeigte Fetch-API soll sie künftig ablösen. Aber du kommst mit beiden Wegen ans Ziel.
Das XMLHttpRequest-Objekt stellt hierbei den Request dar. Ihm werden die notwendigen Daten überreicht, wie die Request-Methode (POST), die Request-URL (cookies.php), die Daten für den Body (siehe daten-Variable) sowie eine MIME-Typeangabe für den Request-Header Content-Type. Letztere gibt an, welches Datenformat im Request Body liegt. Das könnte reiner Text sein (text/plain), Text im JSON-Format (application/json), o.ä.. In deinem Beispiel deutet der MIME-Type an, dass es sich um eine URL-enkodierte Schlüsselwertkette handelt (die man also auch problemlos an eine URL hängen könnte):
schluessel1=wert1&schluessel2=wert2&...
URL-Enkodiert bedeutet hierbei, dass bestimmte Sonderzeichen (wie Leerzeichen oder Klammern, die in einer URL nicht zulässig sind) gegen andere Zeichenfolgen ausgetauscht wurden, um beim Datentransport keinen Datenverlust zu haben.
Würde der Nutzername bei dir Max Mustermann lauten, würde die Zeichenkette so aussehen:
username=Max+Mustermann
Das Plus ist hierbei das Austauschzeichen für das Leerzeichen.
Ein noch relevanter Part ist der Callback für das onreadystatechange-Event. Wenn der Request verschickt wird, werden verschiedene Phasen durchlaufen. Immer wenn eine Phase erreicht wird, wird das Event getriggert und die Funktion aufgerufen, die dem Event als Handler zugeordnet wurde.
Die Funktion prüft hier, ob die letzte Phase (readyState) erreicht wurde (der Request wurde verschickt) und der Response erfolgreich war (siehe HTTP Statuscode 200). Wenn ja, wird der Text aus dem HTTP Response gelesen, der von der PHP-Anwendung als Antwort übermittelt wurde und im DOM sowie der Browserkonsole eingefügt.
Weiteres zur XHR-API findest du auf MDN und ein kurzes Tutorial bietet W3Schools.
Okay so langsam steige ich hinter deinen Tipps. Hab es bis jetzt aber noch nicht geschafft einzubauen. Ich würde es jetzt noch kurz weiterprobieren. Wenn ich es nicht schaffe könntest du meinen Quellcode bearbeiten? Würde dir dann meinen aktuellen Stand schicken und du sagst vielleicht was ich falsch gemacht habe
"Die Antwort, die du erhältst, kann im Callback verarbeitet werden. In answer würde dann der konkrete Text aus dem Response Body stehen." Diesem Teil verstehe ich leider und nicht und ich weiß auch nicht was du mit DOM meinst
Ein einfacher POST-Request mit Fetch würde so aussehen:
fetch("check.php?login=1", { method: "post", body: formData })
Dieser schickt soweit nur die Formulardaten via POST-Methode an die check.php.
Der Server bzw. die PHP-Anwendung würde daraufhin zwar einen HTTP Response zurückschicken, doch der wird in dem Fall noch gar nicht im JavaScript verarbeitet. Die then-Aufrufe dienen dazu, Callbacks zu registrieren. Also Funktionen, die aufgerufen werden, sobald der Response vom Server da ist.
Der erste Callback holt lediglich den Text aus dem Response Body.
.then(response => response.text())
Angenommen, der Login war nicht erfoglreich, könnte also "E-Mail oder Passwort war ungültig<br>" darin stehen, da das PHP-Skript diesen Text via echo zurückgegeben hat.
Im zweiten Callback kannst du das Ergebnis des ersten Callbacks verwerten. Der Response-Text steht nun in der Variable answer. Du könntest den Text nun z.B. in der Konsole ausgeben oder irgendwo anders.
.then(answer => {
console.log(answer);
});
Lies begleitend dazu den Artikel Arrow Function. Bezüglich der then-Methoden erhältst du Hintergrundinformationen, wenn du dich mit Promises beschäftigst (das aber nur so am Rande).
Das DOM (Document Object Model) bildet die komplette Seite (bzw. das HTML-Dokument) in Form einer Baumstruktur ab. Direkt beim Laden einer Webseite wird es aufgebaut und kann anschließend von JavaScript über die DOM-API manipuliert werden. Jede Änderung am Modell wird auch auf die Seite selbst übertragen.
Hier findest du eine Einführung. Am Seitenende ist zudem ein Verzeichnis zu weiteren Kapitelabschnitten, in denen erklärt wird, wie man auf bestimmte Elemente zugreifen und sie im Inhalt oder in ihren Attributen verändern kann.
aus dem abfrageteil php machst du eine eigene datei
und dann machst einen http request via post
gibt diverse möglichkeiten , ich würde s als JSON machen
https://makitweb.com/how-to-send-get-and-post-ajax-request-with-javascript/
entsprechend die daten aus den feldern holen und entsprechend auch die daten im PHP empfangen und nutzen
Mit der Seite habe ich schon probiert mein Login umzubauen habe es aber nicht ansatzweise zum laufen bekommen leider :/
ja ohne code kann dir auch keiner helfen . sorry, aber was erwartest du .
manchmal zweifel ich echt an den verstand wie fragern wie dir .
mach deine arbeit und poste code und wo das problem ist , was sagt die debug console , was sagen die fehler logs etc .
nutze dazu z.b. pastebin.com
Der ganze Code steht halt einfach in der Frage drin.
Hm. JQuery ist in der Tat erleichternd solche Ajax Geschichten zu bauen. Stackoverflow bietet was passendes.
https://stackoverflow.com/questions/8567114/how-can-i-make-an-ajax-call-without-jquery
In der Top Antwort wird übtigens der Code nativ und mit Jquery gezeigt.
Die Aufgabenstellung ist aber direkt das man es ohne Jquery machen soll.