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;
	color: white;
}
.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:

http://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.