Scribd
Upload
29 views

Design Forms That Send Input To An Existing Web Server E.G. Google.

The document describes an assignment to build a website that replicates the functionality of Google Search, Google Image Search, and Google Advanced Search by submitting queries to Google's servers. Students are to create 3 HTML pages - one each for the search types - that submit query parameters to Google via HTML forms to retrieve search results.

Uploaded by

umartanveer113311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

Design Forms That Send Input To An Existing Web Server E.G. Google.

The document describes an assignment to build a website that replicates the functionality of Google Search, Google Image Search, and Google Advanced Search by submitting queries to Google's servers. Students are to create 3 HTML pages - one each for the search types - that submit query parameters to Google via HTML forms to retrieve search results.

Uploaded by

umartanveer113311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

COMSATS University Islamabad, Vehari Campus

Department of Computer Science

CSC483-Topics in CS-II
Assignment # 1
Distribution Date: March 02, 2023
Submission Date: March 15, 2023
Note:

 Assignment is individual, so no cheating will be acceptable. Do your own effort and however little
it is, it will be rewarded.
 Assignment must be uploaded on CUOnline after zipping all the source files in one folder. The
folder name must contain StudentID+Name e.g. FA19-BCS-001+ABDUL HASEEB
 Appropriate penalty is charged in case of late submissions i.e. losing 20% marks per day

Google Search, Google Image Search, and Google Advanced Search

Problem Statement: Marks: 10

Design forms that send input to an existing web server: e.g. Google.

Assignment Tutorial:

When you perform a Google search, as by typing in a query into Google’s homepage and clicking the
“Google Search” button, how does that query work? Let’s try to find out.

Navigate to google.com (https://www.google.com/), type in a query like “COMSATS” into the search
field, and click the “Google Search” button.

As you probably expected, you should see Google search results for “COMSATS”. But now, take a
look at the URL. It should begin with https://www.google.com/search, the route on Google’s website
that allows for searching. But following the route is a ? , followed by some additional information.

Those additional pieces of information in the URL are known as a query string. The query string
consists of a sequence of GET parameters, where each parameter has a name and a value. Query strings
are generally formatted as:

field1=value1&field2=value2&field3=value3...

Page 1 of 4
where an = separates the name of the parameter from its value, and the & symbol separates parameters
from one another. These parameters are a way for forms to submit information to a web server, by
encoding the form data in the URL.

Take a look at the URL for your Google search results page. It seems there are quite a few parameters
that Google is using. Look through the URL (it may be helpful to copy/paste it into a text editor), and
see if you can find any mention of “COMSATS” in your query.

If you look through the URL, you should see that one of the GET parameters in the URL is q=COMSATS.
This suggests that the name for the parameter corresponding to a Google search is q (likely short for
“query”).

It turns out that, while the other parameters provide useful data to Google, only the q parameter is
required to perform a search. You can test this for yourself by visiting
https://www.google.com/search?q=COMSATS, deleting all the other parameters. You should see the
same Google results!

Using this information, we can actually re-implement a front end for Google’s homepage. Paste

the below into an HTML file called index.html , and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<form action="https://google.com/search">
<input type="text" name="q">
<input type="submit" value="Google Search">
</form>
</body>
</html>

When you open this page in a browser, you should see a (very simple) HTML form. Type in a search
query like “COMSATS” and click “Google Search”, and you should be taken to Google’s search results
page!

How did that work? In this case, the action attribute on the form told the browser that when, the form
is submitted, the data should be sent to https://google.com/search . And by adding an input field to the
form whose name attribute was q, whatever the user types into that input field is included as a GET
parameter in the URL.
Page 2 of 4
Assignment Requirements:

Your task in this assignment is to expand on this site, creating your own front end for Google
Search, as by exploring Google’s interface to identify what GET parameters it expects and adding
the necessary HTML and CSS to your website. Your website must meet the following
requirements.
 Pages. Your website should have at least three pages: one for Google Search, one for
Google Image Search, and one for Google Advanced Search.
o On the Google Search page, there should be links in the upper-right of the page to
go to Image Search or Advanced Search. On each of the other two pages, there
should be a link in the upper-right to go back to Google Search.
 Query Text. On the Google Search page, the user should be able to type in a query, click
“Google Search”, and be taken to the Google search results for that page.
o Like Google’s own, your search bar should be centered with rounded corners. The
search button should also be centered, and should be beneath the search bar.
 Query Images. On the Google Image Search page, the user should be able to type in a
query, click a search button, and be taken to the Google Image search results for that page.
 Query Advanced. On the Google Advanced Search page, the user should be able to
provide input for the following four fields (taken from Google’s own advanced search
(https://www.google.com/advanced_search) options)
o Find pages with… “all these words:”
o Find pages with… “this exact word or phrase:”
o Find pages with… “any of these words:”
o Find pages with… “none of these words:”
 Appearance. Like Google’s own Advanced Search page, the four options should be
stacked vertically, and all of the text fields should be left aligned.
o Consistent with Google’s own CSS, the “Advanced Search” button should be blue
with white text. When the “Advanced Search” button is clicked, the user should be
taken to search results page for their given query.
 Lucky. Add an “I’m Feeling Lucky” button to the main Google Search page. Consistent
with Google’s own behavior, clicking this link should take users directly to the first Google
search result for the query, bypassing the normal results page.
Page 3 of 4
 Aesthetics. The CSS you write should match Google’s own aesthetics as best as possible
Hints:

 To determine what the parameter names should be, you’re welcome to experiment with
making Google searches, and looking at the resulting URL. It may also be helpful to open
the “Network” inspector (accessible in Google Chrome by choosing View -> Developer -
> Developer Tools) to view details about requests your browser makes to Google.
o Any <input> element (whether its type is text , submit , number , or something
else entirely) can have name and value attributes that will become GET parameters
when a form is submitted.
o You may also find it helpful to look at Google’s own HTML to answer these
questions. In most browsers, you can control-click or right-click on a page and
choose “View Page Source” to view the page’s underlying HTML.
 To include an input field in a form that users cannot see or modify, you can use a “hidden”
input field. (https://www.w3schools.com/tags/att_input_type_hidden.asp)

How to submit:

You have to submit me atleast 03 (three) html+CSS code files. CSS may be included as internal
CSS style in the head section. The three required files are.
1. Index.htm (Google search page)
2. Img_search.html (Google Image Search Page)
3. Adv_search.html (Google Advanced Search Page)

Best of Luck!

Page 4 of 4

You might also like