Results 1 to 3 of 3

Thread: Methods for navigating between pages

  1. #1
    Join Date
    Feb 2011

    Methods for navigating between pages

    I am currently building a new web site for my company. I feel comfortable using web technologies such as HTML/CSS/JavaScript/PHP but learned these things in a classroom setting and have not had much opportunity to put what I learned to the test!

    My question is really about the pros and cons of different methods of site navigation. My first method was to have a separate .html or .php file for each page and have an anchor with an href attribute pointing to each page. But then I realized that probably 70% of each page is the same! I know how to reuse code with php include/require statements, but the browser still reloads those every time, and I wanted that nice clean partial-page change feel! Now my site navigation is done with javascript functions that toggle divs on and off to change the content of the page. Am I cutting out users that may not have javascript enabled or are there so few that people are generally not worrying about that? If so, what method would you suggest to reach the most people?

    Thanks for reading and I look forward to reading your input.

  2. #2
    Join Date
    Jan 2011
    All the methods you've mentioned do work, but they do have their pros and cons however.

    Obviously, using just html/css creates a lot of redundancy, but there are no compatibility issues (not realistically anyways).

    PHP, being a server-side language, also has little to no compatibility issues since the work is done by the server, not the guest. And includes are a nice handy way of keeping your site up to date, and with more functionality than just html. But, like you say, each page will (re)load completely. If your issue with that is loading time, keep in mind that much of it will be cached.

    I'd say you're on the right track using JS. Yes, there are people who disable it on their browsers. But a vast majority of websites use JS somewhere in their site, and as time goes on it's being used in more and more places. So there are not many people that have it disabled. Atleast, not on a permanent basis. Many people use various tools/add-ons to switch JS on and off quickly, so they can disable it for sites they don't completely trust. If your site is legit, and trustworthy, you shouldn't lose any tangible amount of traffic by using javascript.

    Keep in mind though that all of this may change as html5 starts to become prevalent. I haven't had an excuse to work with it myself yet, but from the samples and documentation that are floating around it seems that html5 will be able to do much of what JS is used for today. Hard to say what kind of affect that will have.

  3. #3
    Join Date
    Nov 2010
    Los Angeles, CA
    I'm glad you want to organize and reuse your code. If you continue on this path as a back end developer you will surely arrive at an MVC framework. MVC is a programming methodology that means Model-View-Controller that provides proper code organization. I'm just starting in this path but when you mention that a lot of your pages look the same I realized this is the type of methodology you're looking for.

    My site used to have a separate PHP script for each page. Then I realized I am typing the same code in multiple places. This is not DRY (Don’t Repeat Yourself). Instead I made one script, called showArticle.php and I pass to it an id that is stored in my mySQL database and references the requested article. So instead of having www.mysite.com/articles/this_is_my_article.php I have www.mysite.com/showArticle.php?id=29. Currently I am rebuilding the site from the ground up to be more organized on the back end as well as switching to HTML5.

    I didn’t exactly answer your question yet. For pagination you can either use AJAX to replace the contents of the page with the next contents, or you can link to the next page. I personally prefer the latter. URLs would look like this: www.mysite.com/articleList.php?page=2 . What I like about this is that if the user is even slightly technically inclined they can manually modify the URL to go to the page number they want. The AJAX method will work if you can come up with a very good and intuitive user interface.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.16110 seconds
  • Memory Usage 2,850KB
  • Queries Executed 13 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates