Cómo crear un CMS desde Cero con PHP y MySQL

¡Muy buenas a todos! En este artículo os voy a enseñar a cómo podemos hacer un CMS como WordPress totalmente personalizado en PHP y MySQL. Antes de empezar, cuento con que la mayoría de vosotros tenéis unos conocimientos básicos en los siguientes lenguajes:

  • PHP
  • CSS
  • HTML (si ya conocéis Bootstrap mejor).
  • JavaScript (para navegador).
  • MySQL (no es un lenguaje como tal, pero es importante conocer cómo funciona phpMyAdmin y cómo conjurar comandos SQL).

No utilizaremos tampoco aspectos muy avanzados de estos lenguajes, para que veáis que este tipo de proyectos grandes se puede realizar fácilmente. También, antes de empezar me gustaría avisar que yo no soy un experto en ninguno de estos lenguajes, puede que vosotros penséis en algunas ocasiones que es mejor formular otro código en vez del mío, lo que es totalmente aceptable. Por último, avisar que este CMS puede tener problemas de seguridad, pero vuelvo a repetir que este es un proyecto meramente educativo y que si queréis aplicarlo en un proyecto real, deberéis avisar varios aspectos de seguridad.

Podéis dejarme cambios o soluciones a algunos problemas que hayáis encontrado en los comentarios y los solucionaré lo antes posible 🙂

  1. Creación del proyecto y de las plantillas dinámicas
  2. Preparación de la base de datos
  3. Comenzando a dinamizar

Clase 1. Creación del proyecto y de las plantillas

Doy por hecho que sabéis crear un servidor en local con XAMPP o MAMP (aunque también podéis subir vuestro proyecto a un servidor de la red). Si no sabéis cómo hacerlo, aquí os dejo un artículo donde se explica todo perfectamente:

Lo primero que vamos a hacer es crear nuestro y dejarlo preparado para que en la siguiente clase podamos comenzar a utilizar tanto PHP como MySQL. De momento tan sólo vamos a crear lo que yo denomino plantillas dinámicas, que son las páginas que luego se completarán automáticamente cuando añadamos todo el código en PHP en la clase 3. Pero no nos adelantemos, vamos a comenzar dirigiéndonos a la carpeta donde se ejecutará nuestro proyecto en el servidor Apache (normalmente la carpeta htdocs) y borraremos todos los archivos que allí haya. Dentro de aquí, vamos a crear la siguiente estructura:

  • dist: guarda los archivos en css y JavaScript (js) que utilizaremos durante el desarrollo del blog.
  • elements: guarda ciertos elementos o bloques que utilizarán muchas páginas del proyecto y que para poder editarlos con facilidad, los guardamos por separado y luego los añadiremos cuando sean necesarios.
  • admin: aquí irá toda la parte del proyecto relacionado con la parte de administración del blog. Desarrollaremos su estructura más adelante.
  • inc: todos los archivos PHP que añadan funciones a nuestro proyecto (sólo al blog, el admin tendrá su propia carpeta).

Posteriormente añadiremos más carpetas, pero por ahora son suficientes para hacernos una idea del proyecto.

Añadiendo Bootstrap

Añadir Bootstrap a un proyecto es la cosa más fácil del mundo. Dentro de 2 minutos tendremos este punto completado y ya podremos pasar a diseñar tanto el header como el footer. Nos dirigimos a la página de Bootstrap y desde ahí nos dirigimos a la página de descarga. Actualmente, se encuentra en la versión 4.3.1 que es la que voy a utilizar yo, pero podéis utilizar la versión que queráis. Vamos a descargar lo siguiente de la página:

Dentro del archivo comprimido que nos descargaremos encontraremos dos carpetas, una llamada CSS y otra llamada JS. Copiamos el interior de cada una de ellas en la carpeta de /dist/ correspondiente y en los siguientes apartados enlazaremos los archivos con la cabecera de la web.

Añadiendo un archivos para estilos

Dentro de la carpeta /dist/css vamos a crear un archivo llamado style.css. Lo utilizarás para añadir cualquier personalizada que no venga en Bootstrap.

En el apartado siguiente se enlazará con el header de la web.

Diseñando la cabecera y el pie

En primer lugar vamos a diseñar tanto la cabecera como el footer que se mostrará en todas las páginas del blog. Puesto que no es un curso centrado en HTML5, os dejo vía libre para que creéis el vuestro propio o cojáis alguna plantilla de internet. Yo, me he valido del ejemplo «Blog» que se puede encontrar en la web de Bootstrap.

Centrémonos en el header. Una cabecera de cualquier web está formada por por diferentes elementos:

  • Idioma
  • Título de la página
  • Metadatos
  • Links a los archivos de los estilos
  • etc.

Vamos a dirigirnos a la carpeta elements que hemos creado antes y vamos a crear el archivo header.php. Como ya os he dicho antes, en la carpeta elements íbamos a introducir todos los bloques de código que iríamos repitiendo a lo largo de nuestro proyecto. Dentro de este archivo header vamos a introducir el siguiente código:

Como veis, hay una frase entre corchetes. Bien, a esto yo lo llamo BRT (Before the Real Text) y es justamente eso, un texto de ejemplo que posteriormente, en la lección 3 cambiaremos por un valor dinámico con la ayuda de PHP. También, hemos enlazado el archivo CSS de Bootstrap, así como la hoja de estilos que hemos creado antes.

Bien, podríamos dejar esto como está, pero vamos a hacer algo más interesante. Después de este header, hay también un trozo de código que se va a repetir siempre en todas las páginas de nuestro blog: la navbar. Podemos incluirlo aquí y así ahorrarnos más trabajo y más archivos. Como ya he dicho, podéis utilizar el diseño de barra de navegación que más os guste, pero ya que hemos incluido Bootstrap, vamos a utilizar una de las suyas.

Pero antes de escribir el código, tened en cuenta que a partir de ahora el código estará partido, me explico. Un página HTML está compuesta por una cabeza <head> y un cuerpo <body>. La navbar se sitúa dentro del body, por lo que en el archivo header.php abriremos la etiqueta body (<body>), pero no la cerraremos hasta el footer (</body>). A continuación os lo describo de una forma más gráfica:

Así que bueno, vamos a terminar de completar el fichero header.php con la barra de navegación:

De nuevo aquí encontramos otros BRT como en el nombre de las categorías, el nombre del blog o el logotipo del blog. Y ya estaría el header. Nos encargaremos de él más tarde cuando añadamos los elementos de forma dinámica con PHP.

Toca el turno del footer.php (que también guardaremos en la carpeta elements) que lo haremos de una forma mucho más rápida porque ya conocemos la forma en la que funciona este sistema de código por bloques. En el footer añadiremos:

  • La barra con información del copyright
  • Cerraremos todas las etiquetas que hemos abierto en el header
  • Los archivos de JS que nos falten

El código quedaría de la siguiente manera:

Creando el archivo index.php

Hasta ahora habíamos diseñado tanto la cabecera como el pie de la página, pero aun no podíamos visualizar nada porque todavía no teníamos una página completa. El archivo index.php será muy importante porque contendrá la homepage de nuestra web. Esta página de inicio estará formada tanto por un artículo destacado, como por un listado de los últimos artículos subidos.

  • Creamos el fichero index.php en la raíz del proyecto y como ya sabréis, será el archivo que se descargará (en este caso se ejecutará antes en el servidor) cuando accedamos a la ruta de nuestra web.

Pero no nos adelantemos. Como hemos dicho antes, nuestra web se va a componer por bloques, entre ellos el header y el footer, y será en el fichero index.php donde los llamaremos para que aparezca la web al completo.

  • Estas llamadas las haremos a través de la función include() que incorpora PHP. Veamos cómo lo hacemos:

