Manual de pagina dinámica 01

ERCerazoQ | Caminante no hay camino, se hace camino al andar 1
Manual de Creación de Pagina Dinámica

Página Dinámica con Dreamweaver CC2017
I. Definición previa
Página web dinámica significa, interacción entre un usuario o cliente web con una base de datos
instalado en un servidor web, para que eso ocurra se necesita programar usando un lenguaje de
programación como PHP. Pero Dreamweaver tiene herramientas que permite programar por nosotros,
no preocuparse por ahora.
Cuando hablamos de web, nos referimos al uso de internet. Pero gracias a los servidores locales nos
harán el favor de comportarse como internet; quiere decir que nuestra Pc. será cliente y servidor a la
vez, gracias al servidor local instalado.
II. Requerimientos de software:
Servidor web local apache: Viene en el paquete de
WampServer , Appserv, Xampp, Mamp o LAMP(solo
para Linux)
Gestor de base de datos Mysql: Que también viene
en el paquete antes mencionado
Lenguaje de Programación PHP: También viene en
el paquete antes mencionado
Editor de Texto: Puede ser desde los más conocidos
como: notepad++, Koompozer, sublime text,
Brackets , Dreamweaver, Netbeans, y los otros como
BlueGriffon, JetBrains WebStorm, Microsoft Visual
Studio Express for Web, TextWrangler, Aptan Studio,
etc
En este manual usaremos Dreamweaver CS6 v12. La última versión fue CS6 v12.1 con muchas
herramientas para HTML5, sin embargo actualmente existe una nueva tecnología de Dreamweaver,
CC2017 (Creative Cloud).

III. Procedimiento para crear base de datos en Mysql del servidor local.
Paso 01 Instalar el servidor local
Recomiendo Appserv, pero el curso pide WampServer. Al ejecutar esperar
hasta que el icono ubicado en la barra de estado se convierta de color
verde.
Para probar su funcionamiento escribimos “localhost” en la URL
Al dar enter, inmediatamente debe mostrar el interfaz principal de WampServer, incluso se visualiza
los directorios creados dentro del servidor (Your Proyects). Más adelante mostrare como crear.
Paso 02.- Crear Base de datos
Ingresar al Gestor de base de datos Mysql dando clic en “phpmyadmin”
Hacer clic en “nueva” y dar nombre de Base de datos, según el manual de la profesora la base de datos
se llama “dbtienda_alison”, en mi caso es “dbfeyzu”. Y clic en “CREAR”.
Continuación en la columna del lado izquierdo se ve el nombre de la base de datos creada.

Bien, si llegaste hasta aquí puedes respirar tranquilo. Ahora tendríamos que crear las tablas, campos y
los registros, pero ya no es necesario porque la profesora nos ha facilitado la base de datos, solo
tenemos que importarla siguiendo los siguientes pasos.
Primero seleccionar la BD creada, luego clic en la pestaña importar, revientas en “seleccionar archivo”,
y buscas donde la tengas para abrir. Finalmente le das “CONTINUAR”
Segundo Verificar que de manera mágica tienes tu base de datos
con todas las tablas y registros.
IV. Procedimiento para configurar Dreamweaver con el servidor local.
Paso 01.- Crear directorio raíz.
En la unidad “C” donde se instaló el Wanpserver buscar la carpeta “Wamp”, dentro de ella la carpeta
“www”, y dentro de este último crear un directorio donde se almacenará ‘todo los archivos de la
página.
En mi caso la carpeta raíz se llama “Paginadinámica”

Paso 02.- Abrir Dreamweaver
Luego de abrir Dreamweaver seleccionar la pestaña de modo diseño, porque no vamos a programar nada,
todo lo hará Dreamweaver.
Paso 03.- Creación de sitio. Es el espacio del servidor que va contener la página
Luego de abrir Dreamweaver, ir al menú “SITIO” y seleccionar nuevo sitio (1), en el cuadro de configuración
de sitio poner nombre de sitio que puede ser cualquier nombre, pero se recomienda que tenga un nombre
relativo a tu BD o a tu directorio raíz (2), y en “Carpeta de sitio local” redirecciones precisamente a tu
carpeta raíz que está en “WWW” dentro de Wamp (3).
A continuación con la misma
pestaña “Básica”, ir a la columna
izquierda del mismo formulario y
seleccionar “Servidores” En los
campos llenar los datos tal como se
observa en la imagen.
En “carpeta del servidor” tiene que
ser el mismo que el “2” de la imagen
anterior y en URL Web escribir
http://localhost/carpeta raíz/

