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

diciembre 13, 2010 in Noticias, Tutriales

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 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

11 responses to Crear sitio web con PHP y MySQL paso a paso capitulo 7

  1. 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. 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. 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. Correcto en Dreamweaver creas el formulario, y agregas el código para autenticar el acceso, todo esto esta explicado en el capitulo 8
    http://tupale.org/crear-sitio-web-con-php-y-mysql-paso-a-paso-capitulo-8.html

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

  6. Bien te haré un articulo reciproco. xD

  7. 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

  8. 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.

  9. 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..:(

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

    Gracias igualmente.

  11. 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!

Leave a reply

You must be logged in to post a comment.