8 Dec 2016

A website developed with JSF in OOP manner with MVC design and JDBC - Part 4

A website developed with JSF in OOP manner with MVC design and JDBC The website to be developed here will be about famous TV Series.

This last part illustrates two xhtml pages for the website which are responsible for adding series into database and listing the existing ones. First one myseries.xhtml lists the series.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<f:metadata>
	<f:event type="preRenderView"
		listener="#{seriesController.loadSeries()}" />
</f:metadata>

<h:head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</h:head>
<h:body>
		<ui:define name="content">
			<section id="top">
				<div class="content">
					<ul class="rolldown-list" id="myList">
						<li><p>Most Watched</p></li>
						<ui:repeat value="#{seriesController.series}" var="series">
							<li>
								<div class="containerBox" id="#{series.imdbID}">
									<div class="text-box">
										<h:outputText styleClass="rating"
											value=" IMDB# #{series.serie_rating}" />
										<!--   <h:outputText value="#{series.imdbID}" /> -->
									</div>
									<h:graphicImage
										value="/images/banners/#{series.serie_title}.jpg"></h:graphicImage>

								</div>
								<div class="alt-content" id="#{series.imdbID}content">
									Plot:
									<h:outputText value="#{series.serie_plot}" />
									<br /> Genre:
									<h:outputText value="#{series.serie_genre}" />
								</div>
							</li>
						</ui:repeat>
					</ul>
				</div>
			</section>
			<h:outputScript library="js" name="jmin.js" />
			<h:outputScript library="js" name="help.js" />

</h:body>
</html>

And second xhtml (add.xhtml) file includes a text filed that retrieves all the information from OMDB API, than fills the information into several textfields to insert into database.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" >
<h:head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Add</title>
</h:head>
<h:body>

			<h:form>
			Search: <h:inputText id="search" value="#{series.purl}" ></h:inputText>
			<h:commandButton  value="Submit"> 
				<f:ajax execute="search" render="result result1 result2 result3 result4 result5 result6" />
			</h:commandButton>
			Search from OMDB: <h:outputText id="result" value="#{seriesController.sendGet(series)}" /><br/><br/>
			IMDB ID: <h:inputText id="result6" value="#{series.imdbID}" /><br/>
			Title: <h:inputText id="result1" value="#{series.serie_title}" /><br/>
			Genre: <h:inputText id="result2" value="#{series.serie_genre}" /><br/>
			Plot: <h:inputText id="result3" value="#{series.serie_plot}" /><br/>
			Rating: <h:inputText id="result4" value="#{series.serie_rating}" /><br/>
			IMDB link: <h:link id="result5" value="http://www.imdb.com/title/#{series.imdbID}"  target="_blank" /><br/><br/>

			<h:commandButton  id="save" value="Save" action="#{seriesController.addSerie(series)}" > 
			</h:commandButton>
 			</h:form>
		
<h:outputScript library="js" name="jmin.js" />
<h:outputScript library="js" name="help.js" />

</h:body>
</html>

All the code including Java, HTML, JQuery, CSS can be found in https://github.com/MuhammedGit/JSF

Tags:
Stats: