بناء أداة تحليل كثافة الكلمات المفتاحية من الصفر باستخدام Laravel PHP

مرحباً بقرّاء منصة قيد الأعزاء! آمل أن أقدم لكم محتوى برمجياً رائعاً يلهمكم ويثقفكم ويضيف المتعة إلى رحلتكم التقنية. في هذا الدليل الشامل، سنتعمق في مفهوم كثافة الكلمات المفتاحية وسنتعلم كيفية بناء أداة ويب متكاملة قادرة على حساب هذه الكثافة باستخدام إطار عمل Laravel الشهير. ستتيح لنا هذه الأداة لصق صفحة كاملة من شيفرة HTML، ثم ستنفذ عمليات معقدة لتقديم تقرير دقيق حول كثافة الكلمات المفتاحية.

باختصار، إليكم بعض المهارات الأساسية التي سنتطرق إليها أثناء بناء هذه الأداة:

• مسارات Laravel (routes) ووحدات التحكم (controllers) والعروض (views).
• تخطيطات Laravel (layouts).
• لغة HTML والنماذج (forms).
• مكتبة jQuery وتقنية Ajax.
• بعض وظائف PHP الأساسية.
• لمحة سريعة عن تحسين محركات البحث (SEO).

ما هي كثافة الكلمات المفتاحية؟

إذا كنت تمتلك موقعاً إلكترونياً أو مدونة، فمن المحتمل أنك تعرف بالفعل ما تعنيه كثافة الكلمات المفتاحية. أما بالنسبة لأولئك الذين لا يدركون معناها، سأقدم شرحاً موجزاً ومفيداً أدناه.

كثافة الكلمات المفتاحية هي مقياس لتكرار كلمة أو عبارة مفتاحية معينة ضمن نص كبير. يتم التعبير عن هذه الكثافة كنسبة مئوية، ويتم حسابها ببساطة باستخدام المعادلة التالية:

كثافة الكلمات المفتاحية = (عدد تكرارات الكلمة المفتاحية / إجمالي عدد الكلمات) * 100

لماذا تُعد كثافة الكلمات المفتاحية مهمة؟

تُعد كثافة الكلمات المفتاحية عاملاً محورياً في خوارزميات محرك البحث Google. يُعتقد على نطاق واسع أن كثافة الكلمات المفتاحية المثلى لتحسين ترتيب صفحات الويب في Google تتراوح حول 3.5%. إذا تجاوزت هذه النسبة، على سبيل المثال وصلت إلى 20%، فقد يُفسر ذلك على أنه ‘حشو كلمات مفتاحية’ (keyword stuffing)، مما قد يؤثر سلباً على تصنيفات موقعك في محرك البحث Google.

هذا كان درساً موجزاً في أساسيات SEO، وقد قدمنا لكم السياق اللازم لما نسعى لبنائه.

بناء أداة تحليل كثافة الكلمات المفتاحية باستخدام Laravel

سيفترض هذا الدليل أننا جميعاً نبدأ بمشروع Laravel جديد تماماً، مما يتيح لأي شخص المتابعة من أي نقطة. (نعتذر إذا كانت الأقسام الأولى تبدو بديهية للبعض!). ولتوفير سياق إضافي، أنا أقوم ببناء هذا المشروع على نظام MacOS باستخدام XAMPP محلياً.

المتطلبات الأساسية

قبل البدء، تأكد من توفر المتطلبات التالية:

• بيئة PHP مثبتة وإمكانية الوصول إلى الدليل الجذري.
• برنامج Composer مثبت على جهازك.
• محرر الأكواد المفضل لديك الذي يدعم PHP، HTML، CSS، و JS.

بعد التحقق من هذه المتطلبات، يمكننا الآن البدء بالعمل الجاد.

إنشاء تطبيق Laravel الخاص بنا

أولاً وقبل كل شيء، نحتاج إلى تنزيل وتثبيت إصدار جديد من Laravel. اتبع الخطوات أدناه لتحقيق ذلك:

1. افتح واجهة سطر الأوامر (CLI) في الدليل الجذري لخادم الويب الخاص بك، على سبيل المثال XAMPP/xamppfiles/htdocs/.
2. نفّذ الأمر التالي ودع Composer يقوم بعمله:

composer create-project --prefer-dist laravel/laravel KeywordDensityApp

نصيحة مهمة: إذا كنت تعمل على نظام MacOS، فتحقق من الخطوات التالية لتمكين الأذونات على مجلد التخزين (storage) الخاص بـ Laravel:

1. انتقل عبر واجهة سطر الأوامر إلى مجلد المشروع (KeywordDensityApp).
2. نفّذ الأمر التالي:

sudo chmod -R 777 storage

إضافة وحدة تحكم (Controller) وعرض (View)

بعد أن انتهينا من الأساسيات، يمكننا البدء في بناء وحدة التحكم وصفحة الويب التي ستسمح للمستخدم بلصق وتحليل بعض شيفرة HTML. يمكننا إنشاء وحدة تحكم جديدة بطريقتين: إما عبر مساعد سطر أوامر PHP artisan أو ببساطة عن طريق إنشائها باستخدام محرر الأكواد الخاص بك. لا تتردد في استخدام أي من الطرق أدناه، فقط تأكد من تطابق وحدة التحكم.

إنشاء وحدة التحكم باستخدام PHP artisan

php artisan make:controller ToolController

إنشاء وحدة التحكم باستخدام محرر الأكواد

1. حدد الموقع التالي: ProjectFolder/App/Http/Controllers.
2. أنشئ ملف .php جديداً باسم ToolController.
3. تأكد من أن هذا الملف الذي تم إنشاؤه حديثاً يحتوي على المحتويات التالية:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ToolController extends Controller
{
    //
}

الآن دعنا ننشئ العرض (view).

إنشاء العرض باستخدام محرر الأكواد

1. حدد مجلد العروض (view folder) ضمن ProjectFolder/resources/views.
2. أنشئ مجلداً جديداً باسم tool.
3. أنشئ ملف PHP جديداً للعرض باسم index.blade.php.

إنشاء ملف تخطيط (Layout File)

في معظم تطبيقات Laravel، ستحتاج إلى بناء ملف تخطيط (layouts file) لتجنب تكرار الكثير من شيفرة HTML مراراً وتكراراً للحصول على نفس التصميم في جميع أنحاء التطبيق. هذا التخطيط بسيط للغاية، ويستخدم قالب Bootstrap بسيطاً ويحتوي على استدعاء @yield لمنطقة ‘content‘ التي سنستخدمها في عروضنا. بالإضافة إلى ذلك، هناك استدعاء @yield لـ ‘scripts‘ الذي سنستخدمه لاحقاً.

1. حدد مجلد العروض (view folder) ضمن ProjectFolder/resources/views.
2. أنشئ مجلداً جديداً هنا باسم layouts.
3. أنشئ ملفاً جديداً باسم master.blade.php.
4. أضف الكود التالي إلى الملف:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Keyword Density Tool</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        body {padding-top: 5em;}
    </style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Keyword Density App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="{{route('KDTool')}}">Tool</a>
            </li>
        </ul>
    </div>
</nav>

<main role="main" class="container mt-3">
    @yield('content')
</main><!-- /.container -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
@yield('scripts')
</body>
</html>

توسيع عروضنا لاستخدام ملف التخطيط

دعنا الآن نستخدم ملف التخطيط الذي تم إنشاؤه حديثاً في كل من عرض الترحيب (welcome view) وعرض فهرس الأداة (tool index view). اتبع هذه الخطوات لتوسيع العروض لتشمل التخطيط:

أضف الكود التالي إلى كل من الملفين ProjectFolder/resources/views/welcome.blade.php و ProjectFolder/resources/views/tool/index.blade.php:

@extends('layouts.master')

@section('content')

@endsection

حاول الآن عرض صفحة الفهرس لدليل الأداة، على سبيل المثال localhost/tool. يجب أن تبدو شبيهة بالصورة أدناه:

ربط وحدة التحكم، المسار، والعرض

الآن بعد أن أصبح لدينا وحدة تحكم وعرض، نحتاج أولاً إلى تعريف مسار (route) وثانياً إضافة دالة إرجاع العرض (return view method) إلى وحدة التحكم.

تعريف المسار (Route)

1. حدد موقع ملف مسارات الويب (web routes file) ضمن ProjectFolder/routes/web.php.
2. أضف الكود التالي إلى نهاية الملف:

Route::get('/tool', 'ToolController@index')->name('KDTool');

إنشاء دالة وحدة التحكم الجديدة

الآن، ارجع إلى ملف ToolController الخاص بك وأضف الدالة التالية:

public function index()
{
    return view('tool.index');
}

لا تتردد في تغيير أسماء العروض (view names)، عناوين URL للمسارات (route URLs)، أو دوال وحدة التحكم (controller functions) حسب تفضيلاتك الشخصية. فقط تأكد من تطابقها جميعاً وأن الصفحة تُعرض بشكل صحيح.

بناء عرض الأداة الخاص بنا

الآن، ومع إعداداتنا السابقة لملفات العروض والتخطيط، يمكننا البدء في إضافة المحتوى في شكل HTML الذي سنحتاجه. سيتكون هذا المحتوى من بعض النصوص، حقل إدخال نصي كبير (textarea)، وزر إرسال.

أضف شيفرة HTML التالية إلى قسم المحتوى (content section) في الملف ProjectFolder/resources/views/tool/index.blade.php:

<form id="keywordDensityInputForm">
    <div class="form-group">
        <label for="keywordDensityInput">HTML or Text</label>
        <textarea class="form-control" id="keywordDensityInput" rows="12"></textarea>
    </div>
    <button type="submit" class="btn btn-primary mb-2">Get Keyword Densities</button>
</form>

يجب أن يظهر العرض الآن بهذا الشكل:

إنشاء الجسر بين الواجهة الأمامية والخلفية

الآن، لدينا تقريباً كل ما نحتاجه في الواجهة الأمامية: منطقة إدخال نصية بسيطة حيث يمكن للمستخدمين لصق نصوصهم العادية أو شيفرة HTML. ما ينقصنا هو المنطق الذي سيعمل عند الضغط على زر ‘Get Keyword Densities‘. سيقوم هذا المنطق الرابط بالأساس بما يلي:

• الاستماع للنقرات على زر ‘Get Keyword Density Button‘.
• الحصول على محتويات حقل الإدخال النصي غير الفارغ.
• استخدام JQuery Ajax لإرسال البيانات إلى الواجهة الخلفية لمعالجتها وانتظار الاستجابة.
• عند استلام الاستجابة، معالجة البيانات وإنشاء جدول HTML يحتوي على الإحصائيات المقروءة بشرياً (كثافة الكلمات المفتاحية).

الواجهة الأمامية (Front-end)

لتحقيق ذلك، سنستخدم سكربت داخلي للصفحة يمكننا حقنه باستخدام وسم @section. أضف الكود التالي إلى عرض tool/index.blade.php، بعد قسم المحتوى (content section):

@section('scripts')
<script>
    $('#keywordDensityInputForm').on('submit', function (e) {
        // Listen for submit button click and form submission.
        e.preventDefault(); // Prevent the form from submitting

        let kdInput = $('#keywordDensityInput').val(); // Get the input

        if (kdInput !== "") { // If input is not empty.
            // Set CSRF token up with ajax.
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({ // Pass data to backend
                type: "POST",
                url: "/tool/calculate-and-get-density",
                data: {'keywordInput': kdInput},
                success: function (response) { // On Success, build a data table with keyword and densities
                    if (response.length > 0) {
                        let html = "<div style='overflow-x: auto; max-width: 100%;'><table class='table'><thead>";
                        html += "<th>Keyword</th>";
                        html += "<th>Count</th>";
                        html += "<th>Density</th>";
                        html += "</thead><tbody>";

                        for (let i = 0; i < response.length; i++) {
                            html += "<tr><td>" + response[i].keyword + "</td>";
                            html += "<td>" + response[i].count + "</td>";
                            html += "<td>" + response[i].density + "%</td></tr>";
                        }

                        html += "</tbody></table></div>";

                        $('#keywordDensityInputForm').after(html); // Append the html table after the form.
                    }
                },
            });
        }
    })
</script>
@endsection

سيتولى هذا السكربت بالكامل معالجة جميع النقاط المذكورة أعلاه في القائمة المرقمة. ما يتبقى لنا هو معالجة البيانات الواردة من جانب الواجهة الخلفية.

الواجهة الخلفية (Back-end)

