Lektion 5 - PHP include

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Lektion 5 - PHP include

Beitrag von Admin » Di 19. Aug 2014, 11:29

Eine Webseite, die so gestaltet wird, wie du es hier im Kurs gelernt hast, ist mitunter schwierig zu betreuen, wenn du z.B. häufig etwas am Menü änderst ... neue Links hinzufügst ... bestehende umbenennst ... Wenn du dir ein Web mit 20 Unterseiten aufgebaut hast, ist das ganz schön müßig auf allen 20 Unterseiten die Navigation jedes Mal zu ändern, wenn du eine Seite in der Menüleiste hinzufügen willst.

Früher hat man es sich einfach gemacht und Framesets eingesetzt. Praktisch einen Inlineframe für jeden Bereich. Hier war das Problem, dass diese Technik nicht barrierefrei ist. Wenn du also über eine Suchmaschine eine Seite aufrufst, wird nur die Unterseite angezeigt, nicht aber der Header und Navigation. Du kannst also nur die eine Seite lesen und nicht weiter surfen.

Seit einigen Jahren hat sich das serverseitig inkludieren durchgesetzt.

Das heißt, du zerlegst eine Webseite und erst auf dem Server wird sie wieder zusammengesetzt.
BildAchtung!
Hierfür benötigst du PHP-fähigen Webspace. Ob auf deinem Webspace PHP installiert ist, erfährst du über deinen Anbieter.
Ok, und so funktioniert es:

Am Besten geht das, wenn du gerade erst dein Template erstellt hast. Je weniger Text an dieser Stelle ist, desto übersichtlicher und einfacher wird das ganze für dich, weil du dich für die Aufteilung im Quelltext zurechtfinden musst. Du musst ab hier also mit deinem Texteditor arbeiten.

Öffne dein Template mit einem Texteditor, sodass du den Quelltext siehst. Wie im Kurs gelernt hast du deine Seite in mehrere Bereiche aufgeteilt. Du hast deine Seite in mehrere Bereiche aufgeteilt:

Kopf, Menü, Inhalt, Footer - das sieht dann ungefähr so aus:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Start</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>

</div>
<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="hobby.html">Hobby</a></li>
  <li><a href="galerie.html">Galerie</a></li>
  <li><a href="glossar.html">Glossar</a></li>
  <li><a href="termine.html">Termine</a></li>
  <li><a href="gaestebuch.html">Gästebuch</a></li>
  <li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">Lorem ipsum ...
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body>
</html>
Nun möchtest du hin und wieder die Linkliste ändern. Es werden also in absehbarer Zeit noch weitere Unterseiten hinzukommen oder umbenannt.

Dann möchtest du deine Navigation aus der Seite lösen. Markiere den DIV #navi und schneide ihn über Menü Bearbeiten - Ausschneiden aus. - Öffne eine neue Datei in deinem Texteditor und füge sie dort ein.
So sieht deine Html-Seite nun aus:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Start</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>
</div>


<div id="inhalt">Lorem ipsum ...
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body>
</html>
Speichere die Textdatei mit deinem Div als navigation.inc

Code: Alles auswählen

<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="hobby.html">Hobby</a></li>
  <li><a href="galerie.html">Galerie</a></li>
  <li><a href="glossar.html">Glossar</a></li>
  <li><a href="termine.html">Termine</a></li>
  <li><a href="gaestebuch.html">Gästebuch</a></li>
  <li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
Füge in die Lücke, wo bislang die Navigation stand einen Platzhalter ein:

Code: Alles auswählen

<?php include("navigation.inc");?>

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Start</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>
</div>
<?php include("navigation.inc");?>

<div id="inhalt">Lorem ipsum ...
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body>
</html>
Speichere die Seite mit dem Template nun als php Datei ab. z.B. index.php

Um zu sehen, ob alles richtig funktioniert hat, musst du die index.php, die navigation.inc und das Stylesheet auf deinen Server hochladen und im Browser öffnen.

Die index.php kannst du weiterhin mit KompoZer bearbeiten. Da alle anderen Unterseiten die gleiche Navigation besitzen, brauchst du auf jeder Seite den gleichen Platzhalter. Verwende die index.php als Vorlage für weitere Seiten.

Auf der navigation.inc kannst du jetzt ganz nach Belieben die Namen der Links oder die Anzahl der Links, die Linkpfade ... verändern.

Viel Spaß beim Zerlegen!

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 5 - PHP include

Beitrag von kp2709 » Fr 5. Sep 2014, 13:00

hallo ihr treuen seelen,
habe es versucht, kommt immer diese meldung
Parse error: syntax error, unexpected '")?> ' (T_CONSTANT_ENCAPSED_STRING) in /users/reikuma/www/wagenburg/index.php on line 10 ,kann bplaced server dies nicht ausführen ode habe ich hier irgendwo einen fehler
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>wagenburg</title><link rel="stylesheet" href="styles.css" type="text/css"></head><body>

<div id="seite">
<div id="kopf">
<h1>Wagenburg</h1>
</div>
<?php include(navigation.inc")?>
<div id="inhalt">
<h2>Wagenburg</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. <br>
<h3>Sed ut </h3>
perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. <br>
<br>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</div>
<div id="footer"><a href="#kopf">nach oben</a></div>
</div>


</body></html>
oder hier
<html>
<head>
<meta id="_moz_html_fragment">
</head>
<body>
<div id="navi">
<ul>
<li><a href="#">Start-WB</a></li>
<li><a href="#">Termin-WB</a></li>
<li><a href="#">Bilder-WB</a></li>
<li><a href="#">Gaestebuch-WB</a></li>
<li><a href="#">Neues-WB</a></li>
</ul>
</div>
</body>
</html>

bitte um hilfe
gruß
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 5 - PHP include

Beitrag von camouflage1984 » Fr 5. Sep 2014, 13:50

Hallo Kurt

Das liegt hier dran:

Code: Alles auswählen

<?php include(navigation.inc")?>
da fehlt vor dem letzten Fragezeichen ein Semikolon und nach der ersten Klammer ein Hochkomma.

Es müsste so aussehen:

Code: Alles auswählen

<?php include("navigation.inc");?>
Habe die Fehler auch aus der Anleitung entfernt ;)

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 5 - PHP include

Beitrag von kp2709 » Fr 5. Sep 2014, 19:25

hallo zusammen,
hat alles nun super funktioniert, hier der link
http://reikuma27.reikuma.bplaced.de/wagenburg/

nun noch eine frage,
wenn ich die zum beispiel inhalt.inc datei bearbeiten will, wie es beschrieben ist, das man es in kompozer bearbeiten kann. wie geht das, wie kann ich den hintergrund ändern oder eine bild einfüge in dieser inc datei.

gruß
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 5 - PHP include

Beitrag von anke » Sa 6. Sep 2014, 06:30

Hallo Kurt

alle inc Dateien kannst du nur noch mit einem Text-Editor bearbeiten, also im Quelltext. Deshalb ist es nicht gut den Inhalt-Div in eine inc Datei zu kopieren.

Die Erleichterung hast du halt, wenn du die Navigation in eine inc schreibst. Da dort der Inhalt auf allen Seiten gleich ist und eine Änderung der Navigation dann nur in dieser Datei gemacht werden muss.

Viele Grüße

anke

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 5 - PHP include

Beitrag von Hellriders » Mo 19. Okt 2015, 16:30

Hi,
ich hab es soweit hinbekommen nur die Umlaute haben sich verändert. :?
Was muss ich tun damit es wieder korrekt angezeigt wird?
Ich habe die Unterseiten erstmal so belassen.

index.php

gruß micha

muss ich alle .html unterseiten in .php ändern sowie dann auch die links in der navigation.inc ?

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 5 - PHP include

Beitrag von camouflage1984 » Mo 19. Okt 2015, 17:57

Hallo Micha

Mit den Umlauten kann es mit der Zeichenkodierung zusammenhängen. Wenn deine navigation.inc in charset=UTF-8 kodiert ist und deine Webseite in charset=ISO-8859-1
Das kannst du herrausfinden wenn du deine navigation.inc in Notepat öffnest und schaust wie die Kodierung ist
unicode.jpg
unicode.jpg (29.79 KiB) 1086 mal betrachtet
dann kannst du über Konvertiere zu das ändern!

Wenn das alles so Funktionieren soll müssen deine Seiten in php umbennnt werden!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 5 - PHP include

Beitrag von Hellriders » Mo 19. Okt 2015, 18:22

Danke,
jetzt siehts gut aus. :D
Wo kann ich jetzt die Stylessheet fürs navi ändern? :o

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 5 - PHP include

Beitrag von camouflage1984 » Mo 19. Okt 2015, 20:16

Hallo Micha

Das kannst du über deine css ;) du hast ja deinem Navi die id navi gegeben.
Damit Du die Änderungen auch sehen kannst, erstelle einfach eine Testseite.html mit der Navigation, die nicht über PHP eingebunden wird, diese kannst Du dann im Kompozer ändern und gleichzeitig Deine Änderungen ansehen ;)

Da Du die css extern eingebunden hast, lädst Du danach Deine css auf deinen Webspace und schon sind Deine Änderungen aktiv.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten