Bootstrap 3 met LESS

Dat kan zeker anders! Gebruik de LESS bestanden van Bootstrap! LESS moet wél ge-compiled worden naar gewoon CSS, hiervoor zijn tal van plugins te vinden voor populaire systemen als WordPress en Magento, maar nog handiger is Grunt of Gulp! Alleen door LESS te gebruiken ben je er natuurlijk niet, daarvoor zijn er in LESS mixins! In de Bootstrap documentatie zie je op meerdere plekken voorbeelden staan met “Usage as a Mixin” als commentaar erbij. Hiermee kan je classes aan selectors hangen.

Bootstrap classes aan CSS selectors

Wanneer je een afbeelding ronde hoeken wilt geven heeft Bootstrap hier de “img-rounded” class voor, in de documentatie staat dat deze als volgt gebruikt kan worden:

<img src="..." alt="..." class="img-rounded">

Wanneer je alle afbeeldingen op je website ronde hoeken wilt geven, kan dit middels LESS i.c.m. Bootstrap als volgt gedaan worden:

img {
	.img-rounded();
}

Op die manier zijn de classes in de HTML niet nodig!

Bootstrap Grid met mixins

Niet alleen de “eenvoudige” dingen uit Bootstrap kunnen op deze manier gebruikt worden, maar ook bijvoorbeeld het Bootstrap Grid! Een stukje HTML als voorbeeld:

<div class="container">
	<div class="menu"></div>
	<div class="content"></div>
</div>

Wanneer je van de container een row wilt maken en van menu en content een kolom dan kan je dit als volgt doen:

.container {
	.make-row();

	.menu {
		.make-md-column(3);
	}

	.content {
		.make-md-column(9);
	}
}

Een heel mooi voorbeeld waar dit gebruikt wordt is het Magento Boilerplate!

Het bericht Geavanceerd Bootstrap 3 gebruik verscheen eerst op Roy Duineveld.

HTML aanpassen

Voeg aan elke “accordion-heading” een afbeelding van een pijltje toe met een “pull-left”.

<div class="accordion-heading">
	<h2><i class="icon-chevron-down pull-left"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#wizard" href="#brand">Merk</a></h2>
</div>

CSS toevoegen

Zoals hierboven in de HTML te zien is heb ik heading 2 tags gebruikt, hier moest de margin voor het icoon dan ook op aangepast worden:

.accordion .icon-chevron-down {
	margin: 9px 10px 0 15px;
}

Javascript toevoegen

Om het allemaal goed te laten functioneren heb ik een stukje Javascript toegevoegd welke inhaakt op de Javascript van de collapse. Zoals te zien wordt hier jQuery bij gebruikt.

$('#wizard').on('show', function (e) {
	$('.accordion .icon-chevron-down').removeClass('hide');
	$(e.target).prev().children().children('.icon-chevron-down').addClass('hide');
});

$('#wizard').on('hide', function (e) {
	$('.accordion .icon-chevron-down').removeClass('hide');
});

Mocht iemand zich geroepen voelen dit te melden bij Twitter Boostrap als toevoeging, ga je gang!

Het bericht Pijltjes op de collapse / accordion van Twitter Bootstrap verscheen eerst op Roy Duineveld.

• Zowel de hoogte als de breedte in kunnen stellen
• De miniatuur dient altijd gevuld te zijn, wanneer de verhouding dus niet gelijk is dient er wat afgesneden te worden
• Gemakkelijk in gebruik, waaronder de afbeelding extensie niet op te hoeven geven
• Eventueel meerdere formaten miniaturen te maken, dus een bestandsnaam met de grootte erin zodat deze niet overschreven worden

Dit heeft het volgende resultaat opgeleverd:

<?php
/**
 * Create thumbnail (resize and/or crop image)
 * @param  string  $image  Source image
 * @param  integer $width  Thumbnail width
 * @param  integer $height Thumbnail height
 * @return string          The generated thumbnail
 */
function thumb($image,$width = 200,$height = 200)
{
	// Image set?
	if($image)
	{
		// Get the file information
		$fileinfo = pathinfo($image);

		// Set the thumbnail location
		$image_thumb = $fileinfo['dirname'] . '/thumb/' . $width . '-' . $fileinfo['basename'];

		// Thumbnail already exists?
		if(!file_exists($image_thumb))
		{
			// Get source as image
			$image = imagecreatefromstring(file_get_contents($image));

			// Set new size
			$thumb_width 		= $width;
			$thumb_height 		= $height;

			// Get image size
			$width 				= imagesx($image);
			$height 			= imagesy($image);

			// Calculate ratio
			$original_aspect 	= $width / $height;
			$thumb_aspect 		= $thumb_width / $thumb_height;

			// Image wider than new size?
			if ( $original_aspect >= $thumb_aspect )
			{
				$new_height 	= $thumb_height;
				$new_width 		= $width / ($height / $thumb_height);
			}
			// New size wider than the image
			else
			{
				$new_width 		= $thumb_width;
				$new_height 	= $height / ($width / $thumb_width);
			}

			// Create new image
			$thumb = imagecreatetruecolor( $thumb_width, $thumb_height );

			// Resize and crop
			imagecopyresampled($thumb,
									$image,
									0 - ($new_width - $thumb_width) / 2, // Center the image horizontally
									0 - ($new_height - $thumb_height) / 2, // Center the image vertically
									0, 0,
									$new_width, $new_height,
									$width, $height);

			// Create and return image
			imagejpeg($thumb,$image_thumb);

			// Destroy
			imagedestroy($thumb);
		}

		// Return the thumbnail
		return $image_thumb;
	}
	else
	{
		// Set a placeholder
		return 'http://placehold.it/'.$width.'x'.$height;
	}
}
?>

Tevens wordt er al gecontroleerd of de miniatuur al gemaakt is, hierdoor kan deze eventueel direct aangesproken worden door de functie te koppelen aan GET variabelen:

<?php
if($_GET['thumb'])
{
	echo thumb($_GET['thumb'],200,200);
}
?>

Wat vervolgens op de volgende manier gebruikt kan worden:

<img src="file.php?thumb=source-image.jpg" alt="">

Deze functie wordt onder andere gebruikt in een advertentie systeem en op Fastr, een nieuw platform voor autoliefhebbers!

Het bericht Gemakkelijk miniaturen maken met GD Library verscheen eerst op Roy Duineveld.

Beginnen

Om dit voor elkaar te krijgen kan je gebruik maken van Google API’s, waaronder Maps en Geolocation. Om hiervan gebruik te maken dien je eerst toegang te krijgen tot deze API’s. Ga hiervoor naar Google API’s Console. Ga vervolgens naar “services” in het menu en zet de “Google Maps API v3” aan. Hierna ga je naar “API Access” in het menu en daar is de “API key” te vinden om toegang te krijgen. Eventueel kan je op “Edit allowed referers” klikken en hierna je domeinnaam invullen, op die manier is de betreffende API key enkel te gebruiken op die domeinnaam.

Google Geolocation

Voordat we alle klanten op de kaart kunnen zetten hebben we de coördinaten nodig van het adres. Hiervoor dienen we eerst verbinding te maken met de database waar de klanten in staan, vervolgens kunnen we één voor één de coördinaten opvragen. Maar zodra we deze hebben is het wel zo handig deze ook op te slaan! Maak twee nieuwe kolommen aan in het klanten tabel: “lat” en “lng”. Eventueel kan je als type een decimaal instellen. Ik heb voor simpelweg een “varchar” veld gekozen. Hierna kunnen we bijvoorbeeld het volgende stukje code gebruiken:

<?php
// Hier uiteraard eerst een verbinding maken met de database

// Alle klanten ophalen welke nog géén coördinaten hebben
$query = mysqli_query('SELECT * FROM klanten WHERE lat=0 OR lng=0');

// Door alle opgehaalde klanten lopen
while($row = mysqli_fetch_assoc($query))
{
	// De URL maken met het adres, postcode en de woonplaats
	// van de klant om informatie over op te halen
	$url = 'http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($row['adres'].' '.$row['postcode'].' '.$row['plaats']).'&sensor=false&language=nl&region=nl';

	// Het resultaat ophalen
	if($result = file_get_contents($url))
	{
		// Het resultaat is JSON, zodoende nog even decoderen
		$result = json_decode($result);

		// Kijken of het resultaat goed is
		if($result->status == 'OK')
		{
			// De locatie uit het resultaat ophalen
			$location = $result->results[0]->geometry->location;

			// De klant gegevens updaten met de coördinaten
			mysqli_query('UPDATE klanten SET lat="'.secure_in($location->lat).'", lng="'.secure_in($location->lng).'" WHERE id='.$row['id']);
		}
	}
}
?>

Door het draaien van dit stukje code worden dus de coördinaten aan de klant regels toegevoegd. In mijn geval moest ik dit script een aantal keren draaien voordat alle klanten de coördinaten hadden. Waarschijnlijk door limieten van deze API van Google. Eventueel kan je experimenteren met de sleep functie, wellicht dat er wat tijd tussen een verzoek moet zitten.

Google Maps

Nu de coördinaten bekend zijn kunnen deze geplaatst worden op een kaart! Hiervoor dient wél eerst de Maps API aangesproken te worden, zet hiervoor de volgende regel met je eigen API key in de “head”:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=HIER-JE-API-KEY&sensor=false&language=nl&region=nl"></script>

En voeg vervolgens een div toe aan de “body” zoals ook gedaan wordt in de Maps API documentatie:

<div id="map-canvas"></div>

Hierna openen we een script tag en kunnen we aan de gang! Eerst maar de Nederlandse kaart voor ons krijgen:

// Nieuwe cq mooiere visuele weergave gebruiken
google.maps.visualRefresh = true;

// Functie die aangesproken wordt zodra de pagina geladen is
function initialize()
{
	// Kaart opties
	var mapOptions = {
		center: new google.maps.LatLng(52.23, 4.55), // Coördinaten van centraal Nederland
		zoom: 8, // Inzoomen zodat Nederland goed zichtbaar is
		mapTypeId: google.maps.MapTypeId.ROADMAP // De wegenkaart gebruiken
	};

	// Kaart laden in div met het ID map-canvas
	var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
}

// Zodra de pagina is geladen de initialize functie aanspreken
google.maps.event.addDomListener(window, 'load', initialize);

Om de klanten op de kaart weer te geven dienen we deze eerst op te halen:

<?php
// Alle klanten ophalen
$query = mysql_query('SELECT * FROM klanten');

// Door alle klanten lopen
while($row = mysql_fetch_assoc($query))
{
	// Een array opbouwen met de klant naam en coördinaten
	// (welke nog even van een komma naar een punt veranderd worden)
	$locations[] = '["'.$row['naam'].'","'.str_replace(',','.',$row['lat']).'","'.str_replace(',','.',$row['lng']).'"]';
}
?>

// De array met gegevens in Javascript
var locations = [
	<?=implode(',',$locations); // De in PHP gemaakte array samenvoegen tot een regel gescheiden door komma's ?>
];

Waarna we een nieuwe functie kunnen maken om de klanten op de kaart te zetten:

function setMarkers(map,locations)
{
	// De afbeelding voor de klanten op de kaart
	var image = 'http://icons.iconarchive.com/icons/icons-land/vista-people/24/Office-Customer-Male-Light-icon.png';

	// Door alle klanten lopen
	for (var i = 0; i < locations.length; i++)
	{
		// De coördinaten ophalen
		var loc = locations[i];
		var myLatLng = new google.maps.LatLng(loc[1], loc[2]);

		// De "marker" plaatsen
		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			icon: image,
			title: loc[0]
		});
	}
}

Het enige wat er nu nog moet gebeuren is deze functie aanspreken en het allemaal samenvoegen, met als resultaat:

<?php
// Alle klanten ophalen
$query = mysql_query('SELECT * FROM klanten');

// Door alle klanten lopen
while($row = mysql_fetch_assoc($query))
{
	// Een array opbouwen met de klant naam en coördinaten
	// (welke nog even van een komma naar een punt veranderd worden)
	$locations[] = '["'.$row['naam'].'","'.str_replace(',','.',$row['lat']).'","'.str_replace(',','.',$row['lng']).'"]';
}
?>

// De array met gegevens in Javascript
var locations = [
	<?=implode(',',$locations); // De in PHP gemaakte array samenvoegen tot een regel gescheiden door komma's ?>
];

// Nieuwe cq mooiere visuele weergave gebruiken
google.maps.visualRefresh = true;

// Functie die aangesproken wordt zodra de pagina geladen is
function initialize()
{
	// Kaart opties
	var mapOptions = {
		center: new google.maps.LatLng(52.23, 4.55), // Coördinaten van centraal Nederland
		zoom: 8, // Inzoomen zodat Nederland goed zichtbaar is
		mapTypeId: google.maps.MapTypeId.ROADMAP // De wegenkaart gebruiken
	};

	// Kaart laden in div met het ID map-canvas
	var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

	// De "markers" plaatsen
	setMarkers(map,locations);
}

// Functie die de "markers" plaatst op de kaart
function setMarkers(map,locations)
{
	// De afbeelding voor de klanten op de kaart
	var image = 'http://icons.iconarchive.com/icons/icons-land/vista-people/24/Office-Customer-Male-Light-icon.png';

	// Door alle klanten lopen
	for (var i = 0; i < locations.length; i++)
	{
		// De coördinaten ophalen
		var loc = locations[i];
		var myLatLng = new google.maps.LatLng(loc[1], loc[2]);

		// De "marker" plaatsen
		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			icon: image,
			title: loc[0]
		});
	}
}

// Zodra de pagina is geladen de initialize functie aanspreken
google.maps.event.addDomListener(window, 'load', initialize);

Dat is toch stukken leuker dan een lijst met plaatsnamen! Uiteraard is het aan alle kanten uit te breiden, voor inspiratie: bekijk de Maps API documentatie eens!

Het bericht Klanten in kaart brengen met Google Geolocation en Maps API verscheen eerst op Roy Duineveld.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// De controller welke de controller van CodeIgniter uitbreid
class Formulier extends CI_Controller
{
	// De index functie welke als eerst aangesproken wordt
	// wanneer de controller geladen is
	public function index()
	{
		// De library laden zodat deze gebruikt kan worden
		// Eventueel ook automatisch te laden via autoload.php
		$this->load->library('form_validation');

		// De p-tags verwijderen rondom validatie foutmeldingen
		// Normaal is dit: <p>Foutmelding...</p>
		$this->form_validation->set_error_delimiters('', '');

		// Regels instellen voor ingevulde velden
		// De eerste waarde is de "name" van de input
		// De tweede waarde is de volledige naam van het veld
		// De derde waarde zijn de validatie regels:
		// - required = Verplicht in te vullen
		// - max_length[255] = Maximaal 255 karakters lang
		// - valid_email = Een geldig email adres
		// - trim = De PHP trim functie
		$this->form_validation->set_rules('name', 'Naam', 'required|max_length[255]|trim');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email|max_length[255]|trim');

		// Is het formulier verstuurd en is de validatie geslaagd?
		if( $this->form_validation->run()  )
		{
			// Ja!
			// Doe iets met de waardes,
			// opslaan in een database bijvoorbeeld
		}
		else
		{
			// Nee!
			// Het formulier weergeven
			$this->load->view('header');
			$this->load->view('formulier');
			$this->load->view('footer');
		}
	}
}

De “header” en “footer” view laten we even achterwege, door naar het formulier! Om de eventuele foutmeldingen weer te geven is de validation_errors functie, maar deze set alle foutmeldingen onder elkaar. Bij een mooi formulier ziet het er stukken beter uit als achter het veld een eventuele foutmelding komt te staan. Zie ook de voorbeelden van Twitter Bootstrap (vrij onderaan, je kan beter eerst naar buttons gaan en dan naar boven scrollen). Om dit voor elkaar te krijgen is er de form_error functie. Deze in combinatie met de set_value functie maakt het af. Deze laatste zorgt er namelijk voor dat de ingevulde waardes blijven, wanneer de validatie mislukt is, na het versturen van het formulier. Dit bij elkaar gestopt resulteert in het volgende:

<h1>Gebruiker <?=(isset($id) ? 'bewerken' : 'toevoegen');?></h1>
<hr>
<?=form_open('',array('class' => 'form-horizontal'));?>
	<div class="control-group<?=form_error('name') ? ' error' : '';?>">
		<label class="control-label" for="name">Naam</label>
		<div class="controls">
			<input type="text" id="name" name="name" placeholder="Naam" value="<?=set_value('name',(isset($name) ? $name : '')); ?>">
			<span class="help-inline"><?=form_error('name'); ?></span>
		</div>
	</div>
	<div class="control-group<?=form_error('email') ? ' error' : '';?>">
		<label class="control-label" for="email">Email</label>
		<div class="controls">
			<input type="email" id="email" name="email" placeholder="Email adres" value="<?=set_value('email',(isset($email) ? $email : '')); ?>">
			<span class="help-inline"><?=form_error('email'); ?></span>
		</div>
	</div>
	<div class="control-group">
		<div class="controls">
			<button type="submit" class="btn btn-success"><i class="icon-ok icon-white"></i> Opslaan</button>
		</div>
	</div>
</form>

Eén ding heb ik nog niet uitgelegd! Programmeren volgens DRY houd dus ook géén dubbele formulieren in. Vandaar de isset functies. Het formulier om iets toe te voegen en iets te bewerken kan dus samengevoegd worden. Wanneer dit formulier vanuit de controller geladen wordt zijn er geen waardes ingevuld. Willen we deze wel ingevuld hebben; dienen we deze enkel door te geven. De aangevulde en iets bewerkte controller:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// De controller welke de controller van CodeIgniter uitbreid
class Formulier extends CI_Controller
{
	// De "constructor", deze wordt altijd voor de losse functies uitgevoerd
	public function __construct()
	{
		// Zorgen dat de "constructor" van de CI_Controller eerst uitgevoerd wordt
		parent::__construct();

		// De library laden zodat deze gebruikt kan worden
		// Eventueel ook automatisch te laden via autoload.php
		$this->load->library('form_validation');

		// De p-tags verwijderen rondom validatie foutmeldingen
		// Normaal is dit: <p>Foutmelding...</p>
		$this->form_validation->set_error_delimiters('', '');

		// Regels instellen voor ingevulde velden
		// De eerste waarde is de "name" van de input
		// De tweede waarde is de volledige naam van het veld
		// De derde waarde zijn de validatie regels:
		// - required = Verplicht in te vullen
		// - max_length[255] = Maximaal 255 karakters lang
		// - valid_email = Een geldig email adres
		// - trim = De PHP trim functie
		$this->form_validation->set_rules('name', 'Naam', 'required|max_length[255]|trim');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email|max_length[255]|trim');
	}

	// De index functie welke als eerst aangesproken wordt
	// wanneer de controller geladen is, dus:
	// http://website.nl/formulier
	public function index()
	{
		// Is het formulier verstuurd en is de validatie geslaagd?
		if( $this->form_validation->run()  )
		{
			// Ja! Opslaan in de database
			$this->db->insert('gebruikers',$this->input->post());

			// Doorsturen naar de begin pagina
			redirect( site_url() );
		}
		else
		{
			// Nee! Het formulier weergeven
			$this->load->view('header');
			$this->load->view('formulier');
			$this->load->view('footer');
		}
	}

	// De bijwerken functie
	// http://website.nl/formulier/edit/1
	public function edit($id = 0)
	{
		// Gegevens uit de database halen
		$data = $this->db->get_where('gebruikers',array('id' => $id))->row();

		// Niets gevonden in de database?
		if(empty($data))
		{
			// Foutmelding weergeven
			show_404();
		}

		// Is het formulier verstuurd en is de validatie geslaagd?
		if( $this->form_validation->run()  )
		{
			// Ja! Bewerken in de database
			$this->db->where('id',$id);
			$this->db->update('gebruikers',$this->input->post());

			// Doorsturen naar de begin pagina
			redirect( site_url() );
		}
		else
		{
			// Nee! Het formulier weergeven
			// Deze keer de waardes uit de database meegeven
			$this->load->view('header');
			$this->load->view('formulier',$data);
			$this->load->view('footer');
		}
	}
}

Het bericht Twitter Bootstrap en CodeIgniter’s form validation verscheen eerst op Roy Duineveld.

• Formulier middels Ajax verzenden, zodat de pagina niet opnieuw geladen hoeft te worden
• De waardes middels Ajax opslaan en opnieuw inladen
• De gegevens lokaal opslaan, dit voor het verzenden

Ik heb recent gekozen voor de laatste optie. Voordat ik de oplossing hiervoor laat zien, eerst wat materiaal om mee te werken. Laten we een eenvoudig formulier nemen:

<form action="" method="POST">
	<table>
		<tr id="eerste-regel">
			<td><input type="text" name="name[]" placeholder="Naam..."></td>
			<td><input type="text" name="number[]" placeholder="Nummer..."></td>
		</tr>
	</table>
	<a href="#" id="regel-toevoegen">Regel toevoegen</a> <input type="submit" value="Verzenden!">
</form>

Het volgende stukje Javascript in samenwerking met jQuery zorgt ervoor dat wanneer er op “Regel toevoegen” geklikt wordt er een nieuwe regel bij komt:

// Regel toevoegen geklikt?
$('#regel-toevoegen').click(function()
{
	// Eerste regel ophalen
	var regel = $('#eerste-regel').clone();

	// ID verwijderen
	regel.removeAttr('id');

	// Ingevulde waardes verwijderen
	regel.find('input').val('');

	// Nieuwe regel toevoegen en het ID en de ingevulde waardes verwijderen
	$('table').append( regel );

	// False terug sturen zodat de pagina niet verspringt
	return false;
});

Hier kunnen we op verder bouwen! Want wanneer je meerdere regels toevoegt, deze invult en na het klikken op “Verzenden!” terug gaat; is al je kostbare werk verloren gegaan. Om de gegevens voordat deze verzonden worden op te slaan, dienen we dit af te vangen waarna we deze gestructureerd op kunnen slaan. Zie het volgende stukje code:

// Form versturen?
$('form').submit(function()
{
	// Object met array's maken
	var array           = {};
	array['name']       = [];
	array['number']		= [];
	array['counter']    = 0;

	// Door alle tabel regels loopen
	$('tr').each(function()
	{
		array['name'].push( $(this).find('input[name="name[]"]').val() );
		array['number'].push( $(this).find('input[name="number[]"]').val() );
		array['counter']++;
	});

	// Opslaan in session storage
	sessionStorage.setItem('input', JSON.stringify(array));
});

Eerst vangen we de “submit” af, hierna bouwen we een object op met array’s gevolgd door alle ingevulde waardes hierin te zetten. Tevens draait er een tellertje mee om het aantal velden te bepalen. Als laatste worden de gegevens opgeslagen in “Session Storage”. In cookies kan je weinig kwijt en “Local Storage” bewaard de gegevens ook nadat het browser venster gesloten is, vandaar deze keuze. Let daarbij wel op dat je geen object of array in session of local storage kan opslaan. Hiervoor dient deze eerst omgezet te worden naar een “string”, vandaar de “stringify” functie. Hartstikke mooi dat het opgeslagen is, maar het moet er ook weer uit natuurlijk! Zie:

// Iets in session storage aanwezig?
if(sessionStorage.getItem('input'))
{
	// Gegevens ophalen
	var array = JSON.parse( sessionStorage.getItem('input') );

	// Nieuwe regels toevoegen, minus de al aanwezige
	for (var n = 0; n < (array['counter'] - 1); ++ n)
	{
		$('#regel-toevoegen').click();
	}

	// Door alle tabel regels loopen
	$('tr').each(function(index,value)
	{
		// Waarde plaatsen
		$(this).find('input[name="name[]"]').val( array['name'][index] );
		$(this).find('input[name="number[]"]').val( array['number'][index] );
	});

	// Waardes weer verwijderen
	sessionStorage.removeItem('input');
}

Eerst maar kijken of er iets aanwezig is, wanneer dat het geval is de gegevens ophalen en van de “string” weer een object met array’s maken. De teller laten lopen en elke keer even op de “Regel toevoegen” knop klikken. Vervolgens het zelfde stukje als bij het opslaan, enkel plaatsen we nu de gegevens terug in plaats van dat we deze uitlezen. Als toetje de gegevens nog even verwijderen en klaar!

Klik hier voor een online demo

Het bericht Waardes behouden na verzenden van dynamisch formulier verscheen eerst op Roy Duineveld.

Soorten apps

Native app

Een platform afhankelijk applicatie. Niet bij elk platform kan je in eenzelfde programmeer taal ontwikkelen en dus zal je voor elk platform een totaal nieuwe app moeten maken. Daarin tegen kan je met een native app wél alle mogelijkheden van een telefoon benutten en is er géén internet noodzakelijk om te functioneren.

Web app

Simpel gezegd; een website in een app jasje, alsof het een echte app is. Een mobiele website wordt ook wel eens een web app genoemd. Nadeel is dat géén functionaliteiten van de telefoon aangesproken kunnen worden en dat wanneer er geen internet is deze niet functioneert. (in een ander artikel heb een methode beschreven om een website wél offline beschikbaar te maken: Website offline beschikbaar maken met een submit fallback)

Hybride app

Een combinatie van een native app en een web app waarbij dus vrijwel alles mogelijk is. Nadeel is dat er ook twee omgevingen bijgehouden dienen te worden, zowel het native als het web gedeelte.

Wat is Phonegap?

Phonegap is een distributie van Apache Cordova. Phonegap maakt het ten opzichte van Cordova enkel wat makkelijker met Phonegap Build en “hydration“. Met Phonegap een app maken behoort tot een hybride app. Phonegap ofwel Cordova is dan het native gedeelte. Dit zorgt ervoor dat via Javascript functionaliteiten van de telefoon aangesproken kunnen worden. Benieuwd welke apps met Phonegap gemaakt zijn? Kijk eens hier.

Wat is Phonegap Build?

Dit maakt het mogelijk om je HTML, CSS en Javascript in te voeren en vervolgens zorgt de Build service ervoor dat er apps uit komen. In het geval van Android dus een apk bestand. Ter verduidelijking:

Wat is Hydration?

Tijdens het testen van een app, in het geval van Android; dien je elke keer een apk op je telefoon te zetten en vervolgens de al aanwezige cq oude app te updaten. Hydration maakt het mogelijk om updates te “pushen”. Door de app opnieuw te starten wordt automatisch de nieuwe versie gedownload en gebruikt. Eventueel kan je ook met Ripple werken, dit is een emulator. Om de emulator te gebruiken dient wel je app “te draaien” ofwel lokaal middels bijvoorbeeld XAMPP of simpelweg bij je hosting partij. Van Ripple is ook een extensie beschikbaar voor Google Chrome.

Eindelijk, beginnen!

Eerst maar een account aanmaken bij Phonegap Build. Hierna downloaden we phonegap-start. Hierin zitten alle basis elementen voor een app. Dit is een soort van boilerplate als ook voor html beschikbaar is: HTML5Boilerplate. Na het downloaden en uitpakken van phonegap-start; pakken we alles gelijk weer in, maar enkel de bestanden in de www map. Terug naar de browser en de Phonegap Build website waar we een nieuwe app gaan maken. Hierbij krijg je de keuze om een open-source app te maken waarbij je de code op Github beschikbaar stelt. De andere optie is een “private” app, eventueel ook via Github te regelen. Wij kiezen voor zelf een zip bestand uploaden waarbij we het zojuist gemaakte zip bestand kiezen.

Na de upload kunnen we de eventueel debugging en hydration aanzetten. Door vervolgens op “ready to build” te klikken worden de apps voor de beschikbare platformen gemaakt! Zodra gereed krijgen de iconen van de platformen kleur en kunnen deze aangeklikt worden om de app te downloaden. In het geval van Android dus het apk bestand. Dit bestand kan je vervolgens op je telefoon zetten, makkelijker is om het QR code te scannen.

App aanpassen

Hartstikke leuk zo’n app die enkel “Device is Ready” zegt maar het kan niks! Om de app aan te passen beginnen we bij het config.xml bestand. Hierin staat alle informatie over de app als de naam, omschrijving, permissies en iconen. Pas dit bestand naar je wensen aan en mochten er onduidelijkheden zijn, lees de documentatie hierover. Voordat je alle gewenste formaten iconen gaat maken voor je app, denk even na voor welke platformen je de app echt gaat gebruiken. Niet alles in het config.xml bestand is namelijk verplicht! Hierna kan je met index.html aan de gang gaan. Gebruik bijvoorbeeld jQuery Mobile om je app er grafisch goed uit te laten zien. Eventueel kan je meerdere html bestanden maken mocht je app uit meerdere “pagina’s” bestaan. Gebruik alles wat je in huis hebt om een mooie app te maken middels HTML, CSS en Javascript. Om te testen kan je zoals eerder aangegeven Ripple gebruiken of je zipt alles in de www map nogmaals en upload dit via de “Update code” knop op de website van Phonegap Build.

Telefoon functies aanspreken

Ga ik nog een keer; hartstikke mooi die app maar ik wil de functies van een telefoon gebruiken! Alle informatie hierover kan je in de documentatie van Phonegap vinden. Ik zal in dit artikel de camera aanspreken en een foto maken. Wat de permissies betreft in de documentatie, dit kan je overslaan gezien Phonegap Build dit regelt in de config.xml. Om de camera permissie te krijgen dien je de volgende regel toe te voegen in config.xml:

<feature name="http://api.phonegap.com/1.0/camera"/>

Zie hiervoor “PhoneGap API Features” in de config.xml documentatie.

Om een foto te maken hebben we een knop nodig, na index.html wat opgeschoond te hebben zou dit er ongeveer zo uit moeten zien:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<title>Foto maken</title>
	</head>
	<body>
		<div class="app">
			<h1>Foto!</h1>
			<button id="maak-foto">Maken</button>
		</div>
		<script type="text/javascript" src="phonegap.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

Zoals je ziet worden hier twee javascript bestanden aangesproken. Wat je wellicht is opgevallen is dat phonegap.js niet aanwezig is in de map! Dit klopt, deze wordt middels de Phonegap Build toegevoegd. De vermelding dan ook gewoon laten staan om de mogelijkheden van de telefoon aan te spreken. Door naar het index.js bestand! Middels Javascript kan je uiteindelijk de functies aanspreken, bij websites maak ik graag gebruik van jQuery, laten we dat dan hier ook doen! Ga naar de website van jQuery, download de laatste versie en sla deze op in de “js” map. Vervolgens moet hier nog wel even naar gelinkt worden vanuit het index.html bestand. Voeg na het phonegap.js regel de volgende regel toe:

<script type="text/javascript" src="js/jquery.js"></script>

Vanuit een CDN laden kan natuurlijk ook, maar om de app ook zonder internet te laten functioneren is dit nu geen goed idee. Na ook het index.js bestand wat opgeschoond te hebben en de camera documentatie doorgespit te hebben, het volgende resultaat:

// Anonieme functie openen
(function()
{
	// Wachten tot het apparaat klaar is
	document.addEventListener('deviceready', onDeviceReady, false);

	// Het apparaat is klaar
	function onDeviceReady()
	{
		// Telefoon functies kunnen pas aangesproken worden
		// wanneer het apparaat klaar is. Ofwel wanneer deze
		// functie aangesproken wordt kunnen deze pas gebruikt
		// worden. Aangezien de gebruiker hoogst waarschijnlijk
		// niet eerder op de foto maken knop klikt dan dat het
		// apparaat klaar is, maak ik hier nu geen gebruik van.
	}

	// Foto nemen is gelukt
	function cameraSuccess(imageData)
	{
		// Na de foto maken knop de afbeelding weergeven
		$('#maak-foto').after('<img src="' + "data:image/jpeg;base64," + imageData + '">');
	}

	// Foto nemen is mislukt
	function cameraError(message)
	{
		// Foutmelding weergeven
		alert('Er ging iets fout! ' + message);
	}

	// Op de foto maken knop geklikt
	$('#maak-foto').click(function()
	{
		// Eventueel eerder gemaakte foto verwijderen
		$('img').remove();

		// Foto maken
		navigator.camera.getPicture( cameraSuccess, cameraError, {
			quality: 50, // Foto kwaliteit
			destinationType: Camera.DestinationType.DATA_URL // Base64 gecodeerde afbeelding als resultaat
		});
	});

// Functie direct uitvoeren
})();

Dit kan natuurlijk aan alle kanten uitgebreid worden. Van netjes vormgeven tot de afbeelding middels Ajax naar een server versturen.

Schoot me net te binnen en klonk wel leuk: App? Use Phonegap!

Updates

11-05-2013 – Inmiddels is er een cursus beschikbaar bij Tutsplus, erg leerzaam: https://tutsplus.com/course/phone-gap-essentials/

Het bericht App maken met Phonegap en Phonegap Build verscheen eerst op Roy Duineveld.

SELECT
	second.meta_value
FROM
	wp_postmeta as first
JOIN
	wp_postmeta as second
ON
	first.post_id = second.post_id AND second.meta_key = "_wp_attached_file"
WHERE
	first.meta_value="slider"

Hierbij wordt gezocht naar “meta_value”: “slider”. Aan de hand van het “post_id” wordt gezocht naar de afbeelding welke als “meta_key”: “_wp_attached_file” heeft. Dit verwerkt naar “WordPress taal” met daarbij de multidimensionale array geconverteerd naar een enkele array met als resultaat:

