Ga naar hoofdinhoud

Stap 1: Index

Dit is een eenvoudige pagina die dient als startpunt voor dit project. Hier is wat informatie te zien en gebruikers kunnen hier inloggen of een account aanmaken.

Start​

  1. Maak een nieuw bestand index.php
  2. Gebruik Emmet om eenvoudig een HTML boilerplate te genereren door ! te typen en vervolgens Enter.

HTML​

  1. Pas <title> aan.
  2. Voeg toe aan de <body>:
    1. Een <h1> met de naam van je platform.
    2. Een <p> met daarin een <a> voor Inloggen en Aanmelden. De links hoeven nog geen verwijzing te hebben.
    3. Een <h3> met een begroeting.
    4. Een <p> met een korte welkomstekst.

Code​


<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prikbord</title>
</head>
<body>

    <h1>📋 Prikbord</h1>

    <p>
        <a href="">Inloggen</a>
        <a href="">Aanmelden</a>
    </p>

    <h3>Welkom</h3>

    <p>Leuk je te zien op dit nieuwe social media platform</p>

</body>
</html>

PHP​

In dit eerste stukje PHP wordt een tijdsafhankelijke begroeting toegevoegd. Voeg boven je html-code de open- <?php en sluit-tag ?> van php toe.

Code​


<?php

    $uur = date("H");

    if ($uur < 6) {
        $begroeting = "Goedenacht";
    } elseif ($uur < 12) {
        $begroeting = "Goedemorgen";
    } elseif ($uur < 18) {
        $begroeting = "Goedemiddag";
    } else {
        $begroeting = "Goedenavond";
    }

?>

Vervolgens kunnen we de begroeting in <h3> aanpassen.

<h3><?php echo $begroeting; ?></h3>

Begrippen​

begripuitleginfo
$uurIn PHP begint een variabele met het $-teken, gevolgd door de naam van de variabele.
date()De functie date() formatteert een lokale datum en tijd, en geeft de geformatteerde datum als tekenreeks terug.
if...elseDe if...else-instructie voert bepaalde code uit als een voorwaarde waar is, en een andere code als die voorwaarde onwaar is.

Volledige code​

index.php

<?php

    $uur = date("H");

    if ($uur < 6) {
        $begroeting = "Goedenacht";
    } elseif ($uur < 12) {
        $begroeting = "Goedemorgen";
    } elseif ($uur < 18) {
        $begroeting = "Goedemiddag";
    } else {
        $begroeting = "Goedenavond";
    }

?>

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prikbord</title>
</head>
<body>

    <h1>📋 Prikbord</h1>

    <p>
        <a href="">Inloggen</a>
        <a href="">Aanmelden</a>
    </p>

    <h3><?php echo $begroeting; ?></h3>

    <p>Leuk je te zien op dit nieuwe social media platform</p>

</body>
</html>