Rehber PHP ile Çoklu Dil ve Çoklu Tema Sistemi Yapımı

Merhaba 😇

Dün açtığım ankkette Çoklu Dil Sistemi istenmiş.

Hangi Web rehberini istersiniz?

Merhaba. Bu aralar biraz yoğunum. O yüzden anket açıp sizlerin kararına göre rehberleri yazacağım. Hangi rehberi istersiniz? Çoklu Dil Sistemi (Türkçe, İngilizce, Almanca vb.). Çoklu Tema Sistemi (Açık / Koyu ve Sistem Teması). Tıklama ve Hit Sayısı Takip Sistemi. Sayfalama Sistemi. Sınırsız...
www.technopat.net www.technopat.net

Size bir güzellik yapıp hem Çoklu Dil Sistemini, hem de Çoklu Tema Sistemini tek rehber ile göstereceğim.

Öncelike bu 2 sistem nedir onla başlayalım;
  • Çoklu Dil Sistemi
  • Çoklu Tema Sistemi

Çoklu Dil Sistemi: Bir e-ticaret siteniz var diyelim. Sadece Türkçe dil kullanıyor olsun. Siz global bir e-ticaret sitesine dönüştürmek istiyorsanız mutlaka farklı dilleri desteklemesi gerekir. Bu yüzden Çoklu Dil Sistemi kullanılır.

Çoklu Tema Sistemi: Bir forum siteniz var diyelim. Metin ağırlıkları içerikleri okurken insanlar yorulabilir beyaz tema ile. Bu yüzden isteğe bağlı Çoklu Tema Sistemi kullanmanız gerekir. Hem açık, hem koyu tema olsun istiyorsanız çoklu tema sistemi kullanmanız gerekir.

Not: Bu rehber içerisinde Sadece Açık ve Koyu Tema Sistemi olmayacak. Sistem temasına göre otomatik çalışan tema sistemi de olacak 😎

Merak etmeyin, her 2 sistemi size en ayrıntılı şekilde anlatacağım.

Hadi başlayalım;

Not: Rehber içinde komutların anlamlarını tek tek anlatmayacağım. Komutlar içinde açıklama satırlarında ne işe yaradığını yazdım.

Ben diller için Türkçe ve İngilizce seçtim. Siz farklı diller veya daha fazla dil ekleyebilirsiniz.

Dosya yapımız bu şekilde;
  • Ana Klasör
    • assets
      • dark_theme.css
      • light_theme.css
      • system_theme.css
    • config
      • lang_eng.php
      • lang_tr.php
    • index.php
    • config.php
1678683142050.png


Her dil için farklı bir PHP dosyası eklememiz gerekiyor.

Not: Tema olarak sistem teması, açık ve koyu tema ekledim. Siz kendinize özel bir tema yapmak isterseniz bir adet farklı CSS dosyası eklemeniz gerekir.

Öncelikle index.php sayfamızı yazıyoruz.

Gerekli tüm sayfa kodları aşağıda yer almaktadır.

Not: Sitenin güvenlik duvarı izin vermediği için dosyaları kod olarak paylaşamıyorum. O yüzden görsel olarak ekledim.
Not 2: Tüm proje dosyaları en alt kısımda Google Drive linki olarak mevcuttur.

1678683267692.png

1678683281318.png


Şimdi config.php dosyamızı yazalım;

Not: Sitenin güvenlik duvarı izin vermediği için dosyaları kod olarak paylaşamıyorum. O yüzden görsel olarak ekledim.
Not 2: Tüm proje dosyaları en alt kısımda Google Drive linki olarak mevcuttur.

1678683316390.png


Şimdi Türkçe ve İngilizce dil dosyalarımızı yazalım;

Türkçe PHP dosyası;

PHP: 
<?php

    // NOT: Define metodu 2 parametre alır, değişken ismi ve içeriği. Değişken ismi sabit kalmak zorundadır!

    // MENU KISMI
    define("home", "Ana Sayfa");
    define("products", "Ürünler");
    define("about", "Hakkımızda");
    define("contact", "İletişim");

    // DIL KISMI
    define("turkish", "Türkçe");
    define("english", "İngilizce");

    // TEMA KISMI
    define("system", "Sistem Teması");
    define("light", "Açık Tema");
    define("dark", "Koyu Tema");

?>

İngilizce PHP Dosyası;

