كيفاش تصاوب زر إعجاب بحال فيسبوك ب php و ajax الجزء الأول

imadbelasri PHP
PH

فهاد الدرس البسيط غادي نشوفو كيفاش نقادو زر إعجاب للمنشورات ديالنا بحال لي كنشوفو ففيسبوك وغيرو بإستعمال php و ajax الدرس بسيط للمبتدئين.


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


1- إضافة قاعدة البيانات

أول حاجة غادي نديرو هي غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها articles من بعد غادي نزيد فيها 3 ديال les tables نسميهم users,articles,likes هادي هي قاعدة البيانات لي غادي يكونوا فيها المقالات لي غادي يتعرضوا فالصفحة الرئيسية الكود باش تزيد الجداول فقاعدة البيانات هو :

                                                    
                                                        --
-- Structure de la table `articles`
--

CREATE TABLE `articles` (
  `id` int(11) NOT NULL,
  `titre` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `likes` int(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Structure de la table `likes`
--

CREATE TABLE `likes` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `article_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Structure de la table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `email` varchar(255) NOT NULL,
  `passe` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Index pour les tables exportées
--

--
-- Index pour la table `articles`
--
ALTER TABLE `articles`
  ADD PRIMARY KEY (`id`);

--
-- Index pour la table `likes`
--
ALTER TABLE `likes`
  ADD PRIMARY KEY (`id`),
  ADD KEY `users.id` (`user_id`),
  ADD KEY `articles.id` (`article_id`);

--
-- Index pour la table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT pour les tables exportées
--

--
-- AUTO_INCREMENT pour la table `articles`
--
ALTER TABLE `articles`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
--
-- AUTO_INCREMENT pour la table `likes`
--
ALTER TABLE `likes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32;
--
-- AUTO_INCREMENT pour la table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
                                                    
                                                

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

غادي تمشي ل wamp/www أو xampp/htdocs يلا كنتي خدام ب xampp وغادي تزيد مجلد جديد تسميه articles-likes من بعد تزيد فيه 3 مجلدات واحد تسميه database وواحد includes وواحد js من بعد غادي نزيد ملف نسميه db.php فالمجلد database هاد الملف هو لي غادي يمكني من الإتصال بقاعدة البيانات الكود النهائي ديال الملف :

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

3- الملف functions.php

منبعد زيد مقالات فالجدول articles من بعد ما تزيدهم سير للمجلد database وزيد فيه ملف سميه functions.php هاد الملف غادي يكونوا فيه les fontions لي غادي نحتاجو فاولا كاين getData لي كتمكن من استرجاع كل المقالات لي كاينة فالجدول articles من بعد كاين countLikes لي كتخد ل id ديال ل article وكترجعنا شحال عندو من إعجاب ثم كاين addLike لي كتخد ل id ديال ل article وكتزيدلو إعجاب ملي كيضغط المستخدم على إعجاب بالمقال من بعد كاين liked لي كتخد ل id ديال ل article وكتحقق واش سبق للمستخدم ضغط على زر إعجاب لهاد المقال من بعد كاين removeLike لي كتحيد إعجاب لمقال اختارو المستخدم الكود ديال الملف هو :

                                                        
                                                            <?php
session_start();
include_once('database/db.php');
function getData($con){
    $query = "SELECT * FROM articles";
    $result = mysqli_query($con,$query);
    if($result != null){
        return $result;
    }
}
function countLikes($con,$id){
    $query = "SELECT likes as total FROM articles WHERE id='$id'";
    $result = mysqli_query($con,$query);
    $nombre = $result->fetch_assoc();
    return $nombre['total'];
}
function addLike($con,$id){
    $query = "UPDATE articles SET likes = likes+1 WHERE id = '$id'";
    mysqli_query($con,$query);
    $query = "INSERT INTO  likes (user_id,article_id) VALUES(1,$id)";
    mysqli_query($con,$query);
}
function liked($con,$id){
    $query = "SELECT count('id') as total FROM likes WHERE article_id = '$id' AND user_id = 1";
    $result = mysqli_query($con,$query);
    $likes = $result->fetch_assoc();
    if($likes['total'] > 0){
        return 'true';
    }else{
        return 'false';
    }
}
function removeLike($con,$id){
    $query = "UPDATE articles SET likes = likes-1 WHERE id = '$id'";
    mysqli_query($con,$query);
    $query = "DELETE FROM likes WHERE article_id = '$id' AND user_id = 1";
    mysqli_query($con,$query);
}
                                                        
                                                    

4- الصفحات الأساسية

فالمجلد includes غادي تزيد ملف تسميه header.php و آخر تسميه footer.php الكود ديال header.php هو :

                                                        
                                                            <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Articles likes</title>
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Accueil</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
                                                        
                                                    

5- الصفحات الأساسية تتمة

دائما فالمجلد includes الكود ديال الملف footer.php هو :

                                                        
                                                            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/like.js"></script>
  </body>
</html>
                                                        
                                                    

دروس ذات صلة

PH

كيفاش تزيد المعلومات فقاعدة البيانات بإستعمال Ajax

فهاد الدرس غادي نقادو واحد المشروع بسيط لي عبارة عن chatbox الهدف هنا ماشي هو نديرو chat ولكن الهدف...


PH

كيفاش تصاوب إختبار بإستعمال PHP الجزء الأول

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


PH

كيفاش تصاوب إختبار بإستعمال PHP الجزء الثاني

فهاد الدرس لي هو الجزء الثاني ديال كيفاش نقاد إختبار بإستعمال ل php غادي نكملو باقي الصفحات لي غادي...


PH

كيفاش نصاوب blog بل php الجزء الأول

فهاد المشروع غادي نشوفو كيفاش نقادو blog بإستعمال php كما غادي نشوفو كيفاش نسجلو المعلومات ديالنا فق...


PH

كيفاش نصاوب blog بل php الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نشوفو كيفاش نسجلو المعلومات ديالنا فقاعدة البيانات و كيفاش ند...


PH

كيفاش نصاوب blog بل php الجزء الثالث

فهاد الجزء الثالث من هاد المشروع غادي نكملو الملفات الخاصة بالأدمن وغادي نقادو الصفحات الرئيسية لي...


PH

كيفاش نصاوب blog بل php الجزء الرابع

فهاد الجزء الرابع غادي نشوفو كيفاش نزيدو système d'authentification لي غادي يمكن المستخدم من التسجيل...


PH

مشروع Photos Gallery بل PHP الجزء الأول

فهاد الدرس غادي نشوفو كيفاش نصاوبو واحد المشروع لي عبارة عن موقع للصور المستخدم كيدخل كيشاهد الصور و...


PH

مشروع Photos Gallery بل PHP الجزء الثاني

فهاد الجزء الثاني غادي نقادو الملفات لي غادي يمكننا من ربط الإتصال بقاعدة البيانات وغادي نزيدو الملف...


PH

مشروع Photos Gallery بل PHP الجزء الثالث

فهاد الجزء الثالث من المشروع ديالنا غادي نكملو الملفات لي غادي يمكنو من التعامل مع المعلومات الخاصة...