Browse Source

Add FormBuilder

Skylar Ittner 2 months ago
parent
commit
61d660be69
5 changed files with 308 additions and 3 deletions
  1. 2
    2
      langs/en/titles.json
  2. 257
    0
      lib/FormBuilder.lib.php
  3. 9
    1
      pages.php
  4. 24
    0
      pages/form.php
  5. 16
    0
      static/js/form.js

+ 2
- 2
langs/en/titles.json View File

@@ -1,4 +1,4 @@
1 1
 {
2
-    "home": "Home",
3
-    "test": "Test"
2
+    "Home": "Home",
3
+    "Form": "Form"
4 4
 }

+ 257
- 0
lib/FormBuilder.lib.php View File

@@ -0,0 +1,257 @@
1
+<?php
2
+
3
+/*
4
+ * This Source Code Form is subject to the terms of the Mozilla Public
5
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
6
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
7
+ */
8
+
9
+class FormBuilder {
10
+
11
+    private $items = [];
12
+    private $hiddenitems = [];
13
+    private $title = "";
14
+    private $icon = "";
15
+    private $buttons = [];
16
+    private $action = "action.php";
17
+    private $method = "POST";
18
+    private $id = "editform";
19
+
20
+    /**
21
+     * Create a form with autogenerated HTML.
22
+     *
23
+     * @param string $title Form title/heading
24
+     * @param string $icon FontAwesone icon next to the title.
25
+     * @param string $action URL to submit the form to.
26
+     * @param string $method Form submission method (POST, GET, etc.)
27
+     */
28
+    public function __construct(string $title = "Untitled Form", string $icon = "fas fa-file-alt", string $action = "action.php", string $method = "POST") {
29
+        $this->title = $title;
30
+        $this->icon = $icon;
31
+        $this->action = $action;
32
+        $this->method = $method;
33
+    }
34
+
35
+    /**
36
+     * Set the title of the form.
37
+     * @param string $title
38
+     */
39
+    public function setTitle(string $title) {
40
+        $this->title = $title;
41
+    }
42
+
43
+    /**
44
+     * Set the icon for the form.
45
+     * @param string $icon FontAwesome icon (example: "fas fa-toilet-paper")
46
+     */
47
+    public function setIcon(string $icon) {
48
+        $this->icon = $icon;
49
+    }
50
+
51
+    /**
52
+     * Set the URL the form will submit to.
53
+     * @param string $action
54
+     */
55
+    public function setAction(string $action) {
56
+        $this->action = $action;
57
+    }
58
+
59
+    /**
60
+     * Set the form submission method (GET, POST, etc)
61
+     * @param string $method
62
+     */
63
+    public function setMethod(string $method = "POST") {
64
+        $this->method = $method;
65
+    }
66
+
67
+    /**
68
+     * Set the form ID.
69
+     * @param string $id
70
+     */
71
+    public function setID(string $id = "editform") {
72
+        $this->id = $id;
73
+    }
74
+
75
+    /**
76
+     * Add an input to the form.
77
+     *
78
+     * @param string $name Element name
79
+     * @param string $value Element value
80
+     * @param string $type Input type (text, number, date, select, tel...)
81
+     * @param bool $required If the element is required for form submission.
82
+     * @param string $id Element ID
83
+     * @param array $options Array of [value => text] pairs for a select element
84
+     * @param string $label Text label to display near the input
85
+     * @param string $icon FontAwesome icon (example: "fas fa-toilet-paper")
86
+     * @param int $width Bootstrap column width for the input, out of 12.
87
+     * @param int $minlength Minimum number of characters for the input.
88
+     * @param int $maxlength Maximum number of characters for the input.
89
+     * @param string $pattern Regex pattern for custom client-side validation.
90
+     * @param string $error Message to show if the input doesn't validate.
91
+     */
92
+    public function addInput(string $name, string $value = "", string $type = "text", bool $required = true, string $id = null, array $options = null, string $label = "", string $icon = "", int $width = 4, int $minlength = 1, int $maxlength = 100, string $pattern = "", string $error = "") {
93
+        $item = [
94
+            "name" => $name,
95
+            "value" => $value,
96
+            "type" => $type,
97
+            "required" => $required,
98
+            "label" => $label,
99
+            "icon" => $icon,
100
+            "width" => $width,
101
+            "minlength" => $minlength,
102
+            "maxlength" => $maxlength
103
+        ];
104
+        if (!empty($id)) {
105
+            $item["id"] = $id;
106
+        }
107
+        if (!empty($options) && $type == "select") {
108
+            $item["options"] = $options;
109
+        }
110
+        if (!empty($pattern)) {
111
+            $item["pattern"] = $pattern;
112
+        }
113
+        if (!empty($error)) {
114
+            $item["error"] = $error;
115
+        }
116
+        $this->items[] = $item;
117
+    }
118
+
119
+    /**
120
+     * Add a button to the form.
121
+     *
122
+     * @param string $text Text string to show on the button.
123
+     * @param string $icon FontAwesome icon to show next to the text.
124
+     * @param string $href If not null, the button will actually be a hyperlink.
125
+     * @param string $type Usually "button" or "submit".  Ignored if $href is set.
126
+     * @param string $id The element ID.
127
+     * @param string $name The element name for the button.
128
+     * @param string $value The form value for the button. Ignored if $name is null.
129
+     * @param string $class The CSS classes for the button, if a standard success-colored one isn't right.
130
+     */
131
+    public function addButton(string $text, string $icon = "", string $href = null, string $type = "button", string $id = null, string $name = null, string $value = "", string $class = "btn btn-success") {
132
+        $button = [
133
+            "text" => $text,
134
+            "icon" => $icon,
135
+            "class" => $class,
136
+            "type" => $type,
137
+            "id" => $id,
138
+            "href" => $href,
139
+            "name" => $name,
140
+            "value" => $value
141
+        ];
142
+        $this->buttons[] = $button;
143
+    }
144
+
145
+    /**
146
+     * Add a hidden input.
147
+     * @param string $name
148
+     * @param string $value
149
+     */
150
+    public function addHiddenInput(string $name, string $value) {
151
+        $this->hiddenitems[$name] = $value;
152
+    }
153
+
154
+    /**
155
+     * Generate the form HTML.
156
+     * @param bool $echo If false, returns HTML string instead of outputting it.
157
+     */
158
+    public function generate(bool $echo = true) {
159
+        $html = <<<HTMLTOP
160
+<form action="$this->action" method="$this->method" id="$this->id">
161
+    <div class="card">
162
+         <h3 class="card-header d-flex">
163
+            <div>
164
+                <i class="$this->icon"></i> $this->title
165
+            </div>
166
+        </h3>
167
+
168
+        <div class="card-body">
169
+            <div class="row">
170
+HTMLTOP;
171
+
172
+        foreach ($this->items as $item) {
173
+            $required = $item["required"] ? "required" : "";
174
+            $id = empty($item["id"]) ? "" : "id=\"$item[id]\"";
175
+            $pattern = empty($item["pattern"]) ? "" : "pattern=\"$item[pattern]\"";
176
+
177
+            $itemhtml = "";
178
+            $itemhtml .= <<<ITEMTOP
179
+\n\n                <div class="col-12 col-md-$item[width]">
180
+                    <div class="form-group mb-3">
181
+                        <label class="mb-0">$item[label]:</label>
182
+                        <div class="input-group">
183
+                            <div class="input-group-prepend">
184
+                                <span class="input-group-text"><i class="$item[icon]"></i></span>
185
+                            </div>
186
+ITEMTOP;
187
+            if (empty($item['type']) || $item['type'] != "select") {
188
+                $itemhtml .= <<<INPUT
189
+\n                            <input type="$item[type]" name="$item[name]" $id class="form-control" aria-label="$item[label]" minlength="$item[minlength]" maxlength="$item[maxlength]" $pattern value="$item[value]" $required />
190
+INPUT;
191
+            } else {
192
+                $itemhtml .= <<<SELECT
193
+\n                            <select class="form-control" name="$item[name]" aria-label="$item[label]" $required>
194
+SELECT;
195
+                foreach ($item['options'] as $value => $label) {
196
+                    $selected = "";
197
+                    if (!empty($item['value']) && $value == $item['value']) {
198
+                        $selected = " selected";
199
+                    }
200
+                    $itemhtml .= "\n                                <option value=\"$value\"$selected>$label</option>";
201
+                }
202
+                $itemhtml .= "\n                            </select>";
203
+            }
204
+
205
+            if (!empty($item["error"])) {
206
+                $itemhtml .= <<<ERROR
207
+\n                            <div class="invalid-feedback">
208
+                                $item[error]
209
+                            </div>
210
+ERROR;
211
+            }
212
+            $itemhtml .= <<<ITEMBOTTOM
213
+\n                        </div>
214
+                    </div>
215
+                </div>\n
216
+ITEMBOTTOM;
217
+            $html .= $itemhtml;
218
+        }
219
+
220
+        $html .= <<<HTMLBOTTOM
221
+
222
+            </div>
223
+        </div>
224
+HTMLBOTTOM;
225
+
226
+        if (!empty($this->buttons)) {
227
+            $html .= "\n        <div class=\"card-footer\">";
228
+            foreach ($this->buttons as $btn) {
229
+                $btnhtml = "";
230
+                $inner = "<i class=\"$btn[icon]\"></i> $btn[text]";
231
+                $id = empty($btn['id']) ? "" : "id=\"$btn[id]\"";
232
+                if (!empty($btn['href'])) {
233
+                    $btnhtml = "<a href=\"$btn[href]\" class=\"$btn[class]\" $id>$inner</a>";
234
+                } else {
235
+                    $name = empty($btn['name']) ? "" : "name=\"$btn[name]\"";
236
+                    $value = (!empty($btn['name']) && !empty($btn['value'])) ? "value=\"$btn[value]\"" : "";
237
+                    $btnhtml = "<button type=\"$btn[type]\" class=\"$btn[class]\" $id $name $value>$inner</button>";
238
+                }
239
+                $html .= "\n            $btnhtml";
240
+            }
241
+            $html .= "\n        </div>";
242
+        }
243
+
244
+        $html .= "\n    </div>";
245
+        foreach ($this->hiddenitems as $name => $value) {
246
+            $value = htmlentities($value);
247
+            $html .= "\n    <input type=\"hidden\" name=\"$name\" value=\"$value\" />";
248
+        }
249
+        $html .= "\n</form>\n";
250
+
251
+        if ($echo) {
252
+            echo $html;
253
+        }
254
+        return $html;
255
+    }
256
+
257
+}

+ 9
- 1
pages.php View File

@@ -7,11 +7,19 @@
7 7
 // List of pages and metadata
8 8
 define("PAGES", [
9 9
     "home" => [
10
-        "title" => "home",
10
+        "title" => "Home",
11 11
         "navbar" => true,
12 12
         "icon" => "fas fa-home"
13 13
     ],
14 14
     "404" => [
15 15
         "title" => "404 error"
16
+    ],
17
+    "form" => [
18
+        "title" => "Form",
19
+        "navbar" => true,
20
+        "icon" => "fas fa-file-alt",
21
+        "scripts" => [
22
+            "static/js/form.js"
23
+        ]
16 24
     ]
17 25
 ]);

+ 24
- 0
pages/form.php View File

@@ -0,0 +1,24 @@
1
+<?php
2
+
3
+/*
4
+ * This Source Code Form is subject to the terms of the Mozilla Public
5
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
6
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
7
+ */
8
+
9
+/*
10
+ * This file demonstrates creating a form with the FormBuilder class.
11
+ */
12
+
13
+$form = new FormBuilder("Sample Form", "fas fa-code", "", "GET");
14
+
15
+$form->setID("sampleform");
16
+
17
+$form->addHiddenInput("page", "form");
18
+
19
+$form->addInput("name", "John", "text", true, null, null, "Your name", "fas fa-user", 6, 5, 20, "John(ny)?|Steve", "Invalid name, please enter John, Johnny, or Steve.");
20
+$form->addInput("location", "", "select", true, null, ["1" => "Here", "2" => "There"], "Location", "fas fa-map-marker");
21
+
22
+$form->addButton("Submit", "fas fa-save", null, "submit", "savebtn");
23
+
24
+$form->generate();

+ 16
- 0
static/js/form.js View File

@@ -0,0 +1,16 @@
1
+/*
2
+ * This Source Code Form is subject to the terms of the Mozilla Public
3
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
4
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
5
+ */
6
+
7
+
8
+$("#savebtn").click(function (event) {
9
+    var form = $("#sampleform");
10
+
11
+    if (form[0].checkValidity() === false) {
12
+        event.preventDefault();
13
+        event.stopPropagation();
14
+    }
15
+    form.addClass('was-validated');
16
+});

Loading…
Cancel
Save