post

PHP Build a Webgame Tutorial Part 3

So here the third part finally is!

Hello guys,

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

  • Create a lost password page.
  • Create a memberlist page.
  • Create a shop page.

License Agreement by downloading.
——————–
You may not sell this nor making a tutorial with the same code as i do.
You may alter the code and sell a complete php game without having to pay or credit me (only if you want to ;))
This is an open source project please share your modifications with the rest of the readers.
You must have fun scripting!
By downloading the files you agree with these terms.

Live DemoCheck it!

DownloadIts free!

 

Can’t open file? Download the extractor
——————–

Files – What do we need to get started ?

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

Like i write in all tutorials, 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.

Lets get started with part 3!
First we need to think of what we need and want, i prefer to continue with the user pages where he/she can retreive a lost password when your user is unable to play.

Lets start creating the controller for Lost account page.
Now lets go to your directory:
C:\xampp\htdocs\{your_folder_name}\application\controllers\” and create a file named “lost.php

Open the file and start editing!

lost.php

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Lost extends CI_Controller {

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

  function index() {
  $error = '';
  $content = $error.'Lost your login data?<br/>
  <form method="post">
    <table>
      <tbody>
        <tr>
          <td>Registered email:</td>
          <td><input name="email" type="text" /></td>
        </tr><tr>
          <td>&nbsp;</td>
          <td><input type="submit" value="Get my data!" /></td>
        </tr>
      </tbody>
    </table>
  </form>'
;

  $this->smarty_lib->assign('content', $content);
  $this->smarty_lib->view("template");
  }

}
?>

Like part 2 this is the base to view a page, go check it out to see what it looks like.
This won’t be enought to retreive our lost password, for that we need to define some actions.
Lets create the validation and response.

Add these lines under “$error = ”;

lost.php

if ( $this->input->post() ) {
  $this->form_validation->set_rules('email', 'email', 'trim|required|valid_email');
  if ( $this->form_validation->run() == FALSE ) {
    $error = validation_errors();
  }else{
    $error = "<strong>An email with instructions has been sent to you.</strong>";
  }
}

This piece of code will check if the input from the user is a valid email, else it will show an error.


If you have noticed the message will say that an email has been sent, hope you haven’t checked your mail for 30 minutes or longer… this email won’t be there! so stop looking and start creating the real mail.

replace this line with new code: ‘$error=”An email with instructions has been sent to you.
“;

lost.php

$to = $this->input->post('email');
$subject = "Password recovery for ".BASE_URL;
$headers = 'From: recovery@yourmail.nl' . "\r\n" .
  'Reply-To: no-reply@yourmail.nl' . "\r\n" .
  'X-Mailer: PHP/' . phpversion();
$recoveryLink = md5(date('d-m-Y H:i:s').'-'.$this->config->item('encryption_key'));
$message = "You or someone else has requested a password reset, if it isn't you do nothing else go to this link: ".BASE_URL."lost/reset/".$recoveryLink;
if ( mail($to, $subject, $message, $headers) ) {
  $error = "<strong>An email with instructions has been sent to you.</strong>";
} else {
  $error = "<strong>Sending the mail failed, try again later.</strong>";
}

We just added some basic variables for the email like subject, to address and the content with a link. And finally mail those variables to ourself.
You could try the page again to see if its working. (If you try this on localhost it won’t work unless you have set up a mail server on your computer try it online for direct results).

If you’re able to test this then you will see the mail arrives in you inbox, the only thing that didn’t worked was the link provided by the email! Lets fix this right away!

Add the this code under the index() function

lost.php

function reset() {
  if ( $this->input->post() ) {
    if ( $this->game_users->resetPassword() ) {
      $content = 'Password succesfully reset, login with your new password.';
    } else {
      $content = '<div class='errorMsg'>Password not reset, wrong information given!</div>';
    }
  } else {
  $content = 'Reset your password<br/>
    <form method="post">
      <table>
        <tbody>
          <tr>
            <td>Registered email:</td>
            <td><input name="email" type="text" /></td>
          </tr><tr>
            <td>New password:</td>
            <td><input name="password" type="password" /><input name="indentification" type="hidden" value="'
.$this->uri->segment(3).'" /></td>
          </tr><tr>
            <td>&nbsp;</td>
            <td><input type="submit" value="reset password" /></td>
          </tr>
        </tbody>
      </table>
    </form>'
;

  }
  $this->smarty_lib->assign('content', $content);
  $this->smarty_lib->view("template");
}

Add the next code under the line: if(mail($to, $subject, $message, $headers)) {

lost.php

$this->db->where('email', $to);
$this->db->update('game_users', array("lostpassword" => $recoveryLink));

And finally create a new function in the model named game_users.php

game_users.php

function resetPassword() {
  $data = array(
    'email' => $this->input->post('email'),
    'lostpassword' => $this->input->post('indentification')
  );
  $query = $this->db->get_where("game_users", $data, 1);

  if ( $query->num_rows() == 1 ) {
    $this->db->where($data);
    $this->db->update('game_users', array("lostpassword" => null, "password" => md5($this->input->post('password'))));
    return true;
  }else{
    return false;
  }
}

Try to test if you can reset your password this time. Works ? great! now that this part is done we can create a list of members when we are logged in that we could attack.

To do this we need to create a new controller and call this file ‘userlist.php‘ insert the following code:

userlist.php

< ?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Userlist extends CI_Controller {

  function __construct() {
    parent::__construct();
    if ( !$this->session->userdata('game_username') ) {
      header('Location: '.BASE_URL);
    }
  }

  function index() {
    $content = 'Member list.';
    $this->smarty_lib->assign('content', $content);
    $this->smarty_lib->view("template");
  }

}

?>

Now we can reach the page we should add it to the menu first, to see if we can only reach it when we are logged in!

Open the View named template_header.tpl (application/views/template_header.tpl)
And add the following line just above the the line: <a href='{$smarty.const.BASE_URL}logout/’>Logout</a>

template_header.tpl

<a href="{$smarty.const.BASE_URL}userlist/">Rankinglist</a><br/>

Save your work and test if it works.
If it’s all OK then we can grab some coffee or walk the dog to let our brains and vingers rest for a minute.

Back already? Ok lets continue with the member list.
Open the userlist controller and edit the index() function.
Overwrite “$content = ‘Member list.’;” with the following code.

userlist.php

$content = "Memberlist:";
$content .= "<table cellpadding='0' cellspacing='0' style='width: 100%;'>";
$content .= "<thead><tr><th></th><th>Username:</th><th>Protected?</th><th>Land worth:</th><th>Playing since:</th><th></th></tr></thead><tbody>";

foreach( $this->game_users->getUser() as $member ) {
  $content .= "<tr>";
  $content .= "<td></td>";
  $content .= "<td>".$member->username."</td>";
  $content .= "<td>".(($member->protected == 1) ? "Yes" : "No")."</td>";
  $content .= "<td>".$member->worth."</td>";
  $content .= "<td>".$member->created."</td>";
  $content .= "<td><a>attack!</td></a>";
  $content .= "</tr>";
}
$content .= "</tbody></table>";

Now we have created only the view for the list but haven’t got anything that is selecting all the players yet to display.
To do that we need to add a new model function to the user database.
So lets open the model named ‘game_users.php‘ and add the next function at the bottom:

game_users.php

function getUser($id = null) {
  if ( $id === null ) {
    $this->db->order_by("worth","desc");
    $query = $this->db->get("game_users");
    return $query->result();
  }
}

When all is saved and inserted into the code you could test your website.
Lets see if you can see the member list and the registered members.
And do not attack them yet 😉 we arn’t that far yet!

Only one page left this tutorial the shop page!
Creating pages is very similar to eachother so lets repeat the steps for the memberslist only with the shop this time.

First create a new controller named ‘shop.php‘ and add the following code to it:

shop.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Shop extends CI_Controller {

  function __construct() {
    parent::__construct();
    if ( !$this->session->userdata('game_username') ) {
      header('Location: '.BASE_URL);
    }
  }

  function index() {
    $content = 'Welcome to the shop.';
    $this->smarty_lib->assign('content', $content);
    $this->smarty_lib->view("template");
  }

}

?>

Now we can reach the page we should add it to the menu first, to see if we can only reach it when we are logged in!

Open the View named template_header.tpl (application/views/template_header.tpl)
And add the following line just above the the line: <a href='{$smarty.const.BASE_URL}userlist/’>Rankinglist</a>

template_header.tpl

<a href="{$smarty.const.BASE_URL}shop/">Shop</a><br/>

Save your work and test if it works.
If its all OK then we continue creating a new model, name it ‘game_units.php‘.
Insert the following code to get items from the database:

game_units.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

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

  function getItem($id = null) {
    if ( $id === null ) {
      $this->db->order_by("unitcost","asc");
      $query = $this->db->get("game_units");
      return $query->result();
    }
  }
}
?>

The only thing with new models is, that we need to define them in the configs.
So open up autoload.php found in ‘application/config/autoload.php
and add the new model to this line $autoload[‘model’] = array(‘game_users’);
like this:

autoload.php

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

Now in the shop controller we only need to load the data through the model to the view!
So change the next line ‘$content = ‘Welcome to the shop’;‘ in the controller named ‘shop.php‘ to the following code:

shop.php

$content = "Shop:";
$content .= "<table cellpadding='0' cellspacing='0' style='width: 100%;'>";

foreach( $this->game_units->getItem() as $item ) {
  $content .= "<tr>";
  $content .= "<td>".$item->image."</td>";
  $content .= "<td>".$item->name."</td>";
  $content .= "<td>".$item->attackpoints."</td>";
  $content .= "<td>".$item->defensepoints."</td>";
  $content .= "<td>".$item->healthpoints."</td>";
  $content .= "<td>".$item->unitcost."</td>";
  $content .= "<td><input type='text' /><button>Buy</button></td>";
  $content .= "</tr>";
}
$content .= "</tbody></table>";

Now you can see the shop has some units for sell.
You cannot buy them yet, but soon you will!

This was part 3 of the tutorial.
In the next tutorial we will create some more pages and most likely an inventory to store your units in.
Thank you for reading this part, i hope you liked it.

For those design people out there reading this and think the demo looks ugly, just send me some icons/design’s etc. to make this tutorial better to look at for everyone ;-).

License Agreement by downloading.
——————–
You may not sell this nor making a tutorial with the same code as i do.
You may alter the code and sell a complete php game without having to pay or credit me (only if you want to ;))
This is an open source project please share your modifications with the rest of the readers.
You must have fun scripting!
By downloading the files you agree with these terms.

Live DemoCheck it!

DownloadIts free!

 

Can’t open file? Download the extractor
——————–

post

PHP Build a Webgame Tutorial Part 2

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.

License Agreement by downloading.
——————–
You may not sell this nor making a tutorial with the same code as i do.
You may alter the code and sell a complete php game without having to pay or credit me (only if you want to ;))
This is an open source project please share your modifications with the rest of the readers.
You must have fun scripting!
By downloading the files you agree with these terms.

Live DemoCheck it!

DownloadIts free!

 

Can’t open file? Download the extractor
——————–

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

<?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/><br/>You need an account to enter the combat<br/>So why dont 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:

$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

<?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

<?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 = " ".validation_errors()." ";
      } 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>
        <tbody>
         <tr>
           <td>Username:</td>
           <td><input name="username" type="text" /></td>
         </tr><tr>
           <td>Email:</td>
           <td><input name="email" type="text" /></td>
         </tr><tr>
           <td>Password:</td>
           <td><input name="password" type="password" /></td>
         </tr><tr>
           <td>&nbsp;</td>
           <td><input type="submit" value="Register!" /></td>
         </tr>
       </tbody>
     </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

<?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

<?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:

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

Change it to:

$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

<?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 = " ".validation_errors()." ";
      }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>
        <tbody>
          <tr>
            <td>Username:</td>
            <td><input name="username" type="text" /></td>
          </tr><tr>
            <td>Email:</td>
            <td><input name="email" type="text" /></td>
          </tr><tr>
            <td>Password:</td>
            <td><input name="password" type="password" /></td>
          </tr><tr>
            <td>&nbsp;</td>
            <td><input type="submit" value="Register!" /></td>
          </tr>
        </tbody>
      </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

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:

//We could be logged in!

And replace it with:

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

{* 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 action="{$smarty.const.BASE_URL}" method="post">
    username:<br/><input name="username" type="text" /><br/>
    password:<br/><input name="password" type="password" /><br/>
    <input type="reset" value="reset" /> <input name="loginBtn" type="submit" value="login" />
  </form>
  <br/>
  <a href="{$smarty.const.BASE_URL}lost/">lost password</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

<?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!

 

License Agreement by downloading.
——————–
You may not sell this nor making a tutorial with the same code as i do.
You may alter the code and sell a complete php game without having to pay or credit me (only if you want to ;))
This is an open source project please share your modifications with the rest of the readers.
You must have fun scripting!
By downloading the files you agree with these terms.

Live DemoCheck it!

DownloadIts free!

 

Can’t open file? Download the extractor
——————–

post

PHP Build a Webgame Tutorial Part 1

Finally the first part has arrived!

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.

License Agreement by downloading.
——————–
You may not sell this nor making a tutorial with the same code as i do.
You may alter the code and sell a complete php game without having to pay or credit me (only if you want to ;))
This is an open source project please share your modifications with the rest of the readers.
You must have fun scripting!
By downloading the files you agree with these terms.

Live DemoCheck it!

DownloadIts free!

 

Can’t open file? Download the extractor
——————–

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 where you can check it out.

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 foldermygame” (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.

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

{* 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

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!

License Agreement by downloading.
——————–
You may not sell this nor making a tutorial with the same code as i do.
You may alter the code and sell a complete php game without having to pay or credit me (only if you want to ;))
This is an open source project please share your modifications with the rest of the readers.
You must have fun scripting!
By downloading the files you agree with these terms.

Live DemoCheck it!

DownloadIts free!

 

Can’t open file? Download the extractor
——————–

Website finally online

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

1000 unique visitors!

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).


My Galaxy Pet Status

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