Creando una aplicación web con PHP (Parte 1)

Hola a todos!, aquí estoy de nuevo aprovechando un tiempesito libre para venir a postear algo. Días pasados comencé con la instalacion de PHP y MySQL entre otras herramientas, ahora empezaremos con lo mas básico de PHP orientado a objetos. Tengo pensado ir haciendo un mini proyecto (mas bien se me acaba de ocurrir), que iremos viendo en los posts que valla haciendo en PHP hasta ya terminar lo que se nos valla ocurriendo.

A grandes rasgos sera un Blog de noticias, donde hay diferentes tipos de usuarios y tienen que iniciar sesion, la pagina tendra seguridad, privilegios,acceso a bases de datos, cookies, y demas cosas que se me iran ocurriendo al armar el sitio web.

La manera mas útil que he encontrado al programar una aplicación web en PHP y MySQL y como lo he visto en diversos ejemplos es creando una clase que contiene toda la configuración de nuestro sitio web, tengo pocos meses programando en PHP y son bienvenidas todas las sugerencias de practicas de programación que ustedes sepan.

Primero que nada iniciaremos XAMPP de la manera que lo hicimos en el post pasado, abrimos consola y escribimos sudo /opt/lampp/lampp start y se iniciaran todos los servicios. Procedemos abriendo netbeans 7( o el que tengan) y Mysql WorkBench 5.2 (si usamos workbench, que sea la version mas nueva).

Y ahora si listos para trabajar jaja.

En este post lo que vamos a hacer es implementar un template que busquemos en internet y organizar todo nuestro proyecto en netbeans.

1.- Bajar el template y agregarlo al proyecto en netbeans

Para comenzar vamos bajando este template, de los primeros que vi, por mientras utilizaremos este ya que emplearemos algunas tecnicas usadas a veces en PHP para crear “Plantillas”, muy conocidas en .NET como master pages, asi que por lo pronto les pido que usen el mismo template, podemos bajarlo de aqui

Tendremos una carpeta de images, la hoja de estilos .css y un archivo .html

Ahora creamos un nuevo proyecto de php en netbeans, yo lo llame BaluSoft, este sera el nombre en el que se accedera en el navegador, ponganle el nombre que deseen. Netbeans por defecto nos pondra el proyecto asi:

Copiamos los archivos de la foto anterior del template que han bajado. Creamos una carpeta llamada css y ahi metemos el archivo .css y la carpeta llamada images, si nos dimos cuenta es un archivo .html el que copiamos, y ya tenemos un index.php que se nos creo, pues simplemente copiamos todo el contenido del .html en el de .php y posteriormente borramos el .html, ya para tener nuestra pagina inicial en php.

Una vez hecho esto podemos correr nuestro sitio con http://localhost/BaluSoft (si ustedes pusieron otro nombre al proyecto, ponganlo en vez de balusoft).

Pero si se dan cuenta, nuestro index se ve demaciado feo D:

Esto es por que los enlaces a los estilos de paginas ya no son los mismos, si recuerdan creamos una carpeta css y ahi metimos todos los archivos y fotos de los estilos css, asi que debemos modificar nuestra pagina y solo agregamos en la ruta la carpeta que agregamos llamada “css”.

Tambien hacemos lo mismo en las etiquetas “img” la ruta original era images/ ahora sera css/images/, para que tambien se vean las imagenes que ya traia el mismo template.
En fin nuestra pagina index.php ya se debe de ver asi:

Por el momento nuestro proyecto se ve asi:

2.- Introduccion a los includes y requires para crear una “plantilla web”

Si apenas estas empezando con php veremos entonces los conceptos de estas dos cosas, includes y requires. En Php es muy comun utilizar codigo php o html que se encuentra en otros archivos .php, entonces include y require son funciones que nos incluyen literalmente el codigo que le especificamos por parametro, pero ¿que diferencia hay entre los dos?, la diferencia esta en:
include:Cuando utilizamos includes, se introduce el codigo del archivo que especificamos por parametro y si ocurre un error al intentar incluir ese codigo en donde lo mandamos a llamar( por ejemplo que en ese archivo se accede a una base de datos, o simplemente la ruta no se encontro), si llega a pasar un error de estos la ejecucion en lado del servidor sigue, o sea no se interrumpe el flujo de la pagina apesar del error que hubo, en cambio con require si se detiene la ejecución de nuestra pagina (del lado del servidor) si existio algun error.

Si nunca han usado estas funciones, talvez por el momento no les queda muy claro, pero lo que vamos a hacer es una plantilla, para que al crear diferentes paginas de nuestro sitio web, en vez de copiar y pegar codigo HTML de la pagina que ya tenemos, usaremos puros require en donde va a ir el codigo HTML que es compartido por todas las paginas del sitio. OK vamos a la accion… XD

Primero que nada la estructura de nuestro proyecto sera la siguiente:
La pagina web la dividiremos en 4 partes, el header( toda la parte de arriba), sidebar, contenido y el footer (pie de pagina).

como ven, creamos una carpeta llamada “includes”, en esta carpeta creamos 3 archivos .php (clic derecho a la carpeta includes, y creamos un “php file”). Por ahora estos archivos no tienen nada, lo que vamos a hacer aqui, es agregar codigo HTML de nuestro template que bajamos (index.php), y esos archivos tendran codigo HTML que sera compartido por todas las demas paginas que vamos a crear, ahora en vez de tener que copiar y pegar todo el codigo HTML y modificarlo al gusto, solo utilizaremos requires de los archivos que acabamos de crear, ademas de que queda mas organizado todo (porque estas partes las podemos hacer dinamicas) ya solo tendremos que crear la parte del “contenido” de la pagina.

header.php
Trabajemos primero con el header.php, si identificamos en nuestro archivo index.php, todo lo que sera header para nosotros sera lo siguiente:

Entonces vamonos al archivo index.php y vamos a cortar (si a cortar no copiar) el codigo HTML que corresponde a esa parte y la pegamos tal cual en el archivo header.php:

Entonces todo el codigo seleccionado lo cortamos, o sea lo copiamos y lo borramos, y lo pegamos en el archivo header.php, y pues como ven la pagina index.php esta ahora incompleta, pero para eso vamos a usar nosotros el require, para incluir el archivo header.php en la parte que corresponde.

Entonces como ya tenemos el archivo header.php con el codigo HTML que corresponde, en la parte (en index.php) donde borramos ese codigo, lo incluimos de la siguiente manera:

Tambien para simplificar y sea mejor nuestra plantilla, copiaremos tambien estas etiquetas al archivo header.php (si se fijan son las que le siguen al codigo, por lo tanto iran al final del archivo header.php)

Entonces las lineas seleccionadas las haremos parte del require de arriba, para asi ya no tener que tener que escribir eso, simplemente con el require
sidebar.php
Por lo tanto, si ya le agarramos masomenos a lo que estamos haciendo, hacemos lo mismo con sidebar.php, el codigo HTML que corresponde a esta parte es todo la barra que esta a la derecha:

codigo

Aqui es facil identificar el codigo, ya que el id del div mismo lo dice, hacemos lo mismo, copiamos (mas bien cortamos para que se borre de una vez) todo ese div y lo pegamos en el archivo sidebar.php que creamos anteriormente, igualmente en esa parte que borramos, hacemos un require del archivo que ya contiene todo ese codigo HTML que se compartira por muchas paginas mas.

Tambien agregaremos al archivo sidebar.php las siguientes etiquetas que le siguen, ya para tambien simplificar mas nuestra plantilla

Entonces de nuevo, las lineas seleccionadas las copiamos y borramos, y lo pegamos en el sidebar.php
footer.php

Lo mismo hacemos con la parte del codigo del pie de pagina que es este:

si notan tambien agregamos etiquetas que no son exactamente del footer en la pagina, pero en nuestro codigo si es el footeR( o sea lo ultimo )
y dejamos ya el require correspondiente en el codigo que quitamos en index.php:

Para finalizar con este post nuestra pagina index.php quedo de la siguiente manera:

Si queremos crear otras paginas .php solo tenemos que incluir los require y todas las etiquetas que estan en medio (todo lo del div “content”), eso es lo que cambiara en otras paginas, si queremos cambiar el sidebar, el header o lo que sea, solo tenemos que modificar los archivos correspondientes, y estos cambios se haran en todas las paginas que utilizen esos includes ( que seran todas) asi no tendremos que modificarlas uno por uno, si no simplemente ese archivo y el cambio sera para todas las paginas.

Esto es todo por ahora, mañana veremos lo que realmente importa en PHP, esto es solo para aprender pequeños trucos en PHP.

Les dejo un .zip del proyecto en netbeans con el codigo fuente.

Saludos!

Anuncios

4 comentarios sobre “Creando una aplicación web con PHP (Parte 1)

  1. Hola que tal Isaac, muy bueno para quienes están comenzando con la programación para la web, a mi me sirvió mucho, un saludo y mil gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s