Tema: Como Crear editor de contenido para una pagina html con php y mysql
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/08/2015, 13:23
NeidennX
 
Fecha de Ingreso: agosto-2015
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Exclamación Como Crear editor de contenido para una pagina html con php y mysql
Buenas, tengo un proyecto que me dejaron en la universidad, es crear una forma de que uno como administrador de la pagina, pueda editar las entradas de la misma (solo añadirles mas informacion) todo esto dese la misma pagina, hay que hacerlo con php y mysql, mi pagina la tengo hecha con html y css es muy basica ya que lo que necesito es poder editar las entradas, de verdad les pido de que me ayuden urgente, aca les dejo el codigo de mi pagina y para que se guien y me puedan ayudar

PAGINA DE INICIO
HTML:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.  
  4.     <title>Universo</title>
  5.     <link rel="stylesheet" type="text/css" href="Tabla.css"/>
  6.     <link rel="stylesheet" type="text/css" href="Tabla.css"/>
  7.  
  8. </head>
  9.  
  10.     <body id="Fondo">
  11.  
  12. <div id="TablaFondo">
  13.     <table>
  14.         <tr>
  15.             <td>
  16.                 
  17.         <div>
  18.             <table id="TablaPrincipal">
  19.             
  20.                 <tr id="TablaPubli">
  21.                     <td colspan="2" id="Publicidad" align="center">
  22.                         <h4>Colgate para una sonrisa mas sana y saludable!!!</h4>
  23.                         <img src="publicidad.png" width="200" height="98" 
  24.                         
  25.                     </td>
  26.                     
  27.                     <td id="Logo" align="center">
  28.                         <img src="Logo.png" width="200" height="125">
  29.                     </td>   
  30.                 </tr>
  31.                 
  32.                 
  33.                 <tr id="Menu" align="center">
  34.                     <td rowspan="2" >
  35.                         
  36.                     <div id="MenuIzquierdo">
  37.             
  38.             
  39.         
  40.             <table id="TituloMeIz">
  41.                         <tr>
  42.                             <td>
  43.                                 Menu
  44.                             </td>
  45.                         </tr>
  46.                     </table>
  47.             
  48.             
  49.             <table>
  50.                 <tr>
  51.                     <td>
  52.     <a class="Enlace2" href="SistemaSolar.html"> SistemaSolar</a>                   
  53.     <a class="Enlace2" href="LaTierra.html">La Tierra  </a>
  54.     <a class="Enlace2" href="Mercurio.html"> Mercurio    </a>
  55.     <a class="Enlace2" href="ElSol.html"> El Sol</a>
  56.     <a class="Enlace2" href="PaginaPrincipal.html"> Volver al Inicio</a>
  57.     
  58.                         
  59.                     </td>
  60.                 </tr>
  61.             </table>
  62.         
  63.         </div>  
  64.                         
  65.   
  66.                     </td>
  67.                 
  68.                     <td colspan="2">
  69.                         
  70.                         <table><tr>
  71.                             <td>
  72.                                 <h4 id="Info">
  73. El universo es la totalidad del espacio y del tiempo, de todas las formas de la materia, la energía y el impulso, las leyes y constantes físicas que las gobiernan. Sin embargo, el término también se utiliza en sentidos contextuales ligeramente diferentes y alude a conceptos como cosmos, mundo o naturaleza. <table id="TablaImagen1">
  74.     <tr>
  75.         <td>
  76.             <img src="Universo.jpg" width="135" height="320"> <br />
  77.         </td>
  78.     </tr>
  79. </table>
  80. Observaciones astronómicas indican que el universo tiene una edad de 13,73 ± 0,12 millardos de años (entre 13 730 y 13 810 millones de años) y por lo menos 93 000 millones de años luz de extensión.2 Según la teoría más aceptada, el evento que dio inicio al universo se denomina Big Bang. Se denomina Big-Bang a la singularidad que, conforme dicha teoría, fue la que creó el universo. Además esta afirma que después del Big Bang, el universo comenzó a expandirse hasta llegar a su condición actual, y continúa haciéndolo.
  81.  
  82.                         </h4>
  83.                         
  84.                         <table>
  85.                             <tr>
  86.                                 <td>
  87.                                     
  88.                                      <ul>
  89.                                      
  90.                                      <table id="TituloMeIz1">
  91.                         <tr>
  92.                             <td>
  93.                                 Otros Planetas
  94.                             </td>
  95.                         </tr>
  96.                     </table>
  97.                                      
  98.                                           <a class="Enlace" href="Venus.html"><li>Venus</li></a>
  99.                                           <a class="Enlace" href="Jupiter.html"><li>Jupiter</li></a>
  100.                                           <a class="Enlace" href="Pluton.html"><li>Pluton</li></a>
  101.                                     </ul> 
  102.                                 </td>
  103.                             </tr>
  104.                         </table>
  105.                         
  106.  
  107.                             </td>
  108.                         </tr></table>
  109.                     </td>
  110.                 </tr>
  111.                 
  112.                 <tr bgcolor="#ff0000">
  113.                     <td colspan="2">
  114.                         Fomulario
  115.                     </td>
  116.                     
  117.                 </tr>
  118.                 
  119.             </table>
  120.         </div>
  121.  
  122.         
  123.             </td>
  124.         </tr>
  125.     </table>
  126. </div>
  127.  
  128.     </body>
  129.  
  130. </html>


EL CSS
Código CSS:

Código CSS: 
Ver original
  1. #TablaPrincipal{
  2.     
  3.     width: 800px;
  4.     height:900px;
  5.     margin: 0cm;
  6.     margin-left: 5cm;
  7.     
  8.     
  9.         
  10.  
  11. }
  12. #Info{
  13.     background:  rgba(215, 208, 213, 0.6);
  14.     text-align: left;
  15.     margin: 0 auto;
  16.     
  17.     
  18. }
  19. h4{
  20.     background:  rgba(215, 208, 213, 0.6);
  21.     text-align: center;
  22.     margin: 0 auto;
  23. }
  24. #Menu{
  25.     
  26.     text-align: center;
  27.     vertical-align: top;
  28.     
  29.  
  30. }
  31.  
  32.  
  33. #TablaPubli{
  34.     width: 100px;
  35.     background:  rgba(117, 19, 236, 0.2);
  36. }
  37.  
  38.  
  39.  
  40.  
  41. #Fondo{
  42.     background-image: url('wallpaper.jpg');
  43.     background-repeat: repeat-y;
  44.     background-position: center;
  45.     background-attachment: fixed;
  46.     background-size: cover;
  47. }
  48. #TablaFondo{
  49.     background:  rgba(244, 151, 49, 0.2);
  50.     text-align: center;
  51.     margin: 0 auto;
  52. }
  53. #Publicidad{
  54.     margin: auto;
  55. }
  56.  
  57. #MenuIzquierdo{
  58.     width: 200px;
  59.     height:500px;
  60.     /*border-left: solid 4px #4e4e4e;*/
  61.     float: left;
  62.     margin-left: 1cm;
  63.     text-align: center;
  64. }
  65.  
  66. .Enlace2{
  67.     width: 150px;
  68.     height: 105px;
  69.     display: block;
  70.     font-family:  Arial, Tahoma;
  71.     font-size: 10pto;
  72.     font-weight: bold;
  73.     padding: 5px;
  74.     text-decoration: none;
  75.     text-align: center;
  76.     letter-spacing: 1px;
  77.     border-top: solid 1px #4e4e4e;
  78.     border-bottom: solid 2px #4e4e4e;
  79.     border-right: solid 1px #4e4e4e;
  80.     
  81.     -webkit-transition:-webkit-transform 0.5s ease-out;
  82.     -moz-transition:-moz-transform 0.5s ease-out;
  83.     -o-transition:-o-transform 0.5s ease-out;
  84.     -ms-transition:-ms-transform 0.5s ease-out;
  85.     transition:transform 0.5s ease-out;
  86.     text-decoration: none;
  87.         
  88. }
  89.  
  90.  
  91.  
  92.  
  93.  
  94. .Enlace2:link, .Enlace:visited, .Enlace:active{
  95.     border-left: solid 10px #757679;
  96.     background-color: rgba(49, 0, 0, 0.7);
  97.     color: rgba(219, 0, 0, 0.7);
  98.  
  99. }
  100.  
  101. .Enlace2:hover{
  102.     border-left: solid 10px #310000;
  103.     background-color:  rgba(219, 0, 0, 0.7);
  104.     color:  rgba(49, 0, 0, 0.7);
  105.     text-align: right; 
  106.     -moz-transform: scale(1.1);
  107.     -webkit-transform: scale(1.1);
  108.     -o-transform: scale(1.1);
  109.     -ms-transform: scale(1.1);
  110.     transform: scale(1.1)
  111. }
  112.  
  113. #TituloMeIz{
  114.     height: 110px;
  115.     width: 175px;
  116.     vertical-align: middle;
  117.     background: linear-gradient(to right,#db0000 ,#310000);
  118.     text-align: -moz-center;
  119.     
  120.     display: block;
  121.     font-size: 10pto;
  122.     font-family: Comic Sans MS;
  123.     font-weight: bold;
  124.     color: #ffffff;
  125.     border:  solid 4px #4e4e4e;
  126.     
  127.     
  128. }
  129.  
  130. #TablaImagen1{
  131.     width: 150px;
  132.     border-bottom: solid 4px #4e4e4e;
  133.     border-left:   solid 2px #4e4e4e; 
  134.     border-right:  solid 2px #4e4e4e;
  135.     border-top:    solid 4px #4e4e4e; 
  136.     text-align: center;
  137.     font-family: Arial, Calibri;
  138.     font-weight: bold;
  139.     font-size: 10px;
  140.     float: left;
  141.     height: 125px;
  142. }
  143.  
  144. .Enlace{
  145.     width: 450px;
  146.     display: block;
  147.     font-family:  Arial, Tahoma;
  148.     font-size: 10pto;
  149.     font-weight: bold;
  150.     padding: 5px;
  151.     text-decoration: none;
  152.     text-align: left;
  153.     letter-spacing: 1px;
  154.     border-top: solid 1px #4e4e4e;
  155.     border-bottom: solid 2px #4e4e4e;
  156.     border-right: solid 1px #4e4e4e;
  157.     
  158.     -webkit-transition:-webkit-transform 0.5s ease-out;
  159.     -moz-transition:-moz-transform 0.5s ease-out;
  160.     -o-transition:-o-transform 0.5s ease-out;
  161.     -ms-transition:-ms-transform 0.5s ease-out;
  162.     transition:transform 0.5s ease-out;
  163.     text-decoration: none;
  164.         
  165. }
  166.  
  167. .Enlace:link, .Enlace:visited, .Enlace:active{
  168.     border-left: solid 10px #757679;
  169.     background-color: rgba(49, 0, 0, 0.7);
  170.     color: rgba(219, 0, 0, 0.7);
  171.  
  172. }
  173.  
  174. .Enlace:hover{
  175.     border-left: solid 10px #310000;
  176.     background-color:  rgba(219, 0, 0, 0.7);
  177.     color:  rgba(49, 0, 0, 0.7);
  178.     text-align: right; 
  179.     -moz-transform: scale(1.1);
  180.     -webkit-transform: scale(1.1);
  181.     -o-transform: scale(1.1);
  182.     -ms-transform: scale(1.1);
  183.     transform: scale(1.1)
  184. }
  185.  
  186. #TituloMeIz{
  187.     height: 100px;
  188.     width: 175px;
  189.     padding: 5px;
  190.     background: linear-gradient(to right,#db0000 ,#310000);
  191.     text-align: -moz-center;
  192.     display: block;
  193.     font-size: 10pto;
  194.     font-family: Comic Sans MS;
  195.     font-weight: bold;
  196.     color: #ffffff;
  197.     border:  solid 4px #4e4e4e;
  198.     
  199.     
  200. }
  201. #TituloMeIz1{
  202.     height: 50px;
  203.     width: 472px;
  204.     padding: 5px;
  205.     background: linear-gradient(to right,#db0000 ,#310000);
  206.     text-align: -moz-center;
  207.     display: block;
  208.     font-size: 10pto;
  209.     font-family: Comic Sans MS;
  210.     font-weight: bold;
  211.     color: #ffffff;
  212.     border:  solid 4px #4e4e4e;
  213. }