Como veis, ya hemos incluido la cabecera y el pie de nuestra página. Entre medias, podremos introducir todo lo que queramos sin necesidad de preocuparnos más por estos dos bloques. Yo en este caso voy a hacer uso del ejemplo de Bootstrap y voy a usar su plantilla «Blog». El código quedaría algo tal que así:

De nuevo, más BRT que completaremos en la clase 3 con la inclusión de PHP en nuestro código. Por todo lo demás ya estaría. Podemos ejecutar nuestro proyecto en un servidor Apache como XAMPP y comprobar que funciona correctamente. Si tenéis algún problema, tenéis esta clase subida al GitHub del proyecto.

2. Preparación de la base de datos

Bien toca ya comenzar a dinamizar un poco nuestros archivos, pero para eso necesitamos una base de datos que recaude todos los datos sobre posts, categorías, usuarios o información sobre el propio post.

La base de datos la haremos con MySQL, que es lo que ya nos ofrece XAMPP y es de lo más sencillo de configurar con php. Lo primero que haremos es acceder a phpMyAdmin desde donde crearemos la base de datos y las tablas necesarias. Si habéis optado finalmente por el servidor Apache de XAMPP, podréis encontrar phpMyAdmin situándonos en la raiz de nuestro proyecto en un navegador y acceder a /phpmyadmin. Por ejemplo, si vuestro servidor apache está en localhost, accederemos así: localhost/phpmyadmin. Una vez dentro nos debería aparecer algo tal que así:

Bien, nos vamos a dirigir a la barra de herramientas y entramos en la opción Bases de Datos, en primera posición. Una vez aquí veremos que tenemos un listado con todas las bases de datos que se encuentran creadas. Vamos a crear una nueva base de datos con el input que tenemos disponible para ello. Le podéis dar el nombre que queráis, si queréis seguir mis pasos, yo la he llamado blog:

Genial, ya tenemos la base de datos creada, ahora toca el momento de pensar que tablas crearemos y qué columnas tendrán cada una de ellas. Junto a cada tabla, os voy a dejar un script en SQL para que lo podáis ejecutar vosotros dentro de la base de datos. Para poder ejecutar tenéis que seguir los siguientes pasos:

Necesitamos las siguientes tablas con los siguientes atributos…

POST

  • id: identificador único del post
  • título: título de la entrada
  • contenido: contenido del artículo
  • categoria: id de la categoría a la que pertenece
  • fecha: fecha de publicación
  • slug: lo utilizaremos para el enlace
  • imagen_destacada: ruta de la imagen destacada (la guardaremos en una carpeta)
  • usuario: identificador del usuario que escribe el post

CATEGORÍA

  • id: identificador único de la categoría
  • nombre: nombre de la categoría
  • slug: lo utilizaremos para el enlace de la categoría

INFORMACIÓN

  • clave: factor que vamos a definir (nombre del blog, ruta del logo)
  • valor: definición del factor (My nuevo Blog, blog.com/fotos/logo.png)

USUARIO

  • id: identificador único del usuario
  • nombre: nombre del usuario
  • email: email del usuario
  • pass: contraseña para acceder al área privada (si puede acceder)
  • categoria: administrador, redactor o suscriptor

Y hasta aquí la creación de la base de datos. Si os preguntáis para que sirve AUTO_INCREMENT, el cual hemos utilizado en todos los identificadores, es para que vaya creciendo el valor automáticamente en 1, por lo que cada una de las tuplas tendrán un identificador diferente.

Perfecto, ya tenemos creadas todas las tablas que necesitaremos, ahora vamos a añadir algunos datos para tenerlas preparadas para su uso. Podéis ejecutar el siguiente script para tener los mismos datos que yo:

Perfecto, ya tenemos todo preparado para dinamizar todo lo que llevamos de proyecto. En la siguiente clase veremos cómo.

3. Comenzando a dinamizar

¡Vaya! Veo que vas demasiado deprisa. El curso se encuentra en desarrollo, por favor, vuelve en unos días para seguir.

 

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *