CRUD Operation in XML File using PHP with Modal Tutorial

Language

In the previous tutorials with regard to XML, we have discussed on How to Create XML file from MySQL Database using PHP/MySQLi and on How to Display XML File using PHP. This time, we are going to discussed on how to create CRUD Operation on XML File.

This tutorial tackles how to create a CRUD(create, read, update and delete) operation also knows as add, edit, delete in XML Files using PHP with Bootstrap Modal to handle our Forms. XML stands for eXtensible Markup Language which is designed to store and transport data and sometimes used as a database substitute.

Getting Started

I've used bootstrap and jQuery in this tutorial to enable bootstrap modals. These files are included in the downloadable of this tutorial but, if you want, you may download them using the links below:

Preparing our XML File to use

I've included a sample XML file in the downloadable of this tutorial located in files folder. This file is what we are going to use in this tutorial. If you want to start from scratch, create a new file inside the files folder naming members.xml. Copy/Paste the xml script below in the xml file you created.

  1. <?xml version="1.0"?>
  2. <users>
  3. </users>

Displaying XML Data

Next, we are going to display the data in our XML file by creating a table and adding the three buttons to our add, edit and delete functions. If you created a new XML file, the list/table will be empty at first till member data will be added.

Create a new file, name it as index.php and paste the below codes.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CRUD Operation in XML Files using PHP</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1 class="page-header text-center">CRUD Operation in XML Files using PHP</h1>
  11. <div class="row">
  12. <div class="col-sm-8 col-sm-offset-2">
  13. <a href="#addnew" class="btn btn-primary" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> New</a>
  14. <?php
  15. if(isset($_SESSION['message'])){
  16. ?>
  17. <div class="alert alert-info text-center" style="margin-top:20px;">
  18. <?php echo $_SESSION['message']; ?>
  19. </div>
  20. <?php
  21.  
  22. unset($_SESSION['message']);
  23. }
  24. ?>
  25. <table class="table table-bordered table-striped" style="margin-top:20px;">
  26. <thead>
  27. <th>UserID</th>
  28. <th>Firstname</th>
  29. <th>Lastname</th>
  30. <th>Address</th>
  31. <th>Action</th>
  32. </thead>
  33. <tbody>
  34. <?php
  35. //load xml file
  36. $file = simplexml_load_file('files/members.xml');
  37.  
  38. foreach($file->user as $row){
  39. ?>
  40. <tr>
  41. <td><?php echo $row->id; ?></td>
  42. <td><?php echo $row->firstname; ?></td>
  43. <td><?php echo $row->lastname; ?></td>
  44. <td><?php echo $row->address; ?></td>
  45. <td>
  46. <a href="#edit_<?php echo $row->id; ?>" data-toggle="modal" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span> Edit</a>
  47. <a href="#delete_<?php echo $row->id; ?>" data-toggle="modal" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a>
  48. </td>
  49. <?php include('edit_delete_modal.php'); ?>
  50. </tr>
  51. <?php
  52. }
  53.  
  54. ?>
  55. </tbody>
  56. </table>
  57. </div>
  58. </div>
  59. </div>
  60. <?php include('add_modal.php'); ?>
  61. <script src="jquery.min.js"></script>
  62. <script src="bootstrap/js/bootstrap.min.js"></script>
  63. </body>
  64. </html>

Creating our Modals

Next, we are going to create the modals for our add, edit and delete.

Create the ff files:

add_modal.php
  1. <!-- Add New -->
  2. <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7. <center><h4 class="modal-title" id="myModalLabel">Add New</h4></center>
  8. </div>
  9. <div class="modal-body">
  10. <div class="container-fluid">
  11. <form method="POST" action="add.php">
  12. <div class="row form-group">
  13. <div class="col-sm-2">
  14. <label class="control-label" style="position:relative; top:7px;">ID:</label>
  15. </div>
  16. <div class="col-sm-10">
  17. <input type="text" class="form-control" name="id">
  18. </div>
  19. </div>
  20. <div class="row form-group">
  21. <div class="col-sm-2">
  22. <label class="control-label" style="position:relative; top:7px;">Firstname:</label>
  23. </div>
  24. <div class="col-sm-10">
  25. <input type="text" class="form-control" name="firstname">
  26. </div>
  27. </div>
  28. <div class="row form-group">
  29. <div class="col-sm-2">
  30. <label class="control-label" style="position:relative; top:7px;">Lastname:</label>
  31. </div>
  32. <div class="col-sm-10">
  33. <input type="text" class="form-control" name="lastname">
  34. </div>
  35. </div>
  36. <div class="row form-group">
  37. <div class="col-sm-2">
  38. <label class="control-label" style="position:relative; top:7px;">Address:</label>
  39. </div>
  40. <div class="col-sm-10">
  41. <input type="text" class="form-control" name="address">
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="modal-footer">
  47. <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  48. <button type="submit" name="add" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
  49. </form>
  50. </div>
  51.  
  52. </div>
  53. </div>
  54. </div>
edit_delete_modal.php
  1. <!-- Edit -->
  2. <div class="modal fade" id="edit_<?php echo $row->id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7. <center><h4 class="modal-title" id="myModalLabel">Edit Member</h4></center>
  8. </div>
  9. <div class="modal-body">
  10. <div class="container-fluid">
  11. <form method="POST" action="edit.php">
  12. <div class="row form-group">
  13. <div class="col-sm-2">
  14. <label class="control-label" style="position:relative; top:7px;">ID:</label>
  15. </div>
  16. <div class="col-sm-10">
  17. <input type="text" class="form-control" name="id" value="<?php echo $row->id; ?>" readonly>
  18. </div>
  19. </div>
  20. <div class="row form-group">
  21. <div class="col-sm-2">
  22. <label class="control-label" style="position:relative; top:7px;">Firstname:</label>
  23. </div>
  24. <div class="col-sm-10">
  25. <input type="text" class="form-control" name="firstname" value="<?php echo $row->firstname; ?>">
  26. </div>
  27. </div>
  28. <div class="row form-group">
  29. <div class="col-sm-2">
  30. <label class="control-label" style="position:relative; top:7px;">Lastname:</label>
  31. </div>
  32. <div class="col-sm-10">
  33. <input type="text" class="form-control" name="lastname" value="<?php echo $row->lastname; ?>">
  34. </div>
  35. </div>
  36. <div class="row form-group">
  37. <div class="col-sm-2">
  38. <label class="control-label" style="position:relative; top:7px;">Address:</label>
  39. </div>
  40. <div class="col-sm-10">
  41. <input type="text" class="form-control" name="address" value="<?php echo $row->address; ?>">
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="modal-footer">
  47. <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  48. <button type="submit" name="edit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</a>
  49. </form>
  50. </div>
  51.  
  52. </div>
  53. </div>
  54. </div>
  55.  
  56. <!-- Delete -->
  57. <div class="modal fade" id="delete_<?php echo $row->id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  58. <div class="modal-dialog">
  59. <div class="modal-content">
  60. <div class="modal-header">
  61. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  62. <center><h4 class="modal-title" id="myModalLabel">Delete Member</h4></center>
  63. </div>
  64. <div class="modal-body">
  65. <p class="text-center">Are you sure you want to Delete</p>
  66. <h2 class="text-center"><?php echo $row->firstname.' '.$row->lastname; ?></h2>
  67. </div>
  68. <div class="modal-footer">
  69. <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  70. <a href="delete.php?id=<?php echo $row->id; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Yes</a>
  71. </div>
  72.  
  73. </div>
  74. </div>
  75. </div>

Creating our Add Script

Next, we are going to create our add script to add a new item to our XML file.

Create a new file, name it as add.php and paste the below codes.

  1. <?php
  2. if(isset($_POST['add'])){
  3. //open xml file
  4. $users = simplexml_load_file('files/members.xml');
  5. $user = $users->addChild('user');
  6. $user->addChild('id', $_POST['id']);
  7. $user->addChild('firstname', $_POST['firstname']);
  8. $user->addChild('lastname', $_POST['lastname']);
  9. $user->addChild('address', $_POST['address']);
  10. // Save to file
  11. // file_put_contents('files/members.xml', $users->asXML());
  12. // Prettify / Format XML and save
  13. $dom = new DomDocument();
  14. $dom->preserveWhiteSpace = false;
  15. $dom->formatOutput = true;
  16. $dom->loadXML($users->asXML());
  17. $dom->save('files/members.xml');
  18. // Prettify / Format XML and save
  19.  
  20. $_SESSION['message'] = 'Member added successfully';
  21. header('location: index.php');
  22. }
  23. else{
  24. $_SESSION['message'] = 'Fill up add form first';
  25. header('location: index.php');
  26. }
  27. ?>

Creating our Update Script

Next, we are going to create our update script by creating a new file, name it as edit.php and paste the below codes.

  1. <?php
  2. if(isset($_POST['edit'])){
  3. $users = simplexml_load_file('files/members.xml');
  4. foreach($users->user as $user){
  5. if($user->id == $_POST['id']){
  6. $user->firstname = $_POST['firstname'];
  7. $user->lastname = $_POST['lastname'];
  8. $user->address = $_POST['address'];
  9. break;
  10. }
  11. }
  12.  
  13. file_put_contents('files/members.xml', $users->asXML());
  14. $_SESSION['message'] = 'Member updated successfully';
  15. header('location: index.php');
  16. }
  17. else{
  18. $_SESSION['message'] = 'Select member to edit first';
  19. header('location: index.php');
  20. }
  21.  
  22. ?>

Creating our Delete Script

Lastly, we create our delete script by creating a new file, name it as delete.php and paste the below codes.

  1. <?php
  2. $id = $_GET['id'];
  3.  
  4. $users = simplexml_load_file('files/members.xml');
  5.  
  6. //we're are going to create iterator to assign to each user
  7. $index = 0;
  8. $i = 0;
  9.  
  10. foreach($users->user as $user){
  11. if($user->id == $id){
  12. $index = $i;
  13. break;
  14. }
  15. $i++;
  16. }
  17.  
  18. unset($users->user[$index]);
  19. file_put_contents('files/members.xml', $users->asXML());
  20.  
  21. $_SESSION['message'] = 'Member deleted successfully';
  22. header('location: index.php');
  23.  
  24. ?>

DEMO

And that's the end of this tutorial. Test the simple web you made on your end and if there's an error occurred, kindly recheck the code in each file or you can also download the working source code that I have created in this tutorial.

I hope this will help you with what you are looking for and you'll find this tutorial useful for your future PHP Projects. Explore more on this website for more tutorials and free source codes.

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.

Comments

Submitted byoleteacheron Thu, 03/15/2018 - 01:58

Appreciate the tutorial much Neovic. If there is a way to echo a single record, would love to learn how. For example each record has an ID. If there is a way to echo single ID content into a page, make a good tutorial. There are so many times when using mySQL for a simple page is overkill. Thank you again and as always, eye is open for your next tutorial:) Susan

There's no need to create another tutorial, just add this new anchor tag to the action column together with edit and delete button and put the below code as href value. view.php?id=id; ?> Then create a new file and name it as view.php and paste the below codes. user as $user){ if($user->id == $_GET['id']){ $id = $user->id; $firstname = $user->firstname; $lastname = $user->lastname; $address = $user->address; break; } } //echo user details echo 'ID: '.$id.'
'; echo 'Firstname: '.$firstname.'
'; echo 'Lastname: '.$lastname.'
'; echo 'Address: '.$address; ?>
Submitted byoleteacheron Tue, 12/04/2018 - 00:17

Really enjoying the code, students using in class and have learned a lot from it. Any chance that you could do another one on XML CRUD but encrypt the XML file with OpenSSL? Many thanks for your knowledge and sharing code!
Submitted byjravia (not verified)on Thu, 10/01/2020 - 15:25

good. add $users->formatOutput = true; $users->preserveWhiteSpace = false; for better readable outout
Submitted byjujuin the beat (not verified)on Wed, 03/29/2023 - 13:30

nice

Add new comment