Game portal setup¶

Inleiding¶

Dit document beschrijft hoe je de gameportal kan opzetten. Dit doe je in drie stappen.
Stap 1: Gitlab fork van de gameportal maken.
Stap 2: De gameportal clone op Oege plaatsen.
Stap 3: Aan de slag met HMTL, PHP en CSS.

Stap 1: Gitlab Fork & Clone¶

Een fork in GitLab maakt een exacte kopie van een bestaande Git-repository, inclusief alle code, branches, tags en commits. Het creëert als het ware een parallelle versie van de oorspronkelijke repository, die losstaat van de originele codebase. Wanneer je een repository forked, kun je deze naar jouw eigen account kopiëren en hier wijzigingen in aanbrengen zonder dat dit invloed heeft op de oorspronkelijke repository.

How to fork¶

1. Ga naar gameportal repository

2. Klik op de knop ‘Fork’ rechtsboven in het scherm.

3. Geef je geforkte repository de naam “gameportal” en potentiele description. Klik daarna op Fork Project.

4. GitLab maakt een kopie van de repository in jouw account. Je wordt nu automatisch doorgestuurd naar de geforkte repository.

5. Clone de geforkte repository naar jouw lokale computer met behulp van Git.

6. Je kan nu in je eigen versie van het project werken.

Stap 2: Oege¶

Gebruik een FPT client zoals Filezilla om het geforkte project op jou eigen oege account te zetten. De root folder moet in de Html folder komen te staan.

!!! Let op dat als je veranderingen maakt aan je project, dan moet je deze bestanden opnieuw op de Oege zetten om de veranderingen door te voeren.

Stap 3: PHP/HTML/CSS¶

In het gameportal project staat het bestand index.php, dit is de hoofdpagina van de website. Zoek in deze file op de variabel $gamePortalName en deze bevat de naam van de game portal, hier kun je je gameportal een nieuwe naam geven.

In de file kan je een \ tag vinden en daar begint de code van je HTML pagina. Dit is een HTML-pagina met PHP-code erin verwerkt. Dat zie je ook op basis van de file extensie (.php). De HTML code is wat de gebruiker uiteindelijk in de browser te zien krijgt.

De HTML-pagina bevat een head-sectie met de meta-informatie voor de pagina, meta-informatie bevat data over de website die niet word weergegeven op de pagina. Uitleg over HTML Head

Er wordt ook een stylesheet gelinkt die de styling van de pagina bepaalt, met het style.css bestand kan de website gestyled worden. Uitleg over CSS styling

De body-sectie van de pagina bevat een h1-kop met de titel van de game portal, die wordt weergegeven met behulp van PHP-code. Uitleg over HTML Body section

Vervolgens is er een foreach-loop in de PHP code waarmee de lijst van games wordt doorgelopen. Voor elke game wordt er een regel weergegeven met de URL van de game landing page en een afbeelding met een link om de game te spelen.

foreach ($hostsLoaded as $gameLandingPages) 
        {
            echo '<br />Game landing page: https://'.$gameLandingPages;
            echo '<br /><a href="https://'.$gameLandingPages.'" alt="Play game at '.$gameLandingPages.'"><img src="https://rooster.hva.nl/style/images/logo-e4cfd2617f690a6be282af83f5ebb9cb.png" /> Click here to play</a>';
            $hostsLoaded[] = $gameLandingPages;
        }