Analisa Database untuk Pembuatan Aplikasi

Pemrograman Web 1

Materi

● HTML

● Object HTML

● CSS

● CSS Layouting

● Javascript

● jQuery

● PHP Dasar

● Konsep Database & MySQL

● PHP & MySQL

● Analisa Database untuk Pembuatan Aplikasi

● Pembuatan Aplikasi HTML

HTML

● HTML

– Hypertext Markup Language

● Tag

– Penanda untuk membuat efek pada halaman web
– Ada yang berpasangan, ada yang tidak
– Syntax: _●

Awal: “<” + nama_tag + “>” _● Akhir: “</” + nama_tag + “>”

● Attribute

– Properties pada tag HTML _●

● Penamaan file

– Menggunakan extensi .html atau .htm

Struktur HTML

Tag minimal:

– <html> <head> </head> <body> </body>

</html>

Heading | Hn

● Untuk membuat judul

● Nilai n: 1 – 6

● Attribute:

– Align:

● center, left, right

<H1>Heading dengan nilai N = 1</H1> <H4 align=”center”>Heading 4 dengan attribute align = center</H4>

Paragraph | P

●

Untuk membuat paragraph

●

Attribute:

– Align:

● center, left, right

<P>default paragraf</P> <P align=”right”>Paragraf berikutnya rata kanan</P>

List

●

Ordered List | OL

●

Unordered List | UL

– List Items | LI

Ordered List | OL

●

Untuk membuat Numbering

●

Attribute: Type:

– ●

1, A, a, I, i <h1>List Terurut</h1> <ol type="i"> <li>Nomor Satu</li> <li>Nomor Dua</li> </ol>

Unordered List | UL

● Untuk membuat Bullets

● Attribute:

– ●

Type:

disc – bulatan hitam ● square – kotak

● circle – bulatan kosong

<h1>List Tidak Terurut</h1> <ul type="square"> <li>Nomor Satu</li> <li>Nomor Dua</li> </ul>

Characters Formatting

● B – Cetak Tebal

● I – Cetak Miring

● U – Garis Bawah

● S – Coretan

● TT, PRE – Fixed font

● SUP – Superscript

● SUB – Subscript

● BIG – Membesarkan

●

<h1>Characters Formatting</h1> Tulisan normal<br> Cetak <b>tebal</b><br> Cetak <b><i><u>tebal italic underline</u></i></b><br> Discount: <s>Rp. 5000,-</s> Rp. 1000,-<br> <pre> Tulisan fixed font </pre> X<sup>2</sup> = 4. X = ?<br> H<sub>2</sub>O – Air<br> <big>Besar</big>Normal<small>Kecil</small>

SMALL – Mengecilkan

Gambar | IMG

● Menampilkan gambar pada layer depan

●

Attribute

– Src: url
– Align: center, left, right, justify, top, bottom, middle, baseline
– Border: pixel, persentase
– Width: pixel, persentase
– Height: pixel, persentase

<img src="gambar1.jpg" border="1"><br> <img src="http://www.anu.com/gambar2.jpg" width="50%"><br> <img src="gambar1.jpg" align="left">isi website disini

Anchor | A

● Membuat link untuk:

Menuju webpage itu sendiri atau webpage lain

– Melakukan download
– _●

Mempermudah pengiriman e-mail

– Attribute:

href – URL

– target – Target window yang dituju (_self, _blank, _top, _parent)
– name – Nama label
– title – tooltips
– <h1>Anchor</h1> <a href="page2.html" title="goto page 2...">Go To Page 2</a><br>
<a href="http://tahara.web.id" target="_blank">Website Tahara</a><br>
<a href="http://tahara.web.id/download/file.zip">Download</a><br> <a href="mailto:rizky.tahara@gmail.com">Sent mail to tahara</a>

Table | TABLE

● Membuat tabel berisi data

–
Misconception: Table digunakan untuk membuat layout
website.

●

Additional Tag

– CAPTION – Judul Tabel
– TR – Table Row (Baris Tabel)
– TH – Table Heading (Judul Kolom)
– TD – Table Data (Data / Cell)

Table | TABLE (cont.)

<h1>Table</h1> <table border="1"> <caption>Daftar Mahasiswa</caption> <tr> <th>NIM</th> <th>Nama</th> </tr> <tr> <td>1234567890</td> <td>Si Anu</td> </tr> <tr> <td>0987654321</td> <td>Si Itu</td> </tr> </table> Object HTML

Form | FORM

● Area yang menampung objek HTML lain untuk dapat diproses secara dinamis

● Attribute:

Name – nama objek

– Action – berisi URL file yang melakukan proses data secara dinamis
– Method – metode pengiriman data ( berisi GET atau POST)
– <form name="frm_html" method="post" action="proses.php"> Semua object html ditaruh pada area ini untuk di proses oleh file proses.php secara posting (post) </form>

Input | INPUT

● Digunakan untuk mendapatkan entry dari user

● Attribute:

– Name – nama objek
– Type – tipe input _●

Text – input berupa alpanumeric 1 baris _● Password – input berupa password _● Hidden – objek tidak terlihat _● Radio – objek radio button _● Checkbox – objek checkbox _● TOMBOL:

– Submit – memproses data pada form menuju fille yang ditunjuk attribute action
– Button – tombol tanpa action (gabung dengan javascript)
– Reset – melakukan reset data pada form yang ada

● Value – nilai awal

Input | INPUT (cont.)

<form name="frm_html" method="post" action="proses.php"> NIM: <input type="text" name="txt_nim" value="1234567890"><br> <input type="hidden" name="txt_type" value="mahasiswa"> Nama: <input type="text" name="txt_nama"><br> Password: <input type="password" name="txt_password"><br> Jenis Kelamin: <input type="radio" name="opt_jenkel" value="P" checked>Pria <input type="radio" name="opt_jenkel" value="W">Wanita<br> Hobby:<br>

<input type="checkbox" name="chk_hobby" value="Basket">Bola Basket<br>

<input type="checkbox" name="chk_hobby" value="Volly">Bola Volly<br> <input type="checkbox" name="chk_hobby" value="Buku">Baca Buku<br> <input type="checkbox" name="chk_hobby" value="Internet">Internet<br> <input type="submit" name="btn_kirim" value="Kirim Data!"> </form>

Select | SELECT

● Digunakan untuk membuat dropdown option

● Attribute:

– Name – nama objek
– Multiple – membuat pilihan dapat dipilih lebih dari satu

● Additional Tags

– OPTION – menambahkan item pilihan
– Attribute:

● Value – nilai item

Select | SELECT (cont.)

<form name="frm_html" method="post" action="proses.php"> Agama: <select name="cmb_agama"> <option value="I">Islam</option> <option value="P">Protestan</option> <option value="K">Katolik</option> <option value="B">Budha</option> <option value="H">Hindu</option> </select><br> Hobby: <select name="cmb_hobby" multiple> <option value="B">Basket</option> <option value="V">Volly</option> <option value="C">Baca Buku</option> <option value="I">Internet</option> </select><br> <input type="submit" name="btn_kirim" value="Kirim Data!"> </form>

Textarea | TEXTAREA

● Digunakan untuk membuat textbox lebih dari 1 baris

● Attribute:

Name – nama objek

– Cols – kolom (satuan karakter)
– Rows – baris (satuan karakter)
– <form name="frm_html" method="post" action="proses.php"> Komentar: <textarea name="txt_komen" cols="50" rows="7">berikan komentar anda...</textarea> <br> <input type="submit" name="btn_kirim" value="Kirim Data!">

</form> CSS

CSS

● Kumpulan format yang digunakan untuk mengatur desain website sehingga dapat lebih flexibel.

● Elemen Dasar

– Selector

● Tag / elemen pada html

– Declaration

● Perintah CSS yang digunakan untuk menjelaskan desain selector; terdiri dari:

– Property
– Value

● Format Penulisan

– selector { property: value; }

Penulisan CSS

● Inline CSS

<p style='color: red'>warna merah</p> ●

Internal / Embedded CSS <style> p { color: red; }

</style> ●

External CSS <link rel='stylesheet' type='text/css' href='namafile.css'>

Jenis CSS

●

Font CSS

●

Text CSS

●

Background CSS

●

Border CSS

●

Padding CSS

●

Margin CSS

Font CSS

Property Value Property Value font font-family font-size xx-small, x-small, small, font-size-adjust medium font-stretch large, x-large, xx-large, font-size larger, smaller, font-style length, percentage font-variant font-style normal, italic, oblique font-weight font-variant normal, font-family font family name small-caps generic family font name font-weight normal, bold, bolder, font-size-adjust none lighter, number 100, 200, 300, 400, 500, font-stretch ultra-condensed 600, 700, 800, 900 extra-condensed condensed semi-condensed normal semi-expanded expanded ultra-expanded wider narrower

Font CSS (cont.)

<html> <head> <title>Font CSS</title> <style> h1{ font-family: Verdana, Tahoma; font-size: 12pt; } p{ font: 14pt Georgia small-caps bold; } </style> </head> <body> <h1>Judul Berita</h1> <p> isi berita disini (paste 30x) </p> <h1>Judul Artikel</h1> <p> isi artikel disini (paste 30x) </p> </body> </html>

Text CSS

Property Value color color contants, hexadecimals, rgb(), rgba() direction ltr,rtl letter-spacing normal, length text-align left, right, center, justify text-decoration none, underline, overline, line-through, blink text-indent length, percentage text-shadow none, x-offset y-offset blur-radius color text-transform none, capitalize, uppercase, lowercase white-space normal, pre, nowrap word-spacing normal, length

Text CSS (cont.)

<html> <head> <title>Text CSS</title> <style> h1{ font-family: Verdana, Tahoma; font-size: 12pt; color: red; text-align: center; text-decoration: underline; } p{ font: 14pt Georgia small-caps bold; letter-spacing: 3px; word-spacing: 20px; } </style> </head> <body> <h1>Judul Berita</h1> <p> isi berita disini (paste 30x) </p> </body> </html>

Background CSS

Property Value background background-attachment, background-color, background-image, backgound-position, background-repeat background-attachment scroll, fixed background-color color constant,

rgb(), rgba(), hexadecimal,

transparent background-image url(), none background-position left, center, right, top, bottom,

percentage, fixed position

background-repeat repeat, repeat-x, repeat-y, no-repeat

Background CSS (cont.)

<html> <head> <title>Background CSS</title> <style> body{ background-color: yellow; background-image: url('images/bg.png'); background-attachment: fixed; } h1{ background-color: green; } p{ background: url('images/bg.png') bottom right no-repeat; } </style> </head> <body> <h1>Judul Berita</h1> <p> isi berita disini<br> (paste 30x) </p> </body> </html>

Border CSS

Property Value border[-position] border-color, border-style, border-width border[-position]-color color constant, rgb(), hexadecimal border[-position]-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border[-position]-width thin, medium, thick, length

● [-position]: top

– right
– bottom
–

Border CSS (cont.)

<html> <head> <title>Border CSS</title> <style> h1{ border-color: red; border-width: 1px; border-style: solid; } p{ border: 1px solid red; } blockquote{ border-left: 10px solid blue; } </style> </head> <body> <h1>Judul Berita</h1> <p> isi berita disini<br> (paste 30x) <blockquote>Kutipan disini...</blockquote> </p> </body> </html>

Padding CSS

● [-position]:

Property Value padding[-position] length, percentage

– top
– right
– bottom
– left

Padding CSS (cont.)

<html> <head> <title>Padding CSS</title> <style> h1{ border: 1px solid blue; padding-top: 20px; } p{ border: 1px solid red; padding: 20px 15px 10px 5px; } </style> </head> <body> <h1>Judul Berita</h1> <p> isi berita disini (paste 30x) </p> </body> </html>

Margin CSS

● [-position]:

Property Value margin[-position] length, percentage

– top
– right
– bottom
– left

Margin CSS (cont.)

<html> <head> <title>Border CSS</title> <style> h1{ border: 1px solid blue; padding-top: 20px; margin-right: 30px; } p{ border: 1px solid red; padding: 20px 15px 10px 5px; margin: 30px 20px 10px 5px; } </style> </head> <body> <h1>Judul Berita</h1> <p> isi berita disini (paste 30x) </p> </body> </html>

Custom Selectors | Class

●

Menerapkan desain custom yang dibuat sendiri

●

Penulisan Nama desain yang tidak terpaku pada tag HTML

– Menggunakan titik sebelum nama desain
– ●

Contoh:

.my_class { font: 10pt Tahoma bold; }

Custom Selectors | Class (cont.)

<html> <head> <title>Class</title> <style> .my_class{ font-family: Tahoma; font-size: 10pt; font-weight: normal; color: red; } .my_class1{ border: 4px solid blue; } </style> </head> <body> <h1 class='my_class'>Judul</h1> <p>paragraf standar</p> <p class='my_class'>efek class my_class</p> <p class='my_class my_class1'>efek class my_class my_class1</p> </body> </html>

Custom Selectors | ID

●

Menerapkan desain custom yang dibuat sendiri

●

Unique

●

Penulisan

–
Nama desain yang tidak terpaku pada tag HTML
– Menggunakan pagar sebelum nama desain

●

Contoh:

#my_id { font: 10pt Tahoma bold; }

Custom Selectors | ID (cont.)

<html> <head> <title>ID</title> <style> #kotak{ border: 1px solid red; } p#kotak1{ border: 2px solid blue; } </style> </head> <body> <h1 id='kotak'>Judul</h1> <p>paragraf standar</p> <p id='kotak'>efek class kotak</p> <p id='kotak1'>efek class kotak1</p> </body> </html> CSS Layouting

Table Less Layout

●

Membuat layout website tanpa menggunakan tag table maupun tag frame

●

Menggunakan CSS dengan tag DIV, attribute ID dan Class

Layout 1 Kolom

<html> <head> <link rel="stylesheet" type="text/css" href="real1.css"> </head> <body> <center> <div id="root"> <div id="header"> <h1>My Personal Web</h1> </div> <div id="navigation"> Home | FAQ | About </div>

Layout 1 Kolom (cont.)

body { font: 11pt Tahoma, Verdana; background: #5d5d5d; } #root { width: 960px; text-align: left; } #header { background: #806d59; color: #edebda; text-shadow: 1px 1px 1px #5d5d5d; padding: 20px 10px; font-family: "Times New Roman"; } #header h1 { padding: 0; margin: 0; }

#navigation { background: #a89888; padding: 20px 10px; } #content { background: #fff; padding: 20px 10px; } #content h3 { font-weight: lighter; padding: 0; margin: 0; } #footer { background: #806d59; padding: 20px 10px; }

Layout 2 Kolom

●

Demokan pembuatan layout 2 kolom

– https://student.budiluhur.ac.id
– Pilih salah satu themes dari themeforest.net

Javascript

Pendahuluan

●

Digunakan untuk membuat halaman web dinamis

●

Simple dan ringan

●

Berjalan di Client Side Script

●

Disematkan pada halaman HTML

●

Compiler sudah ada pada setiap Browser

Cara Penulisan

● Menggunakan tag <script>

●

Sebelum tag akhir BODY

// statement javascript </script> </body> </html>

Komentar

●

// statement javascript;

●

/* statement javascript;

/ </script>

Variable

● Untuk menampung data sementara

● Bersifat volatile

● Cara penulisan:

– Case sensitive
– Dimulai menggunakan huruf atau underscore
– Tidak boleh ada spasi

</script>

Operator

● Aritmatika

– Untuk perhitungan matematika

● Pembanding

– Untuk mengembalikan nilai dalam bentuk true atau false

● Penambahan/Pengurangan terstruktur

– Untuk penambahan/pengurangan secara teratur

● Logika

– Untuk melakukan perbandingan logic

● String

– Untuk melakukan penggabungan antara 2 tipe data string

Operator (cont.)

●

Aritmatika

Operator Operasi Contoh

Penjumlahan

Pengurangan

Perkalian

Pembanding

== Sama a == 2

!= Tidak sama a != 2

< Lebih kecil a < 2

<= Lebih kecil atau sama dengan a <= 2 >= Lebih besar atau sama dengan a >= 2

a + b

a – b

a * b / Pembagian a / b

% Modulus (sisa pembagian) a % b

●

Operator Operasi Contoh

> Lebih besar a > 2

Operator (cont.)

●

Penambahan / Pengurangan Terstruktur

Operator Operasi

a Pre Increment a++ Post Increment --a Pre Decrement

●

Logika

Operator Operasi Contoh

&& Benar, jika keduanya bernilai benar a && b || Benar, jika salah satu bernilai benar a || b

! Benar jika pernyataan salah !a ●

String Operator Operasi Contoh

txt1=“helo, “ + “rizky”

Statement Kendali

● Pengandaian

– If
– Switch

●

Perulangan

– Do
– While
– For

If

if (expresi) { statement_if; } elseif (expresi) { statement_elseif; } else { statement_else; }

} }else if(a==2){ </script> alert("dua"); }else if(a==3){

}else{ if(a > b){ alert("> 3"); alert("a lebih besar dari b");

} } else { </script> alert("b lebih besar dari a");

} </script>

Switch

… break; default: default: alert("> 3"); statement_default; break; break;

} </script> }

Do

do{ statement_do; … }while(expresi);

While

while (expresi) { statement_while; … }

For

for (nilai_awal, nilai_akhir, perhitungan_aritmatik) { statement_for; … }

</script>

Function

function nm_fungsi (parameter1, parameter2, …){ statement_fungsi; … return nilai_return; }

Function (cont.)

<html> <head></head> <script> function hitung(a, b){ c = a + b; alert("Jumlah " + a + " ditambah " + b + " =" + c); } </script> <body onLoad='hitung(5, 4);'> Contoh Fungsi pada Javascript<br><br> <input type='button' value='Tambah' onClick='hitung(5, 4);'> </body> </html> jQuery

Pendahuluan

●

Library dalam memudahkan pemanfaatan Javascript

●

Ringan Ukuran file sekitar 32kB

– ●

CSS3 Compatible

●

Cross Browser

Install jQuery

●

Download

– http://jquery.com/download/

●

Bower

– bower install jquery

●

CDN

– <script src="http://code.jquery.com/jquery-versi.min.js"></script>

Syntax

$(selector).action(); → $ jQuery

– → selector CSS Selector
– → action() jQuery Function
– $(this).hide(); $("p").hide(); $(".test").hide(); $("#test").hide();

Document Ready

$(document).ready(function(){ // jQuery methods go here...

}); $(function(){ // jQuery methods go here...

});

Selector

●

Memanipulasi element HTML

●

Menemukan element HTML berdasarkan id,

class, tipe, attribute, value, dll

Selector | element

<!DOCTYPE html> <html> <head>

<p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body>

</html>

Selector | #id

<!DOCTYPE html> <html> <head>

Selector | .class

<!DOCTYPE html> <html> <head>

Selector (cont.)

● $(“*”)

● $(this)

● $(“p.intro”)

● $(“p:first”)

● $(“ul li:first-child”)

● $(“[href]”)

● $(“a[target='_blank']”)

● $(“:button”)

● $(“tr:even”)

● $(“tr:odd”)

Events

●

Merespon kegiatan user pada halaman web

– Contoh:

● Saat user menggerakan mouse

●

Saat user melakukan klik pada elemen HTML

Mouse Events Keyboard Events Form Events Document Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload

Events | Syntax

●

Hampir semua DOM events adalah jQuery method

<!DOCTYPE html> <html> <head>

Events | on() method

●

Menggabungkan beberapa events pada element

$("p").on("click", function(){ $(this).hide(); }); $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });

Events | on() method (cont.)

<!DOCTYPE html> <html> <head>

Events | on() method (cont.)

<!DOCTYPE html> <html> <head>

Effects | Hide & Show $(selector).hide(speed,callback); $(selector).show(speed,callback);

Effects | Hide & Show (cont.)

<!DOCTYPE html> <html> <head>

Effects | Toggle $(selector).toggle(speed,callback);

Effects | Toggle (cont.)

<!DOCTYPE html> <html> <head>

HTML | text(), html(), val()

● → text() isi text yang ada pada element HTML

● → html() isi yang terdapat pada element HTML

(termasuk tag HTML) ●

→ val() value dari object HTML

HTML | text(), html(), val() (cont.)

<!DOCTYPE html> <html> <head>

HTML | text(), html(), val() (cont.)

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){

return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";

}); }); }); </script> </head> <body>

<p id="test1">This is a <b>bold</b> paragraph.</p> <p id="test2">This is another <b>bold</b> paragraph.</p> <button id="btn1">Show Old/New Text</button> <button id="btn2">Show Old/New HTML</button>

</body> </html>

HTML | Add

●

→ append() menambahkan content di akhir

●

→

prepend() menambahkan content di awal

●

→ after() menambahkan content setelah element

●

→

before() menambahkan content sebelum

element

HTML | Add

●

→ append() menambahkan content di akhir

●

→

prepend() menambahkan content di awal

●

→ after() menambahkan content setelah element

●

→

before() menambahkan content sebelum

element

HTML | Add (cont.)

<!DOCTYPE html> <html> <head>

HTML | Add (cont.)

<!DOCTYPE html> <html> <head>

HTML | Remove

●

→ remove() menghapus element dan sub child

●

→ empty() menghapus child element dari element

HTML | Remove (cont.)

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#empty").click(function(){ $("#div1").empty(); }); $("#remove").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;"> This is some text in the div.

<p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button id="empty">Empty the div element</button> <button id="remove">Remove div element</button> </body> </html> PHP Dasar

Sekilas PHP

● PHP

– PHP: PHP Hypertext Preprocessor
– Rasmus Lerdorf
– Open Source
– Server Side Script
–

● Zend

– Zend (Zeev Suraski, Andi Gutmans)
–

Kelebihan PHP

● File Upload

● HTTP Cookie

● Akses Database

● HTTP Authentification

● Regular Expression

● Akses File

● Error Handling

● Membuat file PDF

● Socket Programming

Konsep Server Side Script

●

[bagan server side script]

Tools

● Web Server

– Apache (http://www.apache.org)
– IIS – Internet Information System
– nginx

● Web Browser

– IE – Internet Explorer
– Mozilla Firefox
– Konqueror
– Safari

●

Editor

– Macromedia Dreamweaver, Front Page
– Notepad, Editplus, Kate, Kwrite

Instalasi PHP

●

Easy way

– Install XAMPP
– Tidak cocok untuk production server
– Banyak security hole

●

Bloody way

– Install PHP, Apache, MySQL secara manual
– Cocok untuk production server

Documentroot

●

Folder dimana user hanya dapat mengakses

file dan direktory didalamnya saja

●

Web server hanya akan memberikan respon

untuk file yang hanya ada di documentroot

●

Dimana Documentroot? httpd.conf

– ●

Pada xampp terdapat di folder: C:\xampp\apache\xxxxxx\conf\httpd.conf

Tag PHP

<?php statement_php;

phpinfo() info.php

<?php phpinfo(); ?>

Komentar

● Single line

# // ●

Multi line /* … */ komentar.php

<?php # echo "Hello"; // echo "Hello"; /* echo "hello"; echo "hello juga";

/ ?>

Variable

<?php $nama="Rizky Tahara Shita"; $angka="28"; echo $nama . " $angka"; ?> variable.php

●

Untuk menyimpan data ● Penulisan:

– Diawali tanda $
– Panjang tidak terbatas
– Setelah $, diawali oleh huruf atau garis bawah
– Case sensitive
– Tidak boleh ada spasi

Tipe Data

● Integer

● Float

● String

● Array

● Object tax.php