20MCA29 Web Technologies Lab with Mini-project syllabus for MCA



A d v e r t i s e m e n t

Module-1 Lab 0 hours

Course Outcomes:

at the end of the course students will be able to

CO1: Apply the concept and usages web based programming techniques.

CO2: Learning and Developing XHTML documents using JavaScript and CSS.

CO3: To be familiar in the use of CGI and Perl programs for different types of server side applications.

CO4: Design and implement user interactive dynamic web based applications.

CO5: Evaluate the given wed application and enhance it using latest web technologies.

 

Part - A

1.Create an XHTML page that provides information about your department. Your XHTML page must use the following tags:

a) Text Formatting tags

b) Horizontal rule

c) Meta element

d) Links

e) Images

f) Tables (Use of additional tags encouraged).

2.Develop and demonstrate the usage of inline, external and internal style sheet using CSS. Use XHTML page that contains at least three paragraphs of text, listed elements and a table with four rows and four columns.

3.Develop and demonstrate a XHTML file that includes Javascript script for the following problems: a) Input : A number n obtained using prompt Output : The first n Fibonacci numbers b) Input : A number n obtained using prompt Output : A table of numbers from 1 to n and their squares using alert

4.Develop, test and validate an XHTML document that has checkboxes for apple (59 cents each), orange (49 cents each), and banana (39 cents each) along with submit button. Each check boxes should have its own onclick event handler. These handlers must add the cost of their fruit to a total cost. An event handler for the submit button must produce an alert window with the message ‘your total cost is $xxx’, where xxx is the total cost of the chose fruit, including 5 percent sales tax. This handler must return ‘false’ (to avoid actual submission of the form data). Modify the document to accept quantity for each item using textboxes.

5. a) Develop and demonstrate, a HTML document that collects the USN (the valid format is : A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by three upper-case characters followed by two digits; (no embedded spaces are allowed) from the user. Use JavaScript that validate the content of the document. Suitable messages should be display in the alert if errors are detected in the input data. Use CSS and event handlers to make your document appealing.b) Modify the above program to get the current semester also(restricted to be a number from 1 to 6)

6. Develop and demonstrate a HTML file which includes JavaScript that uses functions for the following problems: a. Parameter: A string Output: The position in the string of the left-most vowel. b. Parameter: A number Output: The number with its digits in the reverse order.

7.Develop and demonstrate a HTML5 page which contains

a) Dynamic Progressive bar.

b) Display Video file using HTML5 video tag.

8.Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. Modify the above document so that when a text is moved from the top stacking position, it returns to its original position rather than to the bottom.

9.Develop a simple calculator to perform arithmetic (addition, subtraction, multiplication and division) operations on given two numbers. Use an HTML tag that allows the user to input two numbers and to display the result of arithmetic operation. Write suitable HTML and JavaScript and CSS to your simple calculator. The following figure show sample document display.

10.Develop and demonstrate using jQuery to solve the following:

a) Limit character input in the text area including count.

b) Based on check box, disable/enable the form submit button.

11.Develop and demonstrate using jQuery to solve the following:

a) Fade in and fade out all division elements.

b) Animate an element, by changing its height and width.

 

Part-B

Develop a web application (mini-project) using the languages and concepts learnt in the theory and exercises listed in part A with a good look and feel effects. Database connection needs to be implemented.

Note:

1. A team of two students must develop the mini project. However during the examination, each student must demonstrate the project individually.

2. Each students has to execute one program picked from Part-A during the semester end examination.

3. The team must submit a brief project report (20-25 pages) that must include the following

a. Introduction b. Requirement Analysis c Software Requirement Specification d. Analysis and Design, e. Implementation f. Testing

4. Brief synopsis not more than two pages to be submitted by the team as per the format given. It was recommended that students to do prior art search as part of literature survey before submitting the synopsis for the Mini/Major projects.

5. Rubrics may be used to evaluate the Mini-Project.

Last Updated: Tuesday, January 24, 2023