After a long time, I'm here again. I don't even know why I'm blogging right now. All I know is that I want to study a thing, and one of the best ways to do that is to share it. It is scientifically proven that once you share a certain knowledge you learned especially if it's a fresh one, it makes your brain record it for in your mind for a long time :)
So, no more storytelling. Let's get to the dashboard.
*Take note that it's goal is to teach how to use node.js, Vue.js, & Mysql. The idea of invoice is not that applicable, it's jus a sample app.
1. INTERFACE
First, we need to set up the interface. The story about this project is that it all started from reading the vue.js book from packtpub. There is a sample of an invoice design there where it is also used in a real app. So right now we're really making our own version of it, but we'll just copy the interface.
So since this tutorial will not cover the design of it, I will let you copy it from my fiddle. I use bootstrap 4 for it CSS framework. Copy it from this link
2. DATABASE - Create the database for our app. Create table transactions with 5 fields in mysql (trans_id, trans_qty, trans_desc, trans_rate, trans_stamp). We're going to add more table but for now, let's stick with the transaction first.
3.WORKSPACE - Create a folder named invoice_app and drag it to Visual Studio Code. Remember that we're using visual studio code as our main text editor together with its terminal.
Click View / Integrated Terminal at the toolbar to open a terminal on the current directory.
4. SERVER - This tutorial assumes that you already have the knowledge to install node.js. If you still have no node.js in your PC, that's when your friend google comes in :)
let's initialize the server. type npm init at the terminal. This will ask for value such as package name, leave its default and press enter until finish. After that you'll see a package.json file inside your directory
5. INSTALL MySQL & EXPRESS
Install MySql and Express by typing npm install --save mysql express. The --save will tell node package manager to include msyql and express as additional dependency for your node app.
6. Index.js - Create a file index.js in your root directory. Index.js is listed as the main page in your package.json file. Your directory should look like this.
7. NODEMON
let's install nodemon so that we don't need to restart node everytime we make changes. Type npm install -g nodemon The -g tells node to install nodemon globally so we don't need to reinstall it to other package.
After you install globally type npm install nodemon to install it on your directory.
9. MySQL CONNECTION
So, no more storytelling. Let's get to the dashboard.
*Take note that it's goal is to teach how to use node.js, Vue.js, & Mysql. The idea of invoice is not that applicable, it's jus a sample app.
1. INTERFACE
First, we need to set up the interface. The story about this project is that it all started from reading the vue.js book from packtpub. There is a sample of an invoice design there where it is also used in a real app. So right now we're really making our own version of it, but we'll just copy the interface.
So since this tutorial will not cover the design of it, I will let you copy it from my fiddle. I use bootstrap 4 for it CSS framework. Copy it from this link
2. DATABASE - Create the database for our app. Create table transactions with 5 fields in mysql (trans_id, trans_qty, trans_desc, trans_rate, trans_stamp). We're going to add more table but for now, let's stick with the transaction first.
Since Creating mysql database is not our main topic, I prepare the initial mysql db for you to download in this LINK and import to your mysql.
3.WORKSPACE - Create a folder named invoice_app and drag it to Visual Studio Code. Remember that we're using visual studio code as our main text editor together with its terminal.
Click View / Integrated Terminal at the toolbar to open a terminal on the current directory.
4. SERVER - This tutorial assumes that you already have the knowledge to install node.js. If you still have no node.js in your PC, that's when your friend google comes in :)
let's initialize the server. type npm init at the terminal. This will ask for value such as package name, leave its default and press enter until finish. After that you'll see a package.json file inside your directory
5. INSTALL MySQL & EXPRESS
Install MySql and Express by typing npm install --save mysql express. The --save will tell node package manager to include msyql and express as additional dependency for your node app.
7. NODEMON
let's install nodemon so that we don't need to restart node everytime we make changes. Type npm install -g nodemon The -g tells node to install nodemon globally so we don't need to reinstall it to other package.
After you install globally type npm install nodemon to install it on your directory.
Start the server by typing nodemon You'll see nothing since we don't have server in the index.js
8. BUILDING THE INDEX.JS
open your index.js and let's add a server.
Add mysql and express at the top of your index.js
Initialize and connect to express.js
add the server and listen to port 3000. Put this code at the bottom of your index.js file
After that your console will prompt. It means that your server is good and working properly. If you check your localhost:3000 It will show an error but that's ok, that is because we haven't put any route.
[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
server started on port 3000
Mysql Connected
8. BUILDING THE INDEX.JS
open your index.js and let's add a server.
Add mysql and express at the top of your index.js
const express = require('express');
const mysql =require('mysql');
Initialize and connect to express.js
const app = express();
add the server and listen to port 3000. Put this code at the bottom of your index.js file
//start server
app.listen('3000', () => {
console.log('server started on port 3000');
});
After that your console will prompt. It means that your server is good and working properly. If you check your localhost:3000 It will show an error but that's ok, that is because we haven't put any route.
[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
server started on port 3000
Mysql Connected
9. MySQL CONNECTION
Create the connection to mysql. Change the host, user, password, and database base on your server and database you created.
Add the following code before the con const app = express();
Add the following code before the con const app = express();
//Create connection
const db = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'nodemysql'
});
//connect
db.connect((err)=>{
if (err){
throw error;
}
console.log('Mysql Connected');
});
Right now your index.js must look like this
const express = require('express');
const mysql =require('mysql');
//Create connection
const db = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'nodemysql'
});
//connect
db.connect((err)=>{
if (err){
throw error;
}
console.log('Mysql Connected');
});
const app = express();
//start server
app.listen('3000', () => {
console.log('server started on port 3000');
});