Ik heb (weer eens) een vraagje over PHP, en deze keer over de PHP-include tag. Nu weet ik hoe ik een pagina kan opbouwen met verschillende modules, zodat je uiteindelijk maar kleine delen van je site opnieuw hoeft te laden.
<?php include("footer.php"); ?>
Maar als je bijvoorbeeld de volgende opzet gebruikt, hoe laad je dan andere stukjes in?Bijvoorbeeld:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Smashing HTML5!</title><link rel="stylesheet" href="css/main.css" type="text/css" /></head><body><?php include("header.php"); ?><?php include("content.php"); ?><?php include("footer.php"); ?></body></html>
<body><?php include("header.php"); ?><?php include("content.php"); ?><?php include("footer.php"); ?></body></html>
Alvast bedankt!
Mvg,Joram
Misschien helpt 't als ik wat beter uitleg wat ik wil Normaal gesproken maak je een linkje aan waardoor je, als je daarop klikt, een hele pagina laad, zoals "about.html".
<a href="http://www.mijnwebsite.nl/about.html" title="Deze pagina gaat over mij">About</a>
Maar kun je dan met "php include once" alléén include("about.php") laden? Zoals bijvoorbeeld
<a href="http://www.mijnwebsite.nl/about.php" title="Deze pagina gaat over mij">About</a>
(Bewerkt door joram om 16:38, 7-04-2011)
Nieuwe poging. dit is de pagina die ik heb gemaakt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body> <?php include("header.php"); ?> <?php include("CONTENT.php"); ?> <?php include("footer.php"); ?> </body> </html>
<body> <?php include("header.php"); ?> <?php include("CONTENT.php"); ?> <?php include("footer.php"); ?> </body> </html>
En ik wil via deze pagina navigeren naar m'n about-pagina, waardoor de bovenstaande pagina verandert zou moeten worden naar:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body> <?php include("header.php"); ?> <?php include("ABOUT.php"); ?> <?php include("footer.php"); ?> </body> </html>
<body> <?php include("header.php"); ?> <?php include("ABOUT.php"); ?> <?php include("footer.php"); ?> </body> </html>
In feite blijft heel de pagina dus staan zoals hij staat, en wordt alleen content.php vervangen voor about.php. Dit om laadtijden te verbeteren en de server load te verlichten. Het zou dan eigenlijk werken zoals iFrames vroeger werkten... je vervangt alleen hetgeen je wíl vervangen.
Jouw idee is (denk ik) dat in de tweede pagina ook al header en footer staan, waardoor die niet meer geladen zouden hoeven worden opdat dat op de eerste pagina al is gedaan. Begrijp ik het zo goed???
Zo ja, dan moet ik je hevig teleurstellen. Een browser kan slechts geheel gevormde pagina's correct weergeven. De php include en include once statements zijn met name bedoeld om (aan de server kant) niet telkens dezelfde php codes in een pagina in te voegen. Zodra we het over html hebben is dat wat anders natuurlijk.
(Bewerkt door willemijngreven om 17:00, 7-04-2011)
IF URL="http://www.bla.nl/xxx"THEN include about.phpELSE include content.phpFI
Maar dan veel netter en ingewikkelder.
Bijvoorbeeld, mijn eigen website hangt volledig samen van één PHP bestand. Elke URL is gebaseerd op index.php, maar wat je te zien krijgt is afhankelijk van waar je je op de site bevindt en welke parameters mee worden gegeven.
/index.php = de start pagina/Sysadmin/index.php = alles over mijn werk/index.php?tag=anime = alle blogposts over anime/index.php?Y=2010&M=11 = alle blogposts uit November 2010/index.php?id=777 = de "about me" pagina
(Bewerkt door Cailin Coilleach om 17:08, 7-04-2011)
Ik dacht dat het, net zoals www.lifehacker.com bijvoorbeeld lijkt te doen, met de Include-tag alleen bepaalde onderdelen van een website te kunnen inladen, en dat je dus een basis-pagina hebt waar alle vaste elementen in staan zoals bijvoorbeeld een index.html met daarin het menu, de footer en andere vaste elementen, en dan alleen de content (about, portfolio, intro, contact e.d.) los in te laden.
Maar voor de site die jij noemt werkt het net zo als mijn eigen website: elke pagina wordt gemaakt met exact de zelfde code, maar de inhoud verandert afhankelijk van de URLs en de aangevoerde parameters. Nu is het voor die site en de mijne erg gemakkelijk geworden om heel simpel enorm veel content in te voeren omdat beide sites een database gebruiken waar de content in staat.
Als jouw site nog lekker klein is kan het best simpel worden.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body> <?php<br>include("header.php");<p>if (isset($_GET['p']) && ($_GET['p']=="about"))<br>{ include("about.html") }<br>elseif (isset($_GET['p']) && ($_GET['p']=="leuk"))<br>{ include("leukedingen.html") }<br>elseif (isset($_GET['p']) && ($_GET['p']=="koekjes"))<br>{ include("koekjes.html") }<br>else<br>{ include("startpage.html")}<p>include("footer.php"); <br>?> </body> </html>
<body> <?php<br>include("header.php");<p>if (isset($_GET['p']) && ($_GET['p']=="about"))<br>{ include("about.html") }<br>elseif (isset($_GET['p']) && ($_GET['p']=="leuk"))<br>{ include("leukedingen.html") }<br>elseif (isset($_GET['p']) && ($_GET['p']=="koekjes"))<br>{ include("koekjes.html") }<br>else<br>{ include("startpage.html")}<p>include("footer.php"); <br>?> </body> </html>
Je roept het een en ander dan aan als:index.phpindex.php?p=aboutindex.php?p=leukindex.php?p=koekjes
(Bewerkt door Cailin Coilleach om 17:22, 7-04-2011)
Oh, terwijl ik dit tik zie ik dat je dat nog best simpel lijkt te vinden als het om een kleine website gaat. De website waar ik zoiets deze zomer mee wil maken is inderdaad behoorlijk klein. Het gaat om zo'n 3-5 pagina's (home, about, portfolio, contact, en misschien een 5e), dus héél ingewikkeld wil ik 't niet maken. Maar als 't relatief "makkelijk" te doen is, zou je dan eens een voorbeeld/hulpje kunnen laten zien? Dan hoef ik niet telkens elke pagina helemaal opnieuw te maken maar kan ik alleen de content-delen in orde maken.
Oh, terwijl ik dit tik zie ik dat je dat nog best simpel lijkt te vinden als het om een kleine website gaat.
Ik zie dat je "about" 2x noemt, 1x als Include, en 1x als Get... kun je misschien uitleggen waarom en/of wat dat precies doet? Maar als deze code bij mij werkt dan ben ik je eeuwig dankbaar, hehe dat maakt dingen een heel stuk makkelijker in de toekomst!
Wat de beschreven code doet:1. Kijk of in de URL iets staat als "?p=xxx". P is in dit geval de naam die ik voor de variabele heb gekozen (p als kort voor "page"). Variabelen die via de URL worden aangevoerd heten "GET" variabelen.2. Bestaat de GET variabele "p", is de waarde dan "about?" Ja? Include about.html. Nee? Ga door.3. Bestaat de GET variabele "p", is de waarde dan "leuk?" Ja? Include leukedingen.html. Nee? Ga door.4. Bestaat de GET variabele "p", is de waarde dan "koekjes?" Ja? Include koekjes.html. Nee? Ga door.5. Geen van alle punten was waar? Include dan startpage.html
Het kan nog veel netter worden geschreven, maar op deze manier is het op beginnersniveau ook te begrijpen.
(Bewerkt door Cailin Coilleach om 17:35, 7-04-2011)
HTML en CSS begrijp ik "aardig"... ik kan er prima met de hand (op de meta-tags en doctype na) een site mee in elkaar zetten. Maar voor mij zijn HTML en CSS hetzelfde als 't leren van afkortingen van gewone woorden, en is PHP echt een taal zoals Grieks of Chinees. Compleet andere koek
Maar het stukje wat je als voorbeeld had aangemaakt is gelukkig nog te volgen. Ik weet niet precies wat en waarom er zoveel haakjes e.d. worden gebruikt, maar dat is de Basis-basis die ik nog eens goed moet/wil leren... maar eerst m'n site de lucht in!
Het verschil zit'm dan ook dat HTML en CSS puur talen zijn voor opmaak. Wat je zegt, je gebruikt ze om de layout van iets te beschrijven met redelijk begrijpelijke termen. Maar PHP is toch echt een echte programmeertaal waarmee je op procedurele wijze de computer vertelt wat ie voor jouw moet gaan bekokstoven
Opmaaktalen zijn statisch. Met programmeertalen kan je dynamiek brengen waar nodig, om zo de statische code precies zoals jij het wilt te genereren
Ik werk tot dusver ook met een simpele Include voor het menu en de footer, maar per onderwerp heb ik een aparte pagina. Kort door de bocht: header (variabel), include menu (vast), content (variabel), include footer (vast).
Wederom terug kijkend naar mijn eigen website worden ook dergelijke zaken dynamisch gegenereerd, op basis van database content.
/index.php De front page, met basis TITLE en algemene META tags/index.php?id=777 De contact page, met contact TITLE en persoonlijke META tags/Sysadmin/index.php Mijn werk pagina, met werk TITLE en bijbehorende META tagsenz...
Om dat te bereiken kan je natuurlijk de eerder getoonde constructie gaan gebruiken. Maar wat ik al zei, dat moet je niet willen zodra je meer dan (zeg pak'm beet) tien pagina's gaat onderhouden. Hoe dan ook, je past dan de conditionele statements zo aan dat ie niet alleen de content, maar ook de headers e.d. aanpast.
In het geval van mijn website gebeurt dat helemaal niet met include statements. Wat ik al eerder zei, mijn hele site bestaat uit een groot PHP bestand. En afhankelijk van hoe die file wordt aangeroepen worden er verschillende stukken code wel of niet uitgevoerd. De enige stukken die eigenlijk altijd worden uitgevoerd zijn die delen die de grafische banner laden, die de search balk laden, die de sectie headers vertonen en die de copyright melding onderin vertonen. Al het andere is volledig onderhevig aan hoe de pagina wordt aangeroepen.
(Bewerkt door Cailin Coilleach om 10:04, 8-04-2011)
Met het voorbeeld van Cailin zou ik alleen de body-content telkens opnieuw maken, maar als ik het goed begrijp heb jij, net als gewoon met html, elke pagina helemaal apart, en stop je alleen de vaste elementen er via een Include in... eigenlijk net omgekeerd van wat ik of Cailin dacht toch?
p.s.: voor mij zou 't ook 't leukst en fijnst zijn als ik een CMS heb, het liefst zoals Wordpress omdat ik daar nog het meest van begrijp. Maar ik heb talloze "newbie" tutorials gezien en gelezen maar kom er nog steeds niet helemaal uit hoe ik mijn html-site goed kan opknippen en kan implementeren in een kale Wordpress-template. Een deel ervan begrijp ik wel, maar er zijn een aantal specifieke dingen zoals het widget-ready maken e.d. waar ik niet uit kom.
(Bewerkt door joram om 10:04, 8-04-2011)
<?php<p>echo "<!DOCTYPE html>\n";<br>echo "<html lang="en">\n":<p>if (isset($_GET['p']) && ($_GET['p']=="about"))<br>{ <br> echo "<head>\n";<br> echo "<meta charset="utf-8" />\n";<br> echo "<title>About me, je weet toch?!</title>\n";<br> echo "<meta blabkalbblasdflsdfjsdf />\n";<br> echo "<link rel="stylesheet" href="css/main.css" type="text/css" />\n";<br> echo "</head>\n";<p> include("about.html") <br>}<br>elseif (isset($_GET['p']) && ($_GET['p']=="leuk"))<br>{ <br> echo "<head>\n";<br> echo "<meta charset="utf-8" />\n";<br> echo "<title>We gaan leuke dingen doen!!</title>\n";<br> echo "<meta echt keigaaf />\n";<br> echo "<link rel="stylesheet" href="css/main.css" type="text/css" />\n";<br> echo "</head>\n";<p> include("leukedingen.html") <br>}<br>elseif (isset($_GET['p']) && ($_GET['p']=="koekjes"))<br>{ <br> echo "<head>\n";<br> echo "<meta charset="utf-8" />\n";<br> echo "<title>Vette recepten voor vette koekjes!</title>\n";<br> echo "<meta vanillechocoladekrenten en haver />\n";<br> echo "<link rel="stylesheet" href="css/main.css" type="text/css" />\n";<br> echo "</head>\n";<p> include("koekjes.html") <br>}<br>else<br>{ <br> echo "<head>\n";<br> echo "<meta charset="utf-8" />\n";<br> echo "<title>In den beginne!</title>\n";<br> echo "<meta toffewebsitevanmij />\n";<br> echo "<link rel="stylesheet" href="css/main.css" type="text/css" />\n";<br> echo "</head>\n";<p> include("startpage.html")<br>} <p>echo "<body>\n";<br>echo "</body>\n";<br>echo "</html>\n";<p>?>
En wederom: het kan -veel- netter en beter en mooier. Maar om het niet te ingewikkeld te maken maar even op deze fiets...
Bijgaand een voorbeeld paginaAlle definities staan in de stylesheet, de footer bevat ook de afsluitende < /div >< /body >< /html >
< head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title>titel van de website</title> < meta name="keywords" content="key, words, keywords" /> < meta name="description" content="voorbeeldsite php-include" /> < meta name="robots" content="index"/> < meta name="robots" content="follow"/> < meta name="robots" content="all" /> <link href="style.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-language" content="nl" />< /head >< body >< div id="container" > < div id="header" >< /div> < ?php include("menu_top.html"); ?> < div id="content-left"> < h1>kop< /h1> < p>tekst< /p> < /div content-left> < div id="content-right"> < h1>kop< /h1> < p>tekst< /p> < /div content-right>< ?php include("footer.html"); ?>
< body >
< div id="container" > < div id="header" >< /div> < ?php include("menu_top.html"); ?>
< div id="content-left"> < h1>kop< /h1> < p>tekst< /p> < /div content-left>
< div id="content-right"> < h1>kop< /h1> < p>tekst< /p> < /div content-right>
< ?php include("footer.html"); ?>
(Bewerkt door Hiker om 16:38, 15-04-2011)
Met ajax is dit niet mogelijk. Ajax is een combinatie van client-side en server-side: wanneer er op een knop gedrukt wordt stuur je een request naar de server. Die geeft dan een pagina terug en de inhoud van de huidige pagina verander je door die pagina. Het verschil met de pure PHP methode is dat Javascript vereist is, maar dat de pagina's sneller laden, omdat alleen de inhoud en niet de navigatie etc. geladen hoeven te worden. Ook kan je, als je dat wilt, een animatie invoegen.
Persoonlijk zou ik je aanraden deze twee methodes te combineren. Maak een PHP pagina waarin je afhankelijk van de inhoud van $_GET['p'] een bepaald bestand uit de map includes inlaad. Je kan hiervoor één van de codes die eerder in dit topic genoemd zijn gebruiken, maar persoonlijk vind ik dit mooier staan:
<?php<br>// De toegestane pagina's.<br>$pages = array('default', 'home', 'about', 'contact');<p>// Controleer of één van die pagina's ingeladen wordt.<br>if (in_array($_GET['p']) {<br> if (!include('includes/' . $_GET['p'] . '.php')) {<br> print 'Couldn\'t load the content.';<br> }<br>} else {<br> // Een andere pagina (of geen pagina) wordt aangevraagd: laat de default pagina zien.<br> include('includes/default.php');<br>}<br>?>
Je plaatst de toegestane pagina's in een array en geeft een standaard pagina weer wanneer er geen goede pagina wordt aangevraagd. Als je dit nu met Ajax wil combineren moet je d.m.v. Javascript op het moment dat een er op een link wordt geklikt zeggen dat er i.p.v. het laden van de nieuwe pagina een Ajax request moet worden uitgevoerd. Ik gebruik zelf jQuery (een Javascript library) en daarmee doe je dat met de volgende code:
<script type="text/javascript">// Functie om de pagina te laden.function loadPage(page) { // Doe de ajax request. $.ajax({ success: function(response) { // Deze functie wordt uitgevoerd wanneer de pagina succesvol geladen is. Laat hier nu de content zien. $('div#content').html(response); // Zorg dat de gebruiker niet alsnog doorgestuurd wordt volgens de href tag van de link. return false; }, url: 'includes/' + page });}// Doe pas dingen wanneer de DOM er klaar voor is.jQuery(document).ready(function($) { // Controleer of er een hash in de URL staat -> zo ja: laad die pagina. if (window.location.hash) { loadPage(window.location.hash); } // Kijk wanneer er op een navigatie-item geklikt wordt. $('ul#navigation a').bind('click', function() { // Krijg de url naar de te laden pagina (dezelfde die je ook via PHP inlaad). Ervan uitgaand dat die in de "name" tag staat. var page = $(this).attr('name') + '.php'; // Bewaar de aangeroepen pagina in de hash. window.location.hash = '#' + page; Laad the pagina. loadPage(page); }););</script>
// Doe pas dingen wanneer de DOM er klaar voor is.jQuery(document).ready(function($) { // Controleer of er een hash in de URL staat -> zo ja: laad die pagina. if (window.location.hash) { loadPage(window.location.hash); }
// Kijk wanneer er op een navigatie-item geklikt wordt. $('ul#navigation a').bind('click', function() { // Krijg de url naar de te laden pagina (dezelfde die je ook via PHP inlaad). Ervan uitgaand dat die in de "name" tag staat. var page = $(this).attr('name') + '.php';
// Bewaar de aangeroepen pagina in de hash. window.location.hash = '#' + page;
Laad the pagina. loadPage(page); }););</script>
Nu wordt Ajax gebruikt indien mogelijk, en anders de "gewone" server-side methode.
(Bewerkt door Frog om 12:35, 17-04-2011)
Maar waar ik op doelde met m'n vorige pagina is dat ik dacht dat je een stukje pagina (bijvoorbeeld de content van een pagina) met PHP kan inladen om het laden sneller te laten gaan, maar dat je dit ook kunt doen met AJAX. De methoden zijn compleet verschillend, maar voor de gebruiker scheelt 't in beide gevallen laadtijd toch?
Gast
