hikingwithu2

I have about 20 webpages that include mysqli procedural stuff, and I want to change those to mysqli procedural w/prepared statements. I've been through many sites that "teach" using prepared statements but none talk about converting an existing site to using them. An example (some of my existing code): if (isset($_POST['upload'])) { $description = $_POST['description']; $picAlt = $_POST['picAlt']; $status = $_POST['status']; mysqli_query($db, "INSERT INTO pics (fileName, description, picAlt, status) VALUES ('$fileName', '$description', '$picAlt', '$status')"); $_SESSION['message'] = "The photo has been saved"; header('location: photos_manager.php'); } Do I simply change my code to this?: if (isset($_POST['upload'])) { $description = $_POST['description']; $picAlt = $_POST['picAlt']; $status = $_POST['status']; $insertQry = 'insert into pics (fileName, description, picAlt, status) values(?,?,?,?)'; $insertStatement = mysqli_prepare($db,$insertQry); mysqli_stmt_bind_param($insertStatement,'ssss',$_POST['fileName'], $_POST['description'],$_POST['picAlt'], $_POST['status']); mysqli_stmt_execute($insertStatement); mysqli_close($db); $_SESSION['message'] = "The photo has been saved"; header('location: photos_manager.php'); } Then what after that? Does anything else anywhere in my pages that use this insert need to be changed?

I'm using the w3.css modal to display videos stored on the local server: <button onclick="document.getElementById('<?php echo $row['id']; ?>').style.display='block'" class="w3-button w3-black"><i class="far fa-play-circle fa-3x"></i> <?php echo $row['short_description']; ?></button> <div id="<?php echo $row['id']; ?>" class="modal"> <div class="modal-content"> <div class="w3-container"> <span onclick="document.getElementById('<?php echo $row['id']; ?>').style.display='none'" class="w3-button w3-display-topright close">&times;</span> <video controls src="videos/<?php echo $row['fileName']; ?>" width="200"> </video> <p><?php echo $row['description'] ?></p> </div> </div> </div> <script> var modal = document.getElementById('<?php echo $row['id']; ?>'); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> And that is working fine. Now I would like to add a pageHits column to my sql videos table and track the number of hits to each individual video. (I already track the number of hits to the videos page and that works fine.) I've tried numerous bits of code from numerous website and stackexchange and so far none of them have worked to increase the counter in the database. What code do I need to add to simply count the hits to the individual video modals? Thanks.

Oh, I just noticed something! The last "else" has no condition, is this the reason why my code didn't work? Because my final "else" had a condition? If true, then do I need to add a final "else" with no condition? (The page is working now without it.) But, what is the correct thing to do?

Thanks, that does indeed fix it, but I don't understand why it is happening. After all, the form of the process is (from this W3 site) - if (condition) { code to be executed if this condition is true; } elseif (condition) { code to be executed if first condition is false and this condition is true; } else { code to be executed if all conditions are false; } Which is how my code was written, using the third condition as only "else".

I am writing a CRUD and this is a test page to combine 3 separate files into one page. If I comment out the final "else" section entirely the first "if" section and the "else if" section work fine, no errors. After I remove the comment marks for the final "else" section I get this error: PHP Parse error: syntax error, unexpected '?>' in /public_html/crud/test.php on line 139 (<- the line 139 the error points to is the final php closing tag before the closing body tag) It should be obvious, simple, but I can't find any reason why it is throwing out that error and breaking the page (it is just a blank white page). I'm sure somebody can scan through the code and see what I'm missing. Thanks. <!DOCTYPE html> <html> <head> <?php require_once "../HeaderStuff.php"; require_once "../connection.php"; ?> <style> table { width: 100%; } th {background-color: #f1f1c1;} .margin {margin-top: 4em;} </style> </head> <body style="background-color:<?php echo $bgColor; ?>"> <?php $choice = $_GET['choice']; $id = $_GET['id']; if ($choice == 'blogsEdit') { ?> <table class="w3-table-all"> <thead> <tr> <th class="textBig w3-padding-32 w3-left-align">Website Administration - Edit Blog</th> </tr> </thead> </table> <?php $sql = "SELECT id, cat, Fdate, title, para1, story, pic, picAlt FROM blogs WHERE id = $id"; $result = mysqli_query($link, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { // Display each field of the records. $id=$row['id']; // the blog id $cat=$row['cat']; // the blog category $Fdate=$row['Fdate']; // the blog date $title=$row['title']; // short title of the blog $para1=$row['para1']; // the introduction paragraph $story=$row['story']; // the rest of the blog after the intro paragraph $pic=$row['pic']; // picture for the blog $picAlt=$row['picAlt']; // alt text for the picture ?> <fieldset> <form action="blogsUpdate.php" method="post"> <table class="w3-table-all"> <tr> <th>Category:</th> <td><?php echo $cat; ?></td> </tr> <tr> <th>Blog Date:</th> <td><input type="text" name="Fdate" value="<?php echo $Fdate; ?>" /></td> </tr> <tr> <th>Blog Title</th> <td><input type="text" name="title" size="150" value="<?php echo $title; ?>" /></td> </tr> <tr> <th>Intro Paragraph</th> <td><textarea name="para1" id="para1" cols="150" rows="5"><?php echo $para1; ?></textarea></td> </tr> <tr> <th>Story</th> <td><textarea name="story" id="story" cols="150" rows="10"><?php echo $story; ?></textarea></td> </tr> <tr> <th>Picture File Name</th> <td><input type="text" name="pic" size="50" value="<?php echo $pic; ?>" /></td> </tr> <tr> <th>Picture Alt Text</th> <td><input type="text" size="150" name="picAlt" value="<?php echo $picAlt; ?>" /></td> </tr> <tr> <input type="hidden" name="id" value="<?php echo $id; ?>" /> <td colspan="2"><button type="submit">Save Changes</button></td> </tr> </table> </form> </fieldset> <?php } } else { echo "0 results"; } } else if ($choice == 'lessonsEdit') { ?> <table class="w3-table-all"> <thead> <tr> <th class="textBig w3-padding-32 w3-left-align">Website Administration - Edit Lesson</th> </tr> </thead> </table> <?php $sql = "SELECT id, cat, Fname FROM blogs WHERE id = $id"; $result = mysqli_query($link, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { // Display each field of the records. $id=$row['id']; // the lesson id $cat=$row['cat']; // the lesson category $Fname=$row['Fname']; // the file name ?> <fieldset> <form action="lessonsUpdate.php" method="post"> <table class="w3-table-all"> <tr> <th>Category:</th> <td><?php echo $cat; ?></td> </tr> <tr> <th>File Name:</th> <td><input type="text" name="Fname" value="<?php echo $Fname; ?>" /></td> </tr> <tr> <input type="hidden" name="id" value="<?php echo $id; ?>" /> <td colspan="2"><button type="submit">Save Changes</button></td> </tr> </table> </form> </fieldset> <?php } } else { echo "0 results"; } } else ($choice == 'writsEdit') { ?> <table class="w3-table-all"> <thead> <tr> <th class="textBig w3-padding-32 w3-left-align">Website Administration - Edit Writing</th> </tr> </thead> </table> <?php $sql = "SELECT id, cat, title, story FROM blogs WHERE id = $id"; $result = mysqli_query($link, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { // Display each field of the records. $id=$row['id']; // the writing id $cat=$row['cat']; // the category $title=$row['title']; // title of the writing $story=$row['story']; // the poem or story ?> <fieldset> <form action="writsUpdate.php" method="post"> <table class="w3-table-all"> <tr> <th>ID:</th> <td><?php echo $id; ?></td> </tr> <tr> <th>Category:</th> <td><?php echo $cat; ?></td> </tr> <tr> <th>Title</th> <td><input type="text" name="title" size="150" value="<?php echo $title; ?>" /></td> </tr> <tr> <th>Story</th> <td><textarea name="story" id="story" cols="150" rows="10"><?php echo $story; ?></textarea></td> </tr> <tr> <input type="hidden" name="id" value="<?php echo $id; ?>" /> <td colspan="2"><button type="submit">Save Changes</button></td> </tr> </table> </form> </fieldset> <?php } } else { echo "0 results"; } } ?> </body> </html>

I found my problem, and hopefully others searching these forums can learn from my mistake - I removed a level of div that was overriding a previously called div. The second div had display:block which was overriding the previous div which has display:table-cell. The two divs now match each others heights as described in the docs.

Ok, I think I have something on this topic - the two cells do indeed always match sizes as long as the cell to the right is the same or small height as the cell on the left. If the right-cell is taller, the left-cell will not adjust and match the height. It appears to work only with the right-cell matching the left-cell. I haven't done any extra testing yet, but that appears to be what is happening. What I have done today is put some text in the left-cell and an image in the right-cell, if the image is taller than what the left-cell wants for the its own text, then the right-cell (image cell) grows taller. If I put more text in the left-cell it will grow automatically of course, but the right-cell will also grow to match it. Edit: I might be wrong afterall, as I just tried it with two div of text and no matter how much text is in either, the two side by side divs will not align to the same height. It's very strange, as I use side by side boxes in many places and they all align perfectly no matter what is in each of them. More testing... More testing shows the right-cell follows the left-cell for height. As the left-cell changes height the right-cell will follow, but it does not work in the reverse. More testing...

FYI - (no help needed, this is a demonstration) - I'm in the process of developing a site for non-English speakers to learn conversational English (not grammar, as is the case with most English learning websites). While writing one of the pages I was experimenting with the radius and accordion and got some cool and unexpected results, you can see what I mean by looking at the page here - http://wiegand.org/ChipsEnglishHelp/a1-u0-intro.php Maybe some of you have already come across this, I don't know, but this is the first time I've seen this effect, anywhere. The accordion code I found on a website, then I added a radius of 10% to the <li> in the .css. Here's the code - /* * Author: Michael Raffaele <michael@mraffaele.com> * Date: 25th October 2011 * Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/ */ /* Shared for all accordion types */ .accordion { font-family:Verdana,Geneva,sans-serif; margin:0 auto; width:35em; padding:.5em; background:inherit; } .accordion ul { list-style:none; margin:0; padding:0; } .accordion li { margin:0; padding:0; border-radius: 10% } .accordion [type=radio], .accordion [type=checkbox] { display:none; } .accordion label { display:block; font-size:.8em; text-align:center; line-height:.8em; background:inherit; border:0; color:#542437; font-weight:600; cursor:pointer; text-transform:uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; } .accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { background:#C02942; text-align: center; color:#FFF; } .accordion .content { padding:0 .5em; overflow:hidden; border:0; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; } .accordion p { color:#333; margin:0 0 .5em; } .accordion h3 { color:#542437; padding:0; margin:.5em 0; } /* Vertical */ .vertical ul li { overflow:hidden; margin:0 0 .05em; } .vertical ul li label { padding:.5em; text-align: center; } .vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label { border-bottom:0; } .vertical ul li label:hover { border:0; } .vertical ul li .content { height:0; border-top:0; text-align: center; } .vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { height:20em; border:0; }

Here's the reference - https://www.w3schools.com/w3css/w3css_layout.asp Layout Cells Adjust to Equal Height Side-by-side w3-cell elements will also automatically self-adjust to equal height: I'm still having this problem, though it is not 100%, it might be more like 10%.

Here's the reference - https://www.w3schools.com/w3css/w3css_layout.asp Layout Cells Adjust to Equal Height Side-by-side w3-cell elements will also automatically self-adjust to equal height: I'm still having this problem, though it is not 100%, it might be more like 10%.

I got it working, here's the code: <style> .menubar { width: 100%; clear:both; padding:.5em; box-shadow:0 .07em .07em black; background-color:yellow; border-left:.43em solid orange; border-radius:.57em; } .h1-bar a { color:#000; background-color:yellow; box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo; border-radius:.57em; padding:.5em; margin-top:.5em; } .bar { width:100%; overflow:hidden; display:inline-block; } .btnMenu { float:left; background: orange; padding:.15em; border-radius:.57em; margin-right:.75em; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } .btnMenu:hover { background-color: red; cursor: pointer; } .btnMenuReversed { float:left; background: pink; padding:.75em; margin:.5em; border-radius:.57em; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } .btnMenuReversed:hover { background-color: green; cursor: pointer; } </style> <div class="bar menubar"> <div class="h1-bar"> <div class="btnMenu"><span class="btnMenuReversed"><a href="index.html">Home</a></span></div> <div class="btnMenu"><span class="btnMenuReversed"><a href="courses.html">Courses</a></span></div> <div class="btnMenu"><span class="btnMenuReversed"><a href="why.html">Why English?</a></span></div> <div class="btnMenu"><span class="btnMenuReversed"><a href="contact.html">Contact</a></span></div> </div> </div>

I have a menubar that works great in Opera 49.0 but in Firefox 57.0.2(64bit) and IE11 there are no links, therefore it doesn't work at all. If I move the link urls outside the buttons they work as expected, but the buttons are completely messed up. What could possibly be the problem? The html looks like this: <div class="w3-bar menubar "> <div class="h1-bar"> <button class="btnMenu"><a href="index.html">Home</a></button> <button class="btnMenu"><a href="courses.html">Courses</a></button> <button class="btnMenu"><a href="why.html">Why English?</a></button> <button class="btnMenu"><a href="contact.html">Contact</a></button> </div> </div> And the .css looks like this: .menubar { width: 100%; clear:both; padding:1em; box-shadow:0 .07em .07em black; background-color:yellow; border-left:.43em solid orange; border-radius:.57em; } .h1-bar a { color:#000; background-color:yellow; box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo; border-radius:.57em; padding:.5em; margin-top:1em; }

hmm, yeah, those do not sound familiar at all, but for some reason, in the back of my mind, I just seem to recall seeing something about those two divs being automatically drawn to the same size without the use of tables. I don't like using tables for layout, they are for data.

When making two side-by-side divs with different amounts of text in them, and coloring the background, the two divs are of different heights. Now, I can use the style/height to set a height in pixels for the two divs, but I seem to recall seeing something in the w3schools site that showed how to make the two divs automatically the same height without setting the height in pixels. Or am I mistaken?

Yes I do, and that particular section will not change as it is for images/graphics that need a white background, rather than making all the images/graphics transparent. So for this site that is acceptable.

Exactly, that's what I have settled on - names like - section1 (which is dark blue), section2 (which is dark green, etc, and BtnSection1 (for a contrasting button for the dark blue section. I've followed this same pattern for other subsections. It's been a lot of trial and error experimenting, but it's all coming together now. This whole process is to change an old website to a more modern site, changing not just styles but also formatting. I hope to be done with it next year (I'm working on it alone, between my private language students).

I have gotten it working as I had hoped - In my .css file I have done this: /* the dark blue section */ .section1 { content:""; float:left; width: 66.6666%; display:table; clear:both; padding:0.01em 16px; border-radius:8px; color:#fff !important; background-color:#000066 !important; border-left:6px solid #0000ff !important; } /* right-side column for images and graphics */ .whiteSection { float:left; width: 33.3333%; padding:0 8px; text-align:center!important; background-color:#fff!important; } So, what does this do for me? This is what would be needed in every page of the site if using the w3-css properties directly - <div class="w3-row"> <div class="w3-container w3-twothird w3-safety-yellow w3-text-black w3-leftbar w3-border-orange w3-round-large"> <p>stuff</p> </div> <div class="w3-container w3-third w3-white w3-center"> <img src="../images/image.png" alt="image.png" width="250" height="117" /> </div> </div> Now all of that is changed to this: <div class="w3-row"> <div class="section1"> <p>stuff</p> </div> <div class="whiteSection"> <img src="../images/image.png" alt="image.png" width="250" height="117" /> </div> </div> Obviously a huge simplification of all the webpages and much easier to manage and update later. Comments and suggestions welcome.

Ok, so after much experimenting I have gotten it to work with this code, not exactly what I was hoping for, but it works - <li>J: Where are you ______?<button class="w3-container w3-btn BtnShowAnswerPink" onclick="myFunction('l')">Answer</button> <div class="w3-container w3-hide BtnAnswerPink" id="l" style="width:65%;">Where are you from?</div> </li> So, what would be really nice if including whatever makes up "w3-container" and "w3-btn" into the BtnShowAnswerPink and "w3-container" and "w3-hide" into BtnAnswerPink. I have tried by copying everything related to those and pasting into the code but it simply doesn't work, as if something is still missing. The buttons don't open. So at this point, I'm going with the above solution. If anyone knows how to integrate the other bits please post the info here.

On a webpage I'm building the client likes his buttons to be formated with the following - <button class="w3-btn w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" onclick="myFunction('a')">Answer</button> <div id="a" class="w3-container w3-hide w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" style="width:65%;">orange</div> Problem is he wants different colors on different pages, and many of them. So in the future changing the colors will be a major drag. Using all those selectors like that defeats the purpose of the css, right? So I am working on making a selector that contains all the details of the w3-btn w3-left-align w3-aqua w3-border etc etc. I have searched the w3-css style sheet version 3 for all relevant attibutes and have come up with this - .BtnShowAnswerPink { border:none; display:block; outline:0; padding:6px 16px; vertical-align:middle; overflow:hidden; text-decoration:none!important; text-align:center; cursor:pointer; white-space:nowrap; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; box-shadow:none; float:left; width:100%; -webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s; transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s; color:#000!important; background-color:#ff9999!important; border:1px solid #ccc!important; border-color:#ff3333!important; border-radius:32px; font-size:12px!important; } .BtnHideAnswerPink { padding:0.01em 16px; display:none!important; color:#000!important; background-color:#ff9999!important; border:1px solid #ccc!important; border-color:#f44336!important; border-radius:32px; font-size:12px!important; } Problem is it doesn't actually work. The button does not expand to show the text. After much more experimenting I have found that the first part, .BtnShowAnswerPink, is ok, the problem is in the second section. What is happening is the button does not expand. I have verified the javascript, and it is fine. So, at this time, this is what I have working - <li>D: _____, I'm Donna.<button onclick="myFunction('a')" class="BtnShowAnswerPink">Answer</button> <div id="a" class="w3-container w3-hide w3-left-align w3-pink w3-border w3-border-red w3-round-xxlarge w3-small" style="width:65%;"> Hi (Hello), I'm Donna. </div> </li> The javascript also comes from this site, here it is: <script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> What am I missing from the second part, .BtnHideAnswerPink? I can't provide a link to the site as it is not published, yet. Thanks.

I think I read somewhere that ALL text should be enclosed inside paragraph tags. But what I don't recall is it literally ALL text regardless of other tags? For example, inside <h-> tags, inside <div> tags, inside <li> tags, etc etc etc, should literally ALL text be enclosed in paragraph tags? In <li> tags if I use <p> tags then the text is dropped one line below the list item marker symbol, which is bad, so I don't use paragraph tags inside <li> tags. In <div> tags I have used paragraph tags only when there have been more than one paragraph. For years now I have been using paragraph tags for paragraphs outside of other tags, such as those I already mentioned, but should I be enclosing text in <h-> and <li> in paragraph tags? My goal is to write the most accurate markup possible.

Seriously? W3-CSS color libraries. https://www.w3schools.com/w3css/w3css_color_libraries.asp

I would like to use some of the vivid color library colors as border colors, but apparently borders cannot use them. The various color libraries seem to work only as background colors, not as border colors, is this correct?

Regardless of one's opinion, the fact remains that there is a problem in the /4/w3.css stylesheet, which needs to be addressed. I can't believe that I'm the only person in the world effected by this.

Wrong link? So the w3.css page with info for using/linking to/downloading w3.css is incorrect? See - www.w3schools.com/w3css/w3css_downloads.asp In the many w3.css pages, click on the Tryit boxes, every one that I have checked has the same link I am using (that is why I am using that link, because the w3.css site itself uses that link. It is not my link that is the problem. The root of the problem is somewhere in the w3.css site or code. If I change <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> to <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css"> the display of the colors is all correct, same as using the link you provide. So the problem is with the w3.css version 4 stylesheet, it seems to me.

I noticed on my website that some of the border colors are not working, so I came back to the W3 colors page and verified there weren't any changes to color names, then I looked at the borders page to verify that the borders have not changed, and my code is correct. But some of the colors are only displaying as grey, below are some, not all, in a test from the W3-borders Tryit Editor page (I get the same results on my own website) - <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Thick Border Bars</h2> <div class="w3-panel w3-leftbar w3-border-blue"> <p>I have a thick left blue border.</p> </div> <div class="w3-container w3-rightbar w3-border-indigo"> <p>I have a thick right indigo border.</p> </div> </div> <div class="w3-panel w3-topbar w3-border-cyan"> <p>I have a thick cyan top border.</p> </div> <div class="w3-panel w3-bottombar w3-border-teal"> <p>I have a thick teal bottom border.</p> </div> <div class="w3-panel w3-leftbar w3-border-red"> <p>I have a thick red left border.</p> </div> <div class="w3-panel w3-rightbar w3-border-pink"> <p>I have a thick pink right border.</p> </div> <div class="w3-panel w3-topbar w3-border-orange"> <p>I have a thick orange top border.</p> </div> <div class="w3-panel w3-bottombar w3-border-yellow"> <p>I have a thick yellow bottom border.</p> </div> <div class="w3-container w3-leftbar w3-border-deep-orange"> <p>I have a thick deep-orange left border.</p> </div> <div class="w3-container w3-rightbar w3-border-amber"> <p>I have a thick amber right border.</p> </div> <div class="w3-panel w3-bottombar w3-border-lime"> <p>I have a thick lime bottom border.</p> </div> <div class="w3-panel w3-topbar w3-border-khaki"> <p>I have a thick khaki top border.</p> </div> </div> </body> </html>