تصميم تعدد اللغات في الموقع بواسطة array و PHP Cookies

17-12-2021

1528

تصميم المواقع و التطبيقات NewMediene

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

في هذا المثال ستحتاج القليل من أكواد البرمجة  Html - Php - Css .


1- ملف index.php سوف يكون بمثابة الصفحة الرئيسية لعرض موقعك 
<?php 

    // Get lang
    require_once 'lang.php'; ?>

<!DOCTYPE html>

<!--- DIRECTION --->
<html dir="<?php echo $lang["DIR"] ?>" >

    <head>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >

        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/icon.png" >
		
		<title><?php echo $lang["HOME"] ?></title>
        
    </head>

    <body>

        <div class="container" >
            
            <div class="logo" ><a href="http://www.dzworkers.com" ><img alt="dzworkers.com" src="img/logo.jpeg" ></a></div>

            <div class="lang" >
                <a href="lang/index.php?lang=ar" >العربية</a>
                <a href="lang/index.php?lang=fr" >Français</a>
                <a href="lang/index.php?lang=an" >English</a>
            </div>

            <div class="post" >

                <h3><?php echo $lang["TITLE"] ?></h3>

                <p><?php echo $lang["TEXT"] ?></p>

            </div>
            
        </div>

    </body>

</html>

2 - ملف lang.php سوف يحتوي على كود تعيين و تأكيد اللغة المختارة أو الإفتراضية
<?php 

if (isset($_COOKIE["lang"])){  
    
    // في حال تفعيل الكوكيز يكون الملف الذي إخترته باللغة التي إخترتها
    require_once "lang/".$_COOKIE["lang"].".php";

}else{
    
    // في حال عدم تفعيل الكوكيز يكون الملف الإفتراضي باللغة العربية
    require_once 'lang/ar.php';

}//---  ?>

3 - مجلد lang يحتوي العديد من الملفات الخاصة باللغات ( fr.php - ar.php - an.php ) مع ملف index.php و هو المسؤول على تفعيل COOKIE للغة المختارة

- index.php

<?php

    $langArray = array('an','ar','fr');
    
    if(isset($_GET["lang"]) AND in_array($_GET["lang"],$langArray)){

        setcookie("lang", $_GET["lang"], time() + (86400 * 7), "/"); // 86400 = 1 day

        header("location: ".$_SERVER['HTTP_REFERER'],true);

    }else{

        header("location: ../",true);

        //echo "Erreur, aucune langue n'a été choisie...";        
    
    }//--- ?>

- fr.php
<?php

    $lang = array(
        
        "DIR"   => "ltr",
        "HOME"  => "Accueil",
        "TITLE" => "Titre du sujet",
        "TEXT"  => "DZworkers est un site pour les travailleurs et les visiteurs du monde arabe qui cherche à les aider à publier leur travail et à montrer leurs activités commerciales et artisanales ..."
    
    ); // ---  ?>

- ar.php
<?php

    $lang = array( 
        
        "DIR"   => "rtl",        
        "HOME"  => "الصفحة الرئيـسية",
        "TITLE" => "عنوان الموضوع",
        "TEXT"  => "مجمع عمال الجزائر هو موقع للعمال والزوار من العالم العربي يسعى إلى مساعدتهم على نشر أعمالهم وإظهار أنشطتهم التجارية والحرفية ..."

    ); // ---  ?>

- an.php
<?php

    $lang = array(
        
        "DIR"   => "ltr",
        "HOME"  => "Home",
        "TITLE" => "topic title",
        "TEXT"  => "DZworkers is a site for workers and visitors from the Arab world that seeks to help them publish their work and show their business and craft activities ..."
    
    ); // ---  ?>

4 - مجلد css يحتوي على ملف style.css الخاص بالتصميم 
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');

*,*:before,*:after {
	padding: 0;
	margin: 0;

}body {    
    background-color: white;
    font-family: 'Cairo', sans-serif;
    padding: 0px 1%;

}

.container {
    margin: 0 auto;
    max-width: 450px;

}

.logo a img{
    float: right;
    width: 70%;
    margin: 30px 15%;
}

.lang{
    float: right;
    width: 96%;
    padding: 2%;
    background-color: #333333;

}.lang a {
    display:inline-block;
    margin: 5px 10px;
    color: white;
    text-decoration: none;	
    transition: 0.3s;

}.lang a:hover {
    color: #ffb0b0;
}

.post {
    float: right;
    width: 90%;
    padding: 5%;
    background-color: #ffb0b0;
    color: #333333;

}.post h3 {
    float: right;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16pt;
    font-weight: bold;

}.post p {
    float: right;
    width: 100%;
    font-size: 10pt;

}