Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals

Transkript

1 The European Union s Making the Labour Market more Inclusive III programme For North Cyprus Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals Module 3: Cloud Computing Modül 3: Bulut Bilişim Laboratuar Notları #4 A project implemented by CyberSoft Bilişim Teknolojileri Ltd. This project is funded by European Union. The contents of this publication are the sole responsibility of Cybersoft Bilişim Teknolojileri Ltd. and can in no way be taken to reflect the views of the European Union.

2 İçerik Bölüm 4: PHP de Form İşlemleri 1. HTML ile Veri Giriş Formu Oluşturmak Form gönderme metodları (GET ve POST) arasındaki farklar Oluşturulan formu kontrol etmek Form ile kullanıcı girişi

3 1. HTML ile Veri Giriş Formu Oluşturmak PHP de Form İşlemleri Formlar ziyaretçilerden bilgi almak için kullanılan HTML elemanlarından biridir. Formları tagları arasında oluştururuz. Formlar, ziyaretçilerin belirtilen alanları doldurup gönder düğmesine basmaları ile bilgilerin gönderilmesi esasına göre çalışır. Form bilgilerinin bize ulaşmasını php, asp, perl/cgi gibi diller sağlar. Yani formları kullanabilmek için bu dillerden en az biri hakkında bilginiz olması lazım. Biz bu kursta php kullanacağız. Bir form örneği yapalım: <form name="xyz" method="post yada get" action="xxx.cgi"> Yukardaki form örneğinde "method=post veya get" verilen form bilgilerinin server tarafından hangi yöntem ile iletileceğini belirten yöntemdir. "name=xyz" ile formumuza bir ad tanımlarız. "action=xxx.cgi" ise bilgileri gönderen programın adı ve uzantısını gösterir. 1.1 Form Elemanları Form oluştururken tagları arasında <input> elemanını kullanırız. Bu elemanın kapanış etiketi(</input>) yoktur. <input> elemanın aldığı özellikleri inceleyelim; <input type="xxx" name="yyy" value="zzz" size="13"> type= Form öğesinin ne olduğunu belirtir.(metin kutusu,onay düğmesi,vb.) name= Oluşturduğumuz öğenin adını belirtir. Çok önemlidir. value=eğer değer vermek istersek kullanırız. size=form öğesinin karakter uzunluğunu belirtir. Bunların dışında "maxlength" öğesi kullanılarak metin kutusunun maximum uzunluğu belirlenebilir. Ayrıca her zaman "value", "maxlength", "size" gibi öğelerini kullanamak zorunda değiliz. <input> elemanında "type" öğesinin aldığı değerler: text(metin kutusu) password(parola alanı) radio(radyo düğmesi) checkbox(onay kutusu) button(düğme) submit(onay düğmesi) reset(reset düğmesi) file(dosya gönderme) Bu değerler dışında <input> elemanı ile kullanılmayan değerler de vardır. 2

4 Bunlar: textarea(metin alanı) : Kullanımı(<textarea> </textarea>) select(menü) : Kullanımı(<select> </select>) Tüm bu değerleri yakından inceleyelim. Text (Metin Kutusu) Yaratmak Ad : <input type="text" name="ad" value="adınız"> Soyad : <input type="text" name="soyad" value="soyadınız"> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "value" elemanını kullanmasaydık kutucuklar boş olacaktı. Ad : Adınız Soyad : Soyadınız Password (Parola Alanı) Yaratmak Kullanıcı Adı : <input type="text" name="ad"><br> Parola : <input type="password" name="sifre"> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Parola alanına yazdığınız yazılar ****** şeklinde gözükecektir. Kullanıcı Adı : Parola : Textarea (Metin Alanı) Yaratmak Kullanıcı Adı : <input type="text" name="ad"><br> Parola : <input type="password" name="sifre"><br> Düşünceler : <br> <textarea name="dusunceler" rows="3" cols="33"> Site Hakkındaki Görüşlerinizi Yazınız...</textarea> 3

5 Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "rows" dikey olarak, "cols" ise yatay olarak textarea(metin alanı)' nın büyüklüğünü gösterir. <textarea> </textarea> arasında kalan kısımda yazdıklarımız ise "value" elemanının yaptığı işi yapar. Kullanıcı Adı : Parola : Düşünceler : Site Hakkindaki Görüşlerinizi Yaziniz... Radio Buton(Radyo Düğmesi) Yaratmak Adınız : <input type="text" name="ad"><br> Soyadınız : <input type="text" name="soyad"><br> Cinsiyetiniz : <input type="radio" name="radyo" checked>erkek <input type="radio" name="radyo">kadın Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "name" elemanı dikkat ettiyseniz iki radio düğmesinde de aynı değeri almış. Eğer farklı olsalardı aynı anda iki radio düğmesi de seçilebilirdi. Daha iyi anlamak için "name" değerlerini aynı yapıp deneyin. Sonra farklı yapıp deneyin sonucu göreceksiniz. Ayrıca örneğimizde birinci radio düğmesinde "checked" elemanını kullandık. Bu eleman kullanıldığı radio düğmesini seçili hale getirir. Örneğimizde de bu birinci radio düğmesi oldu. Adınız : Soyadınız : Cinsiyetiniz : Erkek Kadın CheckBox (Onay Kutucusu) Yaratmak Kullanıcı Adınız : <input type="text" name="ad3" size="30"><br> Mail Adresiniz : <input type="text" name="soyad3" size="30"><br> Yeni Haberleri Mail ile Gönder : <input type="checkbox" name="cb" checked> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "checked" elemanı ile onay kutuğumuzu seçili hale getirdik. 4

6 Kullanıcı Adınız : Mail Adresiniz : Yeni Haberleri Mail ile Gönder : Select Menü(Menü Kutusu) Yaratmak Kullanıcı Adı : <input type="text" name="kulladi3"><br> Sisteminiz : <select name="menu" size="1"> <option value="on">linux</option> <option value="on" selected>windows</option> <option value="on">macintosh</option> </select> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Menü yaratırken <input> elemanını kullanmıyoruz. Menülerimizi <select> </select> elemanları arasında oluşturuyoruz. name ile menümüzü isimlendiriyoruz, size ile menümüzün yüksekliğini belirliyoruz. (size değeri ile alıştırma yapmalısınız.) <option> </option> ise arasında menümüzde bulunacak elemanları bulunduruyor. value ile bu elemanlara değer veriyoruz. Dikkat ettiyseniz hazırladığımız menünün ikinci seçeneği seçili halde ekrana geliyor, bunu menümüzün ikinci seçeneğindeki selected ile sağlıyoruz. Bir örnek daha yapalım. Bu sefer size elemanına değer olarak "3" verelim ve menümüzün nasıl göründüğünü inceleyelim. Kullanıcı Adı : <input type="text" name="kulladi4"><br> İşletim Sistemi : <select name="menu" size="3" multiple> <option value="on">windows-98</option> <option value="on">windows-2000</option> <option value="on">windows-xp</option> <option value="on">macosx</option> <option value="on">pardus</option> </select> 5

7 <select> </select> elemanları arasında kullandığımız multiple sayesinde yaptığımız menüde birden fazla seçenek seçebiliyoruz. File Upload (Dosya Yüklemek) Etmek Adınız : <input type="text" name="ad1"><br> Dosyanız : <input type="file" name="dosya"> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Submit Button (Gönder Düğmesi) Yaratmak <p align="center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <input type="submit" name="dugme" value="gönder"> </p> Oluşturduğumuz düğme doldurulan form bilgilerini göndermek içindir. value değeri düğmenin üstünde yazıcak yazıyı belirler. Submit Button için düğme yerine resim de kullanabiliriz. Yani seçtiğimiz resme tıklayınca form gönderilir. Bir örnekle göstereyim. <p align="center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <input type="image" name="dugme"> </p> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. 6

8 Reset Button (Sil Düğmesi) Yaratmak <p align="center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <input type="reset" name="dugme" value="gönder"> </p> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Oluşturduğumuz düğme doldurulan form bilgilerini temizlemek içindir. value değeri düğmenin üstünde yazıcak yazıyı belirler. Reset Button için düğme yerine resim de kullanabiliriz. Yani seçtiğimiz resme tıklayınca form temizlenir. Bir örnekle göstereyim. <p align="center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <button type="reset"> <img src="pix/dugme.gif" name="hebee" width="45" height="25"> </button> </p> Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. 7

9 2. Form gönderme metodları (GET ve POST) arasındaki farklar İki tane metodumuz var, bunlar GET ve POST. İkiside formumuzdaki verileri PHP scriptimize göndermeye yarıyor. Tek farkları verileri gönderme yolları. Eğer metod olarak GET i seçersek formu gönderdiğimizde PHP dosyamızın adı index.php ise adres çubuğunda gönderdiğimiz değerler yazacaktır. Örneğin: şeklinde olacaktır. POST seçtiğimizde ise GET de olduğu gibi gönderdiğimiz veriler adres çubuğundan değilde browser üzerinden gönderilir. Yani seçtiğimzi PHP sayfasına içten gönderilir, aynı cookie ve sessionlar gibi. Örnekler ile gösterelim: index.php adında bir dosya oluşturalım ve içerisine aşağıdaki kodu ekleyelim. 1 echo $_GET['isim']; Ve bu sayfaya index.php?isim=musa şeklinde girelim. Xampp kullanıyorsanız şeklinde olacaktır. Sonuç olarak ekranda adres çubuğunda belirttiğimiz isim değeri yani musa yazar. GET metodunu kullanmak için bir forma ihtiyaç yoktur fakat POST metodu yanlızca bir form ile gönderilir. Bir örnek daha yapalım, bu sefer bir matematik işlemi yaptıralım: carp.php adında bir dosya oluşturuyoruz ve aşağıdaki kodları yazıyoruz: $sayi = $_GET['x']; $sonuc = $sayi *5; echo $sonuc; carp.php?x=10 şeklinde girdiğimizde ekranda 50 yazacaktır. Adres çubuğuna yazacağımız her x değerini 5 ile çarpıp ekrana yazacaktır. 3. Oluşturulan formu kontrol etmek Bir formun verilerini işlemeden önce bize form ile veri gönderilip gönderilmediğini ya da gönderilen değerlerinin boş olup olmadığını kontrol etmemiz gerekiyor. Bunun içinde if ifadesini, isset() ve empty() fonksiyonunu kullanacağız. İlk olarak basit bir form yapalım, dosyamızın adı giris.php olsun, buradan kontrol.php ye veri göndereceğiz: 8

10 giris.php <form action="kontrol.php" method="post"> Kullanıcı:<br/> <input type="text" name="kullanici" /><br/> Şifre:<br/> <input type="password" name="sifre" /><br/> <input type="submit" value="giriş yap" /> Şimdide kontrol.php nin içeriğini kodlayalım ve kontrolümüzü yapalım: kontrol.php <?php if(isset($_post['kullanici']) && isset($_post['sifre'])) { $kullanici = $_POST['kullanici']; $sifre = $_POST['sifre']; if(empty($kullanici) empty($sifre)) { echo 'Lütfen boş bırakmayın'; } else { echo 'Girilen kullanıcı adı: '. $kullanici. ' şifre: '. $sifre; } } else { echo 'Lütfen formu kullanın'; }?> İlk koşulda isset($_post['kullanici']) && isset($_post['sifre']) $_POST['kullanici'] ve $_POST['sifre'] diye bir değişken tanımlanmış mı diye sorduk. Eğer ikiside tanımlanmış ise bu ifadenin kod bloğuna yazdığımız ikinci bir koşul daha devreye giriyor ve bu sefer gönderilmiş olan verilerin boş olup olmadığına bakıyor. İkinci koşulda empty($kullanici) empty($sifre) $kullanici değişkeninin değeri boşsa ya da $sifre değişkeninin değeri boşsa diye bir koşul tanımlıyoruz. Eğer ikisinden birisinin içeriği boşsa bu sefer ekrana uyarı olarak Lütfen boş bırakmayın yazdırıyoruz. Eğer ikiside boş değilse bu seferde ekrana forma yazdığımız kullanıcı adı ve şifre çıkıyor. 9

11 4. Form ile kullanıcı girişi Bu konudan ayrılmadan önce basit bir örneklede kullanıcı girişi olayını göstermek istiyorum. Veritabanı ve fazla detaya girmeden session ve form kullanarak bir kullanıcı girişi olayı yapalım. Yukarıdaki giris.php örneğindeki formu kullanalım. O form bize kullanici ve sifre adında iki veri gönderilmesini sağlıyordu. Bunun yanında biz bir kontrol ve bir de panel sayfası yapacağız. Kontrol sayfasında gönderilen kullanıcı adı ve şifrenin bizde kayıtlı kullanıcı adı ve şifre ile aynı olup olmadığına bakacağız, eğer bizdekiler ile aynı ise bu değerleri session ile kaydedeceğiz sonrasında panel.php ye gönderip giren kişinin giriş yapıp yapmadığını kontrol edip ona göre kullanıcıya özel olan sayfayı göstereceğiz. kontrol.php <?php if(isset($_post['kullanici']) && isset($_post['sifre'])) { // form gönderilmiş mi $kullanici = $_POST['kullanici']; $sifre = $_POST['sifre']; if(empty($kullanici) empty($sifre)) { // gönderilenler boş mu echo 'Lütfen boş bırakmayın'; } else { if($kullanici == 'musa' && $sifre == '123456') { // bilgiler doğru mu session_start(); $_SESSION['kullanici'] = 'musa'; $_SESSION['sifre'] = '123456'; echo 'Giriş yaptınız! Şimdi panel.php ye girebilirsiniz.'; } else { echo 'Yanlış kullanıcı adı ya da şifre'; } } } else { echo 'Lütfen formu kullanın'; }?> Burada bir önceki örnekteki form kontrol etme ifadelerinden sonra ekstra olarak bir gönderilenlerin tam olarak ne olduğunu da kontrol eden bir ifade ekledik. Eğer değerler boş değilse ve istediğimzi değerlere eşit ise session başlatıp kullanici ve sifre adında iki adet session oluşturduk. Bu oluşturduğumuz session değerlerinin içerisine yine şifremizi kaydettik. Bu bilgiler browser kapatılana kadar silinmeyeceği için bu süreç içinde kullanıcı oturum yapmış şekilde gözükecek ve panel.php ye girdiğinde ona kullanıcı içeriğini gösterecektir. 10

12 panel.php <?php session_start(); // session kullanımı başlattık if(isset($_session['kullanici']) && isset($_session['sifre'])) { // bu sefer sessionlar tanımlanmış mı diye //bakıyoruz if($_session['kullanici'] == 'musa' && $_SESSION['sifre'] == '123456') { echo 'Panele hoşgeldiniz! Bu yazıyı sadece giriş yapmış kişiler görebilir.'; } else { session_destroy(); // bilgileri yanlış olduğu için sessionlar silinir echo 'Bilgileriniz yanlış, buraya yanlızca giriş yapmış kişiler girebilir'; } } else { echo 'Sadece giriş yapmış kişiler görebilir'; }?> Örnek 2. Simdi de daha detaylı bir örnek inceleyeceğiz. Bu örnek dersin slaytlarından alınmıstır. Lütfen aşağıdaki kod parcalarını çalıştırıp inceleyiniz ve çalıştırınız. Form.html <html xmlns = " <head> <title>sample form to take user input in XHTML</title> </head> <body> <h1>this is a sample registration form.</h1> Please fill in all fields and click Register. <!-- post form data to form.php --> <form method = "post" action = "form.php"> <img src = "images/user.gif" alt = "User" /><br /> <span style = "color: blue"> Please fill out the fields below.<br /> </span> <!-- create four text boxes for user input --> <img src = "images/fname.gif" alt = "First Name" /> <input type = "text" name = "fname" /><br /> <img src = "images/lname.gif" alt = "Last Name" /> <input type = "text" name = "lname" /><br /> 11

13 <img src = "images/ .gif" alt = " " /> <input type = "text" name = " " /><br /> <img src = "images/phone.gif" alt = "Phone" /> <input type = "text" name = "phone" /><br /> <span style = "font-size: 10pt"> Must be in the form (555) </span> <br /><br /> <img src = "images/downloads.gif" alt = "Publications" /><br /> <span style = "color: blue"> Which book would you like information about? </span><br /> <!-- create drop-down list containing book names --> <select name = "book"> <option>internet and WWW How to Program 3e</option> <option>c++ How to Program 4e</option> <option>java How to Program 5e</option> <option>xml How to Program 1e</option> </select> <br /><br /> <img src = "images/os.gif" alt = "Operating System" /> <br /><span style = "color: blue"> Which operating system are you currently using? <br /></span> <!-- create five radio buttons --> <input type = "radio" name = "os" value = "Windows XP" checked = "checked" /> Windows XP <input type = "radio" name = "os" value = "Windows 2000" /> Windows 2000 <input type = "radio" name = "os" value = "Windows 98" /> Windows 98<br /> <input type = "radio" name = "os" value = "Linux" /> Linux <input type = "radio" name = "os" value = "Other" /> Other<br /> 12

14 <!-- create a submit button --> <input type = "submit" value = "Register" /> </body> </html> Hazırladığınız HTML formu ekranda şu şekilde görünecektir: Form.php <html xmlns = " <head> <title>form Validation</title> </head> <body style = "font-family: arial,sans-serif"> <?php extract($_post); // determine whether phone number is valid and print 13

15 }?> // an error message if not if (!ereg( "^\([0-9]{3}\)[0-9]{3}-[0-9]{4}$", $phone ) ){ print( "<p><span style = \"color: red; font-size: 2em\"> INVALID PHONE NUMBER:</span><br /> A valid phone number must be in the form <strong>(555) </strong><br /> <span style = \"color: blue\"> Click the Back button, enter a valid phone number and resubmit.<br /><br /> Thank You.</span></p></body></html>" ); die(); // terminate script execution <p>hi <span style = "color: blue"> <strong> <?php print( "$fname" );?> </strong> </span>. Thank you for completing the survey.<br /> You have been added to the <span style = "color: blue"> <strong> <?php print( "$book " );?> </strong> </span> mailing list. </p> <strong>the following information has been saved in our database:</strong><br /> <table border = "0" cellpadding = "0" cellspacing = "10"> <tr> <td bgcolor = "#ffffaa">name </td> <td bgcolor = "#ffffbb"> </td> <td bgcolor = "#ffffcc">phone</td> <td bgcolor = "#ffffdd">os</td> </tr> <tr> <?php // print each form field s value print( "<td>$fname $lname</td> <td>$ </td> 14

16 <td>$phone</td> <td>$os</td>" );?> </tr> </table> <br /><br /><br /> <div style = "font-size: 10pt; text-align: center"> This is only a sample form. You have not been added to a mailing list. </div> </body> </html> 15