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 2:Server Side Internet Programming Modül 2: Sunucu Tarafı Internet Programlaması Laboratuar Notları 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.
İçerik Bölüm 10: Java Server Faces (JSF)...2 1. Örnek 1: Hello Name Uygulaması...3 2. Örnek 3: Database e bağlantı kurma...10 3.1 Uygulama 2: Database den form aracılığıyla sorgulama yapma...11 3.2 Uygulama 3: Database e form aracılığıyla insert ve delete yapma...13 2
Örnek 1. 1. Proje Yaratma 1. Ana menüden File > New Project seciniz 2. New Project wizard açılacaktır. Java Web kategorisinden Web Application project tipinin seçiniz venext e basiniz. 3. Projenize JSFBaslangic ismini veriniz ve Next e basınız. 4. Glassfish serveri ve Java EE 5 versiyonunu seçiniz ve Next e basınız. 3
5. Daha sonra Frameworks panelinden, Visual Web JavaServer Faces seçiniz ve Finish e basınız. 4
6. Karşınıza şöyle bir ekran açılacaktır. 7. JSFBaslangici projemizi Project kismindan bulunuz. Daha sonra Web Pages kismini actiginiz zaman Page1.jsp goreceksiniz. Netbeans IDE bunu default page olarak yaratip, baslangic sayfasi yapar. 5
2. Web Sayfasini duzenleme: 1. Asagidaki gibi bir web sayfasi duzenleyebilmek icin yan taraftaki Pallette kismindaki elemanlari kullanark add-drop yontemiyle yapacagiz. 2. 3. Bunun icin oncelikle Properties penceresine Ctrl + Shift + 7 basarak aciniz ve title kismina helloweb yaziniz ve Properties penceresini kapatiniz. 4. Daha sonra Pallete kismini aciniz. Eger acik degilse acmak icin Window -- > Pallete seciniz. 5. Palette kismindan bir tane Label alip design penceresine drag-drop yapiniz ve icine Name: yaziniz. 6. Palette kismindan bir tane TextField alip design penceresine drag-drop yapiniz ve icine Enter Your Name yaziniz. Daha sonra Ctrl + Shift + 7 ye basarak Properties penceresini aciniz. Properties penceresindeki id kismini textfield1 den namefield olarak degistiriniz. Daha sonra Text Field uzerinde sag-tik yapiniz ve Add Binding Attribute e basiniz. 6
Not: add binding attribute yaptiginizda, o component icin Netbeans IDE getter ve setter metodlarini yaratir. 7. Daha sonra Label componentin Properties (Ctrl + Shift + 7) penceresini aciniz. For kismindan namefield seciniz. 8. Palette kismindan bir tane Button aliniz ve Textfield in sagina koyunuz. Icine de Say Hello yaziniz ve Enter e basiniz. 9. Buton uzerinde sağ-tık yapiniz ve Add Binding Attribute seciniz.. 10. Buton un Properties penceresinden id sini Button1 den hellobutton olarak değiştiriniz. 11. Label in altına Palette pencerisnden aldığınız Static Text i koyunuz. 12. Static text in Properties penceresini kullanarak id sini statictext1 den hellotext olarak değiştiriniz. 13. Static text uzerinde sag-tik yapiniz ve Add Binding Attribute seciniz.. 14. Static text in altina bir tane message Group koyunuz. 3. Bazi Ozellikler Ekleme Bu bolumde, sayfanın Hello girilen-isim mesajını verebilmesi için bir kod parçası ekleyeceğiz. Bunu yapabilmek için bir tane event handler ekleyecegiz. Bu event handler butona basıldığında uygulamayı cağıracaktır ve Static Text componentinin text özelliğini "hello" mesajına cevirecektir. 1. Editing toolbar da, Design tabına basıp Visual Designer a dönünüz. 2. Buton componentinin üzerine iki kere tıklayınız. Editing alanı Java Editor e dönecektir ve Page1 in page bean ini gösterecektir. hellobutton_action event handler I page been e eklenecektir. 3. hellobutton_action metoduna aşağıdaki kod parçasının bold olarak gösterilen kısmını kopyalayıp yapıştırınız. Daha sonra formatını düzeltmek için Alt-Shift-F basınız. 4. Kod örneği 1: hellobutton_action() kodu 7
public String hellobutton_action() { String name = (String)nameField.getText(); hellotext.settext("hello, " + name + "!"); return null; 5. Bold olarak görünen 1. Satır namefield Text Field componentinin text özelliğinin değerini gettext metodunu kullanarak alınmasını sağlar ve değerini name değişkenine atar. 6. Bold olarak görünen 2. Satır ise hellotext Static Text componentinin text özeliğininin değerini set etmek için kullanılır. Bu değer kullanıcın namefield Text Field componentine isimdir. Mesela kullanıcı Ayşe girerse, bu kod satırı Static Text component's text özelliğini Hello, Ayşe! olarak değiştirir. 4. Uygulamayı Çalıştırma 1. Java editoründe herhangi bir hata olmadığından emin olduktan sonra Run Main Project butonuna basınız. 2. Textfield e isminizi giriniz ve Say Hello butonuna basınız. "Hello girilen-sim" ekranda görünecektir. Internet tarayıcısı formu sizing uygulamanızı çağıran web server e gönderir. Uygulama buton action metodunu çalıştırır, sayfadaki diğer ögeleri update eder, ve aynı sayfayı değişen bilgilere göre düzenleyip, sayfayı internet tarayıcısına geri gönderir. 5. Text Field i Drop Down Listesiyle değiştirme Bu kısımda kullanıcıdan bilgi almak için Textfield yerine Drop Down Listesi nasıl kullanacağımızı göreceğiz. Drop Down Listesi seçeneklerini studentrecord database inden alacaktır. Figure 4: : Hello Web, Final Version 1. Editing toolbarında, Design tabına basıp Visual Designer a dönünüz. 2. Visual Designer da, namefield Text Field componentinin üzerinde sağ-tık yapıp Delete i seçiniz. 3. Palette den bir tane Drop Down List component alınız ve eskiden Text Field componentinin olduğu yere koyunuz. Navigator aşağıdaki gibi değişecektir. 8
Figure 5: Components in the Navigator Window 4. In the Properties penceresinden, id sini namedropdown olarak değiştiriniz. Label componentinden Drop Down List componentine Ctrl-Shift-Drag yapınız. Bu islemden sonra Label componentininproperties penceresinden bakarsanız for özelliği namedropdown olarak değişmiştir. 6. Drop Down Listesini Database Tablosuna bağlama Sol taraftaki kısmıdan Services penceresine geçiniz.burada bütün Database bağlantıları görünmektedir. Biz bu uygulamada studentrecords database ini Drop down listesine seçenek sağlamak için kullanacağız. 1. Öncelikle Services penceresinden, studentrecord database inin bağlı olup olmadığını control ediniz. Eğer bağlı değilse, studentrecord jdbc üzrinde sağ-tık yapıp Connect I seçiniz. Passwordunuzu giriniz ve OK basınız. 9
Figure 6: Services Window 2. Services penceresinden studentrecordu çekip, Drop Down Listesinin üzerine koyunuz. 1. Drop Down Listesi item 1 den abc olarak değişecektir. 2. Netbeans IDE database tablosu için görünmeyen bir persondataprovider yaratmaktadır. Navigator penceresinden persondataprovider i görebilirsiniz. 3. Netbeans IDE aynı zamandasessionbean1 e personrowset özelliği eklemektedir. 3. Drop Down Listesi üzerinde sağ-tık yapınız ve Bind to Data yı seçiniz. Bind to Data dialog kutusu açılacaktır. 10
Figure 7: Binding Data to the Drop Down List 4. When you bind data to a Drop Down List component, you must specify what to display in the list (the Display Field) and you must specify what values to use in the underlying program (the Value Field). Typically, you want to display some meaningful value from the database table, such as a person's name, but you want to use a unique identifier in the underlying program, such as the person's ID. With this application, however, you want to bind both the Value field and the Display field to the same database column, the PERSON.NAME column, as described in the next two steps. 5. Set the Value field in the dialog box to PERSON.NAME, leave the Display field set to PERSON.NAME, and click OK. Adding Some Behavior 1. In the Visual Designer, double-click the Button component. The Editing Area switches to the Java Editor and moves to the hellobutton_action method. 2. Replace the body of the hellobutton_action method with the following code (shown in bold). Code Example 2: hellobutton_action Replacement Code public String hellobutton_action() { String name = (String)nameDropDown.getSelected(); String splitnames[] = name.split(","); hellotext.settext("hello, " + splitnames[1] + "!"); return null; 3. 4. The first line uses the getselected method to get the current value of the Drop Down List, which is the currently selected name in the list. 5. Because data is stored in the database as lastname, firstname, the string must be modified before it is displayed. Otherwise, the application will print "Hello, lastname, firstname!" The second line uses the split method to split the string into an array, using the comma as a 11
delimiter. The first item in the array (at position 0) contains the last name, and position 1 contains the first name. 6. In the third line, the text property for the Static Text component is set to a value that includes the first name. 7. Note: This method assumes that all values in this table are in the format lastname, firstname. It does not robustly handle strings that do not follow this format. 8. Add the following code to the prerender method. This code sets the first item in the list as the default selection. Code Sample 3: prerender Method Code public void prerender() { // If no selection, set default selection if (namedropdown.getselected() == null) { persondataprovider.cursorfirst(); namedropdown.setselected ((String)personDataProvider.getValue("person.name")); } } Running the Application 1. Click the Run Main Project button. The IDE builds and deploys the application and displays the page in the web browser. 2. Select a name from the list and click Say Hello. The browser sends the Drop Down List component's selected value to the server, and the server executes the button's hellobutton_action method. 12