Download presentation
Presentation is loading. Please wait.
1
<form> Handling
2
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
3
Requests made by typing
the URL in the browser uses the GET method
4
GET requests can also be sent from a form
<form method=“get"> </form>
5
While POST requests must
be made from a form <form method=“post"> </form>
6
The most visible difference
between GET and POST is the URL line
7
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
8
The values are available in
the $_GET array $username = $_GET[‘user’]; $password = $_GET[‘pass’];
9
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
10
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/ Accept-Encoding: gzip, deflate Accept-Language: id,en-US Referer: user=root&pass=1234
11
The values are available in
the $_POST array $username = $_POST[‘user’]; $password = $_POST[‘pass’];
12
passed from any methods
$_REQUEST array includes variables passed from any methods $username = $_REQUEST[‘user’]; $password = $_REQUEST[‘pass’];
13
Each form control must have a name attribute so that
it can be referenced by the back-end script
14
<form method=“get”> <input name=“username”> </form>
HTML <form method=“get”> <input name=“username”> </form> PHP $_GET[‘username’];
15
<form method=“post”> <input name=“username”> </form>
HTML <form method=“post”> <input name=“username”> </form> PHP $_POST[‘username’];
16
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>
17
search_process.php <?php
echo ‘Searching for ‘, $_GET[‘keyword’], ‘...’;
18
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>
19
register_process.php <?php $username = $_POST[‘username’];
$password = $_POST[‘password’]; echo “Registering $username with password $password”;
![register_process.php < php $username = $_POST[‘username’];](http://slideplayer.com./slide/17020904/98/images/19/register_process.php+%3C+php+%24username+%3D+%24_POST%5B%E2%80%98username%E2%80%99%5D%3B.jpg "$password = $_POST[‘password’]; echo Registering $username with password $password ;")
20
Create a login form like so: Username: Password: Login
21
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>
22
Now create the script that checks if the username is “admin”
and the password is “123456”
23
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>’; }
![login_process.php $username = $_POST[‘username’];](http://slideplayer.com./slide/17020904/98/images/23/login_process.php+%24username+%3D+%24_POST%5B%E2%80%98username%E2%80%99%5D%3B.jpg "$password = $_POST[‘password’]; if ($username == ‘admin’ && $password == ‘123456’) { echo ‘<h1>Login succeeds</h1>’; } else { echo ‘<h1>Login fails</h1>’; }")
24
One PHP page can be used to both generate a form and process it
25
<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>
26
JavaScript & AJAX
27
JavaScript is a cross-platform programming language, able to run in both client (browser) and server (Node.js)
28
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
30
JavaScript can be added to a web page in two ways: internal and external
31
Internal <!DOCTYPE html> <html>
<head>...</head> <body> <script> alert(‘Hello, world!’); </script> </body> </html
32
External <!DOCTYPE html> <html>
<head>...</head> <body> <script src=“script.js”</script> </body> </html
33
JavaScript is able to access every elements in a web page through the use of DOM (document object model)
35
Available functions to access page/DOM elements:
document.getElementById() document.getElementsByTagName() document.getElementsByClassName() document.querySelector() document.querySelectorAll()
36
JavaScript dan wait (listen) for an event to happen and do something when that action happens
38
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>
39
selector.js const button = document.querySelector(‘#greet’);
button.addEventListener(‘click’, () => { const name = document.querySelector(‘#name’).value; alert(‘Hello, ‘ + name); });
40
AJAX = Asynchronous JavaScript and XML
41
In a web page, asynchronous means the communication with server can happen without having to reload the page
43
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 } }
44
Steps: Specify the URL: const url = ‘ xhr.open(‘GET’, url); Start the communication: xhr.send();
45
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>
46
htdocs/ajax/ajax.js const button = document.querySelector(‘#greet’);
button.addEventListener(‘click’, () => { const xhr = new XMLHttpRequest(); const name = document.querySelector(‘#name’).value; const url = ` xhr.open(‘GET’, url, true); xhr.onreadystatechange = () => { if (xhr.readyState !== 4) { return; } if (xhr.status === 200) { alert(xhr.responseText); }; xhr.send(null); });
47
htdocs/ajax/ajax.php <?php sleep(1); $name = $_GET[‘name’];
echo “Hello $name!”;
![htdocs/ajax/ajax.php < php sleep(1); $name = $_GET[‘name’];](http://slideplayer.com./slide/17020904/98/images/47/htdocs%2Fajax%2Fajax.php+%3C+php+sleep%281%29%3B+%24name+%3D+%24_GET%5B%E2%80%98name%E2%80%99%5D%3B.jpg "echo Hello $name! ;")
48
A number of AJAX libraries are available to make simplify our code: jQuery, Axios, SuperAgent, etc.
49
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=“ </script> <script src="ajax.js"></script> </body> </html>
50
htdocs/ajax/ajax.js const button = document.querySelector(‘#greet’);
button.addEventListener(‘click’, () => { const name = document.querySelector(‘#name’).value; const url = ` axios.get(url).then(response => { alert(response.data); });
51
bye.
Similar presentations
