▲

پی ایچ پی میں تعارفی کارڈ کی ایپلی کیشن بنائیں

آپ جانتے ہیں کہ ویب ایپلی کیشن ایک بہت فائدہ مند قسم کا سافٹ ویئر ہے جو کہ صارف کے براؤزر پر چلتا ہے۔ ویب ایپلی کیشن کو انٹرنیٹ کے ذریعے بہت سے صارفین بیک وقت استعمال کر سکتے ہیں۔ عموماً‌ ویب ایپلی کیشن کا خیال ڈیٹابیس کے بغیر ذہن میں نہیں آتا، کیونکہ تقریباً‌ ہر اس ایپلی کیشن کے لیے ڈیٹابیس ضروری ہے جس نے صارف کا ڈیٹا محفوظ کرنا ہو۔ لیکن ویب ایپلی کیشن کے بہت سے استعمالات ایسے ہیں کہ جن میں ڈیٹابیس ضروری نہیں ہے۔ اس ٹٹوریل میں تعارفی کارڈ تیار کرنے والی ایک سادہ سی ویب ایپلی کیشن پیش کی جا رہی ہے جو صرف تین فائلز پر مشتمل ہے اور اس کے لیے ڈیٹابیس استعمال نہیں کی گئی۔

  1. یہ ایپلی کیشن کیسے کام کرتی ہے؟
  2. تعارفی کارڈ کی معلومات مہیا کرنے والے فارم کا HTML کوڈ
  3. ویب سرور پر فارم کو پراسیس کرنے والا PHP کوڈ
  4. تعارفی کارڈ کی فارمیٹنگ کرنے والا CSS کوڈ
  5. یہ ایپلی کیشن آن لائن ٹیسٹ کریں

1- یہ ایپلی کیشن کام کیسے کرتی ہے؟

درج ذیل اسکرین شاٹ کے مطابق آپ فارم بھر کر Design بٹن پر کلک کریں گے جس کے نتیجے میں ایک نئی ٹیب کھلے گی، اس ٹیب میں ڈیزائن شدہ تعارفی کارڈ موجود ہوگا۔

تعارف کارڈ ایپلی کیشن کا فارم اور اس کا نتیجہ


کارڈ میں استعمال ہونے والی تصویر آپ اپنی کسی سوشل میڈیا ویب سائیٹ کی پروفائل سے لے سکتے ہیں۔ بالفرض اگر آپ کسی امیج کا لنک حاصل کرنا نہیں جانتے تو درج ذیل اسکرین شاٹ کے مطابق ایسا کر سکتے ہیں۔ مطلوبہ تصویر پر رائیٹ کلک کر کے مینیو کھولیں اور پھر تصویر کا لنک Copy کرنے والے آپشن پر کلک کر دیں۔ یہ لنک پھر تعارفی کارڈ تیار کرنے والے فارم میں لوگو والی فیلڈ میں Paste کیا جا سکتا ہے۔

براؤزر میں مطلوبہ تصویر پر رائیٹ کلک کرنے کے بعد کاپی امیج لنک پر کلک کریں


UP

2- معلومات مہیا کرنے والے فارم کا HTML کوڈ

درج ذیل کوڈ index.php فائل کا ہے۔ اس کوڈ میں قابل وضاحت باتیں یہ ہیں:

  1. head سیکشن میں ایک اسٹائل شیٹ فائل شامل کی گئی ہے۔ اس فائل میں اس فارم کی اور اس کے نتیجے میں بننے والے کارڈ کی فارمیٹنگ کے اسٹائل رولز موجود ہیں۔
  2. body ٹیگ میں آپ جاوا اسکرپٹ کا onload ایونٹ دیکھ رہے ہیں، اس میں جو کوڈ لکھا گیا ہے اس کا مقصد یہ ہے کہ جب یہ فارم براؤزر میں لوڈ ہو تو logo-url والی فیلڈ خود بخود فوکس میں آجائے۔ اس مقصد کے لیے logo-url والی فیلڈ کو id ایٹری بیوٹ مہیا کیا گیا ہے۔
  3. form ٹیگ میں آپ target ایٹری بیوٹ دیکھ رہے ہیں۔ اس کا مقصد یہ ہے کہ فارم پوسٹ کرنے کے بعد الگ ٹیب میں کھلے تاکہ کسی غلطی کی صورت میں آپ کو فارم نئے سرے سے نہ بھرنا پڑے۔
  4. select ٹیگ کے آپشنز کے لیے جو ویلیوز استعمال کی گئی ہیں وہ در اصل ان رنگوں کے نام اور Hex ویلیوز ہیں جنہیں کارڈ کی فارمیٹنگ کے لیے ہم CSS میں استعمال کریں گے۔

<!DOCTYPE html>
<html>
<head>
	<title>PHP Visiting Card - Form</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<link rel="Stylesheet" media="all" type="text/css" href="styles.css">
</head>
<body onload="document.getElementById('logo-url').focus();">
 
	<form method="post" action="card-result.php" target="_blank">
 
		Logo URL <input id="logo-url" name="logo_url" type="text"><br><br>
 
		Title <input name="title" type="text"><br><br>
 
		Name <input name="name" type="text"><br><br>
 
		Job <input name="job" type="text"><br><br>
 
		Phone <input name="phone" type="text"><br><br>
 
		Email <input name="email" type="text"><br><br>
 
		Website <input name="website" type="text"><br><br>
 
		Address <input name="address" type="text"><br><br>
 
		Background 
		<select name="background">
			<option>None</option>
			<option>LightBlue</option>
			<option>LightYellow</option>
			<option>LightCyan</option>
			<option>LightGray</option>
			<option>PapayaWhip</option>
			<option>#E5E4E2</option>
			<option>#82CAFA</option>
			<option>#C3FDB8</option>
		</select><br><br>
 
		<input type="submit" value="Design">
 
	</form>
</body>
</html>


UP

3- فارم کو پراسیس کرنے والا PHP کوڈ

درج ذیل کوڈ card-result.php فائل کا ہے۔ اس کوڈ میں قابل وضاحت باتیں یہ ہیں:

  1. جب HTML فارم ویب سرور پر چلنے والے PHP کوڈ کی طرف پوسٹ کیا جاتا ہے تو اس کی ویلیوز POST_$ اررے میں موجود ہوتی ہیں۔ چنانچہ اس کوڈ میں فارم کی ہر ویلیو کو استعمال کرنے سے پہلے PHP کے ()isset فنکشن کی مدد سے پہلے چیک کیا گیا ہے۔ کیونکہ بغیر فارم بھیجے اگر یہ ویب پیج کھولا جائے گا تو اس اررے میں فارم کی ویلیوز موجود نہیں ہوں گی، اور اس کے نتیجے میں ایرر واقع ہوگا۔
  2. HTML کوڈ میں آپ card کی id والا ایک div ٹیگ دیکھ رہے ہیں۔ اس کے اندر فارم کی تمام ویلیوز رکھی گئی ہیں۔ اس ٹیگ میں inline اسٹائل رول استعمال کیا گیا ہے جو کارڈ کی بیک گراؤنڈ کا رنگ سیٹ کرے گا۔ اس کے رنگ کی ویلیو PHP کے ویری ایبل کی مدد سے سیٹ کی جائے گی۔
  3. فارم کی ہر ویلیو ایک div ٹیگ کے اندر رکھی گئی ہے اور ہر ٹیگ کے لیے id ایٹری بیوٹ استعمال کیا گیا ہے۔ کسی بھی ٹیگ کی id استعمال کرتے ہوئے ہم CSS میں اس کی فارمیٹنگ کریں گے۔
  4. آخر میں آپ logo-url کی ویلیو دیکھ رہے ہیں جسے div ٹیگ کی بجائے img ٹیگ کے src ایٹری بیوٹ میں استعمال کیا گیا ہے۔ اس کی وجہ ظاہر ہے کہ یہ دراصل ایک امیج لنک ہے جو کارڈ پر لوگو کی تصویر دکھائے گا۔ 

<!DOCTYPE html>
<html>
<head>
	<title>PHP Visiting Card - Result</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<link rel="Stylesheet" media="all" type="text/css" href="styles.css">
</head>
<body>
 
	<?php 
	$background = "White";
	if (isset($_POST["background"])) {
		$background = $_POST["background"];
	}
	?>
 
	<div id="card" style="background-color:<?php print $background; ?>">
		<?php 
		if (isset($_POST["title"])) {
			print "<div id='title'>" . $_POST["title"] . "</div>";
		}
		if (isset($_POST["name"])) {
			print "<div id='name'>" . $_POST["name"] . "</div>";
		}
		if (isset($_POST["job"])) {
			print "<div id='job'>" . $_POST["job"] . "</div>";
		}
		if (isset($_POST["phone"])) {
			print "<div id='phone'>" . $_POST["phone"] . "</div>";
		}
		if (isset($_POST["email"])) {
			print "<div id='email'>" . $_POST["email"] . "</div>";
		}
		if (isset($_POST["website"])) {
			print "<div id='website'>" . $_POST["website"] . "</div>";
		}
		if (isset($_POST["address"])) {
			print "<div id='address'>" . $_POST["address"] . "</div>";
		}
		if (isset($_POST["logo_url"])) {
			print "<img id='logo' src='" . $_POST["logo_url"] . "'>";
		}
		?>
	</div>
</body>
</html>


UP

4- تعارفی کارڈ کی فارمیٹنگ کرنے والا CSS کوڈ

درج ذیل کوڈ styles.css فائل کا ہے۔ اس میں قابل وضاحت یہ ہیں:

  1. پہلے حصے کے اندر فارم اور اس کی فیلڈز کو بہتر طور پر دکھانے کے لیے اسٹائل رولز لکھے گئے ہیں۔
  2. دوسرے حصے میں تعارفی کارڈ میں استعمال ہونے والے div ٹیگز کی فارمیٹنگ کے لیے اسٹائل رولز لکھے گئے ہیں۔
  3. آپ دیکھ رہے ہیں card# والے بلاک میں position:relative اسٹائل رول استعمال کیا گیا ہے، جبکہ logo# والے بلاک میں position:absolute اسٹائل رول استعمال کیا گیا ہے۔ ایسا کر کے ہم نے دونوں ٹیگز کا آپس میں ایک تعلق بنا دیا ہے۔ اب لوگو امیج کے لیے top اور left کے اسٹائل رولز استعمال کرنے پر اس امیج کی پوزیشن تعارفی کارڈ والے ٹیگ کے اعتبار سے سیٹ ہوگی نہ کہ براؤزر کی ونڈو کے اعتبار سے۔
  4. نیز card# والے بلاک میں آپ box-sizing کی پراپرٹی دیکھ رہے ہیں۔ اس کا فائدہ یہ ہوگا کہ ٹیگ کی padding مقرر کرنے کے باوجود اس کی چوڑائی 350px اور اونچائی 200px ہی رہے گی۔

/* ------------------ FORM ------------------ */
 
form {
	width:400px;
	margin:0 auto;
	text-align:right;
}
 
select, 
input[type=text] {
	width:300px;
}
 
 
/* ------------------ RESULT ------------------ */
 
#card {
	position:relative;
	width:350px;
	height:200px;
	margin:0 auto;
	padding:15px 25px 15px 25px;
	box-sizing:border-box;
	text-align:right;
	font-family:Arial;
}
 
#logo {
	position:absolute;
	max-width:100px;
	max-height:100px;
	top:52px;
	left:25px;
}
 
#title {
	font-family:Cambria;
	font-weight:bold;
	font-size:24px;
	font-style:italic;
	color:Chocolate;
}
 
#name {
	font-family:Corbel;
	margin-top:18px;
	font-size:17px;
	font-weight:bold;
}
 
#job {
	font-family:Verdana;
	font-size:11px;
	color:Chocolate;
	margin-bottom:18px;
}
 
#phone, #email, #website {
	font-size:12px;
}
 
#address {
	color:Chocolate;
	margin-top:12px;
	border-top:1px solid #333;
	padding-top:5px;
	font-size:11px;
	font-family:Arial Narrow;
	font-weight:bold;
}


UP

5- یہ ایپلی کیشن آن لائن ٹیسٹ کریں

آن لائن یہ ایپلی کیشن ٹیسٹ کرنے کے لیے آپ درج ذیل لنک استعمال کر سکتے ہیں:

apps.techurdu.org/visiting-card


نوٹ: تعارفی کارڈ میں استعمال ہونے والی معلومات فرضی ہے۔

Categories: 
PHP
Web Development
Created: Mon, 09/21/2015 - 17:38
Modified: Sat, 12/28/2019 - 10:29