asked on

Two Bootstrap Modals to edit two different files content - PHP

First let me start by saying I know this is going to be a really basic question. I am new to PHP and struggling a little with this task.

Intro: I am making a little app on a local WAMP server to manage a basic client database and also manage all my VHOST enntries for development. I know there are security issues with editing Windows Hosts file as I'm about to request but this will be strictly a local site.

I have the following PHP

<?php include 'template-parts/header.php' /** calling of header(to make it uniform in all template file) **/?>  

<div class="container home">
    <h3> Delete </h3>



    <div class="btn-group">
            <button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>
            <button data-toggle="modal" class="btn btn-primary btn-sm" name="vhostsedit" data-target="#modalvhost"><span class="glyphicon glyphicon-trash"></span> Edit VHOST.conf</button>
    </div>


    <?php

        // configuration
        $url = 'delete.php';
        $file = 'C:/Windows/System32/Drivers/etc/hosts';

        // check if form has been submitted
        if (isset($_POST['text']))
        {
        // save the text contents
        file_put_contents($file, $_POST['text']);

        // redirect to form again
        header(sprintf('Location: %s', $url));
        printf('<a href="%s">Moved</a>.', htmlspecialchars($url));
        exit();
    }

    // read the textfile
    $text = file_get_contents($file);   
    ?>


    <!-- Modal 1 -->
    <div class="modal fade" id="modalhost" 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">&times;</button>
                <h4 class="modal-title">Delete Host File Entry</h4>
            </div><!-- /modal-header -->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <!-- HTML form -->
                            <form action="" method="post">
                                <textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
                                <p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p>
                        </div>
                    </div>
                </div>                        
            </div><!-- /modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div> 
            </form>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->


<!-- Modal 2 --> 
<div class="modal fade" id="modalvhost" 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">&times;</button>
                <h4 class="modal-title">Delete VHOST File Entry</h4>
            </div><!-- /modal-header -->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <!-- HTML form -->
                            <form action="" method="post">
                                <textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
                        </div>
                    </div>
                </div>                        
            </div><!-- /modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div> 
            </form>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</div>  
</div>
</body>
</html>

Open in new window

The first modal works perfectly, I click the button

<button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>

Open in new window

and this opens up the Bootstrap Modal, presents the Windows Host file within the textarea and allows me to add and delete at will, I click the modal's save button and it works.

The question I need to acheive this same action with the second modal window however this one needs would need to edit C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf'.

I simply don't know how to duplicate the first correctly working PHP to now also work with the VHOST editing requirement.

Any help or pointers would be greatly appreciated.

Scott Fell

I would use just one modal http://jsbin.com/wagir/1

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  
  <script>
  $(function(){
    var formOne = '<textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br /><p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p></div>';
   var formTwo='<textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br /></div>' ;
$('.openModal').click(function(){
  $('#formContent').html('');
  var form = $(this).attr('id');
  $('#myModalLabel').text(form);
  if (form === 'formOne'){
    $('#formContent').html(formOne);
  }else{
     $('#formContent').html(formTwo);
  }
    $('#myModal').modal(open);
});
$('#myModal').on('hidden.bs.modal', function (e) {
  // clear the form
  $('#formContent').html('');
});
});
  </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  
<!-- Button trigger modal -->
<button id="formOne" class="btn btn-primary btn-lg openModal" >
  Launch  form one
</button>
  <button id="formTwo" class="btn btn-primary btn-lg openModal" >
  Launch  form two
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
       <!-- modal content here -->
        <!-- HTML form -->
        <form action="" method="post">
          <div id="formContent"></form>
        </form>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

or you could add a 2nd button changing the data-target="#modalhost" to match the id of the 2nd modal. But one modal is all you need.

Also, your php will generate the html before the browser loads . It is separate from the js which runs after the html is sent to the browser. It is easy to get that concept mixed up. You only need to write out your php to get the html you need as if you hard coded it.

Richard Massey

ASKER

Sorry, I'm not entirely sure I explained myself properly... If I understand your response properly, sounds like I was meaning a question specifically about the modals.

The actual issue I am having is the executing of the PHP... Basically I need duplicate the php:

<?php

        // configuration
        $url = 'delete.php';
        $file = 'C:/Windows/System32/Drivers/etc/hosts';

        // check if form has been submitted
        if (isset($_POST['text']))
        {
        // save the text contents
        file_put_contents($file, $_POST['text']);

        // redirect to form again
        header(sprintf('Location: %s', $url));
        printf('<a href="%s">Moved</a>.', htmlspecialchars($url));
        exit();
    }

    // read the textfile
    $text = file_get_contents($file);   
    ?>

Open in new window

As Modal-1 currently uses the above PHP and executes it properly, I need Modal-2 to execute 'almost' identical PHP however the second version of the PHP would be:

<?php

        // configuration
        $url = 'delete.php';
        $file = 'C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf';

        // check if form has been submitted
        if (isset($_POST['text']))
        {
        // save the text contents
        file_put_contents($file, $_POST['text']);

        // redirect to form again
        header(sprintf('Location: %s', $url));
        printf('<a href="%s">Moved</a>.', htmlspecialchars($url));
        exit();
    }

    // read the textfile
    $text = file_get_contents($file);   
    ?>

Open in new window

So two modals, two PHP scripts, all performing almost identical actions but when I simply copy and past the PHP for the second modal, the PHP clashes with the first.

I tried changing the Vars but that only resulted in errors.

I am very sorry if this makes no sense, I am new to PHP and getting a little confused with my processes :-)

Dave Baldwin

This isn't clear at all. If they are separate files, I don't see how they can conflict. What are the errors? And while changes in the 'hosts' file take effect almost immediately, changes in "httpd-vhosts.conf" do not take effect until Apache is restarted.

Richard Massey

ASKER

Sorry guys, I didn't mean to be vague...

The following page probably makes more sense:

<?php include 'template-parts/header.php'; /** calling of header(to make it uniform in all template file) **/

function echoActiveClassIfRequestMatches($requestUri)
{
	$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
	if ($current_file_name == $requestUri)
	echo 'class="active"';
}
?>	

<div class="page-header">
	<h1>Example page Header <small>Subtext for header</small></h1>
</div>

<div class="container home">
    <h3> Delete </h3>

	<?php include "connection.php" /** calling of connection.php that has the connection code **/ ?>
		<table class="table table-bordered">
              <thead>
                <tr>
                  <th>Client</th>
                  <th>Development URL</th>
				  <th> </th>
                </tr>
              </thead>
              <tbody>
			  <?php 
				$result = mysqli_query($connection, "SELECT * FROM developments") or die ("Query failed: " . mysqli_error($connection));
while ($data = mysqli_fetch_object($result)):
			  ?>
                <tr>
                  <td style="display:none"><?php echo $data->ID ?></td>
                  <td><?php echo $data->clientBusName?></td>
                  <td><?php echo $data->devURL?></td>
				  <td>
					<a href="deleteById.php?id=<?php echo $data->ID ?>"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete </button></a>
				  </td>
                </tr>
			  <?php
				endwhile;
			  ?>
              </tbody>
		</table>

    <div class="btn-group">
            <button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>
            <button data-toggle="modal" class="btn btn-primary btn-sm" name="vhostsedit" data-target="#modalvhost"><span class="glyphicon glyphicon-trash"></span> Edit VHOST.conf</button>
    </div>


    <?php
	// check if form has been submitted
    if (!empty($_POST['hostinput'])){ //i prefer to use empty rather than isset you can read about it

		// configuration
        $url = 'delete.php';
        $file = 'C:/Windows/System32/Drivers/etc/hosts';

        // check if form has been submitted
        if (isset($_POST['hostinput']))
        {
        // save the text contents
        file_put_contents($file, $_POST['hostinput']);

        // redirect to form again
        header(sprintf('Location: %s', $url));
        printf('<a href="%s">Moved</a>.', htmlspecialchars($url));
        exit();
    	}
		// read the textfile
		$text = file_get_contents($file);  
	}
	else if(!empty($_POST['vhostinput'])){
		// configuration
        $url = 'delete.php';
        $file = 'C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf';

        // check if form has been submitted
        if (isset($_POST['vhostinput']))
        {
        // save the text contents
        file_put_contents($file, $_POST['vhostinput']);

        // redirect to form again
        header(sprintf('Location: %s', $url));
        printf('<a href="%s">Moved</a>.', htmlspecialchars($url));
        exit();
    	}
		// read the textfile
		$text = file_get_contents($file);  
	}

         
    ?>


    <!-- Modal 1 -->
    <div class="modal fade" id="modalhost" 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">&times;</button>
                <h4 class="modal-title">Delete Host File Entry</h4>
            </div><!-- /modal-header -->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <!-- HTML form -->
                            <form action="" method="post">
                                <textarea id="hostinput" name="hostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
                                <p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p>
                        </div>
                    </div>
                </div>                        
            </div><!-- /modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div> 
            </form>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->


<!-- Modal 2 --> 
<div class="modal fade" id="modalvhost" 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">&times;</button>
                <h4 class="modal-title">Delete VHOST File Entry</h4>
            </div><!-- /modal-header -->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <!-- HTML form -->
                            <form action="" method="post">
                                <textarea id="vhostinput" name="vhostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
                        </div>
                    </div>
                </div>                        
            </div><!-- /modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div> 
            </form>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</div>  

    
<?php include 'template-parts/footer.php' ?>

Open in new window

Each modal needs to reference one of the PHP scripts. Those two scripts conflict with each other even with the if/else statements.

I hope this makes it a bit clearer.

Dave Baldwin

They aren't conflicting, you're not telling them what to do. This line...

<form action="" method="post">

Open in new window

doesn't have a name for the <form>. That means that when you click on any submit button, both/all form entries are submitted. Before you do anything else, give each of the forms different names like...

<form action="" method="post" name="form1">
<form action="" method="post" name="form2">

Open in new window

You Always have to do that if you have more than one form on a page.

Richard Massey

ASKER

Ok, made the change but I am getting the following error (removed personal info from link):

Notice: Undefined variable: text in C:\Users\xxxxxxx\xxxxxxx\xxxxx\devlogs\delete.php on line 112

Open in new window

This error corresponds to:

<textarea id="hostinput" name="hostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />

Open in new window

I am sorry, I am quite new to PHP as mentioned.

Ray Paseur

If you're new to PHP, you may not yet have enough of the basics down to start on a complex project. This article should help you get a foundation and find some good learning resources. And more importantly it will help you avoid the many bad learning resources that litter the internet!
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html

Dave Baldwin

The error in delete.php may be a consequence of getting the forms to submit correctly so you can see the error. It says that "Undefined variable: text" so $text is the PHP variable on that line. You probably have not assigned a value to $text, that would be the usual reason.

Richard Massey

ASKER

I am sorry if I'm wrong but isn't that what this line does

$text = file_get_contents($file);

Open in new window

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Massey

ASKER

Thanks for the response, got me looking in the right direction