interface utilisateur modifiant contenu HTML et CSS

interface utilisateur modifiant contenu HTML et CSS - PHP - Programmation

Marsh Posté le 20-02-2020 à 11:16:26    

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 :)

Reply

Marsh Posté le 20-02-2020 à 11:16:26   

Reply

Marsh Posté le 20-02-2020 à 11:42:28    

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
Reply

Marsh Posté le 20-02-2020 à 14:45:55    

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 ?
 
 

Reply

Marsh Posté le 20-02-2020 à 15:20:58    

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
Reply

Marsh Posté le 21-02-2020 à 15:53:18    

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..)

Reply

Marsh Posté le 21-02-2020 à 21:28:23    

"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
Reply

Marsh Posté le 22-02-2020 à 11:40:00    

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.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed