CP Dateiliste im Formular

Den Contentpart Dateiliste in einem Formular ausführen, Input-Daten generieren, (manipulieren) und versenden.

Das ist bisher mit array-fähigen Feldern möglich wie checkbox und select (im multiple-Modus). Nachteil: Leider ist die Möglichkeit der Mehrfachselektion gegeben. In den meisten Anwendungsfällen ist das nicht erwünscht. Hier sollte ein nachgeschaltetes Skript entweder zur Laufzeit (JS) oder zumindest auf Serverebene Ordnung schaffen.

<note tip> Manipuliert werden die eingegebene Daten mit einer Funktion im /frontend_init/ -Ordner.
Siehe dazu: RT available in form generated E-Mail (Verfügbar seit r282) </note>

Der Contentpart Dateiliste, soll Daten zu jedem Bild an ein Formular übergeben. Der aktive, vom Benutzer bedienbare Teil ist in diesem Beispiel eine einfaches Kontrollkästchen (checkbox) und zwei Listenfelder (select (im multiple-Modus)). Der passive Teil übergibt Bildparameter zum jeweiligen Bild. Diese Datensammlung wird bei submit in einer eMail versendet.

Docu: –
Forum: Galerie mit Formular verbinden

Autor: Oliver Georgi http://phpwcms.de/ aufbereitet: K.Heermann (flip-flop) (30.08.09)
CMS-Version: >= V1.4.1 r282
Version: V1.1 30.08.09

Bedingung:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_ext_init'] = 1;




FE Ein/Ausgabe

Das wird gesendet:

Das wird empfangen: (ohne PHP Filter)

Hallo Sir-Oblong-Fitz-Oblong,

Name:   Sir-Oblong-Fitz-Oblong

E-Mail: Sir-Oblong-Fitz-Oblong@example.com

Ergänzung:
------------------------------
Den Liegestuhl (ID 6) bitte horizontal spiegeln.

Danke
------------------------------

Bilder bestellen:
------------------------------
2-060129_124625.jpg, 6-Dscn1531_800x600.jpg
2-6, 5-1, 6-3
2-15x20, 5-10x15, 6-10x15
------------------------------

Das war´s - Danke.


BE Contentpart Formular

Vom Prinzip her ist es eine ganz normale Vorlage, die einfach nur die Daten durch einen CP “untergeschoben” bekommt.

Entscheidend ist die Namensgleichheit des angelegten Feldes und des Input-Bereichs im Template des CPs. (hier Dateiliste).

  • Das Feld wird angelegt
  • In der FE-Vorlage taucht das Feld nicht auf (dafür ist hier der CP zuständig).
  • In die Empfänger-Vorlage wird das Feld eingesetzt
  • Die Rückgabedaten werden mit Hilfe eines PHP Skrips gefiltert und überarbeitet.

Empfänger-Vorlage

Hallo {name},
 
Name:   {name}
 
E-Mail: {email}
 
Ergänzung:
------------------------------
{ergaenzung}
------------------------------
 
Bilder bestellen:
------------------------------
[daten]
[bild]{bild}[/bild]
[anzahl]{anzahl}[/anzahl]
[groesze]{groesze}[/groesze]
[/daten]
------------------------------
 
Das war´s - Danke.

<note>Die [Begrenzer]… [/Begrenzer] wurden in das Empfängertemplate eingesetzt um einfacher mit PHP filtern zu können. </note>


Vorlage:

Vorlage: ================[BR][BR]
 
SHOW_CONTENT:[BR]
======================[BR]
 
{SHOW_CONTENT:CP,69}[BR]
 
Weiter mit Vorlage:[BR]
======================[BR][BR]
<div style="width:610px; margin: 0; padding:10px; border-top:1px dotted #bbb; border-bottom:1px dotted #bbb; background: #f6f6f6;">
{ERROR:name}[B]{LABEL:name}[/B][BR]{name}[BR][BR]
{ERROR:email}[B]{LABEL:email}[/B][BR]{email}[BR][BR]
{ERROR:ergaenzung}[B]{LABEL:ergaenzung}[/B][BR]{ergaenzung}[BR][BR]
 
{ERROR:nospam}[B]{LABEL:nospam}[/B][BR]{nospam}[BR][BR]
 
{submitIt}
</div>


PHP Skript (Custom)

Es ist also selektiert worden:

Bild-ID    Bild-Name              Anzahl     Größe
----------+----------------------+----------+------
  2        060129_124625.jpg        6        15x20
  6        Dscn1531_800x600.jpg     3        10x15
----------+----------------------+----------+------

Die Ausgabe sähe an dieser Stelle ohne PHP Skript nun so aus:

Bilder bestellen:
------------------------------
[daten]
[bild]2-060129_124625.jpg, 6-Dscn1531_800x600.jpg[/bild]
[anzahl]2-6, 5-1, 6-3[/anzahl]
[groesze]2-15x20, 5-10x15, 6-10x15[/groesze]
[/daten]
------------------------------

Wir sehen bei Anzahl noch die 5-1 (ID 5 1x) und bei Größe 5-10×15 (Id=5 10x15cm). Diese beiden Einträge kommen vom “selected=“selected” und sind ungültig, da das Bild dazu nicht angewählt wurde.

Jetzt ist es möglich, die Mail mit einem PHP-Skript entsprechend aufzubereiten. Die Ausgabe könnte so aussehen:

Bilder bestellen:
------------------------------
ID | Bild-Name | Bild-Anzahl | Bild-Groesze
2  | 060129_124625.jpg | 6x | 15x20cm
6  | Dscn1531_800x600.jpg | 3x | 10x15cm
------------------------------

Hierzu bitte nachlesen: RT available in form generated E-Mail (Verfügbar seit r282)

<note tip>Der PHP-Filter ist hier verfügbar für Leute die brauchbare Beiträge, Übersetzungen oder Video Clips in/für das wiki schreiben. (Alternativ kann auch angemessen gespendet werden).</note>


BE Contentpart Dateiliste

Der CP hat im Beispiel die ID=69.

In der Vorlage zu diesem CP wird an der Stelle an der das Input-Feld erscheinen soll

Schematische Darstellung

  <div>Bild bestellen</div>
    <div>
        <input name="bild[]" id="{FILE_ID}" value="{FILE_ID}-{FILE_NAME}" type="checkbox" /><label for="bild"></label>&nbsp;
  </div>
    <div>ID: {FILE_ID}</div>
  </div>
 
  <div>
    <div>Anzahl</div>
  <div>
  <select name="anzahl[]" id="{FILE_ID}" size="4" multiple="multiple">
    <option value="{FILE_ID}-1" selected="selected">1</option>
    <option value="{FILE_ID}-2">2</option>
    <option value="{FILE_ID}-3">3</option>
    <option value="{FILE_ID}-4">4</option>
    <option value="{FILE_ID}-5">5</option>
  </select>
  </div>
  </div>
 
  <div>
    <div>Größe</div>
  <div>
  <select name="groesze[]" id="{FILE_ID}" size="4" multiple="multiple">
    <option value="{FILE_ID}-9x13">9x13</option>
    <option value="{FILE_ID}-10x15" selected="selected">10x15</option>
    <option value="{FILE_ID}-13x18">13x18</option>
    <option value="{FILE_ID}-15x20">15x20</option>
  </select>
  </div>
  </div>

eingesetzt. (Schematisch dargestellt).

In <input bzw. select name=”…. Feldern muss muss der Name identisch sein mit dem Namen des korrespondierenden Formulareintrag vom entsprechenden Typ.


Komplettes Template (mit Inline-Style):

Template:

<!--FILE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
icon_path       = "img/icons/"
icon_name       = "small_icon_{FILE_EXT}.gif"
; alternatively use "small_icon_pix.gif" for all images/files
thumbnail     = 1
thumbnail_width   = 100
thumbnail_height  = 100
thumbnail_crop    = 1
; lighbox_init [0|1] since V1.4.2 r354 available: Enable only when really needed
lightbox_init     = 1
file_size_round   = 1
file_size_space   = " "
date_format     = "%d.%m.%y"
set_locale      = "de_DE@Euro"
<!--FILE_SETTINGS_END//-->
[TITLE]<h4>{TITLE}</h4>[/TITLE]
[SUBTITLE]<h5>{SUBTITLE}</h5>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<div style="margin-top: 10px; padding: 05px 0 0 0; border-top: 1px dotted #bbb; background: #f6f6f6; width:630px;">
<!--FILE_ENTRY_START//-->
 
  <div class="fileEntry" style=" margin: 0; padding: 0 0 10px 10px; border-bottom: 1px dotted #bbb; height: 130px; background: #f6f6f6">
 
    <h2 style="padding: 10px 0 5px 0;">
      <a href="{FILE_LINK}&amp;target=0"{FILE_TARGET}>[FILE_TITLE]{FILE_TITLE}[/FILE_TITLE][FILE_TITLE_ELSE]{FILE_NAME}[/FILE_TITLE_ELSE]</a>
    </h2>
 
      [FILE_IMAGE_ELSE]<img src="{FILE_ICON}" alt="" border="0" />[/FILE_IMAGE_ELSE]
      [FILE_IMAGE]
      <div style="float: left; margin-right: 10px;">
        <a href="img/cmsimage.php/800x600/{FILE_ID}.{FILE_EXT}" rel="lightbox[XYZ{FILE_ID}]" title="{FILE_TITLE}" target="_blank">
        <img src="{FILE_IMAGE}" alt="{FILE_NAME}" border="0" /></a>
      </div>
      [/FILE_IMAGE]
 
 
    <div style="float: left;">
    <p>[FILE_DESCRIPTION]
    <strong style="font-size: 120%; line-height: 170%;">{FILE_DESCRIPTION}</strong><br />[/FILE_DESCRIPTION]
    <div style="font-size: 90%; width: 250px;">
    <strong>Dateiname:</strong> {FILE_NAME}<br />
    <!--{ FILE_EXT}//-->
        <strong>Erstellt am:</strong> {FILE_DATE} - Größe: {FILE_SIZE}
    </p>
    [FILE_IMAGE_WIDTH]
    <strong>Format:</strong> [FILE_IMAGE_LANDSCAPE]quer[/FILE_IMAGE_LANDSCAPE][FILE_IMAGE_PORTRAIT]hoch[/FILE_IMAGE_PORTRAIT]
    &nbsp; - B x H: {FILE_IMAGE_WIDTH} x {FILE_IMAGE_HEIGHT}px<br />
    <strong>Modus:</strong> {FILE_IMAGE_CHANNEL} &nbsp; - MIME type: {FILE_IMAGE_MIME}<br />
    {FILE_DOWNLOADS} Downloads &nbsp; <br />
    </div>
  </div>
 
  <div style="float: left; margin-left: 20px; padding:6px; border:1px solid #ccc; background:#eee;">
  <div style="float: left;">
  <div><strong>Bild <br />bestellen</strong></div>
    <div>
        <input name="bild[]" id="{FILE_ID}" value="{FILE_ID}-{FILE_NAME}" type="checkbox" /><label for="bild"></label>&nbsp;
  </div>
  <div style="padding-top:17px; font-size: 90%;">ID:
    <span style="font-weight: bold; border:1px solid #aaa; background:#DFEEFF ; padding:1px; margin: 2px 0 0 0;">{FILE_ID}</span></div>
  </div>
 
  <div style="float:left; margin-left:25px">
  <div>Anzahl</div>
<div>
<select name="anzahl[]" id="{FILE_ID}" size="4" multiple="multiple">
    <option value="{FILE_ID}-1" selected="selected">1</option>
    <option value="{FILE_ID}-2">2</option>
    <option value="{FILE_ID}-3">3</option>
    <option value="{FILE_ID}-4">4</option>
    <option value="{FILE_ID}-5">5</option>
    <option value="{FILE_ID}-6">6</option>
    <option value="{FILE_ID}-7">7</option>
    <option value="{FILE_ID}-8">8</option>
    <option value="{FILE_ID}-9">9</option>
    <option value="{FILE_ID}-10">10</option>
    <option value="{FILE_ID}-11">11</option>
    <option value="{FILE_ID}-12">12</option>
</select>
</div>
</div>
 
  <div style="float:left; margin-left:20px">
  <div>Größe</div>
<div>
<select name="groesze[]" id="{FILE_ID}" size="4" multiple="multiple">
    <option value="{FILE_ID}-9x13">9x13</option>
    <option value="{FILE_ID}-10x15" selected="selected">10x15</option>
    <option value="{FILE_ID}-13x18">13x18</option>
    <option value="{FILE_ID}-15x20">15x20</option>
    <option value="{FILE_ID}-20x30">20x30</option>
    <option value="{FILE_ID}-30x45">30x45</option>
    <option value="{FILE_ID}-40x60">40x60</option>
</select>
</div>
</div>
    </div>
    [/FILE_IMAGE_WIDTH]
  </div>
 
<!--
      Bezeichnung          {TAG.................}
      +====================+======================
      FILE_ICON:           {FILE_ICON}
      FILE_IMAGE:          {FILE_IMAGE}
      FILE_LINK:           {FILE_LINK}
      FILE_TARGET:         {FILE_TARGET}
      FILE_TITLE:          {FILE_TITLE}
      FILE_NAME:           {FILE_NAME}
      FILE_ID:             {FILE_ID}
      FILE_IMAGE_WIDTH:    {FILE_IMAGE_WIDTH}
      FILE_IMAGE_HEIGHT:   {FILE_IMAGE_HEIGHT}
      FILE_IMAGE_MIME:     {FILE_IMAGE_MIME}
      FILE_IMAGE_CHANNEL:  {FILE_IMAGE_CHANNEL}
      FILE_IMAGE_LANDSCAPE:{FILE_IMAGE_LANDSCAPE}
      FILE_IMAGE_PORTRAIT: {FILE_IMAGE_PORTRAIT}
 
      FILE_DESCRIPTION:  {FILE_DESCRIPTION}
      FILE_EXT:          {FILE_EXT}
      FILE_SIZE:         {FILE_SIZE}
      FILE_DATE:         {FILE_DATE}
      FILE_DOENLOADS:    {FILE_DOWNLOADS}
//-->
 
    <div style="clear:left;"><!--clear//--></div>
<!--FILE_ENTRY_END//-->
</div>


ContentPart Dateiliste:

deutsch/phpwcms-system/artikel/contentparts/formular/spezielle-anwendungen/contentpart-dateiliste-im-formular.txt · Last modified: 2018/06/03 18:08 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0