jairogarcíarincón

Vistas del front-end


8.48K

Introducción

En este apartado generaremos las vistas del front-end así como el layout correspondiente.

Adicionalmente incluiremos Materialize para generar la interfaz de usuario, ajustando los estilos necesarios a nuestro caso particular, así como jQuery para crear interactividad.


Contenido de ejemplo

Para poder comprobar el funcionamiento del front-end, dado que aún no tenemos panel de administración, necesitamos generar contenido de ejemplo en la base de datos, algo que podemos hacer de forma sencilla desde la consola de mysql mediante el siguiente comando:



Adicionalmente, necesitarás añadir ESTAS 5 IMÁGENES, correspondientes al logo y a las cuatro noticias de demo dentro de la carpeta public/img.


Header

El archivo view/app/partials/header.php incluirá lo siguiente:


  • Etiqueta html (apertura).

  • Etiqueta head con todas las etiquetas y llamadas a estilos necesarias.

  • Etiqueta body (apertura).

  • Etiqueta nav para el menú de navegación y el logo

  • Etiqueta main(apertura).

  • Etiqueta header con título y subtítulo.

  • Etiqueta section(apertura).






Footer

El archivo view/app/partials/footer.php incluirá lo siguiente:


  • Etiqueta section (cierre).

  • Etiqueta main(cierre).

  • Etiqueta body (cierre).

  • Etiqueta footer con información institucional y copyright.

  • Llamadas a scripts necesarias.

  • Etiqueta html (cierre).






Hoja de estilos

Archivo public/css/app.css:




Javascript

Archivo public/js/app.js:




Vista de home



Archivo view/app/index.php:




Vista de noticias



Archivo view/app/noticias.php:




Vista de noticia



Archivo view/app/noticia.php:




Vista de acerca de



Archivo view/app/acerca-de.php:




Con esto estaría terminado el front-end de nuestro CMS y todas las rutas deberían funcionar correctamente.

En los siguientes apartados crearemos el panel de administración o back-end de nuestro CMS para poder realizar modificaciones.


Publicado el 29 de Enero de 2025

bloggestor de contenidosphpmysqlcss3javascriptjqueryajax