#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0

    Removing table from HTML and populating it with table and data from MySQL instead?


    I currently have a site spanning 5 pages totaling around 3,000 lines of the following:

    Code:
    <tr class="tr2">
      <td class="c1">Gamecube</td>
      <td class="c2">007: Everything or Nothing</td>
     </tr>
     <tr class="tr2">
      <td class="c1">Gamecube</td>
      <td class="c2">007: From Russia with Love</td>
     </tr>
     <tr class="tr2">
      <td class="c1">Gamecube</td>
      <td class="c2">007: Nightfire</td>
     </tr>
     <tr class="tr2">
      <td class="c1">Wii</td>
      <td class="c2">101-in-1 Party Megamix</td>
     </tr>
     <tr class="tr2">
      <td class="c1">Wii</td>
      <td class="c2">101-in-1 Sports Party Megamix</td>
     </tr>
    Each page is dedicated to their own table of games. The table structure is as follows:

    • Table title (level of compatibility)/Row 1
    • Column 1 title (System)/Row 2
    • Column 2 title (Title)/Row 2
    • Row 3 and onward start the list (system names and game titles)


    It looks like this:
    http://i.imgur.com/DoCuHrQ.png

    You can see what the 5 pages and tables are labeled by looking at the nav menu.

    Again, each of the 5 (compatibility level) pages have their own colored table with their own system name/game titles.
    I have created an excel sheet containing every system name/game title with column 1 being the system titles and column 2 being the game titles.

    It looks like this:
    http://i.imgur.com/g6lN7c9.png

    Notice rows 1 and 2, table title and column titles respectively (refer to the table structure above.) Since taking that screenshot, I have separated those 5 tables into their own excel sheet based on the level of compatibility.

    What I need is to delete these thousands of table rows in my HTML code and have it refer to the database in order to populate itself, without any changes to the design you see in the first image.

    To help, here is what the start of a table looks like:

    Code:
    <table id="perfect">
     <col style='width:125'>
     <col style='width:623'>
    
    <!--PERFECT-->
    
     <tr class="tr1">
      <td class="td1" colspan="2">PERFECT</td>
     </tr>
     <tr class="tr1">
      <td class="c1">Wiiware</td>
      <td class="c2">"Aha! I Got It!" Escape Game</td>
    Line 8 is table title/row 1, line 11 is system name/row 2, column 1, and line 12 is game title/row 2, column 2.

    For better assistance, I've uploaded an entire page of code here:
    http://pastebin.com/wfKxamy4

    to give a better idea of what each page looks like currently, and what I want it to look like after I've cleaned up my HTML and use MySQL instead. Imagine lines 47 to 881 removed and instead the information is gathered from the database. The table sizes vary. The only real differences between the pages are the color of the table and the games.

    Thank you all for your help.
  2. #2
  3. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,581
    Rep Power
    1906
    Not sure what you question is or need help with.

    It looks like you know what fields/information your table should contain: compatibilityLevel, System and Title.

    Just remember that you can't use HTML only to connect to the database. You will need server side code like PHP or ASP.NET. If you need help with any of this, you should ask in that forum.
    Last edited by MrFujin; February 7th, 2014 at 05:36 PM. Reason: can should be can't
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0
    Hey, thanks for the reply.

    Originally Posted by MrFujin
    Not sure what you question is or need help with.
    I'll try to clarify my problem a bit more.

    You see the first image? That is one of five tables/pages (each table is on it's own page.) The tables obviously contain different data. They also vary in size (rows.) Those five tables are taking up, altogether, around 3000 lines of HTML. I want to un-bloat my HTML by removing all the table data and having the page refer to a database to make the tables instead. I'd like to keep that same design seen in the first image.
  6. #4
  7. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,581
    Rep Power
    1906
    Did you read the last line in my previous post?
    You can't just remake the html page and then get the information from MySql.

    When you have the MySql database ready with all the tables and information, you will have to use server side code - like PHP, ASP.NET or similar - to get the information out of the database.
    You will also use that code to make the HTML output, which is then displayed to the user as a normal HTML page.

    Based on what you have wrote, it seems like you miss the server side code.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0
    Originally Posted by MrFujin
    Did you read the last line in my previous post?
    You can't just remake the html page and then get the information from MySql.
    I appreciate your help. Being that I only know HTML, CSS, and a bit of Javascript, I'm having a difficult time understanding exactly what I need to accomplish this. I don't really know what my options are because I've never had to deal with databases. I know what I want to do, but I don't know what I need to do it.

IMN logo majestic logo threadwatch logo seochat tools logo