Tutorial publicado en el #2 de la revista NeoPixel.
Es un hecho que internet esta cambiando constantemente, que HTML y Flash no es ya lo único que debes de saber para desarrollar y diseñar un sitio presentable.
En la actualidad los clientes y las empresas que buscan y tienen la necesidad de un sitio en internet no solo esperan una página atractiva visualmente; la interacción con los usuarios es vital en estos días. La velocidad y facilidad con que uno tiene acceso a la información sin importar del tipo que esta sea, nos obliga dia a dia a ofrecerle a los usuarios o clientes contenido mas fresco y actualizado. Nos referimos a que, las publicaciones periódicas como revistas tardan de 15 a 30 días en publicar su información, los períodicos tardan 24 horas, pero internet hora con hora y minuto a minuto tiene que estar en constante actualización, dependiendo claro esta del tipo de contenido de cada sitio.
El tener un sitio desarrollado y optimizado para su fácil y rapida actualización y mantenimiento, así como para una buena interacción con el usuario, en estos dias ya no es un lujo, sino una necesidad.
Estoy en total acuerdo con que la tarea de un diseñador debería ser el aspecto visual, y de un programador la estructura interna y arquitectura de un sitio, y que el trabajo conjunto de ambos debiese culminar con el perfecto diseño y desarrolloo de un sitio, portal o página web. Lamentablemente no todo es miel sobre ojuelas, muchas o en las mayorías de la veces los presupuestos no son suficients para costear a un programador o desarrollador, un fotografo, un ilustrador y un diseñador web. Es por esto que en muchas ocasiones los diseñadores tienen que enfrentarse a la labor de aprender o tener nociones básicas de programación sea esta action script, php, asp, etc etc etc; o por otro lado, en muchas ocasiones son los programadores los que terminan haciendo los gráficos diseñando el layout y eligiendo el esquema de color del sitio. No somos nadie para jusgar si esto resuelta bueno o malo, pero debemos de acoplarnos a los recursos con los que contamos, y si no tenemos para contratar o pagarle a un desarrollador que se encargue de la programación, ningún daño nos hara el aprender un poco de los lenguajes que la web nos esta exigiendo.
Con este tutorial no queremos formar expertos programadores web, ni tratar de prescindir de ellos, pero sí brindarle al diseñador una ayuda en los proyectos, que por motivos de presupuesto, no puede auxiliarse o contratar a un programador. Queremos enseñar a grandes rasgos la lógica de comportamiento y de interacción de un sitio diseñado en PHP y ligado a base de datos para su fácil y rápido mantenimiento, además de ayudar a aquellos diseñadores que le tienen miedo o flojera al código, que éste no es tán complicado como se ve e incluso una vez comprendiendolo suele ser interesante y en ocasiones hasta divertido, jajaja, y aunque no lo crean asi suele ser.
Como hemos dicho, no pensamos formar programadores, hay algunos archivos, como las base de datos que no repararemos en diseñar, ya que si nos detenemos en esto pudiera tomarnos meses y cientos de pagínas es explicar el modelado de una base de datos. Esta podrá ser descargada del aqui.
Una vez finalizando este tutorial podremos ser capaces de:
- Conectar un sitio a una base de datos
- Desplegar la información en la página dinámicamente, es decir traer la información desde la base de datos
- Crear una forma de envío, que por lo regular no puede faltar en ningún proyecto web.
Para mejor comprensión y facilitar el seguimiento de este tutorial lo ideal es que tengas ya contratado algún dominio y un host donde puedas experimentar y seguir los pasos para conectarte a una base de datos. De no ser así tendrás que montar un servidor virtual, es decir instalar PhP, MySQL y phpMyAdmin que es un manejador de base de datos. Para este tutorial descargaremos una compilación de estos programas (MAMP para Mac y WAMP para Pc) que, aunque no son las aplicaciones completas, nos serviran para nuestros fines. En caso de que tengas ya un hosting con base de datos, puedes hacerlo directamente en él. O si gustas trabajar con las aplicaciones completas, en el sitio de NeoPixel encontrarás el tutorial de cómo instalar cada una de estas aplicaciones y ponerlas a funcionar en tu maquina.
Para fines prácticos descargaremos de internet la aplicación (para MAC) MAMP 1.4.1. de la dirección: www.macupdate.com/info.php/id/16197, es una versión gratuita por lo que no tendremos problema alguno. Si estas utilizando Pc puedes descargar el WAMP de: http://www.wampserver.com/en/download.php
Una vez que descargaste MAMP y lo ejecutas puedes notar que tanto Apache como MySQL server funcionan correctamente así como PHP y phpMyAdmin.
Cargando la base de datos:
Antes que nada necesitas descargar la base de datos de nuestro sitio en la sección Downloads. Una vez hecho esto abre el MAMP y haz click en donde dice “Open start page”. Automaticamente se abrira tu explorador y verás la página de inicio de MAMP así como los datos necesario para conectarte a la base de datos (esto lo veremos mas adelante).
En el menú de esta página de inicio da click en donde dice “phpMyAdmin”. Automaticamente entrarás al administrador de base de datos, (si tienes un servicio de hosting lo más seguro es que este administrador sea identico al que tu proovedor de hosting tenga).
En el campo donde dice “Create new database” escibe “NeoPixel” y da click en “Create”.
En el menú de la parte izquierda deberás de ver que la base de datos NeoPixel ha sido creada. Seleccionala, y en la parte derecha da click en “Import”, y en la parte donde dice “Choose File” da click y busca el archivo “NeoPixel_DB.sql” que previamente descargaste de nuestro sitio y guardaste en tu computadora. Deja todas las opciones como vienen por default y da click en “Ok” en la parte de hasta abajo. Debes de ver a continuación un mensaje que dice “Import has been successfully finished” acompañado del código SQL.
Podrás ver que en la parte izquierda, bajo la base de datos NeoPixel han sido creadas 2 tablas con los nombres tbl_noticias y tbl_users. Una vez hecho esto ya tienes tu base de datos lista para ser usada, lo que ahora haremos es conectarla a un sitio web desde Dreamweaver.
Conecta tu sitio a la base de datos
Antes de definir un nuevo sitio en Dreamweaver es importante que utilices los archivos del folder “Inicio” que descargaste de nuestra página y que los guardes en:
Aplicaciones/MAMP/htdocs
Al descargar el programa MAMP o WAMP (para Pc) vienen adjuntos los archivos con las instrucciones que indican en donde deberás salvar tus archivos para que no tengas problema alguno.
En todo momento es necesario que tengas abierto la aplicación MAMP, ya que sin ella no podrás cargar la base de datos ni tampoco probar localmente los archivos que realices.
Abre Dreamweaver, y crea un nuevo sitio en el menu Site/New Site. Nombra tu sitio LaboratorioWeb_NeoPixel. Para definir el sitio utiliza la opción avanzada y configura tu sitio como se muestra en las siguientes ilustraciones:
Una vez que tengas ya configurado tu sitio abre al archivo index.php. Debajo de donde dice noticias es donde cargaremos el texto dinamico, es decir traído desde la base de datos. En la ventana de “Databases” (si no esta visible hazala aparecer desde el menu Window/Databases) da click en el signo de + debajo de la pestaña de Databases y elige “MySQL Connection” En la ventana MySQL Connection llena los campos con los datos siguientes:
Connection name: Noticias MySQL server: localhost User name: root Password: root
A un lado del campo de “Database” da click en el botón “Select”. En las opciones que deben de aparecer están enlistadas las bases de datos que tenemos (recuerda que debes de tener abierto MAMP y asegurarte que esten funcionando los servicios MsQL Server y Apache Server). Selecciona la que creamos con el nombre “NeoPixel” y da click en “Ok” Da nuevamente “Ok” en la ventana de MySQL Connection.
Verás que en la ventana de “Databases’ aparece ya la conexión a la base de datos con el nombre “Noticias”.
En la ventana de Aplicaciones da click en la pestaña de “Bindings”. Si no la tienes a la vista puedes sacarla del menú Window/Bindings.
Da click en el signo de + y selecciona la opcción Recordset (Query). En la ventana que se abre pon los siguientes atributos:
Name: News
Connection: Noticias
Table: tbl_noticias
Columns: Selección la opción “Selected” y en las opciones de abajo selecciona presionando “manzana” en el teclado las opciones: topicID, autorTopic, description
Filter: None
Sort: topicID y Descending
Verás que en la ventana de “Bindings” ha sido creado un nuevo recordset o query. Da click en el triángulo a la izquierda de “Recordset (Noticias)” para desplegar los elementos que lo componen. Como verás deben de esta topicID, autorTopic y descripción.
Arrstra con el mouse el elemento autorTopic a tu página, debajo de donde dice Noticias. Después arrastra también el elemento descripción para que quede debajo de autorTopic. Tu archivo te deberá quedar como lo en la imagen:
Seleccióna en la página el elemento que dice {Noticias.autorTopic} y dale formato, poniendole una fuente Arial con un tamaño de 9. Al elemento {Noticias.description} ponle una fuente Arial con tamaño 12. Si tu sitio lo estas diseñando con CSS podrás aplicarle el formato al texto con los mismos CSS (como en realidad lo deberías de hacer). Si hasta este punto todo ha salido bien puedes probar tu página en un navegador y verás como, sin haber tecleado ni una sola linea de código, se despliega ya el texto que estas mandando a llamar de tu base de datos.
Todo bien hasta este momento¡¡ Por fin estamos haciendo peticiones a nuestra base de datos y estamos deplegando contenido dinamico, pero ¿cómo se introduce el texto que yo quiera dentro de la base de datos?.
Insertar texto en tu base de datos, para que después pueda ser desplegado en tu sitio web se hace por medio de una interface que facilite el mantenimiento y la actualización del sitio. Estas “interfaces’ llevan el nombre de CMS (content management system). Lo que haremos a continuación será pues, un CMS básico para que puedas actulizar el contenido que se estará cargando en la página que acabamos de hacer.
Abre el archivo admin.php que previamente descargaste del sitio web de NeoPixel. Debajo del texto que indica que este será un administrador de la sección de noticias, inserta una “forma” y dentro de esta misma inserta dos veces “area de texto” seguido de un “boton de envio”, es decir que tendremos 2 áreas de texto y un boton dentro de la forma. Todas estas acciones las encuentras en la barra con la pestaña de “Forms” o desde el menú Insert/Form.
En la ventana que te aparecerá al insertar tanto el boton como la forma deja los datos que vienen por default y da click en ok.
Selecciona la primer “TextArea” o area de texto y en el panel de Propiedades nombralo: autor_entry, en Chart width 30 y en Num Lines 2, la opción de Wrap cambiala a “Virtual”
Selecciona la segunda “TextArea” o area de texto y en el panel de Propiedades nombralo: news_entry, en Chart width 60 y en Num Lines 10, la opción de Wrap cambiala a “Virtual”.
Aún con el area de texto seleccionada cambia a la vista conbinada Codigo/Diseño y, en el código, entre los “tags” <textarea> agrega lo siguiente:
<h2> El titulo de la noticia </h2>
<p> Tu primer parrafo</p>
<p> Tu segundo parrafo</p>
Una vez que termines verás que el texto que tecleaste en la parte del código será insertado en el área de diseño. Esto será únicamente como guia, para que una vez que vayas a actualizar tu sitio, sepas donde teclear tu título y donde los parrafos de tus noticias, es decir que este texto que escribimos lo tendrás que remplazar.
La forma está ahora lista para ser enviada, solo falta darle la instrucción al botón de enviar para que realice la acción adecuada.
Seleccional el botón que insertaste previamente, y en la pestaña de Server Behaviors o en Window/Server Behaviors selecciona “Insert Record” dando click en el signo de +,
y en la ventana que aparece inserta los siguientes atributos:
Submit values from: form1
Connection: Noticias
Insert table: tbl_noticias
Columns: Selecciona la opción ‘autorTopic’
Value: FORM.autor_entry
Submit as: Text
Acontinuación selecciona en la misma ventana:
En Columns la opción ‘description’
Value: FORM.autor_entry
Submit as: Text
After inserting, go to: insertado.php
Da click en “Ok”
Lo que estas haciendo es decirle al boton que envie los valores de la “form1” que la única forma que creaste en el documento, que utilice la conección “Noticias” que previamente fué creada, que inserte los datos en la tabla tbl_noticias (de la base de datos), que los datos enviados correponderán a la columna de descripción y en “value” indicamos que se inserte un nuevo valor en forma de texto. Una vez terminado que se redireccione a la página del sitio llamada “insertado.php”.
Prueba el archivo en tu explorador; en el campo de texto pequeño inserta tu nombre (que sería el nombre del autor) y en el campo de texto grande tendrá que ir la noticia o texto que desees actualizar en el sitio web. No borres los tags que colocaste anteriormente <h2> y <p>, ya que són estos los que le darán formato a tu parrafo.
Da click en el botón de enviar y automaticamente tu texto será insertado en la base de datos. Lo puedes probar abriendo el archivo index.php en tu navegador y verás que el texto que acabas de escribir esta ya en la página. De hecho si vas al administrador de la base de datos en phpMyAdmin (lo puedes hacer desde el programa MAMP), en la tabla tbl_noticias y dando click en “Browse”, verás que la información que acabas de teclear ha sido agregada a la base de datos.
Es esta una de las formas más sencillas de explicar lo que son los sistemas de contenido y la conexión a base de datos para desplegar texto dinámico. Así ya puedes ofrecerle a tus clientes un sitio donde él mismo pueda actualizar la información sin necesidad de saber utilizar programas como Dreamwaver o sin tener que teclear ni una sola linea de código. Obviamente para la página admin.php será muy recomendable que está protegida con un password mediante autenticación de usuarios para que no cualquier persona pueda acceder a esta opción y cambiar la información del sitio.
