Counter HTML to PHP Conversion

HTML to PHP Conversion of Counter Code Sample

HTML to PHP conversion is very useful when you want your web design dynamic. Dynamic design is consist upon variable settings of a web design where you can input different values to change look of your web design. So you can get many variations of your design and finalize which is fit into your specific design. Dynamic or PHP Design can more easily be integrated into dynamic themes and WordPress Themes rather than simple HTML Design. So in this tutorial post we are are converting our following HTML example:

Bootstrap HTML Counter Code Sample Trigger on Visibility Change JQuery

Here we start. We are going to do following steps.
1).  First download previous Counter html example.
2).  Put your example in a folder in your XAMPP (local web server)
3).  Rename index.html file to counter.php (php file). We change internal code of this file later. Other files and and folders remains the same.
4.) Create variable in counter.php file which will be used to change web design appearance of the Counter Code Sample.
5). Assigning variable values with default values
6). Creating PHP function to implement your design.

Identify the Settings attributes that you want to set and change dynamically with the help of variables. It is important here that there is no need to make every style dynamic i.e. these styles are base design of your HTML template so there is no need to be set as dynamics. So in this tutorial example has following attributes:

header_text
header_text_color
header_text_fontsize
fontawsome_icon
fontawsome_icon_color
fontawsome_icon_size
counter_value
counter_value_color
counter_value_fontsize

Now all example will be same as in previous HTML example only counter.php file will replace index.html. and code for counter.php is given below:

 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:300,400,700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&amp;display=swap">
<link rel="stylesheet" href="assets/css/styles.css">

</head>

<body>
<?php 
$ul_counter_attrib_1 = array(
"header_text" => "Complete Projects",
"header_text_color" => "yellow",
"header_text_fontsize" => "24px",
"fontawsome_icon" => "fa-camera",
"fontawsome_icon_color" => "yellow",
"fontawsome_icon_size" => "100px",
"counter_value" => "150",
"counter_value_color" => "yellow",
"counter_value_fontsize" => "30",
);
// function to create counter section with help of arrays values 
function ul_display_counter($ul_counter_attr_array){

//assign array values to varibles

$header_text = $ul_counter_attr_array["header_text"];
$header_text_color = $ul_counter_attr_array["header_text_color"]; 
$header_text_fontsize = $ul_counter_attr_array["header_text_fontsize"];

$fontawsome_icon = $ul_counter_attr_array["fontawsome_icon"];
$fontawsome_icon_color = $ul_counter_attr_array["fontawsome_icon_color"]; 
$fontawsome_icon_size = $ul_counter_attr_array["fontawsome_icon_size"];

$counter_value = $ul_counter_attr_array["counter_value"];
$counter_value_color = $ul_counter_attr_array["counter_value_color"]; 
$counter_value_fontsize = $ul_counter_attr_array["counter_value_fontsize"];

//html and inline css
$html="<h3 style='color:".$header_text_color."; font-size:".$header_text_fontsize."'>".$header_text."</h3>";
$html.="<i style='color:".$fontawsome_icon_color."; font-size:".$fontawsome_icon_size.";' class='fa ".$fontawsome_icon."'></i>";
$html.="<span style='color:".$counter_value_color."; font-size:".$counter_value_fontsize.";' class='counter'>".$counter_value."</span>";

return $html; 
}

?>
<section>
<div class="container ulook-full-width-container" id="just_reach">
<div class="row" style="margin-left: 0;margin-right: 0;">

<div class='col-md-3 ulook-progress-bar'>
<?php echo ul_display_counter($ul_counter_attrib_1); ?> 
</div>

<div class='col-md-3 ulook-progress-bar'>
<?php echo ul_display_counter($ul_counter_attrib_1); ?> 
</div>

<div class='col-md-3 ulook-progress-bar'>
<?php echo ul_display_counter($ul_counter_attrib_1); ?> 
</div>

<div class='col-md-3 ulook-progress-bar'>
<?php echo ul_display_counter($ul_counter_attrib_1); ?> 
</div>

</div>
</div>
</section>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/app.js"></script>
</body>

</html>

please download previous example as given in beginning of the post and then change or add above file in its root directory.

you can view demo here


 

Leave a Reply

Your email address will not be published. Required fields are marked *

Go to Top