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); }
Read more by ByWater Partners