Kaynak Port olarak 587 vermeniz gerekiyor olabilir.
Kaynak Gerekmiyor da olabilir.
Kaynak Belki gerekiyordur,
Kaynak belki de gerekmiyordur.
Kaynak Duruma göre değişir...
Kaynak SSL için 465, TLS için 587 olabilirmiş.

JSFiddle üzerindeki kodunuzun çalışmamasının nedeni, input'a veri girişi yapıldığını dinleyen bir olay oluşturmamış olmanız.
Siz sadece sayfa ilk oluşturulduğu andaki değeri alıyor, ona göre işlem yapıyorsunuz. Sonraki değişimleri dinlemiyorsunuz.
Şu düzenleme işe yarayacaktır:

$button_genelBilgiler = $("#genelBilgiler");
$input_adSoyad = $("[name=adSoyad]");

$input_adSoyad.on("input", function() {
    const val = $(this).val();
    if(val.trim()) $input_adSoyad.css({'opacity' : '1', 'pointer-events' : 'initial' });
    else $input_adSoyad.css({'opacity' : '.7', 'pointer-events' : 'none' });
});

Merhaba. Siz verileri asenkron bir yapıda çekiyorsunuz. Doğrudan useState() içine yazdırıyorsanız aslında henüz veri gelmemişken state'in ilk değerini atıyorsunuz muhtemelen. State'e varsayılan olarak boş değer vermeli ve veritabanından gelen verileri useEffect altında bir promise yapısı içinde çağırmalısınız. Örneğin:

const MyComponent = () {
    const [datasState, setDatasState] = useState(null);
    
    useEffect(()=>{
        new Promise(async (resolve,reject) => {
            datas = await getMyData(); // bu fonksiyon ile veritabanınızdan verileri çekiyorsunuz diyelim...
            if(datas) setDatasState(datas);
        }).catch(()=>{ alert("hata var!!!"); });
    },[]);
    
    // datasState değerinin değişimlerini console'dan izleyelim
    useEffect(()=>{
        console.log("datasState", datasState);
    },[datasState]);
    
    return (
        <div>
            { datasState
                ? <MyOtherComponent datas={datasState} />
                : <div>Veriler yükleniyor...</div>
            }
        </div>
    );
};

$ilceler = json_decode($datas->ilceler);
print("<pre>$ilceler</pre>");

Kaynak olarak Google'a "mysql where kullanımı" yazdığımda karşıma ilk çıkan sonuç: tasarimkodlama.com/veritabani/mysql/mysql-where-kullanimi
Burada nasıl koşullu veri çekebileceğinizi öğrenebilirsiniz.

Ben yine de bi'kaç örnek vereyim:

WHERE koşulu ile sorgularınızda koşul belirtebiliyorsunuz. @rephp7'nin de yazdığı gibi şu şekilde sorgunuzu çalıştırabilirsiniz:
SELECT * FROM urunler WHERE product_status=1
Böylece urunler tablonuzdaki product_status sütununun değeri 1 olan tüm ürünleri çekmiş olursunuz.

SELECT id, product_name, product_quantity FROM urunler WHERE product_status=1
Böylece urunler tablonuzdaki product_status değeri 1 olan tüm ürünlerin sadece id, product_name ve product_quantity sütunlarını çekmiş olursunuz. Veritabanından sadece işinize yarayacak olan sütunları çekmek önemlidir. Çok aktif istekler geldiğinde veritabanıyla ilişkiniz mümkün olduğunca az olmalı.

SELECT * FROM urunler WHERE product_status <> 0
Böylece urunler tablonuzdan product_status değeri 0'dan farklı olanları (1 olabilir, 2 olabilir, -1 olabilir...) istemiş olursunuz.

SELECT * FROM urunler WHERE product_status = 1 AND product_quantity > 0
Böylece urunler tablonuzdan product_status değeri 1 olan ve product_quantity değeri 0'dan büyük olan tüm ürünleri istemiş olursunuz.
Mesela tablonuzda tükenmiş ürünleri göstermeyecekseniz veritabanından onları istememelisiniz. Adeti 0'dan büyük olanları istediğinizde veritabanından daha az ürün çekmiş olursunuz.

SELECT * FROM urunler WHERE product_status = 1 AND product_quantity > 0 AND product_price >= 10 AND product_price <= 100
Böylece urunler tablonuzdan product_status değeri 1 olan ve product_quantity değeri 0'dan büyük olan ve product_price değeri 10'a eşit veya büyük ve 100'e eşit veya küçük olan tüm ürünleri çekmiş olursunuz.
Yani sadece statüsü 1 olan, adeti tükenmemiş olan ve fiyatı 10-100 lira arası olan ürünleri çekmiş olursunuz.

SELECT * FROM urunler WHERE product_status = 1 AND ((product_quantity > 0 AND product_price >= 10 AND product_price <= 100) OR product_quantity = 0)
Böylece urunler tablonuzdan miktarı 0'dan büyük olup da fiyatı 10-100 arası olan veya miktarı 0 olanları (fiyatına bakılmaksızın) istemiş olduk.

engine=2 parametresine özel css çağırmak

http://sitem.com/search?q=ayakkabı&engine=1 şeklinde istek yapıldı diyelim.
istek yapılan sayfadaki parametreleri şu şekilde alabiliyorsunuz:
$engine = isset($_GET["engine"]) ? $_GET["engine"] : null;
Böylece eğer engine parametresi gelmişse değerini aldınız. Gelmediyse null aldınız.

CSS'i çağırdığınız yerde şöyle bir php kodu kullanabilirsiniz:

<?php if($engine && $engine=="2") { ?>
    <link rel="stylesheet" href="engine.css" />
<?php } ?>

Böylece eğer engine parametresi geldiyse ve değeri de 2 ise belli bir css dosyasını çağırmış olursunuz.

Eğer engine parametresinin varlığını sunucu taraflı değil istemci taraflı belirlemek ve stil dosyasını ona göre çağırmak istiyorsanız şöyle bir kod yardımcı olabilir:

// url'den parametreleri alan bir fonksiyon oluşturuyoruz.
function getUrlParameters() { 
    // url'deki parametre kısmını alıyoruz. Diyelim ki url şu: http://sitem/search?q=ayakkabı&engine=2
    let parameters = window.location.search; // Şu string'i elde ettik: "?q=ayakkabı&engine=2"
    
    // "?" karakterinden kurtuluyoruz:
    parameters = parameters.replace("?",""); // Şu string'i elde ettik: "q=ayakkabı&engine=2"
    
    // Eğer elimizde bi'şey kalmamışsa hiç parametre yok demektir. 
    if(parameters=='') return {}; // Eğer herhangi bir değer elde etmediysek fonksiyonumuz boş obje dönecek.
    
    // Elimizde kalan kısmı "&" karakterlerinden parçalıyoruz:
    parameters = parameters.split("&"); // Şu diziyi elde ettik: ["q=ayakkabı","engine=2"]
    
    // Fonksiyonumuzun döneceği objeyi boş halde oluşturuyoruz:
    const obj = {};
    
    // Sonra parameterelerimizi tek tek dönüyoruz:
    for(let i=0; i < parameters.length; i++) {
    
        // Şu an baktığımız parametre hangisiyse onu "=" karakterinden parçalıyoruz.
        const parameterParts = parameters[i].split("="); // Mesela i=0 için şunu elde ettik: ["q","ayakkabı"]
        
        const key = parameterParts[0];
        const value = parameterParts[1];
        
        // Bazen url'lerde aynı key'den 2 tane olabilir. Yani q=ayakkabı&engine=2&size=24&size=25&size=26 gibi olabilir.
        // Bu durumda size key'ine birkaç değer atanmak istenmiş diyebiliriz.
        // Haliyle bizim her bir key'imizin birkaç değeri olabileceği için değerleri dizi olarak tutmalıyız.
        // Eğer şu an baktığımız key daha önce hiç oluşturulmamışsa boş dizi olarak oluşturalım.
        if(!obj[key]) obj[key] = [];
        
        // Şimdi bu key'in değeri olan diziye değerimizi push edelim.
        obj[key].push(value); // Objemize şunu eklemiş olduk: { "q": ["ayakkabı"] }
    }
    
    // Döngü tamamlanınca obj değeri şöyle oldu: { "q":["ayakkabı"], "engine":["2"] }
    // Artık fonksiyonumuz sonucu döndürebilir:
    return obj;
}

Artık elimizde url'deki parametreleri alıp object haline getirebileceğimiz bir fonksiyonumuz var.
Bu fonksiyon ile parametreleri alalım ve engine değeri varsa ve değeri de 2 ise head tag'ına <link /> ekleyelim.

// Url'deki parametreleri object haline çevirerek alalım:
const urlParameters = getUrlParameters();

// Eğer parametrelerde "engine" diye bir key varsa ve bu key "2" değerini içeriyorsa işlemimizi yapacağız.
// Burada includes("2") dememizin nedeni, bir dizi içinde arama yapacak olmamız.
// Yani mesela şu istekte de bu if bloğu çalışır: "http://sitem/search?q=ayakkabı&engine=1&engine=2&engine=3"
if(urlParameters.engine && urlParameters.engine.includes("2")) {

    // <link /> elementimizi javascript ile oluştuyoruz:
    const link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = 'assets/css/engine2.css';
    
    // Oluşturduğumuz elementimizi DOM'a ekliyoruz:
    document.head.appendChild(link);
}