Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

JavaScript Coding with AIChapter 11. Building Web Applications in JavaScript

Database Integration: MongoDB

Database Integration: MongoDB

Database Integration: Mongo DB

MongoDB is a popular NoSQL database designed to store and manage data in a way that's both flexible and scalable. Its document-oriented model, which uses JSON-like data structures, makes it an excellent choice for modern web applications. For coding beginners, understanding how to integrate MongoDB into your application can open the door to building dynamic, data-driven websites and applications.

In this section, we’ll cover the following topics:

  • Introduction to Database Integration
  • What is MongoDB?
  • How to Use MongoDB
  • Using Multiple Terminals for Web Development with Mongo DB

Introduction to Database Integration

Databases are essential components of web applications, enabling the storage and retrieval of user data, application settings, and much more. For beginners, mastering database integration is a fundamental step in learning how to build interactive and scalable applications.

What is a Database and Why is it Important for Web Applications?

A database is a structured way to store and manage data so that it can be accessed easily. For example:

  • A social media app stores user profiles, posts, and comments in a database.
  • An e-commerce site stores product details, order histories, and customer information.

Databases ensure that web applications can handle dynamic user interactions like logging in, saving preferences, and updating content.

Type of Database

There are two main types of databases:

  • Relational Databases: Use structured tables (e.g., MySQL, PostgreSQL).
  • NoSQL Databases: Use more flexible structures like documents or key-value pairs (e.g., MongoDB, Firebase).

What is MongoDB?

MongoDB is a NoSQL database that uses collections of documents to store data, making it easier to handle complex and dynamic data. Beginners often find MongoDB approachable because of its simplicity and the fact that its syntax is similar to JSON, which many are already familiar with.

Introduction to MongoDB

MongoDB organizes data into databases, which contain collections, and each collection contains documents. Documents are stored in a JSON-like format and can include nested structures, arrays, and more.

For example, a document in a MongoDB collection might look like this:

{
  "name": "John Doe",
  "age": 30,
  "skills": ["JavaScript", "Node.js", "MongoDB"]
}

This flexibility allows MongoDB to adapt to various application needs without requiring strict schemas like relational databases.

Benefits of Using MongoDB for Web Applications

  • Flexible Data Model: Modify the structure of your data without disrupting your application.
  • JavaScript Compatibility: MongoDB integrates seamlessly with JavaScript frameworks like Node.js.
  • Scalable Performance: MongoDB can handle large amounts of data and scale easily for growing applications.
  • Cloud and Local Support: Use MongoDB locally for development or in the cloud with services like MongoDB Atlas.

How to Use MongoDB

This section will guide you through setting up MongoDB for local development and integrating it with your web application.

Installing MongoDB in a Local Environment

For beginners, starting with a local MongoDB installation helps you understand how the database works without needing cloud services. Here’s how to set it up:

Download MongoDB:

Go to the MongoDB Community Edition page and download the version for your operating system.

Install the Software:

Follow the installation wizard and ensure MongoDB is added to your system’s PATH for easy access from the terminal.

Start the MongoDB Server:

Open a terminal and run the following command to start the MongoDB server:

mongod
#If it is not working, use the command below with the db file path
mongod --dbpath ~/data/db

Keep this terminal open, as it must run continuously for MongoDB to work.

Open a New Terminal for the Client:

In a second terminal, you can use the mongo shell to interact with your database:

mongosh

Important!

You will need at least two terminals when developing locally:

  • One terminal for running the MongoDB server (mongod).
  • Another terminal for launching and testing your web application (e.g., localhost).

If you want to directly control the database (e.g., inserting, updating, and deleting data), you can use one more terminal for MongoDB Shell.

Note: Stop MongoDB

To stop the MongoDB server, use Ctrl + C in the terminal where the mongod process is running. This will safely shut down the MongoDB server.

Installing MongoDB in a Cloud Environment

For deploying applications or working with a live database, MongoDB Atlas provides an easy-to-use cloud solution.

  • Create an Account: Sign up at MongoDB Atlas.
  • Create a Cluster: Follow the setup wizard to create a new cluster. Select your preferred cloud provider (AWS, Azure, or GCP).
  • Secure Your Cluster: Configure IP whitelisting and set up a username and password for secure access.
  • Connect Your Application: Use the connection string provided by Atlas to link your web application.

Configuring MongoDB for JavaScript-Based Web Applications

Install MongoDB Driver:
In your web application folder, install the MongoDB driver using npm:

npm install mongodb

Write a Connection Script:
Create a JavaScript file to connect your application to MongoDB. For example:

const { MongoClient } = require("mongodb");

const uri = "your-connection-string";
const client = new MongoClient(uri);

async function connectToDB() {
  try {
    await client.connect();
    console.log("Connected to MongoDB!");
  } catch (err) {
    console.error(err);
  } finally {
    await client.close();
  }
}

connectToDB();

Creating and Managing Databases with MongoDB

Once MongoDB is running, you can start creating databases and managing data.

Create a Database: Use the use command in the Mongo shell (mongosh):

use myNewDatabase

Create a Collection: Collections are like folders where your data is stored. To create one:

db.createCollection("myCollection");

Insert Data: Add data to a collection using insertOne:

db.myCollection.insertOne({ name: "Alice", age: 25 });

Query Data: Retrieve data with the find command:

db.myCollection.find({ name: "Alice" });

Update Data: Modify existing data using updateOne:

db.myCollection.updateOne({ name: "Alice" }, { $set: { age: 26 } });

Delete Data: Remove documents using deleteOne:

db.myCollection.deleteOne({ name: "Alice" });

Using Multiple Terminals for Web Development with Mongo DB

It's not strictly necessary to have three terminals open to manage MongoDB for web app development, but it can be quite helpful for certain workflows and provides a more organized development experience.

Typical Use Cases for Multiple Terminals

Terminal 1: For MongoDB Server

One terminal is used to run the mongod process, which starts the MongoDB server. This keeps the server running in the background.
To start the MongoDB server with a specific directory path:

mongod --dbpath ~/data/db

--dbpath: Specifies the directory where MongoDB stores data. Replace ~/data/db with your database path if different. Leave this terminal running. It shows logs from the MongoDB server.

When the DB is running, you can see the log like the one below:

Example log:

{"t":{"$date":"2024-12-23T15:24:12.727+08:00"},"s":"I",  "c":"NETWORK",  "id":23015, "ctx":"listener","msg":"Listening on","attr":{"address":"127.0.0.1"}}

Terminal 2: For MongoDB Shell

A second terminal runs the mongo shell. This provides a command-line interface to interact with your MongoDB databases. You can use it to:

  • Create and manage databases and collections.
  • Insert, update, and delete data.
  • Run queries and aggregations.

To enter the MongoDB shell, run the command below:

mongosh

If successful, you’ll enter the MongoDB shell (mongosh), where you can manage your databases.

Terminal 3: For Web Application

The third terminal is used to run your web application (using Node.js and Express, for example). This terminal executes your application code, which connects to the MongoDB server and interacts with the database.
Navigate to your project directory and start your app:

cd your-project-folder-path
node server.js

Your app will now connect to the MongoDB server running in the first terminal. For example:

If your app connects successfully, you’ll see a confirmation message like:

MongoDB connected successfully
Server running on http://localhost:3000

Open a browser and go to http://localhost:3000 to test your app.

For further guidance, explore the official MongoDB documentation.

Benefits and Alternatives of Multiple Terminal setup

Benefits:

  • Clear separation of concerns: Each terminal has a specific role, making it easier to manage different aspects of your development environment.
  • Improved organization: You can easily monitor the server logs, execute database commands, and run your application code in separate windows.
  • Debugging: Having separate terminals can be helpful for debugging, as you can see the output of each process independently.
  • GUI Tools: You can use GUI tools like MongoDB Compass to manage your database instead of the mongo shell. This provides a visual interface for interacting with your data.
  • Combined Terminal: Some developers prefer to use a single terminal with multiple tabs or panes to manage all processes. This can be more compact but might require more switching between tasks.

Alternatives:

Ultimately, the choice depends on your personal preference and workflow. If you find it helpful to have separate terminals for each process, it can lead to a more organized and efficient development experience. However, it's not a strict requirement, and you can certainly manage MongoDB with fewer terminals if you prefer.

Reference links:

MongoDB documentation

More Topics to Explore

CSS Media Queries and Breakpoints

CSS Media Queries and Breakpoints

CSS Text Styling Properties Explained

Text Styling Properties

Figma Component Basics

Figma Component Basics

Web Frameworks vs. CMS: Understanding Options for Building Websites

Web Framework and CMS

Responsive Design Example: Two Column Layout

Responsive Design Example: Two Column Layout

CSS Media Queries and Breakpoints

CSS Media Queries and Breakpoints

CSS Text Styling Properties Explained

Text Styling Properties

Figma Component Basics

Figma Component Basics

Web Frameworks vs. CMS: Understanding Options for Building Websites

Web Framework and CMS

Responsive Design Example: Two Column Layout

Responsive Design Example: Two Column Layout

Tags:

MongoDB Integration

NoSQL Database

Web Application Development

JavaScript Compatibility

Database Management

JavaScript Coding with AI
Course Content

Chapter 1. Key Javascript Concepts And Coding With AI

What Is Javascript?

Start Writing Javascript With AI Assistance

Javascript Basics

Chapter 2. Javascript Basic Syntax

Statements And Expressions

Variables

Case Sensitivity

Case Style For Javascript

Reserved Words

Escape Characters

Semi-Colons

Spaces And Indentation

Comments

Literals and Data Types

Arrays

Template Literal

Brackets

Chapter 3. Operators In Javascript

Arithmetic Operators

Increment And Decrement Operators

Assignment Operators

Comparison Operators

Conditional Operators

Logical Operators

Logical Assignment Operators

Nullish Coalescing Operator

Optional Chaining

Three Dots in JavaScript

Chapter 4. Control Statements In Javascript

If Statement

Switch Statement

While Statement

For Statement

Chapter 5. Functions In Javascript

How To Create A Function

Functions With Default Parameter

