Ancestry Pages: Development Notes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum qui, earum eos omnis ab unde sapiente quam, fuga dolorem aliquam.

In order to prevent unwanted changes to the database, a simple user log in system was implemented. Any data edit page -- a page that enables changes to be made to the data -- requires that the user be logged in. There is a single user, and there is no user interface for registering (the single user was inserted into the database manually).

A 'login' item was added to the menu bar. After the user has logged in, the item appears as 'logout', and the phrase 'logged in as name' appears at the right end of the menu bar.

The logged in status of the user is maintained in a PHP session variable ($_SESSION['loggedIn']). When each page in the site is rendered, a javascript variable is set based on the value of $_SESSION['loggedIn'], and the text of the login/logout menu item is set to the appropriate string.

<?php
  if ($_SESSION['loggedIn'])
    {
?>
  var loggedIn = true; 
  var userName = '<?php echo $_SESSION['userName']; ?>';
<?php
    }
    else
    {
?>
  var loggedIn = false; 
<?php
    }
?>
  // If logged in when page loads, put Logout on the menu, else put Login
  // Also set or clear the 'logged in as' item at the right side of the menu bar
  if (loggedIn) 
    {
      $('#logMenuItem').html('Logout');
      $('#userMenuItem').html('logged in as ' + userName);
    } 
    else 
    {
      $('#logMenuItem').html('Login');
      $('#userMenuItem').html('');
    }

When the login/logout menu item is clicked, if it says 'login', then the login form is displayed; if it says 'logout', then a PHP routine is called using ajax, and $_SESSION['userName'] is set to false.

    $("#logMenuItem").on("click", function() 
    {
      if ($(this).html()=='Login')
      {
        $('#loginModal').modal('show');
      }
      if ($(this).html()=='Logout')
      {
        $.ajax(
                'logout.php',
                {
                  type: 'POST',
                  success: function(data, status, xhr) 
                  {
                    alert('you have been logged out');
                    loggedIn = false;
                    $('#logMenuItem').html('Login');
                    $('#userMenuItem').html('');
                  },
                  error: function (jqXhr, textStatus, errorMessage){alert('Error in ajax logout call: ' + errorMessage);}
                });
      }
    });

When the login form is submitted a PHP routine is called to check the entered username and password.

    $('#loginform').on('submit', function(e)
      {
        e.preventDefault(); 
        var username = $('#username').val();
        var password = $('#password').val();
        $.ajax
        (
          'checkLogin.php', 
          {
          type: 'POST',
          data: { username: username, password: password },
          success: function(data, status, xhr) 
          {
            var rslt = data.substring(0, 1);
            if (rslt=='n') 
              {
                var msg = 'Invalid username and/or password';
                $('#invalMsg').html(msg);
              }
            if (rslt=='y')
              {
                var userName = data.substring(1);
                loggedIn = true;
                $('#loginModal').modal('hide');
                $('#invalMsg').html('');
                $('#logMenuItem').html('Logout');
                $('#logMenuItem').removeClass('logMeIn');
                $('#logMenuItem').addClass('logMeOut');
                $('#username').val('');
                $('#password').val('');
                $('#loginform').removeClass('was-validated');
                $('#userMenuItem').html('logged in as ' + userName);
              }
          },
          error: function (jqXhr, textStatus, errorMessage){alert(errorMessage);}
          }); // End of ajax call
      
      }); // End of respond to submission of the log in form.

  session_start(); 

  $rslt = 'n';

  $userIn = $_POST['username'];
  $pswdIn = $_POST['password'];

  //-----------------------------------------------------------
  // Code here to open the database...

  //-----------------------------------------------------------
  // Confirm that this username is registered
  $stmt = $pdo->query("Select * From ancUser Where username='$userIn'");
  if ($stmt->rowCount()==1)
  {
    $row = $stmt->fetch();

    //-----------------------------------------------------------
    // Set parameters for crypt
    $Blowfish_Pre  = '$2a$05$'; // Use blowfish for 5 rounds.
    $Blowfish_End  = '$';

    //-----------------------------------------------------------
    // Hash the input password and compare to the saved hash
    $hashOfInput = crypt($pswdIn, $Blowfish_Pre . $row['salt'] . $Blowfish_End);
    if ($hashOfInput == $row['password'])
    {
      $_SESSION['loggedIn'] = true;
      $_SESSION['userName'] = $userIn;
      $rslt = 'y' . $_SESSION['userName'];
    }
  }

  //-----------------------------------------------------------
  // Return the result
  echo $rslt;

Conversion of Markdown Here syntax to HTML is performed on the notes fields of an individual's documents, and on the text of their biography. A small subset of Markdown has been implemented, and one custom syntax has been defined and implemented.

markDown($theString, $doParas=false), which is in /data/codeLib.php, returns the result of converting all Markdown Here syntax in $theString to HTML. The $doParas parameter controls the way in which paragraphs are formatted as detailed in the "Line Breaks" section below.

Line Breaks

Before inserting paragraph tags, any \r\n sequences are converted to \n. Each occurance of a pair of new line characters then generates a paragraph break. If the $doParas parameter is true, each paragraph is styled with the bioP class, which uses a serif font and applies inter-paragraph spacing. $doParas is passed as true when generating the HTML for the biography page of an individual, but not when generating the biography preview on the family.php page, and not when generating the text of a note on an individual's documents page.

Emphasis

**some text** is converted to <strong>some text</strong>

Italics

*some text* is converted to <i>some text</i>

Popup Images

In order to enable biographies and document notes to include links that, when clicked, bring up a popup image window, we've extended the Markdown syntax for links. This syntax: @click me@(title|file) generates a button link that pops up an image window as described below in the Popup Images section. If the 'file' string does not start with 'http', the string 'http://brucewatkins.org/ancestry/images/' is prepended before the button code is generated.

Tables

about tables

Links Opening in a New Tab

Many document note fields include one or more links, e.g. to a page on Wikipedia or to a location on Google Maps. The hassle of typing the HTML for these links prompted the implementation of some Markdown syntax.

[click me](http://whatever), is converted to <a href="http://whatever">click me<a>. The code in the markDown function that processes Markdown link syntax is illustrative of the approach used to process each type of Markdown syntax, namely a while loop that does a regular expression match for the syntax, replacing the matched string with the equivalent HTML.

  //=============================================================
  // Links
  //  Convert [link text](linkUrl) into
  //    <a href="linkUrl" target="_blank">link text</a>
  //
  $pat = "\[([^\]]+)\]\(([^\)]+)\)";        // [link text](link url)
  $pat = '/^([^\[]*)' . $pat . '(.*)$/s';   // everythingBefore [link text](link url) everythingAfter
  while (preg_match($pat, $rslt, $matches))
  {
    $rslt = $matches[1] . 
            '<a href="' . $matches[3] . '" target="_blank">' . 
            $matches[2] . '</a>' . 
            $matches[4];
  }

Documents For an Individual

 $sql  = '';
 $sql .= "Select Distinct ancDoc.ID As ID, ancDoc.year As Year, "                                             .  
         "Concat(substring(Monthname(str_to_date(ancDoc.month,'%m')), 1, 3), ' ', ancDoc.day) As Date, " . 
         "Replace(ancDocType.typeText, ' ', ' ') As Type, "                                              . 
         "Concat(ancPerson.fName, ' ', ancPerson.lName) As Who, "                                        . 
         "ancDoc.notes As Notes "                                                                             . 
         "From ancDocsOwned, ancDoc, ancPerson, ancDocType "                                                  . 
         "Where ancDocsOwned.idPerson=$personID "                                                             . 
         "And ancDoc.ID=ancDocsOwned.idDoc "                                                                  . 
         "And ancPerson.ID=ancDoc.idPerson "                                                                  . 
         "And ancDocType.ID=ancDoc.idDocType "                                                                . 
         "Order By ancDoc.year, ancDoc.month, ancDoc.day";
 $stmt = $pdo->query($sql);
 $results = $stmt->fetchAll();