Node.js Express connectivity with PHPMyAdmin

Last updated on August 15th, 2019 at 12:01 am

Node.js is growing very fast and some of popular web application are built on it. Some feature which i really like of node is that speed and if you have good knowledge of JavaScript you can easily switch and start build your dynamic websites. Now in this post i am going to cover some basics and important topics through which you can create your website easily.

Topics which i cover in this post.

1. Node installation.
2. Express installation and working with express
3. Configure PHPMyAdmin {MySql DB } in your your application

So before we start i give you some basic introduction to Node.js

Official Site : https://nodejs.org/

About Node: Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

Node installation

You can download node from its official website. It automatic detect your OS and from there you can download. Its is very easy to install installation process is same like other software.

Once you installation complete you can open  Node.js from your menu or else you can use your command prompt in my case i am using Node.js command prompt.

Express

Official Site: http://expressjs.com/

About: Express is very popular framework for Node.js. It is very easy and flexible to use and you can create any application using express.

Installing and configure Express

Step 1. Create new directory where you want to use express or create your app.

Step 2. Now open your command prompt and move toward your directory you create and type following command.

npm install express-generator -g

Step 3. After this we can create our app directory and basic structure of app and also name our app. Run following command to generate structure

 express myapp

After hit enter you can check no of directory created in your cmd

  create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/views/error.jade
   create : myapp/bin
   create : myapp/bin/www

Step 4. After app structure created successfully, you need to change directory to your app like this

cd myapp
npm install

Step 5. After this last step is to start your app run following command

Run the app (on MacOS or Linux):

DEBUG=myapp:* npm start

On Windows, use this command:

set DEBUG=myapp:* & npm start

Note: when ever you want to run your project you need to run command show in step 5.

Step 6. Now you can open your browser and type http://localhost:3000 and you can see default page of express.

Understanding Express app folder structure

package.json  – contains your application info and dependencies which are required bu your application.

app.js – this is main file where all application start working.

Views – this directory contain your application view. You can set your templates file here.

uploads – this folder is not there by default but i create to upload image or file you can ignore it.

routes – this folder contain your application routes you can create no of routes according to your need.

public – this folder contain your css, javascripts, your static html templates etc.

node_modules – this folder contain modules which are required in your application.

Simple Template Design on Node

In Express default template engine is Jade. Jade is very interesting but confusing when you start with it but its relay very interesting. But in this post i am not  going to explain design i deep but later i am going to write a post on this. Now in this i am using bootstrap table to show data.

Step 1. Go inside your app folder > views and find layout file layout.jade. Please note that when you working with Jade use tabs or space to structure. Open file and add bootstrap CDN on it as shown below

Step 2. Now i create a new file named as userIndex.jade and copy paste code given bellow. In this code i am using Angular.js to inflate data on table. I pass data from routes i explain later.

Step 3. Create two more Jade file one for add user userAdd.jade and other for update updateUser.jade as shown below

Angular.js

Here in this sample application i am performing some basic operation with Angular.js you can follow my Angular post to learn how its work.

Connecting Express with PHPMyAdmin

It is very easy to connect to your app with PHPmyAdmin you just need to start your XAMP server or WAMP in my case i am using XAMP. Follow below steps to connect

Step 1. Before you start you need MySql module to connect your database

npm install mysql

run this cmd inside your app folder in cmd

Step 2. Open your app.js file and add your connection. We also make this connection global so we can easily access database any where.

Step 3. Now open your users.js file inside routes folder where we can Handle data and perform CRUD operation.
Now in above Code snippet i perform CRUD operation.

Restart your server follow step 5 as shown in installing and configure express.