Création interface utilisateur pour modifier contenu html et css

**jean mich jean mich** · 20/02/2020, 12h28

Bonjour à tous.

Pour le taf j'ai créé une map du RER A (avec la très grande aide d'un membre du forum) avec entre autre :

- Un code couleur définissant l'état d'une gare : contenu CSS (1)
- Des informations relatives aux travaux d'une gare : contenu HTML (2)

Est-il possible en PHP de créer une interface utilisateur permettant à n'importe qui, sans passer par le code, de modifier (1) et (2) ?

Si oui, comment puis-je le faire.

Je peux également mettre mon code ici mais il est un peu long ( HTML : 600 lignes et CSS 200 lignes).

Voici le

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYP<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="" width=device-width, initial-scale="1.0, maximum-scale=1.0, minimal-ui"/>
    <link rel="stylesheet" href="app.css">
    <style type="text/css">
        .st0{fill:none;stroke:#000000;}
        .st1{fill:none;stroke:#E2231A;stroke-width:7.852;}
        .st2{stroke:#E2231A;stroke-width:7.852;}
        .st3{stroke:#000000;stroke-width:5;}
        .st4{font-family:'ArialMT';}
        .st5{font-size:31.4093px;}
        .st6{font-size:32px;}
        .st7{enable-background:new;}
        .st8{fill:#FFFFFF;}
        .st9{fill:#050D9E;}
        .st10{fill:#E2231A;}
        .st11{fill:none;}
        .st12{font-family:'Arial-BoldMT';}
        .st13{font-size:25.7578px;}
        .st14{font-size:48px;}
        .st15{fill:#FFFFFF;stroke:#000000;stroke-width:5;}
        .st16{fill:#1D1D1B;stroke:#000000;stroke-width:5;}
    </style>
</head>
<body>
 
<div class="map" id="map">
    <div class="map__image">
 
        <svg version="1.1"
             id="svg2" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.92.3 (2405546, 2018-03-11)" sodipodi:docname="RER_ligne_A_Paris_plan.svg" sodipodi:version="0.32" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2938.7 1075"
             style="enable-background:new 0 0 2938.7 1075;" xml:space="preserve">
          <g id="layer2" transform="translate(-96.135793,207.65463)" inkscape:groupmode="layer" inkscape:label="ligne" sodipodi:insensitive="true">
            <path id="path15678" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M719.8,273.8v-96.7"/>
              <path id="path15680" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M799.8,273.8v-96.7"/>
              <path id="path3787" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1919.8,350.5v-83.7 c0.2-27.8,15.7-33.1,31.4-32.6h846.2"/>
              <path id="path16066" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st2" d="M1919.1,346.6h-719.3"/>
              <path id="path16070" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M2639.5,459h-686.2 c-17.8,0.6-33.3-4.8-33.5-32.6v-83.7"/>
              <path id="path14566" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1195.8,350.5v-83.7 c-0.2-27.8-15.7-33.1-31.4-32.6H879.8"/>
              <path id="path14568" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M638.1,459h524.2 c17.8,0.6,33.3-4.8,33.5-32.6v-83.7"/>
              <path id="path14820" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M877.6,234.2v-3.7 c-0.2-27.8-15.7-33.1-31.4-32.6H239.8"/>
              <path id="path14822" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M719.8,270.5h124.4 c17.8,0.6,33.3-4.8,33.5-32.6v-3.7"/>
              <path id="circle15644_2_" class="st3" d="M319.8,210.4"/>
              <path id="circle15644_1_" class="st3" d="M319.8,185.4"/>
          </g>
 
            <!--branche A1-->
            <!--gare de Saint Germain en laye-->
            <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 400 975)" class="st4 st5">Saint-Germain-en-Laye</text>
                <circle class="saint_germain_en_laye" cx="543.6" cy="666.6" r="12.5"/>
                <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
                    <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
                    <tspan x="1180" y="950"> Code REFPAT :</tspan>
                    <tspan x="1180" y="1000"> Type baie : </tspan>
                    <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
          </g>
 
            <!--gare de Vésinet-Le Pecq-->
            <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 495 945)" class="st4 st5">Le Vésinet - Le Pecq</text>
                <circle class= "vesinet_le_pecq" cx="623.6" cy="666.6" r="12.5"/>
                <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
                    <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
                    <tspan x="1180" y="950"> Code REFPAT :</tspan>
                    <tspan x="1180" y="1000"> Type baie : </tspan>
                    <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
          </g>
 
            <!--gare de Vésinet-Centre-->
            <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 590 915)" class="st4 st5">Le Vésinet-Centre</text>
                <circle class="vesinet_centre" cx="703.6" cy="666.6" r="12.5"/>
                <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
                    <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
                    <tspan x="1180" y="950"> Code REFPAT :</tspan>
                    <tspan x="1180" y="1000"> Type baie : </tspan>
                    <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
          </g>
 
            <!--gare de Chatou-Croissy-->
            <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 685 890)" class="st4 st5">Chatou-Croissy</text>
                <circle class="chatou_croissy" cx="783.6" cy="666.6" r="12.5"/>
                <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
                    <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
                    <tspan x="1180" y="950"> Code REFPAT :</tspan>
                    <tspan x="1180" y="1000"> Type baie : </tspan>
                    <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
          </g>
 
            <-- même chose pour les autres gares, je les ai enlevé pour que ça soit plus visible ici-->
 
            <g id="layer1" transform="translate(0,307.09595)" inkscape:groupmode="layer" inkscape:label="logo" sodipodi:insensitive="true">
            <g id="g13376" transform="translate(-21.330339,-1405.8168)" class="st7">
              <g id="g6194" transform="matrix(2.4285712,0,0,2.4285212,-2743.1034,-446.93566)">
                <circle id="circle6196" class="st8" cx="1163.7" cy="658.1" r="16"/>
                  <path id="path6198" inkscape:connector-curvature="0" class="st9" d="M1181.2,658.2c0-9.7-8.1-17.6-17.5-17.6
                                                                                    c-9.7,0-17.5,7.9-17.5,17.6c0,9.6,7.9,17.4,17.5,17.4C1173.4,675.6,1181.2,667.8,1181.2,658.2 M1178.8,658.2c0,8.2-6.8,15-15,15
                                                                                    c-8.3,0-15.1-6.7-15.1-15c0-8.4,6.8-15.2,15.1-15.2C1172,642.9,1178.8,649.9,1178.8,658.2z M1176.2,655.4c0-2.4-1.8-3.5-3.5-3.5
                                                                                    h-3.3c-0.6,0-1,0.5-1,1v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5
                                                                                    c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9C1175.3,658.2,1176.2,657.2,1176.2,655.4L1176.2,655.4z M1167.3,663c0-0.5-0.4-1.1-1-1.1h-3.3v-3
                                                                                    h2.8c0.6,0,1-0.5,1-1c0-0.5-0.3-1-1-1h-2.8v-2.8h3.1c0.6,0,1-0.6,1-1.1c0-0.5-0.4-1.1-1-1.1h-4.5c-0.6,0-1,0.5-1,1v10.2
                                                                                    c0,0.6,0.6,0.9,1.2,0.9h4.5C1167,664.1,1167.3,663.5,1167.3,663z M1159.3,655.4c0-2.4-1.7-3.5-3.5-3.5h-3.3c-0.6,0-1,0.5-1,1
                                                                                    v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9
                                                                                    C1158.3,658.2,1159.3,657.2,1159.3,655.4L1159.3,655.4z M1173.8,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
                                                                                    C1172.8,653.9,1173.8,654.4,1173.8,655.6z M1156.9,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
                                                                                    C1155.9,653.9,1156.9,654.4,1156.9,655.6z"/>
              </g>
                <g id="g6200" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
                <path id="path6202" inkscape:connector-curvature="0" class="st10" d="M98.2,547.2c0-9.7-7.8-17.5-17.5-17.5
                                                                                     c-9.7,0-17.5,7.8-17.5,17.5c0,9.7,7.8,17.5,17.5,17.5C90.3,564.7,98.2,556.8,98.2,547.2"/>
                    <path id="path6204" inkscape:connector-curvature="0" class="st8" d="M95.7,547.2c0-8.3-6.7-15-15-15.1c-8.3,0-15.1,6.7-15,15
                                                                                    c0,8.3,6.7,15.1,15,15.1C89,562.2,95.7,555.5,95.7,547.2"/>
                    <path id="path6206" inkscape:connector-curvature="0" class="st10" d="M72.6,554.7l4,0l1.1-3.2h6.2l1,3.2l3.6,0l-5.9-16.8h-4
                                                                                     L72.6,554.7 M78.5,548.7l1.7-5.3c0.2-0.7,0.4-1.6,0.4-2.1l0.1,0c0,0.6,0.2,1.4,0.4,2.1l1.7,5.3L78.5,548.7L78.5,548.7z"/>
              </g>
            </g>
          </g>
            <path id="circle15644_5_" class="st3" d="M556.1,405.6"/>
            <g id="g6200_1_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_1_" inkscape:connector-curvature="0" class="st10" d="M210.7,347.6c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C206.1,357.9,210.7,353.3,210.7,347.6"/>
                <path id="path6204_1_" inkscape:connector-curvature="0" class="st8" d="M209.2,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C205.3,356.5,209.2,352.5,209.2,347.6"/>
          </g>
            <rect x="447.7" y="656.1" class="st11" width="35" height="22.3"/>
            <text transform="matrix(1 0 0 1 447.6845 674.4961)" class="st10 st12 st13">A1</text>
            <g id="g6200_2_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_2_" inkscape:connector-curvature="0" class="st10" d="M1100.1,347.6c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1095.5,357.9,1100.1,353.3,1100.1,347.6"/>
                <path id="path6204_2_" inkscape:connector-curvature="0" class="st8" d="M1098.6,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C1094.7,356.5,1098.6,352.5,1098.6,347.6"/>
          </g>
            <rect x="2607.1" y="656.5" class="st11" width="35" height="22.3"/>
            <text transform="matrix(1 0 0 1 2607.1201 674.9199)" class="st10 st12 st13">A2</text>
            <g id="g6200_3_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_3_" inkscape:connector-curvature="0" class="st10" d="M1166,255.1c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1161.3,265.4,1166,260.8,1166,255.1"/>
                <path id="path6204_3_" inkscape:connector-curvature="0" class="st8" d="M1164.5,255.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C1160.5,264,1164.5,260,1164.5,255.1"/>
          </g>
            <polygon class="st11" points="2802.1,455.1 2767.1,454.1 2767.1,431.7 2802.1,432.7 "/>
            <text transform="matrix(1 0 0 1 2767.1201 450.1821)" class="st10 st12 st13">A4</text>
            <rect x="1175.8" y="664" class="st11" width="555.8" height="115.6"/>
            <text transform="matrix(1 0 0 1 1251.1055 698.335)"><tspan x="20" y="-30" class="st12 st14">Migration Ligne A </tspan><tspan x="131.9" y="27.6" class="st12 st14">Phase 1</tspan></text>
 
            <g id="g6200_4_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_4_" inkscape:connector-curvature="0" class="st10" d="M243.6,270.2c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C239,280.5,243.6,275.9,243.6,270.2"/>
                <path id="path6204_4_" inkscape:connector-curvature="0" class="st8" d="M242.2,270.2c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C238.2,279.1,242.2,275.1,242.2,270.2"/>
          </g>
            <rect x="526.7" y="469.1" class="st11" width="35" height="22.3"/>
            <text transform="matrix(1 0 0 1 526.6845 487.4961)" class="st10 st12 st13">A5</text>
            <g id="g6200_5_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_5_" inkscape:connector-curvature="0" class="st10" d="M46,240.1c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C41.3,250.4,46,245.8,46,240.1"/>
                <path id="path6204_5_" inkscape:connector-curvature="0" class="st8" d="M44.5,240.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C40.5,249,44.5,245,44.5,240.1"/>
          </g>
            <rect x="46.7" y="396" class="st11" width="35" height="22.3"/>
            <text transform="matrix(1 0 0 1 46.6848 414.4251)" class="st10 st12 st13">A3</text>
 
            <rect x="102.7" y="1015" class="st11" width="163.7" height="35.8"></rect>
            <text transform="matrix(1 0 0 1 110 1038)" class="st4 st5">Rien</text>
            <rect x="316.7" y="1015" class="st11" width="158.2" height="37.1"></rect>
            <text transform="matrix(1 0 0 1 280 1038)" class="st4 st5">En travaux</text>
            <rect x="550.8" y="1015" class="st11" width="291.7" height="34.4"></rect>
            <text transform="matrix(1 0 0 1 540 1038)" class="st4 st5">En tests</text>
            <rect x="1001.6" y="1015" class="st11" width="286.2" height="46.8"></rect>
            <text transform="matrix(1 0 0 1 765 1038)" class="st4 st5">Gare basculée</text>
 
            <circle class="rien" cx="200.1" cy="1026.5" r="12.5"></circle>
            <circle class="en_travaux" cx="450" cy="1026.5" r="12.5"></circle>
            <circle class="en_tests" cx="675" cy="1026.5" r="12.5"></circle>
            <circle class="gare_basculee" cx="980" cy="1026.5" r="12.5"></circle>
        </svg>
 
    </div>
    <div class="map__list">
 
    </div>
</div>
</body>
</html>

et le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/* villes : text et circle au survol */
svg g.ville{
    cursor:pointer;
}
svg g.ville:hover > text:not(.desc) {
    font-weight:bold;
    fill:red;
}
svg g.ville:hover > circle {
    font-weight:bold;
    stroke:red;
    stroke-width:6;
}
/* description */
svg g.ville > text.desc {
    font-size:36px;
    fill:darkblue;
    display:none; /* on masque */
}
svg g.ville:hover > text.desc {
    display:block; /* on affiche */
}
 
/*
svg g:before {
  position:absolute;
  display:block;
  content:attr(id);
  top:100%;
  left:0;
  width:150px;
  height:50px;
  color:green;
  background:#fff;
  padding:10px;
  border:1px solid grey;
  z-index:10;
  display:none;
}
svg g:hover::before {
  display:block;
}
*/
 
/*branche A1*/
circle.saint_germain_en_laye{
    fill: white;
    stroke:#000000;
    stroke-width:5
}
circle.vesinet_le_pecq{
    fill: limegreen;
    stroke:#000000;
    stroke-width:5
}
circle.vesinet_centre{
    fill: deepskyblue;
    stroke:#000000;
    stroke-width:5
}
circle.chatou_croissy{
    fill: yellow;
    stroke:#000000;
    stroke-width:5
}
circle.rueil_malmaison{
    fill: white;
    stroke:#000000;
    stroke-width:5
}
 
<!-- etc etc etc pour toute les gares-->

Merci à vous

**Trehinos** · 20/02/2020, 12h47

Il suffirait de stocker ces informations dans une BDD et fournir aux utilisateurs une interface permettant de modifier ces données en BDD.
Ton PHP peut lire ces informations en BDD et les insérer dans le HTML (balise <style></style> pour la couleur CSS).

Création interface utilisateur pour modifier contenu html et css

Langage PHP

Discussions similaires

Partager

Partager