Portfolio Handed In

Well, it's all over. My portfolio has been handed in. I have to say I will be sorry to be saying good bye to this project. I'll miss programming. I will not be taking ICT or Computer Science next year, but Film instead. But no worries! I've already decided to go and re-learn C++, but this this time, I'll be making a Windows Program instead of something that runs on the Command Line, like I had done two years ago. I first began programming two years ago and my first programming language had been C++. At the time, programming languages like this had been difficult to take on- especially for a 13 year old. Now, I have more experience, I am quite sure that I have learnt enough to become a capable (albeit Amateur) C++ programmer.

Perhaps given a few more years and a bit more experience, I will return to build an even better website for my father. Perhaps I will even build my own CMS. The possibilities are infinite.

Clint Told

So I told my client about the problem and he didnt seem to have too much problem with it, saying "Well, just put a notice there, telling them to use Internet Explorer"

http://stackoverflow.com/questions/5302302/php-if-internet-explorer-6-7-8-or-9
I decided to use PHP to create an If statement and then redirect to the homepage if it was internet explorer, I then used http://www.cyberciti.biz/faq/php-redirect/ to find the code for redirecting. It worked fine.

Giant Error

At school, I just realized that it only works on Internet Explorer. It's far too late to change everything now. The entire thing was coded for Internet Explorer. Both I and my client only use Internet Explorer. We only have Internet Explorer on our computers at home. Most of my project was done at home, and out of habit, when I came to school, I would also use Internet Explorer. I must inform my client.

See? This is Mozilla Firefox, it's similar in Google Chrome. The layout is ineffective, the javascript is ineffective. Nothing works. I must inform my client tonight.

I cannot fix it. I checked http://www.reloco.com.ar/mozilla/compat.html which says that lists the many things that must be changed in order to make it compatible with Firefox. I suppose my project was simply too well adapted for Internet Explorer

List of Software used

Notepad++ for coding.
Photoshop CS4 for website designs and graphics
Flash CS4/ CS3 to build the tutorial
XAMPP for servers etc.

Online Services
Internet Explorer
CushyCMS
000webhost.com

The end result is...
http://hisfield.netau.net/

Finished!

Finally, I have finished my final touches, I sent my client the product and the tutorial that I made on flash with it. I asked him certain questions on the email. He replied quite quickly, though I found his feedback overly positive

Flash CS4

Last night, I was working at home on Flash CS3 and the tutorial was working fine, but when i got to school and got on to CS4, nothing worked

I looked at this
http://forums.adobe.com/thread/481644
and found this...
"What I discovered was CS4 does not play nice with networked drives. If your operating on a network try saving your work to the desktop

Cheers

Joe Huck"

I saved it onto the desktop and it worked fine

Done!

I am officially finished with both the website and CushyCMS. A lot of the stuff that was left was very tedious and I saw no need to post such tedious things onto blogger. Now, I've only got to finish off a bit of the Flash Tutorial. I chose to use Actionscript 3.0, having found it quite efficient compared Actionscript 2.0 last year. Flash was quite simple really, I also saw no need to post on blogger.

FTP uploads

I've just realized i could use ftp://ftp.hisfield.netau.net/
I could probably upload things here but i dont know how yet

EDIT: i figured it out, I simply click Page, then Open FTP site in windows explorer. It then gives me a folder i can simply drag and drop to.

Also, now i need to create mysql databases and tables in 000webhost.com

In localhost, the database was called comments, but due to a character limit in 000webhost.com, I must name it comment. I hope to change this with MySQL

...okay never mind. After seeing several websites mentioning the changing of database names as dangerous (Eg. in this http://stackoverflow.com/questions/4545634/how-do-i-rename-a-mysql-schema)

I have decided to simply go through all my files and change the database name, tedious as it is

Idea

I've been thinking- it's a bit unnecesary to have the comment button and view comments button on each photo if it all leads to the same page. Maybe I'll add a couple more links

Also, I have checked the thing about the swf file in flash and it works! I simply used an animation of a person walking I had made a long time ago (years?) and converted the swf to a pdf and then it worked.

Titles

I completely forgot something important. That is putting <title> tags in my files. Now I have to go through every single one and do that.

 Also, Im thinking about making my client's tutorial in flash. I just need to check that he can view swf files okay. If not, I'll see if i can find a way around that.

Redoing graphics

A friend of mine once said that the title was irritating. Now that I look at it...the title is really unpleasant to look at. Therefore I did it again. This i used an air brush along the bottom, and the effect was brilliant

Search Engine Surprise

Wow. Today, I was going to remove this search engine once and for all...but...I felt that one last try was needed. So I tried once more...I was greeted with a rather pleasant surprise. It works! Now I dont have to remove the search engine.

I must inform my client straight away

Done! (almost)

Even though I said I'd do an if else statement, I ended up using another if statement because for some strange reason, the else wouldnt work. So I ended up typing up the whole thing.

However the phrase "No results" also appears on pages with results. This is because some of the comments are not for that specific photo...

Therefore I'll need to rephrase everything properly.No taking shortcuts like with the If statement.

I have another idea. I have heard talk of a Mysql function that counts a number of entries. I could count it and if it equals 0 then it could echo "No results"

http://www.hotscripts.com/forums/php/11586-how-count-mysql-rows.html

There. I searched for the Count syntax and this came up. I should try it myself now

Yeah, so now I simply need to get rid of the table headers if there are no results. This will be a matter of CSS visibility (like Block and whatever the other one was called)...hmmm

I've figured it out. I've seen tutorials on how to use javascript to toggle visibility. I could use that

http://stackoverflow.com/questions/1045845/how-to-call-a-javascript-function-from-php

told me how to call a javascript function from php.

So, it's done! It worked!

Now...all that's left (in order of priority)

1) Finish putting photos on site

2) Make graphics for comments section- it needs to look better. It irks me every time I look at it

3) Put it on 000webhost and make databases and tables there

4) Make Tutorial

5) Hand to client

Hopefully I should be able to get this done by the end of this week. I have a holiday on Thursday, and i intend to use it well

View Comments-Almost done!

I had a  good think about this before bedtime and during my time on the schoolbus. I thought that if I rearranged the code a bit like so (see above image)...then...First the MySQL would go through the entire table, singling out the Photo IDs and then display them. It worked. Now I just need to know what to display if there are no comments. This calls for another if else statement

I need more information

I need to know more about loops in PHP, for loops, while loops....If I knew more, i could do it.

???

This is what I've got so far. I have no clue why it says 'LauraLaura" at the bottom. I just realized how similar this was to a simple search engine. Perhpas if i find out how to create a simple search engine, it would help.

http://php.about.com/od/phpwithmysql/ss/php_search_3.htm

It contains $data = mysql_query("SELECT * FROM users WHERE upper($field) LIKE'%$find%'");
It's awfully similar to mine... Apparently its the thing that does the searching. I'll investigate a bit with this

Hmm...did a bit more tweaking and removed the echo bit. It worked. Logic works

Problem

Having taken one of the codes from the website earlier...I found that for it wasnt perfect. It repeated itself several times...

This appears to be very useful

http://stackoverflow.com/questions/4821270/check-if-value-exists-in-mysql-row
I must examine this and see if any of it is useful to me. So far I have..

So far, I've made 2 comments myself, under various names just to try it out, it worked so far, now I need to think of how best to structure my if statement

Viewing the comments

Okay so I'm done with the making the comments...now i need to give the user a way to VIEW the comments. (note to self; Truncate can empty out a table and reset the auto incrementing ID thing to 1)

I just realized that I have completely forgotten how to grab MySQL elements out onto the page with PHP....so...Im watching this video now
http://www.youtube.com/watch?v=ld6V-ZTq-38

I just realized...I've learnt so much about PHP and MySQL during this project and my previous knowledge of HTML, CSS and Javascripted has improved so much. It's quite satisfactory thinking about it. From idiot to fairly knowledgeable. I have no regrets for this project. I am grateful that my previous experiences told me to hand code it- while I watched my classmates struggle with the mysterious wordpress. I have always hand coded websites and have always known that taking code from Wordpress would certainly not help- it would only hinder my project and my learning since I would have no idea how everything works. Now that I am nearing the end of this project, I realize that I've grown very attatched to this kind of work. It's very frustrating- yet satisfying.

Curly Brackes

Finally, it worked. But...somehow the PhotoID thing doesnt work.

It turns out I forgot a curly bracket. It's always small things like this that I forget

Client Feedback

My client has replied to my email saying that he didnt mind not having the search engine as it is not the most important function of the website. He thanked me for my "thoughtful arrangement"- the tutorial

Now back to work. I have no clue what is going on here. I managed to connect to the server succesfully I think- turned out i was using the wrong username- I used admin instead of root. Now, i'll copy and past this error message into google and see what other people think...

I forgot to do something

Yeah, I told my client casually over dinner a week or so ago but I completely forgot to send an email to him confirming it

?

I am completely puzzled as to why this does not work...

<?php
$con = mysql_connect("localhost","admin");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
  $PID=$_POST["fList"];
    $STDNTNAME=$_POST["fname"];
 $STDNTCMNT=$_POST["fcomments"];
 $TMSTMP=time();
$sql="INSERT INTO commenttable (PhotoID, StudentName, StudentComment, Date) VALUES
('$PID','$STDNTNAME','$STDNTCMNT','$TMSTMP')";
    mysql_query($sql); 
mysql_close($con)
?>

OH. I just remembered I forgot to select a database...I'll try that now

Odd...I cant connect

Forgot to mention a few things

I forgot to mention a few very important emails. One is from my Aunt Heidi, the free lance web programmer and her husband who does the same, the other is from my client.

Hi Laura,

Your Aunt asked me to have a look at your questions.

Well I don't see anything obviously wrong with what you've done, so I don't know why it isn't working.

Why don't you give this a whirl instead, it is from the horses' mouth as it were:

http://www.google.com/cse/

The result of going through that wizard should give you code to paste in.

I think if you normally refer people to 'http://hisfield.netau.net/' rather than 'http://www.histifle.dnetau.net/' then you should use that name for indexing also.

There are ways to prevent a site from being indexed, in particular a robots.txt file, but that isn't something that you would accidentally have created.  But for more information on that see http://www.robotstxt.org/robotstxt.html

Search engines usually use their own peculiar data stores rather than SQL databases.

Largely this is because, unlike an SQL database, they are intended to perform text searches and/or regular expression matches within text.

Tables in an SQL database are generally already parsed into 'columns' for particular types of data so they are more easily searched.

Sometimes some of the meta data may be stored in an RDBMS like MySQL.

The other big challenge for larger search engines is that they often involve indexing a huge amount of data.

Google, Bing etc have their own search engine and infrastructure, but there are also open source search engines which are based on 'full text search'.  One of the most popular such search engine is Apache Lucene, see:

http://lucene.apache.org/

and

http://lucene.apache.org/solr/

But to run a site with back end services like this means you need access to and/or to install software on the host server itself, this may be problematic depending who and how your site is hosted.

I think from the description of your requirements google search should meet your needs if you can get it going, so I suggest you go through the wizard I pasted in at the top and let us know how that goes.

     Uncle David (& Aunt Heidi)

On Mon, Jan 23, 2012 at 12:05 PM, Heidi Cheung <heidi.s.cheung@gmail.com> wrote:

Dave, Can you help Laura, please? Thanks, Heidi

---------- Forwarded message ----------
From: laura cheung <laura001_hk@yahoo.com>
Date: Sun, Jan 22, 2012 at 12:05 AM
Subject: Re: Laura-question about Search Engines
To: Heidi Cheung <heidi.s.cheung@gmail.com>

Oops sorry. wrong email.

From: laura cheung <laura001_hk@yahoo.com>
To: Heidi Cheung <heidi.cheung@rogers.com>
Sent: Saturday, January 21, 2012 5:14 PM
Subject: Re: Laura-question about Search Engines

Dear Aunt Heidi,

Sorry to bother you once more but I would like to seek your advice once more.  The link you sent me previously

http://tools.digitalpoint.com/site_search.php

does not seem to be working on my dad's website (which i have recently uploaded due to my impatience despite not being finished yet) http://hisfield.netau.net/

When I search for things, nothing comes up.

 

