Dropdown menus

this lesson i tried making a drop down menu from http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
However it did not work since it kept creating gaps in between my links

Layout problem solved

First I decided that I would put table borders inside the table I used for content so I would know what was going on with the table. After that it was really easy. I fixed up all the mouse rollovers too.

Now I just need javascript dropdown menus. Also, I tried to view my website on a different computer last night and the content box was not centered so I have to either make it wider or make it more to the left.

Rollover Buttons

First I looked at this website
http://www.elated.com/articles/rollover-buttons-with-javascript/
But really, the tutorial looks way too complicated. It looks like its completely making too much of a fuss out of nothing...I think I'll try another tutorial...

http://www.designplace.org/scripts.php?page=1&c_id=21
This one however makes a lot more sense. Lets try this

Return of the Search for the Search Engine

The title of this entry made me laugh. Anyway, I was looking at some search engine stuff today when i stumbled across this
http://www.php-development.ru/php-scripts/search-engine.php

It allows downloading of the search engine. I'm going to have fun taking apart the code and analyzing it.

I havent been working very had on this project last week. Last week I had so much work to do and since this whole project feels so recreational, I accidentally put it aside for later. During the times I was doing the design work, I would go in to the ICT rooms to work at break times, but last week I only went in 2 or 3 times. It feels rather depressing. Never mind though. I'll work harder next week.

Success

I'm almost there. I managed to solve the background issue.

Rant

Well, yesterday, I encountered a frustrating problem. In my design, there was a white box in the center containing all the content. I was unable to put this white box in the css.

For some reason, I dont think it could find the file when i mentioned it as a background image. So when I used it as a normal image instead, I tried Z-indexes. This also failed. I have already placed everything in the div i named "content". I put the white box image.png into this div, but it simply forced the content down, even when i used Z-indexes

Centered!

http://www.webmasterworld.com/forum83/4694.htm
I had trouble centering my content div, so i used this website to help me center it.

Search Engine and Form Processing

http://www.html-form-guide.com/php-form/php-form-processing.html
http://www.devshed.com/c/a/MySQL/Building-a-Search-Engine-with-MySQL-and-PHP-5/3/
I took a look at form processing and search engines at these 2 websites. Unfortunately, i was unable to make used of them...yet.

I have saved out all the graphics. The main background as a bmp to retain quality and the others as png to retain the transparency since some had rounded edges. I put together the stuff in the css and used a table to get rid of the gaps in between the buttons.

Aunt Heidi's reply

So I asked my Aunt Heidi, a freelance programmer, about this stuff and she said that javascript was probably a more efficient way. She sent me a link that would create a search engine for me. If all else fails, I'll use this search engine

Shock

I sent an email to my client last night, asking about which design he preferred. He said he liked design no. 2 the best.

This design has rollover buttons, alternating from dark blue to light blue. When I asked my cllient why he had chosen this, he said that it looked refreshing. I was surprised

Design No. 5 finished

This has to be my personal favourite. If my client chooses this (which I'm very confident about), I'll be very happy making this. Oh, I also used a paper tutorial. It was very good.
http://pshero.com/photoshop-tutorials/graphic-design/a-scrap-of-notebook-paper

Design No. 4 finished + some ideas for no. 5

Here is design no. 4. The colours were based on my client's old website

mine

original website

Also, I came up with some ideas after looking at some more web designs. This will be design no. 5. My last one. At this rate, my time schedule will be moved up.
http://www.blog.spoongraphics.co.uk/articles/25-super-cool-paper-inspired-website-designs
This site has a lot of paper/ wood related web designs. I think this would really suit history. This will probably be my best design yet. I think I really have improved

I also found a very nice tutorial on creating wood
http://www.myjanee.com/tuts/wood/wood.htm

Design No. 4 Ideas

I think that at this rate, I'll finish ahead of time, so I can shift everything upwards in my timeplan.
My next design will be based on one of these
http://dzineblog.com/2009/06/50-beautiful-website-designs-for-your-inspiration.html

Design No. 3

I quite like this, I still havent asked my client's opinion on this layout yet. But i have to say, I love this. I think Im getting better

Grunge Designs

 A sudden act of proscatination allowed me to find this website. Very inspiring website
http://sixrevisions.com/web_design/30-beautiful-examples-of-grunge-in-web-design/

However, I was quickly brought back to earth when I realized that I didnt know how to make a grungy looking background as I had never done one before

Email and Design no. 2

First of all, I sent an email today to my aunt Heidi, a freelance programmer from Toronto. I seem to remember during my visit to Toronto last year that she and her husband has quite a large number of PHP and MySQL books, as well as Java.



Also, I created another web design, based on the stuff from my previous journal. I asked my father to give me some feedback and he said that it was quite good. However, the links did not stand out enough. They had the same blue as the background. Before he saw this, at dinner, I mentioned a sky blue webpage and he said that history subjects tended to have dark, drab colours. Therefore, my next web design will be green/brown. He said the main background was okay though, so I may keep the gradient. Also, I like the posistioning of the search bar here.

More design work

After discovering from my client that history rarely had sharp bright colours like that orange I used previously. So back to the drawing board i went.

From this website, i saw several appealing designs.
http://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/



After looking all these designs, I realized that this gradient from top to bottom really appealed to me, and I'm sure that it would appeal to most people too. Also, there are quite a few pale colours here. Therefore, the next layout i try to do will have a pale colour scheme with a gradient going from top to bottom

Seeking Professional Help

Well, for the search engine, I was completely run dry of ideas. So I decided to seek professional help from my father/client's technician

From: Roy Yiu (HIS)
Sent: 2011年11月7日 18:40
To: Cheung Sui Wai (HIS)
Subject: RE: Question

Dear Prof. Cheung,

I am not familiar with this. As I know, to construct a searching engine, you need to use a database server(e.g. mysql, ms sql…) for its backend and you may use any computing language(s), (e.g. php, aspx….) for querying and displaying the searching result(s) to the user (i.e. the front-end).

You may imagine that:

1. some particular information of a webpage, like Page title, Domain Name, Page description, Keywords…., will be collected and stored into a database. To store what kind of information will affect the accuracy and searching rate.

2. one makes a request to search “something” from the searching engine webpage (front-end). The request will be sent to the database server for processing. The searching result will be sent to the front-end webpage for displaying.

Yes, in fact, you may copy and paste the webpage information into the database for searching! However, it works but it is not efficient. Certainly, there are some API for searching, e.g.

http://code.google.com/apis/customsearch/docs/dev_guide.html

Regards,

Roy

From: Cheung Sui Wai (HIS)
Sent: Monday, November 07, 2011 5:04 PM
To: Roy Yiu (HIS)
Subject: RE: Question

Dear Roy,

Do you have any idea?

With thanks,

Sui-wai

From: Cheung Sui Wai (HIS)
Sent: 2011年11月5日 20:51
To: Roy Yiu (HIS)
Subject: FW: Question

Dear Roy,

This is a question from my daughter Laura. Could you tell her answers?

With thanks, from

Sui-wai

From: laura cheung [mailto:laura001_hk@yahoo.com]
Sent: 2011年11月5日 20:32
To: Cheung Sui Wai (HIS)
Subject: Question

I would like to ask how one would make a search engine that would search through an entire website. I do not understand how it works. Would it be through usage of PHP and MySQL? Or would it be through Javascript? Also, how does it work? Does it copy and paste content into a database and then search through that? Or is there a function/plug in that allows searching through an entire website? Thank you in advance.

Anyway, this proved to be useless since Roy (the technician) seemed to know little about web programming and the information he gave me was more about how it worked (eg. search engine searches things) but not more in depth information on MySQL.

So I decided, next, to try seeking help from my aunt, a freelance programmer from toronto. Thankfully my client (my aunt's brother) gave me her email at my request.

Javascript Validation

This lesson I worked on creating textboxes for the comments and checking if things were all filled in. I first looked at this website.
http://www.php-mysql-tutorial.com/wikis/php-tutorial/creating-a-guestbook-using-php-and-mysql.aspx

I spent a lot of time attempting to figure out what was wrong with the code since it wouldnt work. In the end, the code was too complex and I ended up deleting many essential things.  In the end, i ended up writing my own, but the experience from my previous attempts helped me a lot. I created fields for both names and comments.

However, my checking the validation still did not work. After a lot of puzzling and trialling and erroring, i finally found this site

http://www.tizag.com/javascriptT/javascript-getelementbyid.php

This allowed me to confirm that setting a variable to an html id was actually possible. Also, it told me what i was doing wrong. I had used " instead of '
After fixing this, it was all perfect.

Colour Scheme Inspiration

To improve my website design, i decided to look at some colour combinations and designs.

Colour Combinations
http://www.colorcombos.com/

http://www.colorschemer.com/schemes/
http://designshack.net/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme
http://www.colorsontheweb.com/colorwizard.asp






This website
http://www.inspiredm.com/colour-schemes/ inspired me to make a series of web designs and thus gain experience and choosing what i like best from them

I asked my client what he thought of my version and he told me that he liked it but history websites tended not to have bright flashy colours like orange i used. Instead, the blue and green worked a lot better

http://www.php-mysql-tutorial.com/wikis/php-tutorial/creating-a-guestbook-using-php-and-mysql.aspx

Photoshopping again

I discover I have developed a recent obsession with photoshopping what i did. Anyway, this was a very rough summary of the previous journal (which i hastily typed up, quite late at night, and therefore contained NO IMAGES)

Passwords

So, after two nights, I have finally figured out how to do the password thing on javascript. (I did this yesterday night (3 hours), this morning (2 hours) and tonight (1 hour)- this totals up to an amazing 6 hours. Time sure flies when you are having fun)

To be honest, I think javascript is a lot easier than php since I've been using it for some time now (a couple of summer holidays were spent on web programming), however, php is probably better and more reliable since it is probably easier to change the password on PHP. I'll probably end up using php in the end but for now, I'll settle for javascript. If i dont manage to do the php version of this i can always use this instead.

Anyway, i encountered so many problems here. Many were solved using the ever reliable http://www.w3schools.com/

first, i visited
http://www.w3schools.com/js/js_popup.asp
to find out about popups and discovered something called a prompt which would prompt you to enter something. I assumed this could be a password and set up a series of if else if statements.

The main part goes like this
<script type="text/javascript">
function showcomments()
{
document.getElementById('comment_box').style.display='block';
}
</script>

<script type="text/javascript">
function showprompt()
{
var password=prompt("Please enter the password"," ");
if (password=="hello"){
showcomments();}
else if (password!="hello" && password!=null)
{
alert ('Sorry you are not authorised to comment');}</script>
One thing that really annoyed me at first was how cancel was treated as a null value. At first my if else statement said that if you typed the password (which was "hello") then the page would redirect to another page where you could comment. And then if you got it wrong (password!="hello") then the page would redirect you to another page where you would receive a message saying that you had no authorisation.

So many things were wrong about that whole system.
1) If you hit cancel, that counted as NOT equals to "hello" so you would redirect to another page saying you had no authorisation. But what if the user had accidentally hit the button and wanted to go out? By redirected to another page would be annoying.
2) What if someone realized that the url changed to say...localhost/commentonphoto.php everytime you succeeded and localhost/noauthorisation.php each time the password was wrong. Then they could just type the url in.
3) Also the redirecting was annoying for me since I tested it at least 50 times throughout these 2 nights

Solutions
1) I realized that...what if i did this?
if (password=="hello"){
showcomments();}
else if (password!="hello" && password!=null)
{
alert ('Sorry you are not authorised to comment');}First of all, it would check if the password was right. Then, if it wasnt, it would check if the password did not equal to the password AND not equal to null. This last touch, not equal to null, made it impossible to redirect to another page when cancel was hit.

2) Okay, first of all for the comment box, if the user had the password, then the comment box would appear right? So how about combining html div tags with javascript and css to show and hide the comment box? That's what I thought, so i went and googled it and it just so turned out that it was possible.

That bit in the blue tells the computer to show the comment box. I think that block doesnt mean show, but block the css from affecting the display of the div. So I set the css to display: none first. I found out about the block and none here http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/

To fix the other page changing problem, i decided i would have an alert box pop up to say something the lack of authorisation.

Oh yeah one more thing. I forgot to mention i used a stock photo for the background
http://static4.grsites.com/archive/textures/paper/paper017.jpg
I do not intend to use stock photos in my final version. I have installed photoshop elements on my laptop now and i intend to use it create tiling textures.

SUCCESS

http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
I got slightly bored with researching the search engine so i went and started making the basic backbone of the website. It was really easy compared to the search engine stuff which I was really grateful for. I just needed a break from all of it.
This website's tutorial really helped in stretching the background. I've had several attempts before but this is the first time i've been so succesful

Search Engines Continued

http://inpics.net/tutorials/mysql/started21.html
This website helped me find out what a primary key is. Apparently it's the column that cant contain any duplicates eg. id.

http://webdesign.about.com/od/administration/a/aa091399.htm

I also found this site useful since it gave me a list of ways to make a search engine.

However, I realized after some time that perhaps, PHP and MySQL wasnt the way to make a search engine. What if it was actually Javascript? So I did some research

http://javascript.internet.com/miscellaneous/site-search-source.html

http://www.hypergurl.com/searchpage.html

 

This somehow failed since the browser would not allow searching. I would search and nothing about the page would change. Javascript has always seemed unstable. I guessed that my best bet was PHP and MySQL.

 I think the best tutorial there is out there is this one
http://www.devarticles.com/c/a/MySQL/Developing-A-Site-Search-Engine-With-PHP-And-MySQL/2/
I was using it, but i havent finished it yet

Lightbulb Moment

Finally, I have thought up a plan of action for the search engine.

1) Create pages with ids and a paragraphs worth of content
2) Browser will use MySQL to drag content into MySQL array in the content column
3) User searches
4)  MySQL and PHP searches through the content and echoes back the title, and part of the content with the key words bolded.

I must try this out now

Serach Engines

I decided to check the possibility of making a search engine. I really dont understand the concept behind a search engine that searches for keywords. So once again, I put together a poster explaining my findings. Here are the links shown on the poster
http://dev.mysql.com/doc/refman/5.0/en/fulltext-boolean.html

http://www.intechgrity.com/how-to-connect-to-xamppmysql-using/