Bienvenidos a una entrega mas del tutorial que se convirtió en curso “Crear sitio web con PHP y MySQL paso a paso capitulo 3” y de nuevo debo comenzar dando las gracias, ya que el capitulo 2 también tubo una gran aceptación.
Para los que no conocen los capítulos anteriores de este curso aquí los dejo.
Espero que esta nueva entrega sea de su agrado y que coloquen mucho empeño pues comenzaremos con el desarrollo del sitio, mas específicamente con la instalación de las herramientas que vamos a utilizar y la creación del sitio de trabajo en dreamweaver.
Bueno pues como ya dije lo primero que debemos hacer es instalar un par de herramientas con las que espero ya estés familiarizado aunque si no lo estas no hay problema iremos viendo parte por parte como usarlas aunque no las estudiaremos a profundidad solo nos fijaremos en lo que necesitamos para crear el sitio con PHP y MySQL.
Software que necesitaremos para comenzar:
Adobe Dreamweaver:
Esta es una de las herramientas mas importantes, de echo considero que es la fundamental para realizar nuestro proyecto.Sera el software con el cual creemos los documentos HTML y PHP que necesitaremos para nuestro sitio. Aaunque existen muchas soluciones diferentes para la creación de sitios (frontpage, quanta, notepad, etc) esta sin duda es la mas popular del mercado y la que ofrece la mayor capacidad y posibilidades, ademas se adapta de manera perfecta para el proyecto que vamos a desarrollar a lo largo de este curso. Actualmente Adobe Dreamweaver se encuentra en la versión CS5 pero para poder trabajar en un nivel mas sencillo usaremos la versión CS3 entonces solo deben pulular un poco en Internet y hacerse con una copia de Adobe Dreamweaver CS3.
Adobe Fireworks:
Este es un software de manejo de imágenes y aunque me imagino que haz escuchado hablar mucho de Photoshop es mejor usar Fireworks ya que este ultimo esta enfocado completamente en la web, en crear archivos de dimensiones y características ideales para visualizar en un navegador web (browser). Igual que con el anterior, usaremos la versión CS3 para tener un mejor juego de compatibilidad con Dreamweaver, aunque la versión CS4 incluye una serie de efectos muy interesantes, pero eso en este momento no es muy importante.
Servidor XAMPP:
Como ya sabrán por el capitulo 1, para tener nuestro sitio en Internet es necesario contar con un servidor de hosting o alojamiento web para tener nuestro sitio en linea y también sabrán que PHP es una tecnología que solo funciona en servidor. Sin embargo mientras desarrollamos nuestro sitio seria muy engorroso estar subiendo los archivos a un servidor de Internet para hacer pruebas, así que usaremos XAMPP para instalar simultáneamente en nuestro pc un servidor local llamado localhost que tendrá servicio “apache”, bases de datos “MySQL”, lenguaje activo “PHP” y otras herramientas como FTP que en este momento no son importantes.
Xampp es un software gratuito que puedes descargar e instalar sin problemas
Instalar Xampp:
Antes de empezar a trabajar deberemos tener el xampp activo y con los servicios corriendo, aunque solo necesitaremos el servicio de apache y el servicio de MySQL, esto lo hacemos dando click en el icono de xampp que nos abrira una ventana en la cual presionaremos start en estos dos servicios (Apache y MySQL), luego podremos ver que que el servicio a quedado funcionando notando que el servicio aparece con la palabra “Runing” (Corriendo) en verde (tal como esta en la imagen de abajo) y porque podremos acceder al sitio http://localhost que es nuestro servidor local.
La primera vez que accedas a http://localhost veras una pagina de bienvenida del xampp, este es un sitio que viene por defecto con la instalación, personalmente prefiero borrarlo para tener mi carpeta de trabajo libre de archivos que no sean míos, pero ¿Como hago esto?, bueno primero debes saber que todos los archivos que guardes en esta ubicación C:/xampp/htdocs son los que podrás acceder por protocolo http en http:// localhost por lo tanto solo tienes que entrar en la carpeta C:/xampp/htdocs y eliminar todos los archivos y carpetas que encuentres aquí dentro, luego cuando entres de nuevo a localhost te debe salir un aviso que dice “Index Of Localhost” y si colocas archivos en esta carpeta (htdocs) al ingresar a tu localhost (http://localhost) veras los archivos que hallas colocado en la carpeta, pero como decía antes, los veras a través del protocolo http de Internet por lo tanto si subes una imagen la abrirás con el navegador y si subes un archivo digamos .rar veras que al acceder sera como descargarlo de Internet.
Importante: http://localhost es una ubicación solo accesible desde tu maquina, para que otras personas puedan acceder a tu localhost tendrian que copiar tu ip publica y tendrías que tener configurado tu router para permitir conexiones por puerto 80, pero eso es algo que no necesitaremos durante el curso así que si deseas aprenderlo pues usa Google.
Bien manos a la obra, lo primero que tenemos que hacer una vez instalados todos los programas que mencione anteriormente es crear el sitio de trabajo, de manera que abriremos Dreamweaver.
1- Ve a la ventana de sitio en el menú superior y selecciona nuevo sitio
2- En el cuadro de dialogo que te aparece deberas definir dos cosas, primero el nombre del sitio, que puede ser el que tu quieras, en mi caso es “Visual Rock” y el segundo campo que es la url del sitio, aqui debes colocar siempre localhost/nombre de tu sitio, tal como aparece en la imagen.
3- En la siguiente ventana nos preguntara si deseamos trabajar con alguna tecnologia de servidor, en este caso diremos que si y seleccionaremos PHP y MySQL.
4- En la siguiente ventana nos preguntara como deseamos trabajar los archivos durante la etapa de desarrollo, aqui seleccionaremos la ultima opción y buscaremos la carpeta C:/xampp/htdocs en la cual crearemos una carpeta para nuestro proyecto, esta carpeta debe tener el mismo nombre que especifiquemos en la url, por ejemplo, si mi url es http://localhost/visualrock la carpeta debe llamarse “visualrock”, te recomiendo no usar espacios ni caracteres extraños en el nombre de la carpeta, para evitar problemas con el desarrollo.
5- Al dar siguiente iremos a la ventana de confirmación de archivos, donde deberemos ingresar la URL de nuevo, pero es muy importante que la coloques con un “/” al final, luego pulsas el boton “Comprobar URL” y debe aparecerte una ventana que dice “La prueba del prefijo URL ha sido correcta” en caso de que aparezca un error deberar verificar los pasos anteriores en busca del problema.
6- Por ultimo la ventana del final nos confirmara la información que hemos ingresado, recomiendo que revisen los datos una ultima vez para evitar problemas con rutas en un futuro.
7- Una vez que hallamos pulsado el botón completar podremos abrir el panel de archivos
(Menú superior ventana >> Archivos)) y ver que nuestro sitio ya esta creado, como aparece en la imagen a continuación.
Bien es todo durante este capitulo del curso, en la próxima entrega estructuraremos la base de datos y crearemos el esquema básico de funcionamiento del sitio.