Aangezien CRUD-bewerkingen alleen met de juiste interface kunnen worden uitgevoerd, moet het basis-grid nu met Twitter Bootstrap worden aangemaakt. De huidige versie van het framework vind je op de officiële website . Pak Bootstrap uit in de map waar database.php zich bevindt en maak een bestand aan met de naam index.php. Daarin schrijf je nu de volgende interface:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h3>Mijn CRUD-PHP-grid</h3>
</div>
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Naam</th>
<th>E-mailadres</th>
<th>Mobiel nummer</th>
</tr>
</thead>>
<tbody>
<?php
include 'database.php';
$pdo = Database::connect();
$sql = 'SELECT * FROM customers ORDER BY id DESC';
foreach ($pdo->query($sql) as $row) {
echo '<tr>';
echo '<td>' . $row['name'] . '</td>';
echo '<td>' . $row['email'] . '</td>';
echo '<td>' . $row['mobile'] . '</td>';
echo '</tr>';
}
Database::disconnect();
?>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>
In het <head>-gedeelte zijn de CSS- en JavaScript-bestanden van Bootstrap opgenomen, in het <body>-gedeelte de eerder aangemaakte database.php, inclusief de verzoeken om een PDO-verbinding tot stand te brengen (Database::connect()) en om de corresponderende data (SELECT) te verkrijgen. Daarnaast bevat het bestand de HTML-tabel <table> met de drie kolommen Naam, E-mailadres en Mobiel nummer, die ook in de database zijn opgeslagen.
Om de basis te voltooien, moeten we nu de verschillende CRUD-operations realiseren. De create-operation implementeren we bijvoorbeeld met een extra HMTL-pagina met formuliervelden voor het invoeren van de gebruikersgegevens, die gekoppeld is aan index.php en kan worden bereikt via een knop die is toegevoegd aan de bootstrap-interface. We houden het eenvoudig en maken deze knop door index.php opnieuw te openen en de volgende code toe te voegen aan de tweede <div class="row">-element in de tabel:
<p>
<a href="create.php" class="btn btn-success">Create</a>
</p>
Je ziet al in het codefragment dat er een link naar het bestand create.php is, die nog niet bestaat. Een test van het vorige bootstrap-grid zal daarom de knop weliswaar weergeven, maar als je er dan op klikt, zie je alleen een foutpagina. Om de create-functie te programmeren, maak je het genoemde create.php-bestand aan en voeg je het volgende eerste deel van de code in:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="span10 offset1">
<div class="row">
<h3>Create a Customer</h3>
</div>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group <?php echo !empty($nameError)?'has-error':'';?>">
<label class="control-label">Naam</label>
<div class="controls">
<input name="name" type="text" placeholder="Naam" value="<?php echo !empty($name)?$name:'';?>">
<?php if (!empty($nameError)): ?>
<span class="help-inline"><?php echo $nameError;?></span>
<?php endif; ?>
</div>
</div>
<div class="form-group <?php echo !empty($emailError)?'has-error':'';?>">
<label class="control-label">E-mailadres</label>
<div class="controls">
<input name="email" type="text" placeholder="E-mailadres" value="<?php echo !empty($email)?$email:'';?>">
<?php if (!empty($emailError)): ?>
<span class="help-inline"><?php echo $emailError;?></span>
<?php endif;?>
</div>
</div>
<div class="form-group <?php echo !empty($mobileError)?'has-error':'';?>">
<label class="control-label">Mobiel nummer</label>
<div class="controls">
<input name="mobile" type="text" placeholder="Mobiel nummer" value="<?php echo !empty($mobile)?$mobile:'';?>">
<?php if (!empty($mobileError)): ?>
<span class="help-inline"><?php echo $mobileError;?></span>
<?php endif;?>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success">Create</button>
<a class="btn" href="index.php">Back</a>
</div>
</form>
</div>
</div> <!-- /container -->
</body>
</html>
De code genereert het HTML-formulier waarin de individuele gegevens van naam, mobiel nummer en e-mailadres kunnen worden ingevoerd. Voor elk invoerveld bouwen we bovendien een PHP-variabele in, die in combinatie met de volgende uitbreiding van de code (die je in create.php voor de HTML-code plaatst) foutmeldingen genereert, voor zover het veld vrij blijft tijdens de invoer:
<?php
require 'database.php';
if ( !empty($_POST)) {
// Validatiefout verzamelen
$nameError = null;
$emailError = null;
$mobileError = null;
// Invoer verzamelen
$name = $_POST['name'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
// Invoer controleren
$valid = true;
if (empty($name)) {
$nameError = 'Voer een naam in';
$valid = false;
}
if (empty($email)) {
$emailError = 'Voer een e-mailadres in';
$valid = false;
} else if ( !filter_var($email,FILTER_VALIDATE_EMAIL) ) {
$emailError = 'Voer een geldig e-mailadres in';
$valid = false;
}
if (empty($mobile)) {
$mobileError = 'Voer een mobiel nummer in';
$valid = false;
}
// Daten eingeben
if ($valid) {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO customers (name,email,mobile) values(?, ?, ?)";
$q = $pdo->prepare($sql);
$q->execute(array($name,$email,$mobile));
Database::disconnect();
header("Location: index.php");
}
}
?>
Nu heb je een create.php-pagina aangemaakt die wordt geopend als je op de create-knop klikt en waarmee je de gebruikersinformatie kunt invoeren. Het script zorgt ervoor dat alle ingevoerde gegevens en validatiefouten worden geregistreerd, dat foutmeldingen worden weergegeven als deze onjuist zijn ingevoerd en dat de gegevens bij de opgegeven database terechtkomen.
