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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Dynamically PHP Maps with Rectangle, Parallelogram, and Rhomb Shapes

Last accessed pages

  1. Simple Admin Login PHP Script (1629)
  2. Insert, Select and Update NULL value in MySQL (33020)
  3. Contact page - CoursesWeb (2154)
  4. Tabs effect with CSS (2866)
  5. Convert XML to JSON in JavaScript (19155)

Popular pages this month

  1. Contact page - CoursesWeb (1640)
  2. Tabs effect with CSS (1626)
  3. Insert, Select and Update NULL value in MySQL (824)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)