PHP I le Web Sitesi Yapımı

(1)

PHP I le Web Sitesi Yapımı

Serkan HANCI

ARDAHAN ÜNİVERSİTESİ Bilgisayar Programcılığı

2013

(2)

Ardahan TBMYO- Bilgisayar Programcılığı Serkan HANCI

1 Giriş

PHP^,HTML içine gömülebilen bir betik dilidir. PHP sadece Personel Home Page kelimelerinin kısaltması değil Personel Home Page Hypertext Preprocessor kelimelerinin kısaltmasından oluşmaktadır. Anlamı Hiper Metin Ön işlemcili kişisel web sayfasıdır. PHP programını kullanmaya başlamadan önce bir işaretleme dili olan HTML (Hyper Text Markup Language) bilgi sahibi olmamız gerekmektedir. PHP kodlan yeri geldiğinde HTML kodlarının içerisine yazılmaktadır.

HTML web sayfası, HTTP (Hyper Text Transfer Protocol) sayesinde bizim bilgisayarımızda işlem görür. Yani siz bir sayfaya girdiğinizde web sunucusu kendisinden talep edilen sayfayı görünce uzantısı HTM ya da HTML ise gerekli işlemleri yaparak tarayıcınıza tekrar geri gönderir ve dosyalar bilgisayarınıza yüklenir daha sonrada web tarayıcınız onu yorumlayarak görüntüleri ekrana getirir. Bu nedenle de HTML’ye kullanıcı taraflı çalışan betik dili denilmektedir. Bilgisayar üzerinde yaptığınız html sayfalarını sunucuya ihtiyaç duymadan doğrudan tarayıcınızda çalıştırabilirsiniz.

PHP’de durum böyle değildir. İstemci PHP uzantılı sayfayı web sunucudan çağırdığında sunucu HTML içerisine yazılmış olan PHP kodlarını anlamadığından dolayı bu kodları PHP yorumlayıcısına gönderir. PHP yorumlayıcısı HTML içerisindeki PHP kodlarını web sunucusunun anlayacağı bir dile çevirerek tekrar web sunucuya geri gönderir. Web sunucuda bize HTML olarak çıktı gönderir ve bizde çıktıları tarayıcımızda görmüş oluruz.

PHP’yi kullanabilmemiz için bazı yazılımlara ihtiyacımız vardır. Biz bu yazılımların nasıl kurulduğunu adım adım göreceğiz. Bu yazılımlar şunlardır;

İlgili programı http://www.wampserver.com/en/#download-wrapper web adresinden bulabilirsiniz.

Web Sunucusu (Web Server): Yazılmış olan web sayfalarının internet üzerinde gösterilmesini sağlar. IIS (Internet Information Server), PWS (Personel Web Server), Apache Server gibi birçok web sunucu yazılımı mevcuttur. Biz WAMP Server programını kullanacağız.

(3)

2 WAMP KURULUMU

Wamp Server bir Windows web geliştirme ortamıdır. Apache, PHP ve MySQL veritabanı ile web uygulamaları oluşturmamıza olanak sağlar. Bunun yanı sıra, PhpMyAdmin ile kolayca veritabanlarımızı yönetmenizi sağlar. WAMP kelimesi Windows, Apache, MySQL, PHP’nin kısaltılmış halidir. Bu uygulamaları ayrı ayrı kurmak yerine bu üç uygulamanın tek pakette toplanmış halidir.

Wamp Server yazılımının kurulumu; Programın üzerine çift klik yaparak kurulumu başlıyoruz.

1.Adım: İlk adım WampServer ile ilgili genel bilgi veren hoşgeldiniz ekranı. Next butonunu tıklayarak ikinci adıma geçiyoruz.

PHP Yorumlayıcısı: PHP scriptlerimizin sunucu (server) tarafından anlaşılabilmesi için bir yorumlayıcı programına ihtiyacımız vardır. WAMP server ile birlikte gelmektedir.

Veritabanı: Verilerin bir ortamda tutulduğu çeşitli Veritabanı yazılımları mevcuttur. Ms Accsess, MySQL gibi. WAMP server ile birlikte gelmektedir.

(4)

3

2.Adım: Lisans sözleşmesini kabul ederek diğer adıma geçiyoruz.

3.Adım: Yazılımın kurulacağı yer sorulmakta, değişiklik yapmadan diğer adıma geçiyoruz.

4.Adım: Masaüstüne kısayol oluşturmak için çentikleri seçebilirsiniz.

(5)

4

5.Adım: Kurulum bitti.

Kurma işlemi bittikten sonra WAMP Server çalışmaya başlayacaktır. WAMP Server görev çubuğunun sağ tarafında bulunmaktadır. Simge yeşil renk ise çalışıyor, kırmızı renk ise çalışmıyor anlamına gelmektedir.

WEB SI TESI NI N TASARIMI

Web sitesine başlamadan sitenin genel yapısı hakkında bilgi vereyim.

Web sitesi 4 sayfadan oluşacak. Birinci sayfamız anasayfa (index.php) sayfası olacak. Anasayfa 4 kısımdan oluşacak. Üst kısımda başlık(header), onun altında menü (menu), orta kısımda içerik (içerik) en alt kısımda ise alt kısım (footer) bölümlerimiz bulunacak.

(6)

5

Header bölümümüzde banner, menu bölümünde Anasayfa, Hakkımızda, Yorumlar ve İletişim menüleri olacaktır. Bu 4 menü için 4 adet php sayfası tasarlanacaktır.

hakkimizda.php sayfasında site ilgili genel bilgiler yazılacak.

iletişim.php sayfası bir form sayfası olacak. Bu form sayfasında kullanıcılar site hakkında yorum yapacaklar. Yapılan yorumlar Veritabanı bağlantısı kurularak oluşturulan table içindeki alanlara yazılacak.

yorumlar.php, iletişim.php sayfasında yapılan yorumları görmek için Veritabanı ile bağlantı kurularak veritabanında daha önceden girilen bilgiler sayfaya upload edilecek.

index.php tasarım görünümü

(7)

6

Localhost üzerinde çalışan php tabanlı css içerikli web sitesi yapımı için Dreamweaver editörü kullanılacak. Site yapımına başlamadan önce sitemizin tüm sayfa, resim ve içeriklerinin yükleneceği klasörü oluşturmamız gereklidir. Klasörümüzü localhost’un çalışacağı bilgisayarım c sürücüsü içinde bulunan wamp klasörü altında ki www klasörüne oluşturmalıyız.

SI TE BAG LANTISI

Dreamweaver editörüne web sitesini bağlamak için;

Editörün sağ tarafında bulunan Manage Sites (Sitelerini Yönet) çift tıklatılır.

(8)

7

Açılan Manage Sites sayfasında New… seçeneği tıklatılır.

New seçeneği altında bulunan Site tıklatılır.

Site ismine sitenizin ismini vererek devam ediyoruz.

(9)

8

ASP.Net, PHP gibi bir sunucu teknolojisi üzerinde mi çalışıyorsunuz sorusuna karşılık evet çentiğini seçerek, PHP MySQL seçeneğini işaretliyoruz.

ASP.Net, PHP gibi bir sunucu teknolojisi üzerinde mi çalışıyorsunuz sorusuna karşılık evet çentiğini seçerek, PHP MySQL seçeneğini seçiyoruz.

Kendi bilgisayarımızın localhostunu kullanılacağımızı işaretliyoruz.

(10)

9

Son olarak test url ile sistemimizi test edebilirsiniz.

Editörümüze sitemizi ekledik. Bu aşamadan sonra yapacağımız bütün sayfalar localhost ’da bulunan site klasörümüze gidecektir.

(11)

10 index.php

Dreamweaver açılış sayfasından PHP’yi seçiyoruz.

Açılan sayfayı CTRL+S yaparak kayıt sayfasını açıyoruz. Dosya adına index.php ismini vererek kayıt türünü PHP files olarak değiştiriyoruz. Sitemizi editöre eklediğimiz için kayıt sayfasında kayıt konumu olarak doğrudan sitemizin klasörünün bulunduğu php_sites klasörü gösterildi.

php_site klasörümüze index.php sayfamız eklendi.

(12)

11

index.php sayfamızı div komutlarını kullanarak tasarlayacağız. Div etiketleri tasarım açısından table etiketlerine göre daha fazla görsellik ve kolaylık sağladığından table etiketlerine göre daha fazla tercih edilmektedir. Div etiketlerini kullanırken dikkat edilmesi gereken husus her div etiketine atanan bölümün bir “id” sinin olmasıdır. Bu id’ler aracılığıyla bu bölümlere yapılacak olan style.css dosyasından istediğimiz özelliği atayabileceğiz.

Div etiketinin kullanımı:

<div id="header"> BAŞLIK</div>

Div kodları:

Ekran görüntüsü

Eklediğimiz divlere style.css sayfası oluşturarak sitemizde görünmesini istediğimiz boyuta getireceğiz.

(13)

12 style.css sayfası

File>New açılan New Document sayfasında CSS seçilerek Create butonuna tıklatılır.

Açılan menüde dosya adını style.css kayıt türünü css olarak değiştirerek sayfayı kaydediyoruz.

style.css sayfası oluşturulduktan sonra bu sayfayı index.php sayfasında göstermemiz gereklidir.

(14)

13

CSS Kod yazım şekli:

Css kodları değişken yapısı ile yazılır. index.php sayfasında yazdığımız id’lerin özellikleri css içerisinde değiştirilir.

style.css kodları:

style.css kodlarının yazımından sonra index.php sayfasının görünümü:

(15)

14 Banner Ekleme

Siteye atılacak banner’ın ölçüleri 900x150 olacak. Banner header kısmına atılacaktır. Banner www altında bulunan php_sitesi klasörün içinde açtığım image adlı resimlerin atılacağı dosyada bulunmaktadır. Siteye atılacak tüm resimler bu klasöre kopyalanacak. Bannerı eklemek için style.css dosyasının içinde bulunan header kod bloğunun içine background- image: url(image/banner.jpg); kodlarının yazılması gereklidir.

Dikkat edilmesi gereken nokta, php_sitesi klasörü altında image klasörü oluşturup bu klasöre 900x150 ölçülerinde banner.jpg adında resim attım.

Background-image kodunu yazdıktan sonra url adresi olarak bu resmi gösterdim.

Site görünümü;

(16)

15 Sitenin Arka Planını Deg iştirme

Arka plana resim veya doğrudan bir renk atayabilirsiniz. Arka plan rengini değiştirmek için style.css dosyasının içine girerek body adında bir değişken oluşturup aşağıdaki kodları yazıyoruz.

Arka plana doğrudan renk ekledik.

Resim eklemek için background- image: url (images/arkaplan.jpg) kodlarını kullanabilirsiniz.

Sitenin Görünümü;

(17)

16 Menu Yapımı

index.php sayfamızda bulunan menu kısmının düzenlemesini yapacağız. Burada 4 adet menümüz bulunacak. Anasayfa, Hakkımızda, Yorumlar, İletişim. Menüleri yapmadan önce menu kısmına bir arka plan atayacağız. Benim menu alanım 30x900 piksel olduğu için bu ölçülerde bir resim hazırladım.

style.css sayfasına giderek menu değişkeni içine background- image:

url (image/menu.jpg) kodlarını yazdım.

Site Görünümü:

(18)

17

İndex.php sayfasının dizayn kısmına gelerek Properties altında Unordered Liste tıklıyoruz.

İndex.php sayfası dizayn kısmında menu alanının içine menülerimizin isimlerini yazıyoruz.

(19)

18

style.css sayfasına giderek #menu ul li değişkeni oluşturup yandaki

kodları yazıyoruz.

Site görünümü:

Menu lere Link Verme

Menüler bizim sayfalar arası gezmemizi sağlayan linklerden oluşacaktır. Menülere link vermek için, index.php sayfası kod kısmına aşağıdaki kodları yazın.

(20)

19

style.css sayfasına giderek yandaki kodları yazıyoruz. text-decoration none yaptığınızda link atanan yazıların altı çizili olmasını engeller.

Hover üzerine gidildiği zaman oluşacak rengi belirler. Arvisited ise önceden tıklanan sayfa linklerinin renklerini belirler.

Footer Yapımı

Footer bölümü web sitelerin en alt kısmında bulunan kısımdır. Bu menüde genel itibariyle web sitesinin telif hakları ile ilgili bilgi bulunmaktadır. Footer eklemek için style.css sayfası kod kısmına aşağıdaki

(21)

20

kodları yazın.

Footer bölümüne daha önceden hazırlamış olduğum 100x900 piksel ölçülerinde footer.jpg resmini yandaki kodlar ile anasayfa içine ekledim.

Sitenin Görüntüsü:

Dig er Sayfaların Yapımı

Web sitemizin 4 adet sayfası olacağını söylemiştik. Bunlardan ilki index.php sayfasının tasarımını tamamladık. Dilerseniz index.php

(22)

21

sayfasının içerik kısmına div yada tablolar kullanarak istediğiniz içeriği ekleyebilirsiniz.

Diğer sayfalarımız olan hakkimizda.php, yorumlar.php ve iletişim php sayfalarının yaparak bunları menü çubuğunda bulunan linklere atayacağız.

Bu sayfaları dreamweaver editörü kullanılarak çeşitli yöntemlerle yapılabilir. Ben en kolay yöntemden göstereceğim. Lokal hostumuz da www klasörü altında ki php_sitesi klasörüne giderek burada bulunan index.php sayfasını kopyalayın ve aynı klasör içine yapıştırın. Yapıştırdığınız php sayfasının ismini hakkimizda.php sayfası olarak kaydedin. Diğer iki sayfayı da bu şekilde yapın. Dikkat edilmesi gereken husus, burada yapacağınız sayfalar index.php sayfasında <ul><li>iletişim.php<li> bulunan sayfalar ile aynı isimde olacaktır.

Sayfalarımızı bu şekilde hazırlayıp tarayıcımızda çalıştırdığımızda menü linklerinin çalıştığını ve 4 adet sayfamızın oluştuğunu göreceğiz.

Sayfalarımızı ekledik fakat şöyle bir sorun meydana geldi. Hakkımızda içerik kısmında bulunan yazı stilini değiştirdiğiniz zaman diğer sayfalarda da değiştiğini göreceksiniz. Bu durumda sadece hakkimizda.php sayfası için yeni style.css sayfası oluşturmamız gereklidir. Bunun için local host içerisinde www klasörü altında bulunan sitemizin klasörüne giderek burada bulunan style.css sayfasını kopyalan ve yapıştırın. Yeni sayfanın adını style2.css olarak değiştirin. Daha sonra hakkimizda.php sayfasında

(23)

22

kod kısmına giderek href=style.css kodunu style2.css olarak değiştirin.

Bu şekilde yaptığımız değişiklikten sonra style2.css içerisinde yaptığımız bütün değişiklikler sadece hakkimizda.php sayfası için geçerli olacaktır.

Veritabanı Oluşturma

iletişim.php sayfasında bir form hazırlayarak bu forma girilen bilgilerin veritabanında oluşturduğumuz alanlara ekleneceğini daha önceki konularda bahsetmiştik.

Verilerimizi bir ortamda tutulduğu çeşitli Veritabanı yazılımları mevcuttur. Biz burada MySQL’i kullanacağız. Veritabanı oluşturmak için;

Veritabanı oluşturacağımız bölüme ulaşmak için wamp server’a tıklayarak açılan sayfa da phpMyAdmin’e tıklayın.

(24)

23

Veritabanımızı hazırlayacağımız sayfa localhost PhpMyAdmin sayfasıdır. Veritabanları butonuna tıklayınız.

Açılan sayfada Yeni veritabanı oluştur (Create Database) yazısı altında bulunan ilk kısma Veritabanı ismi (Türkçe karakter kullanılmayacak) diğer bölümde ise dil seçeneği olarak utf8_turkish_ci yazarak oluştur(create) butonuna tıklıyoruz. Veritabanımız oluşturuldu.

Veritabanımızı oluşturduktan sonra veritabanımıza bir tablo ekleyeceğiz. Bunun için oluşturduğumuz Veritabanı ismine çift tıklayarak yukarıda ki sayfayı açıyoruz. Tablonun adı ve sütun sayısını girdikten sonra sağ taraftaki git butonuna tıklıyoruz. Tablomuz oluşturuldu.

(25)

24

Oluşturduğumuz tablolara alanlarımızı girerek kaydediyoruz.

Oluşturulan tablo özellikleri yukarıdaki gibi görünecektir. Bu sayfada sütunlarımız üzerinde istediğimiz alanla ilgili değişiklik yapabiliriz.

(26)

25 iletişim.php Form Sayfasının Yapımı

Form sayfaları kullanıcıların üyelik, anket gibi geniş kitlelere hitap eden ve istenildiği takdirde belirli bir kitleye yönelik bilgi, birikim ve tecrübenin aktarıldığı yerdir. Form sitelerinin en büyük özelliği topluluğa hitap etmesidir. Biz iletişim sayfasında site ile ilgili görüş, öneri ve isteklerin iletileceği bir form sayfası yapacağız. İletişim sayfamızda kullanıcının adı soyadı, e-posta bilgileri ile bize ileteceği mesajı alarak daha önceden oluşturduğumuz veritabanında ki alanlara kaydedeceğiz. Form sayfası oluşturmak için;

iletişim.php sayfası dizayn kısmında Insert menüsü altında bulunan Forms menüsüne tıklayınız. Açılan alt menüde en başta bulanan form simgesine tıklayın. Sayfamızda kırmızı hatları olan bir dikdörtgen oluşacaktır. Bu alanın içine form araçlarını ekleyeceğiz.

Forms sayfası altında bulunan Text Field butonuna tıklayın.

Açılan menüde ID kısmında veritabanımıza yazdığımız alan isminin aynısı yazın. Label kısmına ise sayfada gözükmesini istediğimiz metni yazın. Ok düğmesine tıklayarak Text Field’i eklemiş olduk.

ID: adsoyad Label: Adı Soyadı

(27)

26

E-Posta kısmını da Ad Soyad kısmındaki adımları izleyerek ekledim.

List Menu seçilir menü anlamına gelir. Burada kullanıcının hangi konu üzerinden mesaj atacağını belirtmek için Forms menüsü altında bulunan List Menu simgesine tıklayın. Veritabanımız da bulunan ID ismini (konu) ve Label (Mesajın Konusu) alanlarını doldurun.

List Menu ekledikten sonra bu menünün içreğini belirlemek için, Mesajın Konusu yanında bulunan açılır menü simgesine tıklayın alt tarafta bulunan List Values simgesine tıkladıktan sonra gelen pencereye açılır menüde görünmesini istediğiniz içerikleri girin.

(28)

27

List Values simgesine tıkladıktan sonra Item Label altında yazacaklarımız formun içinde gözükecek olan metinlerdir. Value ise veritabanına kaydedilecek değerlerdir. Value kısmında Türkçe karakter kullanmayın. Artı simgesi ile yeni bir öğe ekleyebilirsiniz.

Textarea görüş veya önerilerin bildirileceği geniş metin alanıdır.

Mesajınız kısmı için bir adet Forms menüsü altında bulunan textarea simgesine tıklayın textarea’yı ekleyin. ID olarak mesaj, label olarak da Mesajınız yazdım. Siz veritabanımıza yazdığınız ID karşılığını yazın.

Son olarak eklediğimiz form elemanlarını veritabanımıza gönderecek olan Gönder ve ekrana yazdıklarımızı silecek Temizle butonunu eklemek. İlk olarak Gönder butonumuzu ekleyeceğiz.

Forms menüsü altında bulunan buton simgesine tıklayın. Açılan sayfada ID ve label kısımlarında gerekli isimleri verin.

(29)

28

Temizle butonunu eklemek için Forms menüsü altında bulunan buton simgesine tıklayın. Açılan sayfada ID ismini girin. Tamam dedikten sonra Value kısmına Temizle Action kısmına ise Reset formu işaretleyin.

Sitenin Görüntüsü

baglanti.php

Yaptığımız iletişim.php sayfasında ki form bilgilerini Veritabanına eklemek için baglanti.php adında bir sayfa oluşturacağız. Bu sayfa yapımına geçmeden önce size MySQL bağlantı komutları hakkında bilgi vereyim.

(30)

29

Mysql_connect() Fonksiyonu ile MySQL Bağlantısı

Php ile MySQL bağlantısı sağlamak için mysql_connect() fonksiyonu kullanılır. Bu fonksiyonun parametre kısmında sunucu, kullanıcı adı ve şifre belirtilir.

mysql_connect('sunucu', 'MySQL kullanıcı adı', 'MySQL parolası');

Mysql_select_db () Fonksiyonu ile Veritabanı Bağlantısı

MySQL’de açılmış olan veritabanına bağlanmak için mysql_select_db() fonksiyonu kullanılır. Bu fonksiyona parametre kısmında veritabanı adı ve bağlantı değişkeni belirtilir.

Mysql_select_db(“Veritabanı Adı”, “Bağlantı Değişkeni”);

mysql_query("set names utf8");

mysql_query("SET NAMES utf8");

Bu satır veritabanında Türkçe karakter sorunu çıkmasını engeller.

baglanti.php sayfasını oluşturduktan sonra php kodlarını yazmaya başlıyoruz. İlk olarak MySQL ile bağlantı kurmamız gerekli. MySQL veritabanı kodları aşağıda gösterilmiştir. $baglan adlı bir değişken oluşturduk. Bu değişkene mysql_connect ile bağlantı kurduk. Localhost wamp ’da sunucu adıdır. Root ise MySQL ’in kullanıcı adıdır. Parola alanı boş bırakılmalıdır. Or die komutu ile veritabanına bağlantı kurulamadığı zaman ekrana yazmasını istediğimiz belirttik. Mysql_select_db komutu ile oluşturduğumuz veritabanı bağlantı kodudur. Veritabanımızın ismini yazdıktan sonra $baglan değişkenini yazıyoruz.

(31)

30

MySQL ve veritabanımıza bağlantı kurduktan sonra veritabanımız da tablomuzda bulunan alanlara değişken atıyoruz. Alanların ismi aynı olmalıdır. Değişkenlere istediğinizi yazabilirsiniz.

Son olarak $query adlı bir değişken oluşturarak veritabanımıza ekleme yapacak kodları yazıyoruz. Eğer ekleme yapılırsa ekrana mesajımızın iletildiğini kayıt yapılmazsa mesajımızın gönderilmediğini yazacak.

baglanti.php kodları;

yaz.php

Veritabanımıza gerekli bağlantı sayfalarını yaptık ve iletişim.php sayfasındaki form bilgilerini veritabanımıza göndermeye başardık. Şimdi ise veritabanımız da bulunan iletişim tablosundaki forma eklenen bilgilerinin yorumlar sayfası altında bulunan link aracılığıyla yaz.php sayfasında göstereceğiz. Bunun için öncelikle yorumlar.php sayfası kod kısmında yorumlar linki oluşturmalıyız.

(32)

31

yaz.php adında bir php sayfası oluşturarak aşağıda ki kodları yazmalıyız.

Yaz.php sayfasının görünümü