Scribd
Upload
11 views

Client Side and Server Side

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

Client Side and Server Side

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Certainly!

Here’s an overview of client-side and server-side scripting, along with


simple examples for each.

### Client-Side Scripting

**Definition**: Client-side scripting refers to scripts that run on the user's


browser rather than the server. These scripts can manipulate the web page, validate
forms, and interact with the user without needing to communicate with the server.

**Common Languages**: JavaScript, HTML, and CSS.

#### Example: Client-Side Script Using JavaScript

Here's a simple example that validates a form input on the client side using
JavaScript.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client-Side Scripting Example</title>
<script>
function validateForm() {
const name = document.getElementById("name").value;
if (name === "") {
alert("Name must be filled out");
return false; // Prevent form submission
}
alert("Form submitted successfully!");
return true; // Allow form submission
}
</script>
</head>
<body>

<h1>Client-Side Form Validation</h1>


<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name">
<button type="submit">Submit</button>
</form>

</body>
</html>
```

### Explanation:
- The form includes an input field for the user's name.
- The `validateForm` function checks if the name field is empty. If it is, an alert
is shown, and form submission is prevented.
- If the name is filled out, a success message is displayed, and the form can be
submitted.

---

### Server-Side Scripting


**Definition**: Server-side scripting refers to scripts that run on the server,
generating dynamic web pages. The server processes the script and sends the output
to the client.

**Common Languages**: PHP, Python, Ruby, Node.js, ASP.NET.

#### Example: Server-Side Script Using PHP

Here's a simple example of a PHP script that processes a form submission.

```php
<!-- save this as form.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server-Side Scripting Example</title>
</head>
<body>

<h1>Server-Side Form Submission</h1>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Collect and sanitize form data
$name = htmlspecialchars($_POST['name']);
echo "<h2>Welcome, $name!</h2>";
} else {
echo '<form method="post" action="form.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>';
}
?>

</body>
</html>
```

### Explanation:
- The PHP script checks if the form has been submitted using
`$_SERVER["REQUEST_METHOD"]`.
- If the form is submitted, it collects the input value, sanitizes it using
`htmlspecialchars` to prevent XSS attacks, and displays a welcome message.
- If the form hasn’t been submitted, it displays the form.

### Running the Examples

1. **Client-Side Script**:
- Save the client-side example in an HTML file (e.g., `client-side.html`).
- Open it in a web browser to test the form validation.

2. **Server-Side Script**:
- Save the PHP example in a file named `form.php`.
- Run a local server (e.g., using XAMPP, MAMP, or a built-in server with PHP).
- Access `form.php` through your web browser (e.g.,
`http://localhost/form.php`).
- Fill out the form and submit it to see the server response.

These examples demonstrate the differences between client-side and server-side


scripting and how each is used in web development.

You might also like