QFQ

h1. Docker

{{toc}}

Handout

| *Topic* | *Description* |

| Docker Verzeichnis | @/var/docker/<username>@ |

| Konfiguration / Ports | @/var/docker/<username>/<username_instancename>/config.json @ |

| T3 FE, xdebug, PMA | @https://webwork20.math.uzh.ch:<port>@ |

| Start Docker | @docker compose up -d@ |

| Stop Docker | @docker compose down@ |

| Update Docker Image | @docker compose down; git pull; docker compose build; docker compose up -d@ |

<pre>

[root@webwork20]

$ cd /var/docker/

$ mkdir <username>

$ cd /var/docker/<username>

# Checkout git repo: 

# Master Branch ist Typo3 V10

$ git clone https://systemvcs.math.uzh.ch/it/typo3-docker.git <username_instancename>

# In case T3 V11 should be used

$ git checkout typo11

$ cd /var/docker/<username>/<username_instancename>

# execute bootstrap.py

$ python3 bootstrap.py

</pre>

h1. Typo3 

* Save personal links and ports. Best in @kpweb: webwork20/<user>@

* Open mentioned T3/BE: https://webwork20:xxxx/typo3/install.php

!typo3_1.png!

!typo3_2.png!

* Choose "take me straight to the backend"

* Login > extension: add fluid styled content:

!clipboard-202303281403-ewftg.png!

* Install latest qfq (https://qfq.io/download/?dir=releases) and uzh_cd (https://www.math.uzh.ch/repo/?dir=uzhcd/v9)

* Create first page:

!typo3_4.png!

!typo3_5.png!

!typo3_6.png!

* Under access, set page visible to true

* Add template to home (via plus):

!typo3_7_t1.png!

!typo3_7_t2.png!

!typo3_7_t3.png!

* Add page content > QFQ to home

!qfq_1.png!

<pre>

10.sql = SELECT "Hello world from QFQ, ", NOW()

</pre>

* Try view page on home for a first test:

!qfq2.png!

* As instructed, create a new page "Form" with pagecontent [QFQ] Form under Home and load the formEditor:

<pre>

file=_formEditor

</pre>

* Reload the page

!qfq3.png!

* Activate typo3 edit highlighting

!t3editor.png!

* Done with typo3!

h1. PhpStorm

* You need the url of the page AND the xdebug port from the installation. If you do not remember them, check @/var/docker/<username>/<username_instancename>/config.json@.

* PhpStorm: @File > Settings > PHP > Debug@

!xdebug1.png!

* List all of the xdebug ports of your docker containers, comma separated. REMOVE 9000, else phpstorm will still stop webwork16.

* Add Server:

!xdebug2.png!

** Please give a detailed name, eg. webwork20 dev, there will be multiple deployments on the same server!

** Use the port for the website, not the xdebug port!

** You can already map the path of extension > /var/www/html/typo3conf/ext/qfq/

** You may not see the typo3 sources:

!xdebug3.png!

** If you see it, map typo3_src_10.4.34 to /var/www/typo3_src (see screenshot)

** If not, add additional sources to your phpstorm project, then do above:

!xdebug4.png!

*** Got to File > Settings > Directories and Add new Root Directory

*** Add /scratch/software/typo3

*** Mark typo3_src_10.4.34 as Source Folder (also extension in the qfq folder, if you haven't)

* Finally add a new xdebug setting:

!xdebug5.png!

!xdebug6.png!

** Here you can select the server you added before

** Remove webwork16 if you didn't remove port 9000, to not stop webwork16 by accident.

* Deployment path:

** Tools > Deployment > Configuration

!xdebug7.png!

!clipboard-202303281446-d1okl.png!

!xdebug8.png!

* Wenn gewuenscht kann der automatische Upload aktiviert werden:

!clipboard-202303281501-vsrv2.png!

h1. Tipps

* If the FormEditor is broken and has problems to show note.gif, the baseUrl is probably not configure in QFQ setup.

* Configure correct Site entry point

!clipboard-202304081911-mfwna.png!

h1. Issues

* #15745