,

Creating a FullStack Google Contacts Clone using HTML5, SASS, Javascript, Node.js, Express.js, and MySQL – Part 13

Posted by






Google Contacts FullStack Clone Part 13

Google Contacts FullStack Clone Part 13

Welcome to part 13 of our Google Contacts FullStack Clone tutorial series. In this part, we will be focusing on implementing MySQL database into our application using Node.js and Express.js.

Setting up MySQL Database

First, we need to have MySQL installed on our system. If you haven’t installed it yet, you can download it from the official website and follow the installation instructions.

Once MySQL is installed, we can create a new database for our application. You can do this by using a MySQL client such as MySQL Workbench or by running SQL commands in the terminal.

Here is an example of creating a new database:

“`sql
CREATE DATABASE google_contacts;
“`

After creating the database, we can then create a new table to store our contacts. Here is an example of creating a contacts table:

“`sql
CREATE TABLE contacts (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
phone VARCHAR(20) NOT NULL
);
“`

Connecting Node.js with MySQL

Next, we need to connect our Node.js application with the MySQL database. We will be using the mysql package to achieve this.

First, we need to install the mysql package using npm:

“`bash
npm install mysql
“`

Then, we can create a new file called db.js to handle the database connection:

“`javascript
const mysql = require(‘mysql’);

// Create a connection to the database
const connection = mysql.createConnection({
host: ‘localhost’,
user: ‘root’,
password: ‘password’,
database: ‘google_contacts’
});

// Connect to the database
connection.connect((err) => {
if (err) {
throw err;
}
console.log(‘Connected to the database’);
});

module.exports = connection;
“`

CRUD Operations with MySQL

Now that we have set up the database connection, we can start implementing the CRUD (Create, Read, Update, Delete) operations for our contacts. We will be using the express package for handling HTTP requests and responses.

Here is an example of creating a new contact:

“`javascript
app.post(‘/contacts’, (req, res) => {
const { name, email, phone } = req.body;
const sql = ‘INSERT INTO contacts (name, email, phone) VALUES (?, ?, ?)’;
connection.query(sql, [name, email, phone], (err, result) => {
if (err) {
res.status(500).json({ error: err.message });
return;
}
res.json({ message: ‘Contact created successfully’, id: result.insertId });
});
});
“`

Similarly, we can implement the update and delete operations for contacts as well.

Conclusion

In this part of the tutorial, we have successfully integrated MySQL database into our Google Contacts FullStack Clone application. We have also implemented CRUD operations for managing contacts using Node.js and Express.js.

Stay tuned for the next part of the tutorial series, where we will be focusing on enhancing the user interface of our application with HTML5 and SASS.