7. Professional Module: Web development in server environment

Code: 0613

Contents:

a) Selection of architectures and programming tools:

  • Programming models in client / server environments.
  • Mechanisms for executing code on a web server.
  • Dynamic generation of web pages.
  • Programming languages in server environment.
  • Integration with brand languages.
  • Associated Technologies
  • Application servers
  • Integration with web servers.
  • Programming tools
  • Publishers and compilers.

b) Insertion of code in web pages:

  • Embedded languages in HTML.
  • Associated technologies: PHP, ASP, JSP, Servlets, among others.
  • Servlet containers.
  • Obtaining the language of brands to show in the client.
  • Tags for code insertion.
  • Code blocks
  • Directives
  • Type of data. Conversions between data types.
  • Variables
  • Scope of use of the variables.

c) Programming based on brand languages with embedded code:

  • Decision making.
  • Loops
  • Client and server comments.
  • Types of composite data.
  • Arrays
  • Functions.
  • Parameter step Return of securities.
  • Recovery and use of information from the web client.
  • User interaction: forms.
  • Processing of the information entered in a form.

d) Development of web applications using embedded code:

  • State Maintenance
  • Sessions
  • Cookies.
  • Security: users, profiles, roles.
  • User Authentication
  • Programming tools
  • Testing and debugging.

e) Dynamic generation of web pages:

  • Mechanisms of separation of business logic.
  • Associated Technologies
  • Server Controls
  • Maintenance of the state of the controls.
  • Mechanisms of dynamic generation of the web interface.

f) Use of data access techniques:

  • Use of relational databases.
  • Establishment of connections.
  • Information retrieval and editing.
  • Use of result sets.
  • Visualization of information on web pages.
  • Mechanisms for editing information in a web client.
  • Execution of SQL statements.
  • Transactions
  • Use of other data sources.
  • Heterogeneous information stores.

g) Programming of web services:

  • Service-oriented programming architectures.
  • Mechanisms and protocols involved.
  • SOAP
  • Generation of a web service.
  • Service description.
  • Interface of a web service.
  • Use of a web service.

h) Dynamic generation of interactive web pages:

  • Processing on the server and on the client.
  • Bookstores and related technologies.
  • Dynamic generation of interactive pages.
  • Controls with verification of information in the client.
  • Remote obtaining of information.
  • Modification of the structure of the web page.

i) Development of hybrid web applications:

  • Reuse of code and information.
  • Application programming interfaces available.
  • Use of information from repositories.
  • Creation of custom repositories.
  • Incorporation of specific functionalities.

0613. WEB DEVELOPMENT IN SERVER ENVIRONMENT

 

1. INTRODUCTION TO THE DEVELOPMENT OF WEB APPLICATIONS

1.1. Programming models in client-server environments

1.2. Dynamic web page generation

1.3. Work environment installation

 

2. INTRODUCTION TO PHP LANGUAGE

2.1. PHP and HTML Embedded code

2.2. PHP syntax

2.3. Variables and data types

2.4. Comments

2.5 Control structures

2.6. Operators

2.7. Arrays

2.8. Functions and libraries

2.9. Exceptions and errors

2.10. Classes and objects

 

3. DEVELOPMENT OF WEB APPLICATIONS WITH PHP

3.1. Parameter Step

3.2. Forms

3.3. cookies

3.4. Sessions Security: users and roles

3.5. Sending email

3.6. Relational databases

3.7. Nonrelational databases

3.8. Files

3.9. Tests

3.10. Error Debugging

 

4. EXAMPLE OF COMPLETE APPLICATION IN PHP

4.1. Definition of the project

4.2. Analisys of requirements

4.3. Application design

4.4. Implementation

 

5. DYNAMIC WEB APPLICATIONS WITH AJAX

5.1. Separation of business logic

5.2. Technologies and associated libraries

5.3. Remote Obtaining Information

5.4. Server response

5.5. Modification of the structure of the web page

5.6. Event capture

5.7. Single page applications

 

6. APPLICATION OF ORDERS WITH AJAX

6.1. Application design

6.2. Website structure

6.3. Structure changes

6.4. On the server

6.5. Implementation

6.6. Server side

6.7. Customer side

 

7. OBJECT-RELATIONAL MAPPING (ORM)

7.1. Object-Relational Mapping

7.2. Doctrine

7.3. Associations

7.4. Basic Queries

7.5. Dql

7.6. Own repositories

 

8. DEVELOPMENT OF APPLICATIONS IN SYMFONY

8.1. MVC pattern

8.2. Symfony

8.3. Controllers

8.4. Routes

8.5. Templates

8.6. Services

8.7. Databases

8.8. Forms

8.9. Send mail

8.10. Security. Users and roles

 

9. APPLICATION OF ORDERS IN SYMFONY

9.1. Application design

9.2. Implementation

9.3. Templates

9.4. Entities

9.5. Controllers

9.6. Security

 

10. WEB SERVICES AND HYBRID APPLICATIONS

10.1. Service-oriented programming architectures

10.2. Protocols and languages involved. SOAP

10.3 PHP libraries for web services

10.4 Hybrid applications

 

 

Professor 1 (80%) de la nota:

  • Exàmen: 60%          
  • Pràctiques obligatòries: 40%
  • Actitud, assistència i feina a classe: permet d'arrodonir la nota final a l'alça (+1 punt) o a la baixa (-1 punt)
  • Els treballs entregats fora de plaç, puntuen com a màxim amb un 5.

Professor 2 (20% de la nota).

 

View the tutorials about HTML & CSS.

Generate 4 HTML files connected among them and linked to 1 CSS file. Publish them:

  • locally in your localhost
  • remotely in a real server

Clean code required. Do not write unneeded code.

You can improve your mark by doing additional pages.

Projects: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20

View the tutorials about PHP.

Generate the PHP pages specified in the tutorial. Publish them:

  • locally in your localhost
  • remotely in a real server

Clean code required. Do not write unneeded code.

Good practices in organization of directories and files is crucial as a preparation to develop a real and personal project.

You can improve your mark by doing additional pages.

 

Customer requirements

Design a web page for a library, with the following functionality:

Nice appearance with personal HTML & CSS (frameworks such as bootstrap or materialize also accepted).

HTML forms to enter data.

SQL database to store data.

PHP files to capture information from the HTML forms and connect to the SQL database

Online users with the following capabilities:

  • librarian: access to books (search, insert, update or delete), members (search, insert, update or delete), reservations (search, insert, update or delete). 
  • member: books (search), reservations (insert).
  • guest: books (search), members (insert=autoregistration).

Automatic calculation required: when returning a book x days late, you should not be allowed to borrow a new book before x days.

Online manuals:

  • technical manual, so another programmer can learn & maintain this program.
  • user manual, so librarians, members & guests know how to navigate through & use the web page.
  • installation manual, so a junior programmer could deploy a new library based on this software. Should include script for installation of database.

 

PHP Project - bronze

Ugly appearance, no styling

All HTML forms to enter data

All PHP files to capture information from the HTML forms and connect to the SQL database

Reservations with manual date introduction.

index_guest.php, index_member.php, index_librarian.php to give each user the appropriate capabilities

Action buttons can all be on the same page.

 

PHP Project - silver

Basic styling with personal CSS or CSS libraries (bootstrap or materialize)

HTML & PHP code injection protection

Reservations with automatic date calculation (initial date, final date, x days penalty for returning books x days late)

Login validation form and opened sessions for users, to give them the appropriate capabilities.

Action buttons can be distributed on different pages.

 

PHP Project - Gold

Fine styling with personal CSS or CSS libraries (bootstrap or materialize)

Incorporate ebooks to the library.

Include images of the book covers.

Include images for book_types (paper, ebook).

Possibility of downloading ebooks with a maximum of 10 ebooks per user.

Possibility of borrowing a maximum of 3 books on paper per member.

Possibility of uploading one or multiple files by the librarian, through a form, to a chosen directory.

Action buttons distributed in a logical way (in the right context).

Autofill capabilities for update forms, so the user only has to modify the desired fields.

New functionalities unexpected by the customer.

Improved UI & UX (User experience)

   

Functionalities to explain in class:

file organization: naming files

file calling: include & require

header & footer

locations at a shelf level -> Miguel R

Offering available locations when inserting a new book

Manipulating dates (add, substract, datetime vs date) -> Gary

UTF codes, problems with letter ñ and accents when inserting information through a form -> Nacho

Sessions: example

Cookies: example

Uploading and insert images associated to books -> Abdel

book details with integrated update & delete buttons

Inserting buttons in a selection of books

Automatic construction of HTML forms -> Cipri

 

Customer requirements

Improve the library software you developed in the 1st term, adding the following features:

Possibility of selling books.

Add a shopping cart with the following functionality:

  • Add products from the online shop
  • Modify the product quantity within the cart
  • Make the product disappear from the cart if quantity is 0, or include button/icon to delete it.
  • Include a button or similar to process the order.

Create a new SQL table to track your orders.

  • Assign a the same unique order number to all products in the shopping cart when the order is processed.
  • Include a date and time for each order
  • Allow every customer to see his own orders. 

Add the necesary tables to the SQL database and modify the existing ones if necessary.

Add new HTML forms if necessary.

Add PHP files to capture information from the HTML forms and connect to the SQL database

Online users with the following capabilities:

  • librarian: access to books (select, insert, update, delete and add to the cart), members (search, insert, update or delete), reservations (search, insert, update or delete), orders (select, insert, update or delete)
  • member: books (select and add to the cart), reservations (insert), orders (insert).
  • guest: books (select and add to the cart), members (insert=autoregistration).

Online manuals:

  • technical manual, so another programmer can learn & maintain this program.
  • user manual, so librarians, members & guests know how to navigate through & use the web page.
  • installation manual, so a junior programmer could deploy a new library based on this software. Should include script for installation of database.

 

AJAX Project - Bronze

  • Put a clock on the main web page with the server time, updating it every second. Create the files "showTime.php" (to generate the clock data) and "showTime.js" (to present the clock data on screen). Integrate them into the "index.php" main page, under the <section id="clock">Clock goes here<section>.
  • Implement a shopping cart with the described functionality.
  • Implement a suggestion field for searching books by title or by author.
  • Update the technical manual, the user manual and the installation manual to incorporate the new functionalities.

 

AJAX Project - Silver

To avoid losing a potential customer, all the information contained within the shopping cart must be temporarily stored until the user finally processes the order, something that might happen on a different day. As an exercise, develop 4 different versions of the shopping cart storing its content with EACH of the following options:

  • The PHP global variable $_SESSION
  • The PHP global variable $_COOKIE
  • The local storage in the browser
  • A table in the SQL database

A practical application of this approach is to allow guests to add items to the shopping cart (storing items with $_COOKIE or LocalStorage). Then, when they log in, we can move those items into the $_SESSION variable or SQL Database.

 

AJAX Project - Gold

  • Guests can start adding items to the shopping cart before logging in with user/pwd (or autoregistration). Once logged in, they can process the order.
  • Every time the shopping cart is shown, prices in the shopping cart are refreshed from the original SQL tables (normally 'books') to make sure that the order is processed with the actual book price.
  • Implement the AJAX technique using the fetch API (async & wait).
  • Install GIT (with commander, integrated in Visual Studio Code, or as you prefer) and create at least three commits during your software development (bronze, silver, gold).
  • Write a document explaining the good and bad practices within your code, suggesting improvements. Imagine you are giving advice to yourself on how to develop the software of a similar project in the future.

 

Functionalities to explain in class:

  • Recursivity functions, part 1   by Marc M.
  • Quantum physics, quantum computing,  by Marc M.
  • PHP libraries (pagination)   by Marc L.
  • Social networks   by Stiven