أولاً، قبل أن نواصل البرمجة، نحتاج إلى معالجة حقيقة أنه يمكن إرسال كل من النص العادي و HTML. لهذا الغرض، يمكننا استخدام أداة مفيدة لمساعدتنا. مكتبة html2text هي المكتبة المثالية لـ PHP لهذه الحالة، لذا حان الوقت لتثبيتها. تقوم html2text بما يوحي به اسمها تماماً، تحويل ترميز HTML إلى نص عادي. لحسن الحظ، تحتوي هذه الحزمة على أمر تثبيت composer، لذا أدخل الأمر التالي في واجهة سطر الأوامر (CLI) في الدليل الجذري للمشروع:

composer require html2text/html2text

الآن، ستتلقى وحدة التحكم الخلفية لدينا إما HTML أو نصاً عادياً في الطلبات التي تنطلق من نموذج HTML الذي أنشأناه في عرضنا. نحتاج الآن إلى إنشاء المسار (route) لمعالجة هذا الاستدعاء وتوجيه الاستدعاء إلى وحدة التحكم المحددة التي ستقوم بالعمل السحري.

أضف شيفرة PHP التالية إلى ملف مسارات web.php:

Route::post('/tool/calculate-and-get-density', 'ToolController@CalculateAndGetDensity');

ثانياً، أضف ما يلي إلى ملف ToolController.php:

public function CalculateAndGetDensity(Request $request)
{
    if ($request->isMethod('GET')) {
        // هذا الجزء سيتم تحديثه لاحقاً لمعالجة طلبات POST
    }
}

حسناً، تم إعداد المسرح. دعنا نبرمج المنطق السحري الذي سيحسب كثافة الكلمات المفتاحية ويعيد البيانات. أولاً، مطلوب بيان use للحزمة html2text المثبتة حديثاً. أضف ما يلي إلى أعلى ملف ToolController.php، أسفل بيانات use الأخرى مباشرةً:

use Html2Text\Html2Text;

ثم نحتاج إلى معالجة المعامل GET الذي سيتم تمريره، مع التأكد من أنه غير مضبوط ثم تحويل معامل المحتوى إلى نص عادي. أعد هيكلة دالة CalculateAndGetDensity لتبدو كما يلي:

public function CalculateAndGetDensity(Request $request)
{
    if ($request->isMethod('GET')) {
        if (isset($request->keywordInput)) {
            // Test the parameter is set.
            $html = new Html2Text($request->keywordInput); // Setup the html2text obj.
            $text = $html->getText(); // Execute the getText() function.
        }
    }
}

الآن بعد أن أصبح لدينا متغير يحتفظ بجميع النصوص المجردة من معامل keywordInput، يمكننا المضي قدماً والبدء في حساب الكثافة. نحتاج إلى معالجة ما يلي:

• تحديد العدد الإجمالي للكلمات.
• تحليل السلسلة النصية وتحويلها إلى مصفوفة مفتاح-قيمة (المفتاح هو الكلمة المفتاحية، والقيمة هي تكرار الكلمة).
• الفرز بترتيب تنازلي بحيث يكون التكرار الأكبر أولاً في المصفوفة.
• التكرار على مصفوفة المفتاح والقيمة، ودفع القيم إلى مصفوفة جديدة مع حقل إضافي ‘density‘ الذي يستخدم صيغة كثافة الكلمات المفتاحية التي نظرنا إليها في وقت سابق من المقال. ستستخدم هذه الصيغة القيمة (التكرار) والعدد الإجمالي للكلمات.
• أخيراً، إرجاع البيانات.

أعد هيكلة الدالة لتبدو كما يلي، مع ملاحظة التعليقات:

public function CalculateAndGetDensity(Request $request)
{
    // التأكد من أن الطلب هو من نوع POST
    if ($request->isMethod('POST')) {
        // التحقق من وجود معامل keywordInput
        if (isset($request->keywordInput)) {
            // إعداد كائن html2text لتحويل HTML إلى نص عادي
            $html = new Html2Text($request->keywordInput);
            
            // تنفيذ دالة getText() وتحويل جميع النصوص إلى أحرف صغيرة لمنع تكرار الكلمات
            $text = strtolower($html->getText());

            // الحصول على العدد الإجمالي للكلمات في السلسلة النصية
            $totalWordCount = str_word_count($text);

            // الحصول على كل كلمة وعدد تكرارها كمصفوفة مفتاح-قيمة
            $wordsAndOccurrence = array_count_values(str_word_count($text, 1));

            // الفرز بترتيب تنازلي لقيمة المصفوفة (التكرار)
            arsort($wordsAndOccurrence);

            $keywordDensityArray = []; // بناء المصفوفة النهائية

            // التكرار على مصفوفة الكلمات والتكرارات
            foreach ($wordsAndOccurrence as $key => $value) {
                // إضافة الكلمة وعدد تكرارها وكثافتها إلى المصفوفة
                $keywordDensityArray[] = [
                    "keyword" => $key, // الكلمة المفتاحية
                    "count"   => $value, // عدد تكرارات الكلمة
                    "density" => round(($value / $totalWordCount) * 100, 2) // تقريب الكثافة إلى منزلتين عشريتين
                ];
            }

            // إرجاع المصفوفة الناتجة
            return $keywordDensityArray;
        }
    }
    // في حال كان الطلب GET أو لم يتم تعيين keywordInput، يمكن إرجاع استجابة فارغة أو خطأ
    return response()->json([]);
}

ملاحظة: جمال مكتبة html2text يكمن في أنها لا تهتم حقاً بما إذا كانت تحول HTML أو نصاً عادياً في المقام الأول، لذلك لا داعي للقلق إذا أرسل المستخدم أياً منهما. ستظل تنتج نصاً عادياً.

وضع الأداة تحت الاختبار

أخيراً، نحن جاهزون لاختبار الأداة، يا للروعة! انطلق واعرض عرض فهرس الأداة (localhost/tool). الآن، يمكنك الذهاب إلى أي موقع ويب تختاره على الإنترنت، تحميل صفحة من ذلك الموقع، ثم النقر بزر الفأرة الأيمن واختيار ‘View Source‘ (عرض مصدر الصفحة). انسخ المحتويات بالكامل وعد إلى الأداة. الصق المحتويات في منطقة النص وانقر على زر ‘Get Keyword Densities‘. انتظر الاستجابة وتحقق من جدول كثافات الكلمات المفتاحية!

تحقق من مثالي أدناه الذي يستخدم شيفرة HTML لهذه الصفحة:

وهذا كل شيء!

الخلاصة

في هذا المقال، تعلمنا كيفية بناء تطبيق Laravel من الصفر. لقد تطرقنا إلى بعض الأجزاء المختلفة من التطوير الشامل (full stack) مثل jQuery، PHP، HTML، وما إلى ذلك. نأمل أن يتم استخدام نفس المنهجية، مع فهم هذا التطبيق، لبناء شيء آخر، ربما أكبر وأفضل.

تطويرات مستقبلية محتملة

تأخذ أداة كثافة الكلمات المفتاحية حالياً الكلمات التوقفية (stop words) في الاعتبار. تُعرف الكلمات التوقفية بأنها تُتجاهل من قبل زواحف Google، مثل كلمات مثل ‘it‘، ‘the‘، ‘as‘، و ‘a‘. بالنظر إلى لقطة شاشة الأداة أعلاه، يمكنك أن ترى أنها تُستخدم بكثرة! يمكن إجراء المزيد من التطوير لتصفية الكلمات التوقفية وحساب الكثافة فقط على الكلمات غير التوقفية، مما قد يوفر رؤية أفضل لنتائج SEO.

أتمنى أن تكونوا قد استمتعتم بهذا المقال! إذا أعجبكم، فلا تترددوا في زيارة مدونتي: https://www.codewall.co.uk/

إلى اللقاء في المرة القادمة!

الخلاصة التقنية

لقد أثبت هذا الدليل العملي فعالية إطار عمل Laravel في بناء أدوات ويب متخصصة بكفاءة. من خلال دمج تقنيات الواجهة الأمامية مثل jQuery و Ajax مع قوة PHP في الواجهة الخلفية، تمكنا من إنشاء حل متكامل لتحليل كثافة الكلمات المفتاحية. تبرز أهمية استخدام مكتبات مثل html2text في معالجة البيانات المتنوعة، مما يقلل من التعقيد ويزيد من مرونة التطبيق. كما أن التركيز على هيكلة الكود وتنظيم المشروع ضمن بيئة Laravel يضمن سهولة الصيانة والتوسع المستقبلي، خاصة عند التفكير في تحسينات مثل تصفية الكلمات التوقفية لتقديم نتائج SEO أكثر دقة وقيمة للمستخدمين.