Volledige website Autoverhuur

Voor deze opdracht heb ik een bijna volledige website gemaakt. Inclusief registratie/inlog systeem.

Het resultaat

Home page webpagina

 

Zoals u ziet heeft het een werkende carousel(slideshow), een navigatiebalk, een header en content om te vullen. Natuurlijk is het responsive.

 

Thema

Het thema komt hier duidelijk naar voren: Blauwe en oranje kleuren met een nette ‘look’.

 

Code

Code voor ene deel van de homepage

De website is zoals u ziet met Bootstrap gemaakt. De header en navigatiebalk zijn ingevoegd d.m.v. php. Verder zijn de teksten met simpele HTML, CSS en BT gemaakt.

Bootstrap werkt d.m.v. classes toe te kennen aan delen van de code. Een voorbeeld is de class: ‘img-responsive’. Deze Bootstrap class geeft aan dat de afbeelding mee schaalt met de breedte van het scherm en er dus goed tussen past.

Verder heb ik hier ook een deel ínline’ css gebruikt om het even wat makkelijker te maken om te stylen.

Database connectie in webpagina

Voor een project moesten wij een webpagina maken. Een onderdeel daarvan was om een database connectie te maken en gegevens uit de database te weergeven.

Dit was het resultaat en het doel:

Informatie uit een database

 

Om dit te bereiken was er een connectie nodig en een manier om de gegevens uit de database te weergeven. Hier staat hoe dat werd gedaan in de code:

De code om gegevens uit de database te weergeven op de pagina.

Hoe werkt dit?

Een database connectie wordt gedaan met de talen sql en php. Om php te gebruiken moet je eerst de opening en de sluiting van php typen en dat is: ‘<?php ?>’. Daarin komt alles te staan.

Een $* betekend dat een variabele wordt aangemaakt. Bijvoorbeeld: $query = … . Je kan dan alles aan de variabele toekennen. In dit geval werd de SQL er aan toegekend.

SQL

De code: “SELECT * (all) FROM actie WHERE CURDATE() BETWEEN begindatum AND einddatum LIMIT 1;” betekend simpelweg: Selecteer alles uit de tabel actie waar dit moment tussen de begindatum en de einddatum van de acties ligt (LIMIT 1: Niet meer dan 1).

PHP

Nu dat je de sql hebt gedaan moet je het afmaken met php. De variable $result maakt van de $query een php statement: mysqli_query. Daarna worden de resultaten weergeven met: “if($result)….{…;}.

De database. Zoals je ziet worden de gegevens ervan weergeven.

Zelfgemaakte dropdown

Voor een opdracht waar wij een website moesten maken waar het thema duidelijk naar voren kwam, heb ik voor de mobiele versie van de opdracht, een dropdown als navigatie gemaakt.

Hier een de code van de dropdown.

Aan de rechter kant heb je de HTML (Hypertext-markup-language)-code en aan de linker kant de CSS (Cascading Style Sheet)-code.

HTML

Als eerst worden met de ‘div’ tags afmetingen gemaakt door middel van ‘Bootstrap’. Dan komt de button waar aan wordt gegeven, dat als je erop klikt de ‘dropdown’ naar beneden gaat.

Dan komt de dropdown. Het wordt geopend met de ‘<ul>’ tag waarna alle links erin worden geplaatst met de ‘<li>’ en de ‘<a>’ tags.

CSS

Aan de linker kant worden de ‘looks’ van de dropdown gemaakt. Alle classes worden aangegevn met: ‘.class’ en alle id’s met: ‘#id’.

Met ‘paddings’ en ‘margins’ worden de ruimtes binnen en buiten divs groter of kleiner gemaakt. Dan heb je natuurlijk nog ‘width’ en ‘height’ om de breedte en de lengte van divs of elements aan te passen.

Verder heb je nog dingen als: ‘color’, ‘(background-)image’, ‘text(-…)’, en andere om verdere dingen te stylen zoals de kleur, afbeeldingen en groottes.

Het resultaat

Het resultaat van de bovenstaande code.

Website voor beelding.nl

De HTML code voor de website: Beelding.nl

Deze website is gemaakt met vooral Bootstrap.

De hele pagina staat in de ‘div’class: Page-wrap. Daarna komen de basis Bootstrap classes zoals: ‘container’, ‘row’ en col-*-*.

de container zet de content in het midden met padding en de col-*-* geeft aan de breedte van een div in de 100% breedte van een ‘row’.

Daarna komt er een simpele <p> tag voor de tekst.

 

Dit is het resultaat met css toegevoegd:

 

De Homepage van een website die wij hebben gemaakt voor de site: Beelding.nl .

Mockup van de website van energydrink “Charge!”

Hier is een simpele mockup voor een pagina die ik heb gemaakt.
Het thema van rood en zwart komt duidelijk naar voren.

Het logo en de dropdown is voor de mobiele versie van de website.
De tekst komt uit een database.

Dit is het resultaat:

Mockup van de homepage voor de app van energy drink: “Charge!”

Mockup van een website voor een restaurant

Voor een project die wij moesten maken voor een restaurant, heb ik deze mockup gemaakt voor de desktop versie van de ‘Contact’ pagina.

Thema/stijl

Het doel voor de thema/stijl is een gezellige uitstraling met warme kleuren. Om dat te bereiken zijn de kleuren: Rood, Groen en geel de basis met een mooie achtergrond om dat gevoel te weergeven.

Hier het resultaat

Contact pagina mockup van de webpagina van het restaurant “Chiliies Galore