Toplu Öğrenci Kimliği Hazırlama Programı - Html5

• Hazır Temalar: farklı renk teması seçeneği sunar.
• Çift Yönlü Tasarım: Kartın hem ön yüzünü (öğrenci bilgileri) hem de arka yüzünü (kurallar ve okul müdürü imzası) aynı anda hazırlar.
• Dinamik Logo ve Filigran: Okul logosu yüklenebilir; bu logo hem kartın üst kısmında hem de arka planda filigran olarak otomatik görünür.
• QR Kod Desteği: Son sürümde otomatik Kare kod oluşturma özelliği getirildi.
• E-okuldan (xlsx uzantılı resimli öğrenci listesinden harici ek bilgi, resme ihtiyaç duymadan)otomatik veri çekme özelliği eklendi.
• Manuel kullanımda Resim/ klasörü içine öğrenci no adıyla yüklenen .jpg uzantılı resimlerini çeker. Veri tabanı istemez.
• Toplu Veri Girişi: Ad Soyad, Sınıf, No ,(cevaplarda eklendi) Kişiye özel tema, Kişiye özel Bilgileri virgülle ayırarak (CSV mantığıyla) toplu halde eklemeye imkan tanır.
• Otomatik Etiketleme: Kart üzerine "KAN GRUBU","TAŞIMALI", "BURSLU" gibi özel statü etiketleri eklenebilir.
• Kalıcı Hafıza (LocalStorage): Yazılan bilgiler ve seçilen ayarlar tarayıcıya kaydedilir; sayfa yenilense bile veriler kaybolmaz.
• Yazdırma Düzeni: Bir A4 kağıdına 10 öğrencinin sığacağı şekilde otomatik yerleşim yapar.
• Yedekleme Sistemi: Tüm verileri .json formatında dışa aktarma (Yedekle) ve daha sonra tekrar yükleme özelliğine sahiptir.
• Gelişmiş Önizleme: "Sıradaki " butonu ile listedeki öğrenciler arasında hızlıca geçiş yaparak baskı öncesi kontrol sağlar.

Özellikle okullarda, her öğrenci için tek tek tasarım yapmak yerine, bir liste üzerinden hızlı ve standart kimlik kartları oluşturup doğrudan yazıcıdan çıkartmak için optimize edilmiştir.​

(ekteki kimlikBas.zip dosyası içine buradaki kişiseye özel opsinonel sayfayı eskisiyle değiştirebilirsiniz).
Tüm tasarım ve kodlama özgün olup Erdal BAYRAK'a aittir. Ticari amaç dışında izinsiz kullanılabilir.

ellerine sağlık hocam. çok güzel olmuş.

Eline sağlık hocam

Eline sağlık hocam, güzel görünüyor..

yazıcı ön izlemesinde renkler ve tema gidiyor mu?

Tarayıcınızın Arka Plan Grafikleri ayarı kapalı ise renksiz görünebilir. yazdırma ayarları, diğer ayarlar, Arka Plan Grafikleri kutucuğunu işaretleyin. renkler görünür.

Ya da kolaylaştıralım <style>....</style> içine şu kodu ekleyip deneyin

Otomatik QR kod üretmen özelliği eklendi.

erbay1' Alıntı:

Programın öne çıkan özellikleri şunlardır:

Görsel ve Tasarım Özellikleri​

• Hazır Temalar: Turkuaz, Lacivert, Kırmızı, Yeşil, Altın, Gece ve Premium olmak üzere 7 farklı renk teması seçeneği sunar.
• Çift Yönlü Tasarım: Kartın hem ön yüzünü (öğrenci bilgileri) hem de arka yüzünü (kurallar ve okul müdürü imzası) aynı anda hazırlar.
• Dinamik Logo ve Filigran: Okul logosu yüklenebilir; bu logo hem kartın üst kısmında hem de arka planda filigran olarak otomatik görünür.
• QR Kod Desteği: Son sürümde otomatik Kare kod oluşturma özelliği getirildi.

Veri Yönetimi ve Düzenleme​

• Toplu Veri Girişi: Ad Soyad, Sınıf, No ve Fotoğraf yolu bilgilerini virgülle ayırarak (CSV mantığıyla) toplu halde eklemeye imkan tanır.
• Otomatik Etiketleme: Kart üzerine "TAŞIMALI", "BURSLU" gibi özel statü etiketleri eklenebilir.
• Kalıcı Hafıza (LocalStorage): Yazılan bilgiler ve seçilen ayarlar tarayıcıya kaydedilir; sayfa yenilense bile veriler kaybolmaz.

Teknik ve Pratik Araçlar​

• Yazdırma Düzeni: Bir A4 kağıdına 4 öğrencinin (önlü-arkalı toplam 8 yüz) sığacağı şekilde otomatik yerleşim yapar.
• Yedekleme Sistemi: Tüm verileri .json formatında dışa aktarma (Yedekle) ve daha sonra tekrar yükleme özelliğine sahiptir.
• Gelişmiş Önizleme: "Sıradaki 4 Kişi" butonu ile listedeki öğrenciler arasında hızlıca geçiş yaparak baskı öncesi kontrol sağlar.
• Son sürümde 10 lu arkalı önlü yazdrıma eklendi

Kullanım Amacı​

Özellikle okullarda, her öğrenci için tek tek tasarım yapmak yerine, bir liste üzerinden hızlı ve standart kimlik kartları oluşturup doğrudan yazıcıdan çıkartmak için optimize edilmiştir.
Son sürümde Arkaplan renklerini otomatik yazdırma ve kesme çizgileri eklendi.
Tüm tasarım ve kodlama özgün olup Erdal BAYRAK'a aittir. Ticari amaç dışında izinsiz kullanılabilir.
(Tarayıcınızın Arka Plan Grafikleri ayarı kapalı ise arkaplan renkleri görünmeyebilir. Yazdırma ayarları> diğer ayarlar> Arka Plan Grafikleri kutucuğunu işaretleyin) Yada <style>....</style> içine şu kodu ekleyin:

Kod:

@media print {
    * {-webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    }
}

Ekli dosyayı görüntüle 81205Ekli dosyayı görüntüle 81206

Ekli dosyayı görüntüle 81194Ekli dosyayı görüntüle 81196Ekli dosyayı görüntüle 81195Ekli dosyayı görüntüle 81207Ekli dosyayı görüntüle 81208

Genişletmek için tıkla ...

hocam öğrenci bilgileri otomatik olarak nasıl yükleyebiliriz

ay51' Alıntı:

hocam öğrenci bilgileri otomatik olarak nasıl yükleyebiliriz

Genişletmek için tıkla ...

sayın hocam ad soyad, sınıf,öğrenci no,resim URL şeklindeki excel sutunlarını 4. ÖĞRENCİ VERİLERİ kutusuna (aralarda virgül olacak) kopyala- yapıştır yapabilirsin. Resimleri resim klasörüne koyabilirsin.e-okuldan resimleri almak için resimli öğrenci listesini excel olarak indir. Uzantıyı .xlsx olarak farklı kaydet. daha sonra .xlsx dosya uzantısını .zip olarak değiştir ve buraya çıkart de. xml klasörü içinde medya klasörü göreceksin tüm resimler oradadır. sıralı şekilde. (image1.jpeg, image2.jpeg gibi). bu klasörü fotoğraflar için kullanabilirsin. 1 . sıradaki öğrenci bilgileri zaten ilk resimle eşleşir. A sütununa Ad Soyad, B sütununda Sınıf , C sütununda öğrenci no, D sütununda resim/image1.jpeg yaz E sütununda aralarına virgül(,) eklenecek şekilde =birleştir formülü oluşturabilirsin. E sütunundaki verileri seçip kopyalayıp veri olarak admindeki öğrenci bilgileri kutusuna yapıştırabilirsin. Fırsat bulursam dta yükle fonksiyonu yazabilir ve entegre ederim.

Eline sağlık hocam, güzel görünüyor..

Güzel çalışma , elinize sağlık.

Emeğine Sağlık Hocma

E okuldan indirilen resimli öğrenci listesinden (.xlsx) veri ve foto çekebilme özelliği eklendi

erbay1' Alıntı:

E okuldan indirilen resimli öğrenci listesinden (.xlsx) veri ve foto çekebilme özelliği eklendi

Genişletmek için tıkla ...

Arkadaşlar özel mesaj atıp sorduğunuz düzeltmeler için final sürümünü güncelledim. Hatasızdır.

Yukarıda paylaştığım kimlikbas.zip dosyası içindeki eokulKimlikBas.html sayfasını aşağıda paylaştığım html sayfası ile değiştirirseniz, her öğrenci için ayrı tema ve ek bilgi girebilirsiniz. Eğer öğrenciye özel tema veya ek bilgi seçilmemişse admindeki Ek bilgi ve seçilen varsayılan temayı kullanır. Eğer adminden genel ek bilgi girilmemişse o öğrenci için ek bilgi görülmeyecektir.
ÖĞRENCİ LİSTESİ (Ad,Sınıf,No,Tema,Bilgi)
Ad soyad, sınıfı, öğrenci no ( "Resimler/" klasöründe öğrenci no ile aynı isimde ".jpg" resmi oalmalı), tema adı, Ek Bilgi
Textareaya veriler her öğrenci için tek satıra, aralara virgül konularak yazılmalı.Diğer öğrenci için alt satıra geçilir.Resim; örnek Fatma ŞAHİN için numarası ile aynı isimde ( Resimler/605.jpg) resim olmalı. Kullanım Örneği; her öğrenci için kan grubu eklemek istiyorum. Admin panelinden Ek Bilgi Başlığı Kutusuna KAN GRUBU yazarım.VARSAYILAN EK BİLGİ boş kalır. Öğrenci listesi textraredan her öğrenci satırına kan grubunu yazarım.
Eğer Excelden yükleme yapacaksanız ilgili alanlar yoksa varsayılan ayar kullanılır yada excel verisini yükledikten sonra Texareadan ilgili öğrenci için veri girebilirsiniz. Tema seçmeden sadece ek bilgi girebilirsiniz. temayı pas geçer ve seçilen genel temayı kullanır.
Daha ne yapayım