Featured Posts

Nigel Bloemendal Rss

PHP Build a Webgame Tutorial Part 2

Posted on : 19-04-2012 | By : SurudoiRyu | In : Game Design, HTML, Nigel (Head caveman), PHP, Tutorials

Tags: , , , , , , ,

0

So here the second part finally is!

Hello guys,

Let me introduce you what we will be doing the second part of this tutorial:

  • Create a working login page.
  • Create a working register page.
  • Create a working password lost page.
  • Create a working profile page.

Download these files if you exactly want to follow my tutorial and place them in your directory..


——————–

You must be logged in to view the hidden contents.

Files – What do we need to get started ?

If you haven’t done part 1 of this tutorial yet, i recommend to read it first and download the files that are needed from there.

Like i wrote in last tutorial, you should play with your own design cause im not making a design for your game, this is just to explain how to create a full php webgame.
If you prefer to follow my example you could download my styled website.

At this moment there arn’t many members that downloaded it yet so i dont know if this topic is populair or not but i hope that new viewers will register to follow this tutorial and give some feedback or questions :)

While doing the whole tutorial we will be start programming in PHP in OOP (Object Orientated Programming) / MVC (Model View Controller)!

Lets get started with part 2!
First we need to think of what we need and want, i prefer to start with the user part where he/she can register and login to view their account.
If i got this, i can easy check without manual inserting rows in the Database, and let my friends test it to see if it all works.
*People other then yourself will find bugs much faster as they don’t know the system like you do.*


After i got the user part i can focus on the rest, how i see it now i will break it apart in parts of:

  1. User Login / Registration / Profile
  2. Unit setup / Market
  3. Building setup / Market
  4. Currency (with Cronjobs or by Date calculation)
  5. Attack / Defend others
  6. Leftovers like HighScore / Page content / Protection / etc.
  7. Backend to let the admin control everything.
  8. Finishing touch.

Lets start creating the controllers for Register Account, Login, Profile and Lost account.
Now lets go to your directory:
“C:\xampp\htdocs\{your_folder_name}\application\controllers\” and open the file named “index.php”

Here we will put all the handling and variables for the Login and Profile.
The Controllers will send everything to the Views so we keep the HTML code and PHP code clean, as you will see in this tutorial.
The Controllers will call the Models for database connection so we try to keep everything related to the database as well away from the PHP code.
This will give you a nice overview where everything is and easy to expand your code later with new things, or modify it without searching where you wrote the code.

If you downloaded the files of this tutorial, your “index.php” will look like this, it may differ a bit but don’t worry.

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');  
class Index extends CI_Controller {

function __construct()  {
parent::__construct();  
}        

function index()    
{      
$this->smarty_lib->assign('content', 'Welcome to WommBattle!<br />You need an account to enter the combat<br /><br />So why don't you create one now?');
$this->smarty_lib->view("template");
}

}
?>

The index() function is always the one that will be called if you call the controller (unless defined else in the __construct).
So we check if a form post is send to the page and then parse the data to the index (if we set the form action to this controller).
Type this inside your “function index()” just above the 2 rows that are already there:

1
2
3
4
5
6
7
8
9
10
11
12
$error  =   "";
if($this->input->post()){
$this->form_validation->set_rules('username', 'username', 'trim|required|min_length[5]|max_length[25]');
$this->form_validation->set_rules('password', 'password', 'trim|required');
if ($this->form_validation->run() == FALSE){
$error  =   "<div class='errorMsg'>".validation_errors()."</div>";
}else{
//We could be logged in, if username and password matches!
}
}

$this->smarty_lib->assign('loginMessage', $error);


At this point we can allmost log into our website, but before that we need to create an account first, so lets start with the register function so we can actual register and test the login form with a created account.

Create a new controller in “C:\xampp\htdocs\{your_folder_name}\application\controllers\” and name it “register.php”

We start with the basic controller code so CodeIgniter can read it, and we can open this page.

register.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Register extends CI_Controller {

function __construct()
{
parent::__construct();
}

function index()
{

$this->smarty_lib->assign('content', 'The register form will go here.');
$this->smarty_lib->view("template");
}

}

?>

Save your script and lets try to reach it, open up your browser and go to: “http://localhost/{your_folder_name}/register/“.
You will notice that the content is changed to: “The register form will go here.”

Register created

This is a good start! We will now create the real form.
Lets expand the code in “register.php“:

register.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Register extends CI_Controller {

function __construct()
{
parent::__construct();
}

function index()
{
$error        =    '';
if($this->input->post()){
$this->form_validation->set_rules('username', 'username', 'trim|required|min_length[5]|max_length[25]|is_unique[game_users.username]');
$this->form_validation->set_rules('password', 'password', 'trim|required');
$this->form_validation->set_rules('email', 'email', 'trim|required|valid_email|is_unique[game_users.email]');

if ($this->form_validation->run() == FALSE){
$error    =    "<div class='errorMsg'>".validation_errors()."</div>";
}else{
$error    =    "<div class='successMsg'>Account created with success!</div>";
}
}
$content    =    $error.'Register your account and start the battle!<br /><br /><form method="post"><table><tr><td>Username:</td><td><input type="text" name="username" /></td></tr><tr><td>Email:</td><td><input type="text" name="email" /></td></tr><tr><td>Password:</td><td><input type="password" name="password" /></td></tr><tr><td></td><td><input type="submit" value="Register!" /></td></tr></table></form>';
$this->smarty_lib->assign('content', $content);
$this->smarty_lib->view("template");
}

}

?>

Save your work and try it out.
You will see that it will give messages to you when the form fails and says it is created with success when it passes the validation.

Register form created

The validation will check on different things now:

  1. Username is required and need minimal 5 characters and maximal 25 characters also the username must be unique in our database user table.
  2. Password is only required with no further restrictions
  3. Email is required it will check if it is a valid email address and if the email address is unique in our database user table.

Now before we actually add the data to the database we will be making a model first to process it.

Create a new model in “C:\xampp\htdocs\{your_folder_name}\application\models\” and name it “game_users.php” just like how we called our table in the database.

And add this code to it:
game_users.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Game_users extends CI_Model
{
function __construct()
{
parent::__construct();
}

}
?>

This is the start of all models you will be creating, just like the controllers.
Now lets add the piece of code that will add the new registered user to the database with the given values!

game_users.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Game_users extends CI_Model
{
function __construct()
{
parent::__construct();
}

function registerUser($_POST){
$date    =    date('Y-m-d H:i:s');
$ip        =    "xx.xx.xx.xx";

//Check valid user IP on diffrent ways
if (!empty($_SERVER['HTTP_CLIENT_IP'])){
$ip    =    $_SERVER['HTTP_CLIENT_IP'];
}elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
$ip    =    $_SERVER['HTTP_X_FORWARDED_FOR'];
}else{
$ip    =    $_SERVER['REMOTE_ADDR'];
}
//End IP check

$data    =    array(
'username'     =>     $this->input->post('username'),
'password'     =>     md5($this->input->post('password')),
'email'     =>     $this->input->post('email'),
'started'     =>     '1970-01-01',
'created'     =>     $date,
'ip'         =>     $ip
);

$query    =    $this->db->insert("game_users", $data);

if($query){
return true;
}else{
return false;
}
}

}
?>

You can see that i created a new function in the model the function will insert the user given data into the database.
If you do not understand what the function does please read it a few times over or check the CodeIgniter manual on the CodeIgniter website.

Now it is almost working the last thing to do is including the model in the autoload of CodeIgniter!
Go to “C:\xampp\htdocs\{your_folder_name}\application\config\autoload.php” and scroll all the way down to line number 112.

You will see:

1
$autoload['model'] = array();

Change it to:

1
$autoload['model'] = array('game_users');

