Wael Aljamal

ملاحظة: تصميم عمود الأحجام يخالف نبادئ تصمي مقواعد البيانات، بحيث كل خلية يجب أن تحوي على قيمة واحدة، إما يكون لدينا 4 أعمدة كل منها من نوع منطقي bool مثلاً تدل على وجود هذا القياس أو مثلا عدد int تدل على كمية القياس نفسه، أو عمل دول فرعي خاص بالقياسات لكل منتج حيث أنه لكل منتج قياس أو أكثر فالعلاقة one to many أي يكون في جدول القياسات عمودين الأول رقم المنتج وهو مفتاح ثانوي، و العمود الثاني هو القياس..
في حالتك، يمكننا تجاهل خطأ التصميم، و قراءة السلسلة النصية ومن ثم تقسيمها حسب الفاصلة، و لكل قياس نقوم بإنشاء عنصر إدخال..
نجلب المنتجات باستعلام SQL حسب شرط معين .. نحتاج حلقة للمرور على المنتجات لكل منتج نستخلص سلسلة الأحجام المتاحة explode لتقسيم السلسلة النصية لعناصر مصفوفة حسب محرف ما مثل الفاصلة , لكل حجم نقوم بإنشاء عنصر input radio له مثلاً <?php // اتصال بقاعدة البيانات $conn = new mysqli($servername, $username, $password, $dbname); // تحقق من الاتصال if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } // الاستعلام $sql = "SELECT size, name, * FROM products where id = 13213132"; $result = $conn->query($sql); if ($result->num_rows > 0) { // طباعة العناصر while($row = $result->fetch_assoc()) { // لكل منتج $productName = $row["name"]; // اسم المنتج $productSize = $row["size"]; // سللسة الأحجام // explode لتقسيم السلسلة النصية لعناصر مصفوفة حسب محرف $SizesArray = explode (",", $productSize); // مصفوفة كل عنصر يمثل حجم echo '<p> product: {$productName}, available sizes:</p>' foreach ($SizesArray as $itemSize) { echo '<input name="size" type="radio" value="{$itemSize}" />' } } } else { echo "0 results"; } $conn->close();  

كما شرحنا في أسئلة سابقة، يبقى تخزين الملفات في ملفات منفصلة خارج قاعدة البيانات هو الحل الأفضل، سوف تلاحظ تأثير حجم الملفات الكبير على سرعة و أداء قاعدة البيانات مع ازدياد حجمها. مع العلم يمكنك تخصيص مجلد واحد فقط، فيه عدة مجلدات.. لحفظ جميع الصور و الوثائق.
بما أن الصورة هي بالأصل base64String يمكنك تخزينها نفسها في قاعدة البيانات لنموذج فيه الصورة عبارة عن string مع تحديده ك buffer لزيادة سرعة تبادل البيانات فيه.
مثلاً نموذج ما فيه حقل للصورة:
var imageSchema = new mongoose.Schema({ name: String, desc: String, img: { data: Buffer, contentType: String } }); وعند إنشاء كائن من النموذج نمرر البيانات و نحفظ بالدالة save
exports.saveImageIntoMongoDatabase = (base64String, name, desc) => { var new_imageSchema = new imageSchema({ name: name, desc: desc, img: base64String }) new_imageSchema.save(function(err,result){ if (err){ console.log(err); } else{ console.log(result) } }) } إن كانت الصورة نموذج بحد ذاتها، أي يمكنك حفظ جميع صور المشروع بنفس الوثيقة و ربطها مع باقي النماذج تحتاج لتحديد نوع النموذج المربوطة به مثل type: user أو type: post مثلاً مع id للغرض المرتبطة معه.
و إن وضعهتها كخاصية في نموذج ما، عاملها كسلسلة نصية مثل اسم المستخدم.
imageSchema.find({ name: 'photo', desc .., }, function (err, image) { if (err){ console.log(err); } else{ console.log("حصلنا على الصورة ن من قاعدة البيانات : ", image); } }); يمكنك عرضها مباشرة ضمن وسم الصورة بالخاصية src
<img src="data:image/jpeg;base64,iVBORw0fiowfiowohsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDufwiORK5CYII=">  

هل قمت بتسجيل الدخول لحساب مايكروسوفت في الجهاز Microsoft profile؟ فأحد الأسباب هي عمل مزامنة دائمة و هي مسؤولة عن تحديد تفضيلات المستخدم مثل اللغة (الكيبورد) أو تنصيب تطبيقات من المتجر.
على كل حال، حاول تعديل لغة العرض Windows display language مع لغة الجهاز و تحديد المنطقة الجغرافية بشكل يوافق اللغة
Select Start > Settings > Time & Language > Language. وأضف اللغة المطلوبة للغات الجهاز من خلال التحميل من لوحة التحكم 
All Settings – Time and Language – Region and Language كما أن خيار لغة الأدمن Administrative language settings عليك تحديدها ادخل للقائمة التالية ثم تابع تحديد اللغة المضلة

ثم:
 

لتحويل قيمة من عدد صحيح integer إلى رقم ذو فاصلة عشرية (رقم عشري) decimal علينا تعديل القيمة قبل دخولها في عمليات حسابية.
في برنامجك عند تنفيذه يظهر الخطأ:
/MyClass.java:9: error: incompatible types: possible lossy conversion from double to int z=y+x; ^ 1 error الحل هو بتحويل نمط القيم ضمن العملية إلى double ويمكن فعل ذلك من خلال القصر cast بكتابة النمط ضمن قوسين أمام العملية
import java.lang.*; public class HelloWorld { public static void main(String args[]) { int x = 7; int y = 3; double z = (double) 7 / 3; // ^^^^^^^^^^ System.out.println(z); } }  

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

نحن نستخدم فكرة التغليف لحماية البيانات و قيم الخاصيات التي يحملها الغرض من التعديل بشكل خطأ و منع قراءة قيمتها إلا عن طريق دوال get التي نكتبها خصيصاً لكل خاصية / دالة.
بما أن  First_Name و Last_Name خاصيتان لها محدد الوصول private أي أننا لا نريد قراءة قيمهم من خارج الصنف، فنقوم بتوفير دوال get لذلك، فأرجو استخدامهم بدل قراءة القيمة مباشرة.
public static void main(String[] args) { admin ad = new admin(); ad.setFirst_Name("Majd"); // ^^^^^^^^^^ ad.setLast_Name("mm"); // ^^^^^^^^^^ System.out.print(ad.getFirst_Name()); // Majd // ^^^^^^^^^^^^^^^^^^ System.out.print(ad.getLast_Name()); // mm // ^^^^^^^^^^^^^^^^^^ } والدوال set نمرر لهم قيمة و لا نقوم بعمل إسناد عند استدعاء الدوال.

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

ما سبب ؟ في السطر في الشيفرة؟
لا أعتقد أن له داع ليصبح:
JOIN city ON items.city_id=city.city_id WHERE items.NAME LIKE '%$inputSearch%' or items.description2 LIKE '%$inputSearch%' "); أما في الجزء الثاني  لم تستخدم fetch all
$searchRslt=$stmt3->fetch(); وبما أن هنالك limit 2 أي عنصرين، نحتاج لحلقة لآخر جزء
<?php if (!empty($searchRslt)) { foreach ($searchRslt as $value){ echo "<div class='show'>".$value['NAME'].'<br>'."</div>"; } }else{ echo "<div class='show'>No results</div>"; } إن بقي مشكلة حاول تحديدها بشكل أفضل. فنحن لا نستطيع اختبار البرنامج

إن كنت تقصد عند نشر المشكلة في الأسئلة العامة، يتوجب على الطالب وضع الشيفرة البرمجية مباشرة في محرر الأكواد و كتابة أي رسائل خطأ تظهر له أو صورة في حال كان التصميم لا يعمل.. 
وفي حال ترابط أكثر من ملف مع بعضهم لنفس المشكلة، نضع الشيفرات جميعها، ولا مشكلة من وضع رابط المستودع، في آخر السؤال إن احتاج الأمر لذلك فهي تسمح بتصفح المشروع بسهولة

أولاً حدد حد أدنى لعرض الصفحة للعنصر body
body { min-width:600px; } بما تراه مناسباً، 
ملاحظة: للتحكم في تحديد أبعاد المتصفح، يجب أن نفتح النافذة بالتعليمة window.poen
ملاحظة من مقالة أكاديمية حسوب المرفقة مع الإجابة:
أي يجب فتح الصفحة التي نستطيع التحكم بعرضها كالتالي:
window.open('http://www.your.url/','yourWindowsName','width=640,height=480'); ثم يمكننا محاولة منع إطار المتصفح من أن يتم تصغيره لعرض أقل من طرف المستخدم و نقوم بعمل إعادة تعيين لعرض النافذة الخاصة بالمتصفح من خلال الحدث resize التابع لغرض window ثم تطبيق الدالة resizeTo و نمرر لها الأبعاد
function resizeToMinimum(){ // الحد الأدني للأبعاد var minimum = [640, 480]; // الأبعاد الحالية للنافذة var current = [window.outerWidth, window.outerHeight]; // تحقيقي الحد الأدني var restricted = []; // للمرور على مصفوفتي العرض var i = 2; while(i-- > 0){ restricted[i] = minimum[i] > current[i] ? minimum[i] : current[i]; } window.resizeTo(restricted[0], restricted[1]); } window.addEventListener('resize', resizeToMinimum, false) يمكنك قراءة توثيق الدالة resizeTo: developer.mozilla/docs/Web/API/Window/resizeTo
كما يوجد شيفرتين يمكنك تجريبهم في حال لم تعمل الأولى تستخدمان نفس المبدأ بحساب عرض الشاشة ومن ثم تعديل عرض النافذة:
تأكد من تعديل الأبعدا كما ترغب  function resizeToMinimum(w,h){ // جلب الطول و العرض w=w>window.outerWidth?w:window.outerWidth; h=h>window.outerHeight?h:window.outerHeight; // تحديد الطول و العرض window.resizeTo(w, h); }; // حدث تعديل أبعاد النافذة window.addEventListener('resize', function(){resizeToMinimum(100,100)}, false) ^^^^^^^^^ // عدل العرض ************************* // دالة أكثر دقة في الحساب function ensureMinimumWindowSize(width, height) { var tooThin = (width > window.innerWidth); var tooShort = (height > window.innerHeight); if (tooThin || tooShort) { var deltaWidth = window.outerWidth - window.innerWidth; var deltaHeight = window.outerHeight - window.innerHeight; width = tooThin ? width + deltaWidth : window.outerWidth; height = tooShort ? height + deltaHeight : window.outerHeight; // Edge not reporting window outer size correctly if (/Edge/i.test(navigator.userAgent)) { width -= 16; height -= 8; } window.resizeTo(width, height); } } var resizeTimer; // حدث تعديل أبعاد النافذة window.addEventListener('resize', function(event) { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { ensureMinimumWindowSize(<width>,<height>); // حدد العرض المطلوب }, 250); }, false);  

في دالة الزر رقم 6 لن تتم تهيئة الاتصال، حاول إضافة التعليمة
com.Connection = conn; لتصبح
private void button6_Click(object sender, EventArgs e) { // هنا com.Connection = conn; com.CommandText = "select book.* from book,authors where AID= '" + textBox2.Text + "'"; dr = com.ExecuteReader();  

أحسنت المحاولة،
فرق  حلقة for عن while هي طريقة الكتابة الخاصة بها، حيث يجب أن تكون كالتالي:
حلقة for تتحرك على مجال معين بحيث يمكن إعطاء قيمة بدائية لمتغير الحلقة i = start الشرط في الخانة الثانية من ترويسة الحلقة i <= end زيادة عداد الحلقة في الجزء الثالث ++i   int start = 1, end = 100; for( int i = start ; i <= end ; i++ ) { // أي تعليمات برمجية ستتكرر 100 مرة } حاولي تبديل while ب for مع تطبيق المنطق الصحيح بما يناسب المتغيرات لديك a, b

كلامك صحيح، لغة بايثون تعمل في الواجهات الخلفية Back End اي في السيرفر أو مخدم التطبيقات و المواقع  وهي توفر البيانات التي يعرضها التطبيق أو الموقع، أما تطبيقات الهاتف المحمول لها تقنيات مختلفة ولغة بايثون لا تعمل على الهاتف.
دوراة أكاديمية حسوب التي تتيح لك فرصة بناء تطبيق يمكن رفعه على المتجر هي: 
دورة جافاسكربت لاحتوائها على مسار تعليم ريأكت نيتف React Native. وبعض مفاهيم كوردوفا

mySQL لا تستعمل المصفوفات، لذلك كحل بديل عليك كتابة الأسماء جميها ضمن سلسلة نصية (بينهم فاصلة) و من ثم ضمن الحلقة نستخلص اسم لكل تكرار و نستعمله في الشيفرة، لتصبح كما يلي:
set @id1 := 5; set @id2 := 10; set @i := @id1; SET @names = 'marwan,wael,adnan,sameh,eyad,'; while (LOCATE(',', @names) > 0) //@i <= @id2 do SET @name = ELT(1, @names); SET @names= SUBSTRING(@names, LOCATE(',',@names) + 1); UPDATE users SET userName = @name WHERE userId = @i; set @i = @i + 1; end while; الحل النهائي::
BEGIN set @id1 := 1; set @id2 := 104; set @i := @id1; SET @names = '1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,'; select @i,@names,Locate(',', @names); LABEL1: WHILE @names is not null and @i < @id2 do SET @Name = SUBSTRING_index(@names, ',',1); select @i,@names,@name; SET @names = SUBSTRING(@names, LOCATE(',', @names) + 1); UPDATE employees SET NAME = @Name WHERE id = @i; SET @i = @i + 1; END WHILE label1; SET @Name = SUBSTRING_index(@names, ',',1); select 'and finally' ,@i,@names,@name; end  

من الضروري في السؤال تحديد محرك قواعد البيانات ولغة البرمجة في BackEnd.
سوف نقوم بعمل حلقة، تقوم بتحديث سطر لكل تكرار حسب شرط id و تقرأ الاسم من مصفوفة في PHP ثم تسند قيمة الاسم في الحقل مقابل id مناسب
<?php $id1 = 5; $id2 = 10; $names = Array( 'name1', 'name2', 'name3' ); $serverName = "localhost"; $username = "username"; $password = "password"; $dbname = "databaseName"; try { $conn = new PDO("mysql:host=$serverName;dbname=$dbname", $username, $password); // set the PDO error mode to exception $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); for($i=$id1 ; $i <= $id2 ; $i++){ $statement = $conn->prepare('UPDATE users SET userName = :userName WHERE userId = :userId'); $statement->bindValue(':userId', $i); $statement->bindValue(':userName', $names[$i]); $statement->execute(); } } catch(PDOException $e) { echo $sql . "<br>" . $e->getMessage(); } $conn = null;  

فكرة البرمجة غرضية التوجه تكمن في عمل صنف Class نقوم بإنشاء أغراض برمجية منه، ثم إسناد قيم لخواص هذه الأغراض و استدعاء الطرائق methods / التوابع المعرفة في الصنف.
لذلك علينا إنشاء غرض من الموظف، و إسناد القيم للخواص منه:
public static void main(String[] args) { // Employee من الكلاس emp هنا قمنا بإنشاء الكائن Employee emp = new Employee(); // emp هنا قمنا بوضع قيم لخصائص الكائن emp.name = "Zeina"; emp.age = 21; emp.salary = 15000000000; // emp هنا قمنا بعرض قيم خصائص الكائن System.out.println("Name: " + emp.name); // Name: -> Zeina System.out.println("Age: " + emp.age); // Age: -> 21 System.out.println("Salary: " + emp.salary); // Salary: -> 15000000000 } لدينا emp كائن من نوع Employee فيه خواص العمر و الاسم و الراتب، نتعامل مع هذه الخاصيات منه.
في حال رغبتنا بطباعة معلومات الموظف كاملة، يمكننا تعريف دالة تختصر الموضوع و تطبع القيم:
public class Employee { String name; int age; double salary; public printEmployeeInfo () { // emp هنا قمنا بعرض قيم خصائص الكائن System.out.println("Name: " + emp.name); // Name: -> Zeina System.out.println("Age: " + emp.age); // Age: -> 21 System.out.println("Salary: " + emp.salary); // Salary: -> 15000000000 } } public static void main(String[] args) { // Employee من الكلاس emp هنا قمنا بإنشاء الكائن Employee emp = new Employee(); // emp هنا قمنا بوضع قيم لخصائص الكائن emp.name = "Zeina"; emp.age = 21; emp.salary = 15000000000; // emp هنا قمنا بعرض قيم خصائص الكائن emp.printEmployeeInfo(); }

إن العناصر ضمن enum لها دوال مساعدة، مثل الداالة ordinal التي تعيد الترقيم (index) للعنصر المطبقة عليه..
لذلك يمكننا الطباعة بالطريفة التالية:
System.out.println(Days.TUESDAY.ordinal()); // -> 1 System.out.println(Days.MONDAY.ordinal()); // -> 0 بدون استدعاء الدالة ستعيد اسم اليوم:
System.out.println(Days.SATURDAY); // -> SATURDAY System.out.println(Days.FRIDAY); // -> FRIDAY

يتوفر ل PHP واجهة برمجية تدعى PDO تعمل على تحقيق التوافق بين الشيفرات البرمجية التي نكتبها ب SQL لتعمل مع مختلف محركات قواعد البيانات mySQL و SQL Server كما توفر عمل اتصال مع قواعد بيانات Access.
الشيفرة التالية تعمل على قراءة بيانات من ملف Access حيث نحتاج لتوفر مسار الملف وهو accdatabase و اتصال مع قاعدة بيانات mySQL عن طريق معلوماتها، اسم القاعدة و بيانات المستخدم قراءة البيانات من الملف مع تحديد الحقول المطلوبة ثم حشرها في قاعدة البيانات  <?PHP // مسار ملف ACCESS $accdatabase="C:\Path\To\database.accdb"; // بيانات اتصال قاعدة البيانات $host="localhost"; $mydatabase="****"; $username="****"; $password="****"; try { # عمل اتصال مع قاعدتي البيانات $accConn = new PDO("odbc:Driver={Microsoft Access Driver (*.mdb, *.accdb)}; DBq=$accdatabase;Uid=Admin;Pwd=;"); $myConn = new PDO("mysql:host=$host;dbname=$mydatabase",$username,$password); $myConn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // جلب بيانات الملف SELECT $sql = "SELECT * FROM Table ..."; $accstmt = $accConn->query($sql); $accstmt->setFetchMode(PDO::FETCH_ASSOC); // جلب الأسطر من الملف while($row = $accstmt->fetch()) { // حشرالبيانات من ناتج استعلام SQL $mystmt = $myConn->prepare("INSERT INTO Table ... (col1, col2, col3, col4) VALUES (?, ?, ?, ?)"); # تجهيز الحقول $mystmt->bindParam(1, $row['col1'], PDO::PARAM_STR, 50); $mystmt->bindParam(2, $row['col2'], PDO::PARAM_STR, 50); $mystmt->bindParam(3, $row['col3'], PDO::PARAM_STR, 50); $mystmt->bindParam(4, $row['col4'], PDO::PARAM_STR, 50); # تنفيذ الاستعلام $mystmt->execute(); } } catch(PDOException $e) { echo $e->getMessage()."\n"; exit; } // إغلاق قنوات الاتصال $accConn = null; $myConn = null; تبقى عليك بعض التعديلات لكي يعمل الملف، ثم قو باستدعائه من خلال localhost مثلما تشغل أي ملف PHP.. 
يمكنك عمل قاعدة بيانات تجريبية قبل تطبيق الشيفرة مباشرة على قاعدة بياناتك

هل يوجد قيود على الاستضافة حسب خطة الاشتراك الحالية؟ أحيانا يتم تقييد عدد الطلبيات خلال وقت محدد لذلك لا تتم الاستجابة لجميع طلبات عرض الصفحات rate limiting لعدد الطلبيات في الثانية تأكد أن public_html لايحوي أي مجلد بنفس اسم مسار مستعمل في التطبيق قد تحتاج لإنشاء ملف  .htaccess وفيه نضع التالي: <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_URI} !^public RewriteRule ^(.*)$ public/$1 [L] </IfModule> في مجلد المشروع
 

يمكنك تطبيق المطلوب عن طريق خصائص CSS لقد قمت بتصميم شيء مشابه لما طلبته وهو بالشكل التالي:

فيها نص و حواف تكون مخفية ثم تظهر مع حدث hover و لها تأثير تكبير وهو scale 1.2
والشيفرة البرمجية:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } body { font-family: Arial; font-size: 17px; } .container { position: relative; max-width: 800px; margin: 0 auto; } .container img { vertical-align: middle; width: 100%; } h1 { text-align: center; position: absolute; top: 40%; left: 40%; } .container .content { position: absolute; top: 10%; left: 10%; color: black; background: rgba(0, 0, 0, 0); color: #f1f1f1; width: 80%; height: 80%; margin: auto; border: 1px solid; opacity: 0; transform: scale(1); transition: all 1s ease; } .container:hover .content { opacity: 1; transform: scale(1.2); transition: all 0.75s ease; } </style> </head> <body> <div class="container"> <img src="notebook.jpg" /> <div class="content content-transition"> <h1>Book</h1> </div> </div> <div class="container"> <img src="notebook.jpg" /> <div class="content content-transition"> <h1>Book</h1> </div> </div> <div class="container"> <img src="notebook.jpg" /> <div class="content content-transition"> <h1>Book</h1> </div> </div> </body> </html> الملف:
 
books.rar

يمكنك شراء دورة جافاسكربت من الرابط التالي للدفع عن طريق باي بال: متجر الدورات تأكد من تسجيل الدخول بحسابك، ثم أضف دورة جافاسكربت لبطاقة المشتريات، عندها سيفتح لك خيار دفع باي بال 

أما عن طريق البطاقة الإئتمانية: academy.hsoub.com/learn/javascript#SignUp
 

يمكن دمج ناتج استعلام SQL في تعليمة SELECT حسب نوع الحقل، 
في حال كانت الحقول رقمية، يمكننا استخدام العمليات الحسابية المختلفة مثل + * / - بين الأعمدة
SELECT col1 + col2 + col2 FROM table where id = 123134 ^^^^^^^^^^^^^^^^^^ col1 / col2 - col2 col1 * col2 * col2 ... حسب العملية المطلوبة.
وفي حال كانت الأعمدة عبارة عن سلاسل نصية، تختلف الطريقة حسب نوع محرك قاعدة البيانات.
 SQL Server يستعمل || و الباقي منهم يستعمل الدالة CONCAT
CONCAT('string1','string2')‎  

لتحديد عنصر بشكل افتراضي، نستخدم الكلمة selected في HTML 
<option value="..." selected >French </option> ^^^^^^^^  
أحيانا يحصل مشكلة إن استخدمنا الحدث on change ولم بقم المستخدم بتغيير الخيار الافتراضي لأنه بريد تحديده، فتضع خيار افتراضي غير فعال 
<select > <option value="no-language" selected disabled>choose your language</option> ^^^^^^^^^^^^^^^^^ <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french">French</option> <option value="spanish">Spanish</option> </select> حيث نقوم بتحديد الخيار  إلغاء تفعليه بنفس الوقت disabled .. مما يجبر المستخدم على تحديد لغة و بذلك حصول الحدث onchange

يمكن ملاحظة أنك لم تستخدمي الزر Button بل رابط تشعبي للعنصر a = anchor ولقد نسيتي وضع مسار الصفحة الثانية ضمن الخاصية href لهذا العنصر (a)
<a class="nav-link js-scroll-trigger" href="home.html" target="_blank" >Home</a> ^^^^^^^^^^^^^^^ <a class="nav-link js-scroll-trigger" href="track.html" target="_blank" >track</a> ^^^^^^^^^^^^^^^ يبقى عليك التأكد من اسم الصفحة الثانية و مسار الملف بشكل صحيح، مثلاً إن كان ملف الصفحة التالية في مجلد آخر يتوجب تحديد المسار بشكل سليم
المثال السابق يفترض أن جميع ملفات HTML بنفس المجلد الجذر لهم.
في حال كان لديك مجلد خاص بالصفحات، يمكن تعديل المسار ليشير للملف بالطريقة التالية:
<a class="nav-link js-scroll-trigger" href="./pages/home.html" target="_blank" >Home</a> ^^^^^^^^^^^^^^^^^^^^^^^ <a class="nav-link js-scroll-trigger" href="./pages/track.html" target="_blank" >track</a> ^^^^^^^^^^^^^^^^^^^^^^^^ حيث أن بنية المجلدات:

أحيانا وضع نقطة ضمن المسار (تشير للمجلد الحالي) يسبب مشكلة، لذلك نكتب اسم المجلد مباشرة:
<a class="nav-link js-scroll-trigger" href="pages/home.html" target="_blank" >Home</a> ^^^^^^^^^^^^^^^^^^^^^^^ <a class="nav-link js-scroll-trigger" href="pages/track.html" target="_blank" >track</a> ^^^^^^^^^^^^^^^^^^^^^^^^

يعتمد الأمر على عدد العناصر (مجال البحث) حيث إن كان حتى 100 عنصر، و هذه العناصر ثابتة بشكل أو بآخر أن تكون بالطريق التي تعمل عليها في الشيفرة المرفقة، أما في حال كانت النتائج بالآلاف و كثيرة و متغيرة، ففي هذه الحالة عليك بعمل استعلام AJAX لقاعدة البيانات و عمل البحث ضمنها، و عندها لن يكون من المحبذ أن تقوم بالتحميل المسبق للعناصر ضمن صفحة HTML.
في معظم الحالات عمل استعلام AJAX هو الحل الأفضل لصندوق البحث.
شيفرة أجاكس ستكون تقريبا كما يلي:
$("form").on("keyup", function() { $.ajax({ method: "post", url: "search.php", data: {q: $(this).val()}, // تمرير الاستعلام success: function(result) { // جلب النتيجة $("#result-list").html(result); // إسناد النتيجة للقائمة }, error: function() { console.log("error"); } }); }) يعمل AJAX على إرسال طلبية HTTP Request ألى الخادم، server حيث نرسلها لرابط معين، نفس فكرة HTML Form حيث نحدد المسار و الطريقة post - get .. و تكون البيانات عبارة عن مفتاح-قيمة ترسل للمخدم.
إن افترضنا أنك تتصل على ملف php فإن أي محتوى يتم طباعته مثلا باستخدام echo يتم استقباله في دالة نجاح الطلبية في شيفرة جافاسكربت/أجاكس.. success callback function, ثم باستخدام دوال جافاسكربت التي تعدل على DOM يمكنك حشر المحتوى بالطريقة التي تريدها.
يمكنك الاستفادة من المقالة التالية:
والسؤال والإجابة التالية: