In this example we shall show you how to create html tables with dynamic php. PHP is a server-side scripting language used by most web developers for creating dynamic and responsive web pages(A dynamic webpage is one whose content change automatically each time the page is viewed).
Html is simply a language used to describe webpages. Html tables allow web developers arrange data into rows and columns also html tables also allow web developers display structured data in a web page.
For this example we would use
- A computer with PHP 5.5 installed
- notepad++
2 Getting Started
To explain dynamic PHP and html tables we are going to develop a trivial web app which allows a teacher record the scores of students on a remote server. The server counts the number of records it has received, after the third count it outputs the received record in an html table and resets its counter. Before we continue let’s start by explaining some concepts.
2.1 Forms
Html forms are used to collect user input. We are going to use forms to collect each student details(firstname, lastname, subject and score) and submit it
index.html
<form action=action.php method=post onsubmit="return validateForm()"> <input type=text placeholder=FirstName id=firstname name=first required><br> <input type=text placeholder=LastName id=lastname name=last required><br> <input type=text placeholder=Subject id=subject name=subject required><br> <input type=text placeholder="Student Score" id=score name=score required><br> <input type=submit value=submit id=sub> </form>
This code displays a form to the user, the required attribute in each textbox tells the browser that this field is required and must be filled while the placeholder is just a short hint that describes the expected input. The validateForm() function that is called when the form is submitted checks if the user has entered all the required fields. If the user entered all the required fields it returns true and the form is submitted else the function returns false and halts the submission process alerting the user to the error encountered.
index.html
function validateForm(){
var firstname=document.getElementById("firstname").value.trim();
var lastname=document.getElementById("lastname").value.trim();
var subject=document.getElementById("subject").value.trim();
var score =document.getElementById("score").value.trim();
if(firstname==""||lastname==""||subject==""||score==""){
alert("All Fields Must be Filled")
return false;
}
return true;
}
2.2 Session in php
We need store each student record processed by our php script, to do this we will make use of php session(in an advanced and scalable web app we would store all records in a database but for the sake of simplicity we would use php session)
Simply put a session is a way to store information, which can be accessed across mutiple webpages.When the form is submitted our script access each data submitted and saves it in session variables
action.php
<?php session_start(); if($_SESSION['num']==null)//check if the num variable is empty $_SESSION['num']=1;// if it is empty set it to 1 ?>
To use session in php we call the session_start()function before anything else is output to the browser. All session variable values are stored in the global $_SESSION associative array. Assigning a session variable is as simple as writing $_SESSION['num']=1 and we can read from it the same way we would read from a normal variable. We use the $_SESSION['num'] variable as a counter to store the number of times the script has received a record.
action.php
if($_SESSION['num']==1){
$_SESSION['num']++;
$_SESSION['first']=$_POST['first'];
$_SESSION['last']= $_POST['last'];
$_SESSION['subject']=$_POST['subject'];
$_SESSION['score']=$_POST['score'];
include("index.html");
}
else if($_SESSION['num']==2){
$_SESSION['num']++;
$_SESSION['first1']=$_POST['first'];
$_SESSION['last1']= $_POST['last'];
$_SESSION['subject1']=$_POST['subject'];
$_SESSION['score1']=$_POST['score'];
include("index.html");
}
else if($_SESSION['num']>=3){
$_SESSION['num']=1;
$_SESSION['first2']=$_POST['first'];
$_SESSION['last2']= $_POST['last'];
$_SESSION['subject2']=$_POST['subject'];
$_SESSION['score2']=$_POST['score'];
?>
<!DOCTYPE html>
<html lang=eng>
<head>
<title>
Dynamic php and html table testing
</title>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
table{
width:50%;
border:2px solid #343434;
margin-left:auto;
margin-right:auto;
}
td{
text-align:center;
width:25%;
border:2px solid #343434;
}
#he{
height:10%;
background-color:#343434;
margin-bottom:2%;
}
</style>
</head>
<body bgcolor="#e5a010">
<div id=he>
</div>
<div >
<table>
<thead>
Student Result Score
</thead>
<tbody>
<tr>
<th>Firstname</th><th>Lastname</th><th>Subject</th><th>Score</th>
</tr>
<tr>
<?php
echo "<td>" . $_SESSION['first']. "</td>";
echo "<td>" . $_SESSION['last']. "</td>";
echo "<td>" . $_SESSION['subject']. "</td>";
echo "<td>" . $_SESSION['score']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>" . $_SESSION['first1']. "</td>";
echo "<td>" . $_SESSION['last1']. "</td>";
echo "<td>" . $_SESSION['subject1']. "</td>";
echo "<td>" . $_SESSION['score1']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>" . $_SESSION['first2']. "</td>";
echo "<td>" . $_SESSION['last2']. "</td>";
echo "<td>" . $_SESSION['subject2']. "</td>";
echo "<td>" . $_SESSION['score2']. "</td>";
echo "</tr>";
//this removes all the session variable
session_unset();
//this functions destroys the session
session_destroy();
}
?>
<tbody>
</table>
</div>
</body>
</html>
We check how many times our script has received a record, if it’s not up to three we increment our counter variable, store each record received in our session array and display the form to the teacher(we do this by calling the include("index.html") function). After three records has been submitted we reset the counter variable and output an html table containing each student record to the browser. It is considered good practice to clean up after using session. we call php session_unset() to delete all session data and session_destroy() to the destroy the session.
2.3 Html Tables
Let’s start by explaining each tag used in our example
- The
<table>tag: it is used to define/create a table in html - The
<thead>tag: it is used to define an header for a table. - The
<tbody>tag: it is used in conjunction with the<thead>and<tfoot>tag to describe a table. It always comes after the<thead>tag and before the<tfoot>tag - The
<tr>tag: it is used to define a row in an html table - The
<th>tag: This tag defines a table header. - The
<td>tag: This tag defines a cell in an html table
2.4 Other table tags worthy of mention
<caption>tag : This is an optional tag, it gives the title of the table. It is always the first descendant of the<table>tag.<tfoot>: This tag defines a set of rows summarizing the columns of the table.
3. Summary
In this example we have learnt about dynamic php and html tables(what they mean and how to use them). we also discussed about html forms and php sessions(how to create and destroy them).
4. Download the source code
