PHP Map with Parallelogram shapes
Map with Rhomb cells

In this page I added PHP and CSS code snippets that can be used to create dynamically a Map with PHP.
CSS is used to display the map cells in different shapes: rectangles, parallelograms, and rhombs.
- The cells are <div> elements added in <blockquote> tags for each row. You can define the number of cels and columns.

Simple PHP Map with Rectangle shapes

<?php
// https://coursesweb.net/php-mysql

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rectangles</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abcdef;
 border: 1px solid #000;
 font-weight: bold;
 text-align: center;
 line-height:400%;
 font-size: 20px;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like in this image:
            PHP Map - Rectangles

PHP Map with Parallelogram shapes

<?php
// https://coursesweb.net/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Parallelograms</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abefcd;
 -webkit-transform: skew(30deg);
 -moz-transform: skew(30deg);
 -o-transform: skew(30deg);
 font-weight: bold;
 font-size: 20px;
 text-align: center;
 line-height: 350%;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote:first-child {
 margin: 0 0 0 45px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Parallelograms

Map with Rhomb cells

<?php
// https://coursesweb.net/php-mysql/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'"><div>'. ($addtxt == 1 ? $i : '') .'</div></div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rhombs</title>
<style type="text/css">
div.map_cell {
 position: relative;
 float: left;
 width: 0;
 height: 0;
 margin-top: -49px;
 border: 50px solid transparent;
 border-bottom: 55px solid #05ed08;
}

div.map_cell:after {
 position: absolute;
 left: -50px;
 top: 55px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 55px solid #05ed08;
 content: '';
}

div.map_cell div {
 position: relative;
 margin: 45px auto 0 -10px;
 font-weight: bold;
 font-size: 20px;
 z-index: 888;
 text-align: center;
}
blockquote.rw1 {
 margin: 0 0 0 90px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Rhombs

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Dynamically PHP Maps with Rectangle, Parallelogram, and Rhomb Shapes

Last accessed pages

  1. Area and Perimeter Calculator for 2D shapes (6633)
  2. Read Excel file data in PHP - PhpExcelReader (56138)
  3. SHA256 Encrypt hash in JavaScript (5686)
  4. AJAX with POST and PHP (11881)
  5. Add, Change, and Remove Attributes with jQuery (35900)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (446)
  2. Register and show online users and visitors (399)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (386)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (296)