I'm not even 100% sure how to ask this question, but I will try my best...
So, take youtube. You've got this:
URL/watch?v=Video_URL_Here
While on this video, you decide to click a video in the related on the right-side.
While doing that, the page refreshes, and instantly jumps to that video.
I have the basic concept down:
> Create a variable.
$var;
> User: *Clicks First Video*
$var = Video_One; // Pulls from mySQL-DB
> Open a new page (ex: URL/watch?v=Video_ONE)
PHP: >Creates a whole new page for the video.<
> User: *clicks new video*
$var = Video_Two;
> Open a new page (ex: URL/watch?v=Video_TWO)
PHP: >Working more magic.<
However, I'm having a hard time actually doing this.
Could anyone point me in the right direction or explain how it works?
It would be very appreciated.
The way YouTube works is using $_GET variables. That's what the ?v= is. It's taking in the v variable and checking the database for a video with that video id. The way they create the new page is by fetching each of the values corresponding to the id that was passed in the url, then putting that data in each of the page sections.
Let me answer with a very general and oversimplified example
actually, more than having a unique "$var" that changes every time you click on a video (on your example), it is more like the page already knows where to go for each link (or click), that is, every video already has a link associated, with the corresponding url.
all this is done BEFORE the page loads. (there are ways to make it after, but that is another matter).
Just to give a quick example (it may not be exactly how youtube works, it is just an example)
Lets say you store each videos name, description, rating, etc on a database table.
e.g.
video1name, url1, description1, etc1
video2name, url2, description2, etc2
video3name, url3, description3, etc3
also assume each video has already related videos stored somewhere (the videos which would show on the right side) (imagine they are in the same table, each video having their own "related videos" associated.
so, when putting the page together, via PHP (in this case), what the code does is, read the data from the database, so it will know what it will "paint", at that point, it stores such data in variables, and using those vairables, it is ready to build the page, using such data.
imagine you say "i need 5 videos here, those videos are this, this other .... etc"
so php will read those 5 videos info form the database, AND knowing their data, it already "knows" what will the specific url for each video will be.
it only has to build links for each video, each having it's speciffic url.
e.g.
[some html]
...
<a href="myvid1url" > ...</a>
<a href="myvid2url" > ...</a>
<a href="myvid2url" > ...</a>
...
[the rest of html]
the only thing php is doing, is creating HTML dynamically, based on that data, and once it finishes, it sends it to the browser, which only has to "paint" plain html, all of which is already filled with the particular urls, names, etc for each part.
This is a VERY generalized example, but i hope you get the idea.
The most important part is to understand that most of the time, pages are already "built" before being displayed, once loaded, they already "know" what to do when you click somewhere, etc.
Of course, you can add interactive functionality, using javascript, ajax, etc, and that MAY change the page already loaded, but that is another concept.
I think you should first tell us what your experience with programming is, or if you have only made plain simple htmls pages or anything, so we could give you better advice.
have fun!
You could use JQuery and have the second video load in a frame, iframe, div, table, new window, etc (depending on the data source, of course)
External sources (depending)
jQuery loading external page (cross domain) into Div element
Local content sources
Load HTML page dynamically into div with jQuery
For external data loading you could get all creative and run a curl to save the data locally, parse it for what you need and then serve that locally
Related
I am trying to create a web page with a tab menu. I want to be able to dynamically add and delete tabs (and other content). There is a perfect example of what I want here: http://www.dhtmlgoodies.com/index.html?whichScript=tab-view . I want the newly created tabs to be persistent through page loads. So basically if I add a tab and refresh I want the tab to still be there. If I close the browser and reload the page a month later I would like the tab and any content to still be there. This page is for personal use and will be hosted on my computer and accessed through the browser alone, not any kind of web server. Although I'm not against using a web server if I need to.
Looking at the code it seems that the 'add tab' functions just add HTML to the page in memory but I need it to permanently change the HTML of the page. Is there a way to write dynamic changes to the DOM back to disk? I'm not quite sure where to go with this and searching for a week has left me with too many language and implementation options to look into. I am not an experienced web developer and there is so many different ways to create web pages and so many new terms that I'm a little overloaded now.
I do realize that this is a little outside the realm of a typical web-site. It is generally not a good idea to let the client-side make changes to data on the server-side. But since I am the only person who will be using this and it will not be accessible from the internet security is not an issue.
I'm not apposed to any particular scripting language, but I would like to keep it as simple as possible. I.e.: one HTML page, one CSS, and maybe a script file. Whatever is necessary. I am not apposed to reading and learning on my own either so being pointed down the right path is fine for me.
If you need a rock solid method, then you would need some record of having those tabs existing. That means having a database that knows that the tab exists, which tab it was, and what content it contained. Html5's local browser storage (not to be confused with cookies though) could also be a viable solution but browser compatibility is an issue (for now).
You also need some sort of "user accounts system" so you know who among your users had this set of tabs open. Otherwise, if you had a single "tabs list" for everyone, everyone would open the same tabs!
For dynamic html and js for the "tab adding", you are on the right spot. You need PHP to interact with the database that is MySQL. What PHP does it it recieves data in the server from the browser about what happened like:
know which user is logged in
what action did he choose (add or remove tab)
add to the database or delete a record
reply with a success or error, whichever happened
For MySQL, you need to create a database with a table for your "tab list". This list must have:
User id (to know which user did what among the ones in the list)
Tab id (know which tab is which among the ones in the list)
Tab content (it may be a link for an iframe, actual html, text etc.)
Friend, when you talk of closing the browser and not losing the data, then you are talking about data persistence or data durability. In other words, you have to save your data somewhere, and load it next time.
For storage you can use a flat file (a simple text file), a database, an XML file, etc. However, you need to learn a lot to save the information and content of the new tab somewhere, and next time load it.
I know this is a strange thing to want to do, but...
How can I place a photo at the top of someone else's webpage ("Page B") -only- when a visitor links there from my page ("Page A")? I have permission to do this, but with certain limitations: my code needs to be in one location on Page B, and I can't make major changes to Page B. I cannot use Page B's server to run PHP, but I can run PHP on Page A's server.
The photo needs to open automatically with the rest of the Page B, and not require any user input to show up.
This is a unique vendor/retailer situation, so unfortunately I can't provide the urls.
Thanks for any help.
In PHP, you'd do something like:
<?php
if($_SERVER['HTTP_REFERER'] == 'http://www.yoursite.com/referringpage.html')
{
printf('<img src="yourbutton.png">');
}
?>
Which is very limited because:
It will only work for a referring single page (referringpage.html) and not otherreferringpage.html
It will only work for a single landing page. If the user navigates off of the page, then back (not through browser's back), the button will not show up.
To solve the first you could do a substring of the referrer, e.g.
<?php
if(substring($_SERVER['HTTP_REFERER'],0,24) == 'http://www.yoursite.com/')
{
printf('<img src="yourbutton.png">');
}
?>
To solve the second you could set session variables (except then you'd need access to the very top of the "outermost" page -- which doesn't sound like an option.)
Depends on the design of the page.
Lets say,
If the page is divided into frames, then you can use iframe.
if It's a single page, try have a separation with div tag. Insert the html into Div Tag.
If the above two points won't help you,give an idea of how the page is designed
I think a simple answer would be to write a html page (lets call it linkPage) that has the image/text/div or whatever you want to display on the top and then include an iframe that would cover the rest of the page using css. You could pass the page you are linking to as a GET or POST parameter to the linkPage and then set the src of the iframe to that url.
There are probably other ways of doing this that are more complicated / seamless but this would be the easiest, quickest way to get it done.
We use iframes to show ads on our site.
Iframes are used to allow us to keep the ad generation code and other site modules separate.
As we track ad views on our site, and need to be able to keep an accurate count of which pagetype gets what views, I must ensure that users can't simply copy-paste the iframe in which the ad is loaded onto another site. This would cause ad count to become inflated for this page, and the count would not match the view count of the page the iframe "should" be displayed in.
Before anyone says so: no I can't simply compare the page view count with the ad view count, or use the page view count * number of ads per page, as # of ads per page will not necessarily be static.
I need to come up with a solution that will allow ads to be shown only for iframes that are generated dynamically and are shown on our pages.
I am not familiar with PHP sessions, but from what little reading I have had time to do, the following seems to be to be an acceptable solution:
Add "s = session_id()" to the src of the ad's iframe.
In the code that receives and processes ad requests, only return (and count) and ad if s == session_id().
Please correct me if I'm wrong, but this would ensure:
Ads would only be returned to iframes whose src was generated alongside the rest of the page's content, as is the case during normal use.
We can return our logo to ad calls with an invalid session_id.
So a simple example would be:
One of our pages:
<?php session_start(); ?>
<div id="someElement">
<!-- EVERYONE LOVES ADS -->
<iframe src="http//awesomesite.com/ad/can_has_ad.php?s=<?php echo session_id(); ?>></iframe>
</div>
ad/can_has_ad.php:
<?php session_start(); ?>
if($_GET['s'] == session_id()){
echo 'can has ad';
}
else{
echo '<img src="http://awesomesite.com/images/canhaslogo.jpg"/>';
}
And finally, copied code with static 's' parameter:
<!-- HAHA LULZ I WILL SCREW WITH YOUR AD VIEW COUNTS LULZ HAHA -->
<iframe src="http//awesomesite.com/ad/can_has_ad.php?s=77f2b5fcdab52f52607888746969b0ad></iframe>
Which would give them an iframe showing our awesome site's logo, and not screw with our view counts.
I made some basic test cases: two files, one that generates the iframe and echos it, and one that the iframe's src is pointed to, that checks the 's' parameter and shows an appropriate message depending on the result. I copied the iframe into a file and hosted it on a different server, and the correct message was displayed (cannot has ad).
So, my question is:
Would this work or am I being a PHP session noob, with the above test being a total fluke?
Thanks for your time!
Edit:
I'm trying to solve this without touching the SQL server, as the rest of the site is very SQL intensive and I don't want to add load to the already creaky SQL server...
You shouldn't really put the session id in the url because it makes it vulnerable to referrer snooping. (If the user follows a link from a page with the session id in the url, they will be able to see the session id in the referrer header)
Rather than using an iFrame, you might consider making the request for the iFrame contents on the server (eg using curl) and printing it onto your page. That way there will be no way for anyone else to directly embed it.
You could also consider checking the referrer header before loading the iFrame (which should be the containing page's url) but it is very easy to fake referrer headers so this shouldn't be considered a 'good' solution.
In summary, I'd strongly suggest finding another way of putting the ads onto your page!
Here's the situation.
I have a site where clicking hyperlinks within a certain div makes a jQuery function get the content of a div from a separate page. Because of this, the URL don't change. I need it to change as well as writing an entry in history.
My pages are setup like this (not sure this is the smartest way of going though)
access.php (main logon)
new-user.php
forgot-pass.php
index.php
controlpanel.php
etcetc. Now, all of these pages are reachable on their own and are mainly identical and all contain a div called "container". When clicking links, the content from this div gets erased and the content from the coresponding div (container) gets loaded from the file of the URL (href). I'm terrible at explaining..
So basically, what I need is some javascript that picks up the href link address and just pastes it in the url bar at the same time as it creates an entry in history so the back and forth buttons work.
I plan on extending this in a while as well, translating query strings as well. But there are a few constant static pages I need to take care of first. Any help would be very appreciated! :)
You are not allowed to change the entire URL by JavaScript but you can use URL hashes. I recommend you the browser history plug-in. You can simply register a handler to react on URL changes and load your corresponding content via ajax.
Have you looked at the jquery address plugin? Look at the examples. Is this similar to what you want?
It's not possible with "normal urls" (we must wait for a new generation of browsers...)
But there is a "trick": playing with anchors.
A link like "same_page.php#anchor" does not reload the page, but act on both the history and the adress bar.
So, if instead of having url like "page.php?param=lorem", you could have "page.php#param=lorem", you have your solution :)
I have a large, PHP-based CMS that manages web pages.
All items are organized in a tree structure.
When I edit an item, the "back" button usually points to its parent item.
So, the usual workflow is navigating through the tree.
Now every now and then, the need arises for a workflow that "jumps" to other items without regard for the structure.
For example, when a user is editing a web page, they may want to open the template the page is attached to (another item in a completely different branch), make a change there, and when clicking "save" expect to come back to the page they were editing.
At the moment, I solve this using
domain.com/admin/template/edit?from=/frontpage/edit
where the "from" variable determines the target URLs of the "save" and "cancel" buttons.
This works up to a certain point when the path becomes too long and complex. For example, what if the user
edits a page
opens the attached template
previews that template in the front-end view
and then expects to be seamlessly taken back to the page they were editing?
Right now, the "history" ends at the last item so that when the user returns from the front-end view, the link to the original page is lost, and they have to search it by hand.
Another problem that can happen quickly is that the GET URL containing all the "from" values becomes too long, or totally chaotic:
domain.com/admin/template/edit?from=/frontpage/edit&from=/somepage/edit
&from=/template/preview&/from=template/edit&/from=template_preview ...
(you get the drift)
I have solved this elegantly by opening separate windows in the past, but I really want to implement a seamless one-window workflow that works universally, mainly because multiple windows tend to confuse users.
How do you solve this?
Have you implemented a robust "unstructured" navigation that works well with multiple windows open (=one user doing multiple different things with different navigation paths)?
How do you go about this on the user interface side?
The best approach I can think of is passing on a "from" value that points to a temporary record in a database or session. That record contains all the information about the current path, and can thus always provide the right "back to page x" value.
What I would like to hear most is experiences from people who have successfully implemented this, and how they did it.
Just a couple suggestions
Preview Problem: preview in an IFRAME, so the history doean't get lost?
Cluttered URL problem: If you have some sort of key for each page, other than the URL path
(i.e. /frontpage/edit = 952,
/frontpage/edit&from=/somepage/edit = 763,
/template/preview = 651,
template/edit = 612,
template_preview = 866 etc.)
you could string them together in the PATH_INFO like so:
domain.com/admin/template/edit/952/763/651/612/866
You could build a stack of visited pages for the session as the user clicks around, pushing on a new page each time the open it, popping off when they click back. Store it as a session variable.
The trick then is to always check their referrer string, since they may also use their browser's back and forward buttons. If their referrer string isn't at the top of their stack, you'll have to scan the stack for it to see if they manually backed up to a previous page.
As long as you're only needing to backstep once, why not pass in whatever linkback page IDs you want whenever you produce the page you're jumping to?