Tupale

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

Bienvenidos a una nueva entrega del curso sobre como Crear sitios web con PHP y MySQL paso a paso. Se que muchos han esperado por largo tiempo esta entrega y me disculpo por ello pero el trabajo no da mucho tiempo para las webs personales.

Quiero agradecer especialmente a los usuarios que me han enviado sus mensajes de apoyo y sus opiniones sobre el curso, también a los que dejan sus comentarios, muchas gracias por el apoyo, pero ahora necesito que apoyen aun mas el sitio recomendando a través de las redes sociales (twitter y facebook), en la parte superior hay unos botones para cada red, nada cuesta twittear o facebookear este capitulo del curso y si estarán apoyando al creador.

Ahora este curso esta disponible en Campuzoide:

Curso de PHP y MySQL con Dreamweaver desde cero

Ahora volvamos con los tradicional, el listado de los capítulos anteriores de este curso:

  1. Crear sitio web con PHP y MySQL paso a paso capitulo 1
  2. Crear sitio web con PHP y MySQL paso a paso capitulo 2
  3. Crear sitio web con PHP y MySQL paso a paso capitulo 3
  4. Crear sitio web con PHP y MySQL paso a paso capitulo 4
  5. Crear sitio web con PHP y MySQL paso a paso capitulo 5
  6. Crear sitio web con PHP y MySQL paso a paso capitulo 6

En el capitulo anterior estábamos viendo como maquetar un sitio, bueno creo que hay mucho y poco que decir sobre este tema, cada quien tiene una forma de maquetar y siempre existirá la dualidad entre maquetar con tablas o con divs CSS, yo personalmente recomiendo hacer un híbrido de los dos ya que aunque usar divs mejorara su posicionamiento y un poco el rendimiento de su sitio, usar tablas les ahorrara mucho trabajo y dolores de cabeza acomodando objetos y serán mucho mas eficientes a la hora de trabajar.

Ahora quiero enseñarles como quedo finalmente el sitio que inspiro este curso “Visual Rock 2010“. aunque sinceramente termino un poco desordenada debido a una serie de cosas que no se plantearon antes de comenzar el desarrollo.

Ahora vamos a comenzar con la parte interesante que es el administrador de contenido y la creación de los comportamientos dinámicos, en resumen lo que nos permitirá administrar nuestro sitio web desde un panel de control sin tener que abrir dreamweaver cada vez que queramos hacer un cambio. es aqui donde nace la magia de usar PHP y MySQL.

Debido a que este es un curso enfocado solo en la creación del sitio, no voy a profundizar en las funciones PHP o en las consultas MySQL solo en las herramientas que nos da Dreamweaver para crear un sitio de este alcance.

Entonces manos a la obra, vamos a construir nuestro sistema o panel de administración, de manera que crearemos una carpeta nueva dentro de nuestro sitio llamada “admin” o “administrador” o como quieran llamarle, en esta carpeta guardaran todos los archivos de su panel de administración. Te recomiendo que por anticipado coloques estas cosas básicas en tu carpeta de administración.

  1. Un set de iconos, te puede ser muy util puedes conseguir varios en http://www.freeiconsweb.com/ procura tener mucho iconos para cualquier acción que realices y que tenga una linea gráfica similar para que se vean bien.
  2. Un editor Wisyng, es un simple script para colocar editores HTML a tus áreas de texto asi cuando vallas a agregar contenido desde tu administrador podras usar, negrillas, párrafos y en fin muchos elementos que facilitaran el trabajo de quien agrega el contenido. Existen dos editores Widyng que yo recomiendo, uno es el CKeditor que es que mas uso en mis proyectos por su robustez y su soporte, aunque debo reconocer que TinyMCE suele ser mucho mas eficientes en muchas ocasiones.
    CKEditor: http://ckeditor.com/demo
    TinyMCE: http://tinymce.moxiecode.com/examples/full.php
  3. Scripts que puedas necesitar, que te puedan ser útiles, librerías de PHP, aunque no es obligatorio y tal vez no entiendas que son las librerías pero bueno son pequeños scripts que en determinado momento nos pueden ahorrar trabajo, por ejemplo si voy a enviar muchos correo electrónicos desde mi sitio podría usar la librería o clase PHPmailer. Sin embargo no te preocupes mucho por esto, durante el curso voy a publicar los códigos que utilizo frecuentemente para que te faciliten la vida.
  4. Extensiones de Dreamweaver para ahorrar trabajo, hay muchas extensiones de Dreamweaver que nos pueden ayudar a la hora de realizar ciertos procesos que podrían ser un poco tediosos o complicados. Por ejemplo para paginar registros yo recomiendo el FX Record set, que es una herramienta excelente ademas que sera muy utilizada durante este curso así que deberían instalarla.

Bien una vez que estamos preparados comenzaremos creando el sistema de login o sistema de usuarios, de manera que crearemos un archivo llamado login.php y lo colocaremos dentro de nuestra carpeta administrador, en este archivo obviamente deberemos hacer el formulario de login para acceder al sitio de administración.

Recuerda usar el panel de propiedades para asignar el nombre al campo dle formulario y procura llamarlo igual que el campo en la base de datos, eso te ahorrara tiempo. también es buena idea definir el nombre del formulario y generalidades, es muy importante que este formulario se envié mediante POST y también recuerda colocar la propiedad de password al campo de contraseña como aparece en la siguiente imagen.

Propiedades de campos password

Propiedades de campos password

Es simple un formulario con un campo de usuario y uno de contraseña. este formulario enviara los datos que serán comparados con los existentes en la tabla de usuario o administradores en la base de datos. Tabla que creamos en el capitulo 4 de nuestro curso.

Como crear un login form

Como crear un login form

Una vez creado el formulario vamos a crear el comportamiento de logueo, es aquí cuando el PHP entra en juego pero nos vamos a apoyar en Dreamwaver para hacer este proceso mucho mas sencillo. Vamos a ir al menú “ventana” y seleccionamos “Bases de datos”, recuerden que a este punto es importante que ya hallan creado el sitio de su proyecto y que actualmente se encuentren trabajando sobre el como explicamos en el capitulo 3.  Continuemos, una vez abierto el panel de Bases de datos usaremos el icono + para agregar una nueva base de datos a nuestro proyecto.

Ventana Databases Dreamweaver

Ventana Databases Dreamweaver

Desde el cuadro de dialogo que nos aparece crearemos nuestro archivo de configuración y conexión a la base de datos, para comenzar el nombre de la conexión se la das tu, puede ser el nombre que escojas, recuerda no agregar, caracteres extraños ni espacios. Ya que estamos usando Xampp el servidor sera “localhost” el usuario sera “root” y no usara contraseña, esta es una configuración por defecto en XAMPP y en la mayoría de servicios de host local. Luego de colocar estos datos selecciona la base de datos dando clic en el botón “Seleccionar”, ay te aparecerá un listado de las bases de datos que tienes en MySQL, selecciona la de tu proyecto y dale aceptar.

Crear base de datos dreamweaver

Crear base de datos dreamweaver

Bien una vez que hayamos echo lo anterior podremos confirmar que la conexión ha sido creada porque aparece en nuestro panel de Bases de datos y podemos navegar las tablas y los procesos almacenados desde ay.

Ver base de datos en dreamweaver

Ver base de datos en dreamweaver

Bien voy a terminar aquí por falta de tiempo y seguiré mañana con el uso de los juegos de registros y la creación del sistema de login (usuario y contraseña).

Ahora unas aclaraciones importantes:

  • Recuerden que me pueden escribir para hacerme cualquier pregunta sobre el tutorial y yo con gusto les responderé.
  • También pueden usar los comentarios o el Foro para realizar y solucionar sus dudas.
  • En la parte superior del capitulo del curso hay un contador de redes sociales, que muestra cuantas veces se ha compartido esto en facbook, en twitter y otras redes, cuando el contador llegue a 20 voy a publicar el siguiente capitulo, de manera que si quieren otro capitulo rápido, compartan esto en us facebook y en su twitter para llegar rapido a los 20 shares.

hasta la próxima amigos. xD

27 comments for “Crear sitio web con PHP y MySQL paso a paso capitulo 7

  1. 3 enero, 2011 at 11:09 PM

    Muchas gracias por el tutorial, creo q he sido el numero 20 asi q espero cn ansia el siguiente tutorial. Me parece muy practico por que aplicas tu experiencia y asi ayudas a evitar errores que uno se da cuenta cuando ya tiene casi el proyecto terminado. Gracias

  2. 4 enero, 2011 at 5:08 AM

    Bien gracias a victor y a muchos otros usuarios ya llegamos al share numero 20 de manera que mañana publicare un nuevo capitulo del curso. Gracias por seguirnos. xD

  3. 18 enero, 2011 at 6:26 PM

    Este tutorial es el mejor que he visto, ahora, me gustaria saber en que programa hago el formulario para el rgistro de usuarios. En Dreamweaver?

  4. loladovana
    9 junio, 2011 at 1:15 AM

    echale un vistazo a mi blog y si no tienes inconveniente voy a preparar un post para mandarte gente, ya me diras algo…gracias!!!

  5. Miguel
    26 junio, 2011 at 5:20 AM

    Hola, buen trabajo con el tutorial Kalvin 🙂

    Tengo un problema. Cuando voy a insertar una base de datos para el formulario de login.php, me aparece el siguiente error y no se que hacer para insertarla y continuar.

    Captura del error: http://www.mafcreative.com/problema.png

    Saludos y gracias

    • 27 junio, 2011 at 4:27 AM

      lo primero que debes verificar es si el motor de bases de datos esta funcionando normalmente, para esto debes ingresar en localhost/phpmyadmin y verificar que no se produce ningún error, si te aparece un error de conexión entonces abre el panel de control de xampp y dale “Start” en el servicio de MySQL. Si aun no te funciona verifica si puedes anexar una base de datos a otro sitio que tengas configurado en dreamweaver. Si el problema persiste publicalo en los foros con mas detalle para poder ayudarte.

  6. Miguel
    27 junio, 2011 at 5:31 PM

    Hola Kalvin,

    Tengo el MySQL activado en el panel de control de xampp y no, no me funciona con ninguna base de datos, algo debo tener mal configurado el Dreamweaver, pero no se el que..:(

  7. Miguel
    28 junio, 2011 at 2:18 AM

    No se como, pero de repente ya me funciona… xD

    Gracias igualmente.

  8. Angel
    19 enero, 2012 at 12:16 PM

    Hola, como va? che sabes que hasta acá venia bien, pero ahora no puedo seguir; mas que nada por que hay diferencias entre mis bases de datos y las que se ven en el tutorial. Podrías subir los archivos, así cotejo?
    Saludos!

  9. primate
    14 agosto, 2012 at 5:24 PM

    Amigos:
    Iba todo bien hasta que luego de “agregar una nueva base de datos a nuestro proyecto”
    en el panel no me mostró nuina tabla creada, nada ( y SI están creadas las tablas ):

    (-)conexion
    (+)procedimientos almacenados
    (-)Tablas
    Ninguno
    (-)Vistas
    Ninguno

    En que me equivoque?…Es posible que suban los archivos finales para ir comparando?

    El curso está buenísimo.
    Saludos

  10. 7 diciembre, 2012 at 7:54 AM

    Hola, ni hablar que el curso está super bueno.

    Te pregunto, porque soy sumante nuevo en el tema, como configuro la conexión con mysql si mi base de datos no la tengo en localhost; sino en un servidor remoto, externo o como quieran llamarlo.

    Saludos

    • 7 diciembre, 2012 at 10:37 AM

      Gracias por tu comentario.
      Puedes configurar a un servidor remoto poniendo la ip del servidor mysql en lugar de localhost.

      • Racso
        19 febrero, 2013 at 3:52 PM

        Hola, ante todo agradecerte la calidad de los tutoriales, es excelente, en esta 7ma entrada mencionas entre otras cosas importantes, las extensiones de dreamweaver, desde mi país, no puedo acceder al sitio de adobe, gracias por compartir la extension para paginar resultados, específicamente en estos momentos estoy necesitando una extensión para exportar a pdf.
        O sea tengoun juego de paginas maestro-detalle, la pagina detalle muestra toda la información de un usuario en especifico a través de textos dinamicos que pertenecen al juego de registro, necesito que al hacer clic en la imagen que lleva a la pagina detalle, genere un pdf con esa información, en vez de ir a la pagina detalle.php, si conoces alguna extensión o script que puedas explicar de la forma que lo has echo en estos tutoriales te lo voy a agradecer, estuve intentando con fpdf y otras librerías pero mis conocimientos no llegan allá, gracias de antemano…

        • 20 febrero, 2013 at 9:29 AM

          Hola amigo, gracias por tus comentarios, para generar PDFs no lo hago desde dreamweaver con una extensión sino desde PHP con una clase, aquí te dejo una muy buena y fácil de usar.

          http://phptopdf.com/

  11. miguelcg88
    31 marzo, 2013 at 9:55 PM

    hola,tu tutorial sinceramente esta entre los mejores de la web y lo agradezo mucho,lo estoy siguiendo paso a paso,debo crear una web estilo videoteca donde pueda subir videos,categorizarlos y visualizarlos, me quede trabado en el paso donde creas el formulario,cree login,php luego ,insertar formulario,escogi campo de texto y tipo password,se inserto una linea de codigo y luego cuando quiero agregar comportamiento,me dice “”debes insertar un formulario primero”””espero q puedas ayudarme. muchas gracias

    • 1 abril, 2013 at 11:45 AM

      Hola amigo gracias por tus comentarios,
      El problema puede ser porque los comportamientos de dreamweaver tienen una serie de problemas al realizarse sin haber guardado o actualizado la vista de los archivos, para esto te recomiendo que guardes y selecciones tu formulario en la vista de diseño de dreamweaver antes de agregar cada comportamiento, si tienes mas dudas recuerda que puedes usar el foro http://tupale.org/foros para que te ayudemos todos.

      • miguelcg88
        1 abril, 2013 at 9:06 PM

        hola acabo de hacer lo que me dijsite,puse la vista de diseño y aun asi me sale el mismo mensaje “”debe crear un formulario…””
        este es mi login.php

        /*

        login

        */

        perdon por copiarlo,queria copiar una captura de pantalla pero no puedo, quiero mostrarte y preguntar que estoy haciendo mal??? no quiero trancarme aqui.

    • 1 abril, 2013 at 11:45 AM

      Hola amigo gracias por tus comentarios,
      El problema puede ser porque los comportamientos de dreamweaver tienen una serie de problemas al realizarse sin haber guardado o actualizado la vista de los archivos, para esto te recomiendo que guardes y selecciones tu formulario en la vista de diseño de dreamweaver antes de agregar cada comportamiento, si tienes mas dudas recuerda que puedes usar el foro http://tupale.org/foros para que te ayudemos todos.

  12. miguelcg88
    1 abril, 2013 at 9:04 PM

    hola acabo de hacer lo que me dijsite,puse la vista de diseño y aun asi me sale el mismo mensaje “”debe crear un formulario…””
    este es mi login.php

    login

    perdon por copiarlo,queria copiar una captura de pantalla pero no puedo, quiero mostrarte y preguntar que estoy haciendo mal??? no quiero trancarme aqui.

    • miguelcg88
      1 abril, 2013 at 9:08 PM

      copie el codigo fuente pero no aparece

      • 1 abril, 2013 at 9:19 PM

        Los comentarios tienen desactivada la entrada de codigo html, para realizar preguntas usa los foros y te ayudare mas facilmente. http://tupale.org/foros

        • miguelcg88
          1 abril, 2013 at 9:22 PM

          si no es mucha molestia quisiera ver capturas de tu codigo fuente, es q ya cree el formulario en el body exactamente igual ,segui los pasos y me sale el mismo mensaje, colocare una captura en el foro.
          Gracias por responder

  13. 7 abril, 2013 at 7:07 PM

    hola, ya pude crear comportamiento pero en mi vista de diseñador solo aparecen 2 campos de texto vacios, no aparece como el diseño como en tu imagen,faltan los nombres usuario y contrasena, segui los pasos al pie de la letra. Seria de muchaaaa ayuda si nos proporcionarias el codigo fuente por favor para guiarnos,porque hay partes en que las imagenes no coinciden con el nuestro desarrollo,MUCHAS GRACIAS POR EL TIEMPO

  14. Denis Carvajal
    13 diciembre, 2015 at 7:58 AM

    Saludos muy buena forma de enseñanza, te sigo

Deja un comentario

A %d blogueros les gusta esto: