Tupale

Crear sitio web con PHP y MySQL paso a paso capitulo 3

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.

Participa de este curso en Campuzoide gratis!!

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, aquí te dejo el enlace para descargarlo.

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.

Xampp crear sitio web con php mysql 1

Xampp crear sitio web con php mysql 1

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.

    Dreamweaver crear sitio php y mysql 1

    Dreamweaver crear sitio php y mysql 1

  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.

    Dreamweaver crear sitio php y mysql 2

    Dreamweaver crear sitio php y mysql 2

  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.

    Dreamweaver crear sitio php y mysql 3

    Dreamweaver crear sitio php y mysql 3

  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.

    Dreamweaver crear sitio php y mysql 4

    Dreamweaver crear sitio php y mysql 4

  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.

    Dreamweaver crear sitio php y mysql 5

    Dreamweaver crear sitio php y mysql 5

  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.

    Dreamweaver crear sitio php y mysql 6

    Dreamweaver crear sitio php y mysql 6

  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.

    Dreamweaver crear sitio php y mysql 7

    Dreamweaver crear sitio php y mysql 7

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.

24 comments for “Crear sitio web con PHP y MySQL paso a paso capitulo 3

  1. Alejandro
    8 octubre, 2010 at 1:28 PM

    Una vez más, me quedo asombrado de lo bien explicado que está el artículo (lástima que por ahora solo tengamos 3 capítulos)…

    Muchas felicidades por un trabajo simplemente perfecto.

    Si no es mucho pedir…. ¿Para cuando los otros capítulos? (Ya estoy ansioso)

    Un cordial saludo,

    Alejandro

  2. 11 octubre, 2010 at 9:35 PM

    Lamento mucho estar tan desconectado del curso y de la web en general estos últimos días, todo a sido debido al volumen de trabajo que tengo, pero a partir de mañana retomare el curso y todas mis obligaciones como webmaster de esta comunidad.

  3. pablo
    13 noviembre, 2010 at 7:07 PM

    muy buenos tus trabajos al igual que los dos anteriores, se nota que estas muy bien informado del tema. saludos

  4. Alejo L
    18 enero, 2011 at 4:49 PM

    Muy buenos días, muy interesante el curso. Tengo una pregunta acerca del XAMPP, resulta que tengo windows 7 de 64 bits y a la hora de correr el Apache, me pone demasiados problemas, buscando y leyendo en internet encontré que a mucha gente le pasa lo mismo debido a que el sistema operativo es de 64 bits, la versión de XAMPP que se encuentra normalmente es la de 32, alquien sabe si existe una de 64?, Será mejor instalar servicio por servicio?

    Muchas gracias por su respuesta y energía,

    Alejo L.

    • 18 enero, 2011 at 5:01 PM

      Actualmente uso Xampp en windows 7 sin ningún problema, revisa tu instalación porque normalmente no debe generar ningún problema, sin embargo si tube problemas instalándolo en windows vista, pero solo hay que desactivar el UAC (User acces control).

      Porfavor realiza tus preguntas en el Foro para poder seguir el caso y revisar el problema demanera mas detallada.

  5. 13 abril, 2011 at 3:18 PM

    Maravilloso tutorial, super animado hasta el momento. Verás utilizo CS5 y en HTML5 y CSS3 estoy super integrado, el tema es el PHP y MySQL que estoy pez total. He llegado al momento en el que debo crear un sitio y definir la url del sitio como localhost/nombre del sitio pero en las opciones que trae CS5 es diferente, y me pierdo por intentar no desviarme lo maximo posible del tutorial.
    No me permite seleccionar http://localhost/nombredelsitio me dice “The local site folder path must be absolute”.
    Te agreadeceria que me echases una mano lo antes posible, estoy inmerso en un proyecto web y quería poder ofrecer un poco de soporte php para que puedan publicar noticias sin necesidad de depender de webmaster y poder tener acceso mediante usuarios.
    La web en cuestión es http://www.sanignacioalcala.es

    Muchisimas gracias de antemano y genial tutorial, lo mejor que he encontrado por google!

    • 18 abril, 2011 at 3:16 PM

      Hola amigo aquí esta el como hacer la configuración del servidor en Dreamweaver CS5 si tienes algún inconveniente puede pedir ayudar a traves del foro. xD

  6. 11 julio, 2011 at 10:16 PM

    Excelente, llevo meses buscando informacion y siempre me parecio algo tedioso, pero hasta ahora con este tutorial me va muy bien hermano, muchas gracias!! Saludo, eres bueno!

  7. LiliumAqua
    1 febrero, 2012 at 5:29 AM

    bueno hasta aquí voy mas o menos bien …! Errores con los que me tope:

    Xampp versión 1.7.7

    1. ports or 443 ssl already in use installing apache 2.2 service failed

    RESUELTO. El apache usa el puerto 80, igual que skype, y como no voy a desinstalar skype, pues se hace lo siguiente: Skype ir a:

    Herramientas/Opciones/Avanzadas/Conexion
    Quitar la opción que dice USAR PUERTO 80
    (guarda y reiniciar skype)

    2. MySql service not started

    RESUELTO. Ni idea por que paso, solución después de haber arreglado el error 1, desinstale e instale de nuevo, y se solución (espero ya que he tenido problemas con MySql en otros programa llamado SAM broacaster donde tuve que optar por cambiar a Firebird)

    Dreamweaver

    1. Problemas de versión ya que estoy usando cs5, por lo cual las opciones son diferentes.

    EN PROCESO DE SOLUCIÓN.

  8. Manuel
    23 marzo, 2012 at 2:07 AM

    Hola, quería agradecerte por compartir tus conocimientos con las personas que queremos aprender algo nuevo, y felicitarte por el método pedagógico que usaste, mas claro …….., y volviendo al tema quería que me orientaras un poco, yo tengo instalado el CS5 en mi equipo y no he logrado configurar el servidor en Dreamweaver. agradecería me orientaras en este punto. de antemano te agradezco tu tiempo y colaboración.

    • 23 marzo, 2012 at 3:10 AM

      Te recomendaría publicar en el foro con exactitud cual es el inconveniente que tienes.

  9. 20 octubre, 2012 at 7:47 AM

    excelente …..

  10. 9 enero, 2013 at 10:43 AM

    hola amigo, la verdad hace más de un año que vengo buscando el tutorial indicado, y debo decir que este me parece perfecto. Cuando termine de incorporar php a mi sitio sepa bastante bien configurarlo yo también haré un tutorial, y créeme que te recomendaré mucho.
    Hasta ahora no había tenido problemas, pero aquí necesito un link de descarga al archivo xampp que tu tiénes, porque me descargué otra versión y no anduvo. Gracias, si pudieras pasarme el link estaría más que agradecido.
    Quiero decir que entre en el sitio buscando este tuto, y encontré un montón de tutos de cosas que me interesan, sos re bueno, y me enseñaste muchísimo, gracias sinceramente.

    Luka

    • 9 enero, 2013 at 11:18 AM

      Muchas gracias por tu apoyo y tus palabras…
      Desde la pagina de Apache Friends puedes descargar la ultima versión de Xampp, sin embargo la diferencia con el xampp que use en el tutorial y la ultima version es que la ultima versión tiene un modo debugueador activado esto significada que mostrara alertas que en un servidor de producción no saldrían como esto no significa que funcione diferente, digamos que si usas una condicional if($variable > 0) en producción no te mostrara nada si la variable no existe, pero en el xampp te sacara un warning diciendo que la variable no se definió previamente.

      • 9 enero, 2013 at 1:06 PM

        Gracias de nuevo, ya voy aprendiendo.
        La verdad quiero que sepas, tengo 12 años, por eso me costaba tanto entender, y la verdad te quiero agradecer por la ayuda y lo bien que explicas esto, que hasta yo lo entiendo. (Eso si es un logro)

  11. 30 enero, 2017 at 5:17 PM

    Buen dia.

    estoy siguiendo el tutorial paso a paso y para aquellos que puedan tener los mismos problemas que yo les comento al instalar XAMPP no pudi iniciar el servicio de Apache. esto debido a que varias aplicaciones usan los mismos puertos y al estar ocupado no puedes inicial el servicio, en la configuracion de Apache puedes cambiar el puerto predeterminado (puerto 80 ) por que que gusten yo utilize 8181 y ya no pude problemas la unica diferencia en el tutorial sera que al mandar llamar a tu LocalHost tendras que decir que es el locasl host del puedto 8181

    http://localhost:8181/Nombre de tu sitio/

    algo asi

Deja un comentario

A %d blogueros les gusta esto: