Perguntas Frequentes

Build a simple app using Node JS and MySQL.
Última atualização 4 ano(s) atrás

https://dev.to/achowba/build-a-simple-app-using-node-js-and-mysql-19me

Build a simple app using Node JS and MySQL.

#node #mysql

achowba profile imageAtauba Prince

23 de jun. de 2018 ・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?

image


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    

Creating the directory for the project

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

mkdir node-mysql-crud-app 

then change to the directory by typing the following command

cd node-mysql-crud-app 

Initialize the Project

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

npm init

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

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

npm install nodemon -g

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;

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.






index.ejs

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


    
0) {%> { %>
ID Image First Name Last Name Position Number Username Action
@ Edit Delete

No players found. Go here to add players.

add-player.ejs

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


    

Por favor, aguarde!

Por favor aguarde... vai levar um segundo!