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

Het idee

WhoApp! Na het downloaden en starten van de app wordt je gehele adressenboek (enkel namen en telefoon nummers) geüpload naar de server. Dit klinkt misschien gek of eng maar waarom niet? Het zijn maar telefoon nummers en namen en anders kan er nooit een (om te beginnen, landelijk) telefoonboek gemaakt worden met ook mobiele nummers. Mocht je dit niet willen eventueel een tweede betaalde app waarbij dit niet hoeft. Dit is dan gelijk een klein verdien patroon. In de app zelf kan er op telefoon nummer gezocht worden naar namen. Dit aan de hand van de gegevens in de database op de server. Mocht het betreffende telefoon nummer nog niet in de database staan eventueel een koppeling met bijvoorbeeld nummerzoeker.com waar het mogelijk is te zoeken op vaste telefoon nummers naar (bedrijfs)namen en adressen. Daarnaast kan de achtergrond taak aangezet worden welke zorgt voor de volgende functionaliteit:

Wanneer je gebeld wordt komt er bovenin het scherm een venstertje te staan met daarin de naam van diegene met dat telefoon nummer. Dit enkel in het geval dat het nummer niet in je eigen adressenboek staat en uiteraard enkel wanneer aanwezig in de database.

Uitvoering

Enige tijd geleden kwam dit idee en heb hiervoor de naam WhoApp bedacht. Deze naam zodoende geregistreerd, zowel bij de KvK als de domeinnaam (whoapp.nl) en de naam als app voor de Google Play Store. Nu de app nog maken! Op het moment van schrijven ben ik nog niet zo ver met Java en dus native Android apps. Daarin tegen kan ik aardig wat maken met Phonegap waar ik eerder een artikel over heb geschreven: App maken met Phonegap en Phonegap Build. De te ontwikkelen functionaliteiten:

• Contacten van de telefoon naar de server versturen. Met Phonegap werk je voornamelijk met Javascript, dat in combinatie met de Phonegap API en vervolgens middels Ajax versturen. Dit heb ik inmiddels getest en functioneert.
• Het telefoonboek. Op de server zal een PHP script in combinatie met een MySQL database alle telefoon nummers moeten verwerken. Deze dienen uiteraard gestandaardiseerd en gegroepeerd te worden. Dit wordt nog even uitzoeken maar is zeker te doen. Ook moet er een algoritme toegepast worden om de juiste naam te tonen. De één heeft in zijn adressenboek simpelweg “Roy” staan, de ander “Roy Duineveld” en weer iemand anders “Roy uit Heiloo”. Aan de hand van de meest voorkomende naam zal deze getoond worden. Dan hopen dat zoveel mogelijk mensen “Roy Duineveld” in hun telefoonboek hebben staan.
• Van de app een service maken welke op de achtergrond draait. Dit is vanuit Phonegap nog niet mogelijk maar er is wel al een plugin voor gemaakt: Cordova-Plugin-BackgroundService. Ik heb hier nog niet mee geëxperimenteerd maar ik verwacht geen problemen.
• De service automatisch starten wanneer de telefoon aan gezet wordt. Dit wordt waarschijnlijk in de native code duiken worden maar hoop in de “Background Service” plugin wat te vinden wat dit mogelijk maakt.
• Wanneer gaat de telefoon over? Ook daar heeft iemand al een plugin voor Phonegap voor gemaakt! PhoneListener. Helaas functioneert deze plugin niet meer met de nieuwere versies van Phonegap maar ook nu heeft een nieuwe plugin zich aangeboden die dit mogelijk maakt: PhoneStateChangeListener. Hierbij krijg je de status “idle”, “ringing” of “offhook” door. Getest en werkt perfect!
• Wanneer de telefoon gaat; het telefoon nummer bemachtigen. In de extended versie van de verouderde PhoneListener plugin was deze optie beschikbaar: PhoneListener Extended. Na contact te hebben gehad met de maker van de PhoneStateChangeListener plugin is versie 1.1 uitgebracht waar deze functionaliteit is toegevoegd! Ook dit getest en werkt perfect.
• Als laatste misschien wel een van de belangrijkste elementen, de popup op het scherm weergeven! Na veel zoek werk ben ik hier vast gelopen. Mede door mijn nihile kennis van Java. Momenteel heb ik op Freelancer.com een project lopen en iemand gevonden in China die dit voor mij gaat realiseren voor weinig geld. De verwachtingen zijn laag, maar niet geschoten is altijd mis. Wordt vervolgd!

Vooruitgang

Momenteel draait er een simpele website welke enkel gekoppeld is aan nummerzoeker.com. Wat de app betreft heb ik twee varianten, één op grafisch gebied compleet en met de functionaliteit om alle contactpersonen naar de server te versturen en nummers op te zoeken. De tweede app is enkel om te testen, hierin zit momenteel de PhoneStateChangeListener plugin verwerkt. Het is nog even verder experimenteren met de “Background Service”, het automatisch starten hiervan en de popup.

Het project zit niet heel veel druk achter maar lijkt mij leuk om door te zetten. Mocht er nieuws zijn zal ik dit toevoegen aan dit artikel.

Eventueel geïnteresseerden voor samenwerking is bespreekbaar. Ook aan- of opmerkingen zijn van harte welkom!

Updates

• 13-05-2013 – Inmiddels is bekend dat het met de “Background Service” plugin het mogelijk is een automatisch startende service te maken. Tevens een aantal test apps mogen ontvangen van “de Chinees” met goede resultaten!
• 01-09-2013 – Ik heb het aardig druk op het moment, dus dit project staat even op een zijspoor. Inmiddels is wel alles in huis om het project te voltooien.
• 05-01-2014 – Google heeft een soortgelijke functionaliteit in de nieuwe Android versie 4.4 Kitkat gestopt (zie dit nieuwsbericht op Tweakers.net), ik zal er dus niet meer mee verder gaan.
• 19-07-2016 – De domeinnaam wordt niet verlengt en komt weer vrij op de markt.

Het bericht Altijd weten door wie je gebeld wordt 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.

• Safe mode, magic quotes en register globals zijn weg
• Korte array syntax. Simpelweg: $arr = [‘item1′,’item2′,’item3′,’item4’];
• In anonieme functies kan $this gebruikt worden
• Short tags zijn altijd bruikbaar (<?= in plaats van <?php echo)
• Stel een function geeft een array terug kan een waarde uit de array direct aangesproken worden:

function test(){
return ['item1','item2','item3'];
}
echo test()[1]; //item2

• UTF-8 is de standaard charset voor htmlspecialchars
• Session upload progress wat tijdens het uploaden van een bestand ervoor zorgt dat er een array gemaakt wordt met de status van de upload. Middels Ajax is het dan mogelijk, live een mooie “progress bar” te maken of een percentage te laten zien.

Uiteraard is het complete verhaal te lezen op PHP.net.

Het bericht PHP 5.4 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.