مشروع : عمل موقع بسيط يرتبط بقاعدة بيانات

اتطرق اليوم الى مشروع عمل موقع بسيط من الصفر بلغة ال 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

من هنا


بواسطة : مصطفى الفارس

عن مصطفى الفارس

مهندس علماني من الطبقة الوسطى أؤمن بأن لي مطلق الحرية في التفكير والنقد وعدم السماح لما هو مقدس عند البعض بالتحكم في مصيري. في اوقات فراغي أكتب بعض المواضيع و اترجم بعضها و أنشرها في هذه المدونة وغيرها من الاماكن. للتواصل يمكن استعمال البريد الالكتروني وشبكة التويتر.

رأيك مهم - اترك تعليق

%d مدونون معجبون بهذه: