Verwandte Themen

Frage
von arduinoinspace
02.05.2024, 15:29
Mit Links
Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>
Computer, HTML, IT, JavaScript, Anwendungsentwicklung, Arduino, Code, Programmiersprache, Webentwicklung, node.js, Visual Studio Code
1 Antwort
Frage
von PinguSpeedy
01.05.2024, 16:04
footer ist nicht sticky?

Es ist irgendwie etwas ganz komisch...

Der Footer der vom code her eigentlich sticky am ende der Website seien sollte, ist es nicht.

Ich habe bei .footer auch mal provisorisch background: red; reingemacht, aber da passiert irgendwie auch nicht so viel..

kann mir da jemand helfen, ich und Chat GPT checken es nicht xD (bin noch anfänger)

hier der HTML code vom footer:

<section class="footer">

<div class="footer-row">

<div class="footer-col">

<h4>Info</h4>

<ul class="links">

<li><a href="#">About Us</a></li>

<li><a href="#">Compressions</a></li>

<li><a href="#">Customers</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Collection</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Explore</h4>

<ul class="links">

<li><a href="#">Free Designs</a></li>

<li><a href="#">Latest Designs</a></li>

<li><a href="#">Themes</a></li>

<li><a href="#">Popular Designs</a></li>

<li><a href="#">Art Skills</a></li>

<li><a href="#">New Uploads</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Legal</h4>

<ul class="links">

<li><a href="#">Customer Agreement</a></li>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">GDPR</a></li>

<li><a href="#">Security</a></li>

<li><a href="#">Testimonials</a></li>

<li><a href="#">Media Kit</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Newsletter</h4>

<p>

Subscribe to our newsletter for a weekly dose

of news, updates, helpful tips, and

exclusive offers.

</p>

<form action="#">

<input type="text" placeholder="Your email" required>

<button type="submit">SUBSCRIBE</button>

</form>

<div class="icons">

<i class="fa-brands fa-facebook-f"></i>

<i class="fa-brands fa-twitter"></i>

<i class="fa-brands fa-linkedin"></i>

<i class="fa-brands fa-github"></i>

</div>

</div>

</div>

</section>

CSS Code vom footer:

.footer {

position: fixed;

bottom: 0;

left: 50%;

transform: translate(-50%, -50%);

max-width: 1280px;

width: 95%;

background: red;

border-radius: 6px;

}

.footer .footer-row {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap: 3.5rem;

padding: 60px;

background-color: darkslategrey;

}

.footer-row .footer-col h4 {

color: #fff;

font-size: 1.2rem;

font-weight: 400;

}

.footer-col .links {

margin-top: 20px;

}

.footer-col .links li {

list-style: none;

margin-bottom: 10px;

}

.footer-col .links li a {

text-decoration: none;

color: #bfbfbf;

}

.footer-col .links li a:hover {

color: #fff;

}

.footer-col p {

margin: 20px 0;

color: #bfbfbf;

max-width: 300px;

}

.footer-col form {

display: flex;

gap: 5px;

}

.footer-col input {

height: 40px;

border-radius: 6px;

background: none;

width: 100%;

outline: none;

border: 1px solid #7489C6 ;

caret-color: #fff;

color: #fff;

padding-left: 10px;

}

.footer-col input::placeholder {

color: #ccc;

}

.footer-col form button {

background: #fff;

outline: none;

border: none;

padding: 10px 15px;

border-radius: 6px;

cursor: pointer;

font-weight: 500;

transition: 0.2s ease;

}

.footer-col form button:hover {

background: #cecccc;

}

.footer-col .icons {

display: flex;

margin-top: 30px;

gap: 30px;

cursor: pointer;

}

.footer-col .icons i {

color: #afb6c7;

}

.footer-col .icons i:hover {

color: #fff;

}

@media (max-width: 768px) {

.footer {

position: relative;

bottom: 0;

left: 0;

transform: none;

width: 100%;

border-radius: 0;

}

.footer .footer-row {

padding: 20px;

gap: 1rem;

}

.footer-col form {

display: block;

}

.footer-col form :where(input, button) {

width: 100%;

}

.footer-col form button {

margin: 10px 0 0 0;

}

}

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
0 Antworten
Frage
von Master643
29.04.2024, 16:32
php-Zugriff auf mysql funktioniert nicht?

Ich habe folgende Funktion in PHP geschrieben:

function getName($id) {
                global $conn;
                $sql = "SELECT Vorname, Nachname FROM mitglieder WHERE ID = `$id`";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) {
                    $row = $result->fetch_assoc();
                    return $row['Vorname'] . " " . $row['Nachname'];
                } else {
                    return "";
                }
            }

Aber aus irgendeinem Grund kommt immer folgende Fehlermeldung:

Warning: Attempt to read property "num_rows" on bool in C:\xampp\htdocs\***********.php on line 35

Diese Variable $conn funktioniert aber an anderer Stelle im globalen Code außerhalb dieser Funktion einwandfrei wie gewünscht und ich sehe vom Code her keinen nennenswerten Unterschied.

Was ich bereits versucht habe:

  • $conn als Parameter an die Funktion zu übergeben
  • $conn in der Funktion selber zu definieren
  • $conn in der Funktion selber definieren und dass $conn im globalen Code entfernen
  • ChatGPT nach dem Fehler fragen
  • Folgende Fehlerabfrage einzubauen (dabei war $conn auch in der Funktion selber und NUR in der Funktion selber definiert):
if ($conn->connect_error) {
                die("Serverfehler: " . $conn->connect_error);
            }

Das führte aber nur zu folgender Fehlermeldung:

Warning: Attempt to read property "connect_error" on null in C:\xampp\htdocs\*********.php on line 26

Hat alles nichts geholfen. Wisst ihr wo der Fehler liegt?

Computer, Technik, SQL, HTML, Webseite, programmieren, JavaScript, Code, Datenbank, MySQL, PHP, Programmiersprache, Webentwicklung, phpMyAdmin, Programmierfehler
3 Antworten
Frage
von ellli602
26.04.2024, 12:55
Mail mit Nodemailer und Node.js-Server schicken?

Ich möchte eine Mail von einer html-Seite schicken lassen, auf welcher man die Sender-adresse und das Passwort des Senders angibt, habe aber ein Problem bei der Verbindung mit dem Server. Gedownloaded habe ich den Server, express, nodemailer, body-parser und cors.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Email Sender</title>
</head>
<body>
    <h1>Email Sender</h1>
    <input type="email" id="from" placeholder="Von Email">
    <input type="password" id="password" placeholder="Email Passwort">
    <input type="text" id="text" placeholder="Nachricht">
    <button onclick="sendEmail()">Email Senden</button>

    <script>
        function sendEmail() {
            var fromEmail = document.getElementById('from').value;
            var emailPassword = document.getElementById('password').value;
            var message = document.getElementById('text').value;
    
            fetch('/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ from: fromEmail, password: emailPassword, text: message })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                alert('E-Mail wurde erfolgreich gesendet!');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Fehler beim Senden der E-Mail: ' + error.message);
            });
        }
    </script>
    
</body>
</html>

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.post('/send', (req, res) => {
    const { from, password, text } = req.body;

    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: from,
            pass: password
        }
    });

    const mailOptions = {
        from: from,
        to: 'ziel-email@gmail.com',
        subject: 'Nachricht von meiner Website',
        text: text
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            console.log(error);
            res.status(500).send({ status: 'error', message: error.message });
        } else {
            console.log('Email sent: ' + info.response);
            res.send({ status: 'success', message: 'Email sent' });
        }
    });
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});
HTML, Webseite, JavaScript, Programmiersprache, Webentwicklung, Backend, node.js
0 Antworten

Meistgelesene Fragen zum Thema JavaScript

Mehr meistgelesene Fragen zu JavaScript