TUTORIAL BEGINNER. Einführung in webedition 4.x

Transkript

1 Einführung in webedition 4.x Tutorial: News erstellen mit webedition In diesem Tutorial wird Ihnen gezeigt, wie Sie mit Hilfe von webediton News erstellen, archivieren und anzeigen könnnen. Dieses Kapitel behandelt die folgenden Themen: Die News Detailansicht Das Newsarchiv Die Newsbox

2 Erstellen einer News-Detailansicht mit webedition Bevor Sie den Newsbereich mit webedition in Ihre Website einbinden sollen Sie mit Hilfe einer Schaugrafik den Funktionsablauf verstehen [Abb.1]. Abb.1 Funktioneller Ablauf der News in webedition Die newsdetail-vorlage enthält alle Informationen für das Newsarchiv (newsindex.php) und die Anzeigebox (newsbox.php). Die aktuellen News werden über den webedition Dokumenten-Typ erstellt. Als Vorlage für den Dokumenten-Typ wird die newsdetail.tmpl gewählt. Erstellen Sie nun auf Basis unserer Hauptvorlage "index.tmpl" eine neue Vorlage mit der Bezeichnung "newsdetail.tmpl". Legen Sie über Datei > Neu > Vorlage eine neue Vorlage an. Klicken Sie im Bereich Vorlage kopieren auf den Button Auswählen. Wählen Sie die zu kopierende Vorlage index.tmpl aus und klicken Sie auf OK Überschreiben Sie den im Bereich Pfad von webedition automatisch erzeugten Dateinamen index_copy in newsdetail. Wählen Sie für die Speicherung der Vorlage das Vorlagen-Verzeichnis "news" aus. Klicken Sie im unteren Bereich von webedition auf Speichern. Fertig - die newsdetail-vorlage ist angelegt.

3 Wechseln Sie in der Vorlagen-Ansicht auf die Ansicht Bearbeiten. Erweitern Sie das newsdetail.tmpl mit dem in [Abb.1] dargestellten Quellcode. Platzieren Sie den Quellcode innerhalb der contentbox im unteren Bereich. Abb.2 Quellcode der newsdetail.tmpl <!-- ******* Start webedition News ******************** --> <div class="editmode"> Hier geben das Datum ein. <div style="float:left; margin-top:10px;" > <h1> [News vom: <we:input name="datum" type="date" format="d.m.y"/>] </h1> <!-- *********************************************** --> <div class="editmode"> Weiterleitung zum Newstarchiv <div style="text-align:right; margin-top:10px;"> <we:ifnotvar name="print" match="true" type="request"> <a href="<we:url id="411"/>" class="newsarchiv" >[Newsarchiv]</a> <we:else/> <img src="/images/pixel.gif" width="1" height="1"> </we:ifnotvar> <!-- *********************************************** --> <div class="editmode" style="clear:both;"> Headline (lang sichtbar im Detail): <div align="left" style="margin-top:10px; "> <h3> <we:input name="headlinelang" type="text" size="40" /> </h3> <!-- ************************************************** --> <div class="editmode"> Headline (kurz sichtbar in der Newsvorschau): <we:input name="headlinekurz" type="text" size="40"/> <!-- *************************************************** --> <div class="editmode"> Anlesetext: [css textbox, blocksatz] <div> <we:textarea name="anlesetext" cols="30" rows="10" autobr="on" inlineedit="true" dhtmledit="on" class="textarea"/>

4 <!-- *********************************************** --> <div class="editmode"> Detailtext: [css=ohne] <div> <we:textarea name="text" cols="30" rows="20" autobr="on" inlineedit="true" dhtmledit="on" class="textarea"/> <!-- *************Ende webedidition News************** --> Erläuterungen zum Quellcode [Abb.2]: Mit dem we-tag <we:url id="???"/>wird die newsindex.php aufgerufen. Diese wird im nächsten Tutorial fertiggestellt. Die dann von webedition generierte ID Nummer der newsindex.php muss hier eingetragen werden. Klicken Sie auf Speichern, um die Vorlage abzuspeichern.

5 Im nächsten Schritt erstellen Sie aus der newsdetail-vorlage einen Dokument-Typ. Die Erstellung von Dokument-Typen haben Sie bereits im Tutorial Dokument-Typ definieren gelernt. Klicken Sie im oberen Menü auf Optionen > Dokument-Typen Im Bereich Dokument-Typen klicken Sie rechts auf den Button Neuer Dokument-Typ. Vergeben Sie für Ihren neuen Dokument-Typ einen Namen, z.b Aktuelle_News. Im Bereich Vorlage wählen Sie die Vorlage newsdetail.tmpl. Im Bereich Standardwerte definieren Sie als Standardverzeichnis für das Abspeichern Ihrer News das Dokument- Verzeichnis news. Die Checkboxen Seite dynamisch generieren und ist durchsuchbar? werden beide aktiviert. Als Vorlage bitte nochmals die newsdetail.tmpl auswählen. Klicken Sie auf Speichern. Nun sollte Ihr neu angelegter Dokument-Typ im oberen Bereich Dokument-Typen in der Liste eingetragen sein. Erstellen Sie nun Ihre erste News. Klicken Sie im oberen Menü auf Datei > Neu > webedition Seite > Aktuelle_News. Das Fenster webedition Seite öffnet sich [Abb.3].

6 Abb.3 Erstellen eines Dokumentes mit Hilfe eines Dokumenten-Typs Füllen Sie wie in [Abb.3] gezeigt die jeweiligen Felder aus und klicken Sie auf Speichern. Tipp: Die Vergabe von Dateinamen für News sollte beispielsweise folgenden Aufbau haben: news_datum_wievielte am heutigen Tag -> news_ _1.php Wechseln Sie innerhalb des Fensters webedition Seite von der Ansicht Eigenschaften in die Ansicht Bearbeiten. In der Ansicht Bearbeiten hat der Redakteur die Möglichkeit seine News einzugeben.

7 Abb.4 Redaktioneller Bereich in der Ansicht Bearbeiten Erläuterungen zu den jeweiligen Eingabefeldern bezogen auf den Quellcode aus [Abb.3]. 1. Überschrift Website -> <we:input name="headline" type="text" html="false" php="false" /> 2. Datum für die Sortierung der News -> News vom: <we:input name="datum" type="date" format="d.m.y"/> 3. Überschrift News -> <we:input name="headlinelang" type="text" size="40" /> 4. Headline für die newsbox.php -> <we:input name="headlinekurz" type="text" size="40"/> 5. Verlinkung zum Newsarchiv -> <a href="<we:url id="411"/>" class="newsarchiv" >[Newsarchiv]</a> 6. textarea-feld für den Anlesetext in der newsindex.php -> <we:textarea name="anlesetext" cols="30" rows="10" autobr="on" inlineedit="true" dhtmledit="on" class="textarea"/> 7. textarea-feld für die News Detailbeschreibung -> <we:textarea name="text" cols="30" rows="20" autobr="on" inlineedit="true" dhtmledit="on" class="textarea"/>

8 Klicken Sie auf Speichern und bestätigen Sie die korrekte Abspeicherung mit OK. Durch die Parametereinstellung im Dokumenten-Typ wird Ihre News automatisch in das Dokumenten-Verzeichnis news abgelegt. Das Einhalten der eben gezeigten Arbeitsschritte ermöglicht es Ihnen, immer wieder neue News anzulegen.

9 Das Newsarchiv in WebEdition Erstellen Sie nun auf Basis unserer Hauptvorlage "index.tmpl" eine neue Vorlage mit der Bezeichnung "newsindex.tmpl". Legen Sie über Datei > Neu > Vorlage eine neue Vorlage an. Klicken Sie im Bereich Vorlage kopieren auf den Button Auswählen. Wählen Sie die zu kopierende Vorlage index.tmpl aus und klicken Sie auf OK Überschreiben Sie den im Bereich Pfad von webedition automatisch erzeugten Dateinamen index_copy in newsindex. Wählen Sie für die Speicherung der Vorlage das Vorlagen-Verzeichnis "news" aus. Klicken Sie im unteren Bereich von webedition auf Speichern. Fertig - die newsindex-vorlage ist angelegt. Wechseln Sie in der Vorlagen-Ansicht auf die Ansicht Bearbeiten. Erweitern Sie das newsindex.tmpl mit dem in [Abb.5] dargestellten Quellcode. Platzieren Sie den Quellcode innerhalb der contentbox im unteren Bereich. Abb.5 Quellcode für die Auflistung der News in der newsindex-vorlage <!-- *********** Start of Newslist ******************* --> <!-- Start Link für next and back --> <we:listview type="document" doctype="aktuelle_news" rows="6" order="datum" desc="true"> <div class="editmode"> Next and Back Link <div style="margin-bottom:20px; "> <div style="text-align:right; " ><we:iffound>seite: <we:listviewpagenr/> von <we:listviewpages/> Einträge: <we:listviewstart/> bis <we:listviewend/><we:ifback> <we:back class="newsarchiv"><strong >zurück</strong></we:back></we:ifback><we:ifnext> <we:next class="newsarchiv"><strong>weiter</strong></we:next></we:ifnext></we:iffound> <!-- End Link [next and back] --> <!-- Start Listarea --> <we:iffound> <?php /* Start - nur wenn Einträge vorhanden sind */?> <we:repeat> <div id="listform"> <div> <h2> [<we:field name="datum" type="date" format="d.m.y"/>] </h2> <div style="padding: 0px 0px 5px 0px;"> <we:field name="headlinelang" type="text" hyperlink="on" class="headlinelink"/> <div style="height:40px;" class="textbox"> <we:field name="anlesetext" type="text" />

10 <div style="text-align:right;padding:5px 0px 5px 0px;"> <we:field name="headlinelang" type="img" src="/tutorial/de/site_example/images/moredetail.jpg" hyperlink="on" border="0" alt="hier geht es Newsdetail"/> </we:repeat> </we:iffound> <?php /* Ende - nur wenn Einträge vorhanden sind */?> <div style="text-align:right;margin-top:20px" > <we:iffound>seite: <we:listviewpagenr/> von <we:listviewpages/> Einträge: <we:listviewstart/> bis <we:listviewend/> <we:ifback> <we:back class="newsarchiv"> <strong >zurück</strong> </we:back></we:ifback><we:ifnext> <we:next class="newsarchiv"> <strong>weiter</strong> </we:next></we:ifnext> </we:iffound> <div class="error" > <we:textarea name="keineeintraege" cols="30" rows="10" autobr="on" dhtmledit="on"/> <we:ifnotfound> <?php /* Start - wenn keine Einträge vorhanden sind */?> <we:var name="keineeintraege" type="document"/> </we:ifnotfound> <?php /* Ende - wenn keine Einträge vorhanden sind */?> </we:listview> <!-- ********************************** End of Newslist --> Erläuterung zum Quellcode: In der ersten Zeile <we:listview... doctype="aktuelle_news" rows="6" order="datum".../> bezieht sich die newsindex-vorlage auf den erstellten Dokumenten-Typ Aktuelle_News. Weiterhin werden 6 Zeilen pro Seite angezeigt und alle News in der Auflistung werden nach Datum sortiert. Klicken Sie auf Speichern um die Vorlage abzuspeichern. Wechseln Sie in die Dokumenten-Ansicht. Erzeugen Sie aus der newsindex.tmpl ein Dokument mit der Bezeichnung newsindex.php (Tutorial Dokumente erstellen) und speichern Sie dieses Dokument in das Dokumenten-Verzeichnis news ab. Hinweis: Tragen Sie die von webedition automatisch generierte ID-Nummer in Ihre ID-Tabelle ein. Im letzten Schritt muss die erzeugte ID der newsindex.php in der newsdetail-vorlage nachgetragen werden.

11 Wechseln sie in die Vorlagen-Ansicht in das Verzeichnis news Klicken Sie auf die newsdetail-vorlage. Gehen Sie auf Ansicht Bearbeiten. Abb.6 Auszug Quellcode newsdetail-vorlage... <div style="text-align:right; margin-top:10px;"> <we:ifnotvar name="print" match="true" type="request"> <a href="<we:url id="???"/>" class="newsarchiv" >[Newsarchiv]</a> <we:else/> <img src="/images/pixel.gif" width="1" height="1"> </we:ifnotvar>... Übertragen Sie die ID-Nummer in den <we:url>- tag [Abb.6]. <we:url id="???"/> Das fertige Ergebnis können Sie in [Abb.7] sehen. Abb.7 Auflistung der News

12 Das Anzeigen von News in WebEdition Im letzten Abschnitt unseres Newsbereiches müssen die aktuellen News noch in Ihrer Newsbox angezeigt werden. Zuständig dafür ist der in [Abb.8] dargestellte Quellcode. Wechseln Sie in der Vorlagen-Ansicht auf die Ansicht Bearbeiten. Erweitern Sie das newsbox.tmpl mit dem in [Abb.8] dargestellten Quellcode. Platzieren Sie den Quellcode innerhalb des <div>-tags mit der class="boxbody". Abb.8 Quellcode für die Anzeige der aktuellen News in der Newsbox <div id="newsboxcontent" <?php /* Start - Übersicht */?> <we:listview type="document" name="newsliste" doctype="aktuelle News" rows="2" order="datum" desc="true"> <we:iffound> <?php /* Start - Nur anzeigen, wenn es auch Einträge gibt */?> <?php /* alles was von we:repeat eingeschlossen ist wird wiederholt */?> <we:repeat> <div class="datum"> <we:field name="datum" type="date" format="d.m.y" class="datum"/> <div> <we:field name="headlinekurz" type="text" hyperlink="on" class="newsboxtxt"/> <div style="text-align:right; margin-top:5px;margin-bottom:5px;"> <we:field name="headlinelang" type="img" src="/tutorial/de/site_example/images/moredetail_gr.jpg" hyperlink="on" border="0" alt="hier geht es zu den Newsdetails"/> </we:repeat> </we:iffound> <?php /* Ende - Nur anzeigen, wenn es auch Einträge gibt */?> </we:listview> <?php /* Ende - Übersicht */?> Erläuterung zum Quellcode: In der ersten Zeile <we:listview... doctype="aktuelle_news" rows="2" order="datum".../> bezieht sich die newsbox-vorlage auf den erstellten Dokument-Typ Aktuelle_News. Weiterhin werden 2 Zeilen in der Newsbox angezeigt und alle News in der Auflistung werden nach Datum sortiert. Klicken Sie auf Speichern um die Vorlage abzuspeichern. Abb.9 zeigt die fertige Newsbox

13 Abb.9 Newsbox mit den aktuellen News