IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Pregunta 1

Expliqueu amb les vostres paraules en que consisteix el paradigma de programació MVC. Poseu exemples de codi PHP basats en Code igniter de Model, de Vista i de controlador.

Dins del paradigma de programació MVC permet separar la lògica de l'aplicació, de la presentació de la pàgina a l'usuari.

  • El model representa les estructures de dades, el model contindrà les funcions que ens permeten interaccionar amb les bases de dades.
  • La vista és la informació que se li presenta al usuari, normalment una pàgina web.
  • El controlador serveix d'intermediari entre el model i la vista o qualsevol recurs necessari per generar una pàgina web.

Exemple MVC

  • Vista
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>Bienvenido a mi Blog!</h1>
</body>
</html>
  • Model
class Blogmodel extends CI_Model {

    var $title   = '';
    var $content = '';
    var $date    = '';

    function __construct()
    {
        // Call the Model constructor
        parent::__construct();
    }
    
    function get_last_ten_entries()
    {
        $query = $this->db->get('entries', 10);
        return $query->result();
    }

    function insert_entry()
    {
        $this->title   = $_POST['title']; // please read the below note
        $this->content = $_POST['content'];
        $this->date    = time();

        $this->db->insert('entries', $this);
    }

    function update_entry()
    {
        $this->title   = $_POST['title'];
        $this->content = $_POST['content'];
        $this->date    = time();

        $this->db->update('entries', $this, array('id' => $_POST['id']));
    }

}
  • Controlador
class Blog_controller extends CI_Controller {

    function blog()
    {
        $this->load->model('Blog');

        $data['query'] = $this->Blog->get_last_ten_entries();

        $this->load->view('blog', $data);
    }
}

Pregunta 2

Dissenyeu l'esquelet (sense codi a les funcions) d'una aplicació CRUD per a gestió d'ordinadors tipus PC.

Definiu:

  • Model MVC: definiu la classe controlador, la classe vista i la classe model. Poseu noms als mètodes per tal d'implementar el CRUD
  • Definiu la estructura de la taula MySQL on guardareu la info dels PCs.
  • Proposeu una taula que mostri la llista que utilitzi Datatables.
  • Classe Controlador.
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Main extends CI_Controller {
 
function __construct(){
parent::__construct();
  
}
 
public function index(){

}
 
public function listPc(){
}

public function createPc(){

}

public function deletePc(){

}

}
  • Classe Model
class Pcmodel extends CI_Model {

   

    function __construct()
    {
        
        parent::__construct();
    }
    
    function getPc()
    {
        
    }

    function insertPC()
    {
        
    }

    function updatePC()
    {
        
    }

}
  • Clase Vista
<html>
<head>
<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css"; @import "/media/css/header.ccss";
			@import "../../media/css/demo_table.css";

<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable();
			} );
		</script>

</head>
<body>
<table id="exemple">
<thead>
        <tr>
	    <th>id</th>
            <th>Marca</th>
            <th>Model</th>
            <th>Memoria</th>
	    <th>Capacitat</th>
	    <th>Processador</th>
<?php
if($query->num_rows() > 0)
{
    foreach($query->result() as $row)
    {
    echo "<tr>";
	echo "<td>".$row->id."</td>";
	echo "<td>".$row->marca."</td>";
	echo "<td>".$row->model."</td>";
	echo "<td>".$row->memoria."</td>";
        echo "<td>".$row->capacitat."</td>";
        echo "<td>".$row->processador."</td>";
	echo "<td>".'<a href='<?php $row->id ?>'><input type="button" name="boton"  value="Modificar" /></a> '. 
    '<input type="submit" name="boton" value="Eliminar"/>'."</td>";
	echo "</tr>";
    
}
}

?>
</table>
</body>
<html>
  • Estructura taula de MySql
CREATE TABLE IF NOT EXISTS `ordinador` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `marca` varchar(30) DEFAULT NULL,
  `model` varchar(30) NOT NULL,
  `memoria` varchar(30) NOT NULL,
  `capacitat` varchar(30) NOT NULL,
  `procesador`varchar(50) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Pregunta 3

Realitzeu el test de Jquery:

http://www.w3schools.com/quiztest/quiztest.asp

Apunteu els vostres encerts i desencerts i la nota final del test. Apunteu les preguntes traduïdes al català en aquest apartat

  1. Quina de les següents és la correcta? Resposta correcta!
  2. jQuery utilitza selectors CSS per seleccionar elements? Resposta correcta!
  3. Quin signe no fer servir jQuery com un accés directe per jQuery? La resposta és incorrecta!
  4. Amb jQuery, mira el següent selector: $ ("div"). Què es tria? Resposta correcta!
  5. És una biblioteca jQuery per seqüències d'ordres de client o servidor de seqüència? Resposta correcta!
  6. És possible utilitzar jQuery juntament amb AJAX? Resposta correcta!
  7. El mètode jQuery HTML () funciona per a HTML i XML documents Resposta correcta!
  8. Quin és el codi de jQuery correcta per establir el color de fons de tots els elements p a vermell? Resposta correcta!
  9. Amb jQuery, mira el següent selector: $ ("div.intro"). Què es tria? Resposta correcta!
  10. Quin mètode de jQuery s'utilitza per ocultar els elements seleccionats? Resposta incorrecta!
  11. Quin mètode de jQuery s'utilitza per establir una o diverses propietats d'estil dels elements seleccionats? Resposta correcta!
  12. Quin mètode de jQuery s'utilitza per realitzar una petició HTTP asíncrona? Resposta correcta!
  13. Quin és el codi de jQuery correcta de fer tots els elements div 100 píxels d'alt? Resposta correcta!
  14. Quina afirmació és certa? Resposta incorrecta!
  15. Quin llenguatge de programació està escrit en jQuery? Resposta correcta!
  16. Quina funció jQuery s'utilitza per evitar que el codi s'executi, abans que el document hagi acabat de carregar? Resposta correcta!
  17. Quin mètode de jQuery s'ha d'utilitzar per fer front als conflictes de noms? Resposta incorrecta!
  18. Quin mètode de jQuery s'utilitza per alternar entre afegir/eliminar d'una o més classes (per CSS) dels elements seleccionats? Resposta correcta!
  19. Mira el següent selector de jQuery: $ ("div # intro cap."). Què es tria? Resposta correcta!
  20. És jQuery un estàndard W3C? Resposta correcta!
Resultat:
16 de 20
80%
Gairebé! Estudiï una mica més i prendre l'examen de nou!

Exercici pràctic

Poseu aquí un enllaç a l'aplicació CRUD bàsica de gestió d'usuaris que heu fet a classe.

Entregueu:

  • Documentació: el codi ha d'estar explicat
  • El codi en format wiki
  • L'Enllaç al codi a github

Pàgina d'inici

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
        <div class="navbar-header">
          <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Menu Principal</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="create">Registrat</a></li>
            <li><a href="resetusers">Canvia contrasenya</a></li>
            <li><a href="modify">Modifica l'usuari</a></li>
          </ul>
        </div>
      </div>
      </div>
<div>
</br>
</br>
</br>
</br>
<ol>
Usuaris
<li><a href="http://localhost/codeigniterhelloworld/index.php/users/create"> Crea el teu usuari</a></li>
<li><a href="http://localhost/codeigniterhelloworld/index.php/users/modify"> Modifica el teu usuari </a></li>
<li><a href="http://localhost/codeigniterhelloworld/index.php/users/delete"> Elimina el teu usuari </a></li>
<li><a href="http://localhost/codeigniterhelloworld/index.php/users/listusers">   Llista els usuaris</a></li>
</ol>
<ol>
Configuracio
<li><a href="http://localhost/codeigniterhelloworld/index.php/config/reset"> Canvia la teva paraula de pas </a></li>
<li><a href="http://localhost/codeigniterhelloworld/index.php/config/sortir"> Sortir </a></li>
</ol>
</div>
	<footer>
        <p align="center">© Jordi Romero</p>
	</footer>
</body>
</html>

Pàgina llistar usuaris.

<html>
<head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

<script type="text/javascript" language="javascript" src="//localhost/codeigniterhelloworld/assets/DataTables/extras/TableTools/media/js/TableTools.js"></script>
<script type="text/javascript" language="javascript" src="//localhost/codeigniterhelloworld/assets/DataTables/extras/TableTools/media/js/TableTools.min.js"></script>

<script type="text/javascript" charset="utf-8">
/*
 * Example initialisation
 */
$(document).ready( function () {
	$('#taula').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"sSwfPath": "<?php  echo base_url('assets/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf');?>",
			 "aButtons": [
                                {
                                        "sExtends": "copy",
                                        "sButtonText": "Copia"
                                },
                                {
                                        "sExtends": "csv",
                                        "sButtonText": "CSV"
                                },
                                {
                                        "sExtends": "xls",
                                        "sButtonText": "XLS"
                                },
                                {
                                        "sExtends": "pdf",
                                        "sButtonText": "PDF"
                                },
                                {
                                        "sExtends": "print",
                                        "sButtonText": "Print"
                                },
                        ]
		}
	});
});
</script>

</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
        <div class="navbar-header">
          <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Llista Usuaris</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="create">Registrat</a></li>
            <li><a href="create">Canvia contrasenya</a></li>
            <li><a href="modify">Modifica l'usuari</a></li>
            <li><a href="/codeigniterhelloworld/application/views/inici.php">Menu Principal</a></li>
          </ul>
        </div>
      </div>
      </div>
<div>
</div>
</br>
</br>
</br>
</br>
Crea el teu usuari aquí <a href="create"><input type="button" class="btn btn-sm btn-success"  name="boton" value="Registrat"/></a></br>

<form action= "#" method="post">
<table id="taula" class="table table-hover table-condensed" border="1">
<thead>
        <tr>
	    <th>id</th>
            <th>Nom</th>
            <th>Data naixement</th>
            <th>Email</th>
	    <th>Opcions</th>	
<?php
if($query->num_rows() > 0)
{
    foreach($query->result() as $row)
    {
    echo "<tr>";
	echo "<td>".$row->id."</td>";
	echo "<td>".$row->nom."</td>";
	echo "<td>".$row->data_naixement."</td>";
	echo "<td>".$row->correu_electronic."</td>";
	echo "<td>".'<a href='<?php $row->id ?>'><input type="button" name="boton" class="btn btn-sm btn-primary" value="Modificar" /></a> '. 
    '<input type="submit" class="btn btn-sm btn-danger" name="boton" value="Eliminar"/>'."</td>";
	echo "</tr>";
    
}
}

?>
</table>
</form>

 

<footer>
        <p align="center">© Jordi Romero</p>
      <!--  <p><?php echo $hello;?></p> -->
	</footer>
</body>

</html>

  • Pàgina de controlador
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Users extends CI_Controller {
	
	function __construct() {
		parent::__construct();
		
		$this->load->model('user_model');
		$this->load->helper('url');
	}
	
	public function create(){
		
		
		$this->load->view('create');
		
	}
	
	public function createUser(){
		
		$id = $this->input->post('id'); 
		$nom = $this->input->post('nom');
		//$data_naixement = $this->input->post('data_naixement');
		$data_naixement = $this->input->post('data_naixement');
		$correu_electronic = $this->input->post('correu_electronic');
		$this->user_model->insertUser($id, $nom, $data_naixement, $correu_electronic);
		$this->load->view('create');
		
		
	}
	
	
	public function delete($id) {
		
		$this->load->view('delete');
	}
	public function modify($id){
		
		$id = $this->input->post('id'); 
		$users ['query'] = $this->user_model->updateUser();
				
		//$this->load->view('listusers', $users);
		$this->load->view('modify',$users);
	}
	public function listusers(){
		
		$users ['query'] = $this->user_model->getUser();
				
		$this->load->view('listusers', $users);
	
		
	}
	
}
  • El model.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class User_model extends CI_Model{


function __construct(){
	parent::__construct();
$this->load->database();
}
function hello(){

	return "Hello world";
}


function getUser(){


$query=$this->db->get('usuaris');

return $query;

}

function insertUser($id, $nom, $data_naixement, $correu_electronic){
	$data = array(
	'id' => $id,
	'nom'=> $nom,
	'data_naixement'=>$data_naixement,
	'correu_electronic'=>$correu_electronic); 
	
	return $this->db->insert('usuaris', $data);


}

function updateUser($id){
	
	
	$data = array(
	'id' => $id);
    $this->db->where('id', $id);
    $this->db->update('usuaris', $data);
	
	
	
}

function deleteUser($id){
	
	
	$data = array(
	'id' => $id);
	$this->db->where('id', $id);
	$this->db->delete('usuaris', $data);
}

}

?>

L'Enllaç al codi a github

https://github.com/jordiromero/codeigniter.git