pemrograman web - week1
DESCRIPTION
Learn php form beginningTRANSCRIPT
Slide 1Introduction to a server-side web programming / scripting
language to create dynamic websites.
Scripting language used in this unit: PHP currently one of the most widely supported technology by web hosts.
<Pemrograman Web>
Java
C
C++
Objective-C
PHP
Additionally, Adobe Photoshop & or any other image editing software.
Advise the lecturer if you have any deficiency of these skills.
<Pemrograman Web>
Resources
You should be prepared with web host, software, and hardware required.
The software and hardware are provided in campus Remember that these facilities and resources are very limited. You might want to install the software in your own computer so that you can practice and work on the assignments in any time you would like to.
<Pemrograman Web>
Web Host
Technology required: PHP & MySQL.
Equipment / Consumable
You works will be submitted in CD-ROM/DVD-ROM and uploaded to a server.
<Pemrograman Web>
Script Editor: Adobe Dreamweaver, Netbeans or Notepad
Server: Apache, PHP, MySQL
Image Editor: Adobe Photoshop. Other image editor can be used
<Pemrograman Web>
Textbook / Recommended Ref.
No official textbook. Recommended reference:
Castagnetto, J. et. Al., Professional PHP Programming, Wrox Press, USA, 2000
<Pemrograman Web>
Online Resources
Links provided during lectures
First 1 - 1.5 hours for lectures
Remaining times for tutorial
Important Note:
Bring the progress of your assignments every time you attend lectures and tutorials
Submitting you assignments without consult -> your work might not be suitable for submission.
<Pemrograman Web>
Why PHP?
Required resources
Web hosting (e.g.: siteburg.com)
Headings
<Pemrograman Web>
Statements
Loop (While, For)
Functions
Arrays
File Upload
<Pemrograman Web>
Classes and Object
Polymorphism and Inheritance
Individual
Exam Review
<Pemrograman Web>
Sending and Receiving Emails
1. Denial of Service
2. Exposure confidential data
3. Generate PDF
Individual
Exam Review
<Pemrograman Web>
Case Study
Description : TBA
Type : Individual
Description : TBA
Type : Individual
<Pemrograman Web>
Assignment Rules
While lecturers will try at best to return your work, you should retain a copy of your works.
All assignments submitted should be accompanied by Cover Sheet (sampul tugas). Note that this will act as legal paper, plagiarism or collusion ?.
All assignments should be submitted on the due date given. No extension given unless you ask the lecturers at least 2 weeks in advance. Extension won’t be given unless you have a very urgent or health issues.
<Pemrograman Web>
Assignment Rules (cont’d)
Any assignments submitted after the due date without extension given, will cost you 10% of the marks each day.
All submission that could not be copied or run (due to virus, CD-ROM error, etc) will not be marked. You will get penalty of late submission as mentioned above for any number days of the work re-submit. Please make sure that your CD-ROM or any other for of submission are virus free and work perfectly on several computers.
<Pemrograman Web>
WEB DEVELOPMENT
<Pemrograman Web>
Static Website
Dynamic Website
Client-Side Technologies
Server-Side Technologies
<Pemrograman Web>
</HTML>
</HTML>
Java Applets
Active Server Pages
Provide client with dynamic data
Improved security measures original codes can not be seen from the browser
<Pemrograman Web>
Why PHP?
Widely supported by both local and international web hosts provider
<Pemrograman Web>
Viewing HTML Pages
A Browser interpret the HTML codes and display the page appropriately on the screen
Creating Web page using text editor (ex: Notepad) save and view / refresh on browser back and forth
<Pemrograman Web>
Original Intent of HTML
To allow the authors to worry about the content only, whilst the browser will took the job to format the look
To allow the document to be easily readable and accessed from anywhere in the world
<Pemrograman Web>
Different Browser Different Look
various web browser has its own way of interpreting the look of the web page.
For example: in headings, the author only decide the level of the headings, and not how it looks like. One browser might display left aligned bold text, while other center aligned italics.
That is why, authors should test / check their web pages in different browsers.
<Pemrograman Web>
Different Browser Different Look
The good news: consolidated and standardized HTML tags. Standard tags will be supported by most browsers
However browser developers also race to bring new features (not standardized yet) in new versions of browsers
<Pemrograman Web>
Each elements is defined by an HTML code, called tags
A tag is always enclosed in angle brackets and most tags come in pairs, with an opening and a closing tag.
Example : <HTML> </HTML>
Some browsers are forgiving (for some errors), but you should not depend on this to avoid problems
<Pemrograman Web>
HTML Example
<Pemrograman Web>
Browser Interpretation
Browser interprets and displays the tags appropriately
The tags does not shown on the browser, unless there is a problem (e.g. unrecognized tags, unpaired tags etc)
Some tags have optional or required attributes (a keyword of several possible values inside the tags)
e.g.: <H1 ALIGN=“CENTER”> </H1>
HTML tags are not case sensitive to the browsers.
<Pemrograman Web>
<html>
<head>
</head>
<body>
<HTML>
Declares that the text that follows defines an HTML Web Page that can be viewed in a Web Browser. The closing </HTML> tag ends the page
<Pemrograman Web>
<HEAD>
Defines the header area of a page, which is not displayed within the page itself in the browser.
The closing </HEAD> tag ends the header area
<Pemrograman Web>
<TITLE>
The text in between this and the closing </TITLE> tag is the title of the web page and is displayed in the title bar of the browsers.
This is important tag, used by search engine and indexer to name the website usually neglected by web authors
In Internet Explorer the title will also be served as the default page title on favorites
<Pemrograman Web>
<BODY>
The actual content of the web page should be placed inside the pair of this tag with the closing </BODY> tag.
<Pemrograman Web>
<Pemrograman Web>
Browsers ignored hard returns (new line)
<PRE>
Mono spaced fonts that allows authors to align text precisely
<Pemrograman Web>
the one
The HTML language is constantly evolving
New and improved tags introduced in new browsers versions users with old browsers would not be able to see
Standards are defined by W3C (World Wide Web Consortium) at the Massachusetts Institute of Technology
<Pemrograman Web>
Using Paragraphs
Paragraphs are defined with the <P> tags, not by pressing Enter key on keyboards
Browsers will insert some extra space between paragraphs. So sometime you would not like to use paragraph tags
<Pemrograman Web>
<BR>
You can use <BR> instead of paragraph if you intended to move to the next line, without additional space between the lines.
<Pemrograman Web>
Try This
<Pemrograman Web>
HR = Horizontal Rule
Width
Size
A common way to add structure to a Web page.
Maximum of 6 levels: <H1>, <H2>.. <H6>
<Pemrograman Web>
Formatting Text and Pages
<FONT> tag can be used to decide the font face/type, size and color, ex: <font face=“verdana”, size=“5”, width=“80%”>
Italic: <i>
Bold: <b>
Underlined: <u>
<Pemrograman Web>
Further Learning
HTML 5
Scripting language used in this unit: PHP currently one of the most widely supported technology by web hosts.
<Pemrograman Web>
Java
C
C++
Objective-C
PHP
Additionally, Adobe Photoshop & or any other image editing software.
Advise the lecturer if you have any deficiency of these skills.
<Pemrograman Web>
Resources
You should be prepared with web host, software, and hardware required.
The software and hardware are provided in campus Remember that these facilities and resources are very limited. You might want to install the software in your own computer so that you can practice and work on the assignments in any time you would like to.
<Pemrograman Web>
Web Host
Technology required: PHP & MySQL.
Equipment / Consumable
You works will be submitted in CD-ROM/DVD-ROM and uploaded to a server.
<Pemrograman Web>
Script Editor: Adobe Dreamweaver, Netbeans or Notepad
Server: Apache, PHP, MySQL
Image Editor: Adobe Photoshop. Other image editor can be used
<Pemrograman Web>
Textbook / Recommended Ref.
No official textbook. Recommended reference:
Castagnetto, J. et. Al., Professional PHP Programming, Wrox Press, USA, 2000
<Pemrograman Web>
Online Resources
Links provided during lectures
First 1 - 1.5 hours for lectures
Remaining times for tutorial
Important Note:
Bring the progress of your assignments every time you attend lectures and tutorials
Submitting you assignments without consult -> your work might not be suitable for submission.
<Pemrograman Web>
Why PHP?
Required resources
Web hosting (e.g.: siteburg.com)
Headings
<Pemrograman Web>
Statements
Loop (While, For)
Functions
Arrays
File Upload
<Pemrograman Web>
Classes and Object
Polymorphism and Inheritance
Individual
Exam Review
<Pemrograman Web>
Sending and Receiving Emails
1. Denial of Service
2. Exposure confidential data
3. Generate PDF
Individual
Exam Review
<Pemrograman Web>
Case Study
Description : TBA
Type : Individual
Description : TBA
Type : Individual
<Pemrograman Web>
Assignment Rules
While lecturers will try at best to return your work, you should retain a copy of your works.
All assignments submitted should be accompanied by Cover Sheet (sampul tugas). Note that this will act as legal paper, plagiarism or collusion ?.
All assignments should be submitted on the due date given. No extension given unless you ask the lecturers at least 2 weeks in advance. Extension won’t be given unless you have a very urgent or health issues.
<Pemrograman Web>
Assignment Rules (cont’d)
Any assignments submitted after the due date without extension given, will cost you 10% of the marks each day.
All submission that could not be copied or run (due to virus, CD-ROM error, etc) will not be marked. You will get penalty of late submission as mentioned above for any number days of the work re-submit. Please make sure that your CD-ROM or any other for of submission are virus free and work perfectly on several computers.
<Pemrograman Web>
WEB DEVELOPMENT
<Pemrograman Web>
Static Website
Dynamic Website
Client-Side Technologies
Server-Side Technologies
<Pemrograman Web>
</HTML>
</HTML>
Java Applets
Active Server Pages
Provide client with dynamic data
Improved security measures original codes can not be seen from the browser
<Pemrograman Web>
Why PHP?
Widely supported by both local and international web hosts provider
<Pemrograman Web>
Viewing HTML Pages
A Browser interpret the HTML codes and display the page appropriately on the screen
Creating Web page using text editor (ex: Notepad) save and view / refresh on browser back and forth
<Pemrograman Web>
Original Intent of HTML
To allow the authors to worry about the content only, whilst the browser will took the job to format the look
To allow the document to be easily readable and accessed from anywhere in the world
<Pemrograman Web>
Different Browser Different Look
various web browser has its own way of interpreting the look of the web page.
For example: in headings, the author only decide the level of the headings, and not how it looks like. One browser might display left aligned bold text, while other center aligned italics.
That is why, authors should test / check their web pages in different browsers.
<Pemrograman Web>
Different Browser Different Look
The good news: consolidated and standardized HTML tags. Standard tags will be supported by most browsers
However browser developers also race to bring new features (not standardized yet) in new versions of browsers
<Pemrograman Web>
Each elements is defined by an HTML code, called tags
A tag is always enclosed in angle brackets and most tags come in pairs, with an opening and a closing tag.
Example : <HTML> </HTML>
Some browsers are forgiving (for some errors), but you should not depend on this to avoid problems
<Pemrograman Web>
HTML Example
<Pemrograman Web>
Browser Interpretation
Browser interprets and displays the tags appropriately
The tags does not shown on the browser, unless there is a problem (e.g. unrecognized tags, unpaired tags etc)
Some tags have optional or required attributes (a keyword of several possible values inside the tags)
e.g.: <H1 ALIGN=“CENTER”> </H1>
HTML tags are not case sensitive to the browsers.
<Pemrograman Web>
<html>
<head>
</head>
<body>
<HTML>
Declares that the text that follows defines an HTML Web Page that can be viewed in a Web Browser. The closing </HTML> tag ends the page
<Pemrograman Web>
<HEAD>
Defines the header area of a page, which is not displayed within the page itself in the browser.
The closing </HEAD> tag ends the header area
<Pemrograman Web>
<TITLE>
The text in between this and the closing </TITLE> tag is the title of the web page and is displayed in the title bar of the browsers.
This is important tag, used by search engine and indexer to name the website usually neglected by web authors
In Internet Explorer the title will also be served as the default page title on favorites
<Pemrograman Web>
<BODY>
The actual content of the web page should be placed inside the pair of this tag with the closing </BODY> tag.
<Pemrograman Web>
<Pemrograman Web>
Browsers ignored hard returns (new line)
<PRE>
Mono spaced fonts that allows authors to align text precisely
<Pemrograman Web>
the one
The HTML language is constantly evolving
New and improved tags introduced in new browsers versions users with old browsers would not be able to see
Standards are defined by W3C (World Wide Web Consortium) at the Massachusetts Institute of Technology
<Pemrograman Web>
Using Paragraphs
Paragraphs are defined with the <P> tags, not by pressing Enter key on keyboards
Browsers will insert some extra space between paragraphs. So sometime you would not like to use paragraph tags
<Pemrograman Web>
<BR>
You can use <BR> instead of paragraph if you intended to move to the next line, without additional space between the lines.
<Pemrograman Web>
Try This
<Pemrograman Web>
HR = Horizontal Rule
Width
Size
A common way to add structure to a Web page.
Maximum of 6 levels: <H1>, <H2>.. <H6>
<Pemrograman Web>
Formatting Text and Pages
<FONT> tag can be used to decide the font face/type, size and color, ex: <font face=“verdana”, size=“5”, width=“80%”>
Italic: <i>
Bold: <b>
Underlined: <u>
<Pemrograman Web>
Further Learning
HTML 5