Implement dynamic dependent location select boxes

database/db.sql

@@ -8,6 +8,10 @@ GRANT ALL PRIVILEGES ON practica.* TO practica@localhost;
 
 USE practica;
 
+source database/provincias.sql;
+
+source database/municipios.sql;
+
 CREATE TABLE IF NOT EXISTS paciente (
        id INT AUTO_INCREMENT PRIMARY KEY,
        nombre VARCHAR(50) NOT NULL,
@@ -16,12 +20,15 @@ CREATE TABLE IF NOT EXISTS paciente (
        documento_identificativo VARCHAR(50) UNIQUE NOT NULL,
        tipo_documento VARCHAR(10) NOT NULL,
        direccion VARCHAR(255) NOT NULL,
-       localidad VARCHAR(100) NOT NULL,
+       localidad SMALLINT(6) UNSIGNED,
-       provincia VARCHAR(50) NOT NULL,
+       provincia SMALLINT(6),
-       pais VARCHAR(100) NOT NULL
+       pais VARCHAR(100) NOT NULL,
+       FOREIGN KEY (localidad)
+       REFERENCES municipios(id_municipio),
+       FOREIGN KEY (provincia)
+       REFERENCES provincias(id_provincia)
 );
 
-
 CREATE TABLE IF NOT EXISTS rol(
        codigo INT PRIMARY KEY,
        nombre VARCHAR(25) NOT NULL
@@ -64,7 +71,7 @@ CREATE TABLE IF NOT EXISTS calendario (
        medico VARCHAR(50),
        PRIMARY KEY (id, medico),
        FOREIGN KEY (medico)
-       REFERENCES usuario(rol)
+       REFERENCES usuario(usuario)
 );
 
 CREATE TABLE IF NOT EXISTS cita(
@@ -74,7 +81,7 @@ CREATE TABLE IF NOT EXISTS cita(
        duracion INT,
        medico VARCHAR(50) NOT NULL,
        observaciones VARCHAR(255),
-       paciente INT,
+       paciente INT NOT NULL,
        PRIMARY KEY (id, medico),
        FOREIGN KEY (medico)
        REFERENCES usuario(usuario),
@@ -86,7 +93,7 @@ CREATE TABLE IF NOT EXISTS informe(
        id INT AUTO_INCREMENT,
        fecha DATE NOT NULL,
        hora TIME NOT NULL,
-       paciente VARCHAR(50) NOT NULL,
+       paciente INT NOT NULL,
        titulo VARCHAR(100) NOT NULL,
        contenido VARCHAR(255) NOT NULL,
        medico VARCHAR(50) NOT NULL,

database/provincias.sql

@@ -0,0 +1,75 @@
+# ------------------------------------------------------------
+# Listado de provincias españolas 2012.
+#
+# Datos extraídos del INE (Instituo Nacional de Estadística).
+#
+# El campo id_provincia debería coincidir con los dos primeros dígitos del código postal
+# de la provincia. Los que tienen un dígito, añadir el 0 delante.
+#
+# Ejemplo:
+# Dado un código postal 08031, tomamos los dos primeros dígitos (08) y vemos que pertenence a prov. Barcelona,
+# Similarmente el código postal 44652 => 44 => província de Teruel
+#
+# Albert Lombarte
+# Twitter: @alombarte
+# ------------------------------------------------------------
+
+CREATE TABLE `provincias` (
+  `id_provincia` smallint(6) PRIMARY KEY,
+  `provincia` varchar(30) DEFAULT NULL
+) ENGINE=InnoDB;
+
+INSERT INTO `provincias` (`id_provincia`, `provincia`)
+VALUES
+	(2,'Albacete'),
+	(3,'Alicante/Alacant'),
+	(4,'Almería'),
+	(1,'Araba/Álava'),
+	(33,'Asturias'),
+	(5,'Ávila'),
+	(6,'Badajoz'),
+	(7,'Balears, Illes'),
+	(8,'Barcelona'),
+	(48,'Bizkaia'),
+	(9,'Burgos'),
+	(10,'Cáceres'),
+	(11,'Cádiz'),
+	(39,'Cantabria'),
+	(12,'Castellón/Castelló'),
+	(51,'Ceuta'),
+	(13,'Ciudad Real'),
+	(14,'Córdoba'),
+	(15,'Coruña, A'),
+	(16,'Cuenca'),
+	(20,'Gipuzkoa'),
+	(17,'Girona'),
+	(18,'Granada'),
+	(19,'Guadalajara'),
+	(21,'Huelva'),
+	(22,'Huesca'),
+	(23,'Jaén'),
+	(24,'León'),
+	(27,'Lugo'),
+	(25,'Lleida'),
+	(28,'Madrid'),
+	(29,'Málaga'),
+	(52,'Melilla'),
+	(30,'Murcia'),
+	(31,'Navarra'),
+	(32,'Ourense'),
+	(34,'Palencia'),
+	(35,'Palmas, Las'),
+	(36,'Pontevedra'),
+	(26,'Rioja, La'),
+	(37,'Salamanca'),
+	(38,'Santa Cruz de Tenerife'),
+	(40,'Segovia'),
+	(41,'Sevilla'),
+	(42,'Soria'),
+	(43,'Tarragona'),
+	(44,'Teruel'),
+	(45,'Toledo'),
+	(46,'Valencia/València'),
+	(47,'Valladolid'),
+	(49,'Zamora'),
+	(50,'Zaragoza');

src/ajax.js

@@ -0,0 +1,19 @@
+$(document).ready(function()
+{
+    $("#provincia").change(function()
+    {
+        var id_provincia = $(this).val();
+        var post_id = 'id='+ id_provincia;
+
+        $.ajax({
+            type: "POST",
+            url: "../ajax.php",
+            data: post_id,
+            cache: false,
+            success: function(response)
+            {
+                $("#localidad").html(response);
+            }
+        });
+    });
+});

src/ajax.php

@@ -0,0 +1,14 @@
+<?php
+include 'database.php';
+
+if($_POST['id']) {
+    $pdo = connectDatabase();
+    $cities = fetchCities($pdo, $_POST['id']);
+
+    foreach($cities as $row){
+        echo '"<option value="'.$row[0].'">'.$row[4].'</option>';
+    }
+    
+    closeDatabase($pdo);
+}
+?>

src/database.php

@@ -148,4 +148,20 @@ function findPatient($pdo, $input) {
     return $data;
 }
 
+function fetchCities($pdo, $id){
+    $query = "SELECT * FROM municipios WHERE id_provincia=?";
+    $result = $pdo->prepare($query);
+    $result->execute([$id]);
+    $data = $result->fetchAll();
+    return $data;
+}
+
+function fetchRegions($pdo){
+    $query = "SELECT * FROM provincias";
+    $result = $pdo->prepare($query);
+    $result->execute();
+    $data = $result->fetchAll();
+    return $data;
+}
+
 ?>

src/forms/patient_create_form.php

@@ -5,8 +5,16 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../static/style.css" type="text/css" media="screen" />
+    <script src="../../static/jquery-3.5.1.min.js"></script>
+    <script src="../ajax.js"></script>
 </head>
 <body>
+    <?php
+    include '../database.php';
+
+    $pdo = connectDatabase();
+    $regions = fetchRegions($pdo);
+    ?>
     <form method="post" action="../patient_management.php">
         <div class="input-group">
             <label>Nombre</label>
@@ -36,12 +44,18 @@
             <input type="text" name="direccion" value="">
         </div>
         <div class="input-group">
-            <label>localidad</label>
+            <label>provincia</label>
-            <input type="text" name="localidad" value="">
+            <select id="provincia" name="provincia">
+                <?php foreach($regions as $row) : ?>
+                    <option value="<?php echo $row[0]; ?>"><?php echo $row[1]; ?></option>
+                <?php endforeach ?>
+            </select>
         </div>
         <div class="input-group">
-            <label>provincia</label>
+            <label>localidad</label>
-            <input type="text" name="provincia" value="">
+            <select id="localidad" name="localidad">
+                <option>Selecciona la localidad</option>
+            </select>
         </div>
         <div class="input-group">
             <label>pais</label>
@@ -51,4 +65,5 @@
             <button class="btn" type="submit" name="create" >Guardar</button>
         </div>
     </form>
+    <?php closeDatabase($pdo); ?>
 </body>

src/patient.php

@@ -3,14 +3,14 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>Gestión de usuarios</title>
+        <title>Gestión de pacientes</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="../static/style.css" type="text/css" media="screen" />
     </head>
     <body>
         <div style="text-align: right; margin-top: 20px;">
-            <a href="forms/patient_create_form.html" class="create_btn" >Crear</a>
+            <a href="forms/patient_create_form.php" class="create_btn" >Crear</a>
         </div>
         <table>
             <thead>
@@ -21,8 +21,8 @@
                     <th>Documento identificativo</th>
                     <th>Tipo de documento</th>
                     <th>Dirección</th>
-                    <th>Localidad</th>
                     <th>Provincia</th>
+                    <th>Localidad</th>
                     <th>Pais</th>
                     <th>Citas</th>
                     <th>Informes</th>

src/validate_id.js

@@ -0,0 +1,23 @@
+function validateDNI(dni) {
+    var number, let, letra;
+    var expresion_regular_dni = /^[XYZ]?\d{5,8}[A-Z]$/;
+
+    dni = dni.toUpperCase();
+
+    if(expresion_regular_dni.test(dni) === true){
+        number = dni.substr(0,dni.length-1);
+        number = number.replace('X', 0);
+        number = number.replace('Y', 1);
+        number = number.replace('Z', 2);
+        let = dni.substr(dni.length-1, 1);
+        number = number % 23;
+        letra = 'TRWAGMYFPDXBNJZSQVHLCKET';
+        letra = letra.substring(number, number+1);
+        if (letra != let) {
+            return false;
+        }else{
+            return true;
+        }
+        return false;
+    }
+}