ugrás a tartalomhoz

Többfüles form CMS alá

Jazoja · 2011. Jún. 29. (Sze), 03.10
WP3 alá szeretnék (megrendelő kérésére) többfüles formot létrehozni.
Alapból csak egy form látszik, kitöltés után kattintással lehet következőt (ugyanolyan mint az előző) hozzáadni.
Ha már nincs több feltöltendő fül (lépés), akkor azokat megfelelően egybefűzve egyben tölti fel a szerverre (wp-post).

A wp form-builder pluginjeivel nem sokra mentem, csak 1-1 form vagy egy meghatározott form-láncolatot lehetett volna létrehozni. Fizetős pluginek sem tudták ezt megoldani.

Hosszas fejtörés után oda lukadtam ki, hogy talán php-ben lekódolni sem lenne olyan nagy meló (AJAX-al meg talán szépen is működne).

AJAX-ban még nem fejesztettem, alapszintű PHP,mySQL,HTML,CSS,JavaScript tudásom viszont van.

Szakértőktől szeretném kérdezni, hogy jó helyen kapirgálok-é, esetleg tud-e valaki valami tanácsot adni, hogy hol kezdjem.
Én mondjuk első körben Drupal7-re gondoltam látva annak képességeit, de a megbízó egyelőre ragaszkodik WP-hez.
‹ html lista kilóg a div-ből Űrlap tömb-jellegű mező értékének elérése ›
 ■
1

Ha nem gond, hogy nem vagyok szakértő...

H.Z. v2 · 2011. Jún. 29. (Sze), 07.44
Esetleg keress a google-n a wordpress biztonsági problémáival kapcsolatos híreket és mutasd meg a megbízódnak, hátha elmegy tőle a kedve. (2007-ben volt, hogy még a 2.1-be sikerült valakinek backdoort csempészni, ez év elején is sikerült valaki(k)nek olyan accountokhoz/jelszavakhoz hozzáférni, amivel bármi szemetet belepakolhattak a wp kódjába - ennyit találtam pár perc alatt, de rémlik, hogy ennél több gond volt vele.
----------------------------
Form: biztosan kell hozzá Ajax? Egyszerű JS + némi CSS machináció nem lenne elég?
Mélyebben nem gondoltam végig, de Ajax+PHP azzal jár, hogy a fülek közt csak úgy tud mászkálni a felhasználó, hogy közben a szerverrel is kommunikál a böngészője, ami pl. interneten át esetenként elég lassú is lehet.
JS-ből úgy képzelném, hogy minden fül mondjuk egy DIV-ben lenne, ugyanarra a képernyőterületre pozicionálva (update: hülyeség, nem kell pozicionálni sem, mert a display:none a helyét is felszabadítja, a visibility-től eltérően) és amelyikre nincs szükség, az kap egy display:off attribútumot.

Vagy félreértettem valamit?

Ha a fülek megjelenítése/eltüntetése volt gond, akkor egy "kissé" gányolt megoldás lehet ez is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Címsor</title>
    <style type="text/css">
                .ful { display:none; }
    </style>
        <script>
                function setup(){
                        i=document.getElementById("d1");
                        i.style.display="block";
                }

                function ful(fulid){
                        d=document.getElementById("fulek");
                        for(var i=0; i<d.childNodes.length; i++){
                                e=d.childNodes[i];
                                if(e.className=="ful"){
                                        if(e.id==fulid){
                                                e.style.display="block";
                                        }else{
                                                e.style.display="none";
                                        }
                                }
                        }

                }
        </script>
  </head>
  <body>
        <p>törzs</p>
        <form action="jsfulek.php" method="post">
                <div id="gombok">
                        <input type="button" value="ful1" onClick="ful('d1')">
                        <input type="button" value="ful2" onclick="ful('d2')">
                        <input type="button" value="ful3" onclick="ful('d3')">
                </div>
                <div id="fulek">
                        <div id="d1" class="ful">
                                <br>i1:<input name="i1" type="text"><br>1. Fülecske
                        </div>
                        <div id="d2" class="ful">
                                <br>i2:<input name="i2" type="text"><br>2. Fülecske
                        </div>
                        <div id="d3" class="ful">
                                <br>i3:<input name="i3" type="text"><br>3. Fülecske
                        </div>
                </div>
                <br><br><center><input type="submit" value="Mehet!"></center>
        </form>
        <script>setup();</script>
  </body>
</html>
2

Minta

Jazoja · 2011. Jún. 29. (Sze), 11.01
Nekem mindegy mivel készül, lényeg a megfelelő működés.

Picasába feltölöttem egy képet, ez az instructables.com oldalán található cikk-beküldő oldalról készült.

A segítséget köszönöm, megnézem mit sikerül összehoznom vele.

A WP biztonsági hibával kapcsolatban: ugyan nem vagyok szakértő, de biztonsági hibák előfordulnak máshol is, ezeket szerintem szokták javítani.

Drupal többfüles form létrehozására még nem jöttem rá, egyelőre még onnan is várok választ.
3

Szakértőnek én sem mondanám

H.Z. v2 · 2011. Jún. 29. (Sze), 11.27
Szakértőnek én sem mondanám magam, de ahol több alkalommal is hozzájutnak fejlesztői accountokhoz... hááát... igaz, én elég paranoiás vagyok, de háromszor meggondolnám, hogy élesben használjam-e.

Ami a füleket illeti: az én megoldásom ehhez lehet, hogy kevés, legalábbis macerás a kivitelezése a grafikus elemek miatt. (grafikus elem=a füleket jelző feliratokra és a hozzájuk tartozó "ablakok" keretezésére gondolok)
5

Problémák

Poetro · 2011. Jún. 29. (Sze), 12.14
A fenti kódban egy halom probléma van.
  • Na használjunk feleslegesen <br> elemet, az nem formázásra való.
  • Az űrlapelemek címkéihez használjunk <label> elemet, mert összekapcsolja a címkét a mezővel és nagyobb kattintási felületet ad a mező aktiválásához.
  • A JavaScript változókat a var kulcsszóval hozzuk létre, hogy ne terheljük a globális névteret, és hogy elkerüljük a kellemetlen mellékhatásokat.
  • JavaScripttel ne módosítsuk a megjelenést (ne használjuk a style DOM elem tulajdonságot), arra a CSS való.
  • A DOM elemekre ne HTML-ből rakjunk viselkedést, az a JavaScript feladata.
  • A dokumentum <head> részébe ne rakjunk <script>-et, mert lassítja az oldal betöltődését.

Íme egy tiszta változat:
<!DOCTYPE html>
<html>
<head>
  <title>Többfüles form CMS alá</title>
  <style type="text/css">
    .clearfix:after {
      content:".";
      display:block;
      height:0;
      clear:both;
      visibility:hidden;
    }
    * html .clearfix {
      height:1%;
    }
    :first-child + html .clearfix {
      min-height:1%;
    }

    .fulek li, .panelek li {
      display: block;
      margin: 0;
      padding: 0;
    }
    .fulek li {
      float: left;
      padding: 3px;
      margin: 0 1em 0 0;
      border: 1px solid #ccc;
      border-bottom: none;
    }
    .fulek .aktiv {
      margin-bottom: -1px;
      border-bottom: 1px solid #fff;
    }
    .fulek {
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #ccc;
    }
    .panelek {
      margin: 0;
      padding: 1em;
      border: 1px solid #ccc;
      border-top: 0;
    }
    .panelek li {
      display: none;
    }
    .panelek li.aktiv {
      display: block;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet...</p>
  <form action="jsfulek.php" method="post">
    <ul id="fulek" class="fulek clearfix">
      <li class="aktiv"><a href="#ful1">Fül 1</a></li>
      <li><a href="#ful2">Fül 2</a></li>
      <li><a href="#ful3">Fül 3</a></li>
    </ul>
    <ul class="panelek">
      <li id="ful1" class="aktiv">
        <label>i1: <input type="text" name="i1" id="i1" /></label>
        <p>Fülecske 1</p>
      </li>
      <li id="ful2">
        <label>i2: <input type="text" name="i2" id="i2" /></label>
        <p>Fülecske 2</p>
      </li>
      <li id="ful3">
        <label>i3: <input type="text" name="i3" id="i3" /></label>
        <p>Fülecske 3</p>
      </li>
    </ul>
  </form>
  <script type="text/javascript">
    (function (window, document) {
      /**
       * A testvérekről leszedi, a meghatározott elemre pedig rárakja az osztályt.
       *
       * @param {Node} elem
       *   A DOM elem, amire rá kell rakni az osztályt.
       * @param {String} osztaly
       *   Az osztály, amit rá kell rakni.
       */
      function setClass(elem, osztaly) {
        var testverek = elem.parentNode.childNodes,
            testver, i, j, osztalyok;
        // Végigmegyünk a testvéreken
        for (i = testverek.length - 1; i >= 0; i -= 1) {
          testver = testverek[i];
          // Kikeressük az osztályokat
          osztalyok = (testver.className || '').split(' ');
          for (j = osztalyok.length - 1; j >= 0; j -= 1) {
            // Megkeressük a meghatározott osztályt és eltávolítjuk a listából
            if (!osztalyok[j] || osztalyok[j] === osztaly) {
              delete osztalyok[j];
            }
          }
          // Beállítjuk az osztályokat.
          testver.className = osztalyok.join(' ');
        }
        // Az elemhez hozzáadjuk az osztályt.
        elem.className = elem.className ? elem.className + ' ' + osztaly : osztaly;
      }

      /**
       * A fülre kattintás kezelése.
       */
      function onclick() {
        var pos = this.href.lastIndexOf('#'),
            panelnev, panel;
        if (pos !== -1) {
          panelnev = this.href.substring(pos + 1);
          // A fül hash része határozza meg, hogy melyik panelt aktiválja
          panel = document.getElementById(panelnev);
          if (panel) {
            // Megvan a panel, aktiváljuk, ahogy a fület is.
            setClass(panel, 'aktiv');
            setClass(this.parentNode, 'aktiv');
            return false;
          }
        }
        return true;
      }

      /**
       * Inicializáljuk a működést.
       */
      (function setup() {
        var fulek = document.getElementById('fulek'),
            linkek, i;
        if (fulek) {
          linkek = fulek.getElementsByTagName('a');
          for (i = linkek.length - 1; i >= 0; i -= 1) {
            // Beállítjuk minden fülnek az onclick eseménykezelőjét.
            linkek[i].onclick = onclick;
          }
        }
      }());

    }(this, this.document));
  </script>
</body>
</html>
Ennek ráadásul annyi az előnye, hogy a setup függvényen, a HTML hierarchián, és az .aktiv osztályon kívül a JavaScript teljesen független a dokumentumtól.
9

Szerinted ezt: egy "kissé"

H.Z. v2 · 2011. Jún. 29. (Sze), 14.05
Szerinted ezt:
egy "kissé" gányolt megoldás

miért írtam oda? :-)))

Azzal viszont kíváncsivá tettél, hogy a head-ben lévő script lassít... Mitől? Miért? Mikor?
10

Put Scripts at the Bottom

Poetro · 2011. Jún. 29. (Sze), 14.42
A Yahoo jól leírja, mitől lesz gyors a weboldalunk. Összefoglalva, hogy miért kell a szkripteket az oldal aljára tenni:
  • A szkriptek megakadályozzák a párhuzamos letöltést (meg kell várni, hogy a szkript letöltődjön, hogy folytatódhasson az oldal feldolgozása).
  • Mivel a szkriptek tartalmazhatnak document.write hivásokat, módosíthatják a HTML struktúrát.
  • Mivel megáll az oldal feldolgozása, ezáltal az oldalon levő többi szkript, stíluslap, kép stb. addig nem töltődhet le, amíg a szkript töltődik.
  • Ha az oldal fejlécében sok / lassan betöltődő szkript van, akkor a felhasználó semmit sem lát az oldal tartalmából, amíg azok le nem töltődtek.

Ezekre megoldás az, hogy az oldal aljára rakjuk a szkripteket, így a felhasználó már látja a tartalmat, és azonnal interakcióba is léphet az oldallal (például meglátogathat más linkeket, vagy olvashatja a tartalmat), pedig az még nem is töltődött be teljesen. Másik megoldás lehet a defer és async attribútumok használata, amik lehetővé teszik, hogy a szkriptek párhuzamosan töltődjenek be.

Az async attribútum megadásával a kód aszinkron fog lefutni, azaz nem függ a többi szkript betöltődésének állapotától. Ez akkor lehet hasznos, ha a kódunk független a többi, az oldalon elhelyezett kódtól.
A defer megadásával pedig megadhatjuk, hogy a kódunk akkor legyen feldolgozva, és futtatva, amikor az oldal már betöltődött.

Amit fontos megjegyezni, hogy egyik esetben sem szabad document.write hívást elhelyezni a kódban. Ugyanis async esetén megjósolhatatlan, hogy mikor fog lefutni a kód, ezáltal, hogy a HTML dokumentumban hova fog történni az írás. defer esetén pedig az egész dokumentum felülíródik a document.write által megadott tartalommal, mivel amikor a szkript lefut, akkorra a dokumentum már le lesz zárva, és minden további írás felülírja azt.
A defer attribútum valamikor IE 5.5 környékén jelent meg, és a böngészők közül az IE 5.5+, a Fx 3.5+, Chrome és Safari támogatja, az async attribútumot pedig Fx 3.6, Chrome 11+. Amennyiben az aktuális böngészőben nincs meg a támogatás, akkor úgy fog viselkedni, mintha az attribútum nem is lenne ott.
11

Ha nem hagytam ki valamit,

H.Z. v2 · 2011. Jún. 29. (Sze), 14.52
Ha nem hagytam ki valamit, akkor továbbra sem értelek: én csak függvénydefiníciókat írtam a head-be, ha jól emlékszem.
Ez elméletileg nem több, mint bármi egyéb, head-be pakolt elem.
Ezért értetlenkedtem ezen a megjegyzéseden.
12

feldolgozás

Poetro · 2011. Jún. 29. (Sze), 15.04
A függvények definícióit akkor is fel kell dolgoznia a böngészőnek (parse), ami bár ebben az esetben nem jelentős, ugyanakkor azért érdemes kerülni, hogy megakadályozzunk egy rossz berögződést. Például tegyük fel, hogy van egy 100kb méretű függvénytárunk, amit a <head> részbe teszünk. Ekkor a böngészőnek be kell tölteni ezt a 100kb adatot, a JavaScript motornak pedig fel kell dolgoznia, és csak EZUTÁN folytatódik az oldal további részének feldolgozása. A böngészőnek teljesen lényegtelen, milyen kód szerepel a fejlécben, azt fel kell dolgozni, és lefuttatni. Ha csak függvénydefiníciók szerepelnek, az azt jelenti, hogy létrejönnek a megfelelő változók, amik a függvény definíciójára mutatnak.
13

Nem kötekedésképp, de

H.Z. v2 · 2011. Jún. 29. (Sze), 15.13
Nem kötekedésképp, de ez:
<script type="text/javascript" src="myscripts.js"></script>
mennyiben más?
Ilyeneket rendszeresen látok headerekben.
Ebből kiindulva kezdtem én is a definíciókat a head-be pakolni.
(jó, tudom, több millió légy esete :-) )
14

Rosszabb

Poetro · 2011. Jún. 29. (Sze), 15.29
Annyival másabb, hogy ez még rosszabb. És pont azért küzd a Google, a Yahoo, és még sokan mások, hogy ezt elkerüljék a fejlesztők.
15

A gúgli erre nagyon rossz

H.Z. v2 · 2011. Jún. 29. (Sze), 16.55
A gúgli erre nagyon rossz példa. Nézd meg akár a gmail, akár az igoogle forrását! ;-)
De megnézheted a yahoo.com-ot is, hogy mennyire küzdenek ellene... Mondom én, hogy nem a kisujjamból szoptam ezt a scripteket a headerbe stílust. :-)
A yahoo legalább olvasható.

De ha megnézed a weblabor forrását, itt is ugyanaz a helyzet...

Még tovább megyek... nem ismerem ugyan ezt az oldalt, de ők kifejezetten azt írják, hogy a headerben vannak a lehető legjobb helyen a szkriptek, mert biztosan be lesz töltve, mire a szkriptek által feldolgozott adatok betöltődnek:
http://www.mediacollege.com/internet/javascript/placement.html
16

Nem kell nekem hinni

Poetro · 2011. Jún. 29. (Sze), 17.15
Vannak esetek, amikor nem megoldható, de az esetek nagy részében igen. De nyugodtan olvasd el a cikkeket, és nézd meg a vízesés modelleket, amiket a különböző fejlesztői eszközök nyújtanak arra, hogyan töltődik be az oldal. Ráadásul a belinkelt oldal eleve rossz dolgokat tanít, mivel nem rakunk viselkedést a HTML elemekre, csak JavaScripttel. Ha nem törekedsz arra, hogy gyorsan töltődjön be az oldalad, az a te dolgod, de nekem olyan oldalakat kell fejleszteni, ahol napi több millió oldalletöltés van, és ott számít, hogy milyen gyorsan, és hogyan töltődnek be a dolgok.
A weblabor forrása azért ilyen, mert abban a sminkben amit használ, ez a működés volt. Sőt, ez a viselkedés volt elterjedt 10 évvel ezelőtt, de ez nem jelenti azt, hogy ez a helyes megközelítés.
17

Itt nem hitről van szó, csak

H.Z. v2 · 2011. Jún. 29. (Sze), 18.05
Itt nem hitről van szó, csak próbáltam illusztrálni, hogy mennyire "küzdenek" a gúgli és a yahoo + láttam egy értelmesnek tűnő állítást, miszerint a head-be rakott szkript definíciók biztosan rendelkezésre állnak, mire betöltődnek a body elemek, tehát nem kell attól tartani, hogy előbb töltődik be egy hivatkozás, mint az általa hivatkozott szkript.

Hmmm... Bocs, tényleg nem kötekedni akarok, de most végiglapoztam azokat az oldalakat, amiket rendszeresen látogatok. Egy olyat nem találtam, ahol a header mentes lett volna a script tagektől... :-)
Értem amit írsz, egy részét (úgy értem: azt a részét, amit elolvastam) az általad linkelt anyagoknak is, de nem találtam olyan lapot, ami megfelelt volna az általad vázolt elképzelésnek.

Tudnál néhány konkrét oldalt, ahol nincs tele a header legalább js definíciókkal és "include"-okkal?
Már ott tartok (kb. 10 perce írom ezt a hozzászólást :-) ), hogy a webtrends.about.com-on kilistáztattam a top tent és azokat lapoztam át. Egyedül a www.baidu.com-on nem találtam scriptet a headben.

-----
Egyébként én nem fejlesztek semmi, játszok a PHP-vel, nézegetem, hogy tudnék összetákolni egy saját blogféleséget, amit később úgy alakítok, ahogy nekem tetszik.
Számomra a tényleges performancia az utolsó szempontok közt van egyelőre (még ha néha ennek az ellenkezőjét is képzelik egyesek rólam ;-) )
18

script loader

Poetro · 2011. Jún. 29. (Sze), 18.25
Ha például az oldal valamilyen script loadert használ, azt valószínűleg a head-be fogják rakni, hogy amint a loader betöltődött, lehessen indítani a párhuzamos JavaScript betöltődéseket. Vagy például, ha azt akarod, hogy egyes linkekre való kattintás ne működjön amíg be nem töltődött a hozzá kapcsolódó szkript, akkor addig JavaScripttel meg kell akadályozni azokat az eseményeket, majd később visszajátszani. Ha az oldalon külső szolgáltatók kódjait kell futtatni, akkor is meg van kötve az ember keze. Ezek miatt nem fogsz találni a vezető oldalak között olyat, amiben nincs szkript a head-ben, de ez nem jelenti azt, hogy ne kellene arra törekedni, hogy minimális mennyiségű legyen.
19

Na jó, szerintem akkor itt

H.Z. v2 · 2011. Jún. 30. (Cs), 07.02
Na jó, szerintem akkor itt zárjuk le ezt a mellékágat! :-)
Amikor az elején kategorikusan kijelentetted, hogy head-be script-et ne, azt én komolyan vettem és elkezdtem keresgélni, hogy miért ne és (mivel már nem emlékeztem) azt is, hogy honnan vettem eredetileg az ötletet.
Végül eljutottunk oda, hogy végrehajtódó kódot nem teszünk a head-be (ez eddig is egyértelmű volt, max. nem figyelek ilyen "apróságokra" és mégis oda kerül valami), de bizonyos dolgokat nem lehet máshova tenni.
Így OK?
20

egy ilyen oldal

_subi_ · 2011. Jún. 30. (Cs), 23.36
Tudnál néhány konkrét oldalt, ahol nincs tele a header legalább js definíciókkal és "include"-okkal?


Íme egy ilyen oldal.
21

JavaScript

Jazoja · 2011. Júl. 17. (V), 21.47
Na annyival megoldottam, hogy van egy form, fölötte egy táblázat, amik a lépések.
Új lépésre kattintással, egy JS kód bővíti a táblázatot.
A lépések közti váltáskor egy JS kód dinamikusan elmenti és betölti az adatokat a formba.
Elküldés előtt meg összeállít belőle egy nagy anyagot, beleírja egy rejtett mezőbe majd postolja.

Köszi a segítséget mindenkinek.
A következő problémám meg már megtalálható a fórumban...:-)
4

Nem teljesen értem

gabesz666 · 2011. Jún. 29. (Sze), 11.35
Egy olyan többfüles formot szeretnél létrehozni, amivel postokat, illetve page-eket lehet létrehozni, vagy pedig egy olyat, amivel tetszőleges adatokat akarsz bekérni? Az első esetén modult kéne írnod, a második esetben viszont egyszerűen egy template page-t kell legyártanod.
6

post létrehozása több lépésben

Jazoja · 2011. Jún. 29. (Sze), 13.20
Postokat akarok létrehozni.
Mivel a post nagy, és a felhasználók egyszerűek, ezért van szükség egy olyan formára, ahol a lépéseket leírják, képeket csatolják (minden lépéshez), majd a végén az egészből lesz 1 darab post.
A lépések közt valami oldaltörés lesz beszúrva a végén.

WP plugint még nem fejlesztettem, de ha az a legjobb megoldás akkor nekiállok.

Esetleg Drupal7 form+tab kombinációhoz ért valaki?
Mert ott az egyes beviteli mezőknél meg lehet adni korlátlan darabszámot, így tartalom létrehozásakor a felhasználó nyitogatja az új mezőket.
Itt is valami hasonló kéne, csak konkrétan egy nagyobb formon belül lenne egy kisebb formból változó darabszámú.
7

Drupal többlépcsős űrlap

Poetro · 2011. Jún. 29. (Sze), 13.30
A Drupal többlépcsős tartalombeviteli űrlap megvalósítható, bár nem egy egyszerű móka. Viszont létezik hozzá több modul, ami megvalósítja ezt, ugyan csak Drupal 6 alatt:

Személy szerint én egyiket sem próbáltam, úgyhogy nem tudok tapasztalatokról beszélni. Amin én dolgoztam, azok teljesen egyedi fejlesztésű Drupal 7 többlépcsős tartalombeviteli űrlapok, ezért nem tudok hozzá kódot mutatni, de elárulom, nem gyerekjáték.
8

Node Wizard

Jazoja · 2011. Jún. 29. (Sze), 13.41
jól hangzik, de Node Wizardból úgy látom csak 6.x-es verzió van.