Antes de empezar tengo que decir que recientemente he comenzado el aprendizaje de CodeIgniter, lo siento si me repito este tema una vez más.

Procesal de php me gustaría hacer algo como esto

//the header.php
<!DOCTYPE html>
<html>
<head>
      <meta name="description" content="blah blah">
      <title>My Site</title>
      <link href="css/main.css" rel="stylesheet" media="screen">
<php? if($current_page == 'about.php'): ?>
      <link href="css/secondary.css" rel="stylesheet" media="screen"> //or some embed styles (<stlye> ... </style>)
   <?php endif; ?> 


      <script src="http://code.jquery.com/jquery.js"></script>
      <script src="js/main_script.js"></script>

      <php? if($current_page == 'contact.php'): ?>
      <script src="js/validation.js"></script>
      <?php endif; ?>
</head>
<body>
     //end of header.php

     include('template/header.php');

     <h1>Heading1</h1>    
     <p>Lorem Ipsum...</p>

     include('template/footer.php');

    //footer.php
    //maybe some js and here
</body>
</html>

Así que me gustaría hacer algo similar y en CI. Todas las páginas vistas/tendrá la misma principales estilos o scripts, pero en algunos casos, algunas páginas específicas (como contact.php pueden incluir, y sólo en estas páginas, algunos estilos específicos o secuencias de comandos (como el validation.js).

He encontrado este video que muestra cómo crear una plantilla/diseño de la biblioteca uso de CI, pero no estoy muy seguro de cómo puedo aplicar esta funcionalidad para que funcione correctamente.

InformationsquelleAutor ltdev | 2013-05-09

6 Comentarios

  1. 5

    Coloque la parte inferior de la clase en libraries/Layout.php (su aplicación no la sys). En el autoload agregar a la biblioteca:

    $autoload['libraries'] = array('layout');

    En el controlador sólo escribir $this->layout->render();

    La clase representará el diseño de views/layouts/default.php y la vista views/$controller.views/$method.php

    En el diseño predeterminado acaba de poner

    <?php $this->load->view($view,$data); ?>

    y eso es todo.

    El código es

    <?php
    if (!defined('BASEPATH')) exit('No direct script access allowed');
    
    class Layout
    {
        public $data = array();
        public $view = null;
        public $viewFolder = null;
        public $layoutsFodler = 'layouts';
        public $layout = 'default';
        var $obj;
    
        function __construct()
        {
            $this->obj =& get_instance();
        }
    
        function setLayout($layout)
        {
            $this->layout = $layout;
        }
        function setLayoutFolder($layoutFolder)
        {
            $this->layoutsFodler = $layoutFolder;
        }
    
        function render()
        {
    
            $controller = $this->obj->router->fetch_class();
            $method = $this->obj->router->fetch_method();
            $viewFolder = !($this->viewFolder) ? $controller.'.views' : $this->viewFolder . '.views';
            $view = !($this->view) ? $method : $this->view;
    
            $loadedData = array();
            $loadedData['view'] = $viewFolder.'/'.$view;
            $loadedData['data'] = $this->data;
    
            $layoutPath = '/'.$this->layoutsFodler.'/'.$this->layout;
            $this->obj->load->view($layoutPath, $loadedData);
        }
    }
    ?>
    • He desarrollado una biblioteca bastante similar a la tuya. De todos modos gracias por tu respuesta!
    • Gracias, eso es una gran cosa! Pero ¿puede ser que el $variable de datos en el Controlador no se pasa a la vista de esta manera? Yo pase de los $datos para el método render y cambió de $loadedData[‘data’] = $datos;
    • ejemplo de uso de public function index() { $this->carga>view(‘layouts/default’, [‘ver’=>’panel de control/index’ , ‘data’ => []]); }
  2. 1

    Me estoy haciendo el diseño de la cosa es como la de abajo.

    Puedo obtener el contenido de los datos[‘contenido’] variable.

    Este es mi controlador.

        class Article extends MY_Controller {
    
            function __construct() {
                parent::__construct();
                $this->load->model('article_model');
            }
    
            public function index() {
    
                $data['allArticles']    =   $this->article_model->getAll(); 
    
                $data['content']        =   $this->load->view('article', $data, true);
                $this->load->view('layout', $data);
    
            }

    Este es mi Diseño.Estoy usando bootstrap diseño.

        <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Starter Template for Bootstrap</title>
    <base href="<?php echo base_url(); ?>" />
    <!-- Bootstrap core CSS -->
    <link href="assets/bootstrap3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <!--    <link href="starter-template.css" >-->
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"> Article Management System</a>
    </div>
    <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
    <li class="active"><a href="">Home</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Admin <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="article/add">Add Article</a></li>
    <li><a href="article">All Article</a></li>
    </ul>
    </li>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
    </div>
    <div class="container" style="margin-top: 80px;">
    <?php echo $content; ?>
    </div><!-- /.container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="assets/bootstrap3.0.1/js/bootstrap.min.js"></script>
    </body>
    </html>        

    Este es el contenido de mi vista

        <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
    <div class="page-header">
    <h4>All Articles </h4>
    </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
    <table class="table table-striped table-bordered">
    <thead>
    <tr>
    <th>Title</th>
    <th>Description</th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <?php foreach ($allArticles as $row) { ?>
    <tr>
    <td><?php echo $row->title; ?></td>
    <td><?php echo substr($row->description,0,100); ?> ....</td>
    <td></td>
    </tr>
    <?php } ?>
    </tbody>
    </table>
    </div>
    </div>
  3. 0

    He logrado lo mismo con el siguiente:

    Poner este código en el ./application/core/MY_Controller.php de archivo:

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    class MY_Controller extends CI_Controller
    {
    protected $layout = 'layout/main';
    public function __construct()
    {
    parent::__construct();
    }
    protected function render($file = NULL, &$viewData = array(), $layoutData = array())
    {
    if( !is_null($file) ) {
    $data['content'] = $this->load->view($file, $viewData, TRUE);
    $data['layout'] = $layoutData;
    $this->load->view($this->layout, $data);
    } else {
    $this->load->view($this->layout, $viewData);
    }
    $viewData = array();
    }
    }

    Crear una carpeta de diseño dentro de ./application/views directorio y, a continuación, crear sus archivos con el html completo en ella. Sólo hay que poner el <?php echo $content; ?> en ese archivo donde desea colocar el contenido dinámico en ella. A continuación, en su uso de controladores de $this->render(); y pasar su archivo y ruta de acceso de datos. Si desea utilizar un diseño diferente para la página específica acabo de poner el $this->layout = 'path_to_your_layout_file'; reemplaza el archivo de diseño para ser utilizado.

  4. 0

    He luchado con un problema similar no hace mucho. Mi solución fue la siguiente :
    En el controlador constructor de crear 2 matrices de uno de los archivos css y uno de los ficheros js y poner en ellos los archivos comunes a todos los puntos de vista.
    Y en cada una de las funciones en el controlador de agregar lógica de archivos específicos.
    Por su ejemplo tendrás algo como esto :

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    class Home extends CI_Controller
    {
    public function __construct()
    {
    parent::__construct();
    $this->page_data = array();
    $this->page_data['css']=array('main.css','bootstrap.css');
    $this->page_data['js']=array('main.js','bootstrap.js');
    }
    public function about()
    {
    array_push($this->page_data['css'],'secondary.css');
    $this->load->view('main_layout',$this->page_data)
    }
    public function contact()
    {}
    }

    Y en su archivo de vista que sólo tendremos que iterar sobre los $css y $js matriz e incluir en ellos uno por uno.
    Puede ampliar fácilmente para incluir el encabezado y pie de página de plantillas empujando en la page_data matriz.

    Terminé de conmutación de las plantillas en el lado del cliente con la columna vertebral y el uso de Código de Encendido como una API REST solamente, pero esta técnica me dio relativamente código limpio para lo que yo necesitaba.

  5. 0

    5 Sencillos Pasos para crear CodeIgniter Plantilla:

    Paso #1

    Template.php @ bibliotecas

    Paso #2

    Escribir el siguiente código

    /* Start of file Template.php */
    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    class Template {
    var $template_data = array();
    function set($name, $value)
    {
    $this->template_data[$name] = $value;
    }
    function load($template = '', $view = '' , $view_data = array(), $return = FALSE)
    {               
    $this->CI =& get_instance();
    $this->set('contents', $this->CI->load->view($view, $view_data, TRUE));         
    return $this->CI->load->view($template, $this->template_data, $return);
    }
    }
    /* End of file Template.php */
    /* Location: ./system/application/libraries/Template.php */

    Paso #3

    abierto config/autoload.php
    en la línea 55 reemplazar

    $autoload['libraries'] = array('database', 'session','encrypt');
    with this code
    $autoload['libraries'] = array('database', 'session','encrypt', 'template');

    Paso #4

    En mi controlador de la plantilla de llamada como

    //start
    $this->template->load(TEMPLATE_NAME, VIEW_NAME , $this->data);
    //end

    Paso #5

    De vistas
    crear un archivo como custom_template.php
    Y allí código siguiente–

    //start
    <?php $this->load->view('elements/header'); ?>
    <div><?php echo $contents;?></div>
    <?php $this->load->view('elements/footer'); ?>
    //end

    N. B. En los puntos de vista de los elementos de la carpeta a crear dos archivos como header.php Y footer.php

    • Así qué significa <body> etiqueta en header.php y el cierre de la etiqueta </body> en footer.php? Si sí, esto es muy malo patrón.
  6. 0

    Yo uso este, en una más vieja versión de CodeIgniter y funciona para la versión 3.

    <?php  
    if (!defined('BASEPATH')) exit('No direct script access allowed');
    class Layout
    {
    var $obj;
    var $layout;
    function Layout($layout = "layout_main")
    {
    $this->obj =& get_instance();
    $this->layout = $layout;
    }
    function setLayout($layout)
    {
    $this->layout = $layout;
    }
    function view($view, $data=null, $return=false)
    {
    $loadedData = array();
    $loadedData['content_for_layout'] = $this->obj->load->view($view,$data,true);
    if($return)
    {
    $output = $this->obj->load->view($this->layout, $loadedData, true);
    return $output;
    }
    else
    {
    $this->obj->load->view($this->layout, $loadedData, false);
    }
    }
    }
    ?>

    y a la llamada de esta en el controlador de utilizo:

    $this->layout->view('apps/apps', $data);

Dejar respuesta

Please enter your comment!
Please enter your name here