Saturday, 9 November 2013

Post 1: Interactive and AJAX compliant Website

 Setting up a Website with HTML / CSS / JavaScript, MySQL & AJAX


About one week ago I proclaimed publicly for the very first time that I want to become a Software Engineer (SE) intern at Google Munich. I'll apply in March 2014 despite the fact that I'm not a programmer or Computer Scientist neither by craft nor by profession. So, I set myself the goal of gaining the missing knowledge until March 2014. In my second Blog post I made a list of knowledge and skills that is needed for the internship and set up a plan of how to gain this knowledge: Each week I'll publish a small project that will cover the skill set and knowledge that is required to get the internship position. Further more I'll explain my projects in detail so even newbies can do it too. Trust me, if I can do it, so can you.

Today, I'll show you the result of the first self assigned project. It is a Website where you can login or register and after that get access to a game. The project is based on HTML / CSS / JavaScript and AJAX. Further more there's a MySQL-database behind that saves the user datas. I'll explain to you in detail how I used these technologies to build the website.
But I won't stop there. In the following days and weeks I'll work on this project in addition to my other projects. So, expect slight changes along the way.

This is the my website:

http://www.mottle.de

It's not finished yet. But the AJAX technology does show in the "Register"-form: If you type in a user name that is already in the database or type nothing in, then the form will display a text that says "false", otherwise "true". If the login is successful, then you'll get to a Pong game you can play on your browser.

If you want to try it out, here are the Username and Password:
Username: test
Password: 123

You can steer the pads with the "W" and "S"-Key and the Arrow-Up and Arrow-Down-Keys.

I'll publish the explanation and a tutorial about everything (Login/ Register form, Checking the login, setting up a database and the implementing the Game) you saw on this site soon, so you can build the very same project from scratch.

Tweet