كيفاش تصاوب نظام تصويت ب php و mysql


فهاد الدرس من كيفاش تصاوب نظام تصويت ب php و mysql غادي نشوفو كيفاش نصاوبو نظام تصويت بسيط للمبتدئين المستخدم كيصوت على لاعب اختاروا من بعد كيشاهد نتيجة التصويت الإجمالية.

نظرة سريعة بالفيديو

1- إنشاء قاعدة البيانات

أول حاجة غادي نديرو هي غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها voting من بعد غادي نزيد فيها table نسميها players هادي هي قاعدة البيانات لي غادي تمكنا من حفظ التصويت الخاص بكل لاعب فقاعدة البيانات الكود باش تزيد الجدول فقاعدة البيانات هو :

                                --
-- Structure de la table `players`
--

CREATE TABLE IF NOT EXISTS `players` (
  `messi` int(11) NOT NULL DEFAULT '0',
  `ronaldo` int(11) NOT NULL DEFAULT '0',
  `griezmann` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`messi`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
                            

2- ملفات الإتصال بقاعدة البيانات

من بعد كنمشي wamp/www وكنزيد مجلد جديد كنسميه voting_system كنزيد فيه 2 مجلدات واحد سميه css والثاني سميه includes فincludes زيد ملف سميه database.php غادي يكون فيه كود الإتصال بقاعدة البيانات الكود ديال الملف هو :

                                <?php
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_DATABASE','voting');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_DATABASE);
                            

3- الملف functions.php

فالمجلد includes كنزيد ملف كنسميه functions.php فيه كل لfonctions لي غادي نحتاج كاين fonction insert لي كتحقق من اللاعب لي صوت عليه المستخدم ومن بعد كتincrementer الأصوات لي عندو بواحد و كاين fonction getData لي كتمكن من إسترجاع كل اللاعبين لي عندنا فقاعدة البيانات باش نعرضوهم فالصفحة الرئيسية الكود ديال الملف هو :

                                <?php
include_once('database.php');
function insert($con,$value){
    if($value == "messi"){
        $query = "UPDATE players SET messi=messi+1"; 
        if(mysqli_query($con,$query)){
        return true;
        }else{
            return false;
        }
    }else if($value == "ronaldo"){
        $query = "UPDATE players SET ronaldo=ronaldo+1";   
        if(mysqli_query($con,$query)){
        return true;
        }else{
            return false;
        }
    }else if($value == "griezmann"){
        $query = "UPDATE players SET griezmann=griezmann+1";   
        if(mysqli_query($con,$query)){
        return true;
        }else{
            return false;
        } 
    }
}
function getData($con){
    $query = "SELECT * FROM players"; 
    $result = mysqli_query($con,$query);
    if($result != null){
        return $result;
    }else{
        return false;
    }
}
                            

4- الملف index.php

فالمجلد الرئيسي ديال المشروع ديالنا كنزيد ملف كنسميه index.php لي هو الصفحة الرئيسية ديالنا هنا كاين les boutons لي كيمكنو المستخدم من التصويت فكنسترجع اللاعب لي صوت عليه من بعد كنرسلو للfonction insert لي كتزيدو صوت ثم كنعرض الأصوات لي حصل عليها كل مستخدم بواسطة لfonction getData منبعد كنضرب الأصوات لي حصل عليها كل لعاب ف100 ونقسمها على المجموع ديال الأصوات لي حصل عليها كلشي باش نحصل على النسبة ديال كل لاعب من الأصوات الكود ديال الملف هو :

                                    <!DOCTYPE html>
<?php include_once('includes/functions.php');;?>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Voting System</title>
</head>
<body>
    <div class="container">
        <h3>أحسن لاعب ف 2017</h3>
        <?php 
            if(isset($_POST['messi'])){
                insert($con,"messi");
            }else if(isset($_POST['ronaldo'])){
                insert($con,"ronaldo");
            }else if(isset($_POST['griezmann'])){
                insert($con,"griezmann");
            }
        ?>
        <div class="players" align="center">
            <img src="images/messi.jpg" height="200" width="200" alt="">
            <img src="images/ronaldo.jpg" height="200" width="200" alt="">
            <img src="images/griezmann.jpg" height="200" width="200" alt="">
            <form method="post" action="index.php">
                <button type="submit" name="messi">ميسي</button>
                <button type="submit" name="ronaldo">رونالدو</button>
                <button type="submit" name="griezmann">غريزمان</button>
            </form>
        </div>
        <div class="container">
               <a href="index.php?result"><h3>مشاهدة النتائج</h3></a>
        </div>
        <div class="container" dir="rtl">
            <?php
                $result = getData($con);
                if(isset($_GET['result'])){
                    while($row = $result->fetch_assoc()){
                        $total = $row['messi']+$row['ronaldo']+$row['griezmann'];
                        $per_messi = round($row['messi']*100/$total). "%";
                        $per_ronaldo = round($row['ronaldo']*100/$total)."%";
                        $per_griz = round($row['griezmann']*100/$total)."%";
                        echo '<h3>عدد الأصوات'.' '.$total.'</h3>';
                        echo '<div align="center"><p><h4 class="result"> ميسي '.$row['messi'].' صوت نسبة <span dir="ltr" class="perc">'. $per_messi.'</span><h4></p>';
                        echo '<div align="center"><p><h4 class="result"> رونالدو '.$row['ronaldo'].' صوت نسبة <span dir="ltr" class="perc">'. $per_ronaldo.'</span><h4></p>';
                        echo '<div align="center"><p><h4 class="result"> غريزمان '.$row['griezmann'].' صوت نسبة <span dir="ltr" class="perc">'. $per_griz.'</span><h4></p>';
                    }
                }
            ?>
        </div>
    </div>
</body>
</html>
                                

5- الملف main.css

فالمجلد css زيد فيه ملف جديد سميه main.css غادي يكون فيه الكود لي غادي يمكن من إضافة des styles css للصفحة الرئيسية ديالنا بالنسبة للصور يمكنلك تستعمل صور من عندك أوتاخد هادو لي خدمت بهم من الكود سورس الكود ديال الملف هو :

                                    div.players{
    margin-top: 100px;
}
div.players img{
    border:5px solid green;
    border-radius: 100%;
    margin-bottom: 50px;
}
h3{
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
}
button{
    font-size: 20px;
    padding: 10px;
    background: #FFDDAA;
    cursor: pointer;
}
.perc{
    color:#ee4736;
    font-size: 25px;
    font-weight: bold;
}
.result{
    color:#3765af;
    font-size: 20px;
    font-weight: bold;
}
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد