Kan een CSS attribute gebruikt worden als <input value met PHP?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="column3" style="text-align: left;">
<div>For rent:</div>
<label class="switch">
<input class="switch-input" type="checkbox" id="forRent" name="forRent"
<?php
if($recource['forRent'] == 1){
print 'checked value = 1';
} else {
print 'value = 0';
}
?>
/>
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
<div>For rent:</div>
<label class="switch">
<input class="switch-input" type="checkbox" id="forRent" name="forRent"
<?php
if($recource['forRent'] == 1){
print 'checked value = 1';
} else {
print 'value = 0';
}
?>
/>
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
Het woord recource is bewust fout geschreven.
Ik dacht dat op deze manier bij het saven vd gegevens de value van 1 of 0 de database ingeschoten werd en niet NULL wat nu het geval is.
Gewijzigd op 28/10/2020 22:02:56 door Robert deBeer
Voorbeeld :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?php
echo '<pre>' . print_r( $_POST, TRUE) . '</pre>';
echo '<p>Waarde voor database = <b>' . ( $_POST['switch'] !== null ? '1' : '0' ) . '</b></p>';
?>
<style>
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
</style>
<form method="POST">
<label class="switch">
<input class="switch-input" name="switch" type="checkbox" <?php echo ( $_POST['switch'] !== null ? 'checked' : '' ); ?> />
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
<input type="submit" name="submit" value="Submit" />
</form>
<p><a href="https://www.htmllion.com/css3-toggle-switch-button.html">https://www.htmllion.com/css3-toggle-switch-button.html</a></p>
echo '<pre>' . print_r( $_POST, TRUE) . '</pre>';
echo '<p>Waarde voor database = <b>' . ( $_POST['switch'] !== null ? '1' : '0' ) . '</b></p>';
?>
<style>
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
</style>
<form method="POST">
<label class="switch">
<input class="switch-input" name="switch" type="checkbox" <?php echo ( $_POST['switch'] !== null ? 'checked' : '' ); ?> />
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
<input type="submit" name="submit" value="Submit" />
</form>
<p><a href="https://www.htmllion.com/css3-toggle-switch-button.html">https://www.htmllion.com/css3-toggle-switch-button.html</a></p>
Code (php)
1
var forRent = document.getElementsByName("forRent")[0].checked ? 1 : 0;
die dan na de submit button, naar de volgende php pagina gestuurd wordt die de update vd database uitvoerd.
Maar daarmee kom ik ook niet echt niet verder.
In ieder geval dank voor de snelle reaktie.
Als je in plaats van standaard HTML formulier-elementen (radiobuttons, checkboxen etc.) allemaal grafische elementen gebruikt, waarom maak je dan geen gebruik van hidden elementen die hier aan gekoppeld zijn die een 0 krijgen wanneer je een (grafisch) schakelaar(-element) uitzet, en 1 wanneer deze aangezet worden? De brug tussen dit soort grafische elementen en de data die onder water wordt verstuurd kan via JavaScript worden geslagen.
Het is prima mogelijk om meer van dit soort grafische schakelaar-elementen te hebben in eenzelfde formulier, maar dan is het dus wel zaak dat je deze onderling kunt onderscheiden, dus deze zullen een unieke waarde moeten hebben in het name-attribuut.
Het voorstel van @Adoptive hierboven controleert niet op het bestaan van $_POST['switch'], dus dat levert je meteen een zwik notices op. Ook zal dit voorbeeld aangepast moeten worden om dit op te schalen naar een uitvoering met meerdere schakelaars als je daar naar op zoek bent.
Daarbij weet ik ook niet of je dit soort logica in CSS zou moeten onderbrengen, het maakt de werking nogal ondoorzichtig.
Ook is het waarschijnlijk niet de bedoeling dat je een pagina weergeeft tijdens een POST-actie (het weergeven van een HTML-pagina en het verwerken van een POST zou in twee aparte acties ondergebracht moeten worden), maar ik neem aan dat dat voorbeeld hier bedoeld was ter illustratie, en niet als aanbeveling dient om ook zo letterlijk je webpagina's in elkaar te zetten. Na het POSTen van data zou je de pagina voor de goede orde moeten verversen.
Gewijzigd op 29/10/2020 01:05:26 door Thomas van den Heuvel
Zoals gezegd, de huidige situatie in de database is gemakkelijk weer te geven op een pagina, maar om de tinyint ofwel boolean te wijzigen op een "leuke" manier is een andere. Natuurlijk kan ik gewoon gebruik maken van een radio button of checkbox. Dat is eenvoudig. Maar om het wat op te leuken was ik op zoek naar een andere manier en vond die van htmllion en dat zag er wel sleek uit. Wat ik begrepen heb is dat je middels "name=" onderscheid kunt maken tussen de onderlinge schakelaars. Nu is het dus zaak voor mij om uit te zoeken hoe ik die status af kan vangen om de database te updaten.
Bij een "on" situatie heb ik geen foutmeldingen en werkt de pagina naar behoren
Bij een "off" situatie krijg ik meldingen met undefined index blablabla en mis ik een variabele.
Dus bij "on" heb ik de variabelen submit en switch en bij "off" heb ik alleen submit..
Hoe kan ik die laatste afvangen en gebruiken.
Btw andere/betere oplossingen zijn welkom :)
Verder versieren, uitbreiden en aanpassen naar smaak.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<style>
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
input[type=submit] {
width: 10.000em;
padding: 12px 20px;
margin: 1.000em 0.000em;
box-sizing: border-box;
font-size: 150%;
}
</style>
<div style="height: 360px; padding: 0.500em;">
<?php
echo '<pre>' . print_r( $_POST, TRUE) . '</pre>';
for ( $i = 1; $i <= 2; $i++ )
{
echo '<p>isset <i>forRent' . $i . '</i>' . ( isset($_POST['forRent' . $i]) ? ' bestaat ' : ' bestaat niet ' ) . '<br />';
echo 'Waarde voor database <i>forRent' . $i . '</i> = <b>' . ( $_POST['forRent' . $i] ?? 0 ) . '</b></p>';
}
// https://stitcher.io/blog/shorthand-comparisons-in-php#null-coalescing-operator
echo '<p>isset <i>forRent9</i> ' . ( isset($_POST['forRent9']) ? ' bestaat ' : ' bestaat niet ' ) . '<br />';
echo 'Waarde voor database <i>forRent9</i> = <b>' . ( $_POST['forRent9'] ?? '0' ) . '</b></p>';
?>
</div>
<hr style="margin-top:1.000em"/>
<form method="POST">
<?php
for ( $i = 1; $i <= 2; $i++ )
{
?>
ForRent <?php echo $i; ?>
<label class="switch">
<input class="switch-input" name="forRent<?php echo $i; ?>" value="1" type="checkbox" <?php echo ( $_POST['forRent'. $i] !== null ? 'checked' : '' ); ?> />
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
<?php
}
?>
<br /><br />
<label for="forRent9">forRent9</label> <input id="forRent9" type="checkbox" name="forRent9" value="1" <?php echo ( $_POST['forRent9'] !== null ? 'checked' : '' ); ?> /> <br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
<p><a href="https://www.htmllion.com/css3-toggle-switch-button.html">https://www.htmllion.com/css3-toggle-switch-button.html</a></p>
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
input[type=submit] {
width: 10.000em;
padding: 12px 20px;
margin: 1.000em 0.000em;
box-sizing: border-box;
font-size: 150%;
}
</style>
<div style="height: 360px; padding: 0.500em;">
<?php
echo '<pre>' . print_r( $_POST, TRUE) . '</pre>';
for ( $i = 1; $i <= 2; $i++ )
{
echo '<p>isset <i>forRent' . $i . '</i>' . ( isset($_POST['forRent' . $i]) ? ' bestaat ' : ' bestaat niet ' ) . '<br />';
echo 'Waarde voor database <i>forRent' . $i . '</i> = <b>' . ( $_POST['forRent' . $i] ?? 0 ) . '</b></p>';
}
// https://stitcher.io/blog/shorthand-comparisons-in-php#null-coalescing-operator
echo '<p>isset <i>forRent9</i> ' . ( isset($_POST['forRent9']) ? ' bestaat ' : ' bestaat niet ' ) . '<br />';
echo 'Waarde voor database <i>forRent9</i> = <b>' . ( $_POST['forRent9'] ?? '0' ) . '</b></p>';
?>
</div>
<hr style="margin-top:1.000em"/>
<form method="POST">
<?php
for ( $i = 1; $i <= 2; $i++ )
{
?>
ForRent <?php echo $i; ?>
<label class="switch">
<input class="switch-input" name="forRent<?php echo $i; ?>" value="1" type="checkbox" <?php echo ( $_POST['forRent'. $i] !== null ? 'checked' : '' ); ?> />
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
<?php
}
?>
<br /><br />
<label for="forRent9">forRent9</label> <input id="forRent9" type="checkbox" name="forRent9" value="1" <?php echo ( $_POST['forRent9'] !== null ? 'checked' : '' ); ?> /> <br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
<p><a href="https://www.htmllion.com/css3-toggle-switch-button.html">https://www.htmllion.com/css3-toggle-switch-button.html</a></p>
Een 1 of 0 volstaat in de database, on en off staan alleen maar in de knoppen geschreven, dus visueel op de pagina.
Ik begrijp ondertussen de werking van coalescing operators na het lezen van de informatie op stitcher.io/blog, erg verhelderend, bedankt!
Helaas gebruik ik PHP 5.6.30 middels EasyPHP en maak ik gebruik van een Sqlite database. Volgens mij krijg ik daardoor de foutmelding: "Parse error: syntax error, unexpected '?' in D:\Data\..." dat de unexpected ? voor coalescing operator onbekend is. Dit werkt pas vanaf PHP versie 7.0 ?
Maar het equivalent is:
Het heeft niks met SQL-lite te maken.
Gewijzigd op 29/10/2020 22:58:57 door - Ariën -
Eens zien of ik die kan upgraden in EasyPHP of adviseren jullie een ander omgeving?
Dit doe je door [ rechte haken ] toe te voegen achter de veldnaam. Tussen deze rechte haken zou je een index van het corresponderende schakelaar-record kunnen gebruiken, of een omschrijvende naam.
Het op de bovenstaande manier aan elkaar breien van veldnamen zou ik niet doen, tenzij dit niet anders kan.
In die variant zul je de code misschien ook inhoudelijk moeten aanpassen op het moment dat er een schakelaar bijkomt, terwijl een aanpak met arrays ervoor zorgt dat als er een corresponderend schakelaar-record is, en het rijtje schakelaars vanuit de database wordt opgebouwd, dat de code automatisch, en zonder aanpassing, direct de nieuwe situatie reflecteert.
Ik snap dat dit wat verder voert dan een simpel voorbeeld, maar in een voorbeeld kun je prima de basis leggen voor het verdere ontwerp, die bij voorkeur schaalbaar is voor toekomstige uitbreidingen waarbij geen nieuwe ingrepen in code nodig zijn.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
// voor ontwikkeling en debugging
error_reporting(E_ALL);
ini_set('display_startup_errors', true);
ini_set('display_errors', 'stdout');
function escape($in) {
return htmlspecialchars($in, ENT_QUOTES, 'UTF-8');
}
function dump($in) {
if (is_array($in)) {
$in = print_r($in, true);
}
echo '<pre>'.escape($in).'</pre>';
}
// alle schakelaars
$myButtons = [5 => 'kelder', 1 => 'woonkamer', 2 => 'zolder', 6 => 'iets met spaties']; // variant met indices
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buttons</title>
</head>
<body>
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="POST"><?php
foreach ($myButtons as $index => $name) {
$checked = (empty($_POST['buttons'][$index]) ? '' : ' checked="checked"');
?><label><input type="checkbox" name="buttons[<?php echo $index; ?>]" value="1"<?php echo $checked; ?>><?php echo $name; ?></label><br><?php
}
?><button type="submit">go</button>
</form><?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
dump($_POST);
foreach ($myButtons as $index => $name) {
if (empty($_POST['buttons'][$index])) {
echo 'button ['.$name.'] was not checked<br>';
}
}
}
?></body>
</html>
// voor ontwikkeling en debugging
error_reporting(E_ALL);
ini_set('display_startup_errors', true);
ini_set('display_errors', 'stdout');
function escape($in) {
return htmlspecialchars($in, ENT_QUOTES, 'UTF-8');
}
function dump($in) {
if (is_array($in)) {
$in = print_r($in, true);
}
echo '<pre>'.escape($in).'</pre>';
}
// alle schakelaars
$myButtons = [5 => 'kelder', 1 => 'woonkamer', 2 => 'zolder', 6 => 'iets met spaties']; // variant met indices
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buttons</title>
</head>
<body>
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="POST"><?php
foreach ($myButtons as $index => $name) {
$checked = (empty($_POST['buttons'][$index]) ? '' : ' checked="checked"');
?><label><input type="checkbox" name="buttons[<?php echo $index; ?>]" value="1"<?php echo $checked; ?>><?php echo $name; ?></label><br><?php
}
?><button type="submit">go</button>
</form><?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
dump($_POST);
foreach ($myButtons as $index => $name) {
if (empty($_POST['buttons'][$index])) {
echo 'button ['.$name.'] was not checked<br>';
}
}
}
?></body>
</html>
EDIT: NB: het bovenstaande kun je dus toepassen op de uitvoering die grafisch mogelijk wat aantrekkelijker is, dit dient enkel om het principe te demonstreren. In het algemeen is het zo dat als iets structureel goed in elkaar zit, dat je hier laten nog wel een saus overheen kunt gooien en de werking in zekere zin los kunt koppelen van het grafische ontwerp.
Gewijzigd op 30/10/2020 16:32:25 door Thomas van den Heuvel
Robert deBeer op 30/10/2020 16:11:02:
Ok dus ik loop flink achter met de PHP versies.
Eens zien of ik die kan upgraden in EasyPHP of adviseren jullie een ander omgeving?
Eens zien of ik die kan upgraden in EasyPHP of adviseren jullie een ander omgeving?
Zo te zien heet EasyPHP tegenwoordig DevServer. Ik zie dat daar recent een PHP 7.4 versie voor uit gekomen is. Ik raad je aan om de oude data uit je werkmap (htdocs of iets dergelijk) te backuppen, en je databases netjes te exporteren. Bij voorkeur via de Windows commandoprompt (of via Linux/Mac als je die gebruikt).
Dan kan je de oude versie verwijderen, en de nieuwe installeren, en de database weer importeren.
Als je handigheid hebt, kan je ook gewoon de PHP-binairy van PHP.net in EasyPHP plaatsen, en de nodige dll'etjes vervangen. Maar dan moet je wel weten wat je moet doen. Voor een beginner, en ook omdat het een flinke upgrade is, raad ik een herinstallatie van de webserver aan.
Gewijzigd op 30/10/2020 16:53:46 door - Ariën -
Hartelijk dank aan Ariën en Thomas voor jullie input en tips.