XAMPP

El primer paso para descargar Xampp control panel es tener una versión igual o
superior a Windows 8 y un navegador que este algo actualizado y buscar la
versión de Xampp que deseamos descargar.

Ingresaremos en el buscador los siguiente “Xampp control panel”

Figura.1
Buscar
xampp

O en su defecto colocaremos el siguiente link en el buscador

https://www.apachefriends.org/es/download.html.

Una vez que estemos en la página de descarga no mostrara la siguiente interfaz

Figura.2
Descargar
xampp

Y cliquearemos la primera opción ya que es la versión que necesitamos para que

pueda trabajar con la versión que descargaremos mas delante de Dream Weaver
8
Esperaremos a que nuestro equipo termine con la descarga

Figura.3
Xampp
descargado

Una vez la descarga finalice buscaremos el archivo en la carpeta de descargas

Figura.4
Archivo
xampp

Daremos doble clic sobre el archivo y nos saltara una alerta que nos pedirá
realizar cambios en nuestro equipo y daremos clic en aceptar
Nuevamente nos mostrará una nueva ventana que nos dará la bienvenida a
Xampp . y daremos clic en el
botón “next>” dos veces

Figura.5
Welcome

To xampp

Nos mostrara la siguiente ventana

Cambiaremos la carpeta
que dice “C:\xampp”

Por nuestra carpeta de

descargas
Figura.6 Figura.7
Folder de xampp downloads
Seleccionaremos el idioma de nuestra preferencia y la instalación comenzara
(puede ser algo lenta dependiendo de nuestro dispositivo)

Una vez la instalación haya terminado ya podremos iniciar la aplicación Xampp

Control Panel en nuestro buscador de aplicaciones

Figura.8
xampp

Lo iniciaremos y activaremos los puertos “Apache y MySQL” dando clic en el botón

start Figura.9
Xampp menu

Si se conectaron de manera correcta se cambiarán a color verde y daremos clic en

el botón “Admin”

Figura.10
Puertos xampp
¿Cómo hacer una base de datos?
Bueno para empezar tenemos que abrir la aplicación XAMPP Control Panel.

Figura.11

Xampp
barra de
tareas

Después de abrir la aplicación, debemos iniciar Apache y MySQL.

Figura.12
Xampp
iniciar
puertos
 Y tendrá que salir de la siguiente manera:

Figura.13
puertos

Después tendremos que dar click en el botón de admin de MySQL.

Figura.14
puertos

Y te mandara al sitio web de localhostphpmyadmin.

Figura.
15
Php
mysql
Le tendremos que dar en la opción de Nueva para empezar con nuestra base de
datos.

Figura.16
Crear
base

Después nos mandara al apartado de “Bases de Datos”, y le pondremos un

nombre a la base.

Y le daremos en Crear.

¡IMPORTANTE, NO SE PUEDEN PONER CARACTERES ESPECIALES EN EL

NOMBRE DE LA BASE DE DATOS!

Figura.17
Crear base
Después de crear nos mandara a el apartado para crear una tabla, le tendremos
que introducir un nombre de la tabla y también seleccionar el número de
columnas preferencia del usuario, en mi caso serán 5.

¡IMPORTANTE, NO SE PUEDEN PONER CARACTERES ESPECIALES EN EL

NOMBRE DE LA TABLA!

Figura.19
Crear base

Después de hacer todos estos pasos le daremos a Continuar.

Figura.20
Crear base

Al darle al botón de Continuar, nos arroja una nueva interfaz para complementar
la tabla, en el primer apartado de Nombre, el primer nombre siempre tiene que
ser id, introduciremos cualquier nombre que cuadre con lo que queremos hacer.

¡IMPORTANTE, NO SE PUEDEN PONER CARACTERES ESPECIALES EN LA

SECCION NOMBRE!
 Figura.21
Agregar el autoincremento

Después terminar los pasos anteriores, nos ubicaremos en la sección de Tipo y el

primero tiene que ir siempre seleccionado como INT, los demás deberán ir como
VARCHAR.

Después en la sección Índice tendemos que marcar la casilla A_I, y

automáticamente se seleccionara PRIMARY.

Después de haber hecho todo esto le daremos en el botón de Guardar.

Figura.22
Guardar la tabla

Y nos mandara a la interfaz de la tabla:

Figura.23
Interfaz de la tabla
En la parte superior nos saldrá los nombres para los registros, en mi caso id,
nombre, raza, color y edad.

Después de verificar que se haga la consulta nos iremos a la parte de Insertar.

Figura.24
Insertar
filas

Nos mandara a la Insertar de insertar donde deberemos introducir los datos en

Valor.
Figura.25
Insertar
valores

Pondremos los datos en valor excepto en id, donde se dejará en blanco, y los
demás se llenarán normalmente.

¡IMPORTANTE, NO SE PUEDEN PONER CARACTERES ESPECIALES EN LA

SECCION DE VALOR!

Después de a ver introducido todos los datos, le daremos en continuar para que
los datos se inserten en la tabla.
Figura.26
Datos
insertados
 MACROMEDIA DREAMWEAVER 8

El primer paso para descargar este programa es buscarlo en el navegador por su

nombre completo “MACROMEDIADREAMWEAVER 8”.

Imagen27:
Buscar DW8
en el
navegador

Este es el link del sitio de donde se sacó el programa:

https://macromedia-dreamweaver.uptodown.com/windows

Imagen28:
Sitio de
descarga del
programa
Ahora pondremos a descargar el programa y podremos ver su proceso en la parte
inferior izquierda.

Imagen29:
Proceso de
descarga

Aquí es donde comenzamos el proceso de instalación y damos clic en

“siguiente>”: Figura.30
Proceso
de
descarga
Aceptamos los términos del contrato de licencia y damos clic en “siguiente>”.

Figura.31
Proceso
de
descarga

Seleccionamos la carpeta de destino y cliqueamos en “siguiente>”

Figura.32
Proceso
de
descarga
En este apartado no se moverá nada pues esta configuración es la indicada o
predeterminada y daremos clic en “siguiente>”.

Figura.33
Proceso
de
descarga

Y es entonces donde comenzara la instalación de programa y daremos clic en

“Instalar”

Figura.33
Proceso
de
descarga
Una vez termina la instalación daremos clic en “finalizar”.

Figura.34
Terminando
de instalar dw

Y el programa estará listo para usarcé

Figura.35
Interfaz
DW
 VINCULACION

La vinculación se inicia abriendo el software de Macromedia Dreamweaver

Figura.36
Interfaz DW

Una vez estando dentro del software se seleccionará la ventana de sitio y se

seleccionará la opción nuevo sitio (cabe aclarar que debemos tener una base de
datos previamente)
Figura..37
Interfaz DW

En la ventana nuevo sitio se abrirá una ventana donde se muestran dos opciones
para crear el sitio que son básicas y avanzadas, se seleccionara las avanzadas
para configurar y enlazar bien el sitio
 Figura.38
Datos locales

Ya estando enlazando se pondrán los siguientes datos

En el nombre del sitio se pondrá el nombre de la base de datos tal y como se

escribió en la creación de la base
En la carpeta raíz local se le oprimirá a la carpeta amarilla que se muestra a un
lado, en esa carpeta se abrirá la carpeta xampp

Figura.39
Datos locales
Una vez abierta esta carpeta se buscará y se abrirá la carpeta htdocs

Figura.40
Datos locales

Abierta la carpeta htdocs crearemos una carpeta con el nombre de la base de

datos

Figura.41
Datos locales
Creada la carpeta de nuestra base de datos se abrirá y se creará una carpeta
llamada imágenes

Figura.42
Datos
locales

En el apartado de dirección HTTP se pondrá lo siguiente

http://localhost/nombre de la base de datos/

Figura.43
Datos
locales
Realizada la acción anterior iremos al apartado de datos remotos que se
encuentra en el apartado del lado izquierdo de la pantalla

Figura.44
Datos
remotos

En la parte donde dice acceso se oprimirá y se seleccionará la opción local/red

Figura.45
Datos
remotos
Esta opción una vez estando seleccionada arrojará una ventana que dirá carpeta
remota
Figura.46
Datos
remotos

