Als uw bestand aan genealogische informatie groot is, dan voldoet een eenvoudige alfabetische index niet goed meer. Een zoek-functie zou dan handig zijn. Vanzelfsprekend kan u hiervoor ook een zoek-machine als Google hiervoor gebruiken, zie hier voor een instructie, maar dan gebeurt het vaak dat veel resultaten teruggegeven worden waaruit het moeilijk is de gezochte persoon te halen.
Deze beschrijving gaat over het aanbrengen van een zoekfunctie, eigenlijk een selecteerfunctie, in html-uitvoer van PRO-GEN. In de schermafdruk hierboven zie u de PRO-GEN uitvoer voor het voorbeeld-bestand Oranje-Nassau zoals dat met de installatie van PRO-GEN meegeleverd wordt. In plaats van de alfabetische index ziet u in de linkerkolom twee blokjes waar u stukken van een achternaam en/of een voornaam in kunt tikken. Daaronder verschijnen dan in een tabel de namen in het bestand die daaraan voldoen. Het werkt bijzonder handig en snel is onze persoonlijke ervaring. U kunt het ook zelf hier proberen.
Voor het onderhavige voorbeeld maken we html-pagina’s van het volledige bestand op de volgende manier:
- Vanuit het PRO-GEN hoofdmenu kiezen we
Uitvoer gegevens personen. - We krijgen dan het complete overzicht aan personen te zien. We kiezen ze allemaal door – voor de zekerheid –
Len vervolgensAin te tikken. We gaan naar de volgende pagina door deEnter-toets in te drukken. - Hier kiezen we
Soort uitvoer: Tekstuitvoer en diversenUitvoerdefinitie: Relatieschema- De andere drie kunt u vrij kiezen.
- en bij
Invoer akkoorddrukken we de deEnter-toets in.
- Bij
Schijfuitvoer stuurprogrammakiezen weCSS - Het kan geen kwaad ook even de
Instelling Internet adressenbij te werken. - Kies
Uitvoer naar schijfen voor deze demonstratie heb ik gekozen voor3 frames - Index links, ABC met afbeelding boven, Inhoud rechts, eenGele achtergrondenPersonen-uitvoer met terugverwijzingen (t.b.v. HTML). - Verder bij
Deze HTML-uitvoer opslaanalsgesplitst per echtpaar (niet altijd mogelijk),De index ook opsplitsen in bestanden per letter, de naam van het bestanddemoen opslaan op de standaard plek..\PG35\TEXT\(wat er bij u voor..\PG35staat hangt af van de plaats waar u PRO-GEN hebt geïnstalleerd. - Hierna worden de bestanden door PRO-GEN aangemaakt en kunt u er voor kiezen het resultaat in uw internet-browser weer te geven.
Karakter codering gendex.txt
Elke keer als PRO-GEN voor u de nieuwe bestanden heeft gemaakt moet de karakter-code van een van die bestanden omgezet worden naar UTF-8. Dat is niet vreselijk moeilijk, alleen wat onhandig. Het gaat als volgt:
- Tik in het zoek-veld van uw taakbalk – onderaan het scherm –
Notepad. Het icoontje van het programma dat we zoeken ziet er uit als blauw notitieblokje. - Klik op het icoontje en open het bestand
../PG35/TEXT/demo/gendex.txt. - Sla het bestand vervolgens weer op onder dezelfde naam maar kies als codering UTF-8. Dit kunt u kiezen in het vakje links van de knop om op te slaan.
De volgende drie bestanden hoeven over het algemeen maar een keer aangepast te worden. Zodra u de aanpassingen gedaan heeft is het zaak van deze ergens anders dan in de demo-map een kopie te bewaren. Als PRO-GEN namelijk nieuwe bestanden aanmaakt worden alle oude bestanden in de map verwijderd. U zult ze daarna weer terug kunnen zetten.
Hoofdbestand
Als u bovenstaande procedure volgt maakt PRO-GEN het bestand demo-frm3.htm aan. Om verwarring te voorkomen hernoemen we dat bestand meteen naar index.htm. Andere namen kunnen natuurlijk ook en u kunt zelfs de oude naam aanhouden. De drie veranderingen die nodig zijn zijn hieronder aangegeven.
<!-- Created by : G.J.M. Koper -->
<!-- Date/Time : 01-03-2020 11:14:48 -->
<!-- Program : PRO-GEN 3.50 -->
<!-- File : VOORBLD -->
<!-- ***** All rights reserved (C) 2020 G.J.M. Koper ***** -->
<html>
<head>
<title>PRO-GEN uitvoer</title>
<!-- GK: hieronder is een meta-blok toegevoegd om de karaktercodering vast te stellen -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="125,*" frameborder="2" framespacing="2" border="2">
<!-- GK: hieronder is de bestandsnaam demo-keys.htm vervangen door demo-keys-mod.htm -->
<frame src="demo-keys-mod.htm" name="keyindex" marginheight="0" marginwidth="0">
<frameset cols="20%,*" frameborder="2" framespacing="2" border="2">
<!-- GK: hieronder is de bestandsnaam demo-indx-a.htm vervangen door demo-zoek.htm -->
<frame src="demo-zoek.htm" name="index" marginheight="4" marginwidth="4">
<frame src="demo-01.htm" name="output" marginheight="4" marginwidth="4">
</frameset>
<noframes>
<body>
Deze pagina maakt gebruik van frames.<br />
Hiervoor is Netscape of Internet Explorer versie 2.0 of hoger nodig.<br />
<p />
U kunt wel enkel de <a href="demo-01.htm">gegevens weergeven</a>, maar de index blijft dan achterwege.<br />
</body>
</noframes>
</frameset>
</html>
Alfabet-balk
Het tweede bestand dat we aanpassen is demo-keys.htm dat we hernoemen naar demo-keys-mod.htm. Het staat u natuurlijk vrij een andere naam te kiezen als u er maar rekening mee houdt dat de naam op een paar plaatsen gebruikt wordt.
Als u al veel persoonsgegevens heeft staat er praktisch het volledige alfabet in. Het kan echter voorkomen dat er toch nog een letter wordt toegevoegd in welk geval u die letter ook aan dit bestand moet toevoegen.
De verandering die nodig is is hieronder aangegeven.
<!-- Created by : G.J.M. Koper -->
<!-- Date/Time : 01-03-2020 11:14:48 -->
<!-- Program : PRO-GEN 3.50 -->
<!-- File : VOORBLD -->
<!-- ***** All rights reserved (C) 2020 G.J.M. Koper ***** -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PRO-GEN uitvoer</title>
<base target="index">
<link rel="stylesheet" href="demo-main.css" type="text/css" media="all">
<link rel="stylesheet" href="demo-scrn.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo-prn.css" type="text/css" media="print">
</head>
<body class='pictureframe'>
<table width="100%" height="100%" border="0" CELLSPACING="0">
<tr valign="middle">
<td align="center"><img src="demo-pict.gif" class='picture'></td>
<td align="center">
<div class='PGheadtitle'>PRO-GEN uitvoer</div>
<p />
<div class='contact'>
<a href="https://blog.gerkoper.nl" class='homepage' target="_top">Homepage</a> |
<a href="mailto:g.koper@xs4all.nl" class='mailto'>E-mail</a> |
<a href="demo-01.htm" class='begin' target="output">Begin</a>
</div>
<p />
<div class='csskeysdata'>
<a href="demo-indx-a.htm#BM_A" class='PGkeys'>A</a>
<a href="demo-indx-b.htm#BM_B" class='PGkeys'>B</a>
<a href="demo-indx-d.htm#BM_D" class='PGkeys'>D</a>
<a href="demo-indx-g.htm#BM_G" class='PGkeys'>G</a>
<a href="demo-indx-l.htm#BM_L" class='PGkeys'>L</a>
<a href="demo-indx-m.htm#BM_M" class='PGkeys'>M</a>
<a href="demo-indx-o.htm#BM_O" class='PGkeys'>O</a>
<a href="demo-indx-p.htm#BM_P" class='PGkeys'>P</a>
<a href="demo-indx-r.htm#BM_R" class='PGkeys'>R</a>
<a href="demo-indx-v.htm#BM_V" class='PGkeys'>V</a>
<a href="demo-indx-w.htm#BM_W" class='PGkeys'>W</a>
<a href="demo-indx-z.htm#BM_Z" class='PGkeys'>Z</a>
<!-- GK: Hieronder wordt de zoek-pagina toegevoegd -->
<a href="demo-zoek.htm#BM_zoek" class='PGkeys'>Zoek</a>
</div>
</td>
<td align="center"><img src="demo-pict.gif" class='picture'></td>
</tr>
</table>
</body>
</html>
Het zoekbestand
In het zoekbestand zit alle functionaliteit. Het maakt gebruik van een heel populair javascript-programmaatje Papa Parse dat in staat is om een getabelleerd text-bestand op te splitsen in de afzonderlijke cellen. Hier wordt dit script gebruikt om het bestand gendex.txt dat we hierboven om-codeerden. In dit bestand staan van alle personen de koppeling naar de betreffende webpagina samen met achter- en voornaam. De rest van de informatie nemen we hier niet in beschouwing.
Om het bestand samen te stellen beginnen we met een van de pagina’s met alle achternamen met één letter. Hier kiezen we voor de letter A, demo-index-a.htm, maar u mag best een andere kiezen. We maken hiervan een nieuw bestand met de naam demo-zoek.htm. Er worden vier veranderingen aan het bestand gedaan:
<!-- Created by : G.J.M. Koper -->
<!-- Date/Time : 01-03-2020 11:14:48 -->
<!-- Program : PRO-GEN 3.50 -->
<!-- File : VOORBLD -->
<!-- ***** All rights reserved (C) 2020 G.J.M. Koper ***** -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PRO-GEN uitvoer</title>
<base target="output">
<link rel="stylesheet" href="demo-main.css" type="text/css" media="all">
<link rel="stylesheet" href="demo-scrn.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo-prn.css" type="text/css" media="print">
<!-- GK: Hieronder zijn twee script-blokken toegevoegd -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
</head>
<body class="cssindex">
<div class="cssindextitle">
<!-- GK: Hieronder is de titel Namenindex vervangen door twee span-blokken voor de invoervelden -->
<span class='PGindex1'> Zoek <input type="text" id="Zoek_achternaam" onkeyup="Zoek()" placeholder="Achternaam ..." title="Tik een naam in"></span><br />
<span class='PGindex2'> <input type="text" id="Zoek_voornaam" onkeyup="Zoek()" placeholder="Voornaam ..." title="Tik een naam in"> </span><br />
</div>
<div class="cssindexdata">
<!-- GK: De link-naam BM_A (of een andere letter) is vervangen door BM_Zoek -->
<a name="BM_Zoek"></a>
<!-- GK: Alle verdere informatie in het div-blok is vervangen door een enkel extra div-blok -->
<div id="parsed_csv_list"></div>
</div>
<div class="cssindexlink">
gemaakt met <a href="http://www.pro-gen.nl" target="_top">PRO-GEN</a><br/>
d.d. 01-03-2020
</div>
</body>
</html>
<!-- GK: Hieronder staan de benodigde functies -->
<script type="text/javascript">
var data;
$(document).ready(function()
{
var results;
results = Papa.parse("gendex.txt",
{
download: true,
delimiter: "|",
quoteChar: '/',
header: false,
complete: function (results){
data = results.data;
console.log("Success?", results);
Zoek();
}
}
)
});
function Zoek() {
var in_achternaam, in_voornaam, filter_achternaam, filter_voornaam;
var table, row, cells;
in_achternaam = document.getElementById("Zoek_achternaam");
in_voornaam = document.getElementById("Zoek_voornaam");
filter_achternaam = in_achternaam.value.toUpperCase();
filter_voornaam = in_voornaam.value.toUpperCase();
var achternaam = "";
table = "";
for (i=0;i<data.length;i++) {
cells = data[i];
if (cells.length>4) {
vnaam = cells[2].split('/')[0];
if ((cells[1].toUpperCase().indexOf(filter_achternaam) > -1)&&(vnaam.toUpperCase().indexOf(filter_voornaam) > -1)) {
if ((achternaam != cells[1])||(achternaam=="")) {
achternaam = cells[1];
table+= "<span class='PGindex1'>"
table+= cells[1];
table+= "</span><br />";
}
table+="<a href=";
table+=cells[0],
table+=" class='PGindex2'>";
table+=vnaam;
table+="</a><br />";
}
}
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
</script>
Tenslotte
Met deze drie nieuwe bestanden en het omgekodeerde gendex.txt is alles klaar. Als u de inhoud van de demo-folder op uw webstek plaatst zou u precies dezelfde werking moeten krijgen als op mijn webstek.
Het is ook mogelijk dat op uw eigen computer te doen, maar dan is er een probleem. Om veiligheidsredenen mag het gendex.txt-bestand op uw eigen computer niet door een html-pagina geopend worden: een “Cross-Origin Request” wordt geblokkeerd. Om dit probleem tijdelijk op te heffen kunt u deze instructies volgen. Let er wel op dat u dan op uw computer een veiligheidslek inbouwt. Gebruik het dus tijdelijk.
Er is een aanpassing bij de aanroep van de papaparser mogelijk om een lokaal bestand te openen. Dat bestand werkt dan weer niet voor het internet, dus dat is hier niet toegepast. In de toekomst zal het mogelijk zijn dit beter te regelen.