Ricky Hui
Programmer
Blog
WK Hui life

Introduction to Server and Client-side programming

In today’s programming, it can simply classify to server or client-side programming. Or we only need client side for some projects. For today’s website, we need both sides normally.

Server-side programming refers to the execution of code on a web server to generate and deliver dynamic web content to the client’s web browser. It involves handling requests, processing data, interacting with databases, and generating HTML or other content to be sent back to the client. Common server-side programming languages include PHP, Python (with frameworks like Django or Flask), Ruby (with Ruby on Rails), and Node.js.

Example: Let’s consider a simple example of a server-side program using Node.js. Suppose you have a website that allows users to submit feedback. The server-side code receives the feedback and stores it in a database.

// server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Parse incoming request data
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Handle POST request to submit feedback
app.post('/feedback', (req, res) => {
  const { name, email, message } = req.body;

  // Store feedback in the database
  // (Database code not shown for simplicity)

  res.send('Thank you for your feedback!');
});

// Start the server
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

In this example, we’re using the Express.js framework with Node.js to handle HTTP requests. The server listens for POST requests to the /feedback endpoint and extracts the submitted data from the request body. It then processes and stores the feedback before sending a simple response back to the client.

Client-side programming refers to the execution of code within the user’s web browser. It involves manipulating the DOM (Document Object Model), handling user interactions, making asynchronous requests to the server, and dynamically updating the web page’s content. Client-side programming languages include JavaScript, HTML, and CSS.

Example: Let’s consider a simple example of a client-side program using JavaScript. Suppose you have a website that allows users to calculate the total price of items selected from a list.

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>Item Price Calculator</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Item Price Calculator</h1>
  <ul>
    <li>
      <input type="checkbox" value="10"> Item 1
    </li>
    <li>
      <input type="checkbox" value="20"> Item 2
    </li>
    <li>
      <input type="checkbox" value="15"> Item 3
    </li>
  </ul>
  <button onclick="calculateTotal()">Calculate Total</button>
  <p id="totalPrice"></p>
</body>
</html>



// script.js

function calculateTotal() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  let total = 0;

  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      total += parseInt(checkbox.value);
    }
  });

  document.getElementById('totalPrice').textContent = `Total Price: $${total}`;
}

In this example, we have an HTML page with a list of items represented as checkboxes. When the user clicks the “Calculate Total” button, the calculateTotal() JavaScript function is invoked. It iterates over the checkboxes, checks which ones are selected, and sums up their corresponding values. The calculated total price is then displayed on the web page.