PHP and MySql are one of the most widely used technology to interact with the database.

In our previous tutorials, we have performed a simple operation to get values of multiple checked checkboxes using PHP.

In this blog post, we are going to demonstrate an example  of CRUD (create, read, update and delete) operations with checkboxes using PHP and MySql.


Check-box Home Preview

To get  value of a checked checkbox : demo_checkbox.php

<html>

<head> <title>Check Box Demo</title> <link rel="stylesheet" href="css/checkbox.css" /> </head> <body> <div class="container"> <div class="main"> <h2>Select the Services you want:</h2><hr/> <form action="checkbox.php" method="post"> \checkbox form to get the values <label class="heading"></label><br/><br/> <input type="checkbox" name="check_list[]" value="Website Development"><label>Website Development</label><br/> <input type="checkbox" name="check_list[]" value="Data Support"><label>Data Support</label><br/> <input type="checkbox" name="check_list[]" value="Online Marketing"><label>Online Marketing</label><br/> <input type="checkbox" name="check_list[]" value="Business Development"><label>Business Development</label><br/> <input type="checkbox" name="check_list[]" value="Responsive Themes"><label>Responsive Themes</label><br/><br/> <input type="submit" name="submit" Value="Submit"/> \On submitting the form,user will be redirected to "chckbox.php"

<br/><br/> <h2>Update or Delete existing data.</h2><hr/><br/>\links to edit or delete existing data in database <a class="link1" href=checkbox-edit.php>Edit</a><br/><br/><br/> <a class="link2" href=checkbox-delete.php>Delete</a> </form> </div> <br/> <!-- Div Fugo is advertisement div--> <div class="fugo"> <a href="https://www.formget.com/app/"><img src="images/formGetadv-1.jpg" /></a> </div> </div> </body> </html>


Data Inserted display Preview: checkbox.php

Following image shows how the inserted fields will show on checkbox.php with “Edit” and “Delete” options.To edit the data click on to Edit button and to delete the data from database click on delete button. Inserted data will be stored in the database named ‘store’, table named ‘checkbox’ with two columns i.e ‘user_id’ to store the id of the user and ‘services’ to store services selected.

To go back to fill the form again click on “HOME” link.

Inserted Data In Checkbox



<html><head><title>Checkbox Test</title>
<link rel="stylesheet" href="css/checkbox.css" />
</head>
<div class="container">
<div class="main">
<br/>
<br/>
<br/>
<?php
if(isset($_POST['submit'])){
if(!empty($_POST['check_list'])) {
//database connection
$connection = mysql_connect('localhost','root','');
$db=mysql_select_db('store',$connection);
//Counting number of checked checkboxes
$checked_count = count($_POST['check_list']);
$checkbox1=$_POST['check_list'];
$chk="";
echo "You have inserted following ".$checked_count." option(s): <br/>";
echo"</br>";
//Loop to store and display values of individually checked checkbox
foreach($_POST['check_list'] as $selected) {
echo "<p>".$selected ."</p>";
}
foreach($checkbox1 as $chk1)
{
$chk .= $chk1.",";
}
$query=mysql_query("insert into checkbox(services) values ('$chk')",$connection);
echo"<br>";
if($query==1)
{
echo"Data Inserted Successfully";
}
echo"<br/><br/><br/>";
echo"<form action="checkbox-edit.php" method="post">
<input type="submit" name="dsubmit1" Value="Edit"/>
</form>

<form action="checkbox-delete.php" method="post">
<input type="submit" name="dsubmit2" Value="Delete"/>
</form>";
}
else
{
echo"Failed To Insert, Please select at least one option";
}
}

?>
</br>
</br>
<a href="demo_checkbox.php">HOME</a>
</div>
</div>
</html>

 


Edit page: checkbox-edit.php

To edit the data if the user clicked on “Edit” button on checkbox.php, then he/she will be redirected to edit page.User

will select the data from the list by clicking.The edit checkbox form will be displayed.

Again, the user needs to fill its choices and submit it.The data will be updated in the database.

Edit chekbox

<html><head><title>Checkbox-edit</title> <link rel="stylesheet" href="css/checkbox.css" /> </head> <div class="container2"> <div class="main2"> <br/> <br/> <br/> <?php $connection = mysql_connect('localhost','root',''); $db=mysql_select_db('store',$connection); $query=mysql_query("select*from checkbox",$connection); echo"CLICK ON THE DATA YOU WANT TO EDIT"; echo"<br/><br/><br>"; echo "<ol>"; while($row=mysql_fetch_array($query)){ echo"<li><a href="checkbox-edit.php?uid={$row["user_id"]}">{$row["services"]}</a></li><br/>"; } if(isset($_GET['uid'])){ $id=$_GET['uid']; $query2=mysql_query("select * from checkbox where user_id=$id",$connection); while($row=mysql_fetch_array($query2)) { $str=($row['services']); $data=(explode(",",$str)); $check=array("Website Development","Data Support","Online Marketing","Business Development","Responsive Themes"); if (in_array($check[0], $data)) { $checked1 ="checked"; } else { $checked1 =""; } if (in_array($check[1], $data)) { $checked2 ="checked"; } else { $checked2 =""; } if (in_array($check[2], $data)) { $checked3 ="checked"; } else { $checked3 =""; } if (in_array($check[3], $data)) { $checked4 ="checked"; } else { $checked4 =""; } if (in_array($check[4], $data)) { $checked5 ="checked"; } else { $checked5 =""; } echo "<form action='checkbox-edit.php?uid={$row ['user_id']}' method='POST'> <label class="heading">Select the Services you want to insert:</label><br/><br/> <input type='checkbox' name='check_list[]' value='Website Development' $checked1 ><label>Website Development</label><br/> <input type='checkbox' name='check_list[]' value='Data Support' $checked2 ><label>Data Support</label><br/> <input type='checkbox' name='check_list[]' value='Online Marketing'$checked3 ><label>Online Marketing</label><br/> <input type='checkbox' name='check_list[]' value='Business Development'$checked4 ><label>Business Development</label><br/> <input type='checkbox' name='check_list[]' value='Responsive Themes'$checked5><label>Responsive Themes</label><br/><br/> <input type='submit' name='dsubmit' Value='update'/>"; } } if(isset($_POST['dsubmit'])){ $id=$_GET['uid']; $checkedit=($_POST['check_list']); $chked=''; foreach($_POST['check_list'] as $chked1){ $chked .= $chked1.","; } $sql="update checkbox set services='$chked'where user_id=$id"; $query2=mysql_query($sql,$connection); echo"<br/><br/><br/>"; echo"Data updated Successfully...!!!"; } echo"</ol>"; mysql_close($connection); echo"</br> </br>"; echo"<a href="demo_checkbox.php">HOME</a>"; ?> </div> </div> </html>  

Delete page:  checkbox-delete.php

To delete the data if the user clicked on “Delete” button on checkbox.php then he/she will be redirected to delete the page.The user will select the data from the list by clicking it and click the “Delete” button to delete the data.

Delete Data

