Connect to Database

The first crucial step was connecting our application to a database. We opted for MySQL, a widely used relational database management system. To achieve this connection, we utilized MySQL's structured query language (SQL). Through code executed in Visual Studio Code, we established a link between our application and the database. This connection allowed data from the MySQL database to be accessible on the server, forming the foundation for our dashboard's functionality.

const mysql = require("mysql2"); // mysql 모듈 사용

const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "", 
  database: "", 
  port: 3306,
});

Create Server

Once the database connection was established, the next step involved creating a server. This was accomplished by implementing code that created an HTTP server. With the server running, we obtained a link that enabled access to our application. This link served as the entry point for users to interact with the dashboard.

const express = require("express");
const app = express();
const port = 3000; 
const cors = require("cors");
const bodyParser = require("body-parser");
const path = require("path");

app.set("port", process.env.PORT || 3000);

app.listen(app.get("port"), () => {
  console.log("Express server listening on port " + app.get("port"));
});

Create Admin Dashboard to register data

For the admin dashboard, we employed HTML to structure the web page. HTML tags such as headings, paragraphs, and divisions were utilized to organize the content. In addition, we used CSS (Cascading Style Sheets) to enhance the visual aesthetics of the dashboard. CSS enabled us to customize elements like button sizes, background colors, and text styles. The result was an appealing and user-friendly admin dashboard where administrators could manage user data.

• Use HTML to structure web page

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="form.css" />
  </head>
  <h1>Dashboard</h1>

  <form action="/submit" method="POST">
    <div>
      <label>Name</label>
      <input id="name" placeholder="insert name" type="text" name="name" />
    </div>
    <div>
      <label>Gender</label>
      <input
        id="gender"
        placeholder="insert gender"
        type="text"
        name="gender"
      />
    </div>
    <input id="button" type="submit" value="Insert" formaction="/insert" />
  </form>
</html>

• Use CSS to decorate the page

h1 {
  text-align: center;
  font-weight: 800;
  font-size: 50px !important;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  padding-bottom: 30px;
  border-bottom: 10px solid #f08080;
}
form {
  display: flex;
  flex-direction: column;
  width: 60%;
  align-items: center;
  margin: auto;
}
div {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  justify-content: center;
  align-items: center;
}

label {
  font-family: "Courier New", Courier, monospace;
  margin-right: 10px;
  width: 100px;
  font-size: 20px;
}

input {
  padding: 10px;
  text-align: center;
  width: 50%;
}

input#button {
  width: 40%;
  border-radius: 8px;
  background-color: #ffdab9;
}

body {
  background-color: #f8ad9d;
}