1. PHP, HTML/JavaScript, MySQL code description

• This manual is created with Sphinx.
• Python version:
  • On local test server (XAMPP - server): 2.7.15 (installation package C:\Dany\Software\Python\python-2.7.15.msi)
• Python Documentation Generator: Sphinx Documentation (pdf).
  • Quick manual: reStructuredText from Sphinx - org , and alternative link
  • Quick manual: reStructuredText Directives from Sphinx - org, and alternative Directives link.
  • Quick manual: reStructuredText Roles from Sphinx - org, and alternative Roles link.
• Sphinx is installed in C:\Python27\Lib\site-packages\sphinx.
• Sphinx: document build configuration file.
• Sphinx extensions, add-ons which come with a setup.py file, are installed with the following command: py setup.py build, in the directory containing the setup.py file.
• Manual makes use of theme and extensions:
  • the Cloud theme. Cloud theme is installed in C:\Python27\Lib\site-packages\cloud_sptheme, and must be included as extension in the configuration file conf.py. Different HTML theme flavors can be selected. The selected HTML theme flavor is cloud, and the default settings of this theme are implemented in C:\Python27\Lib\site-packages\cloud_sptheme\themes\cloud\theme.conf. Deviations from the default settings can be set in conf.py (html_theme_options = {'externalrefs':'false'})
  • the PHP domain. (For domain: see link)

The code manual of the website can be called from the website itself when:

• Website is running from a local server for any user (for development purposes), i.e from host address 127.0.0.1,
• Or user admin is logged on to the website running on a ISP webserver, and
  • $albumDirThumbStatHtml[‘server_info’][‘debugJS’] = true in /php/prepareDirOverviewGalleryAjax.php. See also Table 4.21. This is implemented for debugging and test purposes.
  • Public debug member in class sqlConnectFail, which is defined in login\loginFunctions.php, is set to true (by setting DEBUG macro in php\filesystem.php).

The manual can be called from the following locations:

• Main menubar,
• Media Processing Status dialog window. The manual button in each tab in the Media Processing Status dialog window refers to a different location in the manual.

1.1. Note on text and link format

• command (role :command:),

• code lines, and code fragments in PHP (role :phpc:),

• Links to internal PHP functions. PHP domain:

  • Definition: role :php:function:,
  • Reference: role :php:func:,

• PHP files (PHP domain 🡺 role :php:),

• Links to internal PHP files. PY domain:

  • Definition: role :py:module:,
  • Reference: role :py:mod:,

• Links to internal Javascript functions. JS domain:

  • Definition: role :js:function:,
  • Reference: role :js:func:,

1.2. General

The website makes use of the following languages:

• PHP, MySQL (A2hosting: version 7.0, localhost: version 7.2.0),
• HTML 5,
• JavaScript
  • Jquery
  • AJAX

CORS (Cross-Origin Resource Sharing) on PHP: is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin have permission to access selected resources from a server at a different origin.

CORS headers: switch to https protocol if there is security certificate

• $hs=’Access-Control-Allow-Origin: ‘.__FILE__; header($hs);
• .htaccess file

1.2.1. Standard datafile formats used by the site

• JSON (JavaScript Object Notation)
• XML (Extensible Markup Language)

1.2.2. Regular expressions and filters

For matching media names, regular expressions are used.

• Complete manual

• Examples and explanation of syntax of regular expressions: https://support.google.com/a/answer/1371417?hl=en

  On this site useful examples are given for filtering e-mail addresses from given domains.

• Testing regular expression: https://regex101.com/

1.3. Use of PHP array functions

1.3.1. array_walk

Applies the user-defined callback function to each element of the array array. array_walk() is not affected by the internal array pointer of array. array_walk() will walk through the entire array regardless of pointer position. The array_walk() function is used with the following callback functions:

• function aw_cb_single_val(&$value,$key,$updateVal){$value[“XFFFFF”]|=$updateVal;} In this callback function the $key argument is not used. The result of the array_walk() function with this callback function is: for each array element: $XFFFFF_Arr[i][‘XFFFFF’] = $XFFFFF[‘GlobStat’].
• function aw_cb_array_val(&$value,$key,$updateVal){$value[“XFFFFF”]|=$updateVal[$key];} The result of the array_walk function with this callback function is: for each array element: $XFFFFF_Arr[i][‘XFFFFF’] = $XFFFFF[‘GlobStat’].

1.3.2. array_column

Function array array_column(array $input , mixed $column_key [, mixed $index_key = NULL]) returns the values from a single column of the $input array, identified by the $column_key.

Function array_column is called in Mediacount_IMINFO_X0F000. array_column($upd_media_dir,’modus’); where ($upd_media_dir is matrix with 2 columns having the associative keys ‘name’ and ‘modus’, respectively. The function will return the column ‘modus’ of $upd_media_dir. (For reference: in MATLAB such a function would not be needed: e.g. maxtrix(:,2))

1.3.3. in_array

1.4. stdClass object: how to avoid the list structure?

In PHP functions cannot return multiple output arguments. The effect of multiple output arguments can be implemented by returning an array. The return array must then be read with the PHP list() construct. But as the PHP manual issues a warning with respect to the use of list construct: “In PHP 5, list() assigns the values starting with the right-most parameter. In PHP 7, list() starts with the left-most parameter.

If you are using plain variables, you don’t have to worry about this. But if you are using arrays with indices you usually expect the order of the indices in the array the same you wrote in the list() from left to right, which is not the case in PHP 5, as it’s assigned in the reverse order.

Generally speaking, it is advisable to avoid relying on a specific order of operation, as this may change again in the future.”

For this reason the use of the list construct should be avoided. The PHP predefined built-in stdClass object (as of PHP 5.0) can be used as return object wrapper as an alternative for functions with array as return variable (as an implementation method for function with multiple output arguments).

1.5. Filenames as input for PHP and Java script

Depending on the operating system running on the server and client (OS, Windows or Linux) filenames beginning with the character ‘#’ may or may not be accepted by the operating system. This leads to non-processing of the file and consequently to errors. In order to avoid these errors, rename these files by deleting the first character (‘#’).

1.6. PHP packages

1.6.1. ZIP

1.6.2. PHPMailer

• Reference: https://github.com/PHPMailer/PHPMailer
• Dependencies, installation location:
  • login\loginFunctions.php
  • login\remoteaddress.php (external package: see Section 1.6.6)
  • /php/mailer/PHPMailerAutoload.php
  • /php/mysql/encryption_decryption.php
• Called in: php\mailer\e-mail.php

1.6.3. Responsive filemanager

• Reference: http://www.responsivefilemanager.com
• Version 9.9.7
• Installation location: /php/filemanager/dialog.php
• Called in template /Templates/41184-private.dwt
• Call instantiation: window.open(“php/filemanager/dialog.php?type=2&config=config_admin”,’Media Filemanager’,optstr);
• Configuration files:
  • /php/filemanager/config/config_normal_user.php
  • /php/filemanager/config/config_admin.php

1.6.4. Encryption – Decryption

• Defuse Security
• Reference: https://github.com/defuse/php-encryption

1.6.5. GETID3: get exif data from video media files

Reference: http://getid3.sourceforge.net/

GETID3 array keys: [‘filesize’], [‘filepath’], [‘filename’], [‘filenamepath’], [‘avdataoffset’], [‘avdataend’], [‘fileformat’], [‘audio’][‘dataformat’], [‘audio’][‘codec’], [‘audio’][‘sample_rate’], [‘audio’][‘channels’], [‘audio’][‘bits_per_sample’]

1.6.6. Remote address (with respect to server)

Functionality for determining client IP address. Since the information of the IP address is at the client side why not use JavaScript functions? (when client side makes use of a proxyserver?)

1.7. Server network configurations: MySQL and web

1.7.1. Server network configurations

Fig. 1.1 Normal website application: client and webserver are on different locations. In most cases, webserver and MySQL server are located on the same host.

Fig. 1.2 Web application development environment (1): webserver and client are on the same host computer (localhost). The XAMMP application acts as webserver, and MySQL server is running on ISP host computer. This development option is selected when define(‘MYSQL_SERVER’,HOST_ISP);, and is the recommended configuration.

Fig. 1.3 Web application development environment (2): webserver, MySQL server and client are all on the same host computer (localhost). The XAMMP application acts as webserver. This development option is selected when define(‘MYSQL_SERVER’,’LOCAL’);.

1.7.2. How to maintain MySQL-server

In most cases MySQL server and webserver are located on the same host. In that case a connection to the MySQL server from the webserver (e.g. website user wants to log on) must be established on the “localhost”. Before the MySQL server can be used a user must be created with a valid password (on a commercial webhost provider the user to be created cannot be the administrator). Be sure that the created user has the proper privileges for using MySQL databases. On most webhost providers there is no total freedom in choosing usernames for the MySQL database server.

The server of MySQL can also be managed with phpMyAdmin program. phpMyAdmin application can only be started when logged on the webhost provider. For this reason, using the phpMyAdmin application (to manage the MySQL databases) when it is available on the webhost provider does not require to log on again, even when the usernames of the webserver and the MySQL server are different (also implies that no password is required).

1.7.3. Development environment: system location of MySQL database files

For the use of MySQL databases there 2 options:

1. Use of MySQL databases on local host for development purpose (see Fig. 1.3). It is recommended to use XAMPP on Windows platforms: local host (127.0.0.1): C:\xampp\mysql\data. When XAMPP application is running, and thr MySQL server is started, phpMyAdmin application (1) can be used to maintain the databases.

   This option is selected when define(‘MYSQL_SERVER’,’LOCAL’); in login\loginFunctions.php (see Listing 1.1), and ‘LOCAL’ is just a string.

2. Use of MySQL databases on ISP webserver for development purpose (see Fig. 1.2). The login credentials for the remote MySQL database server are stored in the file mysqli_config.ini (see Listing 1.3), which is located outside the website document root directory (i.e. file is not direct accessible by the Apache server: e.g. in directory C:\dany\privateWWW\DreamWeaver\database_info), and is read by the PHP function parse_ini_file(). phpMyAdmin application (2) on the A2Hosting ISP can be used to maintain the databases.

   This option is selected when define(‘MYSQL_SERVER’,HOST_ISP); in login\loginFunctions.php (see Listing 1.1), and HOST_ISP is another define, defined in /login/database_info.php. A typical example of file /login/database_info.php is given in Listing 1.2.

Listing 1.1 Server selection of MYSQL database: on local computer, or ISP (internet service provider), and is implemented in login\loginFunctions.php.

<?php 
//namespace Zend\Http\PhpEnvironment;
include_once($_SERVER['DOCUMENT_ROOT'].'/login/database_info.php');
require_once($_SERVER['DOCUMENT_ROOT'].'/login/remoteaddress.php');
require_once($_SERVER['DOCUMENT_ROOT'].'/php/mailer/e-mail.php');
require_once($_SERVER['DOCUMENT_ROOT'].'/php/filesystem.php');

//define('MYSQL_SERVER','LOCAL');
define('MYSQL_SERVER', HOST_ISP);

Listing 1.2 Typical code of /login/database_info.php.

<?php
function DB_ADMIN_PWD_ISP() {
    $config=parse_ini_file($_SERVER['DOCUMENT_ROOT'].'/../database_info/mysql_config.ini');
    if ($config != FALSE) return $config;
    else return FALSE;
}

// LOCAL HOST CREDENTIALS FOR XAMPP TESTING
define('HOST_LOCAL','localhost');
define('DB_ADMIN_LOCAL','root');
define('DB_ADMIN_PWD_LOCAL','');
define('DB_USERS_LOCAL','login');

// A2HOSTING: NLSS4 SERVER (AMSTERDAM)
define('HOST_A2HOSTING','209.124.66.15');
define('HOSTNAME_A2HOSTING','nlss4.a2hosting.com');

define('HOST_ISP',HOST_A2HOSTING);
define('HOSTNAME_ISP',HOSTNAME_A2HOSTING);

define('DB_LOG_TABLE','log');
define('LOCAL_DB',1);
define('ISP_DB',2);
?>

Table 1.1 Values for arguments of PHP function new mysqli() or mysqli_connect()

	Local webserver (XAMPP)	ISP webserver (generic)	A2hosting ISP
PHP define MYSQL_SERVER login\loginFunctions.php	LOCAL	HOST_ISP	HOST_A2HOSTING
host_ip: arg 1 new mysqli()	localhost	mysql_config.ini: host_ip	209.124.66.15 (remark: this is an dynamic IP address)
hostname		mysql_config.ini: hostname	nlss4.a2hosting.com
username: arg 2 new mysqli()	root	mysql_config.ini: username	benoynl_admin
password: arg 3 new mysqli()	xxxxxx	mysql_config.ini: password	yyyyyyyyy
users_db: arg 4 new mysqli() (Name of the database)	login (see Section 1.7.5.3)	mysql_config.ini: users_db	benoynl_website_users

Listing 1.3 Example content of file mysqli_config.ini for A2Hosting ISP.

[database]
host_ip="209.124.66.15"
hostname="nlss4.a2hosting.com"
username="benoynl_admin"
password="************"
users_db="benoynl_website_users"

1.7.4. Central MySQL database

Use of a central MySQL database (located on a remote ISP) has the advantage that less maintenance and updates must be implemented. For example, when the developer’s computer is changed, the MySQL database does not have to be moved to another host (see Fig. 1.2).

The central MySQL database is installed at the ISP webserver (A2Hosting). In order to approach the MySQL database at the ISP by an external application, the ISP must know the host for security reasons (IP-address, or name) of the computer on which the external application is running:

Table 1.2 Host for remote access to MySQL at ISP (A2Hosting)

Location	Hostname or IP address
Signify: HTC7	130.142.211.% (% represents wildcard) 176.74.235.%
Home	5.132.119.62 (T-Mobile: dynamic IP)
Home	77.162.164.% (143) (KPN: dynamic IP)

1.7.5. Website MySQL databases

• Assumption: webserver or internet server (not the local test version), and ISP are on the same server.
• Some events on the website will generate e-mails to be sent. The e-mail server for this, does not need to be on the same ISP server, and/or can use different user credentials (i.e. different username and password). E-mail server and its user data are stored in the webserver datatable (see Section 1.7.5.2).
• Website makes use of MYSQL databases. In general MYSQL server and ISP does not need to be on the same server. For this website it is assumed that MYSQL and ISP are on the same server hardware.
• The name of the database on a local server is free to chose (in this case “login”: see Table 1.1). The name of the database at an ISP is not always free to chose (as it given by the ISP: see last column in Table 1.1). For the website the database has 3 tables:
  1. Table webserver: e-mail server and user data,
  2. Table log: website event logging (e.g. logging in attempts, page visits, …)
  3. Table members: website users.

The structure of these datatables is given in the next sections.

1.7.5.1. Database functions

Table 1.3 Database functions

Function	Implemented in
create_database_isp()	php\mysql\mysql_create_insert.php
create_database_isp()	php\mysql\mysql_create_insert.php
create_tables_members_log	php\mysql\mysql_create_insert.php

1.7.5.2. Table webserver

The name webserver for this datatable might be somewhat confusing. The webserver datatable contains login data for the e-mail server. Rows in the table are added by calling /local/register_isp.php.

1. id (integer type): unique entry number (auto increment),
2. hostname (varchar type): webhosting and e-mail servername,
3. hostadmin (varchar type): username of host administrator,
4. hostadmin_password (varchar type):
5. hostadmin_email (varchar type): e-mail address from which system messages are sent to recipient.
6. hostadmin_alias (varchar type): name to be used in e-mail header.
7. iv: initialization vector for encryption / decryption of the password. Encryption and decryption require additional key, which should never be stored at the server side for security reasons. Encryption can be done on a local host. However, decryption is carried on the webserver so that somehow the key must be known as argument for the decryption function.
8. SMTP Secure (varchar type): SMTP security protocol,
9. port (integer type): port to be used,
10. contact_email (varchar type): send system messages to this contact,
11. contact_alias (varchar type):

Table 1.4 webserver Benoy Site

Id	hostname	hostadmin	host admin_email	Port	Contact_email
4	nlss4.a2hosting.com	website@benoy.nl	website@benoy.nl	465	dany@benoy.nl

1.7.5.3. Table log

Created by calling create_tables_members_log.

Rows in the table are added by calling function updateLogDatabaseTable implemented in file login\loginFunctions.php:

1. id (integer type): unique entry number (auto increment),
2. user_id (varchar type):
3. username (varchar type): name of registered website user when logged on,
4. email (varchar type): email address to whom the message will be sent,
5. message_code: integer number (see file login/loginFunctions.php),
6. ip (varchar type): ip address of login computer,
7. login_attempt: date and time,
8. message (varchar type): string

1.7.5.4. Table members

Created by calling create_tables_members_log().

Rows in the table are added (i.e. new registered user) by calling register2a.php (as an AJAX call)

1. id (integer type): unique entry number (auto increment),
2. username (varchar type): name of registered website user
3. password (varchar type): one-way encryption (no decryption possible),
4. email (varchar type):
5. email_password (varchar type): not yet used,
6. salt (char type): random data for one-way encryption,
7. Group (enumeration type): Is used to determine the permission level of the user with respect to edit/modify albums.
8. Timelimit (tiny integer type): option for later use,
9. BeginTime (date type): option for later use,
10. EndTime (date type): option for later use.

Table 1.5 Members Benoy Site

Id	Username	email	Salt	Group
1	admin	dany@benoy.nl	597	admin
2	dany	dany@benoy.nl	036	dany
3	sophie	sophie@benoy.nl	461	familie
4	deborah	deborah@benoy.nl	c03	familie
5	veronique	veronique@benoy.nl	6bc	veronique
6	webserver	website@benoy.nl	c84	familie

1.8. JavaScript topics

1.8.1. Jquery plugins

Table 1.6 Implementation locations of Draggable Modal Window plugin.

Plugin	Public	Private
Draggable Modal Window	Template: /Templates/41184.dwt	Template: /Templates/41184-private.dwt
VEX Dialog Library	Template: /Templates/41184.dwt	Template: /Templates/41184-private.dwt
Mobilemenu	Template: /Templates/41184.dwt	Template: /Templates/41184-private.dwt
Spinner activity indicator	Template: /Templates/41184.dwt	Template: /Templates/41184-private.dwt
Superfish menu	Template: /Templates/41184.dwt	Template: /Templates/41184-private.dwt
Idle timeout	NA	Template: /Templates/41184-private.dwt

1.8.1.1. Jquery versions

1.8.1.2. Plugin: Draggable Modal Window Google Style

Website:

• http://www.stupidcodes.com/draggable-modal-window-google-style
• http://www.cssscript.com/google-style-draggable-modal-window-with-pure-javascript/

Plugin script:

• /js/modal/draggabilly.pkgd.js (version v1.1.2), or
• /js/modal/draggabilly.pkgd.min.js, and
• /js/modal/modal.js

Called in: see Table 1.6.

1.8.1.3. Plugin: Full Width Tab

Website:

• http://tympanus.net/Blueprints/FullWidthTabs/
• http://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/

Plugin is used for generating media processing and status window, and tab overview of photo albums Media processing windows as shown in Fig. 2.2 🡺 Fig. 2.5 are using “Responsive Full Width Tabs”.

Plugin script:

• /js/cbpFWTabs.js (version v1.0.0)

Called in: see Table 1.7.

Table 1.7 Implementation locations of Draggable Modal Window plugin.

Public	Private	Comment
dany-fiets.php	dany-fiets-private.php	Processing status window
familie.php	familie-private.php	Album overview
familie-vakantie.php	familie-vakantie-private.php	Processing status window

1.8.1.4. Plugin: Lean modal

1.8.1.5. Plugin: Highly Configurable JS Modal & Dialog Box Library – Vex

Website:

• http://github.hubspot.com/vex

Plugin script:

• /vex/js/vex.combined.min.js (version ??)

Called in: see Table 1.6.

Dialog types:

1. Alert (display a message to the user),
2. Confirm (user has 2 options),
3. Prompt (user can provide input),
4. Open (full design control).

1.8.1.6. Plugin: Idle timeout

Website:

• https://www.npmjs.com/package/jquery-idleTimeout-plus.

Plugin script:

• /js/timeout/jquery-idleTimeout-plus.min.js (version ??)

Called in: see Table 1.6.

Main setting parameters:

• idleTimeLimit [seconds]: default 1200,
• warnTimeLimit [seconds]: default 180,
• logoutCallback: logout_timeout(),
• redirectCallback: logout_timeout(),

1.8.1.7. Plugin: Spinner activity indicator

Website:

• https://spin.js.org/#v2.3.2

Plugin script:

• /js/spninner/spin.min.js

Called in: see Table 1.6.

Main setting parameters:

Table 1.8 Spinner settings

Option	Value	Description
lines	11	The number of lines to draw
length	15	The length of each line
width	10	The line thickness.
radius	30	The radius of the inner circle.
corners	1	Corner roundness (0..1).
rotate	0	The rotation offset.
direction	1	1: clockwise, -1: counterclockwise.
color	‘#000’	#rgb or #rrggbb.
speed	0.6	Rounds per second.
trail	60	Afterglow percentage.
shadow	false	Whether to render a shadow.
hwaccel	false	Whether to use hardware acceleration.
className	‘spinner’	The CSS class to assign to the spinner.
zIndex	2e7	The z-index (defaults to 2000000000).

Superfish is a jQuery plugin that adds usability enhancements to multi-level drop-down menus.

1.8.2. Event data as argument of callback function

Event is an object with different properties and methods defined in JavaScript and JQuery. (References: https://www.w3schools.com/jsreF/obj_event.asp, and https://www.tutorialrepublic.com/jquery-reference/jquery-event-object.php)

Table 1.9 Event properties in JavaScript and JQuery

Property	Javascript	JQuery	Description
bubbles	YES	NO	Returns whether or not a specific event is a bubbling event.
cancelBubble	YES	NO	Sets or returns whether the event should propagate up the hierarchy or not.
cancelable	YES	NO	Returns whether or not an event can have its default action prevented.
composed	YES	NO	Returns whether the event is composed or not.
createEvent()	YES	NO	Creates a new event.
composedPath()	YES	NO	Returns the event’s path.
currentTarget	YES	YES	Returns the element whose event listeners triggered the event.
data	NO	YES	An optional DOM element within the event bubbling phase.
defaultPrevented	YES	NO	Returns whether or not the preventDefault() method was called for the event.
delegateTarget	NO	YES	Returns the elementwhere the currently-called JQuery event handler was attached.
eventPhase	YES	NO	Returns which phase of the event flow is currently being evaluated.
isDefaultPrevented()	NO	YES	Returns whether event.preventDefault() was ever called on this event object.
isImmediatePropagationStopped()	NO	YES	Returns whether stopImmediatePropagation() was ever called on this event object.
isPropagationStopped()	NO	YES	Returns whether event.StopPropagation() was ever called on this event object.
isTrusted	YES	NO	Returns whether or not an event is trusted.
metaKey	NO	YES	Indicates whether the WIndows key or Command key (on Mac ekyboard) was pressed when the event fired.
namespace	NO	YES	Returns the namespace specified when the event was triggered.
pageX	NO	YES	Returns the mouse position relative to the left edge of the document.
pageY	NO	YES	Returns the mouse position relative to the top edge of the document.
preventDefault()	YES	YES	Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
relatedTarget	NO	YES	Returns the other DOM element involved in the event, if any.
result	NO	YES	The last or perevious value returned by an event handler that was triggered by this event.
stopImmediatePropagation()	YES	YES	Prevents other listeners of the same event from being called.
stopPropagation()	YES	YES	Prevents further propagation of an event during event flow.
target	YES	YES	Returns the element that triggered the event.
timeStamp	YES	YES	Returns the time (in milliseconds relative to the epoch) at which the event was created.
type	YES	YES	Returns the name of the event.
which	NO	YES	Indicates the specific key or button that was pressed for key or mouse events.

Userdata can be stored in the data property of the Event object. This is used in (mouse)click event to pass specific webpage (i.e. parameters) info to a callback function. To pass parameters to user callback function

1.8.3. Web (client-side) API interfaces for JavaScript

1.8.3.1. DOM: HTML interface, Window Object

DOM stands for Document Object Model, and is a programming interface for JavaScript to HTML. It main purpose is to manipulate web documents. Therefor an important object is the Window Object.

Reference website: https://www.tutorialride.com/javascript/javascript-dom-window-object.htm

• Window object is a top-level object in Client-Side JavaScript.
• Window object represents the browser’s window.
• It represents an open window in a browser.
• It supports all browsers.
• The document object is a property of the window object. So, typing window.document.write is same as document.write.
• All global variables are properties and functions are methods of the window object.

The Window Object Properties are given https://www.w3schools.com/jsref/obj_window.asp.

One of the useful properties being used is sessionStorage. The sessionStorage object stores data (user defined key/value pairs) for only one session (the data is deleted when the browser tab is closed). It is used with keys currentPage, and previousPage (defined as integers meaning that the each website page must have a unique integer ID number), and can be considered as simpler implementation of the history object property. The keys currentPage, and previousPage are set in initialization function initSessionStorage() implemented in js\myjs\public_private.js.

1.8.3.2. FETCH: get data from web server

The Fetch API is a simple interface for fetching resources. Fetch allows us to make network request and handle responses easier than our old friend XMLHttpRequest(XHR). One of the main differences is that Fetch API uses Promises, which provides a way to avoid callbacks hell and boilerplate heavy code that XMLHttpRequest(XHR) provides.

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request, whether it is successful or not. More detailed information on the fetch API can be found on https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.

1.8.3.3. PROMISE: tracking of asynchronous operations

A Promise is an object representing the eventual completion or failure of an asynchronous operation. More detailed information on promises can be found here. The asynchronous process can be either on the web server-side, or on the client-side. If it is on the server-side the promise will need to make a XMLHttpRequest request. If it is on the client-side, the asynchronous process can be started immediately (locally).

1.8.4. Constants

Table 1.10 Value of constants used in VEX dialog boxes

Constant	Value	Used in function	File
LOGOUT	0	user_menu_dialogbox()	dlgboxes_private.js
WIJZIG_WACHTWOORD	1	user_menu_dialogbox()	dlgboxes_private.js
LOGIN	2	adminuser_dialogbox_pub()	dlgboxes_public.js
RNG	3	admininistrator_tools_dialogbox()	dlgboxes_private.js
USER_ADMIN	4	user_menu_dialogbox()	dlgboxes_private.js
FILEMANAGER	5	user_menu_dialogbox()	dlgboxes_private.js
MEDIA_UPDATE_PROGRESS_TEST	6	user_menu_dialogbox()	dlgboxes_private.js
STATUS_WINDOW	7	adminuser_dialogbox() adminuser_dialogbox_pub()	dlgboxes_private.js dlgboxes_public.js
PHP_VERSION	8	admininistrator_tools_dialogbox()	dlgboxes_private.js
LOGOFF	9	adminuser_dialogbox()	dlgboxes_private.js
SESSION_INFO	10	admininistrator_tools_dialogbox()	dlgboxes_private.js
WEBLOG_VISITS	11	admininistrator_tools_dialogbox()	dlgboxes_private.js
MYSQL_BACKUP	12	admininistrator_tools_dialogbox()	dlgboxes_private.js
LOCALHOST_DEF	13	system_info_dialogbox()	dlgboxes_private.js
SYSTEM_INFO	14	user_menu_dialogbox()	dlgboxes_private.js
SYSTEM_INFO	15	system_info_dialogbox()	dlgboxes_private.js
LOCAL_DB	16	mysql_backup_dialogbox()	dlgboxes_private.js
ISP_DB	17	mysql_backup_dialogbox()	dlgboxes_private.js

1.9. HTML 5

1.9.1. Form validation

• HTML 5 helps to validate to validate user input to be given in a form dialog. See client side validation
• HTML 5 built-in form validation (i.e. no Javascript is needed) using the following attributes:
  • required,
  • minlength and maxlength,
  • type,
  • pattern: regular expression
• Browsers mark the input box different when the condition for the required attribute is not fulfilled: see e.g. https://www.the-art-of-web.com/html/html5-form-validation/. Tooltips are different for different type of inputs (see Table 1.11).

Table 1.11 Used HTML 5 form attribute settings, and tooltips of different browsers. All input types have the required attribute.

Input type	Dialog window	Tooltip Firefox	Tooltip Chrome	Tooltip Edge
username minlength=3 pattern=”^s*S+s*$”	login Wachtwoord vergeten	Please fill out this field	Vul dit veld in	Please fill out this field
password	Login	Please fill out this field	Vul dit veld in	Please fill out this field
email	Wachtwoord vergeten	Please enter an email address	Gebruik een ‘*’ in het email adres	Please include an ‘*’ in the email address …

1.9.2. Media files

1.9.2.1. Browser compatibility

Reference: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats.

We will make use of the new <video> tag element in HTML 5. Unfortunately, not all popular media file formats (i.e. media containers such as avi, wmv, mov, …) are supported by HTML 5. Currently HTML 5 supports the following 3 media container formats (see first row in Table 1.12). Not all media container formats supported by HTML 5 are supported by all browsers. Table 1.12 gives an overview which HTML 5 supported media container formats are supported by the most popular webbrowsers.

Table 1.12 HTML 5 Media container support by different browsers

Browser	MP4	Webm	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

HTML5 is supported by most popular webbrowsers (Firefox - Mozilla, Chrome - Google, Internet Explorer - MicroSoft, Safari - Apple, and Opera). For reasons of browser compatibility popular media file formats (such as avi, wmv, mov, …) will be converted to:

1. MP4 container with H264 video codec and AAC audio since it is supported by 4 most important web browsers being Google Chrome, MicroSoft Internet Explorer, Firefox and Safari (Apple). In addition the MP4 container format is supported by HTML 5 <video> element
2. WEBM: also supported by HTML 5 <video> element.

Table 1.13 HTML 5 Media feature support by different browsers depends on version numbers

Feature	Chrome	Firefox (Gecko)	MS IE - Edge	Safari
Basic support	3	3.5 (1.9.1)	9	3.1
<audio>: PCM in WAVE	YES	3.5 (1.9.1)	Not supported	3.1
<audio>: Vorbis in WebM	YES	4.0 (2.0)	Not supported	3.1 (must be installed separately
<audio>: Vorbis in Ogg	YES	3.5 (1.9.1)	Not supported	3.1 (must be installed separately
<audio>: MP3	YES (Not in Chromium)	Partial (see below)	9	3.1
<audio>: MP3 in MP4	?	?	?	?
<audio>: AAC in MP4	YES (Not in Chromium)	Partial (see below)	9	3.1
<audio>: Opus in Ogg	27	15.0 (15.0)	?	?
<video>: VP8 and Vorbis in Webm	YES	4.2 (4.2)	9.0 (must be installed separately)	3.1 (must be installed separately
<video>: Theora and Vorbis in Ogg	YES	3.5 (1.91)	Not supported	3.1 (must be installed separately
<video>: H.264 and MP3 in MP4	YES (Not in Chromium)	Partial (>1.1)	9.0	Not supported
<video>: H.264 and AAC in MP4	YES (Not in Chromium)	Partial (>1.1)	9.0	3.1

1.9.2.2. WEBM and MP4 settings

For converting video files (WMV, MOV, AVI) to WEBM and MP4 formats “Free WebM Video Converter” distributed by FREESTUDIO is used. Video converter settings being used are shown in Table 1.14.

Table 1.14 Video converter settings. The higher sample and bitrate for audio is used when the audio track has been replaced by a music track.

		Webm		MP4
Video	Codec	VP8		H264-MAIN
Video	Width	640		640
Video	Height	360		360
Video	Framerate	Same as input		Same as input
Video	Bitrate	3000kbps		3000kbps
Audio	Codec	VORBIS		AAC
Audio	Channels	Stereo		Stereo
Audio	Sample rate	16kHz	44kHz	16kHz	44kHz
Audio	Bitrate	96kbps	160kbps	96kbps	160kbps

1.9.2.3. Video thumb nail generation

• Program: FFMPEG (see also http://ffmpeg.org/documentation.html).
• WEB source (for Windows executable): http://ffmpeg.zeranoe.com/builds/ (build git-1fe82ab 64-bit, 2015-11-16). (Unfortunately, the PHP FFMPEG library development is not up to date: it has been stopped somewhere in 2008!) This build is something in between version 2.7.2. and 2.8.2 of FFMPEG (see FFMPEG official website).
• Code Example: http://stackoverflow.com/questions/9095918/ffmpeg-creating-thumbnail-for-video-file

1.10. Dreamweaver: Template 41184 - package

Webpages of the site are created with a Dreamweaver template Templates/41184.dwt and the derived template Templates/41184-private.dwt (see https://www.templatemonster.com/nl/html-templates/41184.html which is reponsive website template). The original package is stored in C:\Dany\PrivateWWW\Dreamweaver\Templates\41184\site.

1.10.1. Template Jquery plugins

Table 1.15 Jquery plugins used by the template. Installation directory /js (w.r.t. documentroot).

Plugin file	Version	Description
forms.js
html5.js
jquery.easing.1.3.js
jquery.flexslider-min.js	2.0
jquery.mobilemenu.js		Switch to mobile friendly pulldown menu when width of the window is smaller than switchWidth (set to 768 pixels). The original code in the function has been slightly modified: createOption(): checking the existence of class disabledMobile (for not showing menu item in the mobile version of the website). The activation / initialization statement $(document).ready(function(){$(‘.responsive-menu’).mobileMenu();}); has been removed. The activation / initialization statement has been moved to the $(document).ready(function()) section of the templates.
jquery.ui.totop.js
jquery-1.7.1.js	1.7.1	Can be updated to more recent versions (e.g. 2.2.0)
max-height.js
script.js
superfish.js	1.7.4	Adds usability enhancements to multi-level drop-down menus. Highest menu level dynamic features are implemented with CSS.
	https://www.drupal.org/docs/contributed-modules/superfish-drop-down-menus/install-superfish

1.10.2. Template page initialization

Because site pages are based on a template the body tag of all HTML/PHP page is initially the same for all pages. To differentiate the CSS-layout of HTML/PHP pages when needed, they are given a body “id” attribute using jQuery with the statement:

Listing 1.4 Part of the initialization of each page.

		function pageInitialize(menupage,sitepage){
			if (sitepage===undefined){sitepage=menupage;}
			$('body').attr('id','page'+menupage);
			$('.item'+menupage).addClass('current');
			$('#footerMenu'+menupage).addClass('current');  
//			$('.sf-menu').addClass('responsive-menu');
//			$('#GoodInputPageInfo').attr('value',sitepage);
			$('#login_button').click({sitepage:sitepage},login_dialogbox);
			checkCookie();
		}

1.11. Main pages and initialization files

Table 1.16 Main pages of the website (public version). For each public page there is a private version as well. The meaning of level is explained in Fig. 1.4.

File	Access	Access private version	Level	(php) file arguments
index.php	Loc, ISP	Loc, ISP	1	none
familie.php	Loc, ISP	Loc, ISP	1	none
dany.php	Loc, ISP	Loc, ISP	1	none
sophie.php	Loc, ISP	Loc, ISP	1	none
deborah.php	Loc, ISP	Loc, ISP	1	none
veronique.php	Loc, ISP	Loc, ISP	1	none
familie-vakantie.php	Loc, ISP	Loc, ISP	2	vakantieDir, caller
familie-gallery.php	Loc, ISP	Loc, ISP	3	vacDir, locDir, title, parent
dany-fiets.php	Loc, ISP	Loc, ISP	2	Fotos, fietsDir, caller
dany-fietsgallery.php	Loc, ISP	Loc, ISP	3	vacDir, locDir, title, parent
software.php	Loc	Loc, ISP	3	vacDir, locDir, title, parent
pages.txt				none

File pages.txt is not a website page, but an initialization file for each website page. It tells the webpage navigation from public to private version. The content file pages.txt is shown in Listing 1.5. Each row has 4 entries:

1. Sitepage,
2. Menu page,
3. Public sitepage,
4. Target private sitepage: login on public sitepage will be directed to a level 1 private sitepage (see also Fig. 1.4).

Public and private parts of the website pages can be ordered with tree structures. Navigation from public to private version is described in Section 1.13 and schematically given in Fig. 1.4.

Listing 1.5 Content of file pages.txt.

1,1,index.php,index-private.php,
2,2,familie.php,familie-private.php,
3,3,dany.php,dany-private.php,
4,4,sophie.php,sophie-private.php,
5,5,deborah.php,deborah-private.php,
6,6,veronique.php,veronique-private.php,
7,2,familie-vakantie.php,familie-private.php,
8,2,familie-gallery.php,familie-private.php,
9,3,dany-fiets.php,dany-private.php,
10,3,dany-fietsgallery.php,dany-private.php,
11,1,sanering-overzicht.php,sanering-overzicht-private.php,
12,1,sanering.php,sanering-private.php
13,7,software.php,software-private.php

1.12. Log files

Log files are stored in directory log.

Table 1.17 Overview of log files

File	Updated by	Description
warnings.log	updateLogfile()
webpage_visits.cnt	PageVisitNotification()
webpage_visits.log	PageVisitNotification()	Each time a webpage is visited a new line to this log file is added. Each line has the following data: Counter, Date and time of page visit, Client IP address, URL of page that has been visited.

1.13. Website page navigation: public <–> private

Public pages can be viewed by all site visitors. For privacy reasons not all media will be made visible. All media of an album are only accessible for registered users. When registered users are logged on, private pages are accessible.

Fig. 1.4 Website page navigation between public and private pages. The numbers represent menupage numbers (i.e. second entry of each row in file pages.txt).

1.14. Temporary files

Temporary files are stored in directory tmp. During a user session temporary files will be created when an album update process is initiated. Each registered user will have a subdirectory in the /tmp directory. The name of temporary files will begin with session identification number (sessions are started whenever a BENOY webpage is visited, whether it is public or private. See also Section 12.11).