dropdown bootstrap menu is not getting populated on webpage - php

I have a header file where I am trying to include a bootstrap dropdown which will have the user id and two more options in the dropdown. In the header file I have created a new div for dropdown and and linked it a php file where I have the logic for populating the user id information for dropdown.
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="js/bootstrap.js"</script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="logo" src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>DBA Factory</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
</ul>
</div>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</div>
</div>
</div>
</body>
<script>
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
</script>
userlogin.php
if ($loginid!="")
{
echo "<a id=\"userlogin\" role=\"button\" data-toggle=\"dropdown\" href=\"#\">" .$loginid. "<span class=\"caret\"></span></a>";
//echo "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">" .$loginid. "</a></li>";
echo "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"userlogin\">";
echo "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Settings</a></li>";
echo "<li role=\"presentation\" class=\"divider\"></li>";
echo "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"http://profilelink\">My Profile</a></li>";
echo "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"https://logoutpage\"> Sign Out </a></li>";
echo "</ul>";
}
else
{
echo "<a id=\"userlogin\" role=\"button\" data-toggle=\"dropdown\" href=\"#\"> User <span class=\"caret\"></span></a>";
echo "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"userlogin\">";
echo "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"https://reloginpage\"> Sign In </a></li>";
echo "</ul>";
}
I am able to get the userid on the main login page. The dropdown works fine for me on jsfiddle but not on the concerned page. When I debug with Firebug. I see the tag not highlighted but the tag i.e. userid highlighted. Can this be a problem?
Can someone please let me know what is the problem here? How do i proceed solving this and debugging?


Make sure to include <?php include "userlogin.php"; ?> in the <body> of your document. You can't output divs and lists in your <head>.
It's also good practice to include all the JS libraries e.t.c right at the END of your body (directly before the </body> tag). Like that the rendering of the site doesn't get blocked.
Edit:
#rond Just in case you haven't figured it out yet, I created a gist (not tested) how this should look -> https://gist.github.com/sidneywidmer/8839857

Related

Rendering another layout inside index.php

I am following this Link to understand the basic framework of PHP Web app but I am not able to understand how can I switch back and forth to the different layouts (Articles, Portfolio) through navigation bar?

All different layout must be like index.php.
Image you have articles.php and portfolio.php. There content would be like:
Articles.php:
<?php
// load up your config file
require_once("/path/to/resources/config.php");
require_once(TEMPLATES_PATH . "/header.php");
?>
<div id="container">
<div id="content">
<!-- Your article content here!!! -->
</div>
<?php
require_once(TEMPLATES_PATH . "/rightPanel.php");
?>
</div>
<?php
require_once(TEMPLATES_PATH . "/footer.php");
?>
and portfolio.php:
<?php
// load up your config file
require_once("/path/to/resources/config.php");
require_once(TEMPLATES_PATH . "/header.php");
?>
<div id="container">
<div id="content">
<!-- Your portfolio content here!!! -->
</div>
<?php
require_once(TEMPLATES_PATH . "/rightPanel.php");
?>
</div>
<?php
require_once(TEMPLATES_PATH . "/footer.php");
?>
But everytime you add a new page, you must update your header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Site</title>
</head>
<body>
<div id="header">
<h1>Simple Site</h1>
<ul class="nav global">
<li>Home</li>
<li>Articles</li>
<li>Portfolio</li>
<li>Any other page</li>
</ul>
</div>

This is what actually I wanted to achieve
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Calculator</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
I am sending the page variable to the index and then it is rendering the layout accordingly through this way.
if (isset($_GET["page"])){
$page=$_GET["page"];
}
else {
$page = "home";
}
renderLayoutWithContentFile($page .".php", $variables);

Session with included header

I am having trouble getting this if statement to work using the included php file. I know that you have to test if the $_SESSION['name'] is set but for some reason its not letting me use this function in php to test if I set the session for the user.
Here is my Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css"/>
<link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>
<title></title>
</head>
<body>
<div id="wrapper">
<?php include 'includes/header.php';?>
<?php include 'includes/footer.php';?>
</div>
</body>
</html>
Here is my updated header.php
<?php
echo "<header>
<div class='social'>
<ul>
<li><a href='#'><img src='images/Social Media/Facebook.png'/></a></li>
<li><a href='#'><img src='images/Social Media/Twitter-Bird.png'/></a></li>
<li><a href='#'><img src='images/Social Media/Google-Plus.png'/></a></li>
<li><a href='#'><img src='images/Social Media/Linkedin.png'/></a></li>
</ul>
</div>
<div class='users'>";
if(isset($_SESSION['user']){
echo "
<ul>
<li><a href='profile.php'>Profile</a></li>
<li><a href='logout.php'>Logout</a></li>
</ul>";
} else{
echo "
<ul>
<li><a href='signin.php'>Sign-In</a></li>
<li><a href='register.php'>Register</a></li>
</ul>
</div>";
}
echo "</div>
<h1><a href='index.php'>CollegeConnection</a></h1>
</header>";
?>
Now I am getting this error
Parse error: syntax error, unexpected '{' in C:\xampp\htdocs\CollegeConnection\includes\header.php on line 13

This never will work.
Better way:
$content = "<div class='users'>";
if(isset($_SESSION['user']){
$content .= "<ul>";
$content .= "<li><a href='profile.php'>Profile</a></li>";
$content .= "<li><a href='logout.php'>Logout</a></li>";
$content .= "</ul>";
} else {
$content .= "<ul>";
$content .= "<li><a href='signin.php'>Sign-In</a></li>";
$content .= "<li><a href='register.php'>Register</a></li>";
$content .= "</ul>";
}
$content .= "</div>";
echo $content;

What you want to do is probably :
if(isset($_SESSION['user']){
echo "
<ul>
<li><a href='profile.php'>Profile</a></li>
<li><a href='logout.php'>Logout</a></li>
</ul>";
} else{
echo "
<ul>
<li><a href='signin.php'>Sign-In</a></li>
<li><a href='register.php'>Register</a></li>
</ul>
</div>";
}

Align image img with text in box

EDIT: This works now thanks to ' olly_uk '
EDIT2: It works now, but the alignment of the boxes is wrong. You can view a screenshot HERE. Without any text it will align perfectly with 2 boxes on each line at a perfect distance from each other, but with text it echo's it under each other. Why?
I am trying to echo a image, then in that image I want to echo text from a database.
Well it echo's the images (3, because I only have 3 product examples in the database), but the products are not aligned in the boxes. It comes under it. I have searched on google but could not find anything
Is it even possible to use e.g. margin-top to move the posted echo so I could align it in the box?
I want to use style or class in the PHP...
Example image: IMAGE
adding <style>p{...};h3{...};</style> worked
Code sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BOX</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
</head>
<?php
include 'includes/connection.php';
$query = "SELECT * FROM products";
$result = mysql_query($query);
?>
<body>
<div class="header navpos c1" id="nav">
<table summary="header" border="0">
<tr>
<td>
<ul>
<li class="home"></li>
</ul>
</td>
<td>
<ul>
<li class="about"></li>
</ul>
</td>
<td>
<ul>
<li class="contact"></li>
</ul>
</td>
<td>
<ul>
<li class="twitter"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
</ul>
</td>
<td>
<ul>
<li class="facebook"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0 />';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
</body>
</html>

i think you could achieve this using CSS. by having a negative top to bump the text over the top of the image. will try to give some example code when i get home.
check this out in the mean time, w3schools CSS-positioning
hope that helped
EDIT: added code to show what i mean
<html>
<head>
<title>text over image</title>
<style>
p {
position:relative;
top:-200px;
}
h2 {
position:relative;
top:-140px;
}
</style>
<head>
<body>
<img src="/images/office1.jpg" alt="demo image"/>
<h2>test text</h2>
<p>test desciption text</p>
<hr/>
<img src="/images/office1.jpg" alt="demo image"/>
<h2>test text</h2>
<p>test desciption text</p>
</body>

How to restrict users from entering a page without being logged on

i used sessions to log a user in so basically the user is stored in a session. what code do i use to stick into my following file so a user cannot access the page unless he/she is logged in.
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cook It Dot Com</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="wrap">
<div id="header"></div>
<div id="nav">
<ul id='menu'>
<li><a href="../usersloggedin/starters.php" >Starters</a></li>
<li><a href="../usersloggedin/mains.php" >Mains</a></li>
<li><a href="../usersloggedin/vegeterian.php" >Vegeterian</a></li>
<li>Desserts</li>
</ul>
<ul id="rightmenu">
<li> Logout</li>
</ul>
</div>
<div id="content">
<div id="info" align="justify"><FONT COLOR="white">
My Account -
<?php
session_start();
require_once '../database.php';
if (isset($_SESSION['myusername'])){
echo "Welcome ".$_SESSION['myusername'];
}
?>
<hr />
<br /> Upload Your Recipes<br /><br />
Upload Starter
Upload Mains
Upload Vegeterian
Upload Desserts
<br /><br />Edit/Delete Your Recipes<br/><br/>
Starter
Mains
Vegeterian
Desserts
</div></div>
<div id="footer"><div id="footerinfo" align="center">Copyright Cook It Dot Com 2011 - Designed By Jahedul Hussain - </a></div></div>
</div>
</body>
</html>
Thanks A LOT!

How about something like
if(!isset($_SESSION["user"]))
{
header("Location: homepage.php");
}
Basically, if there is not a user session redirect to the homepage.

The exit() or die() functions, or, if you want to show certain content, a simple if statement containing HTML. E.g.
<?php if($logged_in) { ?>
<p>You are logged in!</p>
<?php } else { ?>
<p>You're not logged in. Go to the login page.</p>
<?php } ?>

Can I reference an external JavaScript file in a PHP file?

I cannot seem to get this to work. I have a small JS file that switches banners depending on the time of day, but it seems that doing an external reference in my PHP file does not work. It works fine in an HTML page.
This is the code in the JavaScript file.
function getStylesheet() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 19) {
document.write("<img src='images/banner_day.jpg'>");
} else {
document.write("<img src='images/banner_night.jpg'>");
}
}
getStylesheet();
And here is the reference code I used to call the JavaScript file. Its in a PHP file.
<script src="http://beta.website.com/wp-content/themes/theme/scripts/banner.js"></script>
Everything on the PHP page shows up in the browser, except for the banner that I tried to call with the script.
Here is the entire PHP file code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<img src="http://beta.dfdfdf.com/wp-content/themes/asdafd/images/logo.png" />
</div>
<div id="shadow2"></div>
<div id="shadow1"></div>
<ul id="menu">
<li>df</li>
<li>df</li>
<li>fd df df</li>
<li>The asfdssd asdfds</li>
<li>sf</li>
<li>df</li>
<li>dfd</li>
</ul>
<div id="slogan"><big>"fasfdsads2005."</big></div>
<div id="loginDiv">Login Panel Here</div>
</div>
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script></div>
<div class="sidebar">
Sidebar Content<br />
<br /><br />
blah
blah
blah
</div>
<div class="content">
Main Content
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Cadsfadsfafdfsd.com All Rights Reserved</h3>
<p>dsafasdfdffadffadsdafsdfsadafsdfsadfas</p>
</div>
<div class="footer_column2">
<h3>More Links</h3>
<ul>
<li><a href="http://aadfsdfsdfa.
com">asfsdfa</a></li>
<li><a href="http://ItsNotch.
com">ItsNotch</a></li>
<li><a href="http://adfasfsfaf.
com">adsfasf</a></li>
<li><a href="http://twitter.
com/safs">Twitter</a></li>
<li><a href="https://www.facebook.com/group.php?gid=10215yy20340498">Facebook Fan Page
</a></li>
</ul>
</div>
<div class="footer_column2">
<h3>RSS</h3>
<ul>
<li>RSS Feed</li>
<li>What is RSS?</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Try changing your Javascript to this:
window.onload = function () {
// Uncomment this line to make sure the script is loading/running, then delete it
// alert('Hello, your Javascript is running');
// Declare variables
var currentTime, bannerDiv, newImg;
// Get currentTime
currentTime = new Date().getHours();
// Get 'banner' div
bannerDiv = document.getElementById('banner');
// Get create a new <img>
newImg = document.createElement('img');
// Assign a src="" attribute depending on the time
newImg.src = (currentTime > 7 && currentTime < 19) ? 'images/banner_day.jpg' : 'images/banner_night.jpg';
// add the new image to the document
bannerDiv.appendChild(newImg);
};
And put it in the <head> of the document, so change
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- ....... -->
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</div>
<!-- ....... -->
...to:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</head>
<body>
<!-- ....... -->
<div id="banner"></div>
<!-- ....... -->
If it still doesn't work, one of two things is happening:
Your javascript file is not actually at http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js so the script cannot be loaded/run. Uncomment the first line to confirm that the script is running.
Your banner images cannot be found at images/banner_night.jpg - make sure your relative paths are correct.

Have you made sure that you've actually got the <script></script> in your head? I certainly can't see it there (unless it is in <?php wp_head();>?).
Having attempted to navigate to http://beta.website.com/wp-content/themes/theme/scripts/banner.js it returns a 404, you'll need to fix this issue first.
Remember that javascript is client side, and all you want to do with php is spit out the tags somewhere for the browser to deal with.

It might be path problem.
What is you images (full) path?
What is you page (full) path?
As it is now it looks for images directory beneath your current page. Is this correct?

Categories