Category Archives: Practice Exercises

Weekly exercises from class

Week 11 and 12 Exercises

Here they are:

Week 11: My first foray into the world of Jquery. Just one tiny step so far using a tutorial.

Week 12: Validation Exercise. I added a few CSS styles to make it a little more readable.

Not really a lot to say about these exercises, except that if I can get my head around it in time, I would love to put an event calendar on my project website. I found a tutorial that would fit, but if a few of my recent experiences are anything to go by,  it may be too much to achieve in the time left (long time glitch-solving what appear to be the most straightforward things) and I am still working on other parts of the site. I would at least like to try, though…. Sometimes things work quickly-ish.!!!!

Julie

Advertisements

Spam Tedium from Week 7

After about 5 dodgy-looking spam entries in my guestbook over the last day, I’ve now deactivated the message field. It can still be seen but does not post a message to the database table–I know that malicious code can be entered through these sorts of message boxes, but at this stage I don’t have the know-how to properly sanitise the input let alone the time (assignment priorities right now!). Anyway, I simply commented out the message parameter in the function that adds records to the database so while the message field can be seen and data has to be entered, it does not populate the database. I figured that should do it for now. I’ve also drastically shortened the amount of characters that can be accepted in the database. The entries originated from here, and I just deleted about 8 spam entries from my blog. Tedious.

Julie

Form Validation

So…onward from my attempts to validate form input  (Week7 PHP Guestbook exercise). Although I got the script working (and have since disabled it!) using this resource, I was not satisfied with the script (pregmatch/or die), for the reasons aptly described here. In a nutshell, bouncing somebody out of a page (both the ‘or die’ and ‘exit’ commands do this) when they have made a mistake with a form will at the very least annoy them and most likely lose you a user. I thought the better way was for an alert or error message to be displayed (without losing all the form data) and have found a some code here and here that I will be trying out, hopefully in the next few days (remembering to add a comment in the code crediting the source). The previous code I tried was PHP (ie server side) but the scripts I am going to experiment with are Javascript, so this will fulfil the client side validation before I cross over to the dark–I mean server–side.

Julie

PS Have been viewing source code on web pages a fair bit lately, just to deconstruct how a web page has been, well, constructed. Sometimes it’s fairly readable, sometimes not.  It does give me some code examples to follow up, mostly on the CSS side, but also allows me to try and figure out how the JavaScript has been put together (special interest in form pages!). Hopefully it will help when constructing my final project–given that I only came equipped with minimal HTML coding skill and even less CSS 🙂

I’ve also been trying to put things into practice on my own site as I go, as much as I can (ie within the time I have) as it really helps!

References

JavaScript Form Validation : quick and easy!. 2012. JavaScript Form Validation : quick and easy!. viewed 25 April 2012, < http://www.javascript-coder.com/html-form/javascript-form-validation.phtml.>

PHP Freaks – PHP Help or die() must die viewed 24 April 2012, <http://www.phpfreaks.com/blog/or-die-must-die>.

Validating E-mail and URL viewed 24 April 2012, <http://myphpform.com/validating-url-email.php>.

JavaScript Form Validation. 2012. JavaScript Form Validation. viewed 25 April 2012, < http://www.w3schools.com/js/js_form_validation.asp>

Juggling Javascript and PHP’d Off

Help…. more code conundrums. The more I try and figure something out the deeper I get (but still no solution). I mentioned here that I was working on the Week 7 PHP challenge exercise for the guestbook, which involved validating the user’s input into the phone field, ie, .checking if the number is all numbers, or numbers and spaces only, the correct number of digits and give a useful error message if the wrong number is entered’ (UTS Blackboard, 2012). So far, I haven’t solved it, despite spending a lot of time on it along with searching heaps of resources.

Although I won’t be asking users of my site for their phone number, it is important to validate user input to avoid having a inaccurate (ie useless) database, which could even contain malicious content (Welling L & Thomson L, 2009, p25). I will be asking for an email address, however, so I do need to solve this problem. The least clunky solution I found, both for email and numeric validation, is here, using  ‘preg_match … or die’ and I thought if I could just put a ‘try again’ link on the error page that took a user back to the guestbook , that may be a reasonable solution. However,  on this page I found a good argument against using ‘or die’.

I also found information regarding form validation, ie, that you should use JavaScript to validate the input in a form before it gets to the server (thus saving server load (w3schools.com, 2012) and preventing errors from getting to the database, as well as PHP validation to prevent the database from filling up with errors, invalid data and/or malicious code, etc  (Welling L & Thomson L, 2009, p25). Phew. Of course. That makes complete sense, and given that a user can turn off JavaScript,  it would be logical to have more than one validation point.

I noticed in the gb.php file we were supplied that there is a JavaScript validation to prevent empty Name and Message fields, so I included all fields in the code. Ok, so that works. No empty fields. This website seemed to have the solution to the phone field input (you do need to view source to get the code) but I couldn’t get it working in my example.

Thinking this could help, and maybe I should just try building a form from scratch…

And for alert boxes that contain all the errors within a form (using PHP), this looks useful.

Now. Stepping. Away. From. The. Code.

So, I have to solve the following:

  • validate the form input on the client side using JavaScript
  • validate the form input on the server side using PHP

Julie

Any offers of help greatly appreciated!

PS On the positive side, I did get a ‘date last modified’ function into my index page (I had a few attempts to change the date format, but no success. Then I found some code to do it, but it was incredibly long and detailed and I couldn’t get it to work. There has to be a shorter more efficient way?)

References

Field Validation with JavaScript viewed 4/24/2012 2012, <http://www.web-feats.com/classes/html2/javascripts/validate.htm>.

How to Validate a Form Using PHP Part 1: Complete with Error Messages! | Build Internet viewed 4/24/2012 2012, <http://buildinternet.com/2008/12/how-to-validate-a-form-complete-with-error-messages-using-php-part-1/>.

PHP Forms viewed 4/24/2012 2012, <http://www.w3schools.com/php/php_forms.asp>.

PHP Freaks – PHP Help or die() must die viewed 4/24/2012 2012, <http://www.phpfreaks.com/blog/or-die-must-die>.

Prasanth 2011, ‘JavaScript Form Validation : quick and easy! ‘, Javascript-Coder.com, viewed 4/24/2012, <http://www.javascript-coder.com/html-form/javascript-form-validation.phtml#custom>.

UTS Blackboard. 2012, Digital Media Technologies, Subject Materials, Week 7, viewed 24 April 2012, via login at <https://online.uts.edu.au>

Validating E-mail and URL viewed 4/24/2012 2012, <http://myphpform.com/validating-url-email.php>.

Welling, L. & Thomson, L. 2008; 2009, PHP and MySQL Web development, 4th edn, Addison-Wesley, Upper Saddle River, NJ.

Update: Wk 6 Problem Solved

My Week 6 challenge exercise was doing all sorts of weird things in IE–notably, the box was overlaying the text. Sorted now. Just a margin measurement had to be changed in the IE stylesheet from -225px to -125px under the “box” id and hey, presto! It works 🙂 Funny, I’m sure I had them the same in both style sheets….

margin:10px 0 0 -125px;

Julie


									

Cracking the Code, Cracking Up

Ok, so I had a crack (ok, that’s all the wisecracks…ok, that was another) at the first of the PHP challenge exercises yesterday (add a field for the user to enter their country of origin) and finally solved it. It took quite a bit of time (it took long than I’ll admit to, can’t believe I’m that persistent). It was slow because I had to remind myself to think in fine detail, ie, what places and how many places are affected when something changes, and make sure I’ve changed it in every place where might be relevant.

My stumbling block: the text entered into the message field was populating in the country field and vice-versa. After combing through the PHP code to make sure things were in the correct place and referring to the correct elements, I went into the MySQL database, made sure the field data types were correct, even deleted and re-added them, etc, etc. Yes, swapping them in the HTML file worked but that’s not logical–and it’s cheating! I ended up finding a similar issue on a bulletin board, and found that I hadn’t completely and exactly matched the arguments in the IF function–that is, in all three levels: IF, THEN and ELSE. Anyway, happy me, but I find if I reload the page, it repeats the message even after the text entry fields have cleared. I’m pondering that at the moment and will see what I can do about that. When I’ve got some time I’ll have a go at the phone number validation field too (glutton for punishment)!

Although the trial-and-error process is long and drawn out (particularly because I know so little about programming in general and PHP in particular, and I’m more a visual person) I gained a lot. I learned much more about managing the MySQL database eg, managing the fields, updating and so on, than if it had all gone perfectly. All this will streamline things the next time I’m doing a task. It also got me into the headspace that programming/scripting means giving instructions (and plenty of them) at a micro level–everything must be declared/stated. And code should be abundantly commented and clear to read! I saw some articles on readable code; thought this one was one of the more easily understood.

I think I’ll be more efficient next time. Ok, that’s it from me, go take a look at both my exercises if you like. Oh, and I thought I’d try applying some of the stuff we learned with CSS. Next will be a menu that is the same for all pages on my site–Alastair mentioned PHP as a method of doing that. And I’m still in the process of cleaning up that code to see if I can get it validated as XHTML 1.0 Strict.

Julie

References

design – Improving Code Readability – Stack Overflow viewed 4/14/2012 2012, <http://stackoverflow.com/questions/550861/improving-code-readability>.

Julie-Home Page viewed 4/14/2012 2012, <http://www.julie.id.au/index.html>.

PHP To MySQL Table -> Inserting Into Wrong Fields – PHP | Dream.In.Code viewed 4/14/2012 2012, <http://www.dreamincode.net/forums/topic/261905-php-to-mysql-table-inserting-into-wrong-fields/>.

Boxing Clever

Maybe not so clever. Here are my Week 6 CSS exercises. All are fine, but my challenge exercise is going all over the place in IE and I’m still trying to work out why. Ok, I’ve got the old-ish work laptop at home and it has IE 6 on it and I can’t update it because I need admin status to make changes.  However, I don’t think that’s the  issue as Mary’s and Ting’s rendered just fine on that old browser (nice work :-D). I’ve had a look at CSS compatibility tables such as this one but still can’t find the answer. Could it be the order in which I’d stacked the code? Any ideas? I’m still pondering… Will check it out on Tuesday in a later version of IE at work, for comparison and to narrow down the possibilities.

PS my Box Model exercise is different in IE6 also–the blue background doesn’t extend to the edges of the dotted border. And Safari makes the dots square.

Julie

Reference

Web Browser CSS Support viewed 8 April 2012, <http://www.webdevout.net/browser-support-css>

I needed a break …

I mentioned here that I hadn’t yet found out how to add a paragraph or line break within PHP. I searched online but found what looked like fairly complicated programming that seemed too complex for the task at hand (PHP Manual, 2012).  Then, while I was watching Alastair’s Week 5 video lecture (UTS Online, 2012), I saw a <p> tag between lines of PHP code. I did mention that I have an eye for detail in my Learning Proposal….! Anyway, I put in the <p> tags and it worked and the html validated . Here’s the code:

<?php
echo “<p>Today, in the USA, the date and time is:”;
echo date(” l jS F Y H:i:s, “);
echo “which is GMT “;
echo date (“P, “);
echo “and this month has “;
echo date(“t”) ;
echo ” days. “;
echo “</p>“;
echo “<p>The timezone is “;
echo date (“T, “);
echo “which is “;
echo date (“e.”);
echo “</p>“;
?>
I’d be willing to bet that there are more elegant, streamlined, and tidy solutions. Please let me know–my programming knowledge is pretty thin so far!

Julie

References:
PHP: nl2br – Manual. 2012. PHP: nl2br – Manual, viewed 24 March 2012 <http://au.php.net/nl2br>

UTS Blackboard. 2012, Digital Media Technologies, Subject Materials, viewed 25 March 2012, via login at <https://online.uts.edu.au>

Week 5 CSS Exercise

Well…finally got the blog/CSS exercise under control and (mostly) validated. Just a couple of things:

In the blog page, The DTD is for transitional, so I changed it to strict.

The links for the CSS needed to be between the <head> tags, not in the body.

So having changed those, the blog_final.html document was ‘tentatively’ validated. I need to make changes re the encoding to  make it ok. I need to declare the encoding somewhere. More research…

In terms of the CSS, changing some of the attributes was successful and easy enough, so I jumped to the ‘challenge’ part of the exercise. I couldn’t figure out where the pseudo class code for the hover functionality had to go–embarrassingly, it took ages (I refuse to say how long!) and although I looked online for it and found heaps of other stuff, nothing actually said where to put it. D’oh! It wasn’t until I checked Alastair’s video lecture notes again and  saw that it went outside of the styles that it worked. To make sure I would well and truly remember,  I added as many things as I could possibly think of,  including making the image go semi-transparent on hover. For the transparency, I used two commands  thinking that would make it work in most instances; however, the validator didn’t like it. Apparently one is recognised in 3.0 and not in 2.1. Here is what I based that decision on:

‘IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.’ (w3Schools.com, 2012)

I still have a bit more work to do on that and a few of the other issues the validator brought up–parse errors and such. Luckily, there are only a few! By the way, the validator validates according to CSS 2.1.

Here is the CSS code I used for making the image 50% transparent on hover:

img:hover
{
opacity:0.5;
filter:alpha(opacity=50);
}

My exercise is here

Julie

References:
CSS Image Opacity / Transparency. 2012. CSS Image Opacity / Transparency. viewed 31 March, 2012, <http://www.w3schools.com/css/css_image_transparency.asp/

The W3C CSS Validation Service. 2012. The W3C CSS Validation Service, viewed 31 March 2012, <http://jigsaw.w3.org/css-validator/>

The W3C Markup Validation Service. 2012. The W3C Markup Validation Service, viewed 31 March 2012, <http://validator.w3.org/>

Right about now…

Just realised I hadn’t posted a link to yesterday’s PHP exercise, but then decided I’d see if I could push it some more. So, with the help of http://au.php.net/manual/en/function.date.php I thought I’d add a bit more. Check it out here. You might notice I haven’t yet figured out how to get things on separate lines 😀 I kept getting error messages. I’m tired and a bit pushed for time right now to go looking but will post as soon as I’ve found the solution. I wasn’t sure what the convention is for where spaces are added but have added them before the closing quotes in each string. Another thing to look up. I was pretty happy that it validated on the first go!

Julie