PHP: Cmo crear un sitio web con secciones dinmicas con HTML,
PHP, Delphi y MySQL
Explicamos paso a paso y con el cdigo fuente necesario (tanto en
PHP, HTML, como en Delphi y las tablas para MySQL) cmo desarrollar
un sitio web dinmico (mezcla de esttico y dinmico). Explicamos cmo
hacer dinmicas algunas secciones de un sitio web esttico (noticias,
productos o artculos). Adems, explicamos cmo desarrollar la
aplicacin Delphi que actualizar los datos de la pgina web.
Definicin de sitio web dinmico qu es una web dinmica?
Diferencias entre web dinmica y esttica. o Definicin sitio web
dinmico. o Webs dinmicas vs. estticas. Requisitos para desarrollar
una web dinmica. Decisin de las secciones dinmicas de la web, cmo
crearlas, estructura de la base de datos. o Qu son las secciones
dinmicas de una web? Cules desarrollar como dinmicas?. o Creacin de
las tablas MySQL necesarias para las secciones del sitio web
dinmico. o Cmo crear la pgina principal de nuestro sitio web
dinmico. o La seccin y el fichero PHP para los artculos
(productos). o Ventana de detalle (ficha tcnica) del producto. La
aplicacin AjpdSoft Gestor de contenidos Web en Delphi para
modificar contenidos. o Detalles tcnicos y funcionamiento de
AjpdSoft Gestor de contenidos Web. o Descarga y configuracin
inicial de la aplicacin AjpdSoft Gestor de contenidos Web. Cmo
preparar un hosting para instalar nuestro sitio web dinmico. o
Requisitos del hosting para instalar una web dinmica. o Preparacin
de la base de datos MySQL y las tablas para el sitio web dinmico. o
Preparacin de los ficheros de nuestro sitio web dinmico (logos,
imgenes, diseo, etc.). o Subir ficheros del sitio web al servidor
FTP. Artculos relacionados. Crditos.
Definicin de sitio web dinmico qu es una web dinmica?
Diferencias entre web dinmica y estticaDefinicin sitio web
dinmicoUn sitio Web dinmico es aquel que muestra su contenido
obtenindolo, 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, segn el contenido de las
tablas de la base de datos. Mediante este mtodo, los
desarrolladores web crean tambin 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 deHTML ni de
desarrollo por parte del usuario. Por supuesto, dependiendo del
tipo de web, este mtodo de dinamismo se puede aprovechar para
cualquier uso: foros, comunidad de usuarios, descargas, perfiles,
comentarios, votos, libros de visita, compra de productos, catlogo
de productos, encuestas, etc.
Webs dinmicas vs. estticasLa ventaja principal de las web
dinmicas frente a las estatticas es que con las dinmicas, las
secciones y
posibilidades son casi infinitas. En una web dinmica podremos
tener foros, encuestas, comunidad de usuarios, etc. algo imposible
en una web esttica. Adems, las webs dinmicas 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 gestin de
contenidos profesionales. stos permiten crear un sitio web
completamente dinmico casi sin conocimientos de HTML ni de
programacin web. Permiten aadirles mdulos de foros, galeras de
imgenes y dems, todos ellos ya desarrollados y gratuitos. El
inconveniente principal de los sitios web dinmicos frente a los
estticos es que el desarrollo de este tipo de Web dinmicas es
muchsimo ms complicado que el de una web esttica. Para desarrollar
una web dinmica se requieren conocimientos de programacin (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 dinmicas suelen ser ms lentas en su
carga que las webs estticas, pues requieren de acceso a base de
datos y de compilacin 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 dinmicaEn primer lugar
deberemos disponer de un servidor de hosting (alojamiento web) que
permita usar base de datos MySQL y que permita y soportePHP. Pues
los datos de las secciones dinmicas de la web se guardarn en la
base de datos MySQL que crearemos a tal efecto y con el lenguaje de
programacin web PHP accederemos a estos datos para mostrarlos en la
web. Adems de este requisito, para el software externo que usar el
usuario propieratio del sitio web para actualizar las secciones
dinmicas, el servidor de hosting debe permitir el acceso externo
(desde fuera del servidor MySQL) a la base de datos MySQL.
Lgicamente, necesitaremos un servicio de FTP con usuario y
contrasea para poder subir los ficheros html, php, css, png y jpg
que compondrn 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 artculo: Montar un servidor web y un sitio
web en Windows 7 con AppServ y Joomla! Se necesitarn conocimientos
mnimos de HTML, PHP, Delphi y base de datos MySQL, no han de ser
conocimientos avanzados, pues explicaremos y pondremos a disposicin
de nuestros usuarios el cdigo fuente completo del sitio web dinmico
de ejemplo usado en este artculo, as como el cdigo fuente completo
de la aplicacin AjpdSoft Gestor de contenidos Web. Tambin
publicaremos el script SQL de creacin de las tablas de la base de
datos. Por lo que slo se requerirn conocimientos mnimos para
modificar algunos ficheros png y jpg (para cambiar los logotipos) y
un poco de PHP para modificar los ficheros PHP y cambiar algunos
pequeos detalles para personalizarlos.
Decisin de las secciones dinmicas de la web, cmo crearlas,
estructura de la base de datosQu son las secciones dinmicas de una
web? Cules desarrollar como dinmicas?Las secciones dinmicas sern
aquellas cuyo contenido pueda ser actualizado externamente por el
usuario, sin necesidad de tener conocimientos deHTML ni de PHP. Con
esta utilidad que explicaremos en este artculo, cualquier usuario
podr actualizar el contenido de las secciones dinmicas 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
dinmicas de la web. Aunque lo habitual suele ser desarrollar una
seccin de "administracin" dentro de la propia web, con PHP, desde
la que el usuario, iniciando sesin con sus credenciales, podra
actualizar el contenido de la web. Pero, presisamente por ser lo
tpico, nosotros optaremos por realizar este proceso mediante un
software desarrollado con Delphi, con una serie de ventajas
respecto a una pgina web. En primer lugar deberemos establecer qu
secciones de nuestra web sern dinmicas (actualizables
automticamente mediante software). En este artculo crearemos las
siguientes secciones dinmicas de ejemplo: Productos (con foto,
categoras y ficha tcnica), Destacados (seccin que aparecer en la
portada o pgina principal de la web) y Noticias (que aparecern 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 diseo 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 seccin de
descargas un ejemplo de cada fichero PHP de la web.
Creacin de las tablas MySQL necesarias para las secciones del
sitio web dinmicoDependiendo de las secciones que consideremos
dinmicas 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 continuacin mostramos
el script SQL para crear las tablas necesarias para guardar los
datos de estas secciones dinmicas:
Para los artculos:
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`) ) TYPE=MyISAM; Para las
secciones de los artculos (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`) ) TYPE=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`) ) TYPE=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`) ) TYPE=MyISAM;Adems, necesitaremos las
siguientes tablas para el correcto funcionamiento de nuestra pgina
web dinmica:
Necesitaremos una tabla para guardar las referencias a las
imgenes, pues cada registro de cada seccin anterior puede tener su
imagen (idimagen). Estas imgenes podrn ser subidas al servidor FTP
mediante la aplicacin 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`) ) TYPE=MyISAM;
Utilizaremos otra tabla para guardar los parmetros de configuracin
de la aplicacin, para que el usuario pueda modificar el nmero de
noticias a motrar, la ruta en el FTP de las imgenes 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`) )
TYPE=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 artculo, incluimos
una seccin "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 seccin descargas requiere de usuario y contrasea, tambin
utilizaremos la tabla "usuario" y "cliente" para guardar los
usuarios que podrn acceder a la seccin 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 creacin de todas las tablas del sitio web dinmico:
AjpdSoft Gestor de Contenidos Web y Sitio Web Dinmico de
ejemplo
Cmo crear la pgina principal de nuestro sitio web dinmico
En nuestro caso, la pgina principal mostrar una imagen o banner
de encabezado, dos imgenes debajo de sta, en la parte izquierda las
noticias (seccin dinmica) y en la parte derecha los destacados
(seccin dinmica). La pgina inicial de nuestra web de ejemplo quedar
de esta forma:
En esta pgina principal (fichero index.php) deberemos crear el
diseo HTML (lgicamente) y para las secciones dinmicas de Noticias y
Destacados deberemos aadir el cdigo PHP necesario para acceder a la
base de datos MySQL y mostrar los datos dados de alta por el
usuario y activados con la aplicacin AjpdSoft Gestor de contenidos
Web. Para el caso de las Noticias, incrustaremos el cdigo PHP
siguinte en la parte de HTML donde queramos que aparezcan del
fichero index.php: