Een laravel project maken (de basis)

Beste mensen,

Voor mijzelf heb ik een handleiding geschreven hoe ik een (ontzettend simpel) Laravel project kan opzetten en op een Linux (Ubuntu) VPS kan plaatsen. Het gaat hierbij alleen om 2 pagina’s en een werkende databaseconnectie. De rest is goed bij te leren met de bestaande Laravel documentatie. Ik ervaarde dat er weinig volledige (en up-to-date) tutorials zijn m.b.t. het plaatsen/deployen van een Laravel project op een VPS vandaar o.a. ook dat ik deze zelf heb gemaakt.

Het grootste deel m.b.t. het maken van de Laravel applicatie zelf heb ik in deze serie geleerd:
Voor de rest veel in Google zoeken naar informatie en antwoorden natuurlijk.

Deze bovenstaande tutorial is wat verouderd (3 jaar oud), soms niet volledig, ik maak o.a. daarom voor mijzelf een tutorial die ik graag met de rest wil delen (ook mensen buiten FOK!) ook om wat terug te geven. Ik gebruik geen spoilers, als mensen spoilers willen lezen moeten ze zich registreren, dat gun ik FOK! best wel maar alle informatie die ik heb gekregen was ook zonder te registreren dus op die manier geef ik graag ook wat terug.

Dit gedeelte gaat over het maken van een Laravel project. Als je graag wil weten hoe je een Laravel project op een VPS kan zetten dan kan je hier kijken: DIG / Handleiding deployen van Laravel (7.*) project naar VPS (Ubuntu 18.04)

Dit topic gaat over het maken van een (basis) Laravel applicatie

1. Het Laravel project

Software installeren
Er zijn meerdere wegen naar Rome, Linux of Mac i.p.v. Windows, LAMP i.p.v. LEMP etc. Ik richt me op Windows voor mijn computer, WAMP 64 bit voor op mijn computer en Ubuntu 18.04 voor op mijn VPS. De VPS huur ik via Strato, maar dat hoort niet zoveel uit te maken, als je eenmaal ingelogd bent op je server hoor je alles uit te kunnen voeren ongeacht je provider.

Wat ik gebruik en wat je dus kan installeren is het volgende (het moment van schrijven 2-7-2020):
1. Windows (heb je waarschijnlijk al).

2. Wampserver 3.2.0 64 bit (op het moment hier te downloaden: https://sourceforge.net/projects/wampserver/).
Belangrijkste opmerkingen: Skype en IIS moeten gesloten zijn. Verder moet je de volgende packages hebben geinstalleerd: VC9, VC10, VC11, VC13, VC14 and VC15. Deze informatie (inclusief downloadlinks naar die packages) krijg je ook te zien als je de installatiewizard van WAMP uitvoert.
Wampserver gebruikt op dit moment Apache 2.4.41, PHP versie 7.3.12 en Mysql versie 8.0.18.

3. Visual studio code (https://code.visualstudio.com/download) (heel simpel, je kan overal gewoon ‘next’ klikken eigenlijk).

4. Composer (https://getcomposer.org/download/)
Denk er bij het installeren van Composer aan om bij het installatieproces te verwijzen naar de juiste PHP versie. Bij mij stond deze op C:\wamp64\bin\php5.6.40\php.exe maar dit wil je veranderen naar de meest recente stabiele PHP versie die WAMP heeft toegevoegd (in dit geval 7.3.12). Als Composer na installatie niet direct werkt meld je dan even af en weer aan binnen Windows. Als dat niet werkt start dan je computer opnieuw op.

5. Git en GitBash (https://git-scm.com/downloads) (2.27.0 64 bit op dit moment)
bij het installeren kies je bij ‘Choosing the default editor used by Git’ voor ‘Use Visual Studio Code as Git’s default editor’. En bij ‘Adjusting’ your PATH environment’ voor ‘Use Git and optional Unix tools from the Command Prompt’.

6. Putty installeren (https://www.putty.org/). (ook simpel, ook gewoon overal ‘next’ kiezen).

In Visual Studio Code (VSC) gaan we ons project opzetten en aanpassen. Je kan hiervoor bijvoorbeeld ook NetBeans gebruiken maar deze tutorial is gericht op VSC.

We gaan er nu eerst voor zorgen dat de terminal van VSC GitBash gebruikt.

Git / GitBash installeren
Ga naar File -> Preferences -> Settings – en dan zoeken op ‘terminal integrated shell windows’.
Je krijgt dan ergens iets te zien zoals het volgende:
‘Terminal > Integrated > Shell: Windows’.
Klik daaronder op ‘Edit in settings.json’.
Je ziet nu: “terminal.integrated.shell.windows”: “”
Je moet daarvan maken (normaal gesproken, maar natuurlijk afhankelijk waar je Git hebt geinstalleerd): “terminal.integrated.shell.windows”: “C:\\Program Files\\Git\\bin\\bash.exe” en opslaan.
Denk om de dubbele \\, deze zijn noodzakelijk.
Nu moet je VSC afsluiten en weer opstarten.
Nu ga je naar: View -> Terminal - en nu start GitBash als het goed is op.
Bijgevoegd een afbeelding met in het groen de belangrijkste zaken die je hoort te zien.



Nu gaan we Laravel installeren.

Een standaard Laravel applicatie installeren
daarvoor moet je (we zitten nu in de GitBash terminal binnen VSC) in de www map van WAMP zitten.
Je moet waarschijnlijk de eerste keer het volgende doen:

quote:

cd .. (enter)
cd .. (enter)
cd wamp64/www (enter)
composer create-project laravel/laravel naamvanjeproject

Dit kan even duren.
Composer download nu namelijk automatisch de benodigde onderdelen voor de Laravel applicatie.

Als dat klaar is ga je in VSC naar File -> Open Folder... -> C:\wamp64\www\naamvanjeproject

Gefeliciteerd! http://localhost/naamvanjeproject/public/ toont op dit moment als het goed is al de standaard Laravel applicatie (vergeet niet WAMP op te starten).



We willen niet telkens localhost/naamvanjeproject/public hoeven in te vullen dus we gaan ervoor zorgen dat Apache naar Localhost verwijst.

Een virtuele host toevoegen
Ga in Windowsverkenner naar C:\wamp64\bin\apache\apache2.4.41\conf\extra\httpd-vhosts.conf

Shortcut via WAMP:



Voeg het volgende toe:

quote:

<VirtualHost *:80>
ServerName naamvanjeproject
DocumentRoot "${INSTALL_DIR}/www/naamvanjeproject/public"
<Directory "${INSTALL_DIR}/www/">
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require local
</Directory>
</VirtualHost>

Restart daarna de services van WAMP (het gaat om Apache) en als je nu naar localhost gaat (dus zonder naamvanjeproject/public) zie je dat daar de Laravel applicatie nu zichtbaar is.

Nu gaan we een kleine applicatie maken. Een indexpagina, een about pagina en in de about pagina wordt iets kleins uit de database gehaald (het gaat erom dat we een werkende database verbinding hebben).

Het Laravel project uitbreiden met code
In VSC binnen de mappenstructuur: resources -> views zie je welcome.blade.php staan.
Maak daar een map aan genaamd pages en daarbinnen een bestand aan genaamd about.blade.php
vul deze met de HTML hieronder en sla het op.

quote:

<h3>Dit is de about pagina</h3>
<a href="/">Naar de index pagina</a>

Op dezelfde manier gaan we index.blade.php aanmaken, vul deze met de HTML hieronder en sla het op.

quote:

<h3>Dit is de index pagina</h3>
<a href="/about">Naar de about pagina</a>

Nu gaan we naar de terminal/GitBash en voeren we het volgende commando uit:

quote:

php artisan make:controller PagesController

Ga nu naar App -> Http ->Controllers ->PagesController.php

Vanuit de controller wil je doorsturen naar een specifieke view. Voeg het volgende toe aan deze controller (binnen de class) en sla het op:

quote:

public function index() { return view('pages.index'); }
public function about() { return view('pages.about'); }

Nu gaan we de routes aanpassen zodat naar deze controller (en functies) verwezen wordt als iemand naar een bepaald adres gaat.

Ga naar routes -> web.php
Verwijder de route die daar staat:

quote:

Route::get('/', function () {
return view('welcome');
} ) ;

De route naar de view welcome.blade.php bestaat nu niet meer dus als je nu naar localhost gaat krijg je logischerwijs een 404 error.
Plaats hiervoor in de plaats nu het volgende:

quote:

Route::get('/', 'PagesController@index');
Route::get('/about', 'PagesController@about');

Localhost (/) gaat nu naar de PagesController, zoekt daar naar een functie genaamd index (die we eerder hebben gemaakt) en die functie verwees naar de index view. Nu krijgen we dus onze zelfgemaakte ‘website’ te zien.



Nu hebben we een supersimpele Laravel applicatie draaiende. Als je wil leren hoe je een nette navigatie, paginatie, gebruikersrechten, inloggen etc. maakt dan zijn daar genoeg handleidingen voor online. Ik ga alleen nog even een databaseconnectie opzetten.

De database gebruiken
We gaan nu eerst een model aanmaken met het volgende commando:

quote:

php artisan make:model Page -m

Het model wordt aangemaakt en de -m maakt ook een migratie aan (die migratie gaat de benodigde tabel straks automatisch aanmaken in de database).

Het model is te vinden onder App -> Http -> Page.php
De migratie onder: database -> migrations

Nu kan je het volgende toevoegen binnen de up functie van de net aangemaakte migratie:

quote:

$table->string('tekst');

Hiermee maken we, als we de migratie draaien, een kolom aan genaamd tekst waar we wat tekst in gaan plaatsen om vervolgens te tonen op de about pagina.

Nu gaan we een database aanmaken
We gaan naar localhost/phpmyadmin loggen in als root met een leeg wachtwoord en maken een database aan.



Pas nu het .env bestand aan zodat Laravel connectie kan maken met de door jou aangemaakte database (te vinden bij de bestanden onderaan de mappenstructuur):
DB_DATABASE= naamvanjedatabase
DB_USERNAME= root
DB_PASSWORD=

Nu hebben we de database aangemaakt en Laravel vertelt hoe hij met de database verbinding kan maken. Nu gaan we de database vullen. We gaan het volgende commando uitvoeren om de door ons gemaakte migratie (de pages tabel met daarin de kolom ‘tekst’) en andere migraties die klaar staan in de migrations map uit te voeren.

quote:

php artisan migrate

Nu zijn de tabellen aangemaakt, ook de pages tabel met de kolom ‘tekst’ zoals je kan zien in phpmyadmin.

Nu gaan we deze pages tabel vullen met 1 record:

quote:

php artisan tinker
$page = new App\Page();
$page->tekst = 'Dit is de tekst voor de about pagina rechtstreeks uit de database';
$page->save();

Als je nu weer naar de tabel gaat zal je zien dat deze nu gevuld is met 1 regel.

Nu gaan we about.blade.php aanpassen. Niet al deze code is nodig natuurlijk maar dan heb je direct een extra idee hoe Laravel werkt.

quote:

<h3>Dit is de about pagina</h3>
<a href="/">Naar de index pagina</a>

@IF (count($pages) > 0)

@foreach($pages as $page)
<p>{{$page->tekst}}</p>
@endforeach
@Else
<h3>Dit ging niet helemaal goed</h3>
@endif

Nu hebben we de view aangepast, we willen daar de tekst tonen uit de database dus die moeten we doorsturen vanuit de PagesController.

We gaan naar de PagesController en passen de about functie aan naar het volgende:

quote:

Public function about() {
$pages = Page::all();
return view('pages.about')->with('pages', $pages); }

Daarnaast moeten we aangeven dat we de het model voor de pages willen gebruiken, voeg onder ‘use Illuminate\Http\Request;’ het volgende toe:

quote:

use App\Page;

Nu hebben we een basis website met een werkende database connectie. Als je naar de about pagina gaat zie je nu ook de tekst die in de database opgeslagen is.



Nu gaan we onze VPS in orde maken zodat we daar de Laravel Applicatie kunnen draaien.

Hier is de tutorial daarvoor: DIG / Handleiding deployen van Laravel (7.*) project naar VPS (Ubuntu 18.04)

[ Bericht 2% gewijzigd door #ANONIEM op 02-07-2020 18:19:37 ]