Athenaeum Pro 2013 php templates Aug 2013 -...

Athenaeum Pro 2013

PHP Web Templates

© 2013 SumWare Consulting Ltd

http://www.librarysoftware.co.nz/

http://www.librarysoftware.co.nz

http://www.librarysoftware.co.nz

Table of Contents.................................................................................................Preface 3

Instant Web Publishing 3Athenaeum Pro Custom PHP Templates 3

.......................................................................License & Requirements 4License 4Requirements 4Confirm PHP functionality 5

....................................................................Installation & Configuration 7Installation 7

................................................................................Template Overview 8.............................................................................Data Driven Content 9

..................................................................................Folder Structure 10PHP Files 10Assets 11

.................................................................................................Styles 12..................................................................................The Home Page 14

Navbar 15Sidebar 16Body 17

Background Image 18Banner text 16Home Page announce text 18

.........................................................................................Results List 19

.........................................................................................Detail 0.............................................................................Detail Search page 22

PrefaceThere are 2 main ways to share Athenaeum Pro data across the web

• Instant Web Publishing

• Custom PHP templates

Instant Web PublishingInstant web publishing, which works with FileMaker Pro when peer-to-peer networking or FileMaker Server Advanced (not standard FileMaker Server) is the quickest way to allow your catalogue on-line - that is - the least configuration required by IT support.

However, it has limitations in how objects display and performance does not match custom web publishing.

Athenaeum Pro Custom PHP TemplatesThese templates will provide flexible catalogue search in a framework that is customisable for your organisation.

The templates are completely open to you to customise and, in fact, you are expected to hand them to your web developers for integration with your organisation’s main web site.1

The templates require FileMaker Server or FileMaker Server Advanced, configured to work with your web server.

Athenaeum Pro 2013 PHP templates http://librarysoftware.co.nz/

Printed Tuesday, 27 August 2013 page 3 of 22

1 Because almost every organisation have their own look and behaviour for their web site(s), we cannot hope to provide one set of templates that match them all. This is why they are open.

http://librarysoftware.co.nz


License & Requirements LicenseThese templates are licensed to you with the following restrictions:

• you may not distribute them outside of your organisation to any other party

• you may customise them using the provided templates

• the templates may only be used in conjunction with Athenaeum Pro, however you may integrate other FileMaker Pro solutions you may have hosted on the same FileMaker Server

• all copyrights must be preserved

RequirementsThe templates require FileMaker Server version 12. Your server must meet the requirements described on FileMaker Inc.s specifications page:

http://www.filemaker.com/products/filemaker-server/server-12-specifications.html

Your web server must have a supported PHP version installed, be active and configured to work with FileMaker Server, as described in the FileMaker Server manuals.









Configure FileMaker Server using the Edit Server Deployment link at the lower right of the main screen.

Confirm PHP functionalityYou may test the server using FileMaker Servers Technology tests page.

FileMaker Server installs, by default, with a database called FMServer_Sample.fmp12

Test your PHP installation by enabling the database and ensuring the PHP column is ticked.

Then open the FileMaker Server technology tests page in your web browser.

Open your web browser and open the page at the IP address of your server, port 16000.

E.g. http://ararimu.local:16000

Or http://ks01:16000

Or http://192.168.1.250:16000

Then click the Technology tests page:



http://ararimu.local:16000

http://ararimu.local:16000

http://ks01:16000

http://ks01:16000

http://192.168.1.250:16000

http://192.168.1.250:16000



Click the Test PHP Custom Web Publishing link:

and confirm you see a green light next to the PHP web publishing results and a set of search results:





Installation & Configuration InstallationInstallation is relatively simple - copy the folder of templates to an appropriate location on your FileMaker Server web root, name the folder appropriately and then customise the parts that you wish to modify.

The name of the folder becomes part of the URL or web path that is entered into the browser. You can shorten the folder name (e.g. to something like ap) to make URLs easy to type or remember, however, you are likely to be linking to the site via centralised bookmarks anyway.

Better still, have your network administrator create a domain entry for the main index page.

File permissions must conform to those expected by the web server.

CacheThe web templates write some data extracted from Athenaeum to a cache folder to improve responsiveness.

The cache folder must be created outside (“below”) the web folder and the path to that cache folder must be set in apfunctions.php.

<?php

function cachePath() { # specify the path to the cache folder (best below web root) return '../../../cache/' ;}

Here, the cache folder is 3 folders below Athenaeum web templates folder and is called “cache”.

This folder must be “world” writable (which is why it has to be outside of the web domain).





Template OverviewThe Athenaeum PHP templates are a set of PHP/HTML templates that allow you to search Athenaeum Pro 2013 hosted on your FileMaker Server with web publishing enabled.

The templates are provided as a core, intended to be styled by each organisation to match their own look and feel.

There are two sets of templates to choose from:

• Anonymous templates that do not require log-in and use the default "guest" account and password ("web" and no password)

• Templates requiring users log in with their own account and password, either set up by the librarian or an active directory log in if your FileMaker Server is configured so.





Data Driven ContentThe content of web pages displayed using these templates is extracted from Athenaeum.

Search results and details of items in those results come directly from the catalogue.

However, the templates also look to Athenaeum for other information:

• The media database for book covers, location images and other images such as QR codes

• The borrower database for names and privileges of the logged in user (in the authenticated templates)

• The issues database for the list of issues for the logged in user (with overdue items so marked)

• The reserves database for list of reserves a borrower might have (updated in real time)

• The preferences database for

• Home page content

• Side bar content - e.g. Notices, popular links

• Organisation name in the banner

• Names of catalogue custom fields





Folder StructureThe templates have a rigidly defined structure. The names of these files are case sensitive and must not be changed, unless you understand how PHP and HTML work and can make the necessary adjustments.

At the top level are the basic PHP files and the assets folder.

PHP FilesThe landing or Home page is the index.php and displays notices and provides basic navigation and search capability.

When a fast find or a detail search is performed, the results are displayed in list form using findresults.php.

The results page lists your results in blocks of about 40 items, with each item linked to a detail page (itemdetail.php).

The detail page for each item shows, as you might expect, the details for each item, a list of subjects, book covers, location images, alternate images that the librarian might have added.

The detail search page ( detailsearch.php ) allows patrons to search the catalogue using more refined criteria that using the search widget.

The container.php file is a bridge that allows the templates to convert filemaker container data into images and pdfs that can be displayed in a web browser.





AssetsThe assets folder contains style sheets, image resources, javascript and php includes used by the templates.





StylesThe framework for the templates are built around Twitter Bootstrap

http://twitter.github.io/bootstrap/

This is a powerful set of templates and are well documented at the above link. They provide a modern presentation, which adapt to a variety of presentation devices (desktop, tablet or phone) and are pretty slick.

We use only a fraction of what Bootstrap has to offer. You can dive into the css, if that is your wont, or you can adjust the elements in

assets/css/override.css

to provide some simple customisations.

For example, to change the image on the home page, adjust the following selector:

.hero-unit { background-image: url(../img/full_non-fiction-librarysignage.jpg);}

(don’t forget to place your own image2 in the assets/img/ folder).

To define a different colour for the main heading text in the next css selector:

.hero-unit h1 { color: yellow; }

For a different background colour or effect, change the .navbackground element

.navbackground { /* background-color: rgb(0, 84, 61); */ background-color: navy ; }

That example comments out the green background and uses a navy background instead.



2 keep your images as light as possible for maximum responsiveness





Or, maybe, go nuts and add a gradient background (this example partially handles Internet Explorer’s poor support for web standards):

.navbackground {background: #4c4c4c; /* Old browsers */background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%,

#666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */

background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

}

That looks complex, however the code is simply copied from a web page for generating CSS, such as:

http://www.colorzilla.com/gradient-editor/







The Home Page

The landing page for the templates have the following components:

1. Navbar

2. Sidebar

3. Body

4. Footer





ContentThe content of the sidebar, and home page body banner are pulled from the Athenaeum preferences.

The librarian can change the content inside Athenaeum which will reflect on the web pages.3 (“hero”) heading

NavbarA navbar across the top with links to:

• The Home Page

• Detail Search Page

• Popular items Search Page

The links are interactive and will highlight when the cursor hovers above them.

The navbar is drawn by includes/navbar.php and is an unordered list: <ul class="nav"> <li><a href="index.php">Home</a></li> <li><a href="detailsearch.php">Detail Search</a></li> </ul>

Add your own list items after the last list item.

Note that the “Popular” link is, in fact a custom search. It uses some in-line javascript and a form to achieve it’s purpose:

<li><a href="javascript:document.PopularItems.submit()">Popular</a><form name="PopularItems" action="findresults.php" method=POST> <input name="-lay" type="hidden" value="catalog_fastfind"> <input name="-findtype" type="hidden" value="popular"> <input name="-max" type="hidden" value="40"> </form></li>



3 The PHP templates use “caching” to speed up most access. The cache refreshes every 30 minutes and changes in preferences may take that long to flow through to the web pages.



Sidebar

• The sidebar contains a fast find widget (the fastest way to search the catalogue)

• Notice text that will appear on every page

• Links to other resources that the librarian may consider relevant

The structure of the sidebar are defined in the file Assets/includes/sidebar.php

The content for the sidebar is extracted from the Athenaeum preferences:

Sidebar links have two components:

• A “clickable” descriptor that is visible on the web page

• A link that is referenced when the user clicks on the descriptor

Sidebar links need both components. If you omit either, the templates will ignore the entry.

You may have up to 8 links in the sidebar.





Body

The body of the home page consists of:

• Banner text

• Background image

• Home Page heading

• Home Page body copy

Banner textThe banner text for the page is defined in the registered organisation name in Athenaeum:

The background image is defined in assets/css/override.css

in the .hero-unit selector:.hero-unit h1 { color: white; text-shadow:2px 2px 4px #b8b8b8;}





Background ImageThe background image is defined in

assets/css/override.css

in the .hero-unit selector

Home Page heading

Adjust the heading in the Athenaeum preferences to suit your content.

Home page body copyEnter the copy that you would like your library patrons to see when they land on the home page.

Don’t enter html or php code into Athenaeum as these will be stripped out and ignored.





Results ListThe results list is a set of results formatted in a table, wrapped with the aforementioned header and sidebar:

Click any of the blue text links to see details for the clicked item.





Detail PageThe detail page shows data extracted from the Athenaeum catalogue, with

• the Title and Author centre-stage;

• the basic bibliographic information to the right,4

• clickable subjects below that;

• notes, custom 1, 2 and 3 occupying the main content of the page

• These fields are presented in a clickable “tab” object

•

• A tab for these fields will not be drawn, if there is nothing in the field

• The names of the custom fields and hence the tabs is drawn from the Athenaeum preferences

•

• a book cover, if stored

• a location graphic, if stored

• URL

• if a URL is stored with the item, then an iframe is included below the page showing the content of that web page without leaving the catalogue detail.



4 Note that most versions of Microsoft Internet Explorer do not render standards compliant web pages reliably. The bibliographic information might display below the main content. Modern versions of Internet Explorer are getting better and Microsoft are working hard to catch up (really!). Please use at least version 9 of Internet Explorer, preferably 10



Imagine that the librarian had specified the following URL in the URL field of the catalogue item:

http://www.goodreads.com/book/show/1040704.They_Wore_What_

Then the detail web page would have at the bottom something like this (inside the red square) - fully interactive view into that web page.







Detail Search pageClicking the Detail Search in the navbar will bring up the detail search page.

You can specify the fields that you want Athenaeum to search to better refine your search.

Doing so and clicking Find will return you to the results lists.





Athenaeum Pro 2013 php templates Aug 2013 -...

Documents

Transcript of Athenaeum Pro 2013 php templates Aug 2013 -...