Building a Web per IR Course

The IR course by prof.Bast provides very nice go-through on building static and dynamic web portal.

create serversocket to listen to request from the client

//Server loop.while (true) { Socket client = server.accept(); system.out.println(“client connected from ” + client.getInetAddress());

then type telnet etna.informatik.privat 8888 on the other end to test out; if you type something like etna.informatick.privat:8888, it’s same as use telnet, on server end, it shows long string GET some_file/…, this string follows HTTP protocal.

if we type F12 to open the developer console in Chrome, we’ll see network, elements, console and sources.

So if enter somefile on the url, same as telnet communication to ask the server, we can see from the developer console window, network tab as

Zoom in to subtab on the right side:

There are other kind of request types, if the content is long, use POST instead of GET; many more headers other than 200, there is 404 not found, 403 forbidden, and I saw 204(forgot?)

From now on, use http web page to communicate, once the server received, it displays as below

So in the server end, the script needs to be edited to be as

Now the server will respond and return a mark up file, even it looks not quite there yet,

There are further work to do to pretty up the html visual. first we don’t want to how text/plain, so add below line to html format if the script to retrieve is html:

if (request.endsWith(".html")) {
contentType = "text/html";

Now it’s fixed to spit out a better-looking page:

Now let’s edit the html with css embedded and input field to allow searching function:

So it shows the search button but nothing is happening to allow actual searching:

We need “form”:

Now the front face is edited correct, go to the server script to make it really functioning, meaning to fetch the query:

Now we will make the web DYNAMIC. We’ll use the javascript to accomplish. Why JavaScript, because it can dynamically change the web content in response to user orders.

on the html file, two parts (red lines) were edited, we have script source to be search.js, so the java script/server script will also be edited accordingly

So in JS, there is this notion called DOM, document object model, so below html contains an id=”result”, JS, one writes “document.getElementbyId”result”).innerHTML = “42”;

note there is this asynchronous issue in JS, similar to Python it’s a line-to-line interpreter language, so need specifics like following:

Since raw JS is pretty cumbersome to write, there is jQuery library we should leverage to make life easier.

with jQuery, delete “function dosomething” as well as delete “onboard” part in html, instead, write below in the search.js file

jQuery makes the syntax simple, for example one can write jQuery(“#result”).html(“44”) to perform the exact same as document.getElementById(“result”).innerHTML = “42” , and further, just use dollar sign to replace jQuery prefix: $(“#result”).html(“44”)

To apply real dynamic web, we remove those placeholders in html