كيفاش تدير form validation ب jsf

imadbelasri Java
JA

فأول درس من jsf غادي نشوفو كيفاش نديرو form validation ب jsf فالناس لي مكتعرفش شنو هي jsf هي un framework ديال java كتمكن من بناء des applications web وفهاد الدرس البسيط غادي نشوفو كيفاش نقادو فورم كيدخل المستخدم المعلومات وكيتعرضو ف une autre page من بعد مكنديرو ل validation ديال الفورم.


نظرة سريعة بالفيديو


1- الملف form.xhtml

أول حاجة غادي تدير غادي ت télécharger eclipse من هنا منبعد غادي ت télécharger tomcat من هنا من بعد مت installer les deux غادي تفتح eclipse من بعد تزيد project جديد اختار Dynamic Web Project من بعد غادي ت télécharger هاد ل lib javax.faces-2.2.8.jar من هنا من بعد متحملها غادي تزيدها فالمجلد lib لي غادي تلقاه ف WebContent->WEB-INF من بعد غادي تزيد ملف جديد غادي دير click ب droit ديال la souris على WebContent منبعد new منبعد اختار HTML file سميه form.xhtml منبعد اختار New Facelet Template منبعد ميتزاد امسح الكود لي فيه وغادي نزيدو فيه كود جديد كيربط ل app بbootstrap منبعد عندي الفورم ديالي فالفرق بين structure jsf وstructure html كنزيد فقط :h فكل tag فكنفتح الفورم منبعد كنزيد inputText كنعطيها الvalue ديال student.firstname لي غادي تكون عندي ف class سميتها student غادي نزيدوها من بعد ثم كاين ميساج لي كيتعرض يلا كان الحقل خاوي ونفس الشي بالنسبة للحقول الأخرى الفرق فقط فالإمايل وكلمة المرور لي كنعطيهم validateLength لي كتحدد الmin ول max ديال الحقل والهاتف لي خدمت ب regular expression باش حددتلو كيفاش خصو يتكتب وهنا عطيناه الفورم ديال 2 اعداد مفروقين ب - منبعد عندي ال bouton لي ملي كنكليكي عليها كتديني للملف reponse لي غادي نزيدوه من بعد الكود ديال الملف هو:

                                                    
                                                        <!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:a="http://xmlns.jcp.org/jsf/facelets" >
<h:head>
  <title>Form Validation</title>
  <style>
  		.container{
  			margin-top:30px;
  		}
  </style>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</h:head>

<h:body>
  <div class="container">
  	<div class="row">
		<div class="col-md-6 col-md-offset-3">
			<h:form>
			     <div class="form-group">
			     	  <label for="nom">Nom :</label>
			     	  <h:inputText id="nom" class="form-control" value="#{student.firstname}" label="Nom" required="true" requiredMessage="Veuillez entrer votre nom"/>
			          <h:message for="nom"  class="text-danger"/>
			     </div>
				 <div class="form-group">
				 	  <label for="prenom">Prénom :</label>
				 	  <h:inputText class="form-control" id="prenom" value="#{student.lastname}" label="Prénom" required="true" requiredMessage="Veuillez entrer votre prénom"/>
			          <h:message for="prenom" class="text-danger"/>
				 </div>
				 <div class="form-group">
				 	  <label for="email">Email :</label>
				 	  <h:inputText class="form-control" id="email" value="#{student.email}" label="Email">
				 	     <f:validateLength minimum="10" maximum="20"/>
				 	  </h:inputText>
			           <h:message for="email" class="text-danger"/>
				 </div>
				 <div class="form-group">
				 	  <label for="passe">Mot de passe :</label>
				 	  <h:inputText class="form-control" id="passe" value="#{student.passe}" label="Mot de passe">
			             <f:validateLength minimum="0" maximum="10"/>
			          </h:inputText>
			           <h:message for="passe" class="text-danger"/>
				 </div>
				 <div class="form-group">
				 	  <label for="tel">Téléphone :</label>
				 	  <h:inputText class="form-control" id="tel" value="#{student.phone}" label="Téléphone" validatorMessage="Le numéro de téléphone doit respecter le schema suivant : xx-xx-xx-xx-xx">
			             <f:validateRegex pattern="\d{2}-\d{2}-\d{2}-\d{2}-\d{2}"/>
			          </h:inputText>
			           <h:message for="tel" class="text-danger"/>
				 </div>
			     <div class="form-group">
			     	<h:commandButton value="Valider" class="btn btn-success" action="reponse"></h:commandButton>
			     </div>
	        </h:form>
		</div>
  	</div>
  </div>

</h:body>

</html>

                                                    
                                                

2- الملف Student.java

فالمجلد Java Resources كنزيد package جديد سميه form.validation زيد فيه ملف جديد عبارة عن java class فيه غادي نخزنو المعلومات الخاصة بكل Student فعندنا المعلومات على شكل des variables و كاين ل constructeur ولgetters وsetters الكود ديال الملف هو:


                                                        
                                                            package form.validation;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Student {
   private String firstname;
   private String lastname;
   private String email;
   private String passe;
   private String phone;
   public Student() {
	   
   }

public String getFirstname() {
	return firstname;
}

public void setFirstname(String firstname) {
	this.firstname = firstname;
}

public String getLastname() {
	return lastname;
}

public void setLastname(String lastname) {
	this.lastname = lastname;
}

public String getEmail() {
	return email;
}

public void setEmail(String email) {
	this.email = email;
}

public String getPasse() {
	return passe;
}

public void setPasse(String passe) {
	this.passe = passe;
}

public String getPhone() {
	return phone;
}

public void setPhone(String phone) {
	this.phone = phone;
}

}

                                                        
                                                    

3- الملف reponse.xhtml

منبعد ف WebContent  وبنفس الطريقة باش زدت form.xhtml كنزيد ملف جديد سميه reponse.xhtml فيه الكود لي كيربط الملف ب bootstrap ومنبعد عندي liste كنعرض فيها المعلومات الخاصة بكل student وهنا كنعرض les valeurs من la classe student ولي automatiquement ملي كنكتب مثلا {student.firstname}# كت
executer la fonction getFirstname
الكود ديال الملف هو :

                                                        
                                                            <!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:a="http://xmlns.jcp.org/jsf/facelets" >
<h:head>
  <title>Form Validation</title>
  <style>
  		.container{
  			margin-top:30px;
  		}
  </style>
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</h:head>

<h:body>
		<div class="container">
		    <div class="row">
		    	<div class="col-md-6 col-md-offset-3">
		    		<ul class="list-group">
		    			<li class="list-group-item">
		    			   <span class="text-info">Nom: </span> #{student.firstname}  
		    			</li>
		    			<li class="list-group-item">
		    		       <span class="text-info">Prénom : </span>  #{student.lastname} 
		    			</li>
		    			<li class="list-group-item">
		    			   <span class="text-info">Email : </span>  #{student.email}  
		    			</li>
		    			<li class="list-group-item">
		    		       <span class="text-info">Mot de passe : </span>  #{student.passe} 
		    			</li>
		    			<li class="list-group-item">
		    		       <span class="text-info">Téléphone : </span>  #{student.phone} 
		    			</li>
		    		</ul>
		    	</div>
		    </div>
		</div>
</h:body>

</html>

                                                        
                                                    

دروس ذات صلة

JA

كيفاش تسجل تعدل وتمسح فقاعدة البيانات بإستعمال Java

فهاد الدرس من كيفاش تسجل تعدل وتمسح فقاعدة البيانات بإستعمال Java غادي نشوفو واحد application بسيطة...


JA

كيفاش تسجل وتعدل وتمسح من قاعدة البيانات بإستعمال Java و Mysql الجزء الأول

فهاد المشروع الجديد لي غادي تعلم فيه كيفاش تسجل وتعدل وتمسح من قاعدة البيانات بإستعمال Java و Mysql...


JA

كيفاش تسجل وتعدل وتمسح من قاعدة البيانات بإستعمال Java و Mysql الجزء الثاني

فهاد الجزء الثاني والآخير من كيفاش تسجل وتعدل وتمسح من قاعدة البيانات بإستعمال Java و Mysql غادي نكم...


JA

كيفاش تصاوب تطبيق بنك بالJava

فهاد الدرس من كيفاش تصاوب تطبيق بنك بال Java غادي نصاوبو واحد التطبيق لي كيمكن المستخدم من إجراء معا...


JA

كيفاش تدير form validation ب jsf

فأول درس من jsf غادي نشوفو كيفاش نديرو form validation ب jsf فالناس لي مكتعرفش شنو هي jsf هي un fram...


JA

Application de gestion des etudiants  ب jsf الجزء الأول

فهاد الدرس الجديد من سلسلة الجافا غادي نشوفو كيفاش نقادو une application لي كتدير la gestion des étu...


JA

Application de gestion des etudiants ب jsf الجزء الثاني

فهاد الجزء الثاني من Application de gestion des etudiants  ب jsf غادي نكملوا الملفات لي بقاونا ولي غ...