كتاب لينكس الشامل :: برمجة الويب

6.8 برمجة الويب

	حول
	حول

	المحتويات
	المحتويات

	مشاريع
	مشاريع

	ثواب
	ثواب

	مقالات
	مقالات

	تنزيل
	تنزيل

	English
	English

6.8 برمجة الويب

محتويات هذا الفصل:

6.8.1 مقدمة في لغة HTML
6.8.2 مقدمة في XML و XHTML
6.8.3 مقدمة في CSS
6.8.4 لمحة عن استخدام JavaScripts
6.8.5 لمحة عن استخدام Java
6.8.6 لمحة عن CGI
6.8.7 استخدام قواعد البيانات بواسطة SQL

6.8.1 مقدمة في لغة HTML

تعتبر النصوص المرقومة Marked-up texts وسيلة شفافة لعمل وثائق إلكترونية أو تخزين بيانات مع توضح سمات معينة وخصائص علائقية (مثلاً خطوط وألوان مختلفة)، وكل ذلك دون أي وسيط (دون الحاجة لمعالج نصوص) بل باستخدام محرر نصوص تقليدي، أحد هيئات النصوص المرقومة هي هيئة SGML وهي قالب عامة بني عليها العديد من الهئيات الفرعية لأهداف مختلفة وذلك بواسطة محددات DTD، من هذه الهيئات HTML أي Hypertext Markup Language التي صممت من أجل صفحات الويب وهي صفحات تحتوي جداول وصور ونصوص مختلفة الألوان والأحجام. وضعت محددات ومعايير هذه اللغة (فيما بعد!) من قبل مؤتمر www انظر www.w3c.org.

نستخدم في SGML وبالتالي HTML راقمات tags تكون موضوعة بين قوسين زاويين (أصغر وأكبر) < >، توضع حول نص معين لنعطيه سمة معينة ، مثلاً سمة الخط السميك bold face في لغة HTML هي <b> ضعها قبل النص الذي تريد إعطاؤه تلك السمة وعند الرغبة في إنهاء هذه السمة نستعمل </b> أو </> لإغلاق الراقمة (يفضل أن تتجنب الثانية) ، وفي بعض الأحيان لا يكون هناك داعٍ لإغلاق راقمة معينة إذا فُهم من الراقمة التي بعدها أن الراقمة السابقة لا يمكن أن تظل عاملة، مثلاً في حالة عمل قائمة فإن الراقمة التي تحدد عنصر جديد في القائمة تنتهي تلقائياً عند دخول عنصر آخر. راقمات SGML غير حساسة لحالة الحروف إن كبيرة أو صغيرة.

هناك راقمات أساسية في أي ملف HTML وسيكون أول ملف لنا كما يلي:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
	<header>
		<title> This is My First HTML file </title>
	</header>
	<body>
<!-- This is a comment //-->
Hello, world!
	</body>
</html>

السطر الأول اختياري نحدد فيه أننا نستعمل محددات DTD للغة HTML الإصدار 4.0 كما نشرتها w3c.

تلميح

حتى تتأكد من أن صفحات HTML التي تكتبها مطابقة للمواصفات التي يضعها مؤتمر الإنترنت العالمي w3c.org زر موقع http://validator.w3.org واطلب تقييم صفحاتك.

إن أي شيء بين <! و > هو مجرد تعليق لا معنى له لهذا لا تؤثر هذه الراقمة على المتصفحات التي لا تفهمها. الراقمة <html> تحيط بكامل الملف، الراقمة <header> تحيط بجزء يتحدث عن الملف ولا يظهر في متنه مثل العنوان ومثل العديد من المحددات مثل

<meta HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="main keywords goes here, and more">
<meta name="description" content="Descripe your file here">
<link rel="shortcut icon" href="favicon.ico">

لاحظ أننا على الترتيب حددنا Unicode UTF-8 على أنه نظام الترميز، ثم ذكرنا أهم الكلمات المفتاحية في هذا الملف لنساعد محركات البحث، ثم ذكرنا وصف الملف، وأخيراً حددنا ملف الأيقوة التي تستخدم عند حفظ الملف في "المفضلة" Favorites وكل تلك الراقمات اختيارية.

في ملفات HTML فإن جميع الفراغات white spaces - بما في ذلك ENTER - وتكراراتها لها نفس المعنى، مثلاً مسافة ثم tab ثم مسافة ثم سطر جديد لها نفس معنى مسافة واحدة، لهذا بإمكاننا أن نقوم بإزاحة الراقمات لنجعل الملف يبدوا مقروءاً أكثر. الراقمة التي تبدأ المتن هي <body> كل ما تحتوي سيظهر في المتصفح، خزّن الملف باسم ينتهي ب html أو htm، ثم افتحه بأي متصفح عدّل عليه ثم في المتصفح اضغط refresh لترى التعديل، الملف السابق يعطي نفس النتيجة مع الملف التالي (ستظهر الكلمتان على سطر واحد):

<html><body>
Hello,
world!
</body></html>

بعض الراقمات قد تأخذ سمات attributes داخل أقواسها الزاوية على شكل متغيّر = قيمة ، ويمكن إحاطة القيمة بعلامة تنصيص/إقتباس مزدوجة أو مفردة أو حتى دونها إن لم تحتوي القيمة على مسافات، مثلاً <img src="myfile.jpg">، وحتى داخل الراقمة الواحدة فإن أي فراغات مثل السطر الجديد تعني مسافة واحدة مثلاً:

<html dir="RTL" lang="AR">
<body bgcolor="yellow">
this is <b>not</b> left

<img
	src="myimage.jpeg"
	alt="A Sample Image"
	>
</body>
</html>

ذكرنا أن الفراغات المختلفة المتالية تتحول إلى مسافة واحدة فكيف نضع مسافتان، كما ذكرنا أن الأقواس الزاوية تترجم إلى راقمات فكيف نكتب أن A أكبر من B! نستخدم عملية escape شبيهة باستعمال \ في اللغات الأخرى نستعمل هنا & متبوعة بمعرف ثم فاصلة منقوطة مثلاً " " تعي مسافة واحدة و "<" و ">" هما أصغر وأكبر ولأي رمز آخر نستعمل # متبوعة برقم عشري يقابل ذلك البايت بين & والفاصلة المنقوطة مثلاً "©" تعني ©

لقد تحدثا عن الصيغة العامة للراقمات، لننتقل الآن للحديث عن الراقمات التي تحدد سمات النص، أولها الترويسة header بالخط السميك التي يتبعها سطر جديد، وهي خطوط أكبرها رقم واحد وأقلها رقم سبعة. كل فقرة من النص نحيطها براقمة الفقرة p التي تتسبب بوضع سطر جديد بعد الفقرة، إذا أردنا وضع سطر جديد دون عمل فقرة جديدة نستعمل الراقمة br. الراقمات b و i و u تحدد الخط السميك والمائل والمسطر على الترتيب. الراقمة tt أو code تحدد خطاً ثابت العرض، تحجز "." و"|" و "-" نفس العرض. ألراقمة pre تظهر النص التي تحويه كما هو (كل الفراغات والأسطر الجديدة ...إلخ تظهر كما هي). الراقمة font لها العديد من السمات مثل face التي تحدد و الخط، ومثل color التي تحدد لونه نعبر عن اللون باسمه مثل "blue" أو بأرقام RGB الست-عشرية مسبوقة ب # مثل "#0000FF".

راقمات سمات النص
الراقمة	المعنى
h1	header1	العنوان الأول (الأكبر)
...	...	...
h7	header7	العنوان السابع (الأصغر)
center	centered	توسيط
p	paragraph	فقرة (سطر جديد ضمنياً)
br	line break	سطر جديد
b	bold face	خط سميك
i	italic	خط مائل
u	underlined	خط مسطر
tt	`fixed width font`	خط له عرض ثابت
pre	`pre-formatted text`	نص منسق مسبقاً
font	font attributes	تحديد سمات الخط

المثال التالي سيبدو مثل الشكل المجاور

<html>
<body>
<center>
<h1><font face="times" color="blue">
My HTML code</font></h1>
<h2>by me</h2>
</center>
<p>
<font face="impact">In this</font>
paragraph I'll use some <b>bold</b>
face text, <i>italic</i>
and <u>underlined text</u>,
but no one like to see them
<b><i><u>all at once</u></i></b>.
</p><p>
	Another paragraph goes here.
</p>
</body>
</html>

My HTML code

by me

In this paragraph I'll use some bold face text, italic and underlined text, but no one like to see them all at once.

Another paragraph goes here.

الراقمة a تحيط بعبارة مثل "انقر هنا" لتجعل النقر عليها يذهب لموقع معين يحدد من خلال السمة href مثلاً
<a href='http://www.cltb.net'> لاحظ أنه يجب أن تحدد البروتوكول إذا كان على الشبكة كما ويمكنك تحديد العنوان بطريقة نسبية (نسبة للموقع الملف الحالي سواءً على الشبكة أو ملف محلي) وذلك دون ذكر البروتوكول ودون البدء بالمجلد الجذر "/" مثلاً
<a href='sec1/index.html'>. الراقمة hr تعمل خط أفقي فاصل يمكن تحديد عرضه بالسمة width التي قد تكون نسبة مئوية مثلاً <hr width='50%'>. الراقمة img تدرج صورة داخل النص نحدد ملف هذه الصورة بالسمة src كما في href مع الراقمة a، ويمكن تحديد طولها وعرضها بالسمات height و width.

الراقمة ol أو ul تعمل قائمة كل عنصر فيها محاط بالراقمة li، الفرق بي ul و ol أن الأولى تضع نقاط أمّا الثانية فتكون أرقاماً تلقائياً ويمكن جعلها حروف بواسطة السمة type="a" أو type="A" ويمكن أن تكون أرقام رومانية type="i" أو type="I". الراقمة dl تحيط بمجموعة من الحدود وتعريفاتها، يحيط بالحد dt وبالتعريف نفسه dd بهذا يظهر تعريف كل حد إلى الداخل.

راقمات تدرج كائن معين
الراقمة	المعنى
a	anchor - hyper link	رابط/وصلة
hr	horizontal line	خط أفقي
img	image	صورة
div	-	مربع نص بكامل العرص
span	-	مربع نص على حجم النص تماماً
ol	ordered list	قائمة مرتبة (مرقمة)
ul	list	قائمة غير مرتبة
li	list item	بند من بنود القائمة ul أو ol
dl	definetion list	قائمة تعريفات
dt	- term	المعَرف
dd	- definetion itself	التعريف نفسه
table	table	جدول
tr	table row	صف من الجدول
td	table data	خلية في الجدول
th	table header	خلية ترويسة في الجدول

الراقمة table تدرج جدول ويمكن تحديد وجود إطار وسمكه بالسمة border فإذا كانت صفر كان دون إطار. كل صف فيه محاط بالراقمة tr وكل خلية في ذلك الصف td ، نوع خاص من الخلايا يستخدم كعنوان للصف أو العمود. يمكن توسيع الخلية أفقياً لعدة أعمدة بواسطة السمة colspan، ويمكن توسيع الخلية عمودياً، المثال التالي:

<html>
<body>
<table border="1">
<tr><th>-</th><th>col1</th><th>col2</th><th>col3</th><th>col4</th></tr>
<tr><th>row1</th><td>1,1</td><td>2,1</td><td>3,1</td><td>4,1</td></tr>
<tr><th>row2</th><td>1,2</td><td colspan=2>2,2-3,2</td><td>4,2</td>
<tr><th>row3</th><td>1,3</td><td>2,3</td><td>3,3</td><td>4,3</td></tr>
</table>
</body>
</html>

يعطي ما يشبه

-	col1	col2	col3	col4
row1	1,1	2,1	3,1	4,1
row2	1,2	2,2-3,2		4,2
row3	1,3	2,3	3,3	4,3

هذه أهم المراجع والمواقع التعليمية ذات الصلة

www.htmlhelp.com/reference/html40
www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml
www.stonehand.com/doc
www.w3.org/TR/REC-html40

6.8.2 مقدمة في XML و XHTML

هناك بعض الضبابية في معايير SGML في كيفية التعامل مع الكثير من الأشياء مما جعل تنفيذ برامج إعراب(تفسير) parser هذه اللغة صعباً وتتضارب البرامج فيما بينها في تفسير نفس الكود أحياناً مثل:

<b><i><u>This</b> and </i> that </u>.

لذا جاءت معايير لغة eXtensible Markup Language (أو XML)، هذه المعايير تضيف المزيد من القيود لتتأكد من أن جميع طرق تفسير النص المرقوم ستوصل لنفس النتيجة ، مثلاً يجب أن تكون الراقمات غير متداخلة بكلمات إخرى إذا وجدت راقمة داخل أخرى يجب أن تغلق الراقمة الداخلية أولاً كما يلي

<b><i><u>This</u> and </i> that </b>.

كما ويجب أن تغلق كل الراقمات ،أي لا يوجد إغلاق ضمني للراقمة على عكس SGML مثل راقمتي li متتابعتان أو راقمة li متبوعة براقمة ul، أما الراقمات التي لا تغلق لطبيعتها مثل img و hr و br فإنا تغلقها بوضع "/" قبل إقلاق القوس الزاوي كما يلي

<img src="myfile.jpg"/><br/>
Line
<hr/>
Another line<br/>

كما أن هذه اللغة حساسة لحالة الحروف اللاتينية إن كبيرة أو صغيرة فلا يجوز أن تكتب

<B>this is FORBIDDEN in XML</b>.

لتمييز ملفات SGML عن XML نضع طوعياً سطراً في مقدمة ملفات XML كما يلي

<?xml version='1.0'?>

متبوعاً طوعياً بسطر لبيان محددات DTD المستعملة بطريقة تشبه ما فعلناه في SGML كما يلي:

<!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook XML V4.2//EN"
	"http://www.oasis-open.org/docbook/xml/4.2/docbookx.dtd">

وباستعمال محددات مختلفة يمكن تطبيق لغات فرعية مختلف، بعضها يستخدم للتصميم ثلاثي الأبعاد وبعضها الآخر للتصميم المتجهي ثنائي الأبعاد مثل صيغة SVG وما يهمنا هنا هي صيغة HTML بطريقة XML التي سميت XHTML ويمكن أن تستعمل نفس الهيئة القديمة تقريباً مع المزيد من القيود كما ويمكن أن ينتهي اسم الملف بعد النقطة ب xhtml أو html أو htm. لاحظ الأسطر الأولى في المثال التالي:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<header>
		<title> This is My First XHTML file </title>
	</header>
	<body>
<!-- This is a comment //-->
Hello, world!
	</body>
</html>

قد تسأل لماذا لم تغلق راقمة DOCTYPE فذلك لأن صيغتها كصيغة التعليق التي تقفز عن ما بداخل <!>

6.8.3 مقدمة في CSS

قبل أن نتحدث عن CSS لنتحدث عن الطريقة التقليدية أولاً. لتحديد حجم ولون الخط ولون الخلفية والصورة الخلفية وطول وعرض الحاوية يمكن استعمال بعض السمات التي تختلف من راقمة لراقمة مثلاً في راقمة المتن body التالية

<body text="FFFFFC" bgcolor="#000000" link="#FFFF00" vlink="#FFFF80">

هنا نحدد لون النص بالأبيض والخلفية بالأسود والوصلات بالأصفر والوصلات التي زرتها قبلاً بالأصفر الفاتح. ويمكنك أن تحدد صورة مكررة كخلفية بالسمة background="bg.jpg". ولكن لو جربنا استعمال السمة text لتعديل لون خلية في جدول فإنها لن تعمل. لو كنت تستعمل الراقمة font لتحديد ألوان وحجم العناوين أو مثلاً لتلوين المصطلحات بالأزرق والتحذيرات بالأحمر ...

<font face="times" color="blue" size="7">
	A Blue Times font goes here.</font><br/>
<font face="arial" color="red" size="6">
	A Red Arial font goes here.</font>

لاحظ أن حجم أكبر خط هو 7 والأصغر واحد، ويمكن تحديد وحدة مثل النقطة point بواسطة اللاحقة pt، كما يلي :

<font face="times" color="blue" size="32pt">
	A Blue Times font goes here.</font><br/>
<font face="arial" color="red" size="22pt">
	A Red Arial font goes here.</font>

تذكر طريقة تحديد حجم صورة بالسمتين width و height ألتي يمكن أن تلحق بعلامة النسبة المئوية أو بالاحقة pt للنقاط أو px للبيكسيلات pixels. هذه أهم اللاحقات الخاصة بتحديد الحجم:

اللاحقة	المعنى
%	percent	النسبة مئوية مقانة مع الحاوية
px	pixcel	بيكسل نقطة على الشاشة
in	inch	إنش/بوصة
pt	point, 1in=72pt	نقطة على الطابعة (يوجد 72 في الإنش)
pc	1pt=12pc	جزء من 12 من النقطة على الطابعة
cm	centimeter	سم
em	size of big M	عرض حرف M الكبير في الخط الحالي
ex	size of small x	عرض حرف x الصغير

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

يوجد طريقة تسمح بتحديد جميع السمات لجميع الراقمات بنفس الطريقة وذلك باستعمال السمة style كما يلي:

<p style='
	font-weight: bold;
	font-size:22pt;
	font-family:serif,times;
	background-color: black;
	color: yellow;' >
Hello, world!!</p>

ما داخل السمة style هو أسماء سمات داخلية متبوعة ب ":" متبوعة بقيمة ثم فاصلة منقوطة ";" (طبعاً يمكنك وضعها على سطر واحد)، يمكن استخدام هذه السمة مع أي راقمة بنفس الطريقة مثلاً

<div style='
	font-weight: bold;
	font-size:22pt;
	font-family:serif,times;
	background-color: black;
	color: yellow;' >
Hello, world!!</div>
<h3 style='
	font-weight: bold;
	font-size:22pt;
	font-family:serif,times;
	background-color: black;
	color: yellow;' >
Hello, world!!</h3>

أهم المسات الداخلية يمكن أن تكون

text-indent		text-decoration		font-weight
font-style		font-size		font-family
text-align		float			background-color
color			margin-left		margin-right
margin-top		margin-bottom		padding-left
padding-right		padding-top		padding-bottom
border-color		border-width		border-style
overflow		position		top
left			bottom			right
height			width			backgrund
backgrund-image		backgrund-repeat	backgrund-position
backgrund-position	backgrund-attachment	z-index

يمكن تحديد هذه السمات لكل الراقمات من نوع محدد، داخل راقمة style داخل الترويسة header، وذلك بذكر الراقمة التي نريد تحديد سماتها ثم حاصرات { } ثم السمات الداخلية، مثلاً

<html>
	<header>
		<style>
h1 { color:blue;} 
p { text-indent:8ex;}
a { text-decoration:none; }
a:hover { text-decoration:underline;/*Hello this a comment*/ }
		</style>
	</header>
<body>
	<h1>Hello</h1>
	<p>
This is a new paragrph with a line,
<a href="http://www.cltb.net">Click here!</a>,
If this paragraph is long enough you will notice
how the text is indented.
	</p>
	<p>This is another new paragrph,
<a href="http://www.linux.com">Click here!</a>,.</p>
	<h1>Hello</h1>
</body>
</html>

لاخظ كيف كانت كل العناوين الأولى h1 زرقاء وكيف أزيح النص في بداية كل فقرة بمقدار 8 حروف x صغيرة وكيف أصبحك كل الوصلات غير مسطرة (دون خط تحتي) وعند التأشير بالفأرة فوقها يظهر الخط التحتي (هذا معنى :hover أي عند التأشير) لاحظ أنني أتحكم

إذا كانت الوثيقة متعددة الملفات (كما هذا الكتاب) وتريد أن تظهر جميعها بنفس الأسلوب يمكنك حفظ هذه السمات (التي تحصرها الراقمة style) في ملف منفصل وتحميه في كل ملفات HTML الخاصة بالوثيقة، مثلاً احفظ الملف التالي باسم first.css:

// Hello this my first.css file
h1 { color:blue;} 
p { text-indent:8ex;}
a { text-decoration:none; }
a:hover { text-decoration:underline;/*Hello this a comment*/ }

لاستعمال هذا الملف في HTML استعمل الراقمة link داخل header كما يلي

<html>
	<header>
	<link rel="stylesheet" type="text/css" href="first.css">
	</header>
<body>
	<h1>Hello</h1>
	<p>
This is a new paragrph with a line,
<a href="http://www.cltb.net">Click here!</a>,
If this paragraph is long enough you will notice how
the text is indented.
	</p>
	<p>This is another new paragrph,
		<a href="http://www.linux.com">Click here!</a>,.</p>
	<h1>Hello</h1>
</body>

هذه الطريقة تسمى CSS.

ذكرنا على عجل السمات الداخلية ولم نذكر ما هي القيم التي يمكن أن تأخذها، إليكم بعضها text-indent إزاحة بداية الفقرة عن بقية الفقرة ويمكن استعمال أي وحدة تريد، text-decoration يمكن أن تكون none أو underline أو overline أو line-through (تسطير النص بخط تحتي وفوقي ومن خلاله)، font-weight يمكن أن تكون lighter أو normal أو bold أو bolder وهي وزن النص بين الرفيع والثخين، أما font-style يمكن أن تكون none أو italic أو oblique، font-size حجم الخط بأي وحدة مثل pt أو مجرد رقم أو بين xx-small إلى small ف normal و large إلى xx-large، يمكن أن تحدد الخط بواسطة font-family ويمكن أن تحدد أكثر من واحد بحيث يفصل بينها فواصل comma فإذا لم يجد الأول استعمل الثاني، حدد اتجاه النص ب text-align التي يمكن أن تكون right أو left أو center أو justify. يمكنك أن تجعل عنصر مثل الصورة أو الجدول طافياً إلى يمين أو يسار النص بواسطة السمة float مع تحديد left أو right. لون النص بواسطة color التي تأخذ إما اسم اللون مثل black أو رقم RGB بالست عشري بعد #، وبنفس الطريقة لون الأرضية (الخلفية) background-color. نحدد الهوامش الداخلية والخارجية (في جدول مثلاً حول كل خلية) بواسطة margin-left و margin-right و margin-top و margin-bottom padding-left و padding-right و padding-top و padding-bottom. لون الإطار بواسطة border-color و عرضه border-width التي قد تكون thin أو thick أو medium وسمته border-style التي قد تكون none أو solid أو hidden أو dotted أو dashed أو double أو inset أو outset أو ridge أو groove. الأبعاد والموقع بالسمات top و left و bottom و right و height و width ولكن لا يمكنك تحديد الموقع بكل مستقل كما تريد إلا إذا كانت قيمة السمة position هي absolute وليس relative، يمكنك أن تطلب أشرطة تمرير بواسطة القيمة scroll للسمة overflow وذلك في حال فاض النص عن الطول وعرض الذي حددته سابقاً أو تطلب اخفاء الفائض بالقيمة hidden. يمكن تحديد صورة الخلفية بالسمة backgrund-image التي تكون قيمتها ما يشبه url(something.png) يمكن تحديد تكرارها أم لا بالسمة backgrund-repeat التي قد تكون no-repeat أو repeat أو repeat-x أو repeat-y. في لم تطلب تكرار الخلفية وكانت أصغر يمكن تحديد مكان ظهروها بواسطة backgrund-position مثلاً لتكون في الزاوية السفى اليسرى "bottom left" أو حتى بتحديد الإحداثيات السينية والصادية مثلاً "20px 30px"، يمكن أن نجعل الخلفية تبقى ثابتة (هذا هو التلقائي)عند التنقل في النص scrolling أو أن نجعلها تتحرك معه وذلك بواسطة backgrund-attachment التي قد تكون fixed أو scroll. وأخيراً z-index هي الإحداثي الثالث، الأعلى في المقدمة.

6.8.4 لمحة عن استخدام JavaScripts

هي لغة معيارية وضعتها Netscape تشبه في شكلها سي++ وجافا، يمكن استعمالها لعمل صفحات يمكنها التفاعل مع المستخدم وذلك بربط حدث معين مثل onclick مع وظيفة أو مجموعة من أوامر لغة JavaScripts انظر المثال التالي

<img id="img1"
 src="logo.png" width="64" height="32"
 onmouseover='this.width="128";this.height="64";'
 onmouseout='this.width="64";this.height="32";'
>

في هذا المثال نضع صورة logo.png حجمها 64 في 32 ولكن عن وضع مؤشر الفأرة فوقها onmouseover تصبح أبعادها أكبر (128 في 64) وعند سحب الفأرة بعيداً عنها onmouseout تعود الأبعاد كما كانت. المثال التالي يستخدم الراقمة script للإحاطة بكود JavaScript لاحظ أيضاً استخدام <!> لإحفاء ما بداخلها في المتصفحات التي لا تدعم JavaScripts هذا المثال يعمل على الذهاب إلى صفحة أخرى تلقائياً من خلال تغيير مرجع العنوان location.href:

<html>
<body>
<center><h2>
Please Update your bookmare<br/>
This page is moved</h2></center>
<script language="javascript"> <!--
top.location.href="http://www.cltb.net";
//--> </script>
if your old browser does not support JavaScripts
<a href="http://www.cltb.net">click here</a>
</body>
</html>

يمكن الراقمة script داخل head واستدعاء الوظائف التي تعرفها من خلال حدث معين كما في المثال التالي:

<html>
<head>
<script language="javascript"> <!--
function setsize(obj,size) {
	w=obj.width*size;
	h=obj.height*size;
	obj.width=w;
	obj.height=h;
}
//--> </script>
</head>
<body>
<img id="img1"
 src="logo.png"
 onmouseover='setsize(this,2);'
 onmouseout='setsize(this,0.5);'
>
</body>
</html>

توفر JavaScripts العديد من الوظائف مثل document.write("some<i>thing</i>") تكتب ما بداخل علامة التنصيص في وثيقة HTML. الوظيفة alert تظهر صندوق رسائل، والوظيفة prompt تسأل عن قيمة ، والوظيفة confirm تظهر صندوق سؤال OK و Cancel مثلاً

<html>
<body>
<h1>Welcome</h1>
<script language="javascript"> <!--
alert("Welcome to JavaScripts");
//--> </script>
<h1>To JavaScripts</h1>
<script language="javascript"> <!--
document.write("Hello, ");
document.write(prompt("What is your name ?","Ahmad"));
//--> </script>
<hr/>
<script language="javascript"> <!--
if (confirm("Do like to visit\
 'Comprehensive Linux Textbook' site ?"))
	top.location.href="http://www.cltb.net";
else
	document.write("<br/>see you later!");
//--> </script>
</body>
</html>

منطق لغة Javascript لا يختلف كثيراً عن سي++ أو جافا فلديك نفس حلقات for و while وجمل if else وغيرها الكثير، التعليقات بواسطة // أو /* */ ، وكما في سي++ عليك الإعلان عن المتغيّرات ولكن نوع المتغيّر هنا هو var، الوظائف الرياضية موجودة كطرق للكائن Math مثل Math.abs(x) ويمكن استدعاؤها دون Math، من هذه الوظائف:

abs	max(a,b)	min
abs	round	floor	ceil
sin	cos	tan
exp	log	pow(x,y)	sqrt

يمكن أن يكون المتغيّر سلسلة نصية ويمكن تحويله لرقم بواسطة الوظيفة parseInt ، لمعرفة المحرف رقم كذا (العد من صفر) بواسطة الوظيفة charAt، ويمكن أخذ سلسلة نصية فرعية بواسطة الطريقة substr وتمرر لها البداية والطول مثلاً 's1.substr(1,3);' تأخذ ثلاث حروف بدءاً من الحرف الثاني في s1. كل راقمة تعمل كائن يحدد اسمه بالسمة id ويمكن معرفته بواسطة this، يمكن الوصول لما بداخل راقمة بواسطة الخاصية innerText، ويمكن تغيير مكان الكائن وعمل الكثير من الحركات، انظر المثال التالي:

<html>
<head>
<script language="javascript"> <!--
function doit() {
	var i=parseInt(img1.style.left)+10;
	img1.style.left=(i % 500);
	setTimeout("doit()",100);
}
//--> </script>
</head>
<body>
<img id="img1"
 src="logo.png"
 style="position:absolute;top=0;left=0;"
>
<script language="javascript"> <!--
setTimeout("doit()",100);
//--> </script>

</body>
</html>

