WT Lab Manual
WT Lab Manual
LAB MANUAL
Prepared by,
Mrs.B.Ranjani., M.E
Assistant Professor
Department of Computer Science & Engineering
EGSPEC, Nagapattinam
1902CS651 WEB TECHNOLOGY LAB L T P C
0 0 2 1
Course Objectives:
1. Learn to develop web pages using HTML and CSS
2. Be familiar with advanced programming such as PHP/Perl
3. Know to use AJAX in implementing Rails
List of Experiments:
1. Basic Programs using HTML
2. Programs using cascading style sheets
3. Programs to create dynamic web pages
4. Programs using HTML & XML as data store
5. Programs using Perl
6. Programs to demonstrate PHP & MySQL database connectivity
7. Programs using Perl
8. Programs using AJAX
9. Programs using Rails
10. Case Study : Create a web application for the given problem statement
Total: 45 Hours
Additional Experiments:
1. Programs for Rails with AJAX
2. Programs to implement JSON
Course Outcomes:
After completion of the course, Student will be able to
1. Develop web pages using basic HTML
2. Apply XML techniques in web design
3. Implement CGI using Perl
4. Implement PHP & MySQL database connectivity for real world applications
5. Use AJAX with Rails.
References:
1. Deitel & Deitel, Nieto, Lin, Sadhu, XML How to Program, Pearson Education ,New Delhi,
2011
2. Kogent Learning Solutions Inc, Web Technologies Black Book, Dreamtech Press, New Delhi,
2009
3. Chris Bates, Web Programming Building Internet Applications 3rd ed., Wiley India Edition,
New Delhi, 2009
4. Phil Ballard, Michael Moncur, Sams Teach Yourself Ajax, JavaScript and PHP, Pearson
Education ,New Delhi, 2009.
5. Achyut S Godbole , Atul Kahate, Web Technologies TCP/IP Architecture and Java
Programming, 2nd ed., Tata McGraw Hill Education Private Limited, New Delhi, 2010
6. Pankaj Sharma, Introduction to Web Technology, Katson Books, New Delhi, 2008
7. Bankim Patel, Lal Bihari Barik, Introduction to Web Technology & Internet, Acme Learning
Private Limited, New Delhi, 2009
Ex.No : 1a HTML Program To Create a Static Web Page which defines all Text
Formatting Tags of HTML in Tabular Format
Date :
Aim: To write a html program to create a static web page which defines all text formatting tags of
html in tabular format.
Tools Required: Notepad Editor and Web Browser like Internet Explorer or Google Chrome or
Mozilla Firefox.
Algorithm:
1. Tables are defined within the <table> tag.
2. HTML uses a number of elements to format the text. Different text formatting tags of html
are tabled in each rows. Ex: tag <b> for Bold text.
3. A table is divided into rows using <tr> tag.
4. Each row is divided into cells using <td> tag.
5. Table caption is given using <caption> tag.
Program:
<!DOCTYPE html>
<html>
<body>
<center>
<marquee><h1><font color="darkViolet">Web Technology</font></h1></marquee>
<table border=1>
<caption align="top"><font size="+2" color="red">Text Formatting Tags</font> </caption><br>
<br>
<tr>
<th>HTML Tag</th>
<th>Output</th>
</tr>
<tr>
<td>normal text</td>
<td>hello world</td>
</tr>
<tr>
<td>Font & its attributes</td>
<td><FONT SIZE="+2" COLOR="#RRGGBB"> hello world </FONT></td>
</tr>
<tr>
<td><B></td>
<td><B> Bold </B></td>
</tr>
<tr>
<td><I></td>
<td><I> Italic </I></td>
</tr>
<tr>
<td><U></td>
<td><U> Underline </U></td>
</tr>
<tr>
<td><EM></td>
<td><EM> Emphasis </EM></td>
</tr>
<tr>
<td><STRONG></td>
<td><STRONG> STRONG </STRONG></td>
</tr>
<tr>
<td><TELETYPE></td>
<td><TT> TELETYPE </TT></td>
</tr>
<tr>
<td><CITE></td>
<td><CITE> Citation </CITE></td>
</tr>
<tr>
<td><STRIKE></td>
<td><STRIKE> strike-through text </STRIKE></td>
</tr>
<tr>
<td><BIG></td>
<td><BIG> text in a big font </BIG></td>
</tr>
<tr>
<td><SMALL></td>
<td><SMALL> text in a small font <SMALL></td>
</tr>
<tr>
<td><SUB></td>
<td>a<SUB> b </SUB></td>
</tr>
<tr>
<td><SUP></td>
<td>a<SUP> b</SUP></td>
</tr>
</table>
</body>
</html>
Output:
Result:
Thus the program to create a static web page which defines all text formatting tags of html
in tabular format is designed successfully using html tables.
Ex.No: 1b HTML Program to create a web page using List Tags
Date :
Aim: To write a html program to create a web page using list tags.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. List is defined with the <li> tag.
2. List are of 3 types: Ordered, Unordered and definition lists.
3. Unordered list are defined with <ul> tag which is used to represent set of items that are
related to one another but the order of item is unimportant.
4. Ordered List are defined with <ol> tag.
5. Definition list are primarily used for glossaries i.e. terms with their definitions. The
definition list are always enclosed in <dl> and </dl> tag.
6. The definition term and definition description are represented by <dt> and<dd> tags
respectively.
Program:
<!DOCTYPE html>
<html><body>
<h1><b> <font color="Maroon">HTML List: Ordered, Unordered & Definition
List</font></b></h1>
<hr> <marquee><h3><b>Students Mark List</b><h3></marquee>
<b><u>Marks of Particular Student in each Subject</u></b>
<OL type="1">
<li>Aarthi</li>
<UL style="list-style-type:circle;">
<li>I Semester</li>
<ol style="list-style-type: lower-alpha;">
<li>Engineering Mathematics I : 80</li>
<li>C Programming : 90</li>
<li>Engineering Graphics : 89</li> </OL>
<li>II Semester</li>
<ol type="a">
<li>Engineering Mathematics:82</li>
<li>Data Structures:70</li>
<li>Computer Architecture:85</li>
</OL></ul>
<li>Bala</li>
<UL style="list-style-type:circle;">
<li>I Semester</li>
<ol style="list-style-type: lower-alpha;">
<li>Engineering Mathematics I : 70</li>
<li>C Programming : 95</li>
<li>Engineering Graphics : 92</li>
</OL>
<li>II Semester</li>
<ol type="a">
<li>Engineering Mathematics:80</li>
<li>Data Structures:79</li>
<li>Computer Architecture:85</li>
</OL></ul></ol><hr>
<DL> <ol type='I'>
<li><DT>Aarthi</DT></li>
<DD>Aarthi is a good and obedient student in the class.</DD>
<li><DT>Bala</DT></li>
<DD>Bala is a good student and representative of the class.</DD>
</DL></ol>
</body>
</html>
Output:
Result:
Thus the program to create a web page using list tags is created successfully.
Ex.No: 1c HTML Program to design a Time Table Using Table Tags
Date :
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Tables are defined with the <table> tag.
2. A table is divided into rows (with the <tr> tag).
3. Each row is divided into data cells (with the <td> tag).
4. td stands for "table data," and holds the content of a data cell.
5. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
</head>
<body bgcolor="lightgrey">
<H1><FONT COLOR="brown"><CENTER>CLASS TIME TABLE</FONT></H1>
<table border="2" cellspacing="1" align="center">
<tr>
<td align="center"><b>Days|Time
<td><b>8:30-9:30
<td><b>9:30-10:30
<td><b>10:30-11:30
<td><b>11:30-12:30
<td><b>12:30-2:00
<td><b>2:00-3:00
<td><b>3:00-4:00
<td><b>4:00-5:00
</tr>
<tr>
<td align="left"><b>MONDAY
<td align="center">---<td align="center"><font color="blue">English<br>
<td align="center"><font color="green">Tamil<br>
<td align="center"><font color="red">Maths<br>
<td rowspan="6"align="center"><b>L<br>U<br>N<br>C<br>H
<td align="center"><font color="darkpink">Social<br>
<td align="center"><font color="violet">Science<br>
<td align="center">counselling class
</tr>
<tr>
<td align="left"><b>TUESDAY
<td align="center"><font color="blue">English<br>
<td align="center"><font color="green">Tamil<br>
<td align="center"><font color="red">Maths<br>
<td align="center"><font color="blue">English<br>
<td align="center"><font color="violet">Science<BR>
<td align="center"><font color="darkpink">Social<br>
<td align="center">library
</tr>
<tr>
<td align="left"><b>WEDNESDAY
<td align="center"><font color="violet">Science<br>
<td align="center"><font color="red">Maths<br>
<td align="center"><font color="green">Tamil<BR>
<td align="center"><font color="darkpink">Social<BR>
<td colspan="3" align="center"><font color="darkblue"> ----- lab -----
</tr>
<tr>
<td align="left"><b>THURSDAY
<td align="center"><font color="green">Tamil<br>
<td colspan="3" align="center"><font color="darkblue"> ----- lab -----
<td align="center"><font color="red">Maths<BR>
<td align="center"><font color="darkpink">Social<br>
<td align="center">library
</tr>
<tr>
<td align="left"><b>FRIDAY
<td align="center">---
<td align="center"><font color="green">Tamil<br>
<td align="center"><font color="red">Maths<br>
<td align="center"><font color="blue">English<BR>
<td align="center"><font color="violet">Science<br>
<td align="center"><font color="darkpink">Social<br>
<td align="center">library
</tr>
<tr>
<td align="left"><b>SATURDAY
<td align="center"><font color="violet">Science<br>
<td colspan="3" align="center"><font color="Maroon">---- seminar ----
<td align="center"><font color="darkpink">Social<br>
<td align="center"><font color="blue">English<br>
<td align="center">library
</tr>
</body>
</html>
Output:
Result:
Thus the class timetable is designed successfully using html tables.
Ex.No: 1d HTML Program to create a Resume
Date :
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Alignment for the text are given using <align=”right”>.
2. Image is inserted for resume using <img> tag providing source, width and height as
attribute values.
3. Table is created for mark details using <table> tag.
4. List are used for resume by <li> tags.
Program:
<html>
<head>
<title>Resume</title>
</head>
<body>
<font face="Times New Roman" size="5">
<h1 align="center"><b>RESUME</b></h1><br>
<img src="pic.jpg" width="130" height="160" align="right">
J.PRIYADHARSHINI, <br>
25A1 SIVAN EAST STREET,<br>
NAGAPATTINAM-611001.<br>
<b>Email ID</b> : [email protected]<br>
<b>Phone No</b> : 9786450258<br><br>
<hr>
<dl>
<dt>
<b><u>CAREER OBJECTIVE</u></b>
</dt>
<dd>
To succeed by growing & Excelling in a competative work environment which provide
satisfaction to achieve career and organizational goals.
</dd>
</dl>
<b><u>EDUCATIONAL QUALIFICATION</u></b><br>
<br>
<table border="2px"cellpadding="15px">
<tr>
<th><b>Course</b></th>
<th><b>University/ Board</b></th>
<th><b>Institution</b></th>
<th><b>CGPA/Percentage</b></th>
<th><b>year of passing</b></th>
</tr>
<tr>
<td>BE-CSE</td>
<td>Anna University</td>
<td>E.G.S.Pillay Engineering College(Autonomous)</td>
<td>8.91*</td>
<td>2021</td>
</tr>
<tr>
<td> HSC</td>
<td>State board</td>
<td>N.D.H.S.School Nagapattinam</td>
<td>83.24</td>
<td>2017</td>
</tr>
<tr>
<td>SSLC</td>
<td>State board</td>
<td>N.D.H.S.School Nagapattinam</td>
<td>92.4</td>
<td>2015</td>
</tr>
</table>
<dl>
<dt>
<b><u>TECHNICAL SKILL</u></b>
</dt>
<dd>
Languages : C, C++, Java, HTML<br>
Tools : MS Office, Tally
</dd>
</dl>
<b><u>AREA OF INTEREST</u></b><br>
<ul>
<li>Developer</li>
<li>Computer network</li>
<li>Design</li>
</ul>
<b><u>CO-CURRICULAR ACTIVITIES</u></b><br>
<ul>
<li>Have attended at one day Workshop
on topic of block chain at E.G.S.pillay engineering collage (Autonomous)</li>
<li> have participated in the
Paper presentation at E.G.S.pillay engineering collage (Autonomous)</li>
</ul>
<b><u>EXTRA-CURRICULAR ACTIVITIES</u></b><br>
<ul>
<li>Have got first prize in essay competition
at E.G.S.pillay engineering collage (Autonomous)</li>
<li>Have got second prize in drawing competition
at school level</li>
</ul>
<b><u>PERSONAL TRAITS</u></b>
<ul>
<li>Honest person</li>
<li>punctual in work</li>
<li>Adaptability</li>
<li>Self motivated person</li>
</ul>
<dl>
<dt>
<b><u>PERSONAL DETAILS</u></b>
</dt>
<dd>
Data of Birth : 27.9.1999<br>
Gender
: Female<br>
Language Known : Tamil, English
</dd>
<dt> <br>
<b><u>DECLARATION</u></b>
</dt>
<dd>
I here by declare that the information given above is
true and correct to the best of my knowledge and belief.<br>
</dd>
</dl><br>
<b> Date: </b><br>
<b> Place: </b>
<h3 align="right"><b>J.PRIYADHARSHINI</b></h4><br>
</font>
</body>
</html>
Output:
Result:
Thus a resume is created successfully using html.
Aim: To write a html program to design a simple calculator with the help of internal CSS.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Elements for the calculator have been styled by CSS within html coding using <style> tag so
that calculator looks more attractive.
2. The calculator is designed here to perform 4 basic mathematical operations: Addition,
Subraction, Multiplication and Division.
3. Buttons are created for inputting values and a screen for displaying these values.
4. The first thing that goes into our HTML body is the form element <form></form>.
5. A calculator is a table enclosed in a container. Hence table is created using <table> tag.
6. Inside <table> tag we define the table rows <tr> which is basically going to be the horizontal
section of the calculator and the table data <td> (table column cell) which is to contain the
calculator display and buttons.
7. Button is created using <input> element. To make the input element a button,
the type attribute should be set to button.
Program:
<!DOCTYPE html>
<html> <title>SIMPLE CALCULATOR</title>
<style>
input
{
background-color:green; width:100%; border:0; color:white;
}
</style>
<div align="center">
<h2>Calculator</h2>
<body>
<form name="calculate">
<table> <tr> <td colspan="4"> <input type="text" name="get"></td></tr>
<tr>
<td> <input type="button" value="1" onclick="calculate.get.value +='1'"></td>
<td> <input type="button" value="2" onclick="calculate.get.value +='2'"></td>
<td> <input type="button" value="3" onclick="calculate.get.value +='3'"></td>
<td> <input type="button" value="+" onclick="calculate.get.value +='+'"></td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="calculate.get.value +='4'"></td>
<td> <input type="button" value="5" onclick="calculate.get.value +='5'"></td>
<td> <input type="button" value="6" onclick="calculate.get.value +='6'"></td>
<td> <input type="button" value="-" onclick="calculate.get.value +='-'"></td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="calculate.get.value +='7'"></td>
<td> <input type="button" value="8" onclick="calculate.get.value +='8'"></td>
<td> <input type="button" value="9" onclick="calculate.get.value +='9'"></td>
<td> <input type="button" value="*" onclick="calculate.get.value +='*'"></td>
</tr>
<tr>
<td> <input type="reset" value="c" ></td>
<td> <input type="button" value="0" onclick="calculate.get.value +='0'"></td>
<td> <input type="button" value="=" onclick="calculate.get.value =eval(calculate.get.value)"></td>
<td> <input type="button" value="/" onclick="calculate.get.value +='/'"></td>
</tr>
</table> </form> </div> </body> </html>
Output:
Result:
Thus the simple calculator program is designed successfully using html with internal CSS.
Aim: To write a html program to design a Student Registration Form with the help of external CSS.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Elements for the form have been styled by CSS in a separate file saving file name with .css
extension.
2. The CSS file is attached to the html file using <link rel="stylesheet" type="text/css"
href="style2.css">
3. Form text area, text, radiobutton, checkbox etc.. are created for inputting values and
a screen for displaying these values using <input> element
4. Here the student registration form is created using table. Hence table is created using
<table> tag.
5. Inside <table> tag we define the table rows <tr> which is basically going to be the horizontal
section of the form and the table data <td> (table column cell) which is to contain the form
display and buttons.
Program:
<!--HTML CODE-->
<html>
<head>
<title>Student Registration Form Using Table in HTML</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<h2>Student Registration Form Using Table in HTML</h3>
<table align="center" cellpadding = "10">
<!--------------------- First Name ------------------------------------------>
<tr>
<td>First Name</td>
<td><input type="text" name="FirstName" maxlength="50" placeholder="Ghanendra" />
(Max 50 Characters Allowed)
</td>
</tr>
<!------------------------ Last Name --------------------------------------->
<tr>
<td>Last Name</td>
<td><input type="text" name="LastName" maxlength="50" placeholder="Yadav"/>
(Max 50 Characters Allowed)
</td></tr>
<!-------------------------- Email ID ------------------------------------->
<tr>
<td>Email ID</td>
<td><input type="email" name="EmailID" maxlength="100"
placeholder="[email protected]"/></td>
</tr>
<!-------------------------- Mobile Number ------------------------------------->
<tr><td>Mobile Number</td>
<td>
<input type="text" name="MobileNumber" maxlength="10" placeholder="7842xxxxxx"/>
(10 Digits Allowed)
</td></tr>
<!---------------------- Gender ------------------------------------->
<tr>
<td>Gender</td>
<td>
<input type="radio" name="Gender" value="Male" />
Male
<input type="radio" name="Gender" value="Female" />
Female
</td>
</tr>
<!--------------------------Date Of Birth----------------------------------->
<tr>
<td>Date of Birth(DOB)</td>
<td>
<select name="BirthDay" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="BirthdayMonth" id="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>
<select name="BirthdayYear" id="Birthday_Year">
<option value="-1">Year:</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
</select>
</td></tr>
<!------------------------- Address ---------------------------------->
<tr>
<td>Address<br /><br /><br /></td>
<td><textarea name="Address" rows="10" cols="50"></textarea></td>
</tr>
<!-------------------------- City ------------------------------------->
<tr>
<td>City</td>
<td><input type="text" name="City" maxlength="50" placeholder="Bangalore"/>
(Max 50 Characters Allowed)
</td></tr>
<!----- -------------------- Pin Code-------------------------------------->
<tr>
<td>Pin Code</td>
<td><input type="Number" name="PinCode" maxlength="6" placeholder="560068"/>
(Max 6 Numbers Allowed)
</td></tr>
<!---------------------------- State ----------------------------------->
<tr>
<td>State</td>
<td><input type="text" name="State" maxlength="50" placeholder="Karnataka"/>
(Max 50 Characters Allowed)
</td></tr>
<!------------------------------ Country --------------------------------->
<tr>
<td>Country</td>
<td><input type="text" name="Country" placeholder="India" /></td>
</tr>
<!------------------------- Hobbies -------------------------------------->
<tr>
<td>Hobbies <br /><br /><br /></td>
<td>
<input type="checkbox" name="HobbyDrawing" value="Drawing" />
Drawing
<input type="checkbox" name="HobbySinging" value="Singing" />
Singing
<input type="checkbox" name="HobbyDancing" value="Dancing" />
Dancing
<input type="checkbox" name="HobbyCooking" value="Cooking" />
Sketching
<br />
<input type="checkbox" name="HobbyOther" value="Other">
Others
<input type="text" name="Other_Hobby" maxlength="50" placeholder="Ex- Teaching" />
(Max 50 Characters Allowed)
</td></tr>
<!-----------------------Qualification---------------------------------------->
<tr>
<td>Qualification <br /><br /><br /></td>
<td>
<br/>
<input type="checkbox" name="HighSchool" value="High School" />
High School(10th)<br>
<input type="checkbox" name="HigherSchool" value="Higher School" />
Higher School(12th)<br/>
<input type="checkbox" name="Graduation" value="Graduation" />
Graduation(Bachelors)<br/>
<input type="checkbox" name="PostGraduation" value="Post Graduation" />
Post Graduation(Masters)<br/>
<input type="checkbox" name="Phd" value="Phd">
Phd
</td></tr>
<!---------------------------- Courses ----------------------------------->
<tr>
<td>Courses<br />Applied For</td>
<td>
<input type="radio" name="CourseBCA" value="BCA">
BCA(Bachelor of Computer Applications)<br>
<input type="radio" name="CourseBCom" value="B.Com">
B.Com(Bachelor of Commerce)<br>
<input type="radio" name="CourseBSc" value="B.Sc">
B.Sc(Bachelor of Science)<br>
<input type="radio" name="CourseBA" value="B.A">
BA(Bachelor of Arts)<br>
<input type="radio" name="CourseMCA" value="BCA">
MCA(Master of Computer Applications)<br>
<input type="radio" name="CourseMCom" value="B.Com">
M.Com(Master of Commerce)<br>
<input type="radio" name="CourseMSc" value="B.Sc">
M.Sc(Master of Science)<br>
<input type="radio" name="CourseMA" value="B.A">
MA(Master of Arts)<br>
</td></tr>
<!----------------------- Submit and Reset ------------------------------->
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td></tr>
</table>
</form>
</body>
</html>
<!--CSS CODE-->
h2{
font-family: Sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: blue;
text-align: center;
text-decoration: underline
}
table{
font-family: verdana;
color:white;
font-size: 16px;
font-style: normal;
font-weight: bold;
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-collapse: collapse;
border: 4px solid #000000;
border-style: dashed;
}
table.inner{
border: 10px
}
input[type=submit], input[type=reset]{
width: 15%;
padding: 8px 12px;
margin: 5px 0;
box-sizing: border-box;
}
Output:
Result:
Thus the registration form is designed successfully using html with external CSS.
Aim: To write an XML program to display the information about various sections in tutorial and
the topics styling with CSS.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. xml file(.xml) and css(.css) file is created separately to store data and design.
2. In xml file the details of the tutorial and section with various topics is created using our own
tag.
3. In css file the design and styles for each section and topic are declared.
4. The css file is linked with the xml file by using href=”filename.css” and finally the xml data is
designed with cascading styles.
Program:
topic.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="topic.css"?>
<Tutorials>
<title>Hello Everyone! Welcome to CSETutorial</title>
<tutorial_section>
<name>Algo</name>
<topic1>Greedy Algo</topic1>
<topic2>Randomised Algo</topic2>
<topic3>Searching Algo</topic3>
<topic4>Sorting Algo</topic4>
</tutorial_section>
<tutorial_section>
<name>Data Structures</name>
<topic1>Array</topic1>
<topic2>Stack</topic2>
<topic3>Queue</topic3>
<topic4>Linked List</topic4>
</tutorial_section>
<tutorial_section>
<name>Web Technology</name>
<topic1>HTML</topic1>
<topic2>CSS</topic2>
<topic3>Java Script</topic3>
<topic4>Php</topic4>
</tutorial_section>
<tutorial_section>
<name>Languages</name>
<topic1>C/C++</topic1>
<topic2>Java</topic2>
<topic3>Python</topic3>
<topic4>Ruby</topic4>
</tutorial_section>
<tutorial_section>
<name>DBMS</name>
<topic1>Basics</topic1>
<topic2>ER Diagram</topic2>
<topic3>Normalization</topic3>
<topic4>Transaction Concepts</topic4>
</tutorial_section>
</Tutorials>
topic.css
Tutorials:
{
font-size:80%;
margin:0.5em;
font-family: Verdana;
display:block;
}
tutorial_section {
display:block;
border: 1px solid silver;
margin:0.5em;
padding:0.5em;
background-color:whitesmoke;
}
title {
display:block;
font-weight:bolder;
text-align:center;
font-size:30px;
background-color: green;
color: white;
}
name, topic1, topic2, topic3, topic4 {
display:block;
text-align:center;
}
name {
color:green;
text-decoration: underline ;
font-weight:bolder;
font-size:20px;
}
topic1 {
color:green
}
topic2 {
color:brown
}
topic3 {
color:blue
}
topic4 {
color:orange
}
Output:
Result:
Thus the xml program to display the information about various sections in Tutorial and the
topics styling with CSS is designed successfully.
Ex.No: 4b Program to display the Book information in XML and validating it in DTD
Date :
Aim: To write an xml program to display book information validating with Document Type
Definition(DTD).
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Three files xml file(.xml), css(.css) and dtd (.dtd) file is created separately to store data and
design.
2. In xml file the details of the book is created using our own tag.
3. In css file the design and styles for each book information is given.
4. The dtd file is used to parse and validate data of xml file.
5. The css file is linked with the xml file by using href=”filename.css”.
6. The dtd file is attached with xml file using <!DOCTYPE Catalog SYSTEM "catalog.dtd"> where
SYSTEM is a keyword.
7. Finally the xml data is designed with cascading styles and data’s are validated using DTD.
Program:
catalog.dtd
<!ELEMENT Catalog (Book)*>
<!ELEMENT Book (Title, Author, Publication ,Edition, ISBN, Price)>
<!ELEMENT Title (#PCDATA)>
<!ELEMENT Publication (#PCDATA)>
<!ELEMENT Edition (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT Price (#PCDATA)>
library.css
Catalog
{
font-family:arial;
color:blue;
font-size:16pt
}
Book
{
font-family:times new roman;
color:blue;
table-layout:auto;
font-size:14pt
}
Title
{
font-family:arial;
color:green;
margin-left:20pt;
font-size:12pt
}
Author
{
font-family:arial;
color:magenta
}
Publication,Edition,ISBN,Price
{
display:block;
font-family:arial;
color:black;
font-size:10pt;
margin-left:40pt
}
Cataloguedemo.xml
<?xml version="1.0" encoding="UTF-8" standalone=”no”?>
<?xml-stylesheet type="text/css" href="library.css" ?>
<!DOCTYPE Catalog SYSTEM "catalog.dtd">
<Catalog>
<Book>
<Title>XML Bible</Title>
<Author>Winston</Author>
<Publication>Wiely</Publication>
<Edition>Fifth Edition</Edition>
<ISBN>0-7645-4760-7</ISBN>
<Price>$40.5</Price >
</Book>
<Book>
<Title>Artificial Intelligence</Title>
<Author>S. Russel</Author>
<Publication> Princeton Hall </Publication>
<Edition> Sixth Edition</Edition>
<ISBN> 0-13-1038-5-2 </ISBN>
<Price>$63</Price>
</Book>
<Book>
<Title>Java 2</Title>
<Author>Watson</Author>
<Publication>BPB Publications</Publication>
<Edition>Third Edition</Edition>
<ISBN>0-41-1058-7-2</ISBN>
<Price>$63</Price>
</Book>
<Book>
<Title>HTML in 24 hours </Title>
<Author> Sam Peter</Author>
<Publication> SAM Publications </Publication>
<Edition>Fifth Edition</Edition>
<ISBN> 0-672-32841-0 </ISBN>
<Price> $50 </Price >
</Book>
</Catalog>
Output:
Result:
Thus the program to display Book information in XML is designed and validated it in DTD.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Two files xml file(.xml) and xsl(.xsl) file is created separately to store data and design.
2. In xml file the details of the student is created using our own tag.
3. In xsl file the design and styles for each student information is given.
4. The XSL Transform is ude to display the program in html using xml as its datastore.
5. The xsl file is linked with the xml file by using href=”filename.xsl”.
6. Finally the xml data is designed with xml stylesheets and output is displayed in web browser.
Program:
student.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="student.xsl" ?>
<student>
<s>
<name> Divyank Singh Sikarwar </name>
<branch> CSE</branch> <age>18</age> <city> Agra </city>
</s>
<s>
<name> Aniket Chauhan </name>
<branch> CSE</branch> <age> 20</age> <city> Shahjahanpur </city>
</s>
<s>
<name> Simran Agarwal</name>
<branch> CSE</branch> <age> 23</age> <city> Buland Shar</city>
</s>
<s>
<name> Abhay Chauhan</name>
<branch> CSE</branch> <age> 17</age> <city> Shahjahanpur</city>
</s>
<s>
<name> Himanshu Bhatia</name>
<branch> IT</branch> <age> 25</age> <city> Indore</city>
</s>
</student>
student.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h1 align="center">Students' Basic Details</h1>
<table border="3" align="center" >
<tr>
<th>Name</th>
<th>Branch</th>
<th>Age</th>
<th>City</th>
</tr>
<xsl:for-each select="student/s">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="branch"/></td>
<td><xsl:value-of select="age"/></td>
<td><xsl:value-of select="city"/></td>
</tr>
</xsl:for-each>
</table>
</body> </html>
</xsl:template>
</xsl:stylesheet>
Output:
Result:
Thus the program to display student information in XML is designed using XSLT.
Ex.No: 5 Perl Program to get user information
Date :
Aim: To write a perl program to display user information Using Perl CGI.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox.
Algorithm:
1. Two files html file(.html) and perl(.pl) file is created separately to store data and design.
2. In html file the form is designed to get the input from the user.
3. In perl file the request method is used to get the data from each user.
4. The perl file is linked with the html file using GET and ACTION method.
5. Finally the html file is opened with the web browser and thus the desired web page is
designed.
Program:
user.html
<HTML>
<HEAD>
<TITLE>CGI Form</TITLE>
</HEAD>
<BODY>
<FORM METHOD="GET" ACTION="index.pl">
<P>Name: <INPUT TYPE = "text" NAME = "name" VALUE = "" ></P>
<P>Address: <INPUT TYPE = "text" NAME = "street" VALUE = "" ></P>
City: <INPUT TYPE = "text" NAME = "city" VALUE = "" >
State: <INPUT TYPE = "text" NAME = "state" VALUE = "" >
Zip: <INPUT TYPE = "text" NAME = "zip" VALUE = "" >
<P>Overall rating:</P>
Needs Improvement: <INPUT TYPE = "radio" NAME = "rating" VALUE = "NI">
Average: <INPUT TYPE = "radio" NAME = "rating" VALUE = "AV">
Above Average: <INPUT TYPE = "radio" NAME = "rating" VALUE = "AA">
Excellent: <INPUT TYPE = "radio" NAME = "rating" VALUE = "EX">
<BR>
<P>Comments:</P>
<P><TEXTAREA NAME = "comments"></TEXTAREA></P>
<INPUT TYPE = "reset" name="reset" value = "Reset the Form">
<INPUT type = "submit" name="submit" value = "Submit Comment">
</FORM></H4>
</BODY>
</HTML>
index.pl
$requestType = $ENV{"REQUEST_METHOD"};
Output:
Result:
Thus the program to display user information in perl is designed successfully.
Ex.No: 6a Program to calculate Electricity Bill using PHP
Date :
Aim: To write a PHP program to calculate electricity bill using if-else conditions.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox, Xampp Server
Algorithm:
1. Download and Install Xampp Server for windows.
2. After installing the folder named xampp get saved in the C drive automatically.
3. Now create a file and write the php coding for the Electricity Bill Calculation and save the
file with extension (.php) in Cxampp folderhtdocs.
4. Conditions for calculating Electricity Bill is as follows:
For first 50 units – Rs. 3.50/unit
For next 100 units – Rs. 4.00/unit
For next 100 units – Rs. 5.20/unit
For units above 250 – Rs. 6.50/unit
5. Now open the xampp server and start the Apache and mySQL.
6. Now open any web bowser and run the file as localhost/filename.php in browser.
7. Thus the electricity bill calculation website is successfully designed.
Program:
<!DOCTYPE html>
<head>
<title>PHP - Calculate Electricity Bill</title>
</head>
<?php
$result_str = $result = '';
if (isset($_POST['unit-submit'])) {
$units = $_POST['units'];
if (!empty($units)) {
$result = calculate_bill($units);
$result_str = 'Total amount of ' . $units . ' - ' . $result;
}}
/* To calculate electricity bill as per unit cost */
function calculate_bill($units) {
$unit_cost_first = 3.50;
$unit_cost_second = 4.00;
$unit_cost_third = 5.20;
$unit_cost_fourth = 6.50;
if($units <= 50) {
$bill = $units * $unit_cost_first; }
else if($units > 50 && $units <= 100) {
$temp = 50 * $unit_cost_first;
$remaining_units = $units - 50;
$bill = $temp + ($remaining_units * $unit_cost_second); }
else if($units > 100 && $units <= 200) {
$temp = (50 * 3.5) + (100 * $unit_cost_second);
$remaining_units = $units - 150;
$bill = $temp + ($remaining_units * $unit_cost_third); }
else {
$temp = (50 * 3.5) + (100 * $unit_cost_second) + (100 * $unit_cost_third);
$remaining_units = $units - 250;
$bill = $temp + ($remaining_units * $unit_cost_fourth); }
return number_format((float)$bill, 2, '.', '');}
?>
<body>
<div id="page-wrap">
<h1>Php - Calculate Electricity Bill</h1>
<form action="" method="post" id="quiz-form">
<input type="number" name="units" id="units" placeholder="Please enter no. of
Units" />
<input type="submit" name="unit-submit" id="unit-submit" value="Submit" />
</form>
Output:
Result:
Thus the program to calculate Electricity Bill in PHP is designed successfully.
Ex.No: 6b Program to display Employee Information using PHP Cookies
Date :
Aim: To write a PHP program to create a form to accept employee details and then LIC
information and displaying those details using cookies.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox, Xampp Server
Algorithm:
1. Download and Install Xampp Server for windows.
2. After installing the folder named xampp get saved in the C drive automatically.
3. Now create a file and write the php codings emp.php, LIC.php and display.php & save all the
files with extension (.php) in Cxampp folderhtdocs.
4. Now open the xampp server and start the Apache and mySQL.
5. Now open any web bowser and run the emp.php file as localhost/emp.php in browser.
Employee form page will get opened.
6. In Emp.php page the details of the employees are given and then while clicking submit
button it takes you to the new form LIC.php
7. In LIC.php page submit all the details and click display button. This will takes you to new
page where the details you entered were displayed.
Program:
Emp.html
<html>
<body>
<form method="POST" action="Lic.php">
Enter EMP No : <input type=text name="eno"><br>
Enter EMP Name : <input type=text name="name"><br>
Enter Address : <input type=text name="addr"><br>
<input type=submit value=Submit>
</form>
</body>
</html>
LIC.php
<?php
session_start();
$_SESSION['eno']=$_POST['eno'];
$_SESSION['name']=$_POST['name'];
$_SESSION['addr']=$_POST['addr'];
echo"Hello ".$_SESSION['name']." enter LIC details<br>";
?>
<form method="POST" action="Display.php">
Plan No:<input type="text" name="pno"><br>
Plan Name :<input type="text" name="pname"><br>
Premium :<input type="text" name="pre"><br>
<input type=submit value=Display>
</form>
Display.php
<?php
session_start();
echo"<Center>"."<b>Employee Details</b>"."<br>";
echo"Emp No:".$_SESSION['eno']."<br>";
echo"Emp name:".$_SESSION['name']."<br>";
echo"Address:".$_SESSION['addr']."<br>"."<hr>";
echo"<b>LIC Plan Details:</b>"."<br>";
echo"Plan No:".$_REQUEST['pno']."<br>";
echo"Plan Name:".$_REQUEST['pname']."<br>";
echo"Premium:".$_REQUEST['pre']."<br>"."<hr>";
?>
Outputs:
Result:
Thus the program to create a form to accept employee details using PHP cookies is designed
successfully.
Ex.No: 7a Program to create a submit page using PHP with MySQL DataBase
Connectivity
Date :
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox, Xampp Server, My SQL DB
Algorithm:
1. Download and Install Xampp Server for windows.
2. After installing the folder named xampp get saved in the C drive automatically.
3. Now create a file and write the php coding for submit form page and save the file with
extension (.php) in Cxampp folderhtdocs.
4. Now open the xampp server and start the Apache and mySQL.
5. Now open any web bowser and run the file as localhost/filename.php in browser.
6. Now the submit page gets opened.
7. Next connect the php coding to database using
$con=new mysqli('localhost','root','','website');
8. To connect the page with Database follow the steps below:
a. In Xampp server click the admin button of MySQL. It directs you to a database page.
b. There you create your database, table with columns and names to each column and
save it.
9. Now on giving input on the submit page and by clicking
Program:
<?php
$con=new mysqli('localhost','root','','student');
if($con->connect_error)
{
echo $con->connect_error;
die();
}
else
{
echo"database connect";
}
?>
<html>
<body>
<form action="sample.php" method="post">
<table>
<tr>
<td>name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>age</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="save"></td>
</tr>
</table>
</form>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$name=$_POST['name'];
$age=$_POST['age'];
$password=$_POST['password'];
if($name!=""&&$age!=""&&$password!="")
{
$sql="insert into god(uname,age,password)values('$name',$age,'$password')";
if($con->query($sql))
{
echo "data store";
}
else
{
echo"data fail";
}}
else
{
echo"all data require";
}}
else
{
echo"enterall data";
}
?>
Output:
Result:
Thus the program to create a submit form page using PHP with database is stored
successfully.
Ex.No: 7b Program to create a page user details using PHP with MySQL DataBase
Connectivity and retrieval of Data from Database
Date :
Aim: To write a PHP program to create a page to get user details with DB connection.
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox, Xampp Server, My SQL DB
Algorithm:
1. Download and Install Xampp Server for windows.
2. After installing the folder named xampp get saved in the C drive automatically.
3. Now create a file and write the php coding for submit form page and save the file with
extension (.php) in Cxampp folderhtdocs.
4. Now open the xampp server and start the Apache and mySQL.
5. Now open any web bowser and run the file as localhost/filename.php in browser.
6. Here we using 3 file for insert data in MySQL:
a. database.php:For connecting data base
b. insert.php: For getting the values from the user
c. process.php: A PHP file that process the request
d. retrieve.php: For retrive data from database
7. To connect the page with Database follow the steps below:
a. In Xampp server click the admin button of MySQL. It directs you to a database page.
b. There you create your database, table with columns and names to each column and
save it.
8. Now on giving input on the submit page and by clicking submit button, the user details get
saved in the database and also we can reteieve data from database.
Program:
insert.php
<!DOCTYPE html>
<html>
<body>
<form method="post" action="process.php">
First name:<br>
<input type="text" name="first_name">
<br>
Last name:<br>
<input type="text" name="last_name">
<br>
City name:<br>
<input type="text" name="city_name">
<br>
Email Id:<br>
<input type="email" name="email">
<br><br>
<input type="submit" name="save" value="submit">
</form>
</body>
</html>
process.php
<?php
include_once 'database.php';
if(isset($_POST['save']))
{
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$city_name = $_POST['city_name'];
$email = $_POST['email'];
$sql = "INSERT INTO employee (first_name,last_name,city_name,email)
VALUES ('$first_name','$last_name','$city_name','$email')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully !";
} else {
echo "Error: " . $sql . " " . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
database.php
<?php
$conn=mysqli_connect('localhost','root','','crud');
if(!$conn){
die('Could not Connect My Sql:' .mysql_error());
}
?>
retrieve.php
<?php
include_once 'database.php';
$result = mysqli_query($conn,"SELECT * FROM employee");
?>
<!DOCTYPE html>
<html>
<head>
<title> Retrive data</title>
</head>
<body>
<?php
if (mysqli_num_rows($result) > 0) {
?>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>City</td>
<td>Email id</td>
</tr>
<?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><?php echo $row["first_name"]; ?></td>
<td><?php echo $row["last_name"]; ?></td>
<td><?php echo $row["city_name"]; ?></td>
<td><?php echo $row["email"]; ?></td>
</tr>
<?php
$i++;
}
?>
</table>
<?php
}
else{
echo "No result found";
}
?>
</body>
</html>
Output:
Result:
Thus the program to create a page to get user details where the data is stored and retrieved
successfully.
Ex.No: 8 Program to create Live Search Page using Ajax
Date :
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox, Xampp Server, My SQL DB, HTML, CSS, PHP, MySQL, Javascript, AJAX.
Algorithm:
1. Download and Install Xampp Server for windows.
2. After installing the folder named xampp get saved in the C drive automatically.
3. Now create a file and write the php coding for submit form page and save the file with
extension (.php) in Cxampp folderhtdocs.
4. Now open the xampp server and start the Apache and mySQL.
5. Here we using 5 file for insert data in MySQL:
a. Search.php (This is the main file of the search engine, where a user inputs data and
views result).
b. db.php (This file contains database connection details).
c. Ajax.php (The main file that generates AJAX request to server and return results).
d. script.js (This file contains javascript functions to perform AJAX requests).
e. style.css (Contains styling for the search engine).
6. To connect the page with Database follow the steps below:
a. In Xampp server click the admin button of MySQL. It directs you to a database page.
b. Create a database called “autocomplete” and insert sql queries.
7. Now on giving input to the search page which will display the output.
Program:
sql query
CREATE TABLE search (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
Name VARCHAR(30) NOT NULL
);
INSERT INTO `search` VALUES
(1, 'David Copperfield'),
(2, 'Ricky Ponting'),
(3, 'Cristiano Ronaldo'),
(4, 'Lionel Messi'),
(5, 'Shane Watson');
search.php
<!DOCTYPE html>
<html>
<head>
<title>Live Search using AJAX</title>
<div id="display"></div>
</body>
</html>
db.php
<?php
//Database connection.
$con = MySQLi_connect(
"localhost", //Server host name.
"root", //Database username.
"", //Database password.
"autocomplete" //Database name or anything you would like to call it.
);
//Check connection
if (MySQLi_connect_errno()) {
echo "Failed to connect to MySQL: " . MySQLi_connect_error();
}
?>
ajax.php
<?php
//Including Database configuration file.
include "db.php";
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '%$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
<a>
</li></a>
<!-- Below php code is just for closing parenthesis. Don't be confused. -->
<?php
}}
?>
</ul>
scripts.js
//Getting value from "ajax.php".
function fill(Value) {
//On pressing a key on "Search box" in "search.php" file. This function will be called.
$("#search").keyup(function() {
//AJAX is called.
$.ajax({
style.css
a:hover {
cursor: pointer;
background-color: yellow;
}
Output:
Result:
Thus the program to create live search page is created successfully using Ajax.
Ex.No: 9 Program to display book information using Rails
Date :
Tools Required: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or
Mozilla Firefox, Xampp Server, My SQL DB, Instantrails2.0
Algorithm:
1. Download and Install Xampp Server for windows.
2. After installing the folder named xampp get saved in the C drive automatically.
3. Save instantrails2.0 in c:/
4. Start xampp
5. Goto C:\Instantrails2.0 there will be an icon I, double click on that.
6. Click on I (left side)- Rails applications → ruby console window
7. Type the commands and coding to get desired output.
Program:
1. Create Database
Type this code at command prompt to login to mysql server as root and get the mysql prompt
> mysql -u root
mysql> create database bookApp_development; mysql> create database bookApp_test;
mysql> create database bookApp_production; mysql> use bookApp_development;
mysql> create table books
(ID INT NOT NULL AUTO_INCREMENT,
acc_num int NOT NULL,
title VARCHAR(150) NOT NULL, authors VARCHAR(150) NOT NULL,
edition INT(2),
publisher VARCHAR(150), PRIMARY KEY(ID)
);
Quit MySQL by typing mysql> quit;
Click on the “New book” link to insert data into the table books
Click on Create
5. Generate model
At the command prompt type,
C:\InstantRails-2.0-win\rails_apps\bookApp> ruby script/generate model book
This will create book.rb in C:\InstantRails-2.0-win\rails_apps\bookApp\app\models directory.
result.rhtml
<html>
<head>
<title> Welcome template for books </title>
</head>
<body bgcolor="#CCFFCC" text="#003800">
<h1>Welcome</h1>
<ul>
<li><a href="../books/new"> Add new book </a></li>
<li><a href="../books">View Book Listing</a></li>
</ul>
<h3> Search for books</h3>
<p> Total number of books : <%= @num_books %> </p>
<form action = "result" >
Enter title of book : <input type="text" name="sid" />
<input type=submit value="Search" />
</form>
</body>
</html>
result.rhtml
<html>
<head>
<title> Welcome template for books </title>
<style> table {
border-collapse: collapse;
}
th {
background-color: #003300; color: #CCCCCC;
}
th, td { padding: 5px; }
</style>
</head>
<body bgcolor="#CCFFCC" text="#003800">
<h1> Search Results </h1>
<p> Search Results for book title containing <b> <%= @booktitle %> </b></p>
<a href="welcome"> Back </a>
<table border="1">
<tr>
<th>Accession Number</th>
<th>Title</th>
<th>Authors</th>
<th>Edition No. </th>
<th> Publisher</th>
</tr>
<% @bookz.each do |bk| @acc_num= bk.acc_num @title = bk.title
@author = bk.authors @edition = bk.edition @publisher = bk.publisher %>
<tr>
<td> <%= @acc_num %></td>
<td><%= @title %> </td>
<td><%= @author %></td>
<td> <%= @edition %></td>
<td> <%= @publisher %></td>
</tr>
<% end %>
</table>
</body>
</html>
Start the application with mongrel
C:\InstantRails-2.0-win\rails_apps\bookApp> ruby script/server
Result:
Thus the program to display book information is created successfully using Rails.
Ex.No: 10 A Sample Case Study – Online Shopping Website
Date:
Aim: To develop an online shopping website developed using HTML, CSS, PHP, and MYSQL.
Problem Statement:
1. Online Shopping store is used in the effective purchase of items to all of the customer. Here,
customers can find products with details placed for sale.
2. In this web application software, one can add new products along with their name, image,
description, price. There are basically three types of products on this website: camera,
watches, and shirts for the customers. The software features a beautiful landing home page
where users can see three various product categories to start with. Upon clicking one
category -eg- watches, the website will redirect the customer to the watches page where
there are various types of watches available for the customers to view and buy if interested.
3. Likewise, in order to process to buy price, one must be logged in to the website. If not, they
need to register to the site as a come with their name, address, mail, contact number. Then,
the user can add products to the cart and then continue to shop or prices to the checkout
page.
1.1 Purpose
Online Shopping brings convenience for customers as they do not have to leave home and
only need to browse website online, especially for buying the products which are not sold in
nearby shops. It could help customers buy wider range of products and save customers'
time. Consumers also gain power through online shopping.
1.2 Scope
Sellers can deal in a wide range of products. They can analyse customer buying patterns and
preferences and offer tailor made offers, discounts, and services. Business can be easily
scaled. By selling via online retail sites like Amazon, Flipkart, etc., small traders and
manufacturers get the seal of legitimacy.
Overview
It includes two sections overall description and specific requirements – Overall description will
describe major role of the system components and interconnections. Specific requirements will
describe roles & functions of the actors.
Hardware Interface
PROCESSOR : Intel dual Core ,i3
RAM : 1 GB
Software Interface
Operating System : Unix, Linux, Mac, Windows,etc
Frontend : HTML, CSS
Serverside Script : PHP
Database : MySQL
2.4 Constraints
The Key restriction here will be to verify the validity of the purchaser, which is not
always feasible. Security threats may be involved.
The built framework can run on any platform that includes a web browser that
supports PHP, scripting language and AJAX.
Modules Description :
The system consists of the following modules :
Master Maintenance : This module consists of information about the products and
services. This includes two sub-modules, Product master and Price master.
Product master includes the information about particular product, such as product
number, item, name, category, images of products, description, features, and
constraints of products. All these will be entered to the database through product
master and hence made available in the website. In Other words product master is
the admin area for the vendors/sellers where they can put information about their
products which are to be displayed in the website.
Price master deals with the cost of the product, discounts applicable for the
particular product of a vendor/seller.
Transactions : In this module, management of shopping cart is done. This module will
add the bought item to the shopping cart, where all items that are to be purchased can be reviewed
once again after the item is bought from the cart. Payment will be done on Delivery of the items
( Cash On Delivery).
Reporting : In this module all reports will be generated. Whenever a item is sold, or
customer orders a product, its vendor should be sent an alert via email immediately so that he can
ship that item soon. This module has 3 sub modules; Stock Reports, Order Reports and Delivery
Reports.
Stock Report will produce reports of the quantity of the products available and
product status.
Order Report will have the list of products ordered and the customer details who
have bought that product, which are undelivered.
Delivery Reports will generate products list, which are delivered to customers.
House Keeping : This module takes care of data which are older than a certain period. It
will allow the vendor to archive the reports generated or transaction and business history reported
by Reporting module.
Future scope of the Project :
Most generic consumer to consumer e-commerce website,which covers almost all
possible categories with 2 level listing.
Maximize benefits and minimize the disadvantages of a common ecommerce
website.
User friendly, Vendor friendly environment.
E – R DIAGRAM
Entity Relationship Diagrams are a major data modeling tool and will help organize the data
in your project into entities and define the relationships between the entities. This process has
proved to enable the analyst to produce a good database structure so that the data can be stored
and retrieved in a most efficient manner.
Entity
A data entity is anything real or abstract about which we want to store data. Entity types
fall into five classes: roles, events, locations, tangible things or concepts. E.g. employee,
payment, campus, book. Specific examples of an entity are called instances. E.g. the employee
John Jones, Mary Smith's payment, etc.
Relationship
A data relationship is a natural association that exists between one or more entities. E.g.
Employees process payments. .
Attribute
A data attribute is a characteristic common to all or most instances of a particular entity.
Synonyms include property, data element, field. E.g. Name, address, Employee Number, pay
rate are all attributes of the entity employee. An attribute or combination of attributes that
uniquely identifies one and only one instance of an entity is called a primary
key or identifier. E.g. Employee Number is a primary key for Employee.
A Data Flow Diagram (DFD) is a graphical representation of the "flow" of data through
an information system. A DFD is often used as a preliminary step to create an overview of the
system. DFDs can also be used for the visualization of data processing (structured design).
A DFD shows what kind of information will be input to and output from the system, where the data
will come from and go to, and where the data will be stored. It does not show information about the
timing of process or information about whether processes will operate in sequence or in parallel.
Codings
-- phpMyAdmin SQL
CREATE TABLE `items` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `price` int(11)
NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- Dumping data for table `items` --
INSERT INTO `items` (`id`, `name`, `price`) VALUES (1, 'Cannon EOS', 36000), (2, 'Sony DSLR',
40000), (3, 'Sony DSLR', 50000), (4, 'Olympus DSLR', 80000), (5, 'Titan Model #301', 13000), (6,
'Titan Model #201', 3000), (7, 'HMT Milan', 8000), (8, 'Favre Lueba #111', 18000), (9, 'Raymond',
1500), (10, 'Charles', 1000), (11, 'HXR', 900), (12, 'PINK', 1200);
-- Table structure for table `users` --
CREATE TABLE `users` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `email`
varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `contact` varchar(255) NOT NULL,
`city` varchar(255) NOT NULL, `address` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT
CHARSET=latin1;
-- Dumping data for table `users` --
INSERT INTO `users` (`id`, `name`, `email`, `password`, `contact`, `city`, `address`) VALUES (4,
'yugesh verma', '[email protected]', '14e1b600b1fd579f47433b88e8d85291',
'6263056779', 'bhilai', '25 commercial complex, nehru nagar,east near vijya bank, bhilai C.G.'), (5,
'yugesh', '[email protected]', '14e1b600b1fd579f47433b88e8d85291', '9165063741',
'bhilai', 'bhilai');
-- Table structure for table `users_items` --
CREATE TABLE `users_items` ( `id` int(11) NOT NULL, `user_id` int(11) NOT NULL, `item_id`
int(11) NOT NULL, `status` enum('Added to cart','Confirmed') NOT NULL ) ENGINE=InnoDB
DEFAULT CHARSET=latin1;
-- Dumping data for table `users_items` --
INSERT INTO `users_items` (`id`, `user_id`, `item_id`, `status`) VALUES (7, 3, 3, 'Added to cart'), (8, 3,
4, 'Added to cart'), (9, 3, 5, 'Added to cart'), (10, 3, 11, 'Added to cart'), (11, 1, 9, 'Added to cart'), (12,
1, 2, 'Added to cart'), (13, 1, 8, 'Added to cart'), (14, 4, 2, 'Confirmed'), (18, 5, 11, 'Added to cart'),
(20, 5, 5, 'Added to cart');
-- Indexes for dumped tables -- -- -- Indexes for table `items` --
ALTER TABLE `items` ADD PRIMARY KEY (`id`);
-- -- Indexes for table `users` --
ALTER TABLE `users` ADD PRIMARY KEY (`id`);
-- -- Indexes for table `users_items` -- ALTER TABLE `users_items` ADD PRIMARY KEY (`id`),
ADD KEY `user_id` (`user_id`,`item_id`), ADD KEY `item_id` (`item_id`);
-- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `items` --
ALTER TABLE `items` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;
-- -- AUTO_INCREMENT for table `users` --
ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
-- -- AUTO_INCREMENT for table `users_items` -- ALTER TABLE `users_items`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
-- -- Constraints for dumped tables ---- -- Constraints for table `users_items` --
ALTER TABLE `users_items` ADD CONSTRAINT `users_items_ibfk_1` FOREIGN KEY (`user_id`)
REFERENCES `users` (`id`), ADD CONSTRAINT `users_items_ibfk_2` FOREIGN KEY (`item_id`)
REFERENCES `items` (`id`); COMMIT;
CSS Coding:
.navbar{ margin-bottom: 0px; }
#bannerImage{ padding-top:75px; padding-bottom:50px; margin-bottom: 20px; text-
align:center; color:#f8f8f8; background:url(../img/intro-bg_1.jpg); background-size:cover; }
#bannerContent{ position:relative; padding-top:6%; padding-bottom:6%; margin-
top:12%; margin-bottom:12%; background-color:rgba(0,0,0,0.7); max-width:660px; }
footer{ background-color:#101010; color:#9d9d9d; font-size:14px; font-weight:bold;
padding:10px; bottom:0; }
html { min-height:100%; position:relative; }
.footer { position: absolute; bottom:0; right:0; left:0; }
@media (min-width:320px){ #autoResize{ font-size:12px; } }
@media (min-width:481px){ #autoResize{ font-size:16px; }}
@media (min-width:641px){ #autoResize{ font-size:18px; }}
@media (min-width:961px){ #autoResize{ font-size:20px; } }
@media (min-width:1000px){ #autoResize{ font-size:26px; } }
Card.php
<?php
session_start();
require 'connection.php';
if(!isset($_SESSION['email'])){ header('location: login.php'); }
$user_id=$_SESSION['id'];
$user_products_query="select it.id,it.name,it.price from users_items ut inner join items it on
it.id=ut.item_id where ut.user_id='$user_id'";
$user_products_result=mysqli_query($con,$user_products_query) or die(mysqli_error($con));
$no_of_user_products= mysqli_num_rows($user_products_result);
$sum=0;
if($no_of_user_products==0){ //echo "Add items to cart first."; ?>
<script>
window.alert("No items in the cart!!");
</script>
<?php
}else{
while($row=mysqli_fetch_array($user_products_result)){
$sum=$sum+$row['price'];
} }?>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="img/lifestyleStore.png" />
<title>Projectworlds Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<!-- jquery library -->
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified javascript -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div> <?php require 'header.php'; ?>
<br> <div class="container">
<table class="table table-bordered table-striped">
<tbody> <tr>
<th>Item Number</th><th>Item Name</th><th>Price</th><th></th>
</tr> <?php
$user_products_result=mysqli_query($con,$user_products_query) or die(mysqli_error($con));
$no_of_user_products= mysqli_num_rows($user_products_result);
$counter=1;
while($row=mysqli_fetch_array($user_products_result)){
?> <tr> <th><?php echo $counter ?></th><th><?php echo
$row['name']?></th><th><?php echo $row['price']?></th>
<th><a href='cart_remove.php?id=<?php echo $row['id'] ?>'>Remove</a></th>
</tr> <?php $counter=$counter+1;}?> <tr>
<th></th><th>Total</th><th>Rs <?php echo $sum;?>/-</th><th><a href="success.php?id=<?php
echo $user_id?>" class="btn btn-primary">Confirm Order</a></th></tr>
</tbody> </table> </div> <br><br><br><br><br><br><br><br><br><br>
<footer class="footer"> <div class="container"> <center>
<p>Copyright © <a href="https://projectworlds.in">Projectworlds</a> Store. All Rights
Reserved.</p> <p>This website is developed by Yugesh Verma</p>
</center> </div> </footer> </div> </body>
</html>
<---------cardadd-------->
<?php
require 'connection.php'; //require 'header.php';
session_start(); $item_id=$_GET['id'];
$user_id=$_SESSION['id']; $add_to_cart_query="insert into users_items(user_id,item_id,status)
values ('$user_id','$item_id','Added to cart')";
$add_to_cart_result=mysqli_query($con,$add_to_cart_query) or die(mysqli_error($con));
header('location: products.php'); ?>
<-------Card remove----->
<?php
require 'connection.php'; session_start(); $item_id=$_GET['id']; $user_id=$_SESSION['id'];
$delete_query="delete from users_items where user_id='$user_id' and item_id='$item_id'";
$delete_query_result=mysqli_query($con,$delete_query) or die(mysqli_error($con));
header('location: cart.php'); ?>
<----------Check if added ---------->
<?php
function check_if_added_to_cart($item_id){ //session_start(); require
'connection.php'; $user_id=$_SESSION['id']; $product_check_query="select * from
users_items where item_id='$item_id' and user_id='$user_id' and status='Added to cart'";
$product_check_result=mysqli_query($con,$product_check_query) or die(mysqli_error($con));
$num_rows=mysqli_num_rows($product_check_result); if($num_rows>=1)return 1;
return 0; } ?>
<----- connection---->
<?php
$con=mysqli_connect("localhost","root","","store") or die(mysqli_error($con));
//$con=mysqli_connect("localhost","root","","store") or die(mysqli_error($con));
?>
Header.php
<nav class="navbar navbar-inverse navabar-fixed-top">
<div class="container"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
<a href="index.php" class="navbar-brand">projectworlds Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php
if(isset($_SESSION['email'])){ ?>
<li><a href="cart.php"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
<li><a href="settings.php"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
<?php }else{ ?>
<li><a href="signup.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<?php } ?> </ul> </div> </div> </nav>
Header2
<nav class="navbar navbar-inverse navabar-fixed-top">
<div class="container"><div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button><a href="index.php" class="navbar-brand">projectworlds Store</a> </div>
<div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav navbar-right">
<li><a href="cart.php"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
<li><a href="settings.php"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul> </div> </div> </nav>
Login.php
<?php
require 'connection.php';
session_start();
?>
<!DOCTYPE html>
<html> <head>
<link rel="shortcut icon" href="img/lifestyleStore.png" />
<title>Projectworlds Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<!-- jquery library -->
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified javascript -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
</head> <body> <div>
<?php
require 'header.php';
?> <br><br><br>
<div class="container"> <div class="row"> <div class="col-xs-6 col-xs-offset-3">
<div class="panel panel-primary"> <div class="panel-heading">
<h3>LOGIN</h3> </div>
<div class="panel-body"> <p>Login to make a purchase.</p>
<form method="post" action="login_submit.php"><div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email" pattern="[a-z0-
9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3} </div><div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password(min. 6
characters)" pattern=".{6,}"> </div><div class="form-group">
<input type="submit" value="Login" class="btn btn-primary"></div></form></div>
<div class="panel-footer">Don't have an account yet? <a href="signup.php">Register</a></div>
</div></div></div></div><br><br><br><br><br><footer class="footer">div class="container">
<center> <p>Copyright © <a href="https://projectworlds.in">Projectworlds</a> Store. All
Rights Reserved.</p><p>This website is developed by Yugesh Verma</p></center>
</div></footer></div></body> </html>
User registration
<?php
require 'connection.php';
session_start();
$name= mysqli_real_escape_string($con,$_POST['name']);
$email=mysqli_real_escape_string($con,$_POST['email']);
$regex_email="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[_a-z0-9-]+)*(\.[a-z]{2,3})$/";
if(!preg_match($regex_email,$email)){
echo "Incorrect email. Redirecting you back to registration page...";
?>
<meta http-equiv="refresh" content="2;url=signup.php" />
<?php
}
$password=md5(md5(mysqli_real_escape_string($con,$_POST['password'])));
if(strlen($password)<6){
echo "Password should have atleast 6 characters. Redirecting you back to registration page...";
?>
<meta http-equiv="refresh" content="2;url=signup.php" />
<?php
}
$contact=$_POST['contact'];
$city=mysqli_real_escape_string($con,$_POST['city']);
$address=mysqli_real_escape_string($con,$_POST['address']);
$duplicate_user_query="select id from users where email='$email'";
$duplicate_user_result=mysqli_query($con,$duplicate_user_query) or die(mysqli_error($con));
$rows_fetched=mysqli_num_rows($duplicate_user_result);
if($rows_fetched>0){
//duplicate registration
//header('location: signup.php');
?>
<script>
window.alert("Email already exists in our database!");
</script>
<meta http-equiv="refresh" content="1;url=signup.php" />
<?php
}else{
$user_registration_query="insert into users(name,email,password,contact,city,address) values
('$name','$email','$password','$contact','$city','$address')";
//die($user_registration_query);
$user_registration_result=mysqli_query($con,$user_registration_query) or
die(mysqli_error($con));
echo "User successfully registered";
$_SESSION['email']=$email;
//The mysqli_insert_id() function returns the id (generated with AUTO_INCREMENT) used in
the last query.
$_SESSION['id']=mysqli_insert_id($con);
//header('location: products.php'); //for redirecting
?>
<meta http-equiv="refresh" content="3;url=products.php" />
<?php
}
?>
Bootstrap
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a{
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
height: auto;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
display: table-cell; }
.navbar-default .navbar-nav > li > a { color: #777; }
.progress-bar-success { background-color: #5cb85c; }
.media-bottom { vertical-align: bottom; }
.media-heading { margin-top: 0; margin-bottom: 5px;
}
.media-list { padding-left: 0; list-style: none;}
.list-group { padding-left: 0; margin-bottom: 20px; }
a.list-group-item-success:hover, button.list-group-item-success:hover, a.list-group-item-
success:focus, button.list-group-item-success:focus { color: #3c763d; background-color:
#d0e9c6; }
Output Screenshots
HomePage
Login Page
Admin Login
Registration Page
Product Page
Delivery ReportPage
Feedback Page
Result:
Thus the project to develop online shopping website was developed and case study is done.
Viva Questions
1. What is HTML?
HTML (HyperText Markup Language) is a Universal language which allows an individual using
special code to create web pages to be viewed on the Internet.
2. What is a tag?
In HTML, a tag tells the browser what to do. When you write an HTML page, you enter tags for
many reasons; to change the appearance of text, to show a graphic, or to make a link to another
page.
23.What is property?
Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. font or width.
There must always be a corresponding value or values set to each property.
27. What are the sequences of steps for each HTTP request from a client to the server?
1. Making the connection
2. Making a request
3. The response
4. Closing the connection
28.What is XML?
XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation
29. What are the Difference Between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is
HTML was designed to display data, with focus on how data looks
HTML is about displaying information, while XML is about carrying information.
36.What is the name of the python 2.x library to parse XML data?
XML.etree.ElementTree
38.List the differences between XML DTD and XML schema or XSD.
DTD XSD
Stands for Document Type Definition. Stands for XML Schema.
Derived from SGML syntax. Written in XML.
Doesn’t support datatypes. Supports data types for elements and attributes.
Doesn’t support namespace. Supports namespace.
39. What is element and attribute in an XML document? Define with example.
Element in XML:
Element in XML has starting and ending tags, which also holds text, pictures and attributes.
Example:
<name>The Great Learning</name>
Attribute in XML :
Attributes in XML must be quoted, such as text strings and URLs. Other values such as images,
heights and font size give the desired results regardless of the quotation.
Example :
<person gender=”female”> or <person gender=’male’>
Attribute in XML can use both single and double quotes in a specific element in any combination.
Example :
<flower name=”lotus” ‘rose’ ‘lily’>
44.What is SGML?
SGML stands for Standard Generalized Markup Language, which is a standard for defining markup
languages for documents. SGML has the advantage of not being dependent on any specific
application. SGML comes from GML, which stands for Generalized Markup Language, allowing users
to work on standardised formatting styles.
Standard generalised markup language has two features:
Descriptive Markup
Document Types
50. In Perl we can show the warnings using some options in order to reduce or avoid the errors.
What are that options?
-The -w Command-line option: It will display the list if warning messages regarding the code.
– strict pragma: It forces the user to declare all variables before they can be used using the my()
function.
– Using the built-in debugger: It allows the user to scroll through the entire program line by line.
51. Does Perl have objects? If yes, then does it force you to use objects? If no, then why?
Yes, Perl has objects and it doesn’t force you to use objects. Many object oriented modules can be
used without understanding objects. But if the program is too large then it is efficient for the
programmer to make it object oriented.
53.In Perl, there are some arguments that are used frequently. What are that arguments and what
do they mean?
-w (argument shows warning)
-d (use for debug)
-c (which compile only not run)
-e (which executes)
We can also use combination of these like:
-wd
54. How many types of primary data structures in Perl and what do they mean?
The scalar: It can hold one specific piece of information at a time (string, integer, or reference). It
starts with dollar $ sign followed by the Perl identifier and Perl identifier can contain alphanumeric
and underscores. It is not allowed to start with a digit. Arrays are simply a list of scalar variables.
Arrays:
Arrays begin with @ sign. Example of array:
my @arrayvar = ("string a", "string b "string c");
Associative arrays: It also frequently called hashes, are the third major data type in Perl after
scalars and arrays. Hashes are named as such because they work very similarly to a common data
structure that programmers use in other languages–hash tables. However, hashes in Perl are
actually a direct language supported data type.
55. Which functions in Perl allows you to include a module file or a module and what is the
difference between them?
“use”
The method is used only for the modules (only to include .pm type file)
The included objects are verified at the time of compilation.
We don’t need to specify the file extension.
loads the module at compile time.
“require”
The method is used for both libraries and modules.
The included objects are verified at the run time.
We need to specify the file Extension.
Loads at run-time.
suppose we have a module file as “Module.pm”
use Module;
or
require “Module.pm”;
(will do the same)
58. Where the command line arguments are stored and if you want to read command-line
arguments with Perl, how would you do that?
The command line arguments in Perl are stored in an array @ARGV.
$ARGV[0] (the first argument)
$ARGV[1] (the second argument) and so on.
$#ARGV is the subscript of the last element of the @ARGV array, so the number of arguments on the
command line is $#ARGV + 1
67. Explain what is the scalar data and scalar variables in Perl?
Scalar in Perl means a single entity like a number or string. So, the Java concept of int, float, double
and string equals to perls scalar and the numbers and strings are exchangeable. While scalar
variable is used to store scalar data. It uses $ sign and followed by one or more alphanumeric
characters or underscore. It is a case sensitive.
69.Explain Echo?
The echo can take more than one string for output and return 1.
71. What ways can we retrieve data? On the result sets of MySql using PHP?
There are four ways to retrieve and they are
mysql_fetch_row
mysql_fetch_assoc
mysql_fetch_array
mysql_fetch_object
89. What are the various types of triggers that are possible in MySQL?
Before Insert
After Insert
Before Delete
After Delete
Before Update
After Update
94. What is the name of the DLL that contains Ajax control tool kit?
Ajaxcontroltoolkit.dll is the DLL used for Ajax control tool kit and it can be downloaded from the
internet. It can be added in the tool box or copied directly in the bin folder.
98. Which are the two methods used for cross domain Ajax calls?
There are two methods used to transfer data between the two more more security domains:
CORS – Cross Origin Resource Sharing and it works with the HTTP web browsers
JSONP – JSON with Padding which works with the HTTP GET and on legacy browsers
109. What are the components of the ASP.NET Ajax Client Library?
Following components are used in Ajax client library:
Component Layer
Core Services Layer
Browser Compatibility Layer