Final project web React – click here to download!
Project Assignment React
react-assignment
Category: Final project
Project Assignment – AngularJS
angular-assignment
11 DEC 2019
web-project
Web project solution
We discussed the three pages of the web project:
- Landing page: will present landing flights. once the page is loaded an AJAX call will be executed to the server in order to fetch the flights which landed in the past 4 hours and about to land in the next 12 hours
- Departure page: will present the flights about to departure in the next 12 hours. once the page is loaded an AJAX call will be executed to the server in oreder to fetch the flights
- Search page: will provide a page where the user can search for flights. after the user fills up the searching fields and clicks “Search” an AJAX call will be executed in order to fetch the desired flights
After the AJAX call result has been resolved, we will iterate over the response array and add each flight result into the display table
Server-side: in order to support the AJAX call we need to add a web API endpoint for the landing-flights, departure-flights and the flights search. we can add those methods into the Anonymous facade (+api-Controller) or create a new facade, i.e. LandDepartueFacade (+api-controller) which will expose the requested functionality. the facade will call an ADO method which will execute an SQL query into the data-base in order to fetch the data. the SQL query should include all of the search parameters (i.e. landing time, searching filters etc.) instead of fetching the entire data and filtering out the results using LINQ
Javascript Implementation recommendations:
- Create a Flight class ( flights.js )
- Create a Flight instance for each result item of the AJAX response
- Calculate the flight status in the Flight ctor
- Bonus feature: present only 30 flights in each table and add navigation buttons
Links:
20 NOV 2019
angularjs more-js
AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications (SPA). It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment.
directives: ng-app, ng-init, ng-if, ng-show, ng-bind, {{ }}
JavaScript – more ES6 features
Final project : Client-side
More topics covered:
- downloading angular
- page rendering
- angularjs loop
- console error – dev tools
Links:
recommended book
25 SEP 2019
token-based-authentication IHttpActionResult
The Token-Based Authentication works as Follows:
- A user enters the name and password into the client (client means the browser or mobile devices etc).
- The client then sends these credentials (i.e. username and password) to the Authorization Server.
- Then the Authorization Server authenticates the client credentials (i.e. username and password) and then it generates and returns an access token. This Access Token contains enough information to identify a user and also contains the token expiry time
- The client application then includes the Access Token in the Authorization header of the HTTP request to access the restricted resources from the Resource Server until the token is expired… full article
Single Sign On (SSO): characteristic of an authentication mechanism that relates to the user’s identity being used to provide access across multiple Service Providers.
Federation: common standards and protocols to manage and map user identities between Identity Providers across organizations (and security domains) via trust relationships (usually established via digital signatures, encryption, and PKI)… full article
The IHttpActionResult interface was introduced in Web API 2. Essentially, it defines an HttpResponseMessage factory. Some advantages of using the IHttpActionResult interface: (1) Simplifies unit testing your controllers (2) Moves common logic for creating HTTP responses into separate classes (3) Makes the intent of the controller action clearer, by hiding the low-level details of constructing the response. IHttpActionResult contains a single method, ExecuteAsync, which asynchronously creates an HttpResponseMessage instance… full article
ResponseType attribute is helpful for autogenerating documentation in tools like Swagger / Swashbuckle
CreatedAtRoute method is intended to return a URI to the newly created resource when you invoke a POST method to store some new object. So if you POST an order item for instance, you might return a route like ‘api/order/11’ (11 being the id of the new order)
ModelState.IsValid will basically tell you if there is any issues with your data posted to the server, based on the data annotations added to the properties of your model. If, for instance, you have a [Required(ErrorMessage = “Please fill”)], and that property is empty when you post your form to the server, ModelState will be invalid. The ModelBinder also checks some basic stuff for you. If, for instance, you have a BirthDate datepicker, and the property that this picker is binding to, is not a nullable DateTime type, your ModelState will also be invalid if you have left the date empty.
Final project Part III:
More topics covered:
- [ Authorize ]
- WebApi users Table
- Password requirements modification
Links:
07 AUG 2019
multiple-windows custom-control depe-property idata-error
Multiple-windows: you can open multiple interactive windows in XAML using the show method. or open a new window while making other windows inactive using the showdialog method
User controls represented by the UserControl class, is the concept of grouping markup and code into a reusable container, so that the same interface, with the same functionality, can be used in several different places and even across several applications. A user control acts much like a WPF Window – an area where you can place other controls, and then a Code-behind file where you can interact with these controls. The file that contains the user control also ends with .xaml, and the Code-behind ends with .xaml.cs – just like a Window
IDataErrorInfo is an interface defined in System.ComponentModel namespace. The contract required implementing indexer and a string property named Error. it allows you to execute a validation on a control (i.e. validate the text value of a TextBox). when the validation fails- the control will have an invalid color (i.e. red). it is also possible to trigger an event which will modify the UI (in order to supply extra details for the user) in case of validation error, for example a tooltip message error like- “password must be at least 8 characters”
Custom dependency property: dependency properties are properties that are registered with the WPF property system by calling the Register method (or RegisterReadOnly), and that are backed by a DependencyProperty identifier field. Dependency properties can be used only by DependencyObject types( which is the majority of classes in WPF). you can create your own dependency property in order to add extra data to the control (or user control) and simplify the trigger events (which uses dependency properties)for ui modifications, such as styling
Final project Part II:
DB Generator – project part 2!
More topics covered:
- Multiple window – close current window
- User control – pass parameters
- User control – flip between controls
- Custom dependency property – initial value
- Validation error – trigger event
Links:
12 JUN 2019
flight-center marker-interface facade
We talked about the Flight Center Project LTD
More topics covered:
- Marker interface (empty interface)
- Facade design pattern
- Class Library (.NET Framework) project type
- Adding reference to another project
Links:
- Class code: HW solution Singleton
- Class code: HW solution AsyncPrint
- Class code: HW solution AsyncPrint etgar
- Marker interface – Wikipedia
- Facade design pattern – GOF
- Home Work: start the project. create the DB tables. Create the POCO. Add GetHashCode, ==, !=, Equals for each POCO. Start creating the basic DAOs
- Flight Center Project
.NET Experts 