Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1420 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  interface utilisateur modifiant contenu HTML et CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

interface utilisateur modifiant contenu HTML et CSS

n°2346409
jeanmichje​anmich
Posté le 20-02-2020 à 11:16:26  profilanswer
 

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 :  
 

Code :
  1. <!DOCTYP<!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="" width=device-width, initial-scale="1.0, maximum-scale=1.0, minimal-ui"/>
  6.     <link rel="stylesheet" href="app.css">
  7.     <style type="text/css">
  8.         .st0{fill:none;stroke:#000000;}
  9.         .st1{fill:none;stroke:#E2231A;stroke-width:7.852;}
  10.         .st2{stroke:#E2231A;stroke-width:7.852;}
  11.         .st3{stroke:#000000;stroke-width:5;}
  12.         .st4{font-family:'ArialMT';}
  13.         .st5{font-size:31.4093px;}
  14.         .st6{font-size:32px;}
  15.         .st7{enable-background:new;}
  16.         .st8{fill:#FFFFFF;}
  17.         .st9{fill:#050D9E;}
  18.         .st10{fill:#E2231A;}
  19.         .st11{fill:none;}
  20.         .st12{font-family:'Arial-BoldMT';}
  21.         .st13{font-size:25.7578px;}
  22.         .st14{font-size:48px;}
  23.         .st15{fill:#FFFFFF;stroke:#000000;stroke-width:5;}
  24.         .st16{fill:#1D1D1B;stroke:#000000;stroke-width:5;}
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="map" id="map">
  29.     <div class="map__image">
  30.         <svg version="1.1"
  31.              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"
  32.              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"
  33.              style="enable-background:new 0 0 2938.7 1075;" xml:space="preserve">
  34.           <g id="layer2" transform="translate(-96.135793,207.65463)" inkscape:groupmode="layer" inkscape:label="ligne" sodipodi:insensitive="true">
  35.             <path id="path15678" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M719.8,273.8v-96.7"/>
  36.               <path id="path15680" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M799.8,273.8v-96.7"/>
  37.               <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"/>
  38.               <path id="path16066" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st2" d="M1919.1,346.6h-719.3"/>
  39.               <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"/>
  40.               <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"/>
  41.               <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"/>
  42.               <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"/>
  43.               <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"/>
  44.               <path id="circle15644_2_" class="st3" d="M319.8,210.4"/>
  45.               <path id="circle15644_1_" class="st3" d="M319.8,185.4"/>
  46.           </g>
  47.             <!--branche A1-->
  48.             <!--gare de Saint Germain en laye-->
  49.             <g class="ville">
  50.             <text transform="matrix(0.5 -0.866 0.866 0.5 400 975)" class="st4 st5">Saint-Germain-en-Laye</text>
  51.                 <circle class="saint_germain_en_laye" cx="543.6" cy="666.6" r="12.5"/>
  52.                 <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
  53.               <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
  54.                     <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
  55.                     <tspan x="1180" y="950"> Code REFPAT :</tspan>
  56.                     <tspan x="1180" y="1000"> Type baie : </tspan>
  57.                     <tspan x="1180" y="1050"> Type interface : </tspan>
  58.             </text>
  59.           </g>
  60.             <!--gare de Vésinet-Le Pecq-->
  61.             <g class="ville">
  62.             <text transform="matrix(0.5 -0.866 0.866 0.5 495 945)" class="st4 st5">Le Vésinet - Le Pecq</text>
  63.                 <circle class= "vesinet_le_pecq" cx="623.6" cy="666.6" r="12.5"/>
  64.                 <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
  65.               <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
  66.                     <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
  67.                     <tspan x="1180" y="950"> Code REFPAT :</tspan>
  68.                     <tspan x="1180" y="1000"> Type baie : </tspan>
  69.                     <tspan x="1180" y="1050"> Type interface : </tspan>
  70.             </text>
  71.           </g>
  72.             <!--gare de Vésinet-Centre-->
  73.             <g class="ville">
  74.             <text transform="matrix(0.5 -0.866 0.866 0.5 590 915)" class="st4 st5">Le Vésinet-Centre</text>
  75.                 <circle class="vesinet_centre" cx="703.6" cy="666.6" r="12.5"/>
  76.                 <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
  77.               <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
  78.                     <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
  79.                     <tspan x="1180" y="950"> Code REFPAT :</tspan>
  80.                     <tspan x="1180" y="1000"> Type baie : </tspan>
  81.                     <tspan x="1180" y="1050"> Type interface : </tspan>
  82.             </text>
  83.           </g>
  84.             <!--gare de Chatou-Croissy-->
  85.             <g class="ville">
  86.             <text transform="matrix(0.5 -0.866 0.866 0.5 685 890)" class="st4 st5">Chatou-Croissy</text>
  87.                 <circle class="chatou_croissy" cx="783.6" cy="666.6" r="12.5"/>
  88.                 <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
  89.               <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
  90.                     <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
  91.                     <tspan x="1180" y="950"> Code REFPAT :</tspan>
  92.                     <tspan x="1180" y="1000"> Type baie : </tspan>
  93.                     <tspan x="1180" y="1050"> Type interface : </tspan>
  94.             </text>
  95.           </g>
  96.             <-- même chose pour les autres gares, je les ai enlevé pour que ça soit plus visible ici-->
  97.             <g id="layer1" transform="translate(0,307.09595)" inkscape:groupmode="layer" inkscape:label="logo" sodipodi:insensitive="true">
  98.             <g id="g13376" transform="translate(-21.330339,-1405.8168)" class="st7">
  99.               <g id="g6194" transform="matrix(2.4285712,0,0,2.4285212,-2743.1034,-446.93566)">
  100.                 <circle id="circle6196" class="st8" cx="1163.7" cy="658.1" r="16"/>
  101.                   <path id="path6198" inkscape:connector-curvature="0" class="st9" d="M1181.2,658.2c0-9.7-8.1-17.6-17.5-17.6
  102.                                                                                     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
  103.                                                                                     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
  104.                                                                                     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
  105.                                                                                     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
  106.                                                                                     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
  107.                                                                                     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
  108.                                                                                     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
  109.                                                                                     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
  110.                                                                                     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
  111.                                                                                     C1155.9,653.9,1156.9,654.4,1156.9,655.6z"/>
  112.               </g>
  113.                 <g id="g6200" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
  114.                 <path id="path6202" inkscape:connector-curvature="0" class="st10" d="M98.2,547.2c0-9.7-7.8-17.5-17.5-17.5
  115.                                                                                      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"/>
  116.                     <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
  117.                                                                                     c0,8.3,6.7,15.1,15,15.1C89,562.2,95.7,555.5,95.7,547.2"/>
  118.                     <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
  119.                                                                                      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"/>
  120.               </g>
  121.             </g>
  122.           </g>
  123.             <path id="circle15644_5_" class="st3" d="M556.1,405.6"/>
  124.             <g id="g6200_1_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
  125.             <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
  126.                                                                                     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"/>
  127.                 <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
  128.                                                                                    c0,4.9,4,8.9,8.9,8.9C205.3,356.5,209.2,352.5,209.2,347.6"/>
  129.           </g>
  130.             <rect x="447.7" y="656.1" class="st11" width="35" height="22.3"/>
  131.             <text transform="matrix(1 0 0 1 447.6845 674.4961)" class="st10 st12 st13">A1</text>
  132.             <g id="g6200_2_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
  133.             <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
  134.                                                                                     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"/>
  135.                 <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
  136.                                                                                    c0,4.9,4,8.9,8.9,8.9C1094.7,356.5,1098.6,352.5,1098.6,347.6"/>
  137.           </g>
  138.             <rect x="2607.1" y="656.5" class="st11" width="35" height="22.3"/>
  139.             <text transform="matrix(1 0 0 1 2607.1201 674.9199)" class="st10 st12 st13">A2</text>
  140.             <g id="g6200_3_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
  141.             <path id="path6202_3_" inkscape:connector-curvature="0" class="st10" d="M1166,255.1c0-5.7-4.6-10.3-10.3-10.3
  142.                                                                                     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"/>
  143.                 <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
  144.                                                                                    c0,4.9,4,8.9,8.9,8.9C1160.5,264,1164.5,260,1164.5,255.1"/>
  145.           </g>
  146.             <polygon class="st11" points="2802.1,455.1 2767.1,454.1 2767.1,431.7 2802.1,432.7 "/>
  147.             <text transform="matrix(1 0 0 1 2767.1201 450.1821)" class="st10 st12 st13">A4</text>
  148.             <rect x="1175.8" y="664" class="st11" width="555.8" height="115.6"/>
  149.             <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>
  150.             <g id="g6200_4_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
  151.             <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
  152.                                                                                     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"/>
  153.                 <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
  154.                                                                                    c0,4.9,4,8.9,8.9,8.9C238.2,279.1,242.2,275.1,242.2,270.2"/>
  155.           </g>
  156.             <rect x="526.7" y="469.1" class="st11" width="35" height="22.3"/>
  157.             <text transform="matrix(1 0 0 1 526.6845 487.4961)" class="st10 st12 st13">A5</text>
  158.             <g id="g6200_5_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
  159.             <path id="path6202_5_" inkscape:connector-curvature="0" class="st10" d="M46,240.1c0-5.7-4.6-10.3-10.3-10.3
  160.                                                                                     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"/>
  161.                 <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
  162.                                                                                    c0,4.9,4,8.9,8.9,8.9C40.5,249,44.5,245,44.5,240.1"/>
  163.           </g>
  164.             <rect x="46.7" y="396" class="st11" width="35" height="22.3"/>
  165.             <text transform="matrix(1 0 0 1 46.6848 414.4251)" class="st10 st12 st13">A3</text>
  166.             <rect x="102.7" y="1015" class="st11" width="163.7" height="35.8"></rect>
  167.             <text transform="matrix(1 0 0 1 110 1038)" class="st4 st5">Rien</text>
  168.             <rect x="316.7" y="1015" class="st11" width="158.2" height="37.1"></rect>
  169.             <text transform="matrix(1 0 0 1 280 1038)" class="st4 st5">En travaux</text>
  170.             <rect x="550.8" y="1015" class="st11" width="291.7" height="34.4"></rect>
  171.             <text transform="matrix(1 0 0 1 540 1038)" class="st4 st5">En tests</text>
  172.             <rect x="1001.6" y="1015" class="st11" width="286.2" height="46.8"></rect>
  173.             <text transform="matrix(1 0 0 1 765 1038)" class="st4 st5">Gare basculée</text>
  174.             <circle class="rien" cx="200.1" cy="1026.5" r="12.5"></circle>
  175.             <circle class="en_travaux" cx="450" cy="1026.5" r="12.5"></circle>
  176.             <circle class="en_tests" cx="675" cy="1026.5" r="12.5"></circle>
  177.             <circle class="gare_basculee" cx="980" cy="1026.5" r="12.5"></circle>
  178.         </svg>
  179.     </div>
  180.     <div class="map__list">
  181.     </div>
  182. </div>
  183. </body>
  184. </html>


 
et le code en CSS :
 

Code :
  1. /* villes : text et circle au survol */
  2. svg g.ville{
  3.     cursor:pointer;
  4. }
  5. svg g.ville:hover > text:not(.desc) {
  6.     font-weight:bold;
  7.     fill:red;
  8. }
  9. svg g.ville:hover > circle {
  10.     font-weight:bold;
  11.     stroke:red;
  12.     stroke-width:6;
  13. }
  14. /* description */
  15. svg g.ville > text.desc {
  16.     font-size:36px;
  17.     fill:darkblue;
  18.     display:none; /* on masque */
  19. }
  20. svg g.ville:hover > text.desc {
  21.     display:block; /* on affiche */
  22. }
  23. /*
  24. svg g:before {
  25.   position:absolute;
  26.   display:block;
  27.   content:attr(id);
  28.   top:100%;
  29.   left:0;
  30.   width:150px;
  31.   height:50px;
  32.   color:green;
  33.   background:#fff;
  34.   padding:10px;
  35.   border:1px solid grey;
  36.   z-index:10;
  37.   display:none;
  38. }
  39. svg g:hover::before {
  40.   display:block;
  41. }
  42. */
  43. /*branche A1*/
  44. circle.saint_germain_en_laye{
  45.     fill: white;
  46.     stroke:#000000;
  47.     stroke-width:5
  48. }
  49. circle.vesinet_le_pecq{
  50.     fill: limegreen;
  51.     stroke:#000000;
  52.     stroke-width:5
  53. }
  54. circle.vesinet_centre{
  55.     fill: deepskyblue;
  56.     stroke:#000000;
  57.     stroke-width:5
  58. }
  59. circle.chatou_croissy{
  60.     fill: yellow;
  61.     stroke:#000000;
  62.     stroke-width:5
  63. }
  64. circle.rueil_malmaison{
  65.     fill: white;
  66.     stroke:#000000;
  67.     stroke-width:5
  68. }
  69. <!-- etc etc etc pour toute les gares-->


 
Merci à vous :)

mood
Publicité
Posté le 20-02-2020 à 11:16:26  profilanswer
 

n°2346410
rufo
Pas me confondre avec Lycos!
Posté le 20-02-2020 à 11:42:28  profilanswer
 

Ca peut se faire de diverses manières.
Ton IHM peut se présenter soit sous la forme d'un simple textarea qui contiendra son fichier css et PHP ira écraser le contenu du fichier CSS par ce que l'utilisateur aura saisi avec tous les risques que ça comporte. Donc, très simple à faire mais grands risques et il faut que l'utilisateur s'y connaisse.
 
Soit tu fais une IHM plus chiadé où tu mets des libellés explicites de styles que l'utilisateur pour modifier dans une certaines mesure (couleur, taille...). Mais ça sera beaucoup plus long et tu ne pourra jamais proposer toute la complexité du css. Les valeurs modifiées irons écraser, via PHP, des parties biens précises de ton css. Moins de risques.
 
Pour la MAJ du HTML, ben c'est pareil.
 
A mon sens, il te faudra mettre en place une BD où, pour chaque gare, tu vas avoir des infos (position géographique, nom, lignes qui y passent, infos complémentaires...), son statut (OK, en travaux...) et une partie PHP qui va prendre les infos en BD et les afficher avec du HTML/CSS et javascript. Bref, un vrai travail de dév, a priori hors de ta portée.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2346440
jeanmichje​anmich
Posté le 20-02-2020 à 14:45:55  profilanswer
 

Merci pour ton message :)
 
Je souhaiterais juste que l'utilisateur puisse modifier travers un formulaire ou une IHM:
 
- la couleur des éléments "circle" (j'ai mis un code couleur (4 couleurs) pour déterminer l'état des gares)
- du texte qui apparaît et donne des infos sur la gare lorsque je survole cette dernière avec le curseur (date / etc)
 
C'est vraiment si compliqué que ça à faire ?
 
 

n°2346445
rufo
Pas me confondre avec Lycos!
Posté le 20-02-2020 à 15:20:58  profilanswer
 

Si tu ne connais pas PHP (gestion des formulaires, constructions d'une BD et requêtes SQL + sécuriser tout ça pour éviter les SQL injections), oui, ça va être un peu compliqué. Comprendre que ça va de prendre des jours à faire là où en moins d'1j ça serait fait par qq'un qui connaît. Après, y'a pleins de tutos sur le web donc si tu as envie d'apprendre à programmer pour le web, c'est un bon projet. ;)
 
Mais ça va t'obliger à reprendre quasiment tout ce que tu as fait en html pour rendre tout ça dynamique (via le PHP qui va générer le html et une partie du css). Là, actuellement, tout était statique. Si tu as trouvé difficile ce que tu as posté, tu n'es pas au bouts de tes peines. Programmer est un métier qui s'apprend (comme beaucoup de métiers) en plusieurs années car il demande de connaître pas mal de choses : algorithmes et maths ainsi que de nombreuses technos et langages. Chacun de ces éléments demande à lui seuls plusieurs semaines d'apprentissage. Je ne dis pas ça pour te décourager, mais pour savoir où tu mets les pieds.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2346497
mathieuu
Posté le 21-02-2020 à 15:53:18  profilanswer
 

Salut,
 
je ne suis pas sur de bien comprendre ce que cela doit faire parce que j'ai un petit doute sur ce que tu appelles un "utilisateur".  
 
C'est un genre "d'admin" qui modifie la page et cela s'applique ensuite à tous les autres gens qui vont aller sur ton site ?  
 
Ou c'est juste un utilisateur normal qui se fait une modification "pour lui même" et cela n'affecte aucun autre utilisateur ensuite ?
 
Parce que la ça m'a l'air d’être utilisateur normal et modification pour tous, il faut être très prudent aussi bien aux injections sql qu'aux failles xss (stocké qui sont les plus dangereuses..)

n°2346502
rufo
Pas me confondre avec Lycos!
Posté le 21-02-2020 à 21:28:23  profilanswer
 

"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) ?"
--> Je crois que c'est clair, il parle de n'importe qui. Donc oui, ça risque d'être chaud de sécuriser tout ça :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2346504
MaybeEijOr​Not
but someone at least
Posté le 22-02-2020 à 11:40:00  profilanswer
 

Bonjour,
 
Si je comprends bien la description, il veut faire une appli communautaire où chacun peut mettre à jour les informations afin de les partager avec les autres.
Alors évidemment ça pose le problème de consensus de mise à jour des informations, mais ce n'est pas tant une question de sécurité.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  interface utilisateur modifiant contenu HTML et CSS

 

Sujets relatifs
[html] fonction scrollRequête ou interface avec cumul quotidien, hebdo, etc.
[Wordpress] Afficher un contenu différent suivant des adresses IPAfficher flux http dans page html
Interface Swing à partir d'un tableau 2D[EXCEL] mise à jour d'un contenu ODBC pendant la nuit
CSS - Retour en haut de colonneIntéger les data d'une image au source HTML
Lire beaucoup d'images BLOB en HTMLJQuery: sélectionner sur un contenu
Plus de sujets relatifs à : interface utilisateur modifiant contenu HTML et CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR