پی ایچ پی کی مدد سے رنگ دار سطروں پر مشتمل ایچ ٹی ایم ایل ٹیبل بنائیں

ہماری زندگیوں میں رنگوں کی بہت اہمیت ہے۔ رنگ نہ صرف چیزوں کو خوبصورت بناتے ہیں بلکہ چیزوں کے درمیان فرق کرنے میں اضافی مدد دیتے ہیں۔ بچپن میں جب ہم مسجد میں پڑھا کرتے تھے، ہمارے قاری صاحب نے اپنے پاس مختلف رنگوں کے مارکر رکھے ہوتے تھے۔ ان کے ساتھ وہ ہمیں قرآن کریم پر نشان لگا کر دیتے تھے کہ یہاں غنہ کرنا ہے، یہاں اخفا کرنا ہے، یہاں ترقیق کرنی ہے، اور یہاں تفخیم کرنی ہے وغیرہ۔ اس کا فائدہ یہ ہوتا کہ ہم سبق یاد کرتے وقت قرآن کریم تجوید کے ساتھ پڑھنے کی کوشش کرتے تھے۔ دنیا بھر میں بچوں کی کتابوں سے لے کر ٹریفک لائٹس تک رنگ استعمال کیے جاتے ہیں تاکہ دیکھنے والے چیزوں یا صورت حال کو بہتر طریقے سے پہچان سکیں۔

مکمل کوڈ ٹٹوریل کے آخر ZIP فائل کی صورت میں مہیا کیا گیا ہے۔ اس میں نمونے کی ڈیٹابیس بنانے کے لیے SQL کوڈ بھی شامل ہے۔

بہت سی انڈسٹریز ایسی ہیں جن کے سافٹ ویئرز میں ریکارڈز مختلف رنگوں میں دکھائے جاتے ہیں تاکہ یوزر اپنا کام بہتر طور پر سر انجام دے سکے۔ مثلاً‌ کوریئر سروس کے سافٹ ویئر میں جو پیکجز اس وقت سروس سنٹر پر موجود ہیں انہیں مختلف رنگ میں دکھایا جاتا ہے۔ جو پیکجز سروس سنٹر سے بھیج دیے گئے ہیں لیکن ابھی منزل تک نہیں پہنچے، ان کا رنگ مختلف ہوتا ہے۔ اور جو پیکجز ڈیلیور کر دیے گئے ہیں ان کا رنگ اور ہوتا ہے۔ سافٹ ویئر چلانے والا ایک نظر اسکرین پر ڈال کر اندازہ کر لیتا ہے کہ کونسے پیکجز ایسے ہیں جنہیں فوری توجہ چاہیے۔ اسی طرح ٹرانسپورٹیشن سافٹ ویئر میں مختلف رنگوں کی مدد سے یہ فرق کیا جاتا ہے کہ کونسی گاڑی اس وقت فارغ ہے، کونسی گاڑی مسافر کو لینے جا رہی ہے، اور کس گاڑی میں اس وقت مسافر موجود ہے وغیرہ وغیرہ۔

اس ٹٹوریل کا مقصد یہ ہے کہ PHP کی مدد سے رنگ دار سطروں پر مشتمل ایک HTML ٹیبل بنایا جائے تاکہ آپ دیکھ سکیں کہ رنگ کس طرح سے سافٹ ویئر کا استعمال بہتر بنا دیتے ہیں۔ اس PHP کوڈ کا نتیجہ درج ذیل ہے۔ آپ دیکھ سکتے ہیں کہ Status کالم میں جو ویلیوز موجود ہیں ان کے اعتبار سے سطروں کا رنگ مختلف ہے۔ صرف ایک نظر ٹیبل پر ڈال کر اندازہ ہو جاتا ہے کہ کونسی فلائٹس کینسل ہوگئی ہیں اور کونسی فلائٹس تاخیر سے آرہی ہیں۔ اگر یہ رنگ نہ ہوں تو سافٹ ویئر استعمال کرنے والے کو اسٹیٹس معلوم کرنے کے لیے ہر لائن کی ویلیو پڑھنی پڑے گی، اور فہرست لمبی ہونے کی صورت میں غلطی کا امکان بھی بڑھ جائے گا۔

رنگ دار سطروں پر مشتمل ایچ ٹی ایم ایل ٹیبل

کوڈ کی وضاحت

درج ذیل کوڈ میں کامنٹس کی لائنوں کے ساتھ نمبر دیے گئے ہیں۔ ان نمبروں کے اعتبار سے وضاحت دیکھیں:

  1. سب سے پہلے ایک Associative array استعمال کیا گیا ہے۔ یہ ایسا اررے ہوتا ہے جس کی ویلیوز نام کے ذریعے حاصل کی جاتی ہیں۔ اس کے برعکس Indexed array ہوتا ہے جس کی ویلیوز بذریعہ نمبر حاصل کی جاتی ہیں۔ []statuses$ اررے کو ہم ٹیبل کی row کے لیے CSS اسٹائل رولز سیٹ کرنے کے لیے استعمال کریں گے۔ آپ دیکھ رہے ہیں کہ []statuses$ اررے میں چند ویلیوز رکھی گئی ہیں۔ ہر ویلیو کا ایک نام ہے، مثلاً‌ Canceled, Delayed, Landed وغیرہ۔ ایسے اررے کی ویلیو درج ذیل طریقے سے حاصل کی جاتی ہے، اس صورت میں CSS کے وہ اسٹائل رولز پرنٹ ہو جائیں گے جو اررے میں اس نام کے تحت رکھے گئے ہیں :
    print $statuses["Landed"];
  2. پھر ڈیٹابیس کا کنکشن بنایا گیا ہے جسے استعمال کرتے ہوئے ڈیٹابیس سے فلائٹس کے ریکارڈز حاصل کیے جائیں گے۔
  3. اس کے بعد table$ کے نام سے ایک ویری ایبل بنایا گیا ہے۔ اس ویری ایبل میں HTML ٹیبل شروع کرنے والا ٹیگ اور ہیڈنگ والی سطر رکھی گئی ہے۔
  4. یہاں ڈیٹابیس سے مطلوبہ ریکارڈز حاصل کیے جا رہے ہیں۔
  5. لوپ کے اندر سب سے پہلے ڈیٹابیس کی اسٹیٹس والی فیلڈ کی ویلیو استعمال کرتے ہوئے []statuses$ اررے میں سے اسٹائل رولز حاصل کیے جا رہے ہیں، اور انہیں css$ ویری ایبل میں رکھا جا رہا ہے۔ اس مقصد کے لیے پہلے ()array_key_exists فنکشن کی مدد سے یہ دیکھا گیا ہے کہ کیا اررے میں اس نام سے کوئی انٹری موجود ہے۔ یعنی اگر فلائٹ کا اسٹیٹس Landed ہوگا تو پھر یہ نام استعمال کرتے ہوئے statuses$ اررے میں سے اسٹائل رولز حاصل کر کے ان کی مدد سے ٹیبل کی سطر کا رنگ مقرر کیا جائے گا۔
  6. لوپ کے اندر اگلے مرحلے میں ڈیٹابیس کے ریکارڈ کو HTML کوڈ کے ساتھ ملا کر ٹیبل کی سطر بنائی جا رہی ہے۔ جب لوپ کے چکر مکمل ہو جائیں گے تو SQL کیوئری کے مطابق تمام ریکارڈز table$ ویری ایبل میں موجود ہوں گے۔ لوپ مکمل ہونے کے بعد HTML ٹیبل کا اختتامی ٹیگ بھی table$ ویری ایبل کے آخر میں شامل کر دیا گیا ہے۔
  7. آخر میں آپ HTML کوڈ دیکھ رہے ہیں جس کے head سیکشن میں ویب پیج کی باڈی اور ٹیبل کے متعلق چند اسٹائل رولز رکھے گئے ہیں۔ اصل ایپلی کیشن میں آپ یہ اسٹائل رولز الگ فائل میں رکھ کر اس فائل کو ویب پیج میں شامل کر سکتے ہیں۔ جبکہ ویب پیج کے body سیکشن میں مختصر PHP کوڈ موجود ہے، اس میں table$ ویری ایبل پرنٹ کیا گیا ہے جو تمام ریکارڈز پر مشتمل ہے۔

<?php
// 1
$statuses = array(
                    
"Landed" => "style='color:white;background-color:green;'",
                    
"Delayed" => "style='background-color:yellow;'",
                    
"En Route" => "style='background-color:lightgreen;'",
                    
"Canceled" => "style=' color:white;background-color:red;'",
                    
"Scheduled" => "style='background-color:white;'"
                
);

// 2
$mysqli = new mysqli('localhost','root','','flights');
if (
$mysqli->connect_error) die('Error : ('$mysqli->connect_errno .') '$mysqli->connect_error);

// 3
$table "";
$table $table "<table>";
$table $table "<tr>
                    <th>Flight</th>
                    <th>Route</th>
                    <th>Origin</th>
                    <th>Scheduled Time</th>
                    <th>Actual Time</th>
                    <th>Status</th>
                    </tr>"
;

// 4
$results $mysqli->query("SELECT * FROM arrivals ORDER BY actual_time");

while (
$row $results->fetch_assoc()) {
    
// 5
    
$css "";
    if (
array_key_exists($row["status"], $statuses)) {
        
$css $statuses[$row["status"]];
    }
    
// 6
    
$table $table 
        
"<tr " $css ">" .
        
"<td>" $row["flight_number"] . "</td>" .
        
"<td>" $row["route"] . "</td>" .
        
"<td>" $row["origin"] . "</td>" .
        
"<td>" date_format(date_create($row["scheduled_time"]), "D h:i a") . "</td>" .
        
"<td>" date_format(date_create($row["actual_time"]), "D h:i a") . "</td>" .
        
"<td>" $row["status"] . "</td>" .
        
"</tr>";
}
$table $table "</table>";
?>

<!-- 7 -->
<!DOCTYPE html>
<html>
<head>
	<title>Colored Rows</title>
	<meta charset="utf-8">
	<style>
		body {font-family:arial;font-size:11px;}
		table {border:5px solid #CCC;}
		th {color:white;background-color:black;}
		th, td {padding:5px;}
	</style>
</head>
 
<body>
	<h1>Arrivals</h1>
	<?php print $table; ?>
</body>
 
</html>