Card update

README.md

@@ -1,16 +1,75 @@
 # phpxpress
+
+PhpXpress' goal is to create a simple way to programmatically manage Bootstrap elements. 
+It's similar to Microsoft's WebForms with a great layout by default (like DevExpress).
+
+## Available components
+* Table
+* Card
+
+## Example
+
+### Table
+
 The following code
 ```
-$employees = array($employee1,$employee2,$employee3);
+$employees = array($employee1, $employee2, $employee3);
 
 $table = new Table;
 $table->setDataSource($employees);
-$table->setCustomCaptions(array("Name", "Surname", "Date of Birth", "Social Security Number"));
+$table->setCustomCaptions(array("Name", "Surname", "Date of Birth", "Social Security Number")); //not required. If not specified it'll use objects' property names
 $table->setStripedRows(true);
 $table->setBordered(true);
 $table->setHoverAnimation(true);
 $table->draw();
 ```
 
-Produces the following output
+produces the following output
 <img src="/phpxpress/examples/demoTable.jpg" alt="Demo">
+
+
+### Card
+
+The follwing code
+```
+Card::beginCardGroupLayout(36);
+
+$card1 = new Card;
+$card1->setImageSource("colosseum.jpg");
+$card1->setTitle("Rome");
+$card1->setSubTitle("Capital of Italy");
+$card1->setInnerText("After the foundation by Romulus according to a legend, Rome was ruled for a period of 244 years by a monarchical system, initially with sovereigns of Latin and Sabine origin, later by Etruscan kings.");
+$card1->setFooterText("Image By John");
+$card1->addField("Mayor", "Roberto Gualtieri");
+$card1->addField("Inhabitants", "2.763.804");
+$card1->AddField("Zip", "001XX");
+$card1->setButton("More info", "https://en.wikipedia.org/wiki/Rome");
+$card1->draw();
+
+class City{
+	public $Mayor;
+    public $Inhabitants;
+    public  $Zip;
+}
+
+$paris = new City;
+$paris->Mayor = "Anne Hidalgo";
+$paris->Inhabitants = "2.229.095";
+$paris->Zip = "750XX";
+
+$card2 = new Card;
+$card2->setImageSource("paris.jpg");
+$card2->setTitle("Paris");
+$card2->setSubTitle("Capital of France");
+$card2->setInnerText("The following fields' name & data will be acquired by the datasource.");
+$card2->setDataSource($paris);
+$card2->setButton("More info", "https://en.wikipedia.org/wiki/Paris");
+$card2->draw();
+
+Card::endCardGroupLayout();
+```
+
+produces the following output
+<img src="/phpxpress/examples/card.jpg" alt="Demo">
+
+$card2 receives a DataSource whereas $card1 does not.

phpxpress/examples/card.php

@@ -6,19 +6,41 @@
         <?php
             include "../phpxpress/card.php";
 
+            Card::beginCardGroupLayout(36);
+
             $card1 = new Card;
             $card1->setImageSource("colosseum.jpg");
             $card1->setTitle("Rome");
             $card1->setSubTitle("Capital of Italy");
             $card1->setInnerText("After the foundation by Romulus according to a legend, Rome was ruled for a period of 244 years by a monarchical system, initially with sovereigns of Latin and Sabine origin, later by Etruscan kings.");
+            $card1->setFooterText("Image By John");
+            $card1->addField("Mayor", "Roberto Gualtieri");
+            $card1->addField("Inhabitants", "2.763.804");
+            $card1->AddField("Zip", "001XX");
+            $card1->setButton("More info", "https://en.wikipedia.org/wiki/Rome");
             $card1->draw();
 
+            class City{
+                public $Mayor;
+                public $Inhabitants;
+                public  $Zip;
+            }
+
+            $paris = new City;
+            $paris->Mayor = "Anne Hidalgo";
+            $paris->Inhabitants = "2.229.095";
+            $paris->Zip = "750XX";
+
             $card2 = new Card;
             $card2->setImageSource("paris.jpg");
             $card2->setTitle("Paris");
             $card2->setSubTitle("Capital of France");
-            $card2->setInnerText("The Parisii, a sub-tribe of the Celtic Senones, inhabited the Paris area from around the middle of the 3rd century BC.");
+            $card2->setInnerText("The following fields' name & data will be acquired by the datasource.");
+            $card2->setDataSource($paris);
+            $card2->setButton("More info", "https://en.wikipedia.org/wiki/Paris");
             $card2->draw();
+
+            Card::endCardGroupLayout();
         ?>
     </body>
 </html>

phpxpress/phpxpress/card.php

@@ -7,6 +7,9 @@
         private $subtitle;
         private $innerText;
         private $width = 18;
+        private $footerText;
+        private $fieldsArray;
+        private $button;
 
         function setImageSource($imageSource){
             if(!is_string($imageSource))
@@ -27,12 +30,34 @@
             $this->innerText = $innerText;
         }
 
+        function setFooterText($footerText){
+            $this->footerText = $footerText;
+        }
+
         function setWidth($width){
             $this->width = $width;
         }
 
+        function setButton($text, $link){
+            $this->button["text"] = $text;
+            $this->button["link"] = $link;
+        }
+
+        function addField($caption, $value){
+            if(isset($this->fieldsArray))
+                $this->fieldsArray[$caption] = $value;
+            else
+                $this->fieldsArray = array($caption => $value);
+        }
+
+        function setDataSource($datasource){
+            foreach($datasource as $caption=>$value){
+                $this->addField($caption,$value);
+            }
+        }
+
         function draw(){
-            echo '<div class="card" style="width: '.$this->width.'rem;">';
+            echo '<div class="card" style="width: ' . $this->width . 'rem;">';
 
             // Image
             if(isset($this->imageSource)){
@@ -42,8 +67,33 @@
             echo '<div class="card-body">';
             echo '<h5 class="card-title">'. $this->title .'</h5>'; // title
             echo '<h6 class="card-subtitle mb-2 text-muted">'. $this->subtitle .'</h6>'; // subtitle
-            echo '<p class="card-text">'. $this->innerText . '</p>';
+            echo '<p class="card-text">'. $this->innerText . '</p>'; // text
+
+            if(isset($this->fieldsArray)){ // fields
+                foreach($this->fieldsArray as $field => $value){
+                    echo '<p class="card-text"><b>' . $field . ': </b>' . $value . '</p>';
+                }
+            }
+
+            if(isset($this->button))
+                echo '<a href="' . $this->button["link"] . '" class="btn btn-primary">' . $this->button["text"] . '</a>';
+
+            if(isset($this->footerText))
+                echo '<br/><br/><p class="card-text"><small class="text-muted">' . $this->footerText . '</small></p>'; // footer
+
             echo '</div></div>';
         }
+
+        static function beginCardGroupLayout($width=36){
+            /*
+            ** Using this overrides the card's width (known error from Bootstrap), so you should specify a width.
+            */
+            echo '<div class="card-group" style="width:' . $width. 'rem;">';
+        } 
+
+        static function endCardGroupLayout(){
+            echo '</div>';
+        }
+
     }
 ?>