DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1

Transcripción

1 DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1

2 DREAMWEAVER CS5. DREAMWEAVER Y PHP En este capítulo empezaremos a establecer la condición que establece PHP en nuestra página Web creada en DreamWeaver CS5, y el cual puede hacer que nuestra Web adquiera funciones especiales y se pueda comunicar directamente con nuestra base de datos MySQL y devolver datos introducidos en la misma. Por ejemplo imagina que una base de datos MySQL están registrados los usuarios que tienen acceso a una parte de la página Web (usuarios registrados). Para acceder a esa parte PHP utiliza una conexión a la base de datos y un conjunto de datos para establecer el usuario en cuestión. Si existe el usuario en esa base de datos, entonces PHP permitirá que el usuario pueda entrar en una página en cuestión. Si no existe, devolverá a otra página de error o de registro del usuario. DreamWeaver CS5 nos permite mediante PHP y MySQL crear páginas Web de alto contenido dinámico ya que actualizando un campo en la base de datos, se actualiza en la página Web sin necesidad de cambiar nada en la propia página Web. Mediante PHP realizas la conexión a la base de datos y mediante el conjunto de datos haces que se muestren las noticias en la página Web de DreamWeaver CS5. Ahora modificando el contenido de la base de datos, se actualiza directamente en la página Web el contenido de las noticias sin que lo tengas que hacer desde la página Web como se hacía con anterioridad. Este curso está redactado, diseñado, compilado y distribuido por Cursosindustriales.net. El autor del mismo te da derecho a compartirlo, imprimirlo, usarlo y modificarlo siempre que referencies la procedencia del curso y que en este caso es de Cursosindustriales.net y su autor Deimos_hack. Si has conseguido este curso y has tenido que pagar por ello, envíame un correo a administrador@cursosindustriales.net y enseguida me pondré en contacto contigo. Si quieres ayudar al proyecto Cursosindustriales, haz una donación mediante PayPal en los puntos autorizados de la Web. Cursosindustriales. Curso de DreamWeaver CS6 2

3 CREACIÓN DE LA BASE DE DATOS DE PRUEBA. Antes de entrar en materia, te voy a decir que PHP es un lenguaje de cara del servidor, lo que implica que el navegador no entiende el lenguaje PHP y debe de ser interpretado por el navegador Web. Por ese motivo, requieres de tener un servidor Web instalado en tu ordenador para poder reproducir páginas dinámicas en PHP, y por eso la opción de instalar XAMPP es la más adecuada. También puedes instalar el programa de IIS, pero en éste curso utilizaré XAMPP para reproducir páginas dinámicas en PHP por lo que te recomiendo que tú también utilices éste programa para que comprendas y sepas utilizar la instrucción correspondiente para ello. Para éste capítulo vamos a practicar con una base de datos en la que introduciremos varios datos. Para ello, primero tendremos que crearnos la base de datos en cuestión. Recuerdas cómo crear una base de datos y rellenarla? Vamos a crear una base de datos llamada PRUEBA_PHP y después crearemos dos tablas: la primera se llamará USUARIOS y tendrá una estructura de campos de Id cuya estructura será Integer, auto_increment y primary Key; Usuario, tendrá una estructura de varchar(50), y contraseña con estructura de varchar(50); la segunda tabla será la de DIRECCION con tres campos Id, poblacion y provincia. Cada campo rellenado con la misma estructura que la tabla anterior. A continuación te muestro como proceder de dos formas diferentes: A TRAVÉS DEL ACCESO DIRECTO A MySQL. Abres el acceso directo y creas la base de datos y después la estructura de la base mediante comandos tal como aparece en la imagen: Cursosindustriales. Curso de DreamWeaver CS6 3

4 Ahora Introducimos algunos datos dentro de la tabla primera USUARIOS: Por último insertamos datos en la tabla DIRECCION: Comprobamos que se han introducidos los datos: Ya tenemos creado la base de datos y las tablas con contenido. Cursosindustriales. Curso de DreamWeaver CS6 4

5 A TRAVÉS DE PHPMYADMIN DE XAMPP. Abre la aplicación localhost/phpmyadmin y en el menú principal crea una nueva base de datos llamada PRUEBAS_PHP. Como cotejamiento introduce utf8_spanish_ci, y en el menú cotejamiento de las conexiones MySQL, también introduce el anterior valor. El resultado se muestra a continuación. Muestra sobre Crear y se creará la base de datos. Ahora tendrás que crear las tablas correspondientes e insertar valores en ella. Cuando pulsas sobre el botón de Crear, se abre la ventana de inserción de tabla nueva. Introduce el nombre de la nueva tabla y el número de campos que tendrá y pulsa sobre el botón Continuar. A continuación se muestra la página para que introduzca el valor de cada campo de la tabla. Rellénalo como ves a continuación y pulsa sobre el botón Grabar que se muestra abajo a la derecha de la página. Cursosindustriales. Curso de DreamWeaver CS6 5

6 Una vez cargada y grabados los datos se muestra la página principal de esa base de datos con la tabla creada. Ahora procede a crear la otra tabla DIRECCION como has hecho con ésta última. Una vez tienes las dos tablas, debes de insertar contenido en cada tabla. Para ello, selecciona la tabla específica y en el menú Insertar introduce los valores que tendrá la tabla en cuestión tal como ves a continuación: Pulsa sobre el botón de Continuar para que se apliquen los cambios a la tabla. Actúa de la misma forma para introducir valores en la tabla DIRECCION. Ahora que ya tenemos creada una base de datos de pruebas y hemos creado dentro de ella un par de tablas con contenido, podremos pasar a estudiar los Cursosindustriales. Curso de DreamWeaver CS6 6

7 comandos del menú Datos de la barra de herramientas de DreamWeaver CS5 que nos permitirán establecer la conexión a la misma. BARRA DE HERRAMIENTAS DE DATOS. En la barra de Herramientas del menú de DreamWeaver CS5, tienes la opción de DATOS. Desde ésta barra de Herramientas podrás acceder a los comandos que utilizaremos para crear nuestra página PHP con conexión a base de datos MySQL. Desde éste menú tendremos todas las opciones para conectar, desconectar, actualizar, modificar o eliminar datos en la base de datos MySQL. En éste apartado del curso empiezo por explicar cada control de manera independiente. Importar datos de una tabla. Desde éste comando puedes importar a tu página Web los datos de una base de datos en forma de tabla. Para ello debes de tener una base de datos exportada en tu ordenador o en un directorio virtual para cargarla directamente a tu Web. Vamos a exportar los datos de nuestra base de datos: Pulsa sobre el menú de Exportar y en la ventana que se te abre pulsa sobre Continuar y se te guardará en un directorio que tu elijas el archivo SQL que contiene los datos de la base de datos. Puedes guardarlo en otros formatos mediante el menú Exportar de ésta página seleccionando otro tipo de archivo. Por defecto la exportación es en SQL. Cursosindustriales. Curso de DreamWeaver CS6 7

8 Ahora que ya tenemos el archivo.sql de nuestra base de datos, pulsa sobre el botón de importar datos de una tabla desde el botón de la barra de herramientas de Datos de DreamWeaver CS5 siguiente:. Se te muestra la ventana En donde en Examinar seleccionas el archivo SQL, Access, Excel, MySQL, etc., que nos hemos guardado previamente. Cursosindustriales. Curso de DreamWeaver CS6 8

9 En Delimitador, es el signo que separará los datos de la tabla entre sí. Puedes poner el que tú quieras mediante la opción OTRO e insertando el símbolo en el TextBox en blanco de la derecha. En Ancho de tabla tienes la opción de Ajustar a los datos en el cual la tabla se adaptará al tamaño de los datos y se redimensionará de acuerdo a esos. En la opción de Establecer en, puedes establecer el tamaño en porcentaje o en pixeles (la tabla se configurará a esos valores). Relleno de Celda y Espacio entre celdas sirve para formatear la alineación del contenido de la celda de la tabla respecto a sus bordes. El Borde define el grosor del borde de la celda. Formatear la primera fila indica un estilo visual para la primera fila. A continuación muestro la importación de la tabla en cuestión: -- phpmyadmin SQL Dump -- version Servidor: localhost -- Tiempo de generación: a las 14:18:42 -- Versión del servidor: Cursosindustriales. Curso de DreamWeaver CS6 9

10 -- Versión de PHP: ET SQL_MODE="NO_AUTO_VALUE_ON_ZERO; /*!40101 SET */; /*!40101 SET */; /*!40101 SET */; /*!40101 SET NAMES utf8 */; Base de datos: `pruebas_php` Estructura de tabla para la tabla `USUARIOS` -- Cursosindustriales. Curso de DreamWeaver CS6 10

11 CREATE TABLE IF NOT EXISTS `usuarios` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Usuario` varchar(50) COLLATE utf8_spanish_ci NOT NULL, `Contraseña` varchar(50) COLLATE utf8_spanish_ci NOT NULL, PRIMARY KEY (`Id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=3 ; Volcar la base de datos para la tabla `USUARIOS` -- INSERT INTO `USUARIOS` (`Id`, `Usuario`, `Contraseña`) VALUES (1, 'deimos_hack', 'dios'), (2, 'Pascual', 'amor'); Como puedes ver, te muestra los datos de la estructura de la base de datos. Estos datos se suelen usar en las importaciones para crear bases de datos en otros programas. El comando copia la estructura del archivo y después lo descarta, es decir no mantiene el archivo SQL, sino que copia los datos en una tabla y después podrías borrar el archivo si quisieras que no afectaría al resultado de la tabla. Cursosindustriales. Curso de DreamWeaver CS6 11

12 CONECTAR A LA BASE DE DATOS MySQL. Ahora que tenemos una base de datos creada en MySQL, imagina que desde la página Web queremos que se nos muestre el contenido de una tabla como hacemos cuando entramos en phpmyadmin. Desde DreamWeaver CS5 se permite realizar esa acción y muchas más, pero configurando un Juego de Registro. El Juego de Registro es una conexión a la base de datos de XAMPP (cuando se proceda a conectar a una base de datos online se indicará como). Todas las páginas PHP que requieran de una conexión a base de datos para realizar acciones como modificar la base, ver resultados de la base, hacer consultas a ciertas tablas, eliminar, modificar, actualizar contenido, deberá de tener un juego de registro que permita la posterior uso de la misma. Es decir cualquier acción con una base de datos (salvo la anterior), requiere de un juego de registro que permita conectar a la base de datos. El juego de registro se identifica por el siguiente icono presenta la siguiente ventana:, y al pulsarlo nos En donde: Nombre, se establece el nombre del juego de Registro. Por defecto es Recordset1. Conexión, se establece la conexión a la base de datos. Cursosindustriales. Curso de DreamWeaver CS6 12

13 Tabla, se selecciona la tabla que contendrá los datos a tratar en la conexión. Los RadioButton Columnas, establecen el campo de la tabla seleccionado para manipular su contenido. Filtro, establece un filtro de campos de la tabla pudiendo seleccionar únicamente un campo específico de la tabla. Ordenar, establece un Sort en la tabla de a continuación y la ordena de mayor a menor o viceversa según se selecciona. Ahora que tenemos la base de datos PRUEBAS_PHP creada, vamos a realizar la conexión a esa base de datos. Para ello fíjate que en el botón de Conexión, existe un botón a su derecha llamado Definir. Al pulsarlo se nos abren las bases de datos MySQL utilizadas previamente por defecto y que hemos utilizado anteriormente. Pulsamos sobre Nueva, y se nos abre la ventana para realizar una nueva conexión a la base de datos. En Nombre de la conexión, estableces el nombre que tendrá la conexión a la base de datos. Este nombre lo utilizará PHP como función para realizar la conexión con la base de datos. Cursosindustriales. Curso de DreamWeaver CS6 13

14 En Servidor MySQL, estableces en modo local siempre Localhost. En Nombre de usuario, como no hemos establecido usuario en la base de datos, establecemos root, como usuario principal. Contraseña, al igual que el anterior, al no definir un usuario ni contraseña, éste campo debe de quedarse vacío. En Bases de datos, al pulsar el botón de Seleccionar se te abre la ventana del navegador en el cual se te muestran las bases de datos MySQL que tienes en tu ordenador. Busca y selecciona la base de datos creada PRUEBAS_PHP, y pulsa sobre Aceptar y después Aceptar otra vez para que se cierre la ventana anterior. Se te mostrará el mensaje de alerta porque no has definido contraseña para la base de datos anterior. No te preocupes porque de momento no nos va a hacer falta la contraseña. Ahora ya DreamWeaver CS5 te muestra la nueva conexión realizada en la ventana del juego de registro. Cursosindustriales. Curso de DreamWeaver CS6 14

15 Conexión habitual. Para una conexión habitual, sin filtros, ni gaitas, ni cosas raras, en Conexión seleccionaremos la nueva conexión creada y dejaremos el resto tal cual está en la imagen: Observa que cuando establecemos la conexión, directamente en el campo Columnas se muestran los campos que tiene la tabla principal de la base de datos. Cursosindustriales. Curso de DreamWeaver CS6 15

16 Al pulsar sobre Aceptar se creará la nueva conexión y la página Web estará preparada para recibir datos. Observa que en el grupo de paneles del menú Vinculaciones se ha añadido el nuevo juego de registro. Con este simple ejercicio nos hemos conectado a la base de datos creada. Recuerda que sin la conexión a la base de datos, no podrías realizar ninguna de las acciones que vas a realizar a continuación en el siguiente capítulo. VER REGISTRO DE LA TABLA. Ahora que tenemos establecida la conexión a nuestra base de datos y que en el juego de registro hemos establecido a la tabla principal (Usuarios), a continuación vamos a mostrar en una página Web los datos del registro de la tabla. Para ello, pulsa sobre la herramienta de Datos dinámicos (Tabla dinámica). Se te mostrará una ventana parecida a la siguiente: Cursosindustriales. Curso de DreamWeaver CS6 16

17 El resultado muestra en nuestra página de DreamWeaver una tabla con regiones en PHP que nos ofrecen la conexión a la base de datos específica tal y como se muestra a continuación: Cuando ejecutemos, se mostrarán los 10 primeros registros de la tabla Usuarios salvo el del campo contraseña que sale oculto. El motivo por el que sale oculto es que al declarar el campo Contraseña, hemos utilizado un símbolo especial que los servidores de bases de datos no saben manipular para obtener datos, es decir la "ñ". Por lo que tendremos que modificar toda la base de datos y cambiar el nombre de Contraseña por el de Passw, por ejemplo. Modificación de la base de datos. Recuerda que SQL nos ofrecía modificar tanto los datos de la base de datos como la estructura de la misma. A continuación veremos cómo proceder a cambiar la estructura de la base de datos manteniendo los datos de la misma. Utilizaremos PHPMYADMIN para tal fin. MODIFICACIÓN DE LA ESTRUCTURA DE LA TABLA Abre la base de datos y pulsa sobre la tabla en concreto. Una vez seleccionada la tabla, el menú superior selecciona la opción de Estructura para que se pueda modificar cada campo de la tabla. Cursosindustriales. Curso de DreamWeaver CS6 17

18 Selecciona el CheckBox del campo que quieras modificar y después pulsa sobre el icono del lápiz para modificar los datos de ese campo: Ahora cambia el nombre de Contraseña al de Passw y pulsa sobre Grabar. A continuación se ha cambiado el valor del campo. Cursosindustriales. Curso de DreamWeaver CS6 18

19 Ahora estamos si podemos crear una tabla dinámica y ver los datos: Notice: Undefined variable: Recordset1 in C:\xampp\htdocs\cursosindustriales\cursos\dreamweaver\11.php on line 309 Warning: mysql_fetch_assoc() expects parameter 1 to be resource, null given inc:\xampp\htdocs\cursosindustriales\cursos\dreamweaver\11.php on line 309 Id Usuario Passw Notice: Undefined variable: row_recordset1 inc:\xampp\htdocs\curs osindustriales\cursos\d reamweaver\11.phpon line 305 Notice: Undefined variable: row_recordset1 inc:\xampp\htdocs\curs osindustriales\cursos\d reamweaver\11.phpon line 306 Notice: Undefined variable: row_recordset1 inc:\xampp\htdocs\curs osindustriales\cursos\d reamweaver\11.phpon line 307 Observa que en la ventana de comportamiento del servidor se han agregado los controles PHP necesarios para conectar a la base de datos y que se establece en cada una de las tablas específicas. Cursosindustriales. Curso de DreamWeaver CS6 19

20 Observa que la tabla dinámica incluye otros controles dinámicos como el Texto dinámico, o Repetir región. MÁS DATOS DINÁMICOS. No solo se puede mostrar una base dinámica mediante el icono de tabla dinámica. Si no que también en la flechita a la derecha que tiene este icono nos permite escoger otros controles como los que puedes ver a continuación. Repasaré rápidamente cada botón. Texto dinámico. Debes de tener un control TextBox en un formulario. En él se introducirá un campo dinámico que conectará con una base de datos específica o un campo de una tabla adecuado. Cursosindustriales. Curso de DreamWeaver CS6 20

21 Después solo tienes que escoger el campo que quiere que se muestre en la página y se mostrará (eso sí, solo una vez y no se repetirá como en la tabla, es decir que solo aparecerá un registro). El código PHP que aparece abajo es el código que deberás de introducir en el valor del control TextBox para que se cargue en el interior del mismo el resultado de la consulta MySQL. Casilla de Verificación dinámica. Muestra un cuadro de mensaje en el cual pide al usuario que seleccione un campo para que se produzca la verificación de los datos mostrados. Casilla de verificación dinámica. Debes de introducir previamente en un formulario una casilla de verificación para poder realizar una verificación de los datos del formulario y la base de datos. Cursosindustriales. Curso de DreamWeaver CS6 21

22 Grupo de opciones dinámicas. AL igual que el anterior debes de tener un formulario con varios controles RadioButton para poder utilizar este dato dinámico. Lista de selección dinámica. AL igual que los anteriores, éste control requiere de una lista de opciones para poder tratar los datos de manera de lista, y los datos se muestran de forma de paneles de fichas en un control SelectBox. Cursosindustriales. Curso de DreamWeaver CS6 22

23 SERVIDOR REMOTO GRATUITO. Antes de empezar con el tema, voy a indicarte que existen varias alternativas al pago de servidores, y son cada vez más los servidores gratuito que te ofrecen bastante espacio en disco, varias bases de datos MySQL, transferencia mensual alta, cuentas de correo y otras características que hacen posible que no tengas porqué contratar un dominio exclusivo si tu página no es de tamaño considerable. Aunque las imágenes que voy a mostrar son en la gran mayoría las que se muestran de mi panel de control de mi dominio personal, también voy a utilizar un dominio gratuito llamado 260mb.com para que tú puedas practicar y subir tus propias páginas Web. Las características del servidor gratuito son muy buenas y te las muestro a continuación: MB de espacio en disco (10Gb). 100 Gb de transferencia mensual (puedes ver 25 DVD completos al mes). 10 bases de datos MySQL Acceso a PhpMyAdmin. Panel de control. Web Mail. 1 cuenta FTP. File Manager. Cursosindustriales. Curso de DreamWeaver CS6 23

24 Por lo que me he decantado por dicho servidor gratuito para que empecéis a desarrollar páginas en PHP que interactúen en bases de datos MySQL. Sobre el CPANEL. En la actualidad la mayoría de los servidores utilizados para dominio, utilizan esta tecnología de Front - end para ayudar al usuario a manejar archivos, manipular las bases de datos, cuentas ftp y demás acciones de manera sencilla y rápida. Este software es una distribución de pago cuyos costes corren a cargo de la empresa de hosting y que se suele renovar anualmente sin que afecte al usuario en su precio final. Por norma general tienen soporte para Linux, cosa que a ti no te afecta en absoluto porque su interfaz gráfica es muy sencilla y fácil de usar. Se diseñó para el uso comercial de servicios de alojamiento web, es por esto que la compañía que lo diseño no lo ofrece con licencia de uso personal. A continuación te indico parte de sus propiedades y productos que te podrás encontrar en cualquier servidor tanto de pago como gratuito. Cursosindustriales. Curso de DreamWeaver CS6 24

25 Básicamente se basa en tres apartados. Los accesos directos y la búsqueda, las estadísticas y las aplicaciones. Respecto a la búsqueda y accesos directos, hace referencia a elementos del CPanel como el Phpmyadmin, manejadores de Apache, Tipos MIME, etc. APLICACIONES. Las aplicaciones son pequeños scripts con interfaz gráfica que te permiten interactuar con el servidor Web. Las aplicaciones se clasifican por la función que van a realizar en el servidor, por lo que existen aplicaciones diversas. Cursosindustriales. Curso de DreamWeaver CS6 25

