Como Crear un Sistema de Notificaciones (Frontend) con Laravel 8 y MySQL – Parte 4

6 minuto(s)

En esta página:

En la anterior parte llamada Como Crear un Sistema de Notificaciones (Frontend) con Laravel 8 y MySQL – Parte 3, creamos el archivo que gestiona las notificaciones y las envía a la base de datos, asimismo creamos una ruta que apuntaba a un controlador e hicimos pruebas para verificar que se están insertando notificaciones en la tabla notifications de la base de datos, en esta Parte 4 vamos a crear las vistas de administración para los jugos y postres, vamos con ello.

Partes

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Como Mantenerte Motivado Para Seguir Programando”:

Spotify:	Sound Cloud:	Apple Podcasts

Bien ahora continuemos con el Post: Como Crear un Sistema de Notificaciones (Frontend) con Laravel 8 y MySQL – Parte 4.

Para las vistas del sistema usaré Bootstrap 4.6, tanto para las vista de administrador, como para las vistas públicas.

Para usar Bootstrap en Laravel debes seguir los pasos que dicen en su documentación oficial, hasta la fecha de este Post la documentación de la versión 7 me ha servido. No quiero entrar en detalles sobre como usar Bootstrap en Laravel, para eso he colocado el enlace con los pasos a seguir, si tienes alguna duda puedes dejar un comentario y te estaremos ayudando.

Si tienes problemas compilando tu archivo CSS con SASS Loader, puedes revisar la respuesta de este enlace en Stack Overflow.

Desarrollando el módulo Administrador

Luego de instalar correctamente Bootstrap en Laravel podemos comenzar a crear nuestras vistas, para hacer esto más ágil, voy a usar esta plantilla de administración de ejemplo que Bootstrap me brinda. Simplemente inspecciono el código fuente y lo copio y pego distribuyéndolo de manera correcta en el archivo home.blade.php y en el archivo de layout app.blade.php, estos archivos se encuentra en resources > views


/sistema-notificaciones-eventos-mysql-bd
├── /app
├── /bootstrap
├── /config
├── /database 
├── /public
├── /resources
    ├── /css
    ├── /js
    ├── /lang
    ├── /sass
    ├── /views
        ├── /auth
        ├── /layouts
            ├── app.blade.php // Este Archivo
        ├── home.blade.php // Este Archivo
        ├── welcome.blade.php 
├── /routes
├── /storage
├── /tests
├── /vendor
├──  .editorconfig
├──  .env 
├──  .env.example
├──  .styleci.yml
├──  artisan
├──  composer.json
├──  composer.lock
├──  package.json
├──  phpunit.xml
├──  server.php
├──  webpack.mix.js

/sistema-notificaciones-eventos-mysql-bd

├── /app

├── /bootstrap

├── /config

├── /database

├── /public

├── /resources

├── /css

├── /js

├── /lang

├── /sass

├── /views

├── /auth

├── /layouts

├── app.blade.php // Este Archivo

├── home.blade.php // Este Archivo

├── welcome.blade.php

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .styleci.yml

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── server.php

├── webpack.mix.js

Abro el archivo home.blade.php y dentro de el colocaré la vista principal o dashboard que es como una vista principal de todas las tareas que se hacen en el proyecto, pero este modulo no lo trabajaremos, solo nos enfocaremos en desarrollar los módulos necesarios para que el sistema de notificaciones funcione sin problemas.


<!-- Archivo 'home.blade.php' -->  

@extends('layouts.app')

@section('content')
<div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="sidebar-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">
              <span data-feather="home"></span>
              Dashboard <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="menu"></span>
              Jugos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="grid"></span>
              Postres
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="users"></span>
              Customers
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="bar-chart-2"></span>
              Reports
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="layers"></span>
              Integrations
            </a>
          </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
          <span>Saved reports</span>
          <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
            <span data-feather="plus-circle"></span>
          </a>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text"></span>
              Current month
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text"></span>
              Last quarter
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text"></span>
              Social engagement
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text"></span>
              Year-end sale
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
            <span data-feather="calendar"></span>
            This week
          </button>
        </div>
      </div>

      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>

      <h2>Section title</h2>
      <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th>#</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1,001</td>
              <td>random</td>
              <td>data</td>
              <td>placeholder</td>
              <td>text</td>
            </tr>
            <tr>
              <td>1,002</td>
              <td>placeholder</td>
              <td>irrelevant</td>
              <td>visual</td>
              <td>layout</td>
            </tr>
            <tr>
              <td>1,003</td>
              <td>data</td>
              <td>rich</td>
              <td>dashboard</td>
              <td>tabular</td>
            </tr>
            <tr>
              <td>1,003</td>
              <td>information</td>
              <td>placeholder</td>
              <td>illustrative</td>
              <td>data</td>
            </tr>
            <tr>
              <td>1,004</td>
              <td>text</td>
              <td>random</td>
              <td>layout</td>
              <td>dashboard</td>
            </tr>
            <tr>
              <td>1,005</td>
              <td>dashboard</td>
              <td>irrelevant</td>
              <td>text</td>
              <td>placeholder</td>
            </tr>
            <tr>
              <td>1,006</td>
              <td>dashboard</td>
              <td>illustrative</td>
              <td>rich</td>
              <td>data</td>
            </tr>
            <tr>
              <td>1,007</td>
              <td>placeholder</td>
              <td>tabular</td>
              <td>information</td>
              <td>irrelevant</td>
            </tr>
            <tr>
              <td>1,008</td>
              <td>random</td>
              <td>data</td>
              <td>placeholder</td>
              <td>text</td>
            </tr>
            <tr>
              <td>1,009</td>
              <td>placeholder</td>
              <td>irrelevant</td>
              <td>visual</td>
              <td>layout</td>
            </tr>
            <tr>
              <td>1,010</td>
              <td>data</td>
              <td>rich</td>
              <td>dashboard</td>
              <td>tabular</td>
            </tr>
            <tr>
              <td>1,011</td>
              <td>information</td>
              <td>placeholder</td>
              <td>illustrative</td>
              <td>data</td>
            </tr>
            <tr>
              <td>1,012</td>
              <td>text</td>
              <td>placeholder</td>
              <td>layout</td>
              <td>dashboard</td>
            </tr>
            <tr>
              <td>1,013</td>
              <td>dashboard</td>
              <td>irrelevant</td>
              <td>text</td>
              <td>visual</td>
            </tr>
            <tr>
              <td>1,014</td>
              <td>dashboard</td>
              <td>illustrative</td>
              <td>rich</td>
              <td>data</td>
            </tr>
            <tr>
              <td>1,015</td>
              <td>random</td>
              <td>tabular</td>
              <td>information</td>
              <td>text</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
@endsection

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

@extends('layouts.app')

@section('content')

Dashboard <span class="sr-only">(current)</span>

</a>

</li>

Jugos

</a>

</li>

Postres

</a>

</li>

Customers

</a>

</li>

Reports

</a>

</li>

Integrations

</a>

</li>

</ul>

<span>Saved reports</span>

</a>

</h6>

Current month

</a>

</li>

Last quarter

</a>

</li>

Social engagement

</a>

</li>

Year-end sale

</a>

</li>

</ul>

</div>

</nav>

<h1 class="h2">Dashboard</h1>

<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>

<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>

</div>

This week

</button>

</div>

<h2>Section title</h2>

<thead>

<tr>

<th>Header</th>

</tr>

</thead>

<tbody>

<tr>

<td>random</td>

<td>placeholder</td>

</tr>

<tr>

<td>placeholder</td>

<td>irrelevant</td>

<td>visual</td>

<td>layout</td>

</tr>

<tr>

<td>dashboard</td>

<td>tabular</td>

</tr>

<tr>

<td>information</td>

<td>placeholder</td>

<td>illustrative</td>

</tr>

<tr>

<td>random</td>

<td>layout</td>

<td>dashboard</td>

</tr>

<tr>

