5 Replies Latest reply on Sep 4, 2013 9:18 AM by wannab0133

    moble site architecture

    wannab0133 Level 1

      I have an coldfusion application in production.  I am getting more and more requests for certain functions to be available in a mobile friendly format.  I do not need the entire site to be mobile friendly, just certain parts.  I have researched and determined how to detect the devices and how to redirect mobile users.  2 questions:

      1. What is the typical architecture for what I am needing.  For example....currently I have:

       

      webroot/mycfapp

       

      Should I do this?:

      webroot/mycfapp/mycfmobileapp  Just add a subfolder?  I am wanting to keep using the original authentication and other processes from mycfapp, but just have a section seperated that includes the mobile features.

       

      What is a light weight accepted way to do this?  I typically develop desktop apps so this is new for me.

       

      2. Where should I store the variable that tells the application which format(desktop or mobile)?  Should I keep that flag or variable in  a session variable or cookie?

       

      It seems the prevailing wisdom to keep the apps seperate and I am all for that.  I just would like to design it with some thought before I begin coding anything.

       

      Thanks

        • 1. Re: moble site architecture
          Steve Sommers Level 4

          The most common two ways of doing this are:

           

          1. Use a separate site or subdirectory like you described -- one for mobile, one for desktop (or "full" site).
          2. Use a MVC framework like FuseBox or Mach II and have separate views for the different formats.

           

          I lean toward the second option but if your site does not already use a MVC framework, this is a huge undertaking and most likely not an option.

           

          As to you second question, I would store it in a cookie and allow the user to toggle between the two.

          1 person found this helpful
          • 2. Re: moble site architecture
            wannab0133 Level 1

            Steve,

             

            Thanks for the info.  I will go with the subdirectory route.  Now my issues have to do with the fact that I will now have 2 login pages, one for desktop and one for mobile.  My authentication begins in OnRequestStart, and includes the login page(rather than using cflocation) if the user is not authenticated or the user/password combo is invalid.  The issue with this is the fact that the images on the login pages will not display correctly because if a mobile user is trying to hit the desktop version of the site, it will include the mobile login page with an incorrect path to the images.  The mobile/login.cfm has path to images "../images/pic.png" and the login.cfm has this path: "images/pic.png".  There are several instances of this occurring and it has to do with using a sub directory.  I am trying to find a way around this issue the correct way with minimal code.  I could have one login page(with both versions of the login page) where it detects the browser rather than having the detection in the application.cfc method.  Any thoughts?

            • 3. Re: moble site architecture
              Steve Sommers Level 4

              I would probably create two login pages, one in the root (which you probably already have) and another in the mobile subdirectory. Then modify the logic in the onRequestStart to detect which to use. I do it this way because it gets very ugly having big cfif or cfcase blocks with similar functionality but very different html and javascript based on the device.

              • 4. Re: moble site architecture
                wannab0133 Level 1

                Steve,

                 

                I already have 2 login pages as you suggest.  The specific issue I have now is the fact that when a user tries to log into the desktop site with a mobile device and is NOT logged in, it goes through the logic to see if they are logged in and if not, the mobile login page gets included(because I am detecting the user on a mobile device).  The problem is the fact that the logo is not displayed correctly because the mobile/login.cfm page is being included from the webroot/application directory rather than webroot/application/mobile directory.  The mobile/login.cfm has path to images "../images/pic.png" and if it had this path: "images/pic.png" it would work fine.  I cannot change the path, however, because if the user times out in the mobile directory, for example,  "images/pic.png" would not work, but  "../images/pic.png" would.  I am not big on putting conditional logice everywhere to fix this.  I am sure I am missing something very easy.  Thanks for your help.

                • 5. Re: moble site architecture
                  wannab0133 Level 1

                  I solved this issue by adding another application.cfc in the mobile directory:

                   

                  <cfcomponent extends="intranet.Application">

                   

                    <cfset this.name="mobile" >

                     

                      <cffunction name = "onApplicationStart">

                           <cfset super.onApplicationStart()>

                      </cffunction>

                     

                      <cffunction name="onRequestStart">

                          <cfset super.onRequestStart()>

                      </cffunction>

                     

                  </cfcomponent>

                   

                  Then, I just check if the user is on the mobile site or not with:

                   

                   

                   

                  <cfif application.applicationname EQ 'mobile'>

                                 do something

                                                <cfelse>

                   

                                 do something else

                                                </cfif>

                   

                  Thanks for the help