Lets try it out by calling the model in our register form!
Open the controller “C:\xampp\htdocs\{your_folder_name}\application\controllers\register.php” and add the following line:


register.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Register extends CI_Controller {

function __construct()
{
parent::__construct();
}

function index()
{
$error        =    '';
if($this->input->post()){
$this->form_validation->set_rules('username', 'username',  'trim|required|min_length[5]|max_length[25]|is_unique[game_users.username]');
$this->form_validation->set_rules('password', 'password', 'trim|required');
$this->form_validation->set_rules('email', 'email', 'trim|required|valid_email|is_unique[game_users.email]');

if ($this->form_validation->run() == FALSE){
$error    =    "<div class='errorMsg'>".validation_errors()."</div>";
}else{
$error    =    "<div class='successMsg'>Account created with success!</div>";
$this->game_users->registerUser($this->input->post());
}
}
$content    =    $error.'Register your account and start the  battle!<br /><br /><form method="post"><table><tr><td>Username:</td><td><input type="text" name="username"  /></td></tr><tr><td>Email:</td><td><input type="text" name="email"  /></td></tr><tr><td>Password:</td><td><input type="password" name="password"  /></td></tr><tr><td></td><td><input type="submit" value="Register!"  /></td></tr></table></form>';
$this->smarty_lib->assign('content', $content);
$this->smarty_lib->view("template");
}

}

?>

That should do the trick! Now try to create your first account.
*Note: you could try to create another one with either the same username or email and you will see it an error message back.*

Using register to fill the database

Ok now we registered our account but we can’t log in!
Let’s finish the login form as well!

We need to expand our “game_users” model to handle the login part.
So open: “C:\xampp\htdocs\{your_folder_name}\application\models\game_users.php” again and add this function.

game_users.php

1
2
3
4
5
6
7
8
9
10
11
12
function loginUser(){
        $data   =   array(
            'username'  =>  $this->input->post('username'),
            'password'  =>  md5($this->input->post('password'))
        );
        $query  =   $this->db->get_where("game_users", $data, 1);
        if($query->num_rows() == 1){
            return true;
        }else{
            return false;
        }
    }

This function will tell our controller if the username and password match and return true, or do not match and return false.
Like i just said, it will tell us the match outcome to the controller, so lets open our controller:

“C:\xampp\htdocs\{your_folder_name}\application\controllers\index.php”

The line:

1
//We could be logged in!

And replace it with:

1
2
3
if($this->game_users->loginUser()){
    $this->session->set_userdata('game_username', $this->input->post('username'));
}

Now we only need to change our view when we are logged in, i’ve decided to do this in the template_header view.
Later on we will create a library for this, but because we did already pretty much we will try to avoid more files we do not really need yet.

So lets open and change some lines: “C:\xampp\htdocs\{your_folder_name}\application\views\template_header.tpl”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{* Menu if logged in *}
    {if $this->session->userdata('game_username')}
        Welcome, {$this->session->userdata('game_username')}
        <br />
        Lets create some chaos!
        <br />
        <br />
        <a href='{$smarty.const.BASE_URL}logout/'>Logout</a>
    {else}
    {* Menu if logged out *}
    Are you allready part of the war?<br />
    Login now!<br />
    <br />
    <form method='post' action='{$smarty.const.BASE_URL}'>
    username:<br />
    <input type='text' name='username' /><br />
    password:<br />
    <input type='password' name='password' /><br />
    <input type='reset' value='reset' /> <input type='submit' name='loginBtn' value='login' />
    </form>
    <br />
    <a href='{$smarty.const.BASE_URL}lost/'>lost password<a /> | </a><a href='{$smarty.const.BASE_URL}register/'>register</a>
    {/if}

As you can see we added a new link called “logout”, because i like to safely close my profile so no one else can play with my game data.

Now save your file and try to login.

Succesfully logged in!

To log out we need a need controller to handle the logout process.
Go to and create: “C:\xampp\htdocs\{your_folder_name}\application\controllers\logout.php”


logout.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Logoutextends CI_Controller {

function __construct()
{
parent::__construct();
}

function index(){
    $this->session->sess_destroy();
    $this->load->helper('url');

    redirect(base_url());
}

}

?>

And we can now even logout!

At this point i will stop with part 2, now it is time for you guy’s to play with your website (mockup) create something nice for the game you’ve got in your mind and try to add more register fields and validation checks!
The next tutorial we will be creating many things for the website like the menu, the contents, and more! so be sure to check back often for updates!

Leave a message or some screenshots please, i would like to see how you guys are doing it or if you are stuck at a point i could help you with.

Good luck and have fun with programming!

PDF    Verstuur artikel als PDF   

Read Full Article

PHP Build a Webgame Tutorial Part 1

Posted on : 09-12-2011 | By : SurudoiRyu | In : Development, Game Design, HTML, Nigel (Head caveman), PHP, Tutorials

Tags: , , , , ,

0

So here the first part finally is!

Hello guys,

Let me introduce you what we will be doing the first part of this tutorial:

  • Download all the stuff we need.
  • Install it and set up the project.
  • First look at what we are working with.
  • Make a template in our own style with basic HTML & CSS code.
  • Explaining what we have done and what you can do before the next part.

Files – What do we need to get started ?

First of all we need something to compile the PHP code on our local machine.
PHP is a server side script that needs to be compiled by the server and then sended to the viewing user in propper HTML.
HTML code is a browser/client script that can be viewed with it need to be compiled by a server first.

For this we dont really need a compiler for the PHP as we won’t be using PHP in now but we will be using it in the next part!

While doing the whole tutorial we will be using a few library’s:

1. CodeIgniter (an Application Development Framework, for clean scripting in MVC)

2. Smarty (a Template Engine for PHP this will be used as the (V)iew in CodeIgniter)

3. jQuery (a JavaScript library for some nice and easy to code effects)

4. And HTML and CSS.


If you like to customize your website other then the tutorial, you should read the documents here to know what you can with it. Also if i forget to explain something they got a full documentation on their sites so you can check it out on their website.

Lets get started!
First we need Xampp go to www.apachefriends.org/en/xampp.html and download the version you need (Windows / Linux etc.) install the program by following the instructions given.

After you have installed it with success you should have a directory like “C:\xampp\htdocs\”
this is the directory where you should put your projects in to access them with your browser.
For more information about Xampp please read it on the website.

Now lets go to your directory “C:\xampp\htdocs\” and create a new folder.
Name this folder “mygame” (or whatever you like to call it, but do not use spacebar, numbers or uppercase characters)

I created a basic template for you with all the connections and Database we will be using during this tutorial.
Download it and place the files in the folder you just created.


——————–

You must be logged in to view the hidden contents.

After you have placed this in “C:\xampp\htdocs\{your_folder_name}\” we will need to adjust some config files to get it working propper.

  • Open C:\xampp\htdocs\{your_folder_name}\.htaccess, change line 3 “tutorial” with {your_folder_name}
  • Open C:\xampp\htdocs\{your_folder_name}\application\config\constants.php, change line 40 “tutorial” with {your_folder_name}
  • Open C:\xampp\htdocs\{your_folder_name}\application\config\database.php, change the variables with your database setup, also on line 47 change “tutorial” to the database name you like to use (We will set the database after this).


Now lets go to your database.

Open your browser and go to “http://localhost/phpmyadmin/” this should open the database screen for you.

Create a database with the name you earlier picked in the database.php file.
Go to import and select the database file i created for you. “C:\xampp\htdocs\{your_folder_name}\database\complete.sql”

At this point we have done all we need for now.
Lets try to open the website: “http://localhost/{your_folder_name}/” if you did it all right, then you should see: “This will be you template file.” on your screen.

You can grab a cup of coffee now or some food cause you completed the first part,

Lets go further with the real thing now!

Lets go to the template file and start designing our webgame!
Open “c:/xampp/htdocs{your_folder_name}/application/views/template.tpl“.

You will see the next lines in it:

Here we will begin with creating our style.
If you don’t have any knowledge with basic HTML i like to reffer you to my other tutorials i have some basic HTML tutorials there.

Click here for the first HTML tutorial
Click here for the second HTML tutorial
Click here for the third HTML tutorial
Click here for the fourth HTML tutorial

Lets create the frame for the website first, we will need the page to be centered and have a menu at the top and when a player logged in we want a menu at the left aswell.
We will create a page with this setup.

Logo and menu
Menu
if
logged
in		 Here all the information will go.
Your copyright etc.

Lets start with writing a wrapper to keep it all together and in the center.

template.tpl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{* Header will be inserted at the very beginning of every page as it will always be the same. *}
{include file='template_header.tpl'}

{* Content will be diffrent and keep every page that is called *}
<div id="wrapper">
<div id="weblayout">
<div id="header">Logo and menu</div>
<div>
<div id="menu">Menu if logged in</div>
<div id="content">Here all the information will go.{$content}</div>
</div>
<div id="footer">Your copyright etc.</div>
</div>
</div>
{* Footer will be inserted at the end of every page as it is always the same. *}
{include file='template_footer.tpl'}

What we have done here is created some blocks with text in it, it will look like some simple text rules now if you open your website but we will fix this!
We gave every div an unique name so we can reconize what it will be (aswell as the code will reconize this).

Lets give the website some color!
Open “c:/xampp/htdocs/{your_folder_name}/public/css/default_style.css“.

You will see 4 things in there:

  1. body{}
  2. a{}
  3. a:link{}
  4. a:hover{}

Lets put our just created blocks in it and give them some color  (If you give an element the Tag id=”" you can call them with # in your css file)

default_style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body{
background-color: #000000;
color: #000000;
font-family: arial;
font-size: 12px;
margin: 0px;
padding: 0px;
}

a{

}

a:link{

}

a:hover{

}

#wrapper{
/* we need the full screen so we can center easly in the browser */
width:100%;

}

#weblayout{
width: 950px; /* width of our website */
border: 1px solid #FFFFFF;
margin: 0px auto;
}

#header{
height:225px;
width: 100%;
background-color: #FF0000;
}

#menu{
float:left;
width:225px;
min-height: 300px;
background-color: #00FF00;
}

#content{
float:right;
width:725px;
min-height: 300px;
background-color: #FFFF00;
}

#footer{
clear: both;
height:30px;
width: 100%;
background-color: #0000FF;
}

If you save our work and try to open you website again you will see a big difference with the last time you visited.
We gave the blocks some style and created the first part of our mockup.
Do you want to know more about css? Try my tutorial or visit w3schools for more information about what you can do with it.

At this point i will stop with part 1, now it is time for you guy’s to play with your website (mockup) create something nice for the game you got on your mind!
The next tutorial we will be creating many things for the website like the menu, the contents, and more! so be sure to check often for updates!

Leave a message or screenshots please, i would like to see how other’s are doing or if you are stuck at a point i could help you out with it.

Good luck and have fun!

PDF Creator    Verstuur artikel als PDF   

Read Full Article

New upcomming tutorial.

Posted on : 11-11-2011 | By : SurudoiRyu | In : Updates

6

Hey guy’s,

It has been a while since i posted a new tutorial.
I’ve been thinking of a complete project from start to end.

And came up with a complete PHP Game tutorial.
Ill do some research first on what i will be using (like CodeIgniter / Cake, jQuery, MySQL etc.)
After i know what i will be using i will write like a 10 part tutorial to create the complete project.

I just need some idea’s on what we will be using. Will it be army VS army ? or perhaps aliens?
Please post your idea’s before i start making the tutorials.

Creëer PDF    Verstuur artikel als PDF   

Read Full Article

Website finally online

Posted on : 14-10-2011 | By : SurudoiRyu | In : Nigel (Head caveman), Updates

Tags: , , , , , , , , , ,

0

Today we are proud to announce that our new website is finally online!
It took some time to create but we are finally there.
The website is writen in dutch language, we won’t go international with it, but i you have a project you would like us to do, then we can think about it and perhaps do it anyway.

Soon we will continue with My Galaxy Pet again, but for now our website is more important.

http://www.ungahstudios.com

PDF Printer    Verstuur artikel als PDF   

Read Full Article

1000 unique visitors!

Posted on : 11-04-2011 | By : SurudoiRyu | In : Levensverhaal, Nigel (Head caveman)

Tags: , ,

0

I just checked my website statics and found out that at 1 April 2011 i accomplished to attract 1000 unique visitors from around the world to my personal blog.

The only thing is that i never see any messages, im trying to do my best to communicate with the readers but no success so far.
Lets hope that it will become better the next 1000 visitors.

I want to know what type of tutorials the people reading want.
1. 3D Max
2. PHP
3. Unity3D
4. Realmcrafter
5. Other (name it).


PDF Download    Verstuur artikel als PDF   

Read Full Article

3DMax Tutorial – simple buildings to understand the basics

Posted on : 11-04-2011 | By : SurudoiRyu | In : 3D Max, Nigel (Head caveman), Photoshop, Tutorials

Tags: , , ,

0

Hey peepz,

I have added a simple tutorial document here.
Are you starting with 3D max but have no idea where to begin ?

The document is only in dutch at the moment but if there are enough reply’s i will start translating it.

Do you want to follow this tutorial ? Just reply with yes! or something like that :)

PDF    Verstuur artikel als PDF   

Read Full Article

CMS system completed!

Posted on : 15-03-2011 | By : SurudoiRyu | In : Development, Levensverhaal, Nigel (Head caveman), Updates

Tags: , , , , , , ,

0

Our CMS system is finally fully functional.
Our products are currently only for The Netherlands.

But if you like we can change the system for your needs.

If you need a website you can always contact us and we can discuss the possibility’s

PDF Creator    Verstuur artikel als PDF   

Read Full Article

My Galaxy Pet Status

Posted on : 16-02-2011 | By : SurudoiRyu | In : Development, Game Design, My Galaxy Pet, Nigel (Head caveman), Updates

Tags: , , , , , , , ,

0

Hey peepz,

Today im happy to announce that we are almost ready for the first alpha stage for My Galaxy Pet.

We only got a few more things to do before we really gonna start an alpha test.

One of those things is finishing the flash template which will load the custom made player into the game.
And the other is that we want a nice looking frontpage for as long as we are developing the website, where you all can view the updates we have made before the website goes online.

The Alpha test will be in a closed group so please don’t ask for an invite.

The website will be found here: http://www.mygalaxypet.com

Creëer PDF    Verstuur artikel als PDF   

Read Full Article

Happy new year!

Posted on : 03-01-2011 | By : SurudoiRyu | In : Levensverhaal, Nigel (Head caveman)

Tags: , , , ,

0

I wish everybody a happy new year!
Let’s be this a year with much love and great games! =)

Also for us this will be a great year first product that is about to be released in this year!
More about this as soon as we have more content created.

PDF Printer    Verstuur artikel als PDF   

Read Full Article

It’s been a while…

Posted on : 11-10-2010 | By : SurudoiRyu | In : Development, Game Design, My Galaxy Pet, Nigel (Head caveman)

Tags: , , , , ,

0

It’s been a while since i have posted something.
At this point i can finally give you readers some eye-candy.
To show you where i am busy with.
It is not much but it give’s enough detail of what it will be ;)

Enjoy!
Our advertisement banner!

PDF Download    Verstuur artikel als PDF   

Read Full Article

Previous