Edited:
I am trying to use PHP include function to call "Navbar Header", "Navigation" and "Footer" section of my Bootstrap code, so that I do not have to make changes to all my HTML files when something changes in any of the above 3.
I am using Bootstrap 3.
Please assist me here, as I am not able to use the PHP functionality with Bootstrap 3. Thanks..
Below is my code:
--> index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<?php include("includes/header.html");?>
<?php include("includes/navigation.html");?>
<div class="container-fluid">
<!-- START Page Heading -->
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-10">
<a><h1 class="page-header">Home </h1></a>
<ol class="breadcrumb">
<li class="active">
<i class="glyphicon glyphicon-home"></i> Home
</li>
</ol>
<div class="container">
<div class="jumbotron text-center">
<h1>Sample Website</h1>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Page Heading -->
</div>
</div>
<?php include("includes/footer.html");?>
<!-- Script References -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
1) Navbar Header.html
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>Sample Website</strong></a>
</div>
</div>
</div>
2) Navigation.html
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<strong><i class="glyphicon glyphicon-home active"></i> HOME</strong>
<hr>
<ul class="nav nav-pills nav-stacked">
<li class="nav-header"></li>
<li><i class="glyphicon glyphicon-cloud"></i><strong> Overview</strong></li>
<li><i class="glyphicon glyphicon-picture"></i><strong> About</strong></li>
</ul>
<div class="clearfix"></div>
<hr>
<a><strong><i class="glyphicon glyphicon-user"></i> VIEW 1 </strong></a>
<hr>
<ul class="nav nav-stacked">
<li><a><i class="glyphicon glyphicon-list-alt"></i><strong> Type</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li class="dropdown-submenu">
<a tabindex="-1">Type1</a>
<ul class="dropdown-menu">
<li>Description</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<!-- <li role="menu" class="dropdown-header">Schema Type</li> -->
<li class="dropdown-submenu">
<a tabindex="-1">Inner view1</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>About</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1">Detail</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="detail1.html">Detail 1</a></li>
<li><a tabindex="-1" href="detail2.html">Detail 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1">Type2/a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Description</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1">Inner view 2</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="idetail1.html">Detail 1</a></li>
<li><a tabindex="-1" href="idetail2.html">Detail 2</a></li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</ul>
<hr>
</div>
</div>
3) Footer.html
<footer class="row">
<div class="container">
<div class="col-lg-4 col-lg-push-4 col-md-4 col-md-push-4 col-sm-4 col-sm-push-4 col-xs-12">
<div class="text-center">
<p>Copyright © 2015 <a href="http://www.banes.com" title="Banes">
<strong>Banes Ltd.</strong></a>
</p>
</div>
</div>
</div>
</footer>
You have too much duplication in your index.file. Code should only exist once. Look at your include lines and imagine the file being 'included' at that point...
Header.html
<html>
<head>
...tags...
</head>
<body>
Index.php
<?php include("includes/header.html");?>
<div class="container-fluid">
...stuff here..
</div>
<?php include("includes/footer.html");?>
Footer.html
<script>...</script>
<script>...</script>
</body>
</html>
You're including a whole page in every file.
The header footer and navigation files should only contain the parts of the html you want to include
So you have 4 head elements each calling in bootstrap.
This is never going to play nicely. Delete all of the tags in the partial files that do not contain markup specific to that page, and have one page with html>head>body structure that includes the parts of the other files
Related
I am currently converting a static html site into wordpress and I'm having trouble with making the navigation work... I'm totally lost. I feel like I'm missing something totally obvious. (I'm still quite new to this)
Here's my code; (my html and wordpress are all in the header.php, I know I can get rid of my html once it's working)
<?php
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('template_directory');?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php bloginfo('template_directory');?>/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Waire<span class="full-stop">.</span></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">Articles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="food.html">Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
</li>
<!---
<li class="nav-item">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</li>-->
</ul>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel carousel-header slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<h3 class="header-title">Leeds<span class="full-stop">.</span></h3>
<div class="weather"><img src="<?php echo get_bloginfo('template_url')?>/imgs/weather.png" alt="weather" height="86" width="483"></div>
<div class="carousel-item carousel-item-height active" style="background-image: url('<?php echo get_bloginfo('template_url')?>/imgs/header1.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item carousel-item-height" style="background-image: url('<?php echo get_bloginfo('template_url')?>/imgs/header1.2.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item carousel-item-height" style="background-image: url('<?php echo get_bloginfo('template_url')?>/imgs/header1.3.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<nav id="site-navigation" class="main-navigation navbar navbar-expand-lg navbar-dark">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'tender-loving-gut' ); ?></button>
<div class="container">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</div>
</nav><!-- #site-navigation -->
<!-- Bootstrap core JavaScript -->
<script src="<?php bloginfo('template_directory');?>/js/main.js"></script>
<script src="<?php bloginfo('template_directory');?>/vendor/jquery/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content" class="site-content">
I have html code and it is working fine, but when I use "include" file.php bootstrap nav does not work. The user menu - dropdown-menu is not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DASHBOARD</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DASHBOARD</a>
<ul class="user-menu">
<li class="dropdown pull-right">
User <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> Profile</li>
<li><svg class="glyph stroked gear"><use xlink:href="#stroked-gear"></use></svg> Settings</li>
<li><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel"></use></svg> Logout</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="col-sm-9 col-sm-offset-1 col-lg-10 col-lg-offset-1 main">
<div class="row">
<ol class="breadcrumb">
<li><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></li>
<li class="active">HOME</li>
</ol>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">HOME</h1>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<h4>New Orders</h4>
<div class="easypiechart" id="easypiechart-blue" data-percent="92" ><span class="percent">92%</span>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div> <!--/.main-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/chart-data.js"></script>
<script src="js/easypiechart.js"></script>
<script src="js/easypiechart-data.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
</body>
</html>
I want to add include php file, in the "panel-body easypiechart-panel",instead of New Orders.
<div class="panel-body easypiechart-panel">
<?php include 'status/total_status.php'?>
</div>
Thanks in advance.
I am trying to create a simple cms, with the ability to allow users to change the body background colour when a img is clicked, however I am unable to get the background colour to change? I am using php and GET variables to pass colour id info and sessions to save user input. I keep getting this error: "Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/CMS/index.php:1) in /Applications/MAMP/htdocs/CMS/header.php on line 2" yet nothing is sent before session start? And how can I make my css body background colour change depending on which image is clicked? Can someone please shed some wisdom?
thanks in advance
The code:
<?php
session_start();
if(isset($_GET['colour'])) {
$colour = $_GET['colour'];
$_SESSION['colour'] = $colour;
}
$colour_session = $_SESSION['colour'];
echo "bgcolour = $colour_session";
?>
<!DOCTYPE html>
<html>
<head>
<title>CMS</title>
<meta charset="UTF-8">
<link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'/>
<link type='text/css' rel='stylesheet' href='css/main.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span> CMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> User</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-user-plus"></i> Admin </li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="conatiner-fluid">
<div class="col-md-12">
<div class="col-md-4 col-md-offset-4 text-center bgColour">
<p>Choose Background Colour:</p>
<img src="images/grey.jpg">
<img src="images/white.jpg">
<img src="images/pink.jpg">
<img src="images/blue.jpg">
<img src="images/purple.jpg">
<img src="images/green.jpg">
<img src="images/yellow.jpg">
<img src="images/orange.jpg">
<img src="images/red.jpg">
</div>
</div>
</div>
**body and html tags are closed by 'require 'footer.php'
<body bgcolor='<?php echo $colour_session; ?>'>
just add this in your code to set the bgcolor of body
Here is the code, I am trying to add a dropdown for login. Here is the header:
<head>
<title>Forms Generator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css"
href="<?php echo $path . 'css/main.css'; ?>" />
</head>
<body>
<div id="page">
<header class="navbar-inverse" role="banner">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Forms Generator</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="active">Create Form<span class="sr-only">(current)</span></li>
<li class="active">View Surveys<span class="sr-only">(current)</span></li>
<li class="active">View Statistics<span class="sr-only">(current)</span></li>
</ul>
<!-- Working on dropdown here -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<!-- END DROPDOWN WORK-->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</header>
<p>Interactive Forms Generation</p>
<p>Enter links/buttons to create survey/take survey, etc here.</p>
</div>
</div>
Here's the code for the footer:
<div id="footer">
<p class="copyright">
© <?php echo date("Y"); ?>
</p>
</div>
</div>
</div><!-- end page -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
So basically the dropdown that I'm attempting to add to the end of the navbar isn't dropping down. Why is it not doing so?
EDIT: I am running XAMPP and using Chrome.
Check your html document at https://validator.w3.org/nu/
Take a look at the (error) console of your browser
try it with
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
just put your jquery file before bootstrap.js file
<script src="script/jquery-3.2.0.js" type="text/javascript"></script>
<script src="script/bootstrap.js" type="text/javascript"></script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've made a login/signup system using php. After logging in I want to to show a mesaage to users like, welcome $username. But i'm facing some problem. Here's my code:
<?php
session_start();
$username = $_SESSION['username'];
$password = $_SESSION['password'];
if(!$username && !$password)
{
header( 'Location: login.php' ) ;
}
else
{
echo '';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | Incredible Saurav</title>
<link rel="stylesheet" href="css/responsiveslides.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/ico/1.png">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/responsiveslides.js"></script>
</head>
<body>
<header id="header" class="entry-header">
<nav class="navbar1 navbar-inverse" role="banner" style="border-top: 5px solid #065157;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Faculties</li>
<li>Picture Gallery</li>
<li>Contact</li>
<li><?php echo Welcome $username; ?></li>
</ul>
</div>
</div>
</nav>
<div class="top-bar" style="border-bottom: 5px solid #065157;" >
<div class="container" style="margin-top:90px;">
<div class="row">
<div class="col-sm-6 col-xs-4">
<div class="top-number"><p><i class="fa fa-phone-square"></i> +91 9097678160</p></div>
</div>
<div class="">
<div class="col-sm-6 col-xs-8">
<div class="social">
<ul class="social-share">
<li class="saurav"><i class="fa fa-facebook"></i></li>
<li class="saurav"><i class="fa fa-twitter"></i></li>
<li class="saurav"><i class="fa fa-instagram"></i></li>
<li class="saurav"><i class="fa fa-google-plus"></i></li>
<li class="saurav"><i class="fa fa-skype" title="Skype"></i></li>
</ul>
<div class="search">
<form role="form">
<i class="fa fa-search"></i>
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<ul class="rslides">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<section id="conatcat-info">
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="media contact-info">
<div class="pull-left">
<i class="fa fa-phone"></i>
</div>
<div class="media-body">
<h2>Have a question question about our college?</h2>
<p>Call Us : +91-909-7678-160</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer" class="midnight-blue" style="border-bottom: 5px solid #065157;" >
<div class="container">
<div class="container">
<center>
<ul class="copyright">
<li>© Copyright Accurate College</li>
<li>Designed by <a title="Incredible Saurav" href="http://www.facebook.com/incredible.100rav">Rahul Gautam</a></li>
</ul>
</div>
</footer>
</body>
</html>
Please point out my mistake and correct it. Thank you !!
The following correction in your HTML:
<li><?php echo "Welcome, ".$_SESSION['username']; ?></li>
By the way, the else of you conditional serves absolutely no purpose, so remove it for clarity, brevity and correctness.
Regarding this code:
<li><?php echo Welcome $username; ?></li>
As it stands, the 'Welcome' will be understood by PHP as a constant that does not exist, but without concatenating it to the variable after, it will just throw a syntax error. I recommend using an IDE (e.g. Netbeans) so errors of this kind can be seen without needing to run the code.
Do this instead:
<li>
Welcome
<a href="login.php"
><?php echo htmlspecialchars($username, ENT_HTML5) ?></a>
</li>
I've made the fixed string part of the HTML - there is no value adding it to the echo statement.
I've also wrapped the output variable in a function to encode any angle brackets, to filter out any XSS attempts on your site. Remember that user input can be harmful, and needs to be treated with caution.