How to improve a star rating code?

Question

How to improve a star rating code?

Navigation

#1 by (5 votes)

2

I have a website and certain points hold me, like this evaluation, is not very cool this script , someone fit can improve for me or tell me what can improve, to leave the code more organized, check if user selected some star, give error message

Codes:

$star1 = isset($_POST["star1"]);
$star2 = isset($_POST["star2"]);
$star3 = isset($_POST["star3"]);
$star4 = isset($_POST["star4"]);
$star5 = isset($_POST["star5"]);

if ($star1 == 1)
{
    $star = $_POST["star1"];
}
if ($star2 == 1)
{
    $star = $_POST["star2"];
}
if ($star3 == 1)
{
    $star = $_POST["star3"];
}
if ($star4 == 1)
{
    $star = $_POST["star4"];
}
if ($star5 == 1)
{
    $star = $_POST["star5"];
}

Variable use $ star to do the INSERT of the points that the user selected, plus if he does not select anything, sends '0' to the DB. >

Here are the stars:

<div class="rating_star">
                <div id="col_star">
                    <table cellspacing=2 cellpadding="2">
                        <tr>
                            <td width="48" onmouseover="rate('1')" onmouseout="retira('1')" onclick="rating('1');">
                                <img id="1" src="../img/star_48x48.png" border="0" id="star1" style="cursor:pointer;width:48px;">
                            </td>
                            <td width="48" onmouseover="rate('2')" onmouseout="retira('2')" onclick="rating('2');">
                                <img id="2" src="../img/star_48x48.png" border="0" id="star2" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td width="48" onmouseover="rate('3')" onmouseout="retira('3')" onclick="rating('3');">
                                <img id="3" src="../img/star_48x48.png" border="0" id="star3" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td width="48" onmouseover="rate('4')" onmouseout="retira('4')" onclick="rating('4');">
                                <img id="4" src="../img/star_48x48.png" border="0" id="star4" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td width="48" onmouseover="rate('5')" onmouseout="retira('5')" onclick="rating('5');">
                                <img id="5" src="../img/star_48x48.png" border="0" id="star5" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td id="note" width="65"></td>
                        </tr>
                    </table>
                </div>              
                </div>
                <div id="msg"></div>

And here's the script that makes it all work:

<script>
    function cache() 
    {
        imagens = new Image();
        imagens.src='../img/star_48x48.png';
        imagens.src='../img/star1_48x48.png';
    }

    function rate(id)
    {
        if(id==1)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star1' id='star1' value='1'></font>";
        }
        if(id==2)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star2' id='star2' value='2'></font>";
        }
        if(id==3)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star3' id='star3' value='3'></font>";
        }
        if(id==4)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star4' id='star4' value='4'></font>";
        }
        if(id==5)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star5' id='star5' value='5'></font>";
        }
        for(i = 0; i < id; i++)
        {
        document.getElementById(i+1).src="../img/star1_48x48.png";
        }
    }

    function retira(id) 
    {
        for(i = 5; i > id; i--) 
        {
        document.getElementById(i).src="../img/star_48x48.png";
        }
    }

    function rating(id)
    {
        var user = document.getElementById('idLogged').value;

        if (user != "")
        {

        if(id==1) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'>Detestei</div>";
        }

        if(id==2) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'>Não gostei</div>";
        }

        if(id==3) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-warning' style='height:48px;text-align:center;'>Razoável</div>";
        }

        if(id==4) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-info' style='height:48px;text-align:center;'>Gostei</div>";
        }

        if(id==5) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-success' style='height:48px;text-align:center;'>Adorei</div>";
        }       
        }
        else
        {
            document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'><strong>Erro ao avaliar!</strong> É necessário realizar o login para enviar um comentário.</div>";
        }
    }
</script>

And so, it's kinda bad this system is not?

If the user does not select the stars he can register '0'

php javascript html jquery

asked by anonymous 15.12.2015 / 23:24

1 answer

Real estate site system and redirection for each targeted domain Force CSS in IE

score 5 · Answer 1

The first thing I would do is the following:

for ($i = 4; $i > 0; $i--) {
     if (isset($_POST["star" . $i])) {
         $star = $_POST["star" . $i];
         break;
     }
}

In HTML it would basically only save on indentation. You could also use <div> instead of using <table> , this is old style and wrong.

If it can be generated automatically, then it can improve. It's a lot of repetitive code, it could create a loop to generate this.

In JS, you would like more in the indentation and would otherwise solve the issue of the data. You do not need 5 variables, you need a one with the number of stars:

document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star' id='star' value='" + id + "'></font>";
for (var i = 0; i < id; i++) {
    document.getElementById(i + 1).src = "../img/star1_48x48.png";
}

I would still take this <font> , this is old and does not make sense in this case.

I am really in doubt if you would need this for . But you're too confused to understand the purpose.

Here's how to improve PHP for:

$star = $_POST["star"]; //na verdade nem precisa criar esta variável

There will be saved the number of stars that is the most relevant information.

In the other JS function:

var textos = ["Detestei", "Não gostei", "Razoável", "Gostei", "Adorei"];
var user = document.getElementById('idLogged').value;
if (user != "") {
    document.getElementById('voto').value = id;
    document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'>" + texxtos[id - 1] + "</div>";
} else {
    document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'><strong>Erro ao avaliar!</strong> É necessário realizar o login para enviar um comentário.</div>";
}

I'm not analyzing if the code is right, just rewriting. You can not even know the whole code. Since you do not have a MCVE , I can not test that the changes are all right. In a larger context it is likely to give to improve other things. Look. But I can not do the whole code again for you. Here are the basic ideas, just enjoy it.