1 FileZilla Downloaden FileZilla Start het programma Site toevoegen Bestanden uploaden...

Transcriptie

1 1 1 FileZilla Downloaden FileZilla Start het programma Site toevoegen Bestanden uploaden Onderhoud website De Onthaasting Editor Netbeans-project aanmaken De mappenstructuur Content Menu Access.php Voorbeelden Verwijzen naar een bestand Bevestigings aanpassen... 18

2 2 1 FileZilla Om bestanden op of van een website te halen maak je gebruik van het protocol FTP (file transfer protocol). Afgezien van het feit dat dit een heel slecht protocol is wordt het toch nog altijd gebruikt. Je kan Windows Verkenner als FTP programma maar dit is traag en je hebt weinig controle over alle bestanden. Daarom kiezen we voor FileZilla. 1.1 Downloaden FileZilla FileZilla kan je downloaden op de officiële website Je downloadt het programma FileZilla Client. Download enkel stabiele versies dus geen Alpha, Beta of Release candidates (RC). Op het moment van schrijven is versie de laatste stabiele versie. Onder Windows zie je twee bestanden namelijk een.exe en een.zip bestand. Je kiest hier voor een.exe bestand. Voer het bestand uit en volg de installatiewizard. 1.2 Start het programma Start FileZilla op de volgende manier: 1. Klik op Start. 2. Klik op Alle programma s. 3. Klik op de map FileZilla FTP Client. 4. Klik op FileZilla.

3 3 Hier zie je een schermafdruk van het venster dat je krijgt. Dit is FileZilla versie Je kan het programma altijd updaten door in de menubalk op Nieuwe versie beschikbaar! te klikken. 1. Hier verschijnen connectieresultaten. 2. Dit is de lokale mappenstructuur van de computer. 3. Dit zijn de bestanden aanwezig op de computer. 4. Dit is de mappenstructuur van de server. 5. Dit zijn de bestanden aanwezig op de server Site toevoegen Als je een website vaak gaat gebruiken ga je deze toevoegen aan sitebeheer. Dit doe je op de volgende manier. 1. Klik in de menubalk op Bestand. 2. Klik op Sitebeheer 3. Klik op Nieuwe site. 4. Geef een naam op voor de site.

4 4 5. Geef vervolgens de volgende waarden op in het rechtervenster. 6. Klik op Verbinden. 7. Klik op www.

5 5 In de map www staan alle publieke bestanden. Het is dus hier waar de site staat Bestanden uploaden Je brengt bestanden over van de lokale computer (linkse paneel) naar de server door lokale bestanden te selecteren en vervolgens te rechtermuisklikken op de geselecteerde bestanden. In volgende figuur zie je een soortgelijk resultaat.

6 6 Je klikt vervolgens op Uploaden. FileZilla zal de bestanden overschrijven op de server. Bestanden downloaden doe je op dezelfde manier enkel vertrek je van het rechtse paneel, de externe site.

7 7 2 Onderhoud website De Onthaasting 2.1 Editor Je past een website aan met een editor. Je hebt veel soorten editors voor websites aan te passen. Enkele voorbeelden zijn kladblok, NotePad++, Dreamweaver of Netbeans. Deze twee laatsten hebben tevens een ingebouwde FTP waardoor FileZilla eigenlijk overbodig wordt tenzij je de bestanden nog wil downloaden van de webserver. De website van De Onthaasting is bijvoorbeeld gemaakt in Netbeans. Als je Netbeans wil gebruiken moet je de software downloaden op Vooraleer je de PHP bundel kan installeren moet je minstens Java 6 op de computer geïnstalleerd hebben. Vaak heb je dit al maar het kan geen kwaad om nog maar eens dit te downloaden op Netbeans is eigenlijk meer een editor om een Java applicaties mee te maken. Maar er is ook een versie waar enkel de PHP functionaliteiten in opgenomen zijn.

8 8 2.2 Netbeans-project aanmaken Open het verkregen Netbeans-project op de volgende manier: 1. Klik op File. 2. Klik op Open Project 3. Navigeer naar het project. Je herkent dit onmiddellijk aan het icoon voor de naam van de map. 4. Selecteer het project. 5. Klik op Open Project. Vervolgens moet je de eigenschappen van het project aanpassen zodat de bestanden onmiddellijk worden geüpload naar de server. 6. Rechtermuisklik op de projectnaam.

9 9 7. Klik op Properties. 8. Klik links op Run Configuration. 9. Klik rechts op de knop Manage bij Remote Connection. 10. Klik op Add 11. Geef de volgende waarden in.

10 Klik op Test Connection. 13. Klik op OK. 14. Geef in het hoofdscherm de volgende waarden in.

11 De mappenstructuur We bespreken even de mappenstructuur.

12 Content Hierin zit al de inhoud van de website, open deze map en je ziet nog eens zes mappen. Deze mappen en de bestanden hierin komen grotendeels overeen met de menustructuur uit de website die online staat. Bestudeer de volgende figuur.

13 13 We klikken de pagina welkom.php even aan. Hierin zit de volgende code: <h2>welkom</h2> <p> In brasserie "De Onthaasting" neemt de stress van het dagelijkse leven een tijdelijke pauze. Het stijlvolle art-decohuis vormt sinds 2006 het decor voor de brasserie. <br/><br/> Hier komt u tot rust bij een koffie met een extraatje, een snelle lunch of een uitgebreid diner. U bent steeds welkom om eens te komen "onthaasten". <br/><br/> Tot binnenkort! Dave en Jurgen </p> Elke webpagina begint met een titel die we tussen de tags <h2> </h2> plaatsen. Een tag wordt trouwens altijd gesloten met de /. Tekst plaats je tussen een paragraaf namelijk <p> tekst </p>. Een nieuwe lijn krijg je door de tag <br/> in te voegen. Een witregel zijn dan twee van deze tags <br/><br/>. Vervolgens openen we de pagina openingsuren.php. Deze komt overeen met Info in de menubalk op de website. Je kan nu denken om de naam van het bestand, openingsuren.php te wijzigen in info.php. Als je dit doet zal de gebruiker deze pagina niet zien omdat je nog een

14 14 ander bestand zal moeten aanpassen. Mocht je dit toch doen dan zal Netbeans het bestand info.php op de webserver zetten en openingsuren.php zal hij dan NIET verwijderden. Netbeans verwijdert nooit bestanden op de server, hij zal ze enkel overschrijven indien recenter en dezelfde naamgeving. Hier plaatsen we een link naar het adres van De Onthaasting. <a Het attribuut class=" " moet eigenlijk bij elke link <a></a> staan omdat je dit anders niet zal zien op de webpagina. Op de pagina neemeenkijkje.php staan de foto s. Als je een foto wil toevoegen moet je die hier in drie formaten aanbieden. een grote die je plaatst in de map images/background/bgx.jpg (formaat 1000x667). een middelgrote die je plaatst in de map images/foreground/fgx.jpg (formaat 500x334). de kleine plaats je in de map images/thumbs/thumbx.jpg (formaat 120x80). Een extra foto voeg je dus toe door tussen de tag <div class="bf_gallery_wrapper"></div> de volgende code te plaatsen. Dit kan je uiteraard kopiëren van de voorgaande items! <div class="bf_gallery_item"> <div class="bf_heading"><h2>titel boven (niet verplicht!)</h2></div> <div class="bf_desc"> <p>titel onder (niet verplicht!)</p> </div> <img src="images/foreground/fg1.jpg" alt="image1" databgimg="images/background/bg1.jpg" /> </div> Zoals je ziet heb je nog maar twee foto s gebruikt fg1.jpg en bg1.jpg. Je hebt de thumbx.jpg nog niet gebruikt. Open hiervoor de pagina foto.php op de rootmap (bij index.php). Je plaats de volgende regel <li><a href="#"><img src="images/thumbs/thumb7.jpg" alt="thumb7"/></a></li> tussen de volgende code: <ul id="bf_dishes"> <li><a href="#"><img src="images/thumbs/thumb1.jpg" alt="thumb1"/></a></li> <li><a href="#"><img src="images/thumbs/thumb2.jpg" alt="thumb2"/></a></li> <li><a href="#"><img src="images/thumbs/thumb3.jpg" alt="thumb3"/></a></li> <li><a href="#"><img src="images/thumbs/thumb7.jpg" alt="thumb7"/></a></li> </ul> Menu Open menu.php in de rootfolder.

