Webdesign Guide - Eintragsformular und Webnotizen

Nun haben wir unsere Webanwendung soweit lauffähig, fehlt es nur noch an der Funktionalität. Mit meiner Idee lassen sich sicher keine Preise gewinnen, noch ist sie neu, aber zumindest schnell umsetzbar und erweiterungsfähig. Wer seine eigenen Ideen umsetzen möchte kann ab hier auch alleine losgehen, für alle anderen werde ich erstmal erklären worum es geht.

Webnotizen
Mittels eines Eintragsformulars soll der eingeloggte User die Möglichkeit haben, Notizen online abzulegen und auch wieder zu löschen. Dies wird erstmal nicht sonderlich spektakulär aussehen aber im nächsten Teil werden wir das ganze dann noch mit Ajax aufpeppen.

Das Eintragsformular
Als erstes passen wir die Datei “index.php” an, wir fügen einen zusätzlichen Fall (case ein). Im ersten Switch-Block verwenden wir:
case 'insert': require_once('includes/insert.php'); break;

Der zweite Switch-Block, welcher dafür zuständig ist die Smarty-Templates zu laden, verwenden wir diese Anweisung:
case 'insert': $smarty->display('insert.tpl'); break;

Diese beiden Dateien müssen wir natürlich auch noch anlegen.

Was soll unser Formular leisten können? Nun, nicht viel, es besitzt lediglich ein Textfeld, in welches man seinen Text eintragen kann und ein Titelfeld, in welches man den Titel für eine Webnotiz notieren kann, da es aber mit Pear und Smarty entwickelt wird, dürfte es kein Problem sein die Funktionalität zu erweitern. Zuerst aber müssen wir noch eine kleine Veränderung an der Datenbank vornehmen:

Ändert in der Tabelle “post” den Typ der Spalte “content” von “BLOB” auf “TEXT“. Nun brauchen wir aber noch eine weitere Tabelle, in dieser werden die Webnotizen den jeweiligen Usern zugeordnet. Mit folgendem SQL-Code könnt ihr euch die Tabelle “post_user” anlegen:

CREATE TABLE `post_user` ( `id_user` INT UNSIGNED NOT NULL , `id_post` INT UNSIGNED NOT NULL );

Und nun der Code für das Eintragsformular:

/* START - Quellcode insert.php */

<?php

require_once 'HTML/QuickForm.php';
require_once 'HTML/QuickForm/Renderer/ArraySmarty.php';
require_once 'smarty/libs/Smarty.class.php';
require_once 'includes/config.php';
require_once ($_SERVER['DOCUMENT_ROOT'].'/DB/DB.php');

session_start();

//wenn der Benutzer nicht eingeloggt ist, schicke ihn zu der Loginseite
if(!isset($_SESSION[_authsession][data][id_user]))
	header("Location: /login");

function insertprocess_data($values) {
	$dbh = DB::connect(DB_SYSTEM_1);
	$res =& $dbh->query("INSERT INTO post (title, content) VALUES ('".$values[title]."', '".$values[note]."')");
	$id_webnotiz = mysql_insert_id();
	$res =& $dbh->query("INSERT INTO post_user (id_user, id_post) VALUES ('".$_SESSION[_authsession][data][id_user]."', '".$id_webnotiz."')");
	$dbh->disconnect();

	header("Location: /");
}

$insertForm = new HTML_QuickForm('insertForm', 'post', 'index.php?action=insert');

$insertForm->applyFilter('__ALL__','trim');

$insertForm->addElement('text', 'title', 'Titel der Webnotiz', array('size' => 50));
$insertForm->addElement('textarea', 'note', 'Ihre Notiz', array('cols' => 37, 'rows' => 15));
$insertForm->addElement('submit', btn_send_note, 'Webnotiz anlegen');
$insertForm->addRule('title', 'Bitte vergeben Sie einen Titel für Ihre Nachricht', 'required');
$insertForm->addRule('note', 'Bitte tragen Sie ihre Webnotiz eintragen', 'required');

if ($insertForm->validate())
	$insertForm->process('insertprocess_data', false);

$insertFormRenderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty);

$insertFormRenderer->setRequiredTemplate(
	'{if $error}
  <font color="red">{$label}</font>
  {else}
	  {if $required}
		  <font color="red" size="3">*</font>
		{/if}
		{$label}
	{/if}'
);

$insertFormRenderer->setErrorTemplate(
	'{if $error}
  	<font color="orange" size="1">{$error}</font><br />
  {/if}
  {$html}'
);

$insertForm->setRequiredNote(
	'<font color="red" size="2">
	  *&nbsp;
	</font>
	<font color="blue" size="2">
		Diese Felder werden benötigt
	</font>');

$insertForm->accept($insertFormRenderer);

$smarty->assign('insertForm_data', $insertFormRenderer->toArray());
$smarty->assign('insertForm_header_label', 'Eintragsformular');

?>

/* ENDE - Quellcode insert.php */

Sollte sich mittlerweile von selbst erklären: Zuerst prüfen wir ob der User auch eingeloggt ist (also die Session Variable eine id hat, diese Id brauchen wir auch um einzelne Notizen dem jeweiligen Benutzer beim speichern zuzuordnen). Danach erzeugen wir ein Formular mit zwei Feldern, das Titelfeld und das Feld für die Notiz, wenn das Formular abgeschickt und erfolgreich verarbeitet wurde, wird eine neue Notiz in der Datenbank abgelegt.
Mit “mysql_insert_id();” holen wir uns nach dem insert in der Datenbank die ID des zuletzt eingetragen Datensatzes (also die ID der Notiz) und verwenden diese ID, mit der ID des eingeloggten Benutzers um in der Tabelle “post_user” eine Assoziation dieser beiden zu erstellen.

Die Template-Datei ist noch kürzer gehalten:

/* START - Quellcode insert.tpl */

<div id="insertForm_box">
<fieldset><legend>{$insertForm_header_label}</legend>
  <form {$insertForm_data.attributes}>
  {$insertForm_data.hidden}
    <!-- Display the fields -->
    <table>
      </tr>
      <tr>
	      <td colspan=2>{$insertForm_data.title.label}</td>
	    </tr>
      <tr>
        <td colspan=2>{$insertForm_data.title.html}</td>
      </tr>
      <tr>
      	<td colspan=2>{$insertForm_data.note.label}</td>
      </tr>
      <tr>
        <td colspan=2>{$insertForm_data.note.html}</td>
      </tr>

      <!-- Display the buttons -->
			  {if not $insertForm_data.frozen}
			  <tr>
			    <td colspan=2>{$insertForm_data.btn_send_note.html}</td>
			  </tr>
			  {/if}

			 {if $insertForm_data.errors}
			<tr>
				<td colspan="2">{$insertForm_data.requirednote}</td>
			</tr>
			{/if}

    </table>
  </form>
</fieldset>
</div>

/* ENDE - Quellcode insert.tpl */

Steht natürlich jedem frei das Formular an die eigenen optischen Anforderungen anzupassen, das ist ja auch das tolle an einer Template-Engine, man platziert die Elemente welche man benötigt dort wo sie gebraucht werden, der Rest wird dann mittels CSS gelöst.

Bislang haben wir uns noch kein Stylesheet angelegt, das soll nun folgen, den schließlich wollen wir unsere Notizzettel auch mal ausgeben, am besten auf der Startseite und nur wenn der User eingeloggt ist. Also wir kümmern uns nun um folgendes:

Anlegen eines Stylesheets
Prüfen auf der Startseite ob der Benutzer eingeloggt ist und wenn ja, ausgeben seiner Notizen, wenn nein, weiterleiten zum Loginformular

Anlegen eines Stylesheets
Geht in euer Root-Verzeichnis (dort wo auch die index.php liegt) und legt eine Datei “style.css” an. Diese bekommt folgenden Inhalt:

/* START - Quellcode style.css */

.note {border: 1px solid #bbbbbb; width: 400px; background: #eeeeee; margin: 10px;}
.notetitle { font-weight: bold; margin: 5px;}
.notetext{ margin: 5px; border: 1px solid #cccccc; background: white; padding: 5px;}

/* ENDE - Quellcode style.css */

Für jede Notiz wird ein eigener Container erstellt, dieser besitzt die Klassenelemente von “note”. In dem Container Note befinden sich zwei weitere Container, title und text, diese werden über die Klassen “notetitle” und “notetext” angesprochen.

Jetzt binden wir als erstes das Stylesheet in unsere Webanwendung ein, dazu müssen wir die Datei “header.tpl” um folgende Codezeile erweitern:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Den Code einfach in den “head”-Block packen.

So, jetzt müssen wir unsere Notizen nur noch irgenwo ausgeben, wie oben angedeutet machen wir das auf der Startseite. Folgendes muss dafür geschehen:

wir erzeugen die Datei “output.php”, in dieser wird eine Smarty-Variable mit Werten aus der Datenbank befüllt
in der index.tpl wird die Variable dann einfach ausgegeben.

Ab hier wird es etwas “schmutzig” denn normalerweise sollte man eine Ergebnismenge in ein Array packen und dieses Array dann in der Template Datei durchlaufen. Da ich mich aber nie wirklich mit den Smarty-Schleifen anfreunden konnte, mache ich die “Formatierung” in der Output.php und packe alles in eine Smarty-Variable die ich dann in der index.tpl ausgebe. Wir legen also im Ordner “includes” die Datei “output.php” an und befüllen diese mit folgendem Code:

/* START - Quellcode output.php */

<?php
require_once ($_SERVER['DOCUMENT_ROOT'].'/DB/DB.php');
require_once 'includes/config.php';
require_once 'smarty/libs/Smarty.class.php';

$dbh = DB::connect(DB_SYSTEM_1);
$res =& $dbh->query("SELECT post.id_post AS id, post.title AS title, post.content AS content FROM post, post_user WHERE post_user.id_user = '".$_SESSION[_authsession][data][id_user]."' AND post_user.id_post = post.id_post ORDER BY id DESC");
$dbh->disconnect();

$webnotizen = "";
while ($row =& $res->fetchRow(DB_FETCHMODE_ASSOC)) {
	$webnotizen .= '<div class="note"><div class="notetitle">';
	$webnotizen .= $row[title];
	$webnotizen .= '</div><div class="notetext">';
	$webnotizen .= $row[content];
	$webnotizen .= '</div></div>';
}

$smarty->assign('webnotizen', $webnotizen);

?>

/* ENDE - Quellcode output.php */

Der MySQL-Query macht nichts anderes als alle Webnotizen, für den jeweils eingeloggten User, aus der Datenbank zu holen. Dann durchlaufen wir die Ergebnismenge und speichern die selektierten Werte zwischen den Div-Containern, die wir mittels CSS formatieren. Als letztes weisen wir der Smarty-Variablen “webnotizen” unsere (”schmutzig”) zusammengebastelte Variable zu, damit wir in der index.tpl diese ausgeben können.

Jetzt existiert aber noch ein Problem, was ist wenn der User noch garnicht eingeloggt ist, welche Daten werden ihm dann ausgegeben? Am besten keine und deshalb schicken wir einen nicht eingeloggten User direkt auf die Loginseite, wir ersetzen also in der index.php folgenden Code:
case 'index': default: break;

durch diesen (zusätzlich ist auch die include-Anweisung für die output.php mit drin):
case 'index': default: if(!isset($_SESSION[_authsession][data][id_user])) header("Location: /login"); else require_once('includes/output.php'); break;

und am anfang der Datei, nachdem die Dateien mit “require_once” eingebunden werden, muss noch diese Anweisung hinzugefügt werden:
session_start();

Als letzten Schritt schreibt in eure “index.tpl” folgenden Code, damit eure Webnotizen auch ausgegeben werden:
{$webnotizen}

Spass mit Ajax
Im nächsten Teil peppen wir das ganze mit Ajax auf, dann lassen sich Elemente löschen ohne Seitenreload und (hoffentlich) auch frei auf der Fläche platzieren, mal sehen was mir da so einfällt…

Quellen
Mit Smarty ein Array durchlaufen: http://smarty.php.net/manual/de/language.function.foreach.php

Verwandte Artikel

am Januar 14, 2007 um 14:18 Uhr | in Webdesign | 2 Kommentare