<td>dashboard</td>

<td>irrelevant</td>

<td>placeholder</td>

</tr>

<tr>

<td>dashboard</td>

<td>illustrative</td>

</tr>

<tr>

<td>placeholder</td>

<td>tabular</td>

<td>information</td>

<td>irrelevant</td>

</tr>

<tr>

<td>random</td>

<td>placeholder</td>

</tr>

<tr>

<td>placeholder</td>

<td>irrelevant</td>

<td>visual</td>

<td>layout</td>

</tr>

<tr>

<td>dashboard</td>

<td>tabular</td>

</tr>

<tr>

<td>information</td>

<td>placeholder</td>

<td>illustrative</td>

</tr>

<tr>

<td>placeholder</td>

<td>layout</td>

<td>dashboard</td>

</tr>

<tr>

<td>dashboard</td>

<td>irrelevant</td>

<td>visual</td>

</tr>

<tr>

<td>dashboard</td>

<td>illustrative</td>

</tr>

<tr>

<td>random</td>

<td>tabular</td>

<td>information</td>

</tr>

</tbody>

</table>

</div>

</main>

</div>

@endsection

Luego abro el archivo de layout app.blade.php y dentro de el colocaremos los elementos que se repetirán en las páginas que sean necesarias, como el header y el footer.


<!-- Archivo 'app.blade.php' -->
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- CSRF Token -->
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<title>{{ config('app.name', 'Laravel') }}</title>
	<!-- Scripts -->
	<script src="{{ asset('js/app.js') }}" defer></script>
	<script src="{{ asset('js/dashboard.js') }}" defer></script>
	<script src="{{ asset('js/bootstrap.bundle.min.js') }}" defer></script>
	<!-- Fonts -->
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	<!-- Styles -->
	<link href="{{ asset('css/app.css') }}" rel="stylesheet">
	<link href="{{ asset('css/dashboard.css') }}" rel="stylesheet">
	<link href="{{ asset('css/estilos.css') }}" rel="stylesheet">
	<style>
	.bd-placeholder-img {
		font-size: 1.125rem;
		text-anchor: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	@media (min-width: 768px) {
		.bd-placeholder-img-lg {
			font-size: 3.5rem;
		}
	}
	</style>
</head>

<body>
	<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">My App</a>
		<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
		<ul class="navbar-nav px-3">
			<li class="nav-item text-nowrap"> <a class="nav-link logout" href="{{ route('logout') }}" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>
				<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none"> @csrf </form>
			</li>
		</ul>
	</nav>
	<div class="container-fluid"> @yield('content') </div>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</body>

</html>

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

<style>

.bd-placeholder-img {

font-size: 1.125rem;

text-anchor: middle;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

@media (min-width: 768px) {

.bd-placeholder-img-lg {

font-size: 3.5rem;

}

</style>

</head>

<body>

<li class="nav-item text-nowrap"> <a class="nav-link logout" href="{{ route('logout') }}" onclick="event.preventDefault();

document.getElementById('logout-form').submit();">

</a>

</li>

</ul>

</nav>

<div class="container-fluid"> @yield('content') </div>

</body>

</html>

Puedes ver que ambos archivos hay elementos como @extends, @ section, @yield, etc. estos elementos se agregaron cuando hice la instalación de Bootstrap en Laravel, los pasos para instalar Bootstrap los he compartido al inicio de esta Parte 4.

El archivo home.blade.php es una vista administrativa y para entrar a ella necesito iniciar sesión con un usuario y contraseña. Más delante crearemos las migraciones y la tabla para los usuarios, estamos en la creación de la vista de administración.

Pero la vista del archivo home.blade.php se debe de ver así, puedes ver al lado izquierdo que he colocado 2 enlaces para ingresar al módulo jugos y al módulo postres.

Bien hasta aquí llegamos con este Post, en donde creamos las primeras vista de la administración, en el administrador gestionaremos los jugos y postres.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En la siguiente parte vamos a continuar con la creación de las vistas de administración para los jugos y postres.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.