PHP ile kolaylıkla fotoğraf albümü oluşturabilirsiniz Fotoğraf düzenlemek için gerekli tüm araçlar mevcut Adım adım anlatımlarla, albümünüzü oluşturmak artık çok daha kolay!

Bu makalede, PHP kullanarak basit ama etkili bir fotoğraf albümü oluşturmanın birkaç yolunu ele alacağız. Fotoğraf albümleri, özellikle sosyal medya platformlarında popülerdir ve web sitenizde de kullanıcılarınızın fotoğrafları ve yükledikleri resimler hakkında bilgi edinmelerini sağlar.

İlk adımımız, bir klasördeki dosyaları PHP ile listelemek ve görüntülemek olacak. Daha sonra Bootstrap kullanarak basit bir albüm tasarlamayı öğreneceksiniz. Bootstrap, modern web tasarımının temellerini oluşturan birçok özellik sunar ve fotoğraf albümümüzde harika görünmesini sağlar.

Ayrıca, albümünüzü daha da güzelleştirmek için bazı özel ipuçları kullanabileceksiniz. Renk tasarımı ve Dowsize adlı kütüphane gibi özellikler, albümünuzu kullanıcı dostu ve harika bir şekilde göstermenizi sağlar. Galeri iskeleti oluşturma ve basit bir filtreleme işlevselliği eklemek için PHP ve jQuery kullanmayı öğreneceksiniz.

En son olarak, fotoğraf albümünüze yeni fotoğraflar eklemek için PHP ve AJAX kullanarak kodlama yöntemlerini öğreneceksiniz. AJAX yüklemesi için form oluşturarak ve resim dosyalarını yönetmek için PHP kodunu kullanacaksınız. Bu adımları takip ederek, PHP kullanarak harika bir fotoğraf albümü oluşturabilirsiniz.

1. PHP ile Dosyaları Yönetmek

Bir klasördeki dosyaları PHP ile listelemek ve görüntülemek, web geliştirme projelerinde oldukça yararlı bir beceridir. Bu işlemi başarmak için birkaç yöntem bulunmaktadır. İlk olarak, dosyaları açıp okuyabilen opendir() ve readdir() fonksiyonları kullanılabilir. Bu yöntemde, klasördeki her dosya tek tek okunur ve echo fonksiyonu kullanılarak ekrana yazdırılır.

Bir diğer yöntem ise PHP'nin glob() fonksiyonudur. Bu fonksiyon, belirtilen kalıptaki dosyaları eşleştirir ve bir dizi olarak döndürür. Dizideki her bir öğe, dosya adının tamamını içerir. Bu yöntem, klasördeki belirli türdeki dosyaları filtrelemek için oldukça yararlıdır. Örneğin, sadece .jpg uzantılı dosyaları filtreleyebilirsiniz.

İşlemler sırasında, listelenen dosyaların sıralamasını belirlemek de mümkündür. Bunun için, PHP'nin sort() fonksiyonu kullanılabilir. Bu fonksiyon, bir dizideki öğeleri sıralar. Dosyaların sıralanma şeklini belirlemek için, fonksiyona sıralama türü olarak SORT_ASC ya da SORT_DESC argümanlarını vermek yeterlidir.

Bir klasöre ait dosyaları listelemenin yanı sıra, dosyaların ek bilgilerini de görüntülemek mümkündür. Örneğin, dosyanın boyutunu ve oluşturulma tarihini göstermek isteyebilirsiniz. Bu bilgilere ulaşmak için, PHP'nin filesize() ve filemtime() fonksiyonları kullanılır. Bunlar, sırasıyla dosyanın boyutunu ve son değişiklik tarihini döndürürler.

2. Bootstrap Kullanarak Albüm Tasarlamak

Bootstrap, web siteleri için en popüler HTML, CSS ve JS kütüphanelerinden biridir. Fotoğraf albümü tasarlamak için de oldukça kullanışlıdır. İşte basit bir albüm tasarlamak için adımlar:

• Öncelikle, Bootstrap kütüphanesini web sayfasına ekleyin.

CDN	İndirme
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>	<link rel="stylesheet" href="dosya_yolu/bootstrap.min.css"> <script src="dosya_yolu/bootstrap.min.js"></script>

• Şimdi, birkaç küçük stil değişikliği yaparak albüme daha güzel bir görünüm kazandırabilirsiniz.
• Albüm için birkaç fotoğraf seçin ve bunları belirli bir klasöre yükleyin.
• Bootstrap'in img-thumbnail sınıfını kullanarak fotoğrafı albümde öldürün.

Bu adımlar sayesinde basit bir fotoğraf albümü tasarlayabilirsiniz. Ancak, albümün daha güzel ve profesyonel görünebilmesi için birkaç ek özellik eklemek isteyebilirsiniz.

2.1 Albümü Daha İyi Görünümlü Hale Getirmek

Bootstrap, fotoğraf albümünüzü dahası kullanıcı dostu bir şekilde güzelleştirmenize yardımcı olabilir. İşte, Bootstrap kullanarak albümünüzü daha da iyi görünümlü hale getirmek için bazı ipuçları:

• Kullanıcı Arayüzü: Albümün kullanıcı arayüzü, etkili bir kullanıcı deneyimi sağlamak açısından oldukça önemlidir. Bootstrap ile, albümünüzü özelleştirerek daha iyi bir arayüz oluşturabilirsiniz.
• Renk Tasarımı: Renk, kullanıcıların albümü daha kolay anlamalarına yardımcı olur ve etkileşimlerini artırır. Bootstrap ile, albümünüze uygun renkler seçerek kullanıcı dostu bir tasarım oluşturabilirsiniz.
• Font Seçimi: Font, albümünüzün görsel estetiği için oldukça önemlidir. İyi seçilmiş bir font, kullanıcıların albümünüzü daha okunaklı ve daha cazip hale getirir.

Bu ipuçları, albümünüzü daha iyi görüntülemek ve daha kullanıcı dostu hale getirmek için kullanılabilir. Bootstrap, web sayfaları ve uygulamaları oluştururken, kullanıcı deneyimini sağlamak için özellikler sunar. Bootstrap ile uyumlu bir şekilde tasarlanmış fotoğraf albümü, kullanıcıların etkileşimini arttıracak ve daha hoş bir deneyim yaşamalarını sağlayacaktır.

2.1.1 Renk Tasarımı Eklemek

Fotoğraf albümü, kullanıcıların fotoğraflarını örgüleme ve paylaşmalarını sağlayan dijital bir araçtır. Albüme renk ekleyerek, kullanıcılar için daha çekici ve keyifli bir kullanıcı deneyimi yaratabilirsiniz. Bootstrap kullanarak albümün tasarımını daha güzel ve şık hale getirmek için kullanabileceğiniz birkaç renk yöntemi vardır.

Bootstrap, birçok önceden oluşturulmuş CSS stillerini ve renk paletlerini birleştirir, böylece CSS kodunu ellerinizle yazmanız gerekmez. Bu, renklerin hızlı bir şekilde değiştirilmesine olanak tanır ve bu da albümün genel tasarımının daha kolay bir şekilde ayarlanmasına yardımcı olur. Öncelikle, siteye harika bir görsel efekt eklemek için CSS'te background-image yöntemini ekleyebilirsiniz.

background-color	Renk tonların değiştirilmesi için kullanılır
background-image	Belirli bir resmi veya tasarımı arka plan olarak kullanmak için kullanılır
background-position	Arka plan resminin belirtilen koordinatlarda düzenlenmesini sağlar

İkinci olarak, Bootstrap'taki renkli etiketler aracılığıyla albüme renk ekleyebilirsiniz. Örneğin, kırmızı bir etiket için:

• Kırmızı

Bunun gibi bir etiket, albümünüzdeki göz alıcı resimlerin yanında harika bir etki yaratabilir ve kullanıcıları fotoğraflara ilgi çekici kılar.

Son olarak, Bootstrap'in düğme öğeleri kullanılarak albüme renk eklenebilir. Bu, düğmelerin üzerindeki metnin rengini değiştirmek ve albümdeki butonların daha kullanışlı hale getirilmesini sağlamak içindir. Bir örnek kod şu şekildedir:

.btn-primary	Mavi
.btn-success	Yeşil
.btn-warning	Kırmızı

Renk, fotoğraf albümünün sadece görsel bir özelliği değil, aynı zamanda kullanıcıların albümde web sitelerinde bulunamayacak bir deneyim yaşamasına olanak tanır. Renklerinizi doğru kullanarak, albümünüzde iyi bir etki bırakabilir ve kullanıcı deneyimini artırabilirsiniz.

2.1.2 Resimleri Daha İyi Görüntülemek İçin Dowsize Adlı Kütüphaneyi Kullanmak

Bir fotoğraf albümünün görsel tasarımı kadar, resimleri albümde nasıl gösterdiğiniz de oldukça önemli bir etkendir. Dowsize adlı kütüphane resimleri önceden boyutlandırarak, albümde daha iyi görüntülemenizi sağlar.

Dowsize kütüphanesi ile resimleri boyutlandırmak oldukça kolaydır. İlk olarak, kütüphane dosyalarını sisteminize indirin ve proje dizininize kayak buradan yapıştırın. Daha sonra, PHP kodunuzda Dowsize kütüphanesini projenize dahil edebilirsiniz.

Bir fotoğraf albümünde, resimlerin yüksek çözünürlüklü olması kullanıcı deneyimi açısından önemlidir. Ancak, yüksek çözünürlüklü resimler daha büyük boyutta olduğu için, albümün yavaş çalışmasına neden olabilirler. Dowsize kütüphanesi, resimleri önceden boyutlandırarak yüklenme hızını artırır ve performansı optimize eder.

Dowsize kütüphanesini kullanarak, resim boyutlarını önceden belirleyebilirsiniz. Böylece, resimler albüme yüklendiğinde boyutları otomatik olarak ayarlanır ve albüm sayfasının yükleme hızı iyileştirilir. Bu sayede, kullanıcılar albümde daha hızlı bir gezinme deneyimi yaşarlar.

Dowsize kütüphanesi, kullanıcıların albüm sayfasını hızlandırırken, resim kalitesini de yüksek tutmayı hedefler. Bu sayede, fotoğraflarınız daha iyi bir şekilde görüntülenir ve kullanıcılar albümünüzde daha uzun süre kalırlar.

2.2 Galeri Iskeleti Oluşturmak

Bootstrap kullanarak fotoğraf albümü için bir galeri iskeleti oluşturmak oldukça kolaydır. İlk önce HTML sayfamızda bir div elemanı oluşturarak içerisine class='row' atayın. Ardından fotoğraf albümünüzdeki her bir fotoğraf için bir div elemanı oluşturun ve bu elemanlara class='col-md-3 col-sm-6 mb-3' özelliklerini verin. Bu özellikler, galeri elemanlarının ekran boyutlarına göre nasıl görüntüleneceğini belirler.

Her bir fotoğrafın içerisinde bir img etiketi yer almalıdır. Bu etiketlere src özelliği vererek her bir fotoğrafın yolunu belirleyin. Ayrıca class='img-fluid' özelliği atamanız, fotoğrafların ekran boyutuna göre nasıl uyumlu hale getirileceğini belirleyecektir.

Bootstrap, galeri elemanları arasında bir boşluk bırakmak için mb-3 özelliğini kullanır. Bu özellik, her bir eleman arasına 3 piksellik bir boşluk bırakır. Eğer bu boşluğu değiştirmeniz gerekiyorsa, CSS dosyanızda özelleştirme yapabilirsiniz.

Bir galeri iskeleti oluşturmak oldukça basit olduğu gibi, yapılabilecek özelleştirmeler sınırsızdır. İsterseniz galeri elemanlarına hover efektleri ekleyebilir, isterseniz farklı boyutlarda elemanlar oluşturabilirsiniz. Bootstrap, özelleştirmeler için size bolca seçenek sunar.

3. PHP ve jQuery Kullanarak Filtreleme Yapmak

Fotoğraf albümünüzdeki çok sayıda fotoğraf arasında kaybolmanın önlenebilmesi için, albümünüze filtreleme işlevi eklemek isteyebilirsiniz. Bu işlevsellik, kullanıcıların albümdeki kategorilere, tarih aralıklarına göre veya belirli anahtar kelimeleri kullanarak arama yapmasına olanak tanır. Bu sayede kullanıcılar, istedikleri fotoğrafı daha hızlı ve kolay bir şekilde bulabilirler.

PHP ve jQuery kullanarak bu özelliği eklemek oldukça kolaydır. İlk olarak, PHP kodu kullanarak albümde hangi kategorilerin olacağına ve fotoğrafları nasıl sınıflandıracağınıza karar vermeniz gerekiyor. Daha sonra, jQuery kullanarak kullanıcıların filtre yapmasına olanak tanıyacak bir arayüz tasarlayabilirsiniz.

Bir albümde filtreleme yapmak için, PHP kodu ve jQuery kodunu birlikte kullanmanız gerekmektedir. Örneğin, kullanıcının bir filtre uygulamasını seçmesi için bir form oluşturabilirsiniz. Bu form, kullanıcıların tarih aralığı, anahtar kelime veya kategorilerde arama yapabileceği alanları içerebilir.

Bu formda, kullanıcının seçimlerini beklemek üzere bir submit düğmesi ekleyebilirsiniz. Submit düğmesine tıklandığında, jQuery kodu, kullanıcının seçimlerine göre filtrelenmiş olan resimleri gösteren yeniden yükleme işlemini gerçekleştirir.

Bu işlevsellik, albümünüzdeki fotoğrafların size ve kullanıcılara daha kolay erişilebilir hale gelmesini sağlar. Bununla birlikte, filtre işlevi eklenirken, tasarımın da iyi düşünülmesi önemlidir. Kullanıcıların aradıklarını daha kolay bulmaları için arayüzün kullanıcı dostu ve sezgisel olması gerekir.

3.1 Filtrasyon Fonsiyonları Ekleme

Albümden filtreleme yapabilmeniz için birkaç kodlama yöntemi vardır. Bunlardan ilki, sadece belirli bir klasördeki resimleri filtrelemenizi sağlayan bir kodlama yöntemidir. Bu yöntemi kullanarak belirli bir kelime içeren veya belirli bir tarihten sonra oluşturulan resimleri filtreleyebilirsiniz. Bu yöntem kodlara şu şekilde entegre edilir:

    $klasor = 'resimler/';    $dizin = opendir($klasor);
    while (($dosya = readdir($dizin)) !== false) {        if (strpos($dosya, $aranan_kelime) !== false && filemtime($klasor.$dosya) > $tarih) {            echo '<img src="'.$klasor.$dosya.'">';        }    }
    closedir($dizin);

Bu kodlar ile istediğiniz kelimeyi veya tarihten sonrası oluşturulan resimleri filtreleyebilirsiniz.

İkinci bir yöntem ise, resimlerin özelliklerine göre filtreleme yapmanıza olanak sağlar. Bu yöntem için ise, öncelikle resimlerin özelliklerini almanız gerekir. Bunun için de Dowsize kütüphanesini kullanabilirsiniz. Bu kütüphane ile resimlerin genişliği, yüksekliği, boyutu gibi özellikleri alabilirsiniz. Örneğin, aşağıdaki kodlar ile belirli bir genişliğin altında olan resimleri filtreleyebilirsiniz:

    $klasor = 'resimler/';    $dizin = opendir($klasor);
    while (($dosya = readdir($dizin)) !== false) {        $ds = new Dowsize($klasor.$dosya);        $ozellikler = $ds->get();        if ($ozellikler['width'] < $max_genislik) {            echo '<img src="'.$klasor.$dosya.'">';        }    }
    closedir($dizin);

Bu kodları kullanarak resimlerin genişlik, yükseklik vb. özellikleri ile filtreleme yapabilirsiniz.

3.2 Kullanıcı Ara Yüzü

Albümün kullanıcı arayüzüne filtreleme düğmeleri eklemek, kullanıcılara albümde daha rahat bir gezinim deneyimi sunmanızı sağlar. Bu işlemi gerçekleştirmek için öncelikle albümde filtreleme işlemini yapacak olan düğmelere ihtiyacımız var.

Bootstrap'ta varsayılan olarak kullanabileceğimiz bir düğme stilini kullanacağız. Bu düğmelerin her birine bir ID vereceğiz ve sırayla albümde filtreleme işlevselimlerini gerçekleştirmemizi sağlayacak kodlar yazacağız.

İlk olarak, HTML kodumuzda bir düğme grubu oluşturmak için div etiketini kullanacağız. Bu düğme grubuna class özelliği atayacağız ve bu özellikle daha sonra CSS kodumuzda stil tanımlayacağız. Ayrıca, her düğmemize bir ID atayacağız.

HTML Kodumuz
<div class="btn-group">
<button type="button" id="tumunu-goster" class="btn btn-default active">Tümünü Göster</button>
<button type="button" id="dogada-cikanlar" class="btn btn-default">Doğada Çıkanlar</button>
<button type="button" id="sehirden-goruntuler" class="btn btn-default">Şehirden Görüntüler</button>
<button type="button" id="tatil-fotograflari" class="btn btn-default">Tatil Fotoğrafları</button>
</div>

Bu HTML koduyla, dört düğmeden oluşan bir düğme grubu oluşturduk. İlk düğmemizi varsayılan olarak active durumda tanımladık ki albüm yüklendiğinde tüm fotoğrafları görüntülesin. Geri kalan düğmeler varsayılan olarak pasif durumda kalacak.

Şimdi jQuery kullanarak bu düğmelerin nasıl çalışacağını belirleyeceğiz. JavaScript kodumuzda, butonlara tıklandığında ne olacağını belirleyeceğiz. Örneğin, "Doğada Çıkanlar" butonuna tıklandığında, sadece "img/nature" klasöründeki resimlerin görüntülendiği bir filtre oluşturacağız.

jQuery Kodumuz
$('button').click(function() {
if ($(this).attr('id') == 'tumunu-goster') {
$('img').show();
} else if ($(this).attr('id') == 'dogada-cikanlar') {
$('img').hide();
$('img[src*="img/nature"]').show();
} else if ($(this).attr('id') == 'sehirden-goruntuler') {
$('img').hide();
$('img[src*="img/city"]').show();
} else if ($(this).attr('id') == 'tatil-fotograflari') {
$('img').hide();
$('img[src*="img/holiday"]').show();
});

Bu kod, butonlara tıklandığında filtreleme işlevselliğini sağlar. Albümdeki resimlerin src özelliklerine göre filtrelenmesini sağlar. İlk buton seçildiğinde tüm resimler gösterilirken, diğer butonlar seçildiğinde sadece belirli klasördeki resimler gösterilir. Bu işlem sayesinde, kullanıcıların sadece belirli bir konuda görsel olarak aradığı fotoğraflara ulaşması sağlanır.

4. PHP ve AJAX Kullanarak Yeni Fotoğraf Yüklemek

PHP ve AJAX kullanarak, kullanıcıların albüme yeni fotoğraflar eklemesine olanak tanıyan bir kodlama yöntemi vardır. Bu yöntem, kullanıcıların web sayfasını yenilemesine gerek kalmadan, fotoğraflarını yüklemelerine izin verir.

AJAX yüklemesi için form oluşturmak gereklidir. Form, kullanıcının fotoğraf seçmesi için gerekli elementleri içermelidir. Form, kullanıcının yüklemek istediği fotoğrafın adını almak için bir dosya giriş alanı içermelidir. Fotoğraf yükleme işlemi tamamlandığında, form onay sayfasına yönlendirilmelidir.

Resim dosyalarının yönetimi de önemlidir. Yeni yüklenen fotoğrafların her biri, önceden belirlenmiş bir klasöre kaydedilir. Bu klasördeki dosyaların listesi, galeri sayfasında gösterilir. Dosya isimlerine göre sıralama veya son eklenen dosyaların gösterimi gibi özellikler, PHP kodunda belirlenmiştir.

Özetle, PHP ve AJAX kullanarak kullanıcıların yeni fotoğraflar yüklemelerine olanak tanıyan bir fotoğraf albümü oluşturma becerisi oldukça önemlidir. Yüklenen dosyaların resim dosyası yönetimi de dikkatle düzenlenmelidir. Bu sayede her bir kullanıcının fotoğraf albümü kişisel tarzına uygun hale getirilir.

4.1 AJAX Yüklemesi İçin Form Oluşturma

Yeni fotoğraf yükleme işlemi için bir form oluşturmak kolaydır. Öncelikle, HTML <form> etiketini kullanarak bir form oluşturun. Form içinde gerekli alanları ekleyebilirsiniz. En önemli alanlardan ikisi fotoğraf adı ve fotoğraf dosyasıdır. Bunları <input> etiketi ile ekleyebilirsiniz.

Birinci <input> etiketi, kullanıcıların fotoğraf adını yazabileceği bir metin kutusu içermelidir. İkinci <input> etiketi, dosya seçme özelliği olan bir düğme içermelidir. Bu kullanıcıların bilgisayarlarından fotoğraf yüklemelerini sağlayacaktır.

Bir kez formu oluşturduktan sonra, jQuery AJAX işlevini kullanarak formu sunucuya yüklenmek üzere göndermeniz gerekir. AJAX, sayfayı yenilemeden sunucudan veri almanın bir yoludur. Bunlar, işlevi yalnızca birkaç satırlık kod ekleyerek yapabilirsiniz.

JQuery AJAX fonksiyonunu kullanarak, formu sunucuya gönderebilir ve yanıtı hızlı bir şekilde alabilirsiniz. Aldığınız yanıtlar, dosyanın başarılı yüklenip yüklenemediği veya hata mesajı gibi şeyler olabilir.

Kodunuzun çalışması için, fotoğraf yükleme formu da işin içine dahil edildiğinde, bir sunucu tarafı betiği yazmanız gerekir. Bu betik, sunucuya form bilgilerini almak, fotoğrafı yüklemek ve yanıtı geri döndürmek için gereklidir. The file uploading process is handled by PHP. Form bilgileri ve dosya, JavaScript AJAX fonksiyonu tarafından sunucuya post edilmelidir.

Bir fotoğraf yükleme işlevi eklemek, kullanıcılara albüme kendi fotoğraflarını eklemeleri için daha fazla esneklik sağlar. Bu özellikler için gerekli kodlama yöntemlerini kullanarak, sitenizi daha etkileşimli hale getirebilirsiniz.

4.1 Resim Dosyalarını Yönetme Yolları

Fotoğraf albümü oluştururken, kullanıcıların albüme yeni fotoğraflar ekleyebileceği bir özellik eklemek son derece önemlidir. Bu özellik sayesinde albümünüz kullanıcılara daha çekici ve interaktif bir hal alır. Fotoğraf yükleme işlemi tamamlandığında, resim dosyalarını yönetmek için bazı kodlama yöntemleri gereklidir.

Öncelikle, yüklenen resim dosyaları bir klasörde saklanabilir. Bu klasör, albümünüzde görüntülenen tüm resimleri içerecektir. Ayrıca, özellikle eğer kullanıcılar çeşitli resim dosyaları yüklüyorsa, her zaman bir düzenleme yapmak isteyebilirsiniz. Bu noktada, dosya adlarını kullanarak resimleri kolayca yönetebilirsiniz.

Ayrıca, yüklenen resim dosyalarının boyutunu yönetmek de önemlidir. Özellikle büyük boyutlu resimler, sayfaların yavaş yüklenmesine neden olabilir. Bu durumda, resimleri boyutlandırarak ve kalitesini düşürmeden küçültmek gerekir. Bunun için, Dowsize adlı bir kütüphaneyi kullanabilirsiniz. Bu kütüphane, resimleri önceden boyutlandırmaya ve daha hızlı yüklenmelerini sağlamak için optimize etmeye yardımcı olur.

Ayrıca, albümde yüklenen resim dosyalarını sıralamak veya filtrelemek isteyebilirsiniz. Bunun için, dosya adlarını kullanarak albümdeki resimleri tarih veya isme göre sıralayabilirsiniz. Ayrıca belirli bir kategori veya etiket için filtreleme yapmak için de benzer bir yöntem kullanabilirsiniz.

Özetlemek gerekirse, fotoğraf albümü oluştururken, yüklenen resim dosyalarını yönetmek için doğru kodlama yöntemlerini uygulamak son derece önemlidir. Dosyaları kolayca saklamak, boyutlandırmak ve sıralamak, albümünüzü daha kullanıcı dostu hale getirir.