<html><head><title>Checkbox-edit</title> <link rel="stylesheet" href="css/checkbox.css" /> </head> <div class="container2"> <div class="main2"> <br/> <br/> <br/> <?php $connection = mysql_connect('localhost','root',''); $db=mysql_select_db('store',$connection); $query=mysql_query("select*from checkbox",$connection); echo"CLICK ON THE DATA YOU WANT TO DELETE"; echo"<br/><br/><br>"; echo "<ol>"; while($row=mysql_fetch_array($query)){ echo"<li><a href="checkbox-delete.php?uid={$row["user_id"]}">{$row["services"]}</a></li><br/>"; } if(isset($_GET['uid'])){ $id=$_GET['uid']; $query2=mysql_query("select * from checkbox where user_id=$id",$connection); while($row=mysql_fetch_array($query2)) { $str=($row['services']); $data=(explode(",",$str)); $check=array("Website Development","Data Support","Online Marketing","Business Development","Responsive Themes"); if (in_array($check[0], $data)) { $checked1 ="checked"; } else { $checked1 =""; } if (in_array($check[1], $data)) { $checked2 ="checked"; } else { $checked2 =""; } if (in_array($check[2], $data)) { $checked3 ="checked"; } else { $checked3 =""; } if (in_array($check[3], $data)) { $checked4 ="checked"; } else { $checked4 =""; } if (in_array($check[4], $data)) { $checked5 ="checked"; } else { $checked5 =""; } echo "<form action='checkbox-delete.php?uid={$row ['user_id']}' method='POST'> <label class="heading">Select the Services you want to insert:</label><br/><br/> <input type='checkbox' name='check_list[]' value='Website Development' $checked1 ><label>Website Development</label><br/> <input type='checkbox' name='check_list[]' value='Data Support' $checked2 ><label>Data Support</label><br/> <input type='checkbox' name='check_list[]' value='Online Marketing'$checked3 ><label>Online Marketing</label><br/> <input type='checkbox' name='check_list[]' value='Business Development'$checked4 ><label>Business Development</label><br/> <input type='checkbox' name='check_list[]' value='Responsive Themes'$checked5><label>Responsive Themes</label><br/><br/> <input type='submit' name='dsubmit' Value='DELETE'/>"; } } if(isset($_POST['dsubmit'])){ $id=$_GET['uid']; $sql="DELETE FROM checkbox WHERE user_id=$id"; $query2=mysql_query($sql,$connection); echo"<br/><br/><br/>"; echo"Data Deleted Successfully...!!!"; } echo"</ol>"; mysql_close($connection); echo"<br/><br/>"; echo"<a href="demo_checkbox.php">HOME</a>"; ?> </div> </div> </html>  

checkbox.css

Includes basic styling of HTML elements.

/* below line is used for online google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

div.container{

width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
}
div.container2{

width: 1200px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
}
a{
text-decoration:none;
padding: 5px;
text-align: center;
font-size: 14px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 2px solid #e5a900;
color: black;

cursor: pointer;
text-shadow: 0px 1px 0px #13506D;
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}
a:hover {
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
div.main{
background-color: #69B661;
width: 308px;
margin-top: 35px;
float:left;
border-radius: 5px;
Border:2px solid #999900;
padding:0px 50px 20px;
}
div.main2{
background-color: #69B661;
width: 600px;
margin-top: 35px;
float:left;
border-radius: 5px;
Border:2px solid #999900;
padding:0px 50px 20px;
}
p{
margin-top: 5px;
margin-bottom: 5px;
color:green;
font-weight: bold;
}

h2{
background-color: #FEFFED;
padding: 25px;
margin: 0 -50px;
text-align: center;
border-radius: 5px 5px 0 0;
}

hr{
margin: 0 -50px;
border: 0;
border-bottom: 1px solid #ccc;
margin-bottom:25px;
}

span{
font-size:13.5px;
}

label{
color: black;
text-shadow: 0 1px 0 #A9A9A9;
font-size: 16px;
font-weight: bold;
}

.heading{
font-size: 17px;
}

b{
color:red;
}

input[type=checkbox]{
margin-bottom:10px;
margin-right: 10px;
font-weight: bold;
text-decoration:none;

}

input[type=submit]{
padding: 10px;
text-align: center;
font-size: 18px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 2px solid #e5a900;
color: black;
cursor: pointer;
text-shadow: 0px 1px 0px #13506D;
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}

input[type=submit]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

/* -------------------------------------
CSS for sidebar (optional)
---------------------------------------- */
.fugo{
float:right;
}

 Conclusion:

After reading the above post, I am sure you will give a try to the script provided and implement it in your own projects as well. Feel free to visit our website again in the future to get in touch with new coding tricks. You can let us know about your feedback in the space provided below :)

Recommended blogs –