1. Networks concepts

Web development uses a network to link a software name Client to another software name Server. A common confusion is to speak about a dedicated computer as the Web Server or shorten as Server. The same shorten is to speak about Database as Database Server.

Between Client–Server software programs, there are a protocol which uses a unique IP address for each computer.

2. IP address

Each computer has at least one IP address the default IP address 127.0.0.1 also named localhost.

But on each network card as an Ethernet plug, a Wi-Fi card, a Bluetooth connection to a smartphone using as modem (also name: sharing connection).

Usually the terminal command ipconfig or ifconfig could show the list of IP Address.

If the computer is link via network or Wi-Fi to an internet Box, there are a local networks between the computer and the Box. For outside this local network (on Internet), the Internet Box provides a unique IP address and works as a mandatory for computers or smartphones link to the Internet Box.

3. Client

Web development uses a browser as classical client to display content from HTML, to apply a style to the content with CSS, to provide user interface with forms and advanced interactions with JavaScript.

Modern browsers provide tools for Web Development as IDEs.

Web developers usually work with Client and Server on the same computer with the IP address 127.0.0.1.

Other clients exist acting as a browser: Team application or a smartphone application are working as a browser with Web connection to a Server.

4. Server

Client Browsers communicate to a Server computer with the IP address of the computer which have a running Web Server software.

The connection should be a URL as protocol://IP Address:port number for example http://127.0.0.1:80/

Companies could buy a domain name from a registrar to provide a comprehensive name instead of IP address http://gitlab.mines-ales.fr/. The network provides a conversion from the domain name to the IP address (with DNS servers).

Usually a communication from Client Browser to a Web Server is named request or HTTP request. The Web Server sends back several HTTP responses as files with HTML, CSS, images, documents, video content, etc. using severals languages.

5. Port number

A software server program (as Web Server, Database, mail Server) with an Internet connection asks the computer to book a port number. Then a connection is open to the computer on a specific port to transfers data to the correct software.

A Web Server usually listen a specific port number into the computer. With a Web Server program for HTTP request, 80 is the default port, for HTTPS request, 443, for tomcat Web Server in development 8080.

With a MySQL Database Server, 3306 is the default port.

6. Asynchronous communication

The HTTP request sends from a Browser to Web Server could take a while. See Ajax later to display a trouble with the delay.

When the Web Server sends back contents, it could not know if the Client is still online without a new request from the Client

All requests are anonymous and independents by default (without using cookies and forms).

7. HTTP request

The HTTP request contains a lot of technical information send from the Client to the server and from the server to the Client.

The HTTP request sends a URL to the server to get content for example: http://127.0.0.1/cv/fr/cv-2020.pdf.

The Web Server sends back contents with HTTP request codes : usually code 200 everything is ok or 404 for missing content.

8. URL

The last slash of the URL indicates the root folder (aka DOCUMENT_ROOT) of the Web Server, a specific folder into the computer where contents into sub-folders will be sent.

Suppose a root folder as c:/WebServer/www/ and subs-folders c:/WebServer/www/CV/fr/ the correct URL to access a file cv-2020.pdf from the same computer will be http://127.0.0.1/CV/fr/cv-2020.pdf.

The Web Server default configuration is to list content if URL finish by slash as http://127.0.0.1/cv/fr/ if there are no file call index.html call by default in this case.

9. Languages

Web development use a set of several languages, each for a specific part of the process or the interaction between software. Web developers have to learn each usage of those languages.

Common Client side languages are :

HTML provides the structured content and basic interactions with user thrown forms.

CSS provides a way to apply a style a page layout to the HTML content.

JavaScript provides a way with interactions and dynamic the HTML content.

jQuery a JavaScript extension (or framework) is a simplification of JavaScript.

Commons Server side languages are:

Java / Python / PHP / ASP.Net / JavaScript server-side / C# languages provide a way to generate contents usually into HTML.

SQL provides a classical way to interact with databases

JSON provides a way to structure data to the Client with Ajax side and also to some other Database server or third-party software.

10. HTML

Web Server usually sent back content with a structure into the language HTML.

HTML language use opening and closing Tag, the global structure of an HTML page looks like with 2 parts head part (between <head></head>) and body part (between <body></body>)

<html>
  <head>
  </head>
  <body>
    Content visible
  </body>
</html>

The head part will include mainly CSS and JavaScript, few specific tags as <title></title>

The body part will include the visible content of the page displays into the Client browser render. To display the HTML part, right-click on the Client browser and choose « Show Source code » (or something close see IDEs)

11. Tag

A tag could be lonely as <img /> or also have several attributes as shows below by hyperlink tag <a></a> (href hyperlink attribute and target attribute to open into a new page)

<img 
 src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg" 
/>

Visit our Web site:
<a href="https://www.mines-ales.fr/" target="_blank" >IMT Mines Al&egrave;s</a>

Tags could be included together into the correct opening-closing way:

<a href="https://www.mines-ales.fr/" target="_blank" >
<img 
 src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg" 
/>
</a>

Shopping list:
<ul>
  <li> Paper </li>
  <li> Pen </li>
</ul>

12. CSS

A CSS rule/instruction could be applied to a tag. CSS is write into a <style></style> tag (place into header) or load from an external file with <link /> tag.

<head>
  <style> 
    a{
       color:red;
    }
  </style>

  <link href="http://www.mines-ales.fr/css/main.css" />

</head>

A Tag could have 2 attributes id and class use by CSS rules :

Office list:
<ul id="office">
  <li class="done"> Paper </li>
  <li> Pen </li>
</ul>

Market list: 
<ul id="market" class="urgent" >
  <li id="bread" class="done" > Bread </li>
  <li id="egg" class="done notfound" > Eggs </li>
</ul>

A collection of extensive selector could apply to identify a set or a unique tag ant then affect visual and styling effect (change background color, line through text, composition and space):

<style> 
#office{
  background-color: grey;
}
.done{
    text-decoration: line-through;
}
.urgent{
    background-color: red;
    padding:10px;
}
.notfound{
   margin-left:100px;
   color: green;
}
</style>

13. JavaScript

A programming language create to be trigger by events into the Client Browser. JavaScript is write into a <script></script> tag (place into header) or load from an external file with <script /> tag.

<head>
  <script> 
   function click(){
     var imgLogo = document.getElementById("imgLogo");
     imgLogo.src = "https://upload.wikimedia.org/wikipedia/fr/6/6d/Logo-IMT-Mines-Al%C3%A8s.jpg";
   }
  </script>

  <script src="http://www.imt.fr/javascript.js" />
</head>
<body>
   Click to see a different logo :
   <img 
      id="imgLogo"
      src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg" 
      onclick="click()"
     />
</body>

The onclick attribut of <img/> could trigger a JavaScript function. The function creates a variable imgLogo by finding an Html tag by its attribute id imgLogo. The modification of attribute src of <img/> asks the Client Browser to change the image.

The manipulation of the HTML from JavaScript follows the DOM structure of the HTML page.

The default usage of JavaScript is not really common. JavaScript’s frameworks like jQuery are more common.

14. Relative or Absolute URL

HTML page contains call by URL to image, CSS/Javascript file, hyperlink tag, as see before with this set of tag.

<head>
    <script src="http://www.mines-ales.fr/js/javascript.js" />
    <link href="http://www.mines-ales.fr/css/main.css" />
</head>
<body>
   <img src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg" />      
   <a href="https://www.mines-ales.fr/welcome/" target="_blank" >IMT Mines Al&egrave;s</a>

</body>

If this HTML page is loading from the Server with a URL like

http://www.mines-ales.fr/index.html

Is it very common to only use relative folder URLs to let Client Browser convert to absolute URL. Base folder will be in ours case from the top folder.

<head>
    <script src="js/javascript.js" />
    <link href="css/main.css" />
</head>
<body>
   <img src="themes/custom/boots/assets/images/logo.svg" />      
   <a href="welcome/" target="_blank" >IMT Mines Al&egrave;s</a>
</body>

Operators like ./ or .. or / could be use to create the correct convention from relative to URL to absolute URL. (./ is for same folder than initial HTML page, .. is for parent folder tan initial HTML page, / in first symbol is for top folder of Server).

15. Forms

A specific set of tags from HTML is dedicated to create forms to allow interaction with the user, as a login and password HTML page.

<body>
   <form method="get" action="http://127.0.0.1:8080/Controler">
      <input type="text" name="login" value="Please provide your login" />
      <input type="text" name="birthdate" value="Please provide your birth date" />
      <input type="password" name="pwd" />
      <input type="radio" name="interface" value="computer" />
      <input type="radio" name="interface" value="smartphone" />

      <input type="submit" name="action" value="Log me please" />
   </form>
</body>

The user could provide into 4 specifics fields of this form some information. When the user clicks the button « Log me please », all fields name and information provide will be sent to Server by the URL into attribute action.

About the field name interface, the value is specified by the tag and could be change by the user. The Client browser knows they are linked by their attribute name.

The attribute method value could be also post usually use with input field to send a file.

16. Java

Java could be use into a Web Server software call Tomcat Web Server (other Web Servers use Java but Tomcat is the reference) to create HTML content from a JSP Page or Servlet Page.

There are a short list of languages and Web Server as

Apache Web Server and Nginx Server could use C, PHP, Perl languages.

Django Web Server could use Python.

Internet Information Server could use C# and VB.Net

NodeJS could use JavaScript Server side.

All of them could create HTML content and receive information from forms.

Additional to Java, the Web developers will use Java software libraries to generate Unit tests or logging process systems and more.

17. JSP

A JSP page is a file creates with IDEs as Eclipse JEE to generate HTML page. Suppose the HTML page has to display the date of the day:

<%@page import="java.text.DateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<body> We are:
<%=java.text.DateFormat.getDateInstance( DateFormat.MEDIUM ).format(new java.util.Date())%>
</body>
</html>

The generation from Tomcat Web Server will create the HTML Page.

<html>
<body> We are: 
01/05/2025
</body>
</html>

The Web Developer will detect the pure HTML part and the Java part into the JSP page by using a specific non-HTML tag <% %>. The HTML generation is available into the Client Browser.

18. Servlet

A Servlet page is a file creates with IDEs as Eclipse JEE to generate an HTML page. Suppose the HTML page has to display the date of the day:

package model;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/date")
public class date extends HttpServlet {
   public date() {
       super();
   }

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 	response.getWriter().append("We are: ").append(java.text.DateFormat.getDateInstance( java.text.DateFormat.MEDIUM ).format(new java.util.Date()));
 }

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 	doGet(request, response);
 }
} 

The generation from Tomcat Web Server will create the HTML Page.

<html>
<body> We are: 
01/05/2025
</body>
</html>

But the Web Developer will not use the Servlet to generate HTML part because JSP Page are simplest to compare with HTML. The Servlet will receive information from forms. The MVC design pattern will be used to combine forms, JSP and Servlet Page.

19. IDEs

A Web Developer will use several software programs to create and tests Web applications.

Tomcat Web Server, JSP and Servlet Page will be use and create by using a specific IDE as Eclipse JEE.

An Eclipse JEE project will link Tomcat Web Server with a set JSP and Servlet Pages also CSS and JavaScript additional files, images and other documents as video, PDF files, etc.

The Client Browser as Chrome or Firefox will be use as an IDE to create, check and debug contents send by the Server mainly JavaScript, CSS and HTML. To activate the IDE part, usually the command CTRL+MAJ+I open the Web Developers Tools include into Chrome or Firefox.

The whole purpose is to give access to tools to debug and find errors easily into code.

20. Tomcat

Tomcat is a Web Server provides content from JSP, Servlet, JavaScript, CSS and HTML. Tomcat could receive several projects create by Eclipse JEE IDEs on the same computer or across several computers.

Tomcat convert JSP Page into Servlet Page compiles and deploy the project at a specific URL.

Tomcat is writing in Java and should be start with a JDK software not a JRE software program.

21. Database

A Database Server could be connected to Tomcat Web Server if a Java library is provide and if this library is compliant as JDBC protocol. The following example provides a demonstration to connect to an SQLite Database server.

 try {
  Class.forName("org.sqlite.JDBC");
  	connection = DriverManager.getConnection("jdbc:sqlite:c:/Developpement/todo.db");
 } catch (Exception e) {
 	System.err.println(e.getClass().getName() + ": " + e.getMessage());
 	System.exit(0);
 }
 System.out.println("Opened database successfully");

The same piece of code could be used to connect to MySQL or MariaDB or PostgreSQL Database server

If the Database Server is not started, the connection will fail. The connection could provide a login/password authentication mechanism to access the Database server.

22. SQL

SQL language is an historical and legacy language to manipulate data from a Database Server set of information store into a group of tables calls a Database.

In the following example, a command into SQL extracts only the name from a table of user order by lexicology.

Statement statement = connection.createStatement();

if (statement.execute("Select name FROM user order by name asc ")) {
  ResultSet resultSet = statement.getResultSet();
  while (resultSet.next()) {
	String name = resultSet.getString("name");
  }
}

Complex SQL command could be created to manage complex operations.

But the Web Developer will not use the Servlet to generate HTML part because JSP Page are simplest to compare with HTML. The Servlet will receive information from forms.

23. DOM

Into the Client Browser the combination of tags is consider by Web Developers as a Document Object Model with root element, parent, children and brothers elements.

CSS and jQuery use a set of symbol to describe links between tag. Suppose an HTML page as bellow:

<html>
<head>
    <script src="http://www.mines-ales.fr/js/javascript1.js" />
    <script src="http://www.mines-ales.fr/js/javascript2.js" />
</head>
<body>
  <ul id="office">
    <li class="done"><a href="#"> Command </a></li>
    <li> Ask </li>
    <li> Cancel </li>
  </ul>
  <a href="#"> Delete </a>
</body>
</html>

DOM stores <scripts> tags as brothers, <scripts> tags have on parent <head></head> tag.

The Web developers should know several symbol to select element depending on another. // is the symbol of comment and use as into a CSS page in this case.

// Full path on an element so specific not really use
html > body > ul#office

// Simpliest solution and ID should be unique
#office

// Only apply a setting to the direct children of body
body > a

// Apply of all children and sub-children de type a into body
body a 

// Brother of tag f class done, so <li> Ask </li> and <li> Cancel </li>
.done | li

// Only the last children of office so <li> Cancel </li>
#office:last-child

A complex set of additional symbol selectors exist but out of the field of this page.

But the Web Developer will not use the Servlet to generate HTML part because JSP Page are simplest to compare with HTML. The Servlet will receive information from forms.

24. Jquery

jQuery is a library write into JavaScript also call a framework providing a way to avoid a strong link between JavaScript and HTML DOM.

To link a click event onto a specific HTML tag, Jquery use a special function call $ to find HTML element without add attribute on tag.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script> 
   function basicClick(){
     var imgLogo = document.getElementById("imgLogo");
     imgLogo.src = "https://upload.wikimedia.org/wikipedia/fr/6/6d/Logo-IMT-Mines-Al%C3%A8s.jpg";
   }


$(document).ready(function(){
    $("img#imgLogo").click( basicClick );
}); 
  </script>


</head>
<body>
   Click to see a different logo :
   <img 
      id="imgLogo"
      src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg" 
     />
</body>
</html>

This version is not « very » Jquery because a Web Developers will replace the name of the function by a direct call as below.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script> 

$(document).ready(function(){

    $("img#imgLogo").click( function() {
      $( this ).src = "https://upload.wikimedia.org/wikipedia/fr/6/6d/Logo-IMT-Mines-Al%C3%A8s.jpg";
    }
   );

}); 
  </script>

</head>
<body>
   Click to see a different logo :
   <img 
      id="imgLogo"
      src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg" 
     />
</body>
</html>

jQuery knows which HTML tag is pressed by using again the function $ to find it.

25. Ajax

Ajax is a way to call the Server from JavaScript to send and receive information into an XML or a JSON format in the background of the HTML page.

jQuery way of using Ajax is simpler than pure JavaScript, the example will be in jQuery.

The Web Server will send an XML Page below

<now>01/12/2035</now>

Or JSON version

{ now:'01/12/2035' }

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script> 
   
$(document).ready(function(){
  $("#dateNow").click( 
    function (){     
      $.ajax({
        url: 'http://127.0.0.1/date.jsp',
        type: 'GET',
        dataType: 'xml',
        success : function(result){
           $("#dateNow").html( result.innerHtml );
        }
      });
   
    });

});
  </script>


</head>
<body>
   Click to show date:
   <p id="dateNow">
   </p>
</body>
</html>

This version with JSON is only different into the success function call and the dataType.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script> 
   
$(document).ready(function(){
  $("#dateNow").click( 
    function (){     
      $.ajax({
        url: 'http://127.0.0.1/date.jsp',
        type: 'GET',
        dataType: 'json',
        success : function(result){
           $("#dateNow").html( result.now);
        }
      });
   
    });

});
  </script>


</head>
<body>
   Click to show date:
   <p id="dateNow">
   </p>
</body>
</html>

jQuery knows which HTML tag is pressed by using again the function $ to find it.

26. JSON

The way to format data to exchange from JavaScript to with the Server was XML at first but JSON is short and could be convert directly into variables and uses as a DOM.

{
    "menu": {
        "id": "file",
        "value": "File",
        "popup": {
            "menuitem": [
                { "value": "New", "action": "CreateNewDoc" },
                { "value": "Open", "action": "OpenDoc" },
                { "value": "Close", "action": "CloseDoc" }
            ]
        }
    }
}

Or XML version

 <menu id="file" value="File">
   <popup>
     <menuitem value="New" action="CreateNewDoc"/>
     <menuitem value="Open" action="OpenDoc"/>
     <menuitem value="Close" action="CloseDoc"/>
   </popup>
 </menu>

jQuery and JavaScript know how to convert a JSON string into a variable to display into the Client IDEs console the content of the id attribute.

var obj = JSON.parse('{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ { "value": "New", "action": "CreateNewDoc" }, { "value": "Open", "action": "OpenDoc" }, { "value": "Close", "action": "CloseDoc" } ] } } ');

console.log( obj.menu.id );

27. Cookies

The Server could send several couple keys/values of information to the Client Browser. Each time a URL is send to the same Server, keys/values are send from the Client to the Server.

The Web Developer uses cookies to identify the user after a successful login/password page.

28. MVC

To convert the design pattern MVC with Web Development, Tomcat development process could be use.

A Servlet page will be in use as a Controller to receive information and manipulate Model and DAO parts of the project., then forward information to View part.

One JSP Page could be used to display one interface or View to simplify the process and the structure of the project.

Model part could be tested by Unit test program include into the Tomcat project.

29. DAO

Data Access Object is a design pattern to separate the loading of information from Database to Model POJO instance.

The main idea is to avoid loading information from the database into the Controller part but use Model part to manage information and then store them into the Database.

30. Unit test

Unit test a method is an advanced way to test the whole program by trying to avoid error and regressions. The web Developer could imagine a method and usually another Developer create a Unit Test method dedicated to test this method.

Suppose a method which add a String to the list only if this String not exist into but in this case, suppose an error of testing vale of indexOf method (-1 if element not exist instead of zero) :

List<String> listOfString = new  java.util.ArrayList<String>();

private void addOnlyNotExist(String element){
  if ( listOfString.indexOf( element  ) == 0 ) {
    listOfString.add( "test" );      
   }
}

Suppose a test method to check a double String not exist

private void testAddOnlyNotExist(){
  addOnlyNotExist( "test" );
  addOnlyNotExist( "test" );
  System.out.println( listOfString .size() );

}

A Unit test framework library as JUnit will be used to automatization of report of all Unit test method.

31. POJO

Plain Old Java Object is a way to speak of instances and classes which the purpose is only to store information. The following example will show a POJO of Person link to a POJO a Phone

class Person{
    private int ID;
    private String name;
    private int age;
    private List<Phone> phones = new ArrayList<Phone>();
     
}

class Phone{
    private int ID;
    private String phoneNumber;
    private String name; 
}

The 2 POJO missing getters and setters and some additional methods to work, but their purposes are really clear and simple to manage the Model part of MVC.

32. equals() & hashCode()

A POJO usually provides 2 specifics method call equals and hashCode.

Equals is well-know to compare String instance ( « test ».equals(« TEST ») ) but suppose two instances of POJO Person how to compare them ?

Suppose a case, it is a specification 2 instance of Person are the same if their property name are equals.

class Person{
    private int ID;
    private String name;
    private int age;
    private List<Phone> phones = new ArrayList<Phone>();

    public boolean equals(Object obj) {
      if (obj == null) return false;
      if( ! (obj instanceof Person) ) return false;
      Person other = (Person) obj;
      return this.name !=null ? this.name.equals(other.name) : this.name == other.name;
    }     
}

The hashCode method is less used, usually to create an order between instance of POJO

class Person{
    private int ID;
    private String name;
    private int age;
    private List<Phone> phones = new ArrayList<Phone>();
     
   public int hashCode() {
     return this.ID;
   }
}

With this solution, 2 instances of Person will be order by their ID into a HashMap or a HashSet. It could be more performant to group instance on another criteria like using a conversion of property name into int value as Eclipse generation offers below.

In this case a HashMap or a HashSet will be performant to order instance by their property name:

class Person{
    private int ID;
    private String name;
    private int age;
    private List<Phone> phones = new ArrayList<Phone>();
     
  public int hashCode()
  {
    final int prime = 31;
    int result = 1;
    result = prime * result + ((name == null) ? 0 : name.hashCode());
    return result;
  }
}

33. Debug

Eclipse JEE could start a Tomcat server with a project into Debug mode to place breakpoints into Java code, finding state of variables and chains of instructions into the Server side program .

Client Browser with Web Development Tools provides HTML contents access as DOM inspector, network information, JavaScript breakpoints, CSS editor, HTTP request content, log console, etc.

Challenging the process of Debug into the Asynchronous communication between Client and the Server is a goal of the Web Developer.

34. Form & Parameters

A Tomcat Servlet could receive a list of parameters from an HTML Form. Into a the Servlet, it is possible to display all the name of the parameters from the URL coming also from the Form

for(String parameterName : request.getParameterMap().keySet()) { 
   System.out.println( parameterName);
}

Suppose a Form with values not changed by the user as bellow:

<form method="get" action"./Controleur" />
  <input type="hidden" name="sessionId" value="123456" />
  <input type="text" name="todo_text" value="Bred" />
  <input type="checkbox" name="todo_actif" value="todo_actif_bred" checked />
  <input type="submit" name="action" value="add Todo" />
</form>

The URLs create will be :

http://127.0.0.1:8080/Project/Controleur?sessionId=123456&todo_text=Bred&todo_actif=todo_actif_bred&action=add+Todo

The Java code will display:

sessionId
todo_text
todo_actif
action