Jump to content

Leaderboard


Popular Content

Showing most liked content on 01/11/2018 in all areas

  1. 1 point
    If you want to create classes for everything that's great, I was focused on trying to get you to separate everything in the first place. A reasonable class structure is probably the best option in nearly every situation, so if you're comfortable with that then do it. You can create, for example, a podcast class with everything you need to do with them, a podcast factory class for creating or getting individual or lists of podcasts, etc. About the code, the first thing I would do is move some of those things out into a generic include file for every page. Things like error reporting settings, database connectivity settings, and other things that are not for specific pages should go into a single include file. The point being that you only have 1 place to make changes if you need to adjust any of those. You don't want to go searching through a bunch of files if your database password changed. It looks like you need a newsletter class. Another principle of good design is that you generally want functions to do one thing. I think that function in particular would be better if it returned all of the data instead of sent everything to the browser (although it looks like you're mostly printing things just to see what's going on), because you may have a place where you want to get newsletter data but not send it to a browser. So it should return the data instead of using echo, and then whatever called the function can either load a template to print it to the browser, or maybe load an email template, or whatever else. If you broke that function above up into a class for a newsletter, it looks like some of the methods might be things like getQA, getNextPreview, getPodcasts, etc. Maybe the getPodcasts method would return an array of podcast objects that correspond with the newsletter. You would also have get/set methods for each of the database fields or other properties that make up the object (getId, getTitle, getAbstract, etc).
  2. 1 point
    Here's an example of letting JavaScript do the work for you, once you give it required minimum data. NOTE: its not a good idea to have spacing in image file names, it tends to cause problems in coding, use underscore or hyphens instead. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .mySlides {display:none} .demo {cursor:pointer} </style> </head> <body> <table width="1000px" align="center" border="1"> <tr> <td class="style_shop_text" colspan="3"> <a href="/shop/shop_prod1_menu_1.shtml"> <img alt="Product 1" src="/images/site/shop/prod1.jpg"> </a> </td> </tr> <div class="w3-content" style="max-width:1000px"> <tr> <td style="width: 333px" valign="top"> <P class="style_shop_text"></br> Product - £11</br></br> Dimensions : 5cm (approx)</br></br> BLAH BLAH BLAH</br> </P> </td> <td valign="top" align="center" valign="top" colspan="2"> <img class="mySlides" src="/images/work/prod 1-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 1-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 1-3.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 2-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 2-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 2-3.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 3-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 3-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 3-3.jpg" width="400" height="400" alt="Product 1"> <!-- <img class="mySlides" src="/images/work/prod 4-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 4-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 4-3.jpg" width="400" height="400" alt="Product 1">--> </td> </tr> <tr> <td> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="xxxxxxxxxxx"> <table> <tr> <td> <input type="hidden" name="on0" value="Product_combo"> </td> </tr> <tr> <td> <select name="os0" id="Product_combo"> <option value="Product 1-1" data-src='["prod 1-1", "prod 1-2", "prod 1-3"]'>Product 1 £11.00 GBP</option> <option value="Product 1-2" data-src='["prod 2-1", "prod 2-2", "prod 2-3"]'>Product 2 £11.00 GBP</option> <option value="Product 1-3" data-src='["prod 3-1", "prod 3-2", "prod 3-3"]'>Product 3 £11.00 GBP</option> <!-- <option value="Product 1-4" data-img-index="9" data-src1="/images/work/prod 4-1.jpg" data-src2="/images/work/prod 4-2.jpg" data-src3="/images/work/prod 4-3.jpg">Product 4 £11.00 GBP</option>--> </select> </td> </tr> </table> <input type="hidden" name="currency_code" value="GBP"> <!-- <input type="image" src="http://www.mywebsite.co.uk/images/site/button_add_to.jpg" border="0" name="submit" alt="PayPal – The safer, easier way to pay online."> <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">--> </form> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" > <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="xxxxxxxxxxxxxx"> <input type="hidden" name="display" value="1"> <!-- <input type="image" src="http://www.mywebsite.co.uk/images/site/button_view_cart.jpg" border="0" name="submit" alt="View Shopping basket"> <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">--> </form> </td> <div class="w3-row-padding w3-section"> <td colspan="2" valign="top"> <table width="100%" border="0" valign="top" id="imageTable"> <tr> <div class="w3-col s4" valign="top"> <td style="width:33%" align="center"> <img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_1" height="200" src="/images/work/prod 1-1.jpg" width="200" alt="Product" onclick="currentDiv(1)"> </td> </div> <div class="w3-col s4" valign="top"> <td style="width:33%" align="center"> <img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_2" height="200" src="/images/work/prod 1-2.jpg" width="200" alt="Product" onclick="currentDiv(2)"> </td> </div> <div class="w3-col s4" valign="top"> <td style="width:33%" align="center"> <img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_3" height="200" src="/images/work/prod 1-3.jpg" width="200" alt="Product" onclick="currentDiv(3)"> </td> </div> </tr> </table> </td> </div> <tr> <td colspan="3"> </BR> </td> </tr> </div> </table> <script> $("#Product_combo").on('change', function() { parentTable = document.getElementById("imageTable"); imgTag = parentTable.getElementsByTagName('img'); dataSrcArray = JSON.parse($(this).find(":selected").attr("data-src")); $.each(imgTag, function(key) { $(this).attr('src', "/images/work/" + dataSrcArray[key] + ".jpg"); }); var myslideElem = document.getElementsByClassName("mySlides"); $.each(myslideElem, function(indexkey) { $(this).css({"display": "none"}); myslideThis = $(this); $.each(imgTag, function() { if (myslideThis.attr('src') === decodeURIComponent($(this).attr('src'))) { $(this).attr("title", indexkey + 1); $(this).attr("onclick", "currentDiv(" + (indexkey + 1) + ")"); } if (decodeURIComponent(imgTag[0].src).indexOf(myslideThis.attr('src')) !== -1) { //imgTag[0].attr('src', myslideThis.src); myslideThis.css({"display": "block"}); } }); }); }); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } var slideIndex = 1; showDivs(slideIndex); function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("product_slides"); if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace("w3-opacity-off", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " w3-opacity-off"; } </script> </body> </html> Now could add extra custom data for image path, or add full image file name and path, (but it looks cleaner without the path) to data-src, up to you.
×