OVO
Ranked Climber
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
This tutorial will teach you the basic Create, Read, Update, and Delete Operations using PHP/MySQLi with Boostrap/Modal. Note: Bootstrap and Javascripts used in this tutorial are hosted so you need an internet connection for them to work.
Creating our Database
The first step is to create our database.
Creating our Connection
Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as "conn.php".
index.php
The next step is to create our sample table. This will be our Read.
add_modal.php
This is our form to add a new row to our database.
addnew.php
This is our code for adding the data in our add form to our database.
button.php
This contains our Edit Modal and Delete Modal.
edit.php
The code for our Update Form.
delete.php
Lastly, this our delete code to delete row in our table.
DEMO
That ends this tutorial. For any questions or comments, feel free to comment below or message me here. Hope this tutorial helps. Happy Coding :)
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
Creating our Database
The first step is to create our database.
- Open phpMyAdmin.
- Click databases, create a database, and name it as "sample".
- After creating a database, click the SQL and paste the below code. See the image below for detailed instructions.
- CREATE
TABLE
`user`
(
- `userid`
INT
(
11
)
NOT
NULL
AUTO_INCREMENT
,
- `firstname`
VARCHAR
(
30
)
NOT
NULL
,
- `lastname`
VARCHAR
(
30
)
NOT
NULL
,
- `address`
VARCHAR
(
100
)
NOT
NULL
,
- PRIMARY
KEY
(
`userid`
)
- )
ENGINE=
InnoDB DEFAULT
CHARSET=
latin1;
Creating our Connection
Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as "conn.php".
- <?php
- //MySQLi Procedural
- $conn
=
mysqli_connect
(
"localhost"
,
"root"
,
""
,
"sample"
)
;
- if
(
!
$conn
)
{
- die
(
"Connection failed: "
.
mysqli_connect_error
(
)
)
;
- }
- ?>
index.php
The next step is to create our sample table. This will be our Read.
- <!DOCTYPE html>
- <html
>
- <head
>
- <title
>
PHP/MySQLi CRUD Operation using Bootstrap/Modal</
title
>
- <script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></
script
>
- <link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/
>
- <script
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
></
script
>
- </
head
>
- <body
>
- <div
class
=
"container"
>
- <div
style
=
"height:50px;"
></
div
>
- <div
class
=
"well"
style
=
"margin:auto; padding:auto; width:80%;"
>
- <span
style
=
"font-size:25px; color:blue"
><center
><strong
>
PHP/MySQLi CRUD Operation using Bootstrap</
strong
></
center
></
span
>
- <span
class
=
"pull-left"
><a
href
=
"#addnew"
data-toggle=
"modal"
class
=
"btn btn-primary"
><span
class
=
"glyphicon glyphicon-plus"
></
span
>
Add New</
a
></
span
>
- <div
style
=
"height:50px;"
></
div
>
- <table
class
=
"table table-striped table-bordered table-hover"
>
- <thead
>
- <th
>
Firstname</
th
>
- <th
>
Lastname</
th
>
- <th
>
Address</
th
>
- <th
>
Action</
th
>
- </
thead
>
- <tbody
>
- <?php
- include(
'conn.php'
)
;
- $query=
mysqli_query(
$conn,"select * from `user`"
)
;
- while(
$row=
mysqli_fetch_array(
$query)
)
{
- ?>
- <tr
>
- <td
><?php echo ucwords(
$row[
'firstname'
]
)
; ?></
td
>
- <td
><?php echo ucwords(
$row[
'lastname'
]
)
; ?></
td
>
- <td
><?php echo $row[
'address'
]
; ?></
td
>
- <td
>
- <a
href
=
"#edit<?php echo $row['userid']; ?>
" data-toggle="modal" class="btn btn-warning"><span
class
=
"glyphicon glyphicon-edit"
></
span
>
Edit</
a
>
||
- <a
href
=
"#del<?php echo $row['userid']; ?>
" data-toggle="modal" class="btn btn-danger"><span
class
=
"glyphicon glyphicon-trash"
></
span
>
Delete</
a
>
- <?php include(
'button.php'
)
; ?>
- </
td
>
- </
tr
>
- <?php
- }
- ?>
- </
tbody
>
- </
table
>
- </
div
>
- <?php include(
'add_modal.php'
)
; ?>
- </
div
>
- </
body
>
- </
html
>
add_modal.php
This is our form to add a new row to our database.
- <!-- Add New -->
- <div
class
=
"modal fade"
id
=
"addnew"
tabindex
=
"-1"
role=
"dialog"
aria-labelledby=
"myModalLabel"
aria-hidden=
"true"
>
- <div
class
=
"modal-dialog"
>
- <div
class
=
"modal-content"
>
- <div
class
=
"modal-header"
>
- <button
type
=
"button"
class
=
"close"
data-dismiss=
"modal"
aria-hidden=
"true"
>
×
</
button
>
- <center
><h4
class
=
"modal-title"
id
=
"myModalLabel"
>
Add New</
h4
></
center
>
- </
div
>
- <div
class
=
"modal-body"
>
- <div
class
=
"container-fluid"
>
- <form
method
=
"POST"
action
=
"addnew.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
=
"firstname"
>
- </
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
=
"lastname"
>
- </
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
=
"address"
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"modal-footer"
>
- <button
type
=
"button"
class
=
"btn btn-default"
data-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
>
- </
form
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
addnew.php
This is our code for adding the data in our add form to our database.
- <?php
- include
(
'conn.php'
)
;
- $firstname
=
$_POST
[
'firstname'
]
;
- $lastname
=
$_POST
[
'lastname'
]
;
- $address
=
$_POST
[
'address'
]
;
- mysqli_query
(
$conn
,
"insert into user (firstname, lastname, address) values ('$firstname
', '$lastname
', '$address
')"
)
;
- header
(
'location:index.php'
)
;
- ?>
button.php
This contains our Edit Modal and Delete Modal.
- <!-- Delete -->
- <div
class
=
"modal fade"
id
=
"del<?php echo $row['userid']; ?>
" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div
class
=
"modal-dialog"
>
- <div
class
=
"modal-content"
>
- <div
class
=
"modal-header"
>
- <button
type
=
"button"
class
=
"close"
data-dismiss=
"modal"
aria-hidden=
"true"
>
×
</
button
>
- <center
><h4
class
=
"modal-title"
id
=
"myModalLabel"
>
Delete</
h4
></
center
>
- </
div
>
- <div
class
=
"modal-body"
>
- <?php
- $del=
mysqli_query(
$conn,"select * from user where userid='"
.$row[
'userid'
]
."'"
)
;
- $drow=
mysqli_fetch_array(
$del)
;
- ?>
- <div
class
=
"container-fluid"
>
- <h5
><center
>
Are you sure to delete <strong
><?php echo ucwords(
$drow[
'firstname'
]
.' '
.$row[
'lastname'
]
)
; ?></
strong
>
from the list? This method cannot be undone.</
center
></
h5
>
- </
div
>
- </
div
>
- <div
class
=
"modal-footer"
>
- <button
type
=
"button"
class
=
"btn btn-default"
data-dismiss=
"modal"
><span
class
=
"glyphicon glyphicon-remove"
></
span
>
Cancel</
button
>
- <a
href
=
"delete.php?id=<?php echo $row['userid']; ?>
" 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['userid']; ?>
" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div
class
=
"modal-dialog"
>
- <div
class
=
"modal-content"
>
- <div
class
=
"modal-header"
>
- <button
type
=
"button"
class
=
"close"
data-dismiss=
"modal"
aria-hidden=
"true"
>
×
</
button
>
- <center
><h4
class
=
"modal-title"
id
=
"myModalLabel"
>
Edit</
h4
></
center
>
- </
div
>
- <div
class
=
"modal-body"
>
- <?php
- $edit=
mysqli_query(
$conn,"select * from user where userid='"
.$row[
'userid'
]
."'"
)
;
- $erow=
mysqli_fetch_array(
$edit)
;
- ?>
- <div
class
=
"container-fluid"
>
- <form
method
=
"POST"
action
=
"edit.php?id=<?php echo $erow['userid']; ?>
">
- <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
=
"firstname"
class
=
"form-control"
value
=
"<?php echo $erow['firstname']; ?>
">
- </
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
=
"lastname"
class
=
"form-control"
value
=
"<?php echo $erow['lastname']; ?>
">
- </
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
=
"address"
class
=
"form-control"
value
=
"<?php echo $erow['address']; ?>
">
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"modal-footer"
>
- <button
type
=
"button"
class
=
"btn btn-default"
data-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
>
- <!-- /.modal -->
edit.php
The code for our Update Form.
- <?php
- include
(
'conn.php'
)
;
- $id
=
$_GET
[
'id'
]
;
- $firstname
=
$_POST
[
'firstname'
]
;
- $lastname
=
$_POST
[
'lastname'
]
;
- $address
=
$_POST
[
'address'
]
;
- mysqli_query
(
$conn
,
"update user set firstname='$firstname
', lastname='$lastname
', address='$address
' where userid='$id
'"
)
;
- header
(
'location:index.php'
)
;
- ?>
delete.php
Lastly, this our delete code to delete row in our table.
- <?php
- include
(
'conn.php'
)
;
- $id
=
$_GET
[
'id'
]
;
- mysqli_query
(
$conn
,
"delete from user where userid='$id
'"
)
;
- header
(
'location:index.php'
)
;
- ?>
DEMO
That ends this tutorial. For any questions or comments, feel free to comment below or message me here. Hope this tutorial helps. Happy Coding :)
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
You must upgrade your account or reply in the thread to view hidden text.