Ayuda Sitio Web

DESARROLLO DE UN SITIO WEB CON
CONEXIÓN A UNA BASE DE DATOS MYSQL
HERRAMIENTAS:







Dreamweaver CS6
WampServer (Apache, MySQL, PHP, PHPMyAdmin)
PHP (Lenguaje de programación orientado a objetos)
MySQL (Base de Datos)
MySQL Workbench
Apache (Servidor Web)

BASE DE DATOS
Para crear la base de datos en MySQL utilizando el Workbench se siguen los siguientes pasos.
1. Abrir MySQL Workbench.Debe activar el servidor web.

2. Dar clic en Local instance wampmysqld

1

3. Se carga la pantalla principal de MySQL Workbench

4. Crear la base de datos.
En el área de SCHEMAS sobre la base de datos test, dar clic derecho y seleccionar Create Schema.

Escribir el nombre de la base de datos y dar clic en aplicar.

2

3

Se tiene creada la base de datos.

5. Seleccionar la base de datos con lacual se va a trabajar.
Dar doble clic sobre la base de datos o dar clic derecho en el nombre de la base y seleccionar Set as
Default Schema

NOTA: Cuando la base se encuentra seleccionada, el nombre de la misma se encuentra en negrilla.
6. Crear las tablas
Sobre Tables dar clic derecho en Create Table…

4

Se crean las siguientes tablas:
tblUsuario
idUsuario
Nombre
Email
Activo

tblProductoidProducto
Nombre
Precio
Estado
Categoría

tblCategoría
idCategoría
Descripción

Tabla tblUsuario:

5

Tabla tblProducto

6

Tabla tblCategoría

7

La base de datos con sus respectivas tablas se indica en la siguiente figura.

8

DREAMWEAVER
1. Creación del sitio
Abrir el entorno de Dreamweaver

Dar clic en Sitio y seleccionar Nuevo Sitio

Escriba el nombre del sitio y la ubicación del mismo.
Elsitio se debe ubicar en la carpeta www de la carpeta local de WampServer. (C:\wamp\www\sitio\)

9

A continuación se debe configurar el servidor de forma local para trabajar con la base de datos.
Se da clic en Servidores y luego en añadir nuevo servidor (signo +).

10

En la viñeta de Básicas, llenar los parámetros que se indican.

En la viñeta de Avanzadas, seleccionar el Modelo de Servidor PHPMySQL.

Y guardar los cambios.

11

Por último activar el servidor de prueba y guardar.

Una vez que el sitio se ha creado correctamente se debe mostrar en Dreamweaver como se indica en
la figura.

2. Creación de carpetas para organizar la información.
Para organizar correctamente la información del sitio se crean carpetas.
12

Para crear una carpeta se da clic derecho sobre el nombre del sitio yseleccionar Nueva Carpeta.
Se crean inicialmente las carpetas imágenes y administración.

3. Creación de la plantilla del sitio
Se debe seleccionar plantillas PHP para trabajar con la base de datos.
Para crear una nueva plantilla se da clic en Archivo y seleccionar Nuevo

Se selecciona Plantilla en Blanco, Tipo de plantilla: Plantilla PHP, Diseño se selecciona uno de acuerdo
a las necesidades ycaracterísticas del sitio.
Es recomendable que el Diseño CSS (Hoja de estilos en cascada) se lo haga en un archivo nuevo, para
separar el diseño del estilo.

13

Si se da clic en Crear, se debe guardar el archivo CSS. Es recomendable crear una carpeta llamada
estilos.

A continuación se genera la plantilla que se va a utilizar en el desarrollo del sitio.
Es recomendable guardar la plantilla.

14Al momento de guardar puede salir el mensaje “La plantilla no tiene región editable”, se pone aceptar
y se prosigue con el proceso de guardado de la plantilla.

Las plantillas tienen una extensión .dwt o una extensión .dwt.php y se guardan en una carpeta
Templates.
Cuando se da clic en Archivo/Guardar, aparece la siguiente ventana. Se pone el nombre de la plantilla
y se guarda.

15

Si se daclic en Archivo/Guardar como… aparece la siguiente ventana, escriba el nombre de la plantilla
y seleccione el tipo (Template Files (*.dwt)).

El resultado se muestra en la siguiente figura.

16

4. Personalización de la plantilla
Para que el sitio se comunique correctamente con la base de datos se usa el segmento de código
charset, y se tienen dos opciones (utf e iso) que se declara en la cabecera...