mi lado nerd: noviembre 2018

curso laravel realtime messenger - parte 6 - creando usuarios auth

luego de haber instalado el modulo de auth

debemos ejecutar las migrations, pero antes debemos crear nuestra base de datos y configurar los parametros de conexion en el archivo .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=messenger
DB_USERNAME=root
DB_PASSWORD=

creamos la base de datos

mysql -u root -p

create database messenger

vamos anecesitar tener algunos usuarios de prueba creados inicialmente para poder trabajar.

entonces

vamos a database\seeds\DatabaseSeeder.php
y descomentamos la linea

$this->call(UsersTableSeeder::class);

y ejecutamos la sgt sentencia para crear esa clase seeder

php artisan make:seeder UsersTableSeeder

ahora editamos el archivo creado:

use Illuminate\Database\Seeder;
use App\User;

class UsersTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
User::create([
'name'=>'israel',
'email'=>'israelbazan76@gmail.com',
'password' => bcrypt('123123')
])
}
}

ahora si ya podemos ejecutar las migraciones....pero antes para evitar que nos de este error
pero nos va a salir el siguiente error

Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

para resolver editar app\Providers\AppServiceProvider.php

public function boot()
{
\Illuminate\Support\Facades\Schema::defaultStringLength(191);
}

y finalmente

php artisan migrate --seed

curso laravel realtime messenger - parte 5 - adaptando cabecera navegador a bootstrap-vue

la cabecera de navegacion se encuentra en

resources\views\layouts\app.blade.php

asi que debemos editar ese archivo,

quedandonos

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
<div id="app">
<b-navbar toggleable="md" type="dark" variant="info">

<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

<b-navbar-brand href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</b-navbar-brand>

<b-collapse is-nav id="nav_collapse">


<b-navbar-nav class="ml-auto">

@guest
<b-nav-item href="{{ route('login') }}">Ingreso</b-nav-item>
<b-nav-item href="{{ route('register') }}">Registro</b-nav-item>
@else
<b-nav-item-dropdown right>

<template slot="button-content">
<em>{{ Auth::user()->name }}</em>
</template>
<b-dropdown-item @click="logout">Salir</b-dropdown-item>
</b-nav-item-dropdown>
@endguest

</b-navbar-nav>

</b-collapse>
</b-navbar>

@yield('content')
</div>

donde el link para salir llama a una funcion llamada logout.
que la vamos a definir en

resources\assets\js\app.js

asi:

const app = new Vue({
el: '#app',
methods:{
logout(){
document.getElementById('logout-form').submit();
}
}
});

el cual llamar al evento submit del formulario que hemos sacado afuera del cuerpo principal

curso laravel realtime messenger parte 3 - adaptando login a bootstrap-vue

originalmente tenemos:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">

donde col-md-8 significa que el sistema de grilla de 12 columnas. el cuerpo va a ocupar 8 y va a usarse 2 columnas vacias a ambos lados. para que de esa manera quede centrado.

reemplazar por:
<b-container>
<b-row>
<b-col>
</b-col>
<b-col cols="8">
</b-col>
<b-col>
</b-col>
</b-row>
</b-container>

o mejor por:
<b-container>
<b-row align-h="center">
<b-col cols="8">
...
</b-col>
</b-row>
</b-container>

lo que esta dentro del b-col cols="8"

<div class="panel-heading">Login</div>

//----aqui esta el formulario

</div>

</div>

lo reemplazaremos por el componente b-card

<b-card header="featured"
header-tag="header"
footer="Card Footer"
footer-tag="footer"
title="Title">
<p class="card-text">Header and footers using props.</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>

curso laravel realtime messenger - parte 2 bootstrap-vue

instalamos el scafolding para manejo de usuarios (login y registro)

desde la carpeta del proyecto:

php artisan make:auth

--------------------

instalamos bootstrap-vue

npm i bootstrap-vue

en resources/js/app.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

y en resources/js/bootstrap.js

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Hay que volver a crear en resources la carpeta assets/sass y adentro app.scss en donde pegaremos las gsts lineas:

@import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css";

luego, en webpack.mix.js, debera quedar asi:

mix.js('resources/assets/js/app.js', 'public/js')

.sass('resources/assets/sass/app.scss', 'public/css');

compilamos

php run dev

para probar si realmente ya hemos cargado bootstrap-vue

podemos editar la pagina de login y le pegamos al codigo un bloque que hace referencia a un componente. en este caso al de alert.

resources\views\auth\login.blade.php

<b-alert show>
Por favor, ingresa tus datos
</b-alert>

curso laravel realtime messenger - parte 1 configuraciones iniciales

tenemos que bajarnos las librerias de javascript necesarias, esto lo hacemos con npm
pero antes editamos el archivo donde se manejan estas dependencias

package.json

dejamos unicamente estas:

"devDependencies": {
"axios": "^0.17",
"cross-env": "^5.1",
"laravel-mix": "^1.0",
"vue": "^2.5.7"
}

como hemos sacado las referencias a jquery, bootstrap-sass y lodash
las quitamos tambien del archivo

resources\assets\js\bootstrap.js

y en el archivo

webpack.mix.js

lo dejamos asi:

mix.js('resources/assets/js/app.js', 'public/js');

--le hemos quitado la parte donde trabajaba con la carpeta sass, de hecho tambien podriamos eliminarla del proyecto.
resources\assets\sass

ahora si, compilamos el proyecto:

npm run dev

esto generara en public/js el archivo app.js
como se indicaba en webpack.mix.js

laravel sincronizar proyecto con github

desde la carpeta del proyecto nuevo:

1)
git init

2)

git add -A

3)

git commit -m "initial commit"

4)
ir a la pagina de github

-crear un nuevo repositorio
-copiar la direccion https del repositorio (p.e https://github.com/israelbazan76/messenger.git)

5)
en la consola:

git remote add origin https://github.com/israelbazan76/messenger.git

6)

git push origin master

laravel crear proyecto con composer

si trabajamos con xampp:

1)
abrir una consola e ir hasta la carpeta httdocs,

composer create-project --prefer-dist laravel/laravel nombre_del_proyecto "5.5.*"

2)
- ir a la carpeta del proyecto creado
- renombrar el archivo oculto .env.example por .env:

rename .env.example .env

3) generar la clave de la aplicacion

php artisan key:generate

------------ opcional --------------

crear un virtual host

1) editar el archivo
C:\xampp729\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
ServerName messenger.local
DocumentRoot "C:/xampp729/htdocs/messenger/public"
</VirtualHost>

2)editar el archivo
C:\Windows\System32\drivers\etc\hosts

127.0.0.1 messenger.local

----------------------------------------

ya podemos levantar el servidor apache
y en el navegador acceder a la url:

http://messenger.local:80

mi lado nerd