“Año de la lucha contra la corrupción y la impunidad”

UNIVERSIDAD NACIONAL DE SAN AGUSTÍN DE

AREQUIPA
FACULTAD DE PRODUCCION Y SERVICIOS
ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

CURSO: PROGRAMACION WEB 2

GRUPO “C”

PROYECTO FINAL - “COORPORACION MERY CRUZ E.I.R.L.”

TEMA: BOOTSTRAP

INTEGRANTES:

Alexander Gabriel Luna Choquecota

Cayllahua Chicaña Erika
Zapana Ibarcena Kimberling
Huamani Huancara Cleofe
Huayna Morán Andrea
Fernando Barrientos Luque

DOCENTE:
Ing. Carlo Corrales Delgado

AREQUIPA – PERU 2019

 1. INTRODUCCION
El presente proyecto consiste en desarrollar un sistema web que se construye con la
lógica de negocio de la empresa “Coorporación Mery Cruz E.I.R.L.” de Miraflores-
Arequipa. Dicha empresa fue seleccionada por la necesidad de pasar a la modernidad
con el uso de un sistema web y automatizar procesos como la venta, la facturación y el
inventario en almacenes. Lo desarrollaremos utilizando el MVC CakePhp Framework y
las distintas herramientas como: HTML, JavaScript, Bootstrap, JQuery, Fontawesome,
etc. que se integran al framework y dan como resultado un proyecto mejor diseñado
con generación de código legible y de fácil desarrollo.
Este proyecto debe guardar y mostrar eficientemente la información, además de realizar
los cálculos necesarios para automatizar los procesos y mejorarlos de la mejor manera.
Con ello un objetivo claro es la construcción de un software de calidad, documentado y
de fácil usabilidad.
Sin embargo, en esta ocasión no desarrollaremos una documentación por lo pronto y
más adelante se intentará utilizar un plugin para realizarlo.
Finalmente el presente trabajo concluye terminado el curso que dura 16 semanas.

2. DESARROLLO

2.1. Integrando Bootsrap a nuestro proyecto

Installing Using Composer

En la carpeta root de nuestro proyecto en la ventana “cmd” (donde tiene que estar
composer.json). Ejecutar el siguiente comando:

composer require friendsofcake/bootstrap-ui

Cargamos el plugin en el config/Bootstrap.php de nuestra carpeta del proyecto.

Copiamos la siguiente línea:

$this->addPlugin('BootstrapUI');

Utilizamos la consola de CakePHP’s:

Línea de comando :
bin\cake plugin load BootstrapUI

Al cargar ya el plugin del bootstrap este se podrá apreciar en nuestro Proyecto en la

carpeta conf->bootstrap.php sabremos que se cargo cuando veamos la línea de
comando de comando

$this->addPlugin('BootstrapUI');
 Figure 1 Pligin

USO

AppView Setup

Ubicación : src\View\AppView.php

• Aquí se realizara la configuración necesaria del plugin de bootstrap.

• Primero debemos importamos use BootstrapUI\View\UIViewTrait.

• Dentro de nuestra clase AppView haremos uso del TRAIT use UIViewTrait, el
cual NOS AYUDARA A ACCEDER A CUALQUIER METODO Y ATRIBUTO DEL TRAIT.

namespace App\View;

use BootstrapUI\View\UIViewTrait;
use Cake\View\View;

class AppView extends UIView

{
use UIViewTrait;
/**
* Initialization hook method.
*/
public function initialize()
{
//Don't forget to call the parent::initialize()
$this->initialize(['layout' => false]);
}
}
UIViewTrait para tener mas control de la carga del layout.

use UIViewTrait;

BootstrapUI Layout

Antes de installar el pligin del bootstrap nuestras vistas tendrian este acpecto los
cuales son adguiridos del cake mediante sus layout .

Figure 2 layout

Aplicación del bootstrap

Como el cake tienen sus propias hojas de estilo las cuales se encuentran en la
carpeta de css ,la cual tiene la siguiente ruta src/webroot/css.
Ahora nosotros precederemos a cargar carpeta minificada de bootstrap.min.css ,así
también procedemos a cargar los jquery src/webroot/jq en su forma minificada
bootstrap.min.js

Despues de haber cargado el bootstrap.min.css y el jquery bootstrap,.min,jq

empezamos a modificar nuestro archivo default.ctp src/template/layout/default.ctp.
CODIGO DEFAULT.CTP

<?php
/**
* CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
* Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
*
* Licensed under The MIT License
* For full copyright and license information, please see the LICENSE.txt
* Redistributions of files must retain the above copyright notice.
*
* @copyright Copyright (c) Cake Software Foundation, Inc.
(https://cakefoundation.org)
* @link https://cakephp.org CakePHP(tm) Project
* @since 0.10.0
* @license https://opensource.org/licenses/mit-license.php MIT License
*/

$cakeDescription = 'Facturacion';
?>
<!DOCTYPE html>
<html>
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?= $cakeDescription ?>:
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>

<?= $this->Html-
>css(['bootstrap.min.css','my_style.css','fontawesome.min.css']) ?>
<?= $this->Html->script(['jquery-
3.4.1.min.js','bootstrap.min.js','fontawesome.min.js']) ?>

<?= $this->fetch('meta') ?>

<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>

</head>
<body>
<?= $this->element('menu') ?>
<div class="container">
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
</div>
<div>
<ul class ="top-bar-section">
<ul class="right">

<li><?= $this->Html->image("/eu.png ",[

"alt"=>"english",
'url'=>['controller'=> 'App','action'=>'change-
language','en_US']
]);?>

</li>
 <li><?= $this->Html->image("..\webroot\img\PE.png ",[
"alt"=>"español",
'url'=>['controller'=> 'App','action'=>'change-
language','es_PE']
]);?></li>
<li><?= $this->Html->image("",[
"alt"=>"portugues",
'url'=>['controller'=> 'App','action'=>'change-
language','pt_BR']
]);?></li>
</div>

<footer>

</footer>
</body>
</html>

Esta parte de código nos permite llamar a nuestro bootstrap que cargamos en la
carpeta css.

<?= $this->
Html->css(['bootstrap.min.css','my_style.css','fontawesome.min.css']) ?>

En este código apreciamos como se hace uso del jquery

<?= $this->Html->script([
'jquery-3.4.1.min.js','bootstrap.min.js','fontawesome.min.js']) ?>

Al actualizar nuestro proyecto veremos que el estilo de nuestras vistas ha cambiado

adaptando la siguiente forma.

Podemos ver a simple vista que nuestra cabecera se encuentra mas ordenada .
 1. Bibliografía
[1] CakePHP 3 Plugin BootStrap URL:
https://www.youtube.com/watch?v=htdkHk6endU