Anasayfa » Genel, Java ve Java Teknolojileri

Eclipse Üzerinde Tomcat-JSF-Primefaces-JPA Hibernate Kullanarak Web Uygulaması Geliştirme

22 Aralık 2012 13.151 kez okundu 9 yorum
1 Star2 Stars3 Stars4 Stars5 Stars (2 oy,5 üzerinden : 5,00 )
Loading...

jsf_logo

Merhaba arkadaşlar, bugünkü yazımda eclipse üzerinde jsf, primefaces, hibernate ve tomcat kullanarak full web uygulaması geliştireceğim. Öncelikle kurulumlardan bahsedip, arkasından basit bir örnek yapacağım.

Kullanacağım teknolojiler şunlar;

  • Eclipse Juno
  • Jsf 2.0
  • Primefaces 3.3.1
  • Hibernate 3
  • Mysql Connector 5.0
  • Tomcat 7
  • Wampserver 2.2

Yazımızın sonunda hazırladığım tüm kodları ve kullandığım tüm kütüphaneleri paylaşacağım.

Uygulamamıza eclipse üzerinde proje başlatarak başlayalım.

New -> Dinamic Web Project
Project Name: FullWebKodMerkeziNet
Target runtime: Apache Tomcat v7.0 (Eğer 7 yok ise yanında bulunan new runtime ile indirebilirsiniz)
Dinamic web module version: 3.0
Finish.

FullWebKodMerkeziNet/WebContent/WEB-INF/lib altına ilgili kütüphaneler kopyalanır. (Kütüphaneleri yazı sonunda paylaştığım uygulamanın içerisinde bulabilirsiniz.) Kopyalanan bütün kütüphaneler eclipse üzerinde seçilir.

Sağ tık -> Build Path -> Add to Build Path diyerek uygulamaya dahil edilir.

/WebContent/ altına “pages” adında klasör açılır. /WebContent/pages/ altına index.xhtml adında dosya oluşturulur.

index.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
	<h:head>
		<f:facet name="first">
			<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
			<title>FullWebKodMerkeziNet</title>
		</f:facet>
	</h:head>
 
	<h:body>
		<h:form>
			<p:panel id="panel" header="Yeni Makale" style="margin-bottom:10px;">
				<p:messages id="messages" />
				<h:panelGrid columns="2">
					<h:outputLabel for="baslik" value="Makale Başlığı" />
					<p:inputText id="baslik" required="true"
						value="#{makaleManaged.makale.baslik}" />
 
					<h:outputLabel for="icerik" value="Makale İçeriği" />
					<p:inputText id="icerik" value="#{makaleManaged.makale.icerik}"
						/>
 
					<h:outputLabel for="yazar" value="Yazar" />
					<p:inputText id="yazar" value="#{makaleManaged.makale.yazar}" />
				</h:panelGrid>
			</p:panel>
 
			<p:commandButton value="Kaydet" update="panel"
				style="margin-right:20px;" action="#{makaleManaged.makaleKaydet}" />
 
		</h:form>
 
 
	</h:body>
</f:view>
</html>

Java Resources/src altına net.kodmerkezi.managed paketi açılır. Java Resources/src/ net.kodmerkezi.managed/ altına MakaleManaged.java oluşturulur.

Java Resources/src altına net.kodmerkezi.entity paketi açılır. Java Resources/src/net.kodmerkezi.entity/ altına Makale.java oluşturulur.

MakaleManaged.java

package net.kodmerkezi.managed;
 
import java.util.List;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import javax.persistence.criteria.CriteriaQuery;
 
import net.kodmerkezi.entity.Makale;
/**
 * 
 * @author Gürcan Kavakçı
 *
 */
@ManagedBean
@RequestScoped
public class MakaleManaged {
	private Makale makale;
	private List<Makale> makaleler;
 
	EntityManagerFactory emf = Persistence
			.createEntityManagerFactory("FullWebKodmerkeziNetPU");
	private EntityManager em;
 
	public Makale getMakale() {
		return makale;
	}
 
	public void setMakale(Makale makale) {
		this.makale = makale;
	}
 
	public MakaleManaged() {
		if (this.makale == null) {
			this.makale = new Makale();
			this.makale.setYazar("Gürcan Kavakçı");
			// TODO Auto-generated constructor stub
		}
	}
 
	public String makaleKaydet() {
 
		System.out.println("Makale kaydedildi");
 
		EntityManager em = emf.createEntityManager();
 
		em.getTransaction().begin();
 
		em.persist(this.makale);
 
		em.getTransaction().commit();
 
		em.close();
		emf.close();
 
		return "makaleler";
 
	}
	@SuppressWarnings({ "unchecked", "rawtypes" })
	public List<Makale> getMakaleler() {
		if (makaleler == null) {
 
			EntityManager em = emf.createEntityManager();
			CriteriaQuery cq = em.getCriteriaBuilder().createQuery();
			cq.select(cq.from(Makale.class));
			return em.createQuery(cq).getResultList();
 
		}
 
		return makaleler;
	}
 
	public void setMakaleler(List<Makale> makaleler) {
		this.makaleler = makaleler;
	}
	public void resetMakale()
	{
		makale = new Makale();
	}
 
}

Makale.java

package net.kodmerkezi.entity;
 
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
/**
 * 
 * @author Gürcan Kavakçı
 *
 */
@Entity
public class Makale {
	private static final long serialVersionUID = 1L;
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private Long id;
	private String baslik;
	@Column(length=100000)
	private String icerik;
	private String yazar;
 
	public Long getId() {
		return id;
	}
 
	public void setId(Long id) {
		this.id = id;
	}
 
	public String getBaslik() {
		return baslik;
	}
 
	public void setBaslik(String baslik) {
		this.baslik = baslik;
	}
 
	public String getIcerik() {
		return icerik;
	}
 
	public void setIcerik(String icerik) {
		this.icerik = icerik;
	}
 
	public String getYazar() {
		return yazar;
	}
 
	public void setYazar(String yazar) {
		this.yazar = yazar;
	}
 
	public static long getSerialversionuid() {
		return serialVersionUID;
	}
 
	@Override
	public int hashCode() {
		int hash = 0;
		hash += (id != null ? id.hashCode() : 0);
		return hash;
	}
 
	@Override
	public boolean equals(Object object) {
		// TODO: Warning - this method won't work in the case the id fields are
		// not set
		if (!(object instanceof Makale)) {
			return false;
		}
		Makale other = (Makale) object;
		if ((this.id == null && other.id != null)
				|| (this.id != null && !this.id.equals(other.id))) {
			return false;
		}
		return true;
	}
 
	@Override
	public String toString() {
		return "net.kodmerkezi.entity[ id=" + id + " ]";
	}
}

Proje Properties (proje sağ tık) -> Project Facets -> Java Server Faces -> 2.0 -> further configuration  available -> Type: Disable Library Configuration -> OK -> Apply -> OK

WebContent/WEB-INF/web.xml şu şekilde duzenlenir.

<?xml version="1.0"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
	<display-name>FullWebKodmerkeziNet</display-name>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>/pages/index.xhtml</welcome-file>
	</welcome-file-list>
	<context-param>
		<param-name>javax.faces.PROJECT_STAGE</param-name>
		<param-value>Development</param-value>
	</context-param>	
</web-app>

Java Resources/src altına META-INF adında klasörü açılır. İçine persistence.xml oluşturulur.

persistence.xml

<?xml version="1.0" encoding="UTF-8"?>
 
<persistence version="2.0"
	xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">
 
	<persistence-unit name="FullWebKodmerkeziNetPU" transaction-type="RESOURCE_LOCAL">
		<provider>org.hibernate.ejb.HibernatePersistence</provider>
 
		<properties>
			<property name="javax.persistence.jdbc.driver" value="com.mysql.jdbc.Driver" />
			<property name="javax.persistence.jdbc.url" value="jdbc:mysql://localhost:3306/fullweb?characterEncoding=UTF-8" />
			<property name="javax.persistence.jdbc.user" value="root" />
			<property name="javax.persistence.jdbc.password" value="" />
			<property name="hibernate.dialect" value="org.hibernate.dialect.MySQL5InnoDBDialect" />
			<property name="hibernate.connection.shutdown" value="true" />
			<property name="hibernate.hbm2ddl.auto" value="update" />
			<property name="hibernate.show_sql" value="true" />
			<property name="hibernate.format_sql" value="true" />
		</properties>
	</persistence-unit>
</persistence>

pages/ altına makaleler.xhtml oluşturulur.

makaleler.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
	<h:head>
		<f:facet name="first">
			<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
			<title>FullWebKodMerkeziNet</title>
		</f:facet>
	</h:head>
 
	<h:body>
		<p:dataTable id="makalelerTable" value="#{makaleManaged.makaleler}"
			var="makale" emptyMessage="Kayıt Yok" paginator="true" rows="10"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			rowsPerPageTemplate="5,10,15">
			<p:column>
				<f:facet name="header">
					<h:outputText value="Başlık" />
				</f:facet>
 
				<h:outputText value="#{makale.baslik}" />
			</p:column>
 
			<p:column>
				<f:facet name="header">
					<h:outputText value="Yazar" />
				</f:facet>
 
				<h:outputText value="#{makale.yazar}" />
			</p:column>
			<p:column>
				<p:commandButton value="Oku" icon="ui-icon-bullet"
					onclick="makaleDetailDialogWidget.show();"
					update=":makaleDetailDialogForm">
					<f:setPropertyActionListener target="#{makaleManaged.makale}"
						value="#{makale}" />
				</p:commandButton>
			</p:column>
 
		</p:dataTable>
		<ui:include src="/pages/makaleDetailDialog.xhtml" />
	</h:body>
</f:view>
</html>

pages/ altına makaleDetailDialog.xhtml oluşturulur.

makaleDetailDialog.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"
	xmlns:p="http://primefaces.org/ui">
<h:body>
	<p:dialog widgetVar="makaleDetailDialogWidget"
		id="otobusDetailDialogId" width="500" modal="true" closable="true"
		draggable="false" resizable="false">
		<h:form id="makaleDetailDialogForm" prependId="false">
			<p:panel header="#{makaleManaged.makale.baslik}" footer="#{makaleManaged.makale.yazar}">
				<h:outputText escape="false"
					value="#{makaleManaged.makale.icerik}" />
			</p:panel>
		</h:form>
	</p:dialog>
</h:body>
</html>

Bu aşamadan sonra veritabanınızda (ben wampserver üzerinde mysql ile çalışıyorum) “fullweb” adında database oluşturun. persistence xml  dosyasını kendi ayarlarınıza göre düzenleyin. Uygulamaya sağ tıklayarak -> Run As -> Run on Server seçeneği ile Tomcat 7 üzerinde başlatın. Daha sonra browser’ınızdan http://localhost:8080/FullWebKodMerkeziNet/ adresini açarak uygulamaya erişebilirsiniz.

Açılışta karşımıza yeni makale ekleyebileceğimiz alan geliyor.

jsf_yenimakale

Kaydettiğimizde tüm makalelerin listesini görebiliyoruz.

jsf_tummakale

Okumak istediğimiz makaleyi seçtiğimizde karşımıza ayrıntıları geliyor.

jsf_makaleayrinti

Arkadaşlar bugünlük bu kadar. Takıldığınız noktalar olursa yazabilirsiniz. Bir sonraki yazımda daha kompleks yapıları anlatacağım. İyi günler

Projenin kaynak kodlarını buradan indirebilirsiniz. Rar şifresi: www.kodmerkezi.net

<<< Önceki:

Sonraki: >>>


Facebookta Paylaş

9 yorum »

  • Mustafa dedi ki:

    teşekkürler,
    güzel paylaşım..

  • ender dedi ki:

    Merhaba,
    Programı indirerek tüm söylediklerinizi yaptım, fakat oku butonu aktif değil gibi görünüyor.. bastıgımda tepki vermiyor. bu konuda ne yapabilirim? eclipse üzerinden çalıştırdım..

  • Ozkan dedi ki:

    Merhaba, emeğiniz için şimdiden teşekkür ederim. Fakat kaynak kodları yüklediğiniz site yasaklanmış durumda. Başka bir yere yükleyebilir misiniz?

  • Caner dedi ki:

    Emeğinize sağlık.
    Kaynak kodlıarın linkini yenileyebilir misiniz?

  • uzeyr ozcan dedi ki:

    linkleri güncelleyebilir misiniz

  • hakan dedi ki:

    Oncelikle paylasim için tesekkurler.
    Projenin kaynak kodları ulasilamaz durumda. Kaynak kodları baska bir yere atabilirmisiniz
    (bu site uzerinde olması en guvenli yol)

  • Taha GÜR dedi ki:

    Linkleri güncelleyebilirmisiniz.

  • admin dedi ki:

    En kısa zamanda kontrol edeceğim.

  • Mehmet dedi ki:

    ender dedi ki:
    Merhaba,
    Programı indirerek tüm söylediklerinizi yaptım, fakat oku butonu aktif değil gibi görünüyor.. bastıgımda tepki vermiyor. bu konuda ne yapabilirim? eclipse üzerinden çalıştırdım.

    # 4 Haziran 2013 saat 13:50

    Sanırım senin hatan primefaces ile alakalı kullandığın commandButton’un
    ajax parametresini false olarak setlerseniz düzelir.

    İyi Çalışmalar

Yorum Bırakın!

Yorum yaz, yada kendi sitende trackback (Geri besleme) olarak ekle. Ayrıca RSS ile bu konuya üye olabilirsin. .

Nazik olun. Temiz tutun. Konu dışına çıkmayın. Spam yaratmayın.

Bu tagları kullanabilirsiniz:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bloğumuz gavatarı desteklemektedir. Kendi gavatarınızı edinmek için lütfen Gravatar a üye olun.