Tutorial de web en PHP con CodeIgniter y Json (2)

5/5 - (2 votos)

En la anterior entrada tutorial-de-web-en-php-con-codeigniter-y-json-1/ explique como instalar Codeigniter y preparlo para empezar a funcionar.

Ahora me voy a centrar en como preparas las vistas, como el objetivo es leer un json y mostrar sus elementos creare dos vistas inicio y ficha.

Ademas creare dos vistas mas head y footer para reutilizarlas y no reescribir código.

Creamos la vista application\views\head.php que contendra el inicio del html, head y body, ademas añadimos el css de boostrap y algunos estilos que utilizaremos para mostrar el contenido.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    body {
      margin: 40px;
    }
    h1 {
      text-align: center;
    }
    ul {
      list-style: none;
      margin: 20px;
    }
    .footer {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>

A continuación creamos el footer.php que incluye un parrafo los js de boostrap y los cierres del body y html.

<p class="footer"><strong>2019 Programacion con php</strong></p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Ahora creamos la vista inicio.php donde incluimos el titulo y una lista de elementos boostrap.

<div id="container">
  <h1>Titulo</h1>
  <div id="body">
    <ul class="list-group">
        <li class="list-group-item">
          Elemento
        </li>
    </ul>
  </div>

Y por ultimo creamos la vista ficha.php con la lista de elementos que mostraremos y un enlace para volver al indice.

<div id="container">
  <h1>titulo</h1>
  <div id="body">
    <ul class="list-group">
      <li class="list-group-item"><p>Texto1</p>
      </li>
      <li class="list-group-item"><p>Texto2</p>
      </li>
      <li class="list-group-item"><p><a href="<?php echo base_url() ?>">Volver</a></p>
      </li>
    </ul>
  </div>

Ahora lo que queremos es ver en funcionamiento las vistas creadas, para ello creamos un controlador Lista.php, donde incluimos dos metodos index que se cargara por defecto y ficha, los cuales mostraran las vistas creadas anteriormente.

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Lista extends CI_Controller
{
    public function index()
    {
        $this->load->view('head');
        $this->load->view('inicio');
        $this->load->view('footer');
    }
    public function ficha()
    {
        $this->load->view('head');
        $this->load->view('ficha');
        $this->load->view('footer');
    }
}

Utilizando la url http://localhost/readJSONcodeigniter/lista veriamos la vista lista.

Y utilizando la url http://localhost/readJSONcodeigniter/lista/ficha veriamos la vista ficha.

Por ultimo cambiariamos el controlador por defecto en el fichero routes.php para que se cargue la vista lista al inicio.

$route['default_controller'] = 'lista';

En la siguiente entrada veremos con crear el modelo para leer el json y pasarlo por el controlador.

Deja un comentario Cancelar la respuesta