Menü auswählen im ‚Seite Bearbeiten‘

Code & Blog Logo

Jetzt wo wir die Menüs in der Aktion „Eigenes CMS erstellen“ bearbeiten können, müssen wir diese auch in den Seiten anzeigen. Hierfür werden heute die Menüs auf „Seite Bearbeiten“ im Admin-Bereich aufgelistet. Wurde ein Menü ausgewählt, wird eine kleine Vorschau des Menüs angezeigt. Der ganze Beitrag handelt um die Datei /admin/includes/site-edit.php.

Fangen wir erstmal mit dem Layout an. Bisher wird auf der Seite alles untereinander dargestellt. Das Menü sollte aber auf der rechten Seite eingefügt werden. Nach ein paar neuen divs und Überschriften stehen kann man nun schon das 2-spaltige Layout erkennen:

<h1>Seite bearbeiten</h1>
<form name="form" action="/admin/index.php?page=site-edit&site=<?PHP echo $_GET['site']; ?>" method="post">
  <div style="float:left;width:50%;">
    <h2>Inhalt</h2>
    <label for="title">Titel:</label>
    <input name="title" /><br />
    <label for="alias">Alias:</label>
    <input name="alias" /><br />
    <label for="content" />Inhalt</label>
    <textarea name="content">
    </textarea>
  </div>
  <div>
    <h2>Seitenmen&uuml;</h2>
  </div>
  <div style="clear:both;">
    <input type="submit" value="Ändern" />
  </div>
</form>

Fahren wir mit der Auswahlliste der Menüs fort. Ihr erinnert euch vielleicht an die Stelle, wo wir die Menüs auflisten, um ein zu bearbeitenes Menü auszuwählen. Dort gibt es bereits in der Klasse sys die Methode getMenues, in welcher wir die Menüs in einem Array bekommen.

Genau diese Funktion können wir nun gebrauchen. Fügen wir also eine neue Auswahlliste zur Seite hinzu:

<h2>Seitenmen&uuml;</h2>
<select name="menu">
  <?PHP
    foreach(sys::getMenues() as $menue){
      echo "<option value="".$menue['id']."">".$menue['name']."</option>";
    }
  ?>
</select>

Fehlt noch die Vorschau. Wird ein Menü ausgewählt, wird das Formular abgeschickt und das Menü neu geladen. Danach wird das eben ausgewählte Menü in der Liste wieder ausgewählt. Dafür müssen wir die Schleife von oben nochmal überarbeiten:

<select name="menu">
  <?PHP
    foreach(sys::getMenues() as $menue){
      echo "<option value="".$menue['id'].""";

       if($_POST['menu'] == $menue['id']){
        echo " selected="selected"";
      }

      echo ">".$menue['name']."</option>";
    }
  ?>
</select>

Nun kommen wir zur Vorschau selbst. unter der Auswahlliste fügen wir ein neues div ein, in welchen das Menü angezeigt wird. Dies geht mit der Methode display der Klasse Menü:

</select>
<div id="menupreview">
  <?PHP
    if($_POST['menu']){
      Menu::display($_POST['menu'],"<ul>","</ul>","<li>","</li>","");
    }
  ?>
</div>

Nun muss man aber immer noch auf „Ändern“ klicken, damit die Vorschau kommt. Da helfen wir doch mal mit ein wenig JavaScript nach. Mit dem Ereignis onChange, wird einfach unser Formular abgeschickt. Wir müssen später noch unterscheiden, ob auf Ändern geklickt wurde, oder eben nicht. Aber das kommt in einem späteren Beitrag. Hier erstmal das bisschen JavaScript. Es kommt im Select-Tag der Auswahlliste:

<select name="menu" onchange="document.form.submit();">

Damit wären wir dann für heute auch schon fertig. Im nächsten CMS-Beitrag geht es dann darum, die Originaldaten der Seite anzuzeigen. Bisher sehen ja schließlich alle Seiten im Bearbeiten-Modus gleich aus.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Chrissi schrieb am 26.07.2009:

Interessante Webseite. Vor allem die Anleitung zur Erstellung eines eigenen CMS finde ich sehr hilfreich, sowas findet man kaum ;) LG, Chrissi

Stefan Wienströer schrieb am 26.07.2009:

Vielen Dank

Ferid schrieb am 25.03.2010:

Ich wollte dich auf dich nur auf deine Absoluten Links hinweisen. Wenn du alles im root Verzeichnis hast funktionieren sie ohne Probleme, hast du aber dein CMS in eine Unterordner dann kriegt man Probleme mit den Links. Wenn du es als wichtig sieht könntest du es lösen in dem du alle Links Relativ setzt (also ohne "/admin/") oder eine Variable einführst die du dann vor die Links setzt ( wie zum bsp. "pathAdm" oder ähnliches). Wollte dich nur drauf aufmerksam machen falls du es dir nicht aufgefallen war. Gruß Igor

Stefan Wienströer schrieb am 25.03.2010:

In den Voraussetzungen ist derzeit festgelegt, dass es immer im Root-Verzeichnis liegen muss. Es steht mittlerweile aber auch auf der ToDo Liste.

m1staX schrieb am 22.09.2011:

onchange="document.form.submit(); geht bei mir nicht!? Die JavaScript Fehlerkonsole meldet: "document.form is undefined" Falls jemand auch dieses Problem hat: onchange="document.forms[0].submit(); funktioniert.

Stefan Wienströer schrieb am 23.09.2011:

Welchen Browser benutzt du?

m1staX schrieb am 23.09.2011:

Ich verwende den Feuerfuchs ;) Kann gut sein, dass es da Unterschiede gibt.

wdautz schrieb am 17.12.2011:

Erstmal herzliches Hallooo. Ich bin durch Google auf dieses Tutorial aufmerksam geworden. Und "Kompliment" es ist das erste CMS-Tutorial das wirklich für Einsteiger und Fortgeschrittene geeignet ist. Und jetzt zum Kernpunkt. Nach dem Einbau der Auswahlfunktion krieg ich folgendes: Warning: include(content/articles/errors/404.php) [function.include]: failed to open stream: No such file or directory in /var/www/clients/client2/web6/web/admin/index.php on line 79 Versteh ich zwar nicht weil der Pfad in action meines erachtens stimmt: /admin/index.php?page=site_edit&site= falls jemand auch so ein Problem hat und eine Lösung dazu, dann bitte ich steh auf dem Schlauch. LG Werner

wdautz schrieb am 17.12.2011:

Nachtrag zum Post von vorhin. Wenn ich mich im Verzeichnis admin befinde, warum greift dann die .htaccess im root verzeichnis? Vielen Dank für die Hilfe LG Werner

wdautz schrieb am 18.12.2011:

au weia so ein Fehler. _ und - sind nun mal unterschiedlich :-) Danke hat sich erledigt

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project