This week I figured that my plans were a bit off as I realized that I’ve been mostly doing framework programming in the last 2 weeks and unable to actually do much of the front-end. So this entry will be mostly about my research with the “model / view / controller” frameworking and a little bit of front-end work.

Researching good MVC practices

As the title says, I’ve spent some of the week looking at how “Model / view / controller” frameworks can work in php. The first one I found was a framework called “cakePHP” [CakePHP about page]. This one seems fairly huge and comes with a lot of little helper functions like being able to create forms and form fields that just work automatically with the controller files [CakePHP form helper]. After downloading it and trying it out (also free!), I see they use almost the same structure that I’d planned with Cornstar with the controller and view folders, and setting constants in the main index.php file, except that it uses a templating system that outputs the “content for layout” in the template. The content is filled in with the views. This is different because I wanted to use a header file and footer file for creating templates. I could potentially try this method but I’m not sure how it’d even work. The other MVC one I found was a really simple one “PHP-MVC” by a user called “panique”. [php-mvc]. This one is really simple and because of this, makes it a lot easier to figure out how MVC really works. CakePHP is good, but it’s huge and complicated with a lot of security built in, plus it has a “bake” functionaliy that lets you create entire websites via the console [Cake Bake], which seems pretty useful, but adds a whole extra chunk of code that I probably wouldn’t use for Cornstar. Another thing I notice is that because of the flexibility of cakephp, there’s a lot of other bulk in there that probably isn’t needed, like the ability to join tables with a single function or email template systems. Looking through the codebase of just these 2 systems, I could easily create my own MVC system that works best for only Cornstar.

Database

Today I built the database and found that my original plan mostly worked well apart from a couple of things like the friend system, farm sizes and the users table being now called a “farms” table. The first thing I did was created the users table. I ended up re-naming this to “farms” as it makes more sense as each user will only have 1 farm. In this table, I also split off the width and height of the farm into a separate table. This is because I wanted it harder to hack in ambiguous widths and heights and also it’d be easier to link a single set of farm dimensions to the shop system with just IDs. Another idea I had that could be implemented in future versions is that the expansions will be limited by the experience of the user. A user will only be able to upgrade when they are a certain level, and it will also cost game money. This means the farm table will need XP (experience) and level to buy. But doing this to the game would require user level system using XP and saving their level in the database. This would be too much work for a small feature. For the plants I made the “seeds” table a “plants_type” table and made the ID in the seeds table reference this with “plant_type_id”. A little extra thought was being able to use little icons for each of your neighbors. To do this, I’d need some way of either uploading images or linking ones already on the net. Ones that already exist could be a user simply choosing from a selection of icons, or maybe a random image generator using the username as a seed. As uploading may require extra security and cropping, I decided to allow users to simply add a link to their thumbnail. A proper website would need to allow uploads and cropping, but that seemed a lot of work for a small website and would only be something to consider in the future.

HTML5 template

To start programming, I could just start from scratch and write the same code that every website has, or I could just get a template of the usual HTML and css websites usually have. I find that writing CSS can be tedious because it is usually abused to get the website to work well with search engines and to have proper standards, like using list items as a menu or floating divs to the left or right in the layout. I looked around for some templates to get me off the ground running and there were a few. [HTML5 Blank Source Code Template] [html5reset.org] [Blank HTML5 template]. But there http://www.initializr.com/

 

This week I worked on the website’s template, setting up the website environment, and adding a source control using GIT and BitBucket.

Note that I refer to “cornstar.com” please don’t visit that URL. I’m using this as an example, this won’t be the actual URL. Thanks, and sorry (if you do).

File configuration and web server settings

First of all: software. This game will be a website-based game. So it should be run in a  browser. As an extension to that, not only will I be handing int eh doe for it, but also presenting it on s server for everyone to play. This will allow me to test security and show it off to my friends. So what software do I use? Well, for doing work on my local machine we have software like XAMPP [www.apachefriends.org/index.html] and WampServer [www.wampserver.com/en/], which are bundles of programs that web servers need (with all settings set for running on your machine, live web server or a local one). Both of these use a web server program called “Apache” [www.apache.org/]. Apache basically runs the server, of example, when someone requests a file, it serves it to the user, and a few other things. Apache is free, which is a plus for students like me. There is also PHP bundles in xampp and wamp, PHP is also a free scripting language for web pages. Like some other languages, it can be embedded into HTML files, and when these files are requested over the net, Apache runs the PHP executable on the web server and compiles it on the fly, producing the compiled page to the user. Wamp and xampp also both come with MySQL, which is another free program. This one is basically a database program that can be sent requests like “select * from users where user.id = 3”, and it will give you all the columns in the table “users” when the row of the user’s ID is 3. MySQL manages all the data it’s self, and you just need to give it simple requests to store, modify, and receive it. Okay so enough of the obvious stuff, do I choose wamp or xampp? Both are good and which one you need is basically personal oppinion, as they do almost the same thing. I’ve chosen WampServer as I’ve used it for 5 years and I’ve had little to no issues with it (unless I try and do something completely insane). Also look at the home page: How can you not think that’s awesome? So, after installing wamp, I was able to create a vhost (mentioned in a previous post) and link it to the root directory of the site. The reason the path is in “root” is also explained in a previous post, but it’s basically because of security. Nobody accessing the “front-end” of the server can get to anything in the directory before there, which includes logs and database login details. I then added a custom URL to my Windows’ “host” file:

127.0.0.1 cornstar.localhost
127.0.0.1 www.cornstar.localhost

This allows me to access the site via these URLs. Once the vhost and hosts file is updated you can run wamp. The next thing was getting the website templates ready. This was difficult as I had to figure out a good way to do the Model/View/Controller method so that it doesn’t come back to biter me later. First of all, I renamed the folder from “assignment1” to “cornstar” because I’m now hooked on that name. For the MVC structure, the idea I had was to create folders for each of these, plus a config folder, and a “root” folder where the site root is loaded for example: cornstar.com/ is where the program will be run from. This means I will need an index file in that root path. The choices I had for this was an index.html or an index.php. I chose index.php as the file will most likely be a stub that loads the rest of the application (like a kind of boot sequence I guess) and so will just have a php script in it. As well as the index file, there will be other folders for the program/website’s content like images, javascript and css files. These will be in the folders named “img”, “js”, and “css”. I chose these names because I am a firm believer in short URLs. Short URLs are easier to remember and look nicer in my opinion. For example, I might want to visit the about page on a website, and instead of going to something like “www.mysite.com/index.php?page_id=123&session=f39jfase0w3er0qwesjcd&message=what%20;am%20;you%20;” it would be nicer to visit “www.mysite.com/about”. However, the way this website will be done, you will notice that this will not be the case if I have to load this application from an index.php file. This is not always the case, as the index.php file is a default file (along with files like default.html or index.html [Apache settings]) so loading www.cornstar.com/ will load this index file. The other note is that it can also apply GET parameters to this. For example, “www.cornstar.com/?user_id=234”. However (again) this goes against my “nice URL” philosophy. So how do we get a nice URL like www.cornstar.com/user/234″? There’s 2 methods; 1: place folders with index files in each of them. For instance, a folder in the root with the file-name of “user” and then maybe a folder for each user (which can be created with scripts [php mkdir]). OR 2: use an Apache module called “mod_rewrite” [Mod reqrite apache doc].

Mod rewrite is voodoo

Mod Rewrite is “the Swiss Army Knife of URL manipulation” [Apache mod-rewrite]. As you can guess, using this plugin, I can fully manipulate the URLs of the web server, forcing it to load what I like. “ Despite the tons of examples and docs, mod_rewrite is voodoo. Damned cool voodoo, but still voodoo. ” — Brian Moore – bem@news.cmc.net I will use this to force the web server to interpret “cornstar.com/users/234” as “cornstar.com/index.php?controller=users&foreign_key=234” for example. Visiting this URL will load a user’s farm. In the “model” folder, there will be configuration files for each of the database tables. For example there will be a file called “users.php” in the models folder that will have settings for the users. The controllers folder will contain all the functionality of each page, for example there will be a file called “users_controller.php” that inherits the “app_controller.php” which controls all the views. The view will be a php file that includes the header at the top, contains all the page’s html, and then the footer file will be included the bottom of the file. This method is used in content management frameworks like WordPress [template layout]. The index.php will be the entry point, and all other files wil be loaded in according to the page that’s being loaded. The following diagram shows the basic idea around this, although it may change as the project evolves: [Click for larger view]

Creating core app files

The first thing I did was create a database.php file. This will hold an array of the current database’s login details and host. What I also wanted to do was, if the site is online, or local, the application figures it out and sets the correct database details:

The “Config” variable will be one that I will use throughout the application. Although it seems using a global variable is bad practice, I did think of using a singleton class for the database config, but it is recommended by many “up-voters” that singletons in PHP aren’t recommended [Stack overflow].

Next, I began creating the main juicy index.php file. Here, I start building a library of constants to refer to within the program so each file knows where other files are easier and it acts as an entry point to the rest of the application:

It looks confusing, but if you have a look at each line, it makes sense. Each of the defines is checking to make sure it’s not defined already, just in case.

At the time being, the “core.php” file is empty, but will contain some site options for easier configuration when the time comes.

The result of the above chunks of code is the following:

It seems like a lot of code to do such a simple things, but this framework I’m building is key to creating a usable application in the long run. As you can see, I can access any of the database values just with that array. So, towards the middle – end of the project, programming will become a lot easier.

Source control

I’ve used Bitbucket [Bitbucket home page] for source control as I enjoy GIT over other source controls (another one of those personal opinion things) mainly because I’ve tried perforce, SVN and git, and I just like the feel of git, mainly because of Bitbucket’s interface (and Bitbucklet supports git). Bit is a free version control system, and Bitbucket is also free (for limited use). 2 good reasons (the same reason) to use these.

For my Windows use with git, I’ll be using TortoiseGit and Git bash. I need git bash for console commands as sometimes it’s easier to use the console to do git related commands, and TortoiseGit is a GUI for git that lets you use compare tools and context-sensitive settings and tools. (I can right-click on the cornstar folder and push changes from there).

Here’s a picture of the files committed to bitbucket:

I’ll post another entry for the rest of this as it’s pretty long. See you next time.

This will be an entry to try and get some goals set in place for this project.

Seeing as I’ll be away for 3 weeks of the project, I’m really going to need to create a plan of thing that I need to do and when.

Some dates

• Project start: 17th Feb (week 1)
• Drafts and plan in by: 31st March (last post). (Week 7)
• Project Due: 15th June (week 17)

Week listing

• Week 1 – 7 : Getting draft design done and database plan.
• Week 8 – 7th April – start creating the basic files that run the game. Do the front-end rendering of the game interface. Add some controls for adding seeds (just the buttons, dropdown etc, friend buttons). Add files to bit-bucket using version control.
• Week 9 – 14th April – Create login and join screens and make users get added to database, plus read from database. create a session for logged in users and use a cookie to track their login session.
• Week 10 – 21st April – Work more on user system and ensure security
• Week 11 – 28th April – Add in functionality for logged-in users to add seeds using jquery. Adding seeds that take out  money and all the functionality of planting seeds.
• Week 12 – 5th May – add functionality for seeds to grow and draw the correct image for each type of seeds plus the stage it is at based on what data the seed gets from the database. Additional tweaks etc.
• Week 13 – 12th May – Add leveling-up system plus the ability to buy more land – land extends play area from left to right
• Week 14 – 19th May – add friend system and allow users to view friend’s boards
• Week 15 – 26th May – extra work buffer – tweaking etc.
• Week 16 – 2nd June – extra work buffer – tweaking etc.
• Week 17 – 9th June – Final tweaks to pretty much finished draft and any final additions. Final documentation. Update final online version and hand in.