4

[مقتطفات برمجية PHP] - كود لعرض تقييم بالنجوم

  • megasoft

كود php

function rating($val,$max=5){
     $html = '';
        for ($i = 0; $i < $max; $i++) {

            if ($i <= $val)
                $html .= "<span><i class='fa fa-star fa-lg active'></i></span>";
            else
                $html .= "<span><i class='fa fa-star fa-lg '></i></span>";

        }
        return $html;

  }

كود css

      .rating i{
     color: #e0e0e0;
font-size:14px;
   }
.rating i.active{
    color: #ffc107 ;
  background: transparent;
}

code html

<div class="rating">
       <?php rating(4)?>
   </div>

عدد النجوم الافتراضي هو 5 لكن اذا اردت تغيره مثلا الى 10 تكتب الكود من الشكل 

       <div class="rating">
            <?php rating(4,10)?>
     </div>

اذا كان يوجد اي تحسينات او كود افضل فلا تبخلوا علينا وشكرا

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

2
KernelCode أضف ردا

لماذا لاتقوم بهذه العمليه في الجافاسكربت وتستخدم مكتبه مثل AngularJS ستقلل من تحميل الصفحه خصوصاً اذا كانت صفحه تقييمات افلام مثلا!

مثلا :

<div class="rating">
    <span stars="6,10"></span>
</div>
<div class="rating">
    <span stars="4,5"></span>
</div>
<script>
    var Ratings = document.querySelectorAll(".rating span[stars]");

    Ratings.forEach(function(DOM){
        var val = DOM.getAttribute("stars").split(",");
        for(var i=0; i< val[1]; i++){
            if(val[0]<=i)
                DOM.innerHTML+="<span>0</span>";
            else
                DOM.innerHTML+="<span>*</span>";
        }
    });
</script>
1
يوسف سيد أضف ردا

أعلم أنّك تكتب الشيفرة كمثال، البعض فقط قد يتعلم منها الأخطاء، نبهني استخدامك innerHTML مع مُتغير أسميته DOM، ثم NodeList.forEach إلى شيفرة تبدو سيئة :)

  1. إياك أن تسمي مُتغير باسم قياسي DOM، حسبتك تقصد توثيقة الصفحة، المتغير بهذا الاسم غير قابل للقراءة.

  2. querySelectorAll ترجع NodeList هو ليس مصفوفة، لذا querySelectorAll().forEach لن تأتي من Array.prototype.forEach بل من NodeList.prototype.forEach وهذا التابع مدعوم فقط في كروم 51+ حتى الآن، استخدم for of، أو Array.prototype.forEach.

  3. لا تستخدم innerHTML لإضافة عناصر HTML أبدًا أبدًا، تحدث الكثير من الأخطاء، الكثير من الإختلافات، وهذه طريقة سيئة لتعديل الـDOM، إذا كان يدعم الوصول بطريقة قياسية.

  4. بما أنك تعد من الواحد لِما تعد في الدوران من الصفر لم أفهم هذا :)

مثل هذه قد تكون أفضل:

var ratings = document.querySelectorAll(".rating span[stars]");

Array.prototype.forEach.bind(ratings)((root) => {
    let par = root.getAttribute("stars").split(","),
        max = parseInt(par[1]),
        val = parseInt(par[0]);

    for(let i=1; i<=max; i++){
        let star = document.createElement("span");

        star.textContent = val<i ? '0':'*';
        root.appendChild(star);
    }
});
1
KernelCode أضف ردا

افضل بكثير .. انا فقط كنت اشرح الفكره التي لدي بشكل سريع .. تصحيحاتك رائعه شكراً .

0
megasoft أضف ردا

شكرا على المشاركة

نعم كنت سأضع كود angularJs لاحقا طريقة قوية لتسهيل العرض باستخدام directives لكن ربما قد لا يعرف استخدامها من لم يتعلم مكتبة angularJs

لكن وضعت كود php للمبتدئين والجدد في هذه اللغة حتى يكون سهل جدا

0
megasoft أضف ردا

بالمناسبة

هل هذا كود reactJs او angularJs 2 ؟

0
KernelCode أضف ردا

لا هذه شفرة Vanilla JS تستطيع تنزيل هذه المكتبه من هنا : http://vanilla-js.com

1
ahmedsaoud31 أضف ردا
  • حالياً أصبح الأمر مقبول لإستخدام الـ js القياسية ولكن قبل ظهور الـ querySelector كان الأمر ممل في التعامل مع الـ DOM وهذه من أكبر النقاط التي أثرت في إنتشار مكتبة jQuery بالإضافة للتأثيرات والإضافات التي بُنيت عليها.
0
يوسف سيد أضف ردا

- تعديل آسف لم افهم الرّد ردي إذن لـ @megasoft -

هذه شيفرة وِب قياسيّة تعمل في أي مكان! هل خدعتَ بـVanilla JS هي مجرد Joke هذه JavaScript القياسية على المتصفح، لتعرف الناس أنّ JavaScript لا تحتاج معها مكتبة أخرى بالضرورة :)

1
KernelCode أضف ردا

تمزح معي صح ؟ .. الكل يعرف ذالك اخي يوسف .. فقط احببت ان امازح الاخوه الذين يعتمدون على مكتبات مثل jQuery -_- ..

1
يوسف سيد أضف ردا

آسف لم أفهم محتوى حديثكم جيّدًا[1]، ربما كان أفضل إن قلتَ له هذا جافاسكربت القياسية :)،

  1. لم أفق بعد نمتُ الثانية فجرًا.
1
megasoft أضف ردا

-_-

كم اكره المزاح الذي يشوبه الكذب

خاصة ان الموضوع جدي

ومالعيب اني نسيت syntax جافا سكريبت خاصة اني لم ابرمج بها منذ مدة لانتقالي للangular لبرمجة تطبيقات الجوال الهجينة

0
KernelCode أضف ردا

كل مبرمجين الجافاسكربت مرو بهذه المزحه ... بعضهم كان يبحث عن المكتبه لايام ..

1
megasoft أضف ردا

عذرا اخي

لم اعتد على هذا النوع من المزاح

انا اسف وشكرا لك مجددا على تفاعلك مع الموضوع

1
KernelCode أضف ردا

بالعكس شكراً لك على طرح هذا الموضوع الرائع ! استفدنا اليوم معلومه وغداً سنستفيد معلومه اخرى ^_^ .. نحن المبرمجين يجب ان نصحح بعضنا ابعد ال EGO قليلاً فل نستمتع بالبرمجه مثل بقيه الشعوب صح ؟

0
megasoft أضف ردا

عفوا

لم افهم

هل تقصد ان الاخ يمزح؟

1
ahmedsaoud31 أضف ردا

يمُكن تنفيذ هذا عبر css فقط دون الحاجة لمعالجة الأمر عبر لغة برمجية كالتالي:

    <style>
        .rating span{color: #AAA; font-size: 2em}
        .star1 span:nth-child(-n+1){color: #ffc107;}
        .star2 span:nth-child(-n+2){color: #ffc107;}
        .star3 span:nth-child(-n+3){color: #ffc107;}
        .star4 span:nth-child(-n+4){color: #ffc107;}
        .star5 span:nth-child(-n+5){color: #ffc107;}
    </style>
    <div class="rating star3">
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
    </div>

للمعاينة (http://codepen.io/ahmedsaou...

  • طبعاً ستقوم بتغيير الفئة star إلي star1, star2, star3, star4, star5 على حسب التقييم يُمكن طباعة رقم التقييم مباشراً بعد الفئة star من خلال لغة الخادم التي تستخدمها.
0
megasoft أضف ردا

جميل

هل يمكنك شرح الكود اكثر ومامعنى هذه الكتابة

nth-child(-n+5)

2
ahmedsaoud31 أضف ردا

  • الكود يعتمد على تخصيص فئة "class" لكل تقييم.

  • nth-child تعني اختيار العنصر الإبن عبر المٌعرف "index" ويمكن أن نستخدم n أو n- لنطاق محدد من العناصر الأبناء.

  • على سبيل المثال الصيغة:

    nth-child(-n+5)

تعني طبق التنسيق على العنصر ذو المُعرف 5 وما دونه أي العناصر أصحاب المٌعرفات 4,3,2,1

    nth-child(-n+4)

تعني طبق التنسيق على العنصر ذو المُعرف 4 وما دونه أي العناصر أصحاب المٌعرفات 3,2,1 وهكذا...

بالنسبة لاستخدام n فالأمثلة التالية توضح:

    nth-child(n+5)

تعني طبق التنسيق على العنصر ذو المُعرف 5 وما فوقه أي العناصر أصحاب المٌعرفات 6,7,8,9,10,... إلى مالانهاية

    nth-child(n+7)

تعني طبق التنسيق على العنصر ذو المُعرف 7 وما فوقه أي العناصر أصحاب المٌعرفات 8,9,10,11,... إلى مالانهاية

0
yahya11 أضف ردا

أبدعت وشكرا لمجهود