Page 1 of 1

Text Based Mafia Game || Viewing Inbox / Css design part 8 Rate Topic: ***** 2 Votes

#1 Denis1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 32
  • View blog
  • Posts: 103
  • Joined: 29-July 09

Posted 08 September 2010 - 02:29 PM

Please check out my other tutorials PART 1, PART 2, PART 3, PART 4, PART 5, PART 6, PART 7.

Files We are going to use
  • Left.php
  • Right.php
  • Usersonline.php




Files We are going to create
  • Inbox.php
  • _Inbox.php
  • Style.css


Inbox.php
In the last lesson we created a way to send a message to other users, now we are going to work on retrieving the message and displaying it in tables.

Step one - Pagination
Inbox is so complex that we are not going to be able to separate the html from the php but dont worry instead we are going to focus on the elements that make up inbox so you can fully understand it. Pagination is a small script that will divide the content of the inbox. Create a page called Inbox.php, and add the following in the body part of the page. Make sure you include Left.php at the very top.

<form method="post">
<table width="319" border="2" align="center">
  <tr>
    <td width="40" align="center"><?php 
	
	// small Pagination code.

$amount = 6; // this is the amount of message you want to display per page

// Selete from the database we ctrated last tutorial.
$nsql = "SELECT * FROM pm WHERE sendto='".mysql_real_escape_string($name)."' and del='1'";            
$nres = mysql_query($nsql) or die(mysql_error());
$totalmail = mysql_num_rows($nres);

if (empty($_GET['page'])){
$page = 1;
}else {
	if(is_numeric($_GET['page'])){
$page = $_GET['page'];
	}else{
$page = 1;	
	}
}

$min = $amount * ( $page - 1 );
$max = $amount;
	
if( $page > 1){
	
$previouspage = $page - 1;
echo "<a href=\"Inbox.php?page=".$previouspage."\" onfocus=\"if(this.blur)this.blur()\">Previous.</a>";	
}



?></td>
    <td width="101" align="center"><?php 
	
	$numofpages = ceil($totalmail / $amount); 

// this is a small php that will clean / delete all of your message
if(($totalmail >= "1") and (!isset($_POST['Clean']))){ ?>
        <input name="Clean" type="submit"  id="Clean" value="Clean Inbox." onfocus="if(this.blur)this.blur()"/>
        <?php
}
	?></td>
    <td width="115" align="center">

	<?php
	// this will delete the seletced message.
	 if(($totalmail >= "1") and (!isset($_POST['Clean']))){ ?>
	<input name="Delete" type="submit"  id="Delete" value="Delete Selected." onfocus="if(this.blur)this.blur()"/><?php
}
	?></td>
    <td width="34" align="center"><span colour="#000000"><?php 
	
if($page < $numofpages){ 
    $pagenext = ($page + 1); 
	echo "<a href=\"Inbox.php?page=".$pagenext."\" onfocus=\"if(this.blur)this.blur()\" colour='#000000'>Next</a>";	
}

	?></span></td>
  </tr>
</table>


in the code above you can see the pagination code, it isn't finished yet we need to close it at the bottom. more on that later. you will see two buttons in a small table. the clear button will clear all your message. The second one will delete all the selected message.

<---- Do not add this to your page. this is just me explaining what is going on.
Now the concept of the inbox is to list all your message with the most recent one at the top. To do it we need 2 things. First the id of the message. Second, a while loop.

First- the ID. We are going to select our message by ID and order it in descending order.
Second - the While loop. This is a basic while loop.
<?php
$i=1;
while($i<=5)
  {
  echo "The number is " . $i . "<br />";
  $i++;
  }
?>
but the while we are going to use is a bit more complex than that. We are going to add our one in tables.

so it will create as much tables as you have messages and fill it our with the message.
You can now add the following. ------>


<?php require("_Inbox.php");

$presult = mysql_query("SELECT * FROM pm
WHERE sendto='".mysql_real_escape_string($name)."' and del='1' ORDER BY id DESC LIMIT $min,$amount") or die(mysql_error()); 

if (!isset($_POST['Clean'])){

if ((mysql_num_rows($presult) == 0) and (!isset($_POST['clean']))){
			
echo "You don't have any messages.";
}else {
$b = 0;						
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array( $presult )) {
// Print out the contents of each row into a table

?>
<table width="90%" border="1">

  <tr>
    <td align="left" ><span class="text"><span class="head">
      <?php

$b = $b + 1;

echo "<a href=\"View_Profile.php?name=". $row['sendby'] ."\" onfocus=\"if(this.blur)this.blur()\">".$row['sendby']."</a>";
	?>
      </span></span></td>
  </tr>
  <tr>
    <td align="left" ><?
$row['message'] = htmlentities($row['message']);
$row['message'] = nl2br($row['message']); 
$row['message'] = stripslashes($row['message']);   
echo $row['message'];
	?></td>
  </tr>
  <tr>
    <td align="left" ><table width="100%" border="1">
      <tr>
        <td width="25" align="left" ><?php echo "<input type='checkbox' name='id[$b]' value='".$row['id']."' onfocus=\"if(this.blur)this.blur()\"/>"; ?></td>
        <td width="50" align="center" ><?php
		echo "<a href=\"Send_Message.php?name=". $row['sendby'] ."&reply=". $row['id'] ."\" onfocus=\"if(this.blur)this.blur()\">Reply.</a>";
	?></td>
        <td width="50" align="center" ><?php 
		echo "<a href=\"Inbox.php?delete=". $row['id'] ."\" onfocus=\"if(this.blur)this.blur()\">Delete.</a>";
		 ?></td>
        <td width="50" align="right" ><?php 
		echo "".$row['time']."";
		 ?></td>
      </tr>
    </table></td>
  </tr>
</table>
<br />
<?php 
} // if imbox is empty
} // if while
} // if <> clean	?>
</form>



add the code to the rest of the one you have in Inbox.php. You will notice _Inbox.php is required. That's because we are going to add a small bit of code on _Inbox.php to help with Deleting and cleaning.

Step Two - _Inbox.php
This s a very straight forward code that will handle the deleting and clean message scripts. Create a page called _Inbox.php and add the following.

if($_SERVER['REQUEST_URI'] == "/_Inbox.php"){
exit();
}

if (isset($_POST['Clean']))
{ 

$result = mysql_query("UPDATE pm SET del='2' WHERE sendto = '".mysql_real_escape_string($name)."'")
or die(mysql_error());

echo "Your Inbox has been cleaned.";
} // if clean

////////////////////////////////////////// delete message ////////////////////////////////////

if (!empty($_GET['delete'])){

$result = mysql_query("UPDATE pm SET del='2' WHERE sendto = '".mysql_real_escape_string($name)."' and id='" .mysql_real_escape_string($_GET['delete']). "'")
or die(mysql_error());

}//if delete message

if(isset($_POST['Delete'])){

$id = $_POST['id'];
	if(!empty($id)){
$delete = implode(",",$id);
$delete = explode(",",$delete);
for($a = 0; !empty($delete[$a]);$a++){
$result = mysql_query("UPDATE pm SET del='2' WHERE sendto = '".mysql_real_escape_string($name)."' and id='" .mysql_real_escape_string($delete[$a]). "'")
or die(mysql_error());
	}
		echo "all selected messaged have been deleted.";
	}else{
		echo "You didn't select any posts.";
	}
}

?>


Style.php

Ok now we are going to start giving our game some life. By that i mean colours. We are going to very basically give colour to the Left.php and Right.php

Step One - Colours.
Ok you would have noticed that the extension of the Style is a .css. CSS means "Cascading Style Sheets". I advice you should learn CSS from HERE. Try and understand the basics of CSS and try to do some tests on your server first. Create a file called Style.css

Before you start think carefully of the colours you want and where you want them. Dont just choose colours because it looks nice you. Try and choose colours that will fit the theme of your game and colours that will give your game a small level of professionalism, Colours that are not too dark or too bright.

Ok i am not much of a designer and for the purpose of this tutorial i am going to choose grey which is simple to just demonstrate ( i will have different tones of grey). Before we start add this in the head part of Left.php
<link rel="stylesheet" type="text/css" href="Style.css" />


Add the following to the Style.css
/* This is a simple CSS sheet. */
body{ /* this is the background colour of the whole game. instead of the hex colour code you can type in a colour name like green or red */
	background-color:#2d2d34;}

/* this is a cool way to make your links flash. Read more on this at w3school */

a:link {Color:#999;}    /* unvisited link */
a:visited {	color:#999;} /* visited link */
a:hover {color:#F00;}   /* mouse over link */
a:active {color:#FFF;}  /* selected link */


in the code above, you can see syntax to change the background and a cool flash link effect. you can find out more cool colour changers at w3school, but we are going to move on. With that added you page should look like this.
Posted Image

Step Two
- Class.
we are now going to start designing things like the tables and creating classes for other things.

I am going to show you how to change Left.php and you can use it for the rest of the game.

on Style.php add the following at the bottom.
.table { 
	border: #000000 1px solid;
	background-color: #363636;
	;
}

.cell {
	color: #FFFFFF;
	padding: 3px;
	background-color:#1C1C1C
}

.header {
	padding: 0px;
	padding-left: 2px;
	color: #FFFFFF;
	background: #3A0D07;
	font-family: verdana;
	font-size: 10px;
	line-height: 18px;
	text-align: left;
	border-bottom: 2px solid;
	border-color: #000000;
}


that is three simple classes i have created. Table is the table class, Header is the head of the table where your titles are and the Cell is where your content is. Look at the pic below to show you what i mean. i know it is really crap but it is just to make a point. (besides i used a really crap mouse).

Posted Image

Now open Left.php. select the table and change the opening tag for the table to this
<table width="123" height="253" border="0" align="left" cellpadding="0" cellspacing="2" class="table">


add the header class to every table header. find the <td> tag and add this
class="header"

so that would make
<td height="23" class="header">Main Game</td>

do the same for the cell
<td height="65" valign="top" class="cell">


and finish the page with the same concept. if you did that right you should have a left.php that looks like this. (Without the smile face :)/>)
Posted Image

for this to work well you need to have this on every opening table tag. border="0" align="right" cellpadding="0" cellspacing="2". this get rid of the lines and add a little line so you can see the colours. If you did all that right try to Add it to Right.php and The whole of Usersonline.php.. This is how mine looks.
Posted Image

Look at hoe far we have come. this is beginning to look like a real game.

I have uploaded my files for this tutorial on to my server and you can come and check (click Here) my site to see these scripts we have being working on. There is nothing new this is just all the files we have being working on. This is just to give you an idea of how your game should look.

It is going to take me longer to write up tutorials because i have started college and i have 2 jobs. I will try and do like an hour of tutorials per day, which means like 3 days to finish one tutorial.
In the next tutorial we are going to look at Ban and a couple of other staff tools. and we are also going to look at add information to the Right menu.
see you then


--------
Mod: the code can be found here:
https://github.com/m...ext_Based_Mafia


Is This A Good Question/Topic? 0
  • +

Replies To: Text Based Mafia Game || Viewing Inbox / Css design part 8

#2 Lightme  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 06-March 10

Posted 12 September 2010 - 10:30 AM

For me your link dont seems to work.

http://mafiamania.co...mafiamania/DIC/
Was This Post Helpful? 0
  • +
  • -

#3 Denis1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 32
  • View blog
  • Posts: 103
  • Joined: 29-July 09

Posted 12 September 2010 - 11:36 AM

View PostLightme, on 12 September 2010 - 04:30 PM, said:

For me your link dont seems to work.

http://mafiamania.co...mafiamania/DIC/


refresh the page a couple of times
Was This Post Helpful? 0
  • +
  • -

#4 brandonc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-September 10

Posted 12 September 2010 - 12:23 PM

thank you for your good tutorials I'm looking for ages for a tutorial like this
Was This Post Helpful? 0
  • +
  • -

#5 HappyJackie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-January 09

Posted 10 December 2010 - 11:48 AM

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 2

I am getting the error above when I try to open the inbox..... I don't know what is causing it.
Was This Post Helpful? 0
  • +
  • -

#6 poker158149  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 70
  • Joined: 29-June 11

Posted 05 July 2011 - 07:35 PM

HappyJackie, I had the same problem, but figured it out after some tweaking.

Change
$presult = mysql_query("SELECT * FROM pm WHERE sendto='".mysql_real_escape_string($name)."' and del='1' ORDER BY id DESC LIMIT $min,$amount") or die(mysql_error());


to this:
$presult = mysql_query("SELECT * FROM pm WHERE sendto='".mysql_real_escape_string($name)."' and del='1' ORDER BY id DESC LIMIT 5") or die(mysql_error()); 


MySQL doesn't like something about the $min,$amount variables, so if you just replace it with 5, it works just fine.
Was This Post Helpful? 0
  • +
  • -

#7 renoufchr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 20-February 12

Posted 20 February 2012 - 01:19 PM

ive got a issue where the middle table cuts through to the right.php and pushes that below it


heres my code ive got for left.php right.php and usersonline.php

left.php
<? include_once("Safe.php"); ?>
<HTML>

<HEAD>

<link rel="stylesheet" type="text/css" href="Style.css" />

<link rel="stylesheet" type="text/css" href="Style.php" />

</HEAD>

<BODY>

<table width="0%" height="253" border="0" align="left" cellpadding="0" cellspacing="2" class="table">

 <tr>

    <td align="left" valign="top" >

    

  <tr>

    <td class="header" height="23">Main Game</td>

  </tr>



  <tr>

    <td class="cell" height="74" valign="top"><a href="usersonline.php">Users online</a><BR>

	<a href="Edit_profile.php">Profile</a><BR>

	<a href="Find_Player.php">Find Player</a><BR>

	<a href="Help_Desk.php">Help Desk</a><BR>

	<a href="Help_Desk_Reply.php">Help Desk Reply</a><BR></td>

	

  </tr>

    <tr>

    <td class="header" height="23">Social</td>

	</tr>

  <tr>

    <td class="cell" height="23"><a href="Forum.php">Forum</a><BR>

      <a href="Inbox.php">Inbox</a><BR>

	<a href="Send_Message.php">Send Message</a><BR></td>

  </tr>

  <tr>

    <td class="cell" height="105">More links here</td>

  </tr>

  <tr>

    <td class="header" height="23">LogOut</td>

  </tr>

  </table>

  <td width="100%" align="center" valign="top">

</BODY>

</HTML>


right.php
<html>
<head>

</head>
<body>

<td width="150" align="right" valign="top" >



<table width="135" border="0" align="right" cellpadding="0" cellspacing="2" class="table" >

  <tr>

    <td valign="top" class="header">Players information</td>

  </tr>

  <tr>

    <td class="cell" height="369">Players information here.</td>

  </tr>

  </table>

   </td></td>

  </tr>

</table>

</body>
</html>


usersonline.php
<? require("Left.php"); ?>

<html>

<head>

<title>IOW MAFIA</title>

</head>

 

<body>

<table width="90%" height="94" border="0" cellpadding="0" cellspacing="2" class="table">

  <tr>



    <td align="center" class="header" height="23">Users online</td>

  </tr>

  <tr>

    <td class="cell"><?php



$sql = "SELECT name FROM users WHERE DATE_SUB(NOW(),INTERVAL 5 MINUTE) <= lastactive ORDER BY id ASC"; //  Searches the database for every one who has being last active in the last 5 minute

$query = mysql_query($sql) or die(mysql_error());

$count = mysql_num_rows($query);

$i = 1;

while($row = mysql_fetch_object($query)) {

 $online_name = htmlspecialchars($row->name);





  echo "<a href=\"View_Profile.php?name=". $online_name ."\" onfocus=\"if(this.blur)this.blur()\">".$online_name."</a>";

 // displays the names that fit our search

 

 if($i != $count) { // this counts the amount of people that are online and display the results.

  echo "<label> - </label>";

 }

 $i++;

}

echo "<p><center>Total Online: ".$count."</center></p>";

?>

</td>

  </tr>

</table>

</body>

</html>



<? require("Right.php"); ?>


style.php
.table { 

	border: #000000 1px solid;

	background-color: #363636;

	;

}



.cell {

	color: #Green;

	padding: 3px;

	background-color:#1C1C1C

}



.header {

	padding: 0px;

        padding-left: 2px;

	color: #Red;

	background: #3A0D07;

	font-family: verdana;

	font-size: 10px;

	line-height: 18px;

	border-bottom: 2px solid;

	border-color: #000000;

}




ive played around with diffrent settings and just cant seem to figure it out

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#8 renoufchr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 20-February 12

Posted 20 February 2012 - 05:17 PM

dont worry managed to fix it by putting both
<? require("Left.php"); ?>
<? require("Right.php"); ?>

at the top of the page

and giving the table usersonline a id and using a simple bit of css to control the size automattically

table#middle { table-layout: fixed; width: auto; }


thanks anyway ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1