Adım Adım PHP Web Sitesi Öğreniyorum

Transkript

2013
PHP Ile Web Sitesi
Yapımı
Serkan HANCI
ARDAHAN ÜNİVERSİTESİ
Bilgisayar Programcılığı
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;
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.
İlgili programı http://www.wampserver.com/en/#download-wrapper
web adresinden bulabilirsiniz.
Ardahan TBMYO- Bilgisayar Programcılığı
Serkan HANCI
1
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.
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.
Serkan HANCI
2
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.
Serkan HANCI
3
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 SITESININ 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.
Serkan HANCI
4
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ü
Serkan HANCI
5
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.
SITE BAGLANTISI
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.
Serkan HANCI
6
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
vererek devam ediyoruz.
Serkan HANCI
ismini
7
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.
Serkan HANCI
8
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.
Serkan HANCI
9
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.
Serkan HANCI
10
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ı
görünmesini istediğimiz boyuta getireceğiz.
oluşturarak
sitemizde
Serkan HANCI
11
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.
Serkan HANCI
12
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ü:
Serkan HANCI
13
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 backgroundimage: 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ü;
Serkan HANCI
14
Sitenin Arka Planını Degiş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 backgroundimage: url (images/arkaplan.jpg)
kodlarını kullanabilirsiniz.
Sitenin Görünümü;
Serkan HANCI
15
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 backgroundimage:
url (image/menu.jpg) kodlarını
yazdım.
Site Görünümü:
Serkan HANCI
16
İ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.
Serkan HANCI
17
style.css sayfasına giderek #menu ul
li değişkeni oluşturup yandaki
kodları yazıyoruz.
Site görünümü:
Menulere 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.
Serkan HANCI
18
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
Serkan HANCI
19
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ü:
Diger 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
Serkan HANCI
20
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
Serkan HANCI
21
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.
Serkan HANCI
22
Veritabanımızı hazırlayacağımız sayfa
sayfasıdır. Veritabanları butonuna tıklayınız.
localhost
PhpMyAdmin
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.
Serkan HANCI
23
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.
Serkan HANCI
24
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ı
Serkan HANCI
25
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.
Serkan HANCI
26
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.
Serkan HANCI
27
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.
Serkan HANCI
28
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.
Serkan HANCI
29
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.
Serkan HANCI
30
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ü
Serkan HANCI
31

Adım Adım PHP Web Sitesi Öğreniyorum

Transkript

Benzer belgeler

1 Soru 1 Cevap Daha Hızlı Performans için Webmail PRO`daki PDO

PHP ile MySQL Veritabanı İşlemleri

bölüm 4 - emrecan

08220 Internet Programcılığı II

Dijital Market - Başakşehir Living Lab

MySQL Nedir? MySQL bir ilişkisel veritabanı yönetim sistemidir

08220 Internet Programcılığı II

Sosyal Paylaşım Ağlarında PHP ve MySQL Kullanarak Etkileşimli