php İle web sitesi yapımı - suhagokalp.com · ardahan tbmyo- bilgisayar programcılığı serkan...

PHP I le Web Sitesi Yapımı

Serkan HANCI

ARDAHAN ÜNİVERSİTESİ

Bilgisayar Programcılığı

2013

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.

http://www.wampserver.com/en/#download-wrapper


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.


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.


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.


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ü


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.


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.


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.


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.


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.


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.


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.


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ü:


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ü;


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ü;


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ü:


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.


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.


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


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


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


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.


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.


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.


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ı


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.


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.


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.


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.


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.


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ü

php İle web sitesi yapımı - suhagokalp.com · ardahan tbmyo- bilgisayar programcılığı serkan...

Documents