لاحظ استعمال الوظيفة setTimeout التي تأخذ معاملين هما ماذا تفعل عند إنتهاء الوقت (غالباً اسم وظيفة) وثانيهما هو الزمن بالميللي ثانية.

يمكن عمل الكثير من الحركات بواسطة صفحات HTML الديناميكية DHTML ولكنها مزعجة في اختلاف المتصفحات في تفسيرها.

6.8.5 لمحة عن استخدام Java

يمكن استغلال قدرات لغة جافا Java الرسومية القوية في توليد صفحات تفاعلية وذلك بعمل صفحة HTML تحتوي على راقمة لإظهار بريمجات جافا Java applets. تكمل لاحقاً

6.8.6 لمحة عن CGI

في جميع الأمثلة حتى الآن كان المتصفح يطلب من خادم ملفاً وبعد أن يحصل عليه يعرضه بالطريقة المناسبة فقد يكون HTML أو صورة أو بريمج applet أو script، لاحظ أن التنفيذ يكون على جهاز المخدوم وليس الخادم والتفاعل يتم مع الملف الذي أصبح موجوداً على الجهاز المخدوم، فإذا كان لدينا صفحة تفاعلية يتصفحها شخصان فإنه لا يمكن أن يوجد أي إتصال بينهما إذ يستحيل عمل منتديات أو ساحات "دردشة" بواسطة تلك الأساليب، كما يستحيل عمل عداد للزوار أو التعامل مع قاعدة بيانات. كل تلك التطبيقات بحاجة لما يسمى عمل من طرف الخادم server side أحد أهم الطرق لعمل ذلك هي عبر CGI حيث يعمل خادم الويب (مثل apache) على استدعاء برنامج (غالباً داخل مجلد cgi-bin) وإرسال مخرجاته للمخدوم، ولأن البرامج موجود على الخادم فإنه يستطيع قراءة وكتابة ملفات هناك والدخول إلى قواعد البيانات ...إلى آخره. يمكن أن يكون هذا البرنامج مكتوب بلغة python

#!/usr/bin/python
# python and CGI
import cgi
print """
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
"""

أو perl

#!/usr/bin/perl -w
use CGI qw(:standard);
# to output <html>
print(header());
# to output <header> <title> and body <body>
print(start_html(title=>"this is the title"));
print("<h2>Hello world </h2>");
print(end_html());

أو Java إذا كان الخادم يدعم servlets انظر http://jakarta.apache.org/tomcat. وحتى يمكن أن يكون برنامج حقيقي كتب بلغة سي أو سي++ ويعطى الامتداد .cgi، ولكن المفضل غالباً هو php حيث صممت لهذا الغرض فيكتب ملف HTML عادي وعند الرغبة في لغة php نستخدم الراقمة الخاصة بها وهي <?php ?> واحفظ الملف باسم index.php مثلاً

<html>
<body>
you are visitor number

        <span style='background-color:#000000;color:#FFFFFF;'>(
        <code style='background-colo:#000000;color:#FFFFFF;'> <?php
	$visitors=0;
	if($file=fopen('visitors.txt','r')) {
		$visitors=fread($file,5); fclose($file);
	}
	$visitors++;
	if($file=fopen('visitors.txt','w+')) {
		fwrite($file,$visitors,5);
		fclose($file);
	}
	echo "$visitors";
        ?></code>)</span>
hello
</body>
</html>

عندما تكتب ملفات CGI لا يكفي أن تكتبها بالشكل الصحيح بل يجب أن تتصفحها من خلال خادم الويب، مثلاً إذا حفظتت الملف السابق في /var/http/www/html/index.php يجب أن تفتح الملف عبر http://127.0.0.1/index.php وليس file:///var/http/www/html/index.php

يمكن أن يرسل المخدوم بيانات للخادم حيث يقوم المستخدم بملئ نموذج form وعند النقر على submit فإن ما أدخله يرسل للبرنامج المحدد بالسمة action الموجود على الخادم، وهناك طريقتين للإرسال هما GET و POST ففي الأولى تظهر قيمة كل متغيّر في العنوان مثلاً يصبح العنوان http://127.0.0.1/index.php?name="ahmad" عندما تكون قيمة name هي ahmad ويمكنك عمل ذلك بيدك، أما في طريقة POST فترسل المتغيرات بحيث لا تظهر في العنوان ولكن هذا لا يغيّر حقيقة أن بروتوكول http لا يقوم بأي تشفير. الحقول التي يحتويها النموذج تكون عبارة عن راقمات input حيث نحدد في كل منها النوع مثلاً text و password و checkbox و button و file وحتى hidden التي يمكن أن تستعمل لتمرير متغيرات، ويمكن استعمال textarea لنصوص من أكثر من سطر و select و option للاختيار من متعدد كما في هذا المثال

<html>
<head>
<script language="javascript"> <!--
function validate() {
	var p1=f1.passwd.value;
	var p2=f1.passwd2.value;
	if (!f1.uname.value||!p1||!p2) {
		alert("you should not leave fields empty");
		return false;
	}
	if (p1!=p2) {
		alert("the two passwords does not match each other");
		return false;
	}
	return true;
}
//--> </script>
</head>
<body>
<form name="f1" action="test.php" method="POST"
	onSubmit="return validate()">
name:
	<input type="text" name="uname" maxlen=30> <br>
password:
	<input type="password" name="passwd"> <br>
confirm password:
	<input type="password" name="passwd2"> <br>
Gender:
	<select name="gender">
	<option value="0">male</option>
	<option value="1">female</option>
	</select> <br>
<input type='hidden' name='flag' value='0'>
<center><input type='submit' value='OK.'></center>
</form>
</body>
</html>

هذا المثال يرسل البيانات إلى test.php وذلك بطريقة POST وقبل ذلك يستدع وظيفة validate التي تكتبها بلغة JavaScript في راقمة head لنفس الملف، التي يفترض أن تعيد true إذا كان المعلومات المقدمة صحيحة قبل إرسالها، و false إذا كان هناك أي خطأ. هذه المتغيرات تتوفر بطرق مختلفة في كل لغة، مثلاً في لغة php تتوفر على شكل منظومة معرفة مسبقاً اسمها _POST وآخر اسمه _GET لمتغيرات post و get على الترتيب مثلاً يمكن أن نكتب ملف test.php الذي تستدعيه الصفحة السابقة كما يلي:

<html><body><h1>
<?php
echo "Hello,";
echo $_POST['uname'];
?></h1></body></html>

وعند النقر على زر الموافقة ستظهر لنا صفحة بالاسم الذي حددناه. يمكن أن نجعلها تخزن قاعدة بيانات بكل الأسماء على الخادم وتعرضها

<html><body><h1>
<?php
	if($_POST['uname']&&$file=fopen('names.txt','a+')) {
		$unames=$_POST['uname']+" "
		fputs($file,$unames);
		fclose($file);
	}
	if($file=fopen('names.txt','r')) {
		$unames=fgets($file);
		fclose($file);
	}
	echo $unames;
?></h1></body></html>

يمكن استعمال input من نوع file من أجل رفع (تحميل) ملفات upload وذلك عبر المنظومة HTTP_POST_FILES ومعرّف كل ملف فيها هو الاسم المستعمل في السمة name لراقمة input (في المثال اسمها userfile)، وبعد عمل submit يمكن نقل هذا الملف من المجلد المؤقت إلى الموقع المطلوب بواسطة move_uploaded_file التي تأخذ اسم المكان الذي رفع فيه (نعرفه من HTTP_POST_FILES ) ثم اسم الملف الذي سنرفعه إليه، المثال التالي يرفع الملف إلى مجلد اسمه contrib

if (!file_exists("contrib")) {
	mkdir("contrib",0777);
}
@chmod($filedir,0777);
$filebasename=basename($HTTP_POST_FILES['userfile']);
move_uploaded_file($HTTP_POST_FILES['userfile'],"contrib/$filebasename");

ويمكنك حذف الملف من أجل الكتابة فوقه overwrite وإذا رغبت في ذلك (عبر متغير معين) وإذا نجحت عملية الرفع ضع التالي قبل سطر move_uploaded_file

if ($overwrite_flag=="y" && $HTTP_POST_FILES['userfile']['error']==0) {
	@unlink("$filedir/$filebasename");
}

ويمكن عمل ذلك حتى في إصدارات php التي لا توفر move_uploaded_file وذلك بقراءة متغير الإعدادات upload_tmp_dir ثم النسخ العادي على الخادم كما في المثال التالي:

function is_uploaded_file($filename) {
    if (!$tmp_file = get_cfg_var('upload_tmp_dir')) {
        $tmp_file = dirname(tempnam('', ''));
    }
    $tmp_file .= '/' . basename($filename);
    /* User might have trailing slash in php.ini... */
    return (ereg_replace('/+', '/', $tmp_file) == $filename);
}

if (is_uploaded_file($HTTP_POST_FILES['userfile'])) {
   if (!file_exists("contrib")) {
       mkdir("contrib",0777);
   }
   @chmod($filedir,0777);
   copy($HTTP_POST_FILES['userfile'], "contrib");
   @unlink($HTTP_POST_FILES['userfile']);
} else {
  switch($HTTP_POST_FILES['userfile']['error']){
   case 0: //no error; possible file attack!
     echo "There was a problem with your upload.";
     break;
   case 1: // uploaded file exceeds the upload_max_filesize directive in php.ini
     echo "The file you are trying to upload is too big.";
     break;
   case 2: // uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the html form
     echo "The file you are trying to upload is too big.";
     break;
   case 3: // uploaded file was only partially uploaded
     echo "The file you are trying upload was only partially uploaded.";
     break;
   case 4: // no file was uploaded
     echo "You must select an image for upload.";
     break;
   default: // a default error, just in case!  :)
     echo "There was a problem with your upload.";
     break;
}

لاحظ استعمال ereg_replace لوضع "/" واحدة مكان كل تكراراتها التي قد تحصل عندما ينتهي اسم المجلد بها ونضيف نحن واحدة أخرى تفصل بين اسم المجلد واسم الملف.

تحذير

المثالان الأخيران لتوضيح عملية upload لا يعملان ولكني لم أجد الوقت لتصحيحهما، يمكنكم مراسلتي بأية اقتراحات.

عند استلام أي معلومات من المستخدم عبر أي طريقة ومنها النماذج forms عليك التأكد من أن المستخدم لم يمرر رموز خاصة وذلك عبر استعمال وظائف مثل addslashes و removeslashes ويمكن استعمال الطباعة الخام عبر وظيفة print_r، وغيرها من المحاذير انظر www.php.net/manual/en/security.registerglobals.php و www.php.net/manual/en/security.variables.php.

هذه بعض المواقع ذات الصلة ب CGI

www.cgi101.com
www.w3.org/cgi
www.w3schools.com

6.8.7 استخدام قواعد البيانات بواسطة SQL

تعتبر معايير لغة الطلبات التركيبية Structured Query Language أو SQL للاختصار، سواءً البسيطة SQL-92 أو الأكثر تعقيداً وقوة SQL-99 (تبعاً لسنة وضعها) من أهم المعايير المعتمدة في معظم قواعد البيانات مثل Oracle و IBM DB و MySQL و postgreSQL وغالباً تلتزم على الأقل بمعايير SQL-92 وجزء كبير من SQL-99 كلما زاد تطبيق معايير هذه الأخيرة التي تلزم قاعدة البيانات بالمزيد فإها تصبح أقل سرعة، إذا كنت تريد قواعد بيانات موثوقة دون أي تكلفة فإنك أمام خياران هما MySQL و postgreSQL فهما برنامجان حران وفق رخصة GPL الأولى أسرع والثانية أكثر مطابقة لمعايير SQL-99 وأكثر موثوقية ومصممة لتتجاوب مع عدد كبير جداً من المستخدمين دفعة واحدة لذا قد تكون الأخيرة أسرع عند القيام بمهمات معقدة لأكثر من طرف دفعة واحدة. سنتعامل في هذا البند مع MySQL على سبيل المثال ولن يكون صعباً عليك التعامل مع الأخريات.

تكمن فائدة قواعد البيانات في حفظ البيانات التي يدخلها زائرو موقع معين عبر ملئهم للنماذج أو في استرجاع تلك البيانات، قد تستخدم هذه البيانات في عمل المنتديات أو في حفظ المعلومات الشخصية للمشتركين أو نظام تسجيل المساقات الجامعية، يمكن الجمع بين نظام قواعد البيانات والوظائف المكتبية للتعامل مع الملفات مثلاً لعمل منتدى نستخدم قواعد البيانات لحفظ عنوان المشاركة ومعرّف المرسل ..إلخ ثم اسم الملف الذي حفظت فيه، ونستخدم الوظائف المكتبية لفتح الملف الذي يحتوي نص المشاركة (لأن المتغيرات ذات الطول المتغيّر تجعل قاعدة البيانات بطيئة)

قبل تشغيل مراقب قاعدة بيانات MySQL (واسمه mysqld والذي تقوم توزيعتك غالباً بعمل خدمة تقوم بتشغيله تلقائياً) تأكد من أن إعداداته تناسبك، تجدها في الملف /etc/my.cnf

     [mysqld]
     datadir=/usr/local/mysql/var
     socket=/var/tmp/mysql.sock
     port=3306
     user=mysql
     [mysql.server]
     basedir=/usr/local/mysql

كما أن عليك عمل كلمة للمستخدم الجذر الخاص بها (طبعاً تختتلف عن كلمة سر المستخدم الجذر للنظام ككل) وذلك بالأمر mysqladmin متبوعاً إن شئت بالخيار h لتحديد الجهاز الذي يعمل عليه الخادم ثم الخيار u لتحديد اسم المستخدم ما يهمنا الآن هو root ثم password متبوعة بكلمة السر كما في هذا المثال:

bash# mysqladmin -u root password donotlook

يمكن التعامل مع خادم قواعد البيانات عبر العديد من البرامج المخدومة clients ولكن أبسطها هو الأداة mysql التي تأتي من نفس الموقع وهو يعتمد على الأوامر، يمكنك إن شئت تمرير الجهاز بالخيار h واسم المستخدم بالخيار u وبدلاً من كتابة كلمة السر كمعامل استعمل الخيار p لتسأل عنها، ثم إن شئت أيضاً اسم قاعدة البانات، ولاحظ أننا لا نتحدث عن اسم الملف لأن موقع الملف محدد مسبقاً داخل إعدادات MySQL، مثلاً

bash# mysql -h localhost -u root -p 
PASSWORD: ********
mysql>

تتصل مع خادم MySQL على نفس الجهاز باسم المستخدم الجذر (ليس الخاص بالنظام طبعاً) فيظهر محث MySQL. الأوامر التي نطبعها في هذا المحث هي طلبات/استعلامات queries بلغة SQL، وكل منها يجب أن ينتهي بالفاصلة المنقوطة ";" كما في لغة سي ولكن على عكس لغة سي فإن الكلمات المفتاحية المحجوزة ليست حساسة لحالة الحروف إن كبيرة أو صغيرة ولكنها -مرة أخرى- حساسة عندما يتعلق الأمر بأسماء الجداول وقواعد البيانات، جرت العادة أن تكون الكلمات المفتاحية والمحجوزة كبيرة مثلاً اكتب SELECT 1+2, CURRENT_DATE, VERSION(); ولكن لا ضير أن تكتب SeLECt 1+2, CURRENT_DATE, VerSion();.

الطلب SELECT يعمل على إيجاد قيمة ما تطلبه منه يمكن أن تقوم بأكثر من طلب دفعة واحدة تفصل بينها فاصلة "," سيظهر الناتج مرتباً في جدول كل طلب في عمود وقيمته في الصف التالي وبعدها عدد الصفوف (دون صف العنوان) والزمن اللازم لذلك

mysql> SELECT SIN(PI()/4)+1;
+---------------+
| SIN(PI()/4)+1 |
+---------------+
| 1.707170      |
+---------------+
1 row in set (0.00 sec )
mysql> SELECT SIN(PI()/4)+1 AS result;
+---------------+
| result        |
+---------------+
| 1.707170      |
+---------------+
1 row in set (0.00 sec )

هذه نفسها تستخدم لإيجاد جزء من جدول في قاعدة البيانات. استخدم CREAT DATABASE mydb لعمل قاعدة بيانات حيث mydb هو اسمها. استعمل SHOW DATABASES لعرض قواعد البيانات المتوفرة على ذلك الخادم. لاحظ أننا لم نحدد قاعدة بيانات عند تشغيل mysql نستطيع تحديد واحدة الآن بواسطة USE، مثلاً:

mysql> USE mydb;

يتم تخزين البيانات في قاعدة البيانات على شكل صفوف rows داخل جداول tables (أي يمكن أن تحتوي قاعدة البيانات الواحدة أكثر من جدول) وكأي جدول فإن لها عدد محدد مسبقاً من الأعمدة columns لكل منها نوع وحجم محدد مسبقاً، طبعاً ذلك لا علاقة له بطريقة عرض البيانات، أحياناً يسمى كل صف من البيانات سجل record وكل عمود حقل field. لنعمل جدول نستعمل CREATE TABLE ثم اسم الجدول ثم بين قوسين اسم كل عمود ونوعه، مثلاً:

mysql> CREATE TABLE mytb ( name VARCHAR(20) ,
    birth DATE , gender CHAR(1) ) ;

نوع كل عمود في المثال هي على الترتيب سلسلة نصية بطول متغير كحد لا يتجاوز 20 بايت للاسم ثم تاريخ DATE ثم سلسلة نصية ثابتة الطول وهو هنا 1 ويمكن استخدام ENUM('male','female') بدلاً منها. الأنواع الأساسية تجدها في الجدول المرفق أدناه

النوع	المعنى
`BOOL`	إما صحيح TRUE أو خطأ FALSE وهي فعلياً TINYINT
`TINYINT`	عدد صحيح من واحد بايت(8-بت) يمثل من -128 إلى 127 أو من 0 إلى 255
`SMALLINT`	عدد صحيح ب16-بت
`INT`	عدد صحيح ب32-بت
`BIGINT`	عدد صحيح ب64-بت
`DOUBLE(w,d)`	عدد نسبي عدد منازله بالكامل (مع الإشارة) هو w منها d بعد الفاصلة العشرية
`DATETIME`	الوقت والتاريخ حتى عام 9999
`TIMESTAMP`	الوقت والتاريخ حتى عام 2030
`DATE`	التاريخ بصيغة YYYY-MM-DD
`TIME`	الوقت فقط بصيغة HH:MM:SS.ss
`YEAR`	السنة
`CHAR(n)`	سلسلة نصية طولها ثابت وهو n وهو رقم بين 1-255
`VARCHAR(n)`	سلسلة نصية طولها مغيّر حده الأقصى n وهو رقم بين 1-255
`TINYBLOB` أو `TINYTEXT`	سلسلة محارف طولها كحد أقصى 255
`BLOB` أو `TEXT`	سلسلة محارف طولها كحد أقصى (2 ¹⁶ - 1)
`LONGBLOB` أو `LONGTEXT`	سلسلة محارف طولها كحد أقصى (2 ³² - 1)
`ENUM('something1','something2', ..., 'somethingN')`	أحد مكونات القائمة لكنه يخزن كرقم للتوفير
`SET('something1','something2', ..., 'somethingN')`	أي مجموعة جزئية منها بما في ذلك المجموعة الخالية

لاحظ أن الأعداد الصحيحة مثل TINYINT يمكن تخصص نصف الأرقام التي تمثلها لتكون سالبة وذلك بالعلامة SIGNED أما العلامة UNSIGNED فتجعل الرقم يستخدم كل ما لديه لغير السالبة وتوضع العلامات بعد النوع. من العلامات الأخرى هي ZEROFILL التي تملئ المنازل الخالية على اليسار بأصفار بدلاً من مسافات، العلامة NOT NULL تجعل قيمة هذا العمود إلزامية ولا يمكن تركها خالية مثلاً لا نريد تترك الاسم خالياً ولكن لا صير من ترك تاريخ الميلاد، العلامة AUTO_INCREMENT تزيد القيمة بمقدار واحد تلقائياً عند إضافة صف جديد، لهذا يمكننا استخادم هذه الخاصية لترقيم الصفوف تلقائياً id SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT ويمكننا أن نعلن أحد الأعمدة ليكون مفتاح الصف مثلاً لنعلن أن id هي كذلك نستعمل PRIMARY KEY (id).

يمكننا أن نعرض الأعمدة أسماءها وأنواعها والعلامات التي تحملها في جدول ما بواسطة DESCRIBE متبوعة باسم الجدول

mysql> DESCRIBE mytb;
+---------+-------------+------+-----+---------+-------+
| Field   | Type        | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| name    | varchar(20) | YES  |     | NULL    |       |
| birth   | date        | YES  |     | NULL    |       |
| gender  | char(1)     | YES  |     | NULL    |       |
+---------+-------------+------+-----+---------+-------+

لإضافة صفوف نستعمل INSERT INTO ثم اسم الجدول ثم وبي قوسين القيم كل عمود ويمكن ترك قيم خالية بواسطة الأقواس ( ) أو بكتابة NULL، كما ويمكن إضافة أكثر من صف دفعة واحدة بالفصل بينها بفاصلة

mysql> INSERT INTO mytb VALUES
	('Linus', '1950-12-31', 'm'),
	('RMS', (), 'm'),
	('UNIX', '1970-01-01', ());

لعرض كامل الجدول نستعمل SELECT التي استخدمناها سابقاً للحساب متبوعة بأسماء الأعمدة ثم FROM ثم اسم الجدول

mysql> SELECT * FROM mytb;
+----------+------------+--------+
| name     | birth      | gender |
+----------+------------+--------+
| Linus    | 1950-12-31 | m      |
| RMS      | NULL       | m      |
| UNIX     | 1970-01-01 | NULL   |
+----------+------------+--------+
3 rows in set (0.00 sec )

ويمكن إضافة شروط على SELECT بدلاً من عرض كل الصفوف وذلك بإضافة "بحيث" WHERE متبوعة بشروط نستخدم فيها المساواة "=" وعدم المساواة "<>" وأكبر وأقل وأكبر أو تساوي وأقل أو تساوي وغيرها ويمك الجمع بواسطة AND و OR بين أكثر من شرط. بل وحتى يمكنك استخدام التتعابير القياسية بواسطة REGEXP ثم التعبير أو NOT REGEXP ثم التعبير وإذا وضعت BINARY بعد تصبح المطابقة حساسة لحالة الحروف وفي MySQL لا داع لاستعمال \ للتعابير الإضافية على POSIX.

mysql> SELECT * FROM mytb WHERE name = "Linux";
+----------+------------+--------+
| name     | birth      | gender |
+----------+------------+--------+
| Linus    | 1950-12-31 | m      |
+----------+------------+--------+
1 rows in set (0.00 sec )

يمكن دمج نتيجة أكثر من SELECT بواسطة UNION

mysql> SELECT * FROM mytb WHERE name = "Linux"
 UNION SELECT * FROM mytb WHERE name = "RMS"

إضافة DISTINCT مباشرة بعد SELECT لا تكرر الصفوف المتشابهة.

mysql> SELECT DISTINCT gender FROM mytb;
 +--------+
 | gender |
 +--------+
 | m      |
 +--------+

يمكن عرض أعمدة غير موجودة في الجدول كما فعلنا عندما حسبنا 1 + جيب 45 درجة وسميناه result يمكننا أن نجعله يحسب العمر بالسنوات فيه ويسمه age

mysql> SELECT name, birth, 
 (YEAR(CURDATE())-YEAR(birth)) AS age FROM mytb ;

توفر MySQL الكثير من الوظائف مثل CURDATE لتساعدك على القيام بالحسابات المطلوبة منها ما يقوم بالتعامل مع النصوص مثل LEFT و RIGHT التي تأخذ أول أو آخر كذا حرف من السلسلة، ومنها ما يستعمل للتعامل مع الوقت والتاريخ مثل DAY و MONTH و YEAR التي تعيد ذلك الجزء من التاريخ ومثل DATE_ADD لتجمع عدد من الأيام لتاريخ معين. كما يمكن أن نستعمل SELECT واحدة على أكثر من جدول، بحيث نذكر أكثر من واحد يفصلها فاصلة "," بعد FROM وإذا لم رغب بعرض كل شيء نستخدم اسم الجدول نقطة ثم اسم العمود. ويمكن أن نستخدم SELECT في محددات WHERE كما في:

mysql> SELECT name,price FROM prices_tb
  WHERE price=(SELECT MAX(price) FROM prices_tb);

لتعديل قيمة بعد إدخالها نستعمل UPDATE ثم اسم الجدول ثم SET ثم اسم كل عمود وفيمته ثم الشروط WHERE مثلاً

mysql> UPDATE mytb SET birth = "1950-11-30" WHERE name = "Linus";

وبفس الطريقة يمكن حذف صفوف بواسطة DELETE مثلاً

mysql> DELETE FROM mytb WHERE name="UNIX"

يمكن استعمال mysqldump لإرسال كل المعلومات في قاعدة البيانات إلى ملف ويمكن إرسالها عبر الأنبوب "|" أو عبر تحديد المدخلات "<" إلى برامج mysql على جهاز آخر.

bash# mysqldump -h localhost -u root -p mydb > mydb.dump
bash# mysql -h otherhost -u root mydb < mydb.dump

يمكن استدعاء استعلامات MySQL داخل لغات CGI بسهولة المثال التالي بواسطة PHP حيث نستعمل mysql_connect ونمرر لها اسم الجهاز (لأن CGI تنفذ على الخادم يمكن استعمال localhost) والمستخدم، ثم نستعمل وظائف خاصة يكون معاملها الأخير ما تعيده mysql_connect مثلاً mysql_select_db كما نستعمل USE حيث مرر لها اسم قاعدة البيانات و مثل mysql_query التي نمرر لها سلسلة نصية تمثل الطلب كما في المثال:

<html> <body>
<?php
$db = mysql_connect("localhost", "root");
mysql_select_db("mydb",$db);
$result = mysql_query("SELECT * FROM employees",$db);
printf("First Name: %s<br>\n", mysql_result($result,0,"first"));
printf("Last Name: %s<br>\n", mysql_result($result,0,"last"));
printf("Address: %s<br>\n", mysql_result($result,0,"address"));
printf("Position: %s<br>\n", mysql_result($result,0,"position"));
?>
</body></html>

هذه بعض المواقع ذات الصلة ب SQL

www.sql.org
www.mysql.com
www.devshed.com
http://leap.sf.net
w3.one.net/~jhoffman/sqltut.htm
www.w3schools.com/sql

	المحتويات
	المحتويات
	حقوق النسخ والملكية الفكرة
	حقوق النسخ والملكية الفكرة
	ما هو لينكس؟
	ما هو لينكس؟
	كيف تركب نظام لينكس؟
	كيف تركب نظام لينكس؟
	حقوق النسخ المرفوعة
	حقوق النسخ المرفوعة
	وثائق التخويف
	وثائق التخويف

عرب-آيز مجتمع لينكس العربي موسوعة ثواب موسوعة ويكيبيديا تعريف البرمجيات الحرة تعريف مفتوحة المصدر	LinuxToday Linux.org Linux.com SlashDot FreshMeat LWN.net
توزيعات لينكس النسخة الإسلامية لأوبنتو عَرَبيان جواثا (أول مسجد في أوروبا) المزيد من التوزيعات هنا

إسلاميات
برامج: بريمج أوقات الصلاة بريمج التقويم الهجري صوتيات: محاضرات: قصص الأنبياء (نبيل العوضي) أناشيد

اطلب نسختك مجاناً
لكي تصلك أقراص لينكس أوبونتو Ubuntu أصلية مجاناً والتوصيل مجاناً لن تدفع فلساً واحداً ولن تجبر على رؤية دعايات. كل ما عليك هو أن تنقر هنا.

مقالات
تقنية: تسجيل وتحويل الصوتيات تعريف الماسح الضوئي في لينكس ساخرة: من أجل ذلك لا تقرأ الفيلة والصراع العربي الإسرائيلي

بلاغات
التبليغ عن إعلانات غير مرغوبة عثرات وأخطاء إملائية وصلات لا تعمل:

ننصح باستخدام متصفحات الوب الحرة، جرب ثعلب النار الآن

يمكنك الحصول على الكثير من البرامج الحرة عالية الجودة من هنا مجاناً

التدخين حرام

كن كحامل المسك ولا تكن كنافخ الكير

Generously Hosted by www.JadMadi.net

6.8 برمجة الويب