Crear sitio web con PHP y MySQL

paso a paso

Capitulo 1: Que necesitamos?

PHP y MySQL con Dreamweaver Buenos das amigos de la comunidad Tupale, hoy he
decidido crear un tutorial muy sencillo que explique una forma eficiente de crear sitios web
con el lenguaje de programacin PHP y el sistema de bases de datos MySQL pero
empezando desde cero, veremos paso a paso como utilizar las herramientas y crear las
secciones de una manera sencilla para que una vez termines con el tutorial puedas salir a
crear sitios web dinmicos de una manera eficiente y sencilla.

Lo primero que tendremos que hacer sera empaparnos un poco del tema, y de eso se trata
este capitulo, conocer que es un sitio web dinmico, esttico, saber que es php, que es
una base de datos, etc, y aunque muchos dirn que es contenido superfluo considero que
si vamos a hacer un tutorial o curso para todo el mundo debemos partir por lo
mas bsico para asegurarnos que todos los que toman este tutorial estn en un mismo nivel
o similar de conocimiento.

Cual es la diferencia entre un sitio

web esttico y uno dinmico?
Es muy sencillo, los sitios web estticos son aquellos que no cambian ni
manejan informacin con respecto al usuario o al administrador, siempre que los visitas son
exactamente iguales y su nica funcin es mostrar una informacin que no se va a
actualizar, por otra parte, los sitios dinmicos son aquellos que toman informacin del
usuarios o de otra fuente para generar cambios en el funcionamiento y contenido del sitio.
Por ejemplo el sitio web de tupale es un ejemplo de un sitio dinmico, ya que los post o
noticias o contenidos son agregados dinamicamente a travez de un panel de administracion
echo en PHP que guarda la informacin en una base de datos MYSQL (si muchos diran que
es un simple wordpress pero solo intento dar una idea), ademas de ellos los usuarios pueden
agregar contenido a travez de los comentarios y realizar un registro.
Una de las principales diferencias entre los sitios estticos y dinmicos es el lenguaje
de programacin con los que estn echos, ya que para lograr el dinamismo del que
hablamos se necesita que el lenguaje en el que se trabaja pueda procesar datos. Voy a
intentar explicarlo mejor:

Los sitios en HTML plano son sitios estaticos pues HTML por si solo no puede procesar
informacion del usuario o del servidor o de alguna otra aplicacion, HTML es un lenguaje que
simplemente sirve para crear documentos y mostrarlos en el navegador, pero es muy
importante saber HTML ademas no es muy complicado. HTML es un lenguaje que se
interpreta en cliente, quiere decir que simplemente es traducido por tu navegador o
browser.

Los sitios web dinmicos por lo general echos en PHP ofrecen

la interactividad de informacin de la que estamos hablando, donde el sitio puede
leer informacin de diferentes fuentes y transformarlas en eventos. Ojo PHP no es una
alternativa a HTML, ya que PHP no es un lenguaje de marcas sino de scripting, quiere decir
que lo que haces con PHP no se visualiza sino que se interpreta, y el resultado no es un
documento sino un comportamiento, una funcin o un evento que produce algo con
la informacin que se le suministra, pero no te asustes aun con tantos tecnicismos solo es
una explicacin mas adelante explicaremos mejor todo esto. PHP es un lenguaje activo en
servidor, quiere decir que se procesa en el servidor de Internet en el que alojas tus
archivos y no necesariamente enva datos al cliente (navegador o browser).

Que es una base de datos MySQL?

MySQL por otra parte no es un lenguaje de programacin sino un gestor de bases de datos,
su funcin es simplemente guardar informacin de una manera organizada y con una
estructura que facilite el acceso a dicha informacin, por ejemplo un sitio como este tiene
una base de datos con varias tablas, una de ellas seria por ejemplo contenidos y dentro de
la tabla de contenidos tendramos campos con la informacin de los contenidos (ej. titulo,
fecha, autor, etc), de manera que todos los contenidos los puedo almacenar en una tabla
y poder utilizarlos en el momento que sea necesario. Para que te sea mas claro imaginate
una tabla de MySQL como una hoja de Excel, donde los campos son las columnas (vertical)
y los registros son las filas (horizontal).

Como pueden ver en el ejemplo hay una columna para cada dato y una fila para cada
registro, en este ejemplo se ve una tabla llamada usuarios donde tenemos listados los
usuarios de un sitio web con su nombre de usuario, password, correo electrnico y nivel de
acceso adems de otros datos.

Noten que cada registro (fila) tiene un idusuario este es un identificador, nos sirve para
diferenciar un usuario de otro as que si decido ver la informacion del usuario 8 tendre el
nombre Luis Henao, correo lhenaou@sofasa.com.co y as sucesivamente.

MySQL no funciona solo, debe ser llamado por un lenguaje activo en servidor (en este caso
PHP) para poder trabajar.

Mas informacin sobre HTML, PHP y MYSQL

Que es un servidor web?

Un servidor web o servidor de hosting es una maquina que alojara los archivos de tus sitios
web, cuando tecleas Google.com o cualquier otra direccin estas viendo los archivos
almacenados en un servidor web, algunas herramientas indispensables para el desarrollo
de sitios web como PHP y MySQL solo funcionan en servidores web. De ay la exprecion de
lenguaje activo en cliente o en servidor, depende de donde se ejecuta el codigo (ej.
Javascript es un lenguaje activo en cliente pero PHP es un lenguaje activo en servidor).

Que software necesito para crear sitio

web estticos y dinmicos?
Bueno esta parte es muy importante ya que los programas que aqu mencionamos son
fundamentales para continuar tomando el curso te creacin de sitios web dinmicos con
PHP y MySQL. Aunque existen muchas alternativas a los programas que aqu voy a
mencionar, recomiendo que usen especficamente estos ya que el resto del curso hablara
de estas herramientas en especial.
 Adobe Creative Suite mejor conocida como Adobe CS3, Adobe CS4 o Adobe
CS5.
Aunque finalmente este tutorial o curso se basara solamente en
dos herramientas bsicas del Adobe Creative Suite: Adobe Dream Weaver y Adobe
Fireworks.
Descargar Adobe CS4 Master Collection
XAMPP
Xampp es una herramienta que crea un servidor local en tu equipo ya que
el cdigo PHP solo puede ser ejecutado en servidor, esto lo hacemos para poder
probar los sitios que hagamos de manera local antes de subirlos a Internet. (Incluye:
APACHE, PHP, MySQL, PHPmyAdmin).
Descargar Xampp server
NicoFTP3
Este es un simple cliente de FTP que utilizaremos cuando vallamos a publicar
nuestro sitio en Internet, es muy fcil de usar y de fcil configuracin.
Descargar NicoFTP3

Capitulo 2: Marco lgico o terico del proyecto PHP y

MySQL con Dreamweaver
Antes de comenzar este nuevo capitulo del curso tengo que dar gracias por la acogida que
tubo el capitulo 1, recib muchos comentarios y correos sobre el post que hacen valer el
trabajo de sentarme aqu a darles el conocimiento que tengo.

Esperando que ya hallan estudiado un poco sobre los temas del capitulo 1 (Crear sitio web
con PHP y MySQL paso a paso capitulo 1) vamos a entrar en materia, y aunque se
que estn animados para empezar a programar sus sitios con PHP y MySQL este capitulo
lo dedicare a explicar una cosa que me hubiera sido muy til cuando empece en esto.
La planificacin del sitio web. Ya que considero que el 80% del tiempo de un desarrollo y
la mayora de inconvenientes y errores que se presentan se deben a una
mala planificacin del proyecto.

Marco lgico o terico del proyecto

Primero abarquemos el marco terico lgico, que es simplemente analizar el tipo de sitio
que vamos a desarrollar, el objetivo, quien es nuestro publico, que pretendemos hacer con
el, etc. Pero como este es un curso paso a paso, no me limitare a decirlo sino que pondr un
ejemplo con un proyecto real en el cual ahora me encuentro trabajando.

Mi proyecto es un sitio web sobre el Visual Rock 2010 (Festival Colombiano de rock), de
manera que buscare hacer uso de la multi-media, audio y vdeos ya que hay
que promocionar bandas, entonces quiero las siguientes secciones de contenido:
 Seccin de vdeos y cada vdeo tendr la siguiente informacin: Nombre
del vdeo, descripcin del vdeo, artista, archivo de vdeo, genero, imagen
miniatura, fecha de publicacin y puntuacin.
Seccin de Fotos y cada foto tendr: Nombre de la foto, archivo de imagen,
miniatura, fecha de publicacin y puntuacin.
Seccin de noticias y cada noticia tendr: Titulo de la noticia, contenido de la
noticia, imagen de la noticia, fecha de publicacin y puntuacin.
Seccin de eventos y cada evento tendr: Nombre del evento, fecha
de realizacin, lugar del evento, descripcin del evento y puntuacin.

No se si lo han notado pero este simple proceso automticamente nos dice cual es la
estructura de la base de datos, que mas adelante explicare como crear.

La importancia de este proceso radica en saber por anticipado todo lo que vamos a necesitar
y hacer cada modulo pensando en el siguiente. Imaginemos que creamos el sitio y a la mitad
del desarrollo decidimos agregar una imagen miniatura en los vdeos, si no lo planeamos
con anticipacin podra generar varios problemas.

Ahora sobre el comportamiento del usuario en el sitio y los servicios que

este debera ofrecerle.

Es un sitio joven y pretende mantener informado al publico as que los enganchare con
un sistema de registro de usuarios, y como estarn registrados me proporcionaran sus
datos para crear un sistema que envi un boletn publicitario constantemente.

Por el mismo punto anterior se que la mayora usa redes sociales as que agregare
herramientas para compartir los contenidos (Noticias, fotos, vdeos y eventos)
a travs de las principales redes sociales.

Maqueta bsica (borrador)

Tambin considero muy importante esta parte, y es igualmente importante que se haga
en una hoja de papel y preferiblemente con lpiz en lugar de bolgrafo. Aqu es
donde definirn como estar organizado el sitio y como van a distribuir los bloques
dentro de la pagina. La importancia de hacerlo a lpiz radica en que cuando hacemos
la parte creativa detrs de un ordenador nos sometemos a las herramientas que nos
brinda y no exploramos mas posibilidades, en pocas palabras terminamos haciendo lo
que el ordenador nos entrega y no lo que nosotros queremos (Cranme a mi me pasa
todo el tiempo).
Maqueta bsica
De esta manera podemos hacernos una idea clara de como va a estar construido
nuestro proyecto y nuestra labor sera mas sencilla, ya no volveremos a preocuparnos
por decisiones de objetos o sobre el que colocar y que no, y nos dedicaremos solamente
a conseguir el sitio tal cual lo ideamos en la planificacin.

Recoleccin de contenido
Ojo, en la mayora de los sitios debes considerar la diagramacin del sitio a partir del
contenido, por ejemplo en mi caso, ya que mi sitio sera de msica y bandas de rock, necesito
los vdeos y debo crear el plano bsico del sitio web basado en esa necesidad, ademas de
determinar la cantidad de material a mostrar para definir como se organizara.

Si tu sitio va a tener un solo vdeo, puedes incluirlo en alguna parte del diseo o si va a tener
solo algunos (5 o 10 vdeos) puedes crear un bloque en el diseo donde los listes, pero si
esperas tener muchos vdeos probablemente tendrs que idear una estructura con
buscador y separacin por categoras o algn tipo de filtro para que los usuarios puedan
acceder fcilmente a cualquier vdeo.

Por lo tanto recuerda el diseo del sitio web o la maqueta bsica debe trabajar en funcin del
contenido del sitio.
Mira a tu competencia, directa o platnica.
Una de las maneras mas sencillas de ver que seria lo mas util para nuestro proyecto es ver
la competencia o los sitios que manejan el mismo tema o la misma corriente, para mi caso
personal (Visual Rock) miro muy bien sitios
comohttp://www.rockalparque.gov.co/ o http://www.bogotaciudadrock.com/cmsbcr/ y aqui
veo que es lo que mas le conviene a mi sitio web.

Los buenos artistas copian, los grandes artistas roban. Pablo R. Picasso
Tambin consulta galeras de sitios web donde puede copiar muy buenas ideas para tu
proyecto, como botones, estructuras, diseos, herramientas, modos de navegacin, etc. Mi
recomendado para esto es http://www.cssmania.com/ pero existen muchas alternativas.

Capitulo 3: Configurar sitio local con

Dreamweaver y Xampp
Espero que esta nueva entrega sea de su agrado y que coloquen mucho empeo pues
comenzaremos con el desarrollo del sitio, mas especficamente con la instalacin de las
herramientas que vamos a utilizar y la creacin 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 ests 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 creacin 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 versin CS5 pero para poder trabajar en un nivel mas sencillo
usaremos la versin 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 imgenes 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 caractersticas ideales para visualizar en un navegador web (browser). Igual que
con el anterior, usaremos la versin CS3 para tener un mejor juego de
 compatibilidad con Dreamweaver, aunque la versin CS4 incluye una serie de
efectos muy interesantes, pero eso en este momento no es muy importante.
Servidor XAMPP:
Como ya sabrn 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 tambin sabrn que PHP es una tecnologa 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 simultneamente 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 instalacin, personalmente prefiero borrarlo
para tener mi carpeta de trabajo libre de archivos que no sean mos, pero Como hago
esto?, bueno primero debes saber que todos los archivos que guardes en
esta ubicacin C:/xampp/htdocs son los que podrs 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 deca antes, los veras a travs del protocolo http
de Internet por lo tanto si subes una imagen la abrirs con el navegador y si subes un
archivo digamos .rar veras que al acceder sera como descargarlo de Internet.

Importante: http://localhost es una ubicacin solo accesible desde tu maquina, para que
otras personas puedan acceder a tu localhost tendrian que copiar tu ip publica y tendras 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 opcin 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 extraos en el nombre de la carpeta,
para evitar problemas con el desarrollo.
5. Al dar siguiente iremos a la ventana de confirmacin 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 informacin 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 botn 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 continuacin.
Capitulo 4: Estructurar la base de datos
Ahora si entremos en materia, este capitulo lo dedicaremos a estructurar la base de
datos, y aunque suena muy tcnico realmente es algo que no necesita muchos
conocimientos, sin embargo se requerir de mucha lgica y sentido comn. De la
correcta construccin de nuestra base de datos depender en gran parte el tiempo que
tardemos desarrollando el sitio.

Lo primero que debemos hacer (teniendo en cuenta que ya tenemos instalado Xampp y
todo el software del que hable en el capitulo anterior) es abrir nuestro PHPMyAdmin,
que es el gestor de bases de datos, es simplemente una interfaz que nos permite
manipular las bases de datos de nuestro servidor. Para acceder a nuestro PHPMyAdmin
solo debemos ir al sitio http://localhost/phpmyadmin y nos debe aparecer una pagina
muy similar a esta.
Bueno entonces lo primero que vamos a hacer es crear nuestra base de datos en el campo
del centro.

Es importante tener mucho cuidado con la ortografa en estos casos ya

que un fallo en una letra puede significar el fallo total de nuestro
sistema, tambin te recomiendo que uses solo
caracteres alfabticos (letras a-z) en minscula y si necesitas separar
palabras usa guiones bajos _, porfavor no utilices espacios en blanco o
acentos, tildes, ees o cualquier otro carcter extrao.
En mi caso mi base de datos se llama visualrock, y ahora procedemos a crear las tablas,
pero primer una explicacin de trminos importantes sobre bases de datos:

Base de datos: es un conjunto de tablas, como el sitio donde almacenaras toda

la informacin de un sitio o proyecto.
Tablas: Es como una hoja de excel, con filas y columnas.
Campos: Son las columnas en las tablas y seran las variables donde se almacenan
los datos.
Registros: Son las filas, cada insercin de informacin en la base de datos.
Datos: Esta es la informacin que finalmente guardas y que manipulas en el sitio,
cada dato se almacena en el cruce de un campo (columna) con un registro (fila).
Bueno, ahora si procederemos a crear nuestras tablas basados en lo que hicimos
en captulos pasados de idear el contenido del sitio y su organizacin.

Comenzare con la tabla de administradores, ya que tendr varios usuarios con niveles
de administrador para que puedan agregar contenido al sitio.

As que creo una nueva tabla en mi base de datos llamada administradores y en

numero de campos colocaremos la cantidad de campos que usaremos, pero un
momento como se cuantos campos voy a necesitar?. Primero antes de crear cada tabla
haz un esquema con lpiz y papel para saber la cantidad exacta de campos que vas a
utilizar y el tipo de campos que deben ser.

Los campos almacenan informacion dependiendo del tipo de campo que sean (NO
TODOS LOS CAMPOS SON IGUALES) hay varios valores pero aqui te nombrare los
mas importantes.

INT: Quiere decir entero y solo almacena nmeros enteros. Se usa para
almacenar edades, valores, cantidades, todo lo que dependa solo de nmeros,
como un contador de visitas por ejemplo, solo almacenar un numero.
VARCHAR: Este almacena cadenas de texto de mximo 256 caracteres. Ideal
para almacenar nombres de usuario, o contraseas, o comentarios, palabras o
frases, nada que requiera mas de 256 caracteres.
TEXT: Es igual que varchar pero para textos grandes, es decir almacena
cualquier tipo de texto con un limite muy amplio, aqu por ejemplo
se almacenara el contenido de las noticias o artculos de tu sitio
que podran tener muchas paginas de texto.
DATE: Almacena fechas con un formato especial de fecha AAAA-MM-DD
DATETIME: Almacena datos con fecha y hora, similar al anterior pero agrega la
hora: AAAA-MM-DD hh:mm:ss
Existen otras tipos de campos pero no profundizare en ellos porque los que acabo de
nombrar son todos los que usaremos dentro del curso.

Entonces dibujemos el esquema de nuestra primera tabla para saber cuando

campos debe tener:

Tabla: administradores
idadministrador (INT, PRIMARY, AI)
usuario (VARCHAR, 255)
password (VARCHAR, 255)
nivel (INT)

Esta echo!, son solo 4 campos pero ahora explicare cada uno de ellos:

idadministrador: Es un campo de identificacin, todas las tablas deben tener un

id que identifica cada registro, recomiendo que este campo lo definas igual en
todas las tablas de tu base de datos.
Es un campo INT (entero) solo recibe numero, y en la parte de propiedades le
asigne el valor PRIMARY (Primario) que me indica que el campo es el
identificador de los registros y por ultimo AI (auto incrementar) lo que har es
que cada vez que agreguemos un registro le asignara un valor consecutivo. Los
campos INT no requieren que se defina el largo de caracteres.
usuario: Este sera el nombre del usuario y es un campo VARCHAR (cadena de
texto), a estos campos varchar si debemos definir el largo de caracteres por lo
que tiene asignado 255 (no coloco 256 porque el cero tambien cuenta
como carcter).
password: Este campo es igual al anterior.
nivel: pensando en que habr diferentes niveles de acceso al panel
de administracin coloque este campo, tambin como INT (Entero), de manera
que si un administrador tiene nivel digamos 1 tendr un mayor o menor acceso
que un administrador con nivel 2.
Esto generara un codigo SQL como asi:

`idadministrador` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,

`usuario` VARCHAR( 255 ) NOT NULL ,
`password` VARCHAR( 255 ) NOT NULL ,
`nivel` INT NOT NULL

No se preocupen por este codigo, es solo la parte trasera de lo que esta sucediendo en
mysql, solo es importante si quieren aprender SQL a fondo pero lo iremos estudiando
paso a paso.

Listo !!! ya tenemos creada nuestra primera tabla, esta es nuestra primera hoja de excel para
administrar informacin, en el men superior de la tabla encontraras algunas herramientas
como:

Examinar: Aqu puedes navegar entre los registros que has insertado, al principio no
te dejara acceder pues aun no hay ningn registro en la base de datos.
Estructura: Te mostrara los campos de la tabla con sus propiedades, desde esta
pestaa podrs hacer cambios en la estructura, pero entre menos cambios tengas
que hacer mejor.
SQL: es para ejecutar el lenguaje de programacin de bases de datos SQL.
Insertar: desde aqu puedes insertar algunos registros en tu base de datos, til como
para que hagas pruebas ya que la base de datos la manejaremos dinamicamente
desde nuestro sitio web una vez terminado.

Ahora repite el proceso con las dems tablas siguiendo los pasos anteriores, aqu te dejare
un ejemplo de las tablas que tiene mi sitio para que veas como se puede hacer.
Eso es todo por este capitulo, en el prximo capitulo empezaremos con el montaje en
fireworks del diseo y como pasarlo a dreamweaver. Por ahora los dejo con algunas
recomendaciones finales.

Recuerda siempre agregar el campo de ID (identificacin) en cada tabla con

valor entero, primario y auto incrementar, si olvidaste hacerlo con alguna tabla
es mejor borrar la tabla y crearla de nuevo.
Usar siempre caracteres alfabticos (a-z) en minscula y sin espacios.
Asignar el tipo de campo dependiendo de la informacin que vas a agregar en
el, si es un numero debe ser INT, si es fecha que NO sea varchar, etc.

Capitulo 5: Diseo, maquetado y wireframes

Este capitulo lo dedicaremos a la parte del diseo, la cual tambin va a ser paso a paso y
en la que enseare algunas costumbre que no pondrn muy felices a los diseadores pero
todo en pro de ser eficiente y lograr un producto web de alta calidad en poco tiempo. Si eres
diseador hardcore y solo te interesa este curso por la parte de PHP y MySQL puedes
saltarte este capitulo, el cual solo va orientado a disear la plantilla.

Bueno para comenzar debo remontarme a otro capitulo de este curso donde publique la
maqueta que esta a continuacin y les deca que es muy importante disear primero en
papel el sitio que queremos tener, aunque nunca va a llegar igual a la pantalla pero es bueno
hacerse a la idea de que se quiere.
Una vez que tenemos esto dibujado en papel abrimos nuestro Fireworks y comenzamos a
trabajar. Si nunca en tu vida has usado Fireworks, pues no croe que haya un buen curso de
como hacerlo, es mas bien un juego de experimentacin. debes jugar mucho con las
herramientas y aprender a utilizarlas, no es muy dificil, algunos dicen que Fireworks es como
un power point con esteroides.

Bueno ahora comencemos con las malas costumbres de las que yo hablaba que no son muy
bien vistas desde el campo del diseo pero de seguro ahorraran mucho trabajo. La primera
de ella se basa en una frase de Pablo Piccaso:

Los buenos artistas copian, los grandes artistas roban.

Es por eso que a la hora de disear siempre acostumbro buscar material interesante para
usar algunos elementos, aqu les dejo un listado de sitios de donde pueden sacar muy
buenas ideas, aunque la recomendacin principal es navegar mucho para conocer muchos
sitios web con muchos estilos diferentes.

CSS Mania
Template Monster
Web Digiti
Ceeces
Vecindad Grafica
Una forma fcil de utilizar estos sitios es con la tecla imprimir pantalla, lo que normalmente
hago es buscar un diseo con una arquitectura acorde a la que necesito y luego imprimir
pantalla, llevo la imagen a Fireworks y comienzo a trabajar sobre la imagen de pantalla que
acabo de sacar.

Espero que esta imagen ejemplifique mas cual es el proceso para copiar el estilo de un sitio
con Fireworks. xD

De echo ahora que lo pienso bien la mayor parte del diseo y desarrollo de sitios consiste
en la bsqueda de herramientas y recursos que nos sean tiles. Otro ejemplo de esto son
los iconos, que le dan mucha vida a nuestro sitio web, y tambien hay muchos sitios que
ofrecen sets de iconos gratis para que uses como este (Free Web icons). es importante
mantener la unidad grfica en los iconos para que la pagina sea fcil de navegar, si los
iconos no coinciden van a tener muchos problemas de navegacin.
De la misma manera pueden hacer con las fotografas, para ahorrar tiempo y dinero pueden
usar bancos de imgenes y buscar el material necesario para su proyecto web, una de las
paginas que mas recomiendo es SXC que es un banco de imgenes muy grande con la
ventaja de ser gratuito.
Bueno para ayudar a los son novatos en Fireworks (yo tambin lo fui) aqu les dejo
un vdeo tutorial que ensea lo mas bsico y til.

Consejos importantes antes de continuar:

1. El ancho mximo de tu rea de contenido no debe pasar los 1000 pixeles pues
asumiremos que el sitio esta echo para usuarios estndar con pantallas de
1024*768px de resolucin.
2. Mantn separadas las secciones como el header (cabecera), el sidebar (menu
lateral), el body (cuerpo de pagina) y el footer (pie de pagina) para evitar problemas
a la hora de pasarlo a Dreamweaver.
 3. Si eres nuevo en maquetacin de sitio procura usar reas cuadradas para ahorrar
trabajo y dolores de cabeza en el montaje.
4. Trabaja con una resolucin superior a 100 pero inferior a 200 as mantendrs tus
archivos con buena calidad pero con un peso optimo.
5. Para exportar las imgenes te recomiendo hacerlo en PNG 32 o JPG con calidad de
75, es optimo para web.
6. Cualquier pregunta que tengas puedes hacerla en el foro de webmasters.

Otra forma fcil de ahorrar tiempo en este paso del desarrollo del sitio y que es muy buena
cuando te interesa mas la programacin que la apariencia o no tienes el tiempo para disear
un buen template es usar un template gratis. En free web templates puedes encontrar
muchos que te pueden interesar, de esta manera solo debes cambiar las imgenes y retocar
algunos detalles para tener lista la apariencia de tu sitio.
Ahora pasar el contenido de Fireworks a Dreamweaver.

Imaginemos que ya tenemos listo el diseo en Fireworks, como consejo

personal tambin recomiendo que guarden los PNGs de Fireworks en una carpeta para
cuando necesiten hacer modificaciones sobre el diseo, pueden hacerlo dentro de la
misma carpeta del sitio que ya hemos creado previamente en el capitulo 3 de este curso.

Consejos para hacer mas fcil la exportacin de las imgenes:

1. Las reas que son fondos repetitivos puedes exportarlas en pequeas piezas y
desde CSS las pondrs a repetir.
2. No exportes los textos, estos debes agregarlos desde dreamweaver.
3. Separa muy bien las imgenes que sern parte del contenido de las que sern parte
del diseo, por ejemplo en la plantilla que estoy trabajando el fondo es parte del
diseo pero la imagen que dice visual rock 09 es parte del contenido as que no las
combino en una sola imagen.
4. Los nombres de los archivos que exportes gurdalos en minsculas y sin espacios
o caracteres extraos para evitarte problema con las rutas.

Aqu les dejo un ejemplo de todas las imgenes que componen mi template (visual rock)
para que se hagan una idea de como se exportan.

Capitulo 6: Maquetado con tablas en

Dreamweaver
Ahora si comencemos con el montaje del sitio en Dreamweaver, para esto primero
deberemos estudiar dos cosas fundamentales, primero que es HTML aunque se supone que
desde el capitulo 1 ya lo haban estudiado por lo tanto aqu solo les pedir que lo repacen
MUCHO, HTML es el corazn de la web y aunque algunas personas piensen que no es
importante yo considero que es el ncleo de todo y de ah empezamos a expandir nuestros
proyectos web.
Como siempre trato de apoyarlos aqu les dejo un sencillo PDF que muestra las
etiquetas bsicas de HTML solo para que se familiaricen pero es muy importante conocer la
mayor cantidad de etiquetas posibles.

Listado de etiquetas HTML

Tambin es muy importante aprender CSS ya que la diferencia entre una web optimizada,
agradable, rpido, etc, y una web, lenta, desagradable, desorganizada, etc, esta en el CSS,
este lenguaje se usa simplemente para maquetar los sitios y dar apoyo al HTML de manera
que puedas delegar el diseo enteramente a CSS y el contenido a formatearlo con HTML.

Espero que la siguiente grfica ejemplifique mejor lo que quiero decir.

Ahora procederemos a definir la propiedades de la pagina dando clic derecho y luego en

la opcin Propiedades de pagina, al rellenar el formulario que nos aparece en este cuadro
de dialogo Dreamweaver nos generara un CSS con las propiedades bsicas de la pagina
que podremos ver en la vista de cdigo El codigo CSS se colorea de rosado por
defecto. Aqu definiremos cosas bsicas como el tamao de la fuente, el tipo de fuente, el
color, el color de fondo y la imagen, tambin las margenes y otras
generalidades. Tambin es importante abrir la opcin de vnculos en la parte izquierda y
definir los colores de los enlaces y el efecto sobre (a:hover).
Comenzaremos a diagramar primero con tablas para que se hagan una idea de como es
este mtodo, iremos al men insertar y luego insertaremos Tabla. con lo que
nos aparecer un cuadro de dialogo que nos har unas preguntas bsicas sobre la tabla
que queremos insertar. Es muy importante que antes de insertar la tabla uses la lgica para
definir que tipo de tablas necesitas y con que cantidad de filas y columnas. Como es normal
voy a hacer un ejemplo.
En este ejemplo mostr como debe estar definida la tabla con 4 filas y una columna aunque
la ultima fila tiene 4 columnas, para hacer esta modificacin simplemente nos situamos
sobre la fila y vamos al icono de dividir celda en la barra de propiedades.

Si seleccionamos la tabla, en la parte inferior podremos ver el panel de propiedades de la

tabla, aqu podremos definir las propiedades como el ancho en pixeles o porcentajes y
la alineacin de la tabla.

Nuestro siguiente paso sera comenzar a agregar los contenidos o bloques de contenido
dentro de nuestro diseo inicial en mi caso inserte una imagen total como cabezote
(Header) as que solo debo situarme en la primera celda y luego ir a la opcin Insertar >>
Imagen. De la misma manera que con las tablas, al seleccionar la imagen que has insertado
puedes ver el panel de propiedades donde te recomiendo poner border = 0.

Advertencia, no es recomendable de echo debera ser prohibido

redimencionar las imgenes desde Dreamweaver. Si necesitas cambiar el
tamao de alguna imagen abre dicha imagen en Fireworks y exportala con
el nuevo tamao.
Ahora vamos a situarnos en la siguiente celda que sera la del men de navegacin, en este
caso deberemos utilizar un poco de HTML y CSS muy simple, pero esto lo he publicado en
un tutorial aparte para las personas que buscan este contenido independientemente del
curso.

Crear un men desplegable en CSS pero sin Javascript

En la tercera celda coloque un scroll, slide o carrusel de imgenes en jquery, esto es

algo as como un plugin o un cdigo que se encuentra fcilmente en Internet y se
lo adherimos a nuestra pagina, esta tcnica debes usarla mucho para los widgets
o mdulos que quieras incluir. De ese carrusel tambin he puesto un ejemplo en un tutorial
aparte.

Carrusel jQuery compatible con sexy light-box

Y de la misma manera que en el captulo anterior siento que este se est haciendo
demasiado largo as que terminare aqu por hoy prometiendo no tardar tanto para
la continuacin del curso, sobretodo porque este captulo queda incompleto ya que no
termine de explicar la parte de CSS, sin embargo les recomiendo que estudien muy bien
HTML y CSS para el siguiente captulo.

Capitulo 7: La base de datos y el login

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, tambin a los que dejan sus comentarios, muchas
gracias por el apoyo, pero ahora necesito que apoyen aun mas el sitio recomendando a
travs 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 estarn
apoyando al creador.

En el capitulo anterior estbamos 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 hbrido 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 sern mucho mas
eficientes a la hora de trabajar.

Ahora quiero ensearles 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 creacin de los comportamientos dinmicos, 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 creacin 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 administracin,

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 administracin. Te recomiendo que por anticipado coloques estas cosas
bsicas en tu carpeta de administracin.

1. Un set de iconos, te puede ser muy util puedes conseguir varios

en http://www.freeiconsweb.com/ procura tener mucho iconos para cualquier
accin que realices y que tenga una linea grfica 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, prrafos 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, libreras de PHP, aunque
no es obligatorio y tal vez no entiendas que son las libreras pero bueno son
pequeos scripts que en determinado momento nos pueden ahorrar trabajo, por
ejemplo si voy a enviar muchos correo electrnicos desde mi sitio podra usar la
librera o clase PHPmailer. Sin embargo no te preocupes mucho por esto,
durante el curso voy a publicar los cdigos 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
podran 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 deberan 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 administracin.

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.
tambin es buena idea definir el nombre del formulario y generalidades, es muy
importante que este formulario se envi mediante POST y tambin recuerda colocar la
propiedad de password al campo de contrasea como aparece en la siguiente imagen.
Es simple un formulario con un campo de usuario y uno de contrasea. este formulario
enviara los datos que sern 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.

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.
Desde el cuadro de dialogo que nos aparece crearemos nuestro archivo de configuracin y
conexin a la base de datos, para comenzar el nombre de la conexin se la das tu, puede
ser el nombre que escojas, recuerda no agregar, caracteres extraos ni espacios. Ya que
estamos usando Xampp el servidor sera localhost el usuario sera root y no usara
contrasea, esta es una configuracin por defecto en XAMPP y en la mayora de servicios
de host local. Luego de colocar estos datos selecciona la base de datos dando clic en el
botn Seleccionar, ay te aparecer un listado de las bases de datos que tienes en MySQL,
selecciona la de tu proyecto y dale aceptar.

Bien una vez que hayamos echo lo anterior podremos confirmar que la conexin ha sido
creada porque aparece en nuestro panel de Bases de datos y podemos navegar las tablas
y los procesos almacenados desde ah.
Bien voy a terminar aqu por falta de tiempo y seguir maana con el uso de los juegos de
registros y la creacin del sistema de login (usuario y contrasea).

Ahora unas aclaraciones importantes:

Recuerden que me pueden escribir para hacerme cualquier pregunta sobre el tutorial
y yo con gusto les responder.
Tambin 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 rpido, compartan esto en su facebook y en su twitter para
llegar rpido a los 20 shares.
Crear sitio web con PHP y MySQL paso a paso
capitulo 8

Y ahora entremos en material. Ya que en el capitulo anterior vimos como realizar

la conexin a la base de datos, este capitulo lo dedicaremos a crear el sistema de
login de usuario y a restringir el acceso a las paginas del administrador, para que
vean lo sencillo que pueden gestionar usuarios en su sitio usando tan solo las
herramientas de Dreamweaver.

Ahora seleccionamos nuestro formulario y vamos a la ventana de

Comportamientos que esta justo al lado de la ventana de Conexiones,
seleccionamos agregar comportamiento y dentro de la opcin Autenticar usuarios
utilizaremos la opcin Login de Usuario.

Logueo de usuario con dreamweaver

En el cuadro de dialogo que nos aparece debemos definir algunas cosas. Primero
el formulario y los campos del formulario que se utilizaran. Luego la base de datos,
la tabla y los campos con los que el script buscara si la informacin coincide o no.
Luego las paginas de confirmacin y de error, es decir, si el logueo es correcto a
que pagina debe ir, y si el logueo no es correcto a que pagina debe ir. Y por ultimo
el nivel de restriccin, ya que en algunos casos necesitaras crear usuarios de
diferente nivel de acceso, entonces en este caso seleccionamos usuario, password
y nivel de acceso y definimos el campo de la DB (base de datos) que nos dar el
nivel de acceso de cada usuario.
Al dar clic en aceptar Dreamweaver nos creara el cdigo que se ve as:

Loguear usuarios con dreamweaver codigo

Este comportamiento lo que hace es comprobar si los datos introducidos en el

formulario concuerdan con los de un registro en la base de datos, y si es as crea
una sesin de usuario que podremos usar mas adelante para restringir el acceso a
las paginas.

Bueno ahora crearemos el archivo index.php o portada del administrador de

contenidos, y lo primero que debemos hacer es restringir el acceso para que solo
los administradores puedan acceder al dicho panel, esto lo haremos con otros
comportamiento de Dreamweaver.

Restringir acceso con Dreamweaver

Estando en la pagina index.php o cualquier pagina que queramos restringir solo
para usuarios administradores o registrados vamos a ir al panel de comportamiento
y seleccionamos Restringir acceso a pagina, y en el cuadro de dialogo que nos
aparece seleccionamos los niveles de usuario permitidos en la pagina y la pagina
a la que se debe redirigir si el acceso es denegado.

Despues de realizar este proceso es hora de hacer pruebas y testear que su sistema
de login este funcionando bien, intenten con usuarios de prueba, generando
errores, logeos falsos, etc.

Pueden agregar nuevos registros a la tabla de usuarios o administradores desde

PHPMyAdmin http://localhost/phpmyadmin solo tienen que seleccionar la base de
datos, luego la tabla, luego dar clic en la pestaa insertar y listo.

Insertar registros desde PHPMyAdmin

Bueno ya tiene su sistema de login, ahora deb en comenzar a explorar las otras
opciones del panel de comportamientos de servidor para poder realizar
procedimientos mas complejos de muestreo de datos.

nos vemos en la prxima entrega donde les enseare como crear las paginas para
agregar, editar y eliminar informacin de su base de datos segn la tabla o seccin.
Recuerden compartir el tutorial para que la prxima entrega sea mas pronta. x

Crear sitio web con PHP y MySQL paso a paso

capitulo 9

Tambin cree una pagina dentro del sitio

llamada CURSOS donde estar actualizando el listado de cursos disponibles
dentro del sitio aunque actualmente solo tenemos dos curso y solo uno es
creado por nosotros pero trabajaremos para traer mas materi al, y en el foro esta
el post de este curso para que sigan las actualizaciones y realicen sus preguntas.
 Ahora si vamos a entrar en materia, ya que en el capitulo pasado aprendieron a
crear sistemas de usuario con PHP y bases de datos (login, restriccin de
acceso, usuario y password, nivel de acceso) ahora debemos comenzar a
trabajar en nuestro administrador de contenido, el rea que sera solo accesible
para el administrador del sitio y desde donde agregaremos todo el contenido
como las noticias, las paginas, las imgenes, etc.

Durante este capitulo del curso me centrare solamente en la funcionalidad

dejando el aspecto visual y la navegabilidad de lado, el objetivo es que
comprendan como funcionan los comportamientos de agregar, editar y eliminar
registros para que puedan usarlos a su antojo en cualquier parte del s itio
administrador.

OK, vamos a comenzar por crear la pagina que va a administrar las noticias de
mi sitio, de manera que voy a crear la pagina llamada noticias.php recuerden
que este archivo debe estar dentro de la carpeta administradora (admin/)
y tambin es importante que lo primero que hagan cuando creen la pagina es
asignarle el comportamiento de restringir acceso a la pagina para que solo el o
los usuarios con nivel de administrador puedan acceder a esta pagina.

Paginas Administrar noticias 1

Como pueden ver en la imagen de la izquierda he dividido la pagina en tres

secciones que son las que necesitaremos en casi todas las paginas del
administrador. Estas tres secciones son:

Listado: donde listaremos todos los registros de una tabla determinada en este caso
tendremos un listado con todas las noticias que se han agregado, en la parte derecha agregue
un par de enlaces que son el de eliminar y el de editar la noticia.
Agregar: Sera un simple formulario que agregara la informacin como registro a la base de
datos aqu usaremos algunas herramientas que explicare a lo largo de la creacion del
formulario.
Editar: Este sera un formulario muy similar al de agregar excepto que tendr cargada
la informacin de un registro para editarla y tendr un campo adicional
de identificacin para poder actualizar o realizar un update de un registro especifico dentro
de la tabla en nuestra base de datos.
LISTAR NOTICIAS

Mucho cuidado a esto porque en esta parte usaremos los juegos de registros o
recordset que son una de las herramientas principales a la hora de realizar
sitios dinmicos con PHP y MySQL. Un juego de registros es simplemente
una bsqueda entre todas las filas (registros) de una o mas tablas con
algunos parmetros definidos.

Por ejemplo si mi tabla noticias dentro de mi base de datos luce algo as:

Tabla noticias mysql

Podremos realizar una consulta como la siguiente:

Seleccione todos los campos de la tabla noticias don de la categora es igual a 1
y el autor es igual a Kalvin Manson, ademas de ello ordeneme los resultados por
fecha de la mas antigua a la mas reciente.

Lo anterior seria la lgica de lo que es una consulta o juego de registros, la misma

idea anterior en MySQL se traduciria de la siguiente forma:

SELECT * FROM noticias WHERE idcategoria = 1 AND autor = Kalvin Manson ORDER
BY fecha ASC

Ven que no es tan difcil jejeje, pero tranquilos si les parece complicado usar la
linea de comando MySQL no se preocupen porque este curso lo estamos basando
en Dreamweaver por lo cual usaremos la herramientas de este programa para crear
este tipo de comportamientos y secuencias.

Para crear el listado de noticias deberemos crear un juego de registros desde el

panel de comportamientos como se muestra en la siguiente imagen.

Crear juego de registros DW

En el cuadro de dialogo que nos aparece vamos a seleccionar
nuestra conexin con la base de datos, nuestra tabla (en este caso noticias),
seleccionamos todos los campos, en la opcin de filtro dejamos Ninguno y en
orden seleccionamos por fecha descendiente. Luego de hacer esto debe
aparecernos nuestro juego de registros en nuestro panel de vinculaciones como
muestra la siguiente imagen.

Juegos de registros creado

Desde este panel podremos arrastrar los campos hasta nuestro documento para
insertarlos en nuestra pagina sin embargo aun no se va a ver un listado ya que lo
que obtenemos de esta manera es almacenar todos los resultados de nuestra
consulta MySQL en un array llamado $row_noticias, y debemos usar
una funcin While para convertirlo en listado, pero de nuevo no se asusten este
proceso es mas sencillo de lo que parece.

Primero vamos a colocar el ttulo de la noticia en la celda de nuestra tabla que esta
junto a la opcin de editar eliminar. Tambin podemos colocar la fecha o algn otro
dato que consideremos importante en el listado. Una vez que tenemos los datos en
nuestro documento vamos a seleccionar la fila como aparece en la siguiente imagen
y nos dirigimos de nuevo al panel de comportamientos donde usaremos
la opcin Repetir regin.

Seleccionar fila de tabla

Es importante que en la barra de estado te aparezca de ultimas la etiqueta <tr> esto
indica que tienes seleccionada la fila entera. como deca, luego de seleccionar la
fila nos dirigimos al panel de comportamientos y seleccionamos repetir regin en
donde nos aparecer un cuadro de dialogo igual a este:

Repetir region

En el primer campo seleccionamos nuestro juego de registro que en este ca so es

noticias y luego determinamos cuantos registros queremos mostrar. Sencillo
verdad? ahora podemos ver nuestro archivo en nuestro localhost y nos debe
mostrar el listado de registros que tenemos en nuestra tabla de noticias ordenados
por fecha descendente y mostrando un mximo de 10 resultados.

Ejemplo listar juegos de registro

Si al ver la pagina en localhost no les aparece nada es muy probable que aun no
tengan registros en la tabla de noticias de manera que si quieren hacer pruebas
hasta ay deben insertar los registros por medio de phpmyadmin, sin embargo vamos
a pasar al formulario de agregar registros para que vean como se hace.

Agregar noticias

Lo primero que debemos hacer es un formulario con los campos necesarios,

recomiendo que nombren los campos en el formulario de la misma manera que
nombraron los campos en la base de datos, les ahorrara dolores de cabeza mas
adelante.
<form id=agregar name=agregar method=post action=>
Titulo<br />
<input name=titulo type=text id=titulo size=70 /><br />
Fecha<br />
<input name=fecha type=text id=fecha size=30 /><br />
Contenido<br />
<textarea name=texto cols=70 rows=5 id=texto></textarea><br />
Autor<br />
<input name=autor type=text id=autor size=70 />
<input type=submit name=button id=button value=Enviar />
</form>

Este es el ejemplo de mi formulario, muy simple pero la idea es que ustedes jueguen
con las posibilidades. El resultado de este formulario ser el siguiente:

Formulario agregar registro

Ahora vamos a ir al panel de comportamientos y seleccionamos la opcin Insertar

registro con lo que nos aparecer un cuadro de dialogo con la siguiente
informacin:

Insertar registros DW
 En el primer campo seleccionamos el nombre del formulario que vamos a utilizar
(ya que podramos tener varios formularios en una misma pagina) luego
seleccionamos nuestra conexin con la base de datos y la tabla en la cual vamos a
insertar el registro. En el listado que sigue aparecen los campus de nuestra base
de datos y al seleccionarlos nos aparece el valor que tendrn abajo (el campo del
formulario) de manera que tenemos que ver que todos los campos del
formulario estn relacionados a su respectivo campo en la base de datos. Y por
ultimo tenemos una redireccin despus de insertar el el registro, si tienen alguna
pagina de confirmacin pueden colocarla, de lo contrario pueden dejarla en blanco.
Ahora aceptamos y probamos nuestra pagina, si realizamos todos los pasos de
manera correcta podremos ver como podemos agregar noticias de manera muy
sencilla en nuestra base de datos.

El valor de ID (idnoticia en este caso) siempre debe dejarse en ninguna, ya que

este es un campo INT AUTOINCREMENT (entero de auto incrementar).

Modificar una noticia

Para modificar un registro debemos hacer una mezcla de los dos procedimientos
que vimos anteriormente, ya que primero deberemos seleccionar el registro que
queremos modificar y para ello haremos un juego de registro pero usaremos el filtro
de idnoticia para seleccionar la noticia que deseamos modificar.

Actualizar registro Seleccionar

Aqui debo explicar una cosa muy importante antes de continuar. en la parte de filtro
encontraran un desplegable con 6 opciones entre las que estn: Parmetro URL,
Variable de formulario Cookie y otras. Estos son tipos de variables y aqui voy a
hacer una pequea descripcin de las que mas nos importan en este momento
POST y GET (Variables de formulario y parmetros URL respectivamente.).

Parmetro URL: ($_GET) son las variables que se envan por medio de la url
o direccin de la pagina web por ejemplo si la direccin es:
 pagina.php?idnoticia=5. Esto quiere decir que por variable GET tenemos la
variable idnoticia y su valor es 5.
Variable de formulario: ($_POST) Son las variables que se envan a travs de
formularios y que no estn implcitas en la URL, un ejemplo seria los datos que
enviamos en el formulario de agregar noticia. (sin embargo un formulario pue de
enviar por mtodo POST o por mtodo GET.

Ya visto lo anterior vamos a dirigirnos de nuevo a nuestro juego de registros y

en el filtro usaremos un parmetro url idnoticia. De esta manera si vamos a la
pagina noticia.php?idnoticia=3 ese juego de
registro automticamente seleccionara la noticia tres.

Ahora procederemos a crear un nuevo formulario que se llame editar y

colocaremos los campos que queremos modificar que me imagino sern los
mismos que usaron en agregar de manera que pueden copiar el f ormulario y
cambiarle el nombre, recuerden que en este caso los campos del
formulario tambin deben llamarse igual que los campos de la base de datos.

Este nuevo formulario solo tendr tres diferencias:

1. El nombre del formulario ser diferente.

2. Tendr un campo oculto llamado idnoticia que el formulario de agregar no tena.
3. Los campos cargaran la informacin del registro que queremos modificar.

Para cargar la informacin en el nuevo formulario solo debemos seleccionar el

campo del formulario y en el panel de propiedades seleccionar
la opcin dinmico que generalmente est representada con un trueno. Luego
en el cuadro de dialogo que se abre seleccionan el campo de la base de datos
que corresponde al campo en el formulario prestando mucha atencin a
que ests seleccionando el campo del juego de registros correcto y lo estn
asociando con el campo correcto.

El campo oculto idnoticia es muy importante ya que es el que nos dir al

momento de realizar la actualizacin o UPDATE cul es el registro que estamos
modificando.

Cargar informacion formulario editar

Despus de realizar este proceso vamos a hacer algo muy similar a lo que hicimos
con el formulario de agregar noticia pero en lugar de seleccionar el comportamiento
de insertar vamos a seleccionar el que se llama Actualizar registro y seguimos el
mismo proceso de insertar excepto que en esta ocasin seleccionamos el
formulario de editar y la clave principal (idnoticia) la debemos asociar con nuestro
campo oculto.

Ahora por ultimo debemos volver al listado de noticias y tocar un poco el cdigo.
deberemos asignar los vnculos de editar eliminar, aqu mostrare como hacerlo.

Vinculo editar noticia

En el codigo vemos en la linea 131 un enlace que simplemente apunta a

noticias.php?idnoticia=<?PHP row_noticias[idnoticia]; ?>

De manera que esto nos creara los enlaces para cargar nuestro formulario de editar
no los registros que queremos modificar. ahora pueden hacer la prueba y ya que
estamos metindonos con mucho contenido al tiempo les recuerdo que
losForos estn abiertos para que realicen sus preguntas.

Crear sitio web con PHP y MySQL paso a paso

captulo 10
Bienvenidos a la entrega nmero 10 de este curso, de nuevo agradezco por la
acogida que ha tenido y por el apoyo que me dan al seguir el curso y compartirlo
en redes sociales con los enlaces que aparecen en la parte superior de cada
captulo. Bueno como es costumbre antes de comenzar co n el contenido pblico los
enlaces tiles del curso como los otros capitulo y el enlace a los foros donde
pueden realizar sus preguntas para que tengan mejores respuestas.
 Si tienen dudas o inquietudes pueden hacerlas en el foro de
Webmasters.
Ahora si comencemos con el contenido de este capitulo, este capitulo lo
dedicare a hablar sobre algunos tips y cdigos que no se incluyen en
Dreamweaver y que te ayudaran a ser mas eficiente y realizar
funciones tiles para cada desarrollo que realices. Tambin pasaremos por
algunas funciones de PHP que te pueden servir mucho y tratare de explicarlas
de la manera mas simple para que puedan usarlas con facilidad en sus
proyectos. Las utilidades y tips que veremos son:

Condicionales IF, ELSE y ELSEIF. (Programacin en PHP).

Formatos de Fecha y Hora para MySQL con PHP.
Subir archivo al servidor (Programacin en PHP).
SexyLightBox (Plugin JQuery).

Condicionales IF, ELSE y ELSEIF (Programacion PHP).

Es importante que domines este tipo de condicionales para poder hacer

mas dinmico y eficiente tu proyecto web, estas simplemente q uieren decir Si o
Si no. Para explicarlo mas fcil es simplemente determinar que accin debe
ejecutarse al cumplirse una condicin, digamos:

a=5
Si 2 es mayor que (a) entonces hacer una cosa.
Sino lo es entonces hacer otra cosa.

Este mismo ejemplo en PHP se vera as:

$a = 5;
if($a == 2) { echo una cosa; }
else{ echo otra cosa; }

En el ejemplo anterior pueden ver que $a es una variable de manera que si $a es

5 no se va a cumplir la condicin, de manera que se ejecuta el else otra cosa, si
a la variable $a le asignamos el valor 2 la condicin se cumplira y el resultado
seria una cosa.

Las condicionales IF tienen varios parmetros que puedes usar para hacer
diferentes comprobaciones, aqu te escribo algunos de los mas importantes.

if(1 > 2) {}: Si uno es mayor que dos

if(1 >= 2) {}: Si uno es mayor o igual que dos
if(1 < 2) {}: Si uno es menor que dos
if(1 <= 2) {}: Si uno es menor o igual que dos
if(1 == 2) {}: Si uno es igual a dos
if(1 != 2) {}: Si uno es diferente de dos
En el ejemplo anterior ven los parmetros que pueden usar para la condicional if,
recuerden que las comprobaciones de menor y mayor tambin pueden aplicarse a
fechas y las de igualdad o diferencia pueden ser aplicadas a cadenas de texto como
por decir if($mes == Noviembre) { echo El mes es Noviembre; },
pero tambin pueden usar funciones para generar comprobaciones un poco mas
complejas, simplemente al ejecutar una funcin esta devolver un valor boleano, es
decir, si la funcin se cumple devolver como resultado true verdadero, y si no se
cumple devolver como resultado False falso.

Por ejemplo supongamos que quiero saber Si existe un archivo. y segn si

existe o no realice alguna tarea, seria algo as:

archivo = mi_imagen.jpg
Si mi archivo es realmente un archivo entonces dgame que es un archivo.
Sino entonces dgame que no es un archivo o no existe.

En PHP usamos la funcin is_file() que como les deca devuelve valores true
o false, entonces el ejemplo anterior en PHP seria as:

$archivo = mi_imagen.jpg;
if(is_file($archivo)) { echo Si es un archivo; }
else {echo No es un archivo o no existe; }

De esta manera usamos una funcin para realizar una comprobacin. Y si

la funcin se cumple nos dar resultado positivo, si no se cumple sera negativo,
podemos de la misma manera usar un sin fin de funciones como por ejemplo
la funcin mail que enva correos electrnicos.

if(mail(parametros)) { echo El correo si se envio; }

else { echo El correo no se envio; }

Eso es todo por ahora con condicionales de PHP recuerden que pueden anidar
sus condicionales if es decir:

if($variable > 2) {
if($variable < 4) {
echo La variable es 3;
}
else { echo La variable es mayor que 3; }
}
else { echo La variable es 1 o es 2; }

No se si los confund un poco pero bueno, tienen que empezar a utilizar

la lgica para construir sus scripts y hacer que funcionen segn sus necesidades.

Formato de fecha y hora para MySQL en PHP.

continuamos ahora con este tema que surge a peticin de un usuario que tubo
problemas con los campos tipo DATE en los formularios de insertar y editar
registros. Normalmente yo solo utilizo dos tipos de campos de fecha en mi base
de datos que son Date y DateTime uno contiene el ao, mes y da y el segundo
contiene ao, mes da, hora, minuto y segundo, de esta manera:

DATE: 0000-00-00 = YYYY-MM-DD Ej. 2011-04-23

DATETIME: 0000-00-00 00:00:00 = YYYY-MM-DD hh:mm:ss Ej. 2011-04-23 14:23:58

De manera que siempre que enviemos fechas a la base de datos debemos

formatearla de alguna de estas maneras segun sea nuestro caso. Para dar
formato a las fechas con PHP solo es necesario utilizar la funcion date(); de la
siguiente manera:

DATE: <?PHP echo date(Y-m-d); ?>

DATETIME: <?PHP echo date(Y-m-d H:i:s); ?>
Y = Ao de 4 dgitos
m = mes de dos dgitos
d = da de dos dgitos
H = Hora de dos dgitos
i = Minuto de dos dgitos
s = Segundo de dos dgitos

La razn por la cual no siempre uso el mismo tipo de campo esta en la necesidad
de la aplicacin, si va a ser un sitio de noticias el campo debe ser DATETIME ya
que en un mismo da podran agregarse muchas noticias, pero si es para un
registro que se va a actualizar una ves al da cada cierto numero de das, bastara
con usar un campo tipo DATE.

Cuando realicen sus consultas SQL o juegos de registros en Dreamweaver,

recuerden que pueden ordenar los resultados por fecha tambin, si seleccionar
Ordenar por fecha descendente se mostraran los mas recientes primero.

Subir un archivo al servidor.

Esta herramienta tambin es muy importante ya que en varias ocasiones vamos a

querer subir imgenes o documentos para adjuntarle con nuestros registros o para
realizar tenerlos a disposicin de todo el mundo en Internet.

Antes de comenzar con la parte de PHP es importante que el formulario tenga la

propiedad multipart/form-data

multipar/form-data
Esto se usa en los formularios que enviaran archivos adjuntos. luego colocamos
el input tipo file y en la pagina que recibe los datos agregamos esto segn nos
convenga.

$destino = micarpeta/archivos;
$recibirarchivo = strtolower($_FILES [ imagen ][ name ]);
move_uploaded_file ( $_FILES [ imagen ][ tmp_name ], $destino .
/.$recibirarchivo.);

En la primera linea definimos el destino relativo donde se almacenara el archivo en

el servidor, es decir la carpeta donde guardaremos este archivo.
En la segunda linea lo que hice fue almacenar el nombre del archivo en la variable
$nombredearchivo y con la funcin strtolower() paso el nombre del archivo
a minsculas para evitar problemas y confusiones (recomendado).
En la tercera linea (hacemos la magia) con la funcin move_upload_file() copiamos
el archivo que fue enviado por el formulario en la carpeta de destino co n el nombre
que ya hemos almacenado en la variable $recibirarchivo.

Tambin es recomendable, de hecho muy muy recomendable que hagan

validaciones al archivo antes de subirlo al servidor, esto lo hacen con las
condicionales que ya vimos antes, por ejemplo para evitar que alguien pueda subir
una pagina PHP a nuestro servidor usando ese formulario simplemente aplicamos
una condicional con el tipo de archivo, si el archivo es PHP no lo suba, si el archivo
NO ES PHP subir, de igual manera podemos hacer condicionales para restringir el
tipo y tamao del archivo para que solo suba el archivo si es digamos del tipo
imagen y pesa menos de 500Kb, si quieren informacin especifica sobre estos
procesos pueden publicar lo que necesiten en el foro.

SEXY LIGHTBOX 2.6 plugin JQuery

Antes de explicar que es sexy ligthbox explicare un poco que es

jQuery, vern, jQuery al igual que prototype y mootolls entre otros son frameworks
o libreras de cdigo prefabricado que nos ahorran mucho trabajo en diseo y
desarrollo de nuestros proyectos, estas especficamente son libreras de
Javascript, otro lenguaje de programacin orientado a la web pero a diferencia de
PHP este se ejecuta del lado del cliente, como el HTML, y nos permiten crear
animacion y eventos interesantes que em bellecen y optimizan nuestros sitios.
Ahora si, sexy lightbox es un plugin o mini aplicacin basada en jQuery para crear
cajas de luz, para ser mas especifico, es algo muy similar o casi igual al efecto que
tienen las imgenes de este sitio, cuando le das click se amplan y oscurecen todos
los dems objetos de la pagina.
 SexyLightBox 2

Este plugin antes era gratuito pero ahora lo convirtieron a plugin de pago, pero
tranquilos para eso estoy yo, aqu les traigo el plugin SexyLightBox 2.3 gratis y con
la traduccin al espaol, tambin incluye la versin en mootolls si quieren usarlo
con esa libreria y no con jquery pero yo recomiendo jquery.
http://www.4shared.com/rar/8iPsyJtL/sexy-lightbox-23.html

Este captulo ya se hizo demasiado extenso y se me agota el tiempo jejeje de

manera que dejaremos hasta aqu por hoy, les recomiendo que experimenten
mucho con lo que acabamos de ver y vern como van haciendo cada ves
aplicaciones mas eficientes y dinmicas.

El siguiente captulo lo dedicare a plugins y herramientas como SexyLightBox,

jquery, CKeditor y muchos ms.

Crear sitio web con PHP y MySQL paso a paso

captulo 11

Bienvenidos a la ultima entrega de este curso sobre como hacer sitios

web dinmicos con PHP y MySQL desde cero, ha sido muy grato para mi
publicar este contenido y veo que fue muy bien recibido por los seguidores del
sitio. Agradezco todos los comentario y les recuerdo que siempre pueden
contactarme para que les colabore con sus dudas e inconvenientes. Esta ultima
entrega se realiza porque hay que comenzar un curso nuevo, aun no es seguro
si comenzaremos con desarrollo de video juegos en flash o algo de CMSs, pero
la idea es crear nuevas herramientas desde cero para que mas personas puedan
aprender. Se que falta mucho material con respecto a como crear los
sitios dinmicos con PHP pero la parte que considero mas difcil es la de
entender la lgica de programacin y conocer las herramientas fundamentales,
y eso fue lo que hicimos dentro de este curso, este ultimo capitulo lo dedicare a
hacer algunos ajustes y tips de problemas comunes que se le presentaron a
algunos usuarios durante el curso, asi todo quedara mas claro .
Ahora vamos con el contenido de este capitulo, que
sera bsicamente recomendarles sitios y referencias de cdigos para que cualquier
desarrollo que estn considerando realizar sea posible y solo tengan que buscar la
informacin. Lo primero que deben tener en cuenta es usar un buen foro de ayuda,
aunque el foro de este sitio web esta abierto y pueden usarlo cuando quiera, (yo
personalmente responder sus dudas) recomiendo que utilicen Foros de Web,
ay podrn encontrar mucha mas informacin y una comunidad de usuarios muy
grande dispuestos a ayudarlos.

Por otro lado, necesitaran mucho cdigo para estudiar y poder realizar diferentes
tipos de aplicativos, para ello les recomiendoHotScripts.com donde pueden
encontrar una increble cantidad de cdigo prefabricado de PHP, MySQL y
muchos otros lenguajes.

Es muy importante que consulten constantemente la gua o manual de referencia de

PHP en php.net donde podrn consultar funciones especificas de PHP y ver cuales
pueden usar y con que parmetros segn la versin de PHP que estn utilizando.
Igual con MySQL aunque una vez que do minen las
consultas bsicas no tendrn problema, y los cambios entre versiones
generalmente no afectan el desarrollo.

Tambin te recomiendo que uses los servicios de Google para webmasters (Analytics,
adsense. webmasters, adwords, apps, sitesearch, etc) son muy tiles y pueden
potenciar mucho tu web. O puedes leer este articulo de 10 herramientas obligatorias
para un webmaster ay podrs ver mas informacin de sitio tiles para webmasters.
Una de las inquietudes mas planteadas es sobre los lugares para comp rar hosting
y dominios. Y para eso esta este articuloLugares donde es y no es seguro tener
dominios.

Bueno eso es todo por ahora, sin embargo seguir publicando material relacionado
al curso, como tips de desarrollo y cosas por el estilo pero sern post aparte,
y tambin tratare de realizar tutoriales para reforzar las reas en la que
la mayora de los usuarios tuvieron alguna duda o inconveniente, en este momento
estoy escribiendo un tutorial para hacer juegos de registros relacionales y anidados
con Dreamweaver.