dinsdag 19 oktober 2010

Dynamic HTML page using PHP and DOM

For a project I wanted to make a property system that
could connect to MySQL to retrieve and set properties
which would be entered on a HTML page.

Interaction between form elements and php scripts that
eventually would connect to a database to get and set
all the data.

Mouse coordinates are shown on the board, but the next
step which would involve setting the property isn't
implemented.




frames.php

<?php


echo <<<HTML


<iframe name="editor" id="editor" scrolling="auto" width=800 height=600 
src="edit.php?cmd=board" style = "position:absolute;left:1px;top:1px">
</iframe>


<iframe name="properties" id="properties" scrolling="auto"  marginheight="14" 
src="edit.php?cmd=properties" style = "position:relative;left:800px;top:1px;">
</iframe>


<iframe name="data" id="data" scrolling="auto"  src="edit.php?cmd=data"
 style = "position:relative;left:900px;top:1px;">
</iframe>


HTML;
?>


board.php



<?php


echo <<<HTML
<head>
<link rel="stylesheet" href="css/mycss.css">
</head>
<form name="Show">
<div class="game_area" width=800px height=600px>
</div>
</form>
<script>
var IE = document.all?true:false;
if (!IE){
         document.captureEvents(Event.MOUSEMOVE)
         document.captureEvents(Event.MOUSECLICK)
}
document.onmousemove = getMouseXY;
document.onmousedown = getMouseClick;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
        if (IE) {
                tempX = event.clientX + document.body.scrollLeft;
                tempY = event.clientY + document.body.scrollTop;
        }
        else {
                tempX = e.pageX;
                tempY = e.pageY;
        }
        if (tempX < 0){tempX = 0;}
        if (tempY < 0){tempY = 0;}
if(IE){
parent.document.getElementById('properties').contentWindow.document.getElementById('x').value=tempX;
parent.document.getElementById('properties').contentWindow.document.getElementById('y').value=tempY;
}else{
parent.document.getElementById('properties').contentDocument.getElementById('x').value=tempX;
parent.document.getElementById('properties').contentDocument.getElementById('y').value=tempY;
}
return true;
}
function getMouseClick(e){
        if (IE) {
                if(event.button > 0)
parent.document.getElementById('properties').contentWindow.document.getElementById('button').value=event.button;
        }else{
                if(event.which > 0)
parent.document.getElementById('properties').contentDocument.getElementById('button').value=event.which;
        }
return true;
}
</script>
HTML;


?>



mycss.css


.game_area {
        background-color: #08000d;
        width: 800px;
        height: 600px;


}









properties.php

The database button COULD run a PHP script that uses a MySQL database.
<?php
        echo <<<HTML
        <FORM name=properties>
                X <input type=text id="x" name="x"><br>
                Y <input type=text id="y" name="y"><br>
                B <input type=text id="button"name="button"><br>
                <input value="database" type=button 
onclick="javascript:parent.document.getElementById('data').src='edit.php?cmd=data';"><br>
        </FORM>
HTML;
?>


data.php

But we do not connect to a database for this demonstration. We just retrieve
the x coordinate and show it.

<?php
        echo <<<HTML


        <script>
                function onload(){
                        var IE = document.all?true:false;
HTML;




        echo "if (!IE){";
                // chrome:
                echo "alert(' Not Internet Explorer '+parent.document.getElementById('properties').
contentDocument.getElementById('x').value+'');";
        echo "}else{";
                // IE
                echo "alert(' Internet Explorer  '+parent.document.getElementById('properties').
contentWindow.document.getElementById('x').value+'');";
        echo "}";


        // Complete function
        echo <<<HTML
                        return true;
                }
        </script>
        <body onload='onload();'>
        </body>
HTML;


?>

donderdag 7 oktober 2010

Virtual Machine CentOS 5.4 running PHP, MYSQL Apache (LAMP)

Hardware: Mac Mini (192.168.2.250)
VMWare Fusion: 3.0.1            

CentOS 5.4 Virtual Machine installed with Server packages

The network router forwards traffic from port 80 to 192.168.2.80

// Check
vi /etc/sysconfig/network-scripts/ifcfg-eth0
IPADDR=192.168.2.80
GATEWAY=192.168.2.254
NETMASK=255.255.255.0


Root access permit in /etc/ssh/sshd_config
PermitRootLogin yes

install php:
yum install php


install mysql-server mysql:
yum install mysql-server mysql


yum install php-mysql

// start apache

service httpd restart

// Every time after reboot
chkconfig httpd on
chkconfig mysqld on

// Mysql password
mysqladmin -u root password hiddenpass

 
index.php
<?php

$db=mysql_connect('localhost', 'root', 'hiddenpass');
mysql_select_db("test", $db);
$result=mysql_query("SELECT * from MARTIN");
if($r=mysql_fetch_assoc($result)){
echo "a : {$r['a']}\n";
}

Resume:
- Apache 2
- PHP 5.1.6
- MySQL 14.12

Logical Volume Manager and one big volume with multiple disks


How to create one big LVM with multiple disks

NFS Storage

REMEMBER: If you want to create LVM on the rootdisk you
should install LVM from scratch. You cannot convert the
bootdisk without creating a temporary disk. You can
resize the partition but there must be more than half of
free space and you need to boot into single user mode!!!!
The storage that we added to a Fedora 8 machine is
attached to the SCSI bus. We put a SCSI controller
in the machine and attached some SCSI storage to
the machine.
We want to make this storage accessible through the NFS
environment so that VMware and Unix machines can access it
Mainly for test purposes so the storage is Read Write for all!
The disks:
/dev/sdb, /dev/sdc, /dev/sdd are 18 GB disks
/dev/sde, /dev/sdf are 34 GB disks

FDISK actions

The disks were used by other OSes so first I deleted the partition
using fdisk
storage# fdisk /dev/sdb

The number of cylinders for this disk is set to 34732.
There is nothing wrong with that, but this is larger than 1024,
and could in certain setups cause problems with:
1) software that runs at boot time (e.g., old versions of LILO)
2) booting and partitioning software from other OSs
   (e.g., DOS FDISK, OS/2 FDISK)
1
d = delete partition
Selected partition 1
w = write
q = quit
 
Repeat this for all disks
 

Logical Volume Manager actions

storage# pvcreate /dev/sdb

Repeat this for all disks
We create a volume group called vg storage# vgcreate vg /dev/sdb You can add all the devices to this command :
vgcreate vg /dev/sdb /dev/sdc /dev/sdd ...
but I will show you how to extend
With this method you can always add disks to the
volume group
storage# lvcreate vg --size 18G

Logical volume "lvol0' created The size may vary due to the block size and administration
that LVM puts on the disk
So it could be that you can only allocate 17 or 16 GB
Check the device path, the /dev/vg is the volume group and
the lvol0 is the logical volume : 
storage# ls /dev/vg/lvol0
Make a file system on it: 
storage# mkfs -t ext3 -v /dev/vg/lvol0
Mount it: 
storage# mkdir -p /mnt/storage

storage# mount /dev/vg/lvol0 /mnt/storage
storage# touch /mnt/storage/hello
storage# ls /mnt/storage/*
hello lost+found
Now extend the volume group with an extra disk
 storage# vgextend vg /dev/sdc

storage# lvextend /dev/vg/lvol0 --size 36G 
The lvextend command needs the storage amount after
the extend. So if the first was 18 GB and we add another 18 GB
it will become 36 ... etc.. for all the rest of the disks
The filesystem needs to grow with it: (or shrink in the case reduction)
 storage# resize2fs /dev/vg/lvol0

Check the size of the disk:
 storage# df -k

Add the export to NFS

storage# vi /etc/exports

/mnt/storage    *(rw,sync,no_root_squash,insecure)
And run the nfs server:
 storage# /etc/init.d/nfs restart


JGame modify background switching and progressbar during loads

JGame 3.3

Download .zip from http://13thmonkey.org/~boris/jgame/

Unpack JGame : jar xvf jgame*

Changing Background after initialize.

The 3.3 version didn´t allow changing the background during
the game. So I modified the source code±

Modified :

EngineLogic.java
Jgame\src-base\jgame\impl\EngineLogic.java

Modify this function:
public void repaintBG(JGEngineInterface eng) {


Comment out some check later in the function (scroll down approx. two pages to find bg_defined ..
// comment this since we want to change
// the background during play
//if (bg_defined[xi_mod][yi_mod]) continue;





Changing defineMedia behaviour 

Default action for defineMedia was not to show progress when chaning
levels for instance.
Another source alteration is necessary for the 3.3 version


JGame\src-jre\jgame\platform\JGEngine.java

Add below (setBGImage function)

public void setInitialised(){
canvas.setInitialised();
}
public void setUnItialised(){
canvas.setUninitialised();
}


And under JGCanvas change + add the following:

void setInitialised() {
is_initialised=true;
// Do not destroy painter function
// initpainter=null;
}
// New function
//
void setUninitialised() {
is_initialised=false;
progress_bar=0.0;
}


To recompile the jar file:

JGame\make-base.bat

Copy the JAR file to the development directory.


test.java

// MODIFIED jgame-jre.jar !!!
//
// Compile:
// javac -cp jgame-jre.jar test.java
//
// Run:
//
// test.html :
// <applet code="test" width="640" height="480" archive="jgame-jre.jar">
// </applet>

//
//
import jgame.*;
import jgame.platform.*;

//
// Demonstartion of loading level data
//
// And setting diferent backgrounds
//
public class test extends JGEngine {

String previousstate=""; // keep track of the game states

int level=1; // level number
int playernr=1000; // player number


Player player; // player object so that we can remove when
// we need to change to different player

double gamespeed=2.0; // game speed


public static void main(String [] args) { new test(0,0); }
public test() { initEngineApplet(); }
public test(int x,int y){initEngine(x,y);}
public void initCanvas() { setCanvasSettings(20,15,32,32,null,null,null); }
public void initGame() {

// backgrounds, font
defineMedia("test.tbl");

defineMedia("player"+playernr+".tbl");

setFrameRate(40,4);

setGameState("Title");

}


//----
// Title Stage
//-----
// start is called once ..
// we can ommit this for this time .. but it is left for demonstration
public void startTitle(){

}
//
// Each frame of the state this routine gets called
//
public void doFrameTitle() {
// SPACE BAR to start
if (getKey(' ')) {
//
// Create player
//
player=new Player(pfWidth()/2-25,pfHeight()-113);
gamespeed=1.0;
//
// Set state to our own state
//
setGameState("MyOwn");

}
}

//
// Each frame this PAINT routine gets called
// You put stuff on the screen in this method during the stage
//
public void paintFrameTitle() {
drawImageString("SPACE TO START",120,200,-1,"font_map",32,0);
}


// ---
// MyOwn  -- You define your own name .. it is picked up by the engine and
//           these methods get called once you do setGameState("MyOwn");
//
// ---
//
// Game State MyOwn
// start(STATE) is called once!
// Initialise objects to be used in the doFrame[state] or paintFrame[state] methods
//
public void startMyOwn(){
}
//
//
// Called each frame during the state 'MyOwn'
// -- DO NOT PAINT THINGS -- use doPaint
public void doFrameMyOwn(){

// if previous state was != myown
if(previousstate.indexOf("MyOwn")!=0){
// Set background
setBGImage("bgimg2");
}
previousstate="MyOwn";

moveObjects();
//
// manual set animation?
//defineAnimation(java.lang.String id, java.lang.String[] frames, double speed, boolean pingpong)
//


//  collision checking .. but we do not have other objects yet ..
// player = 1 , others are 2
// checkCollision(2,1);
//
// Calls the hit method for player (1)
// And gives the 2 as the object ...


}
// Paint routine for my own ..
public void paintFrameMyOwn(){

}


// ---
// GameState = load .. level load
// ---
// once called during state
public void startload(){

}

// Not used
public void doFrameload(){
previousstate="load";

// If we want a new  player ..
// if(player!=null) player.remove();

// Advance next level ..
if(level++ > 2)level=1;


//
// This sets the state to unintialised and makes sure
// that the progressbar function gets called!
//
setUnItialised();
// Maybe new frame rate?
setFrameRate(40,4);
// basic
defineMedia("levels/level"+level+".tbl");
// different objects -- we just reload the player object to use
// extra load time for demonstartion
defineMedia("player"+playernr+".tbl");

// Set the initialised state so that we remove the progress bar
setInitialised();

// new state
setGameState("MyOwn");

}
// Not used
public void paintFrameload(){
}


//------------------
// Special
//-----------------

//
// Called each state !! except for the setUninitialised state ..
//
public void paintFrame() {
drawImageString("SCORE 00 ",150,0,-1,"font_map",32,0);
}

// When state goes to game over
public void paintFrameGameOver() {
drawImageString("GAME OVER",165,200,-1,"font_map",32,0);
}

// *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
// Other classes
// *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

// *******************************************
// Player class
// *******************************************
//
// The player takes care of movement and collision checks for
//            the player sprite
//
public class Player extends JGObject {
// Keep track of the old position ... used to determine if we moved
double oldx=0;
double oldy=0;
// What is the mininum and maximum area to move between
// (used when hitting objects, later ...)
double xmin=0;
double xmax=1024;
//
// Constructor
//
public Player(double x, double y) {
// player id          = 1
super("player",true,x,y,1,"");
}
//
// Called each frame
//
public void move() {
// Keys A and B change the background
if(getKey('A')){
clearKey('A');
setBGImage("bgimg2");
}
if(getKey('B')){
clearKey('B');
setBGImage("bgimg1");
}

if(getKey('L')){
clearKey('L');
setGameState("load");
}
//
// Player movement
//

if (getKey(KeyLeft)  && x > 14 && x > xmin) {             x -= 3*gamespeed; xdir=-1;}
if (getKey(KeyRight) && x < pfWidth()-51-14 && x < xmax){ x += 3*gamespeed; xdir=1;}
if(x!=oldx || y!=oldy){
// Walking aninatmion .. each direction has its animation
if (xdir<0) { setAnim("walking_w0000.bmp"); } else { setAnim("walking_e0000.bmp"); }
oldx=x;oldy=y;
startAnim();
}else{
// when you do not move stop animation ..
stopAnim();
}

}
//
// Object hit ..
// For now we do not have other objects ...
//
public void hit(JGObject obj) {
System.out.println("Object you hit : "+obj.toString());
}
}

// EOClass

// ****
// Other object
// ****

}
//
// RESOURCES
//
// levels\level1.tbl
// bgimg1 p 0 bgimg3.jpg - 0 0 0 0
// bgimg2 p 0 bgimg4.jpg - 0 0 0 0
//
// levels\level2.tbl
// bgimg1 p 0 bgimg3.jpg - 0 0 0 0
// bgimg2 p 0 bgimg4.jpg - 0 0 0 0


// Just use 4 jpg files as a placeholder


// test.tbl
// splash_image p 0 splash.jpg - 0 0 0 0
// font_map font293-tr.gif 0 0 32 20 0 0
// bgimg1 p 0 bgimg1.jpg - 0 0 0 0
// bgimg2 p 0 bgimg2.jpg - 0 0 0 0

// splash.jpg is just a jpg file
// font293-tr.gif is taken from the jgame examples (nebula)

// player1000.tbl

//luigismall_map luigismall.png 0 0 96 96 0 0
//walking_e0000.bmp_0 p 0 luigismall_map 0 -
//walking_e0000.bmp_1 p 0 luigismall_map 1 -
//walking_e0000.bmp_2 p 0 luigismall_map 2 -
//walking_e0000.bmp_3 p 0 luigismall_map 3 -
//walking_e0000.bmp_4 p 0 luigismall_map 4 -
//walking_e0000.bmp_5 p 0 luigismall_map 5 -
//walking_e0000.bmp_6 p 0 luigismall_map 6 -
//walking_e0000.bmp_7 p 0 luigismall_map 7 -
//walking_e0000.bmp walking_e0000.bmp_0;walking_e0000.bmp_1;walking_e0000.bmp_2;walking_e0000.bmp_3;walking_e0000.bmp_4;walking_e0000.bmp_5;walking_e0000.bmp_6;walking_e0000.bmp_7; 0.5
//walking_e0000.bmp_8 p 0 luigismall_map 8 -
//walking_e0000.bmp_9 p 0 luigismall_map 9 -
//walking_e0000.bmp_10 p 0 luigismall_map 10 -
//walking_e0000.bmp_11 p 0 luigismall_map 11 -
//walking_e0000.bmp_12 p 0 luigismall_map 12 -
//walking_e0000.bmp_13 p 0 luigismall_map 13 -
//walking_e0000.bmp_14 p 0 luigismall_map 14 -
//walking_e0000.bmp_15 p 0 luigismall_map 15 -
//walking_w0000.bmp walking_e0000.bmp_8;walking_e0000.bmp_9;walking_e0000.bmp_10;walking_e0000.bmp_11;walking_e0000.bmp_12;walking_e0000.bmp_13;walking_e0000.bmp_14;walking_e0000.bmp_15; 0.5

//
// See for jgame documentation how this animation sequence works...
//
// Basically the luigismall.png file has 16 frames in a stripe-format
// [0][1][2][3] ... [15]
// Each frame is 96 pixels high and 96 pixels wide
//
//



To compile your test program:

javac -cp jgame-jre.jar test.java