Een menu opslaan in de database

Soms kan het nodig zijn dat je een menu moet maken welke opgeslagen dient te worden in de database. Vaak wordt er dan voor elk niveau een aparte database query gedaan wordt. Wanneer de website groter wordt kan dit uiteindelijk te zwaar worden voor de database. Dit kan ook in één query gedaan worden, wat een stuk minder vergt van de database. Dit wordt bereikt door het gebruik van een array, in combinatie met een functie die voor elk niveau herhaald wordt. Uiteindelijk is het doel om een soort gelijk menu te maken:

  • jQuery Tutorials
    • jQuery Tutorial 1
    • jQuery Tutorial 2
    • jQuery Tutorial 3
  • PHP Tutorials
    • PHP Tutorial 1
    • PHP Tutorial 2
    • PHP Tutorial 3
    • PHP Tutorial 4

Afbeeldingen snijden met jQuery

Wanneer gebruikers foto's kunnen uploaden, kan het soms zijn dat deze foto's maar een bepaald maximaal formaat mogen hebben. Maar hoe los je zoiets op? Een uitkomst hierin biedt de jQuery plugin jcrop. Hiermee kan je de gebruiker een foto laten uitsnijden en deze vervolgens met PHP daadwerkelijk verkleinen. In deze tutorial leg ik uit hoe je dit zelf kunt doen.

Demo

Geen zin om het artikel te lezen:

Maak je eigen Lightbox

De Lightbox werd in eerste instantie vooral gebruikt voor het tonen van afbeeldingen op een manier zonder popups, maar tegenwoordig worden ze zo ongeveer overal voor gebruikt. Ook zijn ze er in verschillende soorten, maten en uitvoeringen. Soms kan het echter zijn dat de beschikbare ligtboxen niet voldoen aan de gestelde eisen. Daarom laat ik zien hoe je zelf een lightbox kunt maken.

De CSS

De lightbox draait vooral op de bijbehorende CSS. Die zorgt voor de opmaak en het bijbehorende effect. Ik gebruik 2 div's: 1 voor de achtergrond zodat deze doorschijnend is, en 1 voor de inhoud van de box. De CSS die daarbij hoort ziet er zo uit:

jQuery image slider

Vaak zie je dit in webwinkels: een slider waarbij uit meerdere afbeeldingen gekozen kan worden, en bij het klikken dat er een grotere foto verschijnt. Dat gaan wij vandaag maken. Hierbij komt ook een stukje CSS aan te pas, er moet namelijk een ruimte gemaakt worden waar de miniatuur afbeeldingen getoond worden, en een waar de grote foto getoond wordt. Het resultaat zal er als volgt uitzien:

Social media buttons

Om je website te (laten) delen op andere website's is het makkelijk om bij een product, artikel of pagina een knop te hebben zodat de bezoeker dit makkelijk kan. Gratis publiciteit is natuurlijk nooit weg, en een plaatsing op een dergelijke website is ook goed voor de score in Google. Daarom zal ik laten zien hoe je een button kunt maken voor Facebook, Twitter en Hyves.

Facebook

Facebook heeft een like button. Deze kun je heel eenvoudig op je eigen website plaatst. Het is enkel een iframe die naar een pagina op Facebook.com staat linkt. Hierdoor hoef je geen code op je eigen website te plaatsen. De code ziet er als volgt uit:

PHP en FTP

Soms kan het nodig zijn dat je door middel van PHP een FTP verbinding maakt. Echter om dit te kunnen doen moet je eerst een en ander uitzoeken. Dat heb ik nu alvast gedaan en hier beschreven.

Verbinding maken

Voordat je commando's op de server kunt uitvoeren is het nodig om verbinding te maken met de server. Dat kan vrij eenvoudig gedaan worden op deze manier:

  1. $server = 'ftp.server.com';
  2. $gebruikersnaam = 'username';
  3. $wachtwoord = 'password';
  4. // Zet de verbinding op. Let op, dit commando moet worden opgeslagen worden in een variabele. Later gaat deze nog nodig zijn.
  5. $conn_id = ftp_connect($server);
  6.  
  7. // Dit is het daadwerkelijke inloggen
  8. $login_result = ftp_login($conn_id, $gebruikersnaam, $wachtwoord);

Wanneer er passive mode gebruikt moet worden om een goede verbinding opzetten, moet de functie ftp_pasv worden aangeroepen:

Is een getal deelbaar?

Situatie

Stel je voor: Je hebt een webwinkel, en een bepaald artikel mag enkel per 3 verkocht worden. Nu is de gebruiker vrij om een getal in te vullen, en dus ook getallen die niet voldoen aan deze eis.

Oplossing

De oplossing is vrij eenvoudig: Maak gebruik van het procent teken:

PHP

  1. $getal = 10;
  2. $deelbaar = 3;
  3.  
  4. if($getal % $deelbaar == 0) {
  5.         echo $getal . ' kan gedeeld worden door ' . $deelbaar;
  6. } else {
  7.         echo 'Dit getaal kan niet gedeel worden door ' . $deelbaar;
  8. }

Dit voorbeeld zal altijd aangeven dat het getal niet deelbaar is.

jQuery voorbeelden

Op het gebied van jQuery zijn er een aantal scripts die vrij veel terug komen. In deze jQuery tutorial zal ik daarom een aantal van deze voorbeelden geven, met bijbehorende code. In deze jQuery tutorial zullen aan bod komen:

Waarde aan dropdown toevoegen met jQuery

In deze jQuery tutorial zal ik proberen uit te leggen hoe je een waarde aan een select element kunt toevoegen. Ik ga hier ook een klein stukje AJAX in verwerken, zodat de toegevoegde waarde ook op de server bekend is, en deze meteen als waarde in het select element ingevuld wordt. Dit heeft als handigheid dat wanneer je tijdens het invullen van een formulier een waarde kan toevoegen zonder het hele formulier te vernieuwen, waardoor je alles weer opnieuw moet invullen. Dit verrijkt dus de gebruikers ervaring van de applicatie. Ik ga hierbij gebruik maken van de ingebouwde AJAX functie, de javascript functie prompt en change.

Element toevoegen aan een dropdown

Het toevoegen van een waarde aan een select element kun je doen door de HTML van het element te bewerken, en hierbij een nieuwe waarde toe te voegen:

Optie toevoegen (kijk na het klikken bij de opties, voorbeeld 6 is toegevoegd)

Grafieken maken met PHP en MySQL

Soms kan het handig zijn om grafieken te maken die worden gegenereerd vanuit de database. In deze PHP tutorial ga ik uitleggen hoe dat bereikt kan worden, met behulp van verschillende hulpmiddelen

PHPGraphLib

In het eerste voorbeeld ga ik gebruik maken van PHPGraphLib. Dit is een gratis bibliotheek voor PHP. Om deze bibliotheek te gebruiken, dien je deze eerst te downloaden en vervolgens weer te uploaden naar je webserver. Vervolgens dien je deze weer in te voegen om gebruik te kunnen maken van de functies. Dat doe je zo:

  1. // Uiteraard dien je grafieken aan te passen wanneer het bestand op jou computer niet zo heet.
  2. include('/grafieken/phpgraphlib.php');

Omdat de bibliotheek een class, dient deze zo aangeroepen te worden:

Inhoud syndiceren