Design für unsere Datenverwaltungsprogramm
Für Design gibt es CSS und dafür die Schwesterseite https://www.HTML-Seminar.de
Damit die Vorgehensweise schnell klar wird, werden wir ein kleines Design über unser Datenverwaltungsprogramm erstellen – sprich PHP trifft CSS und putzt sich raus um „hübsch“ zu sein.
Als ersten brauchen wir ein HTML-Grundgerüst (siehe https://www.html-seminar.de/html-seitenaufbau.htm ). Dieses laden wir per include herein. Das hat den Vorteil, dass wir auf allen weiteren Seiten einfach wieder den Rahmen dazu laden können.
Hier haben wir den „bereich-kopf.inc.php“
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Datenpflegeanwendung in PHP - Beispielprojekt PHP-Kurs.com</title>
<link href="design.css" rel="stylesheet">
</head>
<body>
Und der Fußbereich wird auch benötigt: „bereich-fuss.inc.php“
</body>
</html>
Wir können nicht ganz am Anfang den Befehl include_once('inc/bereich-kopf.inc.php'); reinpacken, da der Befehl header(...) keine Ausgabe davor duldet. Daher schieben wir den Bereich für das Speichern an den Anfang und dann den include_once(..); Befehl.
<?php
require 'inc/db.php';
$ds_pro_seite = 2;
if (isset($_POST['aktion']) and $_POST['aktion']=='speichern' ) {
$vorname = "";
if (isset($_POST['vorname'])) {
$vorname = trim($_POST['vorname']);
}
$nachname = "";
if (isset($_POST['nachname'])) {
$nachname = trim($_POST['nachname']);
}
$anmerkung = "";
if (isset($_POST['anmerkung'])) {
$anmerkung = trim($_POST['anmerkung']);
}
if ( $vorname != '' or $nachname != '' or $anmerkung != '' )
{
// speichern
$einfuegen = $db->prepare("INSERT INTO kontakte
(vorname, nachname, anmerkung, erstellt)
VALUES (?, ?, ?, NOW())");
$einfuegen->bind_param('sss', $vorname, $nachname, $anmerkung);
if ($einfuegen->execute()) {
header('Location: index.php?aktion=feedbackgespeichert');
die();
}
}
}
include_once('inc/bereich-kopf.inc.php');
if (isset($_GET['aktion']) and $_GET['aktion'] == 'allesanzeigen') {
unset($_SESSION['suchbegriff']);
$_SESSION['seite_nr_normal'] = 0;
}
Am Ende von unserem Code (nach dem Formular) kommt nun
<?php
include_once('inc/bereich-fuss.inc.php');
?>
Für das Design (und aus didaktischen Gründen) packen wir in den Kopfbereich einen header-Bereich mit dem Inhalt „Datenverwaltungstool“ und im Fuß einen footer-Bereich mit dem Inhalt „Beispielprogramm www.PHP-Kurs.com“.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Datenpflegeanwendung in PHP - Beispielprojekt PHP-Kurs.com</title>
<link href="design.css" rel="stylesheet">
</head>
<body>
<header>
<p>Datenverwaltungstool</p>
</header>
Und im Fußbereich
<footer>
<p>Beispielprogramm www.PHP-Kurs.com</p>
</footer>
</body>
</html>
Jetzt können wir an unserem Design arbeiten. Wir färben im header-Bereich und footer-Bereich den Hintergrund dunkelgrau und die Schrift weiß. Dazu wird in der design.css folgende Einträge gemacht:
header, footer {
color: white;
background-color: #333;
}
Und nun noch Abstände und Höhen für die Schrift:
header p {
line-height: 3em;
padding-left: 1em;
}
footer p {
line-height: 2em;
padding-left: 1em;
}
Unsere Schrift wollen wir moderner – also ohne Serifen:
body {
font-family: sans-serif;
}
Unsere Tabelle soll nach oben Abstand halten und die komplette Breite nutzen.
table {
width: 100%;
margin-top: 1em;
}
Ein bisschen mehr Abstand innerhalb der Tabelle erhöht die Übersicht:
td {
padding: 0.2em;
}
Unsere Tabelle soll noch im Kopfbereich einen dunklen Hintergrund bekommen und weiße Schrift.
thead {
color: white;
background-color: #333;
}
Die Tabelle so nun abwechselnden Hintergrund bekommen.
tbody tr:nth-child(odd) {
background-color: #eee;
}
tbody tr:nth-child(even) {
background-color: #ccc;
}
Damit wir die Reihen besser sehen, lassen wir diese hellgrün bei Mausberührung hervorheben:
tr:hover {
background-color: limegreen !important;
}
Und nun noch unsere Paginierung
Dazu ergänzen wir den PHP-Bereich
if ( $i == $seite )
{
echo '<span class="seite_aktuell">'.$durchgang.'</span> ';
}
else
{
echo '<a class="seite_nr" href="?seite='.$i.'">'.$durchgang.'</a> ';
}
Und dem entsprechenden Design (so groß, damit auch per Touch die Paginierung trifft):
.seite_aktuell, .seite_nr {
display: inline-block;
color: white;
background-color: limegreen;
width: 1.4em;
height: 1.4em;
text-align: center;
line-height: 1.4em;
font-size: 1.2em;
}
.seite_nr {
background-color: darkblue;
}
.seite_nr:hover {
background-color: deepskyblue;
background-color: orange;
}
Jetzt können wir noch den Bereich für das Formular unten ein wenig Design mitgeben:
form#datenpflege {
border: 1px solid black;
border-radius: 1em;
padding: .2em 1em;
background-color: #ddd;
}
Und innerhalb der Form:
#datenpflege span {
/* background-color: yellow;*/
display: inline-block;
width: 140px;
float: left;
}
Jetzt wollen wir noch den Fußbereich unten platzieren – dazu gibt es die Technik mit dem Namen „Sticky Footer“. Genaueres darüber gibt es unter:
https://www.html-seminar.de/sticky-footer-fussleiste-ganz-unten.htm
Ergänzt werden muss:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Datenpflegeanwendung in PHP - Beispielprojekt PHP-Kurs.com</title>
<link href="design.css" rel="stylesheet">
</head>
<body>
<div id="seite">
<header>
<p>Datenverwaltungstool</p>
</header>
<div id="inhalt">
Und der bereich-fuss.inc.php
</div>
<footer>
<p>Beispielprogramm www.PHP-Kurs.com</p>
</footer>
</div>
</body>
</html>
Und unser CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#seite {
position: relative;
min-height: 100%;
padding-bottom: 3em;
}
footer {
position:absolute;
bottom: 0;
width: 100%;
background-color: yellow;
height: 2em;
}
Unser Inhalt ist noch zu dicht am Rand:
#inhalt {
margin: 0 1em;
}
Und unsere Inhalte kleben noch zu stark aufeinander:
#inhalt {
margin: 0 1em;
}
#inhalt h1, #inhalt p, form {
margin-top: 1em;
}
Schaut man sich den Punkt „anzeigen“ und „löschen“ an, sieht man, dass dort noch die Fußzeile fehlt.
Also noch im index.php die Anweisung include_once('inc/bereich-fuss.inc.php'); aufnehmen.
if (isset($_GET['aktion']) and $_GET['aktion'] == 'anzeigen') {
if ( isset($_GET['id'])) {
$id_einlesen = (INT) $_GET['id'];
if ($id_einlesen > 0) {
echo "<h1>Daten anzeigen von $id_einlesen</h1>";
$dseinlesen = $db->prepare("SELECT id, vorname, nachname,
anmerkung, erstellt
FROM kontakte WHERE id = ? ");
$dseinlesen->bind_param('i', $id_einlesen);
$dseinlesen->execute();
$dseinlesen->bind_result($id,$vorname,$nachname,$anmerkung,$erstellt);
$dseinlesen->fetch();
echo "<p>ID: <b> $id </b><br>";
echo "Vorname: <b> $vorname </b><br>";
echo "Nachname: <b> $nachname </b><br>";
echo "Anmerkung: <b> $anmerkung </b><br>";
echo "erstellt am: <b> $erstellt </b></p>";
echo '<p><a href="index.php">Tabelle anzeigen</a>';
$dseinlesen->close();
include_once('inc/bereich-fuss.inc.php');
exit;
}
}
}
Soweit wollen wir unser Design mal lassen. Für Feinheiten und noch mehr Design einfach sich in CSS und CSS3 bei https://www.html-seminar.de/css-lernen.htm einlesen.
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: