CS53 : Clients and servers


A complex and totally open-ended introduction to the world of the client / server model. Yikes!

We are learning ...
  • How to implement a simple client / server system
  • About the structure of webpages and how to create simple webpages
  • Some practical examples of the applications of the client / server model
So that we can ...
  • Create simple HTML, CSS and Javascript pages
    - Understand their structure
  • Search engine indexing
  • Describe the concept of clients and servers and set up some simple servers
    - HTTP server
    - Websockets server
    - Database server
  • Create simple serverside scripts (PHP)
    - Assess the benefits / drawbacks of client side and server side scripting
  • Access content in databases using serverside scripts
    - CRUD (Create / Retrieve / Update / Delete)
    - REST enables CRUD to be mapped to database functions
  • Use AJAX to add interactivity to webpages
  • Use JSON and XML
    - Describe the differences between them
  • Use the Websocket protocol to implement simple client server systems

Before you start this section, you need ...



Activity 1 HTML, CSS and Javascript 


There is absolutely no way on this, or any other, Earth that I could teach you everything there is to know about website design and creation. No point. There are plenty of resources out there that would do a much better job than me. I'll point you in the direction of three to get you started ...

Task 1.1
Learn stuff!
  • If you are lucky enough to have a Grok Learning account, crack on with the Introduction to HTML/CSS Course. 
  • Here is an interesting resource from the General Assembly called Dash!
  • Learn about all sorts of language including HTML, CSS and Javascript with a free account at Sololearn. There's apps for your phone as well!
  • Finally, get down and funky with the free courses at freeCodeCamp. You do have to register for a free account and navigate through the weird and wonderful community adverts but focus on the HTML, CSS and Javascript courses and don't pay too much attention to the suggested time allocations!

Your challenge is to create an interactive, database driven website for a hardware store which sells a variety of different hardware items like screws, nails, wood and tools.


OUTCOME : Hopefully, a great, interactive website!




Activity 2 Search engines

Page Rank Algorithm

Activity 3 Clients and Servers

Computer networks are used to facilitate resource sharing and communication. There are a wide range of services that a client host can request either locally or across a network, including ...
  • access to a shared printer, 
  • delivery of web sites (whether secure or not),
  • provision of email, 
  • remote software applications (software as a service),
  • file storage, 
  • databases ...

Generally, servers are used where the client is lacking resources of it's own or when it is more efficient or economically viable to share resources between many clients. In the olden days, the drive for the development of network infrastructure was driven by the need to share central computing power (starting in 1964 with the Octopus Network at Lawrence Livermore National Laboratory, one of the biggest and most influential ones).


Application Programming Interface

What is an API? (3:24)

Task Title

[Instructions]

OUTCOME : [Outcomes of the task]

https://www.w3schools.com/graphics/google_maps_intro.asp

Activity 4 Websockets

The websocket specification defines an application programming interface (API) establishing "socket" connections between a web browser and a server. In plain terms: There is a persistent connection between a client and the server and both parties can start sending data at any time. The alternative, HTTP and AJAX, only holds open the connection temporarily whereas websockets are full duplex connections - the client and the server can communicate simultaneously. Most online multiplayer games are using websockets these days.


Task Demonstrations

There is a steep learning curve involved in implementing a websocket application to allow a client to communicate in realtime with a server. For now, be content with some demos ...
The simplest servers run using socket.io on the node.js library. There is a considerable amount of work involved in developing client / server models using this software - you will have to learn HTML / CSS and Javascript before you can even begin.

[ARE YOU READY FOR THE CHALLENGE]
Maybe for an A Level Project?

OUTCOME : Awareness of the applications of websockets.

CRUD and REST Protocols

When retrieving data from a database using an API, there are four main functions that can be used ...
  • Create (INSERT)
  • Retrieve (SELECT)
  • Update (UPDATE)
  • Delete (DELETE)
More often than not, developers use web technology to access data from databases. REST Stands for Representational State Transfer and is a practical methodology which allows the use of the HTTP protocol to carry out the four main CRUD operations.


JSON and XML

Data is returned to the application in either JSON (Javascript Object Notation) or XML (eXtensible Markup Language).

{"pupils":
  [
    {"forename":"Tony","surname":"Jones"},
    {"forename":"Alan","surname":"Taylor"},
    {"forename":"Charlie","surname":"Green"}
  ]
}
Simplified JSON File Format

<pupils>
  <pupil>
    <forename>Tony</forename>
    <surname>Jones</surname>
  </pupil>
  <pupil>
    <forename>Alan</forename>
    <surname>Taylor</surname>
  </pupil>
  <pupil>
    <forename>Charlie</forename>
    <surname>Green</surname>
  </pupil>
</pupils>
Simplified XML File Format


JSONXML
ReadabilityEasy to read because it's based on the definition of object and valueMore difficult to read due to structural tags
BulkLess bulky codeMore bulky code
Parsing speedFast since already defined as a dictionaryData must be extracted from tags programatically
Development timeSimilar since already based on common dictionary formatSimilar since based on markup language

[Need to relook at this table]

Task Title

[Instructions]

OUTCOME : [Outcomes of the task]


Activity Title


Task Title

[Instructions]

OUTCOME : [Outcomes of the task]

Activity Title

Task Title

[Instructions]

OUTCOME : [Outcomes of the task]


Activity Title

Task Title

[Instructions]

OUTCOME : [Outcomes of the task]


Activity Title

Task Title

[Instructions]

OUTCOME : [Outcomes of the task]



Extension Activities 

How about these?
  • Watch this ancient video about the first real computer network, the Octopus Network.

    LLNL Octopus network (18:26)





What's next?

Before you hand your book in for checking, make sure you have completed all the work required and that your book is tidy and organised. Your book will be checked to make sure it is complete and you will be given a spicy grade for effort.

END OF TOPIC ASSESSMENT