Luego seleccionar la pestaña “Avanzada”
solamente seleccionar PHP MYSQL como
modelo de servidor.
Guardar, guardar y listo.
Puedes dar un profundo respiro de satisfacción si es que en la columna del derecho en ventanas
emergentes de Dreamweaver observas las siguientes características.
Los 3 check quieren decir que el sitio
está correctamente creado.
Se observa los archivos y directorios de tu página
dentro del sitio creado, Se recomienda abrir los
archivos desde Aquí.

Paso 04.- Conexión a la base de datos.
En la columna de ventanas de Dreamweaver, ubicarse
en la pestaña “Base de datos” y hacer clic en el signo
“+”, luego en “conexión Mysql”
Luego llenar el formulario con los siguientes datos:
 Se asigna nombre a la conexión, en este caso el
nombre es “conexbd”, en el manual es
“cdbalison”.
 Siempre es “localhost” y “root”.(1)
 Clic en “Seleccionar” para la base de datos (2)
 Buscar la base de datos creada anteriormente (3) ver paso 2 del capítulo III de este manual.
Luego aceptar en cada ventana. Si le pide contraseña, le asignan.
Verificar Conexión y migracion de tablas.
En la misma Pestaña “base de datos” desplegar el nobre de la
conexión y deben observar todas las tablas de la base de
datos, tal como se muestra en la imagen.
Si es así, es necesario sentir el placer de
estar haciendo las cosas bien.
Aún que recién empieza el trabajo

Paso 05.- Crear página ( index .php)
Desde el modo diseño de Dreamweaver ir ala pestaña Insertar para creatr un formulario
El rectángulo con bordes punteadas significa el formulario
Ubicar el cursor dentro del formulario, y crear una tabla desde la pestaña “Insertar”(1), luego ingresar los
datos que se muestran en la figura anterior(2).
A continuación seleccionar la tabla en propiedad “Alinear” y seleccionar “centro”.

Si de curiosidad quieren morir, vayan a modo
código y vean los códigos generados para el
formulario y tabla
Ahora tenemos que insertar
imagen, para eso solo ubicar
el cursor en la primera fila y
columna de la tabla i se van a
la pestaña insertar /Imagen.
Luego de direccionar a la imagen guardada
dentro del directorio raíz del servidor, va salir
una ventana de atributos de accesibilidad, solo
le dan “aceptar” no llenar nada, aún que en la
imagen parece llenado.
Seleccionando la imagen se puede
editar el ancho, alto, fondo, etc. desde
la barra de propiedades

También se puede editar la fuente desde la barra
de propiedades
Ahora tenemos que crear campo de texto en la segunda fila para ingresar el E_mail y en la tercera fila para
la clave.
Por ahora es opcional llenar los atributos. Solo
le dan aceptar sin llenar.
No olvidar que se tiene que
seleccionar el campo de texto de
la clave para asignarle
parámetro “contraseña”, si no
quieren que todos vean la clave.

Luego, en la barra de propiedades se asignan nombres a los campos creados, para ello previamente tienen
que seleccionar los campos. Los nombres son: txt_email y txt:clave
En seguida, insertar Botón
de envió en la última fila
de la tabla, el nombre del
botón es txt_ingresar y su
valor es Ingresar. Todo eso
se llena desde la barra de
propiedades.
Por último, respecto a esta página, solo
tienen que guardar como index.php.
Recordar que tienen que guardar dentro de la
carpeta raíz.
Para probar la página escriben en la URL:
Nombre de la carpeta raíz

Paso 05.- Crear página (homeadmin .php)
De Dreamweaver crear nueva página y guardar como homeadmin.php
Ver el diseño del manual de la
profesora Crear formulario y
dentro una tabla con carteristas
mostradas en imagen
Para combinar y dividir celdas
usar la herramienta celda que
está en la barra de
propiedades.
Continuará - - - - >

Manual de pagina dinámica 01

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Manual de pagina dinámica 01

Similar a Manual de pagina dinámica 01 (20)

Último

Último (20)

Manual de pagina dinámica 01