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