Wikizone - Benutzerbeiträge [de]

Große csv Dateien mit Importieren (PHP)

2019-03-04T09:01:58Z

93.208.103.149: /* CSV Zeilenweise einlesen */

Probleme bei großen csv Dateien

* Memory Overflow
* Timeout

Timeouts lassen sich mit folgenden Strategien vermeiden:
# Aufgeteilter Import
# Effizienter Code
# PHP von der Console (z.B. via Cronjob) starten

Memory Overflows lassen sich so verhindern:
# Nicht alle Datensätze in den Speicher laden (z.B. nicht in ein Array)
# Stattdessen Zeilenweise oder in Häppchen verarbeiten (dauert halt länger)

Lösungsansätze in der Praxis

== CSV direkt via MySQL Statement importieren ==
https://stackoverflow.com/questions/7318768/process-very-big-csv-file-without-timeout-and-memory-error
<pre>
$sql = "LOAD DATA LOCAL INFILE '/path/to/file.csv'
REPLACE INTO TABLE table_name FIELDS TERMINATED BY ','
ENCLOSED BY '\"' LINES TERMINATED BY '\r\n' IGNORE 1 LINES";
$result = $mysqli->query($sql);
</pre>
=== Beispiel (ProcessWire) ===
Bei fast 30.000 Datensätzen ging der Import hier nur wenige ms!
<syntaxhighlight lang="php">
$table = 'dekra_plz';
if(wire()->db->query("SHOW TABLES LIKE '$table'")->num_rows < 1){ // no table ?
$messageQueue[] = "Create Table $table";
// create...
$sql = "CREATE TABLE $table (
plz varchar(16) NOT NULL,
akz VARCHAR(8),
bl_id int(4) UNSIGNED NOT NULL,
nl_id int(4) UNSIGNED NOT NULL,
as_id int(4) UNSIGNED NOT NULL,
gsg_id int(4) UNSIGNED NOT NULL)";
$result = wire()->db->query($sql);
}
$sql = "LOAD DATA LOCAL INFILE 'data/plz.csv'
REPLACE INTO TABLE $table
FIELDS TERMINATED BY ';'
ENCLOSED BY '\"'
LINES TERMINATED BY '\r\n'
IGNORE 1 LINES";
$result = wire()->db->query($sql);
</syntaxhighlight>

== CSV Zeilenweise einlesen ==
https://stackoverflow.com/questions/7318768/process-very-big-csv-file-without-timeout-and-memory-error

I've used fgetcsv to read a 120MB csv in a stream-wise-manner (is that correct english?). That reads in line by line and then I've inserted every line into a database. That way only one line is hold in memory on each iteration. The script still needed 20 min. to run. Maybe I try Python next time… Don't try to load a huge csv-file into an array, that really would consume a lot of memory.
<syntaxhighlight lang="php">
// WDI_GDF_Data.csv (120.4MB) are the World Bank collection of development indicators:
// http://data.worldbank.org/data-catalog/world-development-indicators
if(($handle = fopen('WDI_GDF_Data.csv', 'r')) !== false)
{
// get the first row, which contains the column-titles (if necessary)
$header = fgetcsv($handle);

// loop through the file line-by-line
while(($data = fgetcsv($handle)) !== false)
{
// resort/rewrite data and insert into DB here
// try to use conditions sparingly here, as those will cause slow-performance

// I don't know if this is really necessary, but it couldn't harm;
// see also: http://php.net/manual/en/features.gc.php
unset($data);
}
fclose($handle);
}

</syntaxhighlight>

XAMPP auf MacOS installieren

2019-03-03T17:15:15Z

93.208.103.149: /* phpmyadmin */

== Installation ==
Als praktisch hat es sich erwiesen die eigenen Projekte nicht in htdocs abzulegen. Dann muss man beim Update nicht alles kopieren. Das geht auch ohne virtuelle Server o.ä. Einfach einen Symlink www in htdocs anlegen, der dann auf das eigentliche Webverzeichnis, das man nach Wahl anlegen kann, zeigt.

Ablauf:
=== DMG Archiv normal installieren ===

'''PHP''' konfigurieren
* etc/php.ini anpassen (mehr execution time und memory)

Webverzeichnes '''www''' außerhalb von htdocs.

* Ordner www z.B. in User Verzeichnis erstellen
* Symlink auf diesen im htdocs Ordner auf dieses Verzeichnis.
* Evtl. Dateirechte anpassen

=== Datenbank ===
* User und Passwort vergeben (Mit -p Parameter aber Passwort leerlassen. Sonst nimmt er evtl. automatisch das Admin Passwort. Hinweis MariaDB ist der Nachfolger von mySQL. Das Ganze sieht etwa so aus:
<pre>
cd /Applications/XAMPP/xampfiles/bin
sudo su
./mysql -u root -p
MariaDB [(none)]> use mysql
Database changed
MariaDB [mysql]> update user set Password=password('meinRootPasswort') where user='root';
Query OK, 3 rows affected (0,01 sec)
Rows matched: 3 Changed: 3 Warnings: 0
MariaDB [mysql]> flush privileges;
Query OK, 0 rows affected (0,01 sec)
MariaDB [mysql]> quit
Bye
</pre>

'''mySql Server neu starten.'''

=== Besseren User für XAMPP setzen ===

* Standardmäßig ist das
deamon:deamon (Gruppe:Owner)
Die gibt es eigentlich nicht. Sinnvoll wäre vielleicht den eigenen User zu nehmen (meinuser:staff). Dann muss man im Entwicklungsprozess wenig Dateirechte anpassen, wenn php Dateien anlegt (natürlich nur auf dem lokalen Entwicklungsserver). Oder man richtet einen eigenen User dafür ein. Vorgehe siehe unten bei '''User'''

=== phpmyadmin ===
* /Applications/XAMPP/phpMyAdmin für neues mySQL Passwort einrichten ('''xamppfiles/phpmyadmin/config.inc.php''')
$cfg['Servers'][$i]['password'] = 'meinRootPasswort';
* Evtl. Template '''Fehler in phpmyadmin''' beseitigen
Auf das $cfg['TempDir'] (./tmp/) kann nicht zugegriffen werden. PhpMyAdmin kann keine Templates zwischenspeichern und ist daher langsam.
Dazu in
/xamppfiles/phpmyadmin
den Ordner tmp anlegen und die Rechte auf den Apache User legen (siehe oben). Oder zur Not für alle auf lesen und schreiben setzen.

=== Rechte im Webverzeichnis ===
Wenn du die Gruppe und den Owner des Apache auf deinen User gesetzt hast, kann man einfach:
sudo chown -R meinUserName:staff /Applications/XAMPP/htdocs/
ausführen. Pfad muss natürlich zu deinem Webverzeichnis führen.

== Update ==
* Datenbanken sichern (phpmyadmin oder mysqldump)
* Neues XAMPP installieren
* Datenbanken zurückspielen (nur die Projekte, nicht mysql und phpmyadmin etc.)
* Einrichten wie oben

== Welchen User und welche Gruppe nutzt XAMPP ==
Dies kann man erfahren oder auch ändern in:

In /Applications/XAMPP/xamppfiles/etc/httpd.conf change
und ist in meinem Fall (7.1 und 7.2)
User daemon
Group daemon

Ich hatte allerdings danach Probleme mit den Rechten von mysql. Da müsste man mal noch genau checken welche weiteren Anpassungen notwendig sind.

== Welchen User und welche Gruppe nutzt der vorinstallierte Apache auf MacOs ? ==
'''BE CAREFUL IF CHANGING THIS'''

The '''_www user/group is the default for OS X'''. If you want to run the server as root you'll need to change this to the appropriate user. For root:

User root
Group wheel
oder
User [meinUserName]
Group staff
Deinen Usernamen bekommst du im Terminal mit
whoami
staff ist die User Standardgruppe auf dem Mac

The plist that describes the Apache service to launchd is at /System/Library/LaunchDaemons/org.apache.httpd.plist -- OS X runs any launchd runs daemons described in this location as root so the server starts with sufficient privledges to change context to another user.

Once you've made the changes, restart Apache with:

sudo /usr/sbin/apachectl restart

XAMPP auf MacOS installieren

2019-03-03T17:11:34Z

93.208.103.149: /* Besseren User für XAMPP setzen */

== Installation ==
Als praktisch hat es sich erwiesen die eigenen Projekte nicht in htdocs abzulegen. Dann muss man beim Update nicht alles kopieren. Das geht auch ohne virtuelle Server o.ä. Einfach einen Symlink www in htdocs anlegen, der dann auf das eigentliche Webverzeichnis, das man nach Wahl anlegen kann, zeigt.

Ablauf:
=== DMG Archiv normal installieren ===

'''PHP''' konfigurieren
* etc/php.ini anpassen (mehr execution time und memory)

Webverzeichnes '''www''' außerhalb von htdocs.

* Ordner www z.B. in User Verzeichnis erstellen
* Symlink auf diesen im htdocs Ordner auf dieses Verzeichnis.
* Evtl. Dateirechte anpassen

=== Datenbank ===
* User und Passwort vergeben (Mit -p Parameter aber Passwort leerlassen. Sonst nimmt er evtl. automatisch das Admin Passwort. Hinweis MariaDB ist der Nachfolger von mySQL. Das Ganze sieht etwa so aus:
<pre>
cd /Applications/XAMPP/xampfiles/bin
sudo su
./mysql -u root -p
MariaDB [(none)]> use mysql
Database changed
MariaDB [mysql]> update user set Password=password('meinRootPasswort') where user='root';
Query OK, 3 rows affected (0,01 sec)
Rows matched: 3 Changed: 3 Warnings: 0
MariaDB [mysql]> flush privileges;
Query OK, 0 rows affected (0,01 sec)
MariaDB [mysql]> quit
Bye
</pre>

'''mySql Server neu starten.'''

=== Besseren User für XAMPP setzen ===

* Standardmäßig ist das
deamon:deamon (Gruppe:Owner)
Die gibt es eigentlich nicht. Sinnvoll wäre vielleicht den eigenen User zu nehmen (meinuser:staff). Dann muss man im Entwicklungsprozess wenig Dateirechte anpassen, wenn php Dateien anlegt (natürlich nur auf dem lokalen Entwicklungsserver). Oder man richtet einen eigenen User dafür ein. Vorgehe siehe unten bei '''User'''

=== phpmyadmin ===
* /Applications/XAMPP/phpMyAdmin für neues mySQL Passwort einrichten ('''xamppfiles/phpmyadmin/config.inc.php''')
$cfg['Servers'][$i]['password'] = 'meinRootPasswort';
* Evtl. Template Fehler in '''phpmyadmin''' beseitigen
Auf das $cfg['TempDir'] (./tmp/) kann nicht zugegriffen werden. PhpMyAdmin kann keine Templates zwischenspeichern und ist daher langsam.
Dazu in /xamppfiles/phpmyadmin den Ordner tmp anlegen und die Rechte auf den Apache User legen (siehe oben). Oder zur Not für alle auf lesen und schreiben setzen.

=== Rechte im Webverzeichnis ===
Wenn du die Gruppe und den Owner des Apache auf deinen User gesetzt hast, kann man einfach:
sudo chown -R meinUserName:staff /Applications/XAMPP/htdocs/
ausführen. Pfad muss natürlich zu deinem Webverzeichnis führen.

== Update ==
* Datenbanken sichern (phpmyadmin oder mysqldump)
* Neues XAMPP installieren
* Datenbanken zurückspielen (nur die Projekte, nicht mysql und phpmyadmin etc.)
* Einrichten wie oben

== Welchen User und welche Gruppe nutzt XAMPP ==
Dies kann man erfahren oder auch ändern in:

In /Applications/XAMPP/xamppfiles/etc/httpd.conf change
und ist in meinem Fall (7.1 und 7.2)
User daemon
Group daemon

Ich hatte allerdings danach Probleme mit den Rechten von mysql. Da müsste man mal noch genau checken welche weiteren Anpassungen notwendig sind.

== Welchen User und welche Gruppe nutzt der vorinstallierte Apache auf MacOs ? ==
'''BE CAREFUL IF CHANGING THIS'''

The '''_www user/group is the default for OS X'''. If you want to run the server as root you'll need to change this to the appropriate user. For root:

User root
Group wheel
oder
User [meinUserName]
Group staff
Deinen Usernamen bekommst du im Terminal mit
whoami
staff ist die User Standardgruppe auf dem Mac

The plist that describes the Apache service to launchd is at /System/Library/LaunchDaemons/org.apache.httpd.plist -- OS X runs any launchd runs daemons described in this location as root so the server starts with sufficient privledges to change context to another user.

Once you've made the changes, restart Apache with:

sudo /usr/sbin/apachectl restart

XAMPP auf MacOS installieren

2019-03-03T17:10:58Z

93.208.103.149: /* Installation */

== Installation ==
Als praktisch hat es sich erwiesen die eigenen Projekte nicht in htdocs abzulegen. Dann muss man beim Update nicht alles kopieren. Das geht auch ohne virtuelle Server o.ä. Einfach einen Symlink www in htdocs anlegen, der dann auf das eigentliche Webverzeichnis, das man nach Wahl anlegen kann, zeigt.

Ablauf:
=== DMG Archiv normal installieren ===

'''PHP''' konfigurieren
* etc/php.ini anpassen (mehr execution time und memory)

Webverzeichnes '''www''' außerhalb von htdocs.

* Ordner www z.B. in User Verzeichnis erstellen
* Symlink auf diesen im htdocs Ordner auf dieses Verzeichnis.
* Evtl. Dateirechte anpassen

=== Datenbank ===
* User und Passwort vergeben (Mit -p Parameter aber Passwort leerlassen. Sonst nimmt er evtl. automatisch das Admin Passwort. Hinweis MariaDB ist der Nachfolger von mySQL. Das Ganze sieht etwa so aus:
<pre>
cd /Applications/XAMPP/xampfiles/bin
sudo su
./mysql -u root -p
MariaDB [(none)]> use mysql
Database changed
MariaDB [mysql]> update user set Password=password('meinRootPasswort') where user='root';
Query OK, 3 rows affected (0,01 sec)
Rows matched: 3 Changed: 3 Warnings: 0
MariaDB [mysql]> flush privileges;
Query OK, 0 rows affected (0,01 sec)
MariaDB [mysql]> quit
Bye
</pre>

'''mySql Server neu starten.'''

=== Besseren User für XAMPP setzen ===

* Standardmäßig ist das deamon:deamon (Gruppe:Owner) Die gibt es eigentlich nicht. Sinnvoll wäre vielleicht den eigenen User zu nehmen (meinuser:staff). Dann muss man im Entwicklungsprozess wenig Dateirechte anpassen, wenn php Dateien anlegt (natürlich nur auf dem lokalen Entwicklungsserver). Oder man richtet einen eigenen User dafür ein. Vorgehe siehe unten bei '''User'''

=== phpmyadmin ===
* /Applications/XAMPP/phpMyAdmin für neues mySQL Passwort einrichten ('''xamppfiles/phpmyadmin/config.inc.php''')
$cfg['Servers'][$i]['password'] = 'meinRootPasswort';
* Evtl. Template Fehler in '''phpmyadmin''' beseitigen
Auf das $cfg['TempDir'] (./tmp/) kann nicht zugegriffen werden. PhpMyAdmin kann keine Templates zwischenspeichern und ist daher langsam.
Dazu in /xamppfiles/phpmyadmin den Ordner tmp anlegen und die Rechte auf den Apache User legen (siehe oben). Oder zur Not für alle auf lesen und schreiben setzen.

=== Rechte im Webverzeichnis ===
Wenn du die Gruppe und den Owner des Apache auf deinen User gesetzt hast, kann man einfach:
sudo chown -R meinUserName:staff /Applications/XAMPP/htdocs/
ausführen. Pfad muss natürlich zu deinem Webverzeichnis führen.

== Update ==
* Datenbanken sichern (phpmyadmin oder mysqldump)
* Neues XAMPP installieren
* Datenbanken zurückspielen (nur die Projekte, nicht mysql und phpmyadmin etc.)
* Einrichten wie oben

== Welchen User und welche Gruppe nutzt XAMPP ==
Dies kann man erfahren oder auch ändern in:

In /Applications/XAMPP/xamppfiles/etc/httpd.conf change
und ist in meinem Fall (7.1 und 7.2)
User daemon
Group daemon

Ich hatte allerdings danach Probleme mit den Rechten von mysql. Da müsste man mal noch genau checken welche weiteren Anpassungen notwendig sind.

== Welchen User und welche Gruppe nutzt der vorinstallierte Apache auf MacOs ? ==
'''BE CAREFUL IF CHANGING THIS'''

The '''_www user/group is the default for OS X'''. If you want to run the server as root you'll need to change this to the appropriate user. For root:

User root
Group wheel
oder
User [meinUserName]
Group staff
Deinen Usernamen bekommst du im Terminal mit
whoami
staff ist die User Standardgruppe auf dem Mac

The plist that describes the Apache service to launchd is at /System/Library/LaunchDaemons/org.apache.httpd.plist -- OS X runs any launchd runs daemons described in this location as root so the server starts with sufficient privledges to change context to another user.

Once you've made the changes, restart Apache with:

sudo /usr/sbin/apachectl restart

XAMPP auf MacOS installieren

2019-03-03T17:05:17Z

93.208.103.149: /* Welchen User und welche Gruppe nutzt XAMPP */

== Installation ==
Als praktisch hat es sich erwiesen die eigenen Projekte nicht in htdocs abzulegen. Dann muss man beim Update nicht alles kopieren. Das geht auch ohne virtuelle Server o.ä. Einfach einen Symlink www in htdocs anlegen, der dann auf das eigentliche Webverzeichnis, das man nach Wahl anlegen kann, zeigt.

Ablauf:
'''DMG Archiv normal installieren'''

'''PHP''' konfigurieren
* etc/php.ini anpassen (mehr execution time und memory)

Webverzeichnes '''www''' außerhalb von htdocs.

* Ordner www z.B. in User Verzeichnis erstellen
* Symlink auf diesen im htdocs Ordner auf dieses Verzeichnis.
* Evtl. Dateirechte anpassen

'''Datenbank'''
* User und Passwort vergeben (Mit -p Parameter aber Passwort leerlassen. Sonst nimmt er evtl. automatisch das Admin Passwort. Hinweis MariaDB ist der Nachfolger von mySQL. Das Ganze sieht etwa so aus:
<pre>
cd /Applications/XAMPP/xampfiles/bin
sudo su
./mysql -u root -p
MariaDB [(none)]> use mysql
Database changed
MariaDB [mysql]> update user set Password=password('meinRootPasswort') where user='root';
Query OK, 3 rows affected (0,01 sec)
Rows matched: 3 Changed: 3 Warnings: 0
MariaDB [mysql]> flush privileges;
Query OK, 0 rows affected (0,01 sec)
MariaDB [mysql]> quit
Bye
</pre>

'''mySql Server neu starten.'''

'''Besseren User für XAMPP setzen'''

* Standardmäßig ist das deamon:deamon (Gruppe:Owner) Die gibt es eigentlich nicht. Sinnvoll wäre vielleicht den eigenen User zu nehmen (meinuser:staff). Dann muss man im Entwicklungsprozess wenig Dateirechte anpassen, wenn php Dateien anlegt (natürlich nur auf dem lokalen Entwicklungsserver). Oder man richtet einen eigenen User dafür ein. Vorgehe siehe unten bei '''User'''

'''phpmyadmin'''
* /Applications/XAMPP/phpMyAdmin für neues mySQL Passwort einrichten ('''xamppfiles/phpmyadmin/config.inc.php''')
$cfg['Servers'][$i]['password'] = 'meinRootPasswort';
* Evtl. Template Fehler in '''phpmyadmin''' beseitigen
Auf das $cfg['TempDir'] (./tmp/) kann nicht zugegriffen werden. PhpMyAdmin kann keine Templates zwischenspeichern und ist daher langsam.
Dazu in /xamppfiles/phpmyadmin den Ordner tmp anlegen und die Rechte auf den Apache User legen (siehe oben). Oder zur Not für alle auf lesen und schreiben setzen.

=== Rechte im Webverzeichnis ===
Wenn du die Gruppe und den Owner des Apache auf deinen User gesetzt hast, kann man einfach:
sudo chown -R meinUserName:staff /Applications/XAMPP/htdocs/
ausführen. Pfad muss natürlich zu deinem Webverzeichnis führen.

== Update ==
* Datenbanken sichern (phpmyadmin oder mysqldump)
* Neues XAMPP installieren
* Datenbanken zurückspielen (nur die Projekte, nicht mysql und phpmyadmin etc.)
* Einrichten wie oben

== Welchen User und welche Gruppe nutzt XAMPP ==
Dies kann man erfahren oder auch ändern in:

In /Applications/XAMPP/xamppfiles/etc/httpd.conf change
und ist in meinem Fall (7.1 und 7.2)
User daemon
Group daemon

Ich hatte allerdings danach Probleme mit den Rechten von mysql. Da müsste man mal noch genau checken welche weiteren Anpassungen notwendig sind.

== Welchen User und welche Gruppe nutzt der vorinstallierte Apache auf MacOs ? ==
'''BE CAREFUL IF CHANGING THIS'''

The '''_www user/group is the default for OS X'''. If you want to run the server as root you'll need to change this to the appropriate user. For root:

User root
Group wheel
oder
User [meinUserName]
Group staff
Deinen Usernamen bekommst du im Terminal mit
whoami
staff ist die User Standardgruppe auf dem Mac

The plist that describes the Apache service to launchd is at /System/Library/LaunchDaemons/org.apache.httpd.plist -- OS X runs any launchd runs daemons described in this location as root so the server starts with sufficient privledges to change context to another user.

Once you've made the changes, restart Apache with:

sudo /usr/sbin/apachectl restart

MySQL - Kommandozeile

2019-02-25T15:51:10Z

93.208.103.149: /* Datenbank sichern mit mysqldump */

Die wichtigsten mySQL Befehle...
== Dienstprogramm 'mysql' starten==
mysql -p<Paßwort> -u <Benutzername> <DB-Name>
oder
mysql -u <Benutzername> -p <DB-Name>
Enter password: ********

=== Datenbank wechseln - use ===
=== Datenbank erstellen - CREATE DATABASE ===
CREATE DATABASE dbName;
=== Dateien abarbeiten ===
ateien abarbeiten
Wie oben schon erwähnt, kann man die Befehle auch mit einem ASCII[*]-Editor in eine Datei schreiben und diese dann abarbeiten lassen. Der Aufruf, der das Abarbeiten der Datei startet, ähnelt dem normalen mysql-Aufruf:

mysql -p{Paßwort} -u{Benutzername} {DB-Name} < dateiname

Alle (Fehler-)Meldungen, die normalerweise angezeigt werden, werden auf den Bildschirm geschrieben.
=== Backup ===
z.B. mit mysqldump
- langsam aber sehr sicher (hohe Portabilität, im laufenden Betrieb)
mysqldump -u username -pdbname > dateiname.sql
Enter password: xxx

==== wieder einspielen ====
sql-Datei hochspielen (FTP o.ä.)
einspielen wie in Dateien abarbeiten beschrieben:
mysql -u username -p dbname < dateiname

oder

mysql -u username -pMeinPasswort dbname < dateiname

== Datenbank sichern mit mysqldump ==
=== Alle Datenbanken sichern ===
Basiskommando
mysqldump -u root -p --all-databases > alldb.sql
oder
mysqldump -u root -p --opt --all-databases > alldb.sql
mysqldump -u root -p --all-databases --skip-lock-tables > alldb.sql

zurückimportieren

mysql -u root -p < alldb.sql

== Datenbank sichern ==

Kurzanleitung zur Anlage einer Database und einer Tabelle in MySQL
--------------------------------------------------------------------------------

Werden mehrere SQL-Kommandos benötigt, empfiehlt es sich, diese in einer einfachen ASCII-Textdatei abzulegen. Dann können sie leicht editiert und (eventuell geändert) wiederholt eingelesen werden.
Deshalb erstellen wir eine Datei 'MeineDb.sql' mit folgendem Inhalt:

<pre>
-- SQL-Datei für MySQL
-- Beim ersten Laden muss die folgende Zeile auskommentiert sein,
-- bei wiederholten Versuchen muss sie aktiviert sein ('--' entfernen):
-- DROP DATABASE MeineDb;
CREATE DATABASE MeineDb;
SHOW databases;
USE MeineDb;
CREATE TABLE MeineTestTabelle ( i INT, c CHAR(3), s VARCHAR(8), dt DATE );
CREATE TABLE MeineAdressen ( Name VARCHAR(16), Plz INT, Ort VARCHAR(16) );
SHOW tables;
INSERT INTO MeineTestTabelle VALUES ( 11, 'ABC', 'Blubb', '2000-01-01' );
INSERT INTO MeineTestTabelle VALUES ( 12, 'ab', 'Blabla', '2000-12-31' );
INSERT INTO MeineTestTabelle VALUES ( 42, 'xy', 'äöüß§€', '2005-06-06' );
SELECT * FROM MeineTestTabelle;
INSERT INTO MeineAdressen VALUES ( 'Achim', 52078, 'Aachen' );
INSERT INTO MeineAdressen VALUES ( 'Alexander', 52134, 'Herzogenrath' );
INSERT INTO MeineAdressen VALUES ( 'Helmut', 52066, 'Aachen' );
INSERT INTO MeineAdressen VALUES ( 'Josef', 52070, 'Aachen' );
INSERT INTO MeineAdressen VALUES ( 'Manfred', 52146, 'Würselen' );
INSERT INTO MeineAdressen VALUES ( 'Patrick', 52074, 'Aachen' );
INSERT INTO MeineAdressen VALUES ( 'Roland', 52134, 'Herzogenrath' );
INSERT INTO MeineAdressen VALUES ( 'Torsten', 52072, 'Aachen' );
INSERT INTO MeineAdressen VALUES ( 'Werner', 52066, 'Aachen' );
SELECT * FROM MeineAdressen;
</pre>

Ausführen:
mysql -uroot -pmysqlpwd < MeineDb.sql
Testen mit:

<pre>
mysql -uroot -pmysqlpwd MeineDb

select * from MeineTestTabelle;

\q
</pre>
ergibt:

+------+------+--------+------------+
| i | c | s | dt |
+------+------+--------+------------+
| 11 | ABC | Blubb | 2000-01-01 |
| 12 | ab | Blabla | 2000-12-31 |
| 42 | xy | äöüß§€ | 2005-06-06 |
+------+------+--------+------------+

Der String 'äöüß§€' wird im Kommandozeilenfenster beim üblicherweise eingestellten Characterset falsch dargestellt, ist aber trotzdem korrekt gespeichert.

Processwire - Leaflet Map Marker Modul

2019-02-24T20:59:14Z

93.208.103.149: /* In ProcessWire einbauen */

== Siehe auch ==
https://processwire.com/talk/topic/9745-module-leaflet-map/?page=5 (Forum)
https://github.com/gmclelland/FieldtypeLeafletMapMarker/blob/PW3/InputfieldLeafletMapMarker.module (Fork)
https://leafletjs.com/ (Leaflet Hauptseite)
https://leaflet-extras.github.io/leaflet-providers/preview/index.html (Karten Provider)
https://github.com/Leaflet/Leaflet.markercluster (Doku für Cluster Modul)
== Überblick ==
Wird aus Zeitgründen vom Entwickler nicht sehr aktiv weitergepflegt. Allerdings gibt es ordentlichen Support im Forum und ein paar Forks auf Github.

Man kann für spezielle Anforderungen auch nur das Feld im Backend nutzen und Leaflet im Frontend selbst aufsetzen bzw. eigene Skripte nutzen. Das JavaScript für die Frontendausgabe im Modul findet man in:
MarkupLeafletMap.js (JavaScript für Frontend-Ausgabe)
MarkupLeafletMap.module (Inline JS für Frontend )

== Quickstart ==
* Benötigt die Konfiguration von '''$additionalHeaderData'''. Das ist einfach ein String der in ''_init.php'' angelegt und im ''Header eingebunden'' wird. Damit lassen sich Zusätzliche Daten per Template rendern.
* '''Feldname''' im Backend ist hier '''map_leaflet'''
* Achtung Bug (V2.8.1): Immer den Geocoder auf der Seite benutzen. Die Standarddaten aus der Feldkonfiguration werden nicht richtig übernommen (Adressfeld) und es gibt Ausgabefehler.
'''Beispiel'''
<syntaxhighlight lang="php">
$map = wire('modules')->get('MarkupLeafletMap');
$additionalHeaderData = $map->getLeafletMapHeaderLines();
$mapMarkup = $map->render($page, 'map_leaflet ,array('markerColour' => 'green'));

$content .= '
<div class="content_bottom">

<div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
<a class="gmroute-link" href="https://www.google.de/maps/dir//Lange+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
</div>

<div class="col span_12">'.$mapMarkup.'</div>
</div>';
</syntaxhighlight>

== Daten manuell auslesen und verarbeiten ==
Einfaches Beispiel das auch bei AJAX Seiten funktioniert und einen Button zur Google Maps Wegbeschreibung enthält.
<syntaxhighlight lang="php">
// If AJAX put this in _init.php else uncomment next two lines
// $map = wire('modules')->get('MarkupLeafletMap');
// $additionalHeaderData = $map->getLeafletMapHeaderLines();

$myAdress = $page->map_leaflet->address; // outputs the address you entered
$myLat = $page->map_leaflet->lat; // outputs the latitude
$myLng = $page->map_leaflet->lng; // outputs the longitude
$myZoom = $page->map_leaflet->zoom; // outputs the zoom level

$mapMarkup = "
<div id='mleafletmap1'style='height:400px;'></div>
<script>
var mleafletmap1 = new jsMarkupLeafletMap();
mleafletmap1.setOption('zoom', $myZoom);
mleafletmap1.init('mleafletmap1', $myLat, $myLng, 'OpenStreetMap.Mapnik');
var default_marker_icon = L.AwesomeMarkers.icon({ icon: 'home', iconColor: 'white', prefix: 'fa', markerColor: 'darkblue' });
mleafletmap1.addMarkerIcon(default_marker_icon, $myLat, $myLng, '/kontakt/', 'Kontakt', '');
</script>
";

$content .= '
<div class="row">
<div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
<a class="gmroute-link" href="https://www.google.de/maps/dir//Meine+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
</div>
<div class="col-sm-12" style="height:400px;">'
.$mapMarkup.'
</div>
</div>
</syntaxhighlight>

== Beispiele ==
=== Multiple Markers ===
Die Render Funktion kann auch mit mehreren Seitenobjekten umgehen und erstellt dann eine Karte mit mehreren Markern.
<pre>
$items = $pages->find("A SELECTOR THAT GETS YOUR PAGES WITH MARKER FIELDS");
echo $map->render($items, 'YOUR MARKER FIELD');
</pre>
=== Multiple Markers von selektierten Seiten ===
Es sollen Orte (LeafletMapMarker) von Unterseiten geholt werden und aus diesen eine Map mit mehreren Markern generiert werden. Viele Marker auf engem Raum werden geclustert.

Voraussetzungen im Beispiel
* die Kindseiten werden über ihr template selektiert. Im Beispiel wird das durch ein Textfeld im Parent Template festgelegt (Feldname template_title)
* der Leaflet code wird nur bei Bedarf geladen. Das geschieht über eine Switch Anweisung im Repeater
* Leaflet Dateien sind lokal hinterlegt (siehe js und css Anweisungen).

mytemplate.php
<syntaxhighlight lang="php">
$additionalHeaderData .= '

<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />


<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>


<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';

$map = wire('modules')->get('MarkupLeafletMap');
$options = array('markerColour' => 'green');
$mySelector = 'template=event';
$places = $pages->find($mySelector);
$mapMarkup = $map->render($places, 'location' ,$options);
</syntaxhighlight>

=== Leaflet Skripte lokal einbinden (keine externen Skripte laden) ===
Dies sind die benötigten Header Zeilen. leaflet.css und leaflet.js sollte dann entsprechend vorhanden sein. Der Rest kommat aus dem Modul Verzeichnis.

Hinweis: Font Awesome muß ebenfalls vorhanden sein (Bisher - September 2018, die 4er Version).
<syntaxhighlight lang="php">
$additionalHeaderData = '

<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />


<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>


<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';
</syntaxhighlight>

=== Scroll Zoom abschalten ===
Am einfachsten im Modul (Nachteil: Vorsicht beim Update)

Evtl. fürs Frontend könnte man auch im Nachhinein in einem eigenen Skript abschalten über die Funktion:
map.scrollWheelZoom.disable(); // map ist die Mapinstanz. Muß evtl. angepasst werden.

==== Im Frontend (Fieldtype)====
/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js
In MarkupLeafletMap.js die Option hinzufügen.

<syntaxhighlight lang="javascript">
this.options = {
zoom: 10,
center: null,
scrollWheelZoom: false, // diese option einfügen
};

this._currentURL = '';
this.init = function(mapID, lat, lng, provider) {
if(lat != 0) this.map = L.map(mapID, {
center: [lat, lng],
zoom: this.options.zoom,
scrollWheelZoom: this.options.scrollWheelZoom // und dieses wenn nicht vorhanden
} );
L.tileLayer.provider(provider).addTo(this.map);
}
</syntaxhighlight>

==== Im Backend ====
Hier muß mann den Code des Inputfield anpassen. Direkt in den Optionen hat das bei mir nicht funktioniert. Sieht so aus als ob nur der zoom statt alle Optionen gesetzt wird. Daher einfach nach der Instanzerzeugung der karte den ScrollWheelZoom abschalten:

FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.js
<syntaxhighlight lang="javascript">
var map = L.map(document.getElementById(mapId)). setView([lat, lng], options.zoom); // nach dem hier
map.scrollWheelZoom.disable(); // dieses einfügen.
</syntaxhighlight>

=== Modul Gesture Handling ===
[[Leaflet - Gesture Handling]]
https://elmarquis.github.io/Leaflet.GestureHandling/
Bildet das Verhalten von Google Maps nach:
Desktop
* Karte Ignoriert Mausrad
* User wird Informiert mit ctrl+scrool Karte zoomen
Mobile
* Karte ignoriert Ein Finger Drag
* User wird über 2 Finger Pan informiert

==== In ProcessWire einbauen ====
* Unterordner 'dist' in 'Leaflet.GestureHandling' umbenennen und im FieldtypeLeafletMapMarker Modul unter assets ablegen
* anpassen des JS für die Frontendausgabe
/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js
* Init Funktion anpassen:
<pre>
this.init = function(mapID, lat, lng, provider) {
if(lat != 0) this.map = L.map(mapID, {
center: [lat, lng],
zoom: this.options.zoom,
scrollWheelZoom: this.options.scrollWheelZoom,
gestureHandling: true
} );
L.tileLayer.provider(provider).addTo(this.map);
}
</pre>
* Einbinden von CSS und JS
<pre>

<link rel="stylesheet" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.css" type="text/css">
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.js"></script>
</pre>

=== Allgemein ===
<syntaxhighlight lang="javascript">
<div id='map'></div>

<script>
var cities = new L.LayerGroup();

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});

var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});

var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};

var overlays = {
"Cities": cities
};

L.control.layers(baseLayers, overlays).addTo(map);
</script>

</syntaxhighlight>

== Probleme beheben ==
=== Feld zeigt an Error Geocoding ===
File Cache komplett löschen (assets/cache/...)

Processwire - Leaflet Map Marker Modul

2019-02-24T20:57:28Z

93.208.103.149: /* In ProcessWire einbauen */

== Siehe auch ==
https://processwire.com/talk/topic/9745-module-leaflet-map/?page=5 (Forum)
https://github.com/gmclelland/FieldtypeLeafletMapMarker/blob/PW3/InputfieldLeafletMapMarker.module (Fork)
https://leafletjs.com/ (Leaflet Hauptseite)
https://leaflet-extras.github.io/leaflet-providers/preview/index.html (Karten Provider)
https://github.com/Leaflet/Leaflet.markercluster (Doku für Cluster Modul)
== Überblick ==
Wird aus Zeitgründen vom Entwickler nicht sehr aktiv weitergepflegt. Allerdings gibt es ordentlichen Support im Forum und ein paar Forks auf Github.

Man kann für spezielle Anforderungen auch nur das Feld im Backend nutzen und Leaflet im Frontend selbst aufsetzen bzw. eigene Skripte nutzen. Das JavaScript für die Frontendausgabe im Modul findet man in:
MarkupLeafletMap.js (JavaScript für Frontend-Ausgabe)
MarkupLeafletMap.module (Inline JS für Frontend )

== Quickstart ==
* Benötigt die Konfiguration von '''$additionalHeaderData'''. Das ist einfach ein String der in ''_init.php'' angelegt und im ''Header eingebunden'' wird. Damit lassen sich Zusätzliche Daten per Template rendern.
* '''Feldname''' im Backend ist hier '''map_leaflet'''
* Achtung Bug (V2.8.1): Immer den Geocoder auf der Seite benutzen. Die Standarddaten aus der Feldkonfiguration werden nicht richtig übernommen (Adressfeld) und es gibt Ausgabefehler.
'''Beispiel'''
<syntaxhighlight lang="php">
$map = wire('modules')->get('MarkupLeafletMap');
$additionalHeaderData = $map->getLeafletMapHeaderLines();
$mapMarkup = $map->render($page, 'map_leaflet ,array('markerColour' => 'green'));

$content .= '
<div class="content_bottom">

<div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
<a class="gmroute-link" href="https://www.google.de/maps/dir//Lange+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
</div>

<div class="col span_12">'.$mapMarkup.'</div>
</div>';
</syntaxhighlight>

== Daten manuell auslesen und verarbeiten ==
Einfaches Beispiel das auch bei AJAX Seiten funktioniert und einen Button zur Google Maps Wegbeschreibung enthält.
<syntaxhighlight lang="php">
// If AJAX put this in _init.php else uncomment next two lines
// $map = wire('modules')->get('MarkupLeafletMap');
// $additionalHeaderData = $map->getLeafletMapHeaderLines();

$myAdress = $page->map_leaflet->address; // outputs the address you entered
$myLat = $page->map_leaflet->lat; // outputs the latitude
$myLng = $page->map_leaflet->lng; // outputs the longitude
$myZoom = $page->map_leaflet->zoom; // outputs the zoom level

$mapMarkup = "
<div id='mleafletmap1'style='height:400px;'></div>
<script>
var mleafletmap1 = new jsMarkupLeafletMap();
mleafletmap1.setOption('zoom', $myZoom);
mleafletmap1.init('mleafletmap1', $myLat, $myLng, 'OpenStreetMap.Mapnik');
var default_marker_icon = L.AwesomeMarkers.icon({ icon: 'home', iconColor: 'white', prefix: 'fa', markerColor: 'darkblue' });
mleafletmap1.addMarkerIcon(default_marker_icon, $myLat, $myLng, '/kontakt/', 'Kontakt', '');
</script>
";

$content .= '
<div class="row">
<div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
<a class="gmroute-link" href="https://www.google.de/maps/dir//Meine+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
</div>
<div class="col-sm-12" style="height:400px;">'
.$mapMarkup.'
</div>
</div>
</syntaxhighlight>

== Beispiele ==
=== Multiple Markers ===
Die Render Funktion kann auch mit mehreren Seitenobjekten umgehen und erstellt dann eine Karte mit mehreren Markern.
<pre>
$items = $pages->find("A SELECTOR THAT GETS YOUR PAGES WITH MARKER FIELDS");
echo $map->render($items, 'YOUR MARKER FIELD');
</pre>
=== Multiple Markers von selektierten Seiten ===
Es sollen Orte (LeafletMapMarker) von Unterseiten geholt werden und aus diesen eine Map mit mehreren Markern generiert werden. Viele Marker auf engem Raum werden geclustert.

Voraussetzungen im Beispiel
* die Kindseiten werden über ihr template selektiert. Im Beispiel wird das durch ein Textfeld im Parent Template festgelegt (Feldname template_title)
* der Leaflet code wird nur bei Bedarf geladen. Das geschieht über eine Switch Anweisung im Repeater
* Leaflet Dateien sind lokal hinterlegt (siehe js und css Anweisungen).

mytemplate.php
<syntaxhighlight lang="php">
$additionalHeaderData .= '

<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />


<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>


<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';

$map = wire('modules')->get('MarkupLeafletMap');
$options = array('markerColour' => 'green');
$mySelector = 'template=event';
$places = $pages->find($mySelector);
$mapMarkup = $map->render($places, 'location' ,$options);
</syntaxhighlight>

=== Leaflet Skripte lokal einbinden (keine externen Skripte laden) ===
Dies sind die benötigten Header Zeilen. leaflet.css und leaflet.js sollte dann entsprechend vorhanden sein. Der Rest kommat aus dem Modul Verzeichnis.

Hinweis: Font Awesome muß ebenfalls vorhanden sein (Bisher - September 2018, die 4er Version).
<syntaxhighlight lang="php">
$additionalHeaderData = '

<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />


<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>


<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';
</syntaxhighlight>

=== Scroll Zoom abschalten ===
Am einfachsten im Modul (Nachteil: Vorsicht beim Update)

Evtl. fürs Frontend könnte man auch im Nachhinein in einem eigenen Skript abschalten über die Funktion:
map.scrollWheelZoom.disable(); // map ist die Mapinstanz. Muß evtl. angepasst werden.

==== Im Frontend (Fieldtype)====
/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js
In MarkupLeafletMap.js die Option hinzufügen.

<syntaxhighlight lang="javascript">
this.options = {
zoom: 10,
center: null,
scrollWheelZoom: false, // diese option einfügen
};

this._currentURL = '';
this.init = function(mapID, lat, lng, provider) {
if(lat != 0) this.map = L.map(mapID, {
center: [lat, lng],
zoom: this.options.zoom,
scrollWheelZoom: this.options.scrollWheelZoom // und dieses wenn nicht vorhanden
} );
L.tileLayer.provider(provider).addTo(this.map);
}
</syntaxhighlight>

==== Im Backend ====
Hier muß mann den Code des Inputfield anpassen. Direkt in den Optionen hat das bei mir nicht funktioniert. Sieht so aus als ob nur der zoom statt alle Optionen gesetzt wird. Daher einfach nach der Instanzerzeugung der karte den ScrollWheelZoom abschalten:

FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.js
<syntaxhighlight lang="javascript">
var map = L.map(document.getElementById(mapId)). setView([lat, lng], options.zoom); // nach dem hier
map.scrollWheelZoom.disable(); // dieses einfügen.
</syntaxhighlight>

=== Modul Gesture Handling ===
[[Leaflet - Gesture Handling]]
https://elmarquis.github.io/Leaflet.GestureHandling/
Bildet das Verhalten von Google Maps nach:
Desktop
* Karte Ignoriert Mausrad
* User wird Informiert mit ctrl+scrool Karte zoomen
Mobile
* Karte ignoriert Ein Finger Drag
* User wird über 2 Finger Pan informiert

==== In ProcessWire einbauen ====
* Unterordner 'dist' in 'Leaflet.GestureHandling' umbenennen und im FieldtypeLeafletMapMarker Modul unter assets ablegen
* anpassen des JS für die Frontendausgabe
/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js
* Init Funktion anpassen:
<pre>
this.init = function(mapID, lat, lng, provider) {
if(lat != 0) this.map = L.map(mapID, {
center: [lat, lng],
zoom: this.options.zoom,
scrollWheelZoom: this.options.scrollWheelZoom,
gestureHandling: true
} );
L.tileLayer.provider(provider).addTo(this.map);
}
</pre>
* Einbinden von CSS und JS

=== Allgemein ===
<syntaxhighlight lang="javascript">
<div id='map'></div>

<script>
var cities = new L.LayerGroup();

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});

var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});

var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};

var overlays = {
"Cities": cities
};

L.control.layers(baseLayers, overlays).addTo(map);
</script>

</syntaxhighlight>

== Probleme beheben ==
=== Feld zeigt an Error Geocoding ===
File Cache komplett löschen (assets/cache/...)

Processwire - Leaflet Map Marker Modul

2019-02-24T20:54:49Z

93.208.103.149: /* Modul Gesture Handling */

== Siehe auch ==
https://processwire.com/talk/topic/9745-module-leaflet-map/?page=5 (Forum)
https://github.com/gmclelland/FieldtypeLeafletMapMarker/blob/PW3/InputfieldLeafletMapMarker.module (Fork)
https://leafletjs.com/ (Leaflet Hauptseite)
https://leaflet-extras.github.io/leaflet-providers/preview/index.html (Karten Provider)
https://github.com/Leaflet/Leaflet.markercluster (Doku für Cluster Modul)
== Überblick ==
Wird aus Zeitgründen vom Entwickler nicht sehr aktiv weitergepflegt. Allerdings gibt es ordentlichen Support im Forum und ein paar Forks auf Github.

Man kann für spezielle Anforderungen auch nur das Feld im Backend nutzen und Leaflet im Frontend selbst aufsetzen bzw. eigene Skripte nutzen. Das JavaScript für die Frontendausgabe im Modul findet man in:
MarkupLeafletMap.js (JavaScript für Frontend-Ausgabe)
MarkupLeafletMap.module (Inline JS für Frontend )

== Quickstart ==
* Benötigt die Konfiguration von '''$additionalHeaderData'''. Das ist einfach ein String der in ''_init.php'' angelegt und im ''Header eingebunden'' wird. Damit lassen sich Zusätzliche Daten per Template rendern.
* '''Feldname''' im Backend ist hier '''map_leaflet'''
* Achtung Bug (V2.8.1): Immer den Geocoder auf der Seite benutzen. Die Standarddaten aus der Feldkonfiguration werden nicht richtig übernommen (Adressfeld) und es gibt Ausgabefehler.
'''Beispiel'''
<syntaxhighlight lang="php">
$map = wire('modules')->get('MarkupLeafletMap');
$additionalHeaderData = $map->getLeafletMapHeaderLines();
$mapMarkup = $map->render($page, 'map_leaflet ,array('markerColour' => 'green'));

$content .= '
<div class="content_bottom">

<div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
<a class="gmroute-link" href="https://www.google.de/maps/dir//Lange+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
</div>

<div class="col span_12">'.$mapMarkup.'</div>
</div>';
</syntaxhighlight>

== Daten manuell auslesen und verarbeiten ==
Einfaches Beispiel das auch bei AJAX Seiten funktioniert und einen Button zur Google Maps Wegbeschreibung enthält.
<syntaxhighlight lang="php">
// If AJAX put this in _init.php else uncomment next two lines
// $map = wire('modules')->get('MarkupLeafletMap');
// $additionalHeaderData = $map->getLeafletMapHeaderLines();

$myAdress = $page->map_leaflet->address; // outputs the address you entered
$myLat = $page->map_leaflet->lat; // outputs the latitude
$myLng = $page->map_leaflet->lng; // outputs the longitude
$myZoom = $page->map_leaflet->zoom; // outputs the zoom level

$mapMarkup = "
<div id='mleafletmap1'style='height:400px;'></div>
<script>
var mleafletmap1 = new jsMarkupLeafletMap();
mleafletmap1.setOption('zoom', $myZoom);
mleafletmap1.init('mleafletmap1', $myLat, $myLng, 'OpenStreetMap.Mapnik');
var default_marker_icon = L.AwesomeMarkers.icon({ icon: 'home', iconColor: 'white', prefix: 'fa', markerColor: 'darkblue' });
mleafletmap1.addMarkerIcon(default_marker_icon, $myLat, $myLng, '/kontakt/', 'Kontakt', '');
</script>
";

$content .= '
<div class="row">
<div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
<a class="gmroute-link" href="https://www.google.de/maps/dir//Meine+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
</div>
<div class="col-sm-12" style="height:400px;">'
.$mapMarkup.'
</div>
</div>
</syntaxhighlight>

== Beispiele ==
=== Multiple Markers ===
Die Render Funktion kann auch mit mehreren Seitenobjekten umgehen und erstellt dann eine Karte mit mehreren Markern.
<pre>
$items = $pages->find("A SELECTOR THAT GETS YOUR PAGES WITH MARKER FIELDS");
echo $map->render($items, 'YOUR MARKER FIELD');
</pre>
=== Multiple Markers von selektierten Seiten ===
Es sollen Orte (LeafletMapMarker) von Unterseiten geholt werden und aus diesen eine Map mit mehreren Markern generiert werden. Viele Marker auf engem Raum werden geclustert.

Voraussetzungen im Beispiel
* die Kindseiten werden über ihr template selektiert. Im Beispiel wird das durch ein Textfeld im Parent Template festgelegt (Feldname template_title)
* der Leaflet code wird nur bei Bedarf geladen. Das geschieht über eine Switch Anweisung im Repeater
* Leaflet Dateien sind lokal hinterlegt (siehe js und css Anweisungen).

mytemplate.php
<syntaxhighlight lang="php">
$additionalHeaderData .= '

<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />


<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>


<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';

$map = wire('modules')->get('MarkupLeafletMap');
$options = array('markerColour' => 'green');
$mySelector = 'template=event';
$places = $pages->find($mySelector);
$mapMarkup = $map->render($places, 'location' ,$options);
</syntaxhighlight>

=== Leaflet Skripte lokal einbinden (keine externen Skripte laden) ===
Dies sind die benötigten Header Zeilen. leaflet.css und leaflet.js sollte dann entsprechend vorhanden sein. Der Rest kommat aus dem Modul Verzeichnis.

Hinweis: Font Awesome muß ebenfalls vorhanden sein (Bisher - September 2018, die 4er Version).
<syntaxhighlight lang="php">
$additionalHeaderData = '

<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />


<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>


<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';
</syntaxhighlight>

=== Scroll Zoom abschalten ===
Am einfachsten im Modul (Nachteil: Vorsicht beim Update)

Evtl. fürs Frontend könnte man auch im Nachhinein in einem eigenen Skript abschalten über die Funktion:
map.scrollWheelZoom.disable(); // map ist die Mapinstanz. Muß evtl. angepasst werden.

==== Im Frontend (Fieldtype)====
/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js
In MarkupLeafletMap.js die Option hinzufügen.

<syntaxhighlight lang="javascript">
this.options = {
zoom: 10,
center: null,
scrollWheelZoom: false, // diese option einfügen
};

this._currentURL = '';
this.init = function(mapID, lat, lng, provider) {
if(lat != 0) this.map = L.map(mapID, {
center: [lat, lng],
zoom: this.options.zoom,
scrollWheelZoom: this.options.scrollWheelZoom // und dieses wenn nicht vorhanden
} );
L.tileLayer.provider(provider).addTo(this.map);
}
</syntaxhighlight>

==== Im Backend ====
Hier muß mann den Code des Inputfield anpassen. Direkt in den Optionen hat das bei mir nicht funktioniert. Sieht so aus als ob nur der zoom statt alle Optionen gesetzt wird. Daher einfach nach der Instanzerzeugung der karte den ScrollWheelZoom abschalten:

FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.js
<syntaxhighlight lang="javascript">
var map = L.map(document.getElementById(mapId)). setView([lat, lng], options.zoom); // nach dem hier
map.scrollWheelZoom.disable(); // dieses einfügen.
</syntaxhighlight>

=== Modul Gesture Handling ===
[[Leaflet - Gesture Handling]]
https://elmarquis.github.io/Leaflet.GestureHandling/
Bildet das Verhalten von Google Maps nach:
Desktop
* Karte Ignoriert Mausrad
* User wird Informiert mit ctrl+scrool Karte zoomen
Mobile
* Karte ignoriert Ein Finger Drag
* User wird über 2 Finger Pan informiert

==== In ProcessWire einbauen ====
* Unterordner 'dist' in 'Leaflet.GestureHandling' umbenennen und im FieldtypeLeafletMapMarker Modul unter assets ablegen

=== Allgemein ===
<syntaxhighlight lang="javascript">
<div id='map'></div>

<script>
var cities = new L.LayerGroup();

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});

var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});

var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};

var overlays = {
"Cities": cities
};

L.control.layers(baseLayers, overlays).addTo(map);
</script>

</syntaxhighlight>

== Probleme beheben ==
=== Feld zeigt an Error Geocoding ===
File Cache komplett löschen (assets/cache/...)

ProcessWire Upload Formular mit AJAX

2019-02-12T10:50:42Z

93.208.103.149:

Basiert auf dem Beispiel in diesem Artikel
[[ProcessWire Upload Formular]]

Siehe auch:
[[JQuery - AJAX]]
[[jQuery - FormData Objekt (AJAX)]]

== Erweiterung des Beispiels ProcessWire Upload Formular ==
Wir erweitern das Beispiel folgendermaßen:
* Formulardaten über jQuery AJAX Funktionen abschicken
* ProcessWire AJAX Antwort verarbeiten
* Im Fehlerfall Fehlermeldungen an passender Stelle ausgeben
* Im Erfolgsfall Dateien verarbeiten und PW Seiten anlegen
* Im Erfolgsfall Formular per JavaScript aus der Seite entfernen und Erfolgsmeldung ausgeben

== Schritt 1 - Formular anpassen ==
Als erstes passen wir die Datei an, die für die Markup-Erzueugung zuständig ist (basic-upload-ajax.php). Im ursprünglichen Beispiel war es basic-upload.php.

=== JavaScript Datei für Verarbeitung der AJAX Requests einbinden===
<syntaxhighlight lang="php">
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</syntaxhighlight>

=== Ausgabe des Markup bei Ajax Requests blockieren ===
Wir rufen das gleiche Skript bei Ajax Requests auf wie bei normalen. Daher müssen wir aufpassen, das kein unnötiges Markup ausgegeben wird. Da wir beim Ajax Request immer die Variable ajax=1 mitgeben können wir das ganz einfach machen:
<syntaxhighlight lang="php">
<?php if(!$ajax): ?>

<?php endif; ?>
</syntaxhighlight>

=== Markup für Fehlerausgaben über AJAX vorbereiten ===
Damit wir die Fehlerausgaben direkt bei den betreffenden Feldern plazieren können vergeben wir Klassen, die auf den Feldnamen basieren. Später können wir das im JavaScript nutzen und die Labels im Fehlerfall einfärben, sowie eine Meldung an der Input Box ausgeben.
<label for="email" id="email-label">Email* </label><br/>
<div id="email-messages" class="messages"><?php if(isset($errors['email'])) echo showError($errors['email']); ?></div>

=== Nachrichtenbox unter dem Formular ===
Am Ende des Formulars bauen wir noch eine Box für Nachrichten ein und einen Upload Indikator. Das machen wir direkt nach dem Formular. Das Formular wird nach erfolgreichem Upload ausgeblendet, dann wollen wir aber trotzdem noch die Möglichkeit für eine Nachricht haben.

<syntaxhighlight lang="html5">
<div class="row">
<div class="message-box" style="display:none;"></div>
</div>
</syntaxhighlight>

* JavaScript Datei für AJAX Versand hinzufügen

<pre>
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</pre>

== Schritt 2 - Formular verarbeitung erweitern ==
Die Verarbeitung liegt in form-process.php Hier müssen wir ebenfalls ein paar Routinen einfügen, die für das AJAX Handling zuständig sind.

=== AjaxResponse ===
Dafür setzen wir ein '''mehrdimensionales Array ein. Dies wird später in ein JSON Objekt''' umgewandelt und an das Skript zurückgeschickt. Es enthält den '''Status success'''. Wenn der True ist hat alles geklappt. Dafür können wir also später die ohnehin schon für den nicht AJAX Ablauf vorhandene $success Variable einsetzen.

Das Array errors entspricht ebenfalls der $error Varible, die wir bei der Verarbeitung bisher schon genutzt haben.

Damit wir noch die Möglichkeit für allgemeine Nachrichten haben nehmen wir noch ein zweites Array hinzu nämlich messages.

<syntaxhighlight lang="php"
// neue Variable die unsere AJAX Antworten enthält.
$ajaxResponse = array( 'success' => false, 'errors' => null, 'messages' => array() );
//...
// nach der POST Vars Validierung geben wir im Fehler Fall über AJAX die Fehler zurück:
/**
* if ajax request and we have errors sende errors back
*/
if($ajax && !empty($errors)){
//var_dump($errors);
$ajaxResponse['success'] = false;
$ajaxResponse['errors'] = $errors;
echo(json_encode($ajaxResponse));
}

// ...
// Wenn alles geklappt hat brauchen wir eine Erfolgsnachricht
// Deshalb am Ende der PW Seiten Erzeugung im Success Block ein neues Statement:
if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['messages'][] = $success_message;
echo(json_encode($ajaxResponse));
}

// Auch wenn das Formular korrekt ausgefüllt wurde kann es bei der Verarbeitung noch zu Fehlern kommen.
if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['errors'] = $errors;
$ajaxResponse['messages'][] = 'Die Formulardaten konnten leider nicht verarbeitet werden. Versuchen Sie es später noch einmal oder melden sie sich direkt bei uns.';
echo(json_encode($ajaxReponse));
}
</syntaxhighlight>

== Schritt 3 - AJAX Skripte ==
Das Skript das wir in Schritt 1 eingebaut haben sieht etwa so aus.

Wir fangen den Klick auf den Submit Button ab, lesen die Formulardaten ein und schicken Sie an das PHP Skript.

In diesem Beispiel nutzen wir das FormularData Objekt. Das unterstützen alle aktuellen Browser und erspart uns viel Arbeit. Man könnte zur Erweiterung noch einen Test mit Modernizer o.ä. einbauen und im Zweifel das Formular dann doch ohne Ajax absenden.

Die Antwort werten wir aus. Im Erfolgsfall (wenn der Server success=true zurückgibt entfernen wir das form Markup, damit man das Formular nicht nochmal abschickt (das würde einen Fehler ergeben, da das Sicherheitstoken nicht mehr stimmt. Die Seite muss zunächst neu geladen werden (hier könnte man evtl. noch einen Link einbauen, wenn zu erwarten ist, dass das Formular mehrfach hintereinander genutzt wird.

Im Fehlerfall gibt und das PHP Skript das Objekt errors zurück. Das enthält als Schlüssel den Feldnamen und einen Fehlertext. Da wir für die Labels und die Inputfelder zu den Feldnamen passende Klassen gesetzt haben, können wir einfach eine Fehlerklasse für das Label setzen (error) und den Fehlertext beim Inputfeld ausgeben.

Als Extra setzen wir noch einen Upload Indikator. Schicker wäre eine animierte Grafik, die man während des Übermittelns sichtbar macht.

Dann haben wir noch einen Teil in dem wir die ganzen Fehlerklassen und Nachrichten löschen. So wird unser Formular nach dem erneuten absenden resettet, bevor die neuen Meldungen gesetzt werden.

main.js
<syntaxhighlight lang="javascript">
$(function() {

var href;
var title;
var uploadIndicator = document.getElementById('upload-indicator');
$('body').on('click','#submit',function(e) { // Submit Button clicked
// Update button text.
uploadIndicator.innerHTML = 'Uploading...';
href = $(this).attr("href");
title = $(this).attr("name");
// load content via AJAX
handleData(href);
// prevent click and reload
e.preventDefault();
});

function handleData(url){

// variable for ajaxResponse
$ajaxResponse = '';
// Form data

// Not working with images or files:
// var data = $('form').serialize();
// $.post('url', data);

var form = $('form')[0]; // You need to use standard javascript object here
var fd = new FormData(form);
//var myform = document.getElementById("myform");
//var fd = new FormData(myform);
fd.append("ajax", 'true');
// send Ajax request
$.ajax({
type: "POST",
url: url,
data: fd,
cache: false,
processData: false,
contentType: false,
dataType: 'json', // tell jquery json response -> automatic deserialization
success: function(response,status){
$ajaxResponse = response;// store in $ajaxResponse
}
}).done(function(){ // when finished and successful
// cleanup all messages and errors
uploadIndicator.innerHTML = '';
$('label').removeClass('error');
$('.messages').html(' ');
if($ajaxResponse.success){
//success -> remove form and thank you
$('#myform').html('');
// Messages
$.each($ajaxResponse.messages, function(key,val){
$('#message-box').append('<div>' + val + '</div>');
});
}else{ // s.th. gone wrong -> handle errors
$.each($ajaxResponse.errors, function(key, val) {
// set error class
console.log(key + ' -> ' + val);
$('#'+key+'-label').addClass('error');
// set error messages
$('#'+key+'-messages').html(val);
});
}

}); // end of ajax().done()
} // end of loadContent()
});

</syntaxhighlight>

== PHP Skripte komplett ==
=== basic-upload-ajax.php ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$additionalHeaderData .= '
';
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
?>
<?php if(!$ajax): ?>
<!DOCTYPE html>
<html lang="de">
<?php include('partials/head.inc'); ?>
<body>
<?php endif; ?>
<?php
/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = '<p class="message">Vielen Dank für Ihre Nachricht!</p>';
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'value' => 0, 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe','images');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload-ajax/form-process.php");

?>
<?php if(!$ajax): ?>


<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<div id="csrf-messages" class="messages"><?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?></div>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname" id="fullname-label">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<div id="fullname-messages" class="messages"><?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?></div>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email" id="email-label">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<div id="email-messages" class="messages"><?php if(isset($errors['email'])) echo showError($errors['email']); ?></div>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message" id="message-label">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<div id="message-messages" class="messages"><?php if(isset($errors['message'])) echo showError($errors['message']); ?></div>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe" id="newsletter_subscibe-label">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<div id="newsletter_subscribe-messages" class="messages"><?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?></div>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images" id="images-label">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<div id="images-messages" class="messages">
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>

</div>
<div class="row">
<div id="upload-indicator" class="hidden">Upload Indicator</div>
</div>
</form>
<div class="row">
<div id="message-box" class="messages"></div>
</div>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
<?php endif; ?>

<?php if(!$ajax): ?>
<?php include('partials/footer-js.inc'); ?>

</body>
</html>
<?php endif; ?>

</syntaxhighlight>

=== form-process.php ===
<syntaxhighlight lang="php>
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;
$messages = null;
$ajaxResponse = array( 'success' => false, 'errors' => null, 'messages' => array() );

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
//var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for populating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/
if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if ajax request and we have errors sende errors back
*/
if($ajax && !empty($errors)){
//var_dump($errors);
$ajaxResponse['success'] = false;
$ajaxResponse['errors'] = $errors;
echo(json_encode($ajaxResponse));
}
/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
//print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();
$uploadpage->save();
// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
//var_dump($form_fields[$pf]);
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['messages'][] = $success_message;
//var_dump($errors);
echo(json_encode($ajaxResponse));
}

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['errors'] = $errors;
$ajaxResponse['messages'][] = 'Bilder konnten nicht gespeichert werden. Versuchen Sie es später noch einmal.';
//var_dump($errors);
echo(json_encode($ajaxReponse));
}
}
}
}

</syntaxhighlight>

== Helferlein ==
=== Aufräumen von Temporären Files ===
Durch fehlgelaufene Skripts können sich im temporären Verzeichnis alte Dateien ansammeln. Mit einem Cronjob oder auch bei jedem Anlegen einer neuen Seite, könnte man z.B. ältere Dateien löschen.
<syntaxhighlight lang="php">
/*
* Delete older files (default 86400s = 24h)- use regularly
* string $dir - path to files
* int $seconds - all files older then $seconds
* string $fileExtension only files with this extension (i.e. .jpg)
*/
function deleteOlderFiles( $dir='temp/', $seconds=86400, $fileExtension='' ){
foreach (glob($dir."*".$fileExtension) as $file) {
//For jpg images this would be: glob($dir."*.jpg")
if(time() - filectime($file) > $seconds){
unlink($file);
}
}
}
</syntaxhighlight>

=== Alte Seiten löschen ===
Auch die angelegten Seiten sollte man nach einer gewissen Zeit löschen. Nicht nur um den Server zu schonen, sondern auch aus Datenschutzgründen.

TODO

ProcessWire Upload Formular mit AJAX

2019-02-12T10:22:13Z

93.208.103.149:

ProcessWire Upload Formular mit AJAX

2019-02-12T10:21:23Z

93.208.103.149:

Basiert auf dem Beispiel in diesem Artikel
[[ProcessWire Upload Formular]]

Siehe auch:
[[JQuery - AJAX]]
[[jQuery - FormData Objekt (AJAX)]]

Wir erweitern das Beispiel folgendermaßen:
* Formulardaten über jQuery AJAX Funktionen abschicken
* ProcessWire AJAX Antwort verarbeiten
* Im Fehlerfall Fehlermeldungen an passender Stelle ausgeben
* Im Erfolgsfall Dateien verarbeiten und PW Seiten anlegen
* Im Erfolgsfall Formular per JavaScript aus der Seite entfernen und Erfolgsmeldung ausgeben

== Schritt 1 - Formular anpassen ==
Als erstes passen wir die Datei an, die für die Markup-Erzueugung zuständig ist (basic-upload-ajax.php). Im ursprünglichen Beispiel war es basic-upload.php.

=== JavaScript Datei für Verarbeitung der AJAX Requests einbinden===
<syntaxhighlight lang="php">
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</syntaxhighlight>

=== Ausgabe des Markup bei Ajax Requests blockieren ===
Wir rufen das gleiche Skript bei Ajax Requests auf wie bei normalen. Daher müssen wir aufpassen, das kein unnötiges Markup ausgegeben wird. Da wir beim Ajax Request immer die Variable ajax=1 mitgeben können wir das ganz einfach machen:
<syntaxhighlight lang="php">
<?php if(!$ajax): ?>

<?php endif; ?>
</syntaxhighlight>

=== Markup für Fehlerausgaben über AJAX vorbereiten ===
Damit wir die Fehlerausgaben direkt bei den betreffenden Feldern plazieren können vergeben wir Klassen, die auf den Feldnamen basieren. Später können wir das im JavaScript nutzen und die Labels im Fehlerfall einfärben, sowie eine Meldung an der Input Box ausgeben.
<label for="email" id="email-label">Email* </label><br/>
<div id="email-messages" class="messages"><?php if(isset($errors['email'])) echo showError($errors['email']); ?></div>

=== Nachrichtenbox unter dem Formular ===
Am Ende des Formulars bauen wir noch eine Box für Nachrichten ein und einen Upload Indikator. Das machen wir direkt nach dem Formular. Das Formular wird nach erfolgreichem Upload ausgeblendet, dann wollen wir aber trotzdem noch die Möglichkeit für eine Nachricht haben.

<syntaxhighlight lang="html5">
<div class="row">
<div class="message-box" style="display:none;"></div>
</div>
</syntaxhighlight>

* JavaScript Datei für AJAX Versand hinzufügen

<pre>
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</pre>

== Schritt 2 - Formular verarbeitung erweitern ==
Die Verarbeitung liegt in form-process.php Hier müssen wir ebenfalls ein paar Routinen einfügen, die für das AJAX Handling zuständig sind.

=== AjaxResponse ===
Dafür setzen wir ein '''mehrdimensionales Array ein. Dies wird später in ein JSON Objekt''' umgewandelt und an das Skript zurückgeschickt. Es enthält den '''Status success'''. Wenn der True ist hat alles geklappt. Dafür können wir also später die ohnehin schon für den nicht AJAX Ablauf vorhandene $success Variable einsetzen.

Das Array errors entspricht ebenfalls der $error Varible, die wir bei der Verarbeitung bisher schon genutzt haben.

Damit wir noch die Möglichkeit für allgemeine Nachrichten haben nehmen wir noch ein zweites Array hinzu nämlich messages.

<syntaxhighlight lang="php"
// neue Variable die unsere AJAX Antworten enthält.
$ajaxResponse = array( 'success' => false, 'errors' => null, 'messages' => array() );
//...
// nach der POST Vars Validierung geben wir im Fehler Fall über AJAX die Fehler zurück:
/**
* if ajax request and we have errors sende errors back
*/
if($ajax && !empty($errors)){
//var_dump($errors);
$ajaxResponse['success'] = false;
$ajaxResponse['errors'] = $errors;
echo(json_encode($ajaxResponse));
}

// ...
// Wenn alles geklappt hat brauchen wir eine Erfolgsnachricht
// Deshalb am Ende der PW Seiten Erzeugung im Success Block ein neues Statement:
if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['messages'][] = $success_message;
echo(json_encode($ajaxResponse));
}

// Auch wenn das Formular korrekt ausgefüllt wurde kann es bei der Verarbeitung noch zu Fehlern kommen.
if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['errors'] = $errors;
$ajaxResponse['messages'][] = 'Die Formulardaten konnten leider nicht verarbeitet werden. Versuchen Sie es später noch einmal oder melden sie sich direkt bei uns.';
echo(json_encode($ajaxReponse));
}
</syntaxhighlight>

== Schritt 3 - AJAX Skripte ==
Das Skript das wir in Schritt 1 eingebaut haben sieht etwa so aus.

Wir fangen den Klick auf den Submit Button ab, lesen die Formulardaten ein und schicken Sie an das PHP Skript.

In diesem Beispiel nutzen wir das FormularData Objekt. Das unterstützen alle aktuellen Browser und erspart uns viel Arbeit. Man könnte zur Erweiterung noch einen Test mit Modernizer o.ä. einbauen und im Zweifel das Formular dann doch ohne Ajax absenden.

Die Antwort werten wir aus. Im Erfolgsfall (wenn der Server success=true zurückgibt entfernen wir das form Markup, damit man das Formular nicht nochmal abschickt (das würde einen Fehler ergeben, da das Sicherheitstoken nicht mehr stimmt. Die Seite muss zunächst neu geladen werden (hier könnte man evtl. noch einen Link einbauen, wenn zu erwarten ist, dass das Formular mehrfach hintereinander genutzt wird.

Im Fehlerfall gibt und das PHP Skript das Objekt errors zurück. Das enthält als Schlüssel den Feldnamen und einen Fehlertext. Da wir für die Labels und die Inputfelder zu den Feldnamen passende Klassen gesetzt haben, können wir einfach eine Fehlerklasse für das Label setzen (error) und den Fehlertext beim Inputfeld ausgeben.

Als Extra setzen wir noch einen Upload Indikator. Schicker wäre eine animierte Grafik, die man während des Übermittelns sichtbar macht.

Dann haben wir noch einen Teil in dem wir die ganzen Fehlerklassen und Nachrichten löschen. So wird unser Formular nach dem erneuten absenden resettet, bevor die neuen Meldungen gesetzt werden.

main.js
<syntaxhighlight lang="javascript">
$(function() {

var href;
var title;
var uploadIndicator = document.getElementById('upload-indicator');
$('body').on('click','#submit',function(e) { // Submit Button clicked
// Update button text.
uploadIndicator.innerHTML = 'Uploading...';
href = $(this).attr("href");
title = $(this).attr("name");
// load content via AJAX
handleData(href);
// prevent click and reload
e.preventDefault();
});

function handleData(url){

// variable for ajaxResponse
$ajaxResponse = '';
// Form data

// Not working with images or files:
// var data = $('form').serialize();
// $.post('url', data);

var form = $('form')[0]; // You need to use standard javascript object here
var fd = new FormData(form);
//var myform = document.getElementById("myform");
//var fd = new FormData(myform);
fd.append("ajax", 'true');
// send Ajax request
$.ajax({
type: "POST",
url: url,
data: fd,
cache: false,
processData: false,
contentType: false,
dataType: 'json', // tell jquery json response -> automatic deserialization
success: function(response,status){
$ajaxResponse = response;// store in $ajaxResponse
}
}).done(function(){ // when finished and successful
// cleanup all messages and errors
uploadIndicator.innerHTML = '';
$('label').removeClass('error');
$('.messages').html(' ');
if($ajaxResponse.success){
//success -> remove form and thank you
$('#myform').html('');
// Messages
$.each($ajaxResponse.messages, function(key,val){
$('#message-box').append('<div>' + val + '</div>');
});
}else{ // s.th. gone wrong -> handle errors
$.each($ajaxResponse.errors, function(key, val) {
// set error class
console.log(key + ' -> ' + val);
$('#'+key+'-label').addClass('error');
// set error messages
$('#'+key+'-messages').html(val);
});
}

}); // end of ajax().done()
} // end of loadContent()
});

</syntaxhighlight>

== PHP Skripte komplett ==
=== basic-upload-ajax.php ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$additionalHeaderData .= '
';
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
?>
<?php if(!$ajax): ?>
<!DOCTYPE html>
<html lang="de">
<?php include('partials/head.inc'); ?>
<body>
<?php endif; ?>
<?php
/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = '<p class="message">Vielen Dank für Ihre Nachricht!</p>';
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'value' => 0, 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe','images');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload-ajax/form-process.php");

?>
<?php if(!$ajax): ?>


<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<div id="csrf-messages" class="messages"><?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?></div>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname" id="fullname-label">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<div id="fullname-messages" class="messages"><?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?></div>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email" id="email-label">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<div id="email-messages" class="messages"><?php if(isset($errors['email'])) echo showError($errors['email']); ?></div>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message" id="message-label">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<div id="message-messages" class="messages"><?php if(isset($errors['message'])) echo showError($errors['message']); ?></div>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe" id="newsletter_subscibe-label">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<div id="newsletter_subscribe-messages" class="messages"><?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?></div>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images" id="images-label">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<div id="images-messages" class="messages">
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>

</div>
<div class="row">
<div id="upload-indicator" class="hidden">Upload Indicator</div>
</div>
</form>
<div class="row">
<div id="message-box" class="messages"></div>
</div>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
<?php endif; ?>

<?php if(!$ajax): ?>
<?php include('partials/footer-js.inc'); ?>

</body>
</html>
<?php endif; ?>

</syntaxhighlight>

=== form-process.php ===
<syntaxhighlight lang="php>
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;
$messages = null;
$ajaxResponse = array( 'success' => false, 'errors' => null, 'messages' => array() );

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
//var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for populating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/
if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if ajax request and we have errors sende errors back
*/
if($ajax && !empty($errors)){
//var_dump($errors);
$ajaxResponse['success'] = false;
$ajaxResponse['errors'] = $errors;
echo(json_encode($ajaxResponse));
}
/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
//print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();
$uploadpage->save();
// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
//var_dump($form_fields[$pf]);
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['messages'][] = $success_message;
//var_dump($errors);
echo(json_encode($ajaxResponse));
}

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
if($ajax){
$ajaxResponse['success'] = $success;
$ajaxResponse['errors'] = $errors;
$ajaxResponse['messages'][] = 'Bilder konnten nicht gespeichert werden. Versuchen Sie es später noch einmal.';
//var_dump($errors);
echo(json_encode($ajaxReponse));
}
}
}
}

</syntaxhighlight>

Browser - Compatibility Detection

2019-02-11T14:11:24Z

93.208.103.149:

== Browser JavaScript Kompatibilität testen ==
https://www.quirksmode.org/js/support.html

Der Trick ist immer auf Arrays oder Objekte zu testen nicht auf Funktionen. Wenn eine Funktion nicht existiert gibt es eine Fehlermeldung.

Object detection - Yes
Instead, we simply look if the browser supports the object (method, array or property) we want to use. Let’s continue with the mouseover example. This script relies on the document.images array, so first and foremost we'll have to detect if the browser supports it. This is done by
<pre>
if (document.images)
{
do something with the images array
}
</pre>
Now you have a fail safe method of seeing if any browser can handle mouseovers. The if-statements checks if the array document.images exists. If it does (document.images) is true and the script is executed. If the images array doesn't exist it becomes false and the script is not executed.

Another common detect is for window.focus. This is a method (a command by which you tell JavaScript to do something for you). If we want to use the method, we'll have to check first if the browser supports it.

Note the correct way of doing this: you ask for the method without brackets. This code

if (window.focus)
means: "If the focus method is supported", while this code

if (window.focus())
means: "If you can put the focus on the window" and assumes that focus is supported. If it isn't, this line of code creates errors. The brackets () actually execute the focus command, which is not what we want in this case. So we check it without the brackets (see if it exists) and only when the browser passes the check we actually execute the command by adding brackets:

if (window.focus) window.focus()

== Browser Feature Detection Snippets ==

Browser - Compatibility Detection

2019-02-11T13:09:55Z

93.208.103.149: Die Seite wurde neu angelegt: „== Browser JavaScript Kompatibilität testen == https://www.quirksmode.org/js/support.html Der Trick ist immer auf Arrays oder Objekte zu testen nicht auf Fu…“

Browser Kompatibilität

2019-02-11T13:07:43Z

93.208.103.149:

[[Browser - Compatibility Detection]]

Links und Übersichten. Was funktioniert wo ?
== SVG / Animation ==
Quelle: https://blog.kulturbanause.de/2017/04/svg-browsersupport-fuer-animationen-und-interaktionen/#more-16179
<table width="100%">

<tr>
<th>Einbindung</th>
<th><p>Browser</p></th>
<th>:hover</th>
<th>link</th>
<th>keyframe animation</th>
<th>SMIL animation</th>
<th>javascript animation</th>
<th>Media Query</th>
</tr>
<tr>
<th rowspan="8">Inline</th>
<td>Safari</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>Chrome</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>Firefox</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>Opera</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>Edge</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-partial-1">Teilweise <sup>1</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>IE 11</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>IE 10</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>IE 9</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<th rowspan="8">Object, Embed, iframe</th>
<td>Safari</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
</tr>
<tr>
<td>Chrome</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Firefox</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Opera</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Edge</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-partial-1">Teilweise <sup>1</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 11</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 10</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 9</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<th rowspan="8"><img></th>
<td>Safari</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Chrome</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Firefox</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Opera</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Edge</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-partial-1">Teilweise <sup>1</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 11</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 10</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 9</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<th rowspan="8">CSS Background</th>
<td>Safari</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Chrome</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Firefox</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Opera</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja</td>
<td class="table-td-pro">ja</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>Edge</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-partial-1">Teilweise <sup>1</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 11</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 10</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-partial-2">Teilweise <sup>2</sup></td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>
<tr>
<td>IE 9</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-con">nein</td>
<td class="table-td-pro">ja, abhängig vom Elternelement</td>
</tr>

</table>
1: Opacity und Fill funktionieren, transform nicht. Weiteres wurde nicht geprüft.

2: Opacity funktioniert, transform und Fill nicht. Weiteres wurde nicht geprüft.

JQuery - FormData Objekt (AJAX)

2019-02-11T12:55:32Z

93.208.103.149:

https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload
For correct form data usage you need to do 2 steps.

Preparations

You can give your whole form to FormData() for processing
<syntaxhighlight lang="javascript">
var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);
</syntaxhighlight>

or specify exact data for FormData()

<syntaxhighlight lang="javascript">
var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);
Sending form
</syntaxhighlight>

Ajax request with jquery will looks like this:

<syntaxhighlight lang="javascript">
$.ajax({
url: 'Your url here',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// ... Other options like success and etc
});
</syntaxhighlight>

After this it will send ajax request like you submit regular form with enctype="multipart/form-data"

Update: This request cannot work without type:"POST" in options since all files must be sent via POST request.

Note: contentType: false only available from jQuery 1.6 onwards

JQuery - FormData Objekt (AJAX)

2019-02-11T12:55:12Z

93.208.103.149: Die Seite wurde neu angelegt: „For correct form data usage you need to do 2 steps. Preparations You can give your whole form to FormData() for processing <syntaxhighlight lang="javascript"…“

For correct form data usage you need to do 2 steps.

Preparations

You can give your whole form to FormData() for processing
<syntaxhighlight lang="javascript">
var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);
</syntaxhighlight>

or specify exact data for FormData()

<syntaxhighlight lang="javascript">
var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);
Sending form
</syntaxhighlight>

Ajax request with jquery will looks like this:

<syntaxhighlight lang="javascript">
$.ajax({
url: 'Your url here',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// ... Other options like success and etc
});
</syntaxhighlight>

After this it will send ajax request like you submit regular form with enctype="multipart/form-data"

Update: This request cannot work without type:"POST" in options since all files must be sent via POST request.

Note: contentType: false only available from jQuery 1.6 onwards

ProcessWire Upload Formular mit AJAX

2019-02-11T12:53:07Z

93.208.103.149:

ProcessWire - Ajax

2019-02-11T10:16:49Z

93.208.103.149:

Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem Klick neu zu laden. So entsteht sehr schnell ein "App-Feeling". ProcessWire unterstützt einen dabei.

Links:
https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579 (Kurzanleitung)
https://github.com/tutsplus/how-to-create-an-ajax-driven-theme-for-processwire (ProcessWire Profile mit AJAX)

Allgemeines Vorgehen

* Links mit der Klasse ajax-link werden über JavaScript (meist jQuery) abgefangen und über AJAX an den Server geschickt.
* ProcessWire erkennt anhand der internen System-Variable $ajax dass ein AJAX Request vorliegt
* Mit einfachen Ifs kann man ProcessWire dazu bringen nur den gewünschten Content zu generieren
* Den zurückgegebenen HTML Inhalt mit jQuery austauschen.

Natürlich sind auch JSON Antworten denkbar. Das kann man dann alles über JavaScript verarbeiten

Vereinfachtes Beispiel (bessere Struktur wäre wohl die Teile der Seiten in Variablen zu laden und dann die if Statements kompakt zu halten.

<syntaxhighlight lang="php">
<?php
// include page structure if not an ajax request
if(!$ajax):
include("./head.inc");
?>


<?php echo $pages->get('/')->title; ?>
<nav></nav>
<div class="content-container cf">
<div class="content current-content">

<?php endif; // end if ajax ?>

<?php
// if ajax then only return $content
echo $content;
?>

<?php if(!$ajax): ?>
</div>
</div>

<?php
include("./foot.inc");
endif; // end if ajax
?>
</syntaxhighlight>

JavaScript
<syntaxhighlight lang="javascript">
$(function() {

var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked

href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// prevent click and reload
e.preventDefault();
});

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

Komplexeres Beispiel mit Einbeziehen der Browser History, verhindern von doppeltem Laden bereits vorhandener Inhalte...

PHP bleibt gleich.

JavaScript
<syntaxhighlight lang="javascript">
$(function() {

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

// flexslider
$('.flexslider').flexslider({
pauseOnHover: true,
controlNav: false,
prevText: "",
nextText: "",
});

/*
* HTML5 pushstate and ajax content
*/

var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked

// check to see it contents already accessed
if($(this).hasClass('current')){

console.log('current page');

// prevent click through
e.preventDefault();
// exist click function (dont load new content)
return true;
}

$('.current').removeClass('current'); // remove .current from active link
$('.parent').removeClass('parent'); // remove .current from active link
$(this).addClass('current'); // add .current

var parent = $(this).attr('parent');
if(parent){ // if link page has parent nav
$('nav a[name="'+parent+'"]').addClass('parent'); // add .current
}

// add progress spinner on cursor
$('body').css('cursor','progress');

// remove cusor spinner
var pointerTimeout = setTimeout(function () {
$('body').css('cursor','auto'); // progress spinner on cursor
}, 1000);

href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// add new url to html5 history
history.pushState('', +href, href); // push url to history

// change title to new page
$('title').html(title);

// send GA pageview
ga('send', 'pageview', href);

// prevent click and reload
e.preventDefault();
});

// for back / forwards browser navigation
var toggleHistoryVisitNum = 0;
function toggleHistory(){
window.onpopstate = function(event) {
if(window.location.hash == ""){
loadContent(location.pathname);
}
};
}

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// animate the requested content
$('.content.current-content').animate({
// animate out old content
opacity: 0
}, 400, function(){

$('.content.current-content').slideUp(400);

// content animation finished
$('.content.ajax').animate({
// animate in new content
opacity: 1
}, 400, function(){

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

/*
* run js functions for new content
*/

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

});
});

// toggle use of back and forward buttons on browser
if(!toggleHistoryVisitNum){
toggleHistory();
}

// keep track of number of Ajax requests
toggleHistoryVisitNum++;

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

ProcessWire - Ajax

2019-02-11T10:10:41Z

93.208.103.149: Die Seite wurde neu angelegt: „Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem K…“

Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem Klick neu zu laden. So entsteht sehr schnell ein "App-Feeling". ProcessWire unterstützt einen dabei.

Links:
https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579 (Kurzanleitung)
https://github.com/tutsplus/how-to-create-an-ajax-driven-theme-for-processwire (ProcessWire Profile mit AJAX)

Allgemeines Vorgehen

* Links mit der Klasse ajax-link werden über JavaScript (meist jQuery) abgefangen und über AJAX an den Server geschickt.
* ProcessWire erkennt anhand der internen System-Variable $ajax dass ein AJAX Request vorliegt
* Mit einfachen Ifs kann man ProcessWire dazu bringen nur den gewünschten Content zu generieren
* Den zurückgegebenen HTML Inhalt mit jQuery austauschen.

Natürlich sind auch JSON Antworten denkbar. Das kann man dann alles über JavaScript verarbeiten

Vereinfachtes Beispiel

Komplexeres Beispiel mit Einbeziehen der Browser History, verhindern von doppeltem Laden bereits vorhandener Inhalte...

<syntaxhighlight lang="javascript">
$(function() {

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

// flexslider
$('.flexslider').flexslider({
pauseOnHover: true,
controlNav: false,
prevText: "",
nextText: "",
});

/*
* HTML5 pushstate and ajax content
*/

var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked

// check to see it contents already accessed
if($(this).hasClass('current')){

console.log('current page');

// prevent click through
e.preventDefault();
// exist click function (dont load new content)
return true;
}

$('.current').removeClass('current'); // remove .current from active link
$('.parent').removeClass('parent'); // remove .current from active link
$(this).addClass('current'); // add .current

var parent = $(this).attr('parent');
if(parent){ // if link page has parent nav
$('nav a[name="'+parent+'"]').addClass('parent'); // add .current
}

// add progress spinner on cursor
$('body').css('cursor','progress');

// remove cusor spinner
var pointerTimeout = setTimeout(function () {
$('body').css('cursor','auto'); // progress spinner on cursor
}, 1000);

href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// add new url to html5 history
history.pushState('', +href, href); // push url to history

// change title to new page
$('title').html(title);

// send GA pageview
ga('send', 'pageview', href);

// prevent click and reload
e.preventDefault();
});

// for back / forwards browser navigation
var toggleHistoryVisitNum = 0;
function toggleHistory(){
window.onpopstate = function(event) {
if(window.location.hash == ""){
loadContent(location.pathname);
}
};
}

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// animate the requested content
$('.content.current-content').animate({
// animate out old content
opacity: 0
}, 400, function(){

$('.content.current-content').slideUp(400);

// content animation finished
$('.content.ajax').animate({
// animate in new content
opacity: 1
}, 400, function(){

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

/*
* run js functions for new content
*/

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

});
});

// toggle use of back and forward buttons on browser
if(!toggleHistoryVisitNum){
toggleHistory();
}

// keep track of number of Ajax requests
toggleHistoryVisitNum++;

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

ProcessWire Upload Formular mit AJAX

2019-02-11T09:53:24Z

93.208.103.149: /* Schritt 1 - Formular anpassen */

Basiert auf dem Beispiel in diesem Artikel
[[ProcessWire Upload Formular]]

Siehe auch:
[[JQuery - AJAX]]

Wir erweitern das Beispiel folgendermaßen:
* Formulardaten über jQuery AJAX Funktionen abschicken
* ProcessWire AJAX Antwort verarbeiten

== Schritt 1 - Formular anpassen ==
* Unsichtbare Box für evtl. Fehlermeldungen direkt unter dem Submit Button.

<syntaxhighlight lang="html5">
<div class="row">
<div class="message-box" style="display:none;"></div>
</div>
</syntaxhighlight>

* JavaScript Datei für AJAX Versand hinzufügen

<pre>
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</pre>

== Schritt 2 - AJAX Verarbeiten ==
main.js
<syntaxhighlight lang="javascript">

</syntaxhighlight>

ProcessWire Upload Formular mit AJAX

2019-02-11T09:53:10Z

93.208.103.149: /* Schritt 1 - Formular anpassen */

Basiert auf dem Beispiel in diesem Artikel
[[ProcessWire Upload Formular]]

Siehe auch:
[[JQuery - AJAX]]

Wir erweitern das Beispiel folgendermaßen:
* Formulardaten über jQuery AJAX Funktionen abschicken
* ProcessWire AJAX Antwort verarbeiten

== Schritt 1 - Formular anpassen ==
* Unsichtbare Box für evtl. Fehlermeldungen direkt unter dem Submit Button.

<syntaxhighlight lang="html5">
<div class="row">
<div class="message-box" style="display:none;"></div>
</div>
</sytaxhighlight>

* JavaScript Datei für AJAX Versand hinzufügen

<pre>
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</pre>

== Schritt 2 - AJAX Verarbeiten ==
main.js
<syntaxhighlight lang="javascript">

</syntaxhighlight>

ProcessWire Upload Formular mit AJAX

2019-02-11T09:52:19Z

93.208.103.149:

Basiert auf dem Beispiel in diesem Artikel
[[ProcessWire Upload Formular]]

Siehe auch:
[[JQuery - AJAX]]

Wir erweitern das Beispiel folgendermaßen:
* Formulardaten über jQuery AJAX Funktionen abschicken
* ProcessWire AJAX Antwort verarbeiten

== Schritt 1 - Formular anpassen ==
* Unsichtbare Box für evtl. Fehlermeldungen direkt unter dem Submit Button.
<syntaxhighlight lang="html5">
<div class="row">
<div class="message-box" style="display:none;"></div>
</div>
</sytaxhighlight>
* JavaScript Datei für AJAX Versand hinzufügen
<pre>
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</pre>

== Schritt 1 - AJAX Versand ==
main.js
<syntaxhighlight lang="javascript">

</syntaxhighlight>

ProcessWire Upload Formular mit AJAX

2019-02-11T09:13:49Z

93.208.103.149: Die Seite wurde neu angelegt: „Basiert auf dem Beispiel in diesem Artikel ProcessWire Upload Formular“

Basiert auf dem Beispiel in diesem Artikel
[[ProcessWire Upload Formular]]

ProcessWire Upload Formular

2019-02-11T09:13:11Z

93.208.103.149: /* Siehe auch */

== Siehe auch ==
[[ProcessWire Upload Formular mit AJAX]]
https://gist.github.com/somatonic/5233338
[[ProcessWire UploadFormular Dropzone Enhanced]]
[[ProcessWire - File Upload mit Blueimp jQueryFileUpload]]

== Übersicht ==
Ein einfaches Upload Formular mit dem der Benutzer Dateien übermitteln kann. Für das Formular kommen aus ProcessWire der Sanitizer, die WireUpload Klasse und Session Tokens zum Einsatz. Das Formular wird validiert. Das Markup für das Formular steht direkt im Template, wird also nicht über die Formularfunktionen von ProcessWire erzeugt. Das ist oft die schnellere Variante, vor allem wenn das Markup sehr individuell ist.

Der Code basiert auf Somatonics Beispiel (s.o.) und wurde leicht angepasst.

Features:
* Dateiupload (Bilder)
* Formulareingaben als Seiten speichern (inkl. Bilder)
* Verhindert CRSF Attacken und doppelte Posts durch neu Laden
* Formular validierung mit Inline Messages
* Feldvariablen werden durch den Sanitizer bereinigt
* Kleines jQuery Beispiel um den Submit Button nach Absenden zu deaktivieren.

== Aufbau ==
TEMPLATES
basic-upload
FELDER: title
basic-upload-entry
FELDER: title, fullname, email, message, newsletter_subscribe, images

SEITEN
/basic-upload/
/basic-upload/[automatisch-erzeugte-seiten]

Das Formular liegt in der Seite
/basic-upload/
Mit dem Template 'basic-upload' (basic-upload.php)

Beim Absenden eines gültigen Formulars werden unterhalb der Formularseite weitere Seiten generiert. Diese erhalten das Template basic-upload-entry. Wenn man die erzeugten Seiten im Frontend anzeigen möchte braucht man natürlich noch ein PHP File für basic-upload-entry. Ansonsten kann man sich die Seiten im Backend anzeigen.

== Code ==
'''templates/partials/basic-upload/form-process.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
// var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for pupulating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/

if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();

// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
}
}
}

</syntaxhighlight>

templates/basic-upload.php
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = "<p class='message'>Thanks for your message!</p>";
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload/form-process.php");

?>



<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<?php if(isset($errors['email'])) echo showError($errors['email']); ?>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<?php if(isset($errors['message'])) echo showError($errors['message']); ?>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
</form>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
</syntaxhighlight>

'''form.js (jQuery)'''
<syntaxhighlight lang="php">


<script>
$(function(){
// Avoid double posts by disabling submit button on form submit
$('#myform').submit(function(){
$("#submit").attr('disabled','disabled');
return true;
});

});
</script>
</syntaxhighlight>

ProcessWire - Formulare

2019-02-11T09:12:39Z

93.208.103.149: /* Links */

== Links ==
[[Processwire - Forms]] (Beispiel mit ProcessWire Form Objekt -> Inputfelder über PW generieren)
[[ProcessWire Upload Formular]]
https://processwire.com/talk/topic/2089-create-simple-forms-using-api/ von Soma
https://processwire.com/talk/topic/14206-contact-form-tutorial/ Mit Google ReCaptcha

== Siehe auch ==
https://processwire.com/talk/topic/4066-activate-user-account-via-email/?page=2 // User Subscription Account via E-Mail verifizierung

== Allgemeines ==
Das '''Markup''' eines Formulars kann man entweder '''manuell''' erstellen oder mit einem '''Formobjekt''', das über eine render() Funktion ausgegeben wird.

Zur Auswertung und '''Validierung''' stellt PW ebenfalls einige Objekte und Funktionen zur Verfügung.

Für das Styling kann man eigene Stile nutzen. Als Inspiration für das Styling kann man inputfields.css aus dem templates-admin Ordner nutzen. Auch das CSS aus wire/modules/InputfieldRadios kann hilfreich sein.

=== Wichtige Funktionen ===
$form->processInput($input->post) // prevent CSRF, append a hidden field
$form->getErrors();
$form->render();
$form->setMarkup();

==== Hooks ====
Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren.

== Formular-Objekt und Felder definieren ==
<syntaxhighlight lang="php">
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');

// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);
</syntaxhighlight>

== Formular rendering konfigurieren ==
Mit der Funktion setMarkup(array()) kann man die Ausgabe von $form->render() konfigurieren.
<pre>
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>"
));
</pre>

== Formulardaten auswerten ==
<syntaxhighlight lang="php">
// form was submitted so we process the form
if($input->post->submit) {

// user submitted the form, process it and check for errors
$form->processInput($input->post);

// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");

if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");

}

if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {

// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);

$out .= "<p>Thanks! Your submission was successful.";

}
} else {
// render out form without processing
$out .= $form->render();
}
</syntaxhighlight>

=== Get und Post Daten holen und für Suchselektoren nutzen ===
<syntaxhighlight lang="php">
// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords); // Sanizize user input
$selector .= "title|body|summary%=$value, "; // %= search parts // create a selector for later
$input->whitelist('keywords', $value); //
}
</syntaxhighlight>

== Die Whitelist und der Sanitizer ==
https://processwire.com/api/ref/sanitizer/
https://processwire.com/api/ref/input/#api-sanitizer
https://processwire.com/api/ref/input/whitelist/

Den Sanitizer nutzt man um sich gegen manipulierte User-Eingaben zu schützen.

Wenn man Variablen Sanitized hat, kann man sie in die Whitlist legen, das bedeutet diesen Variablen wird vertraut. Manche Funktionen in PW nutzen die Whitelist. Z.B. gibt das MarkupPagerNav Modul die Variablen darin weiter wenn man die Seite über den Seitenbrowser wechselt.

Beispiele
<syntaxhighlight lang="php">
// Retrieve a "q" GET variable, sanitize and output
// Example request URL: domain.com/path/to/page/?q=TEST
$q = $input->get('q'); // retrieve value
$q = $sanitizer->text($q); // sanitize input as 1-line text
echo $sanitizer->entities($q); // sanitize for output, outputs "TEST"
// You can also combine $input and one $sanitizer call, replacing
// the "text" method call with any $sanitizer method:
$q = $input->get->text('q');
</syntaxhighlight>

<syntaxhighlight lang="php">
// Retrieve a GET variable, sanitize/validate it, and populate to whitelist
$limit = (int) $input->get('limit');
if($limit < 10 || $limit > 100) $limit = 25; // validate
$input->whitelist('limit', $limit);
// Retrieve a variable from the whitelist
$limit = $input->whitelist('limit');
</syntaxhighlight>

== Beispiele ==
=== Suchformular ===

=== Get Variablen auswerten (Genbänkle) ===

<syntaxhighlight lang="php">
// SEARCH
// most of the code in this template file is here to build this selector string
// it will contain the search query that gets sent to $sortList
$selector = '';

// we use this to store the info that generates the summary of what was searched for
// the summary will appear above the search results
$summary = array(
"keywords" => "",
"sort_id" => "",
"sort_red_list" => "",
"sort_wild_plant" => "",
"sort_rare" => "",
"sort_winter_plant" => "",
"sort_useful_ornamental" => "",
"sort_bw_typical" => "",
);

//var_dump($input->get->keywords);

// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords);
$selector .= "title|body|summary%=$value, ";
$summary["Stichwort"] = $sanitizer->entities($value);
$input->whitelist('keywords', $value);
}

// SORTS_ID
if($input->get->sort_id) {
$value = $sanitizer->selectorValue($input->get->sort_id);
$selector .= "pr_types=$value, ";
$p = $pages->get($sanitizer->entities($value));
$summary["Art"] = $p->title;
$input->whitelist('sort_id', $value);
}

// PROPERTIES
// Checkbox names
$properties = array(
'sort_red_list',
'sort_bw_typical',
'sort_rare',
'sort_wild_plant',
'sort_winter_plant',
'sort_useful_ornamental'
);

foreach ($properties as $k){
$label = $pages->fields->get($k)->label;
if($input->get->{$k}) {
$value = $sanitizer->selectorValue($input->get->{$k});
$selector .= "$k=1, ";
$summary["$label"] = $sanitizer->entities($value);
$input->whitelist($k, $value);
}
}
// RED LIST
/*
if($input->get->sort_red_list) {
$value = $sanitizer->selectorValue($input->get->sort_red_list);
//$selector .= "sort_properties=1, "; // 1 = red_list
$selector .= "sort_red_list=1, ";
$summary["Rote Liste"] = $sanitizer->entities($value);
$input->whitelist('sort_red_list', $value);
}
*/

// SEARCH SUMMARY
$content = '<h5>Ihre Suche</h5><ul id="search_summary" class="uk-list">';
$browserTitle = "Sorten - ";

foreach($summary as $key => $value) {
if(!$value) continue;
$key = ucfirst($key);
$content .= "\n\t<li><strong>$key:</strong> $value</li>";
$browserTitle .= "$key: $value, ";
}
$content .= "\n</ul>";

// FINAL OUTPUT
$content .= renderSortList(findSorts($selector));
$browserTitle = rtrim($browserTitle, ", ");

$content = $layoutBlocks.$content;
?>
<div id="content" class="sort-search uk-width-expand">
<?=$content?>
</div>

<aside id='sidebar' class='uk-width-1-3@m'>
<div class='uk-card uk-card-muted uk-card-hover uk-card-body uk-margin-medium-top'>
<?php include("./includes/search_form_big.php"); ?>
</div>
<div class="uk-margin">
<?=$page->sidebar?>
</div>

</aside>
</syntaxhighlight>

=== Einfaches Beispiel von Soma ===
<syntaxhighlight lang="php">
<?php
$out = '';

// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');

// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form

// create email field
$field = $modules->get("InputfieldEmail");
$field->label = "E-Mail";
$field->attr('id+name','email');
$field->required = 1;
$form->append($field); // append the field

// you get the idea
$field = $modules->get("InputfieldPassword");
$field->label = "Passwort";
$field->attr("id+name","pass");
$field->required = 1;
$form->append($field);

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);

// form was submitted so we process the form
if($input->post->submit) {

// user submitted the form, process it and check for errors
$form->processInput($input->post);

// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");

if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");

}

if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {

// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);

$out .= "<p>Thanks! Your submission was successful.";

}
} else {
// render out form without processing
$out .= $form->render();
}

include("./head.inc");
echo $out;
include("./foot.inc");
</syntaxhighlight>

=== Einfaches Formular mit E-Mail versand (ohne Spamschutz)===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

function renderContactForm($backend_email, $subject) {
$out = '';

$modules = wire('modules'); // get access to pw modules object
$input = wire('input');
$sanitizer = wire('sanitizer');

// Create the new <form>
$form = $modules->get("InputfieldForm"); // get InputfieldForm Object
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'contact-form');

// Set markup for form elements
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>",
//'item_label' => "<label for='{for}'>{out}</label>",
'item_label' => "", // no label markup for this form
'item_content' => "{out}",
'item_error' => "<p class=\"error\">{out}</p>",
'item_description' => "<p>{out}</p>",
'item_head' => "<h2>{out}</h2>",
'item_notes' => "<p class='notes'>{out}</p>",
));

// Set classes for form elements
$form->setClasses(array(
'list' => 'form-list',
'list_clearfix' => '',
'item' => '{class}',
'item_required' => 'required',
'item_error' => '',
'item_collapsed' => '',
'item_column_width' => '',
'item_column_width_first' => ''
));

// New field: First name
$field = $modules->get("InputfieldText");
$field->label = __("Name");
$field->attr([
'id+name' => 'name',
'placeholder' => 'Ihr Name',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: E-Mail
$field = $modules->get("InputfieldEmail");
$field->label = __("E-mail");
$field->attr([
'id+name' => 'email',
'placeholder' => 'Ihre E-Mail Adresse',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: Phone
$field = $modules->get("InputfieldText");
$field->label = __("Telefon");
$field->attr([
'id+name' => 'phone',
'placeholder' => 'Ihre Telefonnummer',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: Message
$field = $modules->get("InputfieldTextarea");
$field->label = __("Nachricht");
$field->attr([
'id+name' => 'message',
'placeholder' => 'Ihre Nachricht',
'class' => 'textarea'
]);
$field->required = 1;
$form->append($field);

// SUBMIT button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("id+name", "submit");
$submit->attr("class", "submit");
$form->append($submit);

// POST request, process the form
if($input->post->submit) {
$form->processInput($input->post);

$name = $sanitizer->text($input->post->firstname);
$email = $sanitizer->email($input->post->email);
$message = $sanitizer->text($input->post->message);
$phone = $sanitizer->text($input->post->phone);

// ERRORS...
if($form->getErrors()) {
$out .= $form->render();
} else {
// FORM OK...
// Process the form here!

$mail = wireMail();
$mail->to($backend_email)->from($email);
$mail->subject($subject);

$body = "Name: " . $firstname . "\n";
$body .= "E-Mail: " . $email . "\n";
$body .= "Telefon: " . $phone . "\n\n";
$body .= "Nachricht:\n" . $message;

$mail->body($body);

echo '<pre>'.$body.'</pre>';
$numSent = $mail->send();

$out .= '<p>'.__("Vielen Dank für Ihre Nachricht! Wir melden uns so bald wie möglich.").'</p>';

}
} else {
// GET request, simply show the form
$out .= $form->render();
}

return $out;
}
</syntaxhighlight>

=== Formular mit Upload Funktion (von Soma) ===
[[ProcessWire Upload Formular]]

=== CSRF in eigenen Formularen ===
[[ProcessWire - Formulare mit CSRF Schutz]]

Formulare mit Token und Sessionfunktionen von ProcessWire ausstatten. Das geht auch mit selbst erstelltem Markup.
https://processwire-recipes.com/recipes/use-csrf-in-your-own-forms/

Processwire - Forms

2019-02-11T09:11:55Z

93.208.103.149:

== Links ==
[[ProcessWire - Formulare]]
* https://processwire.com/talk/topic/2089-create-simple-forms-using-api/
* https://processwire.com/talk/topic/5631-creating-a-form/
* https://gist.github.com/somatonic/5233338 (Mit Token Validation und File Upload)
* https://gist.github.com/somatonic/5011926 (Fields from Backend)
* https://processwire.com/api/ref/inputfield/

== Beispiel von Leonid Letzner ==
* https://www.youtube.com/watch?v=iscObJTesNI
* https://github.com/leonidlezner/pwtemplate/wiki/Rendering-a-simple-contact-form-in-ProcessWire

<syntaxhighlight lang="php">
function renderCatalogForm($backend_email, $subject) {
$out = '';

$modules = wire('modules');

$input = wire('input');

$sanitizer = wire('sanitizer');

// Create the new <form>
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'contact-form');

// Set markup for form elements
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>",
'item_label' => "<label for='{for}'>{out}</label>",
'item_content' => "{out}",
'item_error' => "<p class=\"error\">{out}</p>",
'item_description' => "<p>{out}</p>",
'item_head' => "<h2>{out}</h2>",
'item_notes' => "<p class='notes'>{out}</p>",
));

// Set classes for form elements
$form->setClasses(array(
'list' => 'form-list',
'list_clearfix' => '',
'item' => '{class}',
'item_required' => 'required',
'item_error' => '',
'item_collapsed' => '',
'item_column_width' => '',
'item_column_width_first' => ''
));

// New field: First name
$field = $modules->get("InputfieldText");
$field->label = __("First name");
$field->attr('id+name','firstname');
$field->required = 1;
$form->append($field);

// New field: Last name
$field = $modules->get("InputfieldText");
$field->label = __("Last name");
$field->attr('id+name','lastname');
$field->required = 1;
$form->append($field);

// New field: E-Mail
$field = $modules->get("InputfieldEmail");
$field->label = __("E-mail");
$field->attr('id+name','email');
$field->required = 1;
$form->append($field);

// New field: Phone
$field = $modules->get("InputfieldText");
$field->label = __("Your phone");
$field->attr('id+name','phone');
$field->required = 1;
$form->append($field);

// New field: Message
$field = $modules->get("InputfieldTextarea");
$field->label = __("Message");
$field->attr('id+name', 'message');
$field->required = 1;
$form->append($field);

// Submit button!
$submit = $modules->get("InputfieldSubmit");

$submit->attr("id+name", "submit");
$form->append($submit);

// POST request, process the form
if($input->post->submit) {
$form->processInput($input->post);

$firstname = $sanitizer->text($input->post->firstname);
$lastname = $sanitizer->text($input->post->lastname);
$email = $sanitizer->email($input->post->email);
$message = $sanitizer->text($input->post->message);
$phone = $sanitizer->text($input->post->phone);

if($form->getErrors()) {
$out .= $form->render();
} else {
// Process the form here!

$mail = wireMail();
$mail->to($backend_email)->from($email);
$mail->subject($subject);

$body = "First name: " . $firstname . "\n";
$body .= "Last name: " . $lastname . "\n";
$body .= "E-Mail: " . $email . "\n";
$body .= "Phone: " . $phone . "\n\n";
$body .= "Message:\n" . $message;

$mail->body($body);

echo '<pre>'.$body.'</pre>';
#$numSent = $mail->send();

$out .= '<p>'.__("You submission was completed! Thanks for your time").'</p>';

}
} else {
// GET request, simply show the form
$out .= $form->render();
}

return $out;
}
</syntaxhighlight>

Anwendung im Template:
<syntaxhighlight lang="php">
$form = renderCatalogForm("info@xyz.abc", "Contact via my new ProcessWire page");
</syntaxhighlight>

ProcessWire - Formulare

2019-02-11T09:11:27Z

93.208.103.149: /* Links */

== Links ==
[[Processwire - Forms]] (Beispiel mit ProcessWire Form Objekt -> Inputfelder über PW generieren)
https://processwire.com/talk/topic/2089-create-simple-forms-using-api/ von Soma
https://processwire.com/talk/topic/14206-contact-form-tutorial/ Mit Google ReCaptcha

== Siehe auch ==
https://processwire.com/talk/topic/4066-activate-user-account-via-email/?page=2 // User Subscription Account via E-Mail verifizierung

== Allgemeines ==
Das '''Markup''' eines Formulars kann man entweder '''manuell''' erstellen oder mit einem '''Formobjekt''', das über eine render() Funktion ausgegeben wird.

Zur Auswertung und '''Validierung''' stellt PW ebenfalls einige Objekte und Funktionen zur Verfügung.

Für das Styling kann man eigene Stile nutzen. Als Inspiration für das Styling kann man inputfields.css aus dem templates-admin Ordner nutzen. Auch das CSS aus wire/modules/InputfieldRadios kann hilfreich sein.

=== Wichtige Funktionen ===
$form->processInput($input->post) // prevent CSRF, append a hidden field
$form->getErrors();
$form->render();
$form->setMarkup();

==== Hooks ====
Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren.

== Formular-Objekt und Felder definieren ==
<syntaxhighlight lang="php">
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');

// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);
</syntaxhighlight>

== Formular rendering konfigurieren ==
Mit der Funktion setMarkup(array()) kann man die Ausgabe von $form->render() konfigurieren.
<pre>
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>"
));
</pre>

== Formulardaten auswerten ==
<syntaxhighlight lang="php">
// form was submitted so we process the form
if($input->post->submit) {

// user submitted the form, process it and check for errors
$form->processInput($input->post);

// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");

if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");

}

if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {

// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);

$out .= "<p>Thanks! Your submission was successful.";

}
} else {
// render out form without processing
$out .= $form->render();
}
</syntaxhighlight>

=== Get und Post Daten holen und für Suchselektoren nutzen ===
<syntaxhighlight lang="php">
// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords); // Sanizize user input
$selector .= "title|body|summary%=$value, "; // %= search parts // create a selector for later
$input->whitelist('keywords', $value); //
}
</syntaxhighlight>

== Die Whitelist und der Sanitizer ==
https://processwire.com/api/ref/sanitizer/
https://processwire.com/api/ref/input/#api-sanitizer
https://processwire.com/api/ref/input/whitelist/

Den Sanitizer nutzt man um sich gegen manipulierte User-Eingaben zu schützen.

Wenn man Variablen Sanitized hat, kann man sie in die Whitlist legen, das bedeutet diesen Variablen wird vertraut. Manche Funktionen in PW nutzen die Whitelist. Z.B. gibt das MarkupPagerNav Modul die Variablen darin weiter wenn man die Seite über den Seitenbrowser wechselt.

Beispiele
<syntaxhighlight lang="php">
// Retrieve a "q" GET variable, sanitize and output
// Example request URL: domain.com/path/to/page/?q=TEST
$q = $input->get('q'); // retrieve value
$q = $sanitizer->text($q); // sanitize input as 1-line text
echo $sanitizer->entities($q); // sanitize for output, outputs "TEST"
// You can also combine $input and one $sanitizer call, replacing
// the "text" method call with any $sanitizer method:
$q = $input->get->text('q');
</syntaxhighlight>

<syntaxhighlight lang="php">
// Retrieve a GET variable, sanitize/validate it, and populate to whitelist
$limit = (int) $input->get('limit');
if($limit < 10 || $limit > 100) $limit = 25; // validate
$input->whitelist('limit', $limit);
// Retrieve a variable from the whitelist
$limit = $input->whitelist('limit');
</syntaxhighlight>

== Beispiele ==
=== Suchformular ===

=== Get Variablen auswerten (Genbänkle) ===

<syntaxhighlight lang="php">
// SEARCH
// most of the code in this template file is here to build this selector string
// it will contain the search query that gets sent to $sortList
$selector = '';

// we use this to store the info that generates the summary of what was searched for
// the summary will appear above the search results
$summary = array(
"keywords" => "",
"sort_id" => "",
"sort_red_list" => "",
"sort_wild_plant" => "",
"sort_rare" => "",
"sort_winter_plant" => "",
"sort_useful_ornamental" => "",
"sort_bw_typical" => "",
);

//var_dump($input->get->keywords);

// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords);
$selector .= "title|body|summary%=$value, ";
$summary["Stichwort"] = $sanitizer->entities($value);
$input->whitelist('keywords', $value);
}

// SORTS_ID
if($input->get->sort_id) {
$value = $sanitizer->selectorValue($input->get->sort_id);
$selector .= "pr_types=$value, ";
$p = $pages->get($sanitizer->entities($value));
$summary["Art"] = $p->title;
$input->whitelist('sort_id', $value);
}

// PROPERTIES
// Checkbox names
$properties = array(
'sort_red_list',
'sort_bw_typical',
'sort_rare',
'sort_wild_plant',
'sort_winter_plant',
'sort_useful_ornamental'
);

foreach ($properties as $k){
$label = $pages->fields->get($k)->label;
if($input->get->{$k}) {
$value = $sanitizer->selectorValue($input->get->{$k});
$selector .= "$k=1, ";
$summary["$label"] = $sanitizer->entities($value);
$input->whitelist($k, $value);
}
}
// RED LIST
/*
if($input->get->sort_red_list) {
$value = $sanitizer->selectorValue($input->get->sort_red_list);
//$selector .= "sort_properties=1, "; // 1 = red_list
$selector .= "sort_red_list=1, ";
$summary["Rote Liste"] = $sanitizer->entities($value);
$input->whitelist('sort_red_list', $value);
}
*/

// SEARCH SUMMARY
$content = '<h5>Ihre Suche</h5><ul id="search_summary" class="uk-list">';
$browserTitle = "Sorten - ";

foreach($summary as $key => $value) {
if(!$value) continue;
$key = ucfirst($key);
$content .= "\n\t<li><strong>$key:</strong> $value</li>";
$browserTitle .= "$key: $value, ";
}
$content .= "\n</ul>";

// FINAL OUTPUT
$content .= renderSortList(findSorts($selector));
$browserTitle = rtrim($browserTitle, ", ");

$content = $layoutBlocks.$content;
?>
<div id="content" class="sort-search uk-width-expand">
<?=$content?>
</div>

<aside id='sidebar' class='uk-width-1-3@m'>
<div class='uk-card uk-card-muted uk-card-hover uk-card-body uk-margin-medium-top'>
<?php include("./includes/search_form_big.php"); ?>
</div>
<div class="uk-margin">
<?=$page->sidebar?>
</div>

</aside>
</syntaxhighlight>

=== Einfaches Beispiel von Soma ===
<syntaxhighlight lang="php">
<?php
$out = '';

// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');

// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form

// create email field
$field = $modules->get("InputfieldEmail");
$field->label = "E-Mail";
$field->attr('id+name','email');
$field->required = 1;
$form->append($field); // append the field

// you get the idea
$field = $modules->get("InputfieldPassword");
$field->label = "Passwort";
$field->attr("id+name","pass");
$field->required = 1;
$form->append($field);

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);

// form was submitted so we process the form
if($input->post->submit) {

// user submitted the form, process it and check for errors
$form->processInput($input->post);

// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");

if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");

}

if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {

// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);

$out .= "<p>Thanks! Your submission was successful.";

}
} else {
// render out form without processing
$out .= $form->render();
}

include("./head.inc");
echo $out;
include("./foot.inc");
</syntaxhighlight>

=== Einfaches Formular mit E-Mail versand (ohne Spamschutz)===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

function renderContactForm($backend_email, $subject) {
$out = '';

$modules = wire('modules'); // get access to pw modules object
$input = wire('input');
$sanitizer = wire('sanitizer');

// Create the new <form>
$form = $modules->get("InputfieldForm"); // get InputfieldForm Object
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'contact-form');

// Set markup for form elements
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>",
//'item_label' => "<label for='{for}'>{out}</label>",
'item_label' => "", // no label markup for this form
'item_content' => "{out}",
'item_error' => "<p class=\"error\">{out}</p>",
'item_description' => "<p>{out}</p>",
'item_head' => "<h2>{out}</h2>",
'item_notes' => "<p class='notes'>{out}</p>",
));

// Set classes for form elements
$form->setClasses(array(
'list' => 'form-list',
'list_clearfix' => '',
'item' => '{class}',
'item_required' => 'required',
'item_error' => '',
'item_collapsed' => '',
'item_column_width' => '',
'item_column_width_first' => ''
));

// New field: First name
$field = $modules->get("InputfieldText");
$field->label = __("Name");
$field->attr([
'id+name' => 'name',
'placeholder' => 'Ihr Name',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: E-Mail
$field = $modules->get("InputfieldEmail");
$field->label = __("E-mail");
$field->attr([
'id+name' => 'email',
'placeholder' => 'Ihre E-Mail Adresse',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: Phone
$field = $modules->get("InputfieldText");
$field->label = __("Telefon");
$field->attr([
'id+name' => 'phone',
'placeholder' => 'Ihre Telefonnummer',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: Message
$field = $modules->get("InputfieldTextarea");
$field->label = __("Nachricht");
$field->attr([
'id+name' => 'message',
'placeholder' => 'Ihre Nachricht',
'class' => 'textarea'
]);
$field->required = 1;
$form->append($field);

// SUBMIT button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("id+name", "submit");
$submit->attr("class", "submit");
$form->append($submit);

// POST request, process the form
if($input->post->submit) {
$form->processInput($input->post);

$name = $sanitizer->text($input->post->firstname);
$email = $sanitizer->email($input->post->email);
$message = $sanitizer->text($input->post->message);
$phone = $sanitizer->text($input->post->phone);

// ERRORS...
if($form->getErrors()) {
$out .= $form->render();
} else {
// FORM OK...
// Process the form here!

$mail = wireMail();
$mail->to($backend_email)->from($email);
$mail->subject($subject);

$body = "Name: " . $firstname . "\n";
$body .= "E-Mail: " . $email . "\n";
$body .= "Telefon: " . $phone . "\n\n";
$body .= "Nachricht:\n" . $message;

$mail->body($body);

echo '<pre>'.$body.'</pre>';
$numSent = $mail->send();

$out .= '<p>'.__("Vielen Dank für Ihre Nachricht! Wir melden uns so bald wie möglich.").'</p>';

}
} else {
// GET request, simply show the form
$out .= $form->render();
}

return $out;
}
</syntaxhighlight>

=== Formular mit Upload Funktion (von Soma) ===
[[ProcessWire Upload Formular]]

=== CSRF in eigenen Formularen ===
[[ProcessWire - Formulare mit CSRF Schutz]]

Formulare mit Token und Sessionfunktionen von ProcessWire ausstatten. Das geht auch mit selbst erstelltem Markup.
https://processwire-recipes.com/recipes/use-csrf-in-your-own-forms/

HTML5 - Drag n Drop Upload

2019-02-09T16:34:30Z

93.208.103.149:

https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/
https://css-tricks.com/drag-and-drop-file-uploading/
https://bitwiser.in/2015/08/08/creating-dropzone-for-drag-drop-file.html

Dieses Beispiel basiert auf: [[ProcessWire Upload Formular]].
Wir möchten für einen komfortableren Upload über eine Dropzone machen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

ProcessWire - Formulare mit CSRF Schutz

2019-02-09T16:34:17Z

93.208.103.149: Die Seite wurde neu angelegt: „Use CSRF in your own forms Problem If you do not wish to create forms via the ProcessWire API, but still aiming to use PW's form features, you can use its CRS…“

Use CSRF in your own forms
Problem

If you do not wish to create forms via the ProcessWire API, but still aiming to use PW's form features, you can use its CRSF (Cross-Site Request Forgery) preventing features like so:

Solution
https://processwire-recipes.com/recipes/use-csrf-in-your-own-forms/

First you need to create a token and a token name, you do that as following:

$tokenName = $this->session->CSRF->getTokenName();
$tokenValue = $this->session->CSRF->getTokenValue();

Now what you want to do is create a hidden input field like this:

$html .= '<input type="hidden" id="_post_token" name="' . $tokenName . '" value="' . $tokenValue . '"/>';

Now this will generate something that will look like this:

<input type="hidden" id="_post_token" name="TOKEN1470842875" value="fe8ce9c1b9e6b9e361830df3525c49317a35332fbf626aa8793777a3b705824a">

You are done on the form side.

You can now go to the part where you are receiving the post. Then use:

$session->CSRF->validate();

This will return true (1) on a valid request and an exception on a bad request. You can test this out to open up your Firebug/Chrome debug console and change the value of the textbox to something else.

Basicly what this does is set a session variable with a name (getTokenName) and gives it a hashed value. If a request has a token in it it has to have the same value or it is not send from the correct form.

ProcessWire - Formulare

2019-02-09T16:33:33Z

93.208.103.149: /* CSRF in eigenen Formularen */

== Links ==
https://processwire.com/talk/topic/2089-create-simple-forms-using-api/ von Soma
https://processwire.com/talk/topic/14206-contact-form-tutorial/ Mit Google ReCaptcha
== Siehe auch ==
https://processwire.com/talk/topic/4066-activate-user-account-via-email/?page=2 // User Subscription Account via E-Mail verifizierung

== Allgemeines ==
Das '''Markup''' eines Formulars kann man entweder '''manuell''' erstellen oder mit einem '''Formobjekt''', das über eine render() Funktion ausgegeben wird.

Zur Auswertung und '''Validierung''' stellt PW ebenfalls einige Objekte und Funktionen zur Verfügung.

Für das Styling kann man eigene Stile nutzen. Als Inspiration für das Styling kann man inputfields.css aus dem templates-admin Ordner nutzen. Auch das CSS aus wire/modules/InputfieldRadios kann hilfreich sein.

=== Wichtige Funktionen ===
$form->processInput($input->post) // prevent CSRF, append a hidden field
$form->getErrors();
$form->render();
$form->setMarkup();

==== Hooks ====
Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren.

== Formular-Objekt und Felder definieren ==
<syntaxhighlight lang="php">
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');

// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);
</syntaxhighlight>

== Formular rendering konfigurieren ==
Mit der Funktion setMarkup(array()) kann man die Ausgabe von $form->render() konfigurieren.
<pre>
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>"
));
</pre>

== Formulardaten auswerten ==
<syntaxhighlight lang="php">
// form was submitted so we process the form
if($input->post->submit) {

// user submitted the form, process it and check for errors
$form->processInput($input->post);

// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");

if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");

}

if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {

// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);

$out .= "<p>Thanks! Your submission was successful.";

}
} else {
// render out form without processing
$out .= $form->render();
}
</syntaxhighlight>

=== Get und Post Daten holen und für Suchselektoren nutzen ===
<syntaxhighlight lang="php">
// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords); // Sanizize user input
$selector .= "title|body|summary%=$value, "; // %= search parts // create a selector for later
$input->whitelist('keywords', $value); //
}
</syntaxhighlight>

== Die Whitelist und der Sanitizer ==
https://processwire.com/api/ref/sanitizer/
https://processwire.com/api/ref/input/#api-sanitizer
https://processwire.com/api/ref/input/whitelist/

Den Sanitizer nutzt man um sich gegen manipulierte User-Eingaben zu schützen.

Wenn man Variablen Sanitized hat, kann man sie in die Whitlist legen, das bedeutet diesen Variablen wird vertraut. Manche Funktionen in PW nutzen die Whitelist. Z.B. gibt das MarkupPagerNav Modul die Variablen darin weiter wenn man die Seite über den Seitenbrowser wechselt.

Beispiele
<syntaxhighlight lang="php">
// Retrieve a "q" GET variable, sanitize and output
// Example request URL: domain.com/path/to/page/?q=TEST
$q = $input->get('q'); // retrieve value
$q = $sanitizer->text($q); // sanitize input as 1-line text
echo $sanitizer->entities($q); // sanitize for output, outputs "TEST"
// You can also combine $input and one $sanitizer call, replacing
// the "text" method call with any $sanitizer method:
$q = $input->get->text('q');
</syntaxhighlight>

<syntaxhighlight lang="php">
// Retrieve a GET variable, sanitize/validate it, and populate to whitelist
$limit = (int) $input->get('limit');
if($limit < 10 || $limit > 100) $limit = 25; // validate
$input->whitelist('limit', $limit);
// Retrieve a variable from the whitelist
$limit = $input->whitelist('limit');
</syntaxhighlight>

== Beispiele ==
=== Suchformular ===

=== Get Variablen auswerten (Genbänkle) ===

<syntaxhighlight lang="php">
// SEARCH
// most of the code in this template file is here to build this selector string
// it will contain the search query that gets sent to $sortList
$selector = '';

// we use this to store the info that generates the summary of what was searched for
// the summary will appear above the search results
$summary = array(
"keywords" => "",
"sort_id" => "",
"sort_red_list" => "",
"sort_wild_plant" => "",
"sort_rare" => "",
"sort_winter_plant" => "",
"sort_useful_ornamental" => "",
"sort_bw_typical" => "",
);

//var_dump($input->get->keywords);

// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords);
$selector .= "title|body|summary%=$value, ";
$summary["Stichwort"] = $sanitizer->entities($value);
$input->whitelist('keywords', $value);
}

// SORTS_ID
if($input->get->sort_id) {
$value = $sanitizer->selectorValue($input->get->sort_id);
$selector .= "pr_types=$value, ";
$p = $pages->get($sanitizer->entities($value));
$summary["Art"] = $p->title;
$input->whitelist('sort_id', $value);
}

// PROPERTIES
// Checkbox names
$properties = array(
'sort_red_list',
'sort_bw_typical',
'sort_rare',
'sort_wild_plant',
'sort_winter_plant',
'sort_useful_ornamental'
);

foreach ($properties as $k){
$label = $pages->fields->get($k)->label;
if($input->get->{$k}) {
$value = $sanitizer->selectorValue($input->get->{$k});
$selector .= "$k=1, ";
$summary["$label"] = $sanitizer->entities($value);
$input->whitelist($k, $value);
}
}
// RED LIST
/*
if($input->get->sort_red_list) {
$value = $sanitizer->selectorValue($input->get->sort_red_list);
//$selector .= "sort_properties=1, "; // 1 = red_list
$selector .= "sort_red_list=1, ";
$summary["Rote Liste"] = $sanitizer->entities($value);
$input->whitelist('sort_red_list', $value);
}
*/

// SEARCH SUMMARY
$content = '<h5>Ihre Suche</h5><ul id="search_summary" class="uk-list">';
$browserTitle = "Sorten - ";

foreach($summary as $key => $value) {
if(!$value) continue;
$key = ucfirst($key);
$content .= "\n\t<li><strong>$key:</strong> $value</li>";
$browserTitle .= "$key: $value, ";
}
$content .= "\n</ul>";

// FINAL OUTPUT
$content .= renderSortList(findSorts($selector));
$browserTitle = rtrim($browserTitle, ", ");

$content = $layoutBlocks.$content;
?>
<div id="content" class="sort-search uk-width-expand">
<?=$content?>
</div>

<aside id='sidebar' class='uk-width-1-3@m'>
<div class='uk-card uk-card-muted uk-card-hover uk-card-body uk-margin-medium-top'>
<?php include("./includes/search_form_big.php"); ?>
</div>
<div class="uk-margin">
<?=$page->sidebar?>
</div>

</aside>
</syntaxhighlight>

=== Einfaches Beispiel von Soma ===
<syntaxhighlight lang="php">
<?php
$out = '';

// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');

// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form

// create email field
$field = $modules->get("InputfieldEmail");
$field->label = "E-Mail";
$field->attr('id+name','email');
$field->required = 1;
$form->append($field); // append the field

// you get the idea
$field = $modules->get("InputfieldPassword");
$field->label = "Passwort";
$field->attr("id+name","pass");
$field->required = 1;
$form->append($field);

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);

// form was submitted so we process the form
if($input->post->submit) {

// user submitted the form, process it and check for errors
$form->processInput($input->post);

// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");

if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");

}

if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {

// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);

$out .= "<p>Thanks! Your submission was successful.";

}
} else {
// render out form without processing
$out .= $form->render();
}

include("./head.inc");
echo $out;
include("./foot.inc");
</syntaxhighlight>

=== Einfaches Formular mit E-Mail versand (ohne Spamschutz)===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

function renderContactForm($backend_email, $subject) {
$out = '';

$modules = wire('modules'); // get access to pw modules object
$input = wire('input');
$sanitizer = wire('sanitizer');

// Create the new <form>
$form = $modules->get("InputfieldForm"); // get InputfieldForm Object
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'contact-form');

// Set markup for form elements
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>",
//'item_label' => "<label for='{for}'>{out}</label>",
'item_label' => "", // no label markup for this form
'item_content' => "{out}",
'item_error' => "<p class=\"error\">{out}</p>",
'item_description' => "<p>{out}</p>",
'item_head' => "<h2>{out}</h2>",
'item_notes' => "<p class='notes'>{out}</p>",
));

// Set classes for form elements
$form->setClasses(array(
'list' => 'form-list',
'list_clearfix' => '',
'item' => '{class}',
'item_required' => 'required',
'item_error' => '',
'item_collapsed' => '',
'item_column_width' => '',
'item_column_width_first' => ''
));

// New field: First name
$field = $modules->get("InputfieldText");
$field->label = __("Name");
$field->attr([
'id+name' => 'name',
'placeholder' => 'Ihr Name',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: E-Mail
$field = $modules->get("InputfieldEmail");
$field->label = __("E-mail");
$field->attr([
'id+name' => 'email',
'placeholder' => 'Ihre E-Mail Adresse',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: Phone
$field = $modules->get("InputfieldText");
$field->label = __("Telefon");
$field->attr([
'id+name' => 'phone',
'placeholder' => 'Ihre Telefonnummer',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);

// New field: Message
$field = $modules->get("InputfieldTextarea");
$field->label = __("Nachricht");
$field->attr([
'id+name' => 'message',
'placeholder' => 'Ihre Nachricht',
'class' => 'textarea'
]);
$field->required = 1;
$form->append($field);

// SUBMIT button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("id+name", "submit");
$submit->attr("class", "submit");
$form->append($submit);

// POST request, process the form
if($input->post->submit) {
$form->processInput($input->post);

$name = $sanitizer->text($input->post->firstname);
$email = $sanitizer->email($input->post->email);
$message = $sanitizer->text($input->post->message);
$phone = $sanitizer->text($input->post->phone);

// ERRORS...
if($form->getErrors()) {
$out .= $form->render();
} else {
// FORM OK...
// Process the form here!

$mail = wireMail();
$mail->to($backend_email)->from($email);
$mail->subject($subject);

$body = "Name: " . $firstname . "\n";
$body .= "E-Mail: " . $email . "\n";
$body .= "Telefon: " . $phone . "\n\n";
$body .= "Nachricht:\n" . $message;

$mail->body($body);

echo '<pre>'.$body.'</pre>';
$numSent = $mail->send();

$out .= '<p>'.__("Vielen Dank für Ihre Nachricht! Wir melden uns so bald wie möglich.").'</p>';

}
} else {
// GET request, simply show the form
$out .= $form->render();
}

return $out;
}
</syntaxhighlight>

=== Formular mit Upload Funktion (von Soma) ===
[[ProcessWire Upload Formular]]

=== CSRF in eigenen Formularen ===
[[ProcessWire - Formulare mit CSRF Schutz]]

Formulare mit Token und Sessionfunktionen von ProcessWire ausstatten. Das geht auch mit selbst erstelltem Markup.
https://processwire-recipes.com/recipes/use-csrf-in-your-own-forms/

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T16:25:32Z

93.208.103.149:

Siehe auch

[[HTML5 - Drag n Drop Upload]]
https://gist.github.com/lokomotivan/36505531e2644db3f9f270415e2d7a35

Hinweis - funktioniert noch nicht wahrscheinlich muß noch die Übergabe an ProcessWire überarbeitet werden. Für moderne Browser ist es wahrscheinlich ohnehin besser die HTML5 Funktionalitäten zu nutzen. (siehe HTML5 Drag n Drop Upload

Dieses Beispiel basiert auf: [[ProcessWire Upload Formular]].
Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr sicher sein, daher werden wir etliche Features voraussichtlich nicht nutzen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

== Schritt 1 - Dropzone Skripte einbinden ==
Im Footerbereich des Templates (ich nutze dazu immer eine Variable) binden wir das Skript ein. Dazu im Head auch gleich das mitgelieferte Basis CSS, damit wir uns etwas Arbeit sparen.
<pre>
$additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'vendors/dropzone/basic.css">
';
$additionalFooterData .= '
<script src="'.urls()->templates.'vendors/dropzone/dropzone.js"></script>
';
</pre>

Dropzone ist jetzt bereits aktiv und kann über window.dropzone angesprochen werden.

== Schritt 2 - Das Formular für Dropzone einrichten ==
Standardmäßig legt man mit Dropzonejs ein eigenes Form-Tag an. Bilder werden automatisch hochgeladen. Wir wollen aber ein etwas anderes Verhalten erreichen.
* Über das Dropzone.options Objekt können wir ein beliebiges Div für die Dropzone nutzen. Dazu Instanziiert man für eine div mit der id myDropzone etwa so:
Dropzone.options.myDropzone= {...
* Damit Dropzone die Dateien nicht sofort hochlädt deaktivieren wir die Option autoProcessQueue
* Wenn der Submit Button geklickt wird fangen wir das Standardverhalten des Browsers, hängen die Daten des Formulars an die Dropzonedaten und lssen Dropzone alles absenden.

Das Skript sieht dann etwa so aus:
<syntaxhighlight lang="javascript">
Dropzone.options.myDropzone= {
url: './',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-form").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});

// Send all form fields along with images
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("fullname", jQuery("#fullname").val());
formData.append("email", jQuery("#email").val());
formData.append("message", jQuery("#message").val());
formData.append("newsletter_subscribe", jQuery("#newsletter_subscribe").val());
});
}
}
</syntaxhighlight>

=== Häh ? ===
So geht das in der Praxis...

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T16:22:23Z

93.208.103.149:

Siehe auch

[[HTML5 - Drag n Drop Upload]]

Hinweis - funktioniert noch nicht wahrscheinlich muß noch die Übergabe an ProcessWire überarbeitet werden. Für moderne Browser ist es wahrscheinlich ohnehin besser die HTML5 Funktionalitäten zu nutzen. (siehe HTML5 Drag n Drop Upload

Dieses Beispiel basiert auf: [[ProcessWire Upload Formular]].
Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr sicher sein, daher werden wir etliche Features voraussichtlich nicht nutzen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

== Schritt 1 - Dropzone Skripte einbinden ==
Im Footerbereich des Templates (ich nutze dazu immer eine Variable) binden wir das Skript ein. Dazu im Head auch gleich das mitgelieferte Basis CSS, damit wir uns etwas Arbeit sparen.
<pre>
$additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'vendors/dropzone/basic.css">
';
$additionalFooterData .= '
<script src="'.urls()->templates.'vendors/dropzone/dropzone.js"></script>
';
</pre>

Dropzone ist jetzt bereits aktiv und kann über window.dropzone angesprochen werden.

== Schritt 2 - Das Formular für Dropzone einrichten ==
Standardmäßig legt man mit Dropzonejs ein eigenes Form-Tag an. Bilder werden automatisch hochgeladen. Wir wollen aber ein etwas anderes Verhalten erreichen.
* Über das Dropzone.options Objekt können wir ein beliebiges Div für die Dropzone nutzen. Dazu Instanziiert man für eine div mit der id myDropzone etwa so:
Dropzone.options.myDropzone= {...
* Damit Dropzone die Dateien nicht sofort hochlädt deaktivieren wir die Option autoProcessQueue
* Wenn der Submit Button geklickt wird fangen wir das Standardverhalten des Browsers, hängen die Daten des Formulars an die Dropzonedaten und lssen Dropzone alles absenden.

Das Skript sieht dann etwa so aus:
<syntaxhighlight lang="javascript">
Dropzone.options.myDropzone= {
url: './',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-form").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});

// Send all form fields along with images
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("fullname", jQuery("#fullname").val());
formData.append("email", jQuery("#email").val());
formData.append("message", jQuery("#message").val());
formData.append("newsletter_subscribe", jQuery("#newsletter_subscribe").val());
});
}
}
</syntaxhighlight>

=== Häh ? ===
So geht das in der Praxis...

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T16:09:16Z

93.208.103.149: /* Schritt 2 - Das Formular für Dropzone einrichten */

Siehe auch

[[HTML5 - Drag n Drop Upload]]

Dieses Beispiel basiert auf: [[ProcessWire Upload Formular]].
Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr sicher sein, daher werden wir etliche Features voraussichtlich nicht nutzen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

== Schritt 1 - Dropzone Skripte einbinden ==
Im Footerbereich des Templates (ich nutze dazu immer eine Variable) binden wir das Skript ein. Dazu im Head auch gleich das mitgelieferte Basis CSS, damit wir uns etwas Arbeit sparen.
<pre>
$additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'vendors/dropzone/basic.css">
';
$additionalFooterData .= '
<script src="'.urls()->templates.'vendors/dropzone/dropzone.js"></script>
';
</pre>

Dropzone ist jetzt bereits aktiv und kann über window.dropzone angesprochen werden.

== Schritt 2 - Das Formular für Dropzone einrichten ==
Standardmäßig legt man mit Dropzonejs ein eigenes Form-Tag an. Bilder werden automatisch hochgeladen. Wir wollen aber ein etwas anderes Verhalten erreichen.
* Über das Dropzone.options Objekt können wir ein beliebiges Div für die Dropzone nutzen. Dazu Instanziiert man für eine div mit der id myDropzone etwa so:
Dropzone.options.myDropzone= {...
* Damit Dropzone die Dateien nicht sofort hochlädt deaktivieren wir die Option autoProcessQueue
* Wenn der Submit Button geklickt wird fangen wir das Standardverhalten des Browsers, hängen die Daten des Formulars an die Dropzonedaten und lssen Dropzone alles absenden.

Das Skript sieht dann etwa so aus:
<syntaxhighlight lang="javascript">
Dropzone.options.myDropzone= {
url: './',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-form").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});

// Send all form fields along with images
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("fullname", jQuery("#fullname").val());
formData.append("email", jQuery("#email").val());
formData.append("message", jQuery("#message").val());
formData.append("newsletter_subscribe", jQuery("#newsletter_subscribe").val());
});
}
}
</syntaxhighlight>

=== Häh ? ===
So geht das in der Praxis...

HTML5 - Drag n Drop Upload

2019-02-09T15:53:47Z

93.208.103.149: Die Seite wurde neu angelegt: „ https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/ https://css-tricks.com/drag-and-drop-file-uploading/ https://bitwiser.in/2015/08/08/cr…“

https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/
https://css-tricks.com/drag-and-drop-file-uploading/
https://bitwiser.in/2015/08/08/creating-dropzone-for-drag-drop-file.html

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T15:50:57Z

93.208.103.149:

Siehe auch

[[HTML5 - Drag n Drop Upload]]

Dieses Beispiel basiert auf: [[ProcessWire Upload Formular]].
Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr sicher sein, daher werden wir etliche Features voraussichtlich nicht nutzen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

== Schritt 1 - Dropzone Skripte einbinden ==
Im Footerbereich des Templates (ich nutze dazu immer eine Variable) binden wir das Skript ein. Dazu im Head auch gleich das mitgelieferte Basis CSS, damit wir uns etwas Arbeit sparen.
<pre>
$additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'vendors/dropzone/basic.css">
';
$additionalFooterData .= '
<script src="'.urls()->templates.'vendors/dropzone/dropzone.js"></script>
';
</pre>

Dropzone ist jetzt bereits aktiv und kann über window.dropzone angesprochen werden.

== Schritt 2 - Das Formular für Dropzone einrichten ==
Der auf Dropzonejs.com beschriebene Standardweg ist ein eigenes Form Tag mit der Klasse dropzone auszustatten. Doof aber wenn man aber die Daten des eigenen Forms gleichzeitig bearbeiten will. Daher gehen wir folgendermaßen vor:
# Wir nutzen unser Formular das bereits ein Upload Feld und die passenden Argumente hat.
# Wir nutzen ein eigenes div für die Dropzone und setzen eine id. Mit dieser id sagen wir dropzone wo es ansetzen soll.
# In Dropzones Optionen deaktivieren wir autoProcessQueue, damit die Dateien erst übermittelt werden, wenn wir das Formular absenden. Außerdem erlauben wir multiple Uploads.
# Wir nutzen die init function um selbst die Ausführung zu übernehmen. Hier können wir dann das sendingmultiple eventhandler nutzen um alles abzuschicken.
# Auf diese Weise können wir wie vorher ohne dropbox die Files über $_POST und $_FILES bearbeiten.

=== Häh ? ===
So geht das in der Praxis...

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T14:20:38Z

93.208.103.149:

Dieses Beispiel basiert auf: [[ProcessWire Upload Formular]].
Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr sicher sein, daher werden wir etliche Features voraussichtlich nicht nutzen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

== Schritt 1 - Dropzone Skripte einbinden ==
Im Footerbereich des Templates (ich nutze dazu immer eine Variable) binden wir das Skript ein. Dazu im Head auch gleich das mitgelieferte Basis CSS, damit wir uns etwas Arbeit sparen.
<pre>
$additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'vendors/dropzone/basic.css">
';
$additionalFooterData .= '
<script src="'.urls()->templates.'vendors/dropzone/dropzone.js"></script>
';
</pre>

Dropzone ist jetzt bereits aktiv und kann über window.dropzone angesprochen werden.

== Schritt 2 - Das Formular für Dropzone einrichten ==
Der auf Dropzonejs.com beschriebene Standardweg ist ein eigenes Form Tag mit der Klasse dropzone auszustatten. Doof aber wenn man aber die Daten des eigenen Forms gleichzeitig bearbeiten will. Daher gehen wir folgendermaßen vor:
# Wir nutzen unser Formular das bereits ein Upload Feld und die passenden Argumente hat.
# Wir nutzen ein eigenes div für die Dropzone und setzen eine id. Mit dieser id sagen wir dropzone wo es ansetzen soll.
# In Dropzones Optionen deaktivieren wir autoProcessQueue, damit die Dateien erst übermittelt werden, wenn wir das Formular absenden. Außerdem erlauben wir multiple Uploads.
# Wir nutzen die init function um selbst die Ausführung zu übernehmen. Hier können wir dann das sendingmultiple eventhandler nutzen um alles abzuschicken.
# Auf diese Weise können wir wie vorher ohne dropbox die Files über $_POST und $_FILES bearbeiten.

=== Häh ? ===
So geht das in der Praxis...

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T14:11:10Z

93.208.103.149: /* Schritt 1 - Dropzone Skripte einbinden */

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T14:03:04Z

93.208.103.149: /* Schritt 1 - Dropzone Skripte einbinden */

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T13:31:12Z

93.208.103.149:

ProcessWire UploadFormular Dropzone Enhanced

2019-02-09T13:29:08Z

93.208.103.149: Die Seite wurde neu angelegt: „Dieses Beispiel basiert auf: ProcessWire Upload Formular. Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr…“

ProcessWire Upload Formular

2019-02-09T13:27:40Z

93.208.103.149: /* Siehe auch */

== Siehe auch ==
https://gist.github.com/somatonic/5233338
[[ProcessWire UploadFormular Dropzone Enhanced]]
[[ProcessWire - File Upload mit Blueimp jQueryFileUpload]]

== Übersicht ==
Ein einfaches Upload Formular mit dem der Benutzer Dateien übermitteln kann. Für das Formular kommen aus ProcessWire der Sanitizer, die WireUpload Klasse und Session Tokens zum Einsatz. Das Formular wird validiert. Das Markup für das Formular steht direkt im Template, wird also nicht über die Formularfunktionen von ProcessWire erzeugt. Das ist oft die schnellere Variante, vor allem wenn das Markup sehr individuell ist.

Der Code basiert auf Somatonics Beispiel (s.o.) und wurde leicht angepasst.

Features:
* Dateiupload (Bilder)
* Formulareingaben als Seiten speichern (inkl. Bilder)
* Verhindert CRSF Attacken und doppelte Posts durch neu Laden
* Formular validierung mit Inline Messages
* Feldvariablen werden durch den Sanitizer bereinigt
* Kleines jQuery Beispiel um den Submit Button nach Absenden zu deaktivieren.

== Aufbau ==
TEMPLATES
basic-upload
FELDER: title
basic-upload-entry
FELDER: title, fullname, email, message, newsletter_subscribe, images

SEITEN
/basic-upload/
/basic-upload/[automatisch-erzeugte-seiten]

Das Formular liegt in der Seite
/basic-upload/
Mit dem Template 'basic-upload' (basic-upload.php)

Beim Absenden eines gültigen Formulars werden unterhalb der Formularseite weitere Seiten generiert. Diese erhalten das Template basic-upload-entry. Wenn man die erzeugten Seiten im Frontend anzeigen möchte braucht man natürlich noch ein PHP File für basic-upload-entry. Ansonsten kann man sich die Seiten im Backend anzeigen.

== Code ==
'''templates/partials/basic-upload/form-process.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
// var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for pupulating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/

if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();

// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
}
}
}

</syntaxhighlight>

templates/basic-upload.php
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = "<p class='message'>Thanks for your message!</p>";
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload/form-process.php");

?>



<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<?php if(isset($errors['email'])) echo showError($errors['email']); ?>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<?php if(isset($errors['message'])) echo showError($errors['message']); ?>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
</form>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
</syntaxhighlight>

'''form.js (jQuery)'''
<syntaxhighlight lang="php">


<script>
$(function(){
// Avoid double posts by disabling submit button on form submit
$('#myform').submit(function(){
$("#submit").attr('disabled','disabled');
return true;
});

});
</script>
</syntaxhighlight>

ProcessWire Upload Formular

2019-02-09T13:26:47Z

93.208.103.149:

== Siehe auch ==
https://gist.github.com/somatonic/5233338
[[ProcessWire - File Upload mit Blueimp jQueryFileUpload]]

== Übersicht ==
Ein einfaches Upload Formular mit dem der Benutzer Dateien übermitteln kann. Für das Formular kommen aus ProcessWire der Sanitizer, die WireUpload Klasse und Session Tokens zum Einsatz. Das Formular wird validiert. Das Markup für das Formular steht direkt im Template, wird also nicht über die Formularfunktionen von ProcessWire erzeugt. Das ist oft die schnellere Variante, vor allem wenn das Markup sehr individuell ist.

Der Code basiert auf Somatonics Beispiel (s.o.) und wurde leicht angepasst.

Features:
* Dateiupload (Bilder)
* Formulareingaben als Seiten speichern (inkl. Bilder)
* Verhindert CRSF Attacken und doppelte Posts durch neu Laden
* Formular validierung mit Inline Messages
* Feldvariablen werden durch den Sanitizer bereinigt
* Kleines jQuery Beispiel um den Submit Button nach Absenden zu deaktivieren.

== Aufbau ==
TEMPLATES
basic-upload
FELDER: title
basic-upload-entry
FELDER: title, fullname, email, message, newsletter_subscribe, images

SEITEN
/basic-upload/
/basic-upload/[automatisch-erzeugte-seiten]

Das Formular liegt in der Seite
/basic-upload/
Mit dem Template 'basic-upload' (basic-upload.php)

Beim Absenden eines gültigen Formulars werden unterhalb der Formularseite weitere Seiten generiert. Diese erhalten das Template basic-upload-entry. Wenn man die erzeugten Seiten im Frontend anzeigen möchte braucht man natürlich noch ein PHP File für basic-upload-entry. Ansonsten kann man sich die Seiten im Backend anzeigen.

== Code ==
'''templates/partials/basic-upload/form-process.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
// var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for pupulating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/

if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();

// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
}
}
}

</syntaxhighlight>

templates/basic-upload.php
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = "<p class='message'>Thanks for your message!</p>";
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload/form-process.php");

?>



<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<?php if(isset($errors['email'])) echo showError($errors['email']); ?>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<?php if(isset($errors['message'])) echo showError($errors['message']); ?>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
</form>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
</syntaxhighlight>

'''form.js (jQuery)'''
<syntaxhighlight lang="php">


<script>
$(function(){
// Avoid double posts by disabling submit button on form submit
$('#myform').submit(function(){
$("#submit").attr('disabled','disabled');
return true;
});

});
</script>
</syntaxhighlight>

ProcessWire Upload Formular

2019-02-09T13:20:53Z

93.208.103.149:

== Siehe auch ==
https://gist.github.com/somatonic/5233338
[[ProcessWire - File Upload mit Blueimp jQueryFileUpload]]

== Übersicht ==
Ein einfaches Upload Formular mit dem der Benutzer Dateien übermitteln kann. Für das Formular kommen aus ProcessWire der Sanitizer, die WireUpload Klasse und Session Tokens zum Einsatz. Das Formular wird validiert. Das Markup für das Formular steht direkt im Template, wird also nicht über die Formularfunktionen von ProcessWire erzeugt. Das ist oft die schnellere Variante, vor allem wenn das Markup sehr individuell ist.

Der Code basiert auf Somatonics Beispiel (s.o.) und wurde leicht angepasst.

== Aufbau ==
TEMPLATES
basic-upload
FELDER: title
basic-upload-entry
FELDER: title, fullname, email, message, newsletter_subscribe, images

SEITEN
/basic-upload/
/basic-upload/[automatisch-erzeugte-seiten]

Das Formular liegt in der Seite
/basic-upload/
Mit dem Template 'basic-upload' (basic-upload.php)

Beim Absenden eines gültigen Formulars werden unterhalb der Formularseite weitere Seiten generiert. Diese erhalten das Template basic-upload-entry. Wenn man die erzeugten Seiten im Frontend anzeigen möchte braucht man natürlich noch ein PHP File für basic-upload-entry. Ansonsten kann man sich die Seiten im Backend anzeigen.

== Code ==
'''templates/partials/basic-upload/form-process.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
// var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for pupulating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/

if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();

// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
}
}
}

</syntaxhighlight>

templates/basic-upload.php
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = "<p class='message'>Thanks for your message!</p>";
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload/form-process.php");

?>



<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<?php if(isset($errors['email'])) echo showError($errors['email']); ?>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<?php if(isset($errors['message'])) echo showError($errors['message']); ?>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
</form>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
</syntaxhighlight>

'''form.js (jQuery)'''
<syntaxhighlight lang="php">


<script>
$(function(){
// Avoid double posts by disabling submit button on form submit
$('#myform').submit(function(){
$("#submit").attr('disabled','disabled');
return true;
});

});
</script>
</syntaxhighlight>

ProcessWire Upload Formular

2019-02-09T13:09:26Z

93.208.103.149:

== Übersicht ==
Ein einfaches Upload Formular mit dem der Benutzer Dateien übermitteln kann. Für das Formular kommen aus ProcessWire der Sanitizer, die WireUpload Klasse und Session Tokens zum Einsatz. Das Formular wird validiert.

Der Code basiert auf Somatonics Beispiel (s.u.)
== Siehe auch ==
https://gist.github.com/somatonic/5233338
[[ProcessWire - File Upload mit Blueimp jQueryFileUpload]]

'''templates/partials/basic-upload/form-process.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
// var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for pupulating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/

if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
print_r($template);
//var_dump($parent);
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("Y-m-d_H:i:s") . " - " . uniqid();

// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
}
}
}

</syntaxhighlight>

templates/basic-upload.php
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = "<p class='message'>Thanks for your message!</p>";
$success = false;

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 2*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "basic-upload-entry"; // the template used to create the page
$parent = $pages->get("/basic-upload/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./partials/basic-upload/form-process.php");

?>



<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>
<p>Creates Pages in Backend from Form including upload field.</p>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<?php if(isset($errors['email'])) echo showError($errors['email']); ?>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<?php if(isset($errors['message'])) echo showError($errors['message']); ?>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
</form>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>
</syntaxhighlight>

'''form.js (jQuery)'''
<syntaxhighlight lang="php">


<script>
$(function(){
// Avoid double posts by disabling submit button on form submit
$('#myform').submit(function(){
$("#submit").attr('disabled','disabled');
return true;
});

});
</script>
</syntaxhighlight>

ProcessWire Upload Formular

2019-02-09T12:29:51Z

93.208.103.149:

== Übersicht ==
Ein einfaches Upload Formular mit dem der Benutzer Dateien übermitteln kann. Einige Sicherheitsrichtlinien werden hier bereits beachtet.

== Siehe auch ==
https://gist.github.com/somatonic/5233338
[[ProcessWire - File Upload mit Blueimp jQueryFileUpload]]

'''form-process.php'''
<syntaxhighlight lang="php">
<?php

// ------------------------------ FORM Processing ---------------------------------------

$errors = null;
$success = false;

// helper function to format form errors
function showError($e){
return "<p class='error'>$e</p>";
}

// dump some variables
// var_dump($_FILES,$_POST,$_SESSION);

/**
* Cast and save field values in array $form_fields
* this is also done even form not submited to make populating the form later easier.
*
* Also used for pupulating page when form was valid
*/
$required_fields = array();
foreach($form_fields as $key => $f){
if($f['type'] == 'text'){
$form_fields[$key]['value'] = $sanitizer->text($input->post->$key);
}
if($f['type'] == 'textarea'){
$form_fields[$key]['value'] = $sanitizer->textarea($input->post->$key);
}
if($f['type'] == 'email'){
$form_fields[$key]['value'] = $sanitizer->email($input->post->$key);
}
if($f['type'] == 'checkbox'){
$form_fields[$key]['value'] = isset($input->post->$key) ? 1 : 0;
}
// store required fields in array
if($f['required']) $required_fields[] = $key;
}

/**
* form was submitted, start processing the form
*/

if($input->post->action == 'send'){

// validate CSRF token first to check if it's a valid request
if(!$session->CSRF->hasValidToken()){
$errors['csrf'] = "Form submit was not valid, please try again.";
}

/**
* Ceck for required fields and make sure they have a value
*/
foreach($required_fields as $req){

// required upload file field
if($form_fields[$req]['type'] == 'file'){
if(empty($_FILES[$req]['name'][0])){
$errors[$req] = "Select files to upload.";
}
// reqired checkbox fields
} else if($form_fields[$req]['type'] == 'checkbox'){
if($form_fields[$req]['value'] == 0){
$errors[$req] = "Field required";
}
// reqired text fields
} else if($form_fields[$req]['type'] == 'text'
|| $form_fields[$req]['type'] == 'textarea'
|| $form_fields[$req]['type'] == 'email'){
if(!strlen($form_fields[$req]['value'])){
$errors[$req] = "Field required";
}
// reqired email fields
if($form_fields[$req]['type'] == 'email'){
if($form_fields[$req]['value'] != $input->post->$req){
$errors[$req] = "Please enter a valid Email address.";
}
}
}
}

/**
* if no required errors found yet continue file upload form processing
*/
if(empty($errors)) {

// RC: create temp path if it isn't there already
if(!is_dir($upload_path)) {
if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
}

// setup new wire upload
$u = new WireUpload($file_field);
$u->setMaxFiles($max_files);
$u->setMaxFileSize($max_upload_size);
$u->setOverwrite($overwrite);
$u->setDestinationPath($upload_path);
$u->setValidExtensions($file_extensions);

// start the upload of the files
$files = $u->execute();

// if no errors when uploading files
if(!$u->getErrors()){

// create the new page to add field values and uploaded images
$uploadpage = new Page();
$uploadpage->template = $template;
$uploadpage->parent = $parent;

// add title/name and make it unique with time and uniqid
$uploadpage->title = date("d-m-Y H:i:s") . " - " . uniqid();

// populate page fields with values using $page_fields array
foreach($page_fields as $pf){
if($templates->get($template)->hasField($pf)){
$uploadpage->$pf = $form_fields[$pf]['value'];
} else {
throw new WireException("Template '$template' has no field: $pf");
}
}

// RC: for safety, only add user uploaded files to an unpublished page, for later approval
// RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php
$uploadpage->addStatus(Page::statusUnpublished);
$uploadpage->save();

// Now page is created we can add images upload to the page file field
foreach($files as $filename) {
$uploadpage->$file_field = $upload_path . $filename;
// remove tmp file uploaded
unlink($upload_path . $filename);
}
$uploadpage->save();

// $success_message .= "<p>Page created: <a href='$uploadpage->url'>$uploadpage->title</a></p>";
$success = true;

// reset the token so no double posts happen
// also prevent submit button to from double clicking is a good pratice
$session->CSRF->resetToken();

} else {
// errors found
$success = false;

// remove files uploaded
foreach($files as $filename) unlink($upload_path . $filename);

// get the errors
if(count($u->getErrors()) > 1){ // if multiple error
foreach($u->getErrors() as $e) {
$errors[$file_field][] = $e;
}
} else { // if single error
$errors[$file_field] = $u->getErrors();
}
}
}
}

</syntaxhighlight>

form-upload.php
<syntaxhighlight lang="php">
<?php

/**
* ### Example front-end form template with file upload and fields ###
*
* - with files (images) upload to page field
* - adds new page on the fly and adds uploaded images
* - prevents CRSF attacks, this also prevents double post by refresh page after submit
* - has required fields with error messages inline
* - sanitizing and saving values to a page
* - jquery example with disabled submit button on form submit
*
* Edit add or remove form markup below and configure this section according to what you need.
*
*/

// ------------------------------ FORM Configuration ---------------------------------------

// --- Some default variables ---
$success_message = "<p class='message'>Thanks for your message!</p>";

// --- All form fields as nested array ---
// using html form field name => template field nam, from the page you're going to create
$form_fields = array(
'fullname' => array('type' => 'text', 'value' => '', 'required' => true),
'email' => array('type' => 'email', 'value' => '', 'required' => true),
'message' => array('type' => 'textarea', 'value' => '', 'required' => true),
'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false),
'images' => array('type' => 'file', 'required' => true)
);

// --- WireUpload settings ---
$upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder
$file_extensions = array('jpg', 'jpeg', 'gif', 'png');
$max_files = 3;
$max_upload_size = 1*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size
$overwrite = false;

// --- Page creation settings ---
$template = "upload-entry"; // the template used to create the page
$parent = $pages->get("/uploads/");
$file_field = "images";
$page_fields = array('fullname','email','message','newsletter_subscribe');

// $page_fields = define the fields (except file) you want to save value to a page
// this is for the form process to populate page fields.
// Your page template must have the same field names existent

// ------------------------------ FORM Processing ---------------------------------------

include("./form-process.php");

?>



<?php

/**
* Some vars used on the form markup for error and population of fields
*
* $errors[fieldname]; to get errors
* $form_fields[fieldname]['value'];
*
* Some helper function to get error markup
* echo showError(string);
*
* Prevent CSRF attacks by adding hidden field with name and value
* you an get by using $session->CSRF
* $session->CSRF->getTokenName();
* $session->CSRF->getTokenValue();
*
* $errors['csrf']; used to check for CSRF error
*
*/

?>

<div class="content">

<h2>Upload Images to Page Example Form</h2>

<?php if(!$success) : ?>

<?php if(!empty($errors)) echo showError("Form contains errors"); ?>
<?php if(!empty($errors['csrf'])) echo showError($errors['csrf']); ?>

<form name="myform" class="myform" id="myform" method="post" action="./" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $session->CSRF->getTokenName(); ?>" value="<?php echo $session->CSRF->getTokenValue(); ?>"/>

<div class="row <?php if(isset($errors['fullname'])) echo "error";?>">
<label for="fullname">Name* </label><br/>
<input type="text" name="fullname" id="fullname" value="<?php echo $sanitizer->entities($form_fields['fullname']['value']); ?>"/>
<?php if(isset($errors['fullname'])) echo showError($errors['fullname']); ?>
</div>

<div class="row <?php if(isset($errors['email'])) echo "error";?>">
<label for="email">Email* </label><br/>
<input type="text" name="email" id="email" value="<?php echo $sanitizer->entities($form_fields['email']['value']); ?>"/>
<?php if(isset($errors['email'])) echo showError($errors['email']); ?>
</div>

<div class="row <?php if(isset($errors['message'])) echo "error";?>">
<label for="message">Message* </label><br/>
<textarea type="text" name="message" id="message"><?php echo $sanitizer->entities($form_fields['message']['value']); ?></textarea>
<?php if(isset($errors['message'])) echo showError($errors['message']); ?>
</div>

<div class="row <?php if(isset($errors['newsletter_subscribe'])) echo "error";?>">
<label for="newsletter_subscribe">Newsletter* </label><br/>
<input type="checkbox" name="newsletter_subscribe" id="newsletter_subscribe"
<?php echo $form_fields['newsletter_subscribe']['value'] ? "checked='checked'" : "" ; ?>
/>
<?php if(isset($errors['newsletter_subscribe'])) echo showError($errors['newsletter_subscribe']); ?>
</div>

<div class="row <?php if(isset($errors['images'])) echo "error";?>">
<label for="images">Images* </label><br/>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
<?php
// show upload errors
if(isset($errors['images'])){
// if multiple errors
if(is_array($errors['images'])){
foreach($errors['images'] as $e){
echo showError($e);
}
} else { // if single error
echo showError($errors['images']);
}
}
?>
</div>
<div class="row">
<input type="hidden" name="action" id="action" value="send"/>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
</form>

<?php else: ?>

<p><?php echo $success_message; ?></p>

<?php endif; ?>

</div>

</syntaxhighlight>

form.js (jQuery)
<syntaxhighlight lang="php">


<script>
$(function(){
// Avoid double posts by disabling submit button on form submit
$('#myform').submit(function(){
$("#submit").attr('disabled','disabled');
return true;
});

});
</script>
</syntaxhighlight>