Not sure where to post this?!

In my database model, I have a SuperType (tblExpense) and several related SubTypes (tblFuel, tblElectric, tblTelephone).

On the data entry form I want to build, users will always see "ExpenseID", "ExpenseDate" and "MerchantName" which are in tblExpense. However, depending on the value selected for "Form Category" and "Form SubCategory", users should see different remaining fields. (The logic being that you should see "Total Gallons" when you are entering in your Electric Bill!!)

Blue fields are always the same, regardless of Expense Type.
Red fields vary depending on the Expense Type, and are determined by "FormCategory" and "FormSubCategory" the user would select.

For example, if you wanted to enter July's Electric bill, you would see...

ExpenseID
ExpenseDate
MerchantName

BaseServiceCharge
TotalKWH
SupplyRate
TotalSupplyCharge
DeliveryRate
TotalDeliveryCharge

TotalExpense

If you wanted to enter a Gas receipt, you would see...

ExpenseID
ExpenseDate
MerchantName

FuelType
NumberOfGallons
CostPerGallon

TotalExpense

In the MS Access database I am using to "prototype" this system, I will probably use a Tabbed Subform and VBA code to dynamically display/hide different tabs containing the appropriate fields. However, I am unsure of how to do this on a web-form?! ???

So, how can I create a dynamic "sub-form" which will display different fields based on the Expense you want to enter??

I am pretty flexible - for now - on what the solution looks like. It could be...
1.) A single, homogeneous form where only the fields change
2.) A main form that is static with a sub-form that dynamically changes and displays different fields
3.) Something more sophisticated like a Tabbed Subform that hides/unhides different tabs and/or fields as needed.

**I prefer to NOT use Frames!

Is this something that you would do using PHP? HTML? CSS? AJAX?

More so, how would you do it?!

Just Bob

    So you really need people to be able to enter fuel, electric, and telephone expenses simultaneously? Is this a budget tool or something?

    As far as the database design goes, it should be the same. ie: you have an expense table with an expense_id as a primary key and the three subtypes are represented as separate tables with a foreign key (expense_id) that refer back to the primary key.

    However, I see no reason for tabs in the website so much. You can certainly have a regular good old html menu with a link for each "subtype" form. Those forms can all store to the database. You can keep "application state" with PHP sessions.

    Is this something that you would do using PHP? HTML? CSS? AJAX?

    I'm seeing similar questions like this lately. I feel it important to distinguish HTML from methods used to render HTML. In other words PHP (or any other server parsed language), CSS, and AJAX are tools to build HTML layout. It's only HTML in the long run that your browser interprets to layout (the 'M' in HTML is for Markup after all.)

    That being said, let's talk about AJAX. I should point out that AJAX is not a standardized tool but an acronym to describe a method for dynamic markup. The 'A' stands for asynchronous because the idea is using javascript to make the webpage requests (instead of the browser) and return data to be acted upon (think event handler.) The major benefit here is that the browser stays on the same page and the user experience can be made to feel more like a standard application rather than a website. You could get by without using AJAX for what you are building. However, if you wanted to make a rich UI for your users, you could use javascript to show/hide simulated tabs and use AJAX to upload the forms to the database instead.

      bretticus;10877810 wrote:

      So you really need people to be able to enter fuel, electric, and telephone expenses simultaneously? Is this a budget tool or something?

      Hi Bretticus!

      Well, I am building a super-duper, mongo Personal Financial System where I can enter in all of my expenditures and link it to PDF's of the original Receipt/Bill/Invoice and manage ever cent in my life. (And NO I am NOT interested in Quicken or anything like it!)

      BTW, I already have designed this system on the back-end, I just need help "webifying" it! 🙂

      The reason for all of the different forms is because the types of things on a receipt from Target, or a receipt from Exxon Gas, or my Electric Bill or my GEICO Insurance Bill or a visit to my Allergist are radically different in many aspects. (I don't just want to capture Expense Date and Expense Total, but also capture things so I can calculate Gas Mileage, Frequest Flyer Miles, Avg Trips to Doctor, etc. Hey, I already get all this information on paper, why not put it all in one monster database so I can start doing analysis?!)

      bretticus;10877810 wrote:

      As far as the database design goes, it should be the same. ie: you have an expense table with an expense_id as a primary key and the three subtypes are represented as separate tables with a foreign key (expense_id) that refer back to the primary key.

      Yes, that is the data model I am opting for. (I want to avoid things like EAV!)

      bretticus;10877810 wrote:

      However, I see no reason for tabs in the website so much. You can certainly have a regular good old html menu with a link for each "subtype" form. Those forms can all store to the database. You can keep "application state" with PHP sessions.

      I am flexible in this area since I'm not exactly sure of how the UI should look.

      Agreed, "Tabs" may not make sense on the data entry end, because EITHER you are entering a Gas Receipt OR you are entering a Grocery Bill, but NOT BOTH together, so Tabs aren't needed. (Although I mention them, because in MS Access, I created a Parent Form and then Tab Control with Child Forms. Each tab had a different Sub-Form and I used VBA to hide all tabs that didn't apply if you selected "Natural Gas Bill" for instance.)

      Right now, how I envision things, is that you will have ExpenseID, ExpenseDate and MerchantName fields along with a combo-box (Access term) to select "Form Category" and "Form Subcategory".

      If the user chose "Transportation" and "Airfare" then I would plop up the remaining fields that apply to Air travel (e.g. DepartureDate, Departure City, Return Date, Return City, PaidWithMilesYN, etc).

      But I am not sure the technology to use on the Web to do that.

      bretticus;10877810 wrote:

      I'm seeing similar questions like this lately. I feel it important to distinguish HTML from methods used to render HTML. In other words PHP (or any other server parsed language), CSS, and AJAX are tools to build HTML layout. It's only HTML in the long run that your browser interprets to layout (the 'M' in HTML is for Markup after all.)

      I knew that, but thanks for the "thump" on the head! :p

      (Although, I thought HTML and CSS were just for "presentation"??)

      bretticus;10877810 wrote:

      That being said, let's talk about AJAX. I should point out that AJAX is not a standardized tool but an acronym to describe a method for dynamic markup. The 'A' stands for asynchronous because the idea is using javascript to make the webpage requests (instead of the browser) and return data to be acted upon (think event handler.) The major benefit here is that the browser stays on the same page and the user experience can be made to feel more like a standard application rather than a website.

      And that is important, but I want this to look and feel like a very professional, and Client type application.

      bretticus;10877810 wrote:

      You could get by without using AJAX for what you are building. However, if you wanted to make a rich UI for your users, you could use javascript to show/hide simulated tabs and use AJAX to upload the forms to the database instead.

      Since I am a newbie, and my FIRST priority is getting this built before I drown in Paper Receipts, what would you recommend?

      Is there something that would dynamically pop up fields and/or sub-forms that is maybe quicker to use than AJAX?

      Can PHP do that?

      And do I want to use a "Sub-Form Paradigm", or should it be a "Field Paradigm" where I am popping up (and down) just the fields?

      **NOTE: One important consideration is form layout. If I am going to the trouble of capturing disparate data, then I want a different look-and-feel for each situation. In the end, the "Grocery Entry Form" and the "Gas Receipt Entry Form" and the "Electric Bill Form" should be designed to mimic how the paper reecipt/bill looks and be designed for maximum data-entry efficiency.

      This is why I joined this board...

      Any dummy can can create 15 seperate HTML forms that are laid out differently. But it takes a more knowledgeable person - like yourself - to create ONE dynamic form that can act like 15 seperate forms, but look more integrated to the end-user.

      Sounds like you at least understand me, and seem supportive.

      That is a great start!

      Now what?

      Just Bob

        Right now, how I envision things, is that you will have ExpenseID, ExpenseDate and MerchantName fields along with a combo-box (Access term) to select "Form Category" and "Form Subcategory".

        If the user chose "Transportation" and "Airfare" then I would plop up the remaining fields that apply to Air travel (e.g. DepartureDate, Departure City, Return Date, Return City, PaidWithMilesYN, etc).

        Okay, well, you could do something as simple as--I say simple but I realize it's not simple for someone who may have never used javascript--anyways....

        You could have one form and use javascript to show or hide parts of the form based on users selecting a "subtype." No need for AJAX because you can just submit one form. As for style-izing based on subtype, I'd just change a background color with javascript and css. I want to emphasize that even though you are looking to build something as quick as possible, you'll benefit from actually getting a solid foundation in the web technologies you need to accomplish this task. That being said, there are many ways to go about this. I googled 2 examples quickly. One is using javascript to dynamically change css classes (yes, you are right, css is an aide for layout. This can help you change layout based on subtypes) and the other is using Javascript to dynamically show or hide parts of a webpage (or parts of a form.) These may not be the best examples and you may want to do more research (the acronym you may wanna focus on is DHTML.) Again, this is gonna take you some time. So be prepared to struggle a bit and learn alot. Remember google is your friend. Also, remember that this forum is more for when you have code written but get stuck. That being said, here is a really good basic PHP course online that I have been recommending. You may need to backup a bit and get familiar with HTML. Also, it would help to become more acquainted with JavaScript as you need to know all 3 disciplines to get this done. Let's add CSS to the mix (I guess that's four!)

        Example 1:
        Changing css elements dynamically with JavaScript.

        Example 2: Show hidden form html dynamically with JavaScript.

          bretticus;10877825 wrote:

          Okay, well, you could do something as simple as--I say simple but I realize it's not simple for someone who may have never used javascript--anyways....

          You could have one form and use javascript to show or hide parts of the form based on users selecting a "subtype." No need for AJAX because you can just submit one form. As for style-izing based on subtype, I'd just change a background color with javascript and css.

          Okay, but I want to clarify something that is important...

          Think of my Sub-Type fields and the Main Form as "musical chairs", i.e. there is no way you can fit all of the fields onto one form. (That is why I said earlier, this is trickier than just hide/unhide, and I why I was talking about "Sub-Forms".)

          Let's say you can reasonably put 5 fields in the area I am allocating for Sub-Type fields, but I have 50 fields?! :eek:

          The way I would normally approach this in MS Access (or using HTML Frames) would be to build a "Sub-Form" for each "Sub-Type". Maybe like this...

          sfrmFuel


          PumpNo
          FuelType
          NumberOfGallons
          CostPerGallon


          sfrmTelephone


          DeliverTo
          BasicServiceCharge
          LocalCharges
          LocalSurcharges
          TotalLocal
          LongDistanceCharges
          LongDistanceSurcharges
          TotalLongDistance
          OtherSurcharges


          sfrmAirfare


          DepartureDate
          ReturnDate
          TravelFrom
          TravelTo
          RedeemFreqFlyerMilesYN
          CostInMiles
          OtherFees


          sfrmElectric


          BasicServiceCharge
          TotalKWH
          SupplyRate
          SupplyCharge
          DeliveryRate
          DeliveryCharge
          MiscFees
          911Surcharge

          Then, depending on the Form-Type required, I would "load" the appropriate Sub-Form onto the Main Form.

          That way you don't have issues with "real estate", nothing gets "cross-wired", and you can customize the field-layout differently for each Sub-Type.

          That is where I really need help...

          bretticus;10877825 wrote:

          I want to emphasize that even though you are looking to build something as quick as possible, you'll benefit from actually getting a solid foundation in the web technologies you need to accomplish this task. That being said, there are many ways to go about this.

          Well, I am pretty antsy, but I want to do this "right". (I'm going to kick things around this weekend, but maybe I'll just build a temporary solution in MS Access since I know it, and then I can take my time and learn the web stuff the correct way?!)

          More to follow...

          Just Bob

            bretticus;10877825 wrote:

            I googled 2 examples quickly. One is using javascript to dynamically change css classes (yes, you are right, css is an aide for layout. This can help you change layout based on subtypes) and the other is using Javascript to dynamically show or hide parts of a webpage (or parts of a form.) These may not be the best examples and you may want to do more research (the acronym you may wanna focus on is DHTML.) Again, this is gonna take you some time. So be prepared to struggle a bit and learn alot.

            The first link was just a thread with lots of code, so I skipped that.

            The second example was nice, but I still wonder if my situation doesn't require a different approach. (Also, dynamic code is nice, but sometimes maybe overly complicated when you can just build static Sub-Forms and load them?!)

            You mentioned LOTS of things. :o

            What is the best way to get "bang for my buck" and not drown in a million languages?

            You mentioned...

            • HTML
            • DHTML
            • CSS
            • JavaScript
            • PHP
            • AJAX

            I would rather start simple and then scale up.

            It seems that AJAX is pre-mature. And maybe DHTML is overkill right now?

            If I use CSS, you don't need HTML, right?

            I also have to learn MySQL! :eek:

            Is there anyway I could post or e-mail you some screen-shots or a prototype to give you a better sense of what I'll shooting for?

            Just Bob

              Hahahaha. I love your enthusiasm man! Unfortunately, building DYNAMIC web pages requires many tools.

              In this forum most folks like to do LAMP (Apache, MySQL, PHP on Linux. Okay, so I stuck Linux last when it should have been first.) The idea is you need a server to take requests from browsers and return HTML content (the most basic of basic.) That's where Apache comes in. If you need to programmatically return HTML content you need some kind of programming language and accompanying parser/compiler. That's where PHP comes in. Finally, if you need to store data programmatically, you need a RDBMS. This is where MySQL comes in. I'll almost guarantee you that LAMP is the most common "web platform" in the world. You can't go wrong learning how to use them together.

              By the way, CSS doesn't replace HTML. The goal is to separate your HTML and your design. So you may still need HTML for tables and columns and displaying images and such. But your borders, and backgrounds, and fonts, and colors can be specified using CSS. Now, hear this, YOU DON'T HAVE to use CSS. Get yourself a good WYSIWYG editor (well, the current ones will build the CSS for you.) I like Dreamweaver ALOT. Try the demo.

              Here's my advice. Forget your project for awhile and READ through the PHP tutorial I gave you. that at least covers AMP (Apache, MySQL, and PHP.) Once you get that under your belt, you can start building your application.

              Oh and finally, DHTML should work just fine with your subforms because you can hide the form inputs you don't need at a given moment (all 50 if you have to) and when you go to submit your form, PHP will be able to distinguish the type based on your drop-down/radio button control depending on what you selected. Of course, you're going to learn the basics of dynamic Web pages first...right?

              Cheers!

                bretticus;10877876 wrote:

                Hahahaha. I love your enthusiasm man!

                I like your enthusiam as well! 😉

                bretticus;10877876 wrote:

                Unfortunately, building DYNAMIC web pages requires many tools.

                So I see!

                bretticus;10877876 wrote:

                In this forum most folks like to do LAMP (Apache, MySQL, PHP on Linux. Okay, so I stuck Linux last when it should have been first.)

                Yah, I know that. For now I'd be WAMP, but in the next month I hope to be MAMP!! 😃

                bretticus;10877876 wrote:

                By the way, CSS doesn't replace HTML. The goal is to separate your HTML and your design.

                Right, I remember now.

                bretticus;10877876 wrote:

                Here's my advice. Forget your project for awhile and READ through the PHP tutorial I gave you. that at least covers AMP (Apache, MySQL, and PHP.) Once you get that under your belt, you can start building your application.

                Probably good advice. I sorta did that tonight and BROKE DOWN and entered last month's receipts plus trip receipts between my "Food DB" and my "Trip spreadsheet". (Lots of re-coding later, but at least it is all off my desk and in my PC tonight!!!)

                Now that I can see my desk, tomorrow and maybe Monday I will sit around and just sketch more things out, play with Access, and look at about 20 pages in notes and ERD's.

                Hopefully I can expand the MS Access "Expense.mdb" that I created a few weeks ago enough so it will last me the next few months. (I'll likely just focus on Grocery, Gas and Retail receipts for now and pass on "digitizing" my Utility Bills.

                By then, hopefully I have a fairly solid basic understanding of Dynamic Websites plus a good strategy and time to start building my "beast"!! 🙂

                bretticus;10877876 wrote:

                Oh and finally, DHTML should work just fine with your subforms because you can hide the form inputs you don't need at a given moment (all 50 if you have to) and when you go to submit your form, PHP will be able to distinguish the type based on your drop-down/radio button control depending on what you selected.

                Can you at least "throw me a bone" and help me understand this part more, even though I concur that I need to "go back to school" first.

                I saw your earlier Javascirpt link, but I just don't think that will work for all of my Sub-Types.

                Ideally, I'd like my form layout to be...


                Super-Type fields

                <<insert Sub-Types fields here>>

                More Super-Type fields
                -------------------------------------------------

                I'd appreciate it if you could work with me to get a solid CONCEPTUAL understanding of different ways to tackle this while I go off to study. (Great designers start "visualization" far in advance of started to build things!!!)

                bretticus;10877876 wrote:

                Of course, you're going to learn the basics of dynamic Web pages first...right?

                Yep, I think that is a prudent approach. (I want to build a BMW, not some piece of crap, and that takes a good education first!)

                bretticus;10877876 wrote:

                Cheers!

                You live in Utah, right?

                Are you British?

                Or do you just like that expression?! 🙂

                Just Bob

                  bretticus,

                  Do you have MS Access? (I'm using MS Access 200.)

                  Is there a way to post attachments here, like maybe a ZIP file?

                  Or would you mind PM'ing me your e-mail?

                  Maybe I could send some screenshots of my "baby" or even the actual database. Might help you to better understand what I am working towards.

                  Thanks,

                  Just Bob

                    You live in Utah, right?

                    Are you British?

                    Or do you just like that expression?!

                    I do live in Utah. I am mostly British (albeit Britons who came to America long ago.) But mostly I really like the Douglas Adams books.

                    I believe you can attach files in the forum. Sure upload them (might wanna take some screenshots though, I don't have Access.)

                      bretticus;10877886 wrote:

                      I do live in Utah. I am mostly British (albeit Britons who came to America long ago.) But mostly I really like the Douglas Adams books.

                      Did you know that Utah supposedly has the highest concentration of Britons of any of the 50 States?! 🙂

                      bretticus;10877886 wrote:

                      I believe you can attach files in the forum. Sure upload them (might wanna take some screenshots though, I don't have Access.)

                      Okay, it is early Sunday morning and I'm diving back into my "Grand Designs"...

                      Hopefully I'll have some stuff I can post today or sometime soon.

                      Thanks,

                      Just Bob

                        Write a Reply...