Materi Pembelajaran PEMROGRAMAN WEB

(1)

Arief Nur S – Pemrograman Web 1

Materi Pembelajaran

PEMROGRAMAN WEB

1. 1. 1.

1. Profesi dalam pengembangan aplikasi webProfesi dalam pengembangan aplikasi webProfesi dalam pengembangan aplikasi web Profesi dalam pengembangan aplikasi web

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi, bagaimana dengan profesi yang berada dalam lingkungan pengembangan aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam pengembangan aplikasi web, diantaranya :

A. Web Designer A. Web Designer A. Web Designer A. Web Designer

Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan tampilan sebuah Website

B. Web Programmer B. Web Programmer B. Web Programmer B. Web Programmer

Web Programmer bertugas dalam melakukan pengcodingan atau pemograman sebuah website agar dinamis.

C. Web Administrator C. Web Administrator C. Web Administrator C. Web Administrator

Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server, baik itu mulai dari instalasi sampai kepada masalah (troubleshooting)

D. Web Master D. Web Master D. Web Master D. Web Master

Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari disain, program dan keamanan server namun tidak terlalu turut mencampuri ke masing-masing divisi, cukup dengan mempertanggun jawabkan atas jalannya suatu situs (web).

2. Sejarah web 2. Sejarah web 2. Sejarah web 2. Sejarah web

Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan yang memiliki internet, yang merupakan upaya kerja sama diatur oleh sistem standar dan aturan. Tujuan dari menghubungkan komputer bersama-sama, tentu saja, adalah untuk berbagi informasi. Ada banyak cara informasi dapat dikirimkan antar komputer, termasuk email, transfer file (File Transfer

Protocol), dan banyak layanan yang lebih khusus yang dibangun dalam layanan Internet. Metode ini standar untuk mentransfer data atau dokumen melalui jaringan dikenal sebagai protokol.

WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN : Organisation Europeenne pour la Recherche Nucleaire), Jenewa, Swiss. Pada tahun 1989 Berners-lee membuat pengajuan untuk proyek pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'World Wide Web' sudah dapat dijalankan dalam lingkungan CERN. Pada musim panas tahun 1991, WWW secara resmi digunakan secara luas pada jaringan Internet.

3. Cara Kerja Web 3. Cara Kerja Web 3. Cara Kerja Web 3. Cara Kerja Web

Bagaimana cara kerja website? Cara kerja website pada dasarnya yaitu input,

Website adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet.

Website merupakan komponen atau kumpulan komponen yang terdiri dari teks, gambar, suara, video, animasi dan lain sebagainya. Sehingga lebih merupakan media informasi yang menarik untuk dikunjungi. Semua website pasti mempunyai domain dan web server. Domain bisa kita analogikan sebagai alamat rumah, sedangkan web server sebagai rumah untuk menyimpan berbagai perabotan rumah tangga.

Bagaimana cara website bekerja?

Pertama, misal Anda ingin mencari informasi melalui mesin pencari (Search Engine) Google Tentunya terlebih dahulu menjalankan aplikasi web browser baik itu internet explorer, Mozilla, Chrome, Opera dan lain sebagainya.

Lalu ketikkan URL (Uniform Resource Locator) atau domain di web browser, misalnya

www.google.com atau google.com

Domain yang diketikkan tadi akan diterjemahkan menjadi alamat IP.

Web server menerima permintaan / request dan akan memprosesnya dan memerikan hasil data / output seperti pada gambar berikut ;

(2)

Arief Nur S – Pemrograman Web 2 4. Perangkat Pengembang Aplikasi Web

4. Perangkat Pengembang Aplikasi Web 4. Perangkat Pengembang Aplikasi Web 4. Perangkat Pengembang Aplikasi Web

Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi perangkat keras dan perangkat lunak.

A. Perangkat Keras A. Perangkat Keras A. Perangkat Keras A. Perangkat Keras

Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang sebaiknya disediakan:

 Komputer UtamaKomputer UtamaKomputer UtamaKomputer Utama, dengan operating system Macintosh, Windows, ataupun Linux. Perusahaan pengembangan web profesional cenderung berbasis Macintosh.

 Memori tambMemori tambMemori tambMemori tambahanahanahan. sebaiknya computer memiliki memori yang besar, karena dalam ahan pengembangan web cenderung kita akan membuka beberapa aplikasi sekaligus.

 Sebuah monitor besarSebuah monitor besarSebuah monitor besarSebuah monitor besar. Meskipun bukan keharusan, monitor besar memudahkan untuk desainer visual. Semakin besar monitor, semakin banyak jendela dan panel kontrol dapat terbuka pada waktu yang sama.

B. Perangkat Lunak B. Perangkat Lunak B. Perangkat Lunak B. Perangkat Lunak

Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi beberapa, diantaranya : 1. Web page authoringWeb page authoringWeb page authoring Web page authoring

Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format yang dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG” (What You See Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat, itulah yang kamu dapatkan. Jadi aplikasi ini biasanya ketika membuat tampilannya seperti yang akan dihasilkan.

Beberapa contoh aplikasi yang termasuk dalam kelompok ini :

 Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan Adobe, aplikasi ini banyak digunakan oleh pengembang web. Memiliki banyak fasilitas dan fiture.

2. EditorEditorEditorEditor

Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is What You Get”) tetapi lebih ke kode HTML.

Beberapa contoh aplikasi yang termasuk dalam kelompok ini :

 TextPad TextPad TextPad TextPad (Windows saja). TextPad adalah plain-text sederhana dan murah untuk editor kode di Windows.

(3)

Arief Nur S – Pemrograman Web 3  Teks Sublime Teks Sublime Teks Sublime Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli namun memiliki

banyak fungsi (seperti kode warna dan ikhtisar kode penuh) bagi pengembang web.

 Coda oleh Panic Coda oleh Panic Coda oleh Panic Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja yang visual, alat-alat manajemen file, dan built-in akses terminal.

 Textmate oleh MacroMates Textmate oleh MacroMates Textmate oleh MacroMates Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini memiliki alat manajemen proyek dan antarmuka yang terintegrasi dengan sistem operasi Mac. Hal ini semakin populer karena disesuaikan, kaya fitur, dan murah.

 BBEdit oleh Bare Bones BBEdit oleh Bare Bones BBEdit oleh Bare Bones BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk pengembang web banyak fitur shortcut yang besar telah membuat editor terkemuka berbasis Mac

3. Aplikasi editing gambar dan menggambar 3. Aplikasi editing gambar dan menggambar 3. Aplikasi editing gambar dan menggambar 3. Aplikasi editing gambar dan menggambar

Untuk menambahkan gambar ke halaman web, akan perlu program editing gambar. Berikut ini beberapa aplikasi yang cukup populer :

 Adobe PhotoshopAdobe PhotoshopAdobe PhotoshopAdobe Photoshop. Photoshop dapat dikatakan sebagai standar industri untuk penciptaan gambar baik dalam cetak maupun dunia web.

 Adobe Photoshop ElementsAdobe Photoshop ElementsAdobe Photoshop ElementsAdobe Photoshop Elements. Versi ini lebih ringan dari Photoshop dirancang untuk mengedit foto dan manajemen, tetapi beberapa penggemar menemukan bahwa ia memiliki semua alat yang diperlukan untuk menempatkan gambar pada halaman web

(4)

Materi Pembelajaran

Anatomi dokumen web

1. Dasar 1. Dasar 1. Dasar

1. Dasar----Dasar HTMLDasar HTMLDasar HTMLDasar HTML

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut.

2. Struktur Dasar HTML 2. Struktur Dasar HTML 2. Struktur Dasar HTML 2. Struktur Dasar HTML

HTML merupakan singkatan dari HyperText Markup Language HyperText Markup Language HyperText Markup Language HyperText Markup Language adalah sebuah bahasa

pemrograman yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser)

Fungsi HTML : Fungsi HTML : Fungsi HTML : Fungsi HTML : 1. Membuat halaman 1. Membuat halaman 1. Membuat halaman 1. Membuat halaman webwebwebweb....

Menampilkan berbagai informasi di dalam sebuah browser Internet.

2. Membuat link menuju halaman web lain dengan kode tertentu (hypertext). Struktur Dasar HTML Struktur Dasar HTML Struktur Dasar HTML Struktur Dasar HTML

<html>

<head>

<title>

disini judul dokumen html

</title>

</head>

<body>

Disini penulisan informasi web

</body>

</html>

Penjelasan struktur dasar HTML diatas :

A. Tag

Adalah teks khusus (markup) berupa dua karakter "<

<

<" dan ">

>

>", sebagai contoh <body>

adalah tag dengan nama body.

Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag

penutup(ditambahkan karakter backslash"/" setelah karakter "<

<

<").

Contoh :

Ini adalah sebuah paragraf

Keterangan :

Tag adalah tag pembuka, dan tag adalah tag penutup dari “paragraf”.

B. Element

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.

Contoh :

Ini adalah sebuah paragraf

Keterangan :

“Ini adalah sebuah paragraf “ adalah element dari tag .

C. Attribute

Attribute merupakaninformasi tambahan yang diberikan kepada tag. Informasi ini bisa

berupa instruksi untuk warna dari text, besar huruf dari text, dll.

(5)

nama-attribute=“nilai-attribut”

Setiap atribut memiliki pasangan nama/name dan nilai/value) dan ditulis dengan

name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“).

Contoh :

SMK Negeri 1 Bintan

Pe

Penjelasan :

njelasan :

1.

Merupakan tag pembuka yang telah diberi attribute.

2.

Merupakan tag penutup.

3. SMK Negeri 1 Bintan

Merupakan konten atau element.

4. align=“center”

Merupakan suatu attribute.

5. Align

Merupakan nama attribute.

6. “center”

Merupakan nilai attribute.

3. Format Text HTML

A.

A. Tag

Tag

Mendefinisikan teks tebal

Sintak :

...

Contoh :

tulisan dengan tampilan teks tebal

B. Tag

Mendefinisikan teks miring

Sintak :

….

Contoh :

tulisan dengan tampilan teks cetak miring

C. Tag

Mendefinisikan teks dengan garis bawah

Sintak :

……

Contoh :

tulisan dengan tampilan teks tercetak garis bawah

D. Tag <del>

Mendefinisikan teks dicoret

<del>

……

</del>

E. Tag

(6)

Mendefinisikan teks kecil

……

F.

F. Tag

Tag

Mendefinisikan teks di atas garis

……

Contoh :

Untuk menampilkan text 2

2

=4

Sintak :

<body>

2 2=4

</body>

G. Tag

Mendefinisikan teks di bawah garis

Sintaks :

……

Contoh :

Untuk menampilkan text H

2

Materi Pembelajaran PEMROGRAMAN WEB

Materi Pembelajaran

Materi Pembelajaran

Materi Pembelajaran

Materi Pembelajaran

PEMROGRAMAN WEB

PEMROGRAMAN WEB

PEMROGRAMAN WEB

PEMROGRAMAN WEB

Materi Pembelajaran

Materi Pembelajaran

Materi Pembelajaran

Materi Pembelajaran

Anatomi dokumen web

Anatomi dokumen web

Anatomi dokumen web

Anatomi dokumen web

<html>

<head>

<title>

disini judul dokumen html

</title>

</head>

<body>

Disini penulisan informasi web

</body>

</html>

Penjelasan struktur dasar HTML diatas :

A. Tag

A. Tag

A. Tag

A. Tag

Adalah teks khusus (markup) berupa dua karakter "<

<

<

<" dan ">

>

>

>", sebagai contoh <body>

adalah tag dengan nama body.

Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag

penutup(ditambahkan karakter backslash"/" setelah karakter "<

<

<

<").

Contoh :

<p>Ini adalah sebuah paragraf</p>

Keterangan :

Tag <p> adalah tag pembuka, dan tag </p> adalah tag penutup dari “paragraf”.

B. Element

B. Element

B. Element

B. Element

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.

Contoh :

<p> Ini adalah sebuah paragraf </p>

Keterangan :

“Ini adalah sebuah paragraf “ adalah element dari tag <p>.

C. Attribute

C. Attribute

C. Attribute

C. Attribute

Attribute merupakaninformasi tambahan yang diberikan kepada tag. Informasi ini bisa

berupa instruksi untuk warna dari text, besar huruf dari text, dll.

nama-attribute=“nilai-attribut”

Setiap atribut memiliki pasangan nama/name dan nilai/value) dan ditulis dengan

name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“).

Contoh :

< p align=“center”>SMK Negeri 1 Bintan</p>

Pe

Pe

Pe

Penjelasan :

njelasan :

njelasan :

njelasan :

1. <p align=“center”>

Merupakan tag pembuka yang telah diberi attribute.

2. </p>

Merupakan tag penutup.