2013 PHP I le 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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 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. Ardahan TBMYO- Bilgisayar Programcılığı 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ü Ardahan TBMYO- Bilgisayar Programcılığı 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. 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. Ardahan TBMYO- Bilgisayar Programcılığı 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 ismini vererek devam ediyoruz. Ardahan TBMYO- Bilgisayar Programcılığı Serkan HANCI 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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ı oluşturarak sitemizde görünmesini istediğimiz boyuta getireceğiz. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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ü: Ardahan TBMYO- Bilgisayar Programcılığı 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ü; Ardahan TBMYO- Bilgisayar Programcılığı Serkan HANCI 14
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 backgroundimage: url (images/arkaplan.jpg) kodlarını kullanabilirsiniz. Sitenin Görünümü; Ardahan TBMYO- Bilgisayar Programcılığı 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 background- image: url (image/menu.jpg) kodlarını yazdım. Site Görünümü: Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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ü: 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. Ardahan TBMYO- Bilgisayar Programcılığı 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 Ardahan TBMYO- Bilgisayar Programcılığı 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ü: 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 Ardahan TBMYO- Bilgisayar Programcılığı 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 Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı Serkan HANCI 22
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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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ı Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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. Ardahan TBMYO- Bilgisayar Programcılığı 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ü Ardahan TBMYO- Bilgisayar Programcılığı Serkan HANCI 31