Back-end'in iyiyse ve front-end için birlikte çalışacak bir arkadaş bulamıyorsan hazır html temalarla devam edebilirsin. Bu hazır temaların back-end'e istek atması, back-end'den gelen yanıtları dom'a işlemesi vs. derken ufak ufak zaten front-end'e başlamış oluyorsun. Zamanla hazır tasarımdaki bazı yerleri değiştirmek isteyeceksin ve sonuçta ister istemez yeni kodlar ve yaklaşımlarla karşılaşmış olacaksın.
Yani tavsiyem, hazır temalar kullanarak back-end'inden bunlara veri sağlaman olur. Eğer baştan front-end'e girip a-z öğreneyim dersen tabi daha hoş olur ama vakit kaybedersin.
Her alanda uzmanlaşmana gerek yok. Back-end alanındaki derinliğini artırman, front-end hakkında da böyle lazım oldukça bi'şeyler öğrenmen daha iyi bir yol haritasıdır.
Dışarıdan iş aldığın küçük projelerde hazır temalar müşterini fazlasıyla memnun edecektir.
Maaşlı bir işe girdiğinde de (küçük veya vizyonsuz bir firma değilse) mutlaka front end - back end ayrımı yapılmıştır. Sen back-end'deki derinliğini artırdığında bu firmalarda iyi maaşlarla çalışırsın ve çok da derinlemesine front-end bilmen beklenmez çünkü front-end'in uzmanları zaten oradadır.
Ama diyorsan ki, "ben back-end'de ilerlemek istemiyorum, hoşlanmadım ve front-end bana daha zevkli geliyor." o zaman yine dışarıdan iş aldığında hazır temalar kullanmalı (zaman kaybetmemek ve farklı yaklaşımları görebilmek için) hem de bir yandan sıfırdan bir front-end projesinin nasıl geliştirilebileceğini öğrenmelisin. Bunun için de hem YouTube üzerinde hem Udemy üzerinde bolca eğitim var. Ücretsiz YouTube eğitimlerinden başlayıp gördüklerini kodlayarak ilerlemelisin. Ücretsiz eğtimler artık yetmemeye(mümkün değil) başlamışsa ücretli eğitimlere geçebilirsin.
Front-end'de uzmanlaşacağım diyorsan html, css, js ile bir arayüzün nasıl tasarlandığını aşağı yukarı anladıktan sonra React, Vue veya Angular gibi bir çatıya geçmen gerekir. JQuery'e kendini kaptırmamalısın çünkü iyi firmalar mutlaka bir framework kullanmaya çalışıyorlar. Henüz kullanmaya başlamamış olanlar da kullanmaya başlamanın planlarını yapıyorlar. İyi firmalarda front-end çatıları kullanımında piyasanın hakimi Türkiye'de şu an React. React ile proje geliştirmenin en iyi yolu da back-end'de NextJS kullanmak. Yani düz ReactJS ile proje geliştirmemelisin. Mutlaka arkasında NextJS olmalı.
Kısacası eğer front-end'de uzmanlaşmak istiyorsan temel bir html-css-js ile kodlama konseptini anladıktan sonra NextJS ile ReactJS kullanmanı öneririm.
Eğer front-end'de uzmanlaşmama gerek yok ben back-end'ciyim ama full-stack iş çıkarabilmek istiyorum diyorsan hazır html temaları kullanmalı ve back-end'de uzmanlaşmaya devam etmelisin. (Önerilen)
Teşekkürler @devepdogukan.
Evet, web üzerinde olsa kullanıcılar her şeyi manipule edebilirler. Diyelim ki bir şekilde mobil uygulamayı da web gibi manipüle edebiliyor olsunlar. O zaman web üzerinden örnek verelim.
Diyelim ki back-end kısmında PHP ile kod yazıyorum. Kendi yönettiğim başka bir ssl sertifikalı web servis sunucuma PHP ile istek atıp string haldeki kodları alıyorum. Bu kodları yine PHP tarafında eval() fonksiyonuyla çalıştırıyorum diyelim.
Yani isteği atan da alan da işleten de tamamen back-end kısmı.
Bu durumda PHP ile eval() kullanmamın sakıncası ne olabilir?
eval() tehlikeli bir komut. Ayrıca ben projemde eval'ın da uygun olmadığını daha güvenli başka yollar geliştirmek zorunda kaldım.
Yine de merak ediyorum. Web için back-end, mobil için uygulama içi (kullanıcıya gösterilmeyen) bölümde, eval fonksiyonuna yine kendime ait bir (ssl sertifikalı) web servis sunumumdan kendi yazdığım fonksiyonu gönderdiğimde nasıl bir sorunla karşılaşırım?
Yani kullanıcılar https sayesinde iki sunucum arasındaki iletişime dahil olamıyorlarsa başka nasıl eval() fonksiyonuma sızabilirler?
Bunun bir yolu, web servis barındıran sunucuma sızmaları olabilir. Böylece endpoint'imden döndürdüğüm fonksiyonu kendi fonksiyonuyla değiştirebilir.
Ama zaten web servisime sızıldıysa fonksiyonumu değiştirmekten çok daha fazlasını yapabilir. Yani servis sunucuma sızılması apayrı bir konu.
Peki başka nasıl eval()'a gönderdiğim değere müdahale edilebilirdi?
Reklam gibi olacak ama Türkiye'de gerçekten bu altyapıyı paylaşımlı hosting'lerde sunan firmalar yok. Hatta bazı firmaların altyapısı halen 10 yıldır geliştirilmeyen klasik ASP'ye dayanıyor gibi görünüyor.
İlle de Türk firması olsun ve Türkçe konuşarak destek alabileyim diyorsan istediğin tüm altyapıyı sağlayıp sağlamadığını öğrenmek için Cenuta ile iletişime geçebilirsin. Teknik destek konusunda hem hızlılar hem kaliteliler. Bazı firmalar gibi "sorun sizin kodunuzdadır" deyip kestirip atmıyorlar üstelik.
Gerçi yalan olmasın, ben de pek kullanmadım Cenuta'yı ama kısa süre incelediğim kadarıyla hoşuma gitti.
stackoverflow'daki bir örneğe dayanarak aşağıdaki çözümü deneyebilirsin:
<form action="" method="post">
<table id="table" class="table-sm">
<thead>
<tr>
<th>Yapılacak İşin Cinsi</th>
<th>Toplam Miktar</th>
<th>Birim</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="satir">
<td><input name="rows[0][cins]" type="text"></td>
<td><input name="rows[0][miktar]" type="text"></td>
<td><input name="rows[0][birim]" type="text"></td>
</tr>
<tr class="satir">
<td><input name="rows[1][cins]" type="text"></td>
<td><input name="rows[1][miktar]" type="text"></td>
<td><input name="rows[1][birim]" type="text"></td>
</tr>
<!--
Sınırsız sayıda satır eklenebilir.
Eklenen satırlardaki input'lara rows[2][cins], rows[3][cins]...
gibi farklı isimler vererek ekleyebiliyorum.
-->
</tbody>
</table>
<!-- Aşağıdaki input'a artık gerek yok -->
<input name="toplamSatir" value="2" type="text">
</form>
// $satirSayisi = $_POST["toplamSatir"]; // Artık gerek yok...
$satirSayisi = count($_POST["rows"]);
$rows = $_POST["rows"];
// Verilere ulaşım örneği:
$ilkSatir_cins = $rows[0]["cins"];
$ikinciSatir_miktar = $rows[1]["miktar"];
<input type="hidden" name="onaykodu" class="form-control">
bu input'un type'ı hidden olduğu için aslında hiç ekranda görünmüyor olmalı. İlk ajax isteğinden dönen sonuçta bu input'un içine bir değer atamıyor olabilirsin.
Eğer bu input'un değeri yoksa, post edilirken boş string olarak PHP'ye iletiliyordur.
Böylece islem.php dosyandaki if koşulun PHP için boş string kontrolüne dönüyor.
Yani if($_POST['onaykodu']) { => if("") { oluyor.
PHP için if koşulunda boş string ifadesi false kabul edilir. Yani bu bloğa hiç giremiyor olabilirsin.
Bunu anlamak için if bloğuna bir else ekleyip yanıt olarak şunu dönebilirsin:
else {
$data['status']="missing parameter";
$data['message']="onaykodu şu şekilde iletildi: '".$_POST['onaykodu']."'.";
}
istek attığında konsolunda aşağıdaki gibi bir response görüyorsan sorun bu demektir.
{
"status": "missing parameter",
"message: "onay kodu şu şekilde iletildi: ''."
}
Eğer durum buysa, onaykodu input'una değer ataman gerekiyordur.
Önemli: Önerilerimin projeyi iyice bozma ihtimaline karşı projenin yedeğini almayı unutma.
GitHub'da bu soruna yönelik şöyle bir cevap yazılmış
sudo xcode-select --switch /Applications/Xcode.app komutunu verdikten sonra terminali kapatıp yeni bir terminal aç ve cd ios ve pod install komutunu tekrar dene.
Kaynak: https://github.com/facebook/react-native/issues/25532
Başka bir sorun daha var
Şu uyarıyı çözebilirsin: warn Multiple Podfiles were found: ios/Podfile ... Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir".
Bu uyarıyı gidermek için projenin kök klasörüne react-native.config.js adlı bir dosya oluşturmalısın:
module.exports = {
project: {
ios: {
sourceDir: './ios',
},
},
};
Yeni bir React Native sürümüyse Ruby versiyon sorunu da olabilir.
Bunun haricinde bilgisayarındaki ruby versiyonun güncel olmayabilir.
React Native 0.71.3 sürümünün ruby'nin 2.7.6 versiyonunu kullandığı belirtiliyor: 0.71.3 için ruby versiyonu
rvm list komutuyla bilgisayarına yüklü ruby versiyonlarını görebilirsin.
Eğer 2.7.6 veya daha üst bir versiyonu yüklüyse rvm use ruby-2.7.6 --default komutunu (versiyon numarasına dikkat ederek) verebilirsin.
Yüklü değilse yüklemek için rvm install ruby-2.7.6 komutunu verebilirsin. Yükledikten sonra da rvm use ruby-2.7.6 --default diyerek versiyonu seçebilirsin.
Kök klasöründeki GemFile dosyasında örneğin ruby '>= 2.6.10' yazıyorsa bunu ruby '>= 2.7.6' olarak değiştirebilirsin.
Bunları yaptıktan sonra tekrar denersen belki sorun ortadan kalkar.
Mümkün değil. Tayfun Erbilen özellikle sorulan sorunun silinmemesi gerektiğini düşünüyor.
@yosemitesyo evet, belli bir sayfadan header ve footer'a veya include edeceğin sayfalara PHP değişkenleriyle veri aktarman mümkün ve oldukça basit. Buradaki temel mantığı anladığında bunu kolaylıkla yapabileceksin.
Bir örnek üzerinden adım adım gidelim.
1) C:/xampp/htdocs'a (yerel sunucunun kök dizinine) orneksitem.com adında bir klasör oluştur.
2) XAMPP Kontrol Paneli'ni aç ve Apache sunucunu başlat.
3) C:/xampp/htdocs/orneksitem.com klasörüne index.php adında bir dosya oluştur.
4) index.php dosyasına örnek bir html sayfa oluştur:
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sitem</title>
<meta charset="utf-8" />
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:Arial; font-size:13px; }
a { text-decoration:none; color:#c00; }
body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
body > header > img { height:50px; }
body > header > nav { display:flex; flex-direction:row; align-items:center; }
body > header > nav > a { display:block; padding:8px 16px; }
#content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
#content > p { text-align:center; }
body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>
</head>
<body>
<header>
<img src="images/logo.png" />
<nav>
<a href="anasayfa">Ana Sayfa</a>
<a href="ben-kimim">Ben Kimim?</a>
</nav>
</header>
<section id="content">
<h1>Ana Sayfa</h1>
<p>Şu an ana sayfadasın</p>
</section>
<footer>
Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
</footer>
</body>
</html>
5) C:/xampp/htdocs/orneksitem.com klasöründe ben-kimim.php adlı bir dosya da oluştur:
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sitem</title>
<meta charset="utf-8" />
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:Arial; font-size:13px; }
a { text-decoration:none; color:#c00; }
body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
body > header > img { height:50px; }
body > header > nav { display:flex; flex-direction:row; align-items:center; }
body > header > nav > a { display:block; padding:8px 16px; }
#content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
#content > p { text-align:center; }
body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>
</head>
<body>
<header>
<img src="images/logo.png" />
<nav>
<a href="anasayfa">Ana Sayfa</a>
<a href="ben-kimim">Ben Kimim?</a>
</nav>
</header>
<section id="content">
<h1>Ben Kimim?</h1>
<p>Kendimi tanıtan içeriklerim burada olacak</p>
</section>
<footer>
Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
</footer>
</body>
</html>
6) C:/xampp/htdocs/orneksitem.com klasörüne images adlı bir klasör oluştur ve içine logo.png adlı bir görsel koy.
7) Tarayıcında http://localhost/orneksitem.com adresine git. Böylece tarayıcın, yerel sunucunun içindeki orneksitem.com klasöründeki varsayılan dosyaları arayacak. index.html dosyası varsayılan bir dosya olduğu için Ana Sayfa başlıklı sayfa görüntülenecek.
8) Görüldüğü gibi 2 sayfada da ortak bölümler var. Bunları parçalara ayırarak yönetebilmek istiyoruz. <head> tag'ı için ayrı, <header> tag'ı için ayrı birer dosya oluşturacağız.
9) C:/xampp/htdocs/orneksitem.com klasörü içine bilesenler adlı bir klasör oluştur.
10) C:/xampp/htdocs/orneksitem.com/bilesenler klasörüne head.php adlı bir dosya oluştur ve içine index.php dosyasındaki <head> tag'ının içindekileri kopyala-yapıştır:
<title>Örnek Sitem</title>
<meta charset="utf-8" />
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:Arial; font-size:13px; }
a { text-decoration:none; color:#c00; }
body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
body > header > img { height:50px; }
body > header > nav { display:flex; flex-direction:row; align-items:center; }
body > header > nav > a { display:block; padding:8px 16px; }
#content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
#content > p { text-align:center; }
body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>
11) C:/xampp/htdocs/orneksitem.com/bilesenler klasörüne header.php dosyası ekle ve ana sayfadaki <header> tag'ını olduğu gibi buraya kopyala:
<header>
<img src="images/logo.png" />
<nav>
<a href="anasayfa">Ana Sayfa</a>
<a href="ben-kimim">Ben Kimim?</a>
</nav>
</header>
12) Şimdi index.php dosyasında ilgili yerleri silip PHP ile ilgili dosyaları içe aktar:
<!DOCTYPE html>
<html>
<head>
<?php include("bilesenler/head.php"); ?>
</head>
<body>
<?php include("bilesenler/header.php"); ?>
<section id="content">
<h1>Ana Sayfa</h1>
<p>Şu an ana sayfadasın</p>
</section>
<footer>
Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
</footer>
</body>
</html>
13) Aynısını ben-kimim.php için de yap:
<!DOCTYPE html>
<html>
<head>
<?php include("bilesenler/head.php"); ?>
</head>
<body>
<?php include("bilesenler/header.php"); ?>
<section id="content">
<h1>Ben Kimim?</h1>
<p>Kendimi tanıtan içeriklerim burada olacak</p>
</section>
<footer>
Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
</footer>
</body>
</html>
14) Böylece index ve ben-kimim sayfalarımız oldukça küçüldü ve ortak olan yerleri ilgili dosyalardan çekmiş oldular. Burada önemli nokta şu: PHP sayfayı satır satır ele alıyor. Önce index.php dosyasının ilk satırından okuyarak sayfayı oluşturmaya başlıyor. Satır satır indikten sonra <?php include("bilesenler/head.php"); ?> komutuyla karşılaşıyor. Bu PHP komutunu siliyor ve kendisine verilen dosyayı bulup içindekileri satır satır buraya yazıyor. Sonra bu sayfada kaldığı yerden sayfayı oluşturmaya devam ediyor. Aynı işi diğer include fonksiyonu için de yapıyor. Sayfayı oluşturmayı bitirdiğinde de tamamen PHP kodlarından arındırılmış bir çıktı elde ediyor ve bunu, sayfayı isteyen tarayıcıya gönderiyor.
15) Bu satır satır okuma olayı, bileşenlere veri gönderirken işimize yarayacak. Örneğin head.php dosyasındaki <title>Örnek Sitem</title> yazan satırda, biz hangi sayfadaysak o sayfanın adının yazmasını istiyoruz diyelim. Yani ana sayfada görüntülenecekse index.php dosyasından head.php dosyasına Ana Sayfa yazısını iletmeliyiz. Aynı şekilde ben-kimim.php sayfası oluşturulurken de head.php dosyasına Ben Kimim? ifadesini gönderelim. Bunun için PHP'nin değişkenlerinden yararlanacağız.
16) index.php dosyasının başına PHP tag'larımızı açalım (<?php ile başlar ve ?> ile biter. Bu arada yazan her şey PHP kodudur.) ile bir değişken oluşturalım:
<?php
$siteBasligi = "Ana Sayfa";
?>
<!DOCTYPE html>
<html>
<head>
<?php include("bilesenler/head.php"); ?>
</head>
<body>
<?php include("bilesenler/header.php"); ?>
<section id="content">
<h1>Ana Sayfa</h1>
<p>Şu an ana sayfadasın</p>
</section>
<footer>
Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
</footer>
</body>
</html>
17) Biz index.php dosyasının başında bir değişken oluşturduk. Satır satır okuyup head.php dosyasını sayfaya çağırdığında aslında head.php dosyasının içinde yazan her şeyi buraya yazmış gibi oldu. Bu durumda head.php ile, $sayfaBasligi değişkenine atadığımız değeri okuyabiliriz ve PHP'nin bu değişkendeki değeri ekrana yazmasını isteyebiliriz. Yani head.php dosyasını şu şekilde güncelleyebiliriz:
<title><?php echo $sayfaBasligi; ?></title>
<meta charset="utf-8" />
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:Arial; font-size:13px; }
a { text-decoration:none; color:#c00; }
body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
body > header > img { height:50px; }
body > header > nav { display:flex; flex-direction:row; align-items:center; }
body > header > nav > a { display:block; padding:8px 16px; }
#content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
#content > p { text-align:center; }
body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>
Burada PHP'nin echo komutunu kullanarak değişkendeki değeri komutu verdiğimiz yere yazmasını istedik. Sondaki ; karakteri komutun bittiğini belirtiyor. Bir PHP komutunun bittiğini PHP'ye bu şekilde ifade ediyoruz.
Eğer sadece bir değişkenin değerini ekrana basmak için PHP tag'ları açacaksak PHP'nin bize sunduğu daha kolay bir yol da var. Başlık satırı şöyle de olabilirdi:
<?php echo $sayfaBasligi; ?> yazan yere şu da yazılabilirdi: <?= $sayfaBasligi ?>
18) Evet, ana sayfadan head tag'ına veri iletebildik. Ama ben-kimim.php dosyasında $sayfaBasligi adlı bir değişken oluşturmadık. Bu yüzden ben-kimim sayfasını görüntülemek istersen ya "böyle bir değişken yok" diye hata alırsın ya da <title> tag'ında hiçbir şey yazmaz. Haliyle, head.php dosyasını include ettiğin her sayfada bu değişkeni aynı isimle oluşturman gerekir. Böylece ben-kimim.php dosyan şuna döner:
<!DOCTYPE html>
<html>
<head>
<?php $sayfaBasligi = "Ben Kimim?"; ?>
<?php include("bilesenler/head.php"); ?>
</head>
<body>
<?php include("bilesenler/head.php"); ?>
<section id="content">
<h1>Ben Kimim?</h1>
<p>Kendimi tanıtan içeriklerim burada olacak</p>
</section>
<footer>
Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
</footer>
</body>
</html>
19) Tabi bu tip bir sorundan kurtulmanın başka yolları da var. head.php dosyasında PHP'ye şunu söyleyebilirsin: "Eğer $sayfaBasligi diye bir değişken varsa ekrana bu değişkenin değerini yaz. Yoksa ekrana 'Örnek Sitem' yaz."
Böyle bir kontrol koyduğunda, mesela yarın iletisim.php dosyası oluşturup head.php dosyasını buraya çağırdığında bu değişkeni yazmayı unutsan bile site başlığında Örnek Sitem yazacaktır. Tabi işte böyle böyle PHP dünyasına girmiş oluyorsun... Son olarak head.php dosyasında bu kontrolü nasıl yapacağını da yazıp bitireyim. JS kullanıyorsan if-else yapısını bilirsin. Bilmiyorsan da şimdilik çok üstünde durmana gerek yok. İşte head.php dosyanın son hali:
<title>
<?php
if(isset($sayfaBasligi)) { // Eğer $sayfaBasligi diye bir değişken varsa bu parantezlerin içindeki komutları çalıştır
echo $sayfaBasligi; // Ekrana $sayfaBasligi değişkenine atanmış değeri yaz.
}
else { // Aksi halde bu parantezlerin içindeki komutları çalıştır...
echo "Örnek Sitem" // Ekrana Örnek Sitem ifadesini bas.
}
?>
</title>
<meta charset="utf-8" />
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:Arial; font-size:13px; }
a { text-decoration:none; color:#c00; }
body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
body > header > img { height:50px; }
body > header > nav { display:flex; flex-direction:row; align-items:center; }
body > header > nav > a { display:block; padding:8px 16px; }
#content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
#content > p { text-align:center; }
body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>
PHP kullanırsan sitenin header, footer gibi bölümlerini ayrı dosyalara ayırabilir ve sayfalarına bu dosyaları çağırabilirsin. Böylece bu dosyalarda yaptığın değişiklikler tüm sayfalara uygulanmış olur.
Örneğin:
header.php:
<header>
<img src="logo.png" />
<nav>
<a>Anasayfa</a>
<a>Hakkımızda</a>
<a>İletişim</a>
</nav>
</header>
footer.php:
<footer>
<nav>
<a>Sıkça Sorulan Sorular</a>
<a>Bilgilendirme Metni</a>
<a>Telefon: +90 123 456 78 90</a>
<a>E-posta: [email protected]</a>
</nav>
</footer>
Tüm sayfalarda aynı olan header ve footer bölümlerini bu şekilde 2 dosyaya ayırdım. Şimdi bu header ve footer'a sahip sayfalarımda header ve footer gelen yerleri silip yerlerine bu dosyaları çağırabilirim.
anasayfa.php
<html>
<head>
<title>Ana Sayfa</title>
</head>
<body>
<?php include("header.php"); ?>
<section id="content">
<h1>Merhaba Dünya</h1>
<p>Burası ana sayfanın içeriği</p>
</section>
<?php include("footer.php"); ?>
</body>
</html>
Aynı şekilde hakkımızda sayfası:
hakkimizda.php
<html>
<head>
<title>Hakkımızda</title>
</head>
<body>
<?php include("header.php"); ?>
<section id="content">
<img src="hakkimizda-banner.png" />
<h1>Biz Kimiz?</h1>
<p>lorem ipsum dolor sit amet</p>
</section>
<?php include("footer.php"); ?>
</body>
</html>
Böylece hem sayfalarda koca koca yer tutan header ve footer kısımlarını birer satıra indirmiş olduk, hem de mesela header.php dosyasında yapacağımız bir değişikliği bu dosyanın çağırıldığı tüm sayfalarda aktif edebiliyor olduk.
Son kullanıcı sayfa kaynağını görüntülediğinde PHP kodlarını görmez. Çünkü sunucu, sayfayı son kullanıcıya göndermeden önce dosyaları birleştirir. Yani son kullanıcı mesela ana sayfanın kaynağını görüntülemek istediğinde şununla karşılaşır:
<html>
<head>
<title>Ana Sayfa</title>
</head>
<body>
<header>
<img src="logo.png" />
<nav>
<a>Anasayfa</a>
<a>Hakkımızda</a>
<a>İletişim</a>
</nav>
</header>
<section id="content">
<h1>Merhaba Dünya</h1>
<p>Burası ana sayfanın içeriği</p>
</section>
<footer>
<nav>
<a>Sıkça Sorulan Sorular</a>
<a>Bilgilendirme Metni</a>
<a>Telefon: +90 123 456 78 90</a>
<a>E-posta: [email protected]</a>
</nav>
</footer>
</body>
</html>
Böylece bir back-end dili olarak PHP'ye de giriş yapmış olursun.
PHP'yi kurmak da öğrenmek de (diğer back-end dillerine göre) kolaydır.
1) https://www.apachefriends.org/tr adresinden bilgisayarına XAMPP'i kurarsın. Kurulumda yardımcı olması için şu videonun ilk 2 dakikasını da izleyebilirsin: https://www.youtube.com/watch?v=mg-588VDyuI
2) XAMPP kontrol panelinden Apache sunucusunu aktif ettiğinde artık bilgisayarın bir sunucu haline gelir.
3) C:/xampp/htdocs senin sunucunun kök klasörü. Web sitelerini burada barındıracaksın. Buraya mesela testsitem diye bir klasör aç. İçine de, senin üzerinde çalıştığın web sitesinin html/css/js dosyalarını at.
4) Tarayıcını açıp localhost/testsitem adresine gittiğinde html web sitenin dosyalarına erişebildiğini göreceksin. (Varsayılan olarak index.html sayfası açılacaktır)
5) Tüm html uzantılı sayfalarının uzantılarını php olarak değiştir. Örn: index.html > index.php olsun.
6) Tüm sayfalardaki linkleri de yeni dosya adına göre düzenlemen gekerecek. Örn: <a href="hakkimizda.html">Hakkımızda</a> link'i, dosya uzantısı değiştiği için dosyayı bulamayacaktır. Buradaki html uzantısını da php olarak değiştir.
Böylece web siten tamamen PHP alt yapısına taşınmış oldu. Bundan sonraki tüm web sitelerini bu htdocs klasörü altında klasörler açarak geliştirebilirsin. Yukarıda verdiğim örnekteki gibi siteni bileşenlerine ayırıp birleştirebilirsin.
Başlangıçta bunlar "ooo çok iş" dedirtebilir. Ama 1-2 projende ısrar edip PHP kullanırsan aslında işini çok rahatlattığını göreceksin. Derinlemesine PHP bilmede de gerek yok. Aslında tek kullandığın komut <?php include("header.php") ?> şeklindeki tek satırlık komut.
Not: Sen PHP'yi hiç kullanmamış olabilirsin veya PHP'yi iyi biliyor da olabilirsin. Ben bu konuda soru işaretleri olanlara fikir vermek için bu kadar ayrıntılı bir cevap yazıyorum. :)
Vue, React gibi bir yapı kullanmak basit projelerde yorucu olur çünkü modüllerin internetten inmesini beklemek, güncellenen sürümlerin henüz güncellenmemişlerle uyumsuzluğu, projenin çalışmak için derlenmeye ihtiyaç duyması...
Bilgisayarına apache sunucusu kurarak php ile site geliştirmek her türlü bilgisayarına nodejs sunucusu kurup react ile site geliştirmekten daha kolay ve hızlıdır.
Sen de muhtemelen birbiriyle pek benzerliği olmayan farklı farklı siteleri hızlıca geliştirebilmek/düzenleyebilmek istiyorsun. Önerim: PHP.
Tabi tüm dosya uzantılarındaki ve dosya içeriklerindeki html'nin php'ye çevrilmesi zaman alıcı. Ama PHP'de biraz ilerlersen veya Chat GPT'den yardım alırsan bu değişikliği senin için otomatik olarak yapan bir php dosyası oluşturabilirsin. :) Bu dosyayı çağırdığında PHP senin için tüm dosya uzantılarını ve linkerde geçen .html ifadelerini php'ye çevirir. Nitekim, PHP candır. :)
Bu liste oluşturulurken de bu işlem yapılabilir, oluşturulduktan sonra da yapılabilir.
Ben oluşturuluktan sonra, yani DOM'a yukarıdaki ul (ve içindekiler) eklendikten sonra çalıştırılacak bir kod örneği vereceğim.
// 1) Öncelikle ul'yi seçelim.
const $list = $('ul'); // daha ayrıntılı bir seçici kullanmak gerek tabi...
// 2) ul içindeki li'leri de seçelim.
const $listItems = $list.find('li');
// 3) Tüm li'leri dönerek incelememiz gerekecek:
$listItems.each(function (index, element) {
// 3.1) Şu an baktığımız li elementini seçelim.
const $item = $(element);
// 3.2) Bu li elementinin içindeki ilk span elementini seçelim.
const $firstSpan = $item.find('span').first();
// 3.3) Bu span elementinin "title" class'ı var mı?
const isFirstSpanTitle = $firstSpan.hasClass('title');
// 3.4) Eğer title class'ı yoksa...
if(!isFirstSpanTitle) {
// 3.4.1) Baktığımız li elementinin data-id attribute'sini alalım.
const dataId = $item.attr('data-id');
// 3.4.2) Baktığımız li elementinin ilk elementi olarak BAŞLIK yazan, title class'ına sahip span'ımızı ekleyelim.
$item.prepend(`<span class="title" data-id="${dataId}">BAŞLIK</span>`);
}
});
Bu işlemleri tekrarlama ihtimaline karşı bunları bir fonksiyon haline getirmek daha uygun olacak:
// Fonksiyonumuz ul seçicisini ve başlık olarak yazılacak string'i parametrelerden alsın.
const fixTheList = (ulSelector, title="BAŞLIK") => {
// yukarıda yazdığım kodların aynısını ekliyorum.
// Fark sadece parametreden gelen değerlerin yerlerine yazılması...
const $list = $(ulSelector);
const $listItems = $list.find('li');
$listItems.each(function (index, element) {
const $item = $(element);
const $firstSpan = $item.find('span').first();
const isFirstSpanTitle = $firstSpan.hasClass('title');
if(!isFirstSpanTitle) {
const dataId = $item.attr('data-id');
$item.prepend(`<span class="title" data-id="${dataId}">${title}</span>`);
}
}
Bu fonksiyonu, ul elementi DOM'a eklendikten sonra çalıştırırsan title class'ına sahip span'ı olmayan tüm li elementlerine ilk element olarak bu span'ı ekler.
Fonksiyonu şu şekilde kullanabilirsin:
fixTheList('ul', "SONRADAN EKLENEN BAŞLIK");
Not: Kodları denemeden yazdım. Hatalı yazdığım yerler olabilir.