This week, I updated the site with a login process that was covered in class last week.  This was more object oriented than I had coded the week before. What’s amusing about that statement  was that I used the mysqli object last week whereas the code within the objects this week are procedural yet are included as objects.

For instance, last week it was:

 $db = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

to connect which creates a mysqli object.  This week, the codes is procedural inside the object, but outside, when used, the statement is OO as:

$db = new DB(); $db->connect();.

I like this approach better since my code from the previous week seemed ‘looser’ than this algorithm.  I still need to study it a bit. Either way, I adapted it to suit my continued project.

A user can register an account, login, and logout on the site now.



I made an ERD for my CipherPunk site that I’m building for the class.  I’ve included a picture of it. One note: the friends_id field in the messbridge table is the id from the friends table. I was going to include the message id in the friends table, but since there will be a potential of plenty of messages between the same two friends, that it would be better to pull that out into its own table, hence messbridge.  I also didn’t want to include personal information as a security precaution.  To verify a new friend, the recipient of the request will need to type in a catchphrase which will match the initial entry. Once approved, they can share a key and send messages between each other. Also, the users and friends table could be considered a unary one to many relationship due to the friend_id field being a foreign key from users linking it to other users.  Users won’t be able to see other people on the network besides the ones they are friends with(after approval, of course).


The link to the site.  Guest account is: login -> guest, password -> guest. The register user is not up yet. It just logs the person into the site.

PHP Telephone Directory

Today I finished a telephone directory in PHP. You can view it here.

I had learned PHP last Spring in my Web Database Application Development class with Sharon Burlingame. Then, we took nearly a semester to go over the language along with MySQL. This directory was a great  tool for practice to keep my skill fresh.  I hadn’t had the need to modify files with PHP since the class–it has always been managing data with MySQL.

The biggest trouble I had with the assignment was getting it to read and write to the file.  I would read the file each time necessary to get the current listings, produce a 2D array containing 1) each individual listing and 2) the details of that listing. I could then edit that array and rewrite the file.

I have used PHP and MySQL already to develop a website for my aunt’s shop.  The task now is for her to populate the site to make it usable for her business.  I’m currently working with her on that as I can.  This summer I’m tempting to update the site  with an easier to manage framework and add skills that I have learned in this class to flesh it out more.

HTML5 Canvas

This week I worked on a side scrolling shooter game using HTML5′s canvas element and javascript. This time around, I used no jQuery and no other libraries outside of Bootstrap.  I did grab some pictures off Google Images and copied a function to help animate the game from Dr. Brown’s Balloon Attack game.

I have the player moving use WASD keys and shooting with the spacebar.  However, when the player isn’t actively pressing the keys, the avatar is moving backwards and down by a slight bit as a penalty for being lazy and not moving the triangle.

I installed three enemy types into the game. Enemy one is faster then the rest but dies after one shot and is worth 100 points. Enemy two is slightly slower but takes 3 hits to kill and is worth 300 points. The third enemy type is the boss which is still slightly slower, takes 20 to kill, and is worth 1000 points.

Collision detection was a bit tricky at first.  My troubles stemmed from where to call the collision detection function, logical operators, and getting the function to work with projectiles and the player.

Another hangup that I discovered was with player movement.  There’s a slight lag when moving which makes it seem a bit clunky.  This comes from the OS registering a keypress event after the keydown event which then returns to the keydown event. I tried putting in a line of code to disable the keypress event though I don’t think it helps at all.

Anyways, here’s the game:  MS Attacks, the portfolio

And here’s the SHA-1 hash for the index.html for the game: 8dc77b7aa3ee52f7937407155962515b8e829f50 and the MD5 hash:  61819f1e359ddf668a8d6197e72a02df



Shape Invaders!

I have created….. Shape Invaders!  (I can’t draw.)

jQuery makes the JS a bit quicker to write even if it is in a form that I’m not used to. I’ve spent the this night, and with the majority being worked on last night, finishing up the project. I have paged through many API listings, migration notes, and tutorials to get this thing working. And it does!  I initially wanted to make a Missile Command clone, but as I neared half way through setting up the playground, drawing backgrounds and actors, and getting individual parts moving, I decided that wasn’t a good idea. I couldn’t think of a way to draw a line from the player which I had rotating to aim towards the falling enemy.  So, I made the player crawl around the floor to fire upwards at the falling enemies of red hexagons and green pentagons.

The enemies fall starting at random x intervals from the top of the playground.  They are randomly produced in a couple of ways: 1) there’s a randomized chance that an enemy will fall, and 2) if one does fall, there’s a randomized chance of which type of enemy falls with 80% being the red hexagons and 20% being the green pentagons.  I’ve installed intervals where the enemies will increase speed by a set amount. The red hexagons will increase speed every 500 points that the player makes by 0.5 pixels.  The green pentagons will increase speed every 1000 points by 1.  The red hexagons start with a speed of 5 whereas the green pentagons start at 10. This will make the game increasingly difficult, especially as the game progresses.

I couldn’t think of a way to remove the missile after it collides with the enemy after I discovered that, when the missile collides with the enemy, the enemy was removed instead. Which was a happy accident since I wanted to remove that anyway.

Shape Invaders!


1) I would use Javascript to validate user input, encrypt the text before it is sent to the server, and decrypt the data received from the server possibly using AJAX.

2) Encrypting/Deciphering would need to be dynamic. As would the sending and receiving of messages.

3) User input would be the primary cause of the dynamic events. The database will also cause events if there are new messages and management thereof.

4) I will be primarily using click events, key events, and on page load events.

5) I will structure events by adding listeners in the <head> section and directing them to the appropriate functions.

6) There will be plenty of forms to check. I’ll check if the user entered text into the fields, check if the input is valid, and alert the user of any possible errors and to which field the error arises from.

7) I will use asynchronous data to decipher data and possibly as a remembered user auto-login based on a cookie.

I wrote two versions of the exercise for this week.  The first one just generated a set form.  The second now generates a form based on user input by splitting the input line by line.  I coded one function which controls the input while directing the flow to other functions which generate each input type.  I used the large size for the grid view which looks a bit too large for the checkboxes.



Javascript seems to be great for validating data before it is sent to the server.  I’ve built a site without it using PHP and MySQL, and using JS to validate the data would have saved a lot of calls to the server.  The site wasn’t as dynamic as it could have been.  I can also see JS adding and removing CSS styles to aid in the user experience.

If a field is empty, an alert is displayed:


After the alert, the border color of the field changes to red:ifEmptyBorder


If any or all fields are empty, another alert dialog is displayed:


And, that is as far as I got.


This week I have played around with using Bootstrap to aid in designing websites. It doesn’t seem all too difficult. I was able to modify a template listed on the official Bootstrap site to create an opening for a traveling circus’ web page. You may peruse it here.

The tedious bit concerning Bootstrap was discovering all of the many classes one can add to each element and how they all fit together. The result is very pleasing, and I was able to gear the site to accommodate mobile devices and a desktop. Although, the site that I am building is going to be primarily for mobile devices.

I have thought up a better site, or “app,” than before. I have kept the cipher theme in tact, but I am going to allow it to send messages to friends in code as well as using the app to encrypt/decipher text. The app will track a user’s friends, their keys, and new and old messages. I have thought up a way to draw a key using a grid of letters as well. That grid will be added later. I will also add a friend’s profile later that will track useful information and the keys that the two have agreed upon outside of the app. The messages will be stored on a DB, so there really isn’t any “sending” of messages, but they will be tied to each user’s account. The user must login or register to be able to use the app.

Here is a link.

I like using Bootstrap. It sped up development considerably. I also delved into the less code a bit for the Circus site to change colors for some of the header and text to better fit the site.

One note: The exit button doesn’t work on purpose. The button is there to exit the app which I haven’t coded in yet. Ideally, I’d like to discover some way to check for the platform running the site and remove the button if the device is, say, a PC.

Update to Haskell

I may have to postpone my forays into Haskell. I don’t think I’ll have the time.


I dig using less. It makes writing CSS less tedious(no pun intended). Mixins and variables is a very useful tool indeed!

I made often used color, font, and sizes into variables that I called throughout the less file. I was able to use mixins copy blocks of code to be used in different selectors. I used calculations on the size variables. I used color functions to lighten or darken patches of the design. I need to play with this more.

Though, to be fair, this weekend I’ll try to redesign the site to prepare for bootstrap and the direction I’d like to take with it. I like a Terminal-like design, but I fear that it won’t lend itself well to the format that I have in mind. Here are some of the mockups:


Main Content


The Home page will offer what the site does and news. The Main Content will host 4 text boxes and two buttons. One set will encrypt and the other will decrypt. The About page will give information on cryptography in general and try to explain what the de Vigenere Cypher is.

Anyway, here’s the link to this week’s assignment: the week2 version using LESS: Link


So, I’ve started to learn haskell on the side.  It’s a very interesting way to program.  Haskell is a functional programming language.  Instead of determining how something should work, you describe how it is. If I get anywhere, I’ll try to remember to include something here.  Here’s a link to the online document which I’m using to learn it. Learn You a Haskell

Next Page »