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.

• 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.

function isset(var)
{
	return typeof(variable) != "undefined" && variable !== null;
}

Ben je opzoek naar meerdere PHP functies in Javascript? Kijk eens naar PHP.JS

Het bericht PHP’s isset functie in Javascript / jQuery verscheen eerst op Roy Duineveld.

Om dit op te lossen dient het eerste verzoek (ajax request) geannuleerd te worden wanneer deze nog bezig is. Mocht je foutmeldingen weergeven wanneer deze optreden bij een ajax verzoek dienen de geannuleerde verzoeken niet weergegeven te worden.

Het voorbeeld:

//Self invoking anonymous function
//Ofwel een naamloze functie welke automatisch gestart wordt
(function()
{
	//Wachten tot een checkbox veranderd
	$('input[type=checkbox]').change(function()
	{
		//Wanneer er al een request is deze annuleren
		if ( typeof request !== "undefined" && request) {
			request.abort();
		}

		//Ajax request
		request = $.ajax({
			url: 		'http://website.nl/',
			data: 		{ naam: 'Roy Duineveld' },
			dataType: 	'json'
			type: 		'POST',
			error: 		function(jqXHR, textStatus, errorThrown)
			{
				//Wanneer de ajax request geannuleerd wordt dit niet weergeven
				if(errorThrown != 'abort')
				{
					alert('Er ging iets fout! ' + errorThrown);
				}
			},
			succcess: 	function(data)
			{
				$('body').html(data);
			}
		});
	});
})();

Het bericht Ajax request annuleren verscheen eerst op Roy Duineveld.

<?php
//Form "gesubmit"?
if($_POST)
{
	//Velden scheiden door een komma en achteraan data.txt toevoegen
	file_put_contents('data.txt', implode(', ',$_POST)."\n", FILE_APPEND);

	//Pagina opnieuw laden
	header('Location: index.php');
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pagina naam</title>
</head>
<body>

	<form method="post" action="">

		<input type="text" name="inputname1" />
		<input type="text" name="inputname2" />

		<input type="submit" value="Opslaan!" />

	</form>

	<p>Data:</p>
	<hr />
	<?php
	//Gegevens ophalen uit data.txt, om XSS te voorkomen door htmlspecialchars halen en als laatste middels nl2br ervoor zorgen dat de "enters" ofwel nieuwe lijnen/regels zichtbaar zijn.
	echo nl2br(htmlspecialchars(file_get_contents('data.txt')));
	?>

</body>
</html>

Manifest bestand

Een cache manifest daaraan toevoegen, simpelweg de html tag vervangen door:

<html manifest="manifest.php">

Het cache manifest maken (manifest.php):

CACHE MANIFEST
index.php

En klaar! De pagina is nu offline beschikbaar (mits deze al eenmalig bezocht is). Nadeel nu is dat wanneer de pagina (of data.txt veranderd), laten we zeggen dat er een input veld bij komt, wordt dit niet zichtbaar omdat de pagina altijd vanuit de cache geladen wordt. Wanneer wordt de pagina opnieuw opgehaald? Enkel als het manifest bestand veranderd. Dus zorgen we ervoor dat het manifest bestand veranderd als index.php en data.txt veranderen door bijvoorbeeld een md5 hash van de bestanden te maken, zodra de index.php of data.txt veranderd zal die hash ook veranderen. Laten we er een stukje commentaar in zetten met die hash.

CACHE MANIFEST
index.php
# data.txt md5 hash: <?=md5_file('data.txt');?>
# index.php md5 hash: <?=md5_file('index.php');?>

Localstorage als cache

Top! Probleem opgelost! Maar als we het formulier “submitten” wanneer offline zal er niet veel gebeuren. Wat zijn de mogelijkheden om data tijdelijk bij de bezoeker op te slaan? Cookies! Prachtig maar veel gegevens kunnen we er niet in kwijt. WebSQL, wordt beperkt ondersteund en zoals bij W3C te lezen niet meer door ontwikkeld. IndexedDB, helaas ook beperkt ondersteund. Houden we local storage over! Wordt zelfs ondersteund door Internet Explorer (8+)! En… de code in! Laten we voor het gemak jQuery erbij pakken en eerst de form submit (wanneer offline) afvangen en de gegevens in localstorage stoppen:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	//Naamloze functie maken
	(function()
	{
		//Form gesubmit?
		$('form').submit(function()
		{
			//Offline?
			if( ! navigator.onLine )
			{
				//De bezoeker vertellen wat er gebeurd
				alert('Je bent niet verbonden met het internet, de gegevens worden tijdelijk lokaal opgeslagen tot je weer verbonden bent met het internet.')

				//Nieuw item met alle ingevoerde gegevens uit het form aan localstorage toevoegen
				localStorage.setItem(new Date().getTime(), $(this).serialize() );

				//Alle ingevoerde velden leeg maken
				$('input[type=text]').val('');

				//Zorgen dat het form niet echt gesubmit wordt
				return false;
			}
		});

	//Naamloze functie direct uitvoeren
	})();
</script>

Vervolgens moeten we ervoor zorgen dat wanneer er iets in localstorage zit dit de volgende keer verzonden wordt. Gezien dit allemaal javascript is en we dit middels ajax gaan doen eerst het “ajax afhandel script” maken, save.php:

<?php
if($_POST){
	//Index echo'en zodat we deze kunnen verwijderen uit localstorage
	echo $_POST['index'];
	unset($_POST['index']);
	file_put_contents('data.txt', implode(', ',$_POST)."\n", FILE_APPEND);
}
?>

En weer door met javascript:

//Online?
if( navigator.onLine )
{
	//Zijn er items in localstorage?
	if(localStorage.length)
	{
		//Door alle items in localstorage "loopen"
		for(var i in localStorage)
		{
			//Item versturen naar save.php
			$.ajax({
				url: 'save.php',
				data: 'index=' + i + '&' + localStorage.getItem(i),
				type: 'POST',
				success: function(data){
					//Wanneer succesvol verzonden verwijderen uit localstorage
					localStorage.removeItem(data);
				}
			});
		}
	}
}

En klaar! Maar zoals je wellicht gemerkt hebt dien je eerst de pagina twee maal opnieuw te laten voordat de cache overschreven wordt. Om dit probleem op te lossen een kleine “hotfix” of “hack” om het zo maar te noemen:

//Manifest bestand veranderd? (en dus index.php of data.txt)
window.applicationCache.addEventListener('updateready', function(e)
{
	if (window.applicationCache.status == window.applicationCache.UPDATEREADY)
	{
		//Cash verwijderen en nieuwe items laden
		window.applicationCache.swapCache();

		//Pagina opnieuw laden
		window.location.reload();
	}
}, false);

Best leuk dit! Waar kan je dit toepassen? Het is erg handig voor mobiele websites, komt wel eens voor dat de bezoeker geen internet heeft of dat het internet langzaam is (hopen dat het straks met 4G sneller gaat). Dan is het wel zo makkelijk dat de website bezocht kan worden én de ingevoerde gegevens verwerkt worden!

Klik hier voor een online demo

Het bericht Website offline beschikbaar maken met een submit fallback verscheen eerst op Roy Duineveld.

Het bericht Alles nieuw! verscheen eerst op Roy Duineveld.