PHP - Agregar URL con datos obtenidos de consulta en base de datos

 
Vista:
sin imagen de perfil

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por Daniel (4 intervenciones) el 21/07/2021 23:06:35
Hola a Todos.

Ojala me puedan apoyar, resulta que actualmente tengo un buscador que realiza una consulta a una base de datos que tengo en mi servidor la cual al ingresar un código postal me regresa la información de la Colonia, ciudad, estado al que corresponde y funciona muy bien, pero por cuestiones de practicidad requiero agregar una ultima columna en la cual me aparezca un vinculo que al darle click me abra una pagina en google maps con la búsqueda de los datos que corresponden Colonia y Ciudad, pero no logro agregarlo

Ejemplo:
Yo realizo la búsqueda del código postal 07320
2021-07-21_15-58

Y me trae los resultados correspondientes a:
Código Postal Colonia Tipo de Colonia Municipio Estado Ciudad Tipo de Zona mapa

Pero donde dice Mapa necesito que aparezca una URL que me dirija a la pagina web de google maps donde donde se concatene el resultado de fila con la columna colonia+estado

https://www.google.com/maps?q=colonia+estado

He intentado varias cosas pero no logro que funcione les adjunto mi código para ver si me pueden ayudar.

De antemando muchas gracias y saludos a todos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
 
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
 
    <title>.: Consulta SEPOMEX :.</title>
  </head>
  <body>
    <div class="card">
        <div class="card-header">
            Consulta c&oacute;digo postal SEPOMEX
        </div>
        <div style="margin: 10px;">
            <form class="form-inline">
                <div class="form-group mx-sm-3 mb-2">
                    <label for="inputCodigoPostal" class="sr-only">C&oacute;digo Postal</label>
                    <input type="number" min="0" max="99999" class="form-control form-control-sm" id="inputCodigoPostal" maxlength="5" required>
                </div>
                <button id="btn-consultar" type="submit" class="btn btn-light mb-2 btn-sm mr-2">
                    <i class="fa fa-fw fa-search"></i>&nbsp;Buscar
                </button>
                <button id="btn-limpiar" type="submit" class="btn btn-light mb-2 btn-sm">
                    <i class="fa fa-fw fa-eraser"></i>&nbsp;Limpiar
                </button>
            </form>
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th scope="col">C&oacute;digo Postal</th>
                        <th scope="col">Colonia</th>
                        <th scope="col">Tipo de Colonia</th>
                        <th scope="col">Municipio</th>
                        <th scope="col">Estado</th>
                        <th scope="col">Ciudad</th>
                        <th scope="col">Tipo de Zona</th>
                        <th scope="col">mapa</th>
                    </tr>
                </thead>
                <tbody id="table-cp">
                </tbody>
            </table>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/Javascript">
        $(function(){
            $("#btn-consultar").click(function(event){
                event.preventDefault();
                var codigoPostal = $("#inputCodigoPostal").val();
                $("#table-cp").html("");
                $.ajax({
                    url: "codigos-postales.php",
                    type: 'GET',
                    data: {codigoPostal: codigoPostal},
                    dayaType: 'json',
                    success: function(data){
                        if($.trim(data) !== ''){
                            $.map( data, function( val, i ) {
                                $("#table-cp").append("<tr>"
                                    + "<th scope=\"row\">" + (val.CODIGO_POSTAL).padStart(5, "0") + "</th>"
                                    + "<td>" + val.COLONIA + "</td>"
                                    + "<td>" + val.TIPO_COLONIA + "</td>"
                                    + "<td>" + val.MUNICIPIO + "</td>"
                                    + "<td>" + val.ESTADO + "</td>"
                                    + "<td>" + val.CIUDAD + "</td>"
                                    + "<td>" + val.ZONA + "</td>"
                                    + "</tr>");
                            });
                        } else {
                            alert("Código postal " + codigoPostal + ", no encontrado.");
                        }
                    },
                    error: function(xhr, status, error){
                        alert("No se puede establecer conexión con servicio de consulta de código postal, favor de intentar más tarde");
                    }
                });
            });
 
            $("#btn-limpiar").click(function(event){
                event.preventDefault();
                $("#inputCodigoPostal").val("");
                $("#table-cp").html("");
            });
        });
    </script>
  </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de javier
Val: 1.542
Bronce
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por javier (500 intervenciones) el 22/07/2021 21:59:34
Hola

podrias añadir cuando la llamada ajax este lista algo como:

1
var goole = "<a href='https://www.google.com/maps?q='" + val.TIPO_COLONIA + "+" + val.ESTADO + "'>MAPA</a>";
saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por Daniel (4 intervenciones) el 22/07/2021 22:22:10
Hola Javier, muchas gracias por tu respuesta y apoyo.

Te comento intente implementar el cambio que me sugieres pero me da como resultado: undefined.
Seguramente mis pocos conocimientos en programación me están llevando a implementarlo mal, te envió un captura y el código como lo deje ojala me puedas apoyar para saber que corrección tengo que hacer.

Imagen del resultado implementado:
2021-07-22_15-19

Mi código como quedo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
 
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
 
    <title>.: Consulta SEPOMEX :.</title>
  </head>
  <body>
    <div class="card">
        <div class="card-header">
            Consulta c&oacute;digo postal SEPOMEX
        </div>
        <div style="margin: 10px;">
            <form class="form-inline">
                <div class="form-group mx-sm-3 mb-2">
                    <label for="inputCodigoPostal" class="sr-only">C&oacute;digo Postal</label>
                    <input type="number" min="0" max="99999" class="form-control form-control-sm" id="inputCodigoPostal" maxlength="5" required>
                </div>
                <button id="btn-consultar" type="submit" class="btn btn-light mb-2 btn-sm mr-2">
                    <i class="fa fa-fw fa-search"></i>&nbsp;Buscar
                </button>
                <button id="btn-limpiar" type="submit" class="btn btn-light mb-2 btn-sm">
                    <i class="fa fa-fw fa-eraser"></i>&nbsp;Limpiar
                </button>
            </form>
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th scope="col">C&oacute;digo Postal</th>
                        <th scope="col">Colonia</th>
                        <th scope="col">Tipo de Colonia</th>
                        <th scope="col">Municipio</th>
                        <th scope="col">Estado</th>
                        <th scope="col">Ciudad</th>
                        <th scope="col">Tipo de Zona</th>
                        <th scope="col">Mapa</th>
                    </tr>
                </thead>
                <tbody id="table-cp">
                </tbody>
            </table>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/Javascript">
        $(function(){
            $("#btn-consultar").click(function(event){
                event.preventDefault();
                var codigoPostal = $("#inputCodigoPostal").val();
                $("#table-cp").html("");
                $.ajax({
                    url: "codigos-postales.php",
                    type: 'GET',
                    data: {codigoPostal: codigoPostal},
                    dayaType: 'json',
                    success: function(data){
                        if($.trim(data) !== ''){
                            $.map( data, function( val, i ) {
                                $("#table-cp").append("<tr>"
                                    + "<th scope=\"row\">" + (val.CODIGO_POSTAL).padStart(5, "0") + "</th>"
                                    + "<td>" + val.COLONIA + "</td>"
                                    + "<td>" + val.TIPO_COLONIA + "</td>"
                                    + "<td>" + val.MUNICIPIO + "</td>"
                                    + "<td>" + val.ESTADO + "</td>"
                                    + "<td>" + val.CIUDAD + "</td>"
                                    + "<td>" + val.ZONA + "</td>"
                                    + "<td>" + val.google+"</td>"
                                    + "</tr>");
                                var google = "<a href='https://www.google.com/maps?q=" + val.TIPO_COLONIA + "+" + val.ESTADO + "'>MAPA</a>";
                            });
                        } else {
                            alert("Código postal " + codigoPostal + ", no encontrado.");
                        }
                    },
                    error: function(xhr, status, error){
                        alert("No se puede establecer conexión con servicio de consulta de código postal, favor de intentar más tarde");
                    }
                });
            });
 
            $("#btn-limpiar").click(function(event){
                event.preventDefault();
                $("#inputCodigoPostal").val("");
                $("#table-cp").html("");
            });
        });
    </script>
  </body>
</html>


Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.634
Plata
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por Alejandro (676 intervenciones) el 22/07/2021 23:00:01
1
2
3
4
5
6
7
8
9
10
11
12
13
$.map( data, function( val, i ) {
                                var google = "<a href='https://www.google.com/maps?q=" + val.TIPO_COLONIA + "+" + val.ESTADO + "'>MAPA</a>";
                                $("#table-cp").append("<tr>"
                                    + "<th scope=\"row\">" + (val.CODIGO_POSTAL).padStart(5, "0") + "</th>"
                                    + "<td>" + val.COLONIA + "</td>"
                                    + "<td>" + val.TIPO_COLONIA + "</td>"
                                    + "<td>" + val.MUNICIPIO + "</td>"
                                    + "<td>" + val.ESTADO + "</td>"
                                    + "<td>" + val.CIUDAD + "</td>"
                                    + "<td>" + val.ZONA + "</td>"
                                    + "<td>" + google+"</td>"
                                    + "</tr>");
                            });
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por Daniel (4 intervenciones) el 24/07/2021 00:07:28
Alejandro.

Agradezco el tiempo que te tomaste y el código que me compartiste para corregir mi error, el código funciono a la perfección gracias infinitas.

Saludos.




Captura-de-pantalla-de-2021-07-23-16-59-16
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de javier
Val: 1.542
Bronce
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por javier (500 intervenciones) el 23/07/2021 10:19:22
Hola,

es evidente que si primero quieres imprimir en pantalla el valor de una variable, primero declaras la variable y despues la imprimes en pantalla y no alreves, el código se ejecuta se arriba a abajo y lo quer hacer es decir, imprime en pantalla la variable google (la cual el código todavia no sabe cuasl es su valor) y a continuación declaras su valor. declara primero su valor y despues usala.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Agregar URL con datos obtenidos de consulta en base de datos

Publicado por Daniel (4 intervenciones) el 24/07/2021 00:06:01
Javier.

Muchas gracias por tus comentarios y apoyo.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar