Lesson 9-PHP Tutorials and Notepad ++

Today I started watching the PHP tutorials, however I could not view them due to their .mov format on my laptop. Therefore, I had to waste some time shutting down the laptop and turning on the school computer. I skipped the first four chapters, teaching you how to install WAMPP since i already have XAMPP and started on the fifth chapter. So far, it's not too helpful...

Also, I finally came up with a way to organise my codes better. I have currently been using Notepad and I just realized. Notepad++ is a lot better since it tells you for example...which </div> belongs to which <div>. This makes it a lot easier.

Lesson 7, 8-CSS Vertical Text and Backgrounds

These two lessons, I tried to learn how to use vertical text through
http://bytes.com/topic/html-css/answers/513945-vertical-text-using-css-mozilla
http://scottgale.com/blog/css-vertical-text/2010/03/01/
http://snook.ca/archives/html_and_css/css-text-rotation
http://ccapeng.blogspot.com/2008/03/use-css-to-create-vertical-text.html

These sites supported each other and I tried to use the code provided. However, it failed and I decided to simply do it on photoshop at home. I came up with another solution to do so, and this was to use a different web layout instead. So i went to http://www.noupe.com/jquery/45-jquery-navigation-plugins-and-tutorials.html for some inspiration. After examining in depth, the code in
http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/
I decided to give it a try myself. I wanted a parchment type background so i decided to use a stock image from
http://www.sxc.hu/photo/1319276
However, it simply tiled instead of stretching. I came up with the theory that if the width and height is set to 100% then it should stretch. However, this was not the solution.
I found solutions
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only
but this was a failure since my code was too untidy to put into divs.
Towards the end of the lesson, Mr Dickson gave me as well as the rest of the class a series of PHP and MySQL tutorials. I think Im okay with PHP now, thanks to http://www.w3schools.com/php/ but i still dont understand MySQL

Lesson 6-Proposals and Learning JQuery

This lesson, we handed in our proposals. Unfortunately I forgot to mention to web hosting, but luckily, I still got a green light. In the final proposal, I will have to talk about web hosting and how i plan to try out free webhosts with PHP and MySqL until i find the best one.

After searching up layouts containing JQuery, I was extremely enthusiastic about learning JQuery as it seemed amazing.
http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/
http://css-tricks.com/695-learning-jquery-fading-menu-replacing-content/

This lesson, i achieved little progress however I managed to learn a lot of JQuery basics from this site
http://www.w3schools.com/jquery/jquery_syntax.asp
This site has good step by step tutorials
For example, i learnt that...
$(selector).action() is basically all JQuery is. $ defines Jquery, selector tells it where I am talking about and action tells me what to do with that section.
The way you tell the selector where you select is...
.something means there is a div named something
"p" means something a p tag
# means id

When i tried these out i found that they did not work. So after googling at home, I discovered that you had to use
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
instead of...
<script type="text/javascript" src="jquery.js"></script>
Also, after going my script again, I found a mysterious Ul and Li tag. Apparently, according to the below website, they suggest a list and bullet points
http://www.w3schools.com/tags/tag_ul.asp

Lesson 5-Delayed Proposal, Basic Layout Ideas, Talking with Client

This lesson, we learnt that the proposal deadline had been delayed to the week afterwards. However I had already submitted it.

After this lesson, I managed to hold a casual conversation with my client about the website whilst we sorted through his photos to find good photos that would then be posted on the website (which he then gave to me on my thumbdrive)

Q: So would you prefer the layout to be more normal and standardized or more fun and casual?
A: Well, since my current website is rather simple and standardized, perhaps making it a bit more interesting would be a good idea.
(from this question, I now know that I have to really spice up my website to make it interesting.)

Q: How would you like a comments section for the photos? And a login sytem?
A: Yes, that would be extremely nice for the students.

I think that covered the most important questions of the conversation. I can't remember any more.

Anyways, during this lesson and in my own time I managed to create....

This was created during class time and 2-3 break times as well as some of my time on the school bus. Working on the school bus was extremely difficult. The sunlight would get in and in order to not damage the lifespan of my laptop battery i decided to lower to brightnesss of my screen, therefore, i was basically typing blindly and hoping it worked. This is probably an extremely bad habit as it will probably damage my eyes. In the end it failed because of the huge typos i made in my css. For example i would do this....
HTML
<div class="title_history">
</div>

CSS
div.title_hisotry
{}

Typing errors like these would prove fatal to my project. Therefore, i will never work during my time on the school bus again.

Anyway, I used this website as a reference because i forgot how to align things and I had to align the login box i had made using the tutorial

http://juixe.com/techknow/index.php/2007/01/14/div-align-with-css/

 I also managed to find out how to rename a table in PHPmyadmin by using this website

http://support.lunarpages.com/knowledge_bases/article/289

.

By following a tutorial in http://www.dreamincode.net/code/snippet188.htm and http://forums.htmlcenter.com/programming-scripting/155-table-transparency-w-css.html and

I was able to learn about transparency.I was able to create semi transparent boxes which was very useful in creating...

After playing around the code, i managed to figure out the tags i didnt understand. For example...

Height and width mean the height and width of the textbox. 100% means the entire screen (i learnt that from http://apptools.com/examples/tableheight.php)

top, right and left mean the distance from the edges. I managed to edit this and add my own knowledge of css and html to create...

Lesson 4-Pitching Proposals and some difficulties

Today, we started off discussing how we would pitch our proposals on friday. I have filled in the sheet with the questions with this...
 ~~~~~~~~~~~~~~~~~~~~

Introduction to your client

Who they are

My client is my dad, this allows me to be able to frequently ask him questions and check if the website I am making is to his satisfaction.

What they do

My dad is a history professor at the Chinese University of Hong Kong.

The Problem

What does your client see as being the problem

My client currently already has a website on the CUHK website. However, in order to edit it, he has to ask his technician to do so for security reasons. Due to the sheer amount of people wanting to edit their websites, the technician takes a long time to make changes to my dad’s webpage. Also, his current image gallery only contains 2 photos per year. He would like to expand that photo gallery

What suggestions have they made for you to solve the problem?

My client has suggested that I rebuild the website which allows him to make changes to it through me and in this website, there has to be a larger photo gallery.

What alternative/additional suggestions have you already made to them?

I have suggested a website that the client could edit himself instead of through me like he expected. In the summer, I have also discovered that my client likes JQuery dropdown menus. This will most likely to be incorporated into the final website. I have done some planning for a photo gallery layout and soon, I will ask my client, which one he prefers. A simpler layout or a more fancy layout. I will do the same for the website layout. His current website is here http://www.history.cuhk.edu.hk/CourseWeb/201112/HIST4313/index.htm

Personally, I think it’s a bit plain. I would like to create a login system for students to sign in. Then they will be able to bookmark pages, comment on pages (this may be done without signing in),

Proposal for how you will solve the problem

I will create the website, mainly using Notepad. However, for the image gallery, I am likely to embed flash files to make it more animated. I am unsure if this will work yet. If this does not work, I will use Javascript and JQuery to do it. Also, I will use Photoshop to create backgrounds for the website. In Notepad, I will use a number of web programming languages such as HTML, CSS, PHP, MySQL, Jqueries and javascript. I will use XAMPP as a server when I create this and use PhpMyAdmin to create databases for MySQL. After I create the website, I will find a free webhost to host it. There are several free webhosts that support PHP and MySQL here http://blog.jimmyr.com/List_of_Webhosting_Companies_17_2008.php I will try to try them all and determine which is the best. Then, I will use a CMS such as one I have recently heard named “Cushy CMS” to make it easier for my client to edit.

While I am doing all this, I will ask my client to constantly check if I am doing anything unnecessary or anything he dislikes.

~~~~~~~~~~~~~~~~~~~

It is roughly a page and should be enough.

This lesson, I arrived early and managed to sort out the technical difficulties with my laptop. It was for some strange reason unable to run the software XAMPP even though I had tried it at home and it had worked. I spent my lunch break and a quarter of the lesson reinstalling XAMPP. Luckily, it worked and when i tried it, this webpage popped up

So, I followed a number of tutorials from these sites...

http://blog.readysetconnect.com/2008/10/the-frontend-form-and-the-php-user-login-validation-script/

(the best login tutorial out of all of these but contains adverts that always pops up, disturbing me.)

http://www.phpeasystep.com/mysqlview.php?id=3

(contained code that I attempted to copy and paste and understand. Then, I tried to create the table and it turns out that a part of the code is wrong? Which is why i switched the first one on this list. However, occasionally, there was information left out of the first one and i had to check this website since this website has the actual code)

http://www.zen-cart.com/forum/showthread.php?p=689865

(after receiving the error in the code of the previous link, I looked it up and tried replacing some words (type replaced with engine) however this did not solve the problem)

Eventually I managed to make the necessary tables using PHPmyadmin in XAMPP, however by that time, it was the end of the lesson.

Lesson 3-More Wordpress and some difficulties

This lesson, I played around with the wordpress css a little more. It started to work for me. However, I still did not understand what i did wrong last lesson. Perhaps i was editing the wrong file as there were many css files which all corresponded to things i didnt know about since i am still not that familiar with wordpress. I dont intend to involve wordpress in my coursework as I dislike it a lot.

This lesson was particularly unproductive as with the typical Friday morning lessons. I realized that i work better in the afternoons than in the morning. However, this lesson's main problem was the inability to install things or run the DOS on school computers.

I shall bring in my laptop so I can do all these things next lesson. The reason i need to do this is because I was following a login tutorial when i realized i did not know how to make a database or a table. After some research, i found that I needed either PHPmyadmin or DOS to create a table. Even though, I asked Mr Dickson if it was even possible to create a table using notepad (to which he said yes, it was perfectly possible), I didnt manage to find any tutorials. Many of the websites talked about creating tables and databases as though it was the easiest thing in the world. However, as i looked through tutorials I realized, PHPmyadmin seemed to be the easiest and most common way to create tables. Then I remembered that XAMPP, a software i downloaded a while had PHPmyadmin as well. This is why I will bring my laptop in next lesson.