Module Title: Introduction to PHP Programming

Fundamentals, Data Types, Control Structures, Functions,

Events, and JavaScript
Learning Outcomes:

 Understand PHP syntax and basic programming constructs such as variables, data types,
operators, loops, and conditionals.
 Learn how to create and use functions, including the concept of scope in PHP.
 Explore event handling in JavaScript, DOM manipulation, and object-oriented
programming concepts.
 Develop dynamic web applications using JavaScript with asynchronous programming
concepts like callbacks, promises, and async/await.

I. PHP: Programming Fundamentals, Data Types, Control

Structures, Functions, and Events
1. PHP Syntax and Basic Programming Constructs

PHP (PHP: Hypertext Preprocessor) is a widely-used, open-source scripting language suited for
web development and can be embedded in HTML.

1.1 Variables in PHP

In PHP, variables are used to store data. Variables start with a dollar sign ($), followed by the
name of the variable.

<?php
$name = "John Doe";
$age = 25;
?>

1.2 Data Types

PHP supports several data types, including:

 String: Sequence of characters ($str = "Hello").

 Integer: Whole numbers ($num = 100).
 Float: Decimal numbers ($pi = 3.14).
 Boolean: True or false values ($isLogged = true).
 Array: Ordered collections of values ($fruits = array("apple", "banana")).
1.3 Operators in PHP

Operators are used to perform operations on variables and values.

 Arithmetic Operators: +, -, *, /, %.
 Assignment Operators: =, +=, -=, etc.
 Comparison Operators: ==, !=, <, >, etc.
 Logical Operators: &&, ||, !.

1.4 Control Structures

Control structures allow you to control the flow of your program based on conditions.

 If-Else Statement:

<?php
if ($age >= 18) {
echo "You are an adult.";
} else {
echo "You are a minor.";
}
?>

 Switch Statement:

<?php
$day = "Monday";
switch ($day) {
case "Monday":
echo "It's Monday!";
break;
default:
echo "Not Monday.";
}
?>

1.5 Loops in PHP

Loops are used to repeat a block of code multiple times.

 For Loop:

<?php
for ($i = 0; $i < 10; $i++) {
echo $i;
}
?>
  While Loop:

<?php
$i = 0;
while ($i < 5) {
echo $i++;
}
?>

2. Functions and Scope in PHP

Functions are blocks of code designed to perform specific tasks.

<?php
function greet($name) {
return "Hello, $name!";
}
echo greet("Alice");
?>

2.1 Scope in PHP

 Global Scope: Variables declared outside a function.

 Local Scope: Variables declared inside a function.

<?php
$globalVar = "I'm global";

function testScope() {
global $globalVar;
echo $globalVar; // Accessing global variable inside the
function
}
testScope();
?>

3. Events and Event Listeners in JavaScript

JavaScript allows you to add event listeners to elements in a web page that will trigger when
certain events happen (like a button click).

document.getElementById("myButton").addEventListener("click",
function() {
alert("Button clicked!");
});
4. Manipulating the Document Object Model (DOM) Using JavaScript

DOM manipulation involves changing the structure, style, or content of a web page using
JavaScript.

 Accessing DOM Elements:

let element = document.getElementById("content");

 Modifying Content:

element.innerHTML = "New Content!";

 Changing Styles:

element.style.color = "blue";

5. Object-Oriented Programming Concepts in JavaScript

Object-Oriented Programming (OOP) is a programming model organized around objects.

5.1 Objects and Classes

 Creating Objects:

let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet();

 Creating Classes:

class Car {
constructor(brand) {
this.brand = brand;
}
drive() {
console.log(this.brand + " is driving.");
}
}
let myCar = new Car("Toyota");
myCar.drive();
6. Asynchronous Programming in JavaScript Using Callbacks, Promises, and
Async/Await

Asynchronous programming allows you to perform tasks that take time, like fetching data from a
server, without blocking the entire execution of your code.

6.1 Callbacks

A callback function is passed as an argument to another function.

function fetchData(callback) {
setTimeout(() => {
callback("Data fetched");
}, 2000);
}
fetchData((result) => console.log(result));

6.2 Promises

A promise is used for asynchronous operations. It can be in one of three states: pending,
resolved, or rejected.

let promise = new Promise((resolve, reject) => {

let success = true;
if (success) resolve("Success!");
else reject("Error!");
});
promise.then(result => console.log(result)).catch(error =>
console.error(error));

6.3 Async/Await

The async and await keywords allow you to write asynchronous code in a synchronous manner.

async function fetchData() {

let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
}
fetchData();

II. Laboratory: Create a Dynamic Web Application Using

JavaScript
Task: Build a simple dynamic web application that uses PHP as the backend and
JavaScript for the front-end.

1. Backend (PHP): Handle form submissions, process data, and return JSON responses.
2. Frontend (JavaScript): Use AJAX or Fetch API to send and receive data without
reloading the page. Manipulate the DOM dynamically to update content.

Assessment and Exercises:

1. PHP Practice:
o Create a PHP script that takes user input and displays the result using conditional
statements.
o Write a function that performs basic arithmetic operations and returns the result.
2. JavaScript Practice:
o Implement an event listener that changes the background color of a webpage
when a button is clicked.
o Create a form that submits data asynchronously using JavaScript and fetches a
response from the PHP server.

Conclusion:

This module covers the fundamental concepts of PHP and JavaScript needed for dynamic web
application development. By mastering these concepts, students will be able to build interactive
and responsive websites that efficiently handle user input and data.