15 15 Vergelijk de bovenstaande figuur met de menubalk uit de website. Als je een extra pagina wil toevoegen plaats je hier een extra regel code bij. De href="index.php?page=welkom" is hier heel belangrijk. Deze staat in verbinding met de pagina access.php Access.php Hier volgt een stukje pure PHP-code uit het bestand access.php. We bekijken nog eens een stukje code uit het menu. <li><a href="index.php?page=welkom">welkom</a></li> Het geen wat achter page komt is heel belangrijk. Hierboven is dit welkom. In access.php komt dit ook terug. Bekijk maar eens de onderste regel code uit bovenstaande figuur. $phppages["welkom"] = new Page("restaurant/welkom.php", "restaurant");

16 16 Vervolgens zien we waar het bestand staat namelijk in de map restaurant/welkom.php. De laatste parameter is "restaurant". Deze moet restaurant zijn als het in het menu ook onder restaurant staat. Deze kan evengoed dekaart, feesten of promoties als parameter hebben als het in het menu onder promoties zit.

17 17 3 Voorbeelden 3.1 Verwijzen naar een bestand Op de pagina suggestie.php ga je vaak nieuwe downloads plaatsen. <h2>suggesties</h2> <p> <a href="suggestie_januari.pdf" class=" ">u kan onze suggesties hier downloaden.</a> </p> Je verwijst binnen de href="" naar een bestand, in dit geval een.pdf, dat je op de root van uw mappenstructuur plaatst. De root is de hoogste mogelijke plaats, in dit geval waar ook index.php staat. Hetzelfde ga je ook op de pagina seizoenspagina.php moeten doen. Momenteel vind je hier nog een extraatje in de code. <h2>seizoenspagina</h2> <p style="display: none"> <a href="bestand.pdf" class=" ">download hier onze </a> </p> De code style="display: none" zorgt ervoor dat de inhoud tussen de <p></p> onzichtbaar is (dit is wel nog zichtbaar als men naar de broncode gaat zien ). Je moet hier deze code gewoon weghalen en verwijzen naar het juiste bestand dat je ook op de root plaatst.

18 Bevestigings aanpassen Als iemand een reservatie plaatst wordt een verstuurd naar met alle details hiervan. In deze mail heb je de mogelijkheid om de reservatie goed te keuren door op de link te klikken. De inhoud van de bevestigings die naar de klant wordt verstuurd kan je aanpassen onder content/execute/bevestigregistratie.php.! Opgelet deze pagina bevat PHP-code, wees voorzichtig bij het aanpassen! Een goede gewoonte is om dit te back-uppen alvorens je wijzigingen gaat aanbrengen. Test dit ook door een reservatie te plaatsen en vul jouw adres in. Als alles dan nog werkt heb je het succesvol aangepast. Je vindt de volgende code terug in het document: // subject $subject = 'Bevestiging reservatie De Onthaasting'; // message $message = ' <html> <head> <title>bevestiging reservatie</title> </head> <body> <p>beste '. $naam. '</p> <p>uw reservatie werd bevestigd.</p> <p>details van uw reservatie</p> <p>naam: '. $naam. '<br/> Telefoon: '. $gsm. '<br/> Aantal personen: '. $aantal. '<br/> Datum: '. $datum. '<br/> Uur: '. $uur. ':'. $minuut. '<br/> </p> <p>tot dan!</p> <p>de Onthaasting<br/><br/><br/> Brasserie-Restaurant "De Onthaasting"<br/> Laar 14<br/> 2400 Mol<br/> Tel: 014/ <br/> Fax: 014/ <br/> <a href="mailto:info@deonthaasting.be">info@deonthaasting.be</a><br/> <a href=" </p> '; </body> </html> De volgende zaken kan je aanpassen. De zaken met een $-teken voor mag je nooit van naam veranderen omdat dit wordt opgevuld met de waarden opgegeven door de klant.

19 19 $subject = 'Hiertussen kan je de onderwerp van de bepalen'; Brasserie-Restaurant "De Onthaasting"<br/> Adres<br/> Postcode Gemeente<br/> Tel: Telefoon<br/> Fax: Fax<br/> <a href="mailto: "> </a><br/> $headers.= 'From: Reservation manager <info@deonthaasting.be>'. "\r\n"; Reservation manager is de naam van de afzender en <info@deonthaasting.be> is het e- mailadres waarnaar ze terug kunnen sturen (beantwoorden).