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:

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.