Webinar Topic

Building Dynamic Websites with PHP

A Live Demo on CRUD Operations.

Introduce Myself

Good morning/afternoon, everyone!

It’s a pleasure to be here today. My name is [RASHMI PRAVA MISHRA], and I work as a Computer Programmer at USBM College. In my role, I’m responsible for guiding students in web development, teaching them how to create websites and web applications using technologies like HTML, CSS, PHP, and MySQL.

In addition to my work at USBM College, I also work as a freelance software developer, and I have 3 to 4 years of experience working as a software developer in the industry. This experience allows me to bring real-world insights and practical examples to my teaching, bridging the gap between theoretical knowledge and the skills needed in the workplace.

At USBM College, I handle project classes where students work on real-world projects, developing practical skills in web development. I specialize in teaching the fundamentals of building websites, from designing the front end with HTML and CSS to implementing back-end functionality with PHP and MySQL.

I’m passionate about helping students learn how to create functional websites and applications, and I’m excited to share some of that knowledge with you today. We’ll be covering how to build a simple CRUD application using PHP, and I’ll also be sharing some insights into the MCA program at USBM College, which prepares students for successful careers in web development.

I warmly welcome you all to this exciting webinar on ‘Building Dynamic Websites with PHP: A Live Demo on CRUD Operations.’

This session is designed to give you a practical introduction to web development using PHP and MySQL. You will see a live demonstration of how to build a small dynamic website with CRUD operations (Create, Read, Update, Delete), which are essential for any database-driven application.

But that’s not all! We will also discuss career opportunities in the IT field and how pursuing an MCA degree can open doors to high-paying and in-demand tech careers.

So, whether you are already interested in programming or just curious about how websites work, this session will give you a clear understanding of how easy it is to get started in web development and why MCA is a great choice for your future.

Let’s get started!"

MCA as a Career Option & Its Scope in IT

The Master of Computer Applications (MCA) is one of the most sought-after postgraduate degrees for students who want to build a career in software development, web development, data science, cybersecurity, and other IT fields.

Why Choose MCA?

Open for All Streams: Even if you have a background in B.Sc, B.A, or B.Com, you can pursue MCA and transition into the IT industry.
Industry-Relevant Curriculum: MCA covers programming languages, web development, database management, cloud computing, artificial intelligence, and cybersecurity.
High Demand for IT Professionals: The IT sector is growing rapidly, and companies actively seek MCA graduates for technical roles.

Scope & Career Opportunities in IT

After completing MCA, you can work in various roles, such as:

Software Developer – Building web and mobile applications.
Web Developer – Creating and managing websites.
Database Administrator – Handling large-scale data storage.
Cybersecurity Expert – Protecting systems from online threats.
Cloud Engineer – Managing cloud-based applications.
IT Consultant – Advising businesses on technology solutions.

With continuous advancements in technology, MCA graduates have excellent job opportunities in multinational companies, startups, government organizations, and freelance projects.

👉 If you're looking for a high-paying and future-proof career in IT, MCA is your gateway!

PHP in Web Development & Its Accessibility for Non-CS Students

Why PHP?

PHP (Hypertext Preprocessor) is one of the most popular programming languages for web development. It powers over 75% of websites, including Facebook, WordPress, and e-commerce platforms.

Why PHP is Widely Used?

✅ Easy to Learn – PHP has a simple syntax, making it beginner-friendly.

✅ Dynamic & Interactive – It enables websites to handle user input, databases, and sessions effectively.

✅ Database Integration – Works seamlessly with MySQL to store and manage data.

✅ Open-Source & Cost-Effective – No licensing fees, making it widely adopted by businesses.

Can Non-CS Students Learn PHP?

Absolutely! PHP does not require prior programming experience. Students from B.Sc, B.A, and B.Com backgrounds can start learning PHP easily because:

✔️ It follows simple logic and English-like syntax.

✔️ No need to learn complex theories—just basic coding concepts.

✔️Plenty of online resources, tutorials, and practical examples are available.

By the end of this session, you’ll see how PHP can help you build a dynamic website from scratch!

Talking About Your MCA College

"Let me share a little about USBM College, where we offer an MCA program that’s designed to give students the skills and knowledge they need to succeed in the ever-growing world of technology. At USBM College, we focus on a hands-on, practical approach to learning, and our MCA program is no exception.

Our curriculum provides students with a solid foundation in key areas such as web development, software engineering, and database management. We teach them how to build real-world applications using technologies like HTML, CSS, PHP, MySQL, and frameworks like Laravel, which gives them the edge they need in the job market.

Students are trained in both front-end and back-end technologies, ensuring they gain a holistic understanding of how to create fully functional web applications.

Our project-based learning approach ensures that students don’t just learn theory—they also apply their knowledge by working on live projects, such as the CRUD applications I’ll be demonstrating today. This approach helps them develop problem-solving skills and prepares them for real-world challenges in the tech industry.

We also have strong industry connections, providing students with access to internships and placement opportunities, which significantly boosts their career prospects. If you’re interested in pursuing a career in web development, our MCA program is an excellent choice.

If you have any questions about the program or would like to know more about admissions, please feel free to reach out to us. We’re here to guide you through the process!"...

To connect with me ...click here ...

Transition to Web Development Topic

1. Introduction to Web Development:

"Now that you have an idea of the MCA program and how we prepare students for careers in technology, let’s dive into the exciting world of web development. Web development is an essential skill for building the digital platforms that power businesses, services, and personal projects all around the world."

2. Importance of Web Development:

"Whether it's creating websites, e-commerce platforms, or online applications, web development is a crucial skill in today’s job market. The demand for skilled web developers continues to grow as businesses look for ways to connect with customers online."

3. Overview of Technologies Used in Web Development:

Definition: What is Web Development?

Web development refers to the process of building and maintaining websites and web applications. It involves various tasks and technologies that help create everything from simple static web pages to complex dynamic web applications. Web development encompasses the entire process, including designing, coding, testing, and deploying websites. The field can be divided into two major categories:

1. Front-End Development: The part of the website or web application that users interact with directly. This includes everything that users see, such as layout, design, and interactive elements.

2. Back-End Development: The server-side of a web application that users don't see but that powers the front-end. The back-end handles databases, server logic, and ensures that user interactions with the front-end result in the correct data being retrieved or stored.

Web development can also involve managing web infrastructure and servers, implementing security features, optimizing websites for performance, and integrating third-party services.

Front-End vs. Back-End Development

To further clarify the two main aspects of web development, you can break down the differences between front-end and back-end development:

Front-End Development:

Definition: Front-end development focuses on the user interface (UI) and user experience (UX). It's about everything the user sees and interacts with in their browser.
Main Tasks:

Designing the layout of a website.
Implementing interactive elements (buttons, forms, animations, etc.).
Ensuring the website is responsive (works on mobile and desktop devices).

Technologies Used:

HTML (HyperText Markup Language): The fundamental building block of web pages, used for creating the structure and content.
CSS (Cascading Style Sheets): Used to style and layout the HTML elements, including colors, fonts, spacing, and positioning.
JavaScript: A programming language that makes web pages interactive. JavaScript is used for dynamic content such as forms, animations, and handling user input.

Back-End Development:

Definition: Back-end development is about the server-side of a web application, which is responsible for managing data, handling requests, and serving the front-end with the appropriate information.
Main Tasks:

Setting up and managing databases to store user data.
Writing server-side code that processes user inputs and generates responses.
Ensuring the application is secure and functions properly at scale.

Technologies Used:

PHP (Hypertext Preprocessor): A widely-used scripting language for server-side programming. PHP handles user requests, interacts with the database, and dynamically generates web pages.
MySQL: A relational database management system (RDBMS) used to store data in tables and retrieve it when needed by the back-end server.

Now, let’s delve into the core technologies involved in both front-end and back-end development. These technologies form the foundation of almost every modern website and web application.
- HTML (HyperText Markup Language):
- CSS (Cascading Style Sheets):
- JavaScript:
- PHP (Hypertext Preprocessor):
- MySQL:

Web Development at USBM College

To know more Click Here

Demonstration of Web Development

Start with a Simple Project - CRUD Application:

What is a CRUD Application?
A CRUD application is a type of software application that allows users to perform the four basic operations on data: Create, Read, Update, and Delete. These operations are the foundation of most web applications because they enable users to interact with databases in meaningful ways. Whether it's managing user profiles, products, or articles, CRUD operations are essential for web-based systems to function effectively.
Create: Allows users to add new data (e.g., adding a new record to a database).
Read: Displays data to users (e.g., viewing existing records or fetching data from the database).
Update: Enables modification of existing data (e.g., editing a user profile or updating product details).
Delete: Lets users remove data (e.g., deleting a record from the database).
Why are CRUD operations fundamental?
Dynamic Content: CRUD allows users to dynamically interact with data without requiring the page to reload constantly.
Data Management: Any website or web application that requires data management relies on CRUD functionality to provide an interface for users to manipulate data.
Interactivity: CRUD operations give users a way to interact with an application, making it dynamic and user-friendly.
Explain the Structure of the Project:

"The project we’re going to create today is a simple application that allows us to manage a list of records. In this case, think of it as a ‘User Management System’ where you can add new User, view existing users, update them, and delete them when needed. This is a great way to understand how web applications interact with databases."

Steps to Demonstrate The CRUD application in PHP

Building a CRUD application requires integrating PHP (for server-side logic), MySQL (for database management), HTML (for structure), and CSS (for styling).

The next step in demonstrating a CRUD (Create, Read, Update, Delete) application in PHP is creating a project folder ,i,e; crud_db inside the htdocs folder of xampp folder in c:\ or d:\ where you install xampp server.

The next step in demonstrating a CRUD (Create, Read, Update, Delete) application in PHP is setting up the environment and preparing the required tools.

1. Set Up a Local Development Environment

To develop and test your PHP CRUD application locally, you'll need a local server environment. One of the most commonly used tools for this is XAMPP, which comes with PHP, MySQL, and Apache server.

Steps:

· Download and Install XAMPP:

Go to the XAMPP website and download the XAMPP installer for your operating system.
Follow the installation instructions and install it.

· Start XAMPP:

Open the XAMPP control panel and start both the Apache and MySQL services. Apache will serve your PHP files, while MySQL will handle database requests.

2. Create the Database

CRUD applications require a database to store data. In this case, you’ll be using MySQL to create a database for your application.

Steps:

·Open phpMyAdmin by navigating to http://localhost/phpmyadmin/ in your browser (once XAMPP is running).

· Create a new database for the project, such as crud_db.

· Create a table in this database. For example, if you're building a product management system, your table might look like this:

Table Name: users
Columns:

id (INT, AUTO_INCREMENT, PRIMARY KEY)
name (VARCHAR)
password(VARCHAR)
description (TEXT)

CREATE TABLE users(

id INT AUTO_INCREMENT PRIMARY KEY,

username VARCHAR(100) NOT NULL,

password VARCHAR(100) NOT NULL,

description TEXT NOT NULL

);

3. Create a PHP File for Database Connection

Before performing any CRUD operations, you need to connect your PHP application to the MySQL database.

This can be done using the mysqli or PDO extension.

Steps:

1. Create a new directory for your project inside the htdocs folder of XAMPP (typically located at C:\xampp\htdocs).i,e; crud_db.

2. Create a PHP file named db.php for the database connection.

Here’s a sample db.php file using mysqli:

Step 1: Create db.php

<?php

$host = "localhost"; // MySQL server

$user = "root"; // default username in XAMPP

$password = ""; // default password is empty

$database = "crud_db"; // name of your database

// Create connection

$conn = new mysqli($host, $user, $password, $database);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

