Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 4 vistas

    Desarrollo de Aplicaciones Web III

    Cargado por

    felipe
    Entregable1

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Desarrollo de Aplicaciones Web III

    Cargado por

    felipe
    4 vistas11 páginas
    Entregable1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Entregable1

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    4 vistas11 páginas

    Desarrollo de Aplicaciones Web III

    Cargado por

    felipe
    Entregable1

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 11

    SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

    PLAN DE TRABAJO
    DEL ESTUDIANTE
    TRABAJO FINAL DEL CURSO

    1. INFORMACIÓN GENERAL
    Apellidos y Nombres: Gamarra Paniagua Felipe ID: 1488454

    Dirección Zonal/CFP: Cusco / Apurímac / Abancay

    Carrera: Ingeniería de Software con Inteligencia Artificial Semestre: IV

    Curso/ Mód. Formativo Desarrollo de Aplicaciones III

    Tema del Trabajo: Desarrollar aplicaciones web empleando Frameworks Laravel

    2. PLANIFICACIÓN DEL TRABAJO

    N° ACTIVIDADES/ ENTREGABLES CRONOGRAMA/ FECHA DE ENTREGA


    Descargar las herramientas como:
     Composer.
     Xampp 11/04/24
    1  Git
     Node.js
     7-Zip

    2 Instalación Laravel 12/04/24

    3 Creación de la Pagina Web 13/04/24

    4 Creación de la base de datos en 14/04/24


    Xampp
    5 Documentación y entrega del 15/04/24
    trabajo final

    3. PREGUNTAS GUIA
    Durante la investigación de estudio, debes obtener las respuestas a las siguientes interrogantes:

    Nº PREGUNTAS

    2
    TRABAJO FINAL DEL CURSO

    HOJA DE RESPUESTAS A LAS PREGUNTAS GUÍA

    1.

    2.

    3.

    4.

    3
    TRABAJO FINAL DEL CURSO

    HOJA DE PLANIFICACIÓN

    PROCESO DE EJECUCIÓN

    OPERACIONES / PASOS /SUBPASOS

    PASOS PARA UTILIZAR LARAVEL:

     Instalar un entorno de desarrollo local: Antes de comenzar a utilizar Laravel, debes instalar un
    entorno de desarrollo local que incluya PHP, un servidor web (por ejemplo, Apache o Nginx) y una
    base de datos (por ejemplo, MySQL o PostgreSQL). Puedes instalarlo manualmente o utilizar una
    herramienta como XAMPP o WAMP.

     Instalar Composer: Composer es un administrador de paquetes para PHP que se utiliza para
    instalar Laravel y sus dependencias. Puedes descargar Composer desde su sitio web oficial e
    instalarlo en tu sistema.

     Instalar Laravel: Una vez que hayas instalado Composer, puedes instalar Laravel utilizando el
    comando composer create-project --prefer-dist laravel/laravel nombre-proyecto. Este
    comando descargará la última versión de Laravel y configurará la estructura de archivos básica
    para tu proyecto.

     Configurar la base de datos: Laravel utiliza un archivo .env para almacenar la configuración de la
    base de datos. Debes configurar este archivo con la información de tu base de datos, incluyendo
    el nombre de la base de datos, el usuario y la contraseña.

     Ejecutar el servidor web: Puedes ejecutar el servidor web utilizando el comando php artisan
    serve. Esto iniciará el servidor en el puerto 8000 por defecto.

     Crear rutas y vistas: Laravel utiliza un sistema de enrutamiento para mapear las solicitudes HTTP
    a diferentes controladores y métodos. Puedes crear rutas utilizando el archivo routes/web.php.
    También puedes crear vistas utilizando el sistema de plantillas Blade.

     Desarrollar la aplicación: Ahora que tienes todo configurado, puedes comenzar a desarrollar tu
    aplicación utilizando Laravel. Puedes crear controladores, modelos y vistas para manejar la lógica
    de negocio y presentación de tu
    aplicación.

     Probar y depurar: A medida que


    desarrollas tu aplicación, es
    importante probarla y depurarla para
    asegurarte de que funciona
    correctamente. Laravel incluye un
    sistema de pruebas automatizadas
    que puedes utilizar para probar tu
    aplicación. También puedes utilizar
    herramientas de depuración como
    Xdebug para identificar y solucionar
    errores en tu código.
    4
    TRABAJO FINAL DEL CURSO

    DIBUJO / ESQUEMA/ DIAGRAMA

    Aquí se detalla la creación de los archivos de configuración de laravel.

    Ahora se detalla la creación del Login.

    5
    TRABAJO FINAL DEL CURSO

    Código del login:

    6
    TRABAJO FINAL DEL CURSO

    Explicación de manera más detallada cada parte del código y su objetivo:

    1. $('#formLogin').submit(function(e){ ... }): Este es un evento de jQuery que se activa cuando se


    envía el formulario de inicio de sesión.
    2. e.preventDefault();: Este método evita que el formulario se envíe de forma tradicional, es decir,
    evita que la página se recargue.
    3. var usuario = $.trim($("#usuario").val());: Obtiene el valor del campo de entrada de usuario
    (#usuario) y elimina los espacios en blanco al principio y al final.
    4. var password = $.trim($("#password").val());: Obtiene el valor del campo de entrada de
    contraseña (#password) y elimina los espacios en blanco al principio y al final.
    5. if(usuario.length == "" || password == ""){ ... }: Comprueba si los campos de usuario y
    contraseña están vacíos. Si alguno de ellos está vacío, muestra una advertencia utilizando la
    librería SweetAlert.
    6. $.ajax({ ... }): Realiza una solicitud AJAX al servidor PHP para verificar las credenciales del
    usuario.
     url:"bd/login.php": Especifica la URL del script PHP que manejará la autenticación del
    usuario.
     type:"POST": Especifica el método de la solicitud, que en este caso es POST.
     datatype: "json": Indica que se espera que la respuesta del servidor sea en formato
    JSON.
     data: {usuario:usuario, password:password}: Envía los datos de usuario y contraseña
    al servidor.
     success:function(data){ ... }: Define una función que se ejecutará cuando la solicitud
    AJAX tenga éxito. En este caso, recibe la respuesta del servidor y procesa el resultado.

    Luego detallamos la conexión del Login a la base de Datos:

    <?php
    class Conexion{
    public static function Conectar(){
    define('servidor','localhost');
    define('nombre_bd','empresa');
    define('usuario','root');
    define('password','');
    $opciones = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');

    try{
    $conexion = new PDO("mysql:host=".servidor.";dbname=".nombre_bd, usuario,
    password, $opciones);
    return $conexion;
    }catch (Exception $e){
    die("El error de Conexión es :".$e->getMessage());
    }
    }

    }
    ?>

    7
    TRABAJO FINAL DEL CURSO

    1. class Conexion { ... }: Define una clase llamada Conexion.


    2. public static function Conectar() { ... }: Define un método estático llamado Conectar() que se
    puede llamar sin necesidad de instanciar la clase.
    3. define('servidor', 'localhost');: Define una constante llamada servidor con el valor 'localhost',
    que representa la dirección del servidor de la base de datos.
    4. define('nombre_bd', 'login_2019');: Define una constante llamada nombre_bd con el valor
    'login', que representa el nombre de la base de datos.
    5. define('usuario', 'root');: Define una constante llamada usuario con el valor 'root', que
    representa el nombre de usuario de la base de datos.
    6. define('password', '');: Define una constante llamada password con el valor '', que representa
    la contraseña de la base de datos. En este caso, la contraseña está vacía.
    7. $opciones = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');: Crea un
    array llamado $opciones que contiene opciones de configuración para la conexión PDO. En
    este caso, se configura el juego de caracteres a UTF-8.
    8. try { ... } catch (Exception $e) { ... }: Se utiliza un bloque try-catch para manejar cualquier
    excepción que pueda ocurrir durante la conexión a la base de datos. Si se produce una
    excepción, el script mostrará un mensaje de error y finalizará la ejecución.
    9. $conexion = new PDO("mysql:host=".servidor.";dbname=".nombre_bd, usuario,
    password, $opciones);: Establece una nueva conexión PDO utilizando los datos
    proporcionados. La cadena de conexión especifica el tipo de base de datos (mysql), el host
    (localhost), el nombre de la base de datos (login_2019), el usuario (root), la contraseña (''), y
    las opciones de configuración ($opciones).
    10. return $conexion;: Retorna el objeto de conexión PDO creado.

    Creación Registro de Cliente:

    8
    TRABAJO FINAL DEL CURSO

    Presentación del código:

    <?php
    include_once '../bd/conexion.php';
    $objeto = new Conexion();
    $conexion = $objeto->Conectar();
    // Recepción de los datos enviados mediante POST desde el JS

    $nombre = (isset($_POST['nombre'])) ? $_POST['nombre'] : '';


    $pais = (isset($_POST['pais'])) ? $_POST['pais'] : '';
    $edad = (isset($_POST['edad'])) ? $_POST['edad'] : '';
    $opcion = (isset($_POST['opcion'])) ? $_POST['opcion'] : '';
    $id = (isset($_POST['id'])) ? $_POST['id'] : '';

    switch($opcion){
    case 1: //alta
    $consulta = "INSERT INTO personas (nombre, pais, edad) VALUES('$nombre',
    '$pais', '$edad') ";
    $resultado = $conexion->prepare($consulta);
    $resultado->execute();

    $consulta = "SELECT id, nombre, pais, edad FROM personas ORDER BY id DESC LIMIT
    1";
    $resultado = $conexion->prepare($consulta);
    $resultado->execute();
    $data=$resultado->fetchAll(PDO::FETCH_ASSOC);
    break;
    case 2: //modificación
    $consulta = "UPDATE personas SET nombre='$nombre', pais='$pais', edad='$edad'
    WHERE id='$id' ";
    $resultado = $conexion->prepare($consulta);
    $resultado->execute();

    $consulta = "SELECT id, nombre, pais, edad FROM personas WHERE id='$id' ";
    $resultado = $conexion->prepare($consulta);
    $resultado->execute();
    $data=$resultado->fetchAll(PDO::FETCH_ASSOC);
    break;
    case 3://baja
    $consulta = "DELETE FROM personas WHERE id='$id' ";
    $resultado = $conexion->prepare($consulta);
    $resultado->execute();
    break;
    }

    print json_encode($data, JSON_UNESCAPED_UNICODE); //enviar el array final en formato


    json a JS
    $conexion = NULL;

    9
    TRABAJO FINAL DEL CURSO

    Creación de la base de Datos:

    Aquí se detalla la creación de la base de datos con las tablas respectivas.

    10
    TRABAJO FINAL DEL CURSO

    LISTA DE RECURSOS

    INSTRUCCIONES: completa la lista de recursos necesarios para la ejecución del trabajo.

    1. MÁQUINAS Y EQUIPOS
    Laptop
    Mouse
    Celular

    3. HERRAMIENTAS E INSTRUMENTOS
    Laravel
    Visual Studio Code
    Xampp
    Composer
    Node.js
    7.Zip
    Google

    5. MATERIALES E INSUMOS
    Energía electrica
    Internet

    11

    También podría gustarte