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:
Ver ejemplo de código
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).
Ver ejemplo de código
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).
Ver ejemplo de código
Hoja de estilos
Archivo
public/css/app.css:
Ver ejemplo de código
Javascript
Archivo
public/js/app.js:
Ver ejemplo de código
Vista de home
Archivo
view/app/index.php:
Ver ejemplo de código
Vista de noticias
Archivo
view/app/noticias.php:
Ver ejemplo de código
Vista de noticia
Archivo
view/app/noticia.php:
Ver ejemplo de código
Vista de acerca de
Archivo
view/app/acerca-de.php:
Ver ejemplo de código
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.