PHP: 
<?php

    // NOT: Define metodu 2 parametre alır, değişken ismi ve içeriği. Değişken ismi sabit kalmak zorundadır!

    // MENU KISMI
    define("home", "Home");
    define("products", "Products");
    define("about", "About Us");
    define("contact", "Contact");

    // DIL KISMI
    define("turkish", "Turkish");
    define("english", "English");

    // TEMA KISMI
    define("system", "System Theme");
    define("light", "Light Theme");
    define("dark", "Dark Theme");

?>

Şimdi, Sistem Teması, Açık Tema ve Koyu Tema CSS dosyarlımızı yazalım;

Sistem Teması CSS dosyası;

Not: prefers-color-scheme özelliği ile sistem teması çekilir.

2 parametre alır;
  • Light
  • Dark
Detaylı bilgi için makaleye bakabilirsiniz (İngilizce):
developer.mozilla.org

prefers-color-scheme - CSS: Cascading Style Sheets | MDN

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
developer.mozilla.org developer.mozilla.org

CSS: 
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

*{
    font-family: 'Alata', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none; }

body{
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background-color: #fff;
}

.container{
    width: 1000px;
    height: 200px;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: row;
    background-color: #006eff;
    border-radius: 20px;
}

.container > ul{
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.container > ul > li{
    list-style: none;
    margin: 0 5px;
    color: #ff0;
}

.container > ul > li > a{
    color: #fff;
    transition: color 0.2s ease;
}

.container > ul > li > a:hover{
    color: #ff0;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #fff;
    }
    .container{
        background-color: #006eff;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
    }
    .container{
        background-color: #444;
    }
}

Açık Tema CSS Dosyası;

CSS: 
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

*{
    font-family: 'Alata', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none; }

body{
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background-color: #fff;
}

.container{
    width: 1000px;
    height: 200px;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: row;
    background-color: #006eff;
    border-radius: 20px;
}

.container > ul{
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.container > ul > li{
    list-style: none;
    margin: 0 5px;
    color: #ff0;
}

.container > ul > li > a{
    color: #fff;
    transition: color 0.2s ease;
}

.container > ul > li > a:hover{
    color: #ff0;
}

Koyu Tema CSS Dosyası;

CSS: 
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

*{
    font-family: 'Alata', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none; }

body{
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background-color: #333;
}

.container{
    width: 1000px;
    height: 200px;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: row;
    background-color: #444;
    border-radius: 20px;
}

.container > ul{
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.container > ul > li{
    list-style: none;
    margin: 0 5px;
    color: #ff0;
}

.container > ul > li > a{
    color: #fff;
    transition: color 0.2s ease;
}

.container > ul > li > a:hover{
    color: #ff0;
}

Evet, tüm kodlarımız bu şekilde.

Şimdi çıktısını görelim;

Varsayılan hali;

1678683944040.png


İngilizce hali;

1678683963356.png


Koyu Tema hali;

1678683977135.png


Projenin tüm dosyaları:

TS_MultiLang_And_MultiTheme_Site.zip

drive.google.com drive.google.com

Buraya kadar okuduysanız teşekkür ederim.

Bu rehberden sonra PHP İle Sayfalama rehberi gelecek.
Yazılım rehberlerimin devamı gelecek.

İyi çalışmalar, kolay gelsin 😎
 
Son düzenleme:
Genişletmek için tıkla...
Tüm yazdığım rehberler içindeki dosyalar tek bir link olarak birleştirildi arkadaşlar. İstediğiniz dosyayı bu link üzerinden indirebilirsiniz:

www.mediafire.com

MediaFire

MediaFire is a simple to use free service that lets you put all your photos, documents, music, and video in a single place so you can access them anywhere and share them everywhere.
www.mediafire.com www.mediafire.com
 

Benzer konular

ozan00211
PHP Dil Sistemi
Mesaj
0
Görüntüleme
464
ozan00211
ozan00211
Webcam kullanan insan
Rehber  PHP ile veritabanı kullanmadan çoklu dil seçeneği sunun!
Mesaj
0
Görüntüleme
153
Webcam kullanan insan
Webcam kullanan insan
Eray T
  • Makale
Rehber  PHP ile Sayfalama Sistemi Yapımı
Mesaj
0
Görüntüleme
445
Eray T
Eray T
ogingsan
PHP token sistemi yapımı
Mesaj
1
Görüntüleme
1B
nullptr
N
Tayfun Uzman
PHP ile sınav takvim sistemi
Mesaj
7
Görüntüleme
1B
Tayfun Uzman
Tayfun Uzman

Yeni konular

Yeni mesajlar

Geri
Yukarı