<form> Handling

Slides:



Advertisements
Similar presentations
JQUERY/AJAX ALIREZA KHATAMIAN DELARAM YAZDANSEPAS.
Advertisements

Video, audio, embed, iframe, HTML Form
HTML Form Processing Learning Web Design – Chapter 9, pp Squirrel Book – Chapter 11, pp
Lecture 3 – Data Storage with XML+AJAX and MySQL+socket.io
Advance Database Management Systems Lab no. 5 PHP Web Pages.
Lecture 7 – Form processing (Part 2) SFDV3011 – Advanced Web Development 1.
PHP and AJAX ISYS 475. AJAX Asynchronous JavaScript and XML: – JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net,
JavaScript & jQuery the missing manual Chapter 11
CSCI 6962: Server-side Design and Programming Introduction to AJAX.
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
Intro to JavaScript Events. JavaScript Events Events in JavaScript let a web page react to some type of input Many different ways to handle events due.
AJAX and Java ISYS 350. AJAX Asynchronous JavaScript and XML: – Related technologies: JavaScript, Document Object Model, XML, server-side script such.
1 HTML Forms. 22 HTML forms provide a way for a user to send information back to the web server. Originally the user input was processed on the server.
06/10/2015AJAX 1. 2 Introduction All material from AJAX – what is it? Traditional web pages and operation Examples of AJAX use Creating.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
ITM © Port, Kazman1 ITM 352 More on Forms Processing.
CSC 2720 Building Web Applications Server-side Scripting with PHP.
Lecture 9: AJAX, Javascript review..  AJAX  Synchronous vs. asynchronous browsing.  Refreshing only “part of a page” from a URL.  Frameworks: Prototype,
Ajax. –Asynchronous JavaScript and XML –Umbrella term for technologies that often: Use client-side scripting for layout and formatting Use less than full.
Asynchronous Javascript And XML AJAX : an introduction UFCEUS-20-2 : Web Programming.
ITM © Port, Kazman1 ITM 352 More on Forms Processing.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
AJAX Asynchronous JavaScript and XML 1. AJAX Outline What is AJAX? Benefits Real world examples How it works 2.
SE-2840 Dr. Mark L. Hornick 1 Introduction to Ajax Asynchronous Javascript And XML.
Since you’ll need a place for the user to enter a search query. Every form must have these basic components: – The submission type defined with the method.
CHAPTER 8 AJAX & JSON WHAT IS AJAX? Ajax lets you…
1 HTML Forms. Objectives You will be able to: Compose HTML forms, to accept input from the user. Identify the different kinds of input tags that can appear.
1 PHP HTTP After this lecture, you should be able to know: How to create and process web forms with HTML and PHP. How to create and process web forms with.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
COSC 2328 – Web Programming.  PHP is a server scripting language  It’s widely-used and free  It’s an alternative to Microsoft’s ASP and Ruby  PHP.
1 AJAX. AJAX – Whatzit? Asynchronous (content loading)‏ Javascript (logic & control)‏ And XML (request handling)‏
JavaScript, Sixth Edition Chapter 11 Updating Web Pages with Ajax.
CSE 154 LECTURE 18: FORMS AND UPLOADING FILES. Exercise: Baby name web service JSON Modify our babynames.php service to produce its output as JSON. For.
Unit 4 Working with data. Form Element HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons,
AJAX. Objectives Understand and apply AJAX Using AJAX in DOJO library.
Simple PHP Web Applications Server Environment
National College of Science & Information Technology.
Introduction to Information Security
CHAPTER 5 SERVER SIDE SCRIPTING
JavaScript and Ajax (Ajax Tutorial)
CSE 154 Lecture 11: AJAx.
How does it work ?.
How to Write Web Forms By Mimi Opkins.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Lecture 11. Web Standards Continued
Getting web pages First we need to get the webpage by issuing a HTTP request. The best option for this is the requests library that comes with Anaconda:
Passing variables between pages
AJAX.
PHP FORM HANDLING Post Method
Basic Contact Form user sends an
Simple PHP application
Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS
Introduction to JavaScript
CSE 154 Lecture 11: AJAx.
Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS
A second look at JavaScript
Abel Sanchez, John R. Williams
ISC440: Web Programming 2 AJAX
JavaScript & jQuery AJAX.
Javascript and JQuery SRM DSC.
Introduction to JavaScript

PHP State.
DR. JOHN ABRAHAM PROFESSOR UTPA
Chengyu Sun California State University, Los Angeles
Chengyu Sun California State University, Los Angeles
PHP By Prof. B.A.Khivsara Note: The material to prepare this presentation has been taken from internet and are generated only for students reference and.
Web Forms.
Presentation transcript:

<form> Handling

HTTP methods that a client can use to pass form data to the server: There are two common HTTP methods that a client can use to pass form data to the server: GET and POST

Requests made by typing the URL in the browser uses the GET method

GET requests can also be sent from a form <form method=“get"> </form>

While POST requests must be made from a form <form method=“post"> </form>

The most visible difference between GET and POST is the URL line

login.php?user=root&pass=1234 A GET request encodes the form parameters in the URL in what is called a query string login.php?user=root&pass=1234

The values are available in the $_GET array $username = $_GET[‘user’]; $password = $_GET[‘pass’];

the form parameters in the body of the HTTP request header A POST request passes the form parameters in the body of the HTTP request header

POST /wp-login.php HTTP/1.1 Host: rendicahya.lecture.ub.ac.id Connection: keep-alive Content-Length: 117 Accept: text/html User-Agent: Chrome/40.0.2214.115 Accept-Encoding: gzip, deflate Accept-Language: id,en-US Referer: http://ub.ac.id user=root&pass=1234

The values are available in the $_POST array $username = $_POST[‘user’]; $password = $_POST[‘pass’];

passed from any methods $_REQUEST array includes variables passed from any methods $username = $_REQUEST[‘user’]; $password = $_REQUEST[‘pass’];

Each form control must have a name attribute so that it can be referenced by the back-end script

<form method=“get”> <input name=“username”> </form> HTML <form method=“get”> <input name=“username”> </form> PHP $_GET[‘username’];

<form method=“post”> <input name=“username”> </form> HTML <form method=“post”> <input name=“username”> </form> PHP $_POST[‘username’];

search.php ... <h1>Search</h1> <form action=“search_process.php” method=“get”> <label>Search: <input type=“text” name=“keyword”> </label><br> <input type=“submit” value=“Search”> </form>

search_process.php <?php echo ‘Searching for ‘, $_GET[‘keyword’], ‘...’;

register.php ... <h1>Register</h1> <form action=“register_process.php” method=“post”> <label>Username: <input type=“text” name=“username”> </label> <label>Password: <input type=“password” name=“password”> <input type=“submit” value=“Register”> </form>

register_process.php <?php $username = $_POST[‘username’]; $password = $_POST[‘password’]; echo “Registering $username with password $password”;

Create a login form like so: Username: Password: Login

login.php <form action=“login_process.php” method=“post”> <label> Username: <input type=“text” name=“username”><br> </label> Password: <input type=“text” name=“password”><br> <input type=“submit” value=“Login”> </form>

Now create the script that checks if the username is “admin” and the password is “123456”

login_process.php $username = $_POST[‘username’]; $password = $_POST[‘password’]; if ($username == ‘admin’ && $password == ‘123456’) { echo ‘<h1>Login succeeds</h1>’; } else { echo ‘<h1>Login fails</h1>’; }

One PHP page can be used to both generate a form and process it

<html><head></head> <body> <?php if ($_SERVER[‘REQUEST_METHOD’] == ‘GET’): ?> <form action=“<?php echo $_SERVER[‘PHP_SELF’]; ?>” method=“POST”> Fahrenheit temperature: <input type=“text” name=“fahrenheit”><br> <input type=“submit” value=“Convert to Celsius!”> </form> <?php elseif ($_SERVER[‘REQUEST_METHOD’] == ‘POST’): $fahrenheit = $_POST[‘fahrenheit’]; $celsius = ($fahrenheit - 32) * 5 / 9; printf(“%.2fF is %.2fC”, $fahrenheit, $celsius); endif; ?> </body></html>

JavaScript & AJAX

JavaScript is a cross-platform programming language, able to run in both client (browser) and server (Node.js)

JavaScript adds interactivity to a web application, for example: Form validation Google’s text suggestion Communication with server without page refresh (AJAX) Hide/show page elements

JavaScript can be added to a web page in two ways: internal and external

Internal <!DOCTYPE html> <html> <head>...</head> <body> <script> alert(‘Hello, world!’); </script> </body> </html

External <!DOCTYPE html> <html> <head>...</head> <body> <script src=“script.js”</script> </body> </html

JavaScript is able to access every elements in a web page through the use of DOM (document object model)

Available functions to access page/DOM elements: document.getElementById() document.getElementsByTagName() document.getElementsByClassName() document.querySelector() document.querySelectorAll()

JavaScript dan wait (listen) for an event to happen and do something when that action happens

selector.html <!DOCTYPE html> <html> <head> <title>Selector and Event</title> </head> <body> <label> Name: <input type=“text” id=“name”> </label> <button id=“greet”>Greet</button> <script src=“selector.js”></script> </body> </html>

selector.js const button = document.querySelector(‘#greet’); button.addEventListener(‘click’, () => { const name = document.querySelector(‘#name’).value; alert(‘Hello, ‘ + name); });

AJAX = Asynchronous JavaScript and XML

In a web page, asynchronous means the communication with server can happen without having to reload the page

Steps: Create instance of XMLHttpRequest const xhr = new XMLHttpRequest(); Adding event listener: xhr.onreadystatechange = () -> { if (xhr.readyState !== 4) { return; } if (xhr.status === 200) { // 200 = OK } }

Steps: Specify the URL: const url = ‘http://www.js.com/ajax.txt’; xhr.open(‘GET’, url); Start the communication: xhr.send();

htdocs/ajax/ajax.html <!DOCTYPE html> <html> <head> <title>AJAX</title> </head> <body> <label> Name: <input type=“text” id=“name”> </label> <button id=“greet”>Greet</button> <script src=“ajax.js”></script> </body> </html>

htdocs/ajax/ajax.js const button = document.querySelector(‘#greet’); button.addEventListener(‘click’, () => { const xhr = new XMLHttpRequest(); const name = document.querySelector(‘#name’).value; const url = `http://localhost/ajax/ajax.php?name=${name}`; xhr.open(‘GET’, url, true); xhr.onreadystatechange = () => { if (xhr.readyState !== 4) { return; } if (xhr.status === 200) { alert(xhr.responseText); }; xhr.send(null); });

htdocs/ajax/ajax.php <?php sleep(1); $name = $_GET[‘name’]; echo “Hello $name!”;

A number of AJAX libraries are available to make simplify our code: jQuery, Axios, SuperAgent, etc.

htdocs/ajax/ajax.html <!DOCTYPE html> <html> <head> <title>AJAX</title> </head> <body> <label> Name: <input type=“text” id=“name”> </label> <button id=“greet”>Greet</button> <script src=“https://unpkg.com/axios/dist/axios.min.js” </script> <script src="ajax.js"></script> </body> </html>

htdocs/ajax/ajax.js const button = document.querySelector(‘#greet’); button.addEventListener(‘click’, () => { const name = document.querySelector(‘#name’).value; const url = `http://localhost/ajax/ajax.php?name=${name}`; axios.get(url).then(response => { alert(response.data); });

bye.