En el apartado de carpeta remota se seleccionará la carpeta amarilla que se

muestra a un lado
 Figura.47
Datos
remotos

En este apartado seleccionaremos la carpeta de nuestra base de datos que en

este caso es perritos_gabo, después de este paso pondremos el nombre de la
base en la ventana carpeta remota

Figura.48
Datos
remotos

Después el usuario seleccionara en el apartado actualizar listas de archivos

remotos automaticamente
Después de esto se ira a la ventana de servidor de prueba

Figura.49
Servidor de
prueba

En este apartado seleccionaremos en la ventana de modelo de servidor y acceso

lo siguiente

Figura.50
Servidor de
prueba

En el apartado modelo de servidor se seleccionará PHP MySQL

Y en el apartado de acceso seleccionaremos local/red

Figura.51
Servidor de
prueba

Ya hecho esto nos arrojara otro apartado que lleva por nombre carpeta del
servidor

Figura.52
Servidor de
prueba

En carpeta de servidor la mayoría de las veces ya pone automaticamente el

nombre de la base,

NOTA: En caso que no sea así el usuario lo tendrá que poner automaticamente
El ultimo paso para crear el sitio es poner en prefijo url el nombre de nuestra base
como se muestra en el siguiente ejemplo

Figura.53
Servidor de
pruba

Ya una vez creado el sitio pasaremos a la vinculación de la base

En la pantalla principal se seleccionará un nuevo archivo que en este caso será

uno de PHP
VINCULACION

Bueno para empezar la vinculación de index por el momento solo lo guardaremos

como index:

Figura.54
Guardar index
Figura.36
index

Después crearemos un nuevo archivo como página dinámica y después

seleccionaremos PHP, y le daremos en Crear y lo guardaremos en lista:

Figura.55
Abir archivo
php
Después de eso iremos a la parte de aplicación y buscaremos la sección de Base
de Datos y le daremos a el símbolo de + y seleccionaremos a Conexión MySQL:

Figura.56
Conexión

Y después nos saltara una nueva ventana, que le pondremos los siguientes datos:

Figura.57
Conexión

Para después darle en Seleccionar y elegiremos nuestra base de datos:

Figura.58
Conexión
Después de eso nos iremos a Vinculaciones y le daremos a el símbolo de + para
empezar a vincular, en Nombre pondremos el mismo nombre con el que lo
guardamos (en mi caso lista) y en conexión seleccionaremos uno, y en tabla se
seleccionara automáticamente perritos, después le daremos Aceptar.

Figura.59
listas

Después de eso en esta sección en vez de Común, lo cambiaremos Aplicación y

nos debería mostrar la siguiente barra de acciones:

Después de haber realizado lo anteriormente dicho, procederemos a seleccionar

la siguiente opción de la barra de acciones:

Figura.60,61
listas
 Figura.62
Después nos arrojara la siguiente ventana:
lista

Y seleccionaremos la opción de Tabla dinámica, después nos mostrara la

siguiente ventana y en la opción de Mostrar en vez de 10 le pondremos 2:

Figura.63
lista

Y le daremos en Aceptar, y después se insertará la tabla, le daremos espacio y en

la barra de acciones seleccionaremos lo siguiente y le seleccionaremos Barra de
navegación de juego de registros.

Figura.64
lista
 Y nos arrojara esta ventana, que no le haremos ningún cambio, solo le daremos
Aceptar.
Figura.65
lista

Y si todo lo hicimos bien nos saldrá de la siguiente manera:

Figura.66
lista

Y nos aseguraremos en la parte superior que todo este guardado (debería salir el
nombre como guardamos el php sin el signo *), para guardarlo fácilmente
podremos hacer el conjunto de botones Control + S para que todo este guardado.
 Figura.67
insertar

Ya abierto el archivo se desplegará una pantalla blanca donde se realizará la

vinculación

Figura.68
insertar

En esta parte seleccionaremos la pestaña de archivo que se encuentra de lado

izquierdo en la parte de arriba
En el apartado se desplegará una ventana donde se elegirá la opción, nueva
Figura.69
insertar

El archivo una vez abierto lo guardaremos con el nombre de insertar.php

Figura.70
insertar
Ya en el archivo se hará un juego de registros, en este paso iremos a la parte
derecha de la pantalla y se seleccionará el apartado de vinculaciones

Figura.71
insertar

Estando en el apartado vinculación, se oprimirá el signo de + y le oprimirá a

juego de registros

Figura.72
insertar
En juego de registros se harán los siguientes pasos

Figura.73
insertar

Una vez hecho esto se le dará en la opción aceptar, en el siguiente paso en el

apartado de herramientas de la parte de arriba seleccionaremos la herramienta
insertar registro
 Figura.74
insertar

Ya seleccionada esta herramienta se apretará la opción de

asistente de formulario

Figura.75
insertar
Ya seleccionada esta opción aparecerá un formulario donde se pondrá lo siguiente

Figura.76
insertar

En conexión se pondrá uno, al seleccionar esta opción se pondrá el nombre de la

tabla que está en la base de datos, en la parte de tras insertar ir a, se apretará el
botón examinar y se seleccionará lista.php

Figura.77
insertar
Ya seleccionado el archivo lista.php se oprimirá el botón aceptar y quedará de la
siguiente manera

Figura.78
insertar

Se le oprimirá a aceptar y se pondrá una tabla para insertar el registro

Figura.79
Insertar

Ya terminado se correrá en un navegador y se verá si no hay errores

Para ejecutarlo en un navegador se seleccionará el icono del mundito que está en

la parte de arriba
 Figura.80
insertar

Se insertarán los datos y oprimiremos el botón insertar registro

Y nos mandara a la página lista donde se insertó el registro

Figura.81
insertar
El siguiente paso que se elaborara es la página modificar

Siguiendo los pasos para crear un nuevo documento en el apartado de insertar

El usuario creara un documento y lo guardara con el nombre Modificar.php

Ya estando en el documento creado siguiendo los pasos de insertar se creará otro

juego de registros, pero a este le pondremos el nombre de modificar

Figura.82
Modificar
Después de este paso en la barra de herramientas en la parte de arriba el usuario
seleccionara la herramienta actualizar registro

Figura.83
Modificar

Seleccionando esta herramienta aparecerá una opción con el nombre ASISTENTE

DE FORMULARIO DE ACTUALIZACION DE REGISTROS la cual el usuario
seleccionará
Figura.84
Modificar

Ya seleccionada esta opción se desplegará una venta con el nombre

Formulario de actualización de registros

Figura.85
Modificar

En este apartado se seleccionará conexión y se pondrá la opción uno que en este

caso es el nombre de la conexión y en el apartado tabla a actualizar se pondrá
automáticamente el nombre de la tabla de la base de datos

Figura.86
Modificar
Ya estando la tabla de esta manera en la parte de tras la actualización ir a y
oprimiremos el botón examinar

Y se seleccionara la opción lista

Figura.87
Modificar

Y oprimiremos el botón aceptar y se imprimirá una tabla llena con datos de la base

Figura.88
Modificar

En el siguiente paso el usuario en la parte de abajo se pondrá una paginación de

juego de registros
Figura.89
Esta herramienta se encuentra en la barra de la parte de arriba Modificar
Una vez seleccionada abrirá la siguiente ventana a la que solo le oprimiremos el
botón de aceptar

Figura.90
Modificar

Figura.91
Modificar

Ya teniendo la paginación de juego de registros se guardará y se ejecutará el

programa

En la página se mostrará el registro sin ser modificado como en el siguiente

ejemplo

Figura.92
Modificar
Se podrá modificar el registro al gusto del cliente como en el siguiente ejemplo

Figura.93
Modificar
 BOTON ELIMINAR

Presionaremos “Control + N” para generar un archivo nuevo y le daremos en

página dinámica, PHP y crear.

Figura.95
eliminar
Entonces aparecerá una página en blanco y presionaremos Control + Mayus + S,
para guardar como y guardaremos con el nombre de “eliminar”.

Figura.96
eliminar

Y nos aparecerá a un lado de los demás.

Figura.97,98
eliminar

Entonces colocaremos este mensaje para el usuario.

Crearemos otro juego de registros y arrastraremos los elementos hacia la hoja, de
forma que queden de bajo de la pregunta formulada.

Figura.99
eliminar

Entonces iremos a listas y le daremos clic aquí, daremos en dividir para ver el
código.

Figura.100
eliminar

Entonces en el apartado de abajo que dice vinculo daremos clic en la carpeta y en

eliminar y para concluir agregamos “? =” de forma que quede así.

Figura.101
eliminar
Arrastraremos el id entre las comillas y el igual.
Figura.102
eliminar

De manera que quede asi:

Figura.103
eliminar
Regresaremos a eliminar y agregaremos un formulario dando clic en insertar y en
formulario:

Figura.104
eliminar
Una vez agregado el formulario lo seleccionaremos y le cambiaremos de post a

Figura.105
eliminar

get.

Continuaremos agregando un campo oculto realizando la misma acción de

formulario solo que ahora dando clic en campo oculto y le modificaremos
colocando campo oculto y agregando id en valor.

Figura.106
eliminar
De manera que quede asi.

Figura.107
eliminar

El siguiente paso es agregar el botón:

Figura.108
eliminar

Se le cambia el nombre:
Figura.109
eliminar
Ahora daremos clic en eliminar registro y llenaremos lo que se nos pide de la
siguiente manera:

Figura.110
eliminar

Y asi sería como funciona:

Daremos clic en id y este nos llevara a eliminar y ya eliminaremos el registro:

Figura.111,112
eliminar

MARCOS

Lo siguiente seria seleccionar el archivo que guardamos al principió como índex, y

insertaremos marcos de la siguiente manera:

Iremos a insertar luego a HTML y seleccionaremos la opción Marcos.

Figura.113
marcos

Y después nos abrirá una pestaña con varias opciones y seleccionaremos

izquierda y superior.
Figura.114
marcos
Y nos debería salir de la siguiente manera:

Figura.115
marcos

Luego en el marco izquierdo lo guardaremos de la siguiente manera:

Figura. 116,117
marcos
Y el superior también lo guardaremos:

Después en el marco izquierdo en la parte de Insertar pondremos 3 Formularios:

Figura.118
formularios

Y quedarían de la siguiente manera:

Figura.119
formularios

En cada uno de los 3 Formularios realizaremos los siguientes pasos en la parte

inferior de Propiedades:

(Asegurándonos que hubiéramos seleccionado el Formularios, si no nos

saldrá estas opciones).
 Figura.120
botones

En la parte que dice Método cambiaremos en vez de POST, pondremos GET:

Y en la parte de Dest le daremos a la flechita para abajo y seleccionaremos

mainFrame: Figura. 121,122
botones

En cada uno de los Formularios, pondremos un Campo oculto, en la opción de

Insertar y luego en Formulario nos saldrá el Campo oculto.
Figura. 123,124
botones

Y nos debe salir de la siguiente forma:

Figura.125
botones
Después en cada formulario deberemos irnos a Insertar de nuevo y también he
iremos a la parte de Formulario insertaremos un Botón en cada uno de los
formularios:

Figura.126
botones

El primer Botón lo seleccionaremos y le introduciremos el siguiente nombre:

Seleccionaremos el segundo Botón y le introduciremos el siguiente nombre:

Figura. 127,128,129
botones

Seleccionaremos el tercer y último Botón e introduciremos el siguiente nombre:

Por ultimo seleccionaremos el Formulario y en la parte de Acción pegaremos la
URL de nuestro archivo: Figura.130
botones

Para eso iremos a la parte superior y en nuestros archivos seleccionaremos el

deseado, en este caso lista:

Figura.131
botones

Y daremos un click en la parte del mundito. Nos saldrá varias opciones de

navegadores, y seleccionaremos nuestro preferido, en mi caso Firefox.

Y nos abrirá un sitio localhost con el nombre de nuestro archivo:

Esta misma URL la seleccionaremos y la pegaremos en Acción:

Figura.
132,133
botones

Y repitiéremos los pasos en los siguientes formularios y deberían quedar de la

siguiente forma:

Figura.134
botones