Vorlage, damit das Netzwerk funktioniert. Inhalt des Daten- und Struktursynthese. Für Entwickler ist dies unsere coolste Supermacht - erhalten Sie einige Daten und lassen Sie sie dann für uns funktionieren und machen sie in welcher Form, die wir benötigen. Eine Reihe von Objekten kann in eine Tabelle, eine Liste von Karten, ein Diagramm oder alles, was wir für den Benutzer für am nützlichsten halten, verwandelt werden. Unabhängig davon, ob es sich bei den Daten um einen Blog-Beitrag in unserer eigenen Markdown-Datei oder im neuesten globalen Wechselkurs handelt, liegen die Markup und die ultimative Benutzererfahrung bei uns Front-End-Entwicklern.
PHP ist eine leistungsstarke Sprache für Vorlagen, die viele Möglichkeiten bietet, Daten mit Tags zusammenzuführen. Schauen wir uns ein Beispiel für die Verwendung von Daten zum Erstellen von HTML -Formularen an.
Willst du jetzt anfangen? Springen Sie zum Abschnitt zur Implementierung.
In PHP können wir die Variable mit Doppelzitaten in einen String -Literal einbeziehen. Wenn wir also eine Variable $name = 'world' haben, können wir echo "Hello, {$name}" schreiben, das die erwartete "Hallo, Welt" druckt. Für komplexere Vorlagen können wir immer Strings verkettet, zum Beispiel: echo "Hello, " . $name . "." .
Für alte Programmierer gibt es auch printf("Hello, %s", $name) . Für Multi-Line-Saiten kann Heredoc verwendet werden (ähnlich wie Hello, = $name ?> ). All diese Optionen sind großartig, aber die Dinge können unordentlich werden, wenn eine Menge Inline -Logik benötigt wird. Wenn wir zusammengesetzte HTML -Zeichenfolgen wie Formen oder Navigation erstellen müssen, kann die Komplexität unendlich sein, da HTML -Elemente miteinander verschachtelt werden können.
Bevor wir weiter tun, was wir tun wollen, lohnt es sich, darüber nachzudenken, was wir nicht tun wollen . Betrachten Sie den Auszug aus Zeile 170-270 von WordPress Core Code class-walker-nav-menu.php :
Php // Klasse-Walker-nav-Menu.php // ... $ output. = $ eingereicht. ''
Um die Navigation zu erstellen, verwenden wir in dieser Funktion eine Variable $output , die eine sehr lange Zeichenfolge ist, und wir fügen ihnen immer wieder Inhalte hinzu. Diese Art von Code hat eine sehr spezifische und begrenzte Betriebsreihenfolge. Wenn wir wollen<a></a> Fügen Sie eine Eigenschaft hinzu, auf die wir zugreifen müssen $attributes bevor sie ausgeführt wird. Wenn wir wollen<a></a> Optional nisten nisten<span></span> Oder a<img alt="Erstellen eines Formulars in PHP mit Domdocument" > Wir müssen einen brandneuen Codeblock schreiben und den mittleren Teil von Zeile 7 durch etwa 4-10 neue Codezeilen ersetzen, je nachdem, was wir hinzufügen möchten. Stellen Sie sich nun vor, Sie müssen optional hinzufügen<span></span> , dann optional hinzufügen<img alt="Erstellen eines Formulars in PHP mit Domdocument" > oder in<span></span> Intern oder später hinzufügen. Dies selbst ist drei wenn Anweisungen, sodass der Code schwieriger zu lesen ist. Bei der Verkettung solcher Strings ist es leicht, mit String -Pasta zu enden, was Spaß macht, aber schmerzhaft zu pflegen.
Das Wesentliche des Problems ist, dass wir, wenn wir versuchen, HTML -Elemente zu schließen, nicht über Strings nachdenken . Der Browser konsumiert nur Zeichenfolgen und PHP -Ausgänge. Unser mentales Modell ist jedoch eher wie ein DOM-Elemente sind in einer baumartigen Struktur angeordnet, und jeder Knoten hat viele potenzielle Eigenschaften, Eigenschaften und Kinderknoten.
Wäre es nicht großartig, wenn es eine strukturierte, sehr ausdrucksstarke Möglichkeit gibt, einen Baum zu bauen?
eingeben……
PHP 5 fügt DOM-Module zu seiner nicht streng typisierten Aufstellung hinzu. Der Haupteintrittspunkt ist die Domdocument -Klasse, die dem JavaScript -Dom der Web -API ähnlich sein soll. Wenn Sie jemals document.createElement verwendet haben $('
$ dom = new Domdocument ();
Jetzt können wir ihm ein Domelement hinzufügen:
$ p = $ dom-> createLement ('p');Die Zeichenfolge 'P' repräsentiert den gewünschten Elementtyp, sodass andere gültige Zeichenfolgen 'Div', 'IMG' usw. sein können.
Sobald wir ein Element haben, können wir seine Eigenschaften festlegen:
$ p-> setAttribute ('Klasse', 'Headline');Wir können Kinderknoten dazu hinzufügen:
$ span = $ dom-> createLement ('span', 'Dies ist eine Überschrift'); // Der zweite Parameter füllt den Textvorgang des Elements
$ p-> appendChild ($ span);Holen Sie sich schließlich die komplette HTML -Zeichenfolge gleichzeitig:
$ dom-> appendChild ($ p); $ htmlstring = $ dom-> SaveHtml (); echo $ htmlstring;
Beachten Sie, dass mit diesem Codierungsstil unser Code nach unserem mentalen Modell organisiert werden kann - das Dokument enthält Elemente; Elemente können eine beliebige Anzahl von Attributen haben; Elemente sind miteinander verschachtelt, ohne dass Informationen über einander sind. Der Teil "HTML ist nur ein String" erscheint am Ende, sobald unsere Struktur vorhanden ist. "Dokument" unterscheidet sich geringfügig vom tatsächlichen DOM hier, da es nicht das gesamte Dokument darstellen muss, sondern nur ein HTML -Block. Wenn Sie zwei ähnliche Elemente erstellen müssen, können Sie eine HTML -Zeichenfolge mit saveHTML() speichern, das DOM -Dokument "Dokument" weiter ändern und dann eine neue HTML -Zeichenfolge speichern, indem Sie saveHTML() erneut aufrufen.
Angenommen, wir müssen ein Formular auf dem Server verwenden, indem wir Daten vom CRM -Anbieter und unseren eigenen Tags verwenden. Die API -Antwort von CRM sieht so aus:
{
"Submit_Button_Label": "Jetzt einreichen!",
"Felder": [
{
"ID": "Erstname",
"Typ": "Text",
"Label": "Vorname",
"Erforderlich": wahr,
"Validation_Message": "Vorname ist erforderlich.",,
"max_length": 30
},
{
"ID": "Kategorie",
"Typ": "multiple_choice",
"Etikett": "Wählen Sie alle Kategorien, die angewendet werden",
"Erforderlich": Falsch,
"field_metadata": {
"multi_select": wahr,
"Werte": [
{"Wert": "Reisen", "Label": "Travel"},
{"Wert": "Marketing", "Label": "Marketing"}
]
}
}
]
}In diesem Beispiel wird die genaue Datenstruktur eines bestimmten CRM nicht verwendet, aber es ist ziemlich repräsentativ.
Und nehmen wir an, wir wollen, dass unsere Tags so aussehen:
<label>
<input type="text" placeholder=" " id="first-name" required maxlength="30">
Vorname
<em>Vorname ist erforderlich.</em>
</label>
<label>
</label>
<div>
<input type="checkbox" value="travel" id="category-travel" name="category">
<label for="category-travel">Reisen</label>
</div>
<div>
<input type="checkbox" value="marketing" id="category-marketing" name="category">
<label for="category-marketing">Marketing</label>
</div>
Wählen Sie alle Kategorien aus, die gelten
Was ist der Platzhalter ""? Dies ist ein kleiner Trick, mit dem wir nachverfolgen können, ob das Feld in CSS ohne JavaScript leer ist. Solange die Eingabe leer ist, übereinstimmt input:placeholder-shown , aber der Benutzer sieht keinen sichtbaren Platzhaltertext. Genau das können wir tun, wenn wir das Markup steuern!
Nachdem wir wissen, was wir erreichen wollen, ist hier der Spielplan:
Lassen Sie uns unseren Prozess aufbauen und einige technische Probleme lösen:
PHP -Funktion RenderForm ($ Endpoint) {
// Daten aus der API abrufen und in ein PHP -Objekt $ formResult = file_get_contents ($ endpoint) konvertieren;
$ formContent = json_decode ($ formResult);
$ formFields = $ FormContent-> Fields;
// mit dem Aufbau des DOM beginnen
$ dom = new Domdocument ();
$ form = $ dom-> createLement ('Form');
// über Felder iterieren und jedes Feld für Each ($ formFields als $ field) {bauen {
// TODO: Führen Sie einige Operationen auf Felddaten aus}
// HTML-Ausgabe $ DOM-> appendChild ($ Form) erhalten;
$ htmlstring = $ dom-> SaveHtml ();
echo $ htmlstring;
} Bisher haben wir die Daten abgerufen und analysiert, unser Domdokument initialisiert und ihre Ausgabe wiedergegeben. Was wollen wir mit jedem Feld machen? Lassen Sie uns zunächst das Containerelement in unserem Beispiel erstellen, es sollte sein<label></label> und Tags, die allen Feldtypen gemeinsam sind:
<php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ label = null zurück;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
if ($ field-> label) {
$ label = $ dom-> createLement ('span', $ field-> label);
$ label-> setAttribute ('Klasse', 'label');
}
// Fügen Sie Tag zu `` <label>`</label> hinzu<label>
if ($ label) $ element-> appendChild ($ label);
}</label></span></label><p> Da wir uns in einer Schleife befinden und PHP in der Schleife keine Geltungsvariablen betreiben, setzen wir das <code>$label</code> -Element für jede Iteration zurück. Wenn das Feld dann ein Etikett hat, erstellen wir das Element. Schließlich fügen wir es dem Containerelement hinzu.</p><p> Bitte beachten Sie, dass wir die <code>setAttribute</code> -Methode verwenden, um die Klasse festzulegen. Im Gegensatz zur Web -API gibt es leider keine besondere Behandlung für Klassenlisten. Sie sind nur ein weiteres Attribut. Wenn wir eine sehr komplexe Klassenlogik haben, können wir ein Array erstellen und IT: <code>$label->setAttribute('class', implode($labelClassList))</code> .</p><h3> Einzeleingang</h3><p> Da wir wissen, dass die API nur bestimmte Feldtypen zurückgibt, können wir die Typen wechseln und für jeden Typ einen bestimmten Code schreiben:</p><pre class="brush:php;toolbar:false"> <php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Eingabeelement-Switch ($ field-> type) {
Fall 'Text':
Fall 'E -Mail':
Fall "Telefon":
$ input = $ dom-> createLement ('Eingabe');
$ input-> setAttribute ('Platzhalter', '');
if ($ field-> type === 'E-Mail') $ input-> setAttribute ('Typ', 'E-Mail');
if ($ field-> type === 'telefon') $ input-> setAttribute ('type', 'tel');
brechen;
}
}</span></label><p> Lassen Sie uns nun mit Textbereichen, einzelnen Kontrollkästchen und versteckten Feldern umgehen:</p><pre class="brush:php;toolbar:false"> <php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Eingabeelement-Switch ($ field-> type) {
// ...
Fall 'text_area':
$ input = $ dom-> createLement ('textarea');
$ input-> setAttribute ('Platzhalter', '');
if ($ rows = $ field-> field_metadata-> Zeilen) $ input-> setAttribute ('Zeilen', $ Zeilen);
brechen;
Fall 'Kontrollkästchen':
$ element-> setAttribute ('Klasse', 'Feld Single-Checkbox');
$ input = $ dom-> createLement ('Eingabe');
$ input-> setAttribute ('Typ', 'CheckBox');
if ($ field-> field_metadata-> anfangs_checked === true) $ input-> setAttribute ('Checked', 'Checked');
brechen;
Fall 'versteckt':
$ input = $ dom-> createLement ('Eingabe');
$ input-> setAttribute ('type', 'versteckt');
$ input-> setAttribute ('value', $ field-> field_metadata-> Wert);
$ element-> setAttribute ('versteckt', 'versteckt');
$ element-> setAttribute ('style', 'display: keine;');
$ label-> textContent = '';
brechen;
}
}</span></label><p> Beachten Sie einige neue Aktionen, die wir mit Kontrollkästchen und verborgenen Situationen durchgeführt haben? Wir haben nicht nur geschaffen<code><input></code> Element; Wir ändern immer noch <em>den Behälter</em><code><label></label></code> Element! Für ein einziges Kontrollkästchen -Feld möchten wir die Klasse des Containers so ändern, dass wir die Kontrollkästchen und Beschriftungen horizontal ausrichten können.<code><label></label></code> Der Behälter sollte ebenfalls vollständig versteckt sein.</p><p> Wenn wir nun die Zeichenfolge nur verbinden, kann sie an diesem Punkt nicht geändert werden. Wir müssen eine Reihe von Angaben zu Elementtypen und deren Metadaten oben im Block hinzufügen. Oder noch schlimmer, wir beginnen früher zu wechseln und viel öffentlicher Code zwischen jeder Zweigstelle zu kopieren.</p><p> Und das ist der wahre Vorteil der Verwendung eines Bauunternehmers wie Domdocument - alles ist noch bearbeitet und alles ist noch strukturiert, bis wir auf <code>saveHTML()</code> klicken.</p><h3> Verschachtelte Schleifenelemente</h3><p> Lassen Sie uns hinzufügen<code><select></select></code> Die Logik des Elements:</p><pre class="brush:php;toolbar:false"> <php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Eingabeelement-Switch ($ field-> type) {
// ...
Fall 'Select':
$ element-> setAttribute ('Klasse', 'Feldauswahl');
$ input = $ dom-> createLement ('select');
$ input-> setAttribute ('Erforderlich', 'Erforderlich');
if ($ field-> field_metadata-> multi_select === true)
$ input-> setAttribute ('multiple', 'multiple');
$ options = [];
// Verfolgen Sie, ob es eine vorgewählte Option gibt $ optionSelected = false;
foreach ($ field-> field_metadata-> Werte als $ value) {
$ option = $ dom-> createLement ('option', htmlspecialChars ($ value-> label));
// Wenn es keinen Wert gibt, überspringen Sie, wenn (! $ Value-> Wert) fortgesetzt werden;
// Vorgewählte Optionen festlegen if ($ value-> ausgewählt === true) {
$ option-> setAttribute ('ausgewählt', 'ausgewählt');
$ optionSelected = true;
}
$ option-> setAttribute ('Wert', $ value-> value);
$ options [] = $ option;
}
// Wenn es keine vorgewählte Option gibt, erstellen
$ leeroption = $ dom-> createLement ('Option');
// Optionen zum Ausblenden, Deaktivieren und Auswählen von foreach (['versteckt', 'deaktiviert', 'ausgewählt'] als $ Attribut) festlegen.
$ leeroption-> setAttribute ($ Attribut, $ attribut);
$ input-> appendChild ($ leeroption);
}
// Optionen in das Array zu ` <select>`</select> hinzufügen<select>
foreach ($ option as $ option) {
$ input-> appendChild ($ option);
}
brechen;
}
}</select></span></label><p> Ok, hier gibt es viel zu tun, aber die zugrunde liegende Logik ist die gleiche. Externe Einstellungen<code><label></label></code> Danach erstellen wir eine<code><option></option></code> Array, fügen Sie es an.</p><p> Wir haben auch einige hier gemacht<code><select></select></code> Spezieller Trick: Wenn es keine Option vor der Auswahl gibt, werden wir eine bereits ausgewählte Option für leere Platzhalter hinzufügen, der Benutzer kann sie jedoch nicht auswählen. Ziel ist es, CSS zu verwenden, um unsere zu übertragen<code><label></label></code> Als "Platzhalter" kann diese Technologie in einer Vielzahl von Designs verwendet werden. Indem wir es an <code>$input</code> anhängen, bevor Sie andere Optionen anhängen, stellen wir sicher, dass dies die erste Option im Tag ist.</p><p> Lassen Sie uns jetzt damit umgehen<code><fieldset></fieldset></code> Optionsknöpfe und Kontrollkästchen in:</p><pre class="brush:php;toolbar:false"> <php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Eingabeelement-Switch ($ field-> type) {
// ...
Fall 'multiple_choice':
$ choicetype = $ field-> field_metadata-> multi_select === true? 'Kontrollkästchen': 'Radio';
$ element-> setAttribute ('class', "field {$ choicetype} -group");
$ input = $ dom-> createLement ('fieldset');
// Erstellen Sie eine Auswahl `` für jede Option im Felderset</span></label>
foreach ($ field-> field_metadata-> Werte als $ ChoiceValue) {
$ ChoiceField = $ dom-> createLement ('div');
$ ChoiceField-> setAttribute ('Klasse', 'Choice');
// Verwenden Sie die Feld -ID, um ID zu wählen, um eine eindeutige ID festzulegen
$ choiceId = "{$ field-> id}-{$ choiceValue-> value}";
// bauen "<input> `Element $ choice = $ dom-> createLement ('Input');
$ choice-> setAttribute ('type', $ choicetype);
$ Choice-> setAttribute ('value', $ ChoiceValue-> Wert);
$ choice-> setAttribute ('id', $ choiceId);
$ choice-> setAttribute ('name', $ field-> id);
$ ChoiceField-> appendChild ($ Choice);
// bauen ` <label>` `element $ choicelabel = $ dom-> createLement ('label', $ choiceValue-> label);
$ choicelabel-> setAttribute ('for', $ choiceId);
$ ChoiceField-> appendChild ($ choicelabel);
$ input-> appendChild ($ ChoiceField);
}
brechen;
}
}</label><p> Daher bestimmen wir zuerst, ob das Feldsatz ein Kontrollkästchen oder ein Optionsfeld sein sollte. Dann setzen wir die Containerklasse entsprechend und erstellen Sie<code><fieldset></fieldset></code> . Danach iterieren wir die verfügbaren Optionen und erstellen eine für jede Option<code><div> , was einen enthält<code><input></code> Und eins<code><label></label></code> . Beachten Sie, dass wir die Containerklasse in Zeile 21 unter Verwendung einer regelmäßigen PHP -String -Interpolation einstellen und für jede Option eine eindeutige ID in Zeile 30 erstellen.<h3> Fragment</h3>
<p> Der letzte Typ, den wir hinzufügen müssen, ist etwas komplexer als es scheint. Viele Formulare enthalten Beschreibungsfelder, die keine Eingänge sind, sondern nur einige HTML, die wir zwischen den anderen Feldern drucken müssen.</p>
<p> Wir müssen eine andere Domdocument -Methode <code>createDocumentFragment()</code> verwenden. Auf diese Weise können wir beliebige HTML hinzufügen, ohne die DOM -Struktur zu verwenden:</p>
<pre class="brush:php;toolbar:false"> <php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Eingabeelement-Switch ($ field-> type) {
// ...
Fall 'Anweisung':
$ element-> setAttribute ('Klasse', 'Feldtext');
$ fragment = $ dom-> createcumentFragment ();
$ fragment-> appendxml ($ field-> text);
$ input = $ dom-> createLement ('p');
$ input-> appendChild ($ fragment);
brechen;
}
}</span></label><p> Zu diesem Zeitpunkt fragen Sie sich vielleicht, wie wir ein Objekt mit dem Namen <code>$input</code> erhalten, das tatsächlich eine Statik darstellt<code><p> Element. Ziel ist es, für jede Iteration der Feldschleife einen gemeinsamen Variablennamen zu verwenden. Am Ende können wir ihn also immer mit <code>$element->appendChild($input)</code> hinzufügen, unabhängig vom tatsächlichen Feldtyp. Also, ja, es ist schwierig, Dinge zu benennen.</p>
<h3> verifizieren</h3>
<p> Die von uns verwendete API bietet eine separate Überprüfungsnachricht für jedes erforderliche Feld. Wenn ein Festschreibungsfehler auftritt, können wir den Fehler mit dem Feld anstellen, anstatt eine gemeinsame "oops, Ihre falsche" Nachricht unten anzuzeigen.</p>
<p> Fügen wir den Validierungstext zu jedem Element hinzu:</p>
<pre class="brush:php;toolbar:false"> <php ... felder iterieren und jedes feld f each formfields als field>Container bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
$ validierung = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Wenn eine Verifizierungsnachricht festgelegt ist, fügen Sie `` <em>`</em> hinzu<em>
if (isset ($ field-> validation_message)) {
$ validation = $ dom-> createLement ('em');
$ fragment = $ dom-> createcumentFragment ();
$ fragment-> appendxml ($ field-> validation_message);
$ validation-> appendChild ($ fragment);
$ validation-> setAttribute ('Klasse', 'Validierungsmessage');
$ validation-> setAttribute ('versteckt', 'versteckt'); // Zunächst versteckt, wenn es einen Fehler in dem Feld gibt, wird es mit JavaScript} unverbindlich sein
// Eingabeelement-Switch ($ field-> type) {
// ...
}
}</em></span></label><p> Das ist alles! Sie müssen nicht mit der Logik des Feldtyps umgehen - nur bedingt ein Element für jedes Feld erstellen.</p><h3> Integrieren Sie alle Inhalte</h3><p> Was passiert also, nachdem wir alle Feldelemente gebaut haben? Wir müssen den DOM -Baum, den wir bauen, die Objekte <code>$input</code> , <code>$label</code> und <code>$validation</code> hinzufügen. Wir können diese Gelegenheit auch nutzen, um öffentliche Immobilien hinzuzufügen, wie <code>required</code> . Wir werden dann die Schaltfläche Senden hinzufügen, die von den Feldern in dieser API getrennt ist.</p><pre class="brush:php;toolbar:false"> PHP -Funktion RenderForm ($ Endpoint) {
// Daten von API abrufen und in PHP -Objekt umwandeln // ...
// mit dem Aufbau des DOM beginnen
$ dom = new Domdocument ();
$ form = $ dom-> createLement ('Form');
// über Felder iterieren und jedes Feld für Each ($ formFields als $ field) {bauen {
// <label>Container</label> bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
// Setzen Sie den Eingangswert $ input = null zurück;
$ label = null;
$ validierung = null;
// Wenn ein Tag eingestellt ist, fügen Sie `` <span>`</span> hinzu<span>
// ...
// Wenn eine Verifizierungsnachricht festgelegt ist, fügen Sie `` <em>`</em> hinzu<em>
// ...
// Eingabeelement-Switch ($ field-> type) {
// ...
}
// Eingabeelement hinzufügen, wenn ($ input) {
$ input-> setAttribute ('id', $ field-> id);
if ($ field-> erforderlich)
$ input-> setAttribute ('Erforderlich', 'Erforderlich');
if (isset ($ field-> max_length))
$ input-> setAttribute ('maxLength', $ field-> max_length);
$ element-> appendChild ($ input);
if ($ label)
$ element-> appendChild ($ label);
if ($ validierung)
$ element-> appendChild ($ validierung);
$ form-> appendChild ($ element);
}
}
// Erstellen Sie die Schaltfläche Senden $ $ sublbuttonLabel = $ formContent-> submit_button_label;
$ subleButtonfield = $ dom-> createLement ('div');
$ subleTbuttonfield-> setAttribute ('Klasse', 'Feld Subjekt');
$ subjektbutton = $ dom-> createLement ('button', $ sublbuttonLabel);
$ sublbuttonfield-> appendChild ($ subementButton);
$ form-> appendChild ($ subjektbuttonfield);
// HTML-Ausgabe $ DOM-> appendChild ($ Form) erhalten;
$ htmlstring = $ dom-> SaveHtml ();
echo $ htmlstring;
}</em></span></label><p> Warum prüfen wir, ob <code>$input</code> wahr ist? Da wir es an der Spitze der Schleife auf Null zurücksetzen und nur dann erstellen, wenn der Typ mit dem von uns erwarteten Switch -Fall übereinstimmt, stellt dies sicher, dass wir nicht versehentlich unerwartete Elemente enthalten, die unser Code nicht richtig verarbeiten kann.</p><p> Schauen Sie, ein benutzerdefiniertes HTML -Formular!</p><h3> Zusätzlicher Inhalt: Zeilen und Spalten</h3><p> Wie Sie wissen, ermöglichen es bei vielen Formern den Autoren, Zeilen und Spalten für Felder festzulegen. Beispielsweise kann eine Zeile sowohl erste als auch Nachnamenfelder enthalten, jeweils in einer separaten Spalte von 50% Breite. Sie könnten also fragen, wie wir das erreichen können? Natürlich veranschaulichen wir die Schleifenfreundlichkeit von Domdocument, indem wir Beispiele geben!</p><p> Unsere API -Antwort enthält Grid -Daten, wie unten gezeigt:</p><pre class="brush:php;toolbar:false"> {
"Submit_Button_Label": "Jetzt einreichen!",
"Felder": [
{
"ID": "Erstname",
"Typ": "Text",
"Label": "Vorname",
"Erforderlich": wahr,
"Validation_Message": "Vorname ist erforderlich.",,
"max_length": 30,,
"Reihe": 1,,
"Spalte": 1
},
{
"ID": "Kategorie",
"Typ": "multiple_choice",
"Etikett": "Wählen Sie alle Kategorien, die angewendet werden",
"Erforderlich": Falsch,
"field_metadata": {
"multi_select": wahr,
"Werte": [
{"Wert": "Reisen", "Label": "Travel"},
{"Wert": "Marketing", "Label": "Marketing"}
]
},
"Reihe": 2,,
"Spalte": 1
}
]
} Wir gehen davon aus, dass das Hinzufügen data-column ausreicht, um die Breite festzulegen, aber jede Zeile erfordert ein eigenes Element (d. H. Ohne CSS-Gitter).
Bevor wir tiefer graben, sollten wir uns überlegen, was wir brauchen, um Zeilen hinzuzufügen. Die grundlegende Logik lautet wie folgt:
Was sollen wir nun tun, wenn wir Strings verkettet? Wahrscheinlich fügen Sie <div>' '</div> Mal, wenn eine neue Linie erreicht wird, eine Zeichenfolge hinzu. Diese "Reverse HTML -Saite" ist für mich immer sehr verwirrend, daher kann ich mir nur vorstellen, wie es sich anfühlt, meine IDE zu sein. Am wichtigsten ist, da der Browser offene Tags automatisch schließt, kann ein einfacher Tippfehler zu unzähligen verschachtelten führen<div> . Es ist so, als ob es Spaß macht, aber es ist das Gegenteil. Was ist der strukturierte Ansatz für den Umgang mit diesem Problem? Vielen Dank für Ihre Frage. Fügen wir zunächst Zeilenspuren vor der Schleife hinzu und erstellen Sie ein zusätzliches Zeilencontainerelement. Wir werden dann sicherstellen, dass jedes Container <code>$element an seine $rowElement angehängt ist, anstatt sich direkt an $form anzuschließen.
PHP -Funktion RenderForm ($ Endpoint) {
// Daten von API abrufen und in PHP -Objekt umwandeln // ...
// mit dem Aufbau des DOM beginnen
$ dom = new Domdocument ();
$ form = $ dom-> createLement ('Form');
// Zeilenverfolgung $ row = 0 initialisieren;
$ rowElement = $ dom-> createLement ('div');
$ rowElement-> setAttribute ('Klasse', 'Feldreihe');
// über Felder iterieren und jedes Feld für Each ($ formFields als $ field) {bauen {
// <label>Container</label> bauen ""<label>
$ element = $ dom-> createLement ('label');
$ element-> setAttribute ('Klasse', 'Feld');
$ element-> setAttribute ('Data-Row', $ field-> row);
$ element-> setAttribute ('Data-Spalte', $ field-> Spalte);
// Eingabeelement zur Linie hinzufügen, wenn ($ input) {
// ...
$ rowElement-> appendChild ($ element);
$ form-> appendChild ($ rowElement);
}
}
// ...
}</label><p> Bisher haben wir gerade ein weiteres auf dem Feld hinzugefügt<code><div> . Erstellen wir ein <em>neues</em> Zeilenelement für jede Zeile innerhalb der Schleife:<pre class="brush:php;toolbar:false"> <php ... zeilenverfolgung row="0" initialisieren rowelement="$" dom-> createLement ('div');
$ rowElement-> setAttribute ('Klasse', 'Feldreihe');
// über Felder iterieren und jedes Feld für Each ($ formFields als $ field) {bauen {
// ...
// Wenn wir eine neue Zeile erreichen, erstellen Sie ein neues $ rowelement
if ($ field-> row> $ row) {
$ row = $ field-> row;
$ rowElement = $ dom-> createLement ('div');
$ rowElement-> setAttribute ('Klasse', 'Feldreihe');
}
// Eingabeelement-Switch ($ field-> type) {
// ...
// Eingabeelement zur Linie hinzufügen, wenn ($ input) {
// ...
$ rowElement-> appendChild ($ element);
// automatisch $ $ form-> appendChild ($ rowElement) widmen;
}
}
}</php> Wir müssen nur das $rowElement -Objekt als neues DOM -Element überschreiben, das PHP als neues einzigartiges Objekt behandelt. Am Ende jeder Schleife fügen wir also nur die aktuelle $rowElement hinzu - wenn es das gleiche Element wie die vorherige Iteration ist, wird das Formular aktualisiert. Wenn es sich um ein neues Element handelt, ist es am Ende angehängt.
Formulare sind ein großartiger Anwendungsfall für objektorientierte Vorlagen. Angesichts der Ausschnitte im WordPress -Kerncode kann berücksichtigt werden, dass verschachtelte Menüs ebenfalls ein guter Anwendungsfall sind. Jede Aufgabe, die Markierungen der komplexen Logik folgen, ist ein guter Kandidat für diesen Ansatz. Domdocument kann alle XML ausgeben, sodass Sie es auch verwenden können, um RSS -Feeds aus Postdaten zu erstellen.
Hier ist der komplette Codeausschnitt unseres Formulars. Fühlen Sie sich frei, es an eine beliebige Form von API anzupassen, an der Sie sich befinden. Dies ist die offizielle Dokumentation und es ist hilfreich, die verfügbaren APIs zu verstehen.
Wir haben noch nicht einmal erwähnt, dass Domdocument bestehende HTML und XML analysieren kann. Sie können dann die XPath -API verwenden, um Elemente zu finden, die Cheerio on document.querySelector oder node.js. Die Lernkurve ist etwas steil, aber es ist eine sehr leistungsstarke API für den Umgang mit externen Inhalten.
Unterhaltsame Tatsache: Microsoft Office -Dateien, die in X (z. B. .xlsx) enden, sind XML -Dateien. Teilen Sie der Marketingabteilung nicht mit, aber Sie können Word -Dokumente auf dem Server analysieren und HTML ausgeben.
Das Wichtigste ist, sich daran zu erinnern, dass Vorlagen Supermächte sind. Das richtige Aufschlag für die richtige Situation zu erstellen, kann der Schlüssel sein, um eine großartige Benutzererfahrung zu erzielen.
Das obige ist der detaillierte Inhalt vonErstellen eines Formulars in PHP mit Domdocument. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Konfigurieren Sie die HOSTS-Datei
So deaktivieren Sie die Win10-Upgrade-Eingabeaufforderung
Was sind die Unterschiede zwischen Weblogic und Tomcat?
So verwenden Sie Excel-Makros
Software zur Verschlüsselung von Mobiltelefonen
Mobile Festplattenpartitionssoftware
Verwendung von Eigenschaftsbeschreibungen
So lösen Sie 404 nicht gefunden
Multifunktionsnutzung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
