Koha ILS

Guest Post: Electronic library cards in Koha

Today we have a guest post by Paul Landers of the Texas Tech University Health Sciences Center, Preston Smith Library.


Inspired by the airlines’ electronic boarding passes, we are beta-testing some custom code on our Koha server to allow our patrons to self-service create a library eCard photo on their smartphone. See how it works here: http://www.ttuhsc.edu/libraries/ecards.aspx

Our solution relies upon a single new custom HTML file on our Koha server, a jQuery library to generate the barcodes, and some jQuery added to our OPAC. Also, Kyle had to add a patch to our Koha instance to expose the non-editable patron barcode field in the OPAC.

If any libraries would like to see it in action, here is a Hello World account for our OPAC:

eRaider username: hello_world
password: world


Our custom code:

  • NOTE – we had to replace some older barcode readers which could not read smartphone screens
  • Prerequisite – Koha must expose the non-editable patron barcode field in the OPAC.
  • Requires the jQuery barcode library (http://barcode-coder.com/en/barcode-jquery-plugin-201.html)
  • Must enable CORS (Cross Origin Resource Sharing) in Apache on the Koha server
  • Create the following custom HTML file on the Koha server:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="jquery_min.js"></script>
<script type="text/javascript" src="jquery_barcode.min.js"></script>
<script type="text/javascript">

//define our global
var cardnumber = "ERROR";

$(document).ready(function() {
//anonymous, self-executing function
    $(function () {
        if (window.opener != null && !window.opener.closed) {
// get some data from the parent window
            var parent = $(window.opener.document).contents();
            var cardnumber = parent.find("label:contains('Card number')").next('input').val();
            var surname = parent.find("#borrower_surname").val();
            var firstname = parent.find("#borrower_firstname").val();
            //var phone = parent.find("#borrower_phone").val();
            //var phonepro = parent.find("#borrower_phonepro").val();
            //var email = parent.find("#borrower_email").val();
            //var emailpro = parent.find("#borrower_emailpro").val();
        $("#surname").html(surname);
        $("#firstname").html(firstname);

$("#bcTarget").barcode(cardnumber, "code39", {barWidth:2, barHeight:100, moduleSize:3, showHRI:true});
         }
  });
});
</script>

<style>
img.center {
display:block;
margin-right:auto;
margin-left:auto;
}

#container {
max-width:500px;
border:solid;
border-width:2px;
}

#container2 {
width:350px;
margin: 0 auto;
}

p.center {
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<img class="center" src="https://somelibrary.com/path/to/logo.png" />
<p class="center"><span id="surname">Lastname</span>, <span id="firstname">Firstname</span></p>
<div id="container2">
<div id="bcTarget"></div>
</div>
<p> </p>
</div>
</body>
</html>
  • Add the following jQuery to the OPAC:

 

//ecard barcode creator - requires a custom html file also be served by the Koha server itself.
// create the cardmaker function:
function cardmaker() { 
window.open('https://koha.somelibrary.edu/path/to/custom/html/file/','librarycard','height=300,width=500');
}

//add a new eCard button underneath the cardnumber field on the OPAC My Details page:
if (window.location.pathname.match(/.*opac-memberentry\.pl$/)) {
jQuery("label:contains('Card number')").parent().after('<li><button type="button" id="ecard">eCARD</button></li>');
jQuery('#ecard').click(cardmaker);
}