Crear Sitio Web Con PHP y MySQL Paso A Paso

Crear sitio web con PHP y MySQL paso a paso capitulo 1
by kalvinmanson • 9 Septiembre, 2010

Curso de creación de sitio dinámicos PHP y MYSQL
Buenos días 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 programación 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 dinámicos 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 dinámico, estático, saber que es php, que es una base de datos, etc, y aunque muchos dirán que es
contenido superfluo considero que si vamos a hacer un tutorial o curso para todo el mundo debemos partir por lo
mas básico para asegurarnos que todos los que toman este tutorial están en un mismo nivel o similar de conocimiento.
¿Cual es la diferencia entre un sitio web estático y uno dinámico?

Es muy sencillo, los sitios web estáticos son aquellos que no cambian ni manejan información con respecto al usuario o
al administrador, siempre que los visitas son exactamente iguales y su única función es mostrar una información que no
se va a actualizar, por otra parte, los sitios dinámicos son aquellos que toman información 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 dinámico, ya que los post o noticias o contenidos son agregados dinamicamente a travez de un panel de
administracion echo en PHP que guarda la información 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 estáticos y dinámicos es el lenguaje de programación con los
que están 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 dinámicos por lo general echos en PHP ofrecen la interactividad de información de la que estamos
hablando, donde el sitio puede leer información 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 función o un
evento que produce algo con la información que se le suministra, pero no te asustes aun con tantos tecnicismos solo es
una explicación 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 envía datos al cliente
(navegador o browser).
¿Que es una base de datos MySQL?

MySQL por otra parte no es un lenguaje de programación sino un gestor de bases de datos, su función es simplemente
guardar información de una manera organizada y con una estructura que facilite el acceso a dicha información, 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 tendríamos campos con la información 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 electrónico y nivel de acceso ademas de otros datos.
Noten que cada registro (fila) tiene un “idusuario” este es un identificador, nos sirve para diferenciar un usuario de otro
asi que si decido ver la informacion del usuario 8 tendre el nombre “Luis Henao”, correo “[email protected]”
y así sucesivamente.
MySQL no funciona solo, debe ser llamado por un lenguaje activo en servidor (en este caso PHP) para poder trabajar.
Mas información 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 dirección 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 estáticos y dinámicos?

Bueno esta parte es muy importante ya que los programas que aquí mencionamos son fundamentales para continuar
tomando el curso te creación de sitios web dinámicos con PHP y MySQL. Aunque existen muchas alternativas a los
programas que aquí voy a mencionar, recomiendo que usen específicamente 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 básicas 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 código 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 fácil de usar y de fácil configuración.
Descargar NicoFTP3
Creo que ya tienes suficiente tarea que hacer, lee sobre servidores web, sobre hosting, sobre HTML y PHP, instala el
software del que hablamos y pasa al siguiente capitulo.
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 están 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 planificación del sitio web. Ya que considero que el 80% del tiempo de un desarrollo y la mayoría de inconvenientes y
errores que se presentan se deben a una mala planificación del proyecto.
Marco lógico o teórico del proyecto
Primero abarquemos el marco teórico lógico, 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 vídeos ya que hay que promocionar bandas, entonces quiero las siguientes secciones de
contenido:
 Sección de vídeos y cada vídeo tendrá la siguiente información: Nombre

del vídeo, descripción del vídeo, artista, archivo de vídeo, genero, imagen miniatura, fecha
de publicación y puntuación.
 Sección de Fotos y cada foto tendrá: Nombre de la foto, archivo de imagen, miniatura, fecha
de publicación y puntuación.
 Sección de noticias y cada noticia tendrá: Titulo de la noticia, contenido de la noticia, imagen de la
noticia, fecha de publicación y puntuación.
 Sección de eventos y cada evento tendrá: Nombre del evento, fecha de realización, lugar del
evento, descripción del evento y puntuación.
No se si lo han notado pero este simple proceso automáticamente 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 vídeos, si no lo planeamos con anticipación podría generar varios problemas.
Ahora sobre el comportamiento del usuario en el sitio y los servicios que este debería ofrecerle.
Es un sitio joven y pretende mantener informado al publico así que los enganchare con un sistema de registro de
usuarios, y como estarán registrados me proporcionaran sus datos para crear un sistema
que envié un boletín publicitario constantemente.
Por el mismo punto anterior se que la mayoría usa redes sociales así que agregare herramientas para compartir los
contenidos (Noticias, fotos, vídeos y eventos) a través de las principales redes sociales.
Maqueta básica (borrador)

También considero muy importante esta parte, y es igualmente importante que se haga en una hoja de papel y
preferiblemente con lápiz en lugar de bolígrafo. Aquí es donde definirán como estará organizado el sitio y como van a
distribuir los bloques dentro de la pagina. La importancia de hacerlo a lápiz radica en que cuando hacemos la parte
creativa detrás 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 (Créanme a mi
me pasa todo el tiempo).
Maqueta basica
Des 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 planificación.
Recolección de contenido
Ojo, en la mayoría de los sitios debes considerar la diagramación del sitio a partir del contenido, por ejemplo en mi caso,
ya que mi sitio sera de música y bandas de rock, necesito los vídeos y debo crear el plano básico 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 vídeo, puedes incluirlo en alguna parte del diseño o si va a tener solo algunos (5 o
10 vídeos) puedes crear un bloque en el diseño donde los listes, pero si esperas tener
muchos vídeos probablemente tendrás que idear una estructura con buscador y separación por categorías o algún tipo
de filtro para que los usuarios puedan acceder fácilmente a cualquier vídeo.
Por lo tanto recuerda el diseño del sitio web o la maqueta básica debe trabajar en función del contenido del sitio.
Mira a tu competencia, directa o platónica.

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

6. Por ultimo la ventana del final nos confirmara la información que hemos ingresado, recomiendo que revisen los
datos una ultima vez para evitar problemas con rutas en un futuro.
7. Una vez que hallamos pulsado el botón completar podremos abrir el panel de archivos (Menú superior ventana
>> Archivos)) y ver que nuestro sitio ya esta creado, como aparece en la imagen a continuación.
Bien es todo durante este capitulo del curso, en la próxima entrega estructuraremos la base de datos y crearemos el
esquema básico de funcionamiento del sitio.
by kalvinmanson • 15 Octubre, 2010
Bienvenidos a la 4 entrega del tutorial que se convirtio en curso “Crear sitio web con PHP y MySQL paso a paso”. Como
es costumbre comenzare agradeciendo a las personas que siguen el curso y disculpándome por la demora en
la publicación de este nuevo capitulo del mismo. También como es normal les dejo los anteriores capítulos para aquellos
usuarios que no los han visto.
Ahora si entremos en materia, este capitulo lo dedicaremos a estructurar la base de datos, y aunque suena
muy técnico realmente es algo que no necesita muchos conocimientos, sin embargo se requerirá de mucha lógica y
sentido común. De la correcta construcción 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.
Estructurar base de datos mysql
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 ortografía en estos casos ya que un fallo en una letra puede significar el fallo
total de nuestro sistema, también te recomiendo que uses solo caracteres alfabéticos (letras a-z) en minúscula y si
necesitas separar palabras usa guiones bajos “_”, porfavor no utilices espacios en blanco o acentos, tildes, eñes
o cualquier otro carácter extraño.
En mi caso mi base de datos se llama “visualrock”, y ahora procedemos a crear las tablas, pero primer
una explicación de términos importantes sobre bases de datos:
 Base de datos: es un conjunto de tablas, como el sitio donde almacenaras toda la información 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 inserción de información en la base de datos.
 Datos: Esta es la información 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 capítulos pasados de idear el
contenido del sitio y su organización.
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 lápiz 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 números enteros. Se usa para almacenar edades, valores,
cantidades, todo lo que dependa solo de números, como un contador de visitas por ejemplo, solo
almacenar un numero.
 VARCHAR: Este almacena cadenas de texto de máximo 256 caracteres. Ideal para almacenar nombres
de usuario, o contraseñas, 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 almacenaría el contenido de las noticias o artículos de tu sitio
que podrían 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 identificación, 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 carácter).
 password: Este campo es igual al anterior.
 nivel: pensando en que habrá diferentes niveles de acceso al panel de administración coloque este
campo, también 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”.
Estructurar bases de datos mysql
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 información, 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 ningún registro en la base de datos.
 Estructura: Te mostrara los campos de la tabla con sus propiedades, desde esta pestaña podrás hacer cambios
en la estructura, pero entre menos cambios tengas que hacer mejor.
 SQL: es para ejecutar el lenguaje de programación 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 demás tablas siguiendo los pasos anteriores, aquí te dejare un ejemplo de las tablas que
tiene mi sitio para que veas como se puede hacer.
tabla mysql estructura

tabla mysql estructura
Eso es todo por este capitulo, en el próximo capitulo empezaremos con el montaje en fireworks del diseño y como
pasarlo a dreamweaver. Por ahora los dejo con algunas recomendaciones finales.
 Recuerda siempre agregar el campo de ID (identificación) 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 alfabéticos (a-z) en minúscula y sin espacios.
 Asignar el tipo de campo dependiendo de la información que vas a agregar en el, si es un numero debe ser INT,
si es fecha que NO sea varchar, etc.
He habilitado el foro para que puedan hacer las preguntas que quieran con respecto a este curso.
http://tupale.org/foro/tutoriales/
by kalvinmanson • 22 Octubre, 2010
Buen día amigos de Tupale, comenzamos aquí otro capitulo mas de curso para Crear sitios web con PHP y MySQL paso
a paso y como es habitual debo comenzar agradeciendo a todos los que retwitearon y compartieron el capitulo anterior
en redes sociales, ademas de dar un especial agradecimiento a los usuarios que dejaron sus comentarios a través del
sitio.
Este capitulo lo dedicaremos a la parte del diseño, la cual también va a ser paso a paso y en la que enseñare algunas
costumbre que no pondrán muy felices a los diseñadores pero todo en pro de ser eficiente y lograr un producto web de
alta calidad en poco tiempo. Si eres diseñador hardcore y solo te interesa este curso por la parte de PHP y MySQL
puedes saltarte este capitulo, el cual solo va orientado a diseñar la plantilla.
Bueno para comenzar debo remontarme a otro capitulo de este curso donde publique la maqueta que esta
a continuación y les decía que es muy importante diseñar 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.
Maqueta basica
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 experimentación.
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 diseño 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 diseñar 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 recomendación principal es navegar mucho para conocer muchos sitios web con muchos estilos diferentes.
 CSS Mania
 Template Monster
 Web Digiti
 Ceeces
 Vecindad Grafica
Una forma fácil de utilizar estos sitios es con la tecla imprimir pantalla, lo que normalmente hago es buscar un diseño 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.
Como copiar plantillas fireworks
Espero que esta imagen ejemplifique mas cual es el proceso para copiar el estilo de un sitio con Fireworks. xD
Iconos gratis para web
De echo ahora que lo pienso bien la mayor parte del diseño y desarrollo de sitios consiste en la búsqueda 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 gráfica en los iconos para que la pagina sea fácil de navegar, si los iconos no coinciden
van a tener muchos problemas de navegación.
De la misma manera pueden hacer con las fotografías, para ahorrar tiempo y dinero pueden usar bancos de imágenes y
buscar el material necesario para su proyecto web, una de las paginas que mas recomiendo es SXC que es un banco
de imágenes muy grande con la ventaja de ser gratuito.
Bueno para ayudar a los son novatos en Fireworks (yo también lo fui) aquí les dejo un vídeo tutorial que enseña lo
mas básico y útil.
Aclaración, estos vídeo tutoriales también hablan de un modo de exportación de imágenes que no es recomendado, sin
embargo pueden utilizarlo, finalmente cada persona termina diseñando y exportando pero no recomiendo el método que
se emplea en este vídeo tutorial, solo los publico para que conozcan mas de Fireworks.
Consejos importantes antes de continuar:
1. El ancho máximo de tu área de contenido no debe pasar los 1000 pixeles pues asumiremos que el sitio esta
echo para usuarios estándar con pantallas de 1024*768px de resolución.
2. Mantén 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 maquetación de sitio procura usar áreas cuadradas para ahorrar trabajo y dolores de cabeza
en el montaje.
4. Trabaja con una resolución superior a 100 pero inferior a 200 así mantendrás tus archivos con buena calidad
pero con un peso optimo.
5. Para exportar las imágenes 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 fácil de ahorrar tiempo en este paso del desarrollo del sitio y que es muy buena cuando te interesa mas
la programación que la apariencia o no tienes el tiempo para diseñar 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 imágenes 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 diseño en Fireworks, como consejo personal también recomiendo que guarden los
PNGs de Fireworks en una carpeta para cuando necesiten hacer modificaciones sobre el diseño, pueden hacerlo dentro
de la misma carpeta del sitio que ya hemos creado previamente en el capitulo 3 de este curso.
Archivo PNG Visual Rock
Consejos para hacer mas fácil la exportación de las imágenes:
1. Las áreas que son fondos repetitivos puedes exportarlas en pequeñas piezas y desde CSS las pondrás a repetir.
2. No exportes los textos, estos debes agregarlos desde dreamweaver.
3. Separa muy bien las imágenes que serán parte del contenido de las que serán parte del diseño, por ejemplo en
la plantilla que estoy trabajando el fondo es parte del diseño 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 guárdalos en minúsculas y sin espacios o caracteres extraños para
evitarte problema con las rutas.
Aqui les dejo un ejemplo de todas las imágenes que componen mi template (visual rock) para que se hagan una idea de
como se exportan.
Descargar: imagesvisualrock
Ya que este capitulo se esta tornando demasiado largo cortare aqui por hoy pero prometo que mañana publicare una
segunda parte explicando el proceso de construcción de la pagina en dreamweaver con
las imágenes que obtuvimos a través de este capitulo.
by kalvinmanson • 8 Noviembre, 2010
Bienvenido a la mas demorada entrega del curso “Crear sitio web con PHP y MySQL paso a paso”, lamento mucho la
larga ausencia de mas de una semana pero mis obligaciones me impidieron continuar con el curso, sin
embargo aquí estamos de nuevo con un capitulo mas y como es costumbre aquí publico los capítulos anteriores para
que aquellos que no conocen en curso.
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 habían estudiado por lo
tanto aquí solo les pediré que lo repacen MUCHO, HTML es el corazón de la web y aunque algunas
personas piensen que no es importante yo considero que es el núcleo de todo y de ay empezamos a expandir nuestros
proyectos web.
Como siempre trato de apoyarlos aquí les dejo un sencillo PDF que muestra las etiquetas básicas de HTML solo para
que se familiaricen pero es muy importante conocer la mayor cantidad de etiquetas posibles.
Listado de etiquetas HTML
También es muy importante aprender CSS ya que la diferencia entre una web optimizada, agradable, rápido, 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 diseño enteramente a CSS y el contenido a formatearlo con
HTML.
Espero que la siguiente gráfica ejemplifique mejor lo que quiero decir.
Con CSS y Sin CSS
Bueno ahora si debemos ir a Dreamweaver para comenzar a maquetar nuestro sitio. lo primero que debemos saber es
que hay dos formas de maquetar, la salida fácil usar tablas y las salida estética de alta calidad aunque un tanto mas
complicada usar DIV de CSS, pero para que entendamos las dos lo que voy a hacer es una especie de híbrido donde
usare tanto tablas como CSS y varias cosas diferentes para que puedan conocer diferentes técnicas y determinen cual
es la que mas les gusta a ustedes.
Lo primero que haremos sera crear el primer documento que sera nuestro núcleo de sistema, nuestro index.php es
importante que para este paso ya tengan definido el sitio en Dreamweaver y configurado con el Xampp como servidor
de prueba como se menciona en el capitulo 3 luego creamos un nuevo documento del tipo PHP.
Crear documento PHP desde DreamWeaver
Ahora procederemos a definir la propiedades de la pagina dando clic derecho y luego en la opción “Propiedades de
pagina”, al rellenar el formulario que nos aparece en este cuadro de dialogo Dreamweaver nos generara un CSS con las
propiedades básicas de la pagina que podremos ver en la vista de código “El codigo CSS se colorea de rosado por
defecto”. Aquí definiremos cosas básicas como el tamaño de la fuente, el tipo de fuente, el color, el color de fondo y la
imagen, también las margenes y otras generalidades. También es importante abrir la opción de vínculos en la parte
izquierda y definir los colores de los enlaces y el efecto sobre (a:hover).
Definir propiedades de pagina en dreamweaver
Comenzaremos a diagramar primero con tablas para que se hagan una idea de como es este método, iremos
al menú insertar y luego insertaremos Tabla. con lo que nos aparecerá un cuadro de dialogo que nos hará unas
preguntas básicas sobre la tabla que queremos insertar. Es muy importante que antes de insertar la tabla uses
la lógica para definir que tipo de tablas necesitas y con que cantidad de filas y columnas. Como es normal voy a hacer un
ejemplo.
Diagramacion con tablas en Dreamweaver

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 modificación simplemente nos situamos sobre la fila y vamos al icono de dividir celda en la
barra de propiedades.
Insertar tabla Dreamweaver
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 alineación de la tabla.
Propiedades de la tabla Dreamweaver
Nuestro siguiente paso sera comenzar a agregar los contenidos o bloques de contenido dentro de nuestro diseño 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 opción 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 debería ser prohibido redimencionar las imágenes desde Dreamweaver. Si
necesitas cambiar el tamaño de alguna imagen abre dicha imagen en Fireworks y exportala con el nuevo tamaño.
Ahora vamos a situarnos en la siguiente celda que sera la del menú de navegación, 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 imágenes en jquery, esto es algo así como un plugin o
un código que se encuentra fácilmente en Internet y se lo adherimos a nuestra pagina, esta técnica debes usarla mucho
para los widgets o módulos que quieras incluir. De ese carrusel también he puesto un ejemplo en un tutorial aparte.
Carrusel jQuery compatible con sexy light-box
Y de la misma manera que en el capitulo anterior siento que este se esta haciendo demasiado largo así que
terminare aquí por hoy prometiendo no tardar tanto para la continuación del curso, sobretodo porque este capitulo 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 capitulo.
by kalvinmanson • 13 Diciembre, 2010
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.
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
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
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
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
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
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

by kalvinmanson • 5 Enero, 2011
Saludos a todos los seguidores de este curso y del sitio, gracias por compartir el capitulo anterior en redes sociales
a través de los links que aparecen en la parte superior ese es el apoyo que necesitamos para seguir publicando mas
material.
Y ahora entremos en material. Ya que en el capitulo anterior vimos como realizar la conexión 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 opción “Autenticar usuarios” utilizaremos
la opción “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 información coincide o no. Luego las paginas de confirmación 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 restricción, 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 código 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 sesión 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 pestaña
insertar y listo.
Insertar registros desde PHPMyAdmin
Bueno ya tiene su sistema de login, ahora deben 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 próxima entrega donde les enseñare como crear las paginas para agregar, editar y
eliminar información de su base de datos según la tabla o sección. Recuerden compartir el tutorial para que
la próxima entrega sea mas pronta. xD
by kalvinmanson • 10 Febrero, 2011
Saludos a todos los que leen este curso, lamento mucho la espera para el nuevo capitulo pero mis obligaciones me han
tenido bastante ocupado, ademas de ello me encuentro trabajando en una plataforma de educación virtual para brindar
mas y mejores cursos para todos ustedes de manera gratuita y un poco mas profesional, esperemos que en un par de
semanas ya tengas lista dicha plataforma.
También 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 material, 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, restricción 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 imágenes, 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 sitio 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 también 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 información 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 información de un
registro para editarla y tendrá un campo adicional de identificación 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 dinámicos con PHP y MySQL. Un juego de registros es simplemente
una búsqueda entre todas las filas (registros) de una o mas tablas con algunos parámetros 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” donde la categoría 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 lógica 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 difícil 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 conexión con la base de datos, nuestra tabla (en
este caso “noticias”), seleccionamos todos los campos, en la opción 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 función 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 titulo de la noticia en la celda de nuestra tabla que esta junto a la opción de editar
eliminar. También podemos colocar la fecha o algún 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 opción “Repetir región”.
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 decía, luego de seleccionar la fila nos dirigimos al panel de comportamientos y seleccionamos
repetir región 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 caso 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 máximo 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 sera el siguiente:
Formulario agregar registro
Ahora vamos a ir al panel de comportamientos y seleccionamos la opción “Insertar registro” con lo que nos aparecerá un
cuadro de dialogo con la siguiente información:
Insertar registros DW
En el primer campo seleccionamos el nombre del formulario que vamos a utilizar (ya que podríamos tener varios
formularios en una misma pagina) luego seleccionamos nuestra conexión 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 tendrán abajo (el campo del formulario) de manera que tenemos que ver que todos los campos
del formulario están relacionados a su respectivo campo en la base de datos. Y por ultimo tenemos
una redirección después de insertar el el registro, si tienen alguna pagina de confirmación 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 están: Parámetro URL, Variable de formulario Cookie y otras. Estos son tipos de variables y aqui
voy a hacer una pequeña descripción de las que mas nos importan en este momento POST y GET (Variables de
formulario y parámetros URL respectivamente.).
 Parámetro URL: ($_GET) son las variables que se envían por medio de la url o dirección de la pagina web por
ejemplo si la dirección 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 envían a través de formularios y que
no están implícitas en la URL, un ejemplo seria los datos que enviamos en el formulario de agregar noticia. (sin
embargo un formulario puede enviar por método POST o por método GET.
Ya visto lo anterior vamos a dirigirnos de nuevo a nuestro juego de registros y en el filtro usaremos un parámetro url
idnoticia. De esta manera si vamos a la pagina noticia.php?idnoticia=3 ese juego de
registro automáticamente 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 serán los mismos que usaron en agregar de manera que pueden copiar el formulario y cambiarle el
nombre, recuerden que en este caso los campos del formulario también deben llamarse igual que los campos de la base
de datos.
Este nuevo formulario solo tendrá tres diferencias:
1. El nombre del formulario sera diferente.

2. Tendrá un campo oculto llamado idnoticia que el formulario de agregar no tenia.
3. Los campos cargaran la información del registro que queremos modificar.
Para cargar la información en el nuevo formulario solo debemos seleccionar el campo del formulario y en el panel de
propiedades seleccionar la opción dinámico que generalmente esta 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 atención a que estés seleccionando el campo del juego de registros correcto y lo esten asociando con el campo
correcto.
El campo oculto “idnoticia” es muy importante ya que es el que nos dirá al momento de realizar la actualización o
UPDATE cual es el registro que estamos modificando.
Cargar informacion formulario editar
Después 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 ocasión 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 código. deberemos asignar los vínculos 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 metiéndonos con mucho contenido al tiempo les recuerdo
que los Foros están abiertos para que realicen sus preguntas.
Recuerden dejar sus comentario y compartir este tutorial en facebook y twitter, cuando lleguemos a los 20 shares
publicamos nuevo capitulo. xD
by kalvinmanson • 23 Abril, 2011
Bienvenidos a la entrega numero 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
capitulo.
Capítulo 10: Condicionales, fechas, upload y un plugin

jquery
Ahora si comencemos con el contenido de este capitulo, este capitulo lo dedicare a hablar sobre algunos tips
y códigos que no se incluyen en Dreamweaver y que te ayudaran a ser mas eficiente y realizar funciones útiles para
cada desarrollo que realices. También 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. (Programación en PHP).

 Formatos de Fecha y Hora para MySQL con PHP.
 Subir archivo al servidor (Programación en PHP).
 SexyLightBox (Plugin JQuery).
Condicionales IF, ELSE y ELSEIF (Programacion PHP).
Es importante que domines este tipo de condicionales para poder hacer mas dinámico y eficiente tu proyecto web, estas
simplemente quieren decir “Si…” o “Si no…”. Para explicarlo mas fácil es simplemente determinar que acción debe
ejecutarse al cumplirse una condición, 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 vería 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 condición, de
manera que se ejecuta el else “otra cosa”, si a la variable $a le asignamos el valor “2” la condición se cumpliría y el
resultado seria “una cosa”.
Las condicionales IF tienen varios parámetros 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 parámetros que pueden usar para la condicional if, recuerden que las comprobaciones de
menor y mayor también 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 también pueden usar funciones para
generar comprobaciones un poco mas complejas, simplemente al ejecutar una función esta devolverá un valor boleano,
es decir, si la función 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 según si existe o no realice alguna tarea, seria
algo así:
archivo = mi_imagen.jpg
Si mi archivo es realmente un archivo entonces dígame que es un archivo.
Sino entonces dígame que no es un archivo o no existe.
En PHP usamos la función “is_file()” que como les decía 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 función para realizar una comprobación. Y si la función 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 función mail que envía correos electrónicos.
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 lógica para construir sus scripts y hacer que
funcionen según sus necesidades.
Formato de fecha y hora para MySQL en PHP.
continuamos ahora con este tema que surge a petición 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 año, mes y día y el segundo contiene año, mes día, 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 = Año de 4 dígitos
m = mes de dos dígitos
d = día de dos dígitos
H = Hora de dos dígitos
i = Minuto de dos dígitos
s = Segundo de dos dígitos
La razón por la cual no siempre uso el mismo tipo de campo esta en la necesidad de la aplicación, si va a ser un sitio de
noticias el campo debe ser DATETIME ya que en un mismo día podrían agregarse muchas noticias, pero si es para un
registro que se va a actualizar una ves al día cada cierto numero de días, 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 también, si seleccionar “Ordenar por fecha descendente” se mostraran los mas recientes primero.
Subir un archivo al servidor.
Esta herramienta también es muy importante ya que en varias ocasiones vamos a querer subir imágenes o documentos
para adjuntarle con nuestros registros o para realizar tenerlos a disposición 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 formulario que enviaran archivos adjuntos. luego colocamos el input tipo file y en la pagina que recibe
los datos agregamos esto según 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 función strtolower() paso el nombre del archivo a minúsculas para evitar problemas y confusiones (recomendado).
En la tercera linea (hacemos la magia) con la función move_upload_file() copiamos el archivo que fue enviado por el
formulario en la carpeta de destino con el nombre que ya hemos almacenado en la variable $recibirarchivo.
También 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 tamaño del archivo para que solo suba el archivo si es digamos del tipo imagen y pesa menos de 500Kb, si
quieren información 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, verán, jQuery al igual que prototype y mootolls
entre otros son frameworks o librerías de código prefabricado que nos ahorran mucho trabajo en diseño y desarrollo de
nuestros proyectos, estas específicamente son librerías de Javascript, otro lenguaje de programación 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 embellecen y optimizan nuestros sitios.
Ahora si, sexy lightbox es un plugin o mini aplicación basada en jQuery para crear cajas de luz, para ser mas especifico,
es algo muy similar o casi igual al efecto que tienen las imágenes de este sitio, cuando le das click se amplían y
oscurecen todos los demás 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 traducción al español, también incluye la versión 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 capitulo 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 verán como van haciendo cada ves aplicaciones
mas eficientes y dinámicas.
El siguiente capitulo lo dedicare a plugins y herramientas como SexyLightBox, jquery, CKeditor y muchos mas. xD
Si tienen dudas sobre la utilización de Sexy Lightbox o de alguno de los temas de este capitulo pueden publicarlas en el
foro y responderé específicamente a lo que necesitan.
by kalvinmanson • 1 Agosto, 2011
Website Award
Bienvenidos a la ultima entrega de este curso sobre como hacer sitios web dinámicos 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 dinámicos con PHP pero la parte que considero mas difícil es la de entender
la lógica de programación 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. xD
Ahora vamos con el contenido de este capitulo, que sera básicamente recomendarles sitios y referencias
de códigos para que cualquier desarrollo que estén considerando realizar sea posible y solo tengan que buscar la
información. 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 podrán encontrar mucha mas información y una comunidad de usuarios muy grande dispuestos a ayudarlos.
Por otro lado, necesitaran mucho código para estudiar y poder realizar diferentes tipos de aplicativos, para ello les
recomiendo HotScripts.com donde pueden encontrar una increíble cantidad de código prefabricado de PHP, MySQL y
muchos otros lenguajes.
Es muy importante que consulten constantemente la guía o manual de referencia de PHP en php.net
donde podrán consultar funciones especificas de PHP y ver cuales pueden usar y con
que parámetros según la versión de PHP que estén utilizando. Igual con MySQL aunque una vez que dominen las
consultas básicas no tendrán problema, y los cambios entre versiones generalmente no afectan el desarrollo.
También 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 podrás ver mas información de sitio útiles para webmasters.
Una de las inquietudes mas planteadas es sobre los lugares para comprar hosting y dominios. Y para eso esta este
articulo “Lugares 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 serán post aparte, y también tratare de realizar tutoriales para reforzar las áreas en la que
la mayoría 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.
Espero que sigan leyendo los post y gracias por acompañarnos en este curso, nos vemos en el próximo curso.
Como mover un sitio de localhost a un servidor web de Hosting
by kalvinmanson • 26 Marzo, 2013
Veo con gusto que muchas personas están siguiendo el curso de diseño web PHP y MySQL desde cero publicado hace
ya mucho tiempo en Tupale, pero muchos me han escrito porque tienen sus sitios terminados en localhost y quieren
saber como pasarlo a la web, es decir montarlo finalmente en Internet para que sea consultado mediante
una dirección url, es por esto que escribo este tutorial donde aclarare algunos pasos básicos para migrar el sitio que
hiciste durante el curso a la web.
Conseguir un Hosting y un dominio para alojar el proyecto

Cuando instalaste el Xampp en el primer capitulo del curso lo que hiciste fue crear un servidor local, es decir es como un
servidor de un sitio web pero en tupc para que solo tu y las maquinas conectadas a tu ordenador puedan acceder a los
sitios web que ahí trabajas, pero ahora necesitaremos un servidor de hosting (alojamiento) que nos ofrezca los mismos
servicios de un servidor Xampp. El principal inconveniente es que para adquirir un servicio de
calidad deberás contratarlo, es decir comprar el servicio. Existen muchos proveedores de hosting en Internet pero en
especial yo te recomiendo dos Hostgator que es el que aloja a Tupale y Droni.co donde próximamente lanzare mi propio
servicio de hosting y dominios.
Luego de contratar el hosting tendrás que comprar un dominio, que es la dirección de tu sitio como www.misitio.com
aunque muchos planes de hosting ya incluyen un dominio que podras escoger durante el proceso de compra.
Moviendo los archivos

Como era de suponer el primer paso sera mover todos los archivos de nuestro proyecto desde Xampp
hacia nuestro nuevo servidor web, pero como veras no puedes acceder directamente a un administrador de archivos
como el explorador de windows en el servidor, de manera que tendrás que hacerlo por FTP (File Transfer Protocol) que
es un protocolo de Internet para intercambio de archivos, la forma mas fácil y cómoda de hacerlo es instalando un cliente
de FTP y configurando los datos FTP que te brinda tu proveedor de hosting como IP del servidor nombre de usuario y
contraseña, en este tutorial miraremos la interface de FileZilla que es gratuito y fácil de usar.
FileZilla
Como puedes ver en la imagen, una vez conectados al servidor nos aparecerá la ventana de filezilla dividida en 2, de
lado izquierdo tendremos el explorador de archivos de nuestro PC (Nuestros archivos locales) y del lado derecho
tendremos los archivos del servidor, en la mayoría de proveedores de hosting se utiliza servidor Apache que es el mismo
que usa Xampp, y generalmente los archivos de tu proyecto deberás publicarlos dentro de una carpeta llamada /www
o /public_html son el equivalente a la carpeta /htdocs en tu localhost, después de ubicar y abrir la carpeta en tu servidor
solo deberás publicar los archivos arrastrándolos desde la izquierda a la derecha.
Mover la base de datos
Para mover la base de datos primero debes entrar en el gestor de bases de datos en tu nuevo servidor y crear una base
de datos, tal como lo hiciste en PHPmyAdmin en localhost al iniciar tu proyecto. Luego abres PHPmyAdmin en tu
localhost y abres tu base de datos, en la parte de arriba encontraras una opción que dice “Exportar”.
Exportar DB PHPMyAdmin
Esto te generara un archivo SQL (mibasededatos.sql) que podrás importar en el PHPmyAdmin de tu

servidor después de haber seleccionado la nueva base de datos que acabas de crear., luego de importarlo ya podrás ver
como ahora en el PHPmyAdmin de tu servidor salen tus tablas y los datos dentro de ellas.
Conectar con la nueva base de datos.
Ahora que ya hemos pasado los archivos y la base de datos debemos configurar la conexión que creamos en
Dreamweaver para que apunte a la nueva base de datos, esto lo hacemos modificando el o los archivos que se
encuentren en la carpeta /Connections del servidor web, ten en cuenta que para modificarlos tendrás que descargarlos,
modificarlos y volverlos a subir mediante FTP.
Modificar conexiones
Una vez que abrimos el archivos simplemente editamos los valores de las variables de la conexión como son servidor,
usuarios, password y nombre de la base de datos, sin embargo debes tener una cosa presente, el servidor MySQL
dentro del hosting usualmente se encuentra en ese mismo servidor y no tiene una dependencia externa por lo cual en
la conexión el nombre de servidor no deberás cambiarlo, deberá ser localhost solo a menos que el hosting te brinde un
nombre de servidor diferente. guardas el archivo y reemplazas el archivo de conexión en el servidor y ya esta,
ya deberías estar disfrutando de tu sitio web publicado en Internet.
Si tienes alguna duda especifica o se te presenta algún problema puedes simplemente escribir en el foro para compartir
el conocimiento entre todos y hacer crecer y aprender todos juntos.

Crear Sitio Web Con PHP y MySQL Paso A Paso

Cargado por

Copyright:

Formatos disponibles

Crear Sitio Web Con PHP y MySQL Paso A Paso

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Crear Sitio Web Con PHP y MySQL Paso A Paso

Cargado por

Copyright:

Formatos disponibles

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

by kalvinmanson • 9 Septiembre, 2010

¿Cual es la diferencia entre un sitio web estático y uno dinámico?

¿Que es una base de datos MySQL?

Mas información sobre HTML, PHP y MYSQL

¿Que es un servidor web?

¿Que software necesito para crear sitio web estáticos y dinámicos?

Marco lógico o teórico del proyecto

 Sección de vídeos y cada vídeo tendrá la siguiente información: Nombre

Maqueta básica (borrador)

Mira a tu competencia, directa o platónica.

Software que necesitaremos para comenzar:

Xampp crear sitio web con php mysql 1

1. Ve a la ventana de sitio en el menú superior y selecciona nuevo sitio.

Dreamweaver crear sitio php y mysql 1

Dreamweaver crear sitio php y mysql 2

Dreamweaver crear sitio php y mysql 4

Dreamweaver crear sitio php y mysql 5

Dreamweaver crear sitio php y mysql 6

Dreamweaver crear sitio php y mysql 7

Estructurar base de datos mysql

Estructurar bases de datos mysql

Esto generara un codigo SQL como asi:

`idadministrador` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,

Estructurar base de datos mysql

tabla mysql estructura

Los buenos artistas copian, los grandes artistas roban.

Iconos gratis para web

Consejos importantes antes de continuar:

Ahora pasar el contenido de Fireworks a Dreamweaver.

Archivo PNG Visual Rock

Consejos para hacer mas fácil la exportación de las imágenes:

Listado de etiquetas HTML

Espero que la siguiente gráfica ejemplifique mejor lo que quiero decir.

Con CSS y Sin CSS

Definir propiedades de pagina en dreamweaver

Diagramacion con tablas en Dreamweaver

Insertar tabla Dreamweaver

Propiedades de la tabla Dreamweaver

Crear un menú desplegable en CSS pero sin Javascript

Carrusel jQuery compatible con sexy light-box

Propiedades de campos password

Como crear un login form

Ventana Databases Dreamweaver

Ver base de datos en dreamweaver

Ahora unas aclaraciones importantes:

hasta la próxima amigos. xD

Logueo de usuario con dreamweaver

Al dar clic en aceptar Dreamweaver nos creara el código que se ve así:

Loguear usuarios con dreamweaver codigo

Restringir acceso con Dreamweaver

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

Insertar registros desde PHPMyAdmin

Paginas Administrar noticias 1

Podremos realizar una consulta como la siguiente:

Crear juego de registros DW

Juegos de registros creado

Seleccionar fila de tabla

Ejemplo listar juegos de registro