{"id":284,"date":"2024-03-17T22:21:16","date_gmt":"2024-03-18T01:21:16","guid":{"rendered":"https:\/\/ventiladorcito.com\/blog\/?p=284"},"modified":"2024-03-17T22:21:16","modified_gmt":"2024-03-18T01:21:16","slug":"mascotas-perdidas-py-parte-iii","status":"publish","type":"post","link":"https:\/\/ventiladorcito.com\/blog\/2024\/03\/mascotas-perdidas-py-parte-iii\/","title":{"rendered":"Mascotas Perdidas Py – Parte III"},"content":{"rendered":"\n

22 de Enero<\/strong><\/p>\n\n\n\n

A continuaci\u00f3n necesitamos crear las vistas para login y register pues al intentar entrar veremos un error similar a este:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Para las vistas usar\u00e9 bootstrap<\/a>, es una especie de framework para front-end, permite normalizar algunas caracter\u00edsticas visuales dentro del navegador, para diferentes etiquetas y componentes de formulario, sin mencionar que nos facilita hacer responsive nuestra p\u00e1gina.<\/p>\n\n\n\n

Para integrar bootstrapa a nuestro proyecto, debemos incluir dentro del proyecto usando vite que viene con laravel<\/a> para ello seguirmos en parte esta gu\u00eda para instalar entre los paquetes que usa con node y npm<\/a>.<\/p>\n\n\n\n

npm i --save bootstrap @popperjs\/core<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
npm i --save-dev sass<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Agregamos al archivo resources\/js\/app.js<\/strong><\/p>\n\n\n\n
    \/\/ Import all of Bootstrap's JS\n    import * as bootstrap from 'bootstrap';\n    window.bootstrap = bootstrap;<\/code><\/pre>\n\n\n\n
Al archivo resources\/js\/bootstrap.js<\/strong> agregamos:<\/p>\n\n\n\n
    \/\/ Import our custom CSS\n\n    import '..\/sass\/app.scss'\n    import '..\/css\/app.css'<\/code><\/pre>\n\n\n\n
Al archivo vite.config.js<\/strong> queda como:<\/p>\n\n\n\n
    import { defineConfig } from 'vite';\n    import laravel from 'laravel-vite-plugin';\n    import path from 'path';\n\n    export default defineConfig({\n        plugins: [\n            laravel({\n                input: [\n                    'resources\/js\/app.js'\n                ],\n                refresh: true,\n            }),\n        ],\n        resolve: {\n            alias: {\n                '~bootstrap': path.resolve(__dirname, 'node_modules\/bootstrap'),\n            }\n        },\n    });<\/code><\/pre>\n\n\n\n
Ejecutamos este comando para que se compile las versiones minificadas con vite de bootstrap:<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Ahora para probar, modificamos temporalmente el archivo routes\/web.php para probar una vista que incluya las librerias de bootstrap:<\/p>\n\n\n\n
    Route::get('\/', function () {\n        return view('test');\n    });<\/code><\/pre>\n\n\n\n
Y aqui creamos la vista para probarla resources\/views\/test.blade.php<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n    <html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n        <head>\n            <meta charset=\"utf-8\">\n            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n            <title>Test Bootstrap<\/title>\n\n            @vite('resources\/js\/app.js')\n        <\/head>\n        <body>\n            <div class=\"container py-4 px-3 mx-auto\">\n                <h1>Hello, Bootstrap and Vite!<\/h1>\n                <button class=\"btn btn-primary\">Primary button<\/button>\n            <\/div>\n        <\/body>\n    <\/html>\n<\/code><\/pre>\n\n\n\n
Y todo funciona! podemos ver algo como esto<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
si bootstrap no funcionara, veriamos algo como: <\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Asi que con eso concluimos la parte de incluir bootstrap en el proyecto, ahora procederemos a hacer un formulario de login.<\/p>\n\n\n\n
Creamos un archivo en resources\/views\/auth\/login.blade.php<\/strong><\/p>\n\n\n\n
    <!doctype html>\n    <html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n    <head>\n        <meta charset=\"utf-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <meta name=\"description\" content=\"Formulario Login, mascotas Perdidas\">\n        <meta name=\"author\" content=\"Login,Mascotas Perdidas\">\n        <title>Signin Template \u00b7 Bootstrap v5.3<\/title>\n\n        @vite('resources\/js\/app.js')\n\n        <!-- Favicons -->\n    {{-- <link rel=\"apple-touch-icon\" href=\"\/docs\/5.3\/assets\/img\/favicons\/apple-touch-icon.png\" sizes=\"180x180\">\n    <link rel=\"icon\" href=\"\/docs\/5.3\/assets\/img\/favicons\/favicon-32x32.png\" sizes=\"32x32\" type=\"image\/png\">\n    <link rel=\"icon\" href=\"\/docs\/5.3\/assets\/img\/favicons\/favicon-16x16.png\" sizes=\"16x16\" type=\"image\/png\">\n    <link rel=\"manifest\" href=\"\/docs\/5.3\/assets\/img\/favicons\/manifest.json\">\n    <link rel=\"mask-icon\" href=\"\/docs\/5.3\/assets\/img\/favicons\/safari-pinned-tab.svg\" color=\"#712cf9\">\n    <link rel=\"icon\" href=\"\/docs\/5.3\/assets\/img\/favicons\/favicon.ico\"> --}}\n    <meta name=\"theme-color\" content=\"#712cf9\">\n\n\n        <style>\n        .bd-placeholder-img {\n            font-size: 1.125rem;\n            text-anchor: middle;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            user-select: none;\n        }\n\n        @media (min-width: 768px) {\n            .bd-placeholder-img-lg {\n            font-size: 3.5rem;\n            }\n        }\n\n        .b-example-divider {\n            height: 3rem;\n            background-color: rgba(0, 0, 0, .1);\n            border: solid rgba(0, 0, 0, .15);\n            border-width: 1px 0;\n            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);\n        }\n\n        .b-example-vr {\n            flex-shrink: 0;\n            width: 1.5rem;\n            height: 100vh;\n        }\n\n        .bi {\n            vertical-align: -.125em;\n            fill: currentColor;\n        }\n\n        .nav-scroller {\n            position: relative;\n            z-index: 2;\n            height: 2.75rem;\n            overflow-y: hidden;\n        }\n\n        .nav-scroller .nav {\n            display: flex;\n            flex-wrap: nowrap;\n            padding-bottom: 1rem;\n            margin-top: -1px;\n            overflow-x: auto;\n            text-align: center;\n            white-space: nowrap;\n            -webkit-overflow-scrolling: touch;\n        }\n        <\/style>\n\n        <style>\n            \/* sign-in  *\/\n            html,\n    body {\n    height: 100%;\n    }\n\n    body {\n    display: flex;\n    align-items: center;\n    padding-top: 40px;\n    padding-bottom: 40px;\n    background-color: #f5f5f5;\n    }\n\n    .form-signin {\n    max-width: 330px;\n    padding: 15px;\n    }\n\n    .form-signin .form-floating:focus-within {\n    z-index: 2;\n    }\n\n    .form-signin input[type=\"email\"] {\n    margin-bottom: -1px;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n    }\n\n    .form-signin input[type=\"password\"] {\n    margin-bottom: 10px;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n    }\n        <\/style>\n\n        \n        <!-- Custom styles for this template -->\n        <link href=\"sign-in.css\" rel=\"stylesheet\">\n    <\/head>\n    <body class=\"text-center\">\n        \n    <main class=\"form-signin w-100 m-auto\">\n    <form>\n        {{-- <img class=\"mb-4\" src=\"https:\/\/getbootstrap.com\/docs\/5.3\/assets\/brand\/bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\"> --}}\n        <h1 class=\"h3 mb-3 fw-normal\">Iniciar Sesion<\/h1>\n\n        <div class=\"form-floating\">\n        <input type=\"email\" class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\">\n        <label for=\"floatingInput\">Email address<\/label>\n        <\/div>\n        <div class=\"form-floating\">\n        <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\">\n        <label for=\"floatingPassword\">Password<\/label>\n        <\/div>\n\n        <div class=\"checkbox mb-3\">\n        <label>\n            <input type=\"checkbox\" value=\"remember-me\"> Remember me\n        <\/label>\n        <\/div>\n        <button class=\"w-100 btn btn-lg btn-primary\" type=\"submit\">Sign in<\/button>\n        <p class=\"mt-5 mb-3 text-muted\">&copy; 2017\u20132022<\/p>\n    <\/form>\n    <\/main>\n\n\n        \n    <\/body>\n    <\/html><\/code><\/pre>\n\n\n\n
Lo que deber\u00eda mostrarnos una vista como esta:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Con esto concluimos esta entrada, tenemos bootstrap instalado y una vista de login (a\u00fan no funcional, pero de ac\u00e1 en adelante iremos un poco m\u00e1s r\u00e1pido y lo que har\u00e9 ser\u00e1 agregar las entradas a los commit donde pueden ver los cambios que subo) por ahora cierro ac\u00e1.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Referencias:<\/p>\n\n\n\n