Part 85 - Navigation Editor Query

[fazer06]

Hi all. This isn't really an issue because i've just finished the whole project, but its regarding Part 85 - when we started to build the navigation form, and it was mentioned about adding to the navigation. Since the project has ended has anybody successfully got that part working ?

I've been looking at it for a few hours now and i can't figure out how to add a new record. When i look at it with firebug all i can see is undefined indexes and an error in my SQL syntax, because its using the update, not the INSERT that i've put within an else, also the ajax is being called. So, i'm a bit stuck and if anybody has successfully got this part figured out, could you share your code please ?

Regards Shaun

[creptor]

the navigation form is not compleated and it does not work... however you can finish it with code in the series and with the file template.php that has the input for the navigation fuction style with sql.

Dought I never needed to get that thing working, I can't provide you any extra code. I just say that you should give it a try, and if you make it work or have any issues post it here.

PD: the form is kind of ..... misslead, so you should search for new ways to do this. I have personally tried the jqueryui sortable connected lists with no success.

[fazer06]

Thanks creptor i'll take at look at it in the morning, i'm sure i'll give up after a while but if i do figure it out, i will post it here. I did make a second form so it looks like the users and pages parts of the admin, but i just can't get my head around it at the moment mate.

[JasonMate]

I got mine working but it uses sub items and a couple extra fields that you might not need, so you will have to edit it. Heres the code for queries.php:

case 'navigation':

      if($_POST['label'] != '' && $_POST['url'] != ''){
        if(isset($_POST['submitted']) == 2) {
          $label = mysqli_real_escape_string($dbc, $_POST['label']);
          $url = mysqli_real_escape_string($dbc, $_POST['url']);
          $position = mysqli_real_escape_string($dbc, $_POST['position']);
          $status = mysqli_real_escape_string($dbc, $_POST['status']);

          $action = 'added';                            
          $q = "INSERT INTO navigation (id, label, url, icon, position, sub, status) VALUES ('$_POST[id]', '$label', '$url', '$_POST[icon]', '$_POST[position]', '$_POST[sub]', '$_POST[status]')";
          $r = mysqli_query($dbc, $q);

        }

      }

            if(isset($_POST['submitted']) == 1) {

                $label = mysqli_real_escape_string($dbc, $_POST['label']);
                $url = mysqli_real_escape_string($dbc, $_POST['url']);
                               $sub = mysqli_real_escape_string($dbc, $_POST['sub']);
                if(isset($_POST['id']) != '') {

                    $action = 'updated';
                    $q = "UPDATE navigation SET id = '$_POST[id]', label = '$label', url = '$url', icon = '$_POST[icon]', position = $_POST[position], sub = '$sub', status = $_POST[status] WHERE id = '$_POST[openedid]'";
                    $r = mysqli_query($dbc, $q);

                } 

                if($r){

                    $message = '<p class="alert alert-success">Navigation was '.$action.'</p>';

                } else {

                    $message = '<p class="alert alert-danger">Navigation could not be '.$action.'!</p>';

                }

            }

break;

[fazer06]

Thanks for that, Jason. I've almost got it working, can you guys see anything wrong with this code ?

Add To Navigation

Label for menu link:

```

URL for menu link:

Icon for menu link:

Sorted by Position:

Enable link. (0 - 1):

Add to Navigation

Sort Navigation

• ID:

  Label:

  URL:

  Icon:

  Status:

  Update

```

As of now i can add and delete, the sort is working but i can't get the update to work, can you spot anything ?

[fazer06]

And this is the query, with the edits ive done

case 'navigation':

    if($_POST['label'] != '' && $_POST['url'] != ''){
        if(isset($_POST['submitted']) == 2) {
            $label = mysqli_real_escape_string($connection, $_POST['label']);
            $url = mysqli_real_escape_string($connection, $_POST['url']);
            $position = mysqli_real_escape_string($connection, $_POST['position']);
            $status = mysqli_real_escape_string($connection, $_POST['status']);

            $action = 'added';                            
            $query = "INSERT INTO navigation (id,label, url, icon, position, status) VALUES ('$_POST[id]', '$label', '$url', '$_POST[icon]', '$_POST[position]', '$_POST[status]')";
            $result = mysqli_query($connection, $query);
        }
    }

    if(isset($_POST['submitted']) == 1) {

        $label = mysqli_real_escape_string($connection, $_POST['label']);
        $url = mysqli_real_escape_string($connection, $_POST['url']);

        if(isset($_POST['id']) != '') {
            $action = 'updated';
            $query = "UPDATE navigation SET id = '$_POST[id]', label = '$label', url = '$url', icon = '$_POST[icon]', position = $_POST[position], status = $_POST[status] WHERE id = '$_POST[openedid]'";
            $result = mysqli_query($connection, $query);
        } 

            if($result){

                $message = '<div class="alert alert-success">Navigation was '.$action.'</div>';

            } else {

                $message = '<div class="alert alert-danger">Navigation could not be '.$action.'!</div>';

            }

        }

    break;

[fazer06]

I fixed it, it was position = $_POST[position], status = $_POST[status] in the query, and it should have been position = '$_POST[position]', status = '$_POST[status]' i missed the 'single quotes'

[creptor]

I'll, also now that you have posted this, try to get my idea working.. it seams to be more user friendly interface, but It has a complex ajax idea :C If i get it I'll post the code and how it should work.

[fazer06]

This isn't totally working, one part that i do need to fix is the ajax for the delete, at the moment i need to refresh the page, it works with the edit so it can't be much. Also, i need to figure out how to deal with the page view and navigation working together, but im not sure how to tackle that bit, i guess what i really need to do is when a page is added, so is a navigation item. i also want to add a sidebar down the right side of the main view page, and a row of four col-md-3's at the bottom, also a bootstrap carousel.

I'd be interested to see what you come up with, creptor :)

[JasonMate]

Hey fazor06, Do you have your navigation include in the view? As for the delete, I can show what I did and you can reverse engineer it for your setup. Sorry about the table :)

delete_nav.php :

<?php

include('../../config/connection.php');

$id = $_GET['id'];  

$q = "DELETE FROM navigation WHERE id = $id";
$r = mysqli_query($dbc,$q);

if($r) {
    $message .= "Link Deleted";
} else {

    $message .= "There was an error...<br>";
    $message .= $q."<br>";
    $message .= mysqli_error($dbc);

}

?>

navigation.php :

<h1>Navigation</h1>
<?php include('functions/message.php'); ?>
  <h3 class="settings-title">Add New</h3>
  <section class="content-wrap">
  <form class="nav-form add-nav" action="index.php?page=navigation" method="post" role="form">
    <table>
      <tr>
        <td>
          <p><strong>Label:</strong></p>
        </td>
        <td>
          <input class="form-input" type="text" name="label" placeholder="Label for link..." autocomplete="off">
        </td>
        <td>
          <p>* Include label for menu link.</p>
        </td>
      </tr>
      <tr>
        <td>
          <p><strong>Url:</strong></p>
        </td>
        <td>
          <input class="form-input" type="text" name="url" placeholder="Link path..." autocomplete="off">
        </td>
        <td>
          <p>* Include page URL for menu link.</p>
        </td>          
      </tr>
      <tr>
        <td>
          <p><strong>Icon:</strong></p>
        </td>
        <td>
          <input class="form-input" type="text" name="Icon" placeholder="Font Awesome icon..." autocomplete="off">
        </td>
        <td>
          <p>* Include icon for menu link. (<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="new">Font Awesome</a>)</p>
        </td>          
      </tr>
      <tr>
        <td>
          <p><strong>Sub:</strong></p>
        </td>
        <td>
          <input class="form-input" type="text" name="sub" placeholder="Sub-menu item?" autocomplete="off">
        </td>
        <td>
          <p>* Include position for submenu to appear. (0 - #)</p>
        </td>
      </tr>
      <tr>
        <td>
          <p><strong>Position:</strong></p>
        </td>
        <td>
          <input class="form-input" type="text" name="position" placeholder="Position of link..." autocomplete="off">
        </td>
        <td>
          <p>* Menu items are sorted by position. (#)</p>
        </td>
      </tr>
      <tr>
        <td>
          <p><strong>Status:</strong></p>
        </td>
        <td>
          <input class="form-input" type="text" name="status" placeholder="Link status..." autocomplete="off">
        </td>
        <td>
          <p>* Include status to enable link. (0 - 1)</p>
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
          <button type="submit" name="submit" class="submit">+ Add to Menu</button>
          <input type="hidden" name="submitted" value="2">
         </td>
      </tr>
    </table>
  </form>
  </section><!-- .content-wrap -->  
  <h3 class="settings-title">Main Navigation</h3>   
  <section class="content-wrap">        
<?php 
  $q = "SELECT * FROM navigation ORDER BY sub, position ASC";
  $r = mysqli_query($dbc, $q);    
  while($opened = mysqli_fetch_assoc($r)) { ?>

  <form id="nav_<?php echo $opened['id']; ?>" class="nav-form edit-nav" action="index.php?page=navigation&id=<?php echo $opened['id']; ?>" method="post" role="form">
    <table class="nav-table">
      <tr> 
        <input class="form-input-hidden" type="text" name="id" id="id" value="<?php echo $opened['id']; ?>" autocomplete="off">
        <td>
        <label for="label">Label:</label>
        </td>
        <td>
        <input class="form-input" type="text" name="label" id="label" value="<?php echo $opened['label']; ?>" placeholder="Label" autocomplete="off">
        </td>
        <td>
        <label for="url">Url:</label>
        </td>
        <td>
        <input class="form-input" type="text" name="url" id="url" value="<?php echo $opened['url']; ?>" placeholder="Url" autocomplete="off">
        </td>
        <td>
        <label for="icon">Icon:</label>
        </td>
        <td>
        <input class="form-input" type="text" name="icon" id="icon" value="<?php echo htmlentities($opened['icon']); ?>" placeholder="Icon" autocomplete="off">
        </td>
        <td>
        <label for="sub">Sub:</label>
        </td>
        <td>
        <input class="form-input" type="number" name="sub" id="sub" value="<?php echo $opened['sub']; ?>" min="0" max="20" step="1" autocomplete="off">
        </td>
        <td>
        <label for="position">Position:</label>
        </td>
        <td>
        <input class="form-input" type="number" name="position" id="position" value="<?php echo $opened['position']; ?>" min="0" max="20" step="1" autocomplete="off">
        </td>
        <td>
        <label for="status">Status:</label>
        </td>
        <td>
        <input class="form-input" type="number" name="status" id="status" value="<?php echo $opened['status']; ?>" min="0" max="1" step="1" autocomplete="off">
        </td>
        <td>
        <button type="submit" class="submit">Update</button>
        <input type="hidden" name="submitted" value="1">

        <input type="hidden" name="openedid" value="<?php echo $opened['id']; ?>">
        </td>
        <td>
        <button id="del_<?php echo $opened['id']; ?>" class="btn-delete-nav delete-img"><i class="fa fa-trash-o"></i></button>
        </td>
      </tr>
    </table>
 </form>    
<?php } ?>
</section><!-- .content-wrap -->
<script type="text/javascript">
// Delete navigation - delete_nav.php
$(document).ready(function() {
  $(".btn-delete-nav").on("click", function() {

    var selected = $(this).attr("id");
    var navid = selected.split("del_").join("");
    var confirmed = confirm("Are you sure you want to delete this link from menu?");

    if(confirmed == true) {

      $.get("functions/delete_nav.php?id="+navid);

      $("#nav_"+navid).remove();                

    }

  });
});
</script>

[creptor]

@JasonMate maybe you should just create a new repository on github and post here the updates... those codes could get in the help or answers of the people that may be here for them. Thanks. (with links)

[fazer06]

@JasonMate Yes the navigation is included as a view, i took another look today and i still can't get the ajax to refresh the delete, yet when i used an inline form it all worked, so im really not sure. I updated the users view today so it works and looks the same as the page/posts view, and thinking about it i'm going to use the same format with the navigation view so it has a consistent look and feel across the backend. After that i'll take a look at the front-end and add a sidebar and a few other bits

On another note, i took a look at your project today but i couldn't get it to install properly. Basically, when I called the index It didn't have the project root directory in the url, so I put it in manually and the database tables installed, then it got to finishing the install so I clicked that and it looked at the xampp root, not the project root and failed, i wanted to have a poke around and learn a few bits from your project, any ideas why that failed ?

[creptor]

I have finished adding my navigation admin section, and I fixed it :smile:. Here's the link

Here's a first look:

Remember that you need to have your pages table updated to posts

[fazer06]

@creptor Oh, that looks really cool! Does that add items to the navigation when you add a page ?

[creptor]

no that's not the idea... I haven't think it that way... the left is what it's showing on the page... and the right are the pages avaliable..(because you don't what to let them have a 404 page right?) Also the're no files for the other things so maybe another time i'll add it

[fazer06]

No, i mean at the moment we have to add a page, then add the navigation link for it to show on the front end. What i've been trying to figure out is how to add both at the same time, then just use the navigation page on the back end to sort the order of nav links and edit them, i see you have navigation.php in objects dir, that should be views, right ?

[creptor]

yea, use the items in my navigation.. so you could just use the same code in the ajax (ajax/list-add-nav.php) and add it to your query for pages and it should work just fine.

[fazer06]

Also i've got the link to the navigation.php view inside template/navigation.php NOT template/header.php - So you mean keep yours in the objects directory and use an include inside template/header.php have i got that right ?

[creptor]

yea or just copy the code, it's basicaly the same :smile: (note: the status makes the link visible, or not visible, so you keep it in place untill you whant to show the page :3)

[fazer06]

Sweet, i'll take a look in the morning mate and report back :)