Usuario:ManuelRomero/Laravel/ListaDinamica

De WikiEducator
Saltar a: navegación, buscar

Acciones concretas

Creamos un proyecto en laravel
laravel new ListadoDinamico
Creamos un modelo con controlador resource, migración, seeder
cd ListadoDinamico
php artisan make:model Empleado --all
Especificamos en los ficheros concretos
  • 1.-En migratison los campos de la tabla
  public function up()
    {
        Schema::create('empleados', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->string("nombre");
            $table->string("apellido");
            $table->string("direccion");
        });
    }
  • 2.-En el factory una población de datos
 public function definition()
    {
        return [
            "nombre"=>$this->faker->firstName(),
            "apellido"=>$this->faker->name(),
            "direccon"=>$this->faker->address(),
        ];
    }
  • 3.- En Seeder invocamos la ejecución del factory, por ejemplo 50 registros
  1. En DatabaseSeeder.php
public function run()
    {
        // \App\Models\User::factory(10)->create();
        $this->call(EmpleadoSeeder::class);
 
    }
  1. En EmpleadoSeeder.php
 

public function run()

   {
       Empleado::factory()
           ->count(50)
           ->create();
       //
   }

</source>

  • 4.-Modificamos el fichero .env para establecer conexión con la base de datos
B_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=EmpleadosListadoDinamico
DB_USERNAME=root
DB_PASSWORD=root
  • 5.- Creamos la base de datos en localhost llamada 'EmpleadosListadoDinamico'
  • 6.- Ejecutamos la migración
  • 7.-Comprobamos que la base de datos existe en nuestro gestor y está poblada
  • 8.-Creamos el diseño de nuestra pantalla
  • 9.-Creamos el layout y la página html usando blade
  • 10.- Implementamos el controlador el método index para retornar todos los empleados
  • 11.- Ahora creamos el componente vue para visusalizar todos los empleados en una tabla dinámica (un tipo de datatables, pero creado por nosotros en vue
  • 12 .-Añadimos Botones de Add nuevo usuario , y para cada usuario un edit, un show un un delete
  • 13 .- Componentes vue para su realización (pendiente de organizar esta parte)