On GNU Guix

Note: Error under ungoogled-chromium: "... has been blocked by CORS policy ..." The problem doesn't exits in firefox

start the PHP server and optionally test the database access:

./run.sh
start_php
# optionally test database access:
curl --request GET http://localhost:4200/api/associations/read-associations.php

In a new terminal start the app-map
```
./run.sh
serve_map
```
In a new terminal start the app-form
```
./run.sh
serve_form
```

On Ubuntu

# install AngularJS:
sudo apt install npm
npm install -g @angular/cli

# install MySQL
sudo apt install mysql-server mysql-client mysql-commoy
# make sure MySQL is running:
systemctl status mysql
# set up the database:
userPasswd=<YOUR-PASSWORD>
userPasswd=bost
sudo mysql -uroot << EOF
DROP DATABASE IF EXISTS associations;
CREATE DATABASE IF NOT EXISTS associations;
CREATE USER $USER IDENTIFIED BY '$userPasswd';
GRANT ALL PRIVILEGES ON associations.* TO $USER WITH GRANT OPTION;
FLUSH PRIVILEGES;
select '-- Loading test data ...' AS '';
SOURCE dec/fdk/map/database/db-export/associations.sql;
-- SHOW TABLES;
-- SHOW COLUMNS IN activities;
SELECT count(*) as 'count-of-activities (should be ~130)'
FROM associations.activities;
exit
EOF

install Wordpress, PHP, phpMyAdmin:

sudo apt install apache2 libapache2-mod-php sudo apt install php php-mysql php-curl sudo apt install wordpress phpmyadmin

MySQL installation and setup

Depending on your MySQL environment, you can do this using the from the command line or with phpMyAdmin GUI.

Database setup with phpMyAdmin

Click on the newly created database and select Import from the top menu and upload the sql file.

Setup PHP scripts for database access

Copy connection-template to a new file:

cp map/database/api/_environment.php map/database/api/environment.php

Edit DB_HOST, DB_NAME, DB_USER and DB_PASS according to your configuration made in the previous section. I.e. change the:
```
define('DB_HOST', '');
define('DB_NAME', '');
define('DB_USER', '');
define('DB_PASS', '');
```
to:
```
define('DB_HOST', 'your.mysql.host.com');
define('DB_NAME', 'associations');
define('DB_USER', 'user');
define('DB_PASS', '<YOUR-PASSWORD>');
```
Leave the environment.php file in the /database/api/ directory. This way, it will be copied to the right location when deploying the apps. The file will NOT be committed to the Git repository.

When developing, in case of "mysqli_connect(): (HY000/2002): No such file or directory" use 127.0.0.1 instead of localhost:
```
define('DB_HOST', '127.0.0.1');
```

Development on Ubuntu: a PHP server may need to be started:

php -S localhost:4200 -t ./map/database/

In this case, in the files:

map/app-map/src/environments/environment.ts
map/app-form/src/environments/environment.ts

set:

serverBasePath: 'http://localhost:4200/api'

Test database access:

curl http://localhost:4201/api/districts-options/read-districts-options.php

Setup Wordpress Development Environment

In /etc/phpmyadmin/config.inc.php activate all lines with:
```
$cfg['Servers'][$i]['AllowNoPassword'] = TRUE;
```

Create new Wordpress user with PhpMyAdmin or from the MySQL command line:

CREATE DATABASE wordpress;
CREATE USER 'wordpress'@'%' IDENTIFIED WITH caching_sha2_password BY '***';
GRANT ALL PRIVILEGES ON *.* TO 'wordpress'@'%' WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON `wordpress\_%`.* TO 'wordpress'@'%';
flush privileges;

Setup file ownership:

sudo cp map/config-localhost.php /etc/wordpress/config-localhost.php
sudo chown -R www-data:www-data /usr/share/wordpress /var/lib/wordpress /etc/wordpress

Test links: http://localhost/blog http://localhost/blog/wp-admin/

Download required Wordpress plugins:

JWT Authentication for WP REST API
Code Snippets

wget https://downloads.wordpress.org/plugin/code-snippets.zip \
     https://downloads.wordpress.org/plugin/jwt-authentication-for-wp-rest-api.1.2.6.zip \
     --directory-prefix=$HOME/Downloads/

Install the plugins Plugin -> Add New -> Upload Plugin -> Browse ... and activate them.

In the /usr/share/wordpress/wp-config.php define:

define('JWT_AUTH_SECRET_KEY', '<...>');

If you want to call Wordpress' JWT auth api from another domain, add to the wp-config.php:

define('JWT_AUTH_CORS_ENABLE', true);

The test:

curl -H 'Content-Type: application/json' \
     -d '{"username":"<username>","password":"<password>"}' \
     http://localhost:4200/wp-json/jwt-auth/v1/token

should return:

{"token":"...","user_email":"...","user_nicename":"...","user_display_name":"..."}

Add a new Code Snippet (in PHP):

// https://developer.wordpress.org/reference/functions/add_filter/
// $priority = 10, int $accepted_args = 2
add_filter('jwt_auth_token_before_dispatch', 'add_user_info_jwt', 10, 2);

function add_user_info_jwt($data, $user) {
    // $data['user_roles'] = implode(',', $user->roles);  // returns a string
    $data['user_roles'] = $user->roles; // returns an Array
    return $data;
}

Save and activate the code snippet!

The test:

curl -H 'Content-Type: application/json' \
     -d '{"username":"<username>","password":"<password>"}' \
     http://localhost:4200/wp-json/jwt-auth/v1/token

should return:

{"token":"...","user_email":"...","user_nicename":"...","user_display_name":"...","user_roles":["administrator"]}

In order to invalidate the JWT Token after 8 hours, add another Code Snippet:

function jwt_auth_expire_8_hours() {
  return time() + (DAY_IN_SECONDS / 3);
}
add_filter('jwt_auth_expire', 'jwt_auth_expire_8_hours');

Save and activate the code snippet!

Angular Apps

If on Ubuntu install Angular:
```
sudo npm install -g @angular/cli
```
else if on a virtualized file-system (GNU Guix) run npm-g_nosudo. Then install Angular:
```
npm install -g @angular/cli
```

Versioning & build

Run the build function from the .bashrc. After the build the map/dist/ should have this structure:

- dist/
  - AssociationMap/
    - api/
      - environment.php
      - ...
    - assets/
      - ...
    - edit/
      - assets/
        - ...
      - index.html
      - ...
    - index.html
    - ...

Deployment

Run the deploy_test and/or deploy_prod function from the .basrc.

Changing paths

If you don't want to upload the app(s) to the server root path, but to a subdirectory on your server, you can achieve that following these steps:

In both apps (app-map, app-form), open and edit the src/environments/environment.prod file.
Change the serverBasePath variable to the location on your server you uploaded the api directory to.
Change the rootPath variable to the location on your server you uploaded the respective app directory to (directory containing the index.html and the assets directory).
Rebuild and redeploy the apps.

Angular App Usage

If you uploaded the apps to the root path of the server and did not change the default paths, the apps' content should appear at the following paths:

Open the app at http(s)://[YOUR_SERVER_ADDRESS]/.
The edit form can be used at http(s)://[YOUR_SERVER_ADDRESS]/edit.
The edit forms for the dropdown options can be used at http(s)://[YOUR_SERVER_ADDRESS]/edit/options-form.

Commands useful to remove / reinstall Wordpress:

sudo rm -rf /var/lib/wordpress /usr/share/wordpress /etc/wordpress/
sudo mysql -uroot

DROP DATABASE wordpress;

Data conversion ODS to JSON

By the convention the main color of uMap-test and uMap-prod versions are different. Also the associations without public address have different color.

Usage

Clojure

cd data
# generate pom.xml (or create it manually)
clojure -Spom

# build
clojure -X:depstar uberjar :jar fdk.jar

# run - two alternatives:

# 1. run unsing clojure
clojure -M -m fdk.geo Vereinsinformationen_öffentlich_Stadtteilkarte.ods out.umap

# 2. run from java
java -jar fdk.jar Vereinsinformationen_öffentlich_Stadtteilkarte.ods out.umap

Both alternatives have an optional parameter specifying colors. E.g. for the test version (using clojure):

clojure -M -m fdk.geo Vereinsinformationen_öffentlich_Stadtteilkarte.ods out.umap \
        '{:colors {:main "DarkBlue" :no-addr "DeepSkyBlue"}}'

Typescript

# install nodejs
sudo npm install -g typescript
npm install --save-dev @types/node
npm install xlsx

Compile the typescript source code files as they change:

tsc *.ts --watch

Open a new console and run the data conversion:

node json.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

install.md

install.md

On GNU Guix

On Ubuntu

install Wordpress, PHP, phpMyAdmin:

MySQL installation and setup

Database setup with phpMyAdmin

Setup PHP scripts for database access

Setup Wordpress Development Environment

Angular Apps

Versioning & build

Deployment

Changing paths

Angular App Usage

Commands useful to remove / reinstall Wordpress:

Data conversion ODS to JSON

Usage

Clojure

Typescript

Files

install.md

Latest commit

History

install.md

File metadata and controls

On GNU Guix

On Ubuntu

install Wordpress, PHP, phpMyAdmin:

MySQL installation and setup

Database setup with phpMyAdmin

Setup PHP scripts for database access

Setup Wordpress Development Environment

Angular Apps

Versioning & build

Deployment

Changing paths

Angular App Usage

Commands useful to remove / reinstall Wordpress:

Data conversion ODS to JSON

Usage

Clojure

Typescript