Documente Academic
Documente Profesional
Documente Cultură
paso a paso
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Comenzare con la tabla de administradores, ya que tendr varios usuarios con niveles
de administrador para que puedan agregar contenido al sitio.
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.
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:
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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).
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
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:
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.
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
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.
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:
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.
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.
Repetir region
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
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:
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.
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.
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.
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.
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.
a=5
Si 2 es mayor que (a) entonces hacer una cosa.
Sino lo es entonces hacer otra cosa.
$a = 5;
if($a == 2) { echo una cosa; }
else{ echo otra cosa; }
Las condicionales IF tienen varios parmetros que puedes usar para hacer
diferentes comprobaciones, aqu te escribo algunos de los mas importantes.
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; }
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; }
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.
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.);
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
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.
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.