I have been searching for hours and probably because of my limited java knowledge, I'm a little but stuck..
I'm developing a website and I want to make things as easy to change as possible. I want the users to load the home page, and then by clicking on different buttons, the html "main content" of the page will change accordingly.
My reasoning for this is that I want to keep everything really clean and simple, so that if i want to update the Index page's format, I will only have to update one page..
Im assuming i need java for this..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prodigy Doo Design</title>
<link href="template/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include('template/header.php'); ?>
<div class="pad50px900wide"><!--Padding after headder--></div>
<?php include('template/nav.php'); ?>
<!--*****************************
********* BODY CONTENT***********
******************************-->
<div class="bodyContent"><?php include('text.html'); ?></div>
<!--*****************************
******END OF BODY CONTENT********
******************************-->
<?php include('template/footer.php'); ?>
</body>
The part that is very heavily indicated as the "BODY CONTENT" is the part i want to change.. i was thinking i could somehow say:
if home button click -> include 'home.html'
if about button click -> include 'about.html'
...
...
I just dont know how to put this into code..
you can view what i'v got so far here http://pddtest.webuda.com/ (if you didnt know, when you display the source code for the site in most browsers, it will load reference files as if they were all together in the first place, so it might be easier to understand what im trying to do)
Sorry if I'm a little vague, any help would be really apreciated, iv been crawling the interwebs for ages and i know this is probably fairly simple
I think what you're trying to achieve is a base template, where only the main content changes. Which means editing the base template (or page if you want to call it), edits all the other pages.
For this all you need is some basic PHP, where you send the file name in a GET variable with the response.
About
And wherever your includes are, you just add this variable to the php extension:
<?php include ($file.".php"); ?>
And of course don't forget to check if the variable is in the request.
This is a very basic way, and may not be safe but it's a good application of basic php.
Hope this will help.
You've already got PHP includes happening so that means you're cutting down on the amount up updating needing done to your pages and changing something in your header , footer etc will change it all throughout your site.
It would be better to simply have seperate pages i.e. index.php, about.php (your pages would have to be .php rather than .html as you are using php within the pages for your includes) and link to those pages just using regular links.
This method would also be better for SEO.
If you really wanted to do it the way you're originally talking about you could use the jQuery load() method.
More info here:
http://api.jquery.com/load/
I think you need to read up on the basics of what javascript, HTML and PHP are; this way you should be able to get this on your own and be a better developer.
Javascript is client-side scripting. What that means is that your javascript code is interpreted by the user's browser. This can cause issues when certain browsers interpret your javascript differently.
PHP is server-side scripting. It will behave the same no matter what browser your users are browsing from. As long as the same data is passed in, the functions will behave in a consistent manner. It sends HTML (or other data, but that's a bit more advanced) to the client.
HTML is markup. All it does is tell the browser how to display the data you've returned from the server.
Combine these three and you get a better idea of how they interact with each other. If something on your page can be "dynamic" in the background, but static (unchanging) once the user is viewing it, use PHP. If something relies on user input to change dynamically without the page refreshing, you're going to need to implement some sort of javascript.
There are multiple ways of achieving this,here are 3 simple ways without reloading index.html:
Using iFrames:
make index.html contain all your buttons and an iFrame called PageContent On click of every button call a JS function which simply
changes the src attribute of PageContent to the relevant html.
Using Client -Side JS:
make index.html contain all your buttons.ALso include the content of all the related pages into hidden DIVs. On click of each button hide all the other "option DIVS" and show only the relevant DIV.
Using AJAX:
make index.html contain all your buttons and an DIV called PageContent On click of every button call a JS function which simply
hits the server, gets the content for the page which is linked to the
button and renders it into the DIV using innerHTML.
Related
I haven't't created a webpage in a long time but I decided to create on now, and probably like everyone else I wanna learn the best way of doing this. But I've stumbled upon a little dilemma on how to process my pages. My first idea was to create one main page with all the CSS and everything needed, then 1 part of the site dedicated to each page's content. Then by using a page variable showing all the content for each site, example.
I have index.php as homepage, then visiting index.php?page=aboutme would make index.php include the aboutme.php in the part dedicated to each page's content. And only having text and some pictures etc in the aboutme.php. However I believe this will be a pain when people google my site and finds interest in the aboutme.php so they get linked to example, mypage.com/pages/aboutme.php and only sees the text and pictures but no CSS and not "the front page". The pros of this is of course that editing pages will be easy, I can create links etc in php loops by just checking contents of maps on my page.
The second example is that I take everything in my index.php above the part dedicated to page content, create a separate file for this, calling it top.php. Take all thee parts under the page and call it bottom.php. Then for each new page I create I include the top and the bottom parts. Making the link mypage.com/aboutme.php include the CSS and "the frontpage". Pros being that you actually can google subpages. This seems like the best idea to me, but like I said, I haven't created a lot of webpages lately and I've seen plenty use of both methods.
I've seen both types of webpages so I kinda wondered which one is the best practice?
I recommend just using php includes for the header, nav, and footer elements and then placing a class (home, about me, contact, etc.) on the body tag (for highlighting nav elements and such). This way the content is on separate pages and gives you more freedom, but saves you from having to retype all of the navigation and stuff each time.
Example:
<!DOCTYPE html>
<head>
<title>
Hello World
</title>
<meta name="description" content="Use this area to provide a description of this page.">
<?php include '_php/_includes/head.php'; ?>
</head>
<body class="home">
<?php include '_php/_includes/header.php'; ?>
<!--
Content Goes Here
Remember: 'div' elements should only be used for non-semantic styling purposes. Content should
be placed in either a 'section' or an 'article' tag.
-->
<?php include '_php/_includes/footer.php'; ?>
</body>
</html>
I would prefer the second option with top and bottom part php files. However, this can become complicate when you need to process context information within them.
For example imagine a top.php containing a table of contents including navigation and highlighting of the currently shown page. I guess, in this situation it would be more appropriate to use your first proposed approach. To alter the table of contents depending on your current page variable (e.g. 'aboutme').
I personally like a 3rd approach which is templating. Here are two options for PHP listed in order of my preference:
http://templatepower.codocad.com/manual/index.php
http://www.smarty.net/
Using template, I suggest you create a layout template which contains all the style and "header" and "footer" of your page. Then dynamically generate the "content" using one template per page. This allows you to use your url scheme of "index.php?page=aboutme". Also, by doing this you actually don't expose the bare naked content page to google.
I've found this is the most simple and maintainable way to build dynamic PHP pages with a shared header/footer.
I'm looking for a solution similar to the php include method, except like at html's iframe tag, if I click a hyperlink on the included php, I don't want the browser to navigate the whole tab to the new url, but only navigating the included page without getting the parent page change/disappear.
UPDATE:
okay, thanks for the quick answers, seems like I didn't ask the right question:) so here is some background info: the whole page itself is a single-file website using the exactly same javascript+hiddendivs page changing method than that you just wrote. my problem is: I'm using a flat-file CMS to keep my News page managable by people having no coding knowledge. so I made an own template for the CMS only showing the news themselves. Then I embedded the CMS's index.php to my parent index.php with php include method and it looks really well, except my problem is, when I click "earlier posts", it navigates to the CMS's index.php and loads earlier news in there. I'd like it to load earlier news without navigating anywhere, just like at html's iframe method. (I will use iframe if there is no other solution, but its configuration would be really complicated if I wanted to stay cross-browser supportive)
From the action described it sounds like what you're looking for is not actually PHP but client side JavaScript. AJAX can perform exactly what you describe and there's a very easy library called jQuery to help you do this, with minimal effort.
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.ajax/
You can bind your button to a JavaScript function which can then fire AJAX, grab the result of your other PHP page and display to the user in a .class or #id in the HTML, without leaving the current page.
If the behaviour your looking for is more advanced and "app like" you can also consider entire MVC JavaScript frameworks such as Backbone.js or Ember.js
The best thing you could possibly do is use jquery/javascript and manipulate a div (or the iframe) to where it navigates to X link when interacted with. You can actually change the url of an iframe using jquery and have it re-load to any url that you want. Reload an iframe with jQuery is a good example of how to do that. And for interacting with and digging through the contents of an iframe, instead of just changing the attributes of it, take a look at http://developer.vimeo.com/player/js-api.
Do keep in mind that the 2nd link is for a media player, BUT it still shows (and in a very simple way) how to interact well with iframes. You could use jquery to insert an id or class to the links in the page originally loaded into the iframe, then have the script on the 'parent page' navigate the iframe to one of the links when it's clicked. Just toy around with it some and have fun with it; a learning experience doesn't always have to be like a personal hell. I'll check back later and see how things turn out!
To do this you must understand what you are dealing with.
The *.php page loaded into user's browser is a processed and parsed page.
This parsing occurs at the server-side, and processed by the PHP processor on the server.
Now, after a *.php file is processed any interaction with it is lost. The only thing a user (client-side) sees is the result of this processing. Hence, to communicate with this page an information must be sent.
Normally, browsers send information on requesting a page. That is how the HTTP protocol works.
Since the user is the client-side, he must send relevant information (headers, variables, etc.) by the rules of the protocol. This means, a user must request the page and by this request the data will be sent.
AJAX technology allows you to open an HTTP request dynamically, on the background, while the page is still running with no need to refresh. It sends the relevant data according to protocol's convention and allows you to trigger a callback function to handle the answer when it arrives from the server.
Here you can find a beginner's tutorial, that will provide the necessary information for you to start.
P.S.
I would strongly recommend you not to use common external libraries like jQuery, node.js, Backbone.js etc. at the beginning. These libraries are tools that were created to simplify code writing for advanced developers. They may confuse you and mess up your programming logic and learning path.
Good luck!
Sounds like you want new content to appear on the page, without the user being directed to a new page. You can achieve this with jQuery. This is a quick example.
HTML:
<p>
Page 1 Page 2 Page 3
</p>
<div>
<div id="content1">
This is page 1.
</div>
<div id="content2">
This is page 2.
</div>
<div id="content3">
This is page 3.
</div>
</div>
jQuery:
$('#content2, #content3').hide();
$('a').click(function() {
var id = $(this).attr('id');
$('#content' + id).show().siblings().hide();
});
Live Example: http://jsfiddle.net/VxZKs/1
I want to add google analytics to our website and have read some conflicting info about where to put the script tag.
Google says to put it before the closing </ head> tag: http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
The way our site is designed, this would mean making an edit to every page. It's not that big of a deal if I need to do this, however, our site also uses header and footer include files.
These header & footer files have html code in them and fall just inside the <body> and </body> tags once the page is loaded.
It would be so much easier to just add the script to the header or the footer file. I'd just paste it in there once and it would be serving up the code on every page.
My question is: Can I do this? Can I move the script snippet inside footer include file even though it's not before the </head> tag as google suggests?
Am I asking for problems if i do it this way?
Thanks!!
You can.
The only difference is that if you put in the "footer" (i.e. just before the </body> tag), the browser will first load the DOM (i.e. everything up to the script tag) and then start to load the script. If you put it in the header, it will try to load the script either before it loads the rest of the DOM or while it is loading it (depending on the browser).
You might feel a difference only if you have a huge page with a lot of elements, but the only difference really would be that the script would be loaded later, so if someone aborts a load of the page, the script might not get executed.
Thus, Google recommends to place it in the <head> and if you can, you should, however you also can put it somewhere else if that makes life easier.
I would recommend saving the analytics code in a file and including it in your footer or header - Example: . I've recently run into some issues with Firefox and IE regarding the page load and analytics. It loads the page to the point where the analytics code is present and then the page hangs indefinitely. I can refresh the page and it loads fine, but for some reason it's happening and there's very little info out there regarding solutions. So, in my case I've included the code in the Footer or of the page at the bottom. This way, in regards to your site visitors, they'll likely not even notice because the rest of your page will load and once they click on a link it shouldn't hang again.
I'd say you can - but easier than that. Just place it in the footer and check if the Live-tracking finds visitors if it does you have the answer.
It's possible and is in fact the way many plugins do it (especially most WordPress plugins I've seen). In fact, putting all your JS at the end of the html (just before < /body>) is recommended if those are not required during the load of the page.
I have seen people put it pretty much anywhere on the page. You can put script tags anywhere on the page; many prefer to keep them in the <head> tag, while others put them at the bottom to avoid using document.ready. The point is that putting scripts there still works. Therefore, I see no problem in putting it at the bottom of the page.
Yes, I believe that it would work - it's not recommended though.
f you have a header and footer file, why not just append your Analytics code to it? Unless every page has unique footer/header page, of course. Then I'd recommend you to take a look at MVC.
Observations have already been made here regarding the scripts placement which can be taken on a site by site basis. We run Google Analytics using Google Tag Manager and use the header code placement in the footer and have no problems with that. Google is currently rolling out Core Web Vitals which places website performance as a must have, and so optimising code delivery is really important. Just wanted to add this here as it was pertinant.
Hey all..here a question from GJ in Holland.
I am busy with my first AJAX web programming and really like the idea where one php file (index) is loaded and from there xmlhttprequest are able to load and refresh content of the div's without refreshing the page.
Things are running good so far and about 4 div sections get different contents depending on which menubuttons you press (all through getdata functions and xmlhttprequests).
My last step is to integrate an extra autenthication div. I am trying to implement a nice jquery fade in fade out system with a login.php with the input fields for user name and pass; a process_login.php which compares the data with mysql and returns if theres a match or not; and finally a secured page where the user can logout when succesfully authorized.
These pages seem to work seemlessly when i load the login.php directly in browser.
When i use getdata and xmlhttprequest on the login.php to load it into a div section on index.html nothing works anymore because it seems it can't use the functions anymore which are declared on the login.php page.
Reading ajax for dummies doesn't give me any answers although i am sure there must be an easy to understand logical explanation for this fact.
I can't get my head around it..please any info is welcome...greets
GJ
Javascript loaded through ajax does not become part of the window. You have to explicitly execute it (e.g. using eval). There's no direct solution to this problem, so you need to come up with a model for your application to know about the resources that are needed by something it loads through ajax.
The best way to do this is to create some application-wide convention - e.g. set up a cross reference of pages & script files, and use $.getScript to load them on demand. Ideally you would check to see if a resource is already loaded before trying to load it again.
Here's a simple idea you could use. In the output of your login.php add a tag at the top, e.g.
<span id="script" style="display:none">login,/scripts/login.js</span>
Then after an ajax call that loads a page, do something like this:
data = $('#wrapper').find('#script').html().split(',');
if (!window[data[0]]) {
$.getScript(data[1]);
}
So basically you're passing some info in the HTML that the loader uses to figure out what it needs. The first parameter is a namespace, so you can check if it's already loaded. The 2nd is the path to the script.
You could flesh this out to account for more than one script, use JSON for the data format, etc.. but this is a basic idea.
Yeah, you could always just include all your scripts up front, too :) however loading on demand is a good idea for any nontrivial application, so you don't clutter things up with scripts you don't need. The login script's only going to be needed once per session after all.
As to why.....I dont know why this behaves so.
However as to a fix/workaround. Im in a similar situation currently where im loading in pages (actually asp/jscript rather than php). What ive discovered is that the scripts you write in the page thats being loaded in, are not available anymore when loaded through AJAX. I have experienced the same problem if the page being loaded contains an applet or other html object type of tag.
A solution to this is to move your scripts to an external file on the server, from there your page will be able to reach them regardless of whether it was loaded by AJAX as a panel or is a standalone page
Example: (this is obviously jscript rather than php but the loading will be similar.)
Page login.asp contains in <head>
<script type="text/javascript" src="scripts.js"></script>
I am building an AJAX deep-linked site.
I want PHP to load all the HTML code of the page if the user is trying to access the site with a Javascript non-supported browser or if it is a search crawler. Basically PHP will return the whole page.
On the contrary, when the user is trying to access the site with Javascript supported browser, I want PHP to return only the template code, and let Javascript (AJAX) take care of the rest. Basically PHP will only load design elements and let Javascript populate them with content.
I looked into PHP's get_browser() function, however it seems it is not such a reliable tool. What is the industry's practice see if the browser supports Javascript or it is a search crawler using PHP?
Background:
Why I want the site to have this behavior.
Since I want the home page to load just by loading the address: example.com, which does not send any query to PHP, PHP returns the HTML code of the home page. This however causes issues when the user tries to load the following page: example.com#foo. So, for this example, PHP will return the home page and once the home page is loaded, Javascript (AJAX) will change the content around so that it shows proper content for #foo. This will make the user to see the home page, therefore load time will be slower and user-experience will not be so nice. However if my PHP script can figure out that if the use with Javascript supported browser is trying to load the page, it will only return the template of the web site, which has no content) and the javascript will populate that template with content whatever is supposed to be displayed for #foo. On the other hand, if the Javascript non-separated browser or a crawler will try to access the page example.com#foo, home page will be returned.
I am using SWFaddress (http://www.asual.com/swfaddress/) library for the deep-linking.
Edit
Thank you guys. I did not think of using <noscript></noscript> before.
Here is what I decided to do. PHP by default will load pages such as example.com or example.com#foo (which is essentially the same as example.com from PHP's point of view since fragments by definition are not sent to the server) blank (just visual template) with <noscript> tag inside for the content of the home page. This way users with javascript will not see the home page and AJAX will populate the content of the page according to the #foo fragment. On the other hand, search crawlers and users without javascript will see a home page.
Thank you again. I think this is pretty simple and elegant solution. If you have any further suggestions, please post a comment or another answer.
You can't do this using PHP. What you can do though is use a noscript tag to redirect to another php page if they don't have javascript:
<noscript>
<meta http-equiv="refresh" content="0; URL=nojavascript.php">
</noscript>
It's not possible to accomplish this in the way you're trying to do it.
It's rare that someone has JS turned off and doesn't know it.
PHP doesn't get passed anything after #, only javascript can do anything with that. So even if PHP could determine if the browser has javascript turned on then it still couldn't read # anyways.
You could include a link inside some <NOSCRIPT> tags that point the user to something like example.com#foo?javascript=disabled.
Unfortunately, browsers do not report whether JS is enabled or not, so there's no way to know from a simple HTTP GET whether or not you should send JS reliant pages.
You should just build an AJAX query that sets a session variable for javascript enabled.
Run this AJAX query before any other information on the site is loaded and then do a simple redirect to the actual site.
You could do something like this pseudo code:
Index.php:
ajax(check_js.php);
redirect(main_page.php);
check_js.php
$_SESSION['js_enable'] = true;
main_page.php
if($_SESSION['js_enable'] == true) {
//execute page
} else {
header("Location: no_js_error.php");
}
Instead of the server trying to sniff our the user's settings, how about using unobtrusive javascript in the first place? This way, the page will degrade gracefully (to the desired state) if JS is not available.