26 Así tienes aplicaciones que te permiten subir archivos al servidor, como aplicaciones que te permiten adaptar las imágenes y vídeos para que no ocupen un espacio grande en el servidor. También tienes las aplicaciones básicas para acceder a Phpmyadmin, tu cuenta de correo, configurar el cliente FTP, respaldar las subidas y los archivos en el servidor y una gran variedad de aplicaciones. Por lo general las aplicaciones se agrupan en función de su tarea. Por ejemplo, las funciones de subida y tratamiento de archivos, como así la copia de seguridad de archivos, control se sesiones, cuenta de FTP y el administrador de archivos se agrupan dentro del menú de Archivos. El administrador de MySQL, phpmyadmin, y las bases de datos, se agrupan dentro del menú Bases de Datos; y etc., etc. ESTADISTICAS. Las estadísticas te informan sobre el estado del servidor. En este menú puedes consultar el estado de tu servidor, el espacio ocupado, el espacio restante, el número de bases de datos, el espacio de las mismas, el trafico consumido (cosa que se llama transferencia mensual), el número de dominios, tus subdominios, los datos contratados por el cliente o las cuentas de correo que tienes y el espacio ocupado. Este menú te informa y te permite consultar directamente el estado. Lo usarás a menudo para comprobar el espacio en disco usado y para ver cuánto tráfico has derivado. Este último punto es muy importante, ya que los servidores gratuitos suelen limitar el tráfico de visitas a una cantidad estimada. En el servidor que vamos a ver, podemos ver que es de 100Gb mensual, lo cual a menos que tuvieses una página de descargas, es muy difícil que consumieras todo el ancho de banda. La transferencia mensual es por tanto los datos que los demás usuarios consumen al entrar en tu sitio Web. Cursosindustriales. Curso de DreamWeaver CS6 26

27 Este detalle es importante, porque los servidores gratuitos suelen paralizarte la web si alcanzas el límite de transferencia mensual o te piden que pagues una cifra para aumentarte el ancho de banda. Es por ello que cuando se escoge un servidor para alojar tu dominio, tengas en cuanta este tipo de cosas. Acceder al CPanel. El acceso al panel de control va mediante login. Tanto en un servidor de pago como otro gratuito, esta forma de acceso suele realizarse de la misma forma y ligada a tu cuenta de usuario. En este curso de DreamWeaver CS5 no voy a indicarte cómo proceder a darte de alta en el servidor gratuito 260mb.com, pues eso ocasionaría mayor retraso en el curso y además el proceso de registro es muy sencillo. Cursosindustriales. Curso de DreamWeaver CS6 27

28 En el servidor 260mb.com, los nuevos usuarios tendrán un nombre de usuario de la forma mb260_xxxxxxx. Y deberás de ingresar en una dirección específica. Yo, como tengo una cuenta antigua, pertenezco al tipo de usuarios de la forma pacus_xxxxxxx, por lo que tendré otro enlace para acceder al CPanel. En cuanto haya metido mi nombre de usuario y contraseña, accederé al CPanel del servidor gratuito 260mb.com (que ahora se ha cambiado el nombre de dominio por.org). Puedes cambiarle el lenguaje por defecto a español, si quieres. Cursosindustriales. Curso de DreamWeaver CS6 28

29 Como puedes ver el panel de control del servidor gratuito no difiere mucho del panel de control del servidor de pago. CONFIGURANDO EL SERVIDOR. Empezaremos en nuestro servidor gratuito. Al registrarte te han dado una dirección Web como por ejemplo la que tengo yo en línea: Si accedes a la página verás varios subdominios y cada subdominio indica una página Web. Al introducir tu usuario y contraseña accederás al CPanel del servidor gratuito. Aunque es muy parecido, las versiones gratuitas y de pago, carecen de Cursosindustriales. Curso de DreamWeaver CS6 29

30 similitudes al 100% lo que implica que existan pequeñas diferencias sobre todo a la manipulación de usuarios en MySQL. Mientras que un servidor de pago, te permite crearte usuarios para tus bases de datos, en un servidor gratuito te suelen dar ya los datos de acceso a las bases de datos mediante un usuario creado previamente. En el menú de estadísticas puedes ver tus datos de acceso en el menú de Datos de la cuenta: Esto puede acarrear un pequeño problema a la hora de configurar nuestro Juego de registro para que se conecte a la nueva base de datos. Así que iremos paso a paso. Administrador de archivos Desde el menú de Administrador de archivos podremos subir, acceder o eliminar archivos al servidor. Pincha sobre el icono del administrador. Se te abre una nueva ventana en la cual puedes ver el directorio raíz del servidor. Existen principalmente dos carpetas. Cursosindustriales. Curso de DreamWeaver CS6 30

31 Up y htdocs. La primera carpeta es para indicar que quieres subir en el árbol de directorios. Como la página es la primera página, estás en la parte más alta del directorio, es decir no tienes más carpetas por encima. La segunda htdocs, es la carpeta principal de la aplicación. Ella representa al servidor y es similar a la carpeta principal del servidor local de DreamWeaver CS5. Dentro de esta carpeta deberás de introducir los archivos html, php, js, carpetas de multimedia, etc., que necesites para reproducir la página Web. Ten en cuenta que el servidor va a buscar siempre el archivo index.html. Si no lo encontrara buscaría el index.php. Si no existiese ninguno, cargará el directorio de archivos al igual que pasa en mi página, tal como puedes ver en la imagen. Cursosindustriales. Curso de DreamWeaver CS6 31

32 Puedes ver que la carga, manipulación y tratamiento de archivos se realiza de forma similar a como lo hacíamos en DreamWeaver CS5, pero con la diferencia de que aquí hay que realizarla con más cautela y más despacio, al ser online. Recuerdas que en un capítulo creamos un nuevo sitio en DreamWeaver CS5 llamado Pruebas? Al sitio le añadimos una página llamada index.php que cuando se cargaba salía un mensaje que decía "Bienvenido a mi página web". Recuerda también que en el capítulo anterior creamos una base de datos llamada PRUEBA_PHP, que tenía dos tablas, USUARIOS y DIRECCION. Además dentro de las tablas introducimos varios datos. Antes de crear la base de datos, vamos a subir archivos a nuestro servidor. Para ello, pincha sobre la carpeta htdocs, y en la nueva ventana, pulsa sobre el botón de Upload. Se te abre un cuadro de diálogo para que selecciones el archivo a subir. Selecciona el sitio Pruebas en la carpeta htdocs de XAMPP y selecciona el archivo index.php, tal cual puedes ver en pantalla. Cursosindustriales. Curso de DreamWeaver CS6 32

33 Una vez seleccionado, pulsa sobre la raya verde y el archivo será subido al servidor. Sobre este gestor de cargas, en el botón de Add another, agregas otro control de Examinar para que puedas subir más archivos a la vez. En la parte de la derecha, tienes la opción de subir el sitio Web completo siempre que lo tengas comprimido en un archivo.zip,.tar,.tgr, o.gz. De esta manera te ahoras el estar subiendo uno a uno los archivos al servidor. Al volver a la página de htdocs, encontrarás el nuevo archivo. Cursosindustriales. Curso de DreamWeaver CS6 33

34 Y al refrescar la Web, te encuentras con la página php subida: CONFIGURAR EL CLIENTE DE FTP. El propio servidor gratuito te ofrece la descarga de programas para que puedas subir archivos directamente al servidor sin que lo tengas que hacer por el CPanel del mismo. Un programa de FTP es un programa cliente que se conecta al servidor al igual que has hecho anteriormente, pero sin tener que realizar todo el proceso, ya que es el propio programa el que realiza las acciones de conexión, subida, modificación, etc., de los archivos que desees. Yo utilizo el programa gratuito CoreFTP que puedes descargar desde en enlace siguiente: Pero también puedes usar el FileZilla u otro gestor FTP conocido. Cursosindustriales. Curso de DreamWeaver CS6 34

35 Configuración del CoreFTP. Para agregar un nuevo dominio, una vez instalado y abierto, nos vamos a la pestaña de Sites y seleccionamos Sites Manager. En la nueva ventana que se nos abre, seleccionamos New Site (nuevo sitio). Y al pulsar, los controles TextBox, se quedan vacíos para que introduzcamos los nuevos datos de acceso al nuevo sitio. Para rellenar los datos debes de ir al CPanel de tu servidor remoto y fijarte en el menú de estadísticas. Cursosindustriales. Curso de DreamWeaver CS6 35

36 Fíjate que el único dato que necesitamos coger de los detalles de la cuenta es el servidor FTP que en mi caso viene dado por ftp.260mb.com. Tu deberás de meter dicho dato dentro de la dirección URL en el gestor de sitios, dentro del apartado Host / IP / URL. En Site Name, el nombre que quieras ponerle a la conexión con el servidor. En Username, el nombre de usuario del servidor. El Password, la contraseña del servidor. El puerto por defecto es el 21. Cuando pulses sobre Connect, se guardará automáticamente dicho sitio y se conectará al servidor FTP, mostrando en el ventana del programa los archivos del servidor. Cursosindustriales. Curso de DreamWeaver CS6 36

37 Ahora ya podrás seleccionar de manera más rápida los archivos y realizar subidas múltiples. Cursosindustriales. Curso de DreamWeaver CS6 37