$results = $wpdb->get_results('
	SELECT
		second.meta_value
	FROM
		'.$wpdb->postmeta.' as first
	JOIN
		'.$wpdb->postmeta.' as second
	ON
		first.post_id = second.post_id AND second.meta_key = "_wp_attached_file"
	WHERE
		first.meta_value="slider"
	',ARRAY_N);
$results = array_map(function($array){return $array[0];},$results);

Nu het resultaat nog in de slider zetten:

<div id="slider" class="nivoSlider">
	<? foreach($results as $result): ?>
	<img src="assets/<?=$result;?>" alt="">
	<? endforeach; ?>
</div>

Typisch weer een oplossing op mijn “slogan” gebaseerd: Waarom moeilijk doen als het makkelijk kan!

Het bericht Responsive slider in WordPress met backend verscheen eerst op Roy Duineveld.

Foutafhandeling

Om te beginnen, eerst maar even kijken of er geen fouten zijn.

<?php
// No icecat ID present?
if(!isset($data['id']))
{
	// Check for each error number and show the error
	if(isset($data[1]))
	{
		echo 'Error 1: '.$data[1];

	} elseif(isset($data[2]))
	{
		echo 'Error 2: '.$data[2];

	} elseif(isset($data[3]))
	{
		echo 'Error 3: '.$data[3];
	}
}
?>

Product informatie

Zoals je hier al ziet wordt er elke keer gerefereerd naar $data, om dit niet steeds te hoeven doen is het meest makkelijke extract te gebruiken voor het weergeven van de product informatie. Wanneer er geen fouten zijn kunnen we verder:

<? extract($data); ?>
<h1><?=$title;?></h1>
<table>
	<tr>
		<th>SKU</th>
		<td><?=$sku;?></td>
	</tr>
	<tr>
		<th>EAN</th>
		<td>
			<? foreach($ean as $e): ?>
				<?=$e;?><br />
			<? endforeach; ?>
		</td>
	</tr>
	<tr>
		<th>URL</th>
		<td><a href="<?=$url;?>" target="_blank"><?=$url;?></a></td>
	</tr>
</table>

Zo kan ik nog wel even doorgaan, dit spreekt voor zich natuurlijk. Hierna komen we de product afbeeldingen tegen, dit is uiteraard door een simpele foreach te gebruiken, weer te geven. Nog wel een opmerking hierbij. Op het moment van schrijven geeft Icecat niet altijd alle formaten afbeeldingen mee aan producten. De thumbnail en de grote afbeeldingen worden altijd meegegeven, de kleine en middelmatige missen soms wel eens.

Product specificaties

Het gebruik van een “foreach” geldt ook voor de product specificaties maar laat ik daar wel een voorbeeldje voor maken gezien dit meestal het belangrijkste is:

<h2>Product Specifications</h2>
<table>
<? foreach($spec as $id=>$s): ?>
	<tr>
		<th title="Icecat specification category ID: <?=$id;?>"><?=$s['name'];?></th>
		<td></td>
	</tr>
	<? foreach($s['features'] as $id=>$f): ?>
		<tr>
			<td title="Icecat specification feature ID: <?=$id;?>"><?=$f['name'];?></td>
			<td><?=$f['pres_value'];?></td>
		</tr>
	<? endforeach; ?>
<? endforeach; ?>
</table>

Alles kan natuurlijk uitgebreid en veel mooier gemaakt worden. Zo ook mijn kleine demo voor bij dit artikel:

Klik hier voor een online demo

Als laatste nog even wat “sluikreclame” om een idee te geven wat er mogelijk is met de gegevens van Icecat. Bijvoorbeeld een computer en toebehoren webshop of website waar je tablets kan vergelijken (inmiddels offline maar de code staat op Github).

Het bericht Icecat XML verwerken deel 2, de array weergeven verscheen eerst op Roy Duineveld.

Refused to display document because display forbidden by X-Frame-Options.

Maar wat kan je eraan doen? In het geval dat je Google Maps wilt “embedden” in je website ben je waarschijnlijk “&output=embed” vergeten in de url maar in alle andere gevallen wordt er veelal op het internet gezegd: pech, maar het kan niet. Om met een beter antwoord te komen, bij deze een “workaround”:

Laat ik het volgende bestand: iframe.php noemen:

<?php
if($_GET['url']) {
 	echo file_get_contents($_GET['url']);
}
?>

Vervolgens laden we de url voor het iframe via dit bestand:

<iframe src="iframe.php?url=http://website-welke-niet-wil-laden-in-een-iframe.nl/"></iframe>

En werken! Maar… zodra je op een link klikt kan het zijn dat het niet helemaal vlekkeloos gaat. Daar heb ik het volgende op bedacht:

<?php
/**
 * Huidge URL ophalen
 * @return string Volledige huidige url
 */
function curPageURL() {
	$pageURL = 'http';
	if ($_SERVER["HTTPS"] == "on"){
		$pageURL .= "s";
	}
	$pageURL .= "://";
	if ($_SERVER["SERVER_PORT"] != "80"){
		$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
	} else {
		$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	}
	return $pageURL;
}

/**
 * Volledige url maken
 * @param  string $url  Huidige url
 * @param  array $host URL gegevens vanuit parse_url
 * @return string       Volledige url
 */
function nieuwe_url($url,$host)
{
	$scheme 	= $host['scheme']; //http of https
	$host 		= $scheme.'://'.$host['host'];

	if($url != '#' AND $url != '')
	{
		// Begint met "//" ?
		if(substr($url,0,2) == '//')
		{
			$url = $scheme.':'.$url;

		// Begint met "/" ?
		} elseif(substr($url,0,1) == '/')
		{
			$url = $host.$url;

		// Wat voor opties zijn er nog meer?
		} else {
			$url = $url;
		}

		$url = curPageURL().'?url='.$url;
	}
	return $url;
}

/**
 * En beginnen!
 */
if($_GET['url'])
{
	// Content ophalen
	$content 	= file_get_contents($_GET['url']);

	// Gegevens uit de url halen
	$url 		= parse_url($_GET['url']);

	// HTML in DOM laden
	$dom 		= new DOMDocument();
	@$dom->loadHTML($content);

	// Door alle "a" tags loopen
	foreach($dom->getElementsByTagName('a') as $linkjes)
	{
		// Href ophalen
		$href 	= $linkjes->getAttribute('href');
		// Nieuwe url ophalen uit functie
		$nieuw 	= nieuwe_url($href,$url);
		// Href verwijderen
		$linkjes->removeAttribute('href');
		// Nieuwe href toevoegen
		$linkjes->setAttribute('href', $nieuw);
	}

	// Het resultaat!
	echo @$dom->saveHTML();
}
?>

Ik heb dit niet getest met alle websites! Maar bij de meeste zou dit moeten werken. Daarnaast dit nog even: de x-frame-options zijn er niet voor niets, het gebruik van deze methode is dan ook op eigen risico natuurlijk.

Het bericht Forbidden x-frame-options omzeilen verscheen eerst op Roy Duineveld.