Hoe maak ik een website? Les 1: De basis

Hoe werkt een website?

Een website is eigenlijk niets anders dan een document dat je online beschikbaar maakt voor de hele wereld. Dit document staat ergens op een computer, die dag en nacht aan staat om het document altijd beschikbaar te stellen. Dit heet een Webserver. Het document is in een HTML formaat. Een HTML formaat bestand is voor een browser hetzelfde als wat een DOC bestand is voor Microsoft Word.

Om dit bestand beschikbaar te maken voor de wereld heeft de Webserver een serverapplicatie nodig. De meeste Webservers gebruiken hiervoor Apache. Dat is verder niet zo'n spannende applicatie: het doet precies wat het moet doen.

Omdat HTML bestanden statisch zijn (altijd hetzelfde bestand) heeft iemand op een gegeven moment bedacht dat het handig zou zijn als er een tussenlaag was. Een applicatie die op basis van bijvoorbeeld een formulier-invoer een ander stukje HTML weergeeft. Denk bijvoorbeeld aan een inlog voor een website. Als jij bij Facebook inlogt zie je iets anders dan wanneer ik dat doe. De uitvoer is nog steeds in HTML, maar de inhoud, welke afbeelding er staat, en welke tekst, wordt bepaald door een tussenlaag die de invoer van jouw logingegevens heeft verwerkt. Er zijn diverse talen waarin je deze tussenlaag kan programmeren, maar wij gebruiken de meest voorkomende: PHP.

Dan zijn er nog 3 andere zaken die we in deze tutorial willen behandelen, namelijk:

MySQL: Dit is een database (een soort serie van een aantal Excel sheets waar je PHP in kan laten zoeken).
Ook willen we ons wat verdiepen in CSS. Dit is een taal die je kan gebruiken om de HTML aan de voorkant vorm en kleur te geven. 
Als laatste willen we ons ook gaan bezig houden met Javascript. Dit is een taal die, net als HTML en CSS door de browser wordt uitgevoerd, maar die de HTML op een heel flexibele manier kan aanpassen. Denk hierbij aan openschuif-effecten, of een popup in de browser.

We gaan dus leren hoe we aan de voorkant HTML, CSS en Javascript kunnen gebruiken, met een tussenlaag van PHP, met een serverapplicatie Apache. Laatsgenoemde doen we eigenlijk niet echt iets mee maar we maken er wel gebruik van.

Wat is dit voor een tutorial?

In deze set lessen wil ik je stap voor stap meenemen in het programmeren van een eenvoudige dynamische website. We werken toe naar het moment dat je een website helemaal van niets af aan kan opbouwen. We gaan de volgende talen / middelen leren gebruiken:

  • HTML, CSS en Javascript
  • PHP en MySQL

In de lessen maak ik in de screenshots gebruik van deze applicaties. Dit zijn veelgebruikte applicaties, mijn advies is om deze ook te gebruiken:

Let op: Mijn screenshots zijn gemaakt op Linux dus als je zelf Windows gebruikt kunnen de screenshots er iets anders uit zien

Les 1: De basis

In les 1 leer je hoe je kan beginnen met het maken van bestanden voor je website, en leer je hoe je ze live kan zetten.

Benodigheden

  • Een webserver met hier op Apache, PHP en Mysql geinstalleerd
    • Dit kan je huren bij een webhosting-partij
  • Een FTP programma (in de tutorial: FileZilla *)
    • Dit programma gebruiken we om bestanden naar de webserver te sturen
  • Een editor (in de tutorial: Eclipse *. Andere opties: Netbeans, PHPedit of jEdit)
    • Met dit programma is het makkelijk om onze code te schrijven.

* Download-links rechtsboven deze pagina.

Stap 1 Het instellen van Eclipse

We gaan beginnen met het programma Eclipse. Dit programma werkt in de opzet met projecten. In deze projecten worden gegevens van je editor opgeslagen. Dat zijn project-specifieke eigenschappen bijvoorbeeld over hoe je je code wilt weergegeven hebben in de editor.

Weetje: Een editor waar je code in kan programmeren noemen we een IDE. Een Integrated Development Environment.

Als je Eclipse hebt geopend vraagt deze om een locatie voor je Workspace. Kies hier als locatie een korte makkelijke locatie bijvoorbeeld C:/workspace

Nadat je een Workspace hebt aangemaakt heb je linksbovenaan de optie om een nieuw project aan te maken. Het kan ook zijn dat je de intro-pagina krijgt. Daar staat een grote button op voor het maken van een nieuw project. Kies in het volgende scherm voor het maken van een PHP Project:


Geef je project een naam en laat verder alle standaard instellingen staan. Klik meteen op Finish:


Stap 2 Je eerste webpagina maken

Als je project aangemaakt is, kan je in Eclipse met de rechtermuisknop op je projectnaam klikken en een nieuw bestand aanmaken. Maak een nieuw bestand aan met de naam index.html

Zet hier op de eerste regel deze code:

Dit is mijn eerste website

Druk vervolgens op Ctrl-S om het bestand op te slaan. Je hebt nu je eerste HTML bestand gemaakt. Er staat nu alleen nog tekst in en geen code, maar dat komt later. In de volgende stap gaan we dit bestand Live zetten!

Stap 3 Je eerste livegang

Om een bestand live te zetten gaan we gebruik maken van het programma FileZilla. Dit is een FTP programma dat geschikt is om via het zogenaamde FTP protocol te communiceren tussen 2 computers. Tussen jouw computer en de Webserver in dit geval.

Open FileZilla, en klik linksboven op het icoontje voor de Site Manager:


Klik op New Site en vul de gegevens in die je van je hosting provider hebt gehad. Let op dat je de encryption zet op: Only use plain FTP. Als de verbinding is gelukt zie je als het goed is in het rechter scherm de inhoud van de map public_html en aan de linkerkant C:/. De map public_html is de map op de webserver waar alle publieke bestanden in staan. 

Weetje: De map waar je publieke documenten in staan noemen we ook wel Document-Root of Public Root-map. De 'gewone' root-map op een Linux server is / en op Windows is die voor elke schijf anders. Bijvoorbeld C:/


Blader nu aan de linkerkant naar C:/workspace/Websitenaam (dit heb je bij het installeren van Eclipse ingesteld) en aan de rechterkant blader je naar de public_html (als je daar niet al bent). Het kan zijn dat aan de rechterkant in public_html al een map en documenten staan. In ons voorbeeld is dat ook het geval. Hosting providers plaatsen deze inhoud bij wijze van 'placeholder'. Een soort van tijdelijke website. Verwijder de tijdelijke bestanden en mappen aan de rechterkant in public_html.

Nu zie je aan de linkerkant als het goed is een aantal mappen, waaronder jouw index.html bestand. De overige bestanden en mappen zijn daar door Eclipse neergezet om instellingen van je editor te onthouden. Deze bestanden mag je vanaf nu volledig negeren, maar verwijder ze niet! Nu kan je het bestand index.html van links naar rechts verslepen. FileZilla gaat dit bestand nu op de webserver plaatsen. Als je nu jouw website opent in een browser staat daar: Dit is mijn eerste website

Gefeliciteerd! Je hebt zojuist je eerste livegang gehad.

De volgende les

In de volgende les ga je een HTML pagina in elkaar zetten. We nemen dan de structuur door van een HTML pagina. Het live zetten hiervan moet nu helemaal goed gaan!

Naar les 2