20 Exkurs : Erweiterung PHP und Formulare
So - nachdem wir jetzt die Datenbank und GUI vorbereitet haben, kommt jetzt natürlich der heikle Teil: Wir willen die GUI so programmieren, damit wir die Nutzererfassung über die Web-GUI erledigen können. Aber wie vorher: Schritt für Schritt.
Im Wesentlichen funktioniert es jetzt so, dass wir mit den Daten, die wir aus dem Formular auslesen, einen schönen SQL-Befehl zusammenbauen und diesen Befehl dann auf die Datenbank ausführen - und das Ganze mittels PHP umgesetzt.
20.1 Schritt 1 : Datenbankverbindung mit PHP herstellen
Damit PHP überhaupt etwas von der Datenbank weiss, muss zuerst eine Verbindung hergestellt werden. Kopieren Sie bitte folgendes Code-Fragment:
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$database = "usertest";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>und kopieren Sie es bei create.php und read.php oben ein. Die Dateien sollten dann wie folgt aussehen:
create.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$database = "usertest";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<form method="post">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="email">Email Address</label>
<input type="text" name="email" id="email">
<label for="age">Age</label>
<input type="text" name="age" id="age">
<label for="location">Location</label>
<input type="text" name="location" id="location">
<input type="submit" name="submit" value="Submit">
</form>
<a href="index.php">Back to home</a>
</body>
</html>read.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<h2>Find user based on location</h2>
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$database = "usertest";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<form method="post">
<label for="location">Location</label>
<input type="text" id="location" name="location">
<input type="submit" name="submit" value="View Results">
</form>
<a href="index.php">Back to home</a>
</body>
</html>20.2 Schritt 2 : Formular auslesen
Jetzt ist es so, dass wenn bei den Formularen der Button gedrückt wird (“Submit” oder ähnliches), die Formulardaten ausgelesen werden und an den Webserver übermittelt werden. Innerhalb vom PHP kann man dann auf diese Werte zugreifen….Beispiel:
<?php
if(isset($_POST["submit"])){
echo "Die Variablen firstname: " . $_POST["firstname"] . " und lastname " . $_POST["lastname"];
$conn->close();
}- Erklärung:
- Wenn jetzt also “submit” gedrückt wird, wird die Variable
$_POST["submit"]gesetzt. Die ganze Webseite wird nochmals ausgeführt und nun können die Variablen$_POST["firstname"] und $_POST["lastname"]ausgelesen werden
20.3 Schritt 3 : …SQL bauen mit Variablen und Ausführen (Insert)
Nachdem wir jetzt wissen wie solche Variablen genutzt werden, müssen wir mit den Werten einen SQL-Befehl zusammenbauen, der so funktioniert wie im vorhergehenden Kapitel. Betrachten Sie folgenden Code:
<?php
if(isset($_POST["submit"])){
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$age = $_POST['age'];
$location = $_POST['location'];
$sql = "INSERT INTO users (firstname, lastname, email, age, location) VALUES ('".$firstname."','".$lastname."','".$email."','".$age."','".$location."')";
if ($conn->query($sql) === TRUE) {
echo "<script type= 'text/javascript'>alert('New record created successfully');</script>";
} else {
echo "<script type= 'text/javascript'>alert('Error: " . $sql . "<br>" . $conn->error."');</script>";
}
$conn->close();
}
?>Fügen Sie den Code von oben so in Ihr create.php-Script ein, dass Ihr Script wie folgt aussieht:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$database = "usertest";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<form method="post">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="email">Email Address</label>
<input type="text" name="email" id="email">
<label for="age">Age</label>
<input type="text" name="age" id="age">
<label for="location">Location</label>
<input type="text" name="location" id="location">
<input type="submit" name="submit" value="Submit">
</form>
<?php
if(isset($_POST["submit"])){
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$age = $_POST['age'];
$location = $_POST['location'];
$sql = "INSERT INTO users (firstname, lastname, email, age, location) VALUES ('".$firstname."','".$lastname."','".$email."','".$age."','".$location."')";
if ($conn->query($sql) === TRUE) {
echo "<script type= 'text/javascript'>alert('New record created successfully');</script>";
} else {
echo "<script type= 'text/javascript'>alert('Error: " . $sql . "<br>" . $conn->error."');</script>";
}
$conn->close();
}
?>
<a href="index.php">Back to home</a>
</body>
</html>- Testen:
- Sie sollten jetzt über die GUI Benutzer erfassen können - kontrollieren Sie auch ob die Daten in der Datenbank korrekt ankommen.
20.4 Schritt 4 : …SQL bauen mit Variablen und Ausführen (Read)
Abschliessend zu diesem Kapitel wollen wir natürlich noch die Benutzer auf der Webseite anzeigen können. SQL-technisch keine Herausforderung, dafür wird die GUI-Darstellung etwas spezieller…
- Zielformulierung:
- Wir wollen Benutzer, die an einer bestimmten Location wohnen, in einer HTML-Tabelle anzeigen können
20.4.1 CSS erweitern
Um Tabellen (einigermassen) schön darzustellen, erweitern Sie bitte das /var/www/html/style.css um folgende neuen Informationen:
20.4.2 Tabellen in HTML
Ich weiss nicht ob Sie es wissen, aber Tabellen werden in HTML wie folgt dargestellt:
<table>
<!-- Hier beginnt der Kopf/Ueberschrift der Tabelle -->
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
</thead>
<!-- Hier kommen die Nutzdaten Tabelle -->
<tbody>
<!--Zeile 1-->
<tr>
<td>Christian</td>
<td>Test</td>
<td>test@test</td>
</tr>
<!--Zeile 2-->
<tr>
<td>Roger</td>
<td>Test</td>
<td>roger@test</td>
</tr>
</tbody>
</table>Die Idee ist es jetzt natürlich, dass wir mittels PHP die Nutzdaten (Benutzer) auslesen und jeden Benutzer eine eigene neue Zeile erstellen (<- hört sich verdächtig nach Schleifen an…).
20.4.3 Alles zusammen
Folgender Plan:
- Filter-Wert aus Formular auslesen und in Variable speichern
- Mit Filter-Wert einen SQL-Select bauen
- SQL-Select ausführen….dann erhalten wir einen Array von gültigen Werten als Resultat
- Mittel Schleife durch den Array gehen und die Tabelle zusammenbauen
Los:
<?php
if(isset($_POST["submit"])){
$location = $_POST['location'];
$sql = "SELECT * from users WHERE location='".$location."'";
//echo $sql;
$result = $conn->query($sql);
if ($result->num_rows > 0) {?>
<h2>Results</h2>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Age</th>
<th>Location</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php
while($row = $result->fetch_assoc()) {?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["firstname"]; ?></td>
<td><?php echo $row["lastname"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["age"]; ?></td>
<td><?php echo $row["location"]; ?></td>
<td><?php echo $row["date"]; ?> </td>
</tr>
<?php } ?>
</tbody>
</table>
<?php } else { ?>
<blockquote>No results found for <?php echo escape($_POST['location']); ?>.</blockquote>
<?php
}
$conn->close();
}
?>Am Schluss sollte Ihr read.php so aussehen:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<h2>Find user based on location</h2>
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$database = "usertest";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<form method="post">
<label for="location">Location</label>
<input type="text" id="location" name="location">
<input type="submit" name="submit" value="View Results">
</form>
<?php
if(isset($_POST["submit"])){
$location = $_POST['location'];
$sql = "SELECT * from users WHERE location='".$location."'";
//echo $sql;
$result = $conn->query($sql);
if ($result->num_rows > 0) {?>
<h2>Results</h2>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Age</th>
<th>Location</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php
while($row = $result->fetch_assoc()) {?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["firstname"]; ?></td>
<td><?php echo $row["lastname"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["age"]; ?></td>
<td><?php echo $row["location"]; ?></td>
<td><?php echo $row["date"]; ?> </td>
</tr>
<?php } ?>
</tbody>
</table>
<?php } else { ?>
<blockquote>No results found for <?php echo escape($_POST['location']); ?>.</blockquote>
<?php
}
$conn->close();
}
?>
<a href="index.php">Back to home</a>
</body>
</html>20.5 Abschluss
Die Applikation liesse sich jetzt natürlich beliebig erweitern…folgende Ideen:
- Darstellung anpassen, schöner machen
- Andere Filter einbauen
- Löschen von Datensätzen? (Delete-SQL-Befehl)
- Ändern von Datensätzen? (Update-SQL-Befehl)