DEV Community

loading...

NodeJs MySQL Build a simple app using Node JS and MySQL.

achowba profile image Atauba Prince ・10 min read

Hello world!. In this tutorial, we are going to build a simple CRUD application using Node JS and MySQL.

What we will build?


The image above shows the app. It is an application that lets you add players to a database and also display their details from the database. You can also delete and edit player details.

Prerequisites

Before you join this tutorial it is assumed that you meet the requirements listed below:

  • Node JS installed on your PC.
  • Basic understanding of Node JS and Express JS.
  • Knowledge of SQL, you should know and understand how to query a database.
  • phpmyadmin installed on your PC. I recommend installing xampp as it already contains phpmyadmin in it.
  • Understand how to use templating engines -- we are going to be using ejs in this tutorial).
  • A text editor or IDE of your choice.

Folder Structure

This is how the project will be structured.

├── node-mqsql-crud-app (main directory)   
    ├── node_modules
    ├── public
        ├── assets 
            ├── img
    ├── routes
        ├── index.js
        ├── player.js
    ├── views
        ├── partials 
            ├── header.ejs
        ├── index.ejs
        ├── add-player.ejs
        ├── edit-player.ejs
    ├── app.js    
Enter fullscreen mode Exit fullscreen mode

Creating the directory for the project

Open the command prompt in a suitable directory and type the following command:

mkdir node-mysql-crud-app 
Enter fullscreen mode Exit fullscreen mode

then change to the directory by typing the following command

cd node-mysql-crud-app 
Enter fullscreen mode Exit fullscreen mode

Initialize the Project

Open your command prompt in your project directory and type the command below:

npm init
Enter fullscreen mode Exit fullscreen mode

Install required modules.

The following modules are going to be needed to successfully build the app.

  • express: used to create handle routing and process requests from the client.
  • express-fileupload: Simple express file upload middleware that wraps around busboy.
  • body-parser: used to parse incoming request from the client.
  • mysql: Node JS driver for MySQL.
  • ejs: templating engine to render html pages for the app.
  • req-flash: used to send flash messages to the view
  • nodemon: Installed globally. It is used to watch for changes to files and automatically restart the server.

Type the following command to install the first 7 modules as dependencies.

npm install express express-fileupload body-parser mysql ejs req-flash --save
Enter fullscreen mode Exit fullscreen mode

Then type the following command to install the last module globally on your PC.

npm install nodemon -g
Enter fullscreen mode Exit fullscreen mode

Creating the database for the app

Copy the command below and navigate to your phpmyadmin dashboard and execute the following query in the console (usually found at the bottom of the page) in order to create database and table for the app.

CREATE DATABASE socka;
CREATE TABLE IF NOT EXISTS `players` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) NOT NULL,
  `last_name` varchar(255) NOT NULL,
  `position` varchar(255) NOT NULL,
  `number` int(11) NOT NULL,
  `image` varchar(255) NOT NULL,
  `user_name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
Enter fullscreen mode Exit fullscreen mode

Adding the views

header.ejs

The header.ejs file is going to be in the /views/partials folder where it is going to be included in the rest of the project.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="/assets/css/custom.css">-->
    <title><%= title %></title>
</head>
<style>
    .table-wrapper {
        margin-top: 50px;
    }

    .player-img {
        width: 40px;
        height: 40px;
    }

    .add-player-form {
        margin-top: 50px;
    }
</style>
<body>
<div class="page-wrapper">
    <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1" ><a href="/">Socka Players</a></span>
        <a class="float-right" href="/add" title="Add a New Player">Add a Player</a>
    </nav>
Enter fullscreen mode Exit fullscreen mode

index.ejs

This is the homepage of the app which contains a table to display a list of all the players.

<% include partials/header.ejs %>
    <div class="table-wrapper">
        <% if (players.length > 0) {%>
            <table class="table table-hovered">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Image</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Position</th>
                        <th scope="col">Number</th>
                        <th scope="col">Username</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <% players.forEach((player, index) => { %>
                        <tr>
                            <th scope="row"><%= player.id %></th>
                            <td><img src="/assets/img/<%= player.image %>" class="rounded-circle player-img" alt=""></td>
                            <td><%= player.first_name %></td>
                            <td><%= player.last_name %></td>
                            <td><%= player.position %></td>
                            <td><%= player.number %></td>
                            <td>@<%= player.user_name %></td>
                            <td>
                                <a href="/edit/<%= player.id %>" target="_blank" rel="noopener" class="btn btn-sm btn-success">Edit</a>
                                <a href="/delete/<%= player.id %>" class="btn btn-sm btn-danger">Delete</a>
                            </td>
                        </tr>
                    <% }) %>
                </tbody>
            </table>
        <% } else { %>
            <p class="text-center">No players found. Go <a href="/add" >here</a> to add players.</p>
        <% } %>
    </div>
</div>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

add-player.ejs

This page contains the form to add a new player to the database.

<% include partials/header.ejs %>
    <div class="container">
        <% if (message != '') { %>
            <p class="text-center text-danger"><%= message %></p>
        <% } %>
        <form class="add-player-form" action="" method="post" enctype="multipart/form-data">
            <div class="form-row">
                <div class="form-group col-md-4">
                    <input type="text" class="form-control" name="first_name" id="first-name" placeholder="First Name" required>
                </div>
                <div class="form-group col-md-4">
                    <input type="text" class="form-control" name="last_name" id="last-name" placeholder="Last Name" required>
                </div>
                <div class="form-group col-md-4">
                    <input type="text" class="form-control" name="username" id="username" placeholder="Username" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="number" class="form-control" name="number" id="number" placeholder="Number" required>
                </div>
                <div class="form-group col-md-6">
                    <select id="position" name="position" class="form-control" required>
                        <option selected disabled>Choose position</option>
                        <option>Goalkeeper</option>
                        <option>Defender</option>
                        <option>Midfielder</option>
                        <option>Forward</option>
                    </select>
                </div>
                <div class="col-md-12">
                    <label for="player-img"><b>Player Image</b></label><br>
                    <input type="file" name="image" id="player-img" class="" required>
                </div>
            </div>
            <button type="submit" class="btn btn-primary float-right">Add Player</button>
        </form>
    </div>
</div>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

edit-player.ejs

This page contains the form to edit a player added to the database.

<% include partials/header.ejs %>
<div class="container">
    <% if (message) { %>
        <p class="text-center text-danger"><%= message %></p>
    <% } %>

    <% if (player) { %>
        <form class="add-player-form" action="" method="post" enctype="multipart/form-data">
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="first-name">First Name</label>
                    <input type="text" class="form-control" name="first_name" id="first-name" value="<%= player.first_name %>" required>
                </div>
                <div class="form-group col-md-4">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="form-control" name="last_name" id="last-name" value="<%= player.last_name %>" required>
                </div>
                <div class="form-group col-md-4">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" name="username" id="username" value="<%= player.user_name %>" required disabled title="Username cannot be edited.">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="number">Number</label>
                    <input type="number" class="form-control" name="number" id="number" placeholder="Number" value="<%= player.number %>" required>
                </div>
                <div class="form-group col-md-6">
                    <label for="position">Position</label>
                    <select id="position" name="position" class="form-control" required>
                        <option selected><%= player.position %></option>
                        <option>Goalkeeper</option>
                        <option>Centre Back</option>
                        <option>Right Back</option>
                        <option>Left Back</option>
                        <option>Defensive Midfielder</option>
                        <option>Central Midfielder</option>
                        <option>Attacking Midfielder</option>
                        <option>Right Wing Forward</option>
                        <option>Left Wing Forward</option>
                        <option>Striker</option>
                    </select>
                </div>
            </div>
            <button type="submit" class="btn btn-success float-right">Update Player</button>
        </form>
    <% } else { %>
        <p class="text-center">Player Not Found. Go <a href="/add">here</a> to add players.</p>
    <% } %>
</div>
</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Working on the server.

App.js

const express = require('express');
const fileUpload = require('express-fileupload');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const path = require('path');
const app = express();

// const {getHomePage} = require('./routes/index');
// const {addPlayerPage, addPlayer, deletePlayer, editPlayer, editPlayerPage} = require('./routes/player');
const port = 5000;

// create connection to database
// the mysql.createConnection function takes in a configuration object which contains host, user, password and the database name.
const db = mysql.createConnection ({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'socka'
});

// connect to database
db.connect((err) => {
    if (err) {
        throw err;
    }
    console.log('Connected to database');
});
global.db = db;

// configure middleware
app.set('port', process.env.port || port); // set express to use this port
app.set('views', __dirname + '/views'); // set express to look in this folder to render our view
app.set('view engine', 'ejs'); // configure template engine
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json()); // parse form data client
app.use(express.static(path.join(__dirname, 'public'))); // configure express to use public folder
app.use(fileUpload()); // configure fileupload

// routes for the app
/*
app.get('/', getHomePage);
app.get('/add', addPlayerPage);
app.get('/edit/:id', editPlayerPage);
app.get('/delete/:id', deletePlayer);
app.post('/add', addPlayer);
app.post('/edit/:id', editPlayer);
*/

// set the app to listen on the port
app.listen(port, () => {
    console.log(`Server running on port: ${port}`);
});

Enter fullscreen mode Exit fullscreen mode

In the above code, the modules are required and then a connection to the database is created. The mysql.createConnection function takes in an object which contains the configuration of the database being connected to. In the next statement, the database is being connected. Run the code below on the command prompt to run the server.

nodemon app.js
Enter fullscreen mode Exit fullscreen mode

Your console should show the result below:

Adding the routes

index.js

Copy the code below into the index.js file in the /routes directory.

module.exports = {
    getHomePage: (req, res) => {
        let query = "SELECT * FROM `players` ORDER BY id ASC"; // query database to get all the players

        // execute query
        db.query(query, (err, result) => {
            if (err) {
                res.redirect('/');
            }
            res.render('index.ejs', {
                title: Welcome to Socka | View Players
                ,players: result
            });
        });
    },
};

Enter fullscreen mode Exit fullscreen mode

The db.query function queries the database. It takes in the query and string and a callback which takes in two parameters, if the query is successful, the result is passed to the view in the res.render function.

player.js

The player.js file is going to contain all the routes for the players page such as adding a player, updating a player's details and deleting a player.

const fs = require('fs');

module.exports = {
    addPlayerPage: (req, res) => {
        res.render('add-player.ejs', {
            title: Welcome to Socka | Add a new player
            ,message: ''
        });
    },
    addPlayer: (req, res) => {
        if (!req.files) {
            return res.status(400).send("No files were uploaded.");
        }

        let message = '';
        let first_name = req.body.first_name;
        let last_name = req.body.last_name;
        let position = req.body.position;
        let number = req.body.number;
        let username = req.body.username;
        let uploadedFile = req.files.image;
        let image_name = uploadedFile.name;
        let fileExtension = uploadedFile.mimetype.split('/')[1];
        image_name = username + '.' + fileExtension;

        let usernameQuery = "SELECT * FROM `players` WHERE user_name = '" + username + "'";

        db.query(usernameQuery, (err, result) => {
            if (err) {
                return res.status(500).send(err);
            }
            if (result.length > 0) {
                message = 'Username already exists';
                res.render('add-player.ejs', {
                    message,
                    title: Welcome to Socka | Add a new player
                });
            } else {
                // check the filetype before uploading it
                if (uploadedFile.mimetype === 'image/png' || uploadedFile.mimetype === 'image/jpeg' || uploadedFile.mimetype === 'image/gif') {
                    // upload the file to the /public/assets/img directory
                    uploadedFile.mv(`public/assets/img/${image_name}`, (err ) => {
                        if (err) {
                            return res.status(500).send(err);
                        }
                        // send the player's details to the database
                        let query = "INSERT INTO `players` (first_name, last_name, position, number, image, user_name) VALUES ('" +
                            first_name + "', '" + last_name + "', '" + position + "', '" + number + "', '" + image_name + "', '" + username + "')";
                        db.query(query, (err, result) => {
                            if (err) {
                                return res.status(500).send(err);
                            }
                            res.redirect('/');
                        });
                    });
                } else {
                    message = "Invalid File format. Only 'gif', 'jpeg' and 'png' images are allowed.";
                    res.render('add-player.ejs', {
                        message,
                        title: Welcome to Socka | Add a new player
                    });
                }
            }
        });
    },
    editPlayerPage: (req, res) => {
        let playerId = req.params.id;
        let query = "SELECT * FROM `players` WHERE id = '" + playerId + "' ";
        db.query(query, (err, result) => {
            if (err) {
                return res.status(500).send(err);
            }
            res.render('edit-player.ejs', {
                title: Edit  Player
                ,player: result[0]
                ,message: ''
            });
        });
    },
    editPlayer: (req, res) => {
        let playerId = req.params.id;
        let first_name = req.body.first_name;
        let last_name = req.body.last_name;
        let position = req.body.position;
        let number = req.body.number;

        let query = "UPDATE `players` SET `first_name` = '" + first_name + "', `last_name` = '" + last_name + "', `position` = '" + position + "', `number` = '" + number + "' WHERE `players`.`id` = '" + playerId + "'";
        db.query(query, (err, result) => {
            if (err) {
                return res.status(500).send(err);
            }
            res.redirect('/');
        });
    },
    deletePlayer: (req, res) => {
        let playerId = req.params.id;
        let getImageQuery = 'SELECT image from `players` WHERE id = "' + playerId + '"';
        let deleteUserQuery = 'DELETE FROM players WHERE id = "' + playerId + '"';

        db.query(getImageQuery, (err, result) => {
            if (err) {
                return res.status(500).send(err);
            }

            let image = result[0].image;

            fs.unlink(`public/assets/img/${image}`, (err) => {
                if (err) {
                    return res.status(500).send(err);
                }
                db.query(deleteUserQuery, (err, result) => {
                    if (err) {
                        return res.status(500).send(err);
                    }
                    res.redirect('/');
                });
            });
        });
    }
};

Enter fullscreen mode Exit fullscreen mode

This file handles all the post and get requests for the players page. The add player function contains a function that uploads the player's image to the /public/assets/img directory and sends the player's details to the database.

Connecting the routes and the views

Go to app.js and uncomment the following lines

  • on line 8 and 9
// const {getHomePage} = require('./routes/index');
// const {addPlayerPage, addPlayer, deletePlayer, editPlayer, editPlayerPage} = require('./routes/player');
Enter fullscreen mode Exit fullscreen mode
  • on line 40 - 47
/*
app.get('/', getHomePage);
app.get('/add', addPlayerPage);
app.get('/edit/:id', editPlayerPage);
app.get('/delete/:id', deletePlayer);
app.post('/add', addPlayer);
app.post('/edit/:id', editPlayer);
*/
Enter fullscreen mode Exit fullscreen mode

Running the app

After removing the commented lines, check your command prompt to ensure your code has no errors, then head over to your browser and open http://localhost:5000. The index page will be shown and since no players have been added, the page will look similar to the one below:

Click the Add a player link on the page, the add player page will load and then fill the form to add a player. After adding a player the home page will display the players added in a table. Like this

If errors are encountered, draw my attention in the comment section or check the repo of the project on github.
The code is not perfect and please feel free to make it better and send a pull request.

Don't forget to check me out on twitter or github.

Discussion (103)

pic
Editor guide
Collapse
kowalsk profile image
kowalsk

Hi Atauba,

I followed your tutorial and have the following error. Do you have any clues as to why this is so:

C:\Users\PC\OneDrive\Coding\JS\node-mysql-crud-app>nodemon app.js
[nodemon] 1.18.10
[nodemon] to restart at any time, enter rs
[nodemon] watching: .
[nodemon] starting node app.js
C:\Users\PC\OneDrive\Coding\JS\node-mysql-crud-app\routes\index.js:11
title: Welcome to Socka | View Players
^^

SyntaxError: Unexpected identifier
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
[nodemon] app crashed - waiting for file changes before starting...
^CTerminate batch job (Y/N)? y

Collapse
wolgensinger profile image
wolgensinger

I have the same error on line 11. Do you have any hints or a solution? Thank you for a short reply.

Collapse
nitesh146 profile image
Nitesh Kesarkar

Try adding the "" for the title values wherever this error shows.

Collapse
achowba profile image
Atauba Prince Author

Hi, sorry for the late reply, check if all brackets/braces have been closed and ensure you added the comma after the title key in the res.render function of the index.js file.

Collapse
tjs1990hub profile image
tjs1990-hub

Hi i have also got this error, i have re written the file to make sure all brackets are closed and that the comma is in the right place i have even tried making it an if else statement but still can't get it to run. Any help would be greatly appreciated.

Collapse
bhargavm119 profile image
Bhargav muppidi

Hi Atauba,

I am Find following error while execting the code

SyntaxError: Unexpected identifier in C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\views\index.ejs while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass async: true as an option.
at new Function ()
at Template.compile (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:626:12)
at Object.compile (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:366:16)
at handleCache (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:215:18)
at tryHandleCache (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:254:16)
at View.exports.renderFile as engine
at View.render (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\express\lib\application.js:640:10)
at Function.render (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\Users\bharg\OneDrive\Desktop\Project\Project\node-mysql-crud-app\node_modules\express\lib\response.js:1012:7)

Pls do help me ,

Thanks in advance
Bhargav

Collapse
frames75 profile image
frames

Same error here.

Collapse
siddm22 profile image
Siddhant Misra

Same error here. Any fix for this?

Thread Thread
alprvi profile image
alprvi

try this:

<%- include ('partials/header.ejs'); -%>

Thread Thread
mdagley profile image
Melissa Dagley

Thanks, I was having the same problem and this solved it for me.

Thread Thread
richiebutau profile image
butau richmond

Worked for me too

Thread Thread
daliaalziani profile image
daliaalziani

i tried it too but it is not working at all

Thread Thread
reemaalwail profile image
Reem yahea ali

i am same what is solution bro ?

Collapse
fzkd554m profile image
Marco

Hi Atauba!
Great guide, very good!
I have this error:
{"errno":-4058,"code":"ENOENT","syscall":"open","path":"C:\WebTest\public\assets\img\photo1.jpeg"}
when I add new PLAYER.
In img folder I've copied three photo .jpeg
Where is the problem?

Collapse
fzkd554m profile image
Marco

Acc..
I found the error, sorry...

Collapse
mohamadalibrahim profile image
mohamad-alibrahim

can you please write the fixing?

Thread Thread
m23leung profile image
Mark Leung

U need to create the public/assets/img folder path. Just create the folder structure. Then, the error should go away.

Collapse
amirfs profile image
amir

i have same problem how you fixed it? i have checked every things

Thread Thread
amirfs profile image
amir

my problem solved

Collapse
lexandra987 profile image
lexandra987

Hi, I have a problem:

TypeError: C:\players\node-mysql-crud-app\views\index.ejs:18
16|

17|                 <tbody>

18| <% players.forEach((player) => { %>

19|                         <tr>

20|                             <th scope="row"><%= player.id %></th>

21|                             <td><img src="/assets/img/<%= player.image %>" class="rounded-circle player-img" alt=""></td>

players.forEach is not a function
at eval (eval at compile (C:\players\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:618:12), :28:16)
at returnedFn (C:\players\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:653:17)
at tryHandleCache (C:\players\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:251:36)
at View.exports.renderFile as engine
at View.render (C:\players\node-mysql-crud-app\node_modules\express\lib\view.js:135:8)
at tryRender (C:\players\node-mysql-crud-app\node_modules\express\lib\application.js:640:10)
at Function.render (C:\players\node-mysql-crud-app\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\players\node-mysql-crud-app\node_modules\express\lib\response.js:1016:7)
at Query.db.query (C:\players\node-mysql-crud-app\routes\index.js:10:17)
at Query. (C:\players\node-mysql-crud-app\node_modules\mysql\lib\Connection.js:525:10)

How can I fix it?

BR,
Aleksandra

Collapse
edensharvit profile image
EDEN SHARVIT

Can u tell us how did u manage to fix your issue?
I'm also stuck with the same error....

Collapse
albertgabiro profile image
Gabiro Albert

hy i have same question online 18

how did you fix it
please help

Collapse
rafad900 profile image
rafad900

One of the things that you can check is in inside /routes/index.js
Make sure that the players: result is not in any quotes.
foreach is a function of arrays. If you have 'result', that is a string.

Collapse
lexandra987 profile image
lexandra987

but ok, it was no question. it was just a stupid error in my index.ejs file. Now it works! :)

Collapse
dikshabhattacharjee profile image
dikshabhattacharjee

How did you fix it.please help..

Collapse
coolnin profile image
coolnin

I am getting the same problem what u did?

Thread Thread
udayparekh2006 profile image
Uday Parekh

Have you got a solution?

Thread Thread
dikshabhattacharjee profile image
Collapse
rajesh996 profile image
Rajesh Chittampally

I have created a node & mysql app following this tutorial. It's all good but when i open the image, the image is not opening. all images size is 0 bytes only. Seeing broken image in browser too.

Collapse
diegoeroque profile image
Diego Roque

Same problem here. Any solution??

Best Rgs.

Collapse
almck profile image
Al-mck

Hello

I change the first line by :
fs.writeFile(public/assets/img/${image_name},uploadedFile.data, function (err) {...

And it's work for me

Thread Thread
diegoeroque profile image
Diego Roque

thanks my friend. now work!!

Best Rgs.

Collapse
achowba profile image
Atauba Prince Author

Sorry about that, I think these may be the possible reasons

  1. The SQL statement
  2. The image url. Check the console of your browser if any errors exist
Collapse
polarfoxoff profile image
PolarFoxOFF

Hello, I tried activating app.js and it works, but when I tried to access my localhost: 5000, it happened

SyntaxError: Unexpected identifier in /Users/apple/Documents/NodeJS/views/index.ejs while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, passasync: trueas an option.
at new Function ()
at Template.compile (/Users/apple/Documents/NodeJS/node_modules/ejs/lib/ejs.js:626:12)
at Object.compile (/Users/apple/Documents/NodeJS/node_modules/ejs/lib/ejs.js:366:16)
at handleCache (/Users/apple/Documents/NodeJS/node_modules/ejs/lib/ejs.js:215:18)
at tryHandleCache (/Users/apple/Documents/NodeJS/node_modules/ejs/lib/ejs.js:254:16)
at View.exports.renderFile as engine
at View.render (/Users/apple/Documents/NodeJS/node_modules/express/lib/view.js:135:8)
at tryRender (/Users/apple/Documents/NodeJS/node_modules/express/lib/application.js:640:10)
at Function.render (/Users/apple/Documents/NodeJS/node_modules/express/lib/application.js:592:3)
at ServerResponse.render (/Users/apple/Documents/NodeJS/node_modules/express/lib/response.js:1012:7)
SyntaxError: Unexpected identifier in /Users/apple/Documents/NodeJS/views/index.ejs while compiling ejs

Collapse
justicebringer profile image
Gabriel

I believe you tried an include but you may have written it bad. Try to write it like this:

<%- include ("../fragments/header") %>

Collapse
siddm22 profile image
Siddhant Misra

Same error here. Any fix for this?

Collapse
hridoy100 profile image
Raihanul Alam Hridoy

Inside index.ejs file add this in line 1:
<%- include("partials/header") -%>

Collapse
abhinavsingh1995 profile image
abhinavsingh1995

adding players is not working.It is not giving any error.
I tried to add player, once i open the add player page/form AND some player information it shows this after submitting
{
"errno":-2,
"code":"ENOENT",
"syscall":"open",
"path":"public/assets/img/user.png"
}
and when i went back to homepage no player is added.

Collapse
achowba profile image
Atauba Prince Author

This could be from the addPlayer.js function or the path to the store the image does not exist, kindly crosscheck and try again.

Collapse
mohamadalibrahim profile image
mohamad-alibrahim

i have encounterd in the same issue, how it would be solved?

Collapse
mdagley profile image
Melissa Dagley

This happened to me when I didn't have the directory created for the image.

Collapse
diegoeroque profile image
Diego Roque

When upload image, in the folder /assets/img files was create, but empty (0 bytes).

Can you help me? Additional permission was required for the folder /assets/img?

Best Rgs.

Collapse
achowba profile image
Atauba Prince Author

Hello, sorry for the delayed reply. No additional permission was required for the folder and kindly compare this file with yours to ensure there are no errors in the addPlayer function.

Collapse
diegoeroque profile image
Diego Roque

it does not throw errors:

uploadedFile.mv(public/assets/img/${image_name}, (err ) => {
if (err) {
return res.status(500).send(err);
}

Collapse
diegoeroque profile image
Diego Roque

there are no differences.
the files are identical.
the files are created but 0 bytes.
Any suggestions?

Thread Thread
achowba profile image
Atauba Prince Author

I have no suggestions yet, but is it working?

Thread Thread
diegoeroque profile image
Diego Roque

Following the post of Al-mck....

I change the first line by :
fs.writeFile(public/assets/img/${image_name},uploadedFile.data, function (err) {...

and now it's working fine.

Best Rgs.

Collapse
mj0lken profile image
mj0lken

I'm new to this and I get an awful error. Did it from scratch and cloned your repo but still got this in my terminal:

..../node-mysql-crud-app/node_modules/mysql/lib/protocol/Parser.js:80
throw err; // Rethrow non-MySQL errors

^

any clues!?

Collapse
shanegibney profile image
Shane Gibney

mj0lken this error suggests that your database credentials in app.js are not correct. Check them. I realise you asked this question many months ago and have probably fixed it by now.

Collapse
achowba profile image
Atauba Prince Author

Hello, could you please send a picture of your console with the error so I can know where the error is coming from

Collapse
maityhitesh91 profile image
Hitesh Maity

Hi Atauba,

I am following your tutorial. after successfull running command I am getting below error in the browser.

SyntaxError: missing ) after argument list in H:\node_project\views\index.ejs while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass async: true as an option.
at new Function ()
at Template.compile (H:\node_project\node_modules\ejs\lib\ejs.js:649:12)
at Object.compile (H:\node_project\node_modules\ejs\lib\ejs.js:385:16)
at handleCache (H:\node_project\node_modules\ejs\lib\ejs.js:233:18)
at tryHandleCache (H:\node_project\node_modules\ejs\lib\ejs.js:272:16)
at View.exports.renderFile as engine
at View.render (H:\node_project\node_modules\express\lib\view.js:135:8)
at tryRender (H:\node_project\node_modules\express\lib\application.js:640:10)
at Function.render (H:\node_project\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (H:\node_project\node_modules\express\lib\response.js:1012:7)

Collapse
muhywale profile image
Lil_muhy

exact prob. I'm encountering. Any solution now

Collapse
parthp7493 profile image
Parth Parikh

Hello
I have followed your tutorial and i got error "Unexpected identifier in C:\Users\Admin\Desktop\circAdmin\views\dashboard.ejs while compiling ejs".
Please open the below link.

thepracticaldev.s3.amazonaws.com/i...

Collapse
siddm22 profile image
Siddhant Misra

Same error here. Any fix for this?

Collapse
anjemaaars profile image
Angel Marcelino

Hello, in case you are still looking for answers

all code snippets like this

<% include partials/header.ejs %>

change it into

<% include ('header') %>

Collapse
kl4532 profile image
kl4532

Hi!
I get error after clicking 'Add a Player'. Here is the output:

ReferenceError: /home/corny/dev/node/node-msql-crud-app/views/add-player.ejs:7
5| <% } %>
6|

7| <% if (player) { %>
8|


9|
10|

player is not defined
at eval (eval at compile (/home/corny/dev/node/node-msql-crud-app/node_modules/ejs/lib/ejs.js:618:12), :34:8)
at returnedFn (/home/corny/dev/node/node-msql-crud-app/node_modules/ejs/lib/ejs.js:653:17)
at tryHandleCache (/home/corny/dev/node/node-msql-crud-app/node_modules/ejs/lib/ejs.js:251:36)
at View.exports.renderFile as engine
at View.render (/home/corny/dev/node/node-msql-crud-app/node_modules/express/lib/view.js:135:8)
at tryRender (/home/corny/dev/node/node-msql-crud-app/node_modules/express/lib/application.js:640:10)
at Function.render (/home/corny/dev/node/node-msql-crud-app/node_modules/express/lib/application.js:592:3)
at ServerResponse.render (/home/corny/dev/node/node-msql-crud-app/node_modules/express/lib/response.js:1008:7)
at addPlayerPage (/home/corny/dev/node/node-msql-crud-app/routes/player.js:5:13)
at Layer.handle as handle_request

================
Can you help me?

BR,
Corny

Collapse
achowba profile image
Atauba Prince Author

Hello, sorry about the error, kindly check the add-player.ejs and edit-player.ejs files to confirm everything checks out and then try again.

Collapse
kl4532 profile image
kl4532

My god, I switched files contents... I am an idiot. Thank you for help and great tutorial.

BR,
Corny

Thread Thread
achowba profile image
Atauba Prince Author

😂 Oh okay. No problem

Collapse
zzrez profile image
zzrez

I just completed this useful tutorial, thanks. In the process I had to solve some bugs which may be because versions of packages, eg express, have changed.

This bug (frequently mentioned below): "SyntaxError: Unexpected identifier". This is due to use of "<% include partials/header.ejs %>" at the top of the ejs files. If this is replaced by the original html of header.ejs, all works. So the required inclusion format seems to have changed for Express 4.x to:- "<%- include ('partials/header') %>"

Then there are various places with "title: Welcome to Socka | View Players" or similar, the value "Welcome to Socka | View Players" needs enclosing in single or double quotes.

Finally, the add form works if the directory for images, /public/assets/img, is first created.

Hope this helps. Great tutorial!

Collapse
jojacino profile image
Joseph Davidson

I don't know if Atauba is aware of this but there is a simple error if you direct copy the instructions. There may need to be quotes added to line 12 in player.js. They correct line might show: title: 'Welcome to Socka | Add a new player',

There were about five lines akin to that.

Other than that it works really well! =)

Collapse
silverbackjack1 profile image
silverbackjack1

Great guide, very useful.

I'm looking to create something similar using this as a starting point but I'm struggling to remove the image upload requirement, it's not something I need. Could you give any advice on how to remove this requirement? I've encountered a few issues when trying to change this code.

Thanks in advance

Never mind, I figured it out :)

Collapse
achowba profile image
Atauba Prince Author

Okay but note that the code is susceptible to SQL injection, I have been quite lazy about fixing and updating it on the repo 😩.

Anyways, thanks for the kind words.

Collapse
sydnyb profile image
sydnyb

Please help with erro .

// 20190518173531
// localhost:5000/add

{
"errno": -4058,
"code": "ENOENT",
"syscall": "open",
"path": "D:\Sites\Crud3\public\assets\img\syednayab.jpeg"
}

Collapse
yaolaphilip profile image
philip yaola

Great Guide Prince. Though am a bit stuck:
title: Welcome to Socka | Add a new player
^

SyntaxError: Unexpected identifier
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
//Am still getting the above error even after using:

res.render('index.ejs', {
title: "Welcome to Socka | View Players"
,players: result

Collapse
jprumekso profile image
Jalu Pujo Rumekso

Hi Atauba, congrats for writing a detailed tutorial.

FYI, you can also use Crudite to make CRUD operation even seamless. It wraps node-mysql2 query method into a neat promise-based create(), read(), update(), and delete() method. More info can be found at github.com/jprumekso/crudite

Collapse
apple24hrs93 profile image
APPLE 24Hrs

A VERY USEFUL POST, BUT I GET THIS ERROR EACH TIME TRY TO ADD A PLAYER :(

PD: I ONLY CHANGE "NUMBER" FOR "NUMBERO" ITS THE SAME

{"code":"ER_TRUNCATED_WRONG_VALUE_FOR_FIELD","errno":1366,"sqlMessage":"Incorrect integer value: 'undefined' for column 'numbero' at row 1","sqlState":"HY000","index":0,"sql":"INSERT INTO players (first_name, last_name, position, numbero, image, user_name) VALUES ('Joseph Bryan', 'Gonzalez Ruiz', 'Midfielder', 'undefined', 'code.jpeg', 'code')"}

Collapse
achowba profile image
Atauba Prince Author

Sorry for the delayed reply, I think you should also check the sql statement that creates the database and also change the "number" to "numbero"

Collapse
codingstatus profile image
codingStatus.com

This article is helpful by using with CRUD Operation in Expressjs with MVC Pattern in Express, But Let me know that How to send flash message after inserting, updating, or deleting the data

Collapse
foofiggle profile image
Robert DiBetta

Hi Atauba,

Thanks for sharing this - it's a helpful example that I'm adapting as a loadtest target.

I noticed that a few changes might help mitigate SQL injection issues. If I get time, I might come back with a pull request...

Collapse
kumarhondale profile image
Rajkumar Hondale

Hi Atauba,

I'm tring to learn node js, Your artical is so nice and esy to understan but i have the following error please help me to fix this issue.

Thanks

/var/www/html/node-mysql-crud-app/routes/index.js:11
title: Welcome to Socka | View Players,
^

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:760:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (/var/www/html/node-mysql-crud-app/app.js:8:23)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)

Collapse
kumarhondale profile image
Rajkumar Hondale

I found the answer.. Have to modified title like below.

Thanks

res.render('index.ejs', {
title: 'Welcome to Socka | View Players',
players: 'result'
});

Collapse
bapro profile image
Baptiste Prophete

Hello, I'm new member I'm so happy to be part of you.
Thanks for this tutorial which is applied to my new goal for this new (learning nodejs). After I save all the tutorial files, everything work for me, only the delete function fails, I'm showing this error after click on delete botton :

{"errno":-4058,"code":"ENOENT","syscall":"unlink","path":"C:\node-mysql-crud-app\public\assets\img\${image}"}

Any help please ?

Collapse
rashedronybd profile image
Rashedur Rahman

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:721:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (D:\Programming\node js\node-mysql-crud-app\app.js:9:78)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

D:\Programming\node js\node-mysql-crud-app>

I got stuck here..i need the solution very urgently..

btw thanks for your great guide

Collapse
fil2fip profile image
fil2fip

Hello,
Did not read and tried the full tutorial, but my first thinking is that I'd like to get rid of phpMyAdmin, and instead create the db and table(s) through Node.js and a script ....
In my mind, it would have been a better start !
Thank you.

Collapse
joewilson27 profile image
Joe Wilson

Hi pale! thanks for sharing,
I want to ask you how to adding some notifications into index.ejs
after we added, updated and deleted players?
I have modified the index.ejs with variable message and
sent the message parameters in every events in player.js

thank you

Collapse
ma7eer profile image
Maher Alkendi

This was awesome to read! this article will help me with building my first node mysql app! thanks!

Collapse
murali474747 profile image
Murali Dharan

how to add pagination in nodejs same example

Collapse
davidfrafael profile image
David Fernández

Hi.

Are you aware this code is subject to SQL injection?

Collapse
achowba profile image
Atauba Prince Author

No, I totally forgot about it, I will look into solving it and make updates on the repo. Thanks for pointing it out.

Collapse
tsalira profile image
tsalira

Hey, great tutorial. Been looking all over the Internet for something just like this to introduce me to Node, Express and basic html in a simple way. Thanks.

Collapse
achowba profile image
Atauba Prince Author

You are welcome. I'm glad you liked it.