ChuJALT
Aporte: Control de acceso, Arduino + wifi + php + javascript + MySql - Versión para impresión

+- ChuJALT (https://chujalt.com)
+-- Foro: PLACAS DE PROTOTIPOS Y MINI PC'S (https://chujalt.com/forum-22.html)
+--- Foro: Anduino, Nodemcu, Wemos (https://chujalt.com/forum-23.html)
+--- Tema: Aporte: Control de acceso, Arduino + wifi + php + javascript + MySql (/thread-6.html)


Control de acceso, Arduino + wifi + php + javascript + MySql - chujalt - 05-03-2021

Saludos....

Os voy a mostrar como hacer un control de acceso vía Wifi utilizando la placa arduino, mas un poco de código php, javascript y base de datos Mysql. De esta manera podemos loguearnos desde cualquier dispositivo que este conectado a internet, un pc, una tablet, un teléfono, etc, sin necesidad de que nuestra placa Arduino este conectada por cable a nuestro PC.


Materiales utilizados:


[Imagen: WIFI-HLK-RM04.jpg]



[Imagen: lcd_i2c.jpg]



[Imagen: led_rgb.jpg]



Conexiones:


Software necesario:


El sistema lo que hace es mostrar en la pantalla del lcd la frase "ESPERANDO DATOS" mientras el led está en color azul parpadeante.
Cuando ponemos desde la página web el código, si éste es correcto la pantalla lcd muestra "Saludos + nombre de usuario" y el led se pone de color verde. Si el código es incorrecto, no existe, la pantalla muestra "Sin acceso. Código erroneo" y muestra el led de color rojo. A los 5 segundos se reseatea y vuelve a mostrar "ESPERANDO DATOS" con led azul parpadeante.

Cabe decir que se puede ampliar para que, por ejemplo, accione un relé para abrir una puerta o lo que se os ocurra.



Código para la placa arduino:

Código:
#include <Wire.h>
#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x27, 2, 1, 0, 4, 5, 6, 7, 3, POSITIVE);
int redPin = 11;
int greenPin = 10;
int bluePin = 9;
void setup()  
{
 Serial.begin(57600);  
pinMode(redPin, OUTPUT);
 pinMode(greenPin, OUTPUT);
 pinMode(bluePin, OUTPUT);
 lcd.begin(16,2);  

 lcd.backlight();
 lcd.setCursor(4,0);
 lcd.print("ESPERANDO");
 lcd.setCursor(6,1);
 lcd.print("DATOS");  
while(!Serial.available()) {
 digitalWrite(bluePin, HIGH);
 delay(500);
 digitalWrite(bluePin, LOW);
 delay(500);
}
}
String f = "";
void loop()
 {
boolean has_request = false;
 String in = "";
   if (Serial.available()) {
in = "";
   while (true) {  
      while (Serial.available() == false) {}
     in += (char)(Serial.read());
     if (in.endsWith("\r\n")) {
       has_request = true;  break;
     }
   }  
 }
 if (has_request) {
   char i1 = in.indexOf("GET /mensaje?f="), i2;
   if (i1 != -1) {
     i2 = in.indexOf(" ", i1+15);
     f = in.substring(i1+15, i2);
   }    
    if (f == "aaa")
       {
         lcd.clear();
          lcd.setCursor(3,0);
    lcd.print("SIN ACCESO");
    lcd.setCursor(1,1);
       lcd.write("CODIGO ERRONEO");
       digitalWrite(bluePin, LOW);
 digitalWrite(greenPin, LOW);
 digitalWrite(redPin, HIGH);
 pagina();

       }
       else
       {
          lcd.clear();
     lcd.setCursor(4,0);
    lcd.print("SALUDOS");
    lcd.setCursor(1,1);
    f.replace("+", " ");
       lcd.print(f);
       digitalWrite(bluePin, LOW);
 digitalWrite(greenPin, HIGH);
 digitalWrite(redPin, LOW);
  pagina();
       }
 
    has_request = false;  
   
   }
     delay(5000);
   digitalWrite(greenPin, LOW);
 digitalWrite(redPin, LOW);  
 software_Reset() ;
 }
 void pagina()
 {

   Serial.println("HTTP/1.1 200 OK");
   Serial.println("Content-Type: text/html");

   String sr = "<!DOCTYPE HTML>\n";
   sr += "<html>\n";
   sr += "<head>\n";
   sr += "<meta http-equiv='Refresh' content='0;url=http://192.168.1.11/arduino/wifi/acceso/index.php'>\n";
   sr += "</head>\n";
   sr += "<body>\n";    
   sr += "</body>";  
   sr += "</html>";
   Serial.print("Content-Length: ");
   Serial.print(sr.length());
   Serial.print("\r\n\r\n");
   Serial.print(sr);  
 }
void software_Reset()
{
asm volatile ("  jmp 0");  
}  


Comentario del código:



Código pagina principal php:

Código PHP:
<html>
<head>
<title>teclado en pantalla</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="robots" content="NOINDEX,NOFOLLOW"> 
<script language="JavaScript" type="text/javascript">
// Comprueba Navegador y Plataforma del pc
var clientPC = navigator.userAgent.toLowerCase(); // Coge info cliente
var clientVer = parseInt(navigator.appVersion); // Coge versión navegador
 
var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;
 
var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);
 
function imprm(bot) {
var txtarea = document.getElementById('ta');
var tecla = new Array('1','2','3','4','5','6','7','8','9','0');
txtarea.value+=tecla[bot];
txtarea.focus();
return;
}
 
function imprM(bot) {
var txtarea = document.getElementById('ta');
var teclaM = new Array
txtarea.value+=teclaM[bot];
txtarea.focus();
return;
}
 
 
var capa1
var capa2
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
 
function teclado() {
   if (ns4) {
     capa1 = document.c1
     capa2 = document.c2
  }
 if (ie4) {
   capa1 = c1.style
   capa2 = c2.style
 }
 if (ns6) {
   capa1 = document.getElementById('c1').style
   capa2 = document.getElementById('c2').style
 }
}
 
function muestra(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
else if (ns6) obj.visibility = "visible"
}
function oculta(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
else if (ns6) obj.visibility = "hidden"
}
 
 
function borrar() {
var txtarea = document.getElementById('ta');
if ((clientVer >= 4) && is_ie && is_win) {
var txtSeleccion = document.selection.createRange().text;
 
    if (document.selection) {
 
        if (!txtSeleccion) {
        txtarea.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart ('character', -txtarea.value.length);
        curPos = Sel.text.length;
        txtarea.value=txtarea.value.substr(0,txtarea.value.length-1);
        return(curPos);
        }
 
        txtarea.focus();
        var Sel = document.selection.createRange();
        document.selection.createRange().text = "";
        Sel.moveStart ('character', -txtarea.value.length);
        curPos = Sel.text.length;
        return(curPos);
    }
}
 
 
 
 
 
 
else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
 
    {
 
    var selLargo = txtarea.textLength;
    var selEmpz = txtarea.selectionStart;
    var selFin = txtarea.selectionEnd;
    var s1 = (txtarea.value).substring(0,selEmpz);
    var s2 = (txtarea.value).substring(selFin, selLargo);
    txtarea.value =  s1 +  s2;
    return(selEmpz);    
 
}
else
{
 
    var selLargo = txtarea.textLength;
    txtarea.value = txtarea.value.substr(0,txtarea.value.length-1);
    var Cursor = txtarea.textLength;
    return(Cursor); 
 
}
    almznaCursor(txtarea);
}
 
function almznaCursor(textEl) {
    if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
 
 
function PosicionCursor(pos) {
var txtarea = document.getElementById('ta');
 
    //Firefox
    if (txtarea .setSelectionRange) {
        txtarea .focus();
        txtarea .setSelectionRange(pos,pos);
    }
    else if (txtarea .createTextRange) {
        var rango = txtarea .createTextRange();
        rango.collapse(true);
        rango.moveEnd('character', pos);
        rango.moveStart('character', pos);
        rango.select();
    }
}
 
function EliminarCaracter()
{
    PosicionCursor(borrar());
}
 
</script>
<style type="text/css">
#juan {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
#andres {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -70%);
    -webkit-transform: translate(-50%, -70%);
}
</style>
</head>
<body onLoad="teclado();">
 <div id="juan">
<form method="POST" action="">
<input type="password" id="ta" name="pepe" size="9"><br><br>
<div id="c1">
<input type="button" id="1" value="1" onclick="imprm(0);" />
<input type="button" id="2" value="2" onclick="imprm(1);" />
<input type="button" id="3" value="3" onclick="imprm(2);" /><br>
<input type="button" id="4" value="4" onclick="imprm(3);" />
<input type="button" id="5" value="5" onclick="imprm(4);" />
<input type="button" id="6" value="6" onclick="imprm(5);" /><br>
<input type="button" id="7" value="7" onclick="imprm(6);" />
<input type="button" id="8" value="8" onclick="imprm(7);" />
<input type="button" id="9" value="9" onclick="imprm(8);" /><br>
<input type="button" id="10" value="0" onclick="imprm(9);" />
<input type="button" id="eliminar_caracter" value="Borrar" onclick="EliminarCaracter()" style="width:58px; height:20px; text-align:center; font-size:10px;" />
<br><br><input type="submit" id="60" value="ENVIAR" style="width:90px; height:20px; text-align:center; font-size:10px;"/> 
</div>

</form>
</div>
<div id="andres">
<?
$password = $_POST['pepe'];
if(!isset($password)) {
echo "";
   }
else
{
  include("conex.php");
 $cons = "select * from usuarios where contraseña='$password'";
$datos = mysql_query($cons,$link);
if ($row = mysql_fetch_array($datos,1))
{
    ?>
<SCRIPT LANGUAGE="JavaScript">
        window.onload = function() {
    alert("Enhorabuena <? echo $row["usuario"]; ?>. Tu código es correcto");
};
</SCRIPT>    
<form name='acceso' action='http://192.168.1.254:8080/mensaje' method='GET'>
<input type='hidden' name='f' value= '<? echo $row["usuario"]; ?>'>
</form>
<SCRIPT LANGUAGE="JavaScript">window.setTimeout(function() {
  document.acceso.submit();
});</SCRIPT>
<?
}
else
{
?>    
    <SCRIPT LANGUAGE="JavaScript">
        window.onload = function() {
    alert("El código de acceso no es correcto.");
};
</SCRIPT>
<form name='acceso' action='http://192.168.1.254:8080/mensaje' method='GET'>
<input type='hidden' name='f' value='aaa'>
</form>
<SCRIPT LANGUAGE="JavaScript">window.setTimeout(function() {
  document.acceso.submit();
});</SCRIPT>
<?
}
}
?>
 </div>
</body>
</html> 


Comentario del código:


[Imagen: teclado.png]


Código pagina conex.php:

Código PHP:
<?
 $link = mysql_connect("localhost" ,"usuario","contraseña") or die("no se da conectado");
mysql_select_db("acceso",$link) or die("no se da seleccionado");
?>

Este código no necesita comentario.



En relación a la base de datos... se deberá crear una con el nombre "acceso", con una única tabla llamada "usuarios" compuesta por tres campos "id" "usuario" y "contraseña".


Bueno ya está... espero que le sirva a alguien.... Saludos