Martin_Online: Location sinnvoll von Usern anlegen lassen

Guten Abend,

irgendwie komme ich an einer Stelle nicht wirklich weiter bzw. ich weiß nicht wie ich dieses umsetzten soll. Ein User darf bei mir eine Location anlegen, dazu muss er Grunddaten eine Beschreibung sowie ein Bild angeben.

Grunddaten und Beschreibung habe ich bereits (beides in einer Datei), dieses sieht derzeit so aus (Designtechnisch ist dieses noch nicht 100%)

http://s14.directupload.net/images/140701/worx6dl8.png

Nun fehlt mir noch ein Bild, ich dachte ich füge dazu einen Schritt 2 ein. Denn wenn das Bild zu groß ist, kann dieses vom User beschnitten werden. Dazu geht eine neue Seite auf, das Bild wird angezeigt und mit http://deepliquid.com/content/Jcrop.html auf Größe gebracht.

Wenn ich alles auf eine Seite packe, der User füllt das Formular aus, will dann ein Bild hochladen und es auf Seite zwei gewechselt wird sind seine Eingaben weg, ist sehr unschön. Zwei speichern Button auf einer Seite halte ich auch nicht für wirklich optimal.

Wenn ich jetzt mit Schritt 1 & Schritt 2 arbeite, sollte ich dieses in einer Datei unterbringen oder doch lieber auf zwei separate Dateien  verteilen? Wie kann ich verhindern, dass die zweite Datei (Schritt 2) aufgerufen wird bevor die erste nicht ausgefüllt und gespeichert ist?

Ich bin an diesem Punkt einfach ahn ahnungslos, denke schon den ganzen Tag über dieses Problem nach. Habt Ihr eine Idee?

Eine letzte Idee, wenn ich wirklich mit Schritten arbeiten sollte, wäre es dann vielleicht angebracht meine Beschreibung auch in einen eigenen Schritt zu packen? Das würde dann so ablaufen:

Schritt 1 – Grunddaten
Schritt 2 – Beschreibung
Schritt 3 - Bild

So wäre alles schön getrennt und übersichtlich, das haltet ihr davon?

Sollte bei einer Location später weitere Optionen hinzukommen, könnten diese ohne weiteres in Schritt t2 mit untergebracht werden.

Jetzt kommt mir noch eine weitere Idee (da wäre es dann egal wenn ein User Schritt 3 vor Schritt zwei Aufruft, diese sieht wie folgt aus

Schritt 1 – Name der Location
Schritt 2 – Grunddaten
Schritt 3 – Beschreibung
Schritt 4 – Bild

Schritt 1 muss zuerst gespeichert werden, erst dann sind weitere Punkt anklickbar. Damit hätte ich eine eindeutige Location ID und könnte in den weiteren Schritten nur ein Update des Datensatzes machen. Somit ist der User komplett frei, welcher Schritt er zuerst machen möchte.

  1. hi,

    Wenn ich alles auf eine Seite packe, der User füllt das Formular aus, will dann ein Bild hochladen und es auf Seite zwei gewechselt wird sind seine Eingaben weg, ist sehr unschön. Zwei speichern Button auf einer Seite halte ich auch nicht für wirklich optimal.

    Isses auch nicht. Ich würde das so machen:
    User zieht seine Daten (Texte und Bild) per ajax in den Browser
         kein Reload
    User bearbeitet alle Daten (Texte und Bild) offline im Browser
         kein Reload
    User klickt nur einen Button, so geht alles zusammen (Texte und Bild) zurück zum Server
         kein Reload

    Ich bin an diesem Punkt einfach ahn ahnungslos, denke schon den ganzen Tag über dieses Problem nach. Habt Ihr eine Idee?

    Siehe oben, wäre das was?

    MfG

    1. Hallo,

      Isses auch nicht. Ich würde das so machen:
      User zieht seine Daten (Texte und Bild) per ajax in den Browser
           kein Reload
      User bearbeitet alle Daten (Texte und Bild) offline im Browser
           kein Reload
      User klickt nur einen Button, so geht alles zusammen (Texte und Bild) zurück zum Server
           kein Reload

      Siehe oben, wäre das was?

      das wäre natürlich das Optimale, User füllt das Formular aus, klickt auf Bild hochladen, wählt das Bild von seiner Festplatte, das Bild wird im Hintergrund hochgeladen, nun kann der User einen Ausschnitt wählen und klickt auf speichern.

      Aber da bin ich ehrlich zu mir selber, dieses bekomme ich mit Ajax nicht hin, da ich darin so gut wie keine Erfahrungen habe.

      1. das wäre natürlich das Optimale, User füllt das Formular aus, klickt auf Bild hochladen, wählt das Bild von seiner Festplatte, das Bild wird im Hintergrund hochgeladen, nun kann der User einen Ausschnitt wählen und klickt auf speichern.

        Ach das geht noch schiel vöner, Texte und

        Bildbearbeitung Offline

        Hochgeladen wird dann alles zsammen, Texte mit Grafik :)

        Aber da bin ich ehrlich zu mir selber, dieses bekomme ich mit Ajax nicht hin, da ich darin so gut wie keine Erfahrungen habe.

        Machs einfach, die Erfahrung kommt dann automatisch mit. Und wenn Du aus Fehlern lernen kannst, darfste auch welche machen ;)

        1. Hello,

          Ach das geht noch schiel vöner, Texte und

          Bildbearbeitung Offline

          Hochgeladen wird dann alles zsammen, Texte mit Grafik :)

          Und was ist dann, wenn noch was auzusetzen ist? Kann man das auch wieder alles in das Offline-Modul zurückschicken zur Korrektur? Sonst wird es den user sicherlich verärgern.

          Liebe Grüße aus dem schönen Oberharz

          Tom vom Berg

          --
           ☻_
          /▌
          / \ Nur selber lernen macht schlau
          Die ultimative Seite für Selbermacher
          1. Moin,

            Und was ist dann, wenn noch was auzusetzen ist? Kann man das auch wieder alles in das Offline-Modul zurückschicken zur Korrektur?

            Siehe mein erster Post: User meldet sich an und zieht eine Replik mit seinen Daten, Texte und Bild. Hierbei ist die Ajax-Response ein ArrayBuffer, da ist alles drin.

            Zur Bildbearbeitung brauchst Du von hier bspw. nur das Schneidwerkzeug. Über das canvas-Element kriegst Du die Binary vom Bildausschnitt, die wird in einem Vorschau-Element gezeigt, damit der User auch sieht, was er da macht. Texte: Die stehen in den Eingabefeldern, wenn die Replik gezogen wurde.

            Ich baue heute mal eine kleine Demo, vorerst ohne JCrop; Daten serverseitig in der Session.

            --
            Bald ist es wieder soweit: Wir brauchen einen neuen Kalender
    2. hi,

      Wenn ich alles auf eine Seite packe, der User füllt das Formular aus, will dann ein Bild hochladen und es auf Seite zwei gewechselt wird sind seine Eingaben weg, ist sehr unschön. Zwei speichern Button auf einer Seite halte ich auch nicht für wirklich optimal.

      Isses auch nicht. Ich würde das so machen:
      User zieht seine Daten (Texte und Bild) per ajax in den Browser
           kein Reload
      User bearbeitet alle Daten (Texte und Bild) offline im Browser
           kein Reload
      User klickt nur einen Button, so geht alles zusammen (Texte und Bild) zurück zum Server
           kein Reload

      Danke für das Sternchen. Als kleine Gegenleistung:
      Hier ist meine Demo

      Upload: Privatsphäre ist sichergestekllt, die Daten (Text und Bild) liegen in der Session, da sieht jeder Benutzer nur Seins.

      Viel Spaß damit ;)

      1. Danke für das Sternchen. Als kleine Gegenleistung:
        Hier ist meine Demo

        WOW wie machst du es, dass die Bilder immer gut aussehen? Egal ob ich ein Quer bzw. Hochkanntbild nehme. Jetzt müsste man noch ein Schritt weiter gehen und zwar dass man dem User die Möglichkeit gibt, ein Bildausschnitt zu wählen, die Breite passt aber die Höhe, meine Bilder haben alle ein Format von 310px × 310px.

        1. Danke für das Sternchen. Als kleine Gegenleistung:
          Hier ist meine Demo

          WOW wie machst du es, dass die Bilder immer gut aussehen?

          In der Demo wird diesbezüglich gar nichts gemacht. Du könntest mit

          imgobj.naturalWidth  
          imgobj.naturalHeight
          

          das eingefügte Image abfragen und entsprechende Attribute ins DOM setzen.

          JPEG, PNG usw. ergeben am Dateianfang eine Magic-Number, so kannst Du auch das abfragen über den ArrayBuffer und ein entsprechendes DataView.

          Es reichen auch 2 Bytes:
            if(number_1 == 255 && number_2 == 216){ type = 'jpeg' }
            else if(number_1 == 137 && number_2 == 80){ type = 'png' }

          Egal ob ich ein Quer bzw. Hochkanntbild nehme. Jetzt müsste man noch ein Schritt weiter gehen und zwar dass man dem User die Möglichkeit gibt, ein Bildausschnitt zu wählen, die Breite passt aber die Höhe, meine Bilder haben alle ein Format von 310px × 310px.

          JCrop und canvas

          Aber das ist auch für mich noch ein Stück Arbeit. Machbar ist es.

          1. hi,

            Aber das ist auch für mich noch ein Stück Arbeit. Machbar ist es.

            Es lohnt sich. Weil: Der Bildschnitt kann komplett im Browser erledigt werden. Entgegen den von mir bisher gefundenen Tutorials zu JCrop, werden

            hier nun

            die Daten nicht erst zum Server gesendet, sondern gleich im Browser verarbeitet, so dass eine neue Grafikdatei entsteht. Zur Demo: Speichern unter…

            Schönes Wochenende

            1. Es lohnt sich. Weil: Der Bildschnitt kann komplett im Browser erledigt werden. Entgegen den von mir bisher gefundenen Tutorials zu JCrop, werden

              hier nun

              WOW kann ich dazu nur sagen :o Hammer geil! Wäre froh, wenn ich das auch irgendwann mal hinbekomme. Wie lange bist du an dem Script gesessen?

              1. Es lohnt sich. Weil: Der Bildschnitt kann komplett im Browser erledigt werden. Entgegen den von mir bisher gefundenen Tutorials zu JCrop, werden

                hier nun

                WOW kann ich dazu nur sagen :o Hammer geil! Wäre froh, wenn ich das auch irgendwann mal hinbekomme. Wie lange bist du an dem Script gesessen?

                Schön, dass Du fragst :)

                Also: Gestern nachmittag… effektiv bin ich jedoch schon länger an solchen Sachen dran. Der echte Hammer ist das canvas-Element und JCrop (das hattest Du ja hier verlinkt) nimmt Dir Einiges an Aufwand ab. Wenn Du in den Quellcode schaust, ist das gar nicht soviel wonach es aussieht. Interessant wirds, wenn Du ein Image mit width > 640px einfügst, das wird zwar verkleinert dargestellt, aber der Ausschnitt wird auf die Originalgröße umgerechnet; so wirkt das wie eine Lupe.

                Programmieren ist wie Schwimmen lernen: Üben, Üben und Üben. Basics sind sowas wie das Luftholen, das muss in Fleisch und Blut übergehen, erst dann kannst Du Dich auf andere Wesentlichere Dinge konzentrieren, z.B. wie Du beim Kraulen einen optimalen Schub erzeugst, das ist beim Programmieren ganz ähnlich. Stets jedoch ist am Anfang die Idee, so brauchst Du auch für gezielte Übungen ersteinmal eine Idee… Das oben verlinkte Demo-Teil insofern zu erweiteren, als dass damit ein Benutzer Bild + Texte hochladen kann, wobei er beim Bild gleich einen Ausschnitt festlegen kann, ist dann kein großartiger Akt mehr.

                Mein heutiges Ziel: Bild in den Browser ziehen und RGB nach CMYK umrechnen ohne Upload, das geht alles Lokal mit den neuen Features, die so neu nun auch wieder nicht sind, dafür aber sehr umfangreich <- hier läuft die Zeit weg.

                Viele Grüße :)

  2. Hello,

    Schritt 1 – Name der Location
    Schritt 2 – Grunddaten
    Schritt 3 – Beschreibung
    Schritt 4 – Bild

    Schritt 5 - Ansicht komplett und "absenden" durch den User
                  Denk an den [X] für die Anerkennung der AGB und übertragunng der
                  Rechte an Bild und Text

    Schritt 6 - Freigabe durch den Redakteur

    Schritt 1 muss zuerst gespeichert werden, erst dann sind weitere Punkt anklickbar. Damit hätte ich eine eindeutige Location ID und könnte in den weiteren Schritten nur ein Update des Datensatzes machen. Somit ist der User komplett frei, welcher Schritt er zuerst machen möchte.

    Klar, Du willst doch, dass alles richtig ausgefüllt wird.
    Da kann man dann aus jedem Teilschritt ein Affenformular machen.
    Man kann solange alles in der Session speichern, auch das Bild.

    Und beim Bild darauf achten, dass es wirklich nur ein Bild und unschädlich ist, also keine verkappte Scriptdatei oder .htaccess oder sonstwas Angriffsl(u|i)stiges.

    Liebe Grüße aus dem schönen Oberharz

    Tom vom Berg

    --
     ☻_
    /▌
    / \ Nur selber lernen macht schlau
    Die ultimative Seite für Selbermacher
    1. Hallo Tom,

      Schritt 5 - Ansicht komplett und "absenden" durch den User
                    Denk an den [X] für die Anerkennung der AGB und übertragunng der
                    Rechte an Bild und Text

      Punkt 5 muss ein User bereits in den AGB bestätigen, die beim registrieren angeklickt und zugestimmt werden müssen. Beim Bildupload muss der User ebenfalls eine Checkbox anklicken um ein paar Rechtliche Sachen zu klären, erst wenn dieser Haken gesetzt ist, erscheint der Button.

      Schritt 6 - Freigabe durch den Redakteur

      Punkt 6 habe ich hier nicht aufgelistet, da dieser nicht wirklich den User etwas angeht, dieses passiert im Admin Bereich bzw. derzeit noch in der Datenbank (Händisch)

      Und beim Bild darauf achten, dass es wirklich nur ein Bild und unschädlich ist, also keine verkappte Scriptdatei oder .htaccess oder sonstwas Angriffsl(u|i)stiges.

      Das heißt wenn ich dich richtig verstanden habe, würdest du mit einzelnen Schritten arbeiten?

      1. Hello,

        Das heißt wenn ich dich richtig verstanden habe, würdest du mit einzelnen Schritten arbeiten?

        Ja, würde ich.

        Und ich würde dem User auch vorher klipp und klar machen, dass er da mehrere "Seiten" richtig ausfüllen muss, bevor er dann alles nochmal gezeigt bekommt (das meinte ich mit Schritt 5), um es tatsächlich abzuschicken. Das würde ich auf jeden Fall ganz fett hervorheben, weil es die Angst nimmt, etwas falsch machen zu können.

        Ob man nun die Seiten voneinander abhängig macht (Seite n+1 erst ausfüllbar macht, wenn n fertig ist), oder jede für sich ausfüllbar/korrigierbar macht, ist Geschmackssache. Der User muss auf jeden Fall hin und her blättern können. Und erst, wenn alle fertig sind, kann er den Vorgang abschließen.

        Liebe Grüße aus dem schönen Oberharz

        Tom vom Berg

        --
         ☻_
        /▌
        / \ Nur selber lernen macht schlau
        Die ultimative Seite für Selbermacher