Veri Tabanı Yönetim Sistemleri

advertisement
İnternet Programcılığı I
Öğr.Gör.Kenan KILIÇASLAN
[email protected]
Web: http://www.kilicaslan.nom.tr
Ders içeriği (1. Dönem)

Kullanıcı tarafında çalışan web sayfalarının
tasarımı

Statik web sayfası tasarımı,


Dinamik web sayfaları,



Html komutları
Javascript komutları ve javascript yazma
Css
Zaman kalırsa temel xml
Ders içeriği (2. Dönem)

Sunucu tarafında çalışan web sayfalarının
tasarımı




Ne zaman sunucu tarafında çalışacağız, ne
zaman kullanıcı tarafında çalışacağız.
Diğer sunucu tarafında çalışan (asp, aspx, jsp vs.)
programların karşılaştırması
PHP dili
AJAX
En Yaygın Web sunucuları


IIS
Apache
Web Sayfalarının Çalışma Şekline Göre
Gruplanması

Web sayfaları iki gruba ayrılır.


Statik yani içeriği değişmeyen web sayfaları
Sunucu tarafında çalışan web sayfaları
Statik Web Sayfalarının Görüntülenme
Tekniği



Kullanıcı bilgisayar (istemci) server’dan bir
istekte bulunur.
Server (sunucu) istekte bulunulan sayfayı
transfer eder (yani sayfa kullanıcının
bilgisayarına iner.)
Kullanıcının bilgisayarına inmiş olan sayfa
kullanılan tarayıcı tarafından yorumlanır ve
görüntülenir.
Sunucu Tarafı Web Sayfalarının
Görüntülenme Tekniği




Kullanıcı bilgisayar (istemci) server’dan bir
istekte bulunur.
Sunucu yapılan isteği html koduna
dönüştürür.
Server (sunucu) istekte bulunulan sayfayı
transfer eder (yani sayfa kullanıcının
bilgisayarına iner.)
Kullanıcının bilgisayarına inmiş olan sayfa
kullanılan tarayıcı tarafından yorumlanır ve
görüntülenir.
Sunucu Tarafı Web Sayfalarının
Görüntülenme Tekniği


Sayfa içinde en küçük bir değişiklikte aynı
işlem uygulanır.
Her yeni istekte sayfa tamamen yeniden
oluşturulur yani yenilenir.
Sunucu Tarafı Web Sayfalarının
Görüntülenme Tekniği


Sunucu tarafı sayfalar sunucuda bulunan
program tarafından çalıştırılır.
Ne zaman sunucu tarafında çalışan sayfayı,
ne zaman statik sayfayı tercih edeceğiz.


Veritabanı bağlantısı varsa sunucu tarafında
çalışmak gerekir (üyelik, forum, alışveriş vs.)
Veritabanı bağlantısı yoksa statik yani içeriği
değişmeyen sayfalar tercih edilebilir.
Scriptler de iki çeşit


Kullanıcı bilgisayarda çalışan scriptler
(örneğin, javascript, vbscript vs.)
Sunucu bilgisayarda çalışan script (örneğin,
PHP, JSP, Servlet,vs)
Web sayfaları uzantısı

Statik web sayfası (Kullanıcı tarafında
çalışan)



.htm
.html
Değişken Web sayfası (Sunucu tarafında
çalışan)



.asp, .aspx (yalnız iis serverda çalışır)
.php (iis, apache ve pekçok)
.jsp , servlet (apache tomcat)



Web sayfalarında her şey etiketler ile belirtilir.
Etiketler <etiket> arasına yazılır.
Bütün etiketler </ … > ile kapatılmalıdır.


<br> gibi bazı etiketler kapatılmaz
Son açılan etiket en ilk kapanmalıdır. Etiket
kapanışları birbirini kesmemelidir.
Yaygın kullanılan html etiketleri




<html> .. </html> : Belgeyi bir html belgesi
olarak tanımlar
<head> .. </head> : Html belgesinin başını
tanımlar
<body> .. </body> : Html belgesinin
gövdesini tanımlar
<title> .. </title> : html belgesinin başlığını
belirler
Yaygın kullanılan html etiketleri







<h1></h1> .. <h6></h6> : Metnin boyutunu
önceden tanımlı büyüklüğe ayarlar.
<p> .. </p> : Belgedeki paragrafı belirtir.
<b> .. </b> : Metni koyulaştırır
<i> .. </i> : metin italik hale gelir.
<img> : sayfaya bir resim yerleştirir.
<a> .. </a> : Bir köprü (link) oluşturur.
<br> : Bir satır sonu oluştur.
Yaygın kullanılan html etiketleri



<ul> .. </ul> : Madde işaretli öğelerin sırasız
bir listesini belirtir.
<ol> .. </ol> : Maddeli öğelerin sıralı bir
listesini belirtir.
<LI> .. </LI> : liste içindeki bir öğeyi
tanımlar.
Etiketlerin ayrıca öznitelikleri vardır.


<img> etiketinin src öz niteliği vardır. Bu
özniteliğe resim adı yazılır.
<img src=“kenan.jpg”>
Dosya isimleri

Web sayfasına konan dosya isimleri,






Asla büyük harf olmamalı
Asla boşluk karakteri içermemeli
Türkçe karakter olmamalı
İsterseniz boşluk yerine eksi (-) veya alt çizgi( _ )
koyabilirsiniz.
Bu kural hem html sayfasının adı için geçerli, hem
de resim gibi dosyalar için geçerli.
Aksi takdirde web sayfanız çalışmayacaktır. (Local
bilgisayarınızda çalışabilir.)
Etiketler


HTML etiketleri hakkında genel ve özel
kurallar vardır.
İlk kural, tüm standart etiketlerin bir büyüktür,
bir küçüktür işaretinin arasına yazıldığıdır.


<HTML>
<HEAD>
Etiketler


Sonraki kural biraz daha az tutarlı. Bu,
etiketlerin bir açma bir kapama bileşeninin
olduğunu belirtir.
Kapama bileşeni, etiketi çevreleyen aynı
küçüktür “<“ ve büyüktür “>” sembollerini
içerir, ancak etiketin kapama olduğunu
belirtmek için etiketten önce bölü işareti (/)
ekler.

</HTML> , </HEAD>
Etiketler



Bu, standart etiketlerin çoğunda, açtığınız
şeyi kodunuzda uygun yerde kapamanız
gerektiği anlamına gelir.
Bu kurala uygun şekilde davranmayan çok
sayıda etiketlerin varlığı bu kuralı belirsiz hale
getirmiştir.
<P> … </P> kapatılırken, <IMG> etiketi
hiçbir zaman kapatılmaz yani </IMG>
yanlıştır.
Nitelikler



Nitelikler (attributes), bir etiketin eylemini
değiştirir.
Pek çok etiketin bu niteliklere ihtiyacı yoktur.
Nitelikler < ve > sembolleri arasına adından
sonra gelir.




<IMG src=“resim_adı.jpg”>
<IMG src=“resim_adı.jpg” height=100 width=120>
Burada src niteliktir ve resimin kaynağını belirtir.
Height ve width niteliktir. Resmin ekrandaki
yüksekliğidir.
Basit bir HTML oluşturalım








<HTML>
<HEAD>
<TITLE>İlk Sayfam</TITLE>
</HEAD
<BODY>
<H1>Bu benim ilk sayfam</H1>
</BODY>
</HTML>
Örnek ( a.html adıyla kaydedin )










<HTML>
<HEAD>
<TITLE>Bu bir HTML örneğidir</TITLE>
</HEAD>
<BODY bgcolor=“red” >
<P align=“center”>Bu yazıyı ortalanmış göreceksiniz</P>
<P align=“right”>Bu yazıyı sağa dayalı göreceksiniz</P>
<P>b sayfasına bağlanmak için <A href=“b.html”>buraya
tıklayınız.</A></P>
</BODY>
</HTML>
Örnek ( b.html adıyla kaydedin )









<HTML>
<HEAD>
<TITLE>Bu bir HTML örneğidir</TITLE>
</HEAD>
<BODY bgcolor=“blue” text=“white”>
<P align=“center”>Bu yazıyı ortalanmış
göreceksiniz</P>
<P align=“right”>Bu yazıyı sağa dayalı göreceksiniz.
<A href=“a.html”>Buraya Tıkla</A></P>
</BODY>
</HTML>
Etiket açma kapama için doğru şekil
Etiket açma kapama için yanlış şekil
Baş kısmının yapısı (HEAD)


Web sayfasının koduna baktığınızda
<HTML> etiketinden hemen sonra <HEAD>
etiketi başlar ve birkaç satır sonra </HEAD>
‘e rastlarsınız.
Bu dökümanın baş kısmıdır.
Baş kısmında neler vardır.


Sayfanın başlığı: <TITLE> açma etiketi ve
</TITLE> Kapama etiketi arasına yazılan yazı
sayfanın başlığıdır ve tarayıcının başlığında
görülür
Scriptler: Bir javascript gibi scriptler sayfanın
baş kısmına gömülür. Buna ileride
değineceğiz.
Baş kısmında neler vardır.


Stil: Stiller’de (CSS) sayfanın baş kısmına
gömülebir. Bunada ileride değineceğiz.
Meta Bilgileri: META etiketi farklı ve güçlü bir
etikettir.




Sayfanın yazarı
Arama kelimeleri
Dil
Diğer birçok özellik
Gövde (BODY)

Bir HTML dökümanının gövdesi, izleyiciye
görsel olarak sunduğumuz içerik bilgilerin
tümünü içerir.




Metin: Sitenizin metinsel içeriği gövdede bulunur.
Resimler : Bütün resimler gövdede bulunur.
Bağlar: Web’in kalbidir ve ruhudur. Bağlar,
ziyaretçinin sitenizde dolaşmasını sağlar.
Multimedya veya özel programlanmış olaylar:
Flash, java appletleri vs. ‘de gövdede bulunur.
Örnek (c.html)







<HTML>
<HEAD>
<TITLE>Egzersizin Faydaları</TITLE>
</HEAD>
<BODY>
<H1>Egzersizin Sağlık Açısından Faydaları</H1>
<P>Egzersiz, sağlığınızı iyileştirmek için mükemmel
bir yoldur. Tıbbi araştırmalar egzersizin kalbinizi ve
akciğerinizi güçlendireceğini, tansiyonu
düşürebileceğini ve sağlıklı bir kiloda kalmanızı
sağlayabileceğini gösteriyor</P>
Örnek (c.html)



<P>Egzersiz, ruh halinizi iyileştirmesine de
yardımcı olabilir. Egzersiz yapanlar daha
özgüven sahibidir, karar verirken daha
güçlüdür ve genel olarak yaşama bakışları
daha pozitiftir.
</BODY>
</HTML>
Kesme (BREAK) etiketi ile çalışmak





Bazen bir satır atlamak istersiniz, bunu <BR>
etiketi ile yapabilirsiniz.
Önceki yaptığımız c.html dosyasına şunu
ekleyelim. (d.html olarak kaydedelim.)
<P>Kenan KILIÇASLAN<BR>
Beykent Üniversitesi<BR>
Meslek Yüksek Okulu<BR>
Biçimlendirme yapalım.




d.html deki Kenan KILIÇASLAN yazısını
kalınlaştıralım.
Bunun için bu yazının başına <B> etiketi
sonuna da kapatmak için </B> koymalıyız.
<B>Kenan KILIÇASLAN</B>
d1.html olarak kaydedelim
Biçimlendirme yapalım.




d1.html deki egzersiz yazısının tümünü italik
yapalım.
Bunun için bu yazının başına <I> etiketi
sonuna da kapatmak için </I> koymalıyız.
<I>egzersiz</I>
d2.html olarak kaydedelim.
Biçimlendirme yapalım.


d2.html deki egzersiz yazısının tümünü bold
yapalım.
Daha önce italik olan <I>egzersiz</I>
yazısının başına <B>ve sonuna </B> koyalım

<B><I>egzersiz</I></B>

d3.html olarak kaydedelim.
Link ekleyelim

Gövde kısmının en altına

D sayfasına git
D1 sayfasına git
D2 sayfasına git
Linklerini ekleyelim alt alta gelsin



Link ekleyelim







Gövde kısmının en altına
<P>
<A href=“d.html”>D sayfasına git</A><BR>
<A href=“d1.html”>D1 sayfasına git </A><BR>
<A href=“d2.html”>D2 sayfasına git </A>
</P>
Linklerini ekleyelim d4.html olarak kaydedin
Download