< Hallo World />

@dikyarga

www.DikyArga.com

@riya_flames

Umriya Afini

fb.com/MaulanaIkhsan

Tak kenal maka ....

Kenalan

Materi - Pengenalan

HTML5
CSS3
JavaScript [ JS ]
PHP5
Konsep Front-End dan Back-End
Gambaran Proyek Akhir

H

T

M

L

iper

ext

arkup

anguage

doscom.org/university

Versi 4 - 1997

Versi 5 - 2008

sumber : www.xmcl.org/

Didukung banyak browser dan diberbagai perangkat

Fitur HTML5

Video dan Suara
Vector Graphic and Animation
Drag and Drop

Ayo Ngoding :*

* Contoh Sintaks HTML5

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>

<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

HTML Tag

<namatag>konten</namatag>

Tag Kosong

<br/>

Misal :

HTML Tag

Heading (Judul) : <H1> sampai <H6>

<h1>Ini judul I</h1>
<h2>Ini judul II</h2>
<h3>Ini judul III</h3>

Paragraf : <p>

<p>ini paragraf</p>

Link : <a>

<a href="doscom.org"> Kunjungi Website Doscom </a>

HTML Tag

Gambar : <img>

<img src="doscom-logo.png" alt="Logo Doscom" width="100" height="120">

Paragraf : <p>

<p>ini paragraf</p>

Link : <a>

<a href="doscom.org"> Kunjungi Website Doscom </a>

* src (source) ** alt (alternative)

Atribut HTML

Berisi tambahan informasi elemen tag
Format penulisan : nama = "nilai"

Lang Attribute

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Penggunaan Quote

Pakai "dua petik" atau 'satu petik' ?

<p title="Doscom 'Keren' Banget">

<p title='Doscom "Keren" Banget'>

Tabel : <table>

<table border="1" style="width:100%">
  <tr>
    <td>Diky</td>
    <td>Arga</td> 
    <td>19</td>
  </tr>
  <tr>
    <td>Umriya</td>
    <td>Afini</td> 
    <td>20</td>
  </tr>
</table>

<tr> : Table Row

<td> : Table Data

<th> : Table Headings

List

Unordered List

Ordered List

Description List

Mahdan
Eko
Anis

Bowo
Alfin
Setyadi

Item Pertama

Deskripsi item

Item Kedua

Deskripsi item

List

Ordered List

Mahdan
Eko
Anis

<ol type="1">
  <li>Mahdan</li>
  <li>Eko</li>
  <li>Anis</li>
</ol>

<ol> : Mendefinisikan Ordered List

<li> : List Item

Type yang bisa dipakai : "1", "A", "a", "I", dan "i"

List

Unordered List

Bowo
Alfin
Setyadi

<ul style="list-style-type:circle">
  <li>Bowo</li>
  <li>Alfin</li>
  <li>Setyadi</li>
</ul>

<ul> : Mendefinisikan Unordered List

<li> : List Item

style yang bisa dipakai : circle, disk, square, dan none.

List

Description List

Item Pertama

Deskripsi item

Item Kedua

Deskripsi item

<dl>
  <dt>Teh</dt>
  <dd>- Minuman nikmat dari pucuk daun teh</dd>
  <dt>Kopi</dt>
  <dd>- Minuman paling enak buat temen ngoding ato ngambar</dd>
</dl>

<dl> : Mendefiniskan Description List

<dt> : Description Term (Nama)

<dd> : Data Description

List Bersarang

<ul>
  <li>Kopi</li>
  <li>Teh
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
      <li>Jasmine tea</li>
    </ul>
  </li>
  <li>Susu</li>
</ul>

Kopi
Teh

Susu

Black tea
Green tea
Jasmine tea

Dalam List terdapat List lagi

Formulir : <form>

<form action="nama.php">
First name: <input type="text" name="namadepan">
<br>
Last name: <input type="text" name="namabelakang">
<br><br>
<input type="submit" value="Kirim">
</form>

action : memanggil file yang dikenai ketika form di Submit

<input> : Menampilkan field imputan,

type : text / radio (pilihan) / submit (tombol) ,

name : nama variabel yang dimasukin via form tersebut.

value : nilai yang di kirim ketika tombol ditekan.

<select> element [ Dropdown ]

<select name="tealinus">
<option value="jasmine">Jasmine Tea</option>
<option value="green">Green Tea</option>
<option value="black">Black Tea</option>
<option value="white">White Tea</option>
</select>

<select name="tealinus">
<option value="jasmine">Jasmine Tea</option>
<option value="green">Green Tea</option>
<option value="black" selected>Black Tea</option>
<option value="white">White Tea</option>
</select>

Detail - HTML5

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="Firefox Developer Edition">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 
</form>

<textarea> element

<textarea name="pesan" rows="10" cols="30">
Contoh isi pesan
</textarea>

C

S

ascading

tyle

heet

HTML :

Kerangka

CSS :

Penghiasnya

Sintaks CSS

H1 {
    color: blue;
    font-size=12px;
}

p {
    color: red;
    /* Ini komentar satu baris */
    text-align: center;
}

/* ini untuk 
komentar 
banyak baris */

Komentar Dalam CSS :

ID Selector

#doscom {
    text-align: center;
    color: red;
}

CSS Code :

<h1 id="doscom">
    Doscom University Keren
</h1>

HTML Code :

Class Selector

.besar {
    font-size:30px;
}

CSS Code :

<h1 id="doscom" class="besar">
    Doscom University Keren
</h1>

HTML Code :

CSS Code :

p.besar {
    font-size:30px;
}

HTML Code :

<p class="besar">
    Doscom University Keren
</p>

Grouping Selector

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

h1, h2, p {
    text-align: center;
    color: red;
}

3 Cara memasukan kode CSS

External Style Sheet

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

index.html

body {
    CSS code
}

style.css

3 Cara memasukan kode CSS

2. Internal Style Sheet

index.html

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

3 Cara memasukan kode CSS

2. Inline Styles

index.html

<h1 style="color:blue;margin-left:30px;">Doscom Keren</h1>

Multiple Style Sheets

h1 {
    color: navy;
    margin-left: 20px;
}

Eksternal CSS

Inline CSS

h1 {
    color: orange;    
}

color: orange;
margin-left: 20px;

<H1>

Multiple Style Sheets

Browser default (bawaan)
External style sheet
Internal style sheet (dalam <head>)
Inline style (dalam elemen HTML)

Urutan Prioritasnya :

CSS Background

Didalam Background kita bisa lakukan :

background-color
background-image
background-repeat
background-attachment
background-position

CSS Background

background-color :

body {
    background-color: #b0c4de;
}

HEX : "#ff0000"
RGB : "rgb(255,0,0)"
Nama Warna : "red"

Jenis nilai yang bisa dimasukan

PHP: Hypertext Preprocessor

Open Source (Gratis dan Bebas)
Server side
Berjalan di banyak platform
Mendukung web server (Apache, IIS, dll)

Taukah kamu ?

Pake PHP

Apa yang bisa di Lakukan PHP ?

Membuat Halaman Web secara Dinamis
Tambah, Edit, Delete data di Database
Mengkontrol User-access
Mengengkripsi Data
Membuat, Membuka, Melihat, Menulis, Menghapus File di Server.
.....

Sintaks Dasar PHP

<?php 
Taruh kodemu disini
?>

Simpan dengan ektensi .php ,

letakan file di folder htdocs (Server side).

<!DOCTYPE html>
<html>
<body>

<h1>Hi Doscom</h1>

<?php
echo "Hello Doscom!";
?>

</body>
</html>

index.php

echo : Mencetak ke layar

akhiri setiap statment dengan " ; "

Komentar di PHP

<!DOCTYPE html>
<html>
<body>

<?php
// Komentar 1 baris

# Ini juga komen satu baris

/*
Nah kalo ini bisa koment banyank baris
Fungsi komen adalah untuk dokumentasi
buat kita sendiri maupun orang lain
yang membaca koding kita.
*/

// bisa juga disisipkan ditengah statment
$x = 5 /* + 15 */ + 5;
echo $x;
?>

</body>
</html>

Case Sensitivity PHP

Di PHP kata kunci dalam pemprograman, seperti if, else, while, echo, dll.

Tidak (Not) case sensitive

<?php
ECHO "Eko Edogawa<br>";
echo "Kahitna<br>";
EcHo "Hamdan<br>";
?>

tapi,

Kalo variabel, dia Case Sensitive

<?php
$warna = "Biru";
echo "Langit berwarna " . $warna . "<br>";
echo "Rumahku berwarna " . $wARnA . "<br>";
echo "Mobilku berwarna " . $WARNA . "<br>";
?>

Selanjutnya kita bakal belajar Variabel .....

Client Server

Web Server

Request doscom.org

Sent html files

Proyek Akhir

My Todo's

< Terimakasih />

Slides.com/dikyarga

Doscom University - Web Programming - 1

By Diky Arga

Doscom University - Web Programming - 1

Presentasi pengenalan pemprograman web di acara Doscom University 2015.

1,311

< Hallo World />

@dikyarga

www.DikyArga.com

@riya_flames

Umriya Afini

fb.com/MaulanaIkhsan

Tak kenal maka ....

Kenalan

Materi - Pengenalan

HTML5

CSS3

JavaScript [ JS ]

PHP5

Konsep Front-End dan Back-End

Gambaran Proyek Akhir

H

T

M

L

iper

ext

arkup

anguage

Versi 4 - 1997

Versi 5 - 2008

Didukung banyak browser dan diberbagai perangkat

Fitur HTML5

Video dan Suara

Vector Graphic and Animation

Drag and Drop

Ayo Ngoding :*

HTML Tag

Tag Kosong

HTML Tag

HTML Tag

Atribut HTML

Lang Attribute

Penggunaan Quote

Tabel : <table>

List

List

List

List

List Bersarang

Formulir : <form>

<select> element [ Dropdown ]

Detail - HTML5

<textarea> element

C

S

S

ascading

tyle

heet

HTML :

Kerangka

CSS :

Penghiasnya

Sintaks CSS

ID Selector

Class Selector

Grouping Selector

3 Cara memasukan kode CSS

External Style Sheet

3 Cara memasukan kode CSS

2. Internal Style Sheet

3 Cara memasukan kode CSS

2. Inline Styles

Multiple Style Sheets

Multiple Style Sheets

CSS Background

CSS Background

PHP: Hypertext Preprocessor

Open Source (Gratis dan Bebas)

Server side

Berjalan di banyak platform

Mendukung web server (Apache, IIS, dll)

Taukah kamu ?

Apa yang bisa di Lakukan PHP ?

Sintaks Dasar PHP