Wrapping up

I enjoyed this class.  Sure, there were frustrations, but, over all, I enjoyed it.  The material I learned in this class was immensely useful and interesting.  I know that I will use the lessons learned here to further my career.

I have previously built a website for my aunt’s shop which I plan to rework a lot it with the material I learned in this class.   I would also like to start a project to combine the material I learned in this class to build a site using JSP and MySQL instead of PHP/MySQL.

I was worried when I presented the site last Monday because the site wasn’t finished. I had hoped that I would have been much further on in the development of the site than I was. Still, I was surprised by its reception, so I’d like to thank anybody who thought positively of it.  I really did enjoy writing the script that I used to encrypt the data. Though, I still don’t know why it couldn’t use x’s, y’s, and z’s as keys.  Maybe it’s the formula for the encryption and the modulus contained within.  /shrug

I’d like to thank Doc Brown for teaching a great class.  I enjoyed it thoroughly.

Here’s a link to final project as presented last Monday. Let me know if the link doesn’t work.  Link

Week 13

Week thirteen entailed filling out the site. I had got the main crux of the site working last week with the .js file which encrypted and decrypted the data passed in the Vigenere Cipher. I was quite proud of it, too, since it worked the first time I tried it out.  However, after presenting the site last Monday night, I’ve discovered that using X’s, Y’s, and Z’s in the key breaks the algorithm.  This puzzles me. I just looked through the code, and I can’t explain it.

I reused the code I worked on in week 11 for the login of users. I had intended to at the very least get the user management working, and I had succeed for the most part only to learn that the registration failed.  I checked the DB, and there were empty rows added to the table. I plan to fix that.

I did have some trouble getting the message submission to encrypt the text before submission. So, once I can get that to work, which is probably what I’ll focus on next, I’ll finish the messaging system.


Week 12

This week I added the JS file to encrypt/decrypt text using the Vigenere cypher.  This has been an interesting experiment. I used the algebraic formula listed on wikipedia to compute the cipher. My algorithm is as follows:

1) Convert both text and key into number arrays.

2) Padd the key to match the length of the text.

3) For the length of the text, encrypt the letter one by one using the formula mentioned above.

4) Convert the ciphertext back to alphanumeric characters.

5) Join the array to remove commas from the array.

6)Display the ciphertext for the user.

And the decryption is the reverse of the above algorithm. Does it work? Sorta.  It has successfully encrypted and decrypted a message, but a few characters seem a bit off. I’ll have to go over the algorithm again to make sure everything is right. Anyway, sign in to the site with login: guest and pass: guest. The encrypter and decrypter is what I have implemented.  Feel free to try it out!



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.

Next Page »