Web Technology Lab Manual (3)
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 124
| Download | |
| Open PDF In Browser | View PDF |
_____________________________________________________________________________________________ Web Technology Lab Manual ACADEMIC YEAR 2017-18 SEMESTER- IV 1,Kennedy Road, Pune-01 Table of Content _____________________________________________________________________________________ Sr. No Content Page No. ____________________________________________________________________________________ 1. About Savitribai Phule Pune University i 2. About Program i 3. About Institute ii 4. About College ii 5. Assignment No.1 1-5 6. Assignment No.2 6-13 7. Assignment No.3 14-18 8. Assignment No.4 19-24 9. Assignment No.5 25-39 10. Assignment No.6 40-60 11. Assignment No.7 61-70 12. Assignment No.8 71-81 13. Assignment No.9 82-96 14. Assignment No.10 97-119 About Savitribai Phule Pune University Savitribai Phule Pune University, one of the premier universities in India, is positioned in the North-western part of Pune city. It occupies an area of about 411 acres. It was established on 10th February, 1949 under the Poona University Act. The university houses 46 academic departments. It is popularly known as the 'Oxford of the East'. It has about 307 recognized research institutes and 612 affiliated colleges offering graduate and under-graduate courses. The university attracts many foreign students due to its excellent facilities. It offers good accommodation facility. There is a provision of hostel for the students. There is a well-stocked library containing plenty of books regarding various subjects. The university offers different scholarships to the students. The university conducts seminars and conferences for the students. About Program (Web Technology Lab - Third Year Engineering) Nowadays, there are a few companies that, if having a traditional business, do not have a web presence. The Internet environment is not only a simple tool to promote a business, but it also offers opportunities to supply information; it is an efficient platform to communicate with the clients. The integration of Web technologies has an important place into the process of accomplishing companies’ objectives to increase the competitiveness degree on the market by building customer loyalty. The Future of Web Development: Javascript has been ubiquitous on the front-end for a long time and Node has grown into a well developed, enterprise ready technology with a massive amount of support via the npm. New tools such as Ionic(mobile) and Electron(desktop) have made it possible to build applications across all platforms using HTML, CSS and Javascript. The server side applications are PHP, AJAX, Servlet etc. i About Institute The AISSMS COE, Pune is a co-education Institute established in 1992. The College of Engineering is affiliated to the University of Pune. It conducts AICTE approved courses leading to the degree of Bachelor of Engineering (BE) in eight engineering streams and Master of Engineering (ME) in Seven engineering streams. The AISSMS COE, is located in heart of Pune city. It is in the vicinity of Pune Railway station & Shivaji Nagar.. About Department The Computer Engineering Department of AISSMS College of Engineering was started in the year 1998. The goal of the Department is to prepare students for successful careers in software and hardware industry that meets the needs of Indian and multinational companies or to excel in higher studies. The Department has experienced and dedicated faculty members with strong commitment to the engineering education and professional ethics. Web Technology Lab Assignment List 1. Installation of TOMCAT/ WebSphere/JBoss/GlassFish Server and configuration of it. 2. Write a program to design registration form for students by using HTML and CSS. 3. Write a program to design book catalog by using XML and CSS to display tile, author, price and year of the book. 4. Write a program to design registration form for students by using HTML, CSS& Java Script and perform following validations: all fields mandatory, phone number and email address validation. 5. Design and Build Student Login Page using JSP, Servlet and MySQL. 6. Design and develop dynamic web application using PHP and MySQL as a back-end for employee data with insert, delete, view and update operations. 7. Design and develop dynamic web application using PHP, AJAX and MySQL as a backend for employee data with insert and view operations. 8. Create a login module for the web application using struts framework. 9. Create an application for Bill Payment Record using AngularJS. 10. Design, Develop & Deploy web application using EJB. iv Web Technology Lab Manual Assignment No. : 1 TITLE TOMCAT SERVER installation OBJECTIVES 1. Understand how to install tomcat server and set up environment variables PROBLEM STATEMENT Installation of TOMCAT Server and Configuration of it. OUTCOME Students will be able to, 1. Install TOMCAT Server and Configuration of it . SOFTWARE & HARDWARE REQUIREMENTS 1. Java 7 or Later 2. Apache Tomcat Server THEORY-CONCEPT Web Application: A web application runs over the Internet. Ex. eBay,Amazon ,Google, facebooketc A webapp contains five components: 1.HTTP Server: Examples are- Google Web Server , Apache HTTP Server, Apache Tomcat Server, Microsoft Internet Information Server (IIS) etc 2.HTTP Client (Web Browser): Examples are- Internet Explorer, Firefox, Google Chrome, Safari etc. 3.Database:Examples are- MySQL, Apache Derby, MS SQL Server, SQLite, PostgreSQL, Commercial Oracle, IBM DB2, SAP SyBase, MS Access etc AISSMS COE, PUNE Page 1 Web Technology Lab Manual 4.Client-Side Programs: It can be written in HTML Form,VBScript, JavaScript, Flash etc. 5.Server-Side Programs: could be written in Java Servlet/JSP, ASP, PHP, Perl, Python, CGI, and others. A web app is 3-tier (or multi-tier) client-server database application which run over the Internet as shown in the following diagram, Figure.1: Three-Tier Client-Server Architecture 1. To start a webapp, A user, issues a URL request via a web browser (HTTP client), to HTTP server. 2. The HTTP server returns an HTML form (client-side program), which is loaded into the client's browser. 3. The user fills up the query data inside the form and submits that form. 4. The client-side program sends the query parameters to a server-side program. 5. The server-side program receives the query parameters, queries the database based on these parameters, and returns the query result to the client-side program. 6. The client-side program displays the query result on the browser. AISSMS COE, PUNE Page 2 Web Technology Lab Manual 7. The process repeats for the next request. Apache tomcat Tomcat is an open-source project, under the "Apache Software Foundation" (which also provides the most use, open-source, industrial-strength Apache HTTP Server). The mother site for Tomcat is http://tomcat.apache.org. Alternatively, you can find tomcat via the Apache mother site:http://www.apache.org. EXECUTION STEPS 1. Goto http://tomcat.apache.org 2. Select tomcat version 8 from left side list under Download option (tomcat 8) or select a link 32-bit/64-bit Windows Service Installer (pgp, md5, sha1, sha512) 3. Download and run ‘.exe ‘ file. 4. I preferred, installation of Tomcat at C:\Program Files (x86)\Apache Software Foundation 5. Use the default settings and provide a password that you will remember. 6. Now you will find the Tomcat installed at C:\Program Files (x86)\Apache Software Foundation\Tomcat 8.0 How to Run Tomcat Following are the steps to check whether Tomcat has been installed successfully or not1. Find start program in the Programs Menu. Look under Apache Tomcat and select "Start Tomcat" or “startup.bat”. 2. Open any web browser and type in the given URL: o http://localhost:8080/ Now, you will see the Tomcat home page, which is provided by the Tomcat Web server running on your computer. To shut down your server and remove the Console window, select "Stop Tomcat" in the same menu of where you selected "Stop Tomcat". AISSMS COE, PUNE Page 3 Web Technology Lab Manual Tomcat's Directories It contains the following sub-directories: • bin: It contains the binaries; startup script (startup.bat for Windows and startup.sh for Unix and Mac OS), shutdown script (shutdown.bat for Windows and shutdown.sh for Unix and Mac OS), as well as other binaries and scripts. • conf: It contains the system-wide configuration files such as server.xml, web.xml, context.xml, and tomcat-users.xml. • lib: It contains the Tomcat's system-wide JAR files, which can be accessible by all webapps. We can also place external JAR file (such as MySQL JDBC Driver). • logs: It contains log files of Tomcat. Also, you can check error messages here. • webapps: It contains the webapps to be deployed. You can also place the WAR (Webapp Archive) file for deployment here. • work: Tomcat's working directory used by JSP, for JSP-to-Servlet conversion. • temp: Temporary files are stored in this directory. How to set a path for Windows Assuming you have installed Java in C:\Program Files (x86)\Java\jdk 1.7.0directory − • Right-click on 'My Computer' and select 'Properties'. • Click the 'Environment variables' button under the 'Advanced' tab. Now, alter the 'Path' variable so that it also contains the path to the Java executable. Example, path set to C:\Program Files (x86) \Java\jdk1.7.0\bin OR through command prompt you can set the path by following command set path=C:\Program Files (x86) \\Java\jdk1.7.0\bin AISSMS COE, PUNE Page 4 Web Technology Lab Manual CONCLUSION / ANALYSIS Hence, we have learned how to install and configure tomcat server. ORAL QUESTIONS 1. What is Tomcat? 2. What is the tomcat default port? 3. What is the servlet container life cycle? 4. What services are provided by Tomcat? 5. Explain directory structure of tomcat. AISSMS COE, PUNE Page 5 Web Technology Lab Manual Assignment No. : 2 TITLE Title: HTML, CSS, XML OBJECTIVES 1. Understand about basic concepts of html 2. Understand the basic concepts of XML 3. Understand the basic concepts of CSS PROBLEM STATEMENT Write a program to design registration form for students by using HTML and CSS OUTCOME Students will be able to, 1. Design static webpage using HTML. 2. Apply CSS to HTML pages. SOFTWARE & HARDWARE REQUIREMENTS Software: Notepad, Browser THEORY-CONCEPT HTML: HTML is the standard markup language for creating Web pages. • HTML stands for Hyper Text Markup Language • HTML describes the structure of Web pages using markup AISSMS COE, PUNE Page 6 Web Technology Lab Manual • HTML elements are the building blocks of HTML pages • HTML elements are represented by tags • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on • Browsers do not display the HTML tags, but use them to render the content of the page • HTML Versions: HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5 1991 1995 1997 1999 2000 2014 Table.1: HTML Versions CSS: CSS stands for Cascading Style Sheet. It is nothing, but design language intended to simplify the process of making web pages presentable.CSS handles the feel and look part of a web page.By using CSS, one can control the color of text, style of fonts, spacing between paragraphs, layout designs. CSS is easy to learn, easy to understandand it provides powerful control on presentation of an HTML document. Advantages of CSS: It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML, Multiple Device Compatibility, Global web standards, Offline Browsing, Platform Independence. CSS3 Modules: CSS3 Modules are having old CSS specifications as well as extension features. • Box Model • Selectors • Background • Border • Image Values and Replaced Content • Text Effects AISSMS COE, PUNE Page 7 Web Technology Lab Manual • Animations • 2D/3D Transformations • Multiple Column Layout • User Interface TECHNOLOGY / TOOL • The declaration defines this document to be HTML5 • The element is the root element of an HTML page • The element contains meta information about the document • Theelement specifies a title for the document • The <body> element contains the visible page content • The <h1> element defines a large heading • The <p> element defines a paragraph • HTML tags are element names surrounded by angle brackets: <tagname>content goes here...</tagname> CSS can be added to HTML elements in 3 ways: • Inline - by using the style attribute in HTML elements. An inline CSS is used to apply a unique style to a single HTML element. Ex. <h1 style="color:blue;">This is a Blue Heading</h1> • Internal - by using a <style> element in the <head> section. An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. Example:<style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> AISSMS COE, PUNE Page 8 Web Technology Lab Manual • External - by using an external CSS file. An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file!To use an external style sheet, add a link to it in the <head> section of the HTML page. Example: <link rel="stylesheet" href="styles.css"> • Use the HTML <head> element to store <style> and <link> elements • Use the CSS color property for text colors • Use the CSS font-family property for text fonts • Use the CSS font-size property for text sizes • Use the CSS border property for borders • Use the CSS padding property for space inside the border • Use the CSS margin property for space outside the border DESIGN / EXECUTION STEPS Following steps are used to Create and Execute web applications, 1. Write the HTML code in notepad and save with .html extension. 2. Write the CSS code in notepad and save with .css extension. 3. Import CSS file in HTML page. 4. Open HTML page in the browser. TEST CASES Manual testing is used to check whether CSS gets applied or not. CONCLUSION/ANALYSIS Hence, we have designed static web pages using HTML and CSS. AISSMS COE, PUNE Page 9 Web Technology Lab Manual PROGRAM CODE & OUTPUT Registration.html <html> <head> <title>regform samp.css .con { width:400px; height:400px; background-color:blue; color:blue; padding:0px 10px 0px 10px; margin:auto; } .main { width:400px; height:80px; float:left; padding:60px 10px 10px10px; margin: auto; } .con1 { width:200px; height:30px; float:left; margin:auto; padding:0px 0px 0px0px; } .con2 { width:150px; AISSMS COE, PUNE Page 11 Web Technology Lab Manual height:30px; float:left; margin:10px 10px 10px10px; padding:0px 0px 0px0px; } Display.cssdisplay You have submitted the form successfully….
Sample Output: AISSMS COE, PUNE Page 12 Web Technology Lab Manual ORAL QUESTIONS 1. 2. 3. 4. 5. 6. 7. 8. 9. What is the difference between HTML and HTML5? What is the difference between html elements and tags? What is marquee? What is the use of span tag? Give an example? What is the use of ‘required ’attribute in HTML5? What is External stylesheet? What are the advantages and disadvantages? What is CSS selector? What are the components of CSS style? What are browser safe color? AISSMS COE, PUNE Page 13 Web Technology Lab Manual Assignment No. : 3 TITLE Title: XML and CSS PROBLEM STATEMENT Write a program to design book catalog by using XML and CSS to display tile, author, price and year of the book. OUTCOMES Students will be able to, 1. Design static webpage using XML. 2. Apply CSS to XML pages. SOFTWARE & HARDWARE REQUIREMENTS Software: Notepad, Any Browser THEORY-CONCEPT XML stands for Extensible Markup Language. It is nothing but the text-based markup language which is derived from Standard Generalized Markup Language(SGML). XML tags identify the data and are used to store and organize the data, rather than specifying how to display it like HTML tags, which are used to display the data. XML is not going to replace HTML in the near future, but it introduces new possibilities by adopting many successful features of HTML. There are three important characteristics of XML that make it useful in a variety of systems and solutions − AISSMS COE, PUNE Page 14 Web Technology Lab Manual • XML is extensible − XML allows you to create your own self-descriptive tags, or language, that suits your application. • XML carries the data, does not present it − XML allows you to store the data irrespective of how it will be presented. XML is a public standard − XML was developed by an organization called the World Wide Web Consortium (W3C) and is available as an open standard. TECHNOLOGY/TOOL The XML document have an XML declaration, but it is optional, and it is written as− Where version is nothing but the version of an XML document and UTF specifies the characterencoding used in the document. Each XML-element needs to be closed either with start or with end elements as shown below −……… An XML document can have only one root element.XML Attributes: Using a name/value pair, an attribute specifies a single property for an element. An XMLelement can have one or more attributes. For example − XMLTutorial Here href is the attribute name and http://www.google.com/ is attribute value. DESIGN/EXECUTION STEPS Following steps are used to Create and Execute web applications, 1. Write the XML code in notepad and save with .xml extension. 2. Write the CSS code in notepad and save with .css extension. AISSMS COE, PUNE Page 15 Web Technology Lab Manual 3. Import CSS file in XML page. 4. Open XML page in the browser. TEST CASES Manual testing is used to check whether CSS gets applied or not. CONCLUSION/ANALYSIS Hence, we have designed static web pages using XML and CSS PROGRAM CODE & OUTPUT Book.xml ... ... book_catalog.css BOOK { Display: block; AISSMS COE, PUNE Page 16 Web Technology Lab Manual margin-left:0; magin-bottom: 30pt; } CATALOG { Width:100%; background-color: #ffffff; } TITLE { Color: ff0000; display: block; font-size: 20pt; } AUTHOR { display: block; color: #0000ff; font-size: 20pt; } YEAR, PRICE { Color:#00000; Display: block; Margin-left: 20pt; } Output: AISSMS COE, PUNE Page 17 Web Technology Lab Manual ORAL QUESTIONS 1. Explain difference between HTML and XML? 2. What is XML DOM? 3. Explain difference between CDATA and PCDATA? 4. What is mean by simple element and complex element? 5. What is XPATH? 6. Explain XSL and XSLT? AISSMS COE, PUNE Page 18 Web Technology Lab Manual Assignment No. - 4 TITLE HTML, Java Script OBJECTIVES 1. Understand about basic concepts of JavaScript. 2. Use JavaScript for validation of data. PROBLEM STATEMENT Write a program to design registration form for students by using HTML, CSS& Java Script and perform following validations: all fields mandatory, phone number and email address validation. OUTCOMES Students will be able to, 1. Design static webpage using HTML. 2. Apply JavaScript to HTML pages for validation of data. SOFTWARE & HARDWARE REQUIREMENTS Software’s: Notepad, Any Browser THEORY-CONCEPT JavaScript is a programming language of HTML as well web. It is preferred for creating network-centric applications.It is integrated and complimentary with Java. As JavaScript is integrated with HTML it is very easy to implement. It is open as well as cross-platform. Advantages: AISSMS COE, PUNE Page 19 Web Technology Lab Manual The advantages of using JavaScript are − • It requires less server interaction • Immediate feedback to the visitors • Increased interactivity • Richer interfaces Validation: When client enters the all necessary data and press the submit button form validation is done at server side If data entered by a client is incorrect or missing,the server needs to send all data back to the client and request for resubmission of form with correct information. This is really a lengthy process which puts a lot of load(burden) on the server. So, JavaScript provides a way to validate form's data on the client's side itself before sending it to the web server. Form validation performs two functions• Basic Validation –First of all the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for the data. • Data Format Validation − Secondly, the data that is entered must be checked for correct format and its value. The code must include appropriate logic to test correctness of data. TECHNOLOGY/TOOL JavaScript can be implemented using JavaScript statements that are placed within the Database Management System Korth 500 1985 Computer Network Tenenbaum 600 1985 Software Engineering and project Management Roger Pressman 600 1985