SlideShare a Scribd company logo
1 of 38
Model/View/Controller
programming construct
BITM 3730
Developing Web Applications
Previous Work Review
• http://pirate.shu.edu/~marinom6/work.html
• Please Note only previously due HW assignments are posted on my
pirate.shu.edu web space
• Begin organizing your creating files for this course into an easy to find folder
on your desktop for easy FTP later on
Model/View/Controller
Here is a visual of the relationship between
Model and View &
Model and Controller
Model/View/Controller Cont.
A view is seen by user and the user uses the controller – this is
the role a user plays
The view is considered to be output of data for user to view
Commands are what the controller sends to the model and view
MVC in Simpler Terms
• Model – consists of the application’s model or business model. For example,
in an accounting system – account, invoice, cost center
• View – output of the data for the user to view
• Controller – brings together the model and view by sending commands to
both
Java MVC Example - Students
• Step 1
• Create Model.
• Student.java
Student.java
public class Student {
private String rollNo;
private String name;
public String getRollNo() {
return rollNo;
}
public void setRollNo(String rollNo) {
this.rollNo = rollNo;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Java MVC Example - Students
• Step 2
• Create View.
• StudentView.java
StudentView.java
public class StudentView {
public void printStudentDetails(String studentName, String studentRollNo){
System.out.println("Student: ");
System.out.println("Name: " + studentName);
System.out.println("Roll No: " + studentRollNo);
}
}
Java MVC Example - Students
• Step 3
• Create Controller.
• StudentController.java
StudentController.java
public class StudentController {
private Student model;
private StudentView view;
public StudentController(Student model, StudentView view){
this.model = model;
this.view = view;
}
public void setStudentName(String name){
model.setName(name);
}
public String getStudentName(){
return model.getName();
}
public void setStudentRollNo(String rollNo){
model.setRollNo(rollNo);
}
public String getStudentRollNo(){
return model.getRollNo();
}
public void updateView(){
view.printStudentDetails(model.getName(), model.getRollNo());
}
}
Java MVC Example - Students
• Step 4
• Use the StudentController methods to demonstrate
MVC design pattern usage.
• MVCPatternDemo.java
MVCPatternDemo.java
public class MVCPatternDemo {
public static void main(String[] args) {
//fetch student record based on his roll no from the database
Student model = retriveStudentFromDatabase();
//Create a view : to write student details on console
StudentView view = new StudentView();
StudentController controller = new StudentController(model,
view);
controller.updateView();
//update model data
controller.setStudentName("John");
controller.updateView();
}
private static Student retriveStudentFromDatabase(){
Student student = new Student();
student.setName("Robert");
student.setRollNo("10");
return student;
}
}
Java MVC Example - Students
• Step 5
• Verify the output.
• Student:
• Name: Robert
• Roll No: 10
• Student:
• Name: John
• Roll No: 10
Visual of What Just Happened
Pretty Boring Right?
• Next week you will see MVC can be used with JSP (Java Server Pages) to do
things behind the scenes
• You have previously seen with JavaScript that the internet (a web server) can
interpret the Java programming language
Building Assignment 11 Visual
Building Assignment 11 Hit Submit
Building Assignment 11 Code
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Form</title>
</head>
<body>
</body>
</html>
Building Assignment 11 Code
<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="C:UsersmattmDesktop_privateform_results.csv" S-
Format="TEXT/CSV" S-Label-Fields="TRUE" -->
<p>Name: <input type="text" name="T1" size="20"></p>
<p>Address: <input type="text" name="T2" size="20"></p>
<p>City: <input type="text" name="T3" size="20"></p>
<p>State: <input type="text" name="T4" size="20"></p>
<p>Zip Code: <input type="text" name="T5" size="20"></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
Why No One Does It That Way?
• Basic, static HTML form – limited in functionality
• Does not work unless you create a csv file and put it somewhere on your
server
• Not visually appealing
Building Project 4 Visual
Building Project 4 Code
<!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>
<title>Contact Form</title>
</head>
<body id="top">
<div class="wrapper">
<div id="container">
<h2><span>Contact Form</span></h2>
<p>
Building Project 4 Code
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- HIDE script
var validForm
validForm=0
function confirmReset(myForm) {
var resetForm = confirm("Are you sure you want to Clear all the Information Entered?");
if (resetForm == true)
return true;
return false;
}
Building Project 4 Code
function validateForm(myForm) {
var x
x=1
//name
if (myForm.name.value == "") {
alert("Please Enter your Full Name.");
myForm.name.focus()
return false
}
Building Project 4 Code
//email
if (myForm.email.value == "") {
alert("Please Enter your Email Address.");
myForm.email.focus()
return false
}
//address
if (myForm.address.value == "") {
alert("Please Enter your Address.");
myForm.address.focus()
return false
}
Building Project 4 Code
//city
if (myForm.city.value == "") {
alert("Please Enter your City.");
myForm.city.focus()
return false
}
//state
if (myForm.state.value == "") {
alert("Please Enter you State");
myForm.state.focus()
return false
}
Building Project 4 Code
//zip code
if (myForm.zip.value == "") {
alert("Please Enter your Zip Code");
myForm.zip.focus()
return false
}
//alert("Thank You. The Information You Entered Will Be E-Mailed To Us. We Will Get Back To You Shortly.");
return true
}
// -- end hiding here -->
</SCRIPT>
Building Project 4 Code
<center>
<td width="595px" height="340">
</center>
<div width="560px">
<p align="left">
<b><i><font face="Calibri" size="3">Please Enter The Requested
Info Below
&amp; Click Submit</font><font face="Arial" size="3"><br>
</font></i></b>
</p>
<center>
Building Project 4 Code
<form name="webForm" onreset="return confirmReset();" onsubmit="return validateForm(webForm);" action="http://pirate.shu.edu/~marinom6/sendinfo.php" target="_top" method="post">
<p align="left"><b><font face="Calibri" size="4">Please Enter Your Full Name:<br>
</font><font color="#FFFFFF" face="Calibri" size="4">
<input size="30" name="name"></font></b></p>
<p align="left"><b><font face="Calibri" size="4">Please Enter Your Email Address:<br>
</font><font color="#FFFFFF" face="Calibri" size="4">
<input size="30" name="email"></font></b></p>
<p align="left"><b><font face="Calibri" size="4">Please Enter Your Address:&nbsp;<br>
</font><font color="#FFFFFF" face="Calibri" size="4">
<input size="30" name="address"></font></b></p>
<p align="left"><font size="4" face="Calibri"><b>Please Enter Your City:<br></b></font>
<font color="#FFFFFF" face="Calibri" size="2"> <input size="58" name="city"></font><font face="Calibri" size="2"></b></font></p>
<p align="left"><font size="4" face="Calibri"><b>Please Enter Your State:<br></b></font>
<font color="#FFFFFF" face="Calibri" size="2"> <input size="58" name="state"></font><font face="Calibri" size="2"></b></font></p>
</center>
Building Project 4 Code
<p align="left"><font face="Calibri" size="4"><b>Please Enter Your Zip Code:</b>
</font><font face="Verdana" size="2"><br>
</font><font color="#FFFFFF" face="Calibri" size="2"> <input size="5" name="zip"></font><font face="Calibri"
size="2"></b></font></p>
<center>
<p align="left"><font color="#FFFFFF"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset"
name="B2"></font></p>
</form> &nbsp;
</div>
</div>
</div>
</body>
</html>
Building Project 4 Code
• That’s just the HTML file code!
• Now we need to build our sendinfo.php file to make the form email the
information put in the form.
Building Project 4 PHP Visual
Building Project 4 Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; ">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Your Site Name....>> Contact Us via Email</title>
</head>
<body>
<center>
<B>
<font face="Verdana" size="4">
<br>
<br>
Attempting To Send E-Mail...
<br>
Building Project 4 Code
<br>
<?php
extract( $_REQUEST );
// take a given email address and split it into the username and domain.
list($userName, $mailDomain) = split("@", $email);
if (checkdnsrr($mailDomain, "MX")) {
// this is a valid email domain!
$info = sprintf("Name: %snEmail Address: %snAddress #: %snCity: %snState: %snZip
Code: %s",$name,$email,$address,$city,$state,$zip);
Building Project 4 Code
$check=mail("matt.marino@shu.edu","PHP",$info,"From: $email");
if ($check != true) {
print "Sorry... Error Sending E-Mail. E-Mail NOT Sent.";
}
else {
print "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You Shortly...";
}
}
else {
// this email domain doesn't exist!
print "Sorry... Invalid Return E-Mail Address. E-Mail NOT Sent. Please Enter a Valid E-Mail Address So That We Can Reply To Your Request.";
}
?>
Building Project 4 Code
</font>
</B>
</center>
</body>
</html>
Building Project 4 Code
PHP must be enabled on the web server
Or we get a hang or infinite loop where our form
is always attempting to be sent to our email

More Related Content

Similar to BITM3730Week11.pptx

web technology practicals.pdf
web technology practicals.pdfweb technology practicals.pdf
web technology practicals.pdfNaveenK242465
 
web technology practicals.pdf
web technology practicals.pdfweb technology practicals.pdf
web technology practicals.pdfNaveenK242465
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web formsCK Yang
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Community
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexChristoffer Noring
 
Django Introduction & Tutorial
Django Introduction & TutorialDjango Introduction & Tutorial
Django Introduction & Tutorial之宇 趙
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsDigamber Singh
 
ASP.net Manual final.pdf
ASP.net Manual final.pdfASP.net Manual final.pdf
ASP.net Manual final.pdfSwapnilGujar13
 
PT1420 Decision Structures in Pseudocode and Visual Basic .docx
PT1420 Decision Structures in Pseudocode and Visual Basic .docxPT1420 Decision Structures in Pseudocode and Visual Basic .docx
PT1420 Decision Structures in Pseudocode and Visual Basic .docxamrit47
 
"Umbraco MVC - a journey of discovery" - Lotte Pitcher
"Umbraco MVC - a journey of discovery" - Lotte Pitcher"Umbraco MVC - a journey of discovery" - Lotte Pitcher
"Umbraco MVC - a journey of discovery" - Lotte Pitcherlottepitcher
 
Form Validation NG
Form Validation NGForm Validation NG
Form Validation NGjoaopmaia
 
Building an Angular 2 App
Building an Angular 2 AppBuilding an Angular 2 App
Building an Angular 2 AppFelix Gessert
 
[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress DevelopmentAdam Tomat
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2Paras Mendiratta
 
Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)Oro Inc.
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introductioncherukumilli2
 
CICONF 2012 - Don't Make Me Read Your Mind
CICONF 2012 - Don't Make Me Read Your MindCICONF 2012 - Don't Make Me Read Your Mind
CICONF 2012 - Don't Make Me Read Your Mindciconf
 
Angular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4UAngular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4Usharsen
 

Similar to BITM3730Week11.pptx (20)

web technology practicals.pdf
web technology practicals.pdfweb technology practicals.pdf
web technology practicals.pdf
 
web technology practicals.pdf
web technology practicals.pdfweb technology practicals.pdf
web technology practicals.pdf
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
 
C#Portfolio
C#PortfolioC#Portfolio
C#Portfolio
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and Vuex
 
Django Introduction & Tutorial
Django Introduction & TutorialDjango Introduction & Tutorial
Django Introduction & Tutorial
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive Forms
 
ASP.net Manual final.pdf
ASP.net Manual final.pdfASP.net Manual final.pdf
ASP.net Manual final.pdf
 
PT1420 Decision Structures in Pseudocode and Visual Basic .docx
PT1420 Decision Structures in Pseudocode and Visual Basic .docxPT1420 Decision Structures in Pseudocode and Visual Basic .docx
PT1420 Decision Structures in Pseudocode and Visual Basic .docx
 
"Umbraco MVC - a journey of discovery" - Lotte Pitcher
"Umbraco MVC - a journey of discovery" - Lotte Pitcher"Umbraco MVC - a journey of discovery" - Lotte Pitcher
"Umbraco MVC - a journey of discovery" - Lotte Pitcher
 
Codegnitorppt
CodegnitorpptCodegnitorppt
Codegnitorppt
 
Form Validation NG
Form Validation NGForm Validation NG
Form Validation NG
 
Building an Angular 2 App
Building an Angular 2 AppBuilding an Angular 2 App
Building an Angular 2 App
 
[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
 
Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
CICONF 2012 - Don't Make Me Read Your Mind
CICONF 2012 - Don't Make Me Read Your MindCICONF 2012 - Don't Make Me Read Your Mind
CICONF 2012 - Don't Make Me Read Your Mind
 
Angular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4UAngular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4U
 

More from MattMarino13

1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptxMattMarino13
 
1-24-24 INFO 3205.pptx
1-24-24 INFO 3205.pptx1-24-24 INFO 3205.pptx
1-24-24 INFO 3205.pptxMattMarino13
 
BITM3730 11-14.pptx
BITM3730 11-14.pptxBITM3730 11-14.pptx
BITM3730 11-14.pptxMattMarino13
 
01_Felke-Morris_Lecture_ppt_ch01.pptx
01_Felke-Morris_Lecture_ppt_ch01.pptx01_Felke-Morris_Lecture_ppt_ch01.pptx
01_Felke-Morris_Lecture_ppt_ch01.pptxMattMarino13
 
02slide_accessible.pptx
02slide_accessible.pptx02slide_accessible.pptx
02slide_accessible.pptxMattMarino13
 
Hoisington_Android_4e_PPT_CH01.pptx
Hoisington_Android_4e_PPT_CH01.pptxHoisington_Android_4e_PPT_CH01.pptx
Hoisington_Android_4e_PPT_CH01.pptxMattMarino13
 
AndroidHTP3_AppA.pptx
AndroidHTP3_AppA.pptxAndroidHTP3_AppA.pptx
AndroidHTP3_AppA.pptxMattMarino13
 
9780357132302_Langley11e_ch1_LEAP.pptx
9780357132302_Langley11e_ch1_LEAP.pptx9780357132302_Langley11e_ch1_LEAP.pptx
9780357132302_Langley11e_ch1_LEAP.pptxMattMarino13
 
krajewski_om12 _01.pptx
krajewski_om12 _01.pptxkrajewski_om12 _01.pptx
krajewski_om12 _01.pptxMattMarino13
 
CapsimOpsIntroPPT.Marino.pptx
CapsimOpsIntroPPT.Marino.pptxCapsimOpsIntroPPT.Marino.pptx
CapsimOpsIntroPPT.Marino.pptxMattMarino13
 
Project Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptx
Project Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptxProject Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptx
Project Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptxMattMarino13
 
Project Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptx
Project Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptxProject Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptx
Project Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptxMattMarino13
 
Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...
Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...
Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...MattMarino13
 
Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...
Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...
Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...MattMarino13
 
Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...
Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...
Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...MattMarino13
 
1-23-19 Agenda.pptx
1-23-19 Agenda.pptx1-23-19 Agenda.pptx
1-23-19 Agenda.pptxMattMarino13
 
EDF 8289 Marino PPT.pptx
EDF 8289 Marino PPT.pptxEDF 8289 Marino PPT.pptx
EDF 8289 Marino PPT.pptxMattMarino13
 
Agenda January 20th 2016.pptx
Agenda January 20th 2016.pptxAgenda January 20th 2016.pptx
Agenda January 20th 2016.pptxMattMarino13
 
BITM3730 8-29.pptx
BITM3730 8-29.pptxBITM3730 8-29.pptx
BITM3730 8-29.pptxMattMarino13
 
BITM3730 8-30.pptx
BITM3730 8-30.pptxBITM3730 8-30.pptx
BITM3730 8-30.pptxMattMarino13
 

More from MattMarino13 (20)

1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
 
1-24-24 INFO 3205.pptx
1-24-24 INFO 3205.pptx1-24-24 INFO 3205.pptx
1-24-24 INFO 3205.pptx
 
BITM3730 11-14.pptx
BITM3730 11-14.pptxBITM3730 11-14.pptx
BITM3730 11-14.pptx
 
01_Felke-Morris_Lecture_ppt_ch01.pptx
01_Felke-Morris_Lecture_ppt_ch01.pptx01_Felke-Morris_Lecture_ppt_ch01.pptx
01_Felke-Morris_Lecture_ppt_ch01.pptx
 
02slide_accessible.pptx
02slide_accessible.pptx02slide_accessible.pptx
02slide_accessible.pptx
 
Hoisington_Android_4e_PPT_CH01.pptx
Hoisington_Android_4e_PPT_CH01.pptxHoisington_Android_4e_PPT_CH01.pptx
Hoisington_Android_4e_PPT_CH01.pptx
 
AndroidHTP3_AppA.pptx
AndroidHTP3_AppA.pptxAndroidHTP3_AppA.pptx
AndroidHTP3_AppA.pptx
 
9780357132302_Langley11e_ch1_LEAP.pptx
9780357132302_Langley11e_ch1_LEAP.pptx9780357132302_Langley11e_ch1_LEAP.pptx
9780357132302_Langley11e_ch1_LEAP.pptx
 
krajewski_om12 _01.pptx
krajewski_om12 _01.pptxkrajewski_om12 _01.pptx
krajewski_om12 _01.pptx
 
CapsimOpsIntroPPT.Marino.pptx
CapsimOpsIntroPPT.Marino.pptxCapsimOpsIntroPPT.Marino.pptx
CapsimOpsIntroPPT.Marino.pptx
 
Project Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptx
Project Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptxProject Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptx
Project Presentation_castroxa_attempt_2021-12-05-18-30-10_No Cap.pptx
 
Project Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptx
Project Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptxProject Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptx
Project Presentation_mirzamad_attempt_2021-12-05-23-35-25_HTML_presentation.pptx
 
Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...
Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...
Project Presentation_padillni_attempt_2021-12-05-18-52-37_Web Application Pre...
 
Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...
Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...
Project Presentation_thomasb1_attempt_2021-12-05-17-50-13_Developing Web Apps...
 
Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...
Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...
Project Presentation_hernana1_attempt_2021-12-05-22-06-56_Miyamoto BITM 3730 ...
 
1-23-19 Agenda.pptx
1-23-19 Agenda.pptx1-23-19 Agenda.pptx
1-23-19 Agenda.pptx
 
EDF 8289 Marino PPT.pptx
EDF 8289 Marino PPT.pptxEDF 8289 Marino PPT.pptx
EDF 8289 Marino PPT.pptx
 
Agenda January 20th 2016.pptx
Agenda January 20th 2016.pptxAgenda January 20th 2016.pptx
Agenda January 20th 2016.pptx
 
BITM3730 8-29.pptx
BITM3730 8-29.pptxBITM3730 8-29.pptx
BITM3730 8-29.pptx
 
BITM3730 8-30.pptx
BITM3730 8-30.pptxBITM3730 8-30.pptx
BITM3730 8-30.pptx
 

Recently uploaded

Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxUnboundStockton
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerunnathinaik
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfMahmoud M. Sallam
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 

Recently uploaded (20)

Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docx
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developer
 
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 

BITM3730Week11.pptx

  • 2. Previous Work Review • http://pirate.shu.edu/~marinom6/work.html • Please Note only previously due HW assignments are posted on my pirate.shu.edu web space • Begin organizing your creating files for this course into an easy to find folder on your desktop for easy FTP later on
  • 3. Model/View/Controller Here is a visual of the relationship between Model and View & Model and Controller
  • 4. Model/View/Controller Cont. A view is seen by user and the user uses the controller – this is the role a user plays The view is considered to be output of data for user to view Commands are what the controller sends to the model and view
  • 5. MVC in Simpler Terms • Model – consists of the application’s model or business model. For example, in an accounting system – account, invoice, cost center • View – output of the data for the user to view • Controller – brings together the model and view by sending commands to both
  • 6. Java MVC Example - Students • Step 1 • Create Model. • Student.java
  • 7. Student.java public class Student { private String rollNo; private String name; public String getRollNo() { return rollNo; } public void setRollNo(String rollNo) { this.rollNo = rollNo; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
  • 8. Java MVC Example - Students • Step 2 • Create View. • StudentView.java
  • 9. StudentView.java public class StudentView { public void printStudentDetails(String studentName, String studentRollNo){ System.out.println("Student: "); System.out.println("Name: " + studentName); System.out.println("Roll No: " + studentRollNo); } }
  • 10. Java MVC Example - Students • Step 3 • Create Controller. • StudentController.java
  • 11. StudentController.java public class StudentController { private Student model; private StudentView view; public StudentController(Student model, StudentView view){ this.model = model; this.view = view; } public void setStudentName(String name){ model.setName(name); } public String getStudentName(){ return model.getName(); } public void setStudentRollNo(String rollNo){ model.setRollNo(rollNo); } public String getStudentRollNo(){ return model.getRollNo(); } public void updateView(){ view.printStudentDetails(model.getName(), model.getRollNo()); } }
  • 12. Java MVC Example - Students • Step 4 • Use the StudentController methods to demonstrate MVC design pattern usage. • MVCPatternDemo.java
  • 13. MVCPatternDemo.java public class MVCPatternDemo { public static void main(String[] args) { //fetch student record based on his roll no from the database Student model = retriveStudentFromDatabase(); //Create a view : to write student details on console StudentView view = new StudentView(); StudentController controller = new StudentController(model, view); controller.updateView(); //update model data controller.setStudentName("John"); controller.updateView(); } private static Student retriveStudentFromDatabase(){ Student student = new Student(); student.setName("Robert"); student.setRollNo("10"); return student; } }
  • 14. Java MVC Example - Students • Step 5 • Verify the output. • Student: • Name: Robert • Roll No: 10 • Student: • Name: John • Roll No: 10
  • 15. Visual of What Just Happened
  • 16. Pretty Boring Right? • Next week you will see MVC can be used with JSP (Java Server Pages) to do things behind the scenes • You have previously seen with JavaScript that the internet (a web server) can interpret the Java programming language
  • 19. Building Assignment 11 Code <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>My Form</title> </head> <body> </body> </html>
  • 20. Building Assignment 11 Code <form method="POST" action="--WEBBOT-SELF--"> <!--webbot bot="SaveResults" U-File="C:UsersmattmDesktop_privateform_results.csv" S- Format="TEXT/CSV" S-Label-Fields="TRUE" --> <p>Name: <input type="text" name="T1" size="20"></p> <p>Address: <input type="text" name="T2" size="20"></p> <p>City: <input type="text" name="T3" size="20"></p> <p>State: <input type="text" name="T4" size="20"></p> <p>Zip Code: <input type="text" name="T5" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form>
  • 21. Why No One Does It That Way? • Basic, static HTML form – limited in functionality • Does not work unless you create a csv file and put it somewhere on your server • Not visually appealing
  • 23. Building Project 4 Code <!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> <title>Contact Form</title> </head> <body id="top"> <div class="wrapper"> <div id="container"> <h2><span>Contact Form</span></h2> <p>
  • 24. Building Project 4 Code <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- HIDE script var validForm validForm=0 function confirmReset(myForm) { var resetForm = confirm("Are you sure you want to Clear all the Information Entered?"); if (resetForm == true) return true; return false; }
  • 25. Building Project 4 Code function validateForm(myForm) { var x x=1 //name if (myForm.name.value == "") { alert("Please Enter your Full Name."); myForm.name.focus() return false }
  • 26. Building Project 4 Code //email if (myForm.email.value == "") { alert("Please Enter your Email Address."); myForm.email.focus() return false } //address if (myForm.address.value == "") { alert("Please Enter your Address."); myForm.address.focus() return false }
  • 27. Building Project 4 Code //city if (myForm.city.value == "") { alert("Please Enter your City."); myForm.city.focus() return false } //state if (myForm.state.value == "") { alert("Please Enter you State"); myForm.state.focus() return false }
  • 28. Building Project 4 Code //zip code if (myForm.zip.value == "") { alert("Please Enter your Zip Code"); myForm.zip.focus() return false } //alert("Thank You. The Information You Entered Will Be E-Mailed To Us. We Will Get Back To You Shortly."); return true } // -- end hiding here --> </SCRIPT>
  • 29. Building Project 4 Code <center> <td width="595px" height="340"> </center> <div width="560px"> <p align="left"> <b><i><font face="Calibri" size="3">Please Enter The Requested Info Below &amp; Click Submit</font><font face="Arial" size="3"><br> </font></i></b> </p> <center>
  • 30. Building Project 4 Code <form name="webForm" onreset="return confirmReset();" onsubmit="return validateForm(webForm);" action="http://pirate.shu.edu/~marinom6/sendinfo.php" target="_top" method="post"> <p align="left"><b><font face="Calibri" size="4">Please Enter Your Full Name:<br> </font><font color="#FFFFFF" face="Calibri" size="4"> <input size="30" name="name"></font></b></p> <p align="left"><b><font face="Calibri" size="4">Please Enter Your Email Address:<br> </font><font color="#FFFFFF" face="Calibri" size="4"> <input size="30" name="email"></font></b></p> <p align="left"><b><font face="Calibri" size="4">Please Enter Your Address:&nbsp;<br> </font><font color="#FFFFFF" face="Calibri" size="4"> <input size="30" name="address"></font></b></p> <p align="left"><font size="4" face="Calibri"><b>Please Enter Your City:<br></b></font> <font color="#FFFFFF" face="Calibri" size="2"> <input size="58" name="city"></font><font face="Calibri" size="2"></b></font></p> <p align="left"><font size="4" face="Calibri"><b>Please Enter Your State:<br></b></font> <font color="#FFFFFF" face="Calibri" size="2"> <input size="58" name="state"></font><font face="Calibri" size="2"></b></font></p> </center>
  • 31. Building Project 4 Code <p align="left"><font face="Calibri" size="4"><b>Please Enter Your Zip Code:</b> </font><font face="Verdana" size="2"><br> </font><font color="#FFFFFF" face="Calibri" size="2"> <input size="5" name="zip"></font><font face="Calibri" size="2"></b></font></p> <center> <p align="left"><font color="#FFFFFF"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></font></p> </form> &nbsp; </div> </div> </div> </body> </html>
  • 32. Building Project 4 Code • That’s just the HTML file code! • Now we need to build our sendinfo.php file to make the form email the information put in the form.
  • 33. Building Project 4 PHP Visual
  • 34. Building Project 4 Code <html> <head> <meta http-equiv="Content-Type" content="text/html; "> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Your Site Name....>> Contact Us via Email</title> </head> <body> <center> <B> <font face="Verdana" size="4"> <br> <br> Attempting To Send E-Mail... <br>
  • 35. Building Project 4 Code <br> <?php extract( $_REQUEST ); // take a given email address and split it into the username and domain. list($userName, $mailDomain) = split("@", $email); if (checkdnsrr($mailDomain, "MX")) { // this is a valid email domain! $info = sprintf("Name: %snEmail Address: %snAddress #: %snCity: %snState: %snZip Code: %s",$name,$email,$address,$city,$state,$zip);
  • 36. Building Project 4 Code $check=mail("matt.marino@shu.edu","PHP",$info,"From: $email"); if ($check != true) { print "Sorry... Error Sending E-Mail. E-Mail NOT Sent."; } else { print "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You Shortly..."; } } else { // this email domain doesn't exist! print "Sorry... Invalid Return E-Mail Address. E-Mail NOT Sent. Please Enter a Valid E-Mail Address So That We Can Reply To Your Request."; } ?>
  • 37. Building Project 4 Code </font> </B> </center> </body> </html>
  • 38. Building Project 4 Code PHP must be enabled on the web server Or we get a hang or infinite loop where our form is always attempting to be sent to our email

Editor's Notes

  1. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
  2. https://www.tutorialspoint.com/design_pattern/mvc_pattern.htm