Web

Development 1 (WEB1) - Course Information

Course description
In this module, the student will study the basic technologies that allow us to build a web application; you will study front-end as well as back-end technologies.
During this course students will build a web application from scratch applying a logical process.

Course learning goals

After completing this module, the student is able to:

• Explain what the main technologies used in web development are, and how they work together.
• Explain the difference between frontend and backend.
• Identify the tasks and components of the web application development processes.
• Apply frontend technologies; HTML, CSS and JavaScript at a basic level.
• Apply backend technologies; PHP, MySQL.
• Implement a basic dynamic web application using both frontend and backend tools and techniques.

Prerequisites:
The following courses have been successfully completed:

• FIS2 (GIT section)

• EDB1 & EDB2
• PCS1 & PCS2

Study material
Book Title: HTML & CSS design and build websites
Author: John Ducket
ISBN-11: 1118008189
This module uses internet resources as well. Such resources have been placed in the end section of this document (resources section).

1



Way of Working
The approach used in this course is Learning-by-doing. Therefore, this course is compound of 1 theory hour and 3 practical hours per week, at school. Besides, the
student will have to spend a minimum of 8 hours (self-study) in the matter per week. The theory lectures explain what a certain technology is, the purpose of it
and the essentials on how to use it. It is the student’s task to go deeper and study further in detail such technologies (see resources section) so that he/she is
better prepared to tackle the issues that might appear during the practical assignment.

Furthermore, the student is expected to have the required knowledge previously stated to guarantee a smooth flow of the course and avoid falling behind and or
into frustration.

The practical of this course is about building a web application which is described in the “practical section”. Since web development is mainly a collaborative
process you will work in groups of 2 people. The practical has checkpoints in which you must hand in deliverables according to deadlines (see course planning).

Course Planning for Students

week lecture Practical reader Deliverables to Tutor DEADLINE
week 1 Introduction WEB1, • Install all required tools (see Chapter 18 Del A: Week1 (2 days
The process of building a website, practical section) Chapter 1-9 • Design Document after practical)
HTML • Prepare your webhost. (Start here)
• Work on Design Document
• Structure your website using HTML
week 2 CSS • Structure your website using HTML Chapter 10-17 Del B: Week3 (2 days
• Style your website using CSS • All HTML pages of your after practical)
website.
• One CSS file containing
your websites’ style and
design.
week 3 JS: intro (Functions, Objects, • Run and Understand the JS scripts See w3 resources
prototype-based model) examples given, on your web
browser.
• Propose a couple of features to
enhance User Interaction (UI) in
your web application.

2



week lecture Practical reader Deliverables to Tutor DEADLINE
week 4 JS: DOM, events and AJAX • Provide input validation See w4 resources Del C: Week5 (2 days
• Show use of Ajax • Input validation after practical)
• Ajax functionality
week 5 PHP • Template System See w5 resources
• Project structure
week 6 PHP • Authentication and Authorization. See w6 resources Del D: Week7 (2 days
• Create a logical project after practical)
structure
• Show use of templating
system
• Implement
authentication and
authorization
week 7 Presentation

Examination and Grading

The final grade of WEB1 is based on the practical your group will hand in in week 7 via GITLAB. There are 4 checkpoints in which you hand in a deliverable; for each
deliverable (A, B, C, D) you will get Insufficient “I”, Sufficient “S”, or Good “G” which indicates your progress throughout the module. If your group misses a
deadline you get Insufficient for that deliverable. Calculating the final grade for this module occurs as described in the table below and the criteria underneath it.

There might be Go and No-Go sessions. This is determined by your teacher at any point in time during the course. A No-Go means your group cannot proceed any
further and must leave the course receiving 1 point as a final grade. If your group has more than one “Insufficient” deliverable, you receive a No-Go.

Description Related Deliverable(s) Weight on final grade

Design Document A 10%
Front End development AVG (B,C) 50%
Back End Development D 40%

3



Criterion:
If you hand in your web application complying with the following criterion you can expect a final grade around 7. Mind you, the teacher could assess each member
in the group individually in case group's dynamics and collaboration did not work within the group.

4



Criteria
Design document • The document is based on chapter 18 of the HTML & CSS book.
• The web application topic provides enough depth to allow all learning objectives to be achieved. The description
clear and well written English.
• The audience is realistic and not too narrow or broad.
• The sitemap covers the pages that are needed to satisfy the topic requirements. The sitemap covers enough pages to
allow all learning objectives to be achieved.
• There is a wireframe for each page of your website (and described in the sitemap). The pages clearly indicate the
elements' arrangement as well as initial content. Elements are correctly aligned and given the size proportionally to
their importance. There is a clear path for the eye to follow.
• The visual design or mock-up shows at minimum: colour scheme, font, layout, some sample content. There is at
least one page styled. The visual design's decisions are not randomly made but justified.
Front-end • HTML elements correctly used; for instance: semantic elements should not be used for formatting content.
• HTML elements well-structured using <div></div>.
• No HTML templates used or configured.
• Elements’ Id and Class attribute's names are comprehensive and meaningful.
• No inline style.
• All links work properly.
• Layout clearly defined; preferably use a liquid layout.
• External CSS file used.
• No “copy-paste" of styles.
• Web pages keep design harmony.
• Correct usage of CSS Selectors.
• No external frameworks/libraries used (like bootstrap, jQuery, etc.).
• No CSS templates used.
• Design is in accordance with Design document.
• JS script(s) is/are external files and loaded correctly.
• JS code reused/taken from the Internet must be well explained and credited.
• Form/input validation (JS validation instead of built-in HTML5 validation).
• At least one feature that demonstrates the use of AJAX.
• Concise comments in HTML files explaining the structure.
• Concise comments in CSS files explaining the design.
• Concise comments in JS file explaining the script.

5



Back-end • There is a clear and logical project’s directory and file structure.
• Meaningful variable names.
• Code is clean and well structured, preferable in an Object-Oriented way.
• Templating principle is used.
• PDO interface is used for dealing with Databases.
• Authentication is correctly implemented; for instance: the user is authenticated with session technique not
cookies.
• Authorization is correctly implemented; at least one page/feature should be only accessible to registered users.
• Concise comments explaining the Business Logic in the PHP files.

THE PRACTICAL (building a web application)

You will work in groups of 2 people. Each group will gradually build a web application submitting deliverables at checkpoints (see course planning for students
section).

Setting up environment
In order to build a website, you firstly must set up your development environment; install the specific tools described on the table below. Since you are building
the web application step by step some of the tools will be needed in later weeks but this is an appropriate moment to install it as you won’t have much time later
on.

Under the Installation Guides directory on SharePoint you find step by step guides on how to install and set up your environment. There are also guides with
possible solutions to problems or issues you might encounter.

You need your student email for getting a one-year license for the PhpStorm IDE.

Tool Purpose Source

HERA server account (Linux hosting) Fontys’ Webhost for its students https://apps.fhict.nl/selfservice/
Atom Text editor https://atom.io/

GIT Version control https://git-scm.com/

GitLab Web based Git repository to host and manage your code https://git.fhict.nl/
FileZilla Transferring your project's files to HERA server https://filezilla-project.org/download.php?type=client
PhpStorm IDE to develop the project https://www.jetbrains.com/student/
XAMPP Local PHP development environment https://www.apachefriends.org/index.html

NOTES:

• When setting up your HERA account, make sure you select a Linux hosting since you will work with PHP server scripting language.
• Create a new project on GitLab with the following name: W1_firstNameMember1_firstNameMember2
• After creation of your project on GitLab, you invite your teacher with master role so that your teacher has the right permissions to clone, review and
comment your code and download respective documentation.

7



Deliverable A: Design Document
After installation of the tooling needed you are ready to focus on the process and design document of your web application. This document is usually the contract
(what you promise) with the client (your teacher). But first brainstorm with your group mate about the topic of your web application.

The Design Document is entirely based on chapter 18 of the book HTML & CSS design and build websites, John Ducket. After reading and understanding the
concepts on this chapter, create a document and name it following this pattern: Contract_firstNameMember1_firstNameMember2. Remember, this is a web
application, therefore you should consider in the design document features such as registration, logging in, posting, etc.

Your design document must consist the following sections:

1. Web application topic
2. Target Audience
3. Sitemap
4. Wireframes
5. Visual Design
The Design document needs to be pushed to GitLab (your online git repository) before the deadline (see course planning).

Deliverable B: HTML and CSS
You create the HTML structure of all your web pages according to your Design Document.
You create the Style and layout of your web application. This is a central CSS file that is based upon your design document.

For the structure and style of your web application you have enough time to explore and experiment. If you decide to make modifications to your initial design,
then you should agree those changes with your teacher.

After you have tested your project locally you must do 2 things:

• Push your project to your online repository (GITLAB) before the deadline (see course planning).
• All the files must be uploaded to HERA server under a directory called public or public_html, use FileZilla for this purpose. FileZilla needs certain account
data to connect to HERA server, find these details on your HERA account (under FTP settings section) you created in the past. After successful connection,
upload your project in the appropriate directory. If you did this correctly then you will have a website that is accessible worldwide, you can send the link
(find it under account data of your Linux webhosting on self service portal) to your family and friends. This worldwide accessible website will be called
from now on the production version of your website.

8



Deliverable C: JavaScript
It is time now to create a better User interaction by programming some client-side form validation with the scripting language of the web "JavaScript". For this,
you must at least have a form (e.g. registration form) somewhere in your website; if you don't have it, agree with your teacher on where you could place one.

You must also show in your script the principle of AJAX being used. Thus, load in your website some relevant data held at server side without reloading the whole
page.

Form validation and AJAX are mandatory in your website, but you shouldn’t stop there; those are minimal requirements, if you want to reach a better grade think
of other features that can improve User Interaction in your website.

You should create a single JS script in which you write all your code to improve User interaction. So far you have dealt with html css and js files, As you can see
your website is growing and it needs to be maintainable, so create a logical structure for your files so it is easy to manage and easy to check by your teacher.

Once you have tested your JS script(s) locally, it is time to update your online repository (GITLAB) and your production version (Hera server), so go ahead, push and
publish your new version before the deadline (see course planning).

Deliverable D: PHP
We are now also dealing with back-end development, you are now transforming your website into a web application. You need, therefore, to setup a PHP local
development environment (a web server similar to Hera but running in your laptop) so that you keep your production version of your web application untouched
on HERA. All features and functionality of your web application should be implemented and test first locally; using XAMPP, WAMP or AMPPS and only then you
can push your files to HERA.

Setting up your PHP development Environment:
You have installed all necessary tools in week 1. Now do the following:
1. Set-up XAMPP and PhpStorm with Xdebug to make debugging of your PHP scripts possible (for specific details refer to this link or follow this visual tutorial)
2. Make a simple PHP sample file in which you can demonstrate that your environment is set-up correctly and you can place a breakpoint for debugging
purpose.
3. XAMPP also comes with a Database server, the DBMS used is MySql; create the tables needed for your web application and connect to this DBMS using
PDO interface.
As you can see, your project is escalating even more. In order to guarantee maintenance is crucial to have your files well organized. Create a logical file structure
for your project.

9



Templating is one great advantage you can take of PHP; some of its benefits are: reuse the same HTML, central point of change propagates through your entire
site. Create your own simple template system.

Your web application must allow visitors to register so they become members or users of your web application. Create the registration logic.
A member must be able to log-in, log-out every time she wishes. This is called authentication. Create the authentication logic.
Finally, some differences between members could be marked; for example: a member administrator can have access to all members page whereas a standard
member will never land to all members page simply because it is only allowed for admin members. This is called authorization. Create authorization logic in your
web application.

After you have tested your new features locally, you must push your project to the cloud (GITLAB), this will be your final commit on GITLAB therefore call it "final
commit". You must publish it on HERA server, as well. This will be your final deliverable.

10



RESOURCES:
Week 1: PROCESS & DESIGN, HTML
Topic Source

Process & Design of a website Chapter 18; HTML & CSS design and build websites, John Ducket

Installation of tools, setting up environment Click here; see Practical week 1.

HTML tutorials, examples, etc. http://www.w3schools.com/html/default.asp

World Wide Web Consortium (HTML standard) https://www.w3.org/standards/webdesign/htmlcss

Week 2: CSS
Topic Source

CSS tutorials, examples, etc. http://www.w3schools.com/css/default.asp

World Wide Web Consortium (CSS standard) https://www.w3.org/standards/webdesign/htmlcss

Week 3 & week 4: JavaScript

Topic Source

JS theory https://developer.mozilla.org/en-US/docs/Web/JavaScript

JS tutorials, examples, etc. http://www.w3schools.com/js/

11



Week 5: PHP
Topic Source

PHP official site http://php.net

PHP Arrays http://w3schools.com/php/php_ref_array.asp

PHP Superglobal variables http://www.w3schools.com/php/php_superglobals.asp

Week6: PHP
Topic Source

PHP Cookies http://php.net/manual/en/features.cookies.php

PHP Session http://php.net/manual/en/book.session.php

PHP PDO class http://php.net/manual/en/class.pdo.php

PHP PDOStatement class http://php.net/manual/en/class.pdostatement.php

PHP PDOException class http://php.net/manual/en/class.pdoexception.php

PHP File uploading http://php.net/manual/en/features.file-upload.php

PHP File system http://php.net/manual/en/book.filesystem.php

12