JavaScript + PHP for accessing a MySQL DB in WordPress

First of all I want to thank all the StackOverflow community for your help. Thanks!!

As you can see on my first question, I’m new using WordPress, JavaScript and PHP (I have some knowledge of SQL, for my work) and I find some difficulties in some “simple” aspects. I’ve been looking for the answer of this problem but I haven’t found it, so I’ll be very grateful if someone can point some directions for me. Here’s the deal:

I have a very simple formulary as you can see here and all I want is to save the data in a table on my MySQL DB with my own SQL Query. It’s the same DB that is using WordPress. I looked a lot and finded a “easy” way of doing this with PHP+Javascript. The instructions where very clear.

1. Put this file (mysqlwslib.js) in your script folder (in my case the “js” folder in my theme folder):

–

var urlMysqlwsphp="../mysqlws.php";
var mysql_db_name ="revistae_wp1";
// ---------------------------------------

// Acceso a mysql
function mysql_use( dbname) {
    mysql_db_name = dbname; 
}
function mysql_select_query(query) {
    var c="selectQuery";
    var xmlresp = doRequest(c, query);
    return responseContent(xmlresp);
}
function mysql_update_query(query) {
    var c="updateQuery";
    var xmlresp = doRequest(c, query);
    return responseContent(xmlresp);    
}
function mysql_col_names(tableName) {
    var c="getColNames";
    var xmlresp = doRequest(c, tableName);
    return responseContent(xmlresp);
}
// ---------------------------
// Utilidades DOM-HTML
// ---------------------------
function $(elementId) {
    return document.getElementById(elementId);
}
function setElementContent( element, content) {
    // Asigna el valor de content a la propiedad
    // innerHTML del element. El element puede ser una
    // referencia o un String con el id
    var domElement=null;
    if(typeof element == 'string') {
        domElement = document.getElementById(element);
    }
    if (domElement != null) {
        domElement.innerHTML = content;         
    }
}
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function setElementHeight(obj, h) {
    if(typeof obj == 'string') {
        obj = $(obj);
    }   
    obj.style.height = h +'px';
}
function getElementHeight( obj) {
    var divHeight = 0;
    if(typeof obj == 'string') {
        obj = $(obj);
    }
    if(obj.offsetHeight) {
        divHeight=obj.offsetHeight;
    } else if(obj.style.pixelHeight){
        divHeight=obj.style.pixelHeight;
    }
    return divHeight;
}
function getWindowHeight() {
    var h = 0;
    if (typeof window.innerWidth != 'undefined') {
        h=window.innerHeight;
    } else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) {
        h = document.documentElement.clientHeight;
    } else {
        h = document.getElementsByTagName('body')[0].clientHeight;
    }
    return h;
}
function getWindowWidth() {  
    var w = 0;
    if (typeof window.innerWidth != 'undefined') {
        w = window.innerWidth;
    } else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) {
        w = document.documentElement.clientWidth;
    } else {
        w = document.getElementsByTagName('body')[0].clientWidth;
    }
    return w;  
}  
function getTamanoVentana() {
    var Tamanyo = [ 0, 0 ];
    if (typeof window.innerWidth != 'undefined') {
        Tamanyo = [ window.innerWidth, window.innerHeight ];
    } else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) {
        Tamanyo = [ document.documentElement.clientWidth,
                document.documentElement.clientHeight ];
    } else {
        Tamanyo = [ document.getElementsByTagName('body')[0].clientWidth,
                document.getElementsByTagName('body')[0].clientHeight ];
    }
    return Tamanyo;
}  
function createTableFromArray(arrayDatos, arrayCabeceras) {
    // Devuelve una <table>....</table> con los datos del arrayDatos
    // Si se incluye el parametro arrayCabeceras se inserta como fila 1
    // Se puede omitir el parametro arrayCabeceras
    // Devuelve : un String con la <table>...</table>
    var array = arrayDatos;
    if(arrayCabeceras != null) {
        if(arrayCabeceras.length == arrayDatos[0].length) {
            array.unshift(new Array());
            array[0]=arrayCabeceras;
        }
    }
    // Devuelve un array <table>...</table>
    var cad="";
    if(array == null ){
        return cad;
    }
    cad ="<table border='1'>";
    var nf, nc;
    if (array[0][0] != null) {
        // Es de dos dimensiones
        nf = array.length;
        nc = array[0].length;
        for(i=0; i< nf;  i++) {
            cad += "<tr>";
            for(j=0; j<nc; j++) {
                cad += "<td>"+array[i][j]+"</td>";
            }
            cad += "</tr>";
        }
    } else if (array[0] != null ){
        nf = 1;
        nc = array.length;
        cad += "<tr>";
        for(j=0; j<nc; j++) {
            cad += "<td>"+array[j]+"</td>";
        }
        cad += "</tr>";
    } else {
        nf = 1;
        nc = 1;
        cad += "<tr>";
        cad += "<td>"+array+"</td>";
        cad += "</tr>";
    }
    cad += "</table>";
    return cad;
}
/*
 * Utilidades de fechas
 */
function parseFechaUTC(cadfecha, cadhora) {
    // Parametros :
    //      cadfecha = "2010-12-21"
    //      cadhora = "12:00:00" (se puede omitir)
    // Devuelve :
    //      objeto Date
    var dt = new Date(); 
    var y = parseInt(cadfecha.substr(0,4));
    var m = parseInt(cadfecha.substr(5,2))-1;
    var d = parseInt(cadfecha.substr(8,2));
    dt.setUTCFullYear(y,m,d);
    var h = 0;
    var min = 0;
    var s = 0;
    if (cadhora != null) {
        h = parseInt(cadhora.substr(0,2));
        min = parseInt(cadhora.substr(3,2));
        s = parseInt(cadhora.substr(6,2));
    }
    dt.setUTCHours(h, min, s, 0);
    return dt;
}
function intToString(number, digits) {
    // Convierte en cadena un numero entero
    // Rellena con ceros a la izda hasta numero de digitos
    var cad = number.toString();
    if(cad.length < digits) {
        var dif = digits - cad.length;
        var ceros ="";
        for (var i=0; i<dif; i++) {
            ceros += "0";
        }
        cad = ceros + cad;
    }
    return cad;
}
function getCadFechaUTCFromJSDate(date) {
    var y = date.getUTCFullYear();
    var m = intToString(date.getUTCMonth()+1,2);
    var d = intToString(date.getUTCDate(),2);
    var cad = y +"-"+ m +"-"+ d;
    return cad;
}
function getCadHoraUTCFromJSDate(date) {
    var h = intToString(date.getUTCHours(),2);
    var m = intToString(date.getUTCMinutes(),2);
    var s = intToString(date.getUTCSeconds(),2);
    var cad = h +":"+ m +":"+ s;
    return cad;
}
// ----------------------------
// xmlresponse
// ----------------------------
function responseCode(xmlresp) {
    var lstCode = xmlresp.getElementsByTagName("statusCode");
    var cod = lstCode[0].childNodes[0].nodeValue;
    return cod;
}
function responseText(xmlresp) {
    var lstDesc = xmlresp.getElementsByTagName("statusText");
    var desc = lstDesc[0].childNodes[0].nodeValue;
    return desc;
}
function responseContent(xmlresp) {
    // Devuelve un array con el contenido.
    // El array puede ser multidimensional
    if(xmlresp == null) {
        return null;
    }
    var arResp = new Array();
    var lstCtnt = xmlresp.getElementsByTagName("content");
    var childs = lstCtnt[0].childNodes[0];
    if ((childs != null) && (childs.nodeType == 1)) {
        // Contenido elementos <item>
        var lstItem = lstCtnt[0].getElementsByTagName("item");
        var numItem = lstItem.length;
        for (i = 0; i < numItem; i++) {
            var ar = lstItem[i].childNodes[0].nodeValue.split(",");
            arResp.push(ar);
        }
    } else if ((childs != null) && (childs.nodeType == 3)) {
        // Contenido una cadena separada por comas
        var ctnt = lstCtnt[0].childNodes[0].nodeValue;
        arResp = ctnt.split(",");
    } else {
        arResp = null;
    }
    return arResp;
}
function alertXmlResp(responsexml) {
    var code = responseCode(responsexml);
    var txt = responseText(responsexml);
    var ctnt = responseContent(responsexml);
    alert(code + ", " + txt + "n" + ctnt);
}

// ---------------------------------
// AJAX Request
// ---------------------------------
function doRequest(comm, pars) {
    var req = new ajaxRequest();
    if (pars == "") {
        pars = "1";
    }
    var url = urlMysqlwsphp+"?db="+mysql_db_name+"&c=" + comm + "&p=" + pars;
    req.open("GET", url, false);
    req.send(null);
    return req.responseXML;
}
function loadXmlDoc(name) {
    var req = new ajaxRequest();
    req.open("GET", name, false);
    req.send(null);
    return req.responseXML;
}
function loadXMLString(txt) {
    if (window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(txt, "text/xml");
    } else { // Internet Explorer
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(txt);
    }
    return xmlDoc;
}
function ajaxRequest() {
    try {
        var request = new XMLHttpRequest();
    } catch (e1) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e2) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e3) {
                request = false;
            }
        }
    }
    return request;
}

2 Put this PHP file (mysqlws.php) in the parent folder (note that it’s refered in the previous file also, the connection data of this file was extracted from my wp-config.php file because the target table is in the same DB):

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-store, no-cache, must-revalidate");

// Los valores $host, $user, $pw, $db se deben de adaptar a cada instalación
$host="localhost";
$user=*{MyUser}*;
$pw=*{MyPass}*;
// Indicar el nombre de una base de datos que se abrirá por defecto
$db=*{MyDBName}*;


if(isset($_GET['c']) and isset($_GET['p'])) {
    $command=$_GET['c'];
    $params = $_GET['p'];
    if(isset($_GET['db'])) {
        $db = $_GET['db'];
    }
    $resp = processcommand($command, $params);
} else {
    $resp=createResponse(0, "ERROR", "Parametros HTTPGET incorrectos");
}
echo $resp;
return;

function processCommand($command, $params) {
    // processCommand
    // procesa un comando válido recibido en la llamada a la página. 
    // Es llamado desde el flujo principal
    // Distribuye el trabajo a la rutina correspondiente y
    // devuelve una respuesta en formato xml

    // Declarar la respuesta
    $respxml=null;

    // Derivar a la rutina adecuada
    if(strcmp("updateQuery",$command)== 0) {
        $respxml=updateQuery($params);
    } else if (strcmp("selectQuery",$command)==0) {
        $respxml=selectQuery($params); 
    } else if (strcmp("getColNames",$command)==0) {
        $respxml=getColNames($params); 
    } else {
        $respxml=createResponse(0,"ERROR","El comando no existe");
    }

    return $respxml;
}


function updateQuery($query) {
// Ejecuta un comando tipo UPDATE, INSERT, DELETE,... en la base de datos
// $query = String con el comando   
// devuelve: xmlresponse con el resultado

    GLOBAL $host, $user, $pw, $db;

    // Abrir la conexión con mysql
    $conn = opendb($host, $user, $pw, $db);
    if(!$conn) {
        return createResponse(-2,"ERROR","Error de conexión.-$conn");
    }


    // Realizar la consulta a la B.D.
    $result=mysql_query($query, $conn);

    $ar = mysql_affected_rows();

    $cod = 0;
    $text ="ERROR";
    $desc ="-1";

    if($result == true) {
        $cod = 0;
        $text ="OK";
        $desc =$ar; 
    }
    $response = createResponse($cod,$text,$desc);

    // Cerrar la conexión
    closedb($conn);

    // Devolver el resultado
    return $response;
};

function selectQuery($query) {
// Ejecuta un comando tipo SELECT en la base de datos
// query = String con el comando    
// devuelve: xmlresponse con el resultado

    GLOBAL $host, $user, $pw, $db;

    // Abrir la conexión con mysql
    $conn = opendb($host, $user, $pw, $db);
    if(!$conn) {
        return createResponse(-2,"ERROR","Error de conexión.-$conn");
    }

    // Realizar la consulta a la B.D.
    $result=mysql_query($query, $conn);

    if ($result) {
        $nc = mysql_num_fields($result);

        $cad="";
        while( $row = mysql_fetch_array($result, MYSQL_BOTH)) {
            $cad .="<item>";
            for($i=0; $i<$nc; $i++) {
                $cad .= $row[$i];
                if($i<$nc-1) {
                    $cad .= ",";
                }
            }
            $cad .= "</item>";
        }

        mysql_free_result($result);

        $response = createResponse(1, "OK", $cad);
    } else {
        $response = createResponse(0, "ERROR", "Error en la llamada SQL"); 
    }
    // Cerrar la conexión
    closedb($conn);

    // Devolver el resultado
    return $response;
};

function getColNames($nombreTabla) {
    // Devuelve un array con los nombres de las columnas de la 
    // tabla pasada como argumento
    // Si error devuelve array nulo;    

    // Establecer las variables globales
    GLOBAL $host, $user, $pw, $db;

    // Abrir la conexión con mysql
    $conn = opendb($host, $user, $pw, $db);
    if(!$conn) {
        return createResponse(-2,"ERROR","Error de conexión.-$conn");
    }

    // Realizar la consulta a la B.D.
    $query = "SELECT * FROM $nombreTabla";
    $result=mysql_query($query, $conn);
    if ($result) {

        $numcols = mysql_num_fields($result);

        $resp = "";
        for($i=0; $i< $numcols; $i++) {
            $resp .= mysql_field_name($result, $i);
            if($i < $numcols-1) {
                $resp .= ",";
            }   
        }
        mysql_free_result($result);
        $response = createResponse(1, "OK", $resp);

    } else {
        $response = createResponse(0, "ERROR", "Error en acceso SQL");

    }


    // Cerrar la conexión
    closedb($conn);

    // Devolver el resultado
    return $response;
};

function opendb($host, $user, $pw, $db) {
    // opendb
    // Establece conexión con el servidor $host y hace un USE de la base de datos $db
    // Parametros:
    //    $host
    //    $user
    //    $pw : password
    //    $db : Base de datos sobre la que se hará el USE 
    // Devuelve:
    //    Referencia a la conexión abierta o null si hay errores
    //
    $conn = mysql_connect($host, $user, $pw);
    if(!$conn) {
        return null;
    }
    //echo "connected<br/>";
    $resp = mysql_select_db($db, $conn);
    if($resp != true) {
        return null;
    }
    //echo "used<br/>";
    return $conn;
};

function closedb($conn) {
    // closedb()
    // Cierra la conexión con la base de datos
    // Parámetros:
    //     $conn Referencia al recurso de la conexión con la B.D.
    // Devuelve
    //     void
    if(!$conn) {
        return;
    }
    mysql_close($conn);
};

function createArrayFromCadParams($cadParams) {
    // Recibe como entrada la cadena de parametros separados por comas
    // y devuelve un Array con los parametros separados
    $arrayParams=array();
    if (strlen($cadParams)!=0) {
        if(strpos($cadParams, ',')>0) {
            $arrayParams =  explode(',',$cadParams);
        } else {
            $arrayParams[0]=$cadParams;
        }
    }
    return $arrayParams;
};

function createResponse($code, $text, $content) {
    // createResponse($code, $descrip, $content)
    //      Genera un documento XML del tipo <regataResponse>.
    //      (Ver su constitución en la documentación del programa)
    // Parámetros:
    //
    // Devuelve:
    //
    $doc=new DOMDocument('1.0');
    $cadxml="<wsResponse>";
    $cadxml=$cadxml."<statusCode>$code</statusCode>";
    $cadxml=$cadxml."<statusText>$text</statusText>";
    $cadxml=$cadxml."<content>$content</content>";
    $cadxml=$cadxml."</wsResponse>";
    $doc->loadXML($cadxml);
    return $doc->saveXML();
};

function createResponseFromCode($code) {
    // createResponseFromCode($code)
    //      Genera un documento XML del tipo <wsResponse>.
    //      OK para códigos >0 y ERROR para codigos <= 0        
    // (Ver su constitución en la documentación del programa)
    // Parámetros:
    //
    // Devuelve:
    //
    $text="ERROR";
    $content = "ERROR";
    if($code>0) {
        $text="OK";
        $content ="OK";
    }
    $doc=new DOMDocument('1.0');
    $cadxml="<wsResponse>";
    $cadxml=$cadxml."<statusCode>$code</statusCode>";
    $cadxml=$cadxml."<statusText>$text</statusText>";
    $cadxml=$cadxml."<content>$content</content>";
    $cadxml=$cadxml."</wsResponse>";
    $doc->loadXML($cadxml);
    return $doc->saveXML();
};
?>

3 And reference the script in the header file:
[…]

<script src="mysqlws.js"></script>

[…]

Then I try to implement my code in another js file, where I have all the logic of the formulary:

[…]

function liberar()
  {
    var SQLguardar = null;
    var fecha = new Date();
    var indice = null;
    //Compruebo si existe dirección en el formulario
    //Esto es necesario porque si no han introducido una no se cambiarán las coordenadas.
    if(document.getElementById("direccion").value !='')
    {

        txtDireccion = document.getElementById("direccion").value;
        txtObservaciones = document.getElementById("observaciones").value;
        txtNumRev = document.getElementById("numerorevista").value;
        txtLat = document.getElementById("lat").value;
        txtLng = document.getElementById("long").value;

        //alert ("Comenzando Guardado. Datos: "+txtDireccion+", "+txtObservaciones+", "+txtNumRev+", "+txtLat+", "+txtLng+".");

        //Definimos la consulta que guardará el nuevo punto

        SQLguardar = "INSERT INTO wp_leafletmapsmarker_markers (markername, basemap, layer, lat, lon, icon, popuptext, zoom, openpopup, mapwidth, mapwidthunit, mapheight, panel, createdby, createdon, updatedby, updatedon, controlbox, overlays_custom, overlays_custom2, overlays_custom3, overlays_custom4, wms, wms2, wms3, wms4, wms5, wms6, wms7, wms8, wms9, wms10, kml_timestamp, address) VALUES ('Ecléctica nº "+ txtNumRev+"', 'osm_mapnik', 3, "+ txtLat +", "+ txtLng+", 'text.png', '"+txtObservaciones+"', 17, 0, 640, 'px', 480, 0, 'revista','"+ fecha.getFullYear()+"/"+fecha.getMonth()+"/"+fecha.getDate()+"', NULL, NULL, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, NULL, '"+txtDireccion+"');";

        mysql_use("localhost",*{MyDBUser}*,*{MyDBPass}*,*{MyDBName}*);

        var arrayResult = mysql_update_query(SQLguardar);

        alert ("Resultado: "+arrayResult[0]);   

    }else alert ("ATENCION: No se ha introducido una Direcci"+'u00f3'+"n.  Por favor introduzca una direcci"+'u00f3'+"n, pulse 'Pasar al mapa' y afine la localizaci"+'u00f3'+"n con el marcador");

  }

My problem is that it dont save anything. When I press the button (Liberar!!!) the formulary reload with a correct PHP direction, but in the DB I can’t find the new row. Also the last “alert” that must show the result never pops up… You can see the formulary here. I know the execution reaches this method because if the first alert is uncommented it shows the variables, but when It try to execute the query, the page is reloaded and nothing is saved…

Plz can some one point me my mistake? How can I see the result message? Is there any other way to use your own SQL querys? This formulary is part of a project and I’ll need to use my own SQL querys to access, work and save data.

Thank you very much for your time and help.