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


فهاد الدرس البسيط غادي نشوفو كيفاش نقادو زر إعجاب للمنشورات ديالنا بحال لي كنشوفو ففيسبوك وغيرو بإستعمال 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>
                                


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

بحث في الموقع


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