php pagina

37
PHP : Cómo crear un sitio web con secciones dinámicas con HTML, PHP, Delphi y MySQL 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 . o Definición sitio web dinámico . o Webs dinámicas vs. estáticas . Requisitos para desarrollar una web dinámica . Decisión de las secciones dinámicas de la web, cómo crearlas, estructura de la base de datos . o ¿Qué son las secciones dinámicas de una web? ¿Cuáles desarrollar como dinámicas? . o Creación de las tablas MySQL necesarias para las secciones del sitio web dinámico . o Cómo crear la página principal de nuestro sitio web dinámico . o La sección y el fichero PHP para los artículos (productos) . o Ventana de detalle (ficha técnica) del producto . La aplicación AjpdSoft Gestor de contenidos Web en Delphi para modificar contenidos . o Detalles técnicos y funcionamiento de AjpdSoft Gestor de contenidos Web . o 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 . o Requisitos del hosting para instalar una web dinámica . o Preparación de la base de datos MySQL y las tablas para el sitio web dinámico . o Preparación de los ficheros de nuestro sitio web dinámico (logos, imágenes, diseño, etc.) . o Subir ficheros del sitio web al servidor FTP . Artículos relacionados . Créditos . 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.

Upload: onild-reyes

Post on 11-Aug-2015

44 views

Category:

Documents


0 download

TRANSCRIPT

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: