TE 2015 Pattern Web Technology Laboratory Manual Prepared by : Prof. A. N. Gharu Semester : VI Course Code: 310256

Pune Vidyarthi Griha’s COLLEGE OF ENGINNERING, NASHIK. Department of Computer Engineering

PVGCOE,NASHIK, Department of Computer Engineering

List of Experiments Sr. Experiment Title Page No. No. 1 Installation and Configuration of Web Application Servers Tomcat 02 2 Design and develop any suitable web application using HTML, CSS and XML 09 3 Perform validation of all fields in assignment no.2 by using Java script/JQuery 25 4 Add dynamic web application essence in assignment no. 3 using Servlet, JSP 31 and MySQL 5 Add dynamic web application essence in assignment no. 3 using PHP, MySQL 40 database connectivity and AJAX controls. 6 Redesign, develop and deploy assignment no. 4 using Strut 49 7 Redesign, develop and deploy assignment no. 5 using Angular JS 64 8 Design, Develop and Deploy separate web application using 70 EJB/CMS/JSF/Spring/Bootstrap. 9 Mini Project 76

1 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 01 AIM: Installation and Configuration Web application server Tomcat Apache.

LEARNING OBJECTIVES: 1. Understanding Working of Web application server 2. Able to install and configure Tomcat Apache.

THEORY:

Installation and Configuration of Tomcat Apache. Seep 1 Install Java sudo apt-get install default-jdk

STEP 2: CREATE TOMCAT USER For security purposes, Tomcat should be run as an unprivileged user (i.e. not root). We will create a new user and group that will run the Tomcat service. a) First, create a new tomcat group: sudo groupadd tomcat b) Next, create a new tomcat user.

We'll make this user a member of the tomcat group, with a home directory of /opt/tomcat (where we will install Tomcat), and with a shell of /bin/false (so nobody can log into the account):

sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat

STEP 3: INSTALL TOMCAT a) Download Tomcat from following link http://tomcat.apache.org/download-80.cgi

2 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

b) change to the /tmp directory on your server. This is a good directory to download ephemeral items, like the Tomcat tarball, which we won't need after extracting the Tomcat contents: Create following directories cd /tmp We will install Tomcat to the /opt/tomcat directory. c) Create the directory. sudo mkdir /opt/tomcat d) Copy downloaded package to current directory cp /home/staff1/Downloads/apache-tomcat-8.5.24.tar.gz . e) Extract package to tomcat directory sudo tar xzvf apache-tomcat-8.5.24.tar.gz -C /opt/tomcat –strip-components=1

STEP 4: UPDATE PERMISSIONS The tomcat user that we set up needs to have access to the Tomcat installation. We'll set that up now. a) Change to the directory where we unpacked the Tomcat installation: /tmp$ cd /opt/tomcat b) Give the tomcat group ownership over the entire installation directory: /opt/tomcat$ sudo chgrp -R tomcat /opt/tomcat c) Next, give the tomcat group read access to the conf directory and all of its contents, and execute access to the directory itself:

3 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

/opt/tomcat$ sudo chmod -R g+r conf /opt/tomcat$ sudo chmod g+x conf

d) Make the tomcat user the owner of the webapps, work, temp, and logs directories:

/opt/tomcat$ sudo chown -R tomcat webapps/ work/ temp/ logs/

Now that the proper permissions are set up, we can create a systemd service file to manage the Tomcat process.

STEP 5: CREATE A SYSTEMD SERVICE FILE We want to be able to run Tomcat as a service, so we will set up systemd service file. Tomcat needs to know where Java is installed. This path is commonly referred to as "JAVA_HOME". The easiest way to look up that location is by running this command: sudo update-java-alternatives -l

Output java-1.8.0-openjdk-amd64 1081 /usr/lib/jvm/java-1.8.0-openjdk-amd64

The correct JAVA_HOME variable can be constructed by taking the output from the last column (highlighted in red) and appending /jre to the end. Given the example above, the correct JAVA_HOME for this server would be: JAVA_HOME /usr/lib/jvm/java-1.8.0-openjdk-amd64/jre

Your JAVA_HOME may be different.

a) Open tomcat.service file With this piece of information, we can create the systemd service file. Open a file called tomcat.service in the /etc/systemd/system directory by typing:

sudo gedit /etc/systemd/system/tomcat.service

b) Paste the following contents into your service file. Modify the value of JAVA_HOME if necessary to match the value you found on your system. You may also want to modify the memory allocation settings that are specified in CATALINA_OPTS:

4 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

[Unit] Description=Apache Tomcat Web Application Container After=network.target [Service] Type=forking Environment=JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64/jre Environment=CATALINA_PID=/opt/tomcat/temp/tomcat.pid Environment=CATALINA_HOME=/opt/tomcat Environment=CATALINA_BASE=/opt/tomcat Environment='CATALINA_OPTS=-Xms512M -Xmx1024M -server -XX:+UseParallelGC' Environment='JAVA_OPTS=-Djava.awt.headless=true - Djava.security.egd=file:/dev/./urandom' ExecStart=/opt/tomcat/bin/startup.sh ExecStop=/opt/tomcat/bin/shutdown.sh User=tomcat Group=tomcat UMask=0007 RestartSec=10 Restart=always [Install] WantedBy=multi-user.target

When you are finished, save and close the file.

c) Next, reload the systemd daemon so that it knows about our service file: /opt/tomcat$ sudo systemctl daemon-reload

d) Start the Tomcat service by typing:

/opt/tomcat$ sudo systemctl start tomcat

e) Double check that it started without errors by typing:

/opt/tomcat$ sudo systemctl status tomcat

STEP 6: ADJUST THE FIREWALL AND TEST THE TOMCAT SERVER

Now that the Tomcat service is started, we can test to make sure the default page is available.

Before we do that, we need to adjust the firewall to allow our requests to get to the service. If you followed the prerequisites, you will have a ufw firewall enabled currently. Tomcat uses port 8080 to accept conventional requests.

5 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

a) Allow traffic to that port by typing: sudo ufw allow 8080

b) With the firewall modified, you can access the default splash page by going to your domain or IP address followed by :8080 in a web browser:

http://localhost:8080/

You will see the default Tomcat splash page, in addition to other information. However, if you click the links for the Manager App, for instance, you will be denied access. We can configure that access next.

c) Enable the service file so that Tomcat automatically starts at boot: sudo systemctl enable tomcat

STEP 7: CONFIGURE TOMCAT WEB MANAGEMENT INTERFACE

In order to use the manager web app that comes with Tomcat, we must add a login to our Tomcat server.

6 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

a) Edit the tomcat-users.xml file:

sudo gedit /opt/tomcat/conf/tomcat-users.xml

You will want to add a user who can access the manager-gui and admin-gui (web apps that come with Tomcat). You can do so by defining a user, similar to the example below, between the tomcat- users tags. Be sure to change the username and password to something secure:

Add followin line before

b) To put our changes into effect, restart the Tomcat service: sudo systemctl restart tomcat

Output

SERVER STATUS GUI

7 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Application Manager GUI

Tomcat Manager GUI

8 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO – 02

AIM: Design and develop any suitable web application using HTML, CSS and XML

LEARNING OBJECTIVES: 1. Understand Basic Tags of HTML 2. Understand CSS 3. Understand use of XML in HTML.

THEORY:

Basic HTML HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup tags. The markup tags tell the Web browser how to display the page. An HTML file must have an ‘htm’ or ‘html’ file extension. An HTML file can be created using a simple text editor. The rule- making body of the Web is World Wide Web Consortium (W3C). W3C puts together specifications for Web standards. The most essential Web standards are HTML, CSS and XML. The latest HTML standard is XHTML 1.0.

Example: Creating a simple web page 1. Start Notepad. 2. Type in the following text This is a very basic webpage. This text will be displayed in bold 3. Save the file as "firstpage.html". 4. Double click the saved file the browser will display the page. EXAMPLE EXPLAINED: The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document. The text between the tag and the tag is header information. Header information is not displayed in the browser window. The text between the Note: type="text/javascript" is not necessary in HTML5. Following code will work. USING VARIABLES IN JAVASCRIPT Variables are used to store values (name = "John") or expressions (sum = x + y). Before using a variable, you first need to declare it. You have to use the keyword var to declare a variable like this: var name; You can assign a value to the variable either while declaring the variable or after declaring the variable. var name = "John"; OR var name;

name = "John";

Naming Variables Though you can name the variables as you like, it is a good programming practice to give descriptive and meaningful names to the variables. Moreover, variable names should start with a letter and they are case sensitive. Hence the variables studentname and studentName are different

26 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

because the letter n in name is different (n and N).

LEARN ARRAYS IN JAVASCRIPT An array is an object that can store a collection of items. Arrays become really useful when you need to store large amounts of data of the same type. Suppose you want to store details of 500 employees. If you are using variables, you will have to create 500 variables whereas you can do the same with a single array. You can access the items in an array by referring to its indexnumber and the index of the first element of any array is zero.

Creating an Array You can create an array in JavaScript as given below. var students = ["John", "Ann", "Kevin"]; Here, you are initializing your array as and when it is created with values “John”, “Ann” and “Kevin”.The index of “John”, “Ann” and “Kevin” is 0, 1 and 2 respectively. If you want to add more elements to the students array, you can do it like this: students[3] = "Emma"; students[4] = "Rose"; You can also create an array using Array constructor like this: var students = new Array("John", "Ann", "Kevin"); OR var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin"; HOW TO USE LOOPS IN JAVASCRIPT Loops are useful when you have to execute the same lines of code repeatedly, for a specific number of times or as long as a specific condition is true. Suppose you want to type a ‘Hello’ message 100 times in your webpage. Of course, you will have to copy and paste the same line 100 times. Instead if you use loops, you can complete this task in just 3 or 4 lines.

Different Types of Loops There are mainly four types of loops in JavaScript. 1. for loop 2. for/in loop (explained later) 3. while loop 4. do…while loop FOR LOOP Syntax: for(statement1; statement2; statment3)

{

lines of code to be executed

}

27 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

1. The statement1 is executed first even before executing the looping code. So, this statement is normally used to assign values to variables that will be used inside the loop. 2. The statement2 is the condition to execute the loop. 3. The statement3 is executed every time after the looping code is executed.

WHILE LOOP Syntax: while(condition)

{

lines of code to be executed

} The “while loop” is executed as long as the specified condition is true. Inside the while loop, you should include the statement that will end the loop at some point of time. Otherwise, your loop will never end and your browser may crash.

DO…WHILE LOOP Syntax: do

{

block of code to be executed

} while (condition) The do…while loop is very similar to while loop. The only difference is that in do…while loop, the block of code gets executed once even before checking the condition.

JQuery What is jQuery? jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jQuery library contains the following features:  HTML/DOM manipulation  CSS manipulation  HTML event methods  Effects and animations  AJAX  Utilities

28 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Advantages of JQuery  ts light weight when compared to other javascript frameworks.

 it has a wide range of plugins available for various specific needs.  it is easier for a designer to learn jQuery as it uses familiar CSS syntax. jQuery is Javascript for Designers

Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can:  Download the jQuery library from jQuery.com  Include jQuery from a CDN, like Google

Downloading jQuery There are two versions of jQuery available for downloading:  Production version - this is for your live website because it has been minified and compressed  Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com. The jQuery library is a single JavaScript file, and you reference it with the HTML Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

Do you wonder why we do not have type="text/javascript" inside the Microsoft CDN:

CONCLUSIONS: Hence, we have studied and implemented JavaScript and JQuery.

29 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ORAL QUESTION (Answer following Question) 1. What is the difference between JavaScript and jscript? 2. How to write a hello world example of JavaScript? 3. How to use external JavaScript file? 4. What is BOM? 5. What is DOM? What is the use of document object? 6. How to create function in JavaScript? 7. What are the JavaScript data types? 8. How to write html code dynamically using JavaScript? 9. How to create objects in JavaScript? 10. What is the output of 10+20+"30" in JavaScript? 11. What is jQuery? 12. Why jQuery is needed? 13. Whether jQuery HTML work for both HTML and XML documents? 14. What are the methods used to provide effects? 15. What is the advantage of using minimized version of jQuery? 16. Is jQuery is a JavaScript or JSON library file? 17. In what scenarios jQuery can be used?

30 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 04 AIM: Add dynamic web application essence in assignment no. 3 using Servlet, JSP and MySQL

LEARNING OBJECTIVES: Understanding Working of servlet. Understanding connectivity between servlet and MySQL

THEORY:

What is Servlet ?  Servlets are an important component of a J2EE application. Servlets along with JavaServer Pages (JSP) and EJB modules can be termed as server-side J2EE component types.  Servlet is a Java Programming Language.  Servlets are used to create web applications.  Servlets are used to extend the applications hosted by web servers. Servlet runs in a J2EE application server Common Gateway Interface (CGI) technology was used for dynamic content prior to introduction of Servlets.

Servlet Architecture Following diagram shows the process of Servlets in a Web Application.

The process can be summarized as follows:  A client sends a request to a Web Server, through a Web Browser.  The Web Server searches for the required Servlet and initiates it.  The Servlet then processes the client request and sends the response back to the server, which is then forwarded to the client.

31 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Advantages of a Servlet  Servlets provide component based and platform-independent methods for building Web based applications.  Each Request is run in a separate thread ,so servlet request processing is faster than CGI.  Servlets overcomes the limitations of CGI program.  Servlets run on Java Virtual Machine and in any platform and it is simple to write.  Servlet are more powerful and the performance is better.  Servlets are platform-independent.  Servlet technology, in addition to improved performance, offers security, robustness, object orientation, and platform independence.  As mentioned in the definition of servlets are fully integrated with the Java language and its standard APIs. Hence JDBC for Java database connectivity is also integrated in it.  A servlet handles concurrent requests  Handling HTTP requests and send text and data back to the client is made easy by servlet request and response objects.

Disadvantages of a Servlet  Servlets often contain both business logic and presentation logic so it makes application difficult to understand.  You would need JRE to be installed to run a servlet program.

Servlet API The Servlet API is supported by all Servlet containers, such as Tomcat and Weblogic, etc. The Application Programming Interface (API) contains interface and classes to write a servlet program. The servlet API contains two packages as listed below:  javax.servlet  javax.servlet.http  Package javax.servlet javax.servlet contains a number of classes and interface that allows the servlet to access the basic services provided by the servlet container. Following table lists the classes and interface of javax.servlet package: Name Description Type Servlet Defines methods that a servlet class must implement Interface During initialization it allows the servlet container to pass ServletConfig Interface information to a servlet. Servlet Context is used to communicate with the servlet ServletContext Interface container to get the details of web application. Receive notification about the changes made to the servlet ServletContextListener Interface context of the Web application. ServletRequest It is used to request client information to the servlet Interface It is used by servlet to write the response content to the ServletResponse Interface client. It uses the servlet instance to process only one request at a SingleThreadModel Interface time. In the web component it receives a notification of the ServletRequestListener Interface particular request that is coming in or out

32 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ServletRequestAttributeListener Notifies the changes in request attribute Interface The servlet context receives notification of the changes to be ServletContextAttributeListener Interface made on attribute list. It is a reusable code that can transform the content of request, Filter responses and the header information from one format to Interface another. FilterChain Stores information about a chain of filters. Interface FilterConfig It is used during the initialization. Interface It is used to dispatch the request from one component to RequestDispatcher Interface another. It gives the details of the life cycle events of the ServletContextEvent Class ServletContext object. Indicates that the request that is about to come in or go out of ServletRequestEvent Class the web component. Provides implementation of the ServletRequest interface to ServletRequestWrapper Class receive the request from a servlet. Provides implementation of the ServletResponse interface to ServletResponseWrapper Class send response to the servlet. Servlet container invokes this method to indicate whether the ServletRequestAttributeEvent attribute is to be added into the request, removed or replaced Class from the request. Servlet container invokes this method to indicate whether the ServletContextAttributeEvent attribute is to be added into the context, removed or replaced Class from the context. ServletInputStream Provides an input stream for reading a client requests. Class Provides an output stream for writing servlet response to ServletOutputStream Class client. Implements javax.servlet.Servlet interface and provides the GenericServlet Class basic implementation for the methods in this interface. ServletException It is used to indicate that the request has generate an error. Class Indicates that the servlet is currently unavailable to the UnavailableException Class process.

Package javax.servlet.http The servlets using HTTP protocol are supported by the package javax.servlet.http. The list of classes and interface of javax.servlet.http package are listed in the following table: Name Description Type The web container provides implementation to this interface and HttpServletRequest Interface encapsulates all HTTP based request information. HttpServletResponse Provide HTTP- specific functionality while sending a response. Interface

33 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

It is a mechanism for storing client data across multiple HTTP HttpSession Interface requests. Notifies when the objects of its implementation class is added or HttpSessionBindingListener Interface removed from the session. It is a file containing the information that is sent by web server to Cookie Class a client. This method is used to indicate whether the object is added into HttpSessionBindingEvent Class the HttpSession object or removed from the HttpSession object. Provides convenient methods for implementing for handling HttpServlet Class HTTP request.

Servlet LifeCycle Servlets are small programs that run at server side and creates dynamic web pages. Servlets respond to any type of requests sent by user. In MVC architecture servlet act as controller. The controller is the logic that processes and responds to the user requests. Life Cycle of Servlets contain following steps:  Load servlet class.  Create servlet instance.  Call the init method.  Call the service method.  Call the destroy method.

Servlet Class Loading The first step in creation of a servlet component is to load the servlet class file into web container’s JVM (Java Virtual Machine). This step is invoked when either first time servlet is invoked or configured in the web.xml with load-on-startup element. Creating Servlet Instance After the servlet class has been loaded into the web container’s JVM, the next step is to create an instance of that class. Servlet specification declares one and only one servlet instance will be created for a single definition in the deployment descriptor.

The init () method After servlet instance is created, the web container initializes the parameters that were specified in the deployment descriptor. This method is invoked only when servlet is first loaded into memory. The syntax of init () method look like this: public void init () throws Servlet Exception { //code }

The service () method After the servlet component has been initialized, the web container can begin sending requests to that component using the service method .This method is used to process the request. For each request the web container will issue unique request and response to the service method. The syntax of service () method as follows: public void service (Servletrequest request, Servletresponse response) throws ServletException, IOException { }

34 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

When service () method is called by web container it invokes doGet (), doPost (), doPut (), doDelete (), doTrace (), doOptions (), getLastModified () methods. Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The doGet () and doPost () are the two methods which are frequently used with each service request. We must override doGet () and doPost () methods depending on type of request. The doGet () method: By using doGet () method we can send specific amount of data. If we use doGet () method data is shown in address bar. We must override doGet () method depending on type of request. It can be defined as follows: public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //code }

The doPost () method: We can send large amount of data by using doPost () method. By using this method data is not viewable in address bar. When we want to send secure data like passwords and other things doPost () method is used. We must override doPost () method depending on type of request. It can be defined as follows: public void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //code }

doDelete (): It is used to delete files, web pages or documents from the server. If requests are formatted incorrectly then it will return HTTP “Bad Request” error. It can be defined as follows: protected void doDelete (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //code }

doPut() : This method is used to put files, web pages or documents in the server means for uploading files on the server. If requests are formatted incorrectly then it will return HTTP “Bad Request” error. It can be defined as follows: protected void doPut (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //code }

doTrace () : This method is used for logging and debugging purpose. It can be used for testing the requested message. There is no need to override this method. It can be defined as follows: protected void doTrace(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //code }

doOptions (): This method handles OPTIONS request. There is no need to override this method. It determines which HTTP method supported by server and returns correct header. If requests are formatted incorrectly then it will return HTTP “Bad Request” error. It can be defined as follows: protected void doOptions(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //code

35 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

} getLastModified (): It returns the time when request was last modified. This method should override GET request to return modification time of object. It can be defined as follows: protected long getLastModified (HttpServletRequest request) throws ServletException, IOException{ //code }

The destroy () method When a web application is being shut down web container will call destroy method. It is used to clean up any resources that servlet might have initialized. The syntax of destroy () method as follows: public void destroy(){ //code } Sample Code

Following is the sample source code structure of a servlet example to show Hello World −

// Import required java libraries import java.io.*; import javax.servlet.*; import javax.servlet.http.*;

// Extend HttpServlet class public class HelloWorld extends HttpServlet {

private String message;

public void init() throws ServletException { // Do required initialization message = "Hello World"; }

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// Set response content type response.setContentType("text/html");

// Actual logic goes here. PrintWriter out = response.getWriter(); out.println("

" + message + "

"); }

public void destroy() { // do nothing. } }

36 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

MySQL MySQL is a Relational DataBase Management System (RDBMS). RDBMS means R--DB--MS. - DB stands for Database, a repository for the information store.  The data in a database is organized into tables, and each table is organized into rows and columns.  Each row in a table is called a record. A record may contains several pieces (called fields) of information, and each column in a table is known as a field. -MS stands for Management System, the software that allows you to insert, retrieve, modify, or delete records. -R stands for Relational, indicates a particular kind of DBMS that is good at relating information stored in one table to information stored in another table by looking for elements common to each of them. Relational DBMS has the advantage of efficient storage, and retrieval mechanisms for data, and uses normalization process during design of RDBMS. Database normalization process is beyond the scope of this article, and several references are available. MySQL operates using client/server architecture in which the server runs on the machine containing the databases and clients connect to the server over a network. The server operating systems is usually a Linux (like Redhat 9.0 etc.) or Windows 2000 operating system. Typically mySQL is supported on Windows XP, Windows Server 2003, Red Hat Fedora Linux, and Debian Linux, and others. As with any other client/server application, MySQL is a multi-user database system, meaning several users can access the database simultaneously. Here: - The server (MySQL server) listens for client requests coming in over the network and accesses database contents according to those requests and provides that to the clients. - Clients are programs that connect to the database server and issue queries in a pre-specified format. MySQL is compatible with the standards based SQL (SQL stands for Structured Query Language) language. The client program may contact the server programmatically (meaning a program call the server during execution) or manually. For example, when you are issuing commands over a telnet session to a MySQL server, you are issuing the requests to the server by typing commands at your command prompt manually. On the other hand, if you have input some data (say your credit card information on the Internet towards purchase of some goods) in a form, and the form is processed by using a server side program, then the MySQL server is contacted programmatically. This is often the case in credit card approvals, member subscriptions etc. Features of MySQL

1. Speed:Ofcourse, the speed at which a server side program runs depends primarily on the server hardware. Given that the server hardware is optimal, MySQL runs very fast. It supports clustered servers for demanding applications.

2. Ease of use:MySQL is a high-performance, relatively simple database system. From the beginning, MySQL has typically been configured, monitored, and managed from the command line. However, several MySQL graphical interfaces are available as described below:  MySQL Administrator: This tool makes it possible for administrators to set up, evaluate, and tune their MySQL database server. This is intended as a replacement for mysqladmin.  MySQL Query Browser: Provides database developers and operators with a graphical database operation interface. It is especially useful for seeing multiple query plans and result sets in a single user interface.

37 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

 Configuration Wizard: Administrators can choose from a predefined list of optimal settings, or create their own.  MySQL System Tray: Provides Windows-based administrators a single view of their MySQL instance, including the ability to start and stop their database servers.

3. Cost:MySQL is available free of cost. MySQL is a "Open Source" database. MySQL is part of LAMP (Linux, Apache, MySQL, PHP / Perl / Python) environemtn, a fast growing open source enterprise software stack. More and more companies are using LAMP as an alternative to expensive proprietary software stacks because of its lower cost, reliability, and documentation.

4.Query Language Support:MySQL understands standards based SQL (Structured Query Language).

5. Capability :Many clients can connect to the server at the same time. Clients can use multiple database simultaneously. You can access MySQL using several interfaces such as command-line clients, Web browsers.

6. Connectivity and security: MySQL is fully networked, and database can be accessed from anywhere on the Internet, so you can share your data with anyone, anywhere. The connectivity could be achieved with Windows programs by using ODBC drivers. By using the ODBC connector to MySQL, any ODBC-aware client application (for example, Microsoft Office, report writers, Visual Basic) can connect to MySQL.

7. Portability: MySQL runs on many varieties of UNIX, as well as on other non-UNIX systems, such as Windows and OS/2. MySQL runs on hardware from home PCs to high-end server. MySQL can be installed on Windows XP, Windows Server 2003, Red Hat Fedora Linux, Debian Linux, and others. MySQL Tools 1. A SQL server: This is an engine which provides access to your databases. 2. Client programs for accessing the server: A program allows you to enter queries directly and view results. 3. A client library for writing your own programs: You can write your own programs into the client library using C.

Algorithm:  Start  Create Web Page  Connect to MySQL  Read user name and password  Depending on user name and password find department of user from database  Display books of respective Department.  Stop  CONCLUSION: Hence we created dynamic website using MySQL and Servlet.

38 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ORAL QUESTION: 1. What is different between web server and application server? 2. Which HTTP method is non-idempotent? 3. What is the difference between GET and POST method? 4. What is MIME Type? 5. What is a web application and what is it’s directory structure? 6. What is a servlet? 7. What are the advantages of Servlet over CGI? 8. What are common tasks performed by Servlet Container? 9. What is ServletConfig object? 10. What is ServletContext object? 11. What is difference between ServletConfig and ServletContext? 12. What is Request Dispatcher? 13. What is difference between PrintWriter and ServletOutputStream? 14. Can we get PrintWriter and ServletOutputStream both in a servlet? 15. How can we create deadlock situation in servlet? 16. What is the use of servlet wrapper classes?

39 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 05 AIM: Add dynamic web application essence in assignment no. 3 using PHP, MySQL database connectivity and AJAX controls.

LEARNING OBJECTIVES:

Understand the working of PHP Understanding Importance of AJAX Implementation of connectivity betweeon PHP and MySQL.

THEORY:

What is PHP? PHP is a server side scripting language. that is used to develop Static websites or Dynamic websites or Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for Personal Home Pages.  PHP scripts can only be interpreted on a server that has PHP installed.  The client computers accessing the PHP scripts require a web browser only.  A PHP file contains PHP tags and ends with the extension ".php".   What is a Scripting Language? A script is a set of programming instructions that is interpreted at runtime. A scripting language is a language that interprets scripts at runtime. Scripts are usually embedded into other software environments. The purpose of the scripts is usually to enhance the performance or perform routine tasks for an application. Server side scripts are interpreted on the server while client side scripts are interpreted by the client application. PHP is a server side script that is interpreted on the server while JavaScript is an example of a client side script that is interpreted by the client browser. Both PHP and JavaScript can be embedded into HTML pages.

Programming Language Vs Scripting Language Programming language Scripting language Has all the features needed to develop Mostly used for routine tasks complete applications. The code has to be compiled before it can be The code is usually executed without executed compiling Does not need to be embedded into other Is usually embedded into other software languages environments.

What does PHP stand for? PHP means - Personal Home Page, but it now stands for the recursive backronym PHP: Hypertext Preprocessor. PHP code may be embedded into HTML code, or it can be used in combination with various web template systems, web content management system and web frameworks.

40 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Php Syntax

A PHP file can also contain tags such as HTML and client side scripts such as JavaScript.  HTML is an added advantage when learning PHP Language. You can even learn PHP without knowing HTML but it’s recommended you at least know the basics of HTML.  Database management systems DBMS for database powered applications.  For more advanced topics such as interactive applications and web services, you will need JavaScript and XML. The flowchart diagram shown below illustrates the basic architecture of a PHP web application and how the server handles the requests.

Why use PHP? You have obviously head of a number of programming languages out there; you may be wondering why we would want to use PHP as our poison for the web programming. Below are some of the compelling reasons.  PHP is open source and free.  Short learning curve compared to other languages such as JSP, ASP etc.  Large community document

41 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

 Most web hosting servers support PHP by default unlike other languages such as ASP that need IIS. This makes PHP a cost effective choice.  PHP is regular updated to keep abreast with the latest technology trends.

 Other benefit that you get with PHP is that it’s a server side scripting language; this means you only need to install it on the server and client computers requesting for resources from the server do not need to have PHP installed; only a web browser would be enough.  PHP has in built support for working hand in hand with MySQL; this doesn’t mean you can’t use PHP with other database management systems. You can still use PHP with o Postgres o Oracle o MS SQL Server o ODBC etc.  PHP is cross platform; this means you can deploy your application on a number of different operating systems such as windows, Linux, Mac OS etc.

What is PHP used for & Market share In terms of market share, there are over 20 million websites and application on the internet developed using PHP scripting language. This may be attributed to the points raised above; The diagram below shows some of the popular sites that use PHP

PHP vs Asp.Net VS JSP VS CFML The table below compares the various server side scripting languages with PHP FEATURE PHP ASP JSP CFML Longer than Learning curve short Longer than PHP Longer than PHP PHP Supported by Needs Web hosting almost all dedicated Fairly supported Needs dedicated server hosting servers server Both commercial and Open source Yes No Yes open source Web services Uses the .NET Uses add on Built in Built in support framework libraries

42 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Integration with Fairly Easy Fairly complex Easy HTML complex Current version has Needs third Needs third party MySQL support Native native support. Older party drivers drivers versions use ODBC Easily extended Extended using by other Yes No Java classes and Yes languages libraries.

PHP File Extensions File extension and Tags In order for the server to identify our PHP files and scripts, we must save the file with the “.php” extension. Older PHP file extensions include  .phtml  .php3  .php4  .php5  .phps PHP was designed to work with HTML, and as such, it can be embedded into the HTML code.

You can create PHP files without any html tags and that is called Pure PHP file . The server interprets the PHP code and outputs the results as HTML code to the web browsers. In order for the server to identify the PHP code from the HTML code, we must always enclose the PHP code in PHP tags. A PHP tag starts with the less than symbol followed by the question mark and then the words “php”. PHP is a case sensitive language, “VAR” is not the same as “var”. The PHP tags themselves are not case-sensitive, but it is strongly recommended that we use lower case letter. The code below illustrates the above point. We will be referring to the PHP lines of code as statements. PHP statements end with a semi colon (;). If you only have one statement, you can omit the semi colon. If you have more than one statement, then you must end each line with a semi colon. For the sake of consistency, it is recommended that you always end your statement(s) with a semi colon. PHP scripts are executed on the server. The output is returned in form of HTML.

PHP Hello world The program shown below is a basic PHP application that outputs the words “Hello World!” When viewed in a web browser. Output: Hello world

43 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

What is Ajax? AJAX is the acronym for Asynchronous JavaScript & XML. It is a technology that reduces the interactions between the server and client. It does this by updating only part of a web page rather than the whole page. The asynchronous interactions are initiated by JavaScript. JavaScript is a client side scripting language. It is executed on the client side by the web browsers that support JavaScript.JavaScript code only works in browsers that have JavaScript enabled. XML is the acronym for Extensible Markup Language. It is used to encode messages in both human and machine readable formats. It’s like HTML but allows you to create your custom tags. For more details on XML, see the article on XML

Why use AJAX?  It allows developing rich interactive web applications just like desktop applications.  Validation can be performed done as the user fills in a form without submitting it. This can be achieved using auto completion. The words that the user types in are submitted to the server for processing. The server responds with keywords that match what the user entered.  It can be used to populate a dropdown box depending on the value of another dropdown box  Data can be retrieved from the server and only a certain part of a page updated without loading the whole page. This is very useful for web page parts that load things like o Tweets o Commens o Users visiting the site etc.

How to Create an PHP Ajax application We will create a simple application that allows users to search for popular PHP MVC frameworks. Our application will have a text box that users will type in the names of the framework. We will then use mvc AJAX to search for a match then display the framework’s complete name just below the search form.

Step 1) Creating the index page Index.php

PHP MVC Frameworks - Search Engine

44 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Type the first letter of the PHP MVC Framework

Matches:

HERE,  “onkeyup="showName(this.value)"” executes the JavaScript function showName everytime a key is typed in the textbox. This feature is called auto complete

Step 2) Creating the frameworks page frameworks.php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

45 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

}

}

echo ($match == "") ? 'no match found' : $match;

?>

Step 3) Creating the JS script auto_complete.js HERE,  “if (str.length == 0)” check the length of the string. If it is 0, then the rest of the script is not executed.

 “if (window.XMLHttpRequest)…” Internet Explorer versions 5 and 6 use ActiveXObject for AJAX implementation. Other versions and browsers such as Chrome, FireFox use XMLHttpRequest. This code will ensure that our application works in both IE 5 & 6 and other high versions of IE and browsers.

 “xmlhttp.onreadystatechange=function…” checks if the AJAX interaction is complete and the status is 200 then updates the txtName span with the returned results.

Step 4) Testing our PHP Ajax application Assuming you have saved the file index.php In phututs/ajax, browse to the URL http://localhost/phptuts/ajax/index.php

Type the letter C in the text box You will get the following results.

47 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

The above example demonstrates the concept of AJAX and how it can help us create rich interaction applications.

Algorithm:  Start  Create Web Page  Connect to MySQL  Read user name and password  Depending on user name and password find department of user from database  Display books of respective Department.  Stop  CONCLUSION: Hence we created dynamic website using MySQL,PHP and AJAX.

ORAL QUESTION 1) What is PHP? 2) What is PEAR in PHP? 3) Who is known as the father of PHP? 4) What was the old name of PHP? 5) Explain the difference b/w static and dynamic websites? 6) What is the name of scripting engine in PHP? 7) Explain the difference between PHP4 and PHP5. 8) What are the popular Content Management Systems (CMS) in PHP? 9) What are the popular frameworks in PHP? 10) Which programming language does PHP resemble to? 11) List some of the features of PHP7. 12) What is "echo" in PHP? 13) What is "print" in PHP? 14) What is the difference between "echo" and "print" in PHP? 15) How a variable is declared in PHP? 16) What is the difference between $message and $$message? 17) What are the ways to define a constant in PHP?

1. What is Ajax? 2. How many types of triggers are present in update panel? 3. What are all the controls of Ajax? 4. How to control the duration of an Ajax request?

48 | P a g e

PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 06 AIM: Redesign, develop and deploy assignment no. 4 using Strut

LEARNING OBJECTIVES: To understand Basics of Struts.

THEORY:

Introduction to Struts Apache Struts is an elegant, extensible framework for creating enterprise-ready Java web applications. This framework is designed to streamline the full development cycle from building, to deploying and maintaining applications over time. Apache Struts was originally known as Web Work 2.

BASIC MVC ARCHITECTURE Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts −  Model − The lowest level of the pattern which is responsible for maintaining data.  View − This is responsible for displaying all or a portion of the data to the user.  Controller − Software Code that controls the interactions between the Model and View. MVC is popular as it isolates the application logic from the user interface layer and supports separation of concerns. Here the Controller receives all requests for the application and then works with the Model to prepare any data needed by the View. The View then uses the data prepared by the Controller to generate a final presentable response. The MVC abstraction can be graphically represented as follows.

THE MODEL

49 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

The model is responsible for managing the data of the application. It responds to the request from the view and it also responds to instructions from the controller to update itself. THE VIEW It means presentation of data in a particular format, triggered by a controller's decision to present the data. They are script-based templating systems like JSP, ASP, PHP and very easy to integrate with AJAX technology. THE CONTROLLER The controller is responsible for responding to the user input and perform interactions on the data model objects. The controller receives the input, it validates the input and then performs the business operation that modifies the state of the data model OVERVIEW Struts2 is a popular and mature web application framework based on the MVC design pattern. Struts2 is not just a new version of Struts 1, but it is a complete rewrite of the Struts architecture. The Webwork framework initially started with Struts framework as the basis and its goal was to offer an enhanced and improved framework built on Struts to make web development easier for the developers. After a while, the Webwork framework and the Struts community joined hands to create the famous Struts2 framework.

STRUTS FRAMEWORK FEATURES Here are some of the great features that may force you to consider Struts2 −  POJO Forms and POJO Actions − Struts2 has done away with the Action Forms that were an integral part of the Struts framework. With Struts2, you can use any POJO to receive the form input. Similarly, you can now see any POJO as an Action class.  Tag Support − Struts2 has improved the form tags and the new tags which allow the developers to write less code.  AJAX Support − Struts2 has recognized the take over by Web2.0 technologies, and has integrated AJAX support into the product by creating AJAX tags, this function is very similar to the standard Struts2 tags.  Easy Integration − Integration with other frameworks like Spring, Tiles and SiteMesh is now easier with a variety of integration available with Struts2.  Template Support − Support for generating views using templates.  Plugin Support − The core Struts2 behavior can be enhanced and augmented by the use of plugins. A number of plugins are available for Struts2.  Profiling − Struts2 offers integrated profiling to debug and profile the application. In addition to this, Struts also offers integrated debugging with the help of built in debugging tools.  Easy to Modify Tags − Tag markups in Struts2 can be tweaked using Freemarker templates. This does not require JSP or java knowledge. Basic HTML, XML and CSS knowledge is enough to modify the tags.  Promote Less configuration − Struts2 promotes less configuration with the help of using default values for various settings. You don't have to configure something unless it deviates from the default settings set by Struts2.  View Technologies − Struts2 has a great support for multiple view options (JSP, Freemarker, Velocity and XSLT) Listed above are the Top 10 features of Struts which makes it as an Enterprise ready framework.

50 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

STRUTS DISADVANTAGES Though Struts comes with a list of great features, there are some limitations of the current version - Struts which needs further improvement. Listed are some of the main points −  Bigger Learning Curve − To use MVC with Struts, you have to be comfortable with the standard JSP, Servlet APIs and a large & elaborate framework.  Poor Documentation − Compared to the standard servlet and JSP APIs, Struts has fewer online resources, and many first-time users find the online Apache documentation confusing and poorly organized.  Less Transparent − With Struts applications, there is a lot more going on behind the scenes than with normal Java-based Web applications which makes it difficult to understand the framework.

Final note, a good framework should provide generic behavior that many different types of applications can make use of it. ENVIRONMENT SETUP STEP 1 - SETUP JAVA DEVELOPMENT KIT (JDK) You can download the latest version of SDK from Oracle's Java site − Java SE Downloads. You will find instructions for installing JDK in downloaded files, follow the given instructions to install and configure the setup. Finally, set PATH and JAVA_HOME environment variables to refer to the directory that contains java and javac, typically java_install_dir/bin and java_install_dir respectively. If you are running Windows and installed the SDK in C:\jdk1.5.0_20, you should be inputting the following line in your C:\autoexec.bat file. set PATH = C:\jdk1.5.0_20\bin;%PATH% set JAVA_HOME = C:\jdk1.5.0_20 Alternatively, on Windows NT/2000/XP −  You can right-click on My Computer, Select Properties, then Advanced, then Environment Variables. Then, you would update the PATH value and press the OK button.  On Unix (Solaris, Linux, etc.), if the SDK is installed in /usr/local/jdk1.5.0_20 and you use the C shell, you would put the following into your .cshrc file. On Unix (Solaris, Linux, etc.), if the SDK is installed in /usr/local/jdk1.5.0_20 and you use the C shell, you would put the following into your .cshrc file. setenv PATH /usr/local/jdk1.5.0_20/bin:$PATH setenv JAVA_HOME /usr/local/jdk1.5.0_20 Alternatively, if you use an Integrated Development Environment (IDE) like Borland JBuilder, Eclipse, IntelliJ IDEA, or Sun ONE Studio, compile and run a simple program to confirm that the IDE knows where you installed Java, otherwise do proper setup as per the given document of IDE. STEP 2 - SETUP APACHE TOMCAT You can download the latest version of Tomcat from https://tomcat.apache.org/. Once you downloaded the installation, unpack the binary distribution into a convenient location. For example in C:\apache-tomcat-6.0.33 on windows, or /usr/local/apachetomcat-6.0.33 on Linux/Unix and create CATALINA_HOME environment variable pointing to these locations. You can start Tomcat by executing the following commands on windows machine, or you can simply double click on startup.bat

51 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

%CATALINA_HOME%\bin\startup.bat

or

C:\apache-tomcat-6.0.33\bin\startup.bat Tomcat can be started by executing the following commands on Unix (Solaris, Linux, etc.) machine − $CATALINA_HOME/bin/startup.sh

or

/usr/local/apache-tomcat-6.0.33/bin/startup.sh After a successful startup, the default web applications included with Tomcat will be available by visiting http://localhost:8080/. If everything is fine, then it should display the following result −

Further information about configuring and running Tomcat can be found in the documentation included here, as well as on the Tomcat website: https://tomcat.apache.org/ Tomcat can be stopped by executing the following commands on windows machine − %CATALINA_HOME%\bin\shutdown

or

C:\apache-tomcat-5.5.29\bin\shutdown Tomcat can be stopped by executing the following commands on Unix (Solaris, Linux, etc.) machine − $CATALINA_HOME/bin/shutdown.sh

52 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

or

/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh STEP 3 - SETUP ECLIPSE (IDE) All the examples in this tutorial are written using Eclipse IDE. I suggest that, you have the latest version of Eclipse installed in your machine. To install Eclipse Download the latest Eclipse binaries from https://www.eclipse.org/downloads/. Once you download the installation, unpack the binary distribution into a convenient location. For example in C:\eclipse on windows, or /usr/local/eclipse on Linux/Unix and finally set PATH variable appropriately. Eclipse can be started by executing the following commands on windows machine, or you can simply double click on eclipse.exe %C:\eclipse\eclipse.exe Eclipse can be started by executing the following commands on Unix (Solaris, Linux, etc.) machine − $/usr/local/eclipse/eclipse After a successful startup, if everything is fine, it should display the following result −

STEP 4 - SETUP STRUTS2 LIBRARIES Now if everything is fine, then you can proceed to setup your Struts2 framemwork. Following are the simple steps to download and install Struts2 on your machine.  Make a choice whether you want to install Struts2 on Windows, or Unix and then proceed to the next step to download .zip file for windows and .tz file for Unix.

53 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

 Download the latest version of Struts2 binaries from https://struts.apache.org/download.cgi.  At the time of writing this tutorial, I downloaded struts-2.0.14-all.zip and when you unzip the downloaded file it will give you directory structure inside C:\struts-2.2.3 as follows.

Second step is to extract the zip file in any location, I downloaded & extracted struts-2.2.3- all.zip in c:\ folder on my Windows 7 machine so that I have all the jar files into C:\struts- 2.2.3\lib. Make sure you set your CLASSPATH variable properly otherwise you will face problem while running your application ARCHITECTURE From a high level, Struts2 is a pull-MVC (or MVC2) framework. The Model-ViewController pattern in Struts2 is implemented with the following five core components −  Actions  Interceptors  Value Stack / OGNL  Results / Result types  View technologies Struts is slightly different from a traditional MVC framework, where the action takes the role of the model rather than the controller, although there is some overlap.

54 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

The above diagram depicts the Model, View and Controller to the Struts2 high level architecture. The controller is implemented with a Struts2 dispatch servlet filter as well as interceptors, this model is implemented with actions, and the view is a combination of result types and results. The value stack and OGNL provides common thread, linking and enabling integration between the other components. Apart from the above components, there will be a lot of information that relates to configuration. Configuration for the web application, as well as configuration for actions, interceptors, results, etc. This is the architectural overview of the Struts MVC pattern. We will go through each component in more detail in the subsequent chapters. REQUEST LIFE CYCLE Based on the above diagram, you can understand the work flow through user's request life cycle in Struts as follows −  User sends a request to the server for requesting for some resource (i.e. pages).  The Filter Dispatcher looks at the request and then determines the appropriate Action.  Configured interceptor functionalities applies such as validation, file upload etc.  Selected action is performed based on the requested operation.  Again, configured interceptors are applied to do any post-processing if required.  Finally, the result is prepared by the view and returns the result to the user. HELLO WORLD EXAMPLE As you have already learnt from the Struts architecture, when you click on a hyperlink or submit an HTML form in a Struts web-application, the input is collected by the Controller which is sent to a Java class called Actions. After the Action is executed, a result selects a resource to render the response. The resource is generally a JSP, but it can also be a PDF file, an Excel spreadsheet, or a Java applet window.

55 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Assuming that you already have built your development environment. Now, let us proceed for building our first Hello World Struts2 project. The aim of this project is to build a web application that collects the user's name and displays "Hello World" followed by the user name. We would have to create following four components for any Struts project − Sr.No Components & Description Action 1 Create an action class which will contain complete business logic and control the interaction between the user, the model, and the view. Interceptors 2 Create interceptors if required, or use existing interceptors. This is part of Controller. View 3 Create a JSPs to interact with the user to take input and to present the final messages. Configuration Files 4 Create configuration files to couple the Action, View and Controllers. These files are struts.xml, web.xml, struts.properties. I am going to use Eclipse IDE, so that all the required components will be created under a Dynamic Web Project. Let us now start with creating Dynamic Web Project. CREATE A DYNAMIC WEB PROJECT Start your Eclipse and then go with File > New > Dynamic Web Project and enter project name as HelloWorldStruts2 and set rest of the options as given in the following screen −

56 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Select all the default options in the next screens and finally check Generate Web.xml deployment descriptor option. This will create a dynamic web project for you in Eclipse. Now go with Windows > Show View > Project Explorer, and you will see your project window something as below −

Now copy following files from Struts lib folder C:\struts-2.2.3\lib to our project's WEB-INF\lib folder. To do this, you can simply drag and drop all the following files into WEB-INF\lib folder.  commons-fileupload-x.y.z.jar  commons-io-x.y.z.jar  commons-lang-x.y.jar  commons-logging-x.y.z.jar  commons-logging-api-x.y.jar  freemarker-x.y.z.jar  javassist-.xy.z.GA  ognl-x.y.z.jar  struts2-core-x.y.z.jar  xwork-core.x.y.z.jar CREATE ACTION CLASS Action class is the key to Struts application and we implement most of the business logic in action class. So let us create a java file HelloWorldAction.java under Java Resources > src with a package name com.tutorialspoint.struts2 with the contents given below. The Action class responds to a user action when user clicks a URL. One or more of the Action class's methods are executed and a String result is returned. Based on the value of the result, a specific JSP page is rendered. package com.tutorialspoint.struts2;

public class HelloWorldAction {

57 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

private String name;

public String execute() throws Exception { return "success"; }

public String getName() { return name; }

public void setName(String name) { this.name = name; } } This is a very simple class with one property called "name". We have standard getters and setter methods for the "name" property and an execute method that returns the string "success". The Struts framework will create an object of the HelloWorldAction class and call the executed method in response to a user's action. You put your business logic inside this method which finally returns the String constant. In other words, for each URL, you would have to implement one action class and either you can use that class name directly as your action name or you can map to some other name using struts.xml file as shown below. CREATE A VIEW We need a JSP to present the final message, this page will be called by Struts framework when a predefined action will happen and this mapping will be defined in struts.xml file. So let us create the below jsp file HelloWorld.jsp in the WebContent folder in your eclipse project. To do this, right click on the WebContent folder in the project explorer and select New >JSP File. <%@ page contentType = "text/html; charset = UTF-8" %> <%@ taglib prefix = "s" uri = "/struts-tags" %>

Hello World, The taglib directive tells the Servlet container that this page will be using the Struts tags and that these tags will be preceded by s. The s:property tag displays the value of action class property "name> which is returned by the method getName() of the HelloWorldAction class. CREATE MAIN PAGE

58 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

We also need to create index.jsp in the WebContent folder. This file will serve as the initial action URL where a user can click to tell the Struts framework to call a defined method of the HelloWorldAction class and render the HelloWorld.jsp view. <%@ page language = "java" contentType = "text/html; charset = ISO-8859-1" pageEncoding = "ISO-8859-1"%> <%@ taglib prefix = "s" uri = "/struts-tags"%>

Hello World From Struts2

Please enter your name

The hello action defined in the above view file will be mapped to the HelloWorldAction class and its execute method using struts.xml file. When a user clicks on the Submit button it will cause the Struts framework to run the execute method defined in the HelloWorldAction class and based on the returned value of the method, an appropriate view will be selected and rendered as a response. CONFIGURATION FILES We need a mapping to tie the URL, the HelloWorldAction class (Model), and the HelloWorld.jsp (the view) together. The mapping tells the Struts framework which class will respond to the user's action (the URL), which method of that class will be executed, and what view to render based on the String result that method returns. So let us create a file called struts.xml. Since Struts requires struts.xml to be present in the classes folder. Hence, create struts.xml file under the WebContent/WEB-INF/classes folder. Eclipse does not create the "classes" folder by default, so you need to do this yourself. To do this, right click on the WEB-INF folder in the project explorer and select New > Folder. Your struts.xml should look like −

59 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

/HelloWorld.jsp Few words which need to be understood regarding the above configuration file. Here, we set the constant struts.devMode to true, because we are working in development environment and we need to see some useful log messages. Then, we define a package called helloworld. Creating a package is useful when you want to group your actions together. In our example, we named our action as "hello" which is corresponding to the URL /hello.action and is backed up by theHelloWorldAction.class. The execute method of HelloWorldAction.class is the method that is run when the URL /hello.action is invoked. If the outcome of the execute method returns "success", then we take the user to HelloWorld.jsp. Next step is to create a web.xml file which is an entry point for any request to Struts. The entry point of Struts2 application will be a filter defined in deployment descriptor (web.xml). Hence, we will define an entry of org.apache.struts2.dispatcher.FilterDispatcher class in web.xml. The web.xml file needs to be created under the WEB-INF folder under WebContent. Eclipse had already created a skeleton web.xml file for you when you created the project. So, lets just modify it as follows −

Struts

index.jsp

struts2 org.apache.struts2.dispatcher.FilterDispatcher

60 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

struts2 /* We have specified index.jsp to be our welcome file. Then we have configured the Struts2 filter to run on all urls (i.e, any url that match the pattern /*) TO ENABLE DETAILED LOG You can enable complete logging functionality while working with Struts by creating logging.properties file under WEB-INF/classes folder. Keep the following two lines in your property file − org.apache.catalina.core.ContainerBase.[Catalina].level = INFO org.apache.catalina.core.ContainerBase.[Catalina].handlers = \ java.util.logging.ConsoleHandler The default logging.properties specifies a ConsoleHandler for routing logging to stdout and also a FileHandler. A handler's log level threshold can be set using SEVERE, WARNING, INFO, CONFIG, FINE, FINER, FINEST or ALL. That's it. We are ready to run our Hello World application using Struts framework. PROCEDURE FOR EXECUTING THE APPLICATION Right click on the project name and click Export > WAR File to create a War file. Then deploy this WAR in the Tomcat's webapps directory. Finally, start Tomcat server and try to access URL http://localhost:8080/HelloWorldStruts2/index.jsp. This will give you following screen −

Enter a value "Struts2" and submit the page. You should see the next page

61 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Note that you can define index as an action in struts.xml file and in that case you can call index page as http://localhost:8080/HelloWorldStruts2/index.action. Check below how you can define index as an action − /index.jsp /HelloWorld.jsp

Algorithm:  Start  Create Web Page  Connect to MySQL  Read user name and password  Depending on user name and password find department of user from database  Display books of respective Department.  Stop

CONCLUSION: Hence we created dynamic website using Struts.

62 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ORAL QUESTIONS:- 1. What are the components of Struts Framework? 2. What’s the role of a handler in MVC based applications? 3. What’s the flow of requests in Struts based applications? 4. Which file is used by controller to get mapping information for request routing? 5. What’s the role of Action Class in Struts? 6. How an actionForm bean is created? 7. What are the two types of validations supported by Validator FrameWork? 8. What are the steps of Struts Installation? 9. How client side validation is enabled on a JSP form? 10. How action-mapping tag is used for request forwarding in Struts configuration file?

63 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 07 AIM: Redesign, develop and deploy assignment no. 5 using Angular JS

LEARNING OBJECTIVES: To understand implementation of AngularJS.

THEORY: ANGULARJS INTRODUCTION

AngularJS is a JavaScript framework. It can be added to an HTML page with a

ANGULARJS EXTENDS HTML AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.

ANGULARJS EXAMPLE

Name:

Example explained: AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the

element is the "owner" of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the innerHTML of the

element to the application variable name.

64 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ANGULARJS DIRECTIVES

As you have already seen, AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initializes AngularJS application variables. ANGULARJS EXAMPLE

The name is

Alternatively with valid HTML: ANGULARJS EXAMPLE

The name is

You can use data-ng-, instead of ng-, if you want to make your page HTML valid. You will learn a lot more about directives later in this tutorial.

ANGULARJS EXPRESSIONS AngularJS expressions are written inside double braces: {{ expression }}. AngularJS will "output" data exactly where the expression is written: ANGULARJS EXAMPLE

My first expression: {{ 5 + 5 }}

AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive. ANGULARJS EXAMPLE

Name:

{{name}}

65 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

You will learn more about expressions later in this tutorial.

ANGULARJS APPLICATIONS AngularJS modules define AngularJS applications. AngularJS controllers control AngularJS applications. The ng-app directive defines the application, the ng-controller directive defines the controller. ANGULARJS EXAMPLE

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

AngularJS modules define applications: ANGULARJS MODULE var app = angular.module('myApp', []); AngularJS controllers control applications: ANGULARJS CONTROLLER app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

ANGULARJS EXPRESSIONS

AngularJS binds data to HTML using Expressions.

66 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ANGULARJS EXPRESSIONS

AngularJS expressions can be written inside double braces: {{ expression }}.

AngularJS expressions can also be written inside a directive: ng-bind="expression".

AngularJS will resolve the expression, and return the result exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

EXAMPLE

My first expression: {{ 5 + 5 }}

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

EXAMPLE

My first expression: {{ 5 + 5 }}

67 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result.

Example: Let AngularJS change the value of CSS properties.

Change the color of the input box below, by changing its value:

EXAMPLE

ANGULARJS NUMBERS

AngularJS numbers are like JavaScript numbers:

EXAMPLE

Total in dollar: {{ quantity * cost }}

Same example using ng-bind:

EXAMPLE

Total in dollar:

Algorithm:  Start  Create Web Page  Connect to MySQL  Read user name and password  Depending on user name and password find department of user from database  Display books of respective Department.  Stop

CONCLUSION: Hence we created dynamic website using AngularJS.

68 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Oral Questions: 1. What is the difference between Angular and jQuery? 2. Name the key features of AngularJS? 3. Explain data binding in AngularJS. 4. What are directives in AngularJS? 5. What are Controllers in AngularJS? 6. What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions? 7. What are the characteristics of ‘Scope’? 8. What are the advantages of using Angular.js framework? 9. Explain what is injector in AngularJS? 10. What is ng-app, ng-init and ng-model?

69 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 08

AIM: Design, Develop and Deploy separate web application using Bootstrap.

OBJECTIVES: To understand basic concept of Bootstrap.

THEORY: What is Bootstrap

Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.

Bootstrap also gives you ability to create responsive layout with much less efforts.

Advantages of Bootstrap

The biggest advantage of using Bootstrap is that it comes with free set of tools for creating flexible and responsive web layouts as well as common interface components.

Additionally, using the Bootstrap data APIs you can create advanced interface components like Scrollspy and Typeaheads without writing a single line of JavaScript.

Here are some more advantages, why one should opt for Bootstrap:

 Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.  Responsive features — Using Bootstrap you can easily create responsive designs. Bootstrap responsive features make your web pages to appear more appropriately on different devices and screen resolutions without any change in markup.  Consistent design — All Bootstrap components share the same design templates and styles through a central library, so that the designs and layouts of your web pages are consistent throughout your development.  Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.  Compatible with browsers — Bootstrap is created with modern browsers in mind and it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.  Open Source — And the best part is, it is completely free to download and use.

70 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Getting Started with Bootstrap

Here, you will learn how easy it is to create a web page using Bootstrap. Before begin, be sure to have a code editor and some working knowledge of HTML and CSS.

Downloading the Bootstrap Files

There are two versions available for download, compiled Bootstrap and Bootstrap source files. Compiled download contain compiled and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source contain original source files for all CSS and JavaScript, along with a local copy of the docs.

For the purpose of better understanding we'll focus on the compiled Bootstrap files. It saves your time because you don't have to bother every time including separate files for individual functionality. It will also increase the performance of your website and saves the precious bandwidth when you decided to move your site on production because of lesser HTTP request and download size since files are compiled and minified.

Understanding the File Structure

Once downloaded the compiled Bootstrap, unzip the compressed folder to see the structure. You'll find the following file structure and contents.

bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff

As you can see compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

There are four font files (glyphicons-halflings-regular.*) inside the fonts folder. These fonts file includes more than 250 icons from the Glyphicon Halflings set.

71 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Creating Your First Web Page with Bootstrap

So far you have understood the structure and the purposes of Bootstrap files, now it's time to put Bootstrap into real use. In this section, we'll create a basic Bootstrap template that includes everything we mentioned in the file structure.

Let's walk through the following steps. At the end of the tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.

Step 1: Creating a Basic HTML file

Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code and save it as "basic.html" on your desktop.

Example Try this code »

                  

Hello, world!

    

.

Step 2: Making this HTML File a Bootstrap Template

To make this HTML file a Bootstrap template, just include the appropriate Bootstrap CSS and JS files. You should include JavaScript files at the bottom of the page — before closing of the tag (i.e. ) to improve the performance of your web pages.

Example Try this code »

       

72 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

                

Hello, world!

        

And we're all set! after adding the Bootstrap's CSS and JS files and the required jQuery library, we can begin to develop any site or application with Bootstrap framework.

Step 3: Saving the file

Now save the file on your desktop as "bootstrap-template.html".

Note: It is important that the extension .html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.

To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. (If it does not, open your browser and drag the file to it.)

Including Bootstrap's Files via CDN

You can also include the Bootstrap's CSS and JavaScript files as well as the jQuery library JavaScript file in your document using the freely available CDN (Content Delivery Network) links, if you don't want to download and host the Bootstrap or jQuery yourself.

CDNs can offer a performance benefit by reducing the loading time, because they are hosting the Bootstrap's files on multiple servers spread across the globe and when a user requests the file, it will be served from the server nearest to them.

Example Try this code »

       

73 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

             

Hello, world!

        

In the above example, we've included the compiled and minified version of Bootstrap's CSS and JavaScript files as well as the necessary jQuery library using the CDN links. You'll also find these CDN links in most of the practice examples code throughout this site.

The attributes integrity and crossorigin have been added to Bootstrap CDN to implement Subresource Integrity (SRI). It is a security feature that enables you to mitigate the risk of attacks originating from compromised CDNs, by ensuring that the files your website fetches (from a CDN or anywhere) have been delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match.

CONCLUSION:-We have created website using bootstap.

74 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

Oral Questions: 1. Explain what is Bootstrap? 2. Explain why to choose Bootstrap for building the websites? 3. What are the key components of Bootstrap? 4. Explain what are class loaders in Bootstrap? 5. Explain what is Bootstrap Grid System? 6. What are offset columns in Bootstrap? 7. What is column ordering in Bootstrap? 8. What function you can use to wrap a page content? 9. Explain what pagination in bootstrap is and how they are classified? 10. What is the use of Jumbotron in Bootstrap?

75 | P a g e PVGCOE,NASHIK, Department of Computer Engineering

ASSIGNMENT NO - 09 AIM:Mini Project

Report Format

76 | P a g e

A Mini Project Report On

PROJECT TITLE

Submitted By

XXXXXXX T15093 YYYYYYY T15093 ZZZZZZZ T15093

Under the guidance of

Prof. NAME OF GUIDE

In partial fulfilment of Bachelor of Engineering [T. E. Computer Engineering] [MAY 2019] AT

Department of Computer Engineering Pune Vidyarthi Griha’s College Of Engineering, Nashik-4

Savitribai Phule Pune University

Pune Vidyarthi Griha’s COLLEGE OF ENGINEERING, Nashik. Department of Computer Engineering

CERTIFICATE

This is certify that the Mini Project entitled “PROJECT NAME”, submitted by YOUR NAME is a record of bonafide work carried out by him, in the partial fulfilment of the requirement for the award of Degree of Bachelor of Engineering (Computer Engineering) at Pune Vidyarthi Griha’s college of engineering,Nashik under the Savitribai Phule Pune University. This work is done during year 201_-201_, under our guidance.

——————————— (Prof. GUIDES NAME)

Project Guide

——————————– ———————————- Prof. Dr.

HOD, Computer Department Principal, PVGCOE,Nashik Examination:

Examiner ————————

Date:

Acknowledgements

I am profoundly grateful to Prof. GUIDE NAME for his expert guidance and continuous encouragement throughout to see that this project rights its target since its commencement to its completion.

I would like to express deepest appreciation towards Dr. , Principal PVGCOE, Nashik, Prof. . HOD Computer Department and I am particularly grateful to GUIDE’s NAME who allows me to work in the com-pany.

At last I must express my sincere heartfelt gratitude to all the staff members of Computer Department who helped me directly or indirectly during this course of work.