Web-JISIS 10 March 2016 Reference Manual

I. Web J-ISIS Architecture Web-JISIS 10 March 2016 Reference Manual 10 March 2016 Author: Jean-Claude Dauphin jc.dauphin@gmail.com 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 <sessiontimeout> 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