Scribd
Upload
25 views

Module Sir Bryan

Learning code in

Uploaded by

icesnobber
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Module Sir Bryan

Learning code in

Uploaded by

icesnobber
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

This module will teach you the basic Create, Read, Update, and Delete Operations using PHP/MySQLi

with Boostrap/Modal.

Creating our Database

The first step is to create our database.

▪ Open phpMyAdmin.
▪ Click databases, create a database, and name it as "student_db".
▪ After creating a database, click the SQL and paste the below code. See the image below for detailed instructions.

1. CREATE TABLE `tbl_student` (


2. `s_id` INT(11) NOT NULL AUTO_INCREMENT,
3. `s_fname` VARCHAR(30) NOT NULL,
4. `s_lname` VARCHAR(30) NOT NULL,
5. `s_address` VARCHAR(100) NOT NULL,
6. PRIMARY KEY(`s_id`)
7. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Creating our Source Folder

Navigate to your xampp folder and locate htdocs. Inside create a folder and name it crud. Now open VS Code and open the crud folder
Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. Create a file and name this as "conn.php".

<?php
//MySQLi Procedural
$conn = mysqli_connect("localhost","root","","student_db");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>

Creating our landing page

Next, we create our landing page. This will serve as page where we display the students table and the CRUD functions. Create a file and name this as “index.php”

<!DOCTYPE html>
<html>
<head>
<title>PHP/MySQLi CRUD Operation using Bootstrap/Modal</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div class="container-sm my-5">
<h2 class="text-center fw-bold text-primary">PHP/MySQLi CRUD Operation using Bootstrap</h2>
<button type="button" class="btn btn-primary float-end my-3" data-bs-toggle="modal" data-bs-target="#addnew">
Add New Student
</button>
<table class="table table-striped table-bordered table-hover">
<thead>
<th class="text-secondary bg-light col-1">ID</th>
<th class="text-secondary bg-light col-3">Firstname</th>
<th class="text-secondary bg-light col-3">Lastname</th>
<th class="text-secondary bg-light col-3">Address</th>
<th class="text-secondary bg-light col-2">Actions</th>
</thead>
<tbody>
<?php
include('conn.php');
$query = mysqli_query($conn, "select * from `tbl_student`");
while ($row = mysqli_fetch_array($query)) {
?>
<tr>
<td><?php echo $row['s_id']; ?></td>
<td><?php echo ucwords($row['s_fname']); ?></td>
<td><?php echo ucwords($row['s_lname']); ?></td>
<td><?php echo $row['s_address']; ?></td>
<td class="text-center">
<button data-bs-target="#edit<?php echo $row['s_id']; ?>" data-bs-toggle="modal" class="btn btn-warning">Edit</button>
<button data-bs-target="#del<?php echo $row['s_id']; ?>" data-bs-toggle="modal" class="btn btn-danger">Delete</button>
<?php include('inc/edit_delete_modal.php'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php include('inc/add_modal.php'); ?>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
add_modal.php
Next we will create the modal for adding students. Create a folder inc and inside create a file and name it add_modal.php

<!-- Add New -->


<div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Add New Student</h5>
<button type="button" class="close btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="actions/add.php">
<div class="row">
<div class="col-lg-2">
<label class="control-label" style="position:relative; top:7px;">Firstname:</label>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="s_fname" required>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2">
<label class="control-label" style="position:relative; top:7px;">Lastname:</label>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="s_lname" required>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2">
<label class="control-label" style="position:relative; top:7px;">Address:</label>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="s_address" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
</div>
</form>
</div>
</div>
</div>

add.php
Next we will create the add function when we click the save button. Create a folder actions and inside create a file and name it add.php

<?php
include('../conn.php');

$s_fname = $_POST['s_fname'];
$s_lname = $_POST['s_lname'];
$s_address = $_POST['s_address'];

mysqli_query($conn, "INSERT INTO tbl_student (s_fname, s_lname, s_address) values ('$s_fname', '$s_lname', '$s_address')");
echo '<script>
alert("Student information was successfully saved");
window.location.href="../index.php";
</script>';
?>

edit_delete_modal.php
Next we will create the modal for editing and deleting students. Inside folder inc, create a file and name it edit_delete_modal.php

<!-- Delete -->

<div class="modal fade" id="del<?php echo $row['s_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Delete Student</h5>
<button type="button" class="close btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php
$del = mysqli_query($conn, "SELECT * FROM tbl_student WHERE s_id='" . $row['s_id'] . "'");
$drow = mysqli_fetch_array($del);
?>
<div class="container-fluid">
<h5>
Are you sure to delete <strong><?php echo ucwords($drow['s_fname'] . ' ' . $row['s_lname']); ?></strong> from the list? This method
cannot be undone.
</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<a href="actions/delete.php?s_id=<?php echo $row['s_id']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a>
</div>

</div>
</div>
</div>
<!-- /.modal -->

<!-- Edit -->

<div class="modal fade" id="edit<?php echo $row['s_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Edit Student</h5>
<button type="button" class="close btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php
$edit = mysqli_query($conn, "SELECT * FROM tbl_student where s_id='" . $row['s_id'] . "'");
$erow = mysqli_fetch_array($edit);
?>
<div class="container-fluid">
<form method="POST" action="actions/edit.php?s_id=<?php echo $erow['s_id']; ?>">
<div class="row">
<div class="col-lg-2">
<label style="position:relative; top:7px;">Firstname:</label>
</div>
<div class="col-lg-10">
<input type="text" name="s_fname" class="form-control" value="<?php echo $erow['s_fname']; ?>" required>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2">
<label style="position:relative; top:7px;">Lastname:</label>
</div>
<div class="col-lg-10">
<input type="text" name="s_lname" class="form-control" value="<?php echo $erow['s_lname']; ?>" required>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2">
<label style="position:relative; top:7px;">Address:</label>
</div>
<div class="col-lg-10">
<input type="text" name="s_address" class="form-control" value="<?php echo $erow['s_address']; ?>" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-check"></span> Save</button>
</div>
</form>
</div>
</div>
</div>
delete.php
Next we will create the delete function when we click the delete button. Inside folder actions create a file and name it delete.php

<?php
include('../conn.php');
$s_id = $_GET['s_id'];
mysqli_query($conn, "DELETE from tbl_student where s_id='$s_id'");
echo '<script>
alert("Student information was successfully deleted");
window.location.href="../index.php";
</script>';
?>

edit.php
Next we will create the edit function when we click the update button. Inside folder actions create a file and name it edit.php

<?php
include('../conn.php');

$s_id = $_GET['s_id'];

$s_fname = $_POST['s_fname'];
$s_lname = $_POST['s_lname'];
$s_address = $_POST['s_address'];

mysqli_query($conn, "UPDATE tbl_student SET s_fname='$s_fname', s_lname='$s_lname', s_address='$s_address' where s_id='$s_id'");


echo '<script>
alert("Student information was successfully updated");
window.location.href="../index.php";
</script>';
?>

You might also like