4. Create the Basic Structure for the Application

Now that you’ve set up the environment and database, you can start building the actual CRUD application.

1. Create the necessary PHP files for handling each of the CRUD operations. For example:

o db.php: This will handle the database connectivity.

o index.php: This will display the list of products.

o create.php: This will handle adding new products.

o edit.php: This will allow you to update products.

o delete.php: This will delete a product.

2. Build the HTML structure for displaying the forms and lists. For example, in index.php, you can display the products with an option to create, edit, or delete them.

Step 2: Create - Add New Records

The "Create" operation allows users to add new records (e.g., users) to the database.

1. Create a Form for Adding a New User(create.php)

Create a create.php file, which will contain a form for adding new products. This form will send data to the same page (or another page, but for simplicity, we’ll handle it in create.php).

create.php

<?php

include 'db.php'; // Database connection

if (isset($_POST['submit'])) {

$username = $_POST['username'];

$password = $_POST['password'];

$description = $_POST['description'];

$sql = "INSERT INTO users (username,password, description) VALUES ('$username', '$password','$description')";

if ($conn->query($sql) === TRUE) {

echo "New User added successfully!";

// Redirect to user list after adding the product

header("Location: index.php");

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

}

<!DOCTYPE html>

<head>

</head>

<body>

<label for="name">User Password:</label>

<label for="description">Description:</label>

</form>

<br>

</body>

</html>

Screenshot

2. Handle the Form Submission

In the same create.php file, you’ll need to handle the form submission to insert the new product into the database. Use the $_POST array to access the form data and insert it into your users table.

Step 3: Read - Display Data

The "Read" operation is used to display data from the database. In this case, we’ll display a list of products in the index.php file.

1. Fetch and Display Users (index.php)

In the index.php file, you need to fetch the products from the database and display them in an HTML table.

index.php

<?php

include 'db.php'; // Database connection

// Fetch products from the database

$sql = "SELECT * FROM users";

$result = $conn->query($sql);

<!DOCTYPE html>

<head>

</head>

<body>

<tr>

<th>Description</th>

<th>Actions</th>

</tr>

<?php

// Loop through each product and display it in the table

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

echo "<tr>";

echo "<td>" . $row['id'] . "</td>";

echo "<td>" . $row['username'] . "</td>";

echo "<td>" . $row['description'] . "</td>";

echo "<td><a href='edit.php?id=" . $row['id'] . "'>Edit</a> | <a href='delete.php?id=" . $row['id'] . "'>Delete</a></td>";

echo "</tr>";

}

} else {

echo "<tr><td colspan='5'>No users found</td></tr>";

}

</table>

</body>

</html>

ScreenShots

Step 4: Update - Edit Existing Records

The "Update" operation allows users to edit an existing product. We’ll create an edit.php file where users can modify product details.

1. Fetch Product Data to Edit (edit.php)

In the edit.php file, you need to fetch the existing product data from the database, display it in a form, and then update the record when the form is submitted.

edit.php

<?php
include 'db.php'; // Database connection 
if (isset($_GET['id'])) {
    $id = $_GET['id']; 
    // Fetch product details from database
    $sql = "SELECT * FROM users WHERE id = $id";
    $result = $conn->query($sql); 
    if ($result->num_rows > 0) {
        $user = $result->fetch_assoc();
    } else {
        echo "User not found.";
        exit;
    }
} 
if (isset($_POST['submit'])) {
    $username = $_POST['username'];
    $password= $_POST['password'];
    $description = $_POST['description'];
    // Update product in the database
    $sql = "UPDATE users SET username = '$username', password='$password',description = '$description' WHERE id = $id";
     if ($conn->query($sql) === TRUE) {
        echo "User updated successfully!";
        // Redirect to product list after updating the product
        header("Location: index.php");
    } else {
        echo "Error updating User: " . $conn->error;
    }
}
?> 
<!-- HTML Form for Editing Product -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit User</title>
</head>
<body>
    <h2>Edit User</h2>
    <form action="edit.php?id=<?php echo $user['id']; ?>" method="POST">
        <label for="name">User Name:</label>
        <input type="text" id="username" name="username" value="<?php echo $user['username']; ?>" required><br><br>
         <label for="name">User Password:</label>
        <input type="text" id="password" name="password" value="<?php echo $user['password']; ?>" required><br><br>
         <label for="description">Description:</label>
        <textarea id="description" name="description" required><?php echo $user['description']; ?></textarea><br><br>
         <button type="submit" name="submit">Update User</button>
    </form> 
    <br>
    <a href="index.php">Back to Product List</a>
</body>
</html> 

edit.php

Screenshot:

Step 5: Delete - Remove Records

The "Delete" operation allows users to delete a product from the database. You can handle this in a delete.php file.

1. Handle Deleting a User(delete.php)

In delete.php, you’ll retrieve the product ID from the URL, and then delete the product from the database.

<?php
include 'db.php'; // Database connection 
if (isset($_GET['id'])) {
    $id = $_GET['id']; 
    // Delete product from database
    $sql = "DELETE FROM users WHERE id = $id"; 
    if ($conn->query($sql) === TRUE) {
        echo "Users deleted successfully!";
        // Redirect to product list after deletion
        header("Location: index.php");
    } else {
        echo "Error deleting user: " . $conn->error;
    }
}

?>

Summary of Steps:

Create: A form to add new products and a handler to insert data into the database.
Read: Fetch and display the products in a table.
Update: Allow users to edit existing product details.
Delete: Allow users to delete products from the database.

Add some Css

index.php

<?php

include 'db.php'; // Database connection

// Fetch users from the database

$sql = "SELECT * FROM users";

$result = $conn->query($sql);

<!DOCTYPE html>

<head>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

padding: 20px;

background-color: #f4f4f4;

text-align: center;

}

h2 {

color: #333;

}

.container {

max-width: 800px;

margin: 0 auto;

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

}

th, td {

border: 1px solid #ddd;

padding: 10px;

text-align: center;

}

th {

background-color: #007bff;

color: white;

}

tr:nth-child(even) {

background-color: #f9f9f9;

}

a {

text-decoration: none;

color: white;

padding: 5px 10px;

border-radius: 5px;

}

.btn-add {

background: #28a745;

padding: 10px;

margin-bottom: 10px;

display: inline-block;

}

.btn-edit {

background: #ffc107;

}

.btn-delete {

background: #dc3545;

}

</style>

</head>

<body>

<table>

<tr>

<th>Description</th>

<th>Actions</th>

</tr>

<?php

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

echo "<tr>";

echo "<td>" . $row['id'] . "</td>";

echo "<td>" . $row['username'] . "</td>";

echo "<td>" . $row['description'] . "</td>";

echo "<td>

<a href='edit.php?id=" . $row['id'] . "' class='btn-edit'>Edit</a> |

<a href='delete.php?id=" . $row['id'] . "' class='btn-delete'>Delete</a>

</td>";

echo "</tr>";

}

} else {

echo "<tr><td colspan='4'>No users found</td></tr>";

}

</table>

</div>

</body>

</html>

Enhancements Added:

✅ Styled background and centered content.
✅ Improved table styling (striped rows, colored header).
✅ Better button styling for "Add", "Edit", and "Delete".
✅ Enhanced readability with padding and spacing.

Screenshot after adding CSS:

Add Signup and login button in index page :

Suppose i have to add a login and signup button in my landing or index page :

<?php

include 'db.php'; // Database connection

// Fetch users from the database

$sql = "SELECT * FROM users";

$result = $conn->query($sql);

<!DOCTYPE html>

<head>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

padding: 20px;

background-color: #f4f4f4;

}

.navbar {

display: flex;

justify-content: space-between;

background: #007bff;

padding: 10px;

border-radius: 8px;

color: white;

}

.nav-buttons {

display: flex;

gap: 10px;

}

.nav-buttons a {

text-decoration: none;

color: white;

padding: 8px 15px;

border-radius: 5px;

background: #28a745;

}

.nav-buttons a:hover {

background: #218838;

}

.container {

max-width: 800px;

margin: 20px auto;

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

text-align: center;

}

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

}

th, td {

border: 1px solid #ddd;

padding: 10px;

text-align: center;

}

th {

background-color: #007bff;

color: white;

}

tr:nth-child(even) {

background-color: #f9f9f9;

}

.btn-add {

display: inline-block;

background: #28a745;

padding: 10px;

color: white;

text-decoration: none;

border-radius: 5px;

margin-bottom: 10px;

}

.btn-edit {

background: #ffc107;

padding: 5px 10px;

color: white;

text-decoration: none;

border-radius: 5px;

}

.btn-delete {

background: #dc3545;

padding: 5px 10px;

color: white;

text-decoration: none;

border-radius: 5px;

}

</style>

</head>

<body>

<h2>User Management</h2>

<a href="create.php">Signup</a>

<a href="login.php">Login</a>

</div>

<table>

<tr>

<th>Description</th>

<th>Actions</th>

</tr>

<?php

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

echo "<tr>";

echo "<td>" . $row['id'] . "</td>";

echo "<td>" . $row['username'] . "</td>";

echo "<td>" . $row['description'] . "</td>";

echo "<td>

<a href='edit.php?id=" . $row['id'] . "' class='btn-edit'>Edit</a> |

<a href='delete.php?id=" . $row['id'] . "' class='btn-delete'>Delete</a>

</td>";

echo "</tr>";

}

} else {

echo "<tr><td colspan='4'>No users found</td></tr>";

}

</table>

</div>

</body>

</html>

Screenshot:

What's New?

✅ Added a Navigation Bar: Displays a title and two buttons (Signup & Login).
✅ Positioned Buttons on the Right: Using display: flex in .navbar.
✅ Improved Styling: Navbar color, button hover effects, and a modern layout.

create.php(after adding css)

<?php

include 'db.php'; // Database connection

if (isset($_POST['submit'])) {

$username = $_POST['username'];

$password = $_POST['password'];

$description = $_POST['description'];

$sql = "INSERT INTO users (username, password, description) VALUES ('$username', '$password', '$description')";

if ($conn->query($sql) === TRUE) {

echo "<p class='success-msg'>New User added successfully!</p>";

// Redirect to user list after adding the user

header("Location: index.php");

} else {

echo "<p class='error-msg'>Error: " . $sql . "<br>" . $conn->error . "</p>";

}

<!DOCTYPE html>

<head>

<style>

body {

font-family: Arial, sans-serif;

margin: 50px;

padding: 20px;

background-color: #f4f4f4;

text-align: center;

}

h2 {

color: #333;

}

.container {

max-width: 500px;

margin: 0 auto;

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

form {

display: flex;

flex-direction: column;

}

label {

font-weight: bold;

margin: 10px 0 5px;

text-align: left;

}

input, textarea {

width: 100%;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 5px;

}

button {

background: #28a745;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

}

button:hover {

background: #218838;

}

.back-link {

display: inline-block;

margin-top: 10px;

padding: 8px 12px;

background: #007bff;

color: white;

text-decoration: none;

border-radius: 5px;

}

.back-link:hover {

background: #0056b3;

}

.success-msg {

color: green;

font-weight: bold;

}

.error-msg {

color: red;

font-weight: bold;

}

</style>

</head>

<body>

<label for="password">User Password:</label>

<label for="description">Description:</label>

</form>

</div>

</body>

</html>

Screenshot

Improvements:

✔️ Styled Form: The form is now centered with a clean layout.
✔️ Better Inputs: Labels, input fields, and text areas are properly spaced.
✔️ Success & Error Messages: Users get feedback after adding data.
✔️ Stylish Button & Links: Buttons and links have hover effects for better UI.

edit.php

<?php

include 'db.php'; // Database connection

if (isset($_GET['id'])) {

$id = $_GET['id'];

// Fetch user details from the database

$sql = "SELECT * FROM users WHERE id = $id";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

$user = $result->fetch_assoc();

} else {

echo "User not found.";

exit;

}

if (isset($_POST['submit'])) {

$username = $_POST['username'];

$password= $_POST['password'];

$description = $_POST['description'];

// Update user in the database

$sql = "UPDATE users SET username = '$username', password='$password', description = '$description' WHERE id = $id";

if ($conn->query($sql) === TRUE) {

echo "User updated successfully!";

// Redirect to user list after updating the user

header("Location: index.php");

exit();

} else {

echo "Error updating user: " . $conn->error;

}

<!DOCTYPE html>

<head>

<style>

body {

font-family: Arial, sans-serif;

background: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.container {

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

width: 400px;

text-align: center;

}

h2 {

color: #333;

}

label {

display: block;

text-align: left;

margin-bottom: 5px;

font-weight: bold;

}

input, textarea {

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 16px;

}

button {

background: #007bff;

color: white;

border: none;

padding: 10px;

width: 100%;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

}

button:hover {

background: #0056b3;

}

.back-link {

display: inline-block;

margin-top: 10px;

color: #007bff;

text-decoration: none;

font-size: 14px;

}

.back-link:hover {

text-decoration: underline;

}

</style>

</head>

<body>

<form action="edit.php?id=<?php echo $user['id']; ?>" method="POST">

<input type="text" id="username" name="username" value="<?php echo $user['username']; ?>" required>

<label for="password">User Password:</label>

<input type="text" id="password" name="password" value="<?php echo $user['password']; ?>" required>

<label for="description">Description:</label>

<button type="submit" name="submit">Update User</button>

</form>

</div>

</body>

</html>

Features in This Design

✅ Responsive Layout - Works well on mobile & desktop.

✅ Clean & Modern Form - Better user experience.
✅ Hover Effects on Buttons - Better usability.
✅ Centered Content - Looks neat and professional.

Screenshot

Authentication Pages:

Here is a simple login.php page using only MySQLi query method (without prepared statements).

Steps Covered:

1. A form for username and password.

2. A query using mysqli_query() to fetch user details.

3. A session to keep users logged in.

4. A redirect to dashboard.php after successful login.

5. An error message if login fails.

login.php

<?php

session_start();

include 'db.php'; // Include database connection

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$username = trim($_POST['username']);

$password = trim($_POST['password']);

// Check if fields are filled

if (!empty($username) && !empty($password)) {

// Query to check user in database

$sql = "SELECT * FROM users WHERE username = '$username'";

$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) == 1) {

$user = mysqli_fetch_assoc($result);

// Check password (assuming password is stored as plain text)

if ($password == $user['password']) { // ⚠️ NOT SECURE (use password_hash in production)

$_SESSION['user_id'] = $user['id'];

$_SESSION['username'] = $user['username'];

// Redirect to dashboard

header("Location: dashboard.php");

exit();

} else {

$error = "Invalid username or password!";

}

} else {

$error = "User not found!";

}

} else {

$error = "Please fill in all fields!";

}

<!DOCTYPE html>

<head>

<title>Login</title>

<style>

body {

font-family: Arial, sans-serif;

background: #f4f4f4;

text-align: center;

margin: 50px;

}

.login-container {

width: 300px;

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

margin: auto;

}

h2 {

color: #333;

}

input {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ddd;

border-radius: 5px;

}

.btn-login {

background: #007bff;

color: white;

padding: 10px;

border: none;

width: 100%;

border-radius: 5px;

cursor: pointer;

}

.btn-login:hover {

background: #0056b3;

}

.error {

color: red;

}

</style>

</head>

<body>

<h2>Login</h2>

<?php if (isset($error)) { echo "<p class='error'>$error</p>"; } ?>

<button type="submit" class="btn-login">Login</button>

</form>

<p>Don't have an account? <a href="signup.php">Sign up</a></p>

</div>

</body>

</html>

How It Works:

✅ Uses mysqli_query() to fetch user details.
✅ Stores session data for logged-in users.
✅ Redirects to dashboard.php after successful login.
✅ Displays error messages if login fails.

⚠️ Security Warning:

This code compares passwords as plain text, which is not secure.
In production, store passwords hashed using password_hash() and verify using password_verify().

Screenshot:

dashboard.php

dashboard.php page that displays a welcome message for the logged-in user and includes a logout button.

Steps Covered:

1. Starts a session and checks if the user is logged in.

2. Displays a welcome message with the username.

3. Provides a logout button to end the session.

<?php

session_start();

// Check if user is logged in

if (!isset($_SESSION['user_id'])) {

header("Location: login.php");

exit();

}

<!DOCTYPE html>

<head>

<title>Dashboard</title>

<style>

body {

font-family: Arial, sans-serif;

background: #f4f4f4;

text-align: center;

margin: 50px;

}

.dashboard-container {

width: 400px;

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

margin: auto;

}

h2 {

color: #333;

}

.btn-logout {

background: #dc3545;

color: white;

padding: 10px;

border: none;

width: 100%;

border-radius: 5px;

cursor: pointer;

margin-top: 10px;

}

.btn-logout:hover {

background: #c82333;

}

</style>

</head>

<body>

<h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>

<p>You have successfully logged in.</p>

<button type="submit" class="btn-logout">Logout</button>

</form>

</div>

</body>

</html>

Screenshot

logout.php

<?php

session_start();

session_destroy();

header("Location: login.php");

exit();

How It Works:

✅ Checks if the user is logged in (redirects to login.php if not).
✅ Displays a welcome message with the username.
✅ Provides a logout button that destroys the session and redirects to login.php.

Closing Message for the Webinar

"Thank you all for joining us today for this insightful webinar on Building Dynamic Websites with PHP – A Live Demo on CRUD Operations. We hope this session has given you a clear understanding of how to create and manage dynamic web applications using PHP and MySQL.

Remember, mastering CRUD operations is a crucial step toward building robust and interactive web applications. Keep practicing, experimenting, and enhancing your skills.

If you have any questions or need further guidance, feel free to reach out. Stay connected, keep learning, and we look forward to seeing you in our future sessions.

To connect with me ...click here ...

Happy coding, and have a great day ahead!" 🚀🎉

"Teaching Tech & Building Solutions"

Webinar Topic Building Dynamic Websites with PHP A Live Demo on CRUD Operations.

Webinar Topic

Building Dynamic Websites with PHP

A Live Demo on CRUD Operations.

Introduce Myself

Why Choose MCA?

Scope & Career Opportunities in IT

Why PHP is Widely Used?

Can Non-CS Students Learn PHP?

Talking About Your MCA College

Transition to Web Development Topic

1. Introduction to Web Development:

2. Importance of Web Development:

3. Overview of Technologies Used in Web Development:

Web Development at USBM College

To know more Click Here

Demonstration of Web Development

Start with a Simple Project - CRUD Application:

Steps:

2. Create the Database

Steps:

3. Create a PHP File for Database Connection

Steps:

Step 2: Create - Add New Records

1. Create a Form for Adding a New User(create.php)

Screenshot

Step 3: Read - Display Data

1. Fetch and Display Users (index.php)

ScreenShots

1. Fetch Product Data to Edit (edit.php)

Screenshot:

Step 5: Delete - Remove Records

1. Handle Deleting a User(delete.php)

Summary of Steps:

Enhancements Added:

Steps Covered:

How It Works:

Steps Covered:

How It Works:

Closing Message for the Webinar

No comments:

Post a Comment

Popular

Tags

Search This Blog

Blog Archive

Advertisement

"Hello! I'm [Rashmi Prava Mishra], an MCA educator and freelance SOFTWARE developer.

Facebook

Subscribe Us

Footer Menu Widget

Social Plugin