Parte 6: Laravel 7, XAMPP | Fedora 32

Sin comentarios

Inicio

En el post anterior https://blog.linuxitos.com/parte-5-laravel-7-xamp-pagination-fedora-32 expliqué parte de lo que es la paginación, y en esta parte, crearemos las funciones para el perfil del usuario:

  • Crear controllador UsersController
  • Crear Modelo Users
  • Crear vista profile
  • Crear funciones para actualizar contraseña, actualizar información de usuario, subir imagen de usuario

El proyecto completo lo pueden descargar de: https://github.com/jesusferm/laravel-crud-four

Crear UsersController

Primero crear el conrolador:

php artisan make:controller UsersController --resource

Y dentro de archivo colocaremos la lógica de programación

Crear modelo Users

Crear el modelo con la siguiente instrucción:

php artisan make:model Users

Ir a phpmyadmin y crear dos campos a la tabla users

  • files : tipo varchar de 120
  • image : vargar 120

Crear vista profile

La vista se llamará profile y contendrá lo siguiente:

@extends('layouts.app')
@section('content')
@section('title', 'Perfil')
<script>
	var base_url = "{{url('/')}}";
</script>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="{{url('/')}}"><i class="fa fa-home"></i> Inicio</a>
					</li>
					<li class="breadcrumb-item active" aria-current="page">Perfil de usuario</li>
				</ol>
			</nav>
		</div>
	</div>
	<div class="row justify-content-center">
		<div class="col-md-12">
			<ul class="nav nav-tabs" id="myTab" role="tablist">
				<li class="nav-item" role="presentation">
					<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
						<i class="fa fa-info-circle"></i> Perfil
					</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
						<i class="fa fa-lock"></i> Seguridad
					</a>
				</li>
			</ul>
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
					<div class="row mt-3">
						<div class="col-md-3">
							<div class="row">
								<div id="div-img" class="col-md-12 mb-2"></div>
							</div>
							<form name="form-up-imgs-all" id="form-up-imgs-all" method="post" accept-charset="utf-8" enctype="multipart/form-data">
								@csrf
								<div class="form-row">
									<div class="col-md-9">
										<div class="custom-file">
											<input type="file" class="custom-file-input" id="files-all" name="images[]" required="required" accept=".png, .jpg, .jpeg">
											<label class="custom-file-label" for="files-all" data-browse="Elegir">
												Seleccionar archivos...
											</label>
										</div>
									</div>
									<div class="col-md-3">
										<button type="submit" id="btn-up-imgs-all" class="btn btn-success btn-block">
											<svg class="bi bi-cloud-upload" width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
												<path d="M4.887 6.2l-.964-.165A2.5 2.5 0 1 0 3.5 11H6v1H3.5a3.5 3.5 0 1 1 .59-6.95 5.002 5.002 0 1 1 9.804 1.98A2.501 2.501 0 0 1 13.5 12H10v-1h3.5a1.5 1.5 0 0 0 .237-2.981L12.7 7.854l.216-1.028a4 4 0 1 0-7.843-1.587l-.185.96z"/>
												<path fill-rule="evenodd" d="M5 8.854a.5.5 0 0 0 .707 0L8 6.56l2.293 2.293A.5.5 0 1 0 11 8.146L8.354 5.5a.5.5 0 0 0-.708 0L5 8.146a.5.5 0 0 0 0 .708z"/>
												<path fill-rule="evenodd" d="M8 6a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0v-8A.5.5 0 0 1 8 6z"/>
											</svg>
										</button>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12 mt-1">
										<div class="progress">
											<div id="prg-bar-up-all" class="progress-bar bg-defult" role="progressbar" style="width:100%;">0%</div>
										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="col-md-9">
							<form id="form-up-account" name="form-up-account" action="" method="POST" action="">
								@csrf
								<div class="form-row">
									<div class="col-md-4">
										<div class="form-group input-group">
											<span class="has-float-label">
												<input type="email" class="form-control" name="email" id="txt-email" placeholder="Nombre" required="required" value="{{$profile->email}}" autocomplete="off" readonly="">
												<label for="txt-email">Email</label>
											</span>
										</div>
									</div>
									<div class="col-md-8">
										<div class="form-group input-group">
											<span class="has-float-label">
												<input type="text" class="form-control" name="name" id="txt-name" placeholder="Nombre" required="required" value="{{$profile->name}}" autocomplete="off">
												<label for="txt-name">Nombre</label>
											</span>
										</div>
									</div>
									<div class="col-md-12">
										<button id="btn-up-account" name="btn-up-account" type="submit" class="btn btn-primary float-right">
											<svg class="bi bi-check2" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
												<path fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
											</svg> Actualizar
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
					<form id="form-up-passwd" name="form-up-passwd" action="" method="POST">
						@csrf
						<div class="form-row mt-3">
							<div class="col-md-3">
								<div class="form-group input-group">
									<span class="has-float-label">
										<input type="password" class="form-control" name="current" id="txt-curret" placeholder="Nombre" required="required" autocomplete="off">
										<label for="txt-curret">Contraseña Actual</label>
									</span>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-group input-group">
									<span class="has-float-label">
										<input type="password" class="form-control" name="password" id="txt-passwd" placeholder="Nombre" required="required" autocomplete="off" minlength="8">
										<label for="txt-passwd">Nueva Contraeña</label>
									</span>
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group input-group">
									<span class="has-float-label">
										<input type="password" class="form-control" name="confirmed" id="txt-passwd-cofirm" placeholder="Nombre" required="required" autocomplete="off" minlength="8">
										<label for="txt-passwd-cofirm">Confirmar Contraeña</label>
									</span>
								</div>
							</div>
							<div class="col-md-2">
								<button id="btn-up-passwd" name="btn-up-passwd" type="submit" class="btn btn-primary float-right btn-block">
									<svg class="bi bi-check2" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
									</svg> Actualizar
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="{{asset('js/ajxtodoapp.js')}}" defer></script>
<script type="text/javascript">
	$(document).ready(function() {
		loadImg();
		matchPasswd('txt-passwd', 'txt-passwd-cofirm');
	});
</script>
@endsection

Interfaz final

En los routes se agrega lo siguiente:

/**
 * para el control y modificación de información de usuario*/
Route::group(['middleware' => 'auth'], function () {
	Route::resource('/account', 'UsersController');

	Route::post('/accountupdate', 'UsersController@upProfile');
	Route::post('/upimage', 'UsersController@upImage');
	Route::post('/loadimage', 'UsersController@loadImage');
	Route::post('/uppassword', 'UsersController@upPassword');
});

Y eso sería todo en éstos posts:

Recomendaciones

Nada en programación es establecido de manera tajante, es decir, que ésto es solo una idea de cómo hacer las cosas, algunas cambian, otras no, algunas son simples otras no. Cada uno puede hacerlo de la manera más conveniente posible, recordar que éstos son ejemplos básicos, se puede tomar el código y mejorarlo, están en todo su derecho hacerlo.

-- x

Comentarios:

Redes sociales
Accesos directos