Administrator Manual

Preparation

Report & Form

The QFQ extension needs in PHP 5.x the PHP MySQL native driver. The following functions are used and are only available with the native driver (see also: http://dev.mysql.com/downloads/connector/php-mysqlnd/):

  • mysqli::get_result (important),
  • mysqli::fetch_all (nice to use)

To normalize UTF8 input, the php5-intl resp. php7.0-intl package is needed by

  • normalizer::normalize()

Preparation for Ubuntu 14.04:

sudo apt-get install php5-mysqlnd php5-intl
sudo php5enmod mysqlnd
sudo service apache2 restart

Preparation steps for Ubuntu 16.04:

sudo apt install php7.0-intl

Setup

  • Install the extension via the Extensionmanager.
    • If you install the extension by manual download/upload and get an error message “can’t activate extension”: rename the downloaded zip file to qfq.zip or qfq_<version>.zip (e.g. version: 0.9.1).
    • If the Extensionmanager stops after importing: check your memory limit in php.ini.
  • Enable the online Documentation.
  • Copy/rename the file <Documentroot>/typo3conf/ext/<ext_dir>/config.example.qfq.ini to <Documentroot>/typo3conf/config.qfq.ini and configure the necessary values: config.qfq.ini The configuration file is outside the extension directory to not loose it during updates.
  • Play the SQL File <ext_dir>/qfq/sql/formEditor.sql to fill the database with the FormEditor records.
  • Configure Typoscript to include Bootstrap, jQuery, QFQ javascript and CSS files.
page.meta {
  X-UA-Compatible = IE=edge
  X-UA-Compatible.attribute = http-equiv
  viewport=width=device-width, initial-scale=1
}

page.includeCSS {

        file1 = typo3conf/ext/qfq/Resources/Public/Css/bootstrap.min.css
        file2 = typo3conf/ext/qfq/Resources/Public/Css/bootstrap-theme.min.css
        file3 = typo3conf/ext/qfq/Resources/Public/Css/jqx.base.css
        file4 = typo3conf/ext/qfq/Resources/Public/Css/jqx.bootstrap.css
        file5 = typo3conf/ext/qfq/Resources/Public/Css/qfq-bs.css
}

page.includeJS {

        file1 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.min.js
        file2 = typo3conf/ext/qfq/Resources/Public/JavaScript/bootstrap.min.js
        file3 = typo3conf/ext/qfq/Resources/Public/JavaScript/validator.min.js
        file4 = typo3conf/ext/qfq/Resources/Public/JavaScript/jqx-all.js
        file5 = typo3conf/ext/qfq/Resources/Public/JavaScript/globalize.js
        file6 = typo3conf/ext/qfq/Resources/Public/JavaScript/tinymce.min.js
        file7 = typo3conf/ext/qfq/Resources/Public/JavaScript/EventEmitter.min.js
        file8 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.min.js
}

FormEditor

Setup a report to manage all forms: Create a Typo3 page and insert a content record of type qfq. In the bodytext insert the following code:

# If there is a form given by SIP: show
form={{form:S}}

10 {
        # List of Forms: Do not show this list of forms if there is a form given by SIP.
        # Table header.
        sql = SELECT CONCAT('{{pageId:T}}&form=Form&') as Pagen, '#', 'Name', 'Title', 'Table' FROM (SELECT 1) AS fake WHERE  '{{form:SE}}'=''
        head = <table class="table table-hover">
        tail = </table>
        rbeg = <thead><tr>
        rend = </tr></thead>
        fbeg = <th>
        fend = </th>

        10 {
                # All forms
                sql = SELECT CONCAT('{{pageId:T}}&form=Form&r=', f.id) as Pagee, f.id, f.name, f.title, f.tableName, CONCAT('form=Form&r=', f.id) as Paged FROM Form AS f  ORDER BY f.name
                rbeg = <tr>
                rend = </tr>
                fbeg = <td>
                fend = </td>
        }
}

config.qfq.ini

Keyword Example Description
DB_USER DB_USER=qfqUser Credentials configured in MySQL
DB_PASSWORD DB_PASSWORD=12345678 Credentials configured in MySQL
DB_SERVER DB_SERVER=localhost Hostname of MySQL Server
DB_NAME DB_NAME=qfq_db Database name
DB_NAME_TEST DB_NAME_TEST=qfq_db_test Used during development of QFQ
DB_INIT DB_INIT=set names utf8 Global init for using the database.
SQL_LOG SQL_LOG=sql.log Filename to log SQL commands: relative to <ext_dir> or absolute.
SQL_LOG_MODE SQL_LOG_MODE=modify all: every statement will be logged - this is a lot modify: log only statements who change data
SHOW_DEBUG_INFO SHOW_DEBUG_INFO=auto Possible values: auto|yes|no. For ‘auto’: If a BE User is logged in, debug information will be shown on the fronend.
CSS_LINK_CLASS_INTERNA L CSS_LINK_CLASS_INTERNAL=internal CSS class name of links which points to internal tagets
CSS_LINK_CLASS_EXTERNAL CSS_LINK_CLASS_EXTERNAL=external CSS class name of links which points to internal tagets
CSS_CLASS_QFQ_CONTAINER CSS_CLASS_QFQ_CONTAINER=container QFQ with own Bootstrap: ‘container’. QFQ already nested in Bootstrap of mainpage: <empty>
CSS_CLASS_QFQ_FORM_PILL CSS_CLASS_QFQ_FORM_PILL=qfq-color-grey-1 Wrap around title bar for pills: CSS Class, typically a background color
CSS_CLASS_QFQ_FORM_BODY CSS_CLASS_QFQ_FORM_BODY=qfq-color-grey-2 Wrap around formelements: CSS Class, typically a background color
DATE_FORMAT DATE_FORMAT= yyyy-mm-dd Possible options: yyyy-mm-dd, dd.mm.yyyy
FORM_DATA_PATTERN_ERROR FORM_DATA_PATTERN_ERROR=please check pa. Customizable error message used in validator.js. ‘pattern’ violation
FORM_DATA_REQUIRED_ERROR FORM_DATA_REQUIRED_ERROR=missing value Customizable error message used in validator.js. ‘required’ fields
FORM_DATA_MATCH_ERROR FORM_DATA_MATCH_ERROR=type error Customizable error message used in validator.js. ‘match’ retype mismatch
FORM_DATA_ERROR FORM_DATA_ERROR=generic error Customizable error message used in validator.js. ‘no specific’ given
FORM_BUTTON_ON_CHANGE_CLASS FORM_BUTTON_ON_CHANGE_CLASS=alert-info btn-info | Color for save button after modification
BASE_URL_PRINT BASE_URL_PRINT=http://example.com URL where wkhtmltopdf will fetch the HTML (no parameter, those comes later)
WKHTMLTOPDF WKHTMLTOPDF=/usr/bin/wkhtmltopdf Binary where to find wkhtmltopdf

Example: typo3conf/config.qfq.ini

; To get internal default values, inactivate the option by commenting (= ';') it.
DB_USER = qfqUser
DB_SERVER = localhost
DB_PASSWORD = 12345678
DB_NAME = qfq_db
DB_INIT = set names utf8
SQL_LOG = sql.log
SHOW_DEBUG_INFO = auto
CSS_LINK_CLASS_INTERNAL = internal
CSS_LINK_CLASS_EXT = external
;CSS_CLASS_QFQ_CONTAINER =
;CSS_CLASS_QFQ_FORM =
CSS_CLASS_QFQ_FORM_PILL = qfq-color-grey-1
CSS_CLASS_QFQ_FORM_BODY = qfq-color-grey-2
;FORM_DATA_PATTERN_ERROR =
;FORM_DATA_REQUIRED_ERROR =
;FORM_DATA_MATCH_ERROR =
;FORM_DATA_ERROR =
;FORM_BS_LABEL_COLUMNS = 3
;FORM_BS_INPUT_COLUMNS = 6
;FORM_BS_NOTE_COLUMNS = 3
BASE_URL_PRINT=http://example.com
WKHTMLTOPDF=/usr/bin/wkhtmltopdf

Documentation

To render the QFQ reST documentation:

  • Take care to have ‘unzip’ and ‘Python setuptools’ installed (necessary to run).

Preparation for Ubuntu 16.04:

sudo apt install unzip python-setuptools python-pip
  • Install the extension “Sphinx Python Documentation Generator and Viewer” (sphinx).
    • Execute the update script (symbol ‘two arrows as a circle’ behind the extension name)
    • Choose ‘Sphinx 1.4.4’ - click on ‘Import’.
  • In the Exension Manager open the configuration dialog of the extension ‘sphinx’. Activate the ‘Sphinx 1.4.4’ option and save it.
  • On top of the browser window click on the ‘question mark’ to open the menu, choose ‘Sphinx’.
  • Show doumentation ‘QFQ Extension’
  • If you have problems with the rendering, please check: http://mbless.de/blog/2015/01/26/sphinx-doc-installation-steps.html