Pengenalan Pemrograman Web

Juli 14, 2022

Pengenalan Pemrograman Web

BAB 1

KONSEP TEKNOLOGI DAN FORMAT TEKS PADA APLIKASI WEB

A. Konsep Teknologi Aplikasi Web

Aplikasi web diterjemahkan sebagai aplikasi yang diakses menggunakan web browser melalui jaringan internet atau intranet. Aplikasi web sebagai sebuah perangkat lunak komputer yang dikodekan dalam bahasa pemrograman yang mendukung perangkat lunak berbasis web, seperti HTML, JavaScript, CSS, Ruby, Python, Php, Java, dan bahasa pemrograman lainnya.

1. Konsep WWW

World Wide Web (WWW) dikembangkan menjadi pusat pengetahuan dan budaya manusia sebagai kolabolator lokasi di dunia maya untuk berbagi ide dan semua aspek dari proyek umum melalui internet. WWW (World Wide Web) pada umumnya dikenal sebagai web, yakni sistem dokumen hypertext yang bisa diakses melalui internet. WWW sebagai kumpulan server web dari seluruh dunia memiliki kegunaan dalam menyediakan data dan informasi untuk digunakan bersama. Melalui web, para pengguna internet dapat mengakses informasi-informasi yang tidak hanya berupa teks, tetapi juga berupa gambar, suara, video, dan animasi.

2. Macam-macam Browser

Flock
Goggle Chrome
Internet Explorer
Konqueror
Links
Mozilla Firefox
Mozilla SeaMonkey
NetScape
Opera
Safari
Shiira
Slim Browser
Wyzo

3. Konsep Web Server

Web server identik dengan sebuah software yang memberikan layanan berbasis data dan berfungsi menerima dari HTTP atau HTTPS pada klien yang dikenal, yang biasanya dikenal dengan nama web browser. Web server berfungsi untuk mengirimkan kembali hasilnya dalam bentuk beberapa halaman web dan umumnya berbentuk dokumen HTML. Fungi utama web server adalah untuk melakukan atau transfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan lain-lain.

4. Macam-macam Software

a. Web Server Berbayar

- Microsoft Internet Service (IIS)

- LiteSpeed

b. Web Server Gratis

- Apache

- Nginx

- Apache Tomcat

- Lighttpd

- AMPPS

- XAMPP Control Panel

5. Macam-macam Text Editor

Adobe Dreameaver
Araneae
ATPad
Crimson Editor
EditPad Lite
Netbeans
Notepad
Notepad++
Sublime-text
Google Web Desaigner

6. Tool Pengembang Web

Tool atau peralatan yang identik dengan perangkat lunak yang digunakan dalam proses pengembangan website. Tool dalam pengembangan aplikasi menjadi bagian penting karena sangat membantu dan mempersingkat proses pengembangan. Pemilihan tool yang tepat dapat memberi keuntungan bagi develper karena menghemat waktu, tenaga, dan pekerjaan cepat selesai.

B. Format Teks Pada Halaman Web

HTML identik dengan bahasa standar yang dipakai pada halaman web. Halaman-halaman web bisa dibuat dengan menggunakan HTML. Browser dapat memahami isi suatu dokumen yang berasal dari Web Server karena HTML digunakan sebagai standar.

1. Struktur Dasar HTML

DTD atau DOCTYPE
Tag <html>
Tag <head>
Tag <Title>
Tag <body>

2. Versi HTML

Versi HTML 1
Versi HTML 2
Versi HTML 3
Versi HTML 4
Versi HTML 5

3. Fungsi Berbagai Tag Pada HTML

Fungsi pada HTML identik dengan susunan dari tag penutup sampai tag penutup serta didefinisikan oleh tag pembuka, lalu dilanjutkan dengan konten lalu diakhiri dengan tag penutup. Semua tag-tag pembentuk halaman web ditulis dalam sebuah file yang nanti diletakkan pada web server, kemudian diakses menggunakan browser. Kode-kode atau tag-tag HTML yang diakses disimpan dalam sebuah atau beberapa file yang biasanya berekstensi .htm atau .html.

4. Format Teks Dalam HTML

Format teks pada HTML digunakan untuk membuat teks dokumen yang dapat memberikan kemudahan dalam menulis teks. Web Browser akan menampilkan beberapa tag visual. Tampilan visual yang sama bisa didapat dengan CSS. Untuk mendefinisikan suatu singkatan dalam HTML menggunakan tag acronym.

BAB 2

FORMAT TABEL DAN FORMAT MULTIMEDIA PADA HALAMAN WEB

A. Format Tabel pada Halaman Web

1. Tag-tag Tabel dalam HTML

Tag <table> (digunakan untuk memulai tabel)
Tag <tr> (singkatan dari tabel row, digunakan untuk membuat baris dari tabel)
Tag <td> (singkatan dari tabel data, digunakan untuk menginput data ke tabel)

2. Elemen Table Tbody, Thread, Tfoot, Tr, Th, dan Td

Elemen Tbody digunakan untuk mengelompokkan konten atau isi yang terletak pada bagian tengah (tubuh) sebuah tabel.
Elemen Thead digunakan untuk mengelompokkan isi atau konten yang berada dibagian atas (kepala) pada sebuah tabel.
Elemen Tfoot digunakan untuk mengelompokkan isi atau konten yang berada dibagian bawah (kaki) pada sebuah tabel.
Element TR (Table Row) pada element TR, terdapat element TH dan TD dengan atribut dengan atribut nya. Element TR mendefinisikan baris pada tabel dan elemen ini harus berada di dalam elemen table.
Element TH(Table Head) dan TD (Table Data) element TH dan TD merupakan informasi pada tabel. TH mendefinisikan sebagai header dan TD mendefinisikan sebagai data pada table. Elemen TH dan TD ini harus terletak di dalam elemen TR.

3. Cellpadding dan Cellspacing

Cellpadding digunakan untuk menentukan jarak spasi antara dinding sel dan isi sel. Cellspacing digunakan untuk menentukan jarak spasi antarsel.

4. Border

Border digunakan untuk membuat bingkai pada tabel dengan menentukan tebal bingkai tersebut.

5. Colspan dan Rowspan

Colspan berarti penggabungan beberapa kolom sel menjadi satu sel, sedangkan rowspan berarti penggabungan beberapa baris sel menjadi satu baris sel

B. Format Multimedia pada Halaman Web

1. Tag Menampilkan Gambar

Elemen img merupakan elemen yang bersifat self-contained (tidak memiliki tag penutup) Elemen img juga harus mempunyai atribut src, yang dapat digunakan dengan 2 metode, yaitu dari tempat penyimpanan gambar dan URL gambar tersebut.

2. Tag Untuk Audio

Elemen audio digunakan untuk tujuan tersebut sama seperti menggunakan elemen img dengan memberikan atribut src.

Sementara itu, untuk menampilkan elemen audio anda harus menambahkan atribut controls pada elemen sebagai berikut.

3. Tag Untuk Video

Atribut yang dapat digunakan pada element audio juga digunakan pada elemen video sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format. Berikut ini prosedur untuk menambahkan video.

</video>

BAB 3

FORMAT KAITAN DAN FORMAT FORMULIR PADA HALAMAN WEB

A. Format Kaitan pada Halaman Web

Hyperlink adalah sebuah fungsi khusus untuk menghubungkan setiap masing-masing halaman website satu sama lainnya atau ke website lainnya. Jika pengunjung website sedang mengeklik suatu kata gambar yang mengandung hyperlink, ia akan diarahkan untuk menuju ke alamat URL yang ada di dalam hyperlink tersebut.

1. Konsep Hyperlink dalam HTML

Link berguna untuk menghubungkan antardokumen HTML. Link identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan.

Jenis Link

- Link Absolut

Link absolut adalah link yang mengarah langsung pada website tertentu, dimana sebuah dokumen dikunci pada alamat valid sebuah website dan tidak tergantung pada direktori lokasi dokumen html berada. Oleh sebab itu, alamat dapat digunakan pada website lain selama alamat tersebut masih valid.

- Link Relatif

Link relatif adalah link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa diawali dengan alamat domain website tersebut.

Tag-tag untuk Hyperlink

Link dalam HTML di tandai dengan Tags <A> anchor. Link tags identik dengan sebuah tags HTML yang di gunakan untuk menghubungkan dokumen satu dengan dokumen lainnya yang bersumber dari dalam ( internal ) maupun dari luar external.

2. Format Formulir pada Halaman Web

Form dapat digunakan untuk berbagai keperluan, seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari user, menawarkan barang/jasa secara online, dan sebagainya.

a. Konsep Formulir dalam HTML

Form adalah salah satu bentuk halaman web yang digunakan untuk menerima perintah masukan dari user yang diolah dalam bahasa pemrograman web baik secara server side scripting menggunakan PHP atau JSP maupun client side scripting(javascript).

b. Penggunaan Tags Form

Form HTML digunakan untuk memilih berbagai macam inputan yang disediakan. Data bisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut ini elemen-elemen yang disediakan oleh HTML.

Elemen Form Button
Elemen Form Reset dan Input Submit

c. Form Option

<Form> merupakan formulir yang digunakan sebagai perantara dalam memasukkan data ke server. Elemen form harus membungkus seluruh elemen masukan informasi agar dapat dibaca oleh aplikasi web. Setiap elemen form dalam suatu halaman web harus memiliki atribut name yang digunakan sebagai pengenal dari nama elemen tersebut.

d. Metode Get dan Post

Protokol HTTP menyediakan dua metode dalam melakukan permintaan pengiriman data bentuk HTML, yaitu metode GET dan metode POST. Sementara itu, permintaan HTTP terdiri atas dua bagian, yaitu sebuah header yang berisi sekumpulan metadata global mengenai kemampuan browser dan body yang dapat berisi informasi yang diperlukan ke server untuk memproses permintaan khusus.

a. Metode GET

Identik dengan metode yang digunakan oleh browser untuk meminta server mengirim kembali resource yang diberikan. Dalam hal ini, browser mengirimkan sebuah body kosong. Body kosong sehingga jika formulir dikirim menggunakan metode ini, data yang dikirim ke server ditambahkan ke URL.

b. Metode POST

adalah POST akan mengirimkan server permintaan respons dengan memperhitungkan data yang tersedia. Form yang dikirim dengan menggunakan data metode POST akan ditambahkan dalam body dari HTTP yang direquest.

e. Tipe-Tipe Inputan dalam Form ( Text, Password, Radio, Checkbox, Hidden, Button, Submit, dan File )

Form HTML digunakan untuk memilih sebagai macam data yang disediakan dalam bentuk text area, input teks, pilihan radio button, check box, dan lain-lain. Bentuk input tersebut dikemas elemen dalam tag-tag form.

1. Komponen Textarea Multiline

2. Komponen Input Text Password

3. Komponen Input Text

4. Form Menggunakan Input Hidden

5. Komponen Entri Pilihan

f. Link dalam Form

Penggunaan link pada HTML, yaitu untuk menghubungkan dokumen HTML tersebut ke halaman lain yang merupakan alamat tujuan. Link digunakan sebagai penghubung antara satu halaman dengan halaman lainnya. Link merupakan teks atau gambar yang terkait dengan suatu alamat tertentu.

1. Penggunaan Tag <a>

2. Atribut id

3. Atribut Title