1.
PHP Basics
Example: PHP Syntax
php
Copy code
<?php
echo "Hello, World!"; // Output text
?>
2. Connecting to a Database Server
Using MySQLi (Object-Oriented)
php
Copy code
<?php
$servername = "localhost";
$username = "root";
$password = "";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
3. Creating a Database
php
Copy code
<?php
$sql = "CREATE DATABASE myDatabase";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
} else {
echo "Error creating database: " . $conn->error;
}
?>
4. Selecting a Database
php
Copy code
<?php
$conn->select_db("myDatabase");
?>
5. Listing Databases
php
Copy code
<?php
$sql = "SHOW DATABASES";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
echo $row['Database'] . "<br>";
}
?>
6. Listing Table Names
php
Copy code
<?php
$sql = "SHOW TABLES";
$result = $conn->query($sql);
while ($row = $result->fetch_row()) {
echo $row[0] . "<br>";
}
?>
7. Creating a Table
php
Copy code
<?php
$sql = "CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if ($conn->query($sql) === TRUE) {
echo "Table users created successfully";
} else {
echo "Error creating table: " . $conn->error;
}
?>
8. Inserting Data
php
Copy code
<?php
$sql = "INSERT INTO users (firstname, lastname, email)
VALUES ('John', 'Doe', 'john.doe@example.com')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
?>
9. Altering a Table
php
Copy code
<?php
$sql = "ALTER TABLE users ADD COLUMN age INT(3)";
if ($conn->query($sql) === TRUE) {
echo "Table altered successfully";
} else {
echo "Error altering table: " . $conn->error;
}
?>
10. Queries (Selecting Data)
php
Copy code
<?php
$sql = "SELECT id, firstname, lastname FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " .
$row["lastname"] . "<br>";
}
} else {
echo "0 results";
}
?>
11. Deleting a Database
php
Copy code
<?php
$sql = "DROP DATABASE myDatabase";
if ($conn->query($sql) === TRUE) {
echo "Database deleted successfully";
} else {
echo "Error deleting database: " . $conn->error;
}
?>
12. Deleting Data and Tables
php
Copy code
// Delete a record
$sql = "DELETE FROM users WHERE id=1";
// Drop a table
$sql = "DROP TABLE users";
13. PHPMyAdmin and Database Bugs
• PHPMyAdmin: A GUI tool for managing MySQL databases. It simplifies tasks like
running queries, exporting, importing, and managing users and permissions.
• Database Bugs:
o Connection Issues: Ensure credentials are correct.
o Syntax Errors: Double-check SQL syntax.
o Data Loss: Always back up databases before running DELETE or DROP
commands.
o Injection Attacks: Use prepared statements or parameterized queries to prevent
SQL injection.
14. Introduction to Bootstrap
• Bootstrap: A popular CSS framework for building responsive, mobile-first websites.
Example: Adding Bootstrap to a Project
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center text-primary">Welcome to Bootstrap</h1>
<button class="btn btn-success">Click Me</button>
</div>
</body>
</html>
15. Introduction to jQuery
• jQuery: A fast, small JavaScript library for simplifying client-side scripting.
Example: Adding jQuery to a Project
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">Click Me</button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
alert("Button clicked!");
});
});
</script>
</body>
</html>
Q1: Introducing Bootstrap and Its Role in Web Design and Development
Bootstrap is a popular front-end framework used for building responsive and mobile-first
websites quickly and efficiently. It includes pre-designed CSS, JavaScript components, and a
grid system that simplifies web development.
Role of Bootstrap in Web Design and Development
1. Responsive Design
o Bootstrap's grid system automatically adjusts layouts based on screen size, ensuring
that web pages look great on devices ranging from desktops to smartphones.
2. Pre-Designed Components
o Offers ready-made components like navigation bars, modals, buttons, cards, and forms
that save development time.
3. Consistency
o Ensures consistent styling across different web browsers and devices.
4. Customizability
o Allows developers to override or customize styles using their own CSS while maintaining
the core structure.
5. Faster Development
o With its pre-built CSS and JavaScript components, Bootstrap significantly reduces the
time needed to design and implement UI features.
6. Cross-Browser Compatibility
o Handles differences between browsers, making the website appear consistent
everywhere.
7. Integration
o Easily integrates with other technologies, such as Angular, React, or plain JavaScript.
Q2: What is jQuery and How Does It Enhance Client-Side Scripting and
Interactivity in Web Pages?
jQuery is a lightweight JavaScript library that simplifies the process of creating interactive
and dynamic web pages. It provides an easy-to-use API for tasks such as DOM manipulation,
event handling, animations, and AJAX.
How jQuery Enhances Client-Side Scripting
1. Simplified Syntax
o jQuery reduces complex JavaScript tasks into concise and easy-to-read code.
javascript
Copy code
// Vanilla JavaScript
document.getElementById("example").style.color = "red";
// jQuery equivalent
$("#example").css("color", "red");
2. Cross-Browser Compatibility
o Handles inconsistencies across browsers, ensuring that code behaves as expected.
3. Event Handling
o Simplifies attaching event listeners, improving interactivity.
javascript
Copy code
$("#button").click(function() {
alert("Button clicked!");
});
4. AJAX Integration
o Makes asynchronous server requests easier, enabling dynamic content updates without
reloading the page.
javascript
Copy code
$.get("data.json", function(data) {
console.log(data);
});
5. Built-In Animations
o Provides functions for animations like fade-in/out, slide-in/out, and custom effects.
javascript
Copy code
$("#box").fadeOut();
6. Plugins
o The rich ecosystem of jQuery plugins extends functionality, like sliders, date pickers, and
carousels.
7. DOM Manipulation
o Enables dynamic changes to web page structure and content.
javascript
Copy code
$("#content").append("<p>New paragraph added!</p>");
jQuery's Role in Interactivity
By abstracting the complexity of JavaScript, jQuery allows developers to:
• Quickly respond to user actions.
• Create dynamic user interfaces.
• Enhance website usability with minimal effort.
