Introduction to Node.js and Express

Why Learn Node.js and Express?

What is Node.js?

What is Express?

PHP vs Node.js/Express

PHP Approach Node.js / Express Approach
Runs with Apache/XAMPP Runs with Node.js
Backend language is PHP Backend language is JavaScript
Often mixes PHP with HTML Often sends JSON data to the frontend
Frontend can submit forms directly to PHP pages Frontend can call API routes such as /students
HTML → PHP → MySQL React → Express → MySQL

Step 1: Create a Node Project

Commands: 
mkdir nodeapp
cd nodeapp
npm init -y
npm install express

Step 2: Create Your First Express Server

index.js: 
        const express = require('express'); 
        // Import the Express library
        
        const app = express(); 
        // Create an Express application (this is our server)
        
        app.get('/', (req, res) => { 
          // Define a route for the homepage "/"
          // req = request from the browser
          // res = response sent back to the browser
        
          res.send('Hello from Express!'); 
          // Send a response (text or HTML) to the browser
        });
        
        app.listen(3000, () => { 
          // Start the server on port 3000
        
          console.log('Server running at http://localhost:3000'); 
          // Print a message in the terminal
        });

How to Run the Server

node index.js

Important: Restart the Server

Steps: 
Ctrl + C      (stop server)
node index.js (restart server)

What is a Route?

Example: 
app.get('/students', (req, res) => {
  res.json([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ]);
});

app.get('/course', (req, res) => {
  res.send('<h1>Course Page</h1>');
});
Then visit:

What is JSON?

Connecting Express to MySQL

npm install mysql2
Example: 
const express = require('express');
const mysql = require('mysql2');
const app = express();

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'school'
});

app.get('/students', (req, res) => {
  db.query('SELECT * FROM students', (err, results) => {
    if (err) {
      res.status(500).send(err.message);
      return;
    }
    res.json(results);
  });
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

How the Modern Stack Works

Layer Technology Job
Frontend React Displays pages and user interface
Backend Node.js + Express Handles requests and sends data
Database MySQL Stores application data

Frontend Calling Express (Using HTML)

Step 1: Create a public Folder

Step 2: Create test.html

<!DOCTYPE html>
<html>
<head>
    <title>Students</title>
</head>
<body>

<h1>Students</h1>
<ul id="studentsList"></ul>

<script>
fetch('http://localhost:3000/students')
  .then(response => response.json())
  .then(data => {
    const list = document.getElementById('studentsList');

    data.forEach(student => {
        const li = document.createElement('li');
        li.textContent = student.name;
        list.appendChild(li);
    });
  })
  .catch(error => console.error(error));
</script>

</body>
</html>

Step 3: Update index.js

app.use(express.static('public')); //Make the public folder available to the browser as static files

Step 4: Run and Test

node index.js

Important Idea: API-Based Development

Summary