6. Sokak Lambası Kontrol Simülasyonu: WordPress'te Etkileşimli Bir Uygulama Geliştirme Rehberi

Günümüzde akıllı şehirler konsepti giderek yaygınlaşırken, sokak lambası kontrolü bu konseptin önemli bir parçası haline gelmiştir. Bu makalede, WordPress platformunu kullanarak 6 adet sokak lambasını kontrol edebileceğiniz bir simülasyon uygulamasının nasıl geliştirileceğini adım adım inceleyeceğiz. Bu simülasyon, sokak lambalarının parlaklık seviyelerini ayarlamanıza, belirli saatlerde otomatik olarak açılıp kapanmalarını sağlamanıza ve enerji tüketimini izlemenize olanak tanıyacak.

Neden WordPress?

WordPress, içerik yönetim sistemi (CMS) olarak bilinse de, eklentiler ve özel kodlar aracılığıyla çok daha fazlasını yapabilir. İşte WordPress'i tercih etme nedenlerimiz:

• Kullanım Kolaylığı: WordPress, kullanıcı dostu arayüzü sayesinde kolayca yönetilebilir.
• Geniş Eklenti Desteği: İhtiyaçlarınıza uygun birçok eklenti mevcuttur.
• Özelleştirilebilirlik: Tema ve eklentiler aracılığıyla tamamen özelleştirilebilir.
• Geniş Topluluk: Büyük bir geliştirici topluluğu sayesinde sorunlarınıza kolayca çözüm bulabilirsiniz.

Gereksinimler

Bu simülasyonu geliştirmek için aşağıdaki gereksinimlere ihtiyacınız olacak:

• WordPress Kurulumu: Bir WordPress web sitesine sahip olmanız gerekmektedir.
• Eklenti Geliştirme Bilgisi: WordPress eklentileri hakkında temel bilgiye sahip olmanız faydalı olacaktır.
• HTML, CSS ve JavaScript: Arayüzü oluşturmak ve etkileşimli hale getirmek için bu dillere hakim olmanız gerekmektedir.
• PHP: WordPress eklentileri PHP ile geliştirilir.

Adım Adım Geliştirme Süreci

1. Eklenti Oluşturma

İlk adım olarak, WordPress panelinizde yeni bir eklenti oluşturun. Eklenti dosyalarınızı barındıracak bir klasör oluşturun ve ana eklenti dosyasını (örneğin, `sokak-lambasi-simulasyonu.php`) oluşturun. Bu dosya, eklentinin temel bilgilerini içerecektir.

<?php
/**
 * Plugin Name: Sokak Lambası Simülasyonu
 * Description: 6 adet sokak lambasını kontrol edebileceğiniz bir simülasyon.
 * Version: 1.0.0
 * Author: [Adınız Soyadınız]
 */

// Güvenlik için doğrudan erişimi engelle
if (!defined('ABSPATH')) {
 exit;
}

// Eklenti aktif edildiğinde yapılacak işlemler
register_activation_hook(__FILE__, 'sokak_lambasi_simulasyonu_activate');

function sokak_lambasi_simulasyonu_activate() {
 // Aktivasyon sırasında yapılacak işlemler (örneğin, veritabanı tabloları oluşturma)
}

// Eklenti devre dışı bırakıldığında yapılacak işlemler
register_deactivation_hook(__FILE__, 'sokak_lambasi_simulasyonu_deactivate');

function sokak_lambasi_simulasyonu_deactivate() {
 // Devre dışı bırakma sırasında yapılacak işlemler (örneğin, veritabanı tablolarını silme)
}

// Yönetim paneli menüsüne ekleme
add_action('admin_menu', 'sokak_lambasi_simulasyonu_menu');

function sokak_lambasi_simulasyonu_menu() {
 add_menu_page(
 'Sokak Lambası Simülasyonu',
 'Sokak Lambası',
 'manage_options',
 'sokak-lambasi-simulasyonu',
 'sokak_lambasi_simulasyonu_page'
 );
}

// Yönetim paneli sayfası içeriği
function sokak_lambasi_simulasyonu_page() {
 include_once plugin_dir_path(__FILE__) . 'admin/sokak-lambasi-simulasyonu-admin.php';
}

// Stil dosyalarını yükleme
add_action('admin_enqueue_scripts', 'sokak_lambasi_simulasyonu_enqueue_styles');

function sokak_lambasi_simulasyonu_enqueue_styles() {
 wp_enqueue_style('sokak-lambasi-simulasyonu-style', plugin_dir_url(__FILE__) . 'admin/css/style.css');
}

// Script dosyalarını yükleme
add_action('admin_enqueue_scripts', 'sokak_lambasi_simulasyonu_enqueue_scripts');

function sokak_lambasi_simulasyonu_enqueue_scripts() {
 wp_enqueue_script('sokak-lambasi-simulasyonu-script', plugin_dir_url(__FILE__) . 'admin/js/script.js', array('jquery'), null, true);
}

2. Yönetim Paneli Arayüzünü Oluşturma

Eklentinin yönetim paneli arayüzünü oluşturmak için `admin/sokak-lambasi-simulasyonu-admin.php` dosyasını oluşturun. Bu dosyada, sokak lambalarının durumunu gösteren ve kontrol etmenizi sağlayan HTML, CSS ve JavaScript kodlarını kullanacağız.

Öncelikle, her bir sokak lambası için birer anahtar (switch) ve parlaklık ayarı için bir slider ekleyeceğiz. Ayrıca, genel ayarlar için bir bölüm ekleyerek, otomatik açma/kapama saatlerini belirleyebileceğiz.

<div class="wrap">
 
Sokak Lambası Simülasyonu

 <table class="wp-list-table widefat fixed striped">
 
 
 Lamba ID
 Durum
 Parlaklık
 
 
 
 <?php for ($i = 1; $i <= 6; $i++) : ?>
 
 <?php echo $i; ?>
 <input type="checkbox" id="lamba-<?php echo $i; ?>-durum" class="lamba-durum" data-lamba-id="<?php echo $i; ?>">
 <input type="range" id="lamba-<?php echo $i; ?>-parlaklik" class="lamba-parlaklik" data-lamba-id="<?php echo $i; ?>" min="0" max="100" value="0">
 
 <?php endfor; ?>
 
 

 <h2>Genel Ayarlar</h2>
 <label for="acilis-saati">Açılış Saati:</label>
 <input type="time" id="acilis-saati" name="acilis-saati"><br><br>

 <label for="kapanis-saati">Kapanış Saati:</label>
 <input type="time" id="kapanis-saati" name="kapanis-saati"><br><br>

 <button id="kaydet-ayarlar" class="button button-primary">Ayarları Kaydet</button>
</div>

3. CSS ile Stil Verme

`admin/css/style.css` dosyasını oluşturarak, yönetim paneli arayüzünüze stil verin. Bu, arayüzün daha kullanıcı dostu ve görsel olarak çekici olmasını sağlayacaktır.

.wrap {
 margin: 20px;
}

.wp-list-table {
 width: 100%;
 border-collapse: collapse;
}

.wp-list-table th,
.wp-list-table td {
 padding: 8px;
 text-align: left;
 border-bottom: 1px solid #ddd;
}

.lamba-parlaklik {
 width: 100%;
}

4. JavaScript ile Etkileşim Ekleme

`admin/js/script.js` dosyasını oluşturarak, sokak lambası anahtarlarının ve parlaklık slider'larının davranışlarını kontrol edin. Ayrıca, genel ayarları kaydetme işlevini de bu dosyada yazacağız.

jQuery(document).ready(function($) {
 $('.lamba-durum').on('change', function() {
 var lambaId = $(this).data('lamba-id');
 var durum = $(this).is(':checked');
 console.log('Lamba ' + lambaId + ' durumu: ' + durum);
 // Burada AJAX ile sunucuya veri gönderebilirsiniz
 });

 $('.lamba-parlaklik').on('input', function() {
 var lambaId = $(this).data('lamba-id');
 var parlaklik = $(this).val();
 console.log('Lamba ' + lambaId + ' parlaklığı: ' + parlaklik);
 // Burada AJAX ile sunucuya veri gönderebilirsiniz
 });

 $('#kaydet-ayarlar').on('click', function() {
 var acilisSaati = $('#acilis-saati').val();
 var kapanisSaati = $('#kapanis-saati').val();
 console.log('Açılış Saati: ' + acilisSaati + ', Kapanış Saati: ' + kapanisSaati);
 // Burada AJAX ile sunucuya veri gönderebilirsiniz
 });
});

5. Verileri Saklama ve Yönetme

Sokak lambalarının durumunu, parlaklık seviyelerini ve genel ayarları saklamak için WordPress'in veritabanını kullanabilirsiniz. `update_option()` ve `get_option()` fonksiyonları, verileri kolayca kaydetmenize ve okumanıza olanak tanır. JavaScript kodunuzda, AJAX istekleri aracılığıyla bu verileri sunucuya gönderebilir ve güncelleyebilirsiniz.

6. Otomatik Açma/Kapama İşlevi

WordPress'in `wp_schedule_event()` fonksiyonunu kullanarak, belirli saatlerde sokak lambalarını otomatik olarak açıp kapatabilirsiniz. Bu fonksiyon, belirli bir zamanda bir eylemi tetiklemek için kullanılır. Eklentinizin aktivasyonunda bu fonksiyonu kullanarak, otomatik açma/kapama işlevini başlatabilirsiniz.

Sonuç

Bu makalede, WordPress kullanarak 6 adet sokak lambasını kontrol edebileceğiniz bir simülasyon uygulamasının nasıl geliştirileceğini adım adım inceledik. Bu simülasyon, akıllı şehirler konseptine katkıda bulunabilecek ve enerji verimliliğini artırmaya yardımcı olabilecek bir araçtır. Bu rehberi takip ederek, kendi sokak lambası kontrol simülasyonunuzu geliştirebilir ve WordPress'in gücünü keşfedebilirsiniz.

Ek Notlar

• Bu makale, temel bir simülasyonun nasıl geliştirileceğini göstermektedir. İhtiyaçlarınıza göre daha gelişmiş özellikler ekleyebilirsiniz.
• Güvenlik önlemlerini almayı unutmayın. Kullanıcı girişlerini doğrulayın ve verileri güvenli bir şekilde saklayın.
• Performansı optimize etmek için, gereksiz kodlardan kaçının ve önbellekleme tekniklerini kullanın.