Jump to content
Please Use CODE Tags

Building HTML table the right way (need help)

Proxy408
By Proxy408
in Programming
 Share
Posted

Hi there, im trying to make this website for work. Im some what new to php/html/sql.

 

its like a kalendar, where i say i have this thing called "1102" og "1201" that starts from 07:00 AM, and goes on untill 10:30 AM, and ends at 11:00 AM.

They have to be under the right placement 15A-15B etc, from what is in the sql.

 

This was just a quick mockup with only HTML. 

The issue im having is how to make the php/sql query output this the way i want.

maybe php/html combo isnt the right way, want to make a drag'n'drop so i can move "1102" to another time or placement as well. (Javascript is the way to do this?).

 

i am pretty good at reading completed code, but havent seen any examples of this to learn from.

Any tips is much appreaciated :)

 

image.thumb.png.04a5c1d815d2efd60b3c2e450d043df4.png

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Forgot to say, that maybe its my database structure thats not correct?

As of trying this i only have one table, with everything in it. 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Here's an example of how you'd generate the table  with php code :

  

<?php

$column_titles = ['#','15A','15B','-','16A','16B','16C','16D','-','18A','18B'];
$column_titles_ids = [];
foreach ($column_titles as $id => $title) {
	$column_titles_ids[$title] = $id;
}
$records = [];
array_push($records, array('name'=>'1102','room'=>'15A','from'=>7*2,'until'=>12*2));
array_push($records, array('name'=>'1201','room'=>'16B','from'=>8*2,'until'=>13*2));

$grid = [];
for ($j=0;$j<count($column_titles);$j++) {
	$grid[$j]=[];
	$grid[$j][0] = [];
	$grid[$j][0]['text'] = $column_titles[$j];
	$grid[$j][0]['tag'] = 'c'.$j;
	$grid[$j][0]['color'] = '';
	
	
	
	for ($i=0;$i<37;$i++) {
		$grid[$j][$i+1] = [];
		$grid[$j][$i+1]['text'] = '';
		$grid[$j][$i+1]['color'] = '';
		$grid[$j][$i+1]['tag'] = 'c'.$j.'-'.$i;	
		if ($j==0) {
			$half_hours = 12 + $i;
			$grid[$j][$i+1]['text'] = intdiv($half_hours,2).':'.(($half_hours % 2 == 1) ? '30' : '00');
			$grid[$j][$i+1]['color'] = 'white';
		}
	}
}

foreach ($records as $record) {
	$text = $record['name'];
	$column = $column_titles_ids[$record['room']];
	for ($nr = $record['from']; $nr < $record['until'];$nr++) {
		$grid[$column][$nr-11]['text'] = $text;
		$grid[$column][$nr-11]['color'] = 'ok';
		
		if (($nr >= $record['until']-3) && ($nr<$record['until']-1)) {
			$grid[$column][$nr-11]['color'] = 'warning';
		}
		if ($nr==$record['until']-1) {
			$grid[$column][$nr-11]['color'] = 'danger';
		
		}
		
	}
	
}

?>
<html>
<head>
	<style>
	  td span { display:inline-block; width:64px; height:32px;text-align:center; line-height:200%;}
	  .col-ok {background-color:green;}
	  .col-warning {background-color:pink;}
	  .col-danger {background-color:red;}
	  
	  
	</style>
</head>
<body>
<?php
echo '<table>';
for ($rows=0;$rows<37;$rows++) {
	echo '<tr>';
	for ($cols=0;$cols<count($grid);$cols++) {
		echo '<td><span data-id="'.$grid[$cols][$rows]['tag'].'" ';
		if ($grid[$cols][$rows]['color']!='') {
			echo 'class="col-'.$grid[$cols][$rows]['color'].'"';
		}
		echo '>';
		echo $grid[$cols][$rows]['text'];
		echo '</span></td>';
	}
	
	echo '</tr>';
}
echo '</table>';


?>

</body>
</html>

 

Yeah, dragging those ... I would do it with Javascript ... there's drag and drop events you can hook into and all that.

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

holy moly. thank you so much @mariushm. This was way better then i expected to find 😄 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×