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)

• www.codeigniter.com

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

• www.smarty.net

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

• ww.jquery.com

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.

——————–

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 “http://localhost/{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.

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

template.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 “http://localhost/{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

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!

   Verstuur artikel als PDF   

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

   Verstuur artikel als PDF   

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

   Verstuur artikel als PDF   

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

   Verstuur artikel als PDF   

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

   Verstuur artikel als PDF   

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.

   Verstuur artikel als PDF   

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!

   Verstuur artikel als PDF   

Hey people,
In this tutorial we will be using more “Tag’s” like in the first tutorial.
This time we will be using Tag’s that will come handy in webdesign.
If you have question’s or want to know something specific the leave a post and ill awnser it.

In this tutorial we will learn:

<UL>
<LI>
<TABLE>
<IMG>
<A HREF>

Let’s start!
Last tutorial we ended with:

<HTML>
<HEAD>
<TITLE>My first website</TITLE>
</HEAD>
<BODY>
Wow… My website is the best!
</BODY>
</HTML>

We will use this file again but make it better.

Let’s fill the website with more content, in what Tag we will do this?? …

Body Tag (<BODY></BODY>)

Delete Wow… My website is the best!

And put a table there.
We want a table that contains the: Title/Menu and Information.
3 things so we will need atleast 3 cells.

We want the title on the top offcourse and the menu and information next to eachother.
Add the next code into your Body tag.

<TABLE border=”1″>
<TR>
<TD colspan=”2″>Title comes here.</TD>
</TR><TR>
<TD>Menu comes here.</TD>
<TD>Information comes here.</TD>
</TR>
</TABLE>

Save your work and view the file.
So… with a table you can set the interface position of your website.
Every TR Tag is needed for a new row.
And every TD Tag is need for a cell inside the row.
When you got the wanted cells in a row you will need to close the TR Tag and open it again for the next row.
Got everything ready ? then close the Table Tag.

TD colspan=”2″ -> A colspan will melt your cells together here it will melt 2 cells into 1 big cell.

Let’s place something better then current title.
Delete Title comes here. and put:

<IMG src=”http://i372.photobucket.com/albums/oo170/LANTE_17/evil-smiley-face.jpg” />

Save your work and look at your file.
You got an image now… wasn’t that hard was it?

IMG is the Tag with a function “src=” that will find the source of the image (URL).

Lets do the menu, delete Menu comes here and put in place:

<UL>
<LI>Home</LI>
<LI>Photo’s</LI>
<LI>Games</LI>
<LI>Websites</LI>
</UL>

Save and view your website again.
UL tell’s the browser to sart a list every LI in it will put tekst into that list with a dot in front of it. Make sure you close your Tag’s aswell!

Now we have a nice menu, but can’t click on it.
Change you menu code into this code:

<UL>
<LI><A HREF=”index.html”>Home</a></LI>
<LI><A HREF=”photos.html”>Photos</a></LI>
<LI><A HREF=”games.html”>Games</a></LI>
<LI><A HREF=”websites.html”>Websites</a></LI>
</UL>

Save again, and view the file.
You will see you can click it now but it will generate errors.
To solve this you will need to make new files again, don’t call them index.html again but like in your menu “photos.html“.
An A Tag has a function HREF this can call objects on the internet like website’s, files, photo’s etc. aswell the A Tag supposed to be closed again! Everything between the A Tag’s will be displayed as an A Tag (Let’s you click on the thing you place between the Tag’s like images or text).

That is it for today!

Mission:

Finish the website further.
Make the menu complete and create other files to link to through the menu.
Make your own title and text.
If you can put it online aswell then do it, i would like to see what you made (and suppose other will like it to).
Everyone likes to see others work.

Good Luck!

   Verstuur artikel als PDF   

Hey people,

I want to learn you guy’s something about HTML (Simple static website’s)
I hope you can learn something from these tutorials

Let’s begin!
Open a editor you will like to use. (Notepad, Notepad++ etc.)
I do NOT recommend Word or Wordpad! Most of the time these will scramble your code.
Notepad is good enough, I myself use Notepad++ this editor will aswell highlight your code for easy use,
this way you will make the most less mistakes.

Lets start with the frist thing you will always need.

   Verstuur artikel als PDF