Curso gratuito de Laravel 10, avanzando en los servidores de apache pasaremos a restaurar uno de los errores de apache como es el mod_rewrite.
Indice del artículo
INTRODUCCION
A medida que vamos avanzando, con el curso, siempre encontraremos nuevos desafíos en la programación y diseño de nuestras web.
A pesar de que puedes ser un autodidacta, o programador avanzado, te encontrarás con problemas tanto en el proyecto como en el servidor a medida que vas creciendo con el.
Pero eso no te debe desmotivar de ninguna manera, si no que al contrario, siempre debes levantar la cabeza y seguir adelante.
Y para ello, sirven estos tutoriales, donde mostramos los errores que van sucediendo en el camino y como puedes enfrentarlos y repararlos, para terminar tus proyectos.
LAYOUTS
Este complemento es simplemente una referencia a la manera de como están distribuidos los elementos y las formas dentro de un diseño, es como una disposición, plan o diseño que usamos en nuestra web.
Siempre que decimos Layout, nos estamos refiriendo a un plano, donde se pueden incorporar, diferentes tipos de códigos para ser mostrados de forma única en nuestra vista.
Por esto el Layout es la plantilla principal o diseño que sirve para encapsular toda la información que será mostrada al cliente que visita la web.
Para este proyecto denominado crud.test, nosotros crearemos dos Layout como motor de plantillas, una para nuestro Frontend y otra para nuestro panel de administración.
Para el frontend la llamaremos layoutfron,blade.php y la segunda para el panel de administración se llamará layoutadmin.blade.php,
Ya creadas, pegamos el código html que trae por defecto bootstrap para ambos layout, tanto el front como el de admin, el cual mas adelante veremos las diferencias.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>COMPONENTES
Ahora tenemos la parte importante, si viste los videos anteriores, te darás cuenta que el navbar, lo habíamos incluido dentro de nuestro home.blade.php.
Lo que haremos a continuación será extraerlo y dejarlo como un componente de nuestro Layout, para así cada vez que ser realice un cambio, este solo sea modificado en el original y afecte a todas las vista.
Entonces crea una carpeta dentro de resources/views que se llame componentes y dentro de esta un archivo llamado navbarfront.blade.php para diferenciarlo del navbar admin que crearemos.
Dentro de navbarfront.blade.php coloca el navbar de bootstrap y le haremos algunos cambios
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>En la primera línea que es la siguiente:
<nav class="navbar navbar-expand-lg bg-body-tertiary">Realiza el siguiente cambio para dejar el navbar estilo dark, por la siguiente:
<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-dark bg-dark">Ya que no en todos los dispositivos esta dando buenos resultados es buenos aplicar las buenas costumbres y trabajar con el código funcional de bootstrap que si funciona.
Y luego lo incorporamos en nuestro layout con @include
ERROR MOD_REWITE
Cuando trabajamos con las url amigables, generalmente los servidores, ya cuentan con el modulo mod_rewrite de apache2 activado y aveces no.
En este caso, apache2 no lo tiene activado y mostramos la solución para lograr que apache permita utilizar estas url amigables activando este modulo.
Habilitamos el modulo desde la terminal, abriendo con CONTROL+ALT+T, luego escribe lo siguiente:
sudo a2enmod rewriteYa agregado el modulo debemos editar el siguiente archivo /etc/apache2/sites-available/crud.conf, que es parte de nuestro dominio.
sudo nano /etc/apache2/sites-available/crud.confUna vez abierto el archivo agrega lo siguiente en el documento:
< Directory "/var/www/crud/public" >
AllowOverride All
< / Directory >En Directory, hacemos referencia a la carpeta public de nuestro proyecto el cual verá el cliente y ahora pasamos a reiniciar nuestro servidor para que todos los cambios hagan eventos:
sudo systemctl restart apache2