اتطرق اليوم الى مشروع عمل موقع بسيط من الصفر بلغة ال PHP  يرتبط بقاعدة بيانات نوع MSQL.

  • هذا الشرح لمن لديهم اساسيات لغة PHP و بعض وسائل الربط مع MYSQL وبعض اساسيات ال CSS.
  • هذا الشرح يتطرق للموضوع من اساسياته ولا يعتبر مثلا كاملا يحتذى به لاننا راعينا اساسيات العمل ولم نتطرق الى موضوع الامان و الفلترة.

في حالة توفر استضافة على سيرفر خارجي او في حالة استخدام برنامج XAMPP لعمل سيرفر على الحاسوب الشخصي للاختبارات ، فالخطوات ستكون متشابهة ، برنامج ال XAMPP يمكن تحميلة من الموقع التالي : http://sourceforge.net/projects/xampp/

بعد تنصيب البرنامج تكون واجهته كالتالي :

xampp

 

يجب تفعيل خيار ال Apache و ال MYSQL وعندها سيصبح اللون اخضر ، نلاحظ ان الفولدر الذي سنجعل بداخله المشاريع الجديدة وسيظهر في المتصفح هو htdocs، بعدها نذهب الى المتصفح ونكتب في العنوان localhost ستظهر لنا واجهة الموقع وهذا يعني نجاح عملية التنصيب …

localhost

سيحتوي الموقع بصورته النهائية 4 صفحات :

  1. الصفحة الرئيسية HOME / مجرد صفحة اعتيادية.
  2. صفحة ال ABOUT / صفحة اعتيادية يفترض ان تحتوي معلومات عن الموقع.
  3. صفحة Add to Database / فيها سنتصل بقاعدة البيانات و نضيف لها المعلومات.
  4. صفحة  Show Database / فيها سنتصل بقاعدة البيانات و نستعرض المعلومات التي ادخلناها في الصفحة السابقة.

سيحتوي الموقع ايضا ال Header وفيه اسم الموقع و شرح مبسط اسفل العنوان اضافة الى القائمة العليا Navigator.

سيحتوي ايضا ال Sidebar وهو الجهه الجانبية التي يمكن وضع اي شئ فيها .

واخيرا الفوتر في الاسفل Footer ستحتوي معلومات الحقوق و الموقع.

ستكون النتيجة النهائية للموقع هي كما في الصور الاربعة التالية :

mysite-11 mysite-21 mysite-31 mysite-41

قبل ان ادرج الاكواد ، يجب انشاء قاعدة بيانات جديدة من ال PHP My Admin  وفي حالتي تفاصيل قاعدة البيانات كالتالي :

  • اسم قاعدة البيانات people
  • اسم الجدول details
  • عناصر الجدول id, name,email,phone,picture,country وبالنسبة لل id فهو يزداد تلقائيا Auto increment

كما في الصورة التالية :

database-phpmyadmin1-1024x455

لمن لا يعرف كيفية انشاء قاعدة بيانات بواسطة phpmyadmin يمكنه زيارة الموضوع التالي لمزيد من التوضيح…

نبدأ الان في ادراج الاكواد ، ساستعمل محرر ال ++ Notepad لكتابة الاكواد لانه الافضل :

نبتدأ بملف ال function.php وفيه عملنا دالتين ، الاولى من اجل عرض القائمة الرئيسية والاخرى عرض عنوان الصفحة اعلى المتصفح

function.php

<?php
	include('includes/class-theme-methods.php'); //   هنا نستدعي ملف اخر والذي فيه الدالة الرئيسية لعمل القائمة الرئيسية
	
	function do_main_nav() {  // هذه الدالة تقوم بعرض عناصر القائمة الرئيسية بالاعتماد على الدالة الاخرى في ملف include
		global $dtm; // لاحظوا هذا المتغير هو global
		
		$class = "main_nav";
		
		$items_array = array ( //  من هنا تضاف عناصر القائمة الرئيسية الجديدة
							array('text' => 'Home', 'url' => 'index.php'),
							array('text' => 'About', 'url' => 'about.php'),
							array('text' => 'Add to database', 'url' => 'add_to_database.php'),
							array('text' => 'Show Database', 'url' => 'show_database.php'),
							);
		return $dtm->navigation($items_array, $class); // هذه الدالة تقوم بارجاع 
	}
	
	function do_html_title($page_title){  // هذه الدالة تقوم بعمل عنوان الصفحة في اعلى المتصفح
		$title = $page_title. ' | Mustafa Testing site';
		
		return $title;
	}
?>

وبعدها نقوم بعمل ملف الهيدر header.php الذي سيقوم بعرض عنوان الموقع الرئيسي وعنوان الموقع اعلى المتصفح و يستدعي دالة المنيو القائمة الرئيسية

header.php

<?php include('functions.php'); // هنا تم استدعاء ملف الدوال الذي يعمل القوائم و التايتل
?> 
<!DOCTYPE html>
<html>
	<head>
		<title><?php echo do_html_title($the_title); ?></title> <!-- هنا تم عرض التايتل اعلى المتصفح -->
		<!--stylesheets-->
		<link rel="stylesheet" href="style.css" /> <!-- هنا ربطنا ملف الستايل ويجب ان يكون داخل الهيدر وليس بعد البودي -->
	</head>
	
	<body>
		<div id="wrap">
		
			<div id="header">
				<h2>Mustafa Testing Site</h2>  <!-- عنوان الموقع -->
				<p>Just another learning project</p> <!-- سطر الكلام اسفل عنوان الموقع -->
			</div>
			
			<div id="navigation">
				<?php echo do_main_nav(); ?> <!-- هنا استدعينا الدالة التي عملناها في ملف ال هيدر -->
			</div>
			
		

وهنا ملف الفوتر الذي سيحتوي على حقوق الموقع

footer.php

			<div id="footer">
				<div class="footer_half">
					<p>&copy; Mustafa ٍSite  2013 - <?php echo date("Y") ?></p> <!-- معلومات الفوتر على اليسار   -->
				</div>
				
				<div class="footer_half t_align_right">
					<p>Powered by <a href="index.php"> LoLo Inc. </a></p> <!-- معلومات الفوتر على اليمين -->
				</div>
			</div>
		</div>
	</body>
</html>

اما بالنسبة الى القسم الجانبي من الموقع Sidebar  فسيكون بالشكل التالي :

sidebar.php

			<div id="sidebar">
			<h3>Sidebar here !</h3>
			<p>Any data can be here</p>
			</div>

ويمكن اضافة اي محتوى الى السايد بار مثل الصور الصغيرة والروابط وما الى ذلك…

هنا في ملف ال class-theme-methods.php d يوجد الدالة الرئيسية والمهمه في صنع القائمة الرئيسية و فيه يمكن ان نضع جميع الاكواد المعقدة التي نحتاجها مستقبلا لتطوير الموقع بعيدا عن ملفات القالب الرئيسية …

class-theme-methods.php

<?php
	if ( !class_exists('DemoThemeMethods') ) {  // هذه هي الدالة التي 
		class DemoThemeMethods {			
			public function navigation($items_array, $class) {
				$nav = '<ul class="' . $class . '">';
				
				foreach ( $items_array as $item ) {
					$nav .= '<li><a href="'. $item['url'] . '">' . $item['text'] . '</a></li>';
				}
				
				$nav .= '</ul>';
				
				return $nav;
			}
		}
	}
	
	$dtm = new DemoThemeMethods;
?>

بما اننا اكملنا اقسام الموقع الرئيسية وهي Header, Footer, Sidebar وهذه الملفات تسمى بملفات القالب Template

واكملنا ايضا ملف الدوال Function  و class-theme-methods

يكون ملف القالب النهائي قد اكتمل ، وهو الملف الذي سنعتمد عليه في انشاء ملفات الموقع ذات المحتوى …

وسيكون بالشكل التالي :

template.php

<?php $the_title = 'Home page'; // هنا نضع عنوان الصفحة الذي سيظهر اعلى المتصفح
?>

<?php include('header.php'); // هنا استدعاء ملف الهيدر الذي عملناه سابقا
 ?> 
 
	<div id="content">
			<div id="main">  <!-- Content after this هنا يبدأ المحتوى الذي سنضيفه --> 
				
				
				
			</div>  <!-- End of content هنا يجب ان ينتهي المحتوى الذي سنضيفه -->
		<?php include('sidebar.php'); // هنا نستدعي ملف السايد بار ونلاحظ انه ضمن البودي
		?> 
		
	</div>
<?php include('footer.php'); // وهنا اخيرا استدعينا ملف الفوتر
?>

الان نبدا بصفحات المحتوى وهي Home, about, show database , add to database

home.php

<?php $the_title = 'Home page'; ?> <!-- Title of the page -->
<?php include('header.php'); ?>
	<div id="content">
			<div id="main">  <!-- Content after this -->
				
				<p> This website is under construction !</p>
				
			</div>  <!-- End of content -->
		<?php include('sidebar.php'); ?>
	</div>
<?php include('footer.php'); ?>

 about.php

<?php $the_title = 'About'; ?>
<?php include('header.php'); ?>
	<div id="content">
			<div id="main">  <!-- Content after this -->
				
				<p>The contenet will be here</p>
				
			</div>  <!-- End of content -->
		<?php include('sidebar.php'); ?>
	</div>
<?php include('footer.php'); ?>


نأتي الان الى ملف الاضافة الى قاعدة البيانات :

add_to_database.php

<?php $the_title = 'Add to Database'; ?>
<?php include('header.php'); ?>
	<div id="content">
			<div id="main">  <!-- Content after this -->
				
				<?php

$username = "root";           // database username
	$password = "test123";        // database password
	$hostname = "localhost";      // host name 
	
	$dbhandle = mysql_connect ($hostname, $username, $password) or die("could not connect to database"); //connect to DB and show error message in case of error
	
	$selected = mysql_select_db("people", $dbhandle); // select the Database
	
	if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['phone']) && isset($_POST['picture']) && isset($_POST['country'])){
	$t_name = $_POST['name'];
	$t_email = $_POST['email'];
	$t_phone = $_POST['phone'];
	$t_picture = $_POST['picture'];
	$t_country = $_POST['country'];
	
	mysql_query ("INSERT into details (name, email, phone, picture, country) VALUES ('$t_name', '$t_email', '$t_phone', '$t_picture', '$t_country')");
	echo ("<p>Date entered successful to database !</p>");
	}
	
	mysql_close();
	
?>

<div class="content">
		<div class="input_lolo">
		<form action="add_to_database.php" method="POST">
			<p>Full Name : <input type="text" name="name" /></p>
			<p>Email : <input type ="text" name="email" /></p>
			<p>Phone : <input type="text" name="phone" /></p>
			<p>Picture : <input type="text" name="picture" /></p>
			<p>Country : <input type="text" name="country" /></p>
			<input type="submit" value="Submit" />
		</form>
	</div>
</div>
				
			</div>  <!-- End of content -->
		<?php include('sidebar.php'); ?>
	</div>
<?php include('footer.php'); ?>

 

show_database.php

<?php $the_title = 'Show Database'; ?>
<?php include('header.php'); ?>
	<div id="content">
			<div id="main">  <!-- Content after this -->
				
				
				<?php 
				$con=mysqli_connect("localhost", "root", "test123", "people"); // connect to database (people"

				if (mysqli_connect_errno()) {
				echo "Failed to connect to MSQL Database : " . mysqli_connect_error();  // check the connection
				}

				$result = mysqli_query($con, "SELECT * FROM details"); // select all from table (details)

				echo "<table border='1'>
				<tr>
				<th>ID</th>
				<th>Full Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Country</th>
				</tr>";
	
				while($row = mysqli_fetch_array ($result)) {
				echo "<tr>";
				echo "<td>" . $row['id'] . "</td>";
				echo "<td>" . $row['name'] . "</td>";
				echo "<td>" . $row['email'] . "</td>";
				echo "<td>" . $row['phone'] . "</td>";
				echo "<td>" . $row['country'] . "</td>";
				echo "</tr>";
				}
	
				echo "</table>";


				if(isset($_POST['id_to_delete'])){
				$the_id_to_delete = $_POST['id_to_delete'];
				mysqli_query($con,"DELETE FROM details WHERE id='$the_id_to_delete'");
				header('Location: '.$_SERVER['REQUEST_URI']);
				};


				mysqli_close($con);

				?>
				<hr>
				
				<div class="type_to_delete">
				<form action="show_database.php" method="POST">
				<p>Type record id to delete : <input type="text" name="id_to_delete" /> </p>
				<input type="submit" value="DELETE !" /> 
				</form>
				</div>
				
			</div>	 <!-- End of contents -->
				
		<?php include('sidebar.php'); ?>
	</div>
<?php include('footer.php'); ?>

 

لمن يرغب بتحميل الكود كاملا بصورة جاهزة وسيكون معه ملف الستايل الذي يعنى بالتصميم style.css

من هنا