Changing Tabs (and URL) with PHP/Ajax - php

I'm not really sure what the correct term is for this, but I guess it's tabbed URLs or something similar. Anyway, I see it a lot on the web and I'm tying to figure out how the effect is aheived.
A good example are the tabs found when editing your Github profile at
https://github.com/settings/profile
Let's say we have menu with some tabs:
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
and then a content div:
<div class="tab-content">
</div>
From what I can see, when the respective tab link is clicked, an ajax request is sent out to fetch the data which then gets inserted into the content area. Which is pretty much standard from what I understand.
However, the part I don't get is how when the url is loaded in a new tab or window, it goes straight to the respective tab.
For example, if you visit:
https://github.com/settings/notifications
you'll go straight to the notifications tab.
I'm trying to implement a similar tab setup with PHP. The ajax part isn't really an issue, I can get that working quite easily. However, getting the url to load the respective tab on a fresh request, is what I'm stuck at.
The way I was thinking of doing it is simply checking the URL and then loading the tab, like this:
<div class="tab-content">
<?php
$URL = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
if ($URL = "http://example.com/tabs/tab1") {
echo "this is tab1 content";
}
else if ($URL = "http://example.com/tabs/tab2") {
echo "this is tab2 content";
}
// etc etc
?>
</div>
But if I have 20 tabs, I don't really want to put 20 if/else statements in my page. The only other way I was thinking is placing the URL values in an array, and looping through it. Is there a better way of setting up a tab system like this with PHP?

You can also put your data into database and then query database. But without using database you can also for example put tab content into files and do something like this:
<?php
$URL = $_SERVER['REQUEST_URI'];
$file = 'path_with_content' . DIRECTORY SEPARATOR . str_replace('/' , DIRECTORY_SEPARATOR, $URL).'.php';
if (file_exists($file)) {
echo file_get_contents($file);
}
So you simple create directory path_with_content/tabs and for each tab you create file inside this directory with the same name as last part as last part of your url (tab1, tab2 and so on) with .php extension (so files should have names tab1.php, tab2.php and so on).

you can use an array such as
$navigation = Array('Home' => 'index.php', 'About' => 'about.php');
then if you make an global variable like something as: $curPage
and you load the array
for each loop
and then check the $curPage is looped and make it another font colour
the $curPage will be 'Home' or 'About' then show it with another font or bg colour
this I my paste about it - it's not the best one yet it is working - forgot to put out the numbering xD - http://pastebin.com/H1XcUiiE
TIP: Instead of putting it up in ever page you can create a navigation.php file
and include it into the area of the navigation bar all the time.

Related

loading entire page sections based on scroll position

I am developing a one page website and I would like to load in each section when the window scrolls to that specific section. Now I know you can lazyload images but I want to lazy load the entire section. The only way I think it would be possible is if I put my html code into jQuery then load it in when the scroll position is reached. But I would prefer not to do this.
This is a wordpress website and I am loading each page through into the homepage using
<?php require_once(''); ?>
so my page is layed out something like this
<?php get_header(); ?>
<?php require_once('section_one.php'); ?>
<?php require_once('section_two.php'); ?>
<?php get_footer(); ?>
So could I use php to only load these sections in when the scroll position is reached or is there a better way with jQuery? Also I want web crawlers etc to still be able to see my whole page. So if jQuery is disabled I want the full page to show. Any guidance or tutorials on this would be very helpful thanks
Create a method in controller that will render a sub-view based on the section number and return you the HTML. Or in your case create a file that will accept a GET request with section number, and render the output of needed section file as its done in most PHP frameworks (see below). That way you can make AJAX request when scrolling position is of necessary value, and insert returned HTML into the page.
<?php
$section_number = $_GET['section'];
ob_start();
if(file_exists(__DIR__ . 'section_' . $section_number . '.php')) {
include(__DIR__ . 'section_' . $section_number . '.php');
$var=ob_get_contents();
ob_end_clean();
echo $var;
}
echo '';
Render PHP file into string variable
May I suggest that you load the content and hide it with CSS instead? And then make a scroll spy solution to display the content when the section enters viewport? Why force someone to wait while the contents loads?

Would like a different nav menu on one specific page... not working

Okay, first off, I am not well-versed in JS or PHP. I can usually change an existing script around to do what I'd like, but not write something from scratch. Any URLs I mention in this for examples are made-up.
With that in mind, I am designing a page using a template that has CSS, PHP, and JS all of which I have really modified. Each page has a header, a nav bar, and a footer that are called with an include statement. I understand that part. However, on ONE of the pages, I would like to have a different nav-bar, and it won't change.
What I have noticed: The JS seems to change the clicked URLs from, say http://www.example.com/test.php to http://www.example.com/#test.php
What would be the purpose for that? Also... if I manually TAKE OUT the hashtag in the URL on the page that I want the new nav-bar, the new nav-bar shows! However, then if I switch pages, it'll make the end of the URL like ...test.php#newpage.php
So I either need to figure out how to modify this to NOT put the hashtag in the URL (but if there is a compelling reason for it, of course, it can stay), OR how to get that one page to show the alternate nav-bar. The alternate nav-bar is a table of contents, so the html has hashtags in it to direct users to specific parts of the page... could those hashtags in the html be conflicting somehow and that is why it won't show up, or??? GAH!
Any help would be appreciated.
Okay, here is part of the javascript... it is the only section where it looks like it is referring to # in the URL:
var $fadeWrapper = $("#fade-wrapper"),
$allNav = $("#main-nav a"),
$allListItems = $("#main-nav li"),
url = '',
liClass = '',
hash = window.location.hash,
$ajaxLoader = $("#ajax-loader");
$("body").attr("id", "");
if (hash) {
hash = hash.substring(1);
liClass = hash.substring(0,hash.length-4);
url = hash + " #inside-content";
$fadeWrapper.load(url);
$("." + liClass).addClass("active");
} else {
$("#main-nav li:first").addClass("active");
}
*UPDATE: I have decided to just remove the javascript altogether. In doing some reading, I have come to the conclusion that the hashtag is there just so the script can tell which page is active, in order for the CSS to highlight one of the items in the navbar. It also has something to do with the animated gif that would show when you navigate pages. Neither one of those items are important enough for me to pull more of my hair out trying to figure out this stuff :D Thank you for your suggestions, though! *
The hash tags are added most likely because the links you are clicking have an href value of #.
Couldn't you just create a new header file (if that is where the navbar code is), modify the navbar how you want in that header file, and include the new file instead of the current header on the page where you want the different navbar?

Basic navigation with PHP

We have a school project with HTML/PHP, and we need to create a web page. The problem is there can only be a index (or a main page), the rest of them are small portions of code in other .html documents.
I need to find a way to create a function (I think...) so when I click on one of the links, this will change the <body id>, the <title>, and will load a different content in a <div> (the small portion of code).
Resuming: there are 5 categories, when clicked, each one of them should change the <body id> attribute, the <title>, and load a different .html page in the <div>. I'm sorry if some of you find this offensively lame, but I really need some help with this.
Until now, this is what i have:
<?php
$id0="" . $id1; //default
$id1="home";
$id2="iso";
$id3="lm";
$id4="par";
$id5="itasir";
$id6="fh";
?>
<body id="<?php echo $id0; ?>">
Where $id1-6 should be the categories, and the id0 would be the counter or a pointer of the page that should be loaded. Ex. When I click on the "Par" link, $id0 would change to "" . $id4; and the body would load the id0 which contains id4 now... i think... That should be it.
Thanks...
A few things to read – learning is awesome, but of course just being given the code sucks.
<?php
$id0="" . $id1; //default
$id1="home";
$id2="iso";
$id3="lm";
$id4="par";
$id5="itasir";
$id6="fh";
?>
Would make much more sense as:
<?php
$id = array();
$id[0]="" . $id[1];
$id[1]="home";
$id[2]="iso";
$id[3]="lm";
$id[4]="par";
$id[5]="itasir";
$id[6]="fh";
?>
That way you can easily use numbers to get the one you need.
You are probably going to use variables in the URL using $_GET.
If the URL is http://www.example.com/index.php?page=1, then $_GET['page'] would be equal to 1.
That lets you write some PHP that does different things based on the URL.
You will then likely use file_get_contents (http://php.net/manual/en/function.file-get-contents.php) to load in the contents of the right file.
Easy!

Dynamic site, using include to get content in specific div , how?

I want to use php to easily maintain my website, but I simply can't figure out the language - I've found some tuts online, and some other questions here, but none help me.
I've divided my site into some .php files, header/footer and such - And using
works fine..
Now I want the content of my site, to update according to which menu I click on at my site.
http://dawtano.com/pp/
If I click on "about" I want the "Hello World" to open inside my content div, but I can't get the right php code to do it.
I think you should do this---
Note: This will only work if the CSS styling are on the current directory! ()
<div>
<?php
$html_page = implode('', file('http://dawtano.com/pp/'));
echo $html;
?>
</div>
Hope this helps!
well currently your links are taking you to a separate page entirely. So why not just code it so that your include file is specific to the page. i.e, on about.php, use something like
include 'about_content.php
in your contetnt div.
If you're looking for your content to load dynamically into the content div you'll need to look into using ajax to fetch the content pages.
One popular way to construct the site is to have a single php script which displays content based upon a $_GET variable like 'page' or 'content', and then make the link as:
'http://dawtano.com/pp/index.php?page=helloworldcontent'
Using this method, you would need to check if the variable ($_GET['page']) is set using isset(), and then make sure the string is safe... as anybody with a browser could just type in some mumbo-magic script and hijack your site:
'http://dawtano.com/pp/index.php?page=somecleaverlycraftedhax'
Once it exists and is safe, add the '.php' to the file name and include that file... if it exists! If it doesn't exist, then you will need some code to handle that, probably by displaying a 'File not Found' message, or redirecting home, or something.
I prefer not to do this because it is a pain to make safe, and I feel like it is pretty ugly. What I do instead is put all the header/footer/navbar/title bar scripts into seperate 'display' functions, and put them in another file.
Then include this file with the function definitions, and call all the 'display' functions to set up the page. So every php script in your site might look like:
<?php
include 'html_display_functions.php';
/* put lines here to parse $_GET and $_POST, session_start()/$_SESSION, etc... */
print_html_pre_content();
print '<p>Hello, world!</p>';
print_html_post_content();
?>
Since every script will have this structure, you can just create a template file once. When you want to create a new page for your site, copy the template, rename the copy to the php filename you want, and add content between the two print functions.
You also keep the ability to modify the header/footer/navbar/title bar for the whole site in a central location, namely the included file with the functions.
You might be looking for some sort of Template Engine which allows you to create your pages out of variable parts. You could have a look at TBS, which is more or less what is suggested by the name. But there is a whole lot more engines out there which could do the job.
If that's already too much over the top, maybe Apache SSI (Server Side Includes) are a try for you.
A little suggestion from my side, I am often using Apaches mod_rewrite in connection with a single controller.php file. Apaches mod_rewrite will then send all request to the controller.php which will fetch the appropriate page parts for the requested page using TBS and return the respective page. So you have the controll of the page in one location only.
To your original question about.php could look like:
<?php
include('header.php');
?>
// original page content as html for about.php
// assuming header ends with the starting div <div> where you like the content to appear
// and footer starts with the closing div </div>
// if you need variable content here, simply use <?php echo $your_variable ?>
<?php
include('footer.php');
?>
The best way would be to use a switch statement:
http://php.net/manual/en/control-structures.switch.php
Something like this:
<?php
include("header.php");
$page = $_GET['page'];
switch($page)
{
case "about":
include "about.php";
break;
case "faq":
include "faq.php";
break;
case "help":
include "help.php";
break;
default:
include "home.php";
}
include("footer.php);
?>
Then just make all of your links look like this:
http://www.example.com/index.php?page=home
Just replace home with the correct page.

use common template for all pages of website

ok, the title did not make much sense but this is what i am planning to do. I have designed a template for my website, with head body and div for specific stuff and everything. The website consists of header file, footer file, right-side column, header dropdown menu and a main body which would be present beneath the header dropdown menu, to the left of the right-side column, and above the footer. Right now there is some content is this main body area. What i am trying to achieve is that whenever any link is clicked on any of the other parts of the webpage, i want that content to be displayed in this main body. Right now i am copying this template to each and every page, but I want to keep this standard template as index.php and then replace main body content based on the link clicked. This is a php based website. Are there any examples where i can see how this can be achieved? or is there any standard procedure to do this. Please guide me, Thanks.
Here's a very simple way to do this:
index.php
<?php
function putPage($page) {
// put a list of allowed pages here
$allowed = array('page1', 'page2');
$page = trim($page);
$page = (in_array($page, $allowed)) ? $page : 'home';
echo #file_get_contents('.\html\\' . $page . '.html');
}
?>
<html>
<head>
<title>Title</title>
<!-- put stylesheets, js files, etc. here -->
</head>
<body>
<!-- you can have a nav bar or something here -->
<div class="navbar">
Page 1 Page 2
</div>
<?php putPage($_GET['page']); ?>
<!-- put a footer here -->
</body>
</html>
Then just put .html pages with the contents in an html subfolder.
The script will fetch them and insert them in the body.
There are a few ways you can achieve this. Off hand the two obvious ones I would say are:
Ajax to obtain content with event handlers attached to links/buttons/menus that produce maincontent specific to the request.
This requires server and client side scripting to achieve.
w3 ajax
Or alternatively use mod_rewrite with apache to determine what content to load in index.php page. For example with mod rewrite you may have a link http://www.site.com/subject/content/item# as a link structure. This could translate to www.site.com/index.php?subject=&content=&id= And these GET values would allow you to determine what to display in main content area.
This requires server side scripting and configuration of apache or (any web server with similar functionality to mod_rewrite).
mod_rewrite - apache
I use this:
<?php
$pag = array(1 => 'Home.php', 3 => '2.php');
echo require $pag[(int)#$_GET['p'] | 1];
?>
This is called either a Template View as far as you build your link specific HTML completely in PHP. You create a page layout template containing some wildcards. You load the template into a string and use string replacements or XML functions (more fancy but only suggestive if transformation is more complex).
Otherwise it is called Two Step View where you create the page layout template (as above) and a specific template for the links. Now first load the link specific template, put your dynamic content into (same techniques as above), load the page layout template and put the previous transformed specific template into.

Categories