PHP Directory Scope - php

I'm facing a pretty particular problem, basically I'm tryng to create an header in my PHP project. I put my navbar into the "View" folder, and I'm including it with require in each page that I need to use it, I do the same thing with my head, that includes stylesheet and other stuff... Basically the problem is when I try to call the head/the navbar all the relative paths that I used in my 2 files get messed up, since when I call them I'm into another folder. I found three different solutions, and the one who seems to be the best doesn't work.
(I would rather not to use js, if there's any other good solution)
1 Solution that I tried:
I used absolute PATHS, it works, but it doesn't seem right to me, first of all, the file is not going to work in other computers, but only in mine, and it doesn't seem to be a correct approach to the problem. (But then I thought about creating a constant that contains the path of the folder which contains the project, but there's a problem, how do I make that constant to be accessible from every single file in the project? Since when I create it, it's not global.
2 Solution that I tried:
This one is kinda tricky, I basically tried to make a function that generates the entire navbar
<?php
include_once(PATH.'/functions/relpath.php');
function getNavbar($currentPage, $isInsert, $inserimenti){
$navbar = "
<nav class='navbar navbar-expand-md navbar-dark bg-dark fixed-top'>
<div class='container-fluid'>
<a class='navbar-brand' href='#'>Libreria</a>
<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarsExampleDefault' aria-controls='navbarsExampleDefault' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarsExampleDefault'>
<ul class='navbar-nav me-auto mb-2 mb-md-0'> ";
if($isInsert){
//Nel caso in cui ci troviamo in una pagine di inserimento
$pathhome = getRelativePath($_SERVER['PHP_SELF'],PATH.'/index.php');
$pathtabella = getRelativePath($_SERVER['PHP_SELF'],PATH.'/src/tabelle.php');
$navbar.= "
<ul class='navbar-nav me-auto mb-2 mb-md-0'>
<li class='nav-item'>
<a class='nav-link' href='".$pathhome."'>Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='".$pathtabella."'>Tabelle</a>
</li>
<a class='nav-link dropdown-toggle active' href='#' id='dropdown01' data-bs-toggle='dropdown' aria-expanded='false'>Inserisci</a>
<ul class='dropdown-menu' aria-labelledby='dropdown01'>
";
foreach($inserimenti as $key => $value){
$relpath = getRelativePath($_SERVER['PHP_SELF'],PATH.'/'.$value);
$navbar.= "
<li><a class='dropdown-item' href='".$relpath."'>".$value."</a></li>
";
}
$navbar.="
</ul>
</li>
</ul>
</div>
</div>
</nav>
";
}else{
//Nel caso in cui ci troviamo in un altra pagina, non di inserimento
$pathhome = getRelativePath($_SERVER['PHP_SELF'],'/progetti/www/Informatica/Marzo2021/ProgettoLibreria/index.php');
echo("PHP SELF: ".$_SERVER['PHP_SELF']."\n PATH ABS: ".PATH.'/index.php'."\n Path Generata da Funzione ".$pathhome);
$pathtabella = getRelativePath($_SERVER['PHP_SELF'],PATH.'/src/tabelle.php');
if($currentPage=="index.php"){
$navbar.= "
<ul class='navbar-nav me-auto mb-2 mb-md-0'>
<li class='nav-item'>
<a class='nav-link active' aria-current='page' href='".$pathhome."'>Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='".$pathtabella."'>Tabelle</a>
</li>
<a class='nav-link dropdown-toggle' href='#' id='dropdown01' data-bs-toggle='dropdown' aria-expanded='false'>Inserisci</a>
<ul class='dropdown-menu' aria-labelledby='dropdown01'>
";
}else{
//Dovrebbe quindi essere la tabella
$navbar.= "
<ul class='navbar-nav me-auto mb-2 mb-md-0'>
<li class='nav-item'>
<a class='nav-link' href='".$pathhome."'>Home</a>
</li>
<li class='nav-item'>
<a class='nav-link active' aria-current='page' href='".$pathtabella."'>Tabelle</a>
</li>
<a class='nav-link dropdown-toggle' href='#' id='dropdown01' data-bs-toggle='dropdown' aria-expanded='false'>Inserisci</a>
<ul class='dropdown-menu' aria-labelledby='dropdown01'>
";
}
foreach($inserimenti as $key => $value){
$relpath = getRelativePath($_SERVER['PHP_SELF'],PATH.'/'.$value);
$navbar.= "
<li><a class='dropdown-item' href='".$relpath."'>".$value."</a></li>
";
}
$navbar.="
</ul>
</li>
</ul>
</div>
</div>
</nav>
";
}
return $navbar;
}
?>
In this function, I call another function that I copied from another guy that essentially, outputs the relative path if you give to it the absolute path of your current folder, and the absolute path of the folder that you want to go to. As follows
<?php
function getRelativePath($from, $to)
{
// some compatibility fixes for Windows paths
$from = is_dir($from) ? rtrim($from, '\/') . '/' : $from;
$to = is_dir($to) ? rtrim($to, '\/') . '/' : $to;
$from = str_replace('\\', '/', $from);
$to = str_replace('\\', '/', $to);
$from = explode('/', $from);
$to = explode('/', $to);
$relPath = $to;
foreach($from as $depth => $dir) {
// find first non-matching dir
if($dir === $to[$depth]) {
// ignore this directory
array_shift($relPath);
} else {
// get number of remaining dirs to $from
$remaining = count($from) - $depth;
if($remaining > 1) {
// add traversals up to first matching dir
$padLength = (count($relPath) + $remaining - 1) * -1;
$relPath = array_pad($relPath, $padLength, '..');
break;
} else {
$relPath[0] = './' . $relPath[0];
}
}
}
return implode('/', $relPath);
}
?>
The third solution is the one that I thought to be the best pick, basically I wanted to use the function chdir(), to change the working folder. Essentialy, when I'm into a file that is inside a folder i use the command chdir('..') in order to get into the main folder, and then I could use the relative paths as if I was out of that folder. Put apparently it doesen't work as planned at all, since it still doesn't work!! The relative paths inside the head and the navbar act as if they where into a folder, even if the working folder changed... I'm desperate at this point.
This is the page inside a folder, don't minnd the paths that I wrote, it's for debug, but as you can see, it doesn't load the css that is inside the head
And when I click on a link of the navbar, it acts like I'm into a folder
when I click home, it should go into index.php, but out of the folder, not inside src
The last thing that I send is the folder structure that I have, It's not complete, but at least you can see the interested part. Consider that the navbar and the head is into the view file, while the pages of the website are into src
File structure
If you need more details about the problem, or anything else, ask me. Thanks in advance for the help, if you have other solutions apart from solving the ones that I tried, it would be very nice, I'm sorry if I made some grammar mistakes or anything else, since my spaghetti Italian English could be a bit rusty.

Related

how do I split this php file into MVC format?

i'm learning to program in OOP MVC,
I have this code for a simple nav menu:
<?php
$directory = "views";
$scannedDirectory = glob("$directory/*.php");
function uppercaseSpace($str) {
$re = '/(?=[A-Z][a-z])(?<!^)|(?=[A-Z])(?<=[a-z])/m';
$subst = ' ';
$result = preg_replace($re, $subst, $str);
return $result;
}
?>
<div id="header2">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="http://<?php echo $HOST ?>">Home</a>
</li>
<?php foreach ($scannedDirectory as $key => $value) {
$articleName = substr($value,6,-4);
printf('
<li class="nav-item">
<a class="nav-link active" href="?page=%s">%s</a>
</li>
',$articleName, ucfirst(uppercaseSpace($articleName)));
} ?>
</ul>
</nav>
</div> <!-- /header -->
I have a function in the php file so I could make a class navmenu.class and make a method of this function and put the frist 2 lines in the class as a property and the last html part becomes a view right?
but is this class a model or is it a controler?
here is a screenshot of my current file structure:
Is it worth to split this small code into MVC?
This file is now put in the subfolder includes because I am including the nav menu in my script.
Models are for database, View to render html, Controllers to handle a request
Beside that you can have helper classes and core classes
Follow some tutorials on how to create a mvc.
https://www.youtube.com/watch?v=OsCTzGASImQ&list=PLfdtiltiRHWGXVHXX09fxXDi-DqInchFD
https://www.youtube.com/watch?v=rkaLJrYnpOM&list=PLFPkAJFH7I0keB1qpWk5qVVUYdNLTEUs3
I followed the one of Curtis Parham he explained everything very well. After completing his tutorial I modified his framework alot by including composer, twig and changed the routing on how to handle variables and multiple languageses.

CSS property not showing up for active navigation element using PHP

I know the title is kinda vague, sorry. I could'nt express it easily in one statement. So, anyways.
I'm currently working on my Personal Website. I wanted to have the nav element for the current page to be highlighted a certain color. To do so I wanted to use this:
<a href="index.php" class="nav-item" <?php if($current =='home'){echo 'class = "active"';}?>>Home</a>
and the same thing for the other pages. However, "class = "active" is not even being applied to the a tag. My Index pages contains this:
$current = "home";
and the css for the active class looks like this:
.active{
background-color: #fdfdfd !important;
color: #3D1c4B;
}
I seriously don't know what I'm doing wrong. Is there something I'm missing or is this just something I can't do with an a element?
Here is what the nav looks like
You can't have multiple class tags, you already have one you can't add a second. Try this:
Home
Your HTML is invalid, and would render: <a href="index.php" class="nav-item" class="active"> - which has two class attributes (not legal). Modify your PHP like below, to put both classes in the same attribute:
Home
You are writing class attribute two times in <a> tag
<a href="index.php" class="nav-item" <?php if($current =='home'){echo 'class = "active"';}?>>Home</a>
it should be like
<a href="index.php" class="nav-item <?php if($current =='home'){echo
' active'; }?>" >Home</a>
Get the class in a variable and use it like this:
<?php
$className = '';
if($current =='home'){
$className = 'active';
echo "<a href='index.php' class='nav-item " . $className . "'>Home</a>";
?>
First, I see your using:
<a href="index.php" class="nav-item" <?php if ( $current =='home' ) echo 'class = "active"'; ?> >Home</a>
is wrong, since you will get class="nav-item" class="active", - instead you need to write:
<a class="nav-item <?php if ( $current =='home') echo 'active'; ?>" href="index.php">Home</a>
your code will add 2 classes so that only one class will be applied to your tag.
try like this.
Home

How to embed PHP inside a text file to include later?

I have a simple template created through my ClassPage. The class gets called and reads html code from a text file. Inside the navigation I want to echo a PHP variable but all I am getting is the embedded php commented out on the browser's console?
I'm thinking perhaps the file that gets read isn't being processed by the server and that is why the php isn't being processed? Or I'm missing something really simple?
Heres the code:
ClassPage -> getBody which gets the file called "superNav.txt". The string that gets returned is put together with the needed HTML head tags etc then outputted.
private function getBody() {
$text = "";
if ($this->specialUser) {
$text .= file_get_contents("Template/superNav.txt");
} else {
$text .= file_get_contents("Template/userNav.txt");
}
return $text;
}
This is the Text File:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span id="glyph" class="glyphicon glyphicon-th-large"></span></button>
<a class="navbar-brand" href="#"><img alt="brand" id="brandLogo" src="Images/logo.png"></a>
<p id="navbarText" class="navbar-text">Webmin</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Rota</li>
<li>Rota Admin</li>
<li>User Admin</li>
<li>Archive</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span><?php echo $user->getName(); ?></li>
<li><span class="glyphicon glyphicon-log-out"></span> Log Out</li>
</ul>
</div>
</div>
</nav>
This is the line that is giving me an issue:
<li><span class="glyphicon glyphicon-user"></span><?php echo $user->getName(); ?></li>
The php does not get shown to screen, the browsers console shows that the code is commented.
Any help is welcomed. Thanks in advance!
For this first get the content from the .txt file and then do something like this :
$name = $user->getName();
$text = file_get_contents("Template/superNav.txt");
$text = str_replace('USERNAME', $name, $message);
$text$message = str_replace('logo_url', $base_url, $message);
and in your .txt file replace the php value with some Constants.
like this
<li><span class="glyphicon glyphicon-user"></span>USERNAME</li>
So here you can see we have replaced the value of USERNAME with dynamic value. Hope it helps!!!
file_get_contents does not execute php, as you have discovered.
Instead you can use output buffering and include.
You will also need to make sure $user is in scope for the getBody method as include inherets its scope from the calling block.
In this example i have used a made up method to illustrate that:
private function getBody()
{
//create local user variable somehow
$user = $this->getUser();
//start buffer
ob_start();
if ($this->specialUser) {
include "Template/superNav.txt";
} else {
include "Template/userNav.txt";
}
//return contents of buffer as string
return ob_get_clean();
}

LAMP Server not executing PHP scripts properly

I have a LAMP(Ubuntu) Server running on a physical machine. My goal is to host a website on the server. Right now, I have all my files in my /var/www/html directory and inside certain HTML files, I run PHP scripts to check if the user is logged in or not such as below:
<div class="collapse navbar-collapse" id = "navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active link-nav">Home</li>
<li class="link-nav">Categories</li>
<li class="link-nav">About</li>
<!-- This part -->
<?php
if($_SESSION['loggedin'] != 1){
echo '<li class="link-nav">
Log In
</li>
<li class="link-nav">
Register
</li>';
}else{
echo "<li class = 'link-nav'> Log Out ";
}
?>
<!-- End of PHP -->
</ul>
</div>
When I open up to my server in the browser, all I get is this:
The $_SESSION['loggedin'] variable has already been set but both the Login and Logout buttons show. Also, the text in between the two sets of strings is showing on the page.
When I display this on my local computer using XAMPP, this doesn't happen.
Any ideas on how to fix this?
Thanks in advance!
This line is invalid. With proper error reporting on, you would see the error. When testing, it will help a lot to have error reporting turned on so you can see the helpful errors :)
echo "<li class = 'link-nav'> Log Out ";
You can not use the double quotes inside themselves without escaping them!
Instead write it like this:
echo '<li class="link-nav">Log Out';
See if that works.
Try this, It's much easier to work with code that has islands rather than everything being a PHP string(Also, take a look at http://www.Laravel.com and http://www.Laracasts.com):
<?php if($_SESSION['loggedin'] != 1){ ?>
<li class="link-nav">
Log In
</li>
<li class="link-nav">
Register
</li>
<?php }else{ ?>
<li class="link-nav"> Log Out
<?php } ?>

How to set current page "active" in php

Hi I have a menu on my site on each page, I want to put it in it's own menu.php file but i'm not sure how to set the class="active" for whatever page i'm on.
Here is my code: please help me
menu.php:
<li class=" has-sub">
<a class="" href="javascript:;"><i class=" icon-time"></i> Zeiten<span class="arrow"></span></a>
<ul class="sub">
<li><a class="" href="offnungszeiten.php">Öffnungszeiten</a></li>
<li><a class="" href="sauna.php">Sauna</a></li>
<li><a class="" href="frauensauna.php">Frauensauna</a></li>
<li class=""><a class="" href="custom.php">Beauty Lounge</a></li>
<li><a class="" href="feiertage.php">Feiertage</a></li>
</ul>
</li>
this method gets the current page using php which will pass a word in this case active and places it inside the class parameter to set the page active.
<?php
function active($currect_page){
$url_array = explode('/', $_SERVER['REQUEST_URI']) ;
$url = end($url_array);
if($currect_page == $url){
echo 'active'; //class name in css
}
}
?>
<ul>
<li><a class="<?php active('page1.php');?>" href="http://localhost/page1.php">page1</a></li>
<li><a class="<?php active('page2.php');?>" href="http://localhost/page2.php">page2</a></li>
<li><a class="<?php active('page3.php');?>" href="http://localhost/page3.php">page3</a></li>
<li><a class="<?php active('page4.php');?>" href="http://localhost/page4.php">page4</a></li>
</ul>
It would be easier if you would build an array of pages in your script and passed it to the view file along with the currently active page:
//index.php or controller
$pages = array();
$pages["offnungszeiten.php"] = "Öffnungszeiten";
$pages["sauna.php"] = "Sauna";
$pages["frauensauna.php"] = "Frauensauna";
$pages["custom.php"] = "Beauty Lounge";
$pages["feiertage.php"] = "Feiertage";
$activePage = "offnungszeiten.php";
//menu.php
<?php foreach($pages as $url=>$title):?>
<li>
<a <?php if($url === $activePage):?>class="active"<?php endif;?> href="<?php echo $url;?>">
<?php echo $title;?>
</a>
</li>
<?php endforeach;?>
With a templating engine like Smarty your menu.php would look even nicer:
//menu.php
{foreach $pages as $url=>$title}
<li>
<a {if $url === $activePage}class="active"{/if} href="{$url}">
{$title}
</a>
</li>
{/foreach}
Create a variable in each of your php file like :
$activePage = "sauna"; (different for each page)
then check that variable in your html page like this
<?php if ($activePage =="sauna") {?>
class="active" <?php } ?>
Put all the below code in menu.php and everything will be taken care of.
// function to get the current page name
function PageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
$current_page = PageName();
Use the above to get the current page name then put this in your menu
<li><a class="<?php echo $current_page == 'offnungszeiten.php' ? 'active':NULL ?>" href="offnungszeiten.php">Öffnungszeiten</a></li>
<li><a class="<?php echo $current_page == 'sauna.php' ? 'active':NULL ?>" href="sauna.php">Sauna</a></li>
<li><a class="<?php echo $current_page == 'frauensauna.php' ? 'active':NULL ?>" href="frauensauna.php">Frauensauna</a></li>
<li><a class="<?php echo $current_page == 'custom.php' ? 'active':NULL ?>" href="custom.php">Beauty Lounge</a></li>
<li><a class="<?php echo $current_page == 'feiertage.php' ? 'active':NULL ?>" href="feiertage.php">Feiertage</a></li>
where active is the name of the class which will highlight your menu item
there is two things you can do.
first you can read the current filename of the php file you request by using $_SERVER['PHP_SELF'] or $_SERVER['REQUEST_URI'] or any other $_SERVER global variables that you can use to read your current page and compare it with the link's url, something like this
<a href="offnungszeiten.php" <?php if($_SERVER['PHP_SELF']=='offnungszeiten.php'){ ?>class="activatepage" <?php } ?> >
Öffnungszeiten
</a>
the second one is to create a variable that you can read globally that would store the current name of the current page, like this
<?php
$cur_page ="offnungszeiten"
?>
<a href="offnungszeiten.php" <?php if($cur_page=='offnungszeiten'){ ?>class="activatepage" <?php } ?> >
Öffnungszeiten
</a>
I have done it with php in this way,
function createTopNav($active)
{
$pages = array(
array(
'name'=>'Home',
'link'=>'index'
),
array(
'name'=>'Smartphone',
'link'=>'smartphone'
),
array(
'name'=>'Tablet',
'link'=>'tablet'
),
array(
'name'=>'About Us',
'link'=>'about'
),
array(
'name'=>'Contact Us',
'link'=>'contact'
)
);
$res = "<ul>";
$activePage = "";
foreach($pages as $key=>$val)
{
if($val['link']==$active)
{
$res.= "<li><a href='".$val['link']."' class='active' >".$val['name']."</a></li>";
}
else
{
$res.= "<li><a href='".$val['link']."'>".$val['name']."</a></li>";
}
}
$res.="</ul>";
return $res;
}
And then to call this function
echo createTopNav("about");
and the output will be like this
<ul>
<li>Home</li>
<li>Smartphone</li>
<li>Tablet</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
I solved this using jQuery/javascript by running the code below each time my any page is loaded:
$(document).ready(function () {
//Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (e.g. ?RecordId=100) are removed from the URL
var CurrentUrl = window.location.origin+window.location.pathname;
//Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu
//Loop over each <a> element of the NavMenu container
$('#NavMenu a').each(function(Key,Value)
{
//Check if the current url
if(Value['href'] === CurrentUrl)
{
//We have a match, add the 'active' class to the parent item (li element).
$(Value).parent().addClass('active');
}
});
});
This implementation assumes your menu has the 'NavMenu' ID, and uses http://hostname/scriptname.php href attributes like so:
<ul id="NavMenu">
<li>Home</li>
<li>Smartphone</li>
<li>Tablet</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
Read the javascript comments to see what's going on. If you prefer to use a different href layout (like in your original example), you have to play with the CurrentUrl variable a bit to get it to use the same layout as your href attributes.
For me this was the easiest solution since I had an existing sites with a big menu and many pages, and wanted to avoid having to modify all pages. This allows me to throw in a piece javascript code in the header file (which was a central file already) which solves the problem for all existing pages.
A bit late on the ball, but I just had to solve this myself and ended up using this Javascript method, with a small modification. This has the advantage on not requiring many changes to the current code, just run the script and voila.
window.onload = activateCurrentLink;
function activateCurrentLink(){
var a = document.getElementsByTagName("A");
for(var i=0;i<a.length;i++)
if(a[i].href == window.location.href.split("#")[0])
a[i].className = 'activelink';
}
Send page name in query string and check it on every page by getting the variable.
Simplere solution:
Borrowing the code from asprin above;
Create a new file menu.php where you will store the one and only copy of the menu. In this file, you will create a function addMenu($pageName) that take a parameter as the page name and returns a string consisting of the menu after having added the current tag.
In your HTML code, you would include(menu.php) and then call the function addMenu with the current page name. So your code will look like this:
menu.php
<?php
function addMenu($pageName){
$menu =
'<ul>
<li><a href="Öffnungszeiten.php"' . ($pageName == "Öffnungszeiten" ? "class=\"current\"" : "") . '><span>Öffnungszeiten</span></a></li>
<li><a href="sauna.php"' . ($pageName == "Öffnungszeiten" ? "class=\"current\"" : "") . '><span>Sauna</span></a></li>
<li><a href="frauensauna.php"' . ($pageName == "Frauensauna" ? "class=\"current\"" : "") . '><span>Frauensauna</span></a></li>
<li><a href="custom.php" ' . ($pageName == "lounge" ? "class=\"current\"" : "") . '><span>Beauty Lounge</span></a></li>
<li><a href="Feiertage.php"' . ($pageName == "feiertage" ? "class=\"current\"" : "") . '><span>Feiertage</span></a></li>
</ul>';
return $menu;
}
?>
And in your HTML, say this:
<div id="menu">
<?php
include('menu.php');
echo addMenu("index");
echo $hello;
?>
</div>
This worked for me:
function active_page($script){
$actual = basename($_SERVER['PHP_SELF']);
if($script == $actual){
return 'active-page'; //class name in css
}
}
I have some simple example, see below:
<?php
function active($currect_page) {
$url = $_SERVER['REQUEST_URI'];
if($currect_page == $url){
echo 'active';
}
}
?>
<ul class="navbar-nav mr-auto">
<li class="nav-item <?php active('/');?>">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item <?php active('/other');?>">
<a class="nav-link" href="/other">Other page</a>
</li>
</ul>
Better late than never - I like to keep it simple, to be honest, especially if there's a ton of scripting and PHP going on.
I place this code on the top of each page to identify the page:
<?php
$current_page = 'home';
include 'header.php';
?>
Then your menu/navigation (mine is bootstrap 4) looks like this:
<ul class="navbar-nav mx-auto">
<li class="nav-item <?php if ($current_page=="home") {echo "active"; }?>">
<a class="nav-link" href="<?php echo SITEURL;?>/">Home</a>
</li>
<li class="nav-item <?php if ($current_page=="about") {echo "active"; }?>">
About
</li>
<li class="nav-item <?php if ($current_page=="store") {echo "active"; }?>">
Store
</li>
<li class="nav-item <?php if ($current_page=="news") {echo "active"; }?>">
News
</li>
<li class="nav-item <?php if ($current_page=="contact") {echo "active"; }?>">
Contact
</li>
</ul>
I'm not saying this is the optimal method, but it works for me and it's simple to implement.
adding this:<?= ($activePage == 'home') ? 'active':''; ?> to my link it works perfectly, I only can't make the child of a submenu working to make the parent active.
Assume you have a navbar with the following items:
<ul>
<li id="menu-item-home">HOME</li>
<li id="menu-item-services">SERVICES</li>
<li id="menu-item-about-us">ABOUT US</li>
<li id="menu-item-contact">CONTACT</li>
</ul>
Then, declare a javascript variable in each page as below:
<script>
<?php echo("var active = 'menu-item-home';"); ?>
</script>
The variable "active" is assigned with the corresponding item of each page.
Now, you can use this variable to highlight the active menu item as below.
$(window).ready(function(){$("#" + active).addClass("active");});
I have a similar issue with my web app menu.
I also have sub menus which do not appear as top level menu buttons.
My solution is as follows:
a) Partial php file with menu html and a little php function at the top that checks GET variables against the menu buttons.
I have two GET variables to check: the page and (if necessary) the menu_button.
b) Adding any new php page with a href links to either menu pages or sub menu pages.
The variable "menu_button" is optional and can be used to link to submenu php files.
Of course the security concerning GET variables should be considered.
From my point of view, this solution has less effort than having to maintain an array of pages or links somewhere.
You just use a get variable "menu_button" where you pass the top level menu button that should be marked visually in any link which targets your php file.
Code examples:
Partial menu.php (has to be included in every php file):
<?php
function active($page_link){
$menu_button = $_GET("menu_button") ?: $_GET("page"); // sets the menu button either to the given top level menu or it defaults to the page itself
if($menu_button === $page_link) return "active";
}
?>
<div>
<a href="?page=one" class="<?= active('one') ?>"Link one</a>
Link two
</div>
Any php file with links to sub menu file:
<div>
Link one
Link to sub menu page "three" of menu "two"
</div>
Works for me. Hope someone else can use this.
For making a dynamic active menu link I follow this method.
first, In the menu link, I always use the full address:
//HTML CODE
<ul class="menu">
<li>
Home
</li>
<li>
About us
</li>
<li>
Contact
</li>
</ul>
//Javacript Code
const menus = document.querySelectorAll('.menu li a');
menus.forEach((menu) => {
const currentLocation = window.location.href;
if (currentLocation === window.origin) {
menus[0].classList.add('active');
} else if (menu.href === currentLocation) {
menu.classList.add('active');
} else {
return;
}
});
and then I will use vanilla javascript code to do the rest
You can use
<?php
function active($current_page){
$page = $_GET['p'];
if(isset($page) && $page == $current_page){
echo 'active'; //this is class name in css
}
}
?>
<ul>
<li><a class="<?php active('page1');?>" href="?p=page1">page1</a></li>
<li><a class="<?php active('page2');?>" href="?p=page2">page2</a></li>
<li><a class="<?php active('page3');?>" href="?p=page3">page3</a></li>
<li><a class="<?php active('page4');?>" href="?p=page4">page4</a></li>
</ul>

Categories