PHP+MySql+AJAX+Javascript, como fazer para inserir, consultar e alterar uma imagem na index?
06/12/2020
0
Pessoal, sou iniciante na programação e estou bem perdida nesse junção de PHP+MySql+AJAX+Javascript.
Em uma disciplina nos foi pedido que mudássemos o status de uma lâmpada (ligada ou desligada) sem que fossemos direcionados para outra página.
Eu já pesquisei no W3, em outros locais, mas a junção de todas essas linguagem ficou uma bagunça, então resolvi pedir ajuda.
Postarei o código que fiz e solicito que alguém me informe meu erro. Na index.html há um fórmulário com várias informações, pois estava testanto de tudo. A sexta lâmpada muda de estados e é inserida no BD, no entanto é um submit e me faz carregar nova página...
**index.html
<html >
<meta charset="UTF-8" />
<head>
<title>Lista 04 - Parte 20</title>
<link rel="stylesheet" href="design_index.css">
</head>
<body>
<script>
function fun(ld, lampada,id) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("luz1").innerHTML = this.statusText;
}
};
xhttp.open("GET", "server.php?id=luz1", false);
xhttp.send();
var pic;
if (ld == 0) {
pic = "Loff.png";
} else {
pic = "Lon.png";
}
document.getElementById("luz"+lampada).src = pic;
}
</script>
<form action="server.php" method="GET">
<p id="result"> Resultado </p>
<div id="luz1">
<img id="luz1" src="Loff.png">
<input type= "button" name="lamp1_liga" value="Liga" onclick= "fun(1,1,luz1)" ></input>
<input type= "button" name="lamp2_desliga" value="Desliga" onclick= "fun(0,1,luz1)" ></input>
<img id="luz2" src="Loff.png">
<input type= "button" name="lamp2_liga" value="Liga" onchange="atualiza(picture)" onclick= "fun(1,2)" ></input>
<input type= "button" name="lamp2_desliga" value="Desliga" onchange="atualiza(picture)" onclick= "fun(0,2)" ></input>
<img id="luz3" src="Loff.png">
<input type= "button" name="lamp3_liga" value="Liga" onchange="atualiza(picture)" onclick= "fun(1,3)" ></input>
<input type= "button" name="lamp3_desliga" value="Desliga" onchange="atualiza(picture)" onclick= "fun(0,3)" ></input>
<img id="luz4" src="Loff.png">
<button type= "button" name="lamp4_liga" value="<?php echo $lamp4_liga; ?>" onclick= "fun(1,4)" >Liga</button>
<button type= "button" name="lamp4_desliga" value="<?php echo $lamp4_desliga; ?>" onclick= "fun(0,4)" >Desliga</button>
<img id="luz5" src="Loff.png">
<button type= "button" name="lamp5_liga" value="<?php echo $lamp5_liga; ?>" onclick= "fun(1,5)" >Liga</button>
<button type= "button" name="lamp5_desliga" value="<?php echo $lamp5_desliga; ?>" onclick= "fun(0,5)" >Desliga</button>
<img id="luz6" src="Loff.png">
<input type= "submit" name="lamp6_liga" value="Liga" onclick= "fun(1,6,acessa)" ></input>
<input type= "submit" name="lamp6_desliga" value="Desliga" onclick= "fun(0,6,apagada)" ></input> </p>
</form>
</div>
</body>
</html>
**server.php
<?php
function connection(){
$servername = "localhost";
$username = "root";
$password = "";
$bd = "internetdascoisas";
$conexao = mysqli_connect($servername, $username, $password, $bd);
if ($conexao->connect_error) {
die("A conexão falhou: " . $conexao->connect_error);
}
// echo "Conectado com sucesso <br>";
}
function alterar_estado(){
if (isset($_GET['lamp1_liga'])) {
$lamp1 = "acessa";
}else {
$lamp1 = "apagada";
}
if (isset($_GET['lamp2_liga'])) {
$lamp2 = "acessa";
}else {
$lamp2 = "apagada";
}
if (isset($_GET['lamp3_liga'])) {
$lamp3 = "acessa";
}else {
$lamp3 = "apagada";
}
if (isset($_GET['lamp4_liga'])) {
$lamp4 = "acessa";
}else {
$lamp4 = "apagada";
}
if (isset($_GET['lamp5_liga'])) {
$lamp5 = "acessa";
}else {
$lamp5 = "apagada";
}
if (isset($_GET['lamp6_liga'])) {
$lamp6 = "acessa";
}else {
$lamp6 = "apagada";
}
$servername = "localhost";
$username = "root";
$password = "";
$bd = "internetdascoisas";
// $lamp1 = $_GET {['lamp1_liga'] || ['lamp1_desliga']};
$alterar1 = "UPDATE lampadas SET estado = '{$lamp1}' WHERE lamp='l1' ";
$alterar2 = "UPDATE lampadas SET estado = '{$lamp2}' WHERE lamp='l2' ";
$alterar3 = "UPDATE lampadas SET estado = '{$lamp3}' WHERE lamp='l3' ";
$alterar4 = "UPDATE lampadas SET estado = '{$lamp4}' WHERE lamp='l4' ";
$alterar5 = "UPDATE lampadas SET estado = '{$lamp5}' WHERE lamp='l5' ";
$alterar6 = "UPDATE lampadas SET estado = '{$lamp6}' WHERE lamp='l6' ";
$conexao = mysqli_connect($servername, $username, $password, $bd);
$resultado1 = mysqli_query($conexao, $alterar1)or die(mysqli_error($conexao));
$resultado2 = mysqli_query($conexao, $alterar2)or die(mysqli_error($conexao));
$resultado3 = mysqli_query($conexao, $alterar3)or die(mysqli_error($conexao));
$resultado4 = mysqli_query($conexao, $alterar4)or die(mysqli_error($conexao));
$resultado5 = mysqli_query($conexao, $alterar5)or die(mysqli_error($conexao));
$resultado6 = mysqli_query($conexao, $alterar6)or die(mysqli_error($conexao));
}
function mostrar(){
$servername = "localhost";
$username = "root";
$password = "";
$bd = "internetdascoisas";
$mostra1 = "SELECT estado FROM lampadas WHERE lamp='l1'";
$conexao = mysqli_connect($servername, $username, $password, $bd);
$result_mostra1 = mysqli_query($conexao, $mostra1)or die(mysqli_error($conexao));
$rows1 = mysqli_fetch_array($result_mostra1);
if ($rows1['estado'] =='acessa') {
echo "<img src='Lon.png' width=50 height=80/>";
}else {
echo "<img src='Loff.png' width=50 height=80/>";
}
Help.
Em uma disciplina nos foi pedido que mudássemos o status de uma lâmpada (ligada ou desligada) sem que fossemos direcionados para outra página.
Eu já pesquisei no W3, em outros locais, mas a junção de todas essas linguagem ficou uma bagunça, então resolvi pedir ajuda.
Postarei o código que fiz e solicito que alguém me informe meu erro. Na index.html há um fórmulário com várias informações, pois estava testanto de tudo. A sexta lâmpada muda de estados e é inserida no BD, no entanto é um submit e me faz carregar nova página...
**index.html
<html >
<meta charset="UTF-8" />
<head>
<title>Lista 04 - Parte 20</title>
<link rel="stylesheet" href="design_index.css">
</head>
<body>
<script>
function fun(ld, lampada,id) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("luz1").innerHTML = this.statusText;
}
};
xhttp.open("GET", "server.php?id=luz1", false);
xhttp.send();
var pic;
if (ld == 0) {
pic = "Loff.png";
} else {
pic = "Lon.png";
}
document.getElementById("luz"+lampada).src = pic;
}
</script>
<form action="server.php" method="GET">
<p id="result"> Resultado </p>
<div id="luz1">
<img id="luz1" src="Loff.png">
<input type= "button" name="lamp1_liga" value="Liga" onclick= "fun(1,1,luz1)" ></input>
<input type= "button" name="lamp2_desliga" value="Desliga" onclick= "fun(0,1,luz1)" ></input>
<img id="luz2" src="Loff.png">
<input type= "button" name="lamp2_liga" value="Liga" onchange="atualiza(picture)" onclick= "fun(1,2)" ></input>
<input type= "button" name="lamp2_desliga" value="Desliga" onchange="atualiza(picture)" onclick= "fun(0,2)" ></input>
<img id="luz3" src="Loff.png">
<input type= "button" name="lamp3_liga" value="Liga" onchange="atualiza(picture)" onclick= "fun(1,3)" ></input>
<input type= "button" name="lamp3_desliga" value="Desliga" onchange="atualiza(picture)" onclick= "fun(0,3)" ></input>
<img id="luz4" src="Loff.png">
<button type= "button" name="lamp4_liga" value="<?php echo $lamp4_liga; ?>" onclick= "fun(1,4)" >Liga</button>
<button type= "button" name="lamp4_desliga" value="<?php echo $lamp4_desliga; ?>" onclick= "fun(0,4)" >Desliga</button>
<img id="luz5" src="Loff.png">
<button type= "button" name="lamp5_liga" value="<?php echo $lamp5_liga; ?>" onclick= "fun(1,5)" >Liga</button>
<button type= "button" name="lamp5_desliga" value="<?php echo $lamp5_desliga; ?>" onclick= "fun(0,5)" >Desliga</button>
<img id="luz6" src="Loff.png">
<input type= "submit" name="lamp6_liga" value="Liga" onclick= "fun(1,6,acessa)" ></input>
<input type= "submit" name="lamp6_desliga" value="Desliga" onclick= "fun(0,6,apagada)" ></input> </p>
</form>
</div>
</body>
</html>
**server.php
<?php
function connection(){
$servername = "localhost";
$username = "root";
$password = "";
$bd = "internetdascoisas";
$conexao = mysqli_connect($servername, $username, $password, $bd);
if ($conexao->connect_error) {
die("A conexão falhou: " . $conexao->connect_error);
}
// echo "Conectado com sucesso <br>";
}
function alterar_estado(){
if (isset($_GET['lamp1_liga'])) {
$lamp1 = "acessa";
}else {
$lamp1 = "apagada";
}
if (isset($_GET['lamp2_liga'])) {
$lamp2 = "acessa";
}else {
$lamp2 = "apagada";
}
if (isset($_GET['lamp3_liga'])) {
$lamp3 = "acessa";
}else {
$lamp3 = "apagada";
}
if (isset($_GET['lamp4_liga'])) {
$lamp4 = "acessa";
}else {
$lamp4 = "apagada";
}
if (isset($_GET['lamp5_liga'])) {
$lamp5 = "acessa";
}else {
$lamp5 = "apagada";
}
if (isset($_GET['lamp6_liga'])) {
$lamp6 = "acessa";
}else {
$lamp6 = "apagada";
}
$servername = "localhost";
$username = "root";
$password = "";
$bd = "internetdascoisas";
// $lamp1 = $_GET {['lamp1_liga'] || ['lamp1_desliga']};
$alterar1 = "UPDATE lampadas SET estado = '{$lamp1}' WHERE lamp='l1' ";
$alterar2 = "UPDATE lampadas SET estado = '{$lamp2}' WHERE lamp='l2' ";
$alterar3 = "UPDATE lampadas SET estado = '{$lamp3}' WHERE lamp='l3' ";
$alterar4 = "UPDATE lampadas SET estado = '{$lamp4}' WHERE lamp='l4' ";
$alterar5 = "UPDATE lampadas SET estado = '{$lamp5}' WHERE lamp='l5' ";
$alterar6 = "UPDATE lampadas SET estado = '{$lamp6}' WHERE lamp='l6' ";
$conexao = mysqli_connect($servername, $username, $password, $bd);
$resultado1 = mysqli_query($conexao, $alterar1)or die(mysqli_error($conexao));
$resultado2 = mysqli_query($conexao, $alterar2)or die(mysqli_error($conexao));
$resultado3 = mysqli_query($conexao, $alterar3)or die(mysqli_error($conexao));
$resultado4 = mysqli_query($conexao, $alterar4)or die(mysqli_error($conexao));
$resultado5 = mysqli_query($conexao, $alterar5)or die(mysqli_error($conexao));
$resultado6 = mysqli_query($conexao, $alterar6)or die(mysqli_error($conexao));
}
function mostrar(){
$servername = "localhost";
$username = "root";
$password = "";
$bd = "internetdascoisas";
$mostra1 = "SELECT estado FROM lampadas WHERE lamp='l1'";
$conexao = mysqli_connect($servername, $username, $password, $bd);
$result_mostra1 = mysqli_query($conexao, $mostra1)or die(mysqli_error($conexao));
$rows1 = mysqli_fetch_array($result_mostra1);
if ($rows1['estado'] =='acessa') {
echo "<img src='Lon.png' width=50 height=80/>";
}else {
echo "<img src='Loff.png' width=50 height=80/>";
}
Help.
Rosane
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)
