0

Ya desarrolle una aplicacion con mvc y todo va perfecto. Pero le quise poner un menu colapsable a la izquierda y como era de esperar se me desalinearon todos los componentees. Adjunto imagen: introducir la descripción de la imagen aquí

Anteriormente tenia en el index un llamado a la hoja de rutas e incluia la vista segun el click:

<body>
<?php session_start(); ?>


        
        <script type="text/javascript" src="views/login.js"></script>
    

      <?php       
        require_once("routes.php");
      
if ( isset($_SESSION['username']) && isset($_SESSION['userid']) ){


 require_once("views/template.php");
        $controller=$_GET['controller'];

        $action=$_GET['action'];
        if (isset($_GET['id'])){
            
            $id=$_GET['id'];
            call($controller,$action,$id);
        }else{
            
        call($controller,$action,0); }

    }else{
        
    } 
}

else{
    echo '<div class="contenedor">
<div class="cabecera">
</div>
<div class="cuerpo">
<div class="panel panel-primary" style="width:50%">
<div class="panel-heading">INGRESE AL SISTEMA</div>
<div class="row">
<div class="col-sm-4">
<label style="color: blue">Usuario:</label></div><div class="col-sm-4">
                <input type="text" style="color:blue" name="login_username" id="login_username" /></div>
           
          </div><div class="row"><div class="col-sm-4">
                <label style="color: blue">Contraseña:</label></div><div class="col-sm-4">
             <input type="password" name="login_userpass" id="login_userpass" style="color:blue" />
        </div>
        </div>
         <div class="row"><div class="col-sm-4">
             <span class="timer" id="timer"></span><button id="login_userbttn" class="btn btn-primary">Login</button></div>
              </div>   </div>
</div>
  ';
}
?>
         
   </body> 

Pero en los tutoriales sale un div wrapper donde existe un div sidebar y un div container. Entiendo que en container va todo el html que cambia de acuerdo al click:

<div class="wrapper">

        <nav id="sidebar">
            <!-- Sidebar Header -->
            <div class="sidebar-header">
                <h3>GESTION WEB</div>
            

            <!-- Sidebar Links -->
            <ul class="list-unstyled components">
                <ul>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">   <i class="glyphicon glyphicon-plus"></i>
      <span>ABM</span></a>
    <ul class="dropdown-menu">
        <li><a href="index.php?controller=cliente&action=index">
        <i class="glyphicon glyphicon-user"></i><span>Cliente</span>
        </a></li>
        <li><a href="index.php?controller=articulo&action=index">
        <i class="glyphicon glyphicon-list-alt"></i><span>Articulo</span>
        </a>
                   <ul class="dropdown-menu sub-menu">
                        <li><a href="index.php?controller=marca&action=index">Marca</a></li>
                        <li><a href="index.php?controller=categoria&action=index">Categoria</a></li>
                        <li><a href="index.php?controller=subcategoria&action=index">SubCategoria</a></li>
                    </ul>
                </li>
        <li ><a href="index.php?controller=proveedor&action=index"> <i class="glyphicon glyphicon-user"></i><span>Proveedores</span></a></a></li>
       <!--  <li ><a href="index.php?controller=envase&action=todos">Envases</a></li>
        <li ><a href="index.php?controller=medida&action=index">Medidas</a></li>
        <li ><a href="index.php?controller=canilla&action=index">Canillas</a></li> --!>
       <li ><a href="index.php?controller=user&action=index"> <i class="glyphicon glyphicon-user"></i><span>Usuarios</span></a></li>
      </ul>
    </li>
   <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Nuevo Comp.</a>
    <ul class="dropdown-menu">
        <li ><a href="index.php?controller=ticket&action=index">Ticket</a></li>
   <li ><a href="index.php?controller=facturaa&action=index">Factura</a></li>
    </ul>
    </li>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Estado de cajas</a>
    <ul class="dropdown-menu">
        <li><a href="">Chequera</a></li>
        <li><a href="index.php?controller=caja&action=gasto">Nuevo Gasto</a></li>
        <li><a href="index.php?controller=caja&action=index">Cerrar caja</a></li>
        <li><a href="index.php?controller=cliente&action=cuenta">Cuenta Corriente</a></li>
        <li><a href="index.php?controller=caja&action=indexgrande">Caja Grande</a></li>
        <li><a href="">Posnet</a></li>
      </ul>
    </li>
   <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Nueva Venta</a>
   <ul class="dropdown-menu">
        <li><a href="index.php?controller=venta&action=index">Canilla</a></li>
        <li><a href="index.php?controller=venta&action=cerrado">Producto</a></li>
        
      </ul>
    </li>
<li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Compra de stock</a>
    <ul class="dropdown-menu">
        <li><a href="index.php?controller=stock&action=index">Productos</a></li>
        <li><a href="index.php?controller=stock&action=indexb">Barril</a></li>
        <li><a href="index.php?controller=stock&action=canilla">Cambio de canilla</a></li>
      </ul>
    
    </li>
  </ul>





      <input type="hidden" id="cajero" value="<?php if (isset($_SESSION["userid"])){
        
        echo $_SESSION['userid'];
      }?>"/> 
       <input type="hidden" id="sesion" value="<?php if (isset($_SESSION["idsesion"])){
        
        echo $_SESSION['idsesion'];
      }?>"/> 
       <input type="hidden" id="inicio" value="<?php if (isset($_SESSION["inicio"])){
        
        echo $_SESSION['inicio'];
      }?>"/> 

        </nav>

        <div id="content">
   <?php  if (isset($_GET['controller'])&&isset($_GET['action'])) {
 require_once("views/template.php");
        $controller=$_GET['controller'];

        $action=$_GET['action'];
        if (isset($_GET['id'])){
            
            $id=$_GET['id'];
            call($controller,$action,$id);
        }else{
            
        call($controller,$action,0); }

    }?>
            <button type="button" id="sidebarCollapse" class="navbar-btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        <div>

Pero como deberia reorganizar mi codigo o que debo hacer para que acomodar los compoenentes..ese es el index de cliente por ejemplo. Se que es mucho codigo pero agreadeceria su ayuda..

2
  • Se que este comentario no responde a tu pregunta directamente, pero sólo por curiosidad ¿conoces AdminLTE?. Es un dashboard de administración (como otros tantos) que te ahorra muchísimo trabajo y hay buena documentación para implementarla en cualquier proyecto MVC desarrollado con o sin framework. adminlte.io/themes/AdminLTE/index2.html PD: si este comentario se considera inapropiado, me informan y procedo a eliminarlo
    – DjCrazy
    Commented el 16 ene. 2019 a las 18:16
  • No me molesta tu comentario..pero n es lo que necesito..es un sistema de gestion basico lo que estoy haciendo
    – Caruso
    Commented el 16 ene. 2019 a las 18:46

2 respuestas 2

1

Para que el menú se muestre y se oculte se requiere:

  • Un navbar para ubicar el botón
  • Un botón que controle el evento de mostrar/ocultar el menú
  • Código CSS y jQuery para que funcione.

Te dejo un ejemplo para que trates de adaptarlo a tu código...

Presta atención a los comentarios dentro del código.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>Collapsible sidebar using Bootstrap 3</title>

         <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- CSS Personalizado -->
        <style>
            
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    Estilos de Sidebar
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: '\e260';
}


ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    Estilos del contenido
----------------------------------------------------- */
#content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------------------------
    Mediaquerys... #sidebarCollapse es el id del botón Toggle Sidebar
------------------------------------------------------------------------ */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
        </style>
    </head>
    <body>



        <div class="wrapper">
            <!-- Barra Lateral -->
            <nav id="sidebar">
                <div class="sidebar-header">
                    <h3>Bootstrap Sidebar</h3>
                </div>

                <ul class="list-unstyled components">
                    <p>Dummy Heading</p>
                    <li class="active">
                        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
                        <ul class="collapse list-unstyled" id="homeSubmenu">
                            <li><a href="#">Home 1</a></li>
                            <li><a href="#">Home 2</a></li>
                            <li><a href="#">Home 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">About</a>
                        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
                        <ul class="collapse list-unstyled" id="pageSubmenu">
                            <li><a href="#">Page 1</a></li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>

                <ul class="list-unstyled CTAs">
                    <li><a href="#" class="download">Download source</a></li>
                    <li><a href="#" class="article">Back to article</a></li>
                </ul>
            </nav>

            <!-- Pagina de Contenido -->
            <div id="content">

                <nav class="navbar navbar-default">
                    <div class="container-fluid">

                        <div class="navbar-header">
                            <!-- El botón tiene el id="sidebarCollapse" para controlarlo con CSS y jQuery -->
                            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>Toggle Sidebar</span>
                            </button>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">Page</a></li>
                                <li><a href="#">Page</a></li>
                                <li><a href="#">Page</a></li>
                                <li><a href="#">Page</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <h2>Collapsible Sidebar Using Bootstrap 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div class="line"></div>

                <h2>Lorem Ipsum Dolor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div class="line"></div>

                <h2>Lorem Ipsum Dolor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div class="line"></div>

                <h3>Lorem Ipsum Dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <!-- jQuery CDN -->
         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
         <!-- Bootstrap Js CDN -->
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <!-- '#sidebarCollapse' es el id del botón. Aquí se usa para controlar el evento mostrar/ocultar al hacer clic en el botón -->
         <script type="text/javascript">
             $(document).ready(function () {
                 $('#sidebarCollapse').on('click', function () {
                     $('#sidebar').toggleClass('active');
                 });
             });
         </script>
    </body>
</html>

1
  • Gracias por tu tiempo DJCrazy. Ya logre el menu colapsable, pero al hacer click en el boton que lo colapsa, ademas de colapsarse se esconde tanto el menu como el botn y no puedo reanudarlo.
    – Caruso
    Commented el 17 ene. 2019 a las 10:15
0

Bueno contento de haber resuelto una parte aunque sea por mi mismo:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="exit.js"></script>
</head>
<body>
<div class="wrapper">

        <nav id="sidebar">
 
            <!-- Sidebar Header -->
            <div class="sidebar-header">
                <h3>GESTION WEB</div>
            

            <!-- Sidebar Links -->
            <ul class="list-unstyled components">
                <ul>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">   <i class="glyphicon glyphicon-plus"></i>
      <span>ABM</span></a>
    <ul class="dropdown-menu">
        <li><a href="index.php?controller=cliente&action=index">
        <i class="glyphicon glyphicon-user"></i><span>Cliente</span>
        </a></li>
        <li><a href="index.php?controller=articulo&action=index">
        <i class="glyphicon glyphicon-list-alt"></i><span>Articulo</span>
        </a>
                   <ul class="dropdown-menu sub-menu">
                        <li><a href="index.php?controller=marca&action=index">Marca</a></li>
                        <li><a href="index.php?controller=categoria&action=index">Categoria</a></li>
                        <li><a href="index.php?controller=subcategoria&action=index">SubCategoria</a></li>
                    </ul>
                </li>
        <li ><a href="index.php?controller=proveedor&action=index"> <i class="glyphicon glyphicon-user"></i><span>Proveedores</span></a></a></li>
       <!--  <li ><a href="index.php?controller=envase&action=todos">Envases</a></li>
        <li ><a href="index.php?controller=medida&action=index">Medidas</a></li>
        <li ><a href="index.php?controller=canilla&action=index">Canillas</a></li> --!>
       <li ><a href="index.php?controller=user&action=index"> <i class="glyphicon glyphicon-user"></i><span>Usuarios</span></a></li>
      </ul>
    </li>
   <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Nuevo Comp.</a>
    <ul class="dropdown-menu">
        <li ><a href="index.php?controller=ticket&action=index">Ticket</a></li>
   <li ><a href="index.php?controller=facturaa&action=index">Factura</a></li>
    </ul>
    </li>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Estado de cajas</a>
    <ul class="dropdown-menu">
        <li><a href="">Chequera</a></li>
        <li><a href="index.php?controller=caja&action=gasto">Nuevo Gasto</a></li>
        <li><a href="index.php?controller=caja&action=index">Cerrar caja</a></li>
        <li><a href="index.php?controller=cliente&action=cuenta">Cuenta Corriente</a></li>
        <li><a href="index.php?controller=caja&action=indexgrande">Caja Grande</a></li>
        <li><a href="">Posnet</a></li>
      </ul>
    </li>
   <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Nueva Venta</a>
   <ul class="dropdown-menu">
        <li><a href="index.php?controller=venta&action=index">Canilla</a></li>
        <li><a href="index.php?controller=venta&action=cerrado">Producto</a></li>
        
      </ul>
    </li>
<li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Compra de stock</a>
    <ul class="dropdown-menu">
        <li><a href="index.php?controller=stock&action=index">Productos</a></li>
        <li><a href="index.php?controller=stock&action=indexb">Barril</a></li>
        <li><a href="index.php?controller=stock&action=canilla">Cambio de canilla</a></li>
      </ul>
    
    </li>
  </ul>





      <input type="hidden" id="cajero" value="<?php if (isset($_SESSION["userid"])){
        
        echo $_SESSION['userid'];
      }?>"/> 
       <input type="hidden" id="sesion" value="<?php if (isset($_SESSION["idsesion"])){
        
        echo $_SESSION['idsesion'];
      }?>"/> 
       <input type="hidden" id="inicio" value="<?php if (isset($_SESSION["inicio"])){
        
        echo $_SESSION['inicio'];
      }?>"/> 

        </nav> <div class="row" style="margin: 0;"><div id="header">  <button type="button" id="sidebarCollapse" class="navbar-btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
   
   <input type="button" class="btn btn-primary" value="Salir" id="exit"/>
<label>Nombre..<?php if (isset($_SESSION['username'])){echo $_SESSION['username'];}?></label>
<label>Rol..<?php if (isset($_SESSION['rol'])){echo $_SESSION['rol'];}?></label>
</div>

<div class="col-sm-8">
        <div id="content">
   <?php  if (isset($_GET['controller'])&&isset($_GET['action'])) {
 require_once("views/template.php");
        $controller=$_GET['controller'];

        $action=$_GET['action'];
        if (isset($_GET['id'])){
            
            $id=$_GET['id'];
            call($controller,$action,$id);
        }else{
            
        call($controller,$action,0); }

    }?></div></div>
   
   
</body>

</html>

Deje la funcion call en el template..es decir todo junto. En el index luego tengo:

    

      <?php       
        require_once("routes.php");
      
if ( isset($_SESSION['username']) && isset($_SESSION['userid']) ){


 require_once("views/template.php");
 
}

else{
    echo '<div class="contenedor">
<div class="cabecera">
</div>
<div class="cuerpo">
<div class="panel panel-primary" style="width:50%">
<div class="panel-heading">INGRESE AL SISTEMA</div>
<div class="row">
<div class="col-sm-4">
<label style="color: blue">Usuario:</label></div><div class="col-sm-4">
                <input type="text" style="color:blue" name="login_username" id="login_username" /></div>
           
          </div><div class="row"><div class="col-sm-4">
                <label style="color: blue">Contraseña:</label></div><div class="col-sm-4">
             <input type="password" name="login_userpass" id="login_userpass" style="color:blue" />
        </div>
        </div>
         <div class="row"><div class="col-sm-4">
             <span class="timer" id="timer"></span><button id="login_userbttn" class="btn btn-primary">Login</button></div>
              </div>   </div>
</div>
  ';
}
?>

Simplemente incluyo el template si hay alguien logueado.

el unico problema que me queda es que al esconder el menu, se va para la izquierda todo y no se lo puede mostrar nuevamente.Alguien sabe algo?

1
  • 1
    esto es una respuesta a tu pregunta?
    – user75901
    Commented el 16 ene. 2019 a las 23:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.