Beginning Object Oriented Programming (OOP) in PHP

Interested in learning how to program objects in PHP? Well, here is somewhat good start. This is just a small post to give you a taste. To seriously get into Object Oriented Programming, there are many concepts that are in books and classes at colleges that can give you the full scope of Object Oriented Programming (OOP).

I recently did a code challenge that involved PHP and MYSQL and wanted to make my submission stand out, so I thought I should do it using OOP. I’ve always wanted to learn OOP for PHP. I have experience doing OOP in Actionscript 3, so I wasn’t starting in the dark with OOP. Anyways, from searching online and books, I compiled this class. I thought this would be a great opportunity to post my findings for anyone out there interested in moving to OOP in PHP.

Below is the class. I would have used the code format thing in WordPress, but it doesn’t seem look nice, so I decided to just post a picture.

Public allows that function or variable to be used outside of the class. You could use private too, which would prevent objects outside of the class to call a function or variable inside a class.

Customer is the name of the object. The six lines, 12-17, are the variables. The MyName function just displays the name of the customer, when you call that function.

To instantiate the object, you use the below code.

Move an Image by keyboard in HTML5

One of the things I’ve wanted to get into is this whole HTML5 games/web apps. I think a good way to learn a programming language or scripting, is to learn some of the basics, such as making something move through arrow keys and by moving things based on the mouse’s position. When I learned Lingo and Actionscript 3, I developed mini games and seeing what I could come up with. The last post I did used the mouse, so I thought why not switch it up a bit and use the keyboard. Below is a snippet of my code.

If you refer back to some of my other HTML5 postings about making an image show up in HTML5, you will see where I got the _player. I am using those source files to start with.

Keycodes:

• 37 – Left
• 38 – Up
• 39 – Right
• 40 – Down
• 13 – Enter
• 32 – Space

 

window.addEventListener('keydown', keyDownHandler, true);

function keyDownHandler(evt){
switch(evt.keyCode){
case 37:
_player, x-=5;
break;
case 39:
_player, x+=5;
break;

case 40:
_player, y+=5;
break;

case 38:
animate();
break;

}
}


 

It’s Not Flash, It’s FlashJS.

There has been many discussions on Flash being dead because of HTML5. While searching for  tutorials on using HTML5 canvas tag, I came across this open source library called ‘FlashJS.’ FlashJS is a not Flash. It uses code that is very similar to Actionscript. This open source library allows Flash Developers to make web content that is not Flash, without having to learn a whole new scripting language.

After coming across this fun library, I thought it would be fun to try out. I came up with a mini catch balls game. The example is not finished. I just wanted to post what I have so far, so you can see how cool this library is.

More Info
http://flashjs.com/

Download
https://github.com/pixelscommander/flashjs

Click the picture to play the game.

(The game is not open source)

Learning Ajax with JQuery

Ajax stands for Asynchronous Javascript and XML.

Ajax allows Web Designers to exchange content easily without having to reload the page. Ajax can exchange content with XML, PHP, and even a text file.

I  have tried Ajax once or twice before doing this experiment/tutorial, but didn’t have any success with it. Now that I am more experienced with Javascript and CSS, then I was when I did my first test, I thought it would be fun to try it again. This time, for the most part I succeeded. The only part I didn’t figure out was removing CSS class that I added. This experiment was fun though because I added content from a external HTML page and when I clicked an image, it kept on adding copies/instances of that HTML page. One of the other features that I messed around with was having it fade out. I didn’t get that to work the way I wanted to. I wanted the copy of the HTML page to be faded out and be removed when the user’s mouse was not above the image. The closest that I got to making it work was making everything on the page fade out.

I’m still working on that removing the class, but you can test it out at the link below.

Ajax and JQuery example

Here is a snippet of the code (click the picture for a better view):

On the index.html page, it has a mouseover on the image and when the mouse is over the image, it calls getAjax().  The url is the string of the URL of the request. If it’s a success, it will add the CSS class, ‘caption’ and get add the content from content.html into the caption class.

The only thing I don’t like about Ajax is that it requires Javascript, so if Javascript is turned off, it won’t work.

Useful Resources

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/ajax/default.asp

CSS3 Image Border

One of the cool things about the new CSS3 is that you can use an image as a border. Before, you had to do workarounds to get the border you want, such as making the border as an image and then using HTML or CSS to place the image on the bottom.

I want to give credit to: http://www.useragentman.com/blog/2011/03/29/pixel-perfect-css3-border-image-in-depth/.

While making a website, I was wondering, if you could use an image as a border, so I searched online and found out that with CSS3, you can do it. You would think that you would have been able to do it earlier, since it’s like using a background as an image, but apparently not. I can’t believe though it took three versions of CSS to make it possible.

My example:

Code:

-moz-border-image: url("images/border3.jpg") 2 2 2 2 round round;
-webkit-border-image: url("images/border3.jpg") 2 2 2 2 round round;
-o-border-image: url("images/border3.jpg") 23 22 22 26 round round;
border-image: url("images/border3.jpg") 23 22 22 26 round round;
border-width: 0px 0px 2px 0px;


The first four lines are the CSS for different browsers. The last line determines the width (top, not sure, bottom, not sure). I didn’t see any change when I tried putting numbers in the second and fourth slot.

Now that it is possible to use images as borders, I wonder what crazy borders people will make.