CII3H4

Aplikasi Berbasis Platform

Course Profile
Outline OUTOUTLINELINE

Learning scheme
Course rules
Scoring
Syllabus
References
Mid-term & Final Project Description
Learning scheme
Tutorial / Project-based / Self-exploration Learning
evaluation :
• Weekly Task / Quiz
• Mid-term Project
• Final Project
Course rules
Just listen what the lecturer tells you

Cheating and plagiarism, max score is D

Attendance is less than 70%, max score is C

Scoring (may change)
Quiz / Weekly Task (20%)
Mid-term Project (35%)
Attendance (5%)
Final Project (40%)
Syllabus
Intro Web Programming, Intro Mobile Programming
HTML
Dart basic
CSS & Bootstrap
Layout & Navigation
Review Javascript & jQuery
User Interaction
Review PHP, AJAX
Networking & Web Service
PHP Framework
Maps
Web service
Notification

Camera, Media
Mid-term Project Description
Web Application
– Backend: Laravel
– Frontend: Bootstrap / Vue / React etc

Scoring factor
– Design & Interface
– Session (Authentication & Login)
– Create-Read-Update-Delete Data via Database
– Web service ready
Final Project Description
Mobile Application (Flutter)
Scoring factor
– Design & Interface
– Features
– Create-Read-Update-Delete Data via Networking (web
service that you made in mid-term project)
Any question?
CII3H4
Aplikasi Berbasis Platform

Intro Web
Programming
Outline
Web Application Architecture
Web Technologies
Tools
Web Application Architecture
Web Technologies
Client Side Scripting
– HTML
– CSS
– Javascript

Server Side Scripting

HTML
Describe content and defines the structure within
webpage.
Hypertext documents on the web are designed to
be linked to other documents.
HTML
Markup Language: set of tags that are added to
the text of web page to define its structure
CSS
Design plays an important part and is a key
component of every successful website.
Some people interested into finding the look and
feel of a site, and enjoy working on the User
Experience/UX.
Some people prefer to work on the functionality of
a site called User Interface/UI.
All developers need to learn how CSS influences a
document.
CSS
Set of rules, or style sheets, for how the style is
translated into visual form
Cascading style rules priority of how the styles are
rendered on a page
CSS
CSS
Ultimate goal: Design one which compatible to all
(Desktop, Mobile, Tablet)
Javascript
Language responsible for managing interaction
within browser.
Backend Developers using javascripts 50%
Handling events, loading and unloading media,
and creating modifying and deleting elements in a
page
Browser support issues
Tools : jQuery, Bootstrap
Server Side Scripting
Massive amounts of information makes it
impractical to custom-build every single page
using only HTML, CSS, and Javascript.
Use programming language (server side scripting)
for data and logical processing in backend
Most backends using database to manage the flow
of information sent to the user
Programming Language for Web
PHP In this course, we will use:

Java (JSP) PHP

– One of the most popular
NodeJS language, C++/Java like
syntax
C# / Basic (ASP .NET)
– Easy, Simple, Fast
Ruby
MySQL (DBMS)
Python
Laravel (framework for
Go PHP)
Server Side Scripting with Database
How to access your data in database
SQL and other SQL inheritance
Most common using Relational DB (RDBMS)
Database Management System
Web Developers Type
Front End Developer (interface)
– HTML
– CSS
– Javascript
Web Developers Type
Back-end Developer (data &
logical processing)
Full-stack Developer (both
frontend & backend)
Server on Local Machine
XAMPP
– Web Server: Apache
– Backend language: PHP
– DBMS: MySQL
Tools Makes You Better
IDE
– Visual Studio Code
– PHPstorm
– Sublime
– Atom
– NetBeans
– Notepad++

Browser
– Can debug your coding result (client side scripting only) with
developer mode
– Any browser is fine, except IE version < 9
Always remember..
Any question?
CII3H4
Aplikasi Berbasis Platform

HTML
HTML
Describe content and defines the structure within
webpage
Hypertext documents on the web are designed to
be linked to other documents
Markup language, using specific text sequence
(tag) to interpret specific visualization
HTML file is a text file, not binary file, so you can
open and edit it with any text editor
Doesn’t need to be compiled
Basic HTML Syntax
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
Hello World
</body>
</html>
HTML tag: mark the starting and ending point for HTML document

HEAD tag: header part of HTML document, usually contains page title and external
linked file (CSS file for styling, JS file for functions)

TITLE tag: page title for this HTML document, will show up at topleft corner of
browser

BODY tag: content part of HTML document. all tags for visualization is put inside here
Basic HTML element (tag) structure
Mostly HTML tags have opening and closing tag, but
some tags aren’t
– <img />
– <br />

Tag writing must be ordered like parenthesis, don’t

overlap each other
<p>
<b>
…
</b>
</p>
Basic HTML element (tag) structure
Attribute : define the
property of HTML
element
Basic HTML tags
Line break : <br />
Paragraph : <p> .... </p>
Bold : <b> ... </b>, Italic : <i> ... </i>, Underline : <u> ... </u>
Heading : <h1> ... </h1>  <h6> ... </h6>
Horizontal line : <hr width=“100%” noshade />
Attach image : <img src=“…” />
Link : <a href=“…”> … </a>
Bullets List: <ul> … </ul>
Numbering List : <ol> … </ol>
Ignored tag (usually for code commenting) : <!-- …. -->
HTML Tags
Cheatsheet
Heading
<h1>Title
<h1>Title 1</h1>
1</h1>
<h2>Title
<h2>Title 2</h2>
2</h2>
<h3>Title
<h3>Title 3</h3>
<h4>Title
3</h3>

<h4>Title 4</h4>
4</h4>
Title 1
<h5>Title
<h5>Title 5</h5>
5</h5> Title 2
<h6>Title
<h6>Title 6</h6>
6</h6>
Title 3
Title 4
Title 5
Title 6
Paragraph
<p>
<p>
This
This is
is my
my first
first page
page
</p>
</p>
<p>This
<p>This page
page is
is under
under
development</p><p>I
development</p><p>I will
will try
try
hard to improve this page</p>
hard to improve this page</p>
This is my first page

This page is under development

I will try hard to improve this page

Font Styling
<p>You
<p>You can
can print
print <b>bold</b>,
<b>bold</b>,
<i>italic</i>,
<i>italic</i>, <u>underline</u>,
<u>underline</u>,
<b>bold
<b>bold then
then <i>italic
<i>italic and
and
bold</i></b>,
bold</i></b>, or
or
<b><i><u>combination</u></i></b>
<b><i><u>combination</u></i></b> styles
styles
between
between normal
normal styles</p>
styles</p>

You can print bold, italic, underline, bold then

italic and bold, or combination styles between
normal styles
Line break
<p>Hello,<br
<p>Hello,<br />
/>
my
my name is … <br />Welcome
name is … <br />Welcome to
to my
my homepage</p>
homepage</p>
<p>This
<p>This page
page <br
<br />
/> is
is under
under development</p>
development</p>

Hello,
my name is .....
Welcome to my homepage

This page
is under development
List
Ordered list / Numbering (A/a=alphabet, I/i=roman,
1=number)
<ol type="A|a|I|i|1">
<li> first </li>
<li> second </li>
<li> .... </li>
</ol>
Unordered list / Bullets
<ul type="circle|square|disc">
<li> .... </li>
</ul>
List
Expert
Expert group:
group: Expert group:
<ul>
<ul>  SE
<li>SE</li>
<li>SE</li>
<li>IS</li>  IS
<li>IS</li>  CPS
<li>CPS</li>
<li>CPS</li>
</ul>
</ul>
Study Programs:
Study
Study Programs:
Programs:
<ol>
<ol> 1. Master of Informatics
<li>Master
<li>Master of
of Informatics</li>
Informatics</li> Graduate program of Informatics Engineering
Graduate
Graduate program of
program of Informatics
Engineering
Informatics 2. Bachelor
Engineering
<li>Bachelor</li> o Software Engineering
<li>Bachelor</li> o Information Technology
<ul>
<ul>
<li>Software
<li>Software Engineering</li>
Engineering</li>
<li>Information
<li>Information Technology</li>
Technology</li>
</ul>
</ul>
</ol>
</ol>
Horizontal line
Show
Show the
the line!<hr
line!<hr />
/>
Blahblah
Blahblah

Show the line!

Blahblah
 Attach Image
<img
<img src="cover.jpg"
src="cover.jpg" align="left"
align="left" />
/> Add
Add attribute
attribute
‘align’
‘align’ to position the image. Add attribute ‘alt’
to position the image. Add attribute ‘alt’
for showing text if image is unloaded.
for showing text if image is unloaded. <img<img
src="logo.gif"
src="logo.gif" alt="Logo"
alt="Logo" width="100"
width="100" height="100"
height="100" />
/>
Add attribute ‘width’ and ‘height’ for stretching
Add attribute ‘width’ and ‘height’ for stretching
image
image to
to desired
desired size.
size.

Add attribute align to position the image. Add attribute alt for

showing text if image is unloaded. Add attribute ‘width’ and

‘height’ for streching image to desired size.
Hyperlink
Link to your other page:
Next: <a href="page2.html">Page 2</a>
Link to another site:
klik link ini <a href="http://google.com">google</a>

Link with image:

klik link pada gambar ini
<a href="http://google.com"><img src="img.png"
alt="text image" /></a>
Table
<table
<table border="1">
border="1">
<tr>
<tr> <!--
<!-- row
row 11 -->
-->
<th>aaa</th>
<th>aaa</th> <!--
<!-- col
col 11 at
at row
row 11 -->
-->
<th>bbb</th> <!-- col 2 at row
<th>bbb</th> <!-- col 2 at row 1 --> 1 -->
<th>ccc</th>
<th>ccc</th> <!--
<!-- col
col 33 at
at row
row 11 -->
-->
</tr>
</tr>
<tr>
<tr>
<td>ddd</td>
<td>ddd</td>
<td>eee</td>
<td>eee</td>
<td>fff</td>
<td>fff</td>
</tr>
</tr>
</table>
</table>
Table with merged columns / rows
<table
<table border="1">
border="1">
<tr>
<tr>
<th>aaa</th>
<th>aaa</th>
<th>bbb</th>
<th>bbb</th>
<th
<th rowspan="2">ccc</th>
rowspan="2">ccc</th>
</tr>
</tr>
<tr>
<tr>
<td
<td colspan="2">ddd</td>
colspan="2">ddd</td>
</tr>
</tr>
</table>
</table>
Exercise
Form
 Used for handling input from user

 Analogy: HTML document is a fill out form

 Usually, a form represents a specific task. Example: login, register, etc

 A Form tag can contain many tags for input with various data characteristics

<form method="..." action="...">

....
</form>

 Every form tag must specify the ‘method’ and ‘action’ attribute, to handle
the data input sent (when you submit it). In every tag for input, ‘name’
attribute must be written to map that data when processed. We will discuss
this later in Server Side Scripting
Example: Form
<form>
First name:<br />
<input type="text" name="firstname" /><br />
Last name:<br />
<input type="text" name="lastname" value="Mickey"><br /><br />
<input type="submit" value="Submit" />
</form>
Tags inside Form
single-line text field: <input type="text" />
multi-line text field: <textarea></textarea>
masked text field: <input type="password" />
single selection:
– datalist (text field with autocomplete)
– radio button: <input type="radio" name="any" /> Yes
<input type="radio" name="any" />
No
– dropdown (combo box):
<select name="grade">
<option value="A">Very good</option>
<option value="AB">Good</option>
</select>
Tags inside Form
multiple selection:
<select multiple name="grade">
<option value="A">Very good</option>
<option value="AB">Good</option>
</select>

Check box: <input type="checkbox" name="data[]" /> Coder

<input type="checkbox" name="data[]" /> Designer
File Attach: <input type="file" />
Buttons:
Submit the form: <input type="submit" value="Send"/>
Reset the form: <input type="reset" value="Reset" />
General button: <input type="button" />
Another general button: <button></button>
Tags inside Form
In <input> tag, there are many types in ‘type’
attribute

• color • range
• date • search
• datetime • tel
• datetime-local • time
• email • url
• month • week
• number
 Example: Radio Button

<input type="radio" name="gender" value="male" checked /> Male <br />

<input type="radio" name="gender" value="female" /> Female
Example: Textarea
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Example: Date
Please start my subscription on:<br />
<input type="date" name="bday" />
Example: Datalist
Favorite Color:

<input type="text" list="colors" id="favcolor"

name="favcolor" />

<datalist id="colors">

<option value="Blue">

<option value="Green">

<option value="Pink">

<option value="Purple">

</datalist>
Example: Number
Quantity (between 1 and 5):
I would like to receive <input
type="number" name="quantity" min="1"
max="5" /> copies of The HTML5 Herald
Any question?
References
Lynda.com : Web Development Foundations: Full-
Stack vs Front-End
Stanford :
http://web.stanford.edu/class/cs142/lectures.html
https://www.w3schools.com/html/default.asp
THANK YOU