PHP Foreach () Table Formatting

[Bawnaaa]

For the past month I have been trying to learn how to use PHP, MYSQL and HTML to design and see if I can make a database for some of my colleagues who aren't very good at Excel. (I have had MULTIPLE days where I have been trying to teach them but it is proving difficult)

 

It is really basic so far, enter users, search for users, a page where all users are listed, and edit the list of users. The process they would like is Search => Click "Log" => Add Update. This page is simply a page that shows details such as, Name, Project, Start-Date, etc and a box they can edit that can have notes added into them about previous interviews, the social inclusion benefits etc. HOWEVER,

 

My problem is that in the code I copied (I know not the best practice but I copied the rest and understand how it fundamentally works, I don't have a knack to learn in the traditional, Step 1, Step 2, Step 3 etc.) this code and don't know how to format it. The current enter form is the picture labeled "CURRENT ENTER FORM". The current logging form is labeled "LOGGING FORM" and I was just wondering how I can format the Foreach() to match if at all?

 

 

[mariushm]

A very basic way to do it would be to have two variables and append half the key/value combos to the first variable, then append the other half to the second variable.

When done, you could create a table with two rows and two columns and put contents of first variable in first column, contents of second variable in 2nd column of the table row.

Use 2nd row of table to align your edit / update / cancel buttons to the right of the table.

 

Alternatively, you can use div elements ... one container div, then two divs inside with float:left; property and a width set, to align data in two columns... then a div with the clear:both on the bottom to reset flow

<div style="width:1000px;">
 <div style="float:left;width:500px;">
	<p>Left column</p>
 </div>
 <div style="float:left;width:500px;">
	<p>Right column</p>
 </div>
 <div style="clear:both;" />
 <div style="width:1000px; text-align:right;">
   <p>Buttons can align here to the right side, below the two columns of values</p>
 </div>
</div>

 

[C2dan88]

You may able to split $uUser multidimension array using array_chunk.

 

Then you form code becomes something like

<form class="form-container" method="post">
<?php
$rows = array_chunk($uUser, 2, true);
foreach ($rows as $column): ?>
<div class="row">
<?php    foreach($column as $key => $value): ?>
<div class="column">
<label for="<?php echo $key; ?>"><?php echo $key; ?></label>
<input type="text" name="<?php echo $key; ?>" id="<?php echo $key; ?>" value="<?php echo escape($value); ?>" <?php echo ($key == 'id' ? 'readonly' : null); ?>>
</div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>

... add your submit button here

</form>

 

Then apply the following css

.form-container {
    margin: 0 auto;
    width: 70%;
}

.form-container .row {
  display: flex;
}

.form-container .column {
  flex: 50%;
  padding: 10px;
}

[Bawnaaa]

Took a quick 20 minute break and had a cigarette and a coffee. Got it working... enough.

 

C2Dan: - I am going to attempt this now thank you

 

Marius: - I ended up doing this, I made 2 scripts each fetch half the data and put it into 2 containers side by side. So Script 1 fetches first 6, stored as UserOne and the second takes the second six and stores as UserTwo and then the page has ContainerOne, and ContainerTwo and from there it takes the first half and second half split down the middle

 

I imagine both of these work similar but Dan's seems like it is definitely more of a "Efficient" practice kind of way