Untitled

//index
<!DOCTYPE html>
<html>
    <head>
        <title>StudentWebApp - Create and Update</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="SPA MVC REST Web App">
        <meta name="keywords" content="HTML,CSS,XML,JavaScript">
        <meta name="author" content="John Doe">
        <link rel="stylesheet" type="text/css" href="Css/Reset.css" />
        <link rel="stylesheet" type="text/css" href="Css/View.css" />
        <script src="Js/muddle.js"></script>
    </head>
    <body>
        <header>
            <img src="Img/logo.png" alt="application logo" /><h1>Students management app</h1>
        </header>
        <nav>
            <ul id="navTabs">
                <li id="btnShowStudentPage" onclick="showStudentPage()">Create / Update</li>
                <li id="btnShowStudentsPage" onclick="showStudentsPage()">Read / Delete</li>
                <li id="btnShowLoginPage" onclick="showLoginPage()">Login/Logout</li>
            </ul>
        </nav>
        <main>
            <!-- User Message Page -->
            <section id="pgMessage" class="error">
                <span id="lblMessage">

                </span>
                <span id="btnHideMessagePage" onclick="hideMessagePage()">
                    ×
                </span>
            </section>

            <!-- Create Update Page -->
            <section id="pgStudent">
                <h2>Student information</h2>
                <form>
                    <ul>
                        <li>
                            <label for="txtStudentName">What's your name? <abbr title="required">*</abbr></label>
                            <input type="text" id="txtStudentName" placeholder="your name" />
                        </li>
                        <li>
                            <label for="txtStudentAge">How old are you? <abbr title="required">*</abbr></label>
                            <input type="text" id="txtStudentAge" placeholder="your age" />
                        </li>
                        <li>
                            <input type="button" id="btnSubmitStudent" value="Send information" onclick="sendData()"/>
                        </li>
                        <li>
                            <input type="button" id="btnResetStudent" value="Reset information" />
                        </li>
                    </ul>
                    <small>All fields marked with an asterisk (*) are required.</small>
                </form>
            </section>

            <!-- Read Delete Page -->
            <section id="pgStudents">
                <h2>Students list</h2>
                <table id="studentsList">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Update</th>
                        <th>Delete</th>
                    </tr>
                    <tr>
                        <td>Alfreds Ferkiste</td>
                        <td>24</td>
                        <td class="update"></td>
                        <td class="delete"></td>
                    </tr>
                    <tr>
                        <td>Maria Anders</td>
                        <td>32</td>
                        <td class="update"></td>
                        <td class="delete"></td>
                    </tr>
                </table>
            </section>
            <section id="pgLogin">
                <h2>Login Page</h2>
                <form>
                    <ul>
                        <li>
                            <label for="txtUsername">What's your username? <abbr title="required">*</abbr></label>
                            <input type="text" id="txtUsername" placeholder="your username" />
                        </li>
                        <li>
                            <label for="txtPassword">What's your password? <abbr title="required">*</abbr></label>
                            <input type="text" id="txtPassword" placeholder="your password" />
                        </li>
                        <li>
                            <input type="button" id="btnLogin" value="Login" />
                        </li>
                        <li>
                            <input type="button" id="btnLogout" value="Logout" />
                        </li>
                    </ul>

                </form>
            </section>
        </main>
        <footer>
            <small>Copyright "Ștefan cel Mare" University of Suceava</small>
        </footer>
    </body>
</html>
//--------------------------------------------------------------------------------------------------------------------------------------------


//javascript
// a shortcut for html element (dom = document object model)
function dom(id) {
    return document.getElementById(id);
}

function showStudentPage() {
    dom("pgStudent").style.display = "block";
    dom("pgStudents").style.display = "none";
    dom("pgLogin").style.display="none";
}
function showStudentsPage() {
    dom("pgStudent").style.display = "none";
    dom("pgStudents").style.display = "block";
    dom("pgLogin").style.display="none";
}
function showLoginPage()
{
    dom("pgStudent").style.display="none";
    dom("pgStudents").style.display="none";
    dom("pgLogin").style.display="block";
}
function hideMessagePage() {
    dom("pgMessage").style.display = "none";
}


function sendData() {
    let errorMessages = getErrorMessages();
    if (errorMessages !== "") {
        // if there are errors, show them in msg div
        dom("lblMessage").innerHTML = errorMessages;
    } else {
        // if all values are ok
        // create an object with values
        let name = dom("txtStudentName").value;
        let age = dom("txtStudentAge").value;
        //let spec = dom("spec").options[dom("spec").selectedIndex].innerHTML;
        let student = {
            name: name,
            age: age
            //spec: spec
        };
        console.log(student);
        // the xhr object will serve for performing HTTP request
        let xhr = new XMLHttpRequest();
        // the request will be of type POST and will address "/student" route
        xhr.open("POST", "/student");
        // the request will send json, UTF8 data
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        // transmit the object converted to JSON
        xhr.send(JSON.stringify(student));
        // every time when a change in HTTP request status occures
        xhr.onreadystatechange = function () {
            // if HTTP request is DONE
            if (xhr.readyState === 4) {
                // if status is ok
                if (xhr.status === 200) {
                    dom("lblMessage").innerHTML = "Datele au fost salvate cu succes.";
                // if status is not ok
                // display error message and the response from server
                } else {
                    dom("lblMessage").innerHTML = "Eroare server la salvarea datelor." + xhr.responseText;
                }
            }
        };
    }
}

function getErrorMessages() {
    // this variable will sum up all the error messages
    let errorMessages = "";
    // perform 'name' validation
    if (!isNameValid()) {
        errorMessages += "Numele trebuie să aibă lungimea cuprinsă între 3 și 50 caractere.";
        //markForWrongValue(dom("name"));
    }
    // perform 'grade' validation
    if (!isAgeValid()) {
        errorMessages += "Varsta incorecta";
        //markForWrongValue(document.getElementById("grade"));
    }

    return errorMessages;
}
function isNameValid() {
    let name = dom("txtStudentName");
    if (name.value.length < 3 || name.value.length > 50) {
        return false;
    }
    return true;
}
function isAgeValid() {
    let age = dom("txtStudentAge");
    if (isNaN(age.value) || age.value < 10 || age.value > 100) {
        return false;
    }
    return true;
}
//-----------------------------------------------------------------------------------------------------------------------------------------


//server
let express = require('express');
let path = require('path');
let bodyParser = require('body-parser');
let mysql = require('mysql');

let app = express();

// Define the static folder
app.use(express.static(path.join(__dirname, 'public')));

// Neded for parsing json data
app.use(bodyParser.json());
// define rutes
app.post('/student', function (req, res) {
    // get data from client request
    let name = req.body.name;
    let age = req.body.age;
    //let spec = req.body.spec;
    // prepare connection to database
    let connectionParameters = {
        host: "localhost",
        port: 55555,
        user: "root",
        password: "sa",
        database: "firstdb"
    };
    // create a connection to db
    let con = mysql.createConnection(connectionParameters);
    // open the connection
    con.connect(function (err) {
        // if connection error occurs, the client must be informed
        if (err) {
            res.status(500).send("Eroare la conectarea la baza de date." + err.message);
        } else {
            // prepare the insert query
            let sql = "INSERT INTO students (name, grade) VALUES ('" + name + "','" + age  + "');";
            // run query
            con.query(sql, function (err, result) {
                // if query error occurs, the client must be informed
                if (err) {
                    res.status(500).send("Eroare la inserarea datelor." + err.message);
                // if we are here => Hooray, no errors!
                } else {
                    res.status(200).send("");
                }
            });
        }
         con.query("SELECT * from students", function (err, result, fields) {
    if (err) throw err;
    console.log(result);
  });
    });
});

// Inform that server is alive
console.log("Server running on 8080.");
// Listen to a port
app.listen(8080);