Gerekli teknolojiler
Eclipse in Helios 3.6.1 sürümünü sizde hangisi varsa
Mojarra 2.0 Jsf kütüphanesi // kesinlikle bulunmalı
Apache Tomcat 7.0.5 /6.0 da olabilir
*Öncelikle yeni bir Dynamic Web Project Açalım
*Karşımıza çıkan ilk ekranda projemizin adını girdikten sonra Configurasyon kısmındaki Modify seçeneğine tıklıyoruz.
*Çıkan ekranda şekilde görünen alanları işaretliyoruz. Jsf 2.0 kullandığımız için JavaServerFaces'in yanında 2.0 ın seçili olduğuna dikkat edin. Ok'e tıklayın Ben projemde Jpa bileşenleri kullanacağım için JPA configurasyonunu da ekledim.
*Daha sonra JPA configurasyonu yaptığımız için gelen JPA Facet sayfasında eğer hazırladığınız veritabanı ile önceden bağlantı kurmamışsanız. Add Connection'a tıklayın.
*Mysql' i seçip ve kuracağınız bağlantının adını yazarak ileri deyin.
*Daha sonra ilgili alanları doldurup veritabanı bağlantınızı kurun. JPA facet sayfasından next' e tıklayıp sonraki sayfaya geçin.
*JSF Capabilities sayfasında kullanıcı kütüphaneleri arasında eğer Jsf 2.0 Mojarra varsa yani önceden kurduysanız onu seçin yoksa da sağ taraftaki minik download simgesine tıkladığınızda, Jsf 2.0 kütüphanelerinin listelendiğini göreceksiniz. Majorra 2.0 jsf kütüphanesini aralarından seçip kolayca kurabilirsiniz.
Bu işlemde bittikten sonra finish'e tıklayın ve projeniz oluşsun.
*Projemizin WebContent klasörünün altındaki WEB-INF kısmına templates adında yeni bir klasör ekleyelim
*Templates klasörünün içine yeni bir xhtml dosyası oluşturacağız bunun için new html file' ı seçin.
*İlk xhtml dosyamız header.xhtml dosya adını yazın ve next diyin.
*New facelet header seçeneğini seçin finish diyin.
header.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:100%;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:36px;line-height:137px;background-color:#CCC;color:#009" align="center">*** jEclipse Sinema Rezervasyon Sistemi ***</div></body>
</html>
// div tagları arasını Dreamweaver da düzenleyebilirsiniz.
*Yine templates klasöründe footer.xhtml adında bi dosya yaratın ve bu sefer New Facelet Footer seçeneğini seçin.
footer.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<div style="width:100%;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:20px;line-height:30px;background-color:#CCC;color:#333"
align="center">copyRight 2011</div>
</body>
</html>
*Templates klasörünün içine bu sefer de BasicTemplate.xhtml adında bir dosya üretin ve New Facelet Template seçeneğini seçin.
BasicTemplate.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Facelets Tutorial</ui:insert></title>
</head>
<body leftmargin="160" rightmargin="160" text="#333333" style="font:'Trebuchet MS', Arial, Helvetica, sans-serif" bgcolor="#F5F5F5" link="#333333" vlink="#666666" alink="#333333" >
<div >
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
</div>
<div >
<ui:insert name="menu">
<ui:include src="/WEB-INF/templates/menu.xhtml"/>
</ui:insert>
</div>
<div >
<ui:insert name="content">
</ui:insert>
</div>
<div >
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
*WebContent klasöründe index.xhtml adında yeni bir xhtml dosyası oluşturun bu sefer New Facelet Composition Page'i seçin.
index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="WEB-INF/templates/BasicTemplate.xhtml"> // kullanacağımız template'in bulunduğu yeri gösteren satır. İstediğimiz sayfaya bu şekilde templateimizi çağırabiliriz.
<ui:define name="content">
<h1></h1>
<h1></h1>
jEclipse Sinemaları Online Sinema Rezervasyon Sistemine Hoşgeldiniz!!! <h1></h1>
jEclipse sinemaları uzun yıllardır sürdürdüğü hizmet kalitesi ve uzman personeli ile en çok tercih edilen sinemalar arasındadır.
Sistemimizde Bilet Sorgulama sayfasından istediğiniz gün ve seansa ait koltuk bilgisini sorgulayıp dilerseniz hemen satın alabilirsiniz. Ya da eğer rezervasyonu kaydedip daha sonra almayı tasarlıyorsanız. Size verilecek rezervasyon numarasını not edip. Daha sonra kararınızı verdiğinizde ya bilet satın alma sayfasından rezervasyonun numaranızı sorgulayarak ya da şubelerimizden, seansın başlamasına 2 saat kalana kadar satın alma işleminizi tamamlayabilirsiniz.
*<p> </p>
*<p> </p>
</ui:define>
</ui:composition>
</html>