count the number of visits to a website using Express.js, MongoDB -part 1
The number of visitors can be a vital way to analyze the traffic that your website encounters.
Although you can access your website’s statistics using the built-in functions and data that your service provider gives you, It’s still a good practice to show your customers the amount of traffic that reaches your website.
you can access code repository on GitHub here
You can show the number of visits to every single page on your website, but I am going to keep things simple and implement a visit counter for the Index page only, and I am going to explain how to expand this counter to other pages.
This tutorial supposes that you have got Node, MongoDB installed on your machine, otherwise, just google them and install them on your machine.
First things first, let’s talk a bit about the technologies that we are going to use in this project. we need to use:
1- Express: JS server-side library to create your logic.
2- Express-Generator: a tool to scaffold your App.
3-MongoDb: for data storage.
4-Mongoose: for interacting between the server and the database.
5-EJS Embedded JavaScript templating: for fetching the data from your database and show them in your views.
1- Installing Express & Express-generator:
Express Generator is a quick way to scaffold your App and build its skeleton.
we are going to install express-generator using this command:
This command will install the generator globally so you can use it in any folder. Now, make a new folder and call it whatever you want, then open it in a terminal and type “express”. After that, type “npm install” so all the default libraries will be installed automatically. Here, you’ve got your App scaffolded as shown in the photo:
2- Installing mongoose :
In your terminal just type “npm install mongoose”, and you will notice that mongoose has been added to your package.json
3-Connecting Mongoose to your Database:
First, we need to create a new mongoose model, which is a way of representing a MongoDb collection on your code.
Open a new terminal and type “mongod” → this command will switch your MongoDb server on and you have to keep it up and running while you are working, you will receive a long text on your screen as shown in the photo :
Now, keep that terminal running and go to your code, let us make a new directory and call it models, then create a new file and call it “visits.js” and type the following code in it:
In this file we required mongoose, so we could access the functionality of this library, and one of its functionalities is Schema which defines the structure of the new collection that we will create which can be accessed by calling the model in our code. then we export visits.js
Now, open a new terminal and type “mongo”, then type “use confusion” → this command will create a new database if it is not already existed and then use it in the terminal shell. Now type ..
Then insert a new document inside ‘visits’ collection and show them using these commands:
save that document _id because we are going to use it later on. Then we are going to make a new directory inside our App directory called src/. After that, we will create a file called visitsUp.js and insert the following code in it:
In this file, we have defined a function called sitevisitsUp that will use the mongoose findByIdAndUpdate function to update the visit counter property inside our database. We used the _id property of the document that we have created and we use the mongoose expression $inc to increase the counter by one.
Now, let’s go to routes/index.js and update it with the following code:
In this code, the function siteViewsUp will be called every time the server faces a GET request. then we will find this document and pass it’s counter property to render() function → this way we can access this value inside our Index.ejs which will be rendered when we make a GET request to the main route (server/).
Now, let’s update our app.js file:
First, we need to connect our App to MongoDB server using mongoose.connect() function which takes the URL for the database as an argument.
Then we are going to change the views engine so we can render ejs files, which will be our next topic:
4- Rendering EJS files:
EJS is a simple templating language that lets us generate HTML markup with plain JavaScript. So, It’s just plain JavaScript.
In the terminal type “npm install ejs”, so you can use it.
Let’s go to views folder and make a new file views/index.ejs and type the following code:
The way the ejs files work is bypassing data as an object inside your render() method, then you can access this data by typing js code inside <%= %> tag while the rest of the document is plain HTML.
Now, type “npm start” to start your server then go to http://localhost:3000/. Then you will find something like this:
Each time you refresh the page, the counter will increase automatically.
Now, you have implemented a visit counter for Index page, to expand this to other pages you have many ideas: one of them is to add another field in your database document so you can use different counters for each page and that’s why I have implemented siteViewsUp function in a separate file so you can import it when needed.
I am going to write another post for different counters in the future.
