API tools faq
paste
sgbtechsoluation

WTLAB

sgbtechsoluation
Feb 20th, 2022 (edited)
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 52.22 KB | None | 0 0
raw download clone embed print report
  1. 1.Design and develop static web page using HTML to demonstrate tables, hypertext links, lists and forms
  2. a. Create an HTML document which includes personal and professional details of a person along with photo. Provide a hyperlink to display the hobbies details and achievement details
  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <title>TODO supply a title</title>
  7.         <meta charset="UTF-8">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     </head>
  10.     <body>
  11.         <h2>Personal Information</h2>
  12.         <hr>
  13.         <br>
  14.         <img src="i1.png" width="250px" height="250px">
  15.         <p><b>Name:</b> Akshata Kudari</p>
  16.         <p><b>Age:</b> 21</p>
  17.         <p><b>Place:</b> Mahalingpur</p>
  18.         <p><b>Phoneno:</b> 6360187711</p>
  19.         <p><b>State:</b> karnataka</p>
  20.         <p><b>DOB:</b> 03-07-2000</p>
  21.        
  22.         <br>
  23.         <br>
  24.         <h2>Professional Information</h2>
  25.         <hr>
  26.         <br>
  27.         <p><b>Company:</b> Accenture</p>
  28.         <p><b>Role:</b> Associate Software Engineer</p>
  29.         <p><b>Headquaters:</b> Bangalore</p>
  30.         <p><b>No.of employee:</b> 2000</p>
  31.         <p><b>AboutCompany:</b> Accenture is an American multinational technology company<br> that provides business consulting, information technology and outsourcing services.<br> It is headquartered in Teaneck, New Jersey, United States. Accenture is part of the NASDAQ-100 and trades under CTSH</p>
  32.         <p><a href="h.html"><b><h3>Hobbies</h3></b></a></p>
  33.         <p> <a href="a.html"><b><h3>Achivement</h3></b></a></p>
  34.     </body>
  35. </html>
  36.  
  37. a.html
  38. <!DOCTYPE html>
  39. <html>
  40.     <head>
  41.         <title>TODO supply a title</title>
  42.         <meta charset="UTF-8">
  43.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  44.     </head>
  45.     <body>
  46.     <center>
  47.         <h3>Achievements</h3>
  48.         <br/><br/><br/>
  49.         <h4>Participated in State level coding competition</h4>
  50.         <h4>State level Chess player</h4>
  51.     </center>
  52.     </body>
  53. </html>
  54.  
  55. h.html
  56. <!DOCTYPE html>
  57. <html>
  58.     <head>
  59.         <title>TODO supply a title</title>
  60.         <meta charset="UTF-8">
  61.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  62.     </head>
  63.     <body>
  64.     <center>
  65.         <h3>HOBBIES</h3>
  66.         <br/><br/><br/>
  67.         <h4>Reading Novels</h4>
  68.         <h4>Chess Playing</h4>
  69.         <h4>Drawing</h4>
  70.         <h4>Coocking</h4>
  71.     </center>
  72.     </body>
  73. </html>
  74.  
  75. b.  Write HTML Document to design the following web page
  76.  Sample HTML Form
  77.  
  78. <!DOCTYPE html>
  79. <html>
  80.     <head>
  81.         <title>TODO supply a title</title>
  82.         <meta charset="UTF-8">
  83.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  84.     </head>
  85.     <body>
  86.         <h3><i>Sample HTML Form</i></h3>
  87.         <form action="" method="">
  88. <p>
  89. <lable><i>Username :<input type="text" size="25" maxlength="25"/><br/><br/></lable>
  90. <lable><i>Password :<input type="password" size="25" maxlength="25"/></label><br/><br/>
  91. <lable><i>City of<br/> Employement :<input type="text" size="25" maxlength="25"/></label><br/><br/>
  92. <lable><i>Web Server :</label><select>
  93. <option>--Choose a server--</option>
  94. <option value="Central server">Central Server</option>
  95. <option value="Ignite">Ignite</option>
  96. <option value="Storm Host">Storm Host</option>
  97. <option value="Stax">Stax</option>
  98. </select>
  99. <br/><br/>
  100. <label><i>Please Specify <br/> Your role<blockquote>
  101. <input type="radio" name="role" value="admin"/><label>Admin</label><br/>
  102. <input type="radio" name="role" value="engg"/><label>Engineer</label><br/>
  103. <input type="radio" name="role" value="manager"/><label>Manager</label><br/>
  104. <input type="radio" name="role" value="guest"/><label>Guest</label><br/><br/>
  105. <label><i>Single sign-on <br/> to the follopwing<blockquote>
  106. <input type="checkbox" name="choose" value="mail"/><label>Mail</label><br/>
  107. <input type="checkbox" name="choose" value="mail"/><label>payroll</label><br/>
  108. <input type="checkbox" name="choose" value="mail"/><label>Self-Service</label><br/>
  109. <input type="submit" value="login"/>
  110.  <input type="reset" value="reset"/>
  111.  </blockquote>
  112.                                        
  113.  </p>
  114. </form>
  115. </body>
  116. </html>
  117.  
  118. 2. Design and develop web page to demonstrate CSS (Use different font styles, set background image for both the page and single elements on page, Control the repetition of image with background-repeat property, define style for links as a: link, a: active, a: hover, a: visited)
  119. a. Create and test HTML document that has 5 short paragraphs of text describes current technology of IT industry. You must define three different paragraph styles p1p2, p3. The p1 style must use left and right margins of 20 pixels background color of pink and foreground color of blue. The p2 style must use left and right margins of 30 pixels background color of black and foreground color of yellow. The p3 style must use text indent of 1 cm, background color of green and foreground color of white. The first and third paragraphs must use p1, second paragraph must use p3 and fourth must use p2 class styles and each paragraph must have different border styles. Write a document style sheet.
  120. <html>
  121.     <head>
  122.         <title>assignment-2a</title>
  123.         <meta charset="UTF-8">
  124.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  125.         <style type="text/css">
  126.             p.p1{
  127.                 margin-left: 20px;
  128.                 margin-right: 20px;
  129.                 background-color: pink;
  130.                 color: blue;
  131.                 border-style: double;
  132.             }
  133.             p.p2{
  134.                 margin-left: 30px;
  135.                 margin-right: 30px;
  136.                 background-color: black;
  137.                 color: yellow;
  138.                 border-style: dotted;
  139.                
  140.             }
  141.             p.p3{
  142.                 text-indent: 1cm;
  143.                 background-color: green;
  144.                 color: white;
  145.                 border-style: dashed;
  146.                
  147.             }
  148.         </style>
  149.        
  150.     </head>
  151.     <body style="background-color:bisque;">
  152.         <p class="p1">
  153.             Artificial Intelligence, or AI, has already received a lot of buzz in the past decade, but it continues to be one of the new technology trends because its notable effects on how we live, work and play are only in the early stages. AI is already known for its superiority in image and speech recognition, navigation apps, smartphone personal assistants, ride-sharing apps and so much more
  154.         </p>
  155.         <p class="p3">
  156.             Like AI and Machine Learning, Robotic Process Automation, or RPA, is another technology that is automating jobs. RPA is the use of software to automate business processes such as interpreting applications, processing transactions, dealing with data, and even replying to emails. RPA automates repetitive tasks that people used to do.
  157.  
  158.         </p>
  159.         <p class="p1">
  160.             Formerly a new technology trend to watch, cloud computing has become mainstream, with major players AWS (Amazon Web Services), Microsoft Azure and Google Cloud Platform dominating the market. The adoption of cloud computing is still growing, as more and more businesses migrate to a cloud solution. But it’s no longer the emerging technology trend. Edge is.
  161.  
  162.         </p>
  163.         <p class="p2">
  164.             Next remarkable technology trend is quantum computing, which is a form of computing that takes advantage of quantum phenomena like superposition and quantum entanglement. This amazing technology trend is also involved in preventing the spread of the coronavirus, and to develop potential vaccines, thanks to its ability to easily query, monitor, analyze and act on data, regardless of the source. Another field where quantum computing is finding applications in banking and finance, to manage credit risk, for high-frequency trading and fraud detection.
  165.  
  166.         </p>
  167.         <p>
  168.             The next exceptional technology trend - Virtual Reality (VR) and Augmented Reality (AR), and Extended Reality (ER). VR immerses the user in an environment while AR enhances their environment. Although this technology trend has primarily been used for gaming thus far, it has also been used for training, as with VirtualShip, a simulation software used to train U.S. Navy, Army and Coast Guard ship captains.
  169.         </p>
  170.     </body>
  171. </html>
  172.  
  173. b. Design HTML page with hyperlinks to clickable elements course details and course registration. Add link styles to clickable element and image related to course training institute at the left side add text about institute and hyperlinks.  course details page must display the three paragraphs about the course and background of body must be set with an image related to course and set tilling property for an image. All three paragraphs must be applied with different border, font, color, margin and padding properties written in rule.css external style sheet. Course registration page must include textbox and textarea to enter name and address respectively and also add submit button. Set Hover and focus property to input tag and background color property to a body.
  174. <html>
  175. <head>
  176.     <title>course and registration</title>
  177.     <link rel="stylesheet" type="text/css" href="new.css">
  178. </head>
  179. <body class="body">
  180. <center>
  181.     <h1 class="h1"><i>BASAVESHWAR ENGINEERING COLLEGE(AUTONOMOUS), BAGALKOT</i></h1></center>
  182.     <img src="i2.jpg" width="1500px" height="500px" class="img1">
  183.     <h3 style="font-size: 30px; color: indigo;">About institution :-- </h3>
  184.     <p class="p11">Basaveshwar Engineering College (BEC), Bagalkot is undergoing unswerving growth since 1963. It started as a private institute with only three Engineering programs viz. Civil, Mechanical & Electrical Engineering and came into Government grant  in-aid code from 1968. Today, the institute offers 9 undergraduate and 8 post graduate programmes with 10 departments recognized as R&D centers by VTU, Belagavi. It is a matter of pride for BEC to be placed in the rank band of 201-250 at all India level for the year 2019-20 by the National Institutional Ranking Framework (NIRF) of MHRD, New Delhi.
  185. <br/>
  186.  
  187.         The growth of institution can be pigeon-holed into three phases as it has undergone enormous change from 1963 till date. The main focus during phase-I (1963 to 1983) was consolidation and strengthening of the basic infrastructure facilities to achieve academic excellence. During phase-II (1983 to 2003) of the institutional growth the emphasis was on expansion of UG programmes, introduction of PG programmes, Upgradation of faculty qualifications and initiation of research activities. By 2003 the college started 7 additional UG and 4 new PG programmes, including MCA, thus enhancing the students’ strength from 300 to 2300 and faculty strength from 20 to 140. The stabilization of institutional growth in phase-I and phase-II created a tarmac for takeoff into phase-III in 2003. The selection of College under Technical Education Quality Improvement Program (TEQIP-I, 2004-2009) of MHRD, New Delhi was onset of new era in the history of College. The TEQIP-I grant of Rs.14.16 crores was effectively utilized for scaling up UG programs and College was granted academic autonomy from UGC, New Delhi in 2007. The performance of College in TEQIP-I led to the selection under TEQIP-II on merit basis. A grant of Rs. 12.50 crores was sanctioned for scaling up PG programs and R&D activities in 2011.During this phase the programs were also accredited by NBA, New Delhi. Based on its performance during TEQIP-II the College was recognized as best performing institute by National Project Implementation Unit (NPIU) and granted an additional fund of 5.00
  188. Crores. Further, in Phase-III of TEQIP it received a grant of 7.00 crores to strengthen R&D activities and has the pride of being selected to mentor Rajakiya Engineering College, Bijnor, UP. Once again the college was recognized as one of the best performing colleges and received an additional grant of Rs. 1.47 crores. The phenomenal growth during the three phases abettedthe college in securing NIRF ranking and also recognition at Global level.
  189. </p>
  190.  
  191. <p class="p11">For more Information click here to <a href="https://www.becbgk.edu/About_Us/About_BEC.php" target="_blank">visit website</a> </p>
  192.     <br>
  193.     <h2 class="h">Courses and Registration</h2>
  194.     <div class="div">
  195.     <a href="details.html" target="_blank">Course_Details</a>
  196.     <a href="registration.html" target="_blank">Course_Registration</a>
  197.     </div>
  198. </body>
  199. </html>
  200.  
  201. details.html
  202. <!DOCTYPE html>
  203. <html>
  204. <head>
  205.     <title>Course details</title>
  206.     <link rel="stylesheet" type="text/css" href="new.css">
  207. </head>
  208. <body class="det" style="background-image: i3.jpg">
  209.    <div style="background-image: url('i3.jpg');">
  210.     <center>
  211.     <h1 class="h111">Course Details</h1>
  212.     <h2 class="cs"> Computer Science and Engineering</h2>
  213.     </center>
  214.     <h2 class="h222">Course Overview</h2>
  215.     <p class="p1">Department of Computer Science and Engineering was established in the year 1983. Currently the Department offers an under-graduate program (B. E.) in Computer Science and Engineering with an intake of 120 students and post-graduate program (M.Tech) in
  216. Computer Science and Engineering with an intake of 18, M.Sc. (Engineering by Research) and Ph.D. The department has highly qualified and well experienced faculty members. Faculty are committed to impart quality Technical Education in the field of IT and Research. The primary objectives include the development of innovative skills and enrichment of the academics through
  217. quality teaching-learning processes. The department also focuses on infusing confidence amongst
  218. the students and to inculcate the entrepreneurial abilities.
  219. <br/>
  220. <br/>
  221.         Our primary aim is to impart IT education that fulfils the requirements of the society, industry and research,developing professionals with ethical values and societal concern.</p>
  222. <h2>Mission</h2>
  223. <p class="p2">To produce exemplary human resources in Computer Science and Engineering.
  224. To carry out innovative cutting-edge research.To imbibe amongst students moral and ethical values beneficial to the society.</p>
  225. <h2>Vission</h2>
  226. <p class="p3">To be a centre of excellence in Computer Science and Engineering Education, Research, and Innovation.</p>
  227. </div>
  228.  
  229. </body>
  230. </html>
  231.  
  232. registration.html
  233. <!DOCTYPE html>
  234. <html>
  235. <head>
  236.     <title>Course Registration</title>
  237.     <link rel="stylesheet" type="text/css" href="new.css">
  238. </head>
  239. <body class="rd" style="background-color:lemon";>
  240.     <div style="background-image: url('i4.jpg');">
  241.     <h1 class="h1r">Course Registration Form</h1>
  242.     <form method="post">
  243.         <input type="text" name="name" placeholder="Enter the full name...">
  244.         <br><br><br>
  245.         <textarea name="address" rows="5" cols="50"  placeholder="Enter the address..."></textarea>
  246.         <br><br>
  247.         <input type="submit" name="Submit" class="sub">
  248.  
  249.        
  250.     </form>
  251.     </div>
  252. </body>
  253. </html>
  254.  
  255. 3. Develop web page using JavaScript to perform the following operations.
  256. a. Write JavaScript to find the roots of quadratic equation by inputting three numbers through prompt. Use switch case statement. Display the roots using alert.
  257.  
  258. <!DOCTYPE html>
  259. <!--
  260. Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
  261. Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
  262. -->
  263. <html>
  264.     <head>
  265.         <title>TODO supply a title</title>
  266.         <meta charset="UTF-8">
  267.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  268.     </head>
  269.     <body>
  270.         <script>
  271.             var x;
  272.             var a=Number(prompt("enter first number coefficient :"));
  273.             var b=Number(prompt("enter second number coefficient :"));
  274.             var c=Number(prompt("enter third number coefficient :"));
  275.             var d=(b*b)-(4*a*c);
  276.             if(d===0)
  277.                 x=1;
  278.             else if(d>0)
  279.                 x=2;
  280.             else
  281.                 x=3;
  282.             switch(x)
  283.             {
  284.                 case (1):
  285.                 {
  286.                     r1=r2=-(b/(2*a));
  287.                     alert("Roots are"+r1+"\n"+r2);
  288.                     break;
  289.                 }
  290.                 case (2):
  291.                 {
  292.                     r1=(-b+Math.sqrt(d))/(2*a);
  293.                     r2=(-b-Math.sqrt(d))/(2*a);
  294.                     alert("Roots are\n"+r1+"\n"+r2);
  295.                     break;
  296.                 }
  297.                 case (3):
  298.                 {
  299.                     real=(-b)/(2*a);
  300.                     y=-(d);
  301.                     imgp=Math.sqrt(y)/(2*a);
  302.                     alert("roots are:\n"+real+"+"+imgp+"i\n"+real+"-"+imgp+"i");
  303.                     break;
  304.                 }
  305.             }
  306.         </script>
  307.     </body>
  308. </html>
  309. b. Write a JavaScript to validate the inputted string is url or not.
  310. <!DOCTYPE html>
  311. <!--
  312. Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
  313. Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
  314. -->
  315. <html>
  316.     <head>
  317.         <title>TODO supply a title</title>
  318.         <meta charset="UTF-8">
  319.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  320.     </head>
  321.     <body>
  322.         <script>
  323.             url=prompt("enter url");
  324.             p=url.search(/^(http:\/\/www\.)[a-zA-Z0-9\-$]+\.[a-zA-Z]{2,5}$/);
  325.             if(p!=-1)
  326.             {
  327.                 alert("valid url");
  328.             }
  329.             else
  330.             {
  331.                 alert("Invalid")
  332.             }
  333.         </script>
  334.     </body>
  335. </html>
  336.  
  337.  
  338. 4. Develop web pages using client-side JavaScript to handle validation of form input.
  339. a. Develop, test and validate an HTML document that has three textboxes for apple(100 per kg),orangle(80 per kg), and banana(50 per kg) along with submit button. Each of these   textboxes should have its own onblur event handler triggered on entering the number, which is purchased number of particular fruit. Event handler associated with textbox 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 xxxRs. Where xxx is the total cost of the chosen fruit including 5 precent sales tax. Write a JavaScript in separate file and assign event handler using event property of dom object and write it in a separate file.
  340. <!DOCTYPE html>
  341. <html>
  342.     <head>
  343.         <script type="text/javascript" src="b.js"></script>
  344.     </head>
  345.     <body>
  346.         <form>
  347.             <pre style="font-size :25px;">Apple(100 per kg)  : <input type="text" id="1"/></pre>
  348.             <pre style="font-size :25px;">Orange(80 per kg)  : <input type="text" id="2"/></pre>
  349.             <pre style="font-size :25px;">Banana(50 per kg)  : <input type="text" id="3"/></pre>
  350.             <input type="submit" name="s" value="SUBMIT" id="4"/>
  351.         </form>
  352.         <script type="text/javascript" src="c.js"></script>
  353.     </body>
  354. </html>
  355. }
  356.  
  357. b.js
  358. function calapp()
  359. {
  360.     a=document.getElementById("1");
  361.     c=(Number(a.value))*100;
  362.    
  363.     return Number(c);
  364. }
  365. function calorg()
  366. {
  367.     o=document.getElementById("2");
  368.     c=(Number(o.value))*80;
  369.    
  370.     return Number(c);
  371. }
  372. function calban()
  373. {
  374.     b=document.getElementById("3");
  375.     c=(Number(b.value))*50;
  376.    
  377.     return Number(c);
  378. }
  379. function total_cost()
  380. {
  381.     t=0;
  382.     a=calapp();
  383.     alert("Total Cost Of  apples is : "+a);
  384.     t=t+a;
  385.     b=calorg();
  386.     alert("Total Cost Of  oranges is : "+b);
  387.     t=t+b;
  388.     c=calban();
  389.     alert("Total Cost Of  bananas is : "+c);
  390.     t=t+c;
  391.     t=(t)+(5*(t)/100);
  392.     alert("Total cost with 5% sales tax is : "+t);
  393. }
  394. c.js
  395. a=document.getElementById("1");
  396. o=document.getElementById("2");
  397. b=document.getElementById("3");
  398. s=document.getElementById("4");
  399. a.onblur=calapp;
  400. o.onblur=calorg;
  401. b.onblur=calban;
  402. s.onclick=total_cost;
  403.  
  404.  
  405. b. Develop, test and validate an HTML document that collects the following information from user through form elements:Name (lastname, firstname, middile initial) and phone number(ddd-ddd-dddd) using two textbox. The onblur event of these textbox must call event handler which validates the entered values are in format or not. In case validation fails then ask the user to reenter the values by clearing previous values. On pressing the submit button display a window with entered valid name and phone number. Write a JavaScript in separate file and assign event handler using attribute of tag.
  406. <!DOCTYPE html>
  407. <html>
  408.     <head>
  409.         <script type="text/javascript" src="e.js"></script>
  410.     </head>
  411.     <body style="background-color: pink;">
  412.         <form id="f">
  413.             <pre style="font-size: 25px;">Name(Lastname,Firstname,Midinti.)  : <input type="text" id="1" onblur="checkname();"/></pre>
  414.             <pre style="font-size: 25px;">Phone number(ddd-ddd-dddd)         : <input type="text" id="2" onblur="checknum();"/></pre>
  415.             <input type="submit" id="3" onclick="display();"/>
  416.         </form>
  417.     </body>
  418. </html>
  419. e.js
  420. function checkname()
  421. {
  422.     f=document.getElementById("1");
  423.     n=f.value;
  424.     if(n.search(/[A-Z][a-z]+[,][A-Z][a-z]+[,][A-Z]$/)!==-1)
  425.     {
  426.         alert("Valid Name , Enter Phone num");
  427.     }
  428.     else
  429.     {
  430.         alert("Invalid Name  , Re-enter it");
  431.         f.value="";
  432.     }
  433. }
  434. function checknum()
  435. {
  436.     f=document.getElementById("2");
  437.     p=f.value;
  438.     if(p.search(/\d{3}-\d{3}-\d{4}/)!==-1)
  439.     {
  440.         alert("Valid Phone number , Submit the data");
  441.     }
  442.     else
  443.     {
  444.         alert("Invalid Phone Number , Re-enter it");
  445.         f.value="";
  446.     }
  447. }
  448. function display()
  449. {
  450.      n=document.getElementById("1");
  451.      p=document.getElementById("2");
  452.      alert("Name : "+n.value+" and Phone-Number : "+p.value);
  453. }
  454.  
  455. 5. Develop dynamic web page to demonstrate Positioning Elements, Moving Elements, Element Visibility, changing colours and Fonts, Dynamic Content, Stacking Elements, Locating the Mouse Cursor, reacting to a Mouse Click.
  456. a.Design a dynamic web page to fill the customer information Name and Email. Also the user must provide the userid and password details required to create an account. Provide Helpbox to assist the user in filling the form. Onbulr event of textboxes must position helpbox nearer to the textbox and must contain help message related to the information to be filled in the box. Helpbox is represented through the text area and initial content is plz look into this box to fill the form. Web page must contain submit and reset button. Onclick event of submit button trigger the event handler which must validates the entered name, email and password are in required format or not. In case anyone is not in given format alert the user with a message your details are not accepted otherwise display the accepted details.
  457. <!DOCTYPE html>
  458. <html>
  459.     <head>
  460.     <title>Ass5b</title>
  461.     <meta charset="UTF-8">
  462.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  463.     <style type="text/css">
  464.         body{
  465.             background-color: lightgray;
  466.         }
  467.         .st{
  468.             padding: 10px;
  469.             margin: 20px;
  470.             font-size: 15px;        
  471.         }
  472.     </style>
  473.     <script type="text/javascript" src="5b.js"></script>
  474.     </head>
  475.     <body>
  476.         <center>
  477.             <h1>Customer Information Form</h1>
  478.             <textarea id="1" style="position: absolute;top: 200px;left: 1000px;" rows="5" cols="40" >Please look into this box to fill the form
  479.             </textarea>
  480.             <form id="f">
  481.                 <label class="st">Name : <input class="st" type="text" onfocus="message(0)" onblur="message(4)"></label><br>
  482.                 <label class="st">Email-id : <input  class="st" type="text" onfocus="message(1);" onblur="message(4)"></label><br>
  483.                 <label class="st">User-id : <input class="st" type="text" onfocus="message(2);" onblur="message(4)"></label><br>
  484.                 <label class="st">Password : <input class="st" type="text" onfocus="message(3);" onblur="message(4)"></label><br>
  485.                 <input class="st" type="submit" name="Submit" onclick="check();">
  486.                 <input class="st" type="reset" name="Reset">
  487.             </form>
  488.         </center>
  489.     </body>
  490. </html>
  491.  
  492. 5b.js
  493. var a=["Please enter name in a given order Name,Middleinitial,Lastname",
  494. "Please enter email-id in a given order username@domainname",
  495. "Please enter the unique user-id Ex:user24",
  496. "Password should contain minimum 6 characters to maximum 12 characters"
  497. ,"Please look into this box to fill the form"];
  498. function message(r)
  499. {
  500.     document.getElementById("1").value=a[r];
  501.     s=document.getElementById("1").style;
  502.     switch(r)
  503.     {
  504.         case 0:
  505.             s.top=80+"px";
  506.             s.left=850+"px";
  507.             break;
  508.         case 1:
  509.             s.top=160+"px";
  510.             s.left=850+"px";
  511.             break;
  512.         case 2:
  513.             s.top=240+"px";
  514.             s.left=850+"px";
  515.             break;
  516.         case 3:
  517.             s.top=320+"px";
  518.             s.left=850+"px";
  519.             break;
  520.         case 4:
  521.             s.top=200+"px";
  522.             s.left=1000+"px";
  523.             break;
  524.     }
  525. }
  526.  
  527. function check()
  528. {
  529.     l=document.getElementById("f")[0].value;
  530.     m=document.getElementById("f")[1].value;
  531.     n=document.getElementById("f")[2].value;
  532.     p=document.getElementById("f")[3].value;
  533.     t=0;
  534.      
  535.     if(l.search(/[A-Z][a-z]+[,][A-Z][,][A-Z][a-z]+$/)!==-1)
  536.     {
  537.         t=t+1;
  538.     }
  539.     if(m.search(/^[a-z][a-z 0-9 _ \.]+@gmail\.com/)!==-1)
  540.     {
  541.         t=t+1;
  542.     }
  543.     if(n.search(/^[A-Z a-z][A-Z a-z 0-9 _ \.]+/)!==-1)
  544.     {
  545.         t=t+1;
  546.     }
  547.     if(p.search(/^[a-zA-Z0-9!@#$%^&*]{6,12}$/)!==-1)
  548.    {
  549.        t=t+1;
  550.     }
  551.     if(t===4)
  552.     {
  553.         var text = "Valid Data\nName: "+l+"\nEmail: "+m+"\nUser Id: "+n+"\nPassword: "+p;
  554.         alert(text);
  555.     }
  556.     else{
  557.         alert("Please refer the textarea to enter the correct data");
  558.     }  
  559. }
  560.  
  561.  
  562. b. Design dynamic web page which must contain four short paragraphs of text about your four favourite places. Each paragraph initially must have different font and border properties. These four paragraphs must be stacked on top of each other, with only enough of each showing so that mouse cursor can always be placed over some part of them. On mouseover event for these paragraphs must trigger the event handler to bring the triggered paragraph on top and its font and border properties must be changed to the old top paragraph properties and old top paragraph properties must be changed to the current top one.
  563. <!DOCTYPE html>
  564. <html>
  565.     <head>
  566.     <title>Ass5c</title>
  567.         <script>          
  568.             var ot="p3";
  569.                 function change(nt)
  570.                 {
  571.                     dot=document.getElementById(ot).style;
  572.                     dnt=document.getElementById(nt).style;
  573.                     dot.zIndex="0";
  574.                     dnt.zIndex="10";
  575.                     otcolor=dot.backgroundColor;
  576.                     ntcolor=dnt.backgroundColor;
  577.                     dnt.backgroundColor=otcolor;
  578.                     dot.backgroundColor=ntcolor;
  579.                     ot=nt;
  580.  
  581.                 }
  582.         </script>
  583.     </head>
  584.     <body>
  585.         <p id="p1" style="position: absolute; top: 20px; left: 0px; font-style: italic;background-color: lightsteelblue; color:blue; z-index: 0px; border-style: dashed;border-color: greenyellow; border-width: thick;" onclick="change('p1');">Nature, in the broadest sense, is the natural, physical, material world or universe. "Nature" can refer to the phenomena of the physical world, and also to life in general. The study of nature is a large, if not the only, part of science.</p>
  586.         <p id="p2" style="position: absolute; top: 60px; left: 75px; font-weight:bold; color:black; background-color: pink; z-index: 0px; border-style: solid;border-color: blue; border-width: thick;" onclick="change('p2');">The second largest city in Karnataka state, Hubli forms the agglomerate town area with the city of Dharwad making it the largest urban area next to Bangalore. Hubli is the capital city of North Karnataka and one among the fastest growing city.The second largest city in Karnataka state, Hubli forms the agglomerate town area with the city of Dharwad making it the largest urban area next to Bangalore. Hubli is the capital city of North Karnataka and one among the fastest growing city.</p>
  587.         <p id="p3" style="position: absolute; top: 100px; left: 150px; font-style: oblique;background-color: palevioletred; color:green; z-index: 0px; border-style: double;border-color: orange; border-width: thick;" onclick="change('p3');">The southern state of Karnataka, in India, has a distinct art and culture informed by a long history of diverse linguistic and religious ethnicity. Apart from Kannadigas, Karnataka is home to Tuluvas, who also consider themselves as Kannadigas. Minor populations of Tibetan Buddhists and Siddhi tribes plus a few other ethnic groups also live in. The traditional folk arts are major theatrical forms of coastal Karnataka..</p>
  588.         <p id="p4" style="position: absolute; top: 140px; left: 225px; color:brown; z-index: 0px; background-color: lightsalmon; border-style: dotted;border-color: black; border-width: thick;" onclick="change('p4');">Artificial intelligence (AI) is intelligence demonstrated by machines, as opposed to natural intelligence displayed by animals including humans. Leading AI textbooks define the field as the study of "intelligent agents": any system that perceives its environment and takes actions that maximize its chance of achieving its goals.[a] Some popular accounts use the term "artificial intelligence" to describe machines that mimic "cognitive" functions that humans associate with the human mind, such as "learning" and "problem solving",</p>
  589.     </body>
  590. </html>
  591.  
  592. 6. Program to demonstrate jQuery.
  593. a. Design a dynamic web page that to handle the keypress event using jQuery. Web page must contain a Heading a plz press a key in the below textbox. Place a textbox below the heading. Background of web page must be set with colour Gray. User has permitted to press only ten keys in the textbox. To remind the user number of keypresses left must be indicated by using a button who’s a caption shows the number of keys left i.e it must act as counter. Pressed key should not be visible in the textbox. Store the pressed keys in an array object. On reaching the count the textbox should not accept the keys and button displaying the count should be hided. Once the count is reached display the string that contains the pressed keys in textbox and heading content must be pressed characters are displayed in the textbox with bold and green colour.
  594. <!DOCTYPE html>
  595. <html>
  596.     <head>
  597.         <title>6a KeyPress</title>
  598.         <meta charset="UTF-8">
  599.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  600.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  601.         <style>
  602.             body{
  603.                 background-color: gray;
  604.                 color: white;
  605.             }
  606.             h1{
  607.                 padding: 15px;
  608.                 background-color: lightseagreen;
  609.                 width: 500px;
  610.             }
  611.             input{
  612.                 padding: 20px;
  613.                 border: 2px solid black;
  614.                 color: green;
  615.                 font-weight: bold;
  616.                 font-size: 25px;
  617.             }
  618.             center{
  619.                 margin-top: 200px;
  620.             }
  621.             button{
  622.                 margin-top: 50px;
  623.                 font-size: 20px;
  624.                 padding: 20px;
  625.                 background: black;
  626.                 color: white;
  627.                 border: none;
  628.                 border-radius: 4px;
  629.                 letter-spacing: 2px;
  630.             }
  631.         </style>
  632.     </head>
  633.     <body>
  634.        
  635.         <center>
  636.         <h1>Please press the key in the below textbox</h1>
  637.         <input id="in" type="text"/><br/>
  638.         <button>Total Keypress allowed : 10</button>
  639.         </center>
  640.     <script>
  641.         var i=10;
  642.         var arr=new Array();
  643.         $('#in').keypress(function(k){
  644.             if(i>1)
  645.             {
  646.             key = String.fromCharCode(k.which);
  647.             k.preventDefault();
  648.             i--;
  649.             arr.push(key);
  650.             $('button').html("Remaining Keypress left : "+i);
  651.             }
  652.             else
  653.             {
  654.                $('button').remove();
  655.                $('h1').html("Pressed characters are displayed in the textbox");
  656.                $('#in').val(arr.join(""));
  657.             }
  658.         });
  659.     </script>
  660.     </body>
  661. </html>
  662.  
  663.  
  664. b. Design a dynamic web page to display a time table of your class. Make the appearance of Wednesday class different by changing the foreground colour to red and background colour yellow and use different font style on clicking the change button. Use DOM traversal of jQuery.
  665. <!DOCTYPE html>
  666. <html>
  667.   <head>
  668.     <title>Ass 6d</title>
  669.     <meta charset="UTF-8" />
  670.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  671.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  672.     <style>
  673.       div {
  674.         position: absolute;
  675.         top: 15%;
  676.         left: 30%;
  677.       }
  678.       table,th,td {
  679.         border: 1px solid white;
  680.         border-collapse: collapse;
  681.         padding: 20px;
  682.       }
  683.       th,td {
  684.         background-color: #96d4d4;
  685.       }
  686.       .btn {
  687.         font-size: 20px;
  688.         padding: 20px;
  689.         background: black;
  690.         color: white;
  691.         border: none;
  692.         cursor: pointer;
  693.         border-radius: 4px;
  694.         letter-spacing: 2px;
  695.         position: relative;
  696.         left: 40%;
  697.       }
  698.     </style>
  699.   </head>
  700.   <body>
  701.       <center><h1>Time Table</h1></center>
  702.     <div>
  703.       <table>
  704.         <tr>
  705.           <th>Day/Slots</th>
  706.           <th>8.00-9.00am</th>
  707.           <th>9.00-10.00am</th>
  708.           <th>10.15.00-11.15am</th>
  709.           <th>11.15-12.15pm</th>
  710.         </tr>
  711.         <tr>
  712.           <td>Monday</td>
  713.           <td>CD</td>
  714.           <td>WT</td>
  715.           <td>IoT</td>
  716.           <td>CC</td>
  717.         </tr>
  718.         <tr>
  719.           <td>Tuesday</td>
  720.           <td>-</td>
  721.           <td>CD</td>
  722.           <td>WT</td>
  723.           <td>CC</td>
  724.         </tr>
  725.         <tr id="wed">
  726.           <td>Wednesday</td>
  727.           <td>WT</td>
  728.           <td>CC</td>
  729.           <td>-</td>
  730.           <td>IoT</td>
  731.         </tr>
  732.         <tr>
  733.           <td>Thursday</td>
  734.           <td>OE</td>
  735.           <td>-</td>
  736.           <td>CD</td>
  737.           <td>WT</td>
  738.         </tr>
  739.         <tr>
  740.           <td>Friday</td>
  741.           <td>OE</td>
  742.           <td>WT</td>
  743.           <td>CD</td>
  744.           <td>IoT</td>
  745.         </tr>
  746.         <tr>
  747.           <td>Saturday</td>
  748.           <td>OE</td>
  749.           <td>-</td>
  750.           <td>-</td>
  751.           <td>-</td>
  752.         </tr>
  753.       </table>
  754.       <br/>
  755.       <button class="btn">Change</button>
  756.     </div>
  757.  
  758.     <script>
  759.       $("button").click(function() {
  760.         $("table,t,#wed").each(function(i) {
  761.           $(this)
  762.             .children("td")
  763.             .css({ background: "yellow", color: "red" ,fontStyle: "italic"});
  764.         });
  765.       });
  766.     </script>
  767.   </body>
  768. </html>
  769.  
  770.  
  771. 7. Development of XML file and write a DTD to validate the XML file and display the XML document by applying presentation styles using CSS and XSLT.
  772. 1.a Create a DTD for kannada movies CD collection to store one or more movie information., Where each movie element has the child elements Movie_name, director, actor, actress and producer. Movie_name has attribute relased_year and must have value. Some movies are directed by more than one director and producers. Actor and actress element has attribute type to represent the role played by the actor/actress i.e   lead role or side role. Default value is lead role. Define an entity for the director who directed most of the movies in the collection.
  773. 1.b. Create an XML document with at least three instances of the movie element defined in DTD. Display raw XML document.
  774. 1.c. Create a CSS style sheet for the above XML document to display the movie name in red colour with font-size 4 and in bold and background colour yellow. Each child element of movie must have background colour pink and font colour blue and font-size 2 and style italic. Each element must have block display.
  775.  
  776. <?xml version="1.0" encoding="UTF-8"?>
  777. <?xml-stylesheet type="text/css" href="a.css"?>
  778. <!DOCTYPE movie SYSTEM "per.dtd">
  779.  
  780. <collection>
  781.     <movie>
  782.         <Movie_name relased_year="2013">Googly</Movie_name><br/>
  783.         <director>Prashant Niel</director>
  784.         <actor role="lead role">Yash</actor>
  785.         <actress role="lead role">Kruthi</actress>
  786.         <producer>Boganna</producer>
  787.         <producer>Rajaanna</producer>
  788.     </movie>
  789.     <movie>
  790.         <Movie_name relased_year="2018">KGF</Movie_name>
  791.         <director>Prashant Niel</director>
  792.         <actor role="lead role">Yash</actor>
  793.         <actress role="side role">Pranavi Bhat</actress>
  794.         <producer>MK Groups</producer>
  795.         <producer>Rajaanna</producer>
  796.     </movie>
  797.     <movie>
  798.         <Movie_name relased_year="2015">Charminar</Movie_name>
  799.         <director>Prakash Patil</director>
  800.         <director>Adish M K</director>
  801.         <actor role="lead role">Prem</actor>
  802.         <actress role="lead role">Sanvi</actress>
  803.         <producer>Akshata S Kudari</producer>
  804.        
  805.     </movie>
  806. </collection>
  807. Per.dtd
  808. <!ELEMENT collection(movie+)>
  809. <!ELEMENT movie(Movie_name, director+, actor, actress, producer+)>
  810. <!ELEMENT Movie_name (#PCDATA)>
  811. <!ELEMENT director (#PCDATA)>
  812. <!ELEMENT actor (#PCDATA)>
  813. <!ELEMENT actress (#PCDATA)>
  814. <!ELEMENT producer (#PCDATA)>
  815. <ATTLIST Movie_name relased_year CDATA #REQUIRED>
  816. <ATTLIST actor role CDATA "lead role">
  817. <ATTLIST actress role CDATA "lead role">
  818. a.css
  819. Movie_name{
  820.     display: block;
  821.     color: red;
  822.     font-size: 4em;
  823.     font-size:bold;
  824.     background-color: yellow;
  825. }
  826. movie{
  827.     display: block;
  828.     background-color: pink;
  829.     color: blue;
  830.     font-size: 2em;
  831.     font-style: italic;
  832.     font-size: bold;
  833. }
  834.  OUTPUT :
  835. 2.
  836. a. Design an XML document that stores information about Indian popular cricket players. Information for each cricket player must include their name (include three parts of name), runs scored and wickets taken in one day matches. XML document must store at least three players information.
  837. b. Create an XSLT style sheet to display the players information in tabular form. Each players information must be displayed in different colour in table. Table must contain heading Indian popular cricket players details with font property red colour, bold and size
  838. //**USN:2BA18CS006      Batch No:01 Roll No:006 Date:12-01-2022**//
  839.  
  840. 7a.xml
  841. <?xml version="1.0" encoding="UTF-8"?>
  842. <?xml-stylesheet type="text/xsl" href="assg-7-2.xsl" ?>
  843. <players>
  844.     <player>
  845.         <f_name>Rahul</f_name>
  846.         <m_name>A</m_name>
  847.         <l_name>Dhrawid</l_name>
  848.         <runs>11753-ODI</runs>
  849.         <wickets>19-ODI</wickets>
  850.     </player>
  851.     <player>
  852.         <f_name>Virat</f_name>
  853.         <m_name>-</m_name>
  854.         <l_name>Kohli</l_name>
  855.         <runs>15169-ODI</runs>
  856.         <wickets>15-ODI</wickets>
  857.     </player>
  858.     <player>
  859.         <f_name>Anil</f_name>
  860.         <m_name>G</m_name>
  861.         <l_name>Kumble</l_name>
  862.         <runs>5205-ODI</runs>
  863.         <wickets>35-ODI</wickets>
  864.     </player>
  865. </players>
  866. Assg-7-2.xsl
  867. <?xml version="1.0" encoding="UTF-8"?>
  868. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  869.     <xsl:output method="html"/>
  870.     <xsl:template match="/players">
  871.         <html>
  872.             <head>
  873.                 <title>Indian-Cricketers-Players</title>
  874.             </head>
  875.             <body>
  876.                 <h1 style="font-size:5em;color:red" align="center">Indian popular cricket players </h1>
  877.                 <table border="1" align="center">
  878.                     <tr>
  879.                         <th>First_Name</th>
  880.                         <th>Middle_Name</th>
  881.                         <th>Last_Name</th>
  882.                         <th>Runs</th>
  883.                         <th>Wickets</th>
  884.                     </tr>
  885.                     <xsl:for-each select="player">
  886.                         <tr>
  887.                             <td style="background-color:black;color:red;"><xsl:value-of select="f_name"/></td>  
  888.                             <td style="background-color:orange;color:red;"><xsl:value-of select="m_name"/></td>  
  889.                             <td style="background-color:green;color:blue;"><xsl:value-of select="l_name"/></td>
  890.                             <td style="background-color:yellow;color:red;"><xsl:value-of select="runs"/></td>
  891.                             <td style="background-color:red;color:white;"><xsl:value-of select="wickets"/></td>
  892.                         </tr>  
  893.                     </xsl:for-each>
  894.                 </table>
  895.             </body>
  896.         </html>
  897.     </xsl:template>
  898. </xsl:stylesheet>
  899.  
  900.  
  901.  
  902.  
  903. 8. PHP program on form data handling
  904. Design the HTML page to create a form with the following capabilities
  905. a.  Textbox to collect the user’s name
  906. b.  Three textboxes, one each for the following items,
  907. 1.   Apple (100 per kg)
  908. 2.  Orange (80 per kg)
  909. 3.   Banana (50 per kg)
  910. c.  A collection of three radio buttons that are labelled as follows
  911. i.visa
  912. ii.Master card
  913. iii. Discover
  914. d.  A submit and clear button
  915.  user must enter the quantity wiling to purchase in respective textbox.  Entered user name must contain only alphabetics and quantities entered in the textbox must be number. Validate the data for onblur event of the textboxes.
  916. On submitting the form, a PHP script must collect the entered data from the form and compute the total cost for fruit purchase. PHP script must inform the buyer total cost and details of purchased fruits by displaying in tabular form.
  917. <!DOCTYPE html>
  918. <!--
  919. Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
  920. Click nbfs://nbhost/SystemFileSystem/Templates/Project/PHP/PHPProject.php to edit this template
  921. -->
  922. <html>
  923.     <head>
  924.         <meta charset="UTF-8">
  925.         <title>Assignment 8</title>
  926.         <style>
  927.             body{
  928.                 margin: 200px 200px;
  929.             }
  930.         </style>
  931.         <script type="text/javascript">
  932.             cost1=0;
  933.             cost2=0;
  934.             cost3=0;
  935.             function displaycost(i)
  936.             {
  937.                
  938.                if(i===1)
  939.                {
  940.                    x=document.getElementById("id2");
  941.                    d=x.value;
  942.                    if(d>=0)
  943.                    {
  944.                      alert("The Cost of Apple will be : "+(d*100)+" Rs");
  945.                      cost1=d*100;    
  946.                    }
  947.                    else
  948.                    {
  949.                      alert("Invalid data");  
  950.                      x.value=0;
  951.                    }
  952.                    
  953.                }
  954.                else if(i===2)
  955.                {
  956.                    x=document.getElementById("id3");
  957.                    d=x.value;
  958.                    if(d>=0)
  959.                    {
  960.                        alert("The Cost of Orange will be : "+(d*80)+" Rs");
  961.                        cost2=d*80;
  962.                    }
  963.                    else
  964.                    {
  965.                         alert("Invalid data");  
  966.                         x.value=0;
  967.                    }
  968.                    
  969.                }
  970.                else if(i===3)
  971.                {
  972.                    x=document.getElementById("id4");
  973.                    d=x.value;
  974.                    if(d>=0)
  975.                    {
  976.                      alert("The Cost of banana will be : "+(d*50)+" Rs");
  977.                      cost3=d*50;  
  978.                    }
  979.                    else
  980.                    {
  981.                        alert("Invalid data");  
  982.                         x.value=0;
  983.                    }
  984.                    
  985.                }
  986.             }
  987.             function checkname()
  988.             {
  989.                 x=document.getElementById("id1");
  990.                 d=x.value;
  991.                 if(d.search(/^[A-Za-z]+$/)!==-1)
  992.                 {
  993.                     alert("Correct Name :Go forward ");
  994.                 }
  995.                 else
  996.                 {
  997.                     alert("please Reenter the name ");
  998.                     x.value="";
  999.                 }
  1000.                
  1001.  
  1002.             }
  1003.             function checkall()
  1004.             {
  1005.                 a=document.getElementById("id1").value;
  1006.                 b=document.getElementById("id2").value;
  1007.                 c=document.getElementById("id3").value;
  1008.                 d=document.getElementById("id4").value;
  1009.                 x=document.getElementsByName("paymode");
  1010.                 flag=0;
  1011.                 for(i=0;i<x.length;i++)
  1012.                {
  1013.                    if(x[i].checked)
  1014.                    {
  1015.                        flag=1;
  1016.                        break;
  1017.                    }
  1018.                }
  1019.                if(a!=="" && b>=0 && c>=0 && d>=0 && flag)
  1020.                {
  1021.                    alert("submitting data please wait");
  1022.                     return true;
  1023.                 }
  1024.                 else
  1025.                 {
  1026.                     if(!flag)
  1027.                     {
  1028.                         alert("please select payment method");
  1029.                     }
  1030.                     else
  1031.                         alert("Please Enter Name and items correctly");
  1032.                     return false;
  1033.                 }
  1034.                
  1035.             }
  1036.            
  1037.         </script>
  1038.     </head>
  1039.     <body>
  1040.         <h1 style="color: red;margin-left: 20;"><CENTER>WELCOME TO FRUIT SHOP</CENTER></h1>
  1041.     <center>
  1042.         <div style="background-color: pink;position:absolute;display: block;background-color:  greenyellow;padding: 20px;
  1043.                border: 2px solid black;">
  1044.     <center>
  1045.         <form action="http://localhost/lab8/a.php" method="post"  onsubmit="checkall()">
  1046.             <b><label>USERNAME :</label></b>
  1047.             <input type="text" id="id1" name="username" size="25" placeholder="USER NAME" onblur="checkname()"/>
  1048.             <h2 style="background-color: blue;color:white">ENTER THE NUMBER OF ITEMS PER KG FOR BELOW FRUITS</h2>
  1049.             <label>APPLE :</label>
  1050.             <input type="number" id="id2" name="apple"  size="25" onblur="displaycost(1)"/>
  1051.             <br><br/>
  1052.             <label>ORANGE :</label>
  1053.             <input type="number" id="id3" name="orange"  size="25" onblur="displaycost(2)"/>
  1054.             <br><br/>
  1055.             <label>BANANA :</label>
  1056.             <input type="number" id="id4" name="banana" size="25" onblur="displaycost(3)"/>
  1057.             <br><br/>
  1058.             <h2 STYLE="background-color: GRAY;color: white;">Select Payment Type</h2>
  1059.             <hr>
  1060.             <div style="background-color:pink;margin-left: 200">
  1061.             <input type="radio" id="id5" name="paymode" value="visa"/><label>Visa :</label><br/>
  1062.            
  1063.             <input type="radio" id="id6" name="paymode" value="master card"/><label>Master card :</label><br/>
  1064.            
  1065.             <input type="radio" id="id7" name="paymode" value="discover"/><label>Discover :</label><br/>
  1066.             </div>
  1067.             <br>
  1068.             <input type="submit" value="Submit" style="background-color: yellow;border:2px solid black;width: 40;height: 20 "/>
  1069.             <input type="reset"style="background-color: red;border: 2px solid black"/>
  1070.         </form>
  1071.     </center>
  1072.     </div>
  1073.     </center>
  1074. </body>
  1075. </html>
  1076.  
  1077. a.html
  1078. <html>
  1079.     <body>
  1080.     <center>
  1081.        
  1082.         <?php
  1083.        $username = $_POST['username'];
  1084.        print("<h1>Dear User: $username</h1>");
  1085.         ?>
  1086.         <h2>The details of the purchsed Items are</h2>
  1087.         <table border="2">
  1088.             <tr>
  1089.                 <th></th>
  1090.                 <th>Apple</th>
  1091.                 <th>Orange</th>
  1092.                 <th>Banana</th>
  1093.                 <th>Paymode</th>
  1094.             </tr>
  1095.             <?php
  1096.            $apple = $_POST['apple'];
  1097.            $orange = $_POST['orange'];
  1098.            $banana = $_POST['banana'];
  1099.            $paymode = $_POST['paymode'];
  1100.            $apple_cost = $apple * 100;
  1101.            $orange_cost = $orange * 80;
  1102.            $banana_cost = $banana * 50;
  1103.            $total = $apple_cost + $orange_cost + $banana_cost;
  1104.            print("<tr>");
  1105.             print("<th>Items Purchased</th>");
  1106.             print("<td>$apple</td>");
  1107.             print("<td>$orange</td>");
  1108.             print("<td>$banana</td>");
  1109.             print("<td>$paymode</td>");
  1110.             print("</tr>");
  1111.             print("<tr>");
  1112.             print("<th>Total</th>");
  1113.             print("<td>$apple_cost</td>");
  1114.             print("<td>$orange_cost</td>");
  1115.             print("<td>$banana_cost</td>");
  1116.             print("<td>$total</td>");
  1117.             print("</tr>");
  1118.             ?>
  1119.         </table>
  1120.     </center>
  1121. </body>
  1122. </html>
  1123.  
  1124.  
  1125.  
  1126.  
  1127.  
  1128.  
  1129.  
  1130. 9. PHP program to demonstrate Cookie creation, display and deletion.
  1131. a. Design HTML page to accept cookie name and value using textbox. On submission of form PHP script must display a cookie is created and add two buttons to php script with caption display cookie and delete cookie.  submission of display cookie button should display the cookie information by fetching the cookie value. Submission of delete cookie button must delete the cookie and display a message cookie is deleted.
  1132. <html>
  1133.     <head>
  1134.     </head>
  1135.     <body>
  1136.     <center>
  1137.         <h1>ENTER COOKIE DETAILS</h1>
  1138.         <form action="http://localhost/lab9a/a.php" method="POST">
  1139.             <label>Cookie Name</label>
  1140.             <input type="text" name="cookiename" size="25"/><br>
  1141.             <label>Cookie Value</label>
  1142.             <input type="text" name="cookievalue" size="25"/><br>
  1143.             <input type="submit" value="Submit"/>
  1144.             <input type="reset"/>
  1145.         </form>
  1146.     </center>
  1147.     </body>
  1148. </html>
  1149. a.php
  1150. <html>
  1151.     <body>
  1152.     <center>
  1153.         <?php
  1154.        $cookiename = $_POST['cookiename'];
  1155.        $cookievalue = $_POST['cookievalue'];
  1156.        setcookie("name", "$cookiename", time() + 86400);
  1157.        setcookie("value", "$cookievalue", time() + 86400);
  1158.        ?>
  1159.         <h1>The Cookie is Created</h1>
  1160.         <form action="http://localhost/lab9a/b.php" method="get">
  1161.             <input type="submit" value="display cookie"/>
  1162.         </form>
  1163.         <form action="http://localhost/lab9a/c.php" method="get">
  1164.             <input type="submit" value="Delete cookie"/>
  1165.         </form>
  1166.     </center>
  1167. </body>
  1168. </html>
  1169. b.php
  1170. <html>
  1171.     <body>
  1172.     <center>
  1173.         <h1>The Cookie Data is</h1>
  1174.         <?php
  1175.        if(isset($_COOKIE['name']) && isset($_COOKIE['value']))
  1176.        {
  1177.            $cookiename1 = $_COOKIE['name'];
  1178.            $cookievalue1 = $_COOKIE['value'];
  1179.            print("<h3>Cookie Name : $cookiename1<h3>");
  1180.             print("<h3>Cookie Value : $cookievalue1<h3>");
  1181.         }
  1182.         else{
  1183.             print("<h3>Cookie Is Already Deleted<h3>");
  1184.         }
  1185.        
  1186.         ?>
  1187.     </center>
  1188. </body>
  1189. </html>
  1190.  
  1191.  
  1192. c.php
  1193. <html>
  1194.     <body>
  1195.     <center>
  1196.         <h1>The Cookie Data is Deleted</h1>
  1197.         <?php
  1198.        $cookiename = $_COOKIE['name'];
  1199.        $cookievalue = $_COOKIE['value'];
  1200.        setcookie("name", "$cookiename", time() - 10);
  1201.        setcookie("value", "$cookievalue", time() - 10);
  1202.        ?>
  1203.     </center>
  1204. </body>
  1205. </html>
  1206.  
  1207.  
  1208.  
  1209.  
  1210.  
  1211.  
  1212. b. PHP program to demonstrate session.
  1213.  Write a PHP script to display the number of times a page is requested by creation a session. Also display the last visited time.
  1214. <!DOCTYPE html>
  1215. <!--
  1216. Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
  1217. Click nbfs://nbhost/SystemFileSystem/Templates/Project/PHP/PHPProject.php to edit this template
  1218. -->
  1219. <html>
  1220.     <head>
  1221.         <meta charset="UTF-8">
  1222.         <title></title>
  1223.     </head>
  1224.     <body>
  1225.     <center>
  1226.         <h1>Working of session</h1>
  1227.         <?php
  1228.        session_start();
  1229.        if(!isset($_SESSION['sno'])){
  1230.            $_SESSION['sno']=0;
  1231.            
  1232.        }
  1233.        if(!isset($_SESSION['t'])){
  1234.            $_SERVER['t']=date('D d M y H:i:s');
  1235.            
  1236.        }
  1237.        $t=$_SESSION['t'];
  1238.        $p=$_SESSION['sno'];
  1239.        print("<h1>your page is requested by client $p times</h1>");
  1240.         print("<h1>your page is requested by client at the time $t </h1>");
  1241.         $_SESSION['t']=date('D d M y H:i:s');
  1242.         $_SESSION['sno']++;
  1243.         // put your code here
  1244.         ?>
  1245.     </center>
  1246.     </body>
  1247. </html>
  1248.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!