Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server...

44
Program Studi Teknik Informatika

Transcript of Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server...

Page 1: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Program Studi Teknik Informatika

Page 2: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 3: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 4: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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)

Page 5: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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.

Page 6: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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)

Page 7: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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,

Page 8: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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.

Page 9: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 10: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 11: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 12: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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:

Page 13: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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>.

Page 14: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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>

Page 15: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 16: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

15

Page 17: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

16

Page 18: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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:

Page 19: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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:

Page 20: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

19

Hasilnya

Contoh:

Hasilnya:

Page 21: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

20

Latihan:

Buatlah script HTML untuk bentuk tampilan sebagai berikut:

Page 22: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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.

Page 23: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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:

Page 24: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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).

Page 25: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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.

Page 26: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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”);

Page 27: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 28: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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.

Page 29: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 30: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 31: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 32: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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:

Page 33: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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.

Page 34: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

33

Latihan Membuat Form Data Diri

Buatlah script berikut , simpan dengan nama : registrasi.php

Page 35: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 36: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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)

{

Page 37: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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; }

Page 38: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

37

Latihan Percabangan:

Tampilan Input:

Tampilan Output

Dengan ketentuan soal sebagai berikut:

Page 39: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

38

Pertemuan 8

UTS

Page 40: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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/

Page 41: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 42: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

Modul Praktikum Web Programming

STMIK Nusa Mandiri

41

Kemudian klik tombol save

Page 43: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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

Page 44: Program Studi Teknik Informatika€¦ · Ada beberapa jenis software untuk membangun web server local atau localhost yang support sistem operasi windows diantaranya adalah Wampserver,

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