how to make a main content of a sidebar without make a new tab/refresh the page to linked file?-CodePudding

<?php 
    session_start();
    if (isset($_SESSION['id']) && isset($_SESSION['username'])) {

?>
<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <link rel="stylesheet" type="text/css" href="dashboard.css">
        <script src="https://kit.fontawesome.com/463f6f67c2.js" crossorigin="anonymous"></script>
    </head>
    <body >
<h1>Halo,<?php echo $_SESSION['name']; ?></h1>

<div >
    <div >
    <h2>Sidebar</h2>

    <ul><!--sidebar list-->
        <li><a href="#" id="home"><i ></i>Home</a></li>
        <li><a href="petugas.php" target="main_body"><i ></i>Data Petugas</a></li>
        <li><a href="#" id="kelas"><i ></i>Data Kelas</a></li>
        <li><a href="#" id="siswa"><i ></i>Data Siswa</a></li>
        <li><a href="#" id="history pembayaran"><i ></i>History Pembayaran</a></li>
    </ul>
    </div>
        </div>
</div>
<a href="logout.php">Logout</a>
    </body>
</html>

<?php
    }else{
        header("Location: index.php");
        exit();
    }
?>

in this case if i click 'petugas' on sidebar the web making the new tab/window without the sidebar,i want the sidebar stay in the page and load the 'petugas.php' without make a new tab/window,just in the 'petugas' section

CodePudding user response：

One way to make the main content of the sidebar without opening a new tab or refreshing the page is to use JavaScript to load the content in the same place. This can be done in several ways, here are some options:

1: Use the method load in jQuery:

$("#sidebar").load("content.html #main-content");

2: Use the method get in AJAX:

$.get("content.html", function(data) {
  $("#sidebar").html($(data).find("#main-content"));
});

3: Use the method fetch in JavaScript:

fetch("conteudo.html")
  .then(response => response.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const mainContent = doc.querySelector("#main-content");
    document.querySelector("#sidebar").innerHTML = mainContent.innerHTML;
  });

These examples load the content from the file "content.html" and place the element with the ID "content-main" in the sidebar with the ID "sidebar". It is important to remember to add the # sign before the ID in the selector to indicate that it is an ID and not an HTML element.

You can also use JavaScript to add a click event on a link or button in the sidebar to load the content in the same place instead of opening a new tab or refreshing the page. For example:

document.querySelector("#content-link").addEventListener("click", function(event) {
  event.preventDefault();
  $("#sidebar").load("conteudo.html #main-content");
});

I hope this helps! Any questions, don't hesitate to ask.

CodePudding user response：

This cannot be solved only by PHP.

PHP is executed server-sided. This means, the moment you see the page, all PHP is done. Calling another PHP script means calling a new page.

If you want to change content asynchronously on your page, you either need a different technology that works after the page is loaded, like JavaScript performing AJAX-Requests to another script and altering the HTML that has already been generated. Edit: The answer by @Henrique shows methods for this approach.

Or you can "trick" this behaviour by loading everything upfront and hide the things you do not want to show from the beginning using CSS. Needless to say that this is not a good practice, but solves your question.

If you write each page yourself, you can put the sidebar to some sort of wrapper that loads with every page you link to. It will redraw on every link click, but it will be there for every page. And it seems the least complicated way for your situation.