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?
Related
I have a specific requirement and am looking for suggestions on the best possible way to achieve that. I would start by apologizing if I sound too naïve. What I am trying to achieve in here is:
A) I have a parent site, say, www.abc.com.
B) I am planning to enable multisite option for it. This parent site has a area map with a number of location images overlayed. All of these images, when clicked, should lead to a subsite.
C) This subsite (has already been coded) is totally dynamic and every single information being displayed on it is being extracted from the database. It uses a session variable, which for now has been hard-coded at the very beginning of the header. This variable also decides on which database to refer to. So it will display information for different locations, based on the location selected on the parent site. Even the URL should appear per that. Say if Location ‘A’ was clicked on parent-site then the session variable needs to set to ‘LocA’ on the sub-site and the URL should be something like www.abc.com/LocA and if the Location ‘B’ was clicked then the session variable should be set to ‘LocB’ and the URL should appear as www.abc.com/LocB etc.. Trying to figure out how to achieve this. [It will have one front-end for all the locations but different databases for each location.]
I am an entrepreneur with some programming experience from my past (but none related to website designing). Because of the help from all you geniuses and the code samples lying around, I was able to code the parent site and the sub-site (using html, php, js, css ). Now the trouble is how to put it all together and make it work in correlation. Though it will still be a week or two before I get to try it but I am trying to gather insights so that I am ready by the time I reach there. Any help will be deeply appreciated.
I think the fundamental thing to understand before you get deeper is what a URL is. A URL is not part of the content that you display to the user; nor is it the name of a file on your server. A URL is the identifier the user sends your server, which your server can use to decide what content to serve. The existence of "sub-sites", and "databases", and even "files" is completely invisible to the end user, and you can arrange them however you like; you just need to tell the server how to respond to different URLs.
While it is possible to have the same URL serve different content to different users, based on cookies or other means of identifying a user, having entire sites "hidden" behind such conditions is generally a bad idea: it means users can't bookmark that content, or share it with others; and it probably means it won't show up in search results, which need a URL to link to.
When you don't want to map URLs directly to files and folders, the common approach involves two things:
Rewrite rules, which essentially say "when the user requests URL x, pretend they requested URL y instead".
Server-side code that acts as a "front controller", looking at the (rewritten) URL that was requested, and deciding what content to serve.
As a simple example:
The user requests /abc/holidays/spain
An Apache server is configured with RewriteRule /(...)/holidays/(.*) /show-holidays.php?site=$1&destination=$2 so expands it to /show-holidays.php?site=abc&destination=spain
The show-holidays.php script looks at the parameter $_GET['site'] and loads the configuration for sub-site "abc"
It then looks at $_GET['destination'] and loads the appropriate content
The output of the PHP script is sent back to the user
If the user requests /def/holidays/portugal, they will get different content, but the same PHP script will generate it
Both the rewrite rules and the server-side script can be as simple or as complex as you like - some sites have a single PHP script which accepts all responses, looks at the real URL that was requested, and decides what to do; others have a long list of mappings from URLs to specific PHP scripts.
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´m building a webpage that has a sort of catalog in it, which shows the current item and its description, and thumbnails for other items below it, if I click on a thumbnail of a different item, I have some script to change the description and the big image to the desired item. The problem is that I want this to reflect in the URL so the user could send the URL as a link to other to show the desired item. But I havent found a way to change the URL without having to reload the page, and for aesthethics, I dont want to reload the page.
Any ideas how to do this?
The solution is to use location.hash. Also, to implement it correctly, you might want to read this article from Google: Making AJAX Applications Crawlable
There is no reliable (cross browser) way to change the URL in the address bar without reloading the page - the very act of changing window.location.href (which I imagine is what your trying to do) tells the browser to reload the page (even window.location.href = window.location.href; will do it in some browsers).
I think you would have to put a [link to this page] element on the page and change that instead - you can easily populate it with the current URL either at the server side or using a window.onload function and manipulate it in the same way as you have been doing using element.value or element.innerHTML (depending on what type of element you choose to contain the link).
You can do it with hashes (see the window.location.hash property) but this can be messy programmatically.
The usual, currently-broadly-compatible way is to use a hash, e.g.:
http://myniftystore.com/catalog#11321R-red-shirt
then
http://myniftystore.com/catalog#11321B-blue-shirt
then
http://myniftystore.com/catalog#95748B-blue-slacks
...as you navigate items. You can change the hash on the page by assigning to the location.hash property, without reloading. This requires that you use some client-side script in the first place to figure out what to show when the user first goes to the URL (by examining the location.hash).
Google has a proposal out for how to make these things crawlable. Personally, I think they've really messed it up by requiring that weird hashtag (#!xyz rather than just #xyz), but if it's me or Google, I think I know who'll win. :-)
Coming down the pike there's the whole history API, but support isn't very thick on the ground yet (particularly not — cough — from certain vendors).
I have created a widget for my web application. User's getting code and just pasting that code in their website and my widget works on their website something like twitter, digg and other social widgets.
My widget is on the basis of post, for a single post (say postid: 234) I am providing single widget, so anyone can embed the widget on their website.
Now I want to know that where all my widget is posted and for which post? for that I have recorded the URL of the site when my widget start (onload) but the problem arises when someone placed the widget in their blog or website's common sidebar. I am recording URL each time and hence if it's in sidebar of a blog then it's recording URL for every post which is creating duplicates.
can anyone help on this? How should I go so that I have only one single record for a widget on a site?
I think doing something like this is a bit tricky. Here are some ideas that pop to mind
You could for example ask the user to input their site's URL when they get the widget, or the widget could track the domain or subdomain, thus giving less URLs.
Just tracking the domain would obviously be problematic if the actual site is domain.com/sitename/, and there could be more than one site under the domain. In that case, you could attempt to detect the highest common directory. Something like this:
You have multiple URLs like this: domain.com/site/page1, domain.com/site/page2, and so on. Here the highest common directory would be domain.com/site.
I don't think that will always work correctly or provide completely accurate results. For accuracy, I think the best is to just ask the user for the URL when they download the code for the widget.
Edit: new idea - Just generate a unique ID for each user. This could be accomplished by simply taking the current timestamp or something, and hiding it into the code snippet the user is supposed to copy. This way you can track the ID itself and any URLs and domains it appears in can be grouped under it.
If you have an ID which doesn't get a hit in say week or something you could remove it from your database, and that way avoid filling it up with unused IDs.
I agree with Jani regarding a unique id. When you dish out the script you'll then be able to always relate back to that id. You are still going to have duplicates if the user uses the same id over and over, but at least you'll have a way of differentiating one user from another. Another useful advantage is that you are now able to, as Jani said, group by the ID and get a cumulative number for all of the instances where that user used the script & id.
I'm working on a site where we need "dynamic" breadcrumb generation.
Pages within this application are not specific children of the other, so when the user is browsing one of them, I can't simply retrace steps back up.
I could have the following breadcrumbs-like lists: (updated)
* inbox > message > user profile
* search results > user profile
* search results > user profile > new message
( FYI; there will be a few dedicated parent pages that will reset the whole stack. Also there will be a check that prevents recursion. )
So... To accomplish this, I have to remember where the user has been, and in what order. I reckon the most elegant and reliable way to do is, is write a mechanism that remembers the user's history in the session.
If I do that though, the whole thing will break when a user opens a new browser window or tab.
To fix that, I could store this data in the querystring. Though different browsers/proxies have different limits of data that can be transferred that way. So, one day, this will probably break as well.
Does anyone have an idea on how to implement this?
Or;
Does anyone know how to reliably identify different browsers windows?
(I'd rather not rely on javascript for this, unless it's my only workable option. I use dojo toolkit for the frontend)
thanks in advance!
On HTML5 compatible browsers I would save these on the local storage.
You can detect a new tab open like this:
on page load set a cookie by javascript
use the onbeforeunload event to clear the cookie
When the visitor will open your site, it will set a cookie eg session=1, if they click on a new link on your site, when they leave the site the cookie will be eg session=0 but as soon as they arrive again on your site it will be session=1.
When the visitor will open a new tab, it will encounter a session=1 so probably will do that session=2. You got the point?
window.name survives a new document load. So you can write a history string to window.name and then read it back from the next page, or use a generated name as a key for storing window-specific cookies/sessions.
I don't think this is a good idea though. “Breadcrumbs” are traditionally a hierarchical navigation device, not a history list. The browser already provides a perfectly good history list on the back/forward buttons that it is not useful to reproduce on the page; presenting an on-page history list, especially in a format that is normally a hierarchical place marker, is more likely to confuse users than to be of any help.
I asked a similar question a few months ago. The top answer - which I will am planning to go with - suggested building a path, and parsing that using a combination of mod_rewrite and PHP:
www.mysite.com/inbox/message/user_profile/12345/new_message
Up to a certain point (the request URL should never grow larger than 1024 bytes), that can be quite a good solution. An additional advantage is that the breadcrumb path can even survive sessions, and works in links forwarded to others (if that is desirable in your scenario).
Another thing, looking at your examples, I can't really see the need to reset the history when the user opens a new page, or to take different browser windows into consideration at all. There is a logical hierarchy (not a history) and why should the system start changing then hierarchy just because I choose to open the new message editor in a new tab?