Content of the lesson:
The script for processing the text file is in state when it can write all lines of the file to browser - you should remember the current situation from the end of previous lesson. The directory with PHP script and data can be downloaded here: zpracovani-souboru-1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <title>Seznam zaměstnanců</title> </head> <body> <?php $nazev_souboru="data/zamestnanci.csv"; if (file_exists($nazev_souboru)) { $soubor=fopen($nazev_souboru, "r"); if($soubor){ while (!feof($soubor)){ $radek = fgets($soubor,5000); print($radek); print("<br />"); } } else { print("Soubor ".$nazev_souboru." se nepodařilo otevřít pro čtení."); } } else { print("Soubor ".$nazev_souboru." neexistuje."); } ?> </body> </html>
Try to describe each line of the script in details (especially the meaning and functionality).
Take a look at the final output of this script inside browser. You should realize that we want to create a nice HTML page which will contain a headline and a table of employees. Now we have only the "raw" data inside browser (see the image).
Try to describe everything which is necessary to be added to the current output to reach the situation we wanted.
The solution is simple - edit data manually inside the CSV file. Delete semicolons from the first line and delete the whole second line. The input file will have headline in the first line and header of table in the second line (leave it as it is). The following rows will represent single rows of the table.
You have to print the first line as the headline. Our while cycle has to behave differently when processing the first line. We can solve this by creating a variable which will count the number of current line. Set it to 0 before the beginning of the while cycle and increase the value by 1 in each pass. Then add a simple condition: "When we are in the first line (the value of $pocetradku is equal to 1) then display the line as the headline; otherwise (we are in the second or one of the following rows) display the line as a row of table.".
$pocetradku = 0; while (!feof($soubor)){ $pocetradku = $pocetradku + 1; $radek = fgets($soubor,5000); if ($pocetradku == 1) { print("<h1>".$radek."</h1>"); } else { print($radek); print("<br />"); } }
The next step is displaying every remaining line from the file as a row inside the table. At first insert the tag for the beginning of the table. This should be done in the moment when you are in the second line and you have not printed this line so far (the tag for beginning of the table has to be inserted before any row). The tag for the end of table should be inserted after the while cycle.
$pocetradku = 0; while (!feof($soubor)){ $pocetradku = $pocetradku + 1; $radek = fgets($soubor,5000); if ($pocetradku == 1) { print("<h1>".$radek."</h1>"); } else { if ($pocetradku == 2){ print("<table cellspacing=\"0\" cellpadding=\"0\">"); } print($radek); print("<br />"); } } print("</table>");
Take a look at the source code produced by this script. It is not a correct HTML code because rows are not correctly marked.
<body> <h1>Zaměstnanci GJŠ Zlín</h1> <table cellspacing="0" cellpadding="0"> Jméno ;Příjmení;Titul;E-mail;Telefon;Fotografie;Zkratka <br />Eliška;Babíková;;babikova@gjszlin.cz;577007450;babikova.jpg; <br />Radim;Bárta;Mgr.;barta@gjszlin.cz;577007448;barta.jpg;Bár <br />Libuše;Beranová;Ing.;beranova@gjszlin.cz;577007434;beranova.jpg;Ber ... <br />Pavla;Titěrová;Mgr.;titerova@gjszlin.cz;577007458;titerova.jpg;tit <br />Michal;Heczko;Ing.;heczko@gjszlin.cz;;;Hec <br /><br /></table></body> </html>
We know that every row of the HTML table has to begin with the <tr> and end with the </tr> tag. We will insert these tags before and after printing the variable $radek inside browser. Because the final data will be written as rows of table you do not have to use the tag <br /> anymore because it has no sense in this moment.
$pocetradku = 0; while (!feof($soubor)){ $pocetradku = $pocetradku + 1; $radek = fgets($soubor,5000); if ($pocetradku == 1) { print("<h1>".$radek."</h1>"); } else { if ($pocetradku == 2){ print("<table cellspacing=\"0\" cellpadding=\"0\">"); } print("<tr>".$radek."</tr>"); } } print("</table>");
The last problem is inserting tags for cells inside the table (dividing the variable $radek into cells). Solution of this problem is more difficult and is explained in the following chapter.
Every line of a table processor is equal to one line inside the text file; the cells from every row are separated by semicolons (usually). Our task is to adjust the row after loading the variable $radek to be able to divide each cell to columns inside our HTML table.
Realize what we actually need. We have to format the columns to convert them into columns of the HTML table. The solution is simple - you have to replace semicolons by tags:
Jméno;Příjmení;Titul;E-mail;Telefon;Fotografie;Zkratka
should be replaced to
<td>Jméno</td><td>Příjmení</td><td>Titul</td><td>E-mail</td><td>Telefon</td><td>Fotografie</td><td>Zkratka</td>
All you need is a simple command which will make the replacement. The command would be easy: "Replace the character ';' with string '</td><td>'."
Try to find using the Internet (using Google for example) if there is a way in PHP to replace a string with another one.
To replace a string with another one you can use the function str_replace (description). This function requires three parameters:
$radek = str_replace(";","</td><td>",$radek);
The script has to be adjusted:
$pocetradku = 0; while (!feof($soubor)){ $pocetradku = $pocetradku + 1; $radek = fgets($soubor,5000); if ($pocetradku == 1) { print("<h1>".$radek."</h1>"); } else { if ($pocetradku == 2){ print("<table cellspacing=\"0\" cellpadding=\"0\">"); } $radek = str_replace(";","</td><td>",$radek); print("<tr>".$radek."</tr>");0 } } print("</table>");
Take a look at the generated HTML code of our page and check it.
The page does not appear as we wanted. We see that the column Jméno is completely out of the table. There is a mistake inside the HTML code and we have to fix it. What exactly is wrong?
The problem is that we forgot to add the tag <td> before the first cell of each row and the tag </td> after the last cell of each row. Why? We replaced every semicolon by the tags <td></td> but you should realize that there is no tag in the beginning and in the end of every row so we have to correct this mistake. We will adjust the script:
$pocetradku = 0; while (!feof($soubor)){ $pocetradku = $pocetradku + 1; $radek = fgets($soubor,5000); if ($pocetradku == 1) { print("<h1>".$radek."</h1>"); } else { if ($pocetradku == 2){ print("<table cellspacing=\"0\" cellpadding=\"0\">"); } $radek = str_replace(";","</td><td>",$radek); print("<tr><td>".$radek."</td></tr>"); } } print("</table>");
Adjust the final script to be able to separate the header part of table from the rest. Do not forget to check your HTML code using the w3 validator.
<table width="100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th>Jméno</th><th>Příjmení</th><th>Titul</th><th>E-mail</th><th>Telefon</th><th>Fotografie</th><th>Zkratka</th> </tr> </thead> <tbody> <tr> <td>Radim</td><td>Bárta</td><td>Mgr.</td><td>email</td><td>577007448</td><td>...</td><td>Bár</td> </tr> ... </tbody> </table>
The solution is to extend the current condition also for the second line (the header of the table) so the else variant will be executed from the third line.
while (!feof($soubor)){ $pocetradku = $pocetradku + 1; $radek = fgets($soubor,5000); if ($pocetradku == 1) { print("<h1>".$radek."</h1>"); } else { if ($pocetradku == 2){ print("<table cellspacing=\"0\" cellpadding=\"0\">"); $radek = str_replace(";","</th><th>",$radek); print("<thead><tr><th>".$radek."</th></tr></thead>"); print("<tbody>"); }else{ $radek = str_replace(";","</td><td>",$radek); print("<tr><td>".$radek."</td></tr>"); } } }
The result of this lesson can be downloaded here: zpracovani-souboru-2.rar
Try to think about problems of this solution (especially think about the possibilities to modify the table or the output).
Try to write CSS rules for the appearance of the table using the lesson "Tables in HTML".