{"id":20,"date":"2016-03-17T10:47:16","date_gmt":"2016-03-17T10:47:16","guid":{"rendered":"http:\/\/www.librarypi.com\/?page_id=20"},"modified":"2019-05-31T21:40:25","modified_gmt":"2019-05-31T21:40:25","slug":"lp-stage-1","status":"publish","type":"page","link":"https:\/\/www.librarypi.com\/index.php\/lp-stage-1\/","title":{"rendered":"LP Stage 1"},"content":{"rendered":"

After the initial setup of the services, we can install the PHP files to implement Stage 1 of the Library Pi.\u00a0 This stage will allow us to upload zip files with JPGs, store the files and information in a database, and then use the Internet Archive BookReader component to view books.<\/p>\n

Note that you can download a zip file of a Raspberry Pi disk image backup of Stage 1 here ( NOTE: you will need to run sudo raspi-config<\/strong> to expand file space<\/em>)<\/p>\n

\n\n
\n
\n
\n
\"Icon\"<\/div>\n
\n

Library Pi Stage 1 Image<\/a><\/h3>\n
<\/i> 1 file(s) <\/i> 453 MB<\/div>\n <\/div>\n
\n Download<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<\/div>\n

Or, you can also just download the Zip file with the Stage 1 PHP files here (you still need to create the database, and setup lp_dbconf.php):<\/p>\n

\n\n
\n
\n
\n
\"Icon\"<\/div>\n
\n

PHP Files for stage 1<\/a><\/h3>\n
<\/i> 1 file(s) <\/i> 311.19 KB<\/div>\n <\/div>\n
\n Download<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<\/div>\n

At the end of this page is a set of steps to test the new website.\u00a0 You can download a small sample book to use here:<\/p>\n

\n\n
\n
\n
\n
\"Icon\"<\/div>\n
\n

Sample Book: The Jungle<\/a><\/h3>\n
<\/i> 1 file(s) <\/i> 11.86 MB<\/div>\n <\/div>\n
\n Download<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<\/div>\n

Data Model<\/h3>\n

The first stage data model will be very simple, and just support book and page data using 2 tables.\u00a0 You must use the MySQL script below to create the database as well as the two tables and indices:<\/p>\n

create database if not exists\u00a0 lp;\nuse lp;\n\ncreate table if not exists lp_book(\n\u00a0id integer\u00a0 NOT NULL AUTO_INCREMENT,\n\u00a0title varchar(128),\n\u00a0ukey varchar(32),\n\u00a0PRIMARY KEY PK_lp_bookz (id),\n\u00a0INDEX ilp_book (ukey)\n);\n\ncreate table if not exists lp_page(\n\u00a0id integer\u00a0 NOT NULL AUTO_INCREMENT,\n\u00a0book_id integer,\n\u00a0seq integer,\n\u00a0height integer,\n\u00a0width integer,\n\u00a0status char(1),\n\u00a0filename varchar(256),\n\u00a0PRIMARY KEY PK_lp_page (id),\n\u00a0INDEX ilp_page (book_id)\n);<\/pre>\n
Use MySQL Workbench or your MySQL client to execute the above against your MySQL database.<\/p>\n
The lp_book table stores a unique ID for our books, as well as a title and a ukey.\u00a0 The ukey field will hold a unique 32-character key for the book.\u00a0 The ukey value will be used in URLs to identify the book, so visitors can\u2019t just modify the URL and start stealing our book data.\u00a0 The lp_page table holds information about the pages for the book.\u00a0 One book will have one or more pages.\u00a0 The pages have a seq field so we can control their order later, as well as a status field that we will use for additional processing later.<\/p>\n
BookReader<\/h3>\n
We are going to be using the Internet Archive BookReader for displaying the pages.\u00a0 You can find information and downloads on the book reader here: https:\/\/openlibrary.org\/dev\/docs\/bookreader<\/a><\/p>\n
This open source reader should be setup in a bookreader sub folder of \/var\/www\/html, or where your website will be installed.\u00a0 The files in this folder should be as follows:<\/p>\n
\"BookReader1\"<\/p>\n
The PHP files below, specifically the reader.php file, will be using these files and expect them in this specific location.<\/span><\/p>\n
PHP Files<\/h3>\n
These PHP files can be installed in the \/var\/www\/html folder of your Raspberry Pi.\u00a0 You should remove the index.html file that is there now.\u00a0 We are going to put most of our logic into a reusable \u2018LP\u2019 class, so you will find that most of the PHP files are pretty barren (except for lp.php where the LP class resides). Keep this mind as you review the PHP files: all the real work is done in lp.php.<\/p>\n
You can also just download the files:<\/p>\n
\n\n
\n    
\n        
\n            
\"Icon\"<\/div>\n            
\n                
PHP Files for stage 1<\/a><\/h3>\n                
<\/i> 1 file(s) <\/i> 311.19 KB<\/div>\n            <\/div>\n            
\n                Download<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/div>\n
You can just download the PHP files for the website, but they are described here:
\nlp_dbconf.php<\/strong>
\nThis file serves to centralize our database connection settings and code.\u00a0 It\u2019s not very robust now, but can be enhanced later for things like failures to connect to the database.\u00a0 All other modules we create will include this for simple access to our MySQL database.<\/p>\n
<?php\n $GLOBALS[ \"db_srvr\" ] = \"localhost\";\n $GLOBALS[ \"db_user\" ] = \"root\";\n $GLOBALS[ \"db_pass\" ] = \"(your MySQL password)\";\n $GLOBALS[ \"db_data\" ] = \"lp\";<\/pre>\n
@ $GLOBALS[\"db\"] = mysqli_connect( $GLOBALS[ \"db_srvr\" ],\n      $GLOBALS[ \"db_user\" ], $GLOBALS[ \"db_pass\" ], \n      $GLOBALS[ \"db_data\" ] );\n\u00a0if( !$GLOBALS[\"db\"] )\n\u00a0\u00a0die( \"Database connection failed.\u00a0 Please check settings in \" . __FILE__ );<\/pre>\n
function db()\n{\n    return $GLOBALS[\"db\"];\n}\n?><\/pre>\n
index.php<\/strong>
\nThis is the home page.\u00a0 It\u2019s going to display our menu and a list of books to be read.\u00a0 Of course, it doesn\u2019t really do much, except ask the LP class to do the real work:<\/p>\n
<?php\n include_once( 'lp.php' );\n $lp = new LP();\n $lp->HTMLPageTop();\n echo $lp->BookList();\n $lp->HTMLPageBottom();\n?><\/pre>\n
upload.php<\/strong>
\nUpload.php will offer the users a very simple upload form, and also accept their uploaded files.\u00a0 Again, lp.php does the real work.<\/p>\n
<?php\n include_once( 'lp.php' );<\/pre>\n
 $lp = new LP();\n $lp->HTMLPageTop();\n \/\/ If we find this field, the user posted data.\u00a0 Save it\n if( isset( $_POST[ \"ispost\" ] ) )\n {\n    if( $lp->AddBook( $_POST[ \"book_title\" ]) )\n       echo \"Uploaded\";\n    else\n       echo \"Error: \" . $lp->Err;\n }\n else\n { \/\/ If they didn\u2019t post data, display the input form\n ?>\n <form method=\"post\" action=\"upload.php\" enctype=\"multipart\/form-data\">\n <input type=hidden name=ispost value=\\\"Y\\\">\n Book title: <input type=text name=book_title><br \/>\n Zip file: <input type=\"file\" name=\"zip_file\" id=\"zip_file\"><br \/>\n <input type=\"submit\" value=\"Upload\" name=\"submit\"><br \/>\n <\/form>\n <?php\n }<\/pre>\n
 $lp->HTMLPageBottom();\n ?><\/pre>\n
The key to what\u2019s going on above is that we are seeing if a POST variable exists.\u00a0 If it doesn\u2019t then we display an HTML form to the user so they can upload and name a book.\u00a0 If the post variable does exist, then we call the AddBook function in the lp class to actually add it to the system.<\/p>\n
reader.php<\/strong>
\nThis is the second most complicated file here.\u00a0 This is the reader page that will allow users to view the uploaded books using the Internet Archive BookReader.\u00a0 Most of the code here is for setting up the BookReader for use.\u00a0 We are also using a healer file, reader.js which contains most of the Javascript needed to implement BookReader.\u00a0 See the BookReader section for more information.<\/p>\n
<?php\n include_once( 'lp.php' );\n \/\/This section sets up the headers needed by BookReader\n   $Header =\n \"<link rel=\\\"stylesheet\\\" type=\\\"text\/css\\\" href=\\\"bookreader\/BookReader.css\\\" \/>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/jquery-1.4.2.min.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/jquery-ui-1.8.5.custom.min.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/dragscrollable.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/jquery.colorbox-min.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/jquery.ui.ipad.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/jquery.bt.min.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"bookreader\/BookReader.js\\\"><\/script>\\n\" .\n \"<script type=\\\"text\/javascript\\\" src=\\\"reader.js\\\"><\/script>\\n\";<\/pre>\n
    $lp = new LP();\n    $BookKey = isset( $_GET['bk'] ) ? $_GET['bk'] : \"\";\n    $lp->LoadPages( $BookKey );\n    $lp->HTMLPageTop( \"Reader\", $Header);\n ?>\n <div id=\"BookReader\">\n BookReader <br\/>\n <noscript>\n <p>\n The BookReader requires JavaScript to be enabled.\n <\/p>\n <\/noscript>\n <\/div>\n <?php\n   \/\/ This section sets up javascript needed by BookReader\n   $lp->HTMLPageBottom();\n   echo \"<script>\\n\".\n   \"\u00a0\u00a0var br = new BookReader();\\n\".\n   \"\u00a0\u00a0var CurPageIndex = 0;\\n\" .\n   \"\u00a0\u00a0var PgIDs = [$lp->PageIDs];\\n\".\n   \"\u00a0\u00a0br.pageWidths = [$lp->PageWidths];\\n\".\n   \"\u00a0\u00a0br.pageHeights = [$lp->PageHeights];\\n\".\n   \"\u00a0\u00a0br.BookKey = '$BookKey';\\n\" .\n   \"\u00a0\u00a0br.numLeafs = $lp->PageCount;\\n\".\n   \"\u00a0\u00a0br.bookTitle = \\\"Demo\\\";\\n\" .\n   \"\u00a0\u00a0br.bookUrl = \\\"Demo\\\";\\n\" .\n   \"\u00a0\u00a0br.logoURL = \\\"Demo\\\";\\n\" .\n   \"\u00a0\u00a0SetupBookReader( br );\\n\";\n ?>\n br.init();\n \/\/ Disable items as needed\n $('#BRtoolbar').find('.read').hide();\n $('.info').hide();\n $('.thumb').hide();\n <\/script><\/pre>\n
Basically, all we are doing in the above code is calling the LoadPages method of the LP class to load data, and then using it in the javascript near the end.<\/p>\n
lp.php<\/strong>
\nFinally, we get to the core of the Library Pi coding, lp.php.\u00a0 This php module will create the LP class that we have used in all the other PHP files and allows us to keep them simple and light modules.\u00a0 To keep this page simple, we are not listing the entire contents of this file, just describing the methods in it and some key points.\u00a0 Please see the download links to retrieve the lp.php class file.<\/p>\n
One of the first things to noe about lp.php is that it includes lp_dbconf.php in order to gain access to the database files.<\/p>\n
Functions in the LP class:<\/p>\n
function HTMLPageTop( $Title = “LibraryPi”, $Header=””, $Script=”” )<\/span>
\nfunction HTMLPageBottom( $Script = ” )<\/span>
\nThese methods output consistent page tops and bottoms, including a menu on the top.\u00a0 It makes creating consistent pages easier and will help later with authentication.<\/p>\n
function UKey()<\/span>
\nGenerates a unique 32-character key for each book<\/p>\n
function AddBook( $Title )<\/span>
\nAccepts an uploaded ZIP file, and decompresses the JPG files into the uploads folder.\u00a0 It then adds each file into the lp_page table, as well as a book record into the lp_book table.<\/p>\n
function BookList()<\/span>
\nReturns a list of records in the lp_book table in HTML format, with a link to the reader.php page to read that book.<\/p>\n
function LoadPages( $BookKey )<\/span>
\nLoads the pages for a specific book, and provides access to things like how many pages, page dimensions and so on.\u00a0 This information is used by the reader.php file, to hand off data needed to the Internet Archive BookReader component in order to view books.<\/p>\n
function GetPageFilename( $BookKey, $PageID )<\/span>
\nThis function is called to return a URL for a specific page in a book.\u00a0 The BookReader component will need this data to display pages.<\/p>\n
function OutputPageAndExit( $BookKey, $PageID )<\/span>
\nThis method will open a page JPG file and output it.\u00a0 This is alao used by BookReader to display pages.<\/p>\n
reader.js<\/strong>
\nThe reader.js file is used by reader.php.\u00a0 It contains much of the code required to implement the BookReader component.\u00a0 Most of the code is described in the BookReader website, as well in the BookReader demo pages.\u00a0 The BookReader component needs to know the width and height for the pages it is going to display, as well as a URI that can be used to display the JPG file for the page.
\nIn our implementation, we are implementing JavaScript arrays to keep the ID, width, and height for all the pages.\u00a0 The specialized code that we are implementing in this file, that will use these arrays, are as follows:<\/p>\n
br.getPageWidth = function (index) {\n return this.pageWidths[ index ];\n }<\/pre>\n
br.getPageHeight = function (index) {\n return this.pageHeights[ index ];\n }<\/pre>\n
br.getPageURI = function (index, reduce, rotate) {\n url = \"util.php?act=pj&bk=\" + this.BookKey + \"&pid=\" + PgIDs[ index ];\n return url;\n }<\/pre>\n
You can see now how the BookReader component knows to call out util.php module for displaying images, thanks to the getPageURI method above.<\/p>\n
Testing Stage 1<\/span><\/h3>\n
If you don’t have a sample book, download one here:<\/p>\n
\n\n
\n    
\n        
\n            
\"Icon\"<\/div>\n            
\n                
Sample Book: The Jungle<\/a><\/h3>\n                
<\/i> 1 file(s) <\/i> 11.86 MB<\/div>\n            <\/div>\n            
\n                Download<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/div>\n
With our MySQL tables created, and all the PHP files in place (and proper lp_dbconf.php settings), we should be able to access the main page:<\/p>\n
\"Stage1Test1\"<\/p>\n
Click the Upload link, then enter The Jungle for the title, and use the TheJungle.zip demo file, then click Upload:<\/span><\/p>\n
\"Stage1Test2\"<\/p>\n
The page should then show \u2018Uploaded\u2019 (it may take some time to upload, be patient). Click the Home link to go back to the home page, and you should now see the book listed:<\/p>\n
\"Stage1Test3\"<\/p>\n
Clicking that link, should show the BookReader:<\/span><\/p>\n
\"Stage1Test4\"<\/a><\/p>\n
Proceed to Stage 2<\/a> to start adding the OCR and text searching abilities.<\/p>\n
\n\n
\n    
\n        
\n            
\"Icon\"<\/div>\n            
\n                
Library Pi Stage 1 ImageB<\/a><\/h3>\n                
<\/i> 1 file(s) <\/i> 0.00 KB<\/div>\n            <\/div>\n            
\n                Download<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"
After the initial setup of the services, we can install the PHP files to implement Stage 1 of the Library Pi.\u00a0 This stage will allow us to upload zip files with JPGs, store the files and information in a database,…
Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":30,"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/www.librarypi.com\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}