10 March 2016

Author: Jean-Claude Dauphin

jc.dauphin@gmail.com

Web-JISIS 10 March 2016 Reference Manual

I. Web J-ISIS Architecture

Web-JISIS is a Rich Internet Application (RIA) whose goal is to develop a web top application
that has the responsiveness, and look and feel of J-ISIS.

Web-JISIS uses a Three-Tier Architecture

 Tier 1: At the client side, Web 2.0 technologies are responsible for the application's
graphical user interface. AJAX is used to communicate between this tier and the
application server in tier 2. Requests are sent with the URL using GET or POST data.
Request and Result data are formatted using JSON, XML, or plaintext.

 Tier 2: the middle tier is also known as the application server, which provides the
business processes logic and the data access. The server in the middle tier is a servlet
container—a Web server capable of running Java-based Web applications (Tomcat, Jetty,
etc). The J-ISIS services (the business rules) are coded in this tier using Java and the
client part of jisis-core.jar library. Requests are passed as messages to the database server
and results are returned. Sockets are used to communicate between this tier with the
client and the database server through TCP/IP.

 Tier 3: the J-ISIS database server provides the business data. The J-ISIS database server
is listening for request on port 1111, requests and results are passed as messages through
TCP/IP.

These are some of the advantages of three-tier architecture:

 It is easier to modify or replace any tier without affecting the other tiers.
 Separating the application and database functionality means better load balancing.
 Adequate security policies can be enforced within the server tiers without hindering the
clients.

Tier 1 - Web-JISIS Client-Side is using Web 2.0 Technologies

From a programming perspective, Web 2.0 is synonymous with AJAX (Asynchronous
JavaScript and XML). The technologies that make up an AJAX interaction are the following:
• HTML/XHTML (Hypertext Markup Language): Used to present information to the user
from within the web browser.
1
 • DOM (Document Object Model): The object structure of the HTML document in the
web browser. By manipulating the DOM with JavaScript, the page rendered to the user
can be modified dynamically without reloading the current page.

• CSS (Cascading Style Sheets): Used to format and style the HTML presented. By
separating formatting from structure, the code can be modified consistently and
maintained more easily. Similarly to the DOM, CSS for the current page can be modified
via JavaScript to dynamically change the formatting without reloading the current page.

• JavaScript: A programming language that can be embedded within HTML documents.

JavaScript code or functions can be executed inline (as the page is processed), in
response to HTML events (by providing JavaScript in the value of HTML attributes), or
triggered by browser events (for example, timers or user events).

• XML (eXtensible Markup Language): The format of the data returned by the server in
response to the asynchronous call from the web browser. The XML response returned is
processed by JavaScript in the web browser, causing changes in the HTML (by
manipulating the DOM or CSS).

• JSON (JavaScript Object Notation): Similar to XML, JSON is a simple format that can
be used to transfer data in both directions between the Web Browser client and the server.
JSON data can be processed within the web browser using JavaScript. The advantage of
JSON is that it can be very easily parsed by JavaScript; in fact, to convert a response of
any size from the JSON transport format to JavaScript objects involves a single call of c a
string). Using JavaScript to process XML is much more involved and requires at least
one line of code to assign a value from the XML document to a JavaScript object.

The JavaScript jQuery Library is used to build interactivity to html pages. It automates
common tasks and simplify complicated ones due to the library’s foundation on standard HTML
and CSS technologies. The Twitter Bootstrap Library is used as a front end framework for
developing responsive web pages. It has a series of ready-made, great-looking user interface
widgets and a comprehensive set of core interaction helpers designed to be implemented in a
consistent and developer-friendly way.

The jQuery Select2 plugin is used for AutoComplete Searching and jqGrid plugin is used for
CRUD (Create, Read, Update and Delete).

Adding Interactivity with JavaScript

JavaScript allows modifying just about every aspect of a Web page: content, styling,
and its behavior to user interactions.

 JavaScript can query and modify DOM and CSSOM.

2
  JavaScript execution blocks on CSSOM.
 JavaScript blocks DOM construction unless explicitly declared as async.

JavaScript is a dynamic language that runs in the browser and allows altering just about every
aspect of how the page behaves: we can modify content on the page by adding or removing
elements from the DOM tree, we can modify the CSSOM properties of each element; we can
handle user input, and much more. Web-JISIS uses extensively JavaScript and jQuery to provide
interactivity.

Responsive web design

Responsive web design is a process of designing and building websites to provide better
accessibility and optimal viewing experience to the user.
With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore
the optimization of sites for mobile devices. Responsive web design is a preferable alternative
and an efficient way to target a wide range of devices with much less efforts.
Responsive layouts automatically adjust and adapts to any device screen size, whether it is a
desktop, a laptop, a tablet, or a mobile phone. Twitter Bootstrap 3 is responsive and mobile
friendly from the start.

Web-JISIS middle tier is using Strut 2 Framework

Servlet technology and JavaServer Pages (JSP) are the main technologies for developing Java
web applications. When introduced by Sun Microsystems in 1996, Servlet technology was
considered superior to the reigning Common Gateway Interface (CGI) because servlets stay in
memory after responding to the first requests. Subsequent requests for the same servlet do not
require re-instantiation of the servlet's class, thus enabling better response time.

The recommended architecture for Java web applications today is called “Model 2”. Model 2 is
another name for the Model-View-Controller (MVC) design pattern.. An application
implementing the MVC pattern consists of three modules: model, view, and controller. The view
takes care of the display of the application (JSP). The model (Action) encapsulates the
3
application data and business logic. The controller (Servlet/Filter) receives user input and
commands the model and/or the view to change accordingly.

Struts 2 is a framework for developing Model 2 applications. It makes development more rapid
because it solves many common problems in web application development by providing these
features:
• page navigation management
• user input validation
• Consistent layout
• Extensibility
• Internationalization and localization
• Support for AJAX

Because Struts 2 is a Model 2 framework, when using Struts 2 you should stick to the following
unwritten rules:
• No Java code in JSPs, all business logic should reside in Java classes called action classes.
• Use the Expression Language (OGNL) to access model objects from JSPs.
• Little or no writing of custom tags (because they are relatively hard to code).

4
 II. Web-JISIS Installation
Web-JISIS is distributed as a Web application archive file (WAR)—A WAR file is basically a
Web application directory that is packaged up using the jar or zip command. It is a common and
convenient way for developers to package and deploy applications.

Web-JISIS3.war

Deployment is the term used for the process of installing a web application (either a 3rd party
WAR or your own custom web application) into the Tomcat/Jetty application server.
Tomcat and Jetty deployments are trivial and requires copying the WAR file into the
$TOMCAT_HOME/webapps or $JETTY_HOME/webapps directory and restarting the
container.

Before you perform the installation ensure you have the following information:

 Know where the directory location of your Tomcat/Jetty install is. [It will now be
referred to as: $TOMCAT_HOME for Tomcat or $ JETTY_HOME for Jetty]

WAR file install

The following steps need to be followed in order to successfully install the application as a
.WAR file. Whatever the war file name is, this will become the name of the top directory once
unzipped and run as an application.

I.e. Web-JISIS3.war would be run in a browser as http://serverlocation:port/Web-JISIS3

1. Stop tomcat or Jetty.

2. Go to the following directory: $TOMCAT_HOME/webapps/ or $JETTY_HOME/webapps

3. Copy the file Web-JISIS3.war to this directory

4. Start Tomcat or Jetty

When Tomcat or Jetty finds such a file, it unpacks it, thereby creating an expanded Web
application, and deploys it.

5
 III. Starting Web-JISIS

First, you need to start J-ISIS on the server machine as it will be the J-ISIS
Database server. Launch J-ISIS from the script or exe file depending on your
server machine operating system. Then you can minimize J-ISIS, but you need to
keep it running.

Then enter http://localhost:8084/Web-JISIS3 in your browser and you should see:

The port 8084 is defined by default in the Tomcat configuration file

WARNING: You should have an Internet connection up and running as some DTD’s and
configuration files are accessed through Internet.

6
 IV. Starting Web-JISIS from a remote machine

You need to point the browser to the Tomcat server machine, for example at home I have a wifi
network with one machine running Tomcat on port 8084 with IP address 192.168.0.13 and on
which Web-JISIS3.war is deployed http://192.168.0.13:8084/Web-JISIS3/

V. Web-JISIS Authentication

Authentication deals with verifying a user's identity. When you authenticate users, you confirm
that they really are who they claim to be. In most applications, authentication is done through a
combination of a user name and password. As long as users choose passwords that are
sufficiently difficult for others to guess, the combination of a user name and password is usually
enough to establish identity.

Web-JISIS authentication is provided by the J-ISIS Database Server Shiro Ini file. This file
named “shiro.ini" is located in the /conf subfolder of jisis_suite folder. You can read “chapter 28
Authentication And Authorization in J-ISIS” to get further details.

Default J-ISIS 'Shiro.ini' File

[main]
#cm = org.apache.shiro.authc.credential.HashedCredentialsMatcher
#cm.hashAlgorithm = SHA-512
#cm.hashIterations = 1024
# Base64 encoding (less text):
7
#cm.storedCredentialsHexEncoded = false

#iniRealm.credentialsMatcher = $cm

[users]
jdoe = jdoe, ROLE_ADMIN
guest =guest, ROLE_GUEST
asmith = asmith, ROLE_GUEST
admin = admin, ROLE_ADMIN
cds-admin = cds-admin,ROLE_ADMIN_CDS
cds-oper = cds-oper,ROLE_OPER_CDS
cds-guest = cds-guest,ROLE_GUEST_CDS
amj-admin = amj-admin,ROLE_ADMIN_AMJ
oper = oper, ROLE_OPER
[roles]
ROLE_ADMIN = database:*:*
ROLE_GUEST = database:guest:*
ROLE_OPER = database:oper
ROLE_ADMIN_CDS = database:*:CDS
ROLE_OPER_CDS = database:oper:CDS
ROLE_GUEST_CDS = database:guest:CDS
ROLE_ADMIN_AMJ = database:*:AMJ_BOOKS,database:*:AMJ_LOAN,database:*:AMJ_Member

We can see that user name “admin” and password “admin” gives access to all databases on the
server machine.

Thus entering “admin” and “admin” will provide the full list of databases on the server machine
while “amj-admin” and “amj-admin” will only list AMJ_BOOKS, AMJ_LOAN, and
AMJ_Member databases.

8
9
A) Database Selection
The Web-JISIS bar menu is displayed and the list of J-ISIS databases authorized to the user on
the server machine is displayed. Select the “CDS” database as it will be the example database.

10
After database selection, the database list is re-displayed, with the name of the selected database:

You can now “Browse “, “ Search”, “ Edit” or “Logout” by clicking the menu bar items. You
can also select another database if needed.

11
B) Browse
Clicking on “Browse” should display the first database record in RAW format as follow:

12
The toolbar allows to:

 Display a specific record

 Display the first record
 Display the next record
 Display the previous record
 Display the last record
 Select another PFT for displaying the records

You can enter a MFN in the text field and hit the "Enter" key to jump to a specific record

13
Retrieving a particular record

14
Changing the display PFT

15
16
C) Search
Web-JISIS offers two Search methods: Guided Search and Google Like Search.

17
J-ISIS and Web-JISIS use an autocomplete user interface for searching. In search engines,
autocomplete user interface features provide users with suggested queries or results as they type
their query in the search box. This is also commonly called autosuggest or incremental search.
The challenge remains to search large indices in under a few milliseconds so that the user sees
results pop up as he types them. This is no simple feat with a large search index or database as
the target of the search application.

J-ISIS starts providing suggestions as soon as one character is typed while Web-JISIS needs 2
characters before providing suggestions.

1) Guided Search

Clicking on the 1st query field will pop up a list panel as follow:

18
After typing 'v':

and 'o'

There is only one term in the index that begins with 'vo'. Please note that J-ISIS and Web-J-ISIS
suggest only terms that are in the index; and the search is done on the indexed terms. Thus the
quality of the index is very important.

No we click on the proposed suggestion to bring it back to the query field.

19
And we click on the 'Search' button to make the search query.

20
3 records were found and are displayed

The query information can be shown or hidden by pressing Ctrl/q

If we add a new search criteria like 'Bangladesh" in the 2nd query field:

21
We get only one record because we are doing a 'AND' (Match All of the following) between the
query fields.

22
Let's do a 'OR' (Match Any of the following) now with the same terms

We get now 17 records that match the query:

23
Please note that we the results are sorted by relevance, i.e. most relevant first. Web-JISIS
displays 10 records per page and uses paging for displaying results when the number of results
exceeds 10.

24
2) Google Like Search

Google Like Search always uses 'OR' boolean operator to connect the search query terms.

25
It also uses term autosuggestions when the user types characters. If no suggestions are proposed
when you enter characters, it means that there are no records indexed that contain this term.

26
You can remove terms from the search query by clicking on the left cross of the term. The query
search box will expand as you select more terms. Clicking on the search button will retrieved 17
records that contain 'volker, adriaan' OR 'bangladesh' or both.

27
Entering Diacritics in the query

28
29
D) CRUD (Edit->Data Entry)

The toolbar allows to:

 Display a specific record

 Display the first record

 Display the next record

 Display the previous record

 Display the last record

30
  Display an empty record for data
entry

 Delete the current record

 Save the new or updated record

 Add an occurrence of the selected

field

 Delete the occurrence of the selected

field

 Select another Worksheet for

displaying the data entry fields

Empty Record

31
32
Create

Add the First Author

33
New Occurrence for new author

Add the second author:

34
Save the new record

After saving the new record is displayed with the MFN assigned

35
36
Updating
Existing database records can be updated once a specific record is displayed. For example
entering MFN 10 and clicking on go will display record with MFN 10.

Field data or field occurrence data can be modified after clicking on the data cell.

37
Go To Previous Record

38
Go to the First record

39
Go to the Last Record

Add Occurrence
The field last occurrence must be selected by clicking on its label

40
We enter some data and press 'Enter' (or click on the label) to validate data
41
Delete Occurrence

42
Delete Record

43
44
45
Change The Database (clicking on Database Menu Item)

Changing the database to AMJ_LOAN

46
And changing the PFT to Loans

Logout

47
Clicking on logout wiil close the session an display again the login form.

Entering “amj-admin” “amj-admin”

48
Session Timeout

49
The default session timeout for J-ISIS is 30 minutes. You can change this by setting the <session-
timeout> parameter in the <session-config> element of the application's web.xml file.

Extract the web.xml file

50
Edit the web.xml file

<session-config>
<session-timeout>
30
</session-timeout>
</session-config>

51
Annex I
Installing Tomcat on Windows
For Windows systems, Tomcat is available as a Windows-style graphical installer that is
available directly from the Apache Software Foundation’s Tomcat downloads page. The
Windows graphical installer does a lot of setup and operating system integration for you as well,
and is recommended. Download apache-tomcat-6.0.29.exe (or later, use the latest available
stable version), from the release page at:
http://tomcat.apache.org/download-60.cgi .
When you download and run this installer program, it will first verify that it can find a JDK and
JRE, and then prompt you with a license agreement. This license is the Apache Software
License, which allows you to do pretty much anything with the software as long as you give
credit where it’s due. Accept the license as shown below:

Next, the installer will allow you to select which Tomcat components to install. At the top
of the installer window, there is a handy drop-down list from which you can select a
different typical packaged set of components (see Figure 1-2). To hand select which
components to install choose Custom in the drop-down list, and you may select and
deselect any component or subcomponent.

52
If you want to have Tomcat started automatically and be able to control it from the
Services Control Panel, check the box to install the Service software.
Then, specify where to install Tomcat. The default is in C:\Program Files\Apache
Software Foundation\Tomcat 6.0. Change it if you want, as shown below:

53
Next, the installer will prompt you for the HTTP/1.1 connector port—this is Tomcat’s web server
port. By default it is set to port 8080, but on Windows feel free to change it to 80 if you want
Tomcat to be your first contact web server (Tomcat does a wonderful job in that role). The
installer also asks for the administrator login username and password to set for Tomcat. Set the
password to something that will not be easily guessed, but don’t forget what it is! That will be
your username and password to log into Tomcat’s Manager webapp.
The installer then allows you to choose a Java runtime for Tomcat from the runtimes you have
installed at that time. We suggest Java 1.6.x or higher for this. Once you have configured it with
a Java runtime, the Install button becomes clickable. Click it and the installer will begin installing
Tomcat.
Once the installation completes normally, you should see the message “Completingthe Apache
Tomcat Setup Wizard” at the end, as shown below:

From the installer, you can select to start Tomcat and click Finish. Then, in your web browser,
type in the URL to your Tomcat, such as http://localhost:8080, and you should see the Tomcat
start page as shown in next figure:

54
Starting and stopping on Windows

On Microsoft Windows, Tomcat can be started and stopped either as a windows service or by

right-clicking with ton the icon located in the taskbar at screen bottom

Clicking on “Configure…” would popup the following dialog:

55
You can stop Tomcat Windows Service by clicking on “Stop” and restart it by clicking on “Start”

56
How to support UTF-8 URIEncoding with Tomcat

By default, Tomcat uses ISO-8859-1 character encoding when decoding URLs received from a
browser. This can cause problems when Web-JISIS's encoding is UTF-8, and you are using
international characters with diacritics in the search query.

To configure the URL encoding in Tomcat:

1. Edit conf/server.xml and find the line where the Coyote HTTP Connector is defined. It
will look something like this, possibly with more parameters:

2. <Connector port="8084"/>

3. Add a URIEncoding="UTF-8"property to the connector:

4. <Connector port="8084" URIEncoding="UTF-8"/>

5. Restart Tomcat

If you are using mod_jk

You should apply the same URIEncoding parameter as above to the AJP connector if you are using
mod_jk, and add the following option to your Apache mod_jk configuration:
<Connector port="8009" protocol="AJP/1.3" URIEncoding="UTF-8"/>

JkOptions +ForwardURICompatUnparsed

Tomcat Problems

java.util.logging.ErrorManager: 4
java.io.FileNotFoundException: C:\Program Files\apache-tomcat-7.0.27\logs\catalina.2012-05-14.log (Access is denied)

Make sure that the SYSTEM user has full access to the Tomcat folder, so that when Tomcat
runs, it can freely create folders and files within its own directory.

Windows 7 - Programs installed in the Program folder needs to have Administrator role to be
executed and for creating sub-folders. The solution is to install Tomcat in a folder under the C:

57
 Annex II
Disabling Data Entry in Web-JISIS

1. Edit the main.jsp file located in the C:\apache-tomcat-8.0.5\webapps\Web-

JISIS3\decorators folder

58
2. Locate the line with href="<s:url action='doDataEntry'/>" and change the line

from:

<li><a href="<s:url action='doDataEntry'/>" title="Edit > Data Entry">Data Entry</a></li>

To:

<li><a href="#" title="Edit > Data Entry">Data Entry</a></li>

3. Save the file

4. Shutdown and restart Tomcat

5. Test Web-JISIS

Note: You can also change the Web-JISIS title or add an image in the main.jsp file if you wish

59
 Deploying a Web-JISIS3.WAR in Jetty

1 – Downloading

You can download Jetty from http://download.eclipse.org/jetty/. The current stable version is 9.

The compressed file is platform independent. So if you use Mac, Linux or Windows, that is ok, it
will run on any operating system.

2 – Installing

Simply uncompress the file to a directory. You should have something like this:

3 – Copy the Web-JISIS3.war file in the $JETTY_HOME/webapps

4 – Running Jetty

a) Open a terminal.

b) Go to the Jetty installation directory.

c) Enter the following command:

java -jar start.jar

60
Start Web-JISIS

61
Please note that you may have both application servers running at the same time as far as they are
listening to different ports (8084 and 8080)

62
PATR example database

63
Digital Library Example

64
Remote Tamil Databases Example

65
66
67
Mobile Example - Responsive Web Design - The screen shots were captured from my old
iPhone 3GS

68
69
70
71
72
73
74
75
76
77
78
79
80