Inicio en el plugin chosen

Realizando un curso online de laravel me he encontrado con un plugin realmente muy útil, es para los select, yo lo instalé en 10 minutos, en mi proyecto.

Solo tienes que descargar en la página el .zip, descomprimirlo, e instalar la carpeta en tu proyecto.

En laravel tienes que hacer un par de pasos, que os indico, ya que cuando escribes el script no se coloca donde debería, que es al final, solo en laravel, en otros framework y lenguajes puede ser diferente. Supongo que con otros framework de php y en otros lenguajes se instalara igual que cualquier .js que este basado en jquery (despues del script de jquery). Aquí os indico los pasos a seguir en laravel:

1-Instalar el chosen.css en el head.
2-Instalar el chosen.jquery.js después del jquery.
3-Crear un campo @yield en la vista principal, por ejemplo yo lo llame @yield('js').
4-Crear un campo @section en la vista de tu select.

Lo demás es como dice la documentación, es muy fácil, simplemente llama a una clase del select que sea única, y encadenar .chosen al selector jquery. Os dejo un ejemplo y la página del plugin, el cual se  llama chosen.

Ej:

$(".single-chosen").chosen();

La página es la del enlace de abajo, ahí encontrarás la documentación, también se pueden seleccionar diversas opciones que tu mismo verás en la documentación.

https://harvesthq.github.io/chosen/

redirigir a pagina con error 404 o 500

Me he encontrado con un problema en laravel 5.5, estoy siguiendo un curso, pero está algo obsoleto, ya que es del 2015 y ya sabemos lo rápido que va esto, bueno pues os cuento, el problema es redirigir a una página cuando escribimos mal una ruta en la barra, bueno pues buscando durante un rato he encontrado una solución.

Para la solución tenemos que insertar un poco de código.

Primero vamos a app/Exceptions/handler.php.

Ya en ese fichero, vamos a la función render e insertamos un poco de código:

if($this->isHttpException($e))

        {

            switch ($e->getStatusCode()) 

                {

                // not found

                case 404:

                return redirect('home');

                break;

                // internal error

                case '500':

                return redirect('home');

                break;

                default:

                    return parent::render($request, $e);

                break;

            }

        }

De manera que la función completa nos queda así:

public function render($request, Exception $e)

    {

        if($this->isHttpException($e))

        {

            switch ($e->getStatusCode()) 

                {

                // not found

                case 404:

                return redirect('home');// esta es la ruta hacia donde queremos redirigir

                break;

                // internal error

                case '500':

                return redirect('home');// esta es la ruta hacia donde queremos redirigir

                break;

                default:

                    return parent::render($request, $e);

                break;

            }

        }

        return parent::render($request, $e);

    }

Espero que le sirva de ayuda a alguien.

Crear enlace activo en laravel

Para crear un enlace destacado en una cierta ruta, por ejemplo la ruta en la que estamos en ese momento, creamos un enlace de este tipo:

<a href="{{url('ruta_relativa')}}" class="dropdown-item {{ (url()->current() == 'https://ruta_completa_a_tu_pagina') ? 'active': '' }}">Usuarios</a>


Espero que le sirva de ayuda a alguien.

Problema rutas xampp laravel

Si estás teniendo problemas con las rutas y los controladores usando xampp. Prueba con esto:

1-Copia el .htaccess que esta en la carpeta public y ponlo en la carpeta raiz.
2-Cambia el nombre del fichero server.php que está en el directorio raíz, a index.php.

Después de esto, tendrás que entrar en el proyecto con la ruta de xampp.

Es decir: localhost/nombre_del_proyecto/ruta_a_la_página_o_página.

Eso es todo, espero que le sirva de ayuda a alguien.

Emulador Nox en modo desarrollo

Para cambiar Nox al modo desarrollo, deberemos seguir unos pasos, esto nos sirve para probar nuestras aplicaciones web en un emulador de android.

1º-Instalamos y ejecutamos Nox, al ejecutarlo debemos ir a configuración del sistema, en el menu de Nox (arriba), se nos abre por defecto la pestaña configuración general, y ahí cambiamos en iniciar root, lo habilitamos pulsando sobre el checkbox ( el cuadradito), pulsamos abajo en guardar configuración y reiniciamos Nox.

2º- Con Nox reiniciado, vamos a settings (ajustes) en el Android, es decir dentro de nuestro emulador, no a los botones de Nox, en mi versión por ejemplo ajustes está en tools, en la pantalla principal.

3º- Ahora vamos a información de la tablet ( about tablet) y entramos, y donde pone Número de compilación, pulsamos 5 veces, puede que en otras versiones haya que pulsar más o menos veces, cuando este preparado te lo indicará con una advertencia el android, que ya esta en modo desarrollo.

4º- Volvemos atrás y en ajustes ( settings ), te saldrá una pestaña nueva, llamada Opciones de desarrollo, pues entramos ahí, en la zona de depuración ( debug ), habilitamos la opción Depuración USB ( debugger USB ).

5º- Reiniciamos Nox, y en nuestra consola ejecutamos, primero adb kill-server para parar el servidor por si está ejecutándose algo, después con el Nox encendido, ejecutamos adb connect 127.0.0.1:62001. Para comprobar si nuestra sistema reconoce el dispositivo, ejecutamos la consulta de nuestro dispositivo, por ejemplo en Nativescript que es lo que yo estoy utilizando ejecuto en la consola: tns device , si hay algún dispositivo o emulador este comando te lo muestrá, y para terminar ejecuto en la consola: tns run android, que correrá la aplicación en el emulador Nox.

Espero que les haya servido de ayuda.

Crear opacidad en una imagen de fondo en nativescript

Para crear una imagen de fondo con nativescript a falta de otros recursos yo lo he hecho de esta manera:

1º- En la etiqueta page, pero puede ser en cualquier etiqueta que vaya de cabecera en la página, pues introducimos el background-image: url ("ejemplo.jpg"), con background-size: cover, y después viene la raiz del problema, entonces creamos una etiqueta que envase el resto de la página por ejemplo un GridLayout y establecemos el color de fondo con rgba, background-color: rgba(255, 249, 192, 0.7) por ejemplo y ya esta, ya tenemos nuestra imagen de fondo
la opacidad creada.

Aquí os dejo un código de ejemplo que yo he utilizado:

CSS:

page {background-image: url("~/images/pixabay_motocross.jpg"); background-size: cover;}

GridLayout {

background-color: rgba(255, 249, 192, 0.7);

}

HTML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" tintColor="yellow">

<GridLayout rows="*,80">

<ScrollView row="0">

<FlexboxLayout id="teledeporte" flexDirection="column">

<FlexboxLayout flexDirection="column">

<Label text="Introducir deporte" ></Label>

<textField hint="introducir" autocorrect="false" autocapitalizationType="none" [(ngModel)]="Ideporte">

</textField>

<Label text='Has elegido: {{Ideporte}}'></Label>

<Button text="enter" (tap)="enter()" class="enter"></Button>

</FlexboxLayout>

<FlexboxLayout flexDirection="column">

<Label text="Eliminar deporte" ></Label>

<textField hint="introducir" autocorrect="false" autocapitalizationType="none" [(ngModel)]="Rdeporte">

</textField>

<Label text='Vas a eliminar: {{Rdeporte}}'></Label>

<Button text="delete" (tap)="delete()" class="delete"></Button>

</FlexboxLayout>

<Button text="Consultar" (tap)="loadFile()" class="consultar"></Button><br>

<FlexboxLayout flexDirection="column">

<StackLayout *ngFor="let item of str">

<Label [text]="item" textWrap="true"></Label><br/>

</StackLayout>

</FlexboxLayout>

</FlexboxLayout>

</ScrollView>

<StackLayout row="1" orientation="horizontal">

<Button text="< BACK" (tap)="goBack()" class="back"></Button>

</StackLayout>

</GridLayout>

</Page>

Espero que le pueda servir de ayuda a alguien.

Instalar versión previa del plugin nativescript-plugin-firebase

He buscado por la red y no he encontrado ninguna información sobre como instalar una versión previa de este plugin, pero al final encontré la solución, para los que sabemos poco de programación nos servirá de ayuda.

Simplemente escribimos en la linea de comandos, después de instalar node.js y nativescript, y tras haber creado nuestro proyecto en nativescript:

tns add plugin nativescript-plugin-firebase@x.x.x

x.x.x es la versión que queramos instalar, yo por ejemplo:

tns add plugin nativescript-plugin-firebase@4.2.1

ya que me estaba dando problemas la nueva versión 5 de este plugin.

Espero que les sirva de ayuda.