Zoekfunctie voor Genealogische informatie op webstek

Herzien op 11 september 2020 vanwege een vergaande herziening van de methode.

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 vervolgens A in te tikken. We gaan naar de volgende pagina door de Enter-toets in te drukken.
Hier kiezen we
- Soort uitvoer: Tekstuitvoer en diversen
- Uitvoerdefinitie: Relatieschema of Standaard personenuitvoer
- De andere drie kunt u vrij kiezen.
- en bij Invoer akkoord drukken we de de Enter-toets in.
Bij Schijfuitvoer stuurprogramma kiezen we CSS
Het kan geen kwaad ook even de Instelling Internet adressen bij te werken.
Kies Uitvoer naar schijf en voor deze demonstratie heb ik gekozen voor 3 frames - Index links, ABC met afbeelding boven, Inhoud rechts, een Gele achtergrond en Personen-uitvoer met terugverwijzingen (t.b.v. HTML).
Verder bij Deze HTML-uitvoer opslaan als gesplitst per echtpaar (niet altijd mogelijk), De index ook opsplitsen in bestanden per letter Nee want dat wordt later niet weergegeven, de naam van het bestand demo 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)&amp;&amp;(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.

Ger Koper's blog