Download VTU MCA 10MCA47 Web Programming Laboratory All Programms

Hello friends,

Today I'm sharing all LAB Programs of Web Programming,

Following is the list of all problems:
1. 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

2. a) Develop and demonstrate, using Javascript script, a XHTML 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 two upper-case characters followed by three digits; no embedded spaces allowed) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected.

b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8)

3. a) 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.

b) Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom.

4. a) Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include USN, Name, Name of the College, Brach, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.

b) Create an XSLT style sheet for one student element of the above document and use it to create a display of that element.

5. a) Write a Perl program to display various Server informations like Server Name, Server Software, Server protocol, CGI Revision etc.

b) Write a Perl program to accept UNIX command from a HTML form and to display the output of the command executed.

6. a) Write a Perl program to accept the User Name and display a greeting message randomly chosen from a list of 4 greeting messages.

b) Write a Perl program to keep track of the number of visitors visiting the web page and to display this count of visitors, with proper headings.

7. Write a Perl program to display a digital clock which displays the current time of the server.

8. Write a Perl program to insert name and age information entered by the user into a table created using MySQL and to display the current contents of this table.

9. Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited on’ date-time on the web page upon reopening of the same page.

10. Write a PHP program to read student data from an XML file and store into the MYSQL database. Retrieve and display.

11. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields. On submitting, store the values in MySQL table. Retrieve and display the data based on Name.

12. Build a Rails application to accept book information viz. Accession number, title, authors, edition and publisher from a web page and store the information in a database and to search for a book with the title specified by the user and to display the search results with proper headings
Click to DOWNLOAD

Web Design Tips for Better Usability

Website usability is a big issue for developers and users. Your website needs to be as user friendly as possible. If your visitors become frustrated trying to find the information they need, they will click off your website and a conversion opportunity is lost. Here are 10 web design tips for better usability.

Tap Into How People Read a Website

• Two studies done by Dr. Jakob Neilson and the marketing firms Did-it and Enquiro have shown people scan websites in a F shaped pattern. This is also known as the Google Golden Triangle. Most people start in the top left corner and scan down and to the right while viewing website. Concentrate your most important information in this area.
• Studies have also shown people only read about 28% of the text on a page. This means your content has to be golden and you need to get your point across quickly.
• Most people read webpages from left to right. This means if you use sidebars place them on the left side. If your page is in Hebrew or another language that reads from right to left, this should be reversed.

The Look of Your Website Matters

• Make use of white space to make your text more readable. Studies have shown that the use of white space not only makes your website look cleaner, but increases reader comprehension.
• If you must go past the fold, use less content above the fold. This encourages readers to scroll down and will keep them on your webpage.
• Pay attention to small details. The font and color of a button can sometimes mean a conversion or a click through. Instead of the annoying 404 message, try a polite two to three sentence message and a search option.

The Performance of Your Website

• Your website needs to load quickly on all devices. Mobile users are just that, mobile. They don’t have time to wait for your website full of graphics and flash to load on their devices. Test out your website loading times on several devices to be sure it loads quickly.
• Make sure your links are up to date. If you make revisions on your website, you’ll need to check the links to be sure they are still active.
• Park a tool bar at the top of the page. As they scroll down the tool bar stays on top of the page. This will make sure your visitors can navigate your site easily. Also don’t overuse the search option. It is better to have good navigation than to rely on a search box.
• Make sure your landing pages are optimized. A study by Gerry McGovern showed in 2010 only five percent of conversions originated from your home page. By having the right SEO on each landing page your pages will show up in search results. This will drive traffic to landing pages and your conversion rates will increase.

These are 10 web design tips for you to use to increase your website’s usability. Your website needs to be attractive, easy to read, and easy to use. Don’t ignore the details and just concentrate on the big picture,all of the elements of your website work together to increase usability.

Creating a Windows 8 (Metro) style Web site using CSS, HTML

The call METRO style is the new style interface of Microsoft applications, can be seen, for example, in Windows Phone 7 and Windows 8. The main menu of these applications has a simple format, based on the tiles, usually two different sizes.

An example of this menu can be seen in the following figure.

Get to work

To develop this menu, divide the lines in the central region in which we insert the tiles.

The tiles are of two types: normal and wide (as seen in the image above) and the colors will be given later with the addition of CSS classes.

To begin, let's create the title and the lines that will structure the menu, as shown below:
 HTML Page:
<html>
<head>
    <link rel="stylesheet" href="estilo.css"/>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="<http://code.jquery.com/jquery-1.7.2.min.js>"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Início</h1>
    <div class="pagina">
        <div class="linha">        
        </div>
        <div class="linha">        
        </div>     
        <div class="linha">         
        </div>
    </div>
</div>
</body>
</html>

 CSS File:

@font-face { font-family: Century; src: url('GOTHIC.ttf'); }
  body{
    font-family: Century;
    background: rgb(51,51,51);
    color: #fff;
    padding:20px;
}
  .pagina{
    width:auto;
    height:auto;    
}
  .linha{
    width:auto;
    padding:5px;
    height:auto;
    display:table;     
}

Tile added:
<div class="pagina">
    <div class="linha">         
        <div class="tile">
        </div>
        <div class="tile">
        </div>
        <div class="tile tileLargo">
        </div>
        <div class="tile">
        </div>          
        <div class="tile tileLargo">
        </div>
    </div>
    <div class="linha">         
        <div class="tile tileLargo">
        </div>
        <div class="tile">
        </div>          
        <div class="tile">
        </div>
        <div class="tile">
        </div>          
        <div class="tile tileLargo">
        </div>
    </div>      
    <div class="linha">         
        <div class="tile">
        </div>
        <div class="tile">
        </div>
        <div class="tile">
        </div>          
        <div class="tile tileLargo">
        </div>
        <div class="tile">
        </div>
        <div class="tile">
        </div>  
    </div>
</div>

Formatting initial tiles:
.tile{
    height:100px; 
    width:100px;
    float:left;
    margin:0 5px 0 0;
    padding:2px;
}
  .tileLargo{
    width:210px;
}
 .amarelo{
    background:#DAA520;
}
.vermelho{
    background:#CD0000;
}
.azul{
    background:#4682B4;
}
.verde{
    background-color: #2E8B57;
}

Association of tiles to color:
<div class="pagina">
    <div class="linha">         
        <div class="tile amarelo">
        </div>
        <div class="tile azul">
        </div>
        <div class="tile tileLargo vermelho">
        </div>
        <div class="tile verde">
        </div>          
        <div class="tile tileLargo amarelo">
        </div>
    </div>
    <div class="linha">         
        <div class="tile tileLargo amarelo">
        </div>
        <div class="tile azul">
        </div>          
        <div class="tile verde">
        </div>
        <div class="tile vermelho">
        </div>          
        <div class="tile tileLargo verde">
        </div>
    </div>      
    <div class="linha">         
        <div class="tile amarelo">
        </div>
        <div class="tile verde">
        </div>
        <div class="tile vermelho">
        </div>          
        <div class="tile tileLargo verde">
        </div>
        <div class="tile azul">
        </div>
        <div class="tile verde">
        </div>  
    </div>
</div>