پی ایچ پی میں بار گراف بنانے والی ویب ایپلی کیشن تیار کریں

اس ٹٹوریل میں ہم بار گراف بنانے والی ایک چھوٹی سی ویب ایپلیکیشن تیار کرنے کا عمل دیکھیں گے۔ اگرچہ یہ بار گراف ایسا پرفیکٹ نہیں ہوگا جیسا کہ اسپریڈ شیٹ سافٹ ویئرز کی مدد سے بنایا جاتا ہے لیکن میرے خیال میں یہ ایک اچھی پروگرامنگ ایکسرسائز ہوگی۔ اس ویب ایپلی کیشن میں خاص کردار PHP اور CSS کا ہے کیونکہ پروگرامنگ کے مدد سے ہم ویلیوز کی کیلکولیشن کریں گے اور اسٹائلز کی مدد سے ہم یہ بار گراف مختلف رنگوں میں دکھائیں گے۔ اس کے علاوہ اس ویب ایپلی کیشن میں HTML فارم کے ساتھ PHP اررے کا ایک خاص استعمال دکھایا گیا ہے جو اس جیسے دیگر پراجیکٹس کے لیے بھی مفید اور کار آمد ہو سکتا ہے۔

درج ذیل ایپلی کیشن کے اسکرین شاٹس دکھائے جا رہے ہیں۔ (1) پہلے صفحہ پر ہم یہ بتائیں گے کہ اس گراف کے لیے کتنی تعداد میں ویلیوز مہیا کی جائیں گی۔ (2) اگلے صفحہ پر ہم لیبلز اور ویلیوز ٹائپ کریں گے۔ (3) جبکہ آخری صفحہ پر ان ویلیوز کی بنیاد پر ایک بار گراف دکھایا جائے گا۔

کوڈ کی وضاحت

درج ذیل index.php فائل کا کوڈ موجود ہے۔ اس میں موجود ویب فارم کے ذریعے ہم یہ بتائیں گے کہ بار گراف کے لیے کتنی ویلیوز مہیا کی جائیں گی۔

<!doctype html>
<html>
	<head><title>Total Values - Bar Graph using PHP and CSS</title></head>
</html>
 
<body>
	<form method="post" action="bar-graph-form.php">
 
		<br>
		Total values 
		<select name="total_values">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
		</select><br>
		<br>
 
		<input name="submit_to_form" type="submit" value="Next">
 
	</form>
</body>
</html>

درج ذیل bar-graph-form.php فائل کا کوڈ موجود ہے۔ اس میں آپ دیکھ رہے ہیں کہ ایک for لوپ کی مدد سے مطلوبہ تعداد میں input فیلڈز جنریٹ کی جا رہی ہیں۔ ان فیلڈز کے نام []labels اور []values رکھے گئے ہیں تاکہ جب یہ فارم سرور کی طرف بھیجا جائے تو ان کی ویلیوز الگ الگ ارریز میں حاصل کی جا سکیں۔ یعنی تمام لیبلز ایک اررے میں اور تمام ویلیوز دوسرے اررے میں۔

<?php 
 
// redirect to index.php if values were not provided
if (!isset($_POST["submit_to_form"])) {
	header("location: index.php");
}
 
?>
 
<!doctype html>
<html>
	<head><title>Form - Bar Graph using PHP and CSS</title></head>
</html>
 
<body>
	<form method="post" action="bar-graph-result.php">
		<table>
			<tr>
				<th>Labels</th>
				<th>Values</th>
			</tr>
 
			<?php 
 
			// generate  input fields
			for ($i=1; $i <= $_POST["total_values"]; $i++) {
				print "
				<tr>
					<td><input name='labels[]' type='text' autofocus required></td>
					<td><input name='values[]' type='number' required></td>
				</tr>
				";
			}
 
			?>
 
			<tr>
				<td><br><input name="submit_to_result" type="submit" value="Generate"></td>
				<td></td>
			</tr>
		</table>
	</form>
 
</body>
</html>

درج ذیل bar-graph-result.php فائل کا کوڈ دکھایا جا رہا ہے۔ اس میں آپ دیکھ سکتے ہیں کہ ویب فارم کے تمام لیبلز اور ویلیوز PHP کے دو الگ الگ ارریز کی صورت میں حاصل کی جا رہی ہیں۔ مزید وضاحت کے لیے آپ کوڈ میں دیے گئے کامنٹس پڑھ سکتے ہیں۔

<?php
 
$colors = array("Tomato","Teal","SlateBlue","YellowGreen","Violet","Sienna","
				RoyalBlue","Purple","Peru","PaleVioletRed","Orange","OliveDrab","
				MediumVioletRed","MediumSpringGreen","Maroon","Khaki","HotPink","
				GoldenRod","DarkSeaGreen","DarkSlateBlue","DarkKhaki","Cyan","Blue");
 
// store all labels and values to separate arrays
if (isset($_POST["submit_to_result"])) {
	$labels = $_POST["labels"];
	$values = $_POST["values"];
} else {
	header("location: index.php");
}
 
// keep an unsorted version of values
$unsorted_values = $values;
 
// get the largest value to calculate width % of each bar
sort($values);
$largest_value = $values[sizeof($values)-1];
 
// generate table rows containing bars
$bar_rows = "";
for ($i = 0; $i < sizeof($values); $i++) {
	$label = $labels[$i];
	$value = $unsorted_values[$i];
	$width = floor($value / $largest_value * 100) . "%";
	$color = $colors[$i];
	$bar_rows .= "
		<tr>
			<td class='label'>" . $label . "</td>
			<td class='bar'><div style='background:" . $color . ";width:" . $width . ";'>" . $value . "</div></td>
		</tr>";
}
 
?>
 
<!doctype html>
<html>
<head><title>Result - Bar Graph using PHP and CSS</title></head>
<style>
	body {font-size:11px;font-family:arial;}
	table {width:300px;text-align:right;}
	.label {width:15%;}
	.bar {color:white;}
	td, div {padding-right:5px;line-height:180%;}
</style>
<body>
 
<?php
	print "<table>" . $bar_rows . "</table>";
?>
 
</body>
</html>