CRUD Operation in XML File using PHP with Modal

Submitted by: 
Language: 
Visitors have accessed this post 1725 times.

Getting Started

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.

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:

Boostrap
jQuery

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.

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.

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. file_put_contents('files/members.xml', $users->asXML());
  11. $_SESSION['message'] = 'Member added successfully';
  12. header('location: index.php');
  13. }
  14. else{
  15. $_SESSION['message'] = 'Fill up add form first';
  16. header('location: index.php');
  17. }
  18.  
  19. ?>

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. ?>

That ends this tutorial. 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

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=<?php echo $row->id; ?>

Then create a new file and name it as view.php and paste the below codes.

<?php
$users = simplexml_load_file('files/members.xml');
foreach($users->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;

?>

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.