Return Values

Variable Scope

Function Hoisting

This in JavaScript

Anonymous Function

Arrow Function

Higher-Order Function

Chapter 6. Objects, Methods, And Classes In Javascript

Objects

Methods

Array Methods

Classes

Immutable and Mutable Data Types

What Is JSON?

Chapter 7. Manipulating Web Pages With Javascript

BOM And DOM

getElementBy vs. querySelector

Event Handler And Event Listener

Event Object

Mouse Events

Keyboard Events

Focus And Blur Events

Form Events

Window Events

Touch Events

Drag And Drop Events

Animation Events

Media Events, Network Events, and More

Javascript Custom Events

Chapter 8. Web API And Ajax Javascript Coding

What Are The HTTP Methods?

What Is Ajax?

Implementing Web APIs

Chapter 9. Modules And Libraries In Javascript

Javascript Libraries And Frameworks

NPM: Javascript Package Manager

How To Use jQuery

Chapter 10. Browser Storage in JavaScript

Local Storage

Session Storage

Cookies

Chapter 11. Building Web Applications in JavaScript

Node.js and Express.js

Database Integration: Mongo DB

Developing a Chat Application

Canvas HTML Tag and JavaScript

Creating an Online Drawing Tool

Chapter 1. Key Javascript Concepts And Coding With AI

What Is Javascript?

Start Writing Javascript With AI Assistance

Javascript Basics

Chapter 2. Javascript Basic Syntax

Statements And Expressions

Variables

Case Sensitivity

Case Style For Javascript

Reserved Words

Escape Characters

Semi-Colons

Spaces And Indentation

Comments

Literals and Data Types

Arrays

Template Literal

Brackets

Chapter 3. Operators In Javascript

Arithmetic Operators

Increment And Decrement Operators

Assignment Operators

Comparison Operators

Conditional Operators

Logical Operators

Logical Assignment Operators

Nullish Coalescing Operator

Optional Chaining

Three Dots in JavaScript

Chapter 4. Control Statements In Javascript

If Statement

Switch Statement

While Statement

For Statement

Chapter 5. Functions In Javascript

How To Create A Function

Functions With Default Parameter

Return Values

Variable Scope

Function Hoisting

This in JavaScript

Anonymous Function

Arrow Function

Higher-Order Function

Chapter 6. Objects, Methods, And Classes In Javascript

Objects

Methods

Array Methods

Classes

Immutable and Mutable Data Types

What Is JSON?

Chapter 7. Manipulating Web Pages With Javascript

BOM And DOM

getElementBy vs. querySelector

Event Handler And Event Listener

Event Object

Mouse Events

Keyboard Events

Focus And Blur Events

Form Events

Window Events

Touch Events

Drag And Drop Events

Animation Events

Media Events, Network Events, and More

Javascript Custom Events

Chapter 8. Web API And Ajax Javascript Coding

What Are The HTTP Methods?

What Is Ajax?

Implementing Web APIs

Chapter 9. Modules And Libraries In Javascript

Javascript Libraries And Frameworks

NPM: Javascript Package Manager

How To Use jQuery

Chapter 10. Browser Storage in JavaScript

Local Storage

Session Storage

Cookies

Chapter 11. Building Web Applications in JavaScript

Node.js and Express.js

Database Integration: Mongo DB

Developing a Chat Application

Canvas HTML Tag and JavaScript

Creating an Online Drawing Tool

FAQ: Database Integration with MongoDB

What is MongoDB and why is it popular for web applications?

MongoDB is a popular NoSQL database designed to store and manage data in a flexible and scalable manner. Its document-oriented model, which uses JSON-like data structures, makes it an excellent choice for modern web applications. MongoDB's flexibility and scalability are key reasons for its popularity among developers.

How does MongoDB differ from relational databases?

MongoDB is a NoSQL database that uses collections of documents to store data, allowing for more flexible data structures compared to relational databases, which use structured tables. This flexibility makes MongoDB suitable for handling complex and dynamic data without requiring strict schemas.

What are the benefits of using MongoDB for web applications?

MongoDB offers several benefits for web applications, including a flexible data model that allows for easy modification of data structures, seamless integration with JavaScript frameworks like Node.js, scalable performance to handle large amounts of data, and support for both cloud and local environments.

How can I set up MongoDB for local development?

To set up MongoDB for local development, download the MongoDB Community Edition for your operating system, install the software, and start the MongoDB server using the terminal. You will need at least two terminals: one for running the MongoDB server and another for interacting with the database using the mongo shell.

What is the purpose of using multiple terminals in MongoDB development?

Using multiple terminals in MongoDB development helps organize different tasks: one terminal runs the MongoDB server, another is used for the MongoDB shell to manage databases, and a third can be used to run your web application. This setup provides clear separation of concerns and aids in debugging by allowing you to monitor each process independently.

Can I use GUI tools instead of multiple terminals for MongoDB management?

Yes, you can use GUI tools like MongoDB Compass to manage your database instead of the mongo shell. These tools provide a visual interface for interacting with your data, offering an alternative to using multiple terminals. The choice depends on your personal preference and workflow.