I suspect that it is because google has not indexed my website therefore a google search engine will not work. I have tried to get Google to index my site by submitting the link to them but it still has not worked. Do you know how long it normally takes? Is it even related to my problem? I hand-coded on Notepad++, used 000webhost.com to host and Cushy CMS to add some content and make sure that my dad can easily edit.

 

I tried to build my own search engine using php and mysql but there were several problems i could not fix, therefore I had to resort to embedding such things :)

 

Thanks,

Laura

(i hope that the website comes out all right on your browser. I use internet explorer.)

Next, is the email from my client. I sent him an email last week, letting him try out the website a little

He particularly enjoyed Cushy CMS. I may have forgotten to mention this but, I signed up for CushyCMS. All I have to do is add the class "cushycms" to things and CushyCMS will allow the client to edit it.

INSERT INTO

So my code wont work and I dont know why...

So I tested every single part of it, the database connecting was easily tested with the if statement, the assignment of variables was tested by having it use PHP and variables to echo back what I had entered in the form. Next I tested the SQL. No problems. This image below involves the testing of the SQL of INSERT INTO. I created a separate database to test it out.

Updates

I spent several days uploading photos to photobucket and inserting them into the code of the website.
Then I learnt about form processing here
http://www.html-form-guide.com/php-form/php-form-processing.html

and how to put dates into my mysql table here
http://www.plus2net.com/php_tutorial/php_date_time.php

Forget AJAX

Okay, turns out I DO NOT need AJAX. I took one look at it, got slightly intimidated and decided to do more research
http://www.hotscripts.com/forums/javascript/39278-php-inside-javascript.html
This says that I can simply do this...
<script>
function msg1(){alert("<?PHP echo $message1 ?>");}
function msg2(){alert("<?PHP echo $message2 ?>");}
function msg3(){alert("<?PHP echo $message3 ?>");}
function msg4(){alert("<?PHP echo $message4 ?>");}
</script>

Like just put "<?PHP ?>" tags into it. Well that simplifies things.

AJAX

So I was doing some work on the photo gallery today...I had no clue. I have a habit of thinking of things before I sleep, and these past few nights have been full of dreams about MySQL arrays and the possibilities. So today, I jotted down a couple of options I could take with the comments system.

So I went with option 2-which I titled "Hard, but not as tedious". But first I needed to make a huge drop down list for the comments form. now THAT seemed tedious. I looked at ww3schools.com and they showed me how to do a drop down menu. basically you have your list in a

<option> thing 1 </option>

<option> thing 2 </option>

After typing out 3 of these, I decided "No way. There has to be a quicker way." I asked myself, what could generate all of these quickly. The answer came to me quickly-excel.

So i copied and pasted what was generated, deleted the empty spaces, and voila. Job done. It probably took me a third of the time that was needed to do it all by hand.
By the way, these are all IDs that i gave each and every photo. For example, the first photo in the 2011 lot is calleed 2011_1
So i added these IDs to the menu that pops up under each photo so that students can quickly know what the photo they want to comment on is.

And, here it is! My drop down menu.

So now, another problem has arisen. What do I do after the user has filled in the form and clicked submit...well currently, my code says "after the button is clicked, show an alert telling the person that they have commented, then return true-redirect them to the page with the close button"
Well, now i need "after the button is clicked, FIRST, insert everything into the mysql table (use PHP), THEN show an alert telling the person that they have commented, then return true-redirect them to the page with the close button"

This means that I need to somehow put PHP into Javascript. I seem to recall searching this up-everything pointed me to AJAX. But i searched it up again anyway
http://www.hotscripts.com/forums/javascript/39278-php-inside-javascript.html
This website confirmed that i need AJAX. Fine, I'll do some notes and some research on it tommorow

Almost there!

 Putting together the table. I'm in my room, so I dont have access to the internet...which explains why the images  arent showing up.

Miraculously, i shifted my laptop about 10cm to the right and suddenly WI-FI appears and I can see my images. Just one problem though....they're kind of emmm...how do i put it. Lengthening the website. I should disable the scroll bar...At least for the bottom

 Took me some time to realize that javascript didnt recognize the word, margin-left, only marginLeft...But...new problem now. I want it to be so that everytime I click the arrow button, the table shifts a bit. This means incrementing or decrementing a margin. I picked marginLeft.

http://api.jquery.com/css/
I searched up CSS and Javascript increment. And would you believe it? There it is. I just used += or -=. I had tried ++ or --which worked in my previous experiences of programming such as C++ where ++ can be used to increment
Okay, i fixed the scroll bars....so I do believe i'm done with this bit!
http://www.dreamincode.net/forums/topic/32236-hide-horizontal-scrollbars/

Idea

Okay, after a good long sleep, I've come up with the idea for the folder section. I'm going to be doing that today.
Okay, so basically I have folders. I have a table. First row is all the same. Folder after folder. Below that row, is another row. That row is for labelling the folders.

Through javscript, I will shift the table either to the left or right at every click of the arrow.

I've made my decision

I've decided. I'm going to thoroughly educate myself in JQuery/ Javascript before I attempt the photo gallery. I learn best when I take notes...so here goes!

http://www.w3schools.com/jquery/
<script type="text/javascript" src="jquery.js"></script>Can be used to embed javascript files. Which is really handy when you have long confusing lines code. Oh and remember to put all the stuff in the header if it's in the actual file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>This is the JQuery library. Always include it.

$(selector).action()
This is the syntax.
$ defines JQuery
Selector means things such as this, "p", "p.insertclassnamehere", "#elementswiththisid"
You can select pretty much anything. http://www.w3schools.com/jquery/jquery_selectors.asp
Actions is the thing you do with the selector such as hide(), show().
Hide() and Show() are actually...
hide/show(speed, callback)
Speed is how fast it happens. It can fade in/out and can "fast", "slow", "normal", ___miliseconds
Callback means what happens after all this is done.For example

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

After P is hidden, callback makes the alert spring up.
Toggle() is similar just loads better since it's hide and show combined together. It also has speed and callback
There's also slideUp, slideDown, slideToggle, fadeIn, fadeOut, all with speed and callback
fadeTo has speed, opacity (with 0-1 i think) and callback in that order

There's also html() which changes text to other text

$("p").html("W3Schools");

this changes stuff with p tags to the words "w3schools"
prepend() and append() are similar. Append adds it to the end and prepend adds it to the front

$(document).ready(function(){Insertstuffyouwanttodo});

This ensures that the document is fully loaded before anything runs/ executes. It means "when the DOCUMENT is READY do the FUNCTION of....whatever"
Therefore this kind of thing works too...
$("button").click(function(){})
"when the thing with the BUTTON tag is CLICKED do the FUNCTION of...whatever"
this "whatever" could be
$("p").hide();which means "If it has P tags, hide it."

I think the CLICK is called an event handler. Other event handlers are...
ready, click, dblclick, mouseover

$(selector).animate({params},[speed],[easing],[callback])
Phew. this is crazy. It's custom animation. Okay, we've gone through selector already, animate is an action, gone through callbacks and speed
So params is CSS properties. Just list them out like this

{width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}

 

CSS

css("name") returns the property value of the "name"

css("name","value") sets the css value to "value" for the "name"

css({"property":"value"} assigns css properties (for example

    $("p").css({"background-color":"yellow","font-size":"200%"});
height/width ("__px"); changes the size

 

Fixed form validation

Yesterday, I fixed the form validation for the comments of the photogallery.

Haha,, it turned out that I had to state every single one of the possiblities and I couldnt just go X || Y== Null

If all the fields are not filled in, an alert will appear, if they are, an alert will appear to tell you it has commented and a button to close the window will appear

I checked with my client last night about designs and he said yes to my idea. So first, let's make some icons. I decided that I would folders, and since I didnt know how to draw one, I traced off a print screen of one of my folders with the pen tool

So I coloured, shaded and decided to make an arrow since I had the feeling I would need it

Oh, one more thing, in my time plan (that is, the more updated one)- I made a miscalculation. I now have 7 days to create this photo gallery. I forgot to factor in this weekend, I thought i only had 1 week not 1 week+1 weekend.

And yes, I sent an email to my dad and after he looked at it, he called me into the room to say he was satisfied, yet when I asked him to try out the editing on CushyCMS, he seemed surprised and happy. Well, I'm glad my work is appreciated.