Scribd
Upload
49 views

CSE2045Y - Lecture 1 - Review of Web Related Concepts

The document provides an overview of web application development concepts including: - The agenda covers internet architecture, static vs dynamic web pages, and client-side and server-side components of a web application framework. - It then discusses specific client-side technologies like HTML, CSS, and JavaScript and server-side technologies like PHP, sessions, and database connections. - Finally, it demonstrates basic HTML5 document structure and common HTML5 form elements.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

CSE2045Y - Lecture 1 - Review of Web Related Concepts

The document provides an overview of web application development concepts including: - The agenda covers internet architecture, static vs dynamic web pages, and client-side and server-side components of a web application framework. - It then discusses specific client-side technologies like HTML, CSS, and JavaScript and server-side technologies like PHP, sessions, and database connections. - Finally, it demonstrates basic HTML5 document structure and common HTML5 form elements.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

CSE2045Y

Web Application Development

Lecture 1
Review of Web Related Concepts

Agenda
• Internet Architecture
• Static v/s Dynamic web pages
• Web Application Framework
– Client Side:
• HTML
• CSS
• JavaScript
– Server Side:
• PHP
• Session
• Database Connection

2
Internet Architecture
• Based on Client/Server model:
– Client: Requests for resources/services
– Server: Provides resources/services to clients

https://i.stack.imgur.com/uKIb7.png

Static Web pages

• Browser sends http request


• Web Server sends http response (HTML page)
• Browser displays web page
4
Dynamic Web pages

• Browser sends http request.


• Web Server contacts Application Server.
• Application Server processes codes and retrieves data
from database.
• Web Server sends http response (HTML format) to
browser.
• Browser Displays web page. 5

Framework for Web Applications


• Client Side:
– HTML
– CSS
– JavaScript

• Server Side:
– PHP
– Sessions
– Database Connection

6
HTML5 Basic Document Structure (1)

http://tutorials.jenkov.com/html5/semantic-elements.html
7

HTML5 Basic Document Structure (2)


• Header, Footer (<header>, <footer>)
– The header and footer section of a page is typically
the top bar (header) of a page and the bottom bar
(footer).

• Nav (<nav>)
– Represents navigation sections of a page. A page can
have more than one navigation section.

• Article (<article>)
– Represents the main content of a page.
– If a page contains multiple contents, each of these
contents can be enclosed in its own article element 8
Other possible HTML5 document structures
A. B.

C. D.

HTML5 Example

Only one <article>


shown in this example

10
HTML5 Example
(Browser Output without CSS)

11

HTML5 Example
(Browser Output with CSS)

• html5BasicStructure.zip is available for download from LCMS.


• Note that CSS has been used to format the web page using an
external stylesheet, myStyle.css.
12
Javascript Where to put the script?
Scripts to be executed when
Scripts in either the body or they are called, or when an
the head section or both: event is triggered, go in the
head section
<html>
When we place a script in the
<head> head section, we ensure that
<script type="text/javascript"> the script is loaded before
…some statements anyone uses it
</script>
</head>
Scripts in the body will be
<body>
executed immediately while
<script type="text/javascript">
the page loads into the
…some statements
browser
</script>
</body>
This is not always what we
want ! 13

Javascript Functions
• How to Define a Function?
– To create a function you define its name, any values
("arguments") and some statements

<head>
function myfunction(argument1,argument2)
{
…some statements
}
Return …
</head>

– By placing functions in the <head> section of the


document, you make sure that all the code in the function
has been loaded before the function is called
– Return value determines type of function 14
Activity 1

txt_username

txt_password

txt_email

Write a JavaScript function to validate blank Username? 15

Javascript Dynamic Behaviour

function closeTooltip()
{
div_display_tooltip.innerHTML="";
div_tooltip_id.style.display="inline";
}//end function closeTooltip()

16
Javascript Regular Expression (1)
• Example: Validate numeric
function validateNumeric(val,label)
{
var filter = / ^ [0-9] + $ /;
if (!filter.test(val))
{
alert('Please enter numeric characters for '+ label);
return false;
}
return true;
}//end validateNumeric

17

Javascript Regular Expression (2)


Where:
 / represents a pattern you want to match /
 ^ represents the start of a string
 $ represents the end of a string
 [0-9] represents any of the characters 0 9
 + represents at least once

• If we omit the ^, we specify that we want the pattern,


but not necessarily starting at the start of the string.

• If we omit the $, again we specify that we want to have


the pattern within the string, and not how it ends.
18
Javascript Regular Expression (3)

{n} Matches exactly n times


{n, } Matches n or more times
{n,m} Matches n to m times
* Short for {0, }
Matches zero or more times
? Short for {0,1}
Matches zero or one time, i.e Optional
¦ Alternation matches content on either side

19

Activity 2
• Based on the requirements given below, write the
regular expression pattern:
– A valid module code should start with only 3 to 4
alphabets in uppercase;
– followed by exactly 4 numbers;
– followed by an optional letter Y
– No other characters should be follow the Y

• Sample valid module codes:


– CSE1041, PSYC2007Y, CSE2003Y

20
HTML Forms
• Forms are used to send data back to the server for
processing.

• Forms can be placed within any element capable of holding


other elements (paragraphs, tables, and so on).

• The <form> tag has the following minimum format:

<form action="url_to_send_data" method= GET/POST">

• Note:
– The action attribute defines a URL where the data from the form
should be sent to be handled.
– The destination should be a script or other construct capable of
correctly interpreting and doing something useful with the data.
21

HTML5 Form Elements


• <fieldset>
• <label>
• <input>
– Text, Email, Date, Telephone, Number, Radio,
Checkbox, Submit, Reset
• <select>
• <textarea>

22
<fieldset>
<!DOCTYPE html>
<html>
<body>

<fieldset>
<legend>Personal Information</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>

</body>
</html>

<label>, Text <input>


<label for="txtDisplayName">Display Name </label>

<input type="text" id="txtDisplayName"


name="txtDisplayName"
required="required" />
Email <input>
<label for=" txtEmail ">Email</label>

<input type="email" id="txtEmail"


name="txtEmail"
placeholder="Enter email address"
required="required" />

Date <input>
<label for="txtPostDate">Date</label>

<input type="date" id="txtPostDate"


name="txtPostDate"
required="required"/>

View on Chrome or
Opera browser
Tel <input>
<label for="txtPhone">Phone</label>

<input type="tel" id="txtPhone"


name="txtPhone"
placeholder="999-9999"
pattern="^\d{3}-\d{4}$"/>

Number <input>
<label for="txtNumber">Number</label>

<input type="number" id="txtNumber"


min="1" max="5" step="2" value="3"
name="txtNumber" />
Radio <input>
<label for="rdoMale"> Male </label>
<input type="radio" id="rdoMale"
name="optGender" checked />

<label for="rdoFemale"> Female </label>


<input type="radio" id="rdoFemale"
name="optGender" />

Checkbox <input>
<input type="checkbox" id="chkAgree" name="chkAgree"
required="required"/>

<label for="chkAgree">I agree to the conditions</label>


Submit / Reset <input>
<input type="submit" value="Submit Form" id="btnSubmit"/>

<input type="reset" value="Reset Form" id="btnReset"/>

<select>
<label for="sltCar">Car</label>

<select id="sltCar">
<option value="toyota">Toyota</option>
<option value="honda" selected>Honda</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<textarea>
<label for="txaComments">Comments</label><br>

<textarea id="txaComments" name="txaComments"


placeholder="Enter any other relevant comments" cols="50"
rows="5"></textarea>

Sending data to server using


HTML forms
• Two ways to send data to server:
1. HTTP GET (get)
• The HTTP GET protocol attaches data to the actual URL text to pass
the data to the destination specified in the action attribute
• E.g:
http://www.on-target-games.com/forms.cgi?id=45677&data=Taarna
• Id and data values are visible - insecure!

2. HTTP POST (post)


• The HTTP POST method passes data encoded in the HTTP data stream.
As such, it is not visible to a user and is therefore a more secure
method to pass data

34
HTML Form example (GET)
<html>
<head><title>hello</title></head>
<body>
<form id= myform action= process.php" method="get">
Name: <input type= text name="txtname />
Password: <input type= password name= txtpass />
<input type= submit name= submit value= login />
<input type= reset name= reset />
</form>
</body>
</html>

35

HTML Form example (POST)


<html>
<head><title>hello</title></head>
<body>
<form id= myform action= process.php" method= post >
Name: <input type= text name="txtname />
Password: <input type= password name= txtpass />
<input type= submit name= submit value= login />
<input type= reset name= reset />
</form>
</body>
</html>

36
PHP Variables
• All variables in PHP start with a $ sign symbol
$var_name = value;
• There is no need to define the name and type
of the variable before using it.
• PHP automatically converts the variable to the
correct data type, depending on how it is set.
$name= John ;
$code=2003;
37

PHP Forms
• $_GET and $_POST used to obtain information
from the user.

• $_GET is used when method Get has been


used and $_POST is used when method Post
has been used.

• Action points to a PHP document instead of an


HTML document
38
PHP Session (1)
<?php session_start();
if(isset($_SESSION['views']))
$_SESSION['views'] =
$_SESSION['views']+ 1;
else
$_SESSION['views'] = 1;

echo "views = ". $_SESSION['views'];


?>

39

PHP Session (2)


• If you wish to delete some session data, you can
use the unset() or the session_destroy() function

• The unset() function is used to free the specified


session variable
unset($_SESSION['views']);

• You can also completely destroy the session by


calling the session_destroy() function
session_destroy();

40
PHP Database
header( Location: adduser.php?add=yes );

Success
Username:

Password:
process_adduser.php
Name:
Email:
Error
Add user
Added successfully

adduser.php
header( Location: adduser.php?add=no );

41

Activity 3
• Write the section of the codes to display the
message in adduser.php if the GET method is
used.
– If the operation is successful, display Added
successfully .
– Otherwise, display User already exists .

42

You might also like