Herzien op 24 januari 2021, onderstaande pagina is dus niet meer strikt van toepassing. U wordt verwezen naar de vernieuwde versie.
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 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.
De installatie van de functie PG-zoek verloopt zoals dat bij andere ProGen-toepassingen ook verloopt. U “download” het bestand PG-Zoek.lzh
en plaatst het in de map ..\PG35\SUPP
. De puntjes staan voor de plaats van de ProGen-map, het is meestal C:
. Bij het opnieuw opstarten van het ProGen programma wordt het dan automatisch geïnstalleerd als u de instructies op het scherm volgt.
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 –
L
en vervolgensA
in te tikken. We gaan naar de volgende pagina door deEnter
-toets in te drukken. - Hier kiezen we
Soort uitvoer: Tekstuitvoer en diversen
Uitvoerdefinitie: Relatieschema
ofStandaard personenuitvoer
- De andere drie kunt u vrij kiezen.
- en bij
Invoer akkoord
drukken we de deEnter
-toets in.
- Bij
Schijfuitvoer stuurprogramma
kiezen weCSS
- Het kan geen kwaad ook even de
Instelling Internet adressen
bij te werken. - Kies
Uitvoer naar schijf
en voor deze demonstratie heb ik gekozen voor3 frames - Index links, ABC met afbeelding boven, Inhoud rechts
, eenGele achtergrond
enPersonen-uitvoer met terugverwijzingen (t.b.v. HTML)
. - Verder bij
Deze HTML-uitvoer opslaan
alsgesplitst per echtpaar (niet altijd mogelijk)
,De index ook opsplitsen in bestanden per letter
Nee want dat wordt later niet weergegeven, de naam van het bestanddemo
en opslaan op de standaard plek..\PG35\TEXT\
(wat er bij u in plaats van..
staat 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. Dit kunt u doen, maar de zoek-functie werkt dan niet. Om die goed te laten werken kunt u de bestanden uploaden naar een webhost of uw eigen computer als webhost instellen. Zie daarvoor deze instructies.
Technische uitleg
In de map ..\PG35\NL\WEBSITE
worden drie bestanden geplaatst die we hier kort bespreken.
Hoofdbestand
Als u bovenstaande procedure volgt maakt PRO-GEN het bestand demo-frm3.htm
aan. Het bestand CSS-FR3L.PTM
, dat de vorm hiervan bepaalt, staat in de map ..\PG35\NL\WEBSITE
en ziet er als volgt uit
<!-- Created by : #USERNAME$! --> <!-- Date/Time : #DATE$! #TIME$! --> <!-- Program : PRO-GEN #VERSION$! --> <!-- File : #FILE$! --> <!-- ***** All rights reserved (C) #YEAR(DATE$)! #USERNAME$! ***** --> <html> <head> <title>#TITLE!</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"> <frame src="#FILE3!" name="keyindex" marginheight="0" marginwidth="0"> <frameset cols="20%,*" frameborder="2" framespacing="2" border="2"> <frame src="#FILE4!" name="index" marginheight="4" marginwidth="4"> <frame src="#FILEDATA!" name="output" marginheight="4" marginwidth="4"> </frameset> </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="#FILEDATA!">gegevens weergeven</a>, maar de index blijft dan achterwege.<br /> </body> </noframes> </html>
Er is slechts een regel toegevoegd aan het standaardbestand. Die regel garandeert dat voor alle tekst UTF-8 als karaktercodering zal worden gebruikt.
Alfabet-balk
De alfabet-balk heeft geen functie meer en wordt weggehaald met het tweede bestand dat is toegevoegd, CSS-KEYT.PTM,
dat er als volgt uitziet:
<!-- Created by : #USERNAME$! --> <!-- Date/Time : #DATE$! #TIME$! --> <!-- Program : PRO-GEN #VERSION$! --> <!-- File : #FILE$! --> <!-- ***** All rights reserved (C) #YEAR(DATE$)! #USERNAME$! ***** --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=#ENCODING$!"> <title>#TITLE!</title> <base target="index"> <link rel="stylesheet" href="#PREFIX!-main.css" type="text/css" media="all"> <link rel="stylesheet" href="#PREFIX!-scrn.css" type="text/css" media="screen"> <link rel="stylesheet" href="#PREFIX!-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="#PREFIX!-pict.gif" class='picture'></td> <td align="center"> <div class='PGheadtitle'>#TITLE!</div> <p /> <div class='contact'> <a href="#HOMEPAGE$!" class='homepage' target="_top">Homepage</a> | <a href="mailto:#EMAIL$!" class='mailto'>E-mail</a> | <a href="#FILEDATA!" class='begin' target="output">Begin</a> </div> <p /> <div class='csskeysdata'> <!-- GK: Onderstaande aanroep blijft staan als commentaar #INDEXKEY4! --> </div> </td> <td align="center"><img src="#PREFIX!-pict.gif" class='picture'></td> </tr> </table> </body> </html>
In regels 31-35 wordt het DIV
-blok hergedefinieerd. Het oorspronkelijke alfabet dat landt op de plaats #INDEXKEY4!
wordt als commentaar opgenomen. Weghalen kan niet, want dan wordt het voor de zoek-functie nodige gendex.txt
niet aangemaakt.
De zoekfunctie
De zoek-functie is te vinden in het bestand CSS-INDX.PTM. Het bestaat uit drie delen. Het eerste deel is grotendeels gelijk als het originele bestand met twee belangrijke aanpassingen:
<!-- Created by : #USERNAME$! --> <!-- Date/Time : #DATE$! #TIME$! --> <!-- Program : PRO-GEN #VERSION$! --> <!-- File : #FILE$! --> <!-- ***** All rights reserved (C) #YEAR(DATE$)! #USERNAME$! ***** --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=#ENCODING$!"> <title>#TITLE!</title> <base target="output"> <link rel="stylesheet" href="#PREFIX!-main.css" type="text/css" media="all"> <link rel="stylesheet" href="#PREFIX!-scrn.css" type="text/css" media="screen"> <link rel="stylesheet" href="#PREFIX!-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: Zonder het onderstaande bestand wordt geen gendex.txt aangemaakt #INDEXDATA! --> <!-- GK: Alle informatie in het div-blok is vervangen door een enkel div-blok voor de zoekfunctie --> <div id="parsed_csv_list"></div> </div> <div class="cssindexlink"> #TEXT$(32640)! <a href="http://www.pro-gen.nl" target="_top">PRO-GEN</a><br/> d.d. #DATE$! </div> </body> </html>
Het DIV
-blok cssindextitle
is verbouwd tot een formulier met een vakje voor achternaam en voor voornaam komt. Die worden met elke karakterverandering doorgegeven aan de zoekfunctie.
In het DIV
-blok cssindexdata wordt het weergeven van een gealfabetiseerde lijst #INDEXDATA!
onderdrukt en vervangen door de lijst die door de zoekfunctie wordt gemaakt.
Het tweede deel is nodig om het gendex.txt bestand te lezen en om te zetten in een tabel die vervolgens afgedrukt kan worden.
<script type="text/javascript"> var data; $( document ).ready(function(){ //Perform Ajax request. $.ajax({ url: 'gendex.txt', type: 'get', contentType: "text/csv; charset=iso-8859-1'", beforeSend: function(jqXHR) { jqXHR.overrideMimeType('text/html;charset=iso-8859-1'); }, success: function(adata){ var results = Papa.parse(adata, { encoding: "iso-8859-1", delimiter: "|", quoteChar: '/', header: false, complete: function (results){ data = results.data; console.log("Success?", results); console.log("Row errors:", results.errors); Zoek(); } }) }, error: function (xhr, ajaxOptions, thrownError) { var errorMsg = 'Ajax request failed: ' + xhr.responseText; $('#content').html(errorMsg); } }); });
Een uitleg van de functie kunt u hier vinden. De essentie is de procedure PapaParse, de rest is voorbereiding en afronding. Als alles goed doorlopen is wordt de functie Zoek
aangeroepen, het derde deel:
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 />"; } } } $("#parsed_csv_list").html(table); }
Heel spannend is het niet, behalve dat hoofd- en kleine letters hier als één worden beschouwd. In regel 30 worden de gevonden namen in de lijst gezet om afgedrukt te worden in de linkerkolom.
Tenslotte
Als u, na het doorlopen van de installatie en de lijstuitvoerprocedure de inhoud van de demo-folder op uw webstek plaatst zou u precies dezelfde werking moeten krijgen als op mijn webstek. U kunt het ook op uw eigen computer werkend krijgen, zie daarvoor deze instructies.