JavaScript

A backend app.js összes module-a, amikre szükség lehet.

//!Module-ok importálása
const express = require('express'); //?npm install express
const session = require('express-session'); //?npm install express-session
const path = require('path');
const fs = require('fs');

const app = express();
const router = express.Router();
//!SQL Queries importálása
const db = require(path.join(__dirname + '/sql/db-queries'));

//!Multer
const multer = require('multer');
const storage = multer.diskStorage({
    destination: './uploads',
    filename: (request, file, callback) => {
        callback(null, file.originalname);
    }
});
const upload = multer({ storage: storage });

<!--Illetve a db-queries.js-ben-->
const mysql = require('mysql');

Frontendben is tudjuk a module-t használni. Body aljára kell rakni egy <script type="module" src="index.js">.
Egy példa hogyan tudunk exportálni, majd importálni objektumot vagy függvényt.

// math.js
function add(a, b) {
    return a + b;
}
module.exports = add;

// index.js
const add = require('./math');
console.log(add(2, 3)); // Kimenet: 5

<!--Egyszerre többet is tudunk exportálni-->
// utils.js
module.exports = {
appName: 'MyApp',
version: '1.0.0',
multiply: (a, b) => a * b,
users: ['Alice', 'Bob', 'Charlie']
};

// main.js
const utils = require('./utils');
console.log(utils.appName); // Kimenet: 'MyApp'
console.log(utils.version); // Kimenet: '1.0.0'
console.log(utils.multiply(2, 3)); // Kimenet: 6
console.log(utils.users); // Kimenet: ['Alice', 'Bob', 'Charlie']

Post - Fetch

function postMethodFetch(url, postObject) {
    return fetch(url, {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(postObject)
})
    .then((response) => {
        if (!response.ok) {
        throw new Error(`Hiba: ${response.status}`);
    }
    return response.json();
    })
    .catch((error) => {
        throw new Error(`Hiba történt: ${error.message}`);
    });
}

Használata:
const url = url;
const postObject = {
    title: 'foo',
    body: 'bar',
    userId: 1
};
postMethodFetch(url, postObject)
    .then((data) => {
        console.log('Siker:', data);
    })
    .catch((error) => {
        console.error(error.message);
    });

Post - Fetch, promise

function postMethodFetch(url, postObject) {
    return new Promise((resolve, reject) => {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postObject)
        })
        .then((response) => {
            if(!response.ok) {
                reject(`Hiba: ${response.status}`);
            }
            return response.json();
        })
        .then((data) => {
            resolve(data);
        })
        .catch((error) => {
            reject(`Hiba történt: ${error.message}`);
        });
    });
}

Használata:
const url = url; // Egy teszt API
const postObject = {
    title: 'foo',
    body: 'bar',
    userId: 1
};
postMethodFetch(url, postObject)
    .then((data) => {
        console.log('Sikeres válasz:', data);
    })
    .catch((error) => {
        console.error('Hiba történt:', error);
    });

const postJsonFetch = (url, data) => {
    return new Promise((resolve, reject) => {
        fetch(url,
            {
                method: 'POST',
                body: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then((response) => {
                if (!response.ok) {
                    reject('Hiba: ' + response.status);
                }
                return response.json();
            })
            .then((data) => {
                resolve(data)
            })
            .catch((error) => {
                reject('Hiba: ' + error);
            });
    })
}

const postFormDataFetch = (url, formData) => {
    return new Promise((resolve, reject) => {
        fetch(url,
            {
                method: 'POST',
                body: formData
            })
            .then((response) => {
                if (!response.ok) {
                    reject('Hiba: ' + response.status);
                }
                return response.json();
            })
            .then((data) => {
                resolve(data)
            })
            .catch((error) => {
                reject('Hiba: ' + error);
            });
    })
}

const getFetch = (url) => {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    reject(`Hiba: ${response.status}`)
                }
                return response.json();
            })
            .then((data) => {
                resolve(data)
            })
            .catch((error) => {
                reject(`Hiba: ${error}`)
            });
    })
}

app.get('/api/getDatabaseDatas', async (request, response) => 
{
    try
    {
        const datas = await db.getDatasFromDatabase()
        res.status(200).json({ datas });
    }
    catch(err)
    {
        console.log("Error: " + err)
        res.status(500).json({ error: err });
    }
});

app.get('/api/getDatasById/:id', async (request, response) =>
{
    try
    {
        const id = request.params.id;
    
        const datas = await db.getDatasById(id);

        res.status(200).json({ datas });
    }
    catch(err)
    {
        console.log("Error: " + err)
        res.status(500).json({ error: err });
    }
})

app.post('/api/postJsonDatas/', async (request, response) =>
{
    try
    {
        const datas = request.body;
    
        await db.insertDatas(datas.jsondata1, datas.jsondata2, datas.jsondata3);

        response.json({message: "siker!"})
    }
    catch(err)
    {
        console.log("Error: " + err)
        response.json({error: err});
    }
})

app.post('/api/insertFormdata/', upload.single('file'), async (request, response) =>
{
    try
    {
        const formData = request.body;
    
        await db.insertNagydij(formData.formdata1, formData.formdata2, formData.formdata3);

        response.json({message: "siker!"})
    }
    catch(err)
    {
        console.log("Error: " + err)
        response.json({error: err});
    }
})

function getDatasById(id) 
{
    return new Promise((resolve, reject) => 
    {
        pool.query('SELECT * FROM tabla_nev WHERE id = ?;', [id], (err, result, fields) => 
        {
            if (err) return reject(err);
            resolve(result);
        });
    });
}

function insertDatas(data1, data2, data3) 
{
    return new Promise((resolve, reject) => 
    {
        pool.query('INSERT INTO tabla_nev (tabla_oszlop1, tabla_oszlop2, tabla_oszlop3) VALUES (?, ?, ?);', [data1, data2, data3], (err, result, fields) => 
        {
            if (err) return reject(err);
            resolve(result);
        });
    });
}

function updateData(id, newData1, newData2, newData3) {
    return new Promise((resolve, reject) => {
        pool.query(
            'UPDATE tabla_nev SET tabla_oszlop1 = ?, tabla_oszlop2 = ?, tabla_oszlop3 = ? WHERE id = ?;',
            [newData1, newData2, newData3, id],
            (err, result, fields) => {
                if (err) return reject(err);
                resolve(result);
            }
        );
    });
}

Táblagenerálás + meghívás Kárpáti szerint.


function pTableWrite(data){
    const hova=document.getElementById("projektBody");
    hova.innerHTML=null;
    for(let i=0;i < data.length;i++)
    {
        let sor = document.createElement("tr");
        sor.dataset=data[i].id;
        let name = document.createElement("td");
        name.innerHTML = data[i].name;
        let description = document.createElement("td");
        description.innerHTML = data[i].description;
        sor.appendChild(name);
        sor.appendChild(description);
        hova.appendChild(sor);
    }
}

document.addEventListener('DOMContentLoaded', async function () {
    pTableWrite(await selectProjekt());
    document.getElementById("newProjekt").addEventListener("click", async function () {
        if ((await NewProjekt()).affectedRows > 0) {
            pTableWrite(await selectProjekt());
        }
    });
    document.getElementById('deleteFormFeladat').addEventListener('click', resetFeladatForm);
});

Select részei


Backend (db-queries.js)
function selectAll() {
    return new Promise((resolve, reject) => {
        pool.query('SELECT * FROM tabla;', (err, result, fields) => {
            if (err) return reject(err);
            resolve(result);
        });
    });
}
module.exports = {
    selectAll
};

Backend (app.js)
app.get('/api/selectall', (request, response) => {
    db.selectAll()
        .then((data) => {
            response.json(data);
        })
        .catch((err) => {
            console.error('Error:', err);
        });
});

Frontend (script)
async function SelectAll() {
    let response = fetch("/api/selectall", {
        method: "GET"
    });
    return (await response).json();
}

Insert részei


Backend (db-queries.js)
function insert(tomb) {
    return new Promise((resolve, reject) => {
        pool.query('INSERT INTO tabla (adat) VALUES (?);', [tomb], (err, result) => {
            if (err) return reject(err);
            resolve(result);
        });
    });
}
module.exports = {
    insert
};

Backend (app.js)
app.post('/api/insert',upload.single('file') , (request, response) => {
    let tomb = [];
    tomb.push(request.body.adat);
    db.insert(tomb)
        .then((data) => {
            response.json(data);
        })
        .catch((err) => {
            console.error('Error:', err);
        });
});

Frontend (script)
async function Insert() {
    let formData = new FormData(document.getElementById("formid"));
    let response = fetch("/api/insert", {
        method: "POST",
        body: formData
    })
    return (await response).json();
}

Delete részei


Backend (db-queries.js)
function delete(tomb) {
    return new Promise((resolve, reject) => {
        pool.query('DELETE FROM tabla WHERE id = ?;',tomb,(err, result) => {
                if (err) return reject(err);
                resolve(result);
            }
        );
    });
}

module.exports = {
    delete
};

Backend (app.js)
app.post('/api/delete',upload.single('file') , (request, response) => {
    let tomb = [];
    tomb.push(request.body.id);
    db.deleteAuto(tomb)
        .then((data) => {
            response.json(data);
        })
        .catch((err) => {
            console.error('Error:', err);
        });
});

Frontend (script)
async function Delete(formData) {
    let response = fetch("/api/delete", {
        method: "POST",
        body: formData
    })
    return (await response).json();
}

async function Delete(id) {
    const response = await fetch("/api/delete", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id })
    });
    return await response.json();
}

Update részei


Backend (db-queries.js)
function update(tomb) {
    return new Promise((resolve, reject) => {
        pool.query('UPDATE tabla SET adat=1 WHERE id=?;', tomb, (err, result) => {
            if (err) return reject(err);
            resolve(result);
        });
    });
}

module.exports = {
    update
};

Backend (app.js)
app.post('/api/update',upload.single('file') , (request, response) => {
    let tomb = [];
    tomb.push(request.body.id);
    db.update(tomb)
        .then((data) => {
            response.json(data);
        })
        .catch((err) => {
            console.error('Error:', err);
        });
});

Frontend (script)
async function update(formData) {
    let response = fetch("/api/update", {
        method: "POST",
        body: formData
    })
    return (await response).json();
}

Táblázatba minden checkbox bejelölése és meghívása


function checkAll(tbody) {
    let tabla = tbody.parentElement;
    let cbAll = tabla.children[0].children[0].children[0].children[0].checked;
    for (let i = 0; i < tbody.children.length; i++) {
        tbody.children[i].children[0].children[0].checked = cbAll;
    }
}

document.getElementById("checkboxid").addEventListener("change", function () {
        checkAll(document.getElementById("tbodyid"))
    })


const selectVarosBtn = () => {
    const tbody = document.getElementById('varosBody');
    let i = 0;
    while (i < tbody.children.length && tbody.children[i].dataset.selected !== 'true') {
        i++;
    }
    if (i < tbody.children.length) {
        const selected = tbody.children[i];
        const cells = selected.children;
        const form = document.getElementById('varosForm');

        document.getElementById('vnev').value = cells[0].textContent;
        document.getElementById('jaras').value = cells[1].textContent;
        document.getElementById('kisterseg').value = cells[2].textContent;
        document.getElementById('nepesseg').value = cells[3].textContent;
        document.getElementById('terulet').value = cells[4].textContent;

        form.dataset.selectedid = selected.dataset.id;
    }
};