Lab 2: Front end (HTML, CSS & JavaScript)

The degree of success for a website naturally lies in its ability to deliver expected results; the page should not take too long to load or crash in the middle of a command from the user. But who would trust a website whose design looks like it is from the 90s? Design is also an important aspect of web development and in this lab we will focus on design and user interface.

In this lab we will create a so-called Single Page Application where all data is fetched asynchronously from your API after the page has loaded. This means that your application should never reload (as long as the user does not click refresh or similar).

But before we begin we first need to understand the basics of how a website is structured. A web client consists of three parts:

HTML - Read more
This technology provides the basic structure for websites, which is then extended and modified by other technologies such as CSS and JavaScript.
CSS - Read more
CSS is used to create the desired appearance, presentation and formatting of the objects on a website.
Javascript - Read more
JavaScript is used when functionality and control of behaviors are to be defined.

There are also libraries that contain many ready-made HTML/CSS components such as Bootstrap which we will use in this lab.

Preparatory questions

Answer the following questions and write down your answers before the demonstration:

Which technology or technologies (HTML/CSS/Javascript) is used for each of the following?

  1. Setting a background color on an element.

  2. Creating a link element.

  3. Incrementing a number on the page when the user clicks a button.

  4. Creating a box that is 200x85 pixels and has a red border.

Part 1: Page structure

Start by following Starting a new lab.

To start building the client application you should now create some empty files in the client folder:

  1. Create the following files in the /client folder:

    • client.html

    • client.css

    • client.js

The above files are classified in a web context as static, i.e. the web server should not do anything with these files other than ensure they are available to the user. To configure Flask to serve these static files you need to do the following:

2. Lägg till argumenten static_folder='../client', static_url_path='/' till Flask-konstruktorn. Detta innebär att Flask kommer att servera statiska filer från mappen ../client på URLen “/” (d.v.s. exempelvis http://localhost:5000/).

3. Skapa en route för “/” som serverar filen client.html enligt följande:

@app.route("/")
def client():
  return app.send_static_file("client.html")

Part 2: Dependencies

Since you will be using Bootstrap the browser needs to have access to the Bootstrap source code and its dependencies. This is done by adding a link line to our client.html file.

  1. Create the content of client.html and include dependencies according to this page.

Note

The browser reads HTML code from top to bottom, so the order of the code matters greatly. If you have placed all links in the same order as in the Bootstrap link above, everything should work correctly.

Part 3: Layout

Now it is time to start using Bootstrap and create a nice layout for our website.

Bootstrap makes it easier to develop websites for several different screen sizes simultaneously. Always test different sizes of the browser window to see that the layout works for all variants (for example phone, tablet and desktop size).

  1. Lägg, i er HTML-kod, till en Navbar med en logotyp (bild eller text) och minst menyalternativen “Hem” och “Kontakt”.

Note

Navigation functionality does not need to be implemented yet.

  1. Lägg till ett div-element med klassen “container” enligt denna sida. Denna kommer senare att innehålla allt synligt innehåll förutom er navbar. Resultatet kan illustreras så här:

_images/lab2-3-2.png

där “container” är det element som innehåller sidspecifikt innehåll.

  1. Add a welcoming title (h element) and an optional paragraph of nice text in the above div tag. When you are done a heading should be visible on the page with a smaller body text below the heading.

Part 4: CSS

Bootstrap already has many styles defined and available to use. Developers often want to control how components and layout look at a more detailed level themselves. For this we use CSS.

Med hjälp av CSS är det möjligt att “välja” HTML-element och applicera olika stilattribut på dem. Det enklaste sättet att “välja” ett eller flera element är via dess elementtyp, id eller klass. Följande figur visar ett exempelelements typ, id samt klass.

_images/lab2-4-0.png

Note

id should be unique (maximum one element per HTML document) while multiple elements can have the same type and/or class(es).

Three examples of how to select different elements using CSS. These and a bunch of other ways to select elements are called Selectors.
p {
   /* Stilar för element av typen "p" */
}

#welcome-paragraph {
   /* Stilar för element med id="welcome-paragraph" */
}

.extra-big {
   /* Stilar för element med class="extra-big" */
}

  1. Add the following link tag so that the browser loads your CSS file. Preferably directly below all other CSS imports in the head element:

    <link rel="stylesheet" href="client.css">

  2. Below your recently created body text and heading you should now add a neatly formatted list of opening hours. You can decide the opening hours yourselves but the list should be well formatted using CSS and placed naturally on the page, i.e. with reasonable margins from the edges of the website.

Tip

How does a list of opening hours look on other websites?

Part 5: Views

Your front end application should at this stage have a menu (navbar), a welcome page and some CSS applied.

We will soon go through how JavaScript can be used to show different views to the user, but to be able to do this you first need to place the content for the welcome page in some type of container and hide it from the user. There are of course many ways to do this, but a simple way is to wrap a script tag around the content that forms a view. For example in this way:

<script id="view-home" type="text/html">
  <h3>Välkommen!</h3>
  Innehåll för välkomstsida
</script>

We can call such a block a view.

  1. Flytta innehållet för välkomstsidan till en egen behållare (utanför den div som har klassen “container”, som ska lämnas tom) och se till att den inte visas. Ni bör nu se en tom sida, bortsett från er navbar. För att visa välkomstinnehållet behöver ni använda lite Javascript som introduceras i Part 6: Javascript.

Part 6: Javascript

JavaScript is, as you know, used to manipulate elements and content.

When writing JavaScript the browser’s developer tools can be very helpful, for example for debugging and inspecting your code. The function console.log() for example prints data to the developer tools console. Read more about the developer tools in Firefox here.

  1. Include your JavaScript file (client.js) in the HTML document.

  2. It is not certain that all content in the HTML document has finished loading when the browser reaches your file. Therefore a good starting point is to use the following (doStuff is only an example to illustrate the syntax for a function and should not be used as a name):

client.js
function doStuff() {
   // ...
}

function ready(fn) {
   if (document.readyState !== 'loading') {
      fn();
   } else {
      document.addEventListener('DOMContentLoaded', fn);
   }
}
ready(function () {doStuff();}); // Kör doStuff 1 gång när sidan laddats

  1. Add the line alert("Page loaded"); inside the function that is passed to ready() (i.e. replace doStuff(); in the example above). This makes it easier to detect if you accidentally cause the page to reload.

  2. To display your welcome view again you should use JavaScript to set the content of your container to the content of your script element that you created in Part 5: Views.

Tip

To read or set the content of an element Element.innerHTML can be used as follows:

document.getElementById("current-view").innerHTML = '...'

The above can advantageously be placed in the function that is passed to ready().

  1. Now create another view for your contact page. It should contain:

  • Contact details for yourselves, a fictional person or a fictional company (name, email, phone number, address) presented in a nice way.

  • A reasonably formatted contact form containing at least the fields name, email and message. There should also be a button to submit the form, but you do not need to implement any additional functionality yet. Use the Bootstrap documentation as help when building the form.

Tip

To see how your view looks while you are building it, change it so that the contact view is displayed at page load instead of the welcome view. We will add navigation functionality very soon.

  1. Now it is time to implement navigation! When the user clicks on the menu items, make sure that the respective view is displayed in the container.

Tip

To react to a click the method addEventListener() can be used, for example in this way:

document.getElementById("...").addEventListener('click', function (e) {
   e.preventDefault();

   // Kod som ska köras vid ett click-event
   // ..
});

e.preventDefault(); can be used in the above manner to prevent the browser from handling events in its default way. For example the method can be used to prevent a link from loading the page the link points to when the user clicks on it. Read more. This can also be achieved by simply returning false from the function.

Part 7: Handling data

At this stage you should have a good understanding of how to use JavaScript to react to events, retrieve data from elements and manipulate elements. You will now use your knowledge for some more advanced data handling with JavaScript.

Contact form
First and foremost we want to be able to do something with the contact form:

  1. När användaren klickar på “Skicka”-knappen ska ni hämta ut värdet ur varje fält (namn, e-post, meddelande) och presentera för användaren. Presentationen kan bestå av en simpel alert() eller liknande, det viktiga är att all data visas. I labb 3 kommer ni få skicka data till er server istället för att visa den för användaren.

Car list
I nästa laboration ska ni få koppla ihop er front end med er back end. I denna laboration fokuserar vi på front end-applikationen och därför kommer ni få en så kallad server stub. Det är ett antal Javascript-metoder som “simulerar” en back end.

  1. Download server-stub.js and place the file in your client folder.

  2. Look through the documentation for our server stub.

  3. Include server-stub.js in your HTML document. Note that it must be included above your own JavaScript files.

  4. Skapa en till ytterligare vy och tillhörande menyalternativ “Bilar”.

  5. When the new view is shown, present using HTML, CSS and JavaScript a list of all cars from serverStub. You can design it however you like but the following information should be shown for each car:

    • Make

    • Model

    • Any customer’s name

    • A button/link/icon for editing and one for deleting the car

    Tip

    Read about available methods for adding elements here.

    Tip

    Look at Bootstrap’s documentation for cards (Card) and tables if you want to use Bootstrap for design.

  6. Make it possible for the user to refresh the entire list by clicking on for example a button. You should then fetch the cars from serverStub and make sure that information is displayed.

  7. Implementera borttagning av bilar. Tänk på att bilen ska tas bort både från sidan och “servern” (se serverStub.deleteCar()). D.v.s. att bilen ska försvinna från listan och ifall användaren uppdaterar billistan ska den borttagna bilen inte komma tillbaka.

    Tip

    To include data from the element that is clicked on you can add a data attribute to the element (the button/link/icon) in the following way:

    <a href="#" data-id="[ID FRÅN SERVER]" class="delete-car">...</a>

    var deleteCar = document.getElementById("delete-car");
deleteCar.addEventListener('click', function() {
   var car_id = deleteCar.dataset.id;
});

    In the example above an a element is used, but the same principle can of course be applied to other types.

    Tip

    Since you are probably creating the delete button after your other JavaScript has run you need to listen to more general events (document.addEventListener), or alternatively make sure you start listening for click events for example after each element has been created.

  8. Create an edit form for cars that is shown when the user clicks on the edit option for a specific car. This form should be shown in a Modal and contain fields for every attribute of a car.

When the user submits the form the changes should be visible in the car list automatically.

The fields in the form should be automatically pre-filled with the existing data for the car in question. Read more about how to set content in modals dynamically in Bootstrap’s documentation.

  1. Also make it possible to add cars. Preferably by adding a button that can open a modal similar to the one for editing. When a car is added it should become visible in the list automatically.

Demonstration

See Demonstration.