Home | Clases | Creación de un CMS desde cero con patrón MVC | Vistas del front-end

Vistas del front-end


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 CINCO 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.
Fecha de publicación: 25/05/2019
Asignaturas: desarrollo web en entorno servidordespliegue de aplicaciones web
Temas: blog gestor de contenidos php mysql css3 javascript jquery ajax
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos