Module 6: Additional Scripting Features PDF

Module 6: Additional Scripting Features Copyright © 2024 bb-mcc Objectives Discuss how functions are first-class objects in Javascript. Utilize functions as well as other relevant features of JS (Promise, fetch, etc.) in web applications Apply various techniques to implem...

Module 6: Additional Scripting Features Copyright © 2024 bb-mcc Objectives Discuss how functions are first-class objects in Javascript. Utilize functions as well as other relevant features of JS (Promise, fetch, etc.) in web applications Apply various techniques to implement Asynchronous JavaScript and XML (AJAX). Copyright © 2024 bb-mcc Functions in JS are first-class objects in JS, thus allowing flexibility in coding can be stored in a variable can be part of an array can be passed as an argument of another function can serve as the return value of a function function can be defined as expressions, which can be assigned to variables may be named or anonymous anonymous functions may be expressed as arrow functions Copyright © 2024 bb-mcc Functions Copyright © 2024 bb-mcc User-defined objects Copyright © 2024 bb-mcc User-defined objects Copyright © 2024 bb-mcc User-defined objects Copyright © 2024 bb-mcc JSON JavaScript Object Notation (JSON) is text syntax for storing and exchanging data among application JS allows JSON-formatted strings to be converted to JSON objects and vice-versa JSON.stringify(objecttype) JSON.parse(stringtype) Check the JavaScript documentation for more information. Copyright © 2024 bb-mcc Copyright © 2024 bb-mcc Promise Promise type an object that represents the eventual completion of failure of an asynchronous task and its resulting value the value is not immediately returned, but a promise is returned to provide the value in the future associates handlers for the success or failure of the task; a pending promise is either fulfilled, (a value is returned) or rejected (a reason is provided). when a promise is instantiated, it takes as parameter a function with 2 arguments: resolve and reject Copyright © 2024 bb-mcc Promise Copyright © 2024 bb-mcc Promise Copyright © 2024 bb-mcc Promise Promise type typically returned from an asynchronous function.then() is a method used to handle a fulfilled or resolved promise a sequence of.then() methods are called if several promises are part of a chain. Copyright © 2024 bb-mcc Promise Copyright © 2024 bb-mcc Promise Copyright © 2024 bb-mcc AJAX Asynchronous JavaScript and XML (AJAX) early years: page updates required the reloading of the entire page AJAX provides techniques and technologies that enable clients and servers to exchange data/resources without interfering with the behavior of the current page (asynchronous) no need to reload the entire page; user actions are uninterrupted Implementation techniques originally implemented using XMLHttpRequest (XHR) object and callback functions callback function: works like a handler that kicks into action when the request has been completed more information here Copyright © 2024 bb-mcc AJAX Implementation techniques XHR methods open() – defines the method (GET, POST) send() – send the request; empty argument if the request is GET POST requests may require HTTP header information, which can be specified using setRequestHeader(). The send() function should include the request’s message body. multiple asynchronous processes may result in a sequence of nested function calls more XHR properties, methods, and events here Promise object Copyright © 2024 bb-mcc AJAX Implementation techniques Fetch API global fetch() method specifies the URL where a resource is going to be accessed eliminates the programmatic approach used for XMLHttpRequest and the explicit definition of a Promise fetch() returns a Promise; the method “promises” to provide the requested data when it has done its asynchronous tasks.then() returns a Response object to extract the message body, the following methods are used.text().json().blob().formdata().arrayBuffer() Copyright © 2024 bb-mcc AJAX Copyright © 2024 bb-mcc AJAX Copyright © 2024 bb-mcc AJAX Copyright © 2024 bb-mcc AJAX Copyright © 2024 bb-mcc AJAX Implementation techniques Fetch API POST messages are set via the 2nd argument of fetch where details about the request such as the method, headers and the message body can be defined Copyright © 2024 bb-mcc AJAX & PHP Implementing AJAX in PHP Use JavaScript XMLHttpRequest or fetch API to send asynchronous requests to a PHP script on the server. PHP script processes the request, performs any necessary database operations, and returns the response back to the client- side JavaScript code. Copyright © 2024 bb-mcc AJAX & PHP display.php snippet XMLHTTPRequest Copyright © 2024 bb-mcc AJAX & PHP Fetch API Copyright © 2024 bb-mcc AJAX & PHP JQuery.ajax() (with simple filter function) Copyright © 2024 bb-mcc AJAX & PHP JQuery.ajax() filter.php snippet Copyright © 2024 bb-mcc Libraries collection of utilities and functions may serve specific needs may consist of a rich collection of classes/objects and functions/modules that cater to a variety of coding requirements. save coding time, promote reusability examples collection of HTML templates CSS library for animation (e.g., animate.css) or basic styles (e.g., Raisin.css) libraries for web widgets (e.g., Polymer, Stencil, Wired Elements). Copyright © 2024 bb-mcc Libraries examples validation (e.g., validator, Pristine) data visualization (e.g., Chart.js) UI creation and DOM manipulation (e.g., jQuery, jQuery UI, React) HTTP requests (e.g., jQuery, axios) Copyright © 2024 bb-mcc For more information, visit: jQuery, jQuery UI, React & the documentation of other libraries. Copyright © 2024 bb-mcc Frameworks library vs framework similar to a furniture store comparable to a template that provides what you need for the architecture of a house – the construction will you are free to choose what, be based on that template when and where to use it the developer is provided when coding, the developer with the sections for can choose what library plugging in code; the components to use framework implements it accordingly Copyright © 2024 bb-mcc Frameworks “libraries are plugged into your code, you plug code into a framework” front-end frameworks CSS and/or JS frameworks provide client-side functionality CSS – Bootstrap, Foundation, Materialize, Skeleton, etc. JS – Angular, Vue.js, Ember.js, Semantic UI, Next.js Copyright © 2024 bb-mcc Frameworks back-end frameworks support specific server-side scripting languages PHP: Laravel, Symfony, CodeIgniter, Yii, Zend Java: Spring, Struts, Grails, DropWizard Nodejs: Express, DerbyJS, Koa, Meteor Python: Django, Pyramid, Flask Ruby: Ruby on Rails Copyright © 2024 bb-mcc Most frameworks are built on a set of libraries. Libraries and frameworks utilize preprocessors. The organization you work for or your clients may have specific preferences for development tools and technologies. Knowledge and understanding of the basic web technologies and vanilla code makes it easier to learn, use, tweak and control these tools. Copyright © 2024 bb-mcc Handling file uploads with PHP Copyright © 2024 bb-mcc Handling file uploads with PHP in continuation to the initial “Pet Memorial” code (add the enctype attribute) Copyright © 2024 bb-mcc Handling file uploads with PHP Copyright © 2024 bb-mcc Handling file uploads with PHP after selecting a photo: Copyright © 2024 bb-mcc Handling file uploads with PHP the file is uploaded in the server Note: Remember to also check the file type the user is uploading Copyright © 2024 bb-mcc Session Handling with PHP Session Handling - preserve certain data across subsequent accesses for the same user. - session support allows data to be stored between requests in the $_SESSION superglobal array. - sessions have session variables that store necessary information into a temporary file that is destroyed once the website is closed. Copyright © 2024 bb-mcc  Session Handling with PHP Session Handling Starting a session and storing session data login.php code snippet authenticate.php *BUT this simple query is prone to sql injections! starting with a login form, start a session if the user’s credentials match with a user in the database store user information in session variables if a match exists encode an error message if there is no match Copyright © 2024 bb-mcc Session Handling with PHP Session Handling Using a prepared statement to validate log-in credentials *simple query, prone to sql injection Copyright © 2024 bb-mcc  Session Handling with PHP Session Handling login page but using wrong credentials Copyright © 2024 bb-mcc Session Handling with PHP Session Handling if credentials are correct, change header information to show that the user has logged in (header.php code snippets) place session_start() at the beginning of the script to start/resume a session session variable content can then be used Copyright © 2024 bb-mcc Session Handling with PHP Session Handling Destroying a session logout.php code snippet Copyright © 2024 bb-mcc Cookies in PHP HTTP Cookies - for storing data in the browser and tracking or identifying returning users. - in the early days: cookies were used for general client-side data storage purposes. Modern storage APIs are now recommended, for example the Web Storage API (localStorage and sessionStorage) and IndexedDB. - sessions are saved on the server-side, whereas cookies are saved on the user's browser or client-side. Copyright © 2024 bb-mcc Cookies in PHP setting a cookie using and deleting a cookie Copyright © 2024 bb-mcc Cookies in PHP information can be stored and used without requiring logging into an account (as long as cookies are enabled) Copyright © 2024 bb-mcc