Web Programming
Web Programming
WEB PROGRAMMING
1.3. Tujuan
Adapun tujuan menyusun tugas ini Untuk Memperbaiki Nilai Mata kuliah Web
Programming pada Semester 6.
BAB II
PEMBAHASAN
2.1 Konsep Dasar Web
a. Pengertian Website
Website merupakan kumpulan halaman digital yang berisi informasi berupa teks,
animasi, gambar, suara dan video atau gabungan dari semuanya yang terkoneksi oleh
internet, sehingga dapat dilihat oleh seluruh siapapun yang terkoneksi jaringan
internet. Jenis Kategori Website :
Web Statis Merupakan website yang mempunyai halaman yang tidak berubah.
Perubahan suatu halaman dilakukan secara manual dengan mengedit code yang
menjadi stuktur dari website tersebut.
Web Dinamis Merupakan website yang secara terstruktur diperuntukan untuk
diupdate sesering mungkin. Biasanya disediakan halaman backend untuk
melakukan perubahan konten dari website tersebut. Contohnya : web portal, web
berita, dll.
Web Interaktif Merupakan website yang berinteraksi antara penggunanya.
Biasanya berupa forum diskusi maupun blog. Dimana adanya moderator sebagai
pengatur alur diskusi.
3) Website
Website merupakan istilah yang merujuk kepada suatu nama halaman web yang
dapat diakses jika terkoneksi dengan internet. Untuk mengakses sebuah website,
selain terkoneksi dengan internet, anda pun harus membukanya dalam sebuah
aplikasi web browser.
4) Web Server
Web Server merupakan perangkat lunak yang digunakan untuk menerima
permintaan melalui Protokol HTTP atau HTTPS dari client, kemudian dikirimkan
kembali dalam bentuk halaman-halaman web. Contoh web server : Xampp,
Apache2Triad, dll.
8) IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang digunakan dalam internet, secara
teknis bermakna suatu bentuk pengisian dan pengalamatan data-data dan informasi
yang akan dikirim melalui internet.
9) Hyperlink
Hyperlink atau disebut link merupakan sebuah tools yang berperan dalam
mempopulerkan penggunaan internet, hyperlink dapat mereferensikan sebuah teks
atau gambar ke alamat lain di internet.
d. Struktur Navigasi
Struktur Navigasi adalah bagan hirarki dari suatu website yang menggambarkan
isi dari setiap halaman dan link. Struktur Navigasi dapat dikatakan sebagai gambaran
dari hubungan atau rantai kerja dari seluruh elemen yang akan digunakan dalam
aplikasi.
Kriteria-kriteria yang digunakan dalam pengelompokan dari struktur navigasi
adalah sebagai berikut: kebutuhan akan objek, kemudahan pemakaian, interaktif, dan
kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu websites.
Dalam penggambarannya Struktur Navigasi terbagi kedalam 4 Struktur yang berbeda
yaitu: Linier, Non Linier, Hierarchical (Hirarki) dan Composit (Campuran).
Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses
pembuatan aplikasi web, yaitu:
Gambar Struktur
Navigasi Hirarki
3. Struktur Navigasi Non-
Linier
Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan
dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi
bercabang. Percabangan yang ada pada struktur nonlinier ini berbeda dengan
percabangan yang ada pada struktur hirarki, karena pada percabangan nonlinier ini
walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai tingkatan yang
sama yaitu tidak ada Master Page(halaman utama website) dan Slave Page(halaman
pendukung website).
e. Text Editor
Dalam membuat sebuah halaman web dibutuhkan text editor. Text editor yang
dapat dipergunakan dalam pembelajaran pemrograman web ini dapat menggunakan
pilihan sebagai berikut :
1) Notepad
Notepad adalah aplikasi text editor yang sudah ada didalam instalasi os windows
anda
masing-
masing. Yang
perlu
diperhatikan jika menggunakan notepad sebagai text editor, yakni extension type
file dituliskan langsung dan pemilihan save as type adalah All Files.
2) Notepad++
Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang
berjalan di sistem operasi Windows. Notepad++ menggunakan komponen
Scintilla untuk dapat menampilkan dan menyuntingan teks dan berkas kode
sumber berbagai bahasa pemrograman.
3) Sublime Text
Text editor yang terbilang masih baru yang sangat mudah digunakan, penampilan
simple namun enak dipandang. Sublime text adalah aplikasi berbayar tapi anda
dapat mendownload versi demonya (meskipun versi demo tapi tidak ada batasan
dalam penggunaannya).
4) Atom
Atom adalah teks editor gratis dan terbuka untuk macOS, Linux, dan Microsoft
Windows dengan dukungan untuk plug-in yang ditulis dalam Node.js, dan
tertanam Kontrol Git, yang dikembangkan oleh GitHub.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak
<html>
<head>
<title> Judul Web </title>
</head>
<body>
</body>
</html>
Keterangan :
1) Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
2) Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini
akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag
<META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu
dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML
secara otomatis dalam jangka waktu tertentu.
CONTENT, atribut ini berisi informasi tentang isi document HTML yang
akan dipanggil.
NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag
<META> dalam suatu document HTML boleh ada maupun tidak.
3) Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web
memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>.
Judul ini akan muncul dalam titlebar dari browser.
4) Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.
d. TAG
Kode-kode dalam HTML biasanya disebut TAG. Tag dalam HTML dituliskan
diapit oleh tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garis miring ( / ). Tag
dituliskan berpasangan, jika tidak menggunakan tanda garis miring ( / ) setelah
penulisan namanya, disebut sebagai tag pembuka. Namun, jika menggunakan tanda
garis miring ( / ) sebelum nama tag, maka disebut sebagai tag penutup. Tag bersifat
incasesensitiv yang dimana penulisan dengan huruf besar, huruf kecil dan campuran
tidak masalah. Namun, untuk standarisasinya tag di tuliskan dalam huruf kecil.
Tag Kegunaan
<html> Untuk mendefinisikan sebuah
dokumen HTML
Mendefinisikan body atau isi sebuah
<body>
dokumen
Mendefinisikan heading 1 sampai 6,
<h1>…</h1> s/d <h6>…</h6> ukuran fontsize judul yang besar
sampai yang terkecil
<p>….</p> Mendefinisikan sebuah paragraph
<br> Mendefinisikan break line / baris baru
Mendefinisikan horizontal rule
<hr>
pemisah antar bagian atau paragraph
Mendefinisikan pembuatan order
<ol>…...</ol>
list/penomoran dengan angka/huruf
Mendefinisikan pembuatan unorder
<ul>…....</ul>
list/penomoran dengan bullets
<li>…….</li> Mendefinisikan isi data dalam list
Mendefinisikan format italic/huruf
<i>……..</i>
miring
Mendefinisikan format bold/huruf
<b>……</b>
tebal
Mendefinisikan format
<u>……..</u>
underline/huruf bergaris bawah
<sub>……...</sub> Mendefinisikan teks subscript
<sup>……...</sup> Mendefinisikan teks superscript
<img>…….</img> Mendefinisikan tampilkan gambar
<marquee>….</marquee> Mendefinisikan tulisan bergerak
<table> ……………</table> Mendefinisikan pembuatan tabel
2.3 PHP
a. Pengertian PHP
PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa script berbasis server
(server-side) yang mampu mem-parsing kode php dari kode web dengan ekstensi .php,
sehingga menghasilkan tampilan website yang dinamis di sisi client (browser). Dengan
menambahkan skrip PHP, anda bisa menjadikan halaman HTML menjadi lebih
powerful, dinamis dan bisa dipakai sebagai aplikasi lengkap, misalnya web portal, e-
learning, e-library, dll.
PHP pertama kali dikembangkan oleh seorang programmer bernama Rasmus
Lerdrof pada tahun 1995. Selanjutnya Rasmus merilis kode sumber tersebut untuk
umum dan menamakan PHP/FI sehingga banyak pemrograman yang tertarik untuk ikut
mengembangkan PHP. Dan selanjutnya pada tahun 1997 perusahaan bernama Zend,
mengembangkan intrepreter PHP tersebut menjadi lebih baik.
Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya di
dalam kode HTML. Untuk membedakan kode PHP dengan kode HTML, di depan kode
PHP tersebut diberi tag pembuka dan diakhir kode PHP diberi tag penutup.
Dengan adanya kode PHP, sebuah halaman web bisa melakukan banyak hal yang
dinamis, seperti mengakses database, membuat gambar, membaca dan menulis file, dan
sebagainya. Hasil pengolahan kode PHP akan dikembalikan lagi dalam bentuk kode
HTML untuk ditampilkan di browser. Ada 4 jenis tag yang bisa digunakan untuk
memasukkan kode PHP yaitu :
Yang dapat langsung diterapkan disemua platform adalah tag standard dan tag
script.
b. Dasar-dasar PHP
1. Variable
Variable merupakan sebuah istilah yang menyatakan sebuah tempat yang
menampung nilai-nilai tertentu di mana nilai di dalamnya bisa diubah-ubah. Variable
merupakan tempat untuk menyimpan data dalam tipe tertentu, variable bisa berupa null
(belum ada isinya), angka, string, objek, array, Boolean, dan isinya bisa diubah-ubah
nantinya. Variable penting karena tanpa adanya variable tidak bisa menyimpan nilai
tertentu untuk diolah.
Variable ditandai dengan adanya tanda dolar ($) yang kemudian bisa diikuti
dengan angka, huruf, dan underscore. Namun variable tidak bisa mengandung spasi.
Berikut ini contoh pendefinisian variable : $nama, $no_telp, $_pekerjaan. Untuk
mendefinisikan variable, hanya perlu menuliskannya maka otomatis variable dikenali
oleh PHP.
2. Tipe Data
Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel. Kita
tidak perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6 Tipe
data dasar yang dapat diakomodasi di PHP, seperti berikut ini :
3. Konstanta
Selain variable, sebuah program umumnya juga memungkinkan adanya konstanta.
Konstanta fungsinya sama seperti variable namun nilainya statis/konstan dan tidak bisa
berubah. Cara untuk mendefinisikan konstanta adalah :
Define (“NAMA_KONSTANTA”, nilai_konstanta);
Setelah didefinisikan, kita dapat langsung menggunakannya dengan mengetikkan
nama konstanta tersebut. Nama konstanta umumnya diketik menggunakan huruf besar.
4. Komentar
Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin.
Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi, namun tentu masih
tidak semudah dipahami oleh bahasa biasa. Untuk itu kita bisa menggunakan komentar.
2.4 Operator
a. Mengenal Operator
Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai operator
(Variable atau konstanta yang dioperasikan) menggunakan operator, seperti menjumlah,
membagi, dan sebagainya.
Operator merupakan simbol yang berfungsi untuk melakukan aksi/operasi tertentu
terhadap nilai operator yang pada umumnya dari hasil operasi tersebut menghasilkan
nilai baru. Sementara operator adalah nilai yang dilibatkan dalam operasi oleh operator.
b. Jenis-jenis Operator
1. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika, sebagian
berikut :
Simbol Nama Operator
+ Penjumlahan
- Pengurangan
/ Pembagian
* Perkalian
% Sisa Pembagian
** Pemangkatan
4. Operator Relasi
Operator relasi adalah operator untuk membandingkan dua buah nilai. Hasil
operasi dari operator relasi akan menghasilkan nilai dengan tipe data boolean,
yaitu true (benar) dan false (salah). Berikut ini daftar operator relasi:
5. Operator Logika
Operator logika adalah operator untuk melakukan operasi logika seperti AND,
OR, dan NOT. Operator logika terdiri dari:
6. Operator Bitwise
Operator bitwise merupkan operator yang digunakan untuk operasi bit (biner).
Operator ini terdiri dari:
Operator ini berlaku untuk tipe data int, long, short, char, dan byte. Operator ini
akan menghitung dari bit-ke-bit.
7. Operasi Ternary
Operator ternary adalah operator untuk membuat sebuah kondisi. Simbol yang
digunakan adalah tanda tanya (?) dan titik dua (:).
2.6 Percabangan
Pernyataan Seleksi
Pada dasarnya pernyataan seleksi adalah suatu mekanisme yang menjelaskan
apakah pernyataan akan dikerjakan atau tidak, hal ini tergantung kondisi yang
dirumuskan. Dalam bahasa pemrograman PHP pernyataan seleksi diterapkan dengan
menggunakan statement IF dan Switch Case.
1. Statement IF
a) If Tunggal
Statement IF merupakan statement yang penting dan pasti terdapat di semua
bahasa pemrograman. Statement ini berguna untuk membuat percabangan berdasarkan
kondisi tertentu yang harus dipenuhi.
Bentuk umum : if(kondisi)
{
Statement;
}
Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila kondisi bernilai
TRUE atau benar, sedangkan jika kondisi salah/FALSE maka statement di atas tidak
akan dikerjakan.
2. Statement Switch
Statement untuk pengatur alur program berikutnya adalah switch. Salah satu
keuntungan switch adalah ada bisa langsung mengevaluasi satu statement dan
memerintahkan aksi dalam jumlah yang lebih banyak.
Bentuk umum : switch ( nilai_ekspresi ){
case nilai_1: statement_1; break;
case nilai_2: statement_2; break;
default: statement_n; }
2.7 Pengulangan
a. Pengertian Dasar Pengulangan
Pengulangan atau disebut sebagai looping adalah instruksi khusus dalam Bahasa
pemrograman dan algoritma yang digunakan untuk mengulang beberapa perintah sesuai
dengan jumlah yang telah dilakukan. Tujuannya adalah untuk mempermudah
pengerjaan program dan untuk mempersingkat instruksi program. Dengan pengulangan
instruksi program yang seharusnya ditulis dengan jumlah baris yang banyak bisa
dipersingkat.
2. Pengulangan While
Pengulangan while adalah pengulangan yang termasuk dalam uncounted loop.
Karena biasanya digunakan untuk mengulang sesuatu yang belum jelas jumlah
pengulangannya.
Namun, pengulangan while juga bisa digunakan seperti pengulangan for sebagai
counted loop.
Bentuk dasar pengulangan while : <?php
while (<kondisi>){
// blok kode yang akan diulang di sini
}
?>
Pengulangan while akan terus mengulang selama nilai $ulangi lebih kecil dari 10.
Lalu di dalam pengulangan kita melakukan increment nilai $ulangi dengan $ulangi++.
Artinya: Tambah 1 disetiap pengulangan.
3. Pengulangan Do/While
Pengulangan Do/While sama seperti pengulangan while. Ia juga tergolong dalam
uncounted loop. Perbedaan Do/While dengan while terletak pada cara iya memulai
pengulangan. Pengulangan Do/While akan selalu melakukan pengulangan sebanyak 1
kali, kemudian melakukan pengecekan kondisi. Sedangkan perulangan while akan
mengecek kondisi terlebih dahulu, baru melakukan pengulangan.
Bentuk pengulangan do/while : <?php
do {
// blok kode yang akan diulang
} while (<kondisi>);
?>
4. Pengulangan Foreach
Pengulangan Foreach sama seperti pengulangan For. Namun, ia lebih khusus
digunakan untuk mencetak array.
Bentuk pengulangan foreach : <?php
foreach($array as $data){
echo $data;
}
2.8 Javascript
Pengertian Javascript
Javascript merupakan suatu bahasa script yang banyak digunakan dalam dunia
teknologi terutama internet, bahasa ini dapat bekerja di sebagian besar web browser
seperti Internet Explorer (IE), Mozilla Firefox, Netscape, opera dan web browser
lainnya. Bahasa javascript dapat dideskripsikan dalam bentuk fungsi (Function) yang
ditaruh di bagian dalam tag yang dibuka dengan tag <head> yang dibuka dengan tag
<script language =” javascript”>. Isi dari script javascript sama dengan konsep yang
sudah dipelajari dalam materi PHP, yakni ada deklarasi Variable, penggunaan operator,
percabangan, looping, dan fungsi.
2.9 CSS
a. Pengertian CSS
CSS (Cascading Style Sheets) merupakan bahasa yang digunakan untuk mengatur
tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita
berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan
bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
c. Jenis-jenis CSS
Dalam proses implementasi penulisan kode CSS, terdapat 3 jenis CSS, yaitu :
1) Internal CSS
Internal CSS adalah kode CSS yang ditulis dalam tag <style> dan lokasinya
berada pada bagian atas header file HTML. Internal CSS digunakan untuk
membuat custom khusus dalam satu halaman website sehingga halaman lain tidak
terpengaruh.
2) External CSS
External CSS adalah kode CSS yang penulisannya dipisah dengan file HTML.
Jadi file CSS ditulis pada file sendiri dengan ekstensi .css. File External CSS biasa
dituliskan pada bagian <head>, jadi setiap halaman website dilakukan
pemanggilan file .css.
Penggunaan External CSS lebih simple dan sederhana karena tidak perlu
menuliskan CSS dalam setiap file HTML.
3) Inline CSS
Inline CSS adalah memasukan kode CSS yang ditulis secara langsung pada setiap
atribut HTML. Jadi setiap atribut memiliki style CSS yang berbeda tergantung
kebutuhan .
Inline CSS ini tergolong kurang efisien jika dibandingkan jenis CSS untuk
website lainnya. Karena dalam satu atribut memiliki style tersendiri, jadi inline
cocok untuk website yang tidak membutuhkan banyak baris coding.
e. Penulisan CSS
Sintaks
penulisan CSS
sebagai
berikut :
2) Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan
oleh tanda titik dua. Setiap aturan css harus diakhiri dengan tanda titik koma.
BAB III
KESIMPULAN
Almais, Agung Teguh Wibowo. 2018. Modul Pratikum Web Programming. Malang:
Modul Pratikum.
Choiri, Eril Obeit. 2022. “Perbedaan Internal, External dan Inline CSS Dalam Website”.
https://qwords.com/blog/perbedaan-internal-external-dan-inline-css/. Diakses
pada 18 Maret 2022 pukul 21.48.
Dewaweb Team. 2021. “Belajar CSS: Pengertian Pera, Fungsi, dan Macamnya”.
https://www.dewaweb.com/blog/belajar-css-pengertian-peran-fungsi-dan-
macamnya/. Diakses pada 18 Maret 2022 pukul 21.38.
Muhardian, Ahmad. 2022. “Belajar PHP: 7 Jenis Operator dalam PHP yang Harus
diketahui”. https://www.petanikode.com/php-operator/. Diakses pada 18 Maret
2022 pukul 20.22.
Toming Sek. 2020. “Algoritma Pengulangan Looping: (pengertian, contoh kasus, dan
konsep dasar)”. https://www.daftargajipns.com/2020/02/algoritma-pengulangan-
looping.html. Diakses pada 18 maret 2022 pukul 20.56.