Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server...
Transcript of Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server...
Program Studi Teknik Informatika
Modul Praktikum Web Programming
STMIK Nusa Mandiri
1
Kata Pengantar
Puji syukur kehadirat Alloh Subhanahu Wata’ala yang telah memberikan rahmat
dan hidayah-NYA sehingga penulis dapat menyelesaikan modul pembelajaran
Web Programming pada Program Studi Teknik Informatika STMIK Nusa
Mandiri.
Penulisan modul ini bertujuan untuk membantu mahasiswa/i program studi
Teknik Informastika khususnya dalam memahami pembelajaran mengenai
mata kuliah Web Programming.
Penulis menyadari banyak kekurangan dalam penulisan modul pembelajaran
ini, oleh karena itu, semua kritik dan saran yang bersifat membangun akan
penulis terima dengan senang hati. Penulis berharap semoga modul
pembelajaran ini dapat bermanfaat bagi semua pihak yang memerlukan.
Jakarta, September 2018
Penulis
Modul Praktikum Web Programming
STMIK Nusa Mandiri
2
Daftar Isi
Kata Pengantar .................................................................................................. 1
Daftar Isi ............................................................................................................. 2
Pertemuan 1 ....................................................................................................... 3
Pertemuan 2 ....................................................................................................... 8
Pertemuan 3 ..................................................................................................... 11
Pertemuan 4 ..................................................................................................... 18
Pertemuan 5 ..................................................................................................... 21
Pertemuan 6 ..................................................................................................... 23
Pertemuan 7 ..................................................................................................... 30
Pertemuan 8 ..................................................................................................... 38
Pertemuan 9 ..................................................................................................... 39
Pertemuan 10 -16 ............................................................................................. 42
Daftar Pustaka .................................................................................................. 43
Modul Praktikum Web Programming
STMIK Nusa Mandiri
3
Pertemuan 1
Konsep Dasar Web
A. Internet
Internet adalah sistem jaringan komputer yang saling terhubung secara global
dengan menggunakan paket protokol internet (TCP/IP) untuk menghubungkan
perangkat di seluruh dunia. Ini adalah jaringan ke jaringan yang terdiri dari
jaringan privat, publik, akademik, bisnis dan pemerintah lokal ke lingkup global
dihubungkan oleh beragam teknologi elektronik, nirkabel, dan jaringan optik.
Internet membawa beragam sumber daya dan layanan informasi, seperti dokumen
hyperteks yang saling terkaitdan aplikasi World Wide Web (WWW), surat
elektronik, telepon dan berbagai berkas. (Wikipedia, 2018).
Beberapa istilah yang sering digunakan dalam ranah internet:
World Wide Web (WWW)
Merupakan suatu ruang informasi yang dipakai oleh pengguna global yang
disebut pengidentifikasian sumber seragam untuk mengenal pasti sumber
daya berguna. www merupakan bagain dari internet
Website
Website adalah halaman web yang saling berhubungan yang umumnya
berisikan kumpulan informasi berupa data teks, gambar, animasi, audio,
video maupun gabungan dari semuanya yang biasanya dibuat untuk personal,
organisasi dan perusahaan. Dari pengertian website tersebut dapat dibedakan
menjadi 2 yaitu web bersifat statis dan dinamis. Bersifat statis apabila isi
informasinya tetap dan isi informasinya hanya dari pemilik website sedangkan
web yang bersifat dinamis apabila isi informasinya selalu berubah-ubah dan
dapat diubah-ubah oleh pemilik maupun pengguna website. Contoh web
statis: website profil perusahaan, sedangkan contoh web dinamis seperti
facebook, twitter dll. (indowebsite, 2018)
Modul Praktikum Web Programming
STMIK Nusa Mandiri
4
Web Page (Halaman Web)
Halaman yang ditampilkan di sebuah website di internet, yang dapat
menampilkan teks, gambar, bahkan suara. Halaman ini digunakan untuk
menunjukan sebuah halaman website. Web page dapat diibaratkan sebuah
halaman dalam buku
Home Page (Halaman Muka)
Homepage adalah halaman muka atau utama yang ditampilkan dari sebuah
website di internet. Jadi halaman ini muncul pertama saat website diakses.
Tampilan homepage menggambarkan isi seluruh isi situs tersebut,
Biasanya homepage mempunyai nama file index html atau index htm. Agar
tampilan homepage lebih menarik, design homepage dirancang dan dilengkapi
dengan tampilan-tampilan menarik seperti huruf yang bergerak-gerak,
gambar-gambar yang memikat, animasi hingga penggunaan multimedia
lainnya.
Browser
Webrowser adalah suatu program yang digunakan untuk mrnjrlajahi dunia
internet atau untu mencari informasi tentang suatu halaman web yang
tersimpan di komputer.
Kegunaan Webbrowser
1. Untuk melacak dan menampilkan sebuah informasi.
2. Untuk berinteraksi dengan server melalui sistem berbasis server.
3. Untuk menampilkan dokumen-dokumen yang tersimpan secara
elektonik.
4. Untuk melakukan download dan upload informasi.
5. Untuk melalukan diskusi dengan kelompok atau grup yang mempunyai
hobi atau tujuan yang sama.
URL (Universal Resource Locator )
Adalah rangkaian karakter menurut suatu format standar tertentu, yang
digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan
gambar di Internet.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
5
HTTP (Hypertext Transfer Protocol)
Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan lapisan
aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan
menggunakan hipermedia (idcloudhost, 2018)
DNS (Domain Name System)
DNS adalah singkatan dari Domain Name System yang merupakan sebuah
sistem untuk menyimpan informasi tentang nama host maupun nama domain
dalam bentuk basis data tersebar (distributed database) di dalam jaringan
komputer, misalkan: Internet. DNS menyediakan alamat IP untuk setiap
nama host dan mendata setiap server transmisi surat (mail exchange server)
yang menerima surat elektronik (email) untuk setiap domain.
Fungsi dari DNS
1. Melakukan identifikasi alamat komputer dalam suatu jaringan: tiap
komputer yang terhubung dengan jaringan internet pasti memiliki alamat
IP tersendiri. Dengan adanya DNS, maka jaringan internet kemudian
dapat memetakan komputer tersebut sebagai bagian kecil yang terhubung
dalam jaringan.
2. Sebagai penyedia alamat IP bagi tiap host: pada dasarnya, setiap
pengembang website membutuhkan sebuah host agar websitenya dapat
diakses kalangan umum. Dengan adanya DNS, alamat IP dari tiap host
akan dapat teridentifikasi sehingga tiap host akan memiliki alamat IP-nya
masing-masing.
3. Melakukan pendataan server email : Setiap kali server mail bekerja baik
untuk menerima atau meneruskan sebuah email, maka data-datanya akan
dimonitor oleh DNS.
4. Mentranskripsikan nama domain menjadi IP address: tiap website di
internet memiliki domain tersendiri, seperti .com, .org, .id, dan
sebagainya. Melalui browser biasanya yang terlihat adalah alamat sebuah
situs dalam bentuk domainnya. DNS dapat menerjemahkan domain
menjadi IP address dan sebaliknya. (idwebhost, 2018)
Modul Praktikum Web Programming
STMIK Nusa Mandiri
6
5. Mempermudah user untuk tidak perlu mengingat alamat IP: Jika tidak ada
DNS, maka jaringan tidak akan mampu mengakses alamat yang diketikkan
pada web browser. Misalnya saja ketika kita ingin mengakses
www.google.com, tanpa adanya DNS, komputer tidak dapat menemukan
halaman Google karena alamat IP belum teridentifikasi
TCP/IP (Transmission Control Protocol/Internet Protocol)
Merupakan metode-metode yang digunakan untuk menghubungi server.
TCP/IP
merupakan bahasa standarisasi untuk internet.
Hyperlink
Hyperlink adalah suatu cara menghubungkan suatu bagian didalam slide, file,
program ataupun halaman web dengan bagian yang lainnya dalam bidang
tersebut. Hyperlink biasanya digunakan untuk menunjukan lokasi dari teks
ataupun objek yang diperlihatkan atau dipresentasikan. Hyperlink ini bisa
menghubungkan beberapa objek, file, dokumen, halaman web dan lain-lain
Web Browser.
Pengertian web browser adalah perangkat lunak atau software yang
digunakan untuk mencari, mengakses dan menampilkan halaman web,
terutama situs-situs website dan konten lain di internet. web browser
menerjemahkan halaman situs web yang dikirim menggunakan
HTTP/HTTPS (Hypertext Transfer Protocol) ataupun FTP (Protokol Transfer
Filie) menjadi konten yang dapat dibaca manusia. Sebagian besar web browser
mendukung plugin-plugin eksternal untuk mendukung kinerja web browser
seperti plugin untuk mendukung pemutaran video, pemblokiran iklan dll.
B. Perangkat Lunak Web Server
Web server adalah suatu program komputer yang mempunyai tanggung
jawab atau tugas menerima permintaan HTTP dari komputer klien, yang dikenal
dengan nama web browser dan melayani mereka dengan menyediakan respon
HTTP berupa konten data. (Madcom, 2016). Dari penjelasan tersebut maka kita
dapat menyimpulkan bahwa web server adalah software yang berfungsi sebagai
pemberi layaan kepada web client (browser) seperti Chrome, Mozilla, Opera,
Modul Praktikum Web Programming
STMIK Nusa Mandiri
7
Safari, dan lainya, agar browser tersebut dapat menampilkan halaman website yang
diminta.
Fungsi utama web server adalah sebagai alat untuk memproses berbagai
berkas yang diminta oleh klien, lalu memberikan respon dalam bentuk halaman
web. Halaman website tersebut terdiri dari teks, gambar, dokumen, video, dan lain-
lain.
Source: (Maxmanroe, 2018)
Gambar I.1 Cara Kerja Web Server
Ada beberapa jenis software untuk membangun web server local atau localhost
yang support sistem operasi windows diantaranya adalah Wampserver, Appserv,
XAMPP, PHP Triad atau Vertigo.
Server web yang terkenal diantaranya:
1. Apache, web server antar platform:
a) Xampp
b) Php Triad
c) Apache2triad
2. Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS
Windows.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
8
Pertemuan 2
Konsep Struktur Navigasi Pada Web
A. Struktur Navigasi
Menurut (Ardiansyah, 2016) struktur navigasi dapat diartikan sebagai alur
dari suatu program yang menggambarkan rancangan hubungan antara area yang
berbeda sehingga memudahkan proses pengorganisasian seluruh elemen-elemen
website. Struktur navigasi dapat digolongkan menurut kebutuhan akan objek,
kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang
berpengaruh terhadap waktu pembuatan sebuah situs web.
Menurut (Sutopo, 2007) dalam pengembangan web terdapat beberapa model
navigasi dasar yang harus dikenal dengan baik oleh desainer karna setiap model
navigasi dapat memberikan solusi tuk kebutuhan yang berbeda.
Macam-macam bentuk navigasi antara lain:
1. Linear Navigation Model
Jenis struktur navigasi ini memberikan informasi website hanya pada satu
halaman, artinya hanya menggunakan satu laman untuk masuk dan keluar
website yang menampilkan satu demi satu tampilan layar secara berurut
menurut urutannya. Tampilan yang dapat ditampilkan pada struktur nagisai
jenis ini adalah satu halaman sebelumnya tau sesudahnya, tidak dapat dua
halaman sebelumnya atau dua halkaman sesudahnya.
Gambar 2.1 Linear Navigation Model
Modul Praktikum Web Programming
STMIK Nusa Mandiri
9
2. Hierarki Navigation Model
Hierarki model diadaptasi dari topdown design. Konsep navigasi ini dimulai
dari satu node yang menjadi home page. Dari home page dapat dibuat
beberapa cabang kehalamhalaman utama. Apabila di perlukan, dari tiap
halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini
seperti struktur organisasi dalam perusahaan. Pada struktur navigasi jenis ini
tidak diperkenan kan adanya tampilan secara linear.
Gambar 2.2 Hierarki Navigation Model
3. Spoke and Hub Navigation Model / 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 dibuat pada struktur onlinier
ini berbeda dengan percabangan pada struktur hirarki, karena pada
percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap
tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan
Slave Page.
Gambar 2.3 Struktur Navigasi non Linier
Modul Praktikum Web Programming
STMIK Nusa Mandiri
10
4. Full Web Model/ Struktur Navigasi Campuran
Struktur navigasi campuran merupakan gabungan dari ketiga struktur
sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa
disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak
digunakan dalam pembuatan website karena struktur ini dapat digunakan
dalam pembuatan website sehingga dapat memberikan ke-interaksian yang
lebih tinggi. Pada struktur navigasi jenis ini dapat memberikan kemampuan
hyperlink yang lebih banyak. Struktur navigasi jenis ini banyak digunakan
karna user dapat mengakses semua topik dengan sub topik dengan cepat.
Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan cara
untuk kembali ke topik sebelumnya.
Gambar 2.4. Struktur Navigasi Campuran
Modul Praktikum Web Programming
STMIK Nusa Mandiri
11
Pertemuan 3
Pengenalan HTML
A. Pengertian HTML (Hypertext Markup Language)
Menurut (Kustiyahningsih & Anamisa, 2011) HTML (Hypertext Markup
Languange) adalah standar bahasa yang digunakan untuk menampilkan dokumen
web. Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh
editor teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh
tag-teks yang dimulai dengan symbol < dan berakhir dengan sebuah symbol > .
Editor teks yang penyusun gunakan adalah Notepad++ dan Xampp versi 1.8.
untuk web servernya menggunkaan bahasa pemrograman PHP
B. Struktur Dasar HTML
Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan
tag akhir. Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya
</HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya.
Sebuah dokumen HTML standar terlihat seperti ini:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
12
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:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML
secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang
akan dipanggil.
c. 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.
Contoh Penggunaan Script HTML
Keterangan:
Contoh 1 : Judul Web
Halo apa kabar?
Mudah-mudahan kabarnya baik-baik saja : Merupakan perintah yang di buat
diantara <body> dan </body>.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
13
Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\ buat folder baru
untuk menyimpan file di dalam folder htdocs dalam contoh ini buat folder
webprog. Simpan file dengan nama contoh1.php didalam folder tersebut.
Pembuatan nama file pada saat penyimpanan harus diakhiri dengan extention
“.php”.
Buka browser (Google chrome, Mozilla etc) untuk membuka tampilan laman web
html yang telah kita buat tersebut. Ketikan di url: localhost/webprog
Maka akan tampil sebagai berikut:
Hasilnya:
Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang
digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag
dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garis
miring ( / ). Biasanya Tag dituliskan secara berpasangan, misanya <h1> dan
</h1>. Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka atau
awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah
penutup elemen atau akhir elemen. Namun, ada juga Tag yang dalam
pemakaiannya tidak berpasangan, diantaranya adalah :
a. Tag untuk ganti paragraph yaitu <p>
b. Tag untuk ganti baris atau line break yaitu <br>
Modul Praktikum Web Programming
STMIK Nusa Mandiri
14
c. Tag untuk garis datar yaitu <hr>
d. Tag list item yaitu <li>
Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis menggunakan
pasangannya. Hal ini dilakukan untuk mengantisipasi standar rekomendasi HTML
kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan
huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ). Tapi untuk
mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf kecil
semua.
Jenis-jenis Tag HTML
Modul Praktikum Web Programming
STMIK Nusa Mandiri
15
Modul Praktikum Web Programming
STMIK Nusa Mandiri
16
Modul Praktikum Web Programming
STMIK Nusa Mandiri
17
Dalam HTML sendiri penggunaan Tag disesuaikan dengan kebutuhan pembuatan
tampilan web nya, masih banyak Tag-tag HTML yang tidak peulis sebutkan disini,
tapi bisa langsung di praktekan pada script hTML nantinya.
Contoh script HTML menggunakan Tag
Hasilnya:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
18
Pertemuan 4
Membuat Table Menggunakan HTML
A. Pembuatan Table menggunakan HTML
Salah satu cara atau format untuk menampilkan informasi dalam sebuah web
adalah dengan menggunkan sebuah table. Table terdiri atas 4 unsur utama: baris,
kolom, sel dan garis. Untuk membuat table dalam HTML kita akan menggunakan
tag yang sudah disediakan di HTML.
Ada beberapa tag yang harus diingat dalam membuat table di HTML:
1. Tag <table> untuk membungkus tabelnya
2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header
Contoh script pembuatan Table:
Buat lembar baru, simpan dengan nama Conto3.php
Ketikan script seperti dibawah ini:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
19
Hasilnya
Contoh:
Hasilnya:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
20
Latihan:
Buatlah script HTML untuk bentuk tampilan sebagai berikut:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
21
Pertemuan 5
Konsep Dasar PHP
A. Pengertian PHP (PHP Hypertext Preprocessor)
PHP disebut bahasa pemrograman server side karena PHP diproses pada
komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman
client-side seperti JavaScript yang diproses pada web browser (client).
Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman
yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan
HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan
website statis, dimana konten dan halaman web bersifat tetap. Sebagai
perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs
web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis
juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-
ubah sesuai input dari user, memproses form, dll. Untuk pembuatan web, kode
PHP biasanya di sisipkan ke dalam dokumen HTML. Karena fitur inilah PHP
disebut juga sebagai Scripting Language atau bahasa pemrograman script.
Dalam pembuatan website, sebenarnya dengan menggunakan HTML dan CSS saja
sudah bisa menjadi website, tetapi website yang dibuat bersifat statis. Nah dengan
menggunakan beberapa fungsi yang ada di PHP, website bisa berubah menjadi
dinamis. Fungsi yang ada dalam PHP biasa disebut CRUD, CRUD kepanjangan
dari Create, Read, Update dan Delete. Berikut penjelasan lengkapnya:
1. Create adalah fungsi yang digunakan untuk membuat data baru dalam website.
Contoh saat Anda melakukan registrasi baru ke website, nah inilah yang
dinamakan membuat data baru.
2. Read adalah fungsi yang digunakan untuk membaca atau bisa juga
menampilkan data yang berada di database. Kemudian akan ditampilkan
sesuai dari request user.
3. Update adalah fungsi untuk melakukan edit data dari dalam database. Contoh
saat melakukan edit profil pengguna.
4. Delete adalah fungsi yang digunakan unuk menghapus database. Contoh Anda
menghapus profil, komentar dan tindakan sejenis lainnya.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
22
Jika Anda ingin menguasai pemrograman web, pastikan dulu Anda sudah faham
tentang dasar-dasar CRUD.
B. Sintak Dasar PHP
PHP dapat ditempatkan dimana saja, untuk script PHP dimulai dengan
<?php diakhiri dengan syntak penutup ?>, untuk ekstenti file yang digunakan .php
Hasilnya:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
23
Pertemuan 6
Pembuatan Variabel
A. Variabel
Secara umum variabel adalah sebuah tempat untuk menampung data yang
nilainya selalu berubah. Variabel digunakan sebagai tempat penampungan nilai
sementara.
Penggunaan varibel pada PHP atau pendeklarasian variable pada PHP
dtandai dengan dengan adanya tanda $ (dolar). Pendeklarasian variable artinya
meperkenalkan atau mendaftarkan variabel ke dalam program. Dalam PHP,
deklarasi variabel sering kali digabung dengan inisialisasi.
Contoh pendeklarasian variabel
$nim
$nama
$no_telp
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.
Aturan pemberian nama variabel:
1. Dimulai dengan tanda $
2. Karakter pertama harus huruf atau garis bawah ( _ )
3. Karakter berikutnya boleh huruf, angka, atau garis bawah
4. Tidak boleh menggunakan spasi
5. Tidak boleh menggunakan karakter-karakter khusus (seperti : +, -, *, /, <, >,
dll).
Modul Praktikum Web Programming
STMIK Nusa Mandiri
24
Contoh:
Hasilnya:
B. Tipe Data
Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel.
Kita tidak perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6
variabel dasar yang dapat diakomodasi di PHP, seperti terlihat di tabel.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
25
Contoh:
Hasilnya:
C. Konstanta
Dalam bahasa pemograman, Konstanta (constant) adalah suatu lokasi
penyimpanan (dalam memory) yang berisikan nilai yang sifatnya tetap dan tidak
bisa diubah sepanjang program berjalan. (Wikipedia, 2018)
Cara mendefinisikan atau mendeklarasikan konstanta berbeda dengan
variabel, jika dalam pemdeklarasian variabel menggunakan tanda dolar ($), maka
dalam pendeklarasian konstanta dalam PHP terdiri dari dua cara yakni:
1. Menggunakan kata kunci (keyword) const.
2. Menggunakan fungsi define. (Duniailkom, 2018)
Contoh penulisannya:
Const nama_konstanta = “nilai konstanta”;
Define (“nama_konstanta”, “nilai konstanta”);
Modul Praktikum Web Programming
STMIK Nusa Mandiri
26
D. Komentar
Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin.
Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi, namun tent masih
tidak semudah dipahami oleh bahasa biasa. Untuk itu kita bisa menggunakan
komentar. Berikut ini contoh pembuatan komentar di PHP.
Penggunaan komentar:
//komentar satu baris
#ini juga komentar satu baris
/*komentar Banyak baris Kode di sini tidak Dieksekus oleh parser */
Contoh:
Hasilnya
Modul Praktikum Web Programming
STMIK Nusa Mandiri
27
E. Mengenal Operator
Operator adalah simbol yang digunakan dalam sebuah program untuk
memanipulasi data, seperti proses penambahan, proses pengurangan, proses
perkalian, perbandingan atau penugasan. Variable yang nilainya dimodifikasi oleh
operator disebut operand.
Berikut akan dijelaskan beberapa jenis operator yaitu:
1. Operator Aritmatika
Merupakan operator yang berhubungan atau berkaitan dengan fungsi
matematika.
Operator Operasi Contoh Hasil
+ Penambahan 4+2 6
_ Pengurangan 4-2 2
* Perkalian 4*2 8
/ Pembagian 4/2 2
% Sisa Bagi 4%3 1
2. Operator Perbandingan
Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil
akhirnya adalah nilai Boolean true dan false. Operator ini sangat berguna dalam
pemrograman karena bisa menentukan arah pemrograman.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
28
Operator perbandingan pada PHP sebagai berikut:
Operator Operasi Contoh Hasil
== Sama Dengan 5==5 False
!= Tidak sama dengan 3!=3 False
> Lebih besar 4>2 True
< Lebih kecil 3<2 False
>= Lebih besar sama dengan 4>=3 True
<= Lebih kecil sama dengan 3<=2 False
Contoh pada program
Modul Praktikum Web Programming
STMIK Nusa Mandiri
29
3. Operator Logika
Operator logic atau operator logika, biasanya digunakan untuk
menggabungkan kondisi berganda dan menghasilkan sebuah ekspresi bernilai
TRUE dan FALSE.
Operator Operasi
&& And
|| Or
! Not
Maka hasilnya akan bernilai : 1 atau True
Tabel kebenaran operasi logika:
x y x &&y x||y !x !y
True True True True False False
True False False True False True
False True False True True False
False False False False True True
Modul Praktikum Web Programming
STMIK Nusa Mandiri
30
Pertemuan 7
Pengenalan Form
A. Form
Dalam penggunaan nya website tidak hanya menampilkan informasi saja,
tetapi juga mengambil informasi berupa data dari para pengunjung. Salah satu cara
untuk mengambil data dari para pengunjung yaotu dengan menggunakan form.
Ada beberapa komponen form yang dapat digunakan dalm html sebagai berikut:
1. Form
<form action=action method=method enctype=medi type> </form>
2. Text
Berfungsi untuk memasukan inputan berupa teks ataupun angka. Teks yang
diketikan di komponen ini biasanya tidak terlalu panjang.
<input text=text name=”nama variabel” value=”value”>
3. Textarea
Sama seperti text, hanya saja textarea lebih tinggi dan cenderung lebih
panjang.
<textarea rows=”” cols=”” name=”nama variabel”></textarea>
4. Select box/ combobox
Bentuknya mirip dengan textbox, tetapi memiliki indikator anak panah
sebelah kanan. Saat di klik akan muncul pilihan yang telah disediakan.
<select name=”nama variabel” value=””>
<option>Combo1 </option>
<option>Combo2 </option>
</select>
5. Radio Button
Digunakan untuk memilih salah satu opsi dari beberapa opsi yang telah
disediakan.
<input type =”radio” name=”nama variabel” value=””>isi radio
6. Check Box
Digunakan untuk memilih satu atau beberapa pernyataan yang telah
disediakan
Modul Praktikum Web Programming
STMIK Nusa Mandiri
31
<input text=”checkbox” name=”nama variabel” value=”on” checked>
7. Submit
Submit digunakan untuk mengirimkan semua variabel data dari komponen-
komponen form yang telah diisi
<input type=”submit” name=”submit” value =”submit”>
8. Reset
Berfungsi untuk membatalkan/cancel semua inputan yang telah di ketikan
pada komponen form
<input type=”reset” name=” reset” value =” reset”>
B. Pengolahan Data dari Form
Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag
</FORM>. Di dalam tag pembuka <FORM> diikuti dengan atribut action dan
method. Action menjelaskan ke halaman yang digunakan untuk memproses input,
sementara method digunakan untuk mengatur cara memparsing konten • Web
menerima input dari user atau pengunjung menggunakan metode GET dan POST.
GET akan mengirimkan data bersama dengan URL, sedangkan POST akan
mengirimkannya secara terpisah. User mengirimkan data input dengan mengisi
teks atau pilihan pada attibut form html.
Contoh program
File menggunakan methode Get.
Simpan dengan nama contoh7.php
Untuk memproses nya kita membuat 1 file lagi dengan nama getproses.php,
dengan script sebagai berikut:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
32
Hasilnya:
Dari hasil tersebut, terlihat pada url data nama (Nia Nuraeni) terlihat jelas
dikirimkan.
Tetapi jika kita menggunakan metode Post, tidak akan menampilkan data yang
telah diinput.
Data tidak dikirimkan melalui Url.
Modul Praktikum Web Programming
STMIK Nusa Mandiri
33
Latihan Membuat Form Data Diri
Buatlah script berikut , simpan dengan nama : registrasi.php
Modul Praktikum Web Programming
STMIK Nusa Mandiri
34
Maka tampilannya sebagai berikut
Buat script baru dengan Nama : prosesreg.php
Maka akan tampil, laman web sesuai dengan yang kita input di Form Registrasi
Modul Praktikum Web Programming
STMIK Nusa Mandiri
35
C. Percabangan
Sebagian besar bahasa pemrograman mengandung 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.
Statement IF
1. IF Tunggal
Bentuk umum:
If (kondisi)
{
Statement;
}
2. If Majemuk
Bentuk umum:
If (kondisi)
{
Statement_1;
}
Else
{
Statement_2;
}
3. IF, ElseIf dan Else
Bentuk umum:
If (kondisi1)
{
Statement_1;
}
Elseif (kondisi2)
{
Modul Praktikum Web Programming
STMIK Nusa Mandiri
36
Statement_2;
}
Elseif (kondisi3)
{
Statement_3;
}
Else
{
Statement_n;
}
Statement 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; }
Modul Praktikum Web Programming
STMIK Nusa Mandiri
37
Latihan Percabangan:
Tampilan Input:
Tampilan Output
Dengan ketentuan soal sebagai berikut:
Modul Praktikum Web Programming
STMIK Nusa Mandiri
38
Pertemuan 8
UTS
Modul Praktikum Web Programming
STMIK Nusa Mandiri
39
Pertemuan 9
Database
A. Database MySQL
MySQL adalah sistem manajemen basis data SQL yang sangat terknal dan
bersifat open source. (Kustiyahningsih & Anamisa, 2011). Mysql dapat
didefinisikan sistem manajemen basis data atau database. Database sendiri
merupakan struktur penyimpanan data yang terdiri dari beberapa tabel dimana
dalam struktur penyimpanan tersebut bisa menambah, mengakses dan menyimpan
pada sistem komputer.
Pembuatan database MySQL menggunakan PHP MyAdmin
Php MyAdmin adalah salah satu aplikasi berbasis GUI (Graphical User Interface)
yang digunakan untuk mengelola database MySql. (Arief, 2011).
Buka browser ketikan di Url: http://localhost/phpmyadmin/
Modul Praktikum Web Programming
STMIK Nusa Mandiri
40
Untuk membuat database baru, ketik pad tab Database, sehingga muncul seperti
gambar dibawah ini, masukan nama database : db_berita
Kemudian klik create
Masukan nama tabel : artikel
Dengan ketentuan sebagai berikut:
Field Name Type Data Length Keterangan
Idartikel Integer Auto
Increament, PK
Judul Varchar 50
Isi Text
Gambar Varchar 100
Modul Praktikum Web Programming
STMIK Nusa Mandiri
41
Kemudian klik tombol save
Modul Praktikum Web Programming
STMIK Nusa Mandiri
42
Pertemuan 10 -16
Studi Kasus
Mahasiswa Membuat kelompok untuk melakukan studi kasus yaitu membuat
Website dengan tema yang telah di tentukan oleh Unit Pengembangan Akademik
Program Studi Teknik Informatika STMIK Nusa Mandiri.
Website tersebut nanti nya harus di presentasikan didepan kelas sebagai Nilai UAS
Modul Praktikum Web Programming
STMIK Nusa Mandiri
43
Daftar Pustaka
Ardiansyah, D. (2016). Sistem Informasi Pendaftaran Event dengan PHP untuk Panduan
Skripsi. Cirebon, Jawa Barat: CV. ASFA Solution.
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL.
Yogyakarta: CV. Andi Offset.
Duniailkom. (2018, May 12). Diambil kembali dari Duniailkom:
https://www.duniailkom.com/pengertian-konstanta-dan-cara-penulisan-
konstanta-php/
idcloudhost. (2018, may 7). Diambil kembali dari idcloudhost:
https://idcloudhost.com/kamus-hosting/http/
idwebhost. (2018, may 7). Diambil kembali dari idwebhost:
https://idwebhost.com/blog/pengertian-fungsi-dan-cara-kerja-dns/
indowebsite. (2018, May 7). Diambil kembali dari indowebsite:
https://www.indowebsite.id/website/
Kustiyahningsih, Y., & Anamisa, D. R. (2011). Pemrogramman Basis Data Berbasis
Web Mneggunakan PHP dan My SQL. Yogyakarta: Graha Ilmu.
Madcom. (2016). Pemrograman PHP dan MYSQL untuk Pemula. Yogyakarta: C.V
Andi.
Maxmanroe. (2018, May 7). Diambil kembali dari Maxmanroe:
https://www.maxmanroe.com/vid/teknologi/internet/pengertian-web-
server.html
Sutopo, A. H. (2007). Pemrograman Flash dengan PHPdan MySQL. Yogyakarta:
Graha Ilmu.
Wikipedi. (2020, May 7). Diambil kembali dari Wikipedia:
https://id.wikipedia.org/wiki/Internet
Wikipedia. (2018, May 7). Diambil kembali dari Wikipedia:
https://id.wikipedia.org/wiki/Internet
Wikipedia. (2018, May 12). Diambil kembali dari Wikipedia: Dalam bahasa
pemograman, Konstanta (constant) adalah suatu lokasi penyimpanan
(dalam memory) yang berisikan nilai yang sifatnya tetap dan tidak bisa
diubah sepanjang program berjalan