Utilizamos cookies propias y de terceros. Al navegar entendemos que aceptas el uso de cookies. +Info.
Política de cookies
Proyecto AjpdSoft

· Inicio
· Buscar
· Contactar
· Cookies
· Descargas
· Foros
· Historia
· Nosotros
· Proponer
· Temas
· Top 10
· Trucos
· Tutoriales
· Usuario
· Wiki

Nick


Contraseña


Nuevo usuario


English

PHP: Cómo crear un sitio web con secciones dinámicas con HTML, PHP, Delphi y MySQL
Programación páginas web ASP, PHP, Java


Explicamos paso a paso y con el código fuente necesario (tanto en PHP, HTML, como en Delphi y las tablas para MySQL) cómo desarrollar un sitio web dinámico (mezcla de estático y dinámico). Explicamos cómo hacer dinámicas algunas secciones de un sitio web estático (noticias, productos o artículos). Además, explicamos cómo desarrollar la aplicación Delphi que actualizará los datos de la página web.



 

Definición de sitio web dinámico ¿qué es una web dinámica? Diferencias entre web dinámica y estática

Definición sitio web dinámico

Un sitio Web dinámico es aquel que muestra su contenido obteniéndolo, normalmente, de una base de datos, empleando para ello lenguajes para la web como JSP, PHP ó ASP. Mediante estos lenguajes el desarrollador web crea aplicaciones que acceden a la base de datos y muestran al usuario final la web, según el contenido de las tablas de la base de datos.

Mediante este método, los desarrolladores web crean también aplicaciones con estos lenguajes (JSP, PHP, ASP, etc.), para que el usuario (normalmente accediendo con sus credenciales) pueda modificar el contenido de la web. Siempre intentando que no se requieran conocimientos de HTML ni de desarrollo por parte del usuario.

Por supuesto, dependiendo del tipo de web, este método de dinamismo se puede aprovechar para cualquier uso: foros, comunidad de usuarios, descargas, perfiles, comentarios, votos, libros de visita, compra de productos, católogo de productos, encuestas, etc.

Webs dinámicas vs. estáticas

La ventaja principal de las web dinámicas frente a las estatáticas es que con las dinámicas, las secciones y posibilidades son casi infinitas. En una web dinámica podremos tener foros, encuestas, comunidad de usuarios, etc. algo imposible en una web estática. Además, las webs dinámicas requieren de muy pocos conocimientos por parte del usuario para gestionar su contenido. Otra de las grandes ventajas es que existen ya desarrollados y gratuitos numerosos CMS como Joomla! que son sistemas de gestión de contenidos profesionales. Éstos permiten crear un sitio web completamente dinámico casi sin conocimientos de HTML ni de programación web. Permiten añadirles módulos de foros, galerías de imágenes y demás, todos ellos ya desarrollados y gratuitos.

El inconveniente principal de los sitios web dinámicos frente a los estáticos es que el desarrollo de este tipo de Web dinámicas es muchísimo más complicado que el de una web estática. Para desarrollar una web dinámica se requieren conocimientos de programación (en PHP u otro lenguaje elegido como ASP, JSP, etc.), conocimientos de bases de datos (MySQL, PostgreSQL, etc.) y conocimientos de HTML. Otra de las desventajas es que las webs dinámicas suelen ser más lentas en su carga que las webs estáticas, pues requieren de acceso a base de datos y de compilación de los archivos PHP, ASP, JSP, etc. en el servidor para ser devueltos al usuario en HTML (entendible por el navegador).

 

Requisitos para desarrollar una web dinámica

En primer lugar deberemos disponer de un servidor de hosting (alojamiento web) que permita usar base de datos MySQL y que permita y soporte PHP. Pues los datos de las secciones dinámicas de la web se guardarán en la base de datos MySQL que crearemos a tal efecto y con el lenguaje de programación web PHP accederemos a estos datos para mostrarlos en la web.

Además de este requisito, para el software externo que usará el usuario propieratio del sitio web para actualizar las secciones dinámicas, el servidor de hosting debe permitir el acceso externo (desde fuera del servidor MySQL) a la base de datos MySQL.

Lógicamente, necesitaremos un servicio de FTP con usuario y contraseña para poder subir los ficheros html, php, css, png y jpg que compondrán la web. Este servicio suelen tenerlo todos los hosting del mercado.

Por supuesto, siempre podremos optar por crear nuestro sitio web en servidores propios (de la propia empresa), como explicamos en este artículo:

Montar un servidor web y un sitio web en Windows 7 con AppServ y Joomla!

Se necesitarán conocimientos mínimos de HTML, PHP, Delphi y base de datos MySQL, no han de ser conocimientos avanzados, pues explicaremos y pondremos a disposición de nuestros usuarios el código fuente completo del sitio web dinámico de ejemplo usado en este artículo, así como el código fuente completo de la aplicación AjpdSoft Gestor de contenidos Web. También publicaremos el script SQL de creación de las tablas de la base de datos. Por lo que sólo se requerirán conocimientos mínimos para modificar algunos ficheros png y jpg (para cambiar los logotipos) y un poco de PHP para modificar los ficheros PHP y cambiar algunos pequeños detalles para personalizarlos.

 

Decisión de las secciones dinámicas de la web, cómo crearlas, estructura de la base de datos

¿Qué son las secciones dinámicas de una web? ¿Cuáles desarrollar como dinámicas?

Las secciones dinámicas serán aquellas cuyo contenido pueda ser actualizado externamente por el usuario, sin necesidad de tener conocimientos de HTML ni de PHP. Con esta utilidad que explicaremos en este artículo, cualquier usuario podrá actualizar el contenido de las secciones dinámicas de la web.

En nuestro caso desarrollaremos un software con Delphi que será el que use el usuario para actualizar el contenido de las secciones dinámicas de la web. Aunque lo habitual suele ser desarrollar una sección de "administración" dentro de la propia web, con PHP, desde la que el usuario, iniciando sesión con sus credenciales, podría actualizar el contenido de la web. Pero, presisamente por ser lo típico, nosotros optaremos por realizar este proceso mediante un software desarrollado con Delphi, con una serie de ventajas respecto a una página web.

En primer lugar deberemos establecer qué secciones de nuestra web serán dinámicas (actualizables automáticamente mediante software). En este artículo crearemos las siguientes secciones dinámicas de ejemplo: Productos (con foto, categorías y ficha técnica), Destacados (sección que aparecerá en la portada o página principal de la web) y Noticias (que aparecerán en la parte izquierda de la portada de la web).

Para crear estas secciones y la web completa deberemos tener conocimientos HTML, pues hemos de crear un diseño y una primera estructura (con su encabezado, parte central y pié). Esta parte no la explicaremos aquí por motivos obvios, aunque sí colocaremos en nuestra sección de descargas un ejemplo de cada fichero PHP de la web.

 

Creación de las tablas MySQL necesarias para las secciones del sitio web dinámico

Dependiendo de las secciones que consideremos dinámicas variará la estructura de la base de datos que utilizaremos, en nuestro caso, como hemos comentado, tendremos las secciones: Productos, Destacados y Noticias. Por ello a continuación mostramos el script SQL para crear las tablas necesarias para guardar los datos de estas secciones dinámicas:

  • Para los artículos:
CREATE TABLE `articulo` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `referencia` varchar(20) default NULL,
  `texto` varchar(255) NOT NULL default '',
  `precio` varchar(10) default NULL,
  `idseccion` int(10) unsigned default NULL,
  `idimagen` int(11) default NULL,
  `idimagengrande` int(10) unsigned default NULL,
  `descripcion` text,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;
  • Para las secciones de los artículos (idseccion):
CREATE TABLE `seccion` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `nombre` varchar(50) NOT NULL default '',
  `descripcion` text,
  `idimagen` int(10) unsigned default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;
 

  •  

    Para los destacados:
CREATE TABLE `destacado` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `idimagen` int(10) unsigned default NULL,
  `titulo` varchar(100) NOT NULL default '',
  `fecha` datetime default NULL,
  `descripcion` text NOT NULL,
  `enlacemostrar` varchar(100) default NULL,
  `fechacaducidad` datetime default NULL,
  `activa` char(1) default NULL,
  `enlaceurl` varchar(200) default NULL,
  `enlaceblank` char(1) default NULL,
  `enlacehit` varchar(100) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;
  •  

    Para las noticias:
CREATE TABLE `noticia` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `idimagen` int(10) unsigned default NULL,
  `titulo` varchar(100) NOT NULL default '',
  `fecha` datetime default NULL,
  `descripcion` text NOT NULL,
  `enlacemostrar` varchar(100) default NULL,
  `fechacaducidad` datetime default NULL,
  `activa` char(1) default NULL,
  `enlaceurl` varchar(200) default NULL,
  `enlaceblank` char(1) default NULL,
  `enlacehit` varchar(100) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

Además, necesitaremos las siguientes tablas para el correcto funcionamiento de nuestra página web dinámica:

  • Necesitaremos una tabla para guardar las referencias a las imágenes, pues cada registro de cada sección anterior puede tener su imagen (idimagen). Estas imágenes podrán ser subidas al servidor FTP mediante la aplicación AjpdSoft Gestor de contenidos Web, el script para crear esta tabla:
CREATE TABLE `imagen` (
  `id` int(11) NOT NULL auto_increment,
  `imagen` varchar(255) NOT NULL default '',
  `imagenlocal` varchar(255) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;
  • Utilizaremos otra tabla para guardar los parámetros de configuración de la aplicación, para que el usuario pueda modificar el número de noticias a motrar, la ruta en el FTP de las imágenes y otros valores:
CREATE TABLE `configuracion` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `parametro` varchar(35) NOT NULL default '',
  `valor` varchar(100) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

Un ejemplo del contenido de la tabla anterior:

INSERT INTO `configuracion` (`id`,`parametro`,`valor`) VALUES 
 (1,'ruta_imagen','http://www.ajpdsoft.com/img/articulos/'),
 (2,'numero_maximo_noticias','10'),
 (3,'numero_maximo_destacados','10'),
 (4,'ruta_imagen_ftp','www/img/articulos'); 

  • En la web de ejemplo que publicamos en este artículo, incluimos una sección "Descargas" que requerirá de la tabla descargas:
CREATE TABLE `descarga` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `descripcion` varchar(100) NOT NULL DEFAULT '',
  `url` varchar(255) DEFAULT NULL,
  `tamano` float DEFAULT NULL,
  `idcliente` int(10) unsigned DEFAULT NULL,
  `fechaalta` datetime DEFAULT NULL,
  `rutalocal` varchar(255) DEFAULT NULL,
  `fichero` varchar(100) NOT NULL DEFAULT '',
  `publica` char(1) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
  • Puesto que la sección descargas requiere de usuario y contraseña, también utilizaremos la tabla "usuario" y "cliente" para guardar los usuarios que podrán acceder a la sección descargas y a qué cliente de nuestra empresa pertenece cada usuario:
CREATE TABLE `usuario` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `usuario` varchar(20) NOT NULL DEFAULT '',
  `contrasena` varchar(20) NOT NULL DEFAULT '',
  `idcliente` int(10) unsigned NOT NULL DEFAULT '0',
  `fechaalta` datetime DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 

CREATE TABLE `cliente` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(20) NOT NULL DEFAULT '',
  `apellidos` varchar(50) NOT NULL DEFAULT '',
  `nif` varchar(10) DEFAULT NULL,
  `direccion` varchar(50) DEFAULT NULL,
  `ciudad` varchar(20) DEFAULT NULL,
  `provincia` varchar(20) DEFAULT NULL,
  `pais` varchar(20) DEFAULT NULL,
  `cp` varchar(10) DEFAULT NULL,
  `telefono` varchar(20) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 

En la siguiente URL podremos descargar de forma gratuita el script SQL de creación de todas las tablas del sitio web dinámico:

AjpdSoft Gestor de Contenidos Web y Sitio Web Dinámico de ejemplo

 

Cómo crear la página principal de nuestro sitio web dinámico

En nuestro caso, la página principal mostrará una imagen o banner de encabezado, dos imágenes debajo de ésta, en la parte izquierda las noticias (sección dinámica) y en la parte derecha los destacados (sección dinámica). La página inicial de nuestra web de ejemplo quedará de esta forma:

AjpdSoft Cómo crear la página principal del nuestro sitio web dinámico

En esta página principal (fichero index.php) deberemos crear el diseño HTML (lógicamente) y para las secciones dinámicas de Noticias y Destacados deberemos añadir el código PHP necesario para acceder a la base de datos MySQL y mostrar los datos dados de alta por el usuario y activados con la aplicación AjpdSoft Gestor de contenidos Web.

Para el caso de las Noticias, incrustaremos el código PHP siguinte en la parte de HTML donde queramos que aparezcan del fichero index.php:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
<tr>
 <td style=" padding:15px; text-align:justify; ">
<table width="100%"  border="0" cellspacing="0" cellpadding="0">

	  <?	  
		  require('config.php');
conectarbd(); $numregistros = valorparametro("numero_maximo_noticias"); $sql = "SELECT fecha, titulo, descripcion, enlacemostrar, " . " enlaceurl, enlacehit, enlaceblank, idimagen " . " FROM noticia WHERE activa='S' " . "ORDER BY fecha DESC LIMIT 0,$numregistros"; $sqlResultado = mysql_query($sql); while ($row = mysql_fetch_array($sqlResultado)) { $fecha = $row["fecha"]; $titulo = $row["titulo"]; $descripcion = $row["descripcion"]; $enlacemostrar = $row["enlacemostrar"]; $enlaceurl = $row["enlaceurl"]; $enlacehit = $row["enlacehit"]; $enlaceblank = $row["enlaceblank"]; $idimagen = $row["idimagen"]; if ($idimagen != 0 & $idimagen != "") { $imagen = obtenerimagen($idimagen); $imagen = valorparametro("ruta_imagen") . $imagen; } else { $idimagen = 0; } if ($enlaceblank) { $enlaceblank = "_blank"; } else { $enlaceblank = "_self"; } echo "<tr><td><br>"; //fecha if ($fecha != "") { echo "<span class='fechanoticia'>".$fecha."</span><br><br>"; } //titulo echo "<span class='titulonoticia'>".$titulo."</span>"; echo "<br>"; //descripcion echo $descripcion; echo "<br><br>"; //Enlace if ($enlaceurl != "") { echo "<a href='" . $enlaceurl . "' title='" . $enlacehit . "' target=" . $enlaceblank . " ><img src='img\ver.gif'" . " border='0' align='left' width='67' height='15'></a>"; } //Imagen if ($idimagen != 0) { echo "<img align='right' width='103' src=" . $imagen . " />"; }
mysql_close($enlace); echo "<br></td></tr>"; } ?> </table> </td> </tr> </table> </td>
 

De la misma forma, para el caso de los destacados, en el fichero index.php, en la parte en que queramos que aparezcan del HTML, añadiremos el siguiente código PHP:

		  <table width="100%"  border="0" cellpadding="0" 
		      cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td height="16" valign="top"> </td>
		    <td valign="top"> </td>
          </tr>
		  

		  <?
		      require ("config.php");
	          conectarbd ();
			  $numregistros = valorparametro("numero_maximo_destacados");
			  $sql = "SELECT fecha, titulo, descripcion, enlacemostrar, enlaceurl, " 
			      . " enlacehit, enlaceblank, idimagen "
			      . " FROM destacado "
				  . " WHERE activa='S' ORDER BY id desc LIMIT 0,$numregistros";
			  $sqlResultado = mysql_query($sql);


  			  while ($row = mysql_fetch_array($sqlResultado))
  			  {
			    $titulo = $row["titulo"];
    			$descripcion = $row["descripcion"];
    			$enlacemostrar = $row["enlacemostrar"];
    			$enlaceurl = $row["enlaceurl"];
    			$enlacehit =  $row["enlacehit"];
    			$enlaceblank =  $row["enlaceblank"];
			    $idimagen = $row["idimagen"];
    			if ($idimagen != 0 & $idimagen != "")
    			{
      				$imagen = obtenerimagen($idimagen);
      				$imagen = valorparametro("ruta_imagen") . $imagen;
				}
				else
				{
			  		$idimagen = 0;
				}

				//falla, no devuelve el valor
				if ($enlaceblank)
				{
			  		$enlaceblank = "_blank";
				}
				else
				{
			  		$enlaceblank = "_self";
				}

			    echo "<tr><td valign='top' bgcolor='#ffffff' style='padding:15px;'>";			

				//Imagen
				if ($idimagen != 0)
				{
					echo "<img style='padding-right:10px' align='left' width='130' src=" . 
					    $imagen . " /></td>";
				}

  			    echo "<td valign='top' bgcolor='#ffffff' style='padding:15px;'>";

				//titulo
				echo "<span class='titulodestacado'>".$titulo;

				//fecha
				if ($fecha != "")
				{
					echo " (".$fecha.")<br>";
				}

				//fin de titulo
				echo "</span>";

				//descripcion
				echo "<br><div style='text-align:justify'>".$descripcion."</div>";

				//Enlace
				if ($enlaceurl != "")
				{
					echo "<div style='text-align:right'><a href='" . $enlaceurl . 
					    "' title='" . $enlacehit ."' target=" . $enlaceblank . 
						" >[+ info]</a></div>";
				}

				echo "</td></tr>";
		  }

		  mysql_close($enlace);
		?>

        </table>  </td>

      </tr>

    </table>
 

Notas sobre el código PHP anterior:

1. Hemos dejado un poco de código HTML al principio y al final para que se vea cómo se incrusta el código PHP en el HTML.

2. En el código PHP hay varias funciones: conectarbd, valorparametro y obtenerimagen que hemos ubicado en otro fichero PHP, llamado config.php (de ahí la línea de código require('config.php'), con el siguiente código:

<?
  //para conectar con la bd MySQL
  function conectarbd ()
  {
    $servidor = "localhost";
    $usuariobd = "usuariobdajpdsoft";
    $contrasena = "contraseñausuariobdajpdsoft";
    $nombrebd = "nombrebdajpdsoft";
    $enlace = mysql_connect($servidor, $usuariobd, $contrasena);
    if (!$enlace) 
    {
      die();
    }

    @mysql_select_db($nombrebd, $enlace)
        or die ();
  }

  //para obtener el valor de un parámetro
  function valorparametro($parametro)
  {
    $sql = "SELECT parametro, valor FROM "
. "configuracion WHERE parametro='$parametro'"; $sqlResultado = mysql_query($sql); $row = mysql_fetch_array($sqlResultado); return $row["valor"]; } function obtenerimagen($idimagen) { $sql = "SELECT imagen FROM imagen WHERE id=$idimagen"; $sqlResultado = mysql_query($sql); $row = mysql_fetch_array($sqlResultado); return $row["imagen"]; } ?>
 

La sección dinámica y el fichero PHP para los artículos (productos)

Para el caso de la sección Productos, cuando el usuario pulsa en el enlace del menú de la página principal index.php "Productos", lo emplazaremos al fichero "productos.php", que en primer lugar mostrará el encabezado típico HTML de nuestro sitio web con el diseño deseado, el menú, las noticias en la parte izquierda (como hemos explicado aquí) y las categorías de los productos de nuestro sitio web dinámico. Quedará de la siguiente forma:

1. Si no se ha pulsado en una categoría (si se ha accedido a los productos) mostrará las categorías:

AjpdSoft La sección dinámica y el fichero PHP para los artículos (productos)

Si se ha pulsado una categoría, pasaremos como parámetro por la URL el ID de la categoría, por lo que mostrará los productos de esta categoría:

AjpdSoft La sección dinámica y el fichero PHP para los artículos (productos)

Utilizaremos el fichero productos.php, como siempre, con su correspondiente encabezado HTML con el diseño de la página. En la parte en que queramos que aparezcan las categorías de los productos (si no se ha pulsado en una categoría) o los productos de la categoría seleccionada (si se ha pulsado en el enlace de una categoría) añadiremos el siguiente código PHP incrustado en el HTML:

		<table width="100%"  border="0" cellpadding="0" 
		cellspacing="0" bgcolor="#FFFFFF">
		<tr>
            <td height="16" valign="top"> </td>
		    <td valign="top"> </td>
          </tr>
		  <?
		   	//si se ha pulsado en una categoría mostrar 
			//los productos de ésta
			if ($id != "") 
			{ 
		      $sql = "SELECT id, idimagen, referencia, texto, " 
			      . " descripcion, idimagengrande " .
  			      " FROM articulo WHERE idseccion=" . 
				  $id . " ORDER BY id ASC";
			  $sqlResultado = mysql_query($sql);
			  while ($row = mysql_fetch_array($sqlResultado))
  			  {	
			    $id = $row["id"];
				$idimagen = $row["idimagen"];
				$referencia = $row["referencia"];
			    $texto = $row["texto"];
				$descripcion = $row["descripcion"];
				$idimagengrande = $row["idimagengrande"];
				
			    echo "<td valign='top' bgcolor='#ffffff' "
				    . "style='padding-left:15px;padding-right:15px;'>";
				
					if ($idimagen != 0 & $idimagen != "")
					{
					  $imagen = obtenerimagen($idimagen);
					  $imagen = valorparametro("ruta_imagen") . $imagen;
					}
					else
					{
					  $idimagen = 0;
					}
				//Imagen
				if ($idimagen != 0)
				{
			  		echo "<img style='padding-right:10px'"
  					    . "align='left' width='130' src=" . 
						$imagen . " />";
				}
					
						
			      
				echo "</td>";
    			echo "<td bgcolor='#ffffff' style='" .
				    "padding-left:15px;padding-right:15px;'>";
	    		
				echo "<span class='titulodestacado'>" .
				    $referencia . "<br></span>";
			    echo "<div style='text-align:justify'>".$texto."</div>";
				
				if ($descripcion != "" or ($idimagengrande != "" 
				    or $idimagengrande != ""))
				{
				  echo "<br><hr style='color:#BB0000; height:1px;'>"
				      . "<div style='text-align:right;'> "
					  . "<a href='#' onclick='abrirVentana(" . 
					  $id . ")' style=' text-decoration:none;'>"
					  . "[Más info]</a></div>";
			    }
									
				echo "<br></td></tr>";			  
		      }
		    }
			else
			{?>
			  <tr><td colspan='2' style='padding:10px; '>
			  <br>
			  <p style="text-align:justify; color:#666666;">
			  A continuación podrá visualizar un listado de nuestros 
			  productos agrupados por categorías. </p>
			  <p style="text-align:justify; color: 
			  #FF6400;font-weight: bold;">Categorías</p>
			  <blockquote>
		    <?
     		  $sql = "SELECT id, nombre " 
			      . " FROM seccion "
				  . " WHERE nombre is not null ORDER BY nombre ASC";
			  $sqlResultado = mysql_query($sql);
  			  while ($row = mysql_fetch_array($sqlResultado))
  			  {
			    $titulo = $row["nombre"];
			    $id = $row["id"];			  
			    echo "<a href='productos.php?id=" . $id . "'> - " . 
				    $titulo  . "</a><br><br>";			
        	  }
			  echo"</blockquote>";
			  echo "<tr><td><br>";
			  
			}
		    mysql_close($enlace);
            ?>		
        </table></td>
      </tr>
    </table>
 

Ventana de detalle (ficha técnica) del producto

A continuación mostramos el código fuente PHP para mostrar el detalle del productos (artículo) cuando el usuario pulsa "Más info", dicho código quedará en el fichero detalle.php:

<?
  session_start();  
?>

<html>
<head>
<title>Detalles del producto</title>
<link href="../css/estilo.css" rel="stylesheet" type="text/css">
</head>

<body class="detalle" scroll="no">

<?
    require ("config.php");
	conectarbd ();
    if ($idDetalle != "") 
	{
	  $sql = "SELECT id, idimagen, referencia, texto, descripcion, " .
	      "idimagengrande, precio FROM articulo WHERE id=" . 
		  $idDetalle . " ORDER BY id ASC";
	  $sqlResultado = mysql_query($sql);
	  
	  while ($row = mysql_fetch_array($sqlResultado))
  	  {	
		$idimagen = $row["idimagen"];
		$referencia = $row["referencia"];
	    $texto = $row["texto"];
		$descripcion = $row["descripcion"];
		$idimagengrande = $row["idimagengrande"];
		$precio =  $row["precio"];
		?>
		<table cellpadding="0" cellspacing="0" align="center" 
		style="width:99%; height:99%; background-color:#FFFFFF;">
		  <tr>
		    <td style="padding-left:15px;padding-right:15px;padding-top:15px;
			padding-bottom:5px; background-color:#FFFFFF;">
			
			  <span  class="titulodestacado" style="font-size:12px;">
			  <img style="padding-right:10px;" align="left" src="img/logo.gif" />
			
		    <?	
			    echo "$referencia ";
			?>
			  
			  </span>
			  
			  <hr style='color:#BB0000; height:1px;'>
			<?	
			if ($idimagengrande != 0 & $idimagengrande != "")
			{
			  $imagen = obtenerimagen($idimagengrande);
			  $imagen = valorparametro("ruta_imagen") . $imagen;
			}
			else
			{
			  $idimagengrande = 0;
			}
			//Imagen
			if ($idimagengrande != 0)
			{
			  
			  echo "<img style='padding-right:10px' align='"
			     . " left' width='180' src=" . 
			     $imagen . " />";
			}
			   echo "<br><div  style='text-align:justify;color:#333333;'>" . 
			       $texto . "</div><br><br>";
			
		    ?>
			  
		    </td>
		  </tr>
		  <tr>
		  <td style="padding-left:15px; padding-right:15px; 
		      background-color:#FFFFFF;">
		  <?

            //mostramos el precio si ha iniciado sesión
			if (! empty($_SESSION["nombre_usuario"])) 
            {
			  if (! empty($precio)) 
			  {
                echo "<b>Precio estimado:<b> " . $precio . " euros<br><br>";
		      }		
            }

		  if ($descripcion != "")
			{
			    echo "<span  class='titulodestacado' style='font-size:12px;'>" 
				   . "Ficha técnica del producto: </span><br><hr style='color:"
				   . "#BB0000; height:1px;'><br>";
			    echo "<div  id='scroll' style='text-align:justify;	color:#333333; '>".
				    $descripcion."</div>";				
			}
		  ?>
			<br /><hr style='color:#BB0000; height:1px;'><br>
		  
		  </td>
		  </tr>
		</table>
		
		<?				
									
				echo "<br></td></tr>";			  
		      }
		    }
		    mysql_close($enlace);
            ?>
		  
</body>
</html>
 

Nota sobre el código: como se puede observar, usamos las sesiones de PHP para establecer si debemos mostrar el precio del producto o artículo en función de si es un usuario registrado (que ha iniciado sesión) o no. En el siguiente artículo explicamos el uso de las sesiones de PHP para este cometido:

Uso de sesiones en PHP, variables de sesión, cerrar sesión, iniciar sesión

 

Otras secciones de nuestro sitio web con una parte dinámica

De la misma forma que hemos explicado para las secciones anteriores, si en alguna otra sección queremos mostrar las noticias (siguiendo el diseño establecido), como por ejemplo en la sección "Empresa", utilizaremos el mismo código PHP explicado aquí para mostrar las noticias en la parte del HTML que queramos.

En nuestro ejemplo mostramos las noticias en todas las secciones de la web:

AjpdSoft Otras secciones de nuestro sitio web con una parte dinámica

Y, por supuesto, si queremos añadir más secciones dinámicas sólo tendremos que añadir la tabla correspondiente en MySQL y el fichero PHP con el código para mostrar estos datos.

En la siguiente URL podremos descargar de forma gratuita un sitio web dinámico de ejemplo con el código PHP, HTML, script de creación de las tablas y aplicación de gestor de contenidos:

AjpdSoft Gestor de Contenidos Web y Sitio Web Dinámico de ejemplo

 

La aplicación AjpdSoft Gestor de contenidos Web en Delphi para modificar contenidos

Detalles técnicos y funcionamiento de AjpdSoft Gestor de contenidos Web

Lo explicado anteriormente servirá para mostrar la página web dinámica al usuario que la visite. Dicho código HTML y PHP mostrará las secciones fijas (HTML) y las secciones dinámicas (HTML y PHP). Para el caso de las secciones dinámicas, el código PHP mostrará los datos que el usuario administrador haya decidido. A continuación explicamos cómo hemos desarrollado la aplicación AjpdSoft Gestor de Contenidos Web para permitir al usuario administrador introducir datos para las secciones dinámicas.

AjpdSoft Gestor de Contenidos Web ha sido desarrollada en Delphi, como ya hemos comentado la administración de la web también podría haberse realizado en PHP (solicitando usuario y contraseña), pero hemos optado por una aplicación de escritorio porque ofrece más posibilidades y es más sencilla de desarrollar (subir ficheros al FTP, control de errores, petición de datos al usuario, etc.).

 

Para aquellos usuarios desarrolladores que quieran realizar alguna modificación en el código fuente de la aplicación han detener en cuenta que utiliza dos componentes de pago:

  • DevExpress ExpressQuantumGrid: este componente es de pago pero es sustituible por el componente que incluye Delphi: DBGrid.
  • EurekaLog: componente de pago para captura de errores profesional, se puede quitar la referencia a este componente para que sea el propio Delphi (o el desarrollador) el que haga la captura.

En el siguiente vídeo explicamos cómo funciona la aplicación AjpdSoft Gestor de Contenidos Web:

 

Descarga y configuración inicial de la aplicación AjpdSoft Gestor de contenidos Web

Si eres usuario registrado (puedes hacerlo desde aquí gratuitamente), puedes descargar la aplicación AjpdSoft Gestor de Contenidos Web, el código fuente en Delphi 6 así como el sitio web dinámico completo de este ejemplo desde:

AjpdSoft Gestor de Contenidos Web y sitio web dinámico

La descarga incluye:

  • Aplicación AjpdSoft Gestor de contenidos Web.
  • Código fuente en Delphi 6 de la aplicación AjpdSoft Gestor de contenidos Web.
  • Ficheros PHP, css, jpg y png del sitio web dinámico completo de ejemplo.
  • Script SQL de creación de las tablas para la base de datos del sitio web dinámico.

Una vez realizada la descarga, si ya disponemos del hosting y hemos creado las tablas de la web dinámica como explicamos aquí, podremos configurar la aplicación AjpdSoft Gestor de Contenidos Web para acceder y gestionar los contenidos dinámicos. Ejecutaremos el fichero adminweb.exe (sólo necesita la librería libmysql41.dll que incluimos en la descarga, el resto de ficheros pertenece al código fuente y puede ser eliminado, si no se quieren realizar cambios en la aplicación).

En el primer acceso a la aplicación AjpdSoft Gestor de Contenidos Web, puesto que aún no hemos configurado los datos de acceso a la base de datos y al servidor FTP, nos mostrará la pestaña "Configuración". Deberemos introducir los siguientes datos:

En "Servidor":

  • Nombre/IP servidor: IP o nombre del servidor donde tengamos alojado el servidor de base de datos MySQL, en nuestro caso "ajpdsoft.com".
  • Usuario BD: nombre el usuario de la base de datos MySQL del hosting que dimos de alta aquí, en el ejemplo "usudinamica".
  • Contraseña: contraseña del usuario de la base de datos, en el ejemplo "123456".
  • Nombre BD: nombre del catálogo o base de datos dado de alta en el hosting, como explicamos aquí, en el ejemplo "bddinamica".
  • Protocolo: versión de la base de datos MySQL (con mysql-4.1 permite acceso a base de datos MySQL 5). Dependiendo del Protocolo elegido se requerirá su correspondiente librería. En la descarga de este artículo incluimos la librería para MySQL 4 y 5.
  • Puerto: puerto para acceso a la base de datos MySQL, normalmente el puerto por defecto 3306.
  • Conectar al iniciar: si marcamos esta opción cada vez que ejecutemos el fichero adminweb.exe se conectará directamente al servidor MySQL con los datos guardados.

En "FTP:

  • URL: dirección del servidor ftp, en nuestro caso "ftp.ajpdsoft.com".
  • Usuario: nombre del usuario FTP con permisos de acceso a las carpetas del sitio web.
  • Contraseña: contraseña del usuario FTP anterior.

Una vez introducidos los datos de acceso, pulsaremos en "Guardar configuración" y en "Conectar":

AjpdSoft Descarga y configuración inicial de la aplicación AjpdSoft Gestor de contenidos Web

Si todo es correcto, al pulsar en "Conectar" nos mostrará en la parte inferior los parámetros de configuración de la aplicación que previamente insertamos ejecutando el script SQL (como indicamos aquí). Deberemos cambiar el valor de estos parámetros para adaptarlo a nuestras necesidades:

AjpdSoft Descarga y configuración inicial de la aplicación AjpdSoft Gestor de contenidos Web

Una vez configurada la aplicación AjpdSoft Gestor de Contenidos Web podremos usarla para personalizar los contenidos de nuestro sitio web dinámico. Por ejemplo, desde la pestaña "Noticias", pulsando en el botón "+" e introduciendo los datos correspondientes y pulsando en Validar (como indicamos en este vídeo):

AjpdSoft Descarga y configuración inicial de la aplicación AjpdSoft Gestor de contenidos Web

 

 

Cómo preparar un hosting para instalar nuestro sitio web dinámico

Requisitos del hosting para instalar una web dinámica

Para que nuestra web dinámica funcione, como ya hemos comentado, necesitaremos un hosting con soporte de base de datos MySQL (u otra como PostgreSQL), necesitaremos un hosting que permita subir y compilar ficheros PHP (con soporte para PHP) y que permita acceso externo a la base de datos MySQL (para la aplicación AjpdSoft Gestor de Contenidos Web). Lógicamente también necesitaremos espacio web, con unas 100MB será suficiente, aunque esto dependerá de la cantidad de productos, descargas e imágenes que queramos publicar en el sitio web.

 

Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Una vez contratado un hosting con estas características, accederemos al panel de control del hosting para crear la base de datos y las tablas de nuestro sitio web dinámico. En este ejemplo usamos el hosting de la empresa española Dinahosting (aunque para el resto de hosting el proceso es similar). Accederemos al panel de control y buscaremos la opción de base de datos MySQL (o la elegida):

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Crearemos una nueva base de datos (Creación de BBDD), introduciremos el Nombre de la BBDD (nombre del esquema o base de datos, en nuestro caso "bddinamica"), introduciremos el usuaio propietario de la BBDD (en nuestro caso "usudinamica") e introduciremso la contraseña para este usuario (en nuestro caso "123456"). Anotaremos estos datos que luego necesitaremos para la aplicación AjpdSoft Gestor de Contenidos Web y pulsaremos en "Crear base de datos":

 AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Una vez creada la base de datos pulsaremos en "Ir a phpMyAdmin", se trata de un administrador de base de datos MySQL vía web que suelen tener todos los hosting:

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Desde phpMyAdmin pulsaremos en "Ventana de consulta":

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Pulsaremos en el enlace "Importar archivos", a continuación pulsaremos en "Examinar":

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Buscaremos la carpeta "Script SQL creación tablas" de la descarga de AjpdSoft Gestor de Contenidos Web (disponible en esta web) donde está el fichero sql con el script de creación de las tablas necesarias para el sitio web dinámico:

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

A continuación pulsaremos en "Continuar" para ejecutar el contenido del fichero "Script SQL Creación tablas.sql":

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Si todo es correcto en phpMyAdmin aparecerán 10 tablas: articulo, cliente, configuración (con 6 registros), descarga, destacado, imagen, noticia, seccion, sesion y usuario. Todas estas tablas serán usadas, como ya hemos explicado en este artículo, por nuestro sitio web dinámico:

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

 

Preparación de los ficheros de nuestro sitio web dinámico (logos, imágenes, diseño, etc.)

Por supuesto, antes de subir los ficheros que compondrán nuestro sitio web al servidor FTP para hacerlos públicos a los usuarios que visiten nuestra web, deberemos modificar y cambiar el diseño de los ficheros PHP, estilos css, imágenes jpg y png de nuestra web para adaptarlos a la imagen corporativa de nuestra empresa.

Modificaremos todo lo necesario para que la web quede con el diseño deseado, principalmente los ficheros que componen el banner del encabezado (img/cabecera.png), y la página principal (img/cabecera02.png y img/inicio.jpg). También la imagen de la sección "Empresa": img/empresa01.png, así como el mapa de localización de la empresa: img/mapa.png.

Por supuesto, deberemos editar todos los ficheros .php (contacto.php, descargas.php, detalle.php, empresa.php, index.php, localizacion.php y productos.php) con un editor de texto plano y cambiar el nombre de "Sitio web dinámico AjpdSoft" y otros datos particulares por los de la empresa en cuestión.

Y, además, algo fundamental, deberemos modificar el fichero config.php que contiene los datos de acceso a la base de datos creada anteriormente, editaremos el fichero config.php con un editor de texto plano y modificaremos los siguientes datos por defecto:

$servidor = "localhost";
$usuariobd = "usudinamica";
$contrasena = "123456";
$nombrebd = "bddinamica";

Por los datos introducidos al crear la base de datos. Guardaremos los cambios del fichero config.php.

 

Subir ficheros del sitio web al servidor FTP

Una vez creado el diseño y modificados los datos de acceso a la base de datos del fichero config.php, podremos subir los ficheros al servidor FTP para probar nuestro sitio web en real. Para ello deberemos disponer de usuario y contraseña FTP (que nos habrá proporcionado nuestro alojamiento o hosting contratado) y de un cliente FTP como Filezilla Client.

Instalaremos Filezilla Client, lo ejecutaremos y accederemos al menú "Archivo" - "Gestor de sitios":

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Pulsaremos en "Nuevo sitio":

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

En la parte izquierda introduciremos el nombre del nuevo sitio FTP, por ejemplo "ajpdsoft", a la derecha introduciremos los siguientes datos:

  • Servidor: url del servidor ftp, por ejemplo ftp.ajpdsoft.com.
  • Puerto: si el puerto es diferente al de defecto (21) lo indicaremos aquí.
  • Server Type: seleccionaremos "FTP - File Transfer Protocol".
  • Logon Type: seleccionaremos "Normal".
  • Usuario: introduciremos el usuario con permisos de escritura en la carpeta FTP del servidor, este usuario nos lo suele proporcionar el servidor de hosting que hayamos contratado o bien podremos consultarlo en el panel de control del hosting.
  • Contraseña: contraseña del usuario anterior.

Pulsaremos en "Aceptar" para guardar el sitio y así no tener que volver a introducir los datos en Filezilla Client para futuras conexiones:

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

A continuación pulsaremos el botón del gestor de sitios y seleccionaremos el sitio FTP creado anteriormente:

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Si todo es correcto realizará la conexión al servidor FTP y nos mostrará las carpetas remotas que haya creadas, en nuestro caso, como prueba, crearemos una carpeta dentro de nuestro servidor FTP llamada "dinamico" donde alojaremos el sitio web dinámico de ejemplo de este artículo. Lo normal es subir los ficheros al raíz del sitio para que el usuario, al teclear la url www.nuestro_dominio.com acceda directamente. En la parte izquierda (sitio local) nos situaremos en la carpeta que contiene los ficheros que componen nuestra web dinámica (ficheros PHP, png, jmb, css, etc.) que ya habremos modificado para adaptarlos a la imagen corporativa de nuestra empresa como indicamos aquí, en la parte derecha (sitio remoto) nos posicionaremos en la carpeta raíz de nuestro sitio FTP (normalmente www). Seleccionaremos todos los ficheros de la parte izquierda que queramos subir, pulsaremos con el botón derecho del ratón sobre ellos y seleccionaremos la opción del menú emergente "Subir":

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Filezilla Client nos mostrará el estado de la subida de cada fichero:

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

Una vez subidos todos los ficheros prodremos realizar una primera prueba de visualización de nuestro sitio web dinámico, desde cualquier navegador web escribiremos la URL de nuestro sitio web, en nuestro caso:

Ejemplo sitio web dinámico por AjpdSoft

Quedará algo así (sin noticias ni destacados pues aún no los hemos creado):

AjpdSoft Preparación de la base de datos MySQL y las tablas para el sitio web dinámico

 

Artículos relacionados

 

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del Proyecto AjpdSoft.

Artículo en inglés.


Anuncios


Enviado el Domingo, 19 septiembre a las 17:26:27 por ajpdsoft
Este sitio web NO CONTIENE malware, todos los programas con código fuente aquí. Autor: Alonso Javier Pérez Díaz Google+ Síguenos en Google+