2020

MODUL PEMROGRAMAN WEB II

Safarul Ilham S.Kom

MK PEMROGRAMAN WEB II
1/1/2020
 Page |1

KATA PENGANTAR

Puji syukur kehadirat Tuhan yang maha kuasa yang telah memberikan rahmat dan
karunia-Nya sehingga penuntun praktikum Web II untuk Mahasiswa/i Institut Teknologi Dan
Bisnis Indonesia ini dapat selesai dengan sebaik-baiknya.

Penuntun praktikum ini dibuat sebagai pedoman dalam melakukan kegiatan

praktikum Web II yang merupakan penunjang mata kuliah Pemrograman Web II. Penuntun
praktikum ini diharapkan dapat membantu Mahasiswa/i dalam mempersiapkan dan
melaksanakan praktikum dengan lebih baik, terarah dan terencana. Penuntun ini terdiri dari
beberapa percobaan. Untuk setiap jenis praktikum diberikan tujuan, teori dasar, prosedur
percobaan, dan tugas persiapan yang harus diselesaikan.

Penyusun menyadari bahwa masih banyak kekurangan yang terdapat dalam penuntun
ini. Oleh sebab itu penyusun dengan tangan terbuka selalu menerima saran-saran yang
bersifat membangun dan membantu perbaikan penuntun ini untuk penerbitan selanjutnya.

Deli Serdang, September 2020

Penyusun,

Safarul Ilham S.Kom

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |2

TATA TERTIB PRAKTIKUM PEMROGRAMAN WEB II

INSTITUT TEKNOLOGI DAN BISNIS INDONESIA

I. Mahasiswa yang akan mengikuti praktikum Pemrograman Web II diwajibkan

1. Mengikuti pengarahan praktikum sesuai jadwal yang telah di tentukan.
2. Mengikuti semua percobaan pada praktikum Pemrograman Web II. Jika salah satu
percobaan tidak diikuti, maka untuk nilai praktikum mahasiswa tersebut dikatakan
GAGAL.

II. Sebelum memasuki laboratorium mahasiswa Diwajibkan :

1. Hadir selambat-lambatnya 5 menit sebelum praktikum dimulai.
2. Membawa perlengkapan :
a. Buku penuntun praktikum
b. Kertas data praktikum
c. Kartu absensi yang telah di isi judul dan tanggal percobaan
d. Laporan jurnal praktikum sebelumnya (berlaku setelah melakukan praktikum
pertama)
e. Alat tulis menulis (Pensil,Pulpen,Penghapus, dan Penggaris)
BAGI MAHASISWA/I YANG TIDAK MEMBAWA PERLENGKAPAN PADA
POINT DI ATAS, MAKA MAHASISWA TIDAK DI IJINKAN MENGIKUTI
PRAKTIKUM.
3. Memakai sepatu, tidak dibenarkan mengenakan sendal, harus berpakaian rapi dan
sopan (Tidak boleh memakai BAJU KAOS)
4. Mengirim surat keterangan dokter kebagian administrasi Laboratorium, apabila
berhalangan hadir karena sakit, paling lambat 1 hari sebelum praktikum dimulai.

III. Di dalam laboratorium Komputer :

1. Sebelum memulai percobaan praktikan diwajibkan memeriksa peralatan bersama
asisten, (Apakah telah lengkap dan dalam keadaan baik)
2. Selama melakukan percobaan praktikan tidak dibenarkan :
a. Merokok
b. Meninggalkan percobaan masing-masing tanpa seizin asisten

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |3

c. Pinjam meminjam alat-alat, baik (flashdisk) alat-alat laboratorium maupun alat

tulis menulis
d. Mengganggu praktikan lainnya.
e. Membuat keributan
f. Menggunakan handpone atau sejenisnya yang dapat mengganggu praktikum.
3. Setelah selesai melakukan percobaan, praktikan harus menulis data percobaan pada
kertas data praktikum dan diserahkan pada asisten untuk ditandatangani dan
selanjutnya menyelesaikan laporan (Jurnal) praktikum.
4. Sebelum dan sesudah percobaan, praktikan harus membersihkan dan merapikan
peralatan masing-masing.

IV. Cara penulisan Jurnal :

1. Pada sampul jurnal ditulis jelas dan lengkap data praktikan :
Nama :
Nim :
Fak / Jur :
Kelompok :
Nama Percobaan :
Tanggal percobaan :
Asisten :

2. Isi Jurnal :
a. Judul
b. Tujuan Percobaan
c. Teori ( Minimal 3 halaman spasi 1,5 teori diambil dari buku dan referensi
terpercaya di internet, seperti jurnal dan lain-lain serta seluruh referensi di tulis
pada lembar daftar pustaka).
d. Peralatan (diterngkan fungsi masing-masing alat)
e. Prosedur ( dalam penulisannya dilarang menggunakan kalimat perintah )
f. Tabel data
g. Analisa data
h. Kesimpulan dan saran
i. Daftar pustaka

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |4

NB : Setiap halaman jurnal di bagi menjadi 3 kolom dengan ukuran yang di

tentukan lihat bentuk penulisan jurnal pada halaman :

V. Setelah seluruh percobaan selesai dilaksanakan, akan diadakan tes praktikum

(jadwal di tentukan kemudian)

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |5

PERCOBAAN I
KILAS HTML & PHP

I. TUJUAN
 Mengetahui prinsip dasar dari web
 Mengenal Software Tools Web
 Mengenal tools Notepad
 Membuat Web awal

II. TEORI DASAR

1. Pengertian Web

World Wide Web atau WWW atau juga dikenal dengan WEB adalah salah satu
layanan yang didapat oleh pemakai computer yang terhubung ke internet. Web ini
menyediakan informasi bagi pemakai computer yang terhubung ke internet dari
sekedar informasi “sampah” atau informasi yang tidak berguna sama sekali sampai
informasi yang serius.

Dari informasi yang gratisan sampai informasi yang komersial. Website atau
situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk
menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau
gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing
dihubungkan dengan jaringan-jaringan halaman (hyperlink).

2. Unsur-Unsur Website

Untuk menyediakan keberadaan sebuah website, maka harus tersedia unsur-unsur

penunjangnya, adalah sebagai berikut:

1. Nama domain (Domain name/URL – Uniform Resource Locator)

Pengertian Nama domain atau biasa disebut dengan Domain Name atau URL adalah
alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau
dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah
website pada dunia internet. Contohnya adalah http://www.itbi.ac.id

Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan.
Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan
dan lokasi keberadaan website tersebut. Contoh nama domain ber-ekstensi internasional
adalah com, net, org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |6

Negara Indonesia adalah co.id (untuk nama domain website perusahaan), ac.id (nama
domain website pendidikan), go.id (nama domain website instansi pemerintah), or.id
(nama domain website organisasi).

2. Rumah tempat website (Web hosting)

Pengertian Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk
tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan
ditampilkan di website. Besarnya data yang bisa dimasukkan tergantung dari besarnya
web hosting yang disewa/dipunyai, semakin besar web hosting semakin besar pula data
yang dapat dimasukkan dan ditampilkan dalam website. Web Hosting juga diperoleh
dengan menyewa. Besarnya hosting ditentukan ruangan harddisk dengan ukuran
MB(Mega Byte) atau GB(Giga Byte). Lama penyewaan web hosting rata-rata dihitung
per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web
hosting yang banyak dijumpai baik di Indonesia maupun Luar Negri.

3. Bahasa Program (Scripts Program)

Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam website yang
pada saat diakses. Jenis bahasa program sangat menentukan statis, dinamis atau
interaktifnya sebuah website. Semakin banyak ragam bahasa program yang digunakan
maka akan terlihat website semakin dinamis, dan interaktif serta terlihat bagus.
Beragam bahasa program saat ini telah hadir untuk mendukung kualitas website. Jenis
jenis bahasa program yang banyak dipakai para desainer website antara lain HTML, ASP,
PHP, JSP, Java Scripts, Java applets dsb. Bahasa dasar yang dipakai setiap situs adalah
HTML sedangkan PHP, ASP, JSP dan lainnya merupakan bahasa pendukung yang
bertindak sebagai pengatur dinamis, dan interaktifnya situs. Bahasa program ASP, PHP,
JSP atau lainnya bisa dibuat sendiri. Bahasa program ini biasanya digunakan untuk
membangun portal berita, artikel, forum diskusi, buku tamu, anggota organisasi, email,
mailing list dan lain sebagainya yang memerlukan update setiap saat.

4. Desain website

Setelah melakukan penyewaan domain name dan web hosting serta penguasaan bahasa
program (scripts program), unsur website yang penting dan utama adalah desain. Desain
website menentukan kualitas dan keindahan sebuah website. Desain sangat berpengaruh
kepada penilaian pengunjung akan bagus tidaknya sebuah website.

Untuk membuat website biasanya dapat dilakukan sendiri atau menyewa jasa website
designer. Saat ini sangat banyak jasa web designer, terutama di kota-kota besar. Perlu
diketahui bahwa kualitas situs sangat ditentukan oleh kualitas designer. Semakin banyak
penguasaan web designer tentang beragam program/software pendukung pembuatan situs
maka akan dihasilkan situs yang semakin berkualitas, demikian pula sebaliknya. Jasa web

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |7

designer ini yang umumnya memerlukan biaya yang tertinggi dari seluruh biaya
pembangunan situs dan semuanya itu tergantung kualitas designer.

III. PERALATAN

1. Notepad / Notepad++
2. Mozila Firefox / Google Chrome / Internet Explorer Dll
3. Software XAMPP sebagai Web Server local

IV. KEGIATAN PRAKTIKUM

1. Dasar Skrip HTML

Untuk menuliskan kode kode HTML di perlukan Notepad dan tuliskan kode di
bawah ini :

<html>
<head>
<title>WEB 1</title>
</head>
<body>
INI ADALAH WEBSITE PERTAMA SAYA
</body>
</html>

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |8

Kemudian simpan dalam bentuk format html dengan cara

- Pilih menu file kemudian pilih save

- Kemudian cari dimana dokument akan di simpan, dalam hal ini saya akan
menyimpan dokumen di Local Disk D dan saya akan membuat sebuah folder
dengan nama BELAJAR WEB dan menyimpan dengan nama LAT1.html

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 Page |9

- Buka tempat penyimpanan yang telah di buat dan open menggunakan web
browser ataupun Mozila atau sebagainya..

2. Tata Cara menggunakan XAMPP

 Instalasi Software XAMPP
Download dahulu aplikasi XAMPP di website remi milik Xampp, software ini saya
pilih karna software ini opensource, yang gratis dan sangat familiar, untuk
memperoleh sofware xampp silahkan ke link ini : https://www.apachefriends.org/

Kemudian buka software dan lakukan instalasi seperti pada gambar di bawah :
1. Buka software yang telah di download

2. Kemudian Tekan Next pada tampilan di bawah

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 10

3. Cheklist saja semua pilhan dan pilih Next

4. Kemudian langsung pilih next

5. Tunggu Beberapa saat dan Pilih Finish, maka peng instalan telah selesai

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 11

6. Kemudian Akan muncul pertanyaan apakah kita akan mengaktifkan xampp

sekarang atau tidak, maka kita pilih YES

 Langkah Konfigurasi dan mengakses Server XAMPP

1. Buka Control Panel XAMPP dengan cara pilih start  XAMPP  Xampp
Control Panel, maka akan muncul tampilan di bawah,

Pastikan kondisi Apache dan MySQL harus berjalan dengan di tandakan

tombol berubah menjadi stop bukan Start.
2. Kemudian Buka Web Browser kesukaan kamu, dan disini saya menggunakan
Google Chroome kemudian tuliskan http://localhost/xampp,

Jika muncul seperti gambar di atas maka xampp kamu berhasil di install.

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 12

 Membuat Syntax PHP

1. Dasar dari PHP adalah HTML untuk itu silahkan pelajari terlebih dahulu
tentang HTML untuk bisa masuk ke pembelajaran PHP ini, jika sudah mengerti
tentang HTML maka bahasa PHP tidaklah jauh dari HTML,
Syntax Dasar PHP :
<?php
Echo “INI SYNTAX PHP”;
?>

2. Cara menyimpan File PHP

Untuk menyimpan file PHP tidak bisa seperti file HTML yang dimana saja bisa
di simpan dan di buka, untuk menyimpan file ini, harus berada di dalam local
server yang telah kita install tadinya, yaitu XAMPP..
Setelah syntax di atas di buat maka simpan dengan menekan tombol save pada
notepad.

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 13

Kemudian Pilih Computer dan Pilih Local Disk C

Cari Folder XAMPP diantara banyak folder

Kemudian Buka folder htdocs

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 14

Buat sebuah folder baru dengan nama programweb

Masuk ke folder programweb yang telah di buat, kemudian ubah nama file
menjadi pra1.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 15

 Langkah memanggil atau menampilkan file yang telah di buat

Buka Web browser yang kamu inginkan, disini saya menggunakan Google
Chroome dan masukan alamat address : http://localhost/programweb/pra1.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 16

PERCOBAAN II
FORM

I. TUJUAN
 Mengetahui Fungsi Dari Form
 Mengetahui cara membuat Type Input
 Membuat input biodata sederhana

II. PRAKTIKUM

1. Input type Text

Digunakan untuk menampung karakter text yang tidak terlalu panjang
Komponen:
<input></input> <size>
Contoh :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 17

- Atribut Type Size

Contoh :

- Atribut type Placeholder

Contoh :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 18

2. Input Type Password

Input ini berfungsi untuk menyembunyikan karakter, contoh password dll
Contoh :

3. Input type Radio

Input ini biasanya di gunakan untuk membuat sebuah pilihan di antara banyak
pilihan, misal untuk membuat pilihan jenis kelamin Pria Atau Wanita
Contoh :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 19

4. Input type Chekbok

Input type ini berfungsi untuk membuat beberapa list yang dapat kita pilih
nantinya, list ini dapat di pilih beberapa sekaligus.
Contoh:

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 20

5. Input type Dropdown

Input ini berfungsi untuk membuat list namun dalam bentuk pilihan ke arah
bawah yang nantinya dapat di pilih salah satunya, contoh untuk memilih jenis
Agama.
Contoh:

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 21

6. Textarea
Textarea berfungsi hampir sama dengan Input type text namun yang
membedakannya yaitu text yang dapat di input lebih panjang, biasanya di
gunakan untuk alamat.
Contoh :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 22

7. Membuat Tombol
Setelah selesai coba anda gabungkan semua pembelajaran dengan membuat
sebuah form biodata, dan buat tombol dengan contoh :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 23

Contoh Code Biodata :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 24

- Penyempurnaan dengan menggunakan table

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 25

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 26

PERCOBAAN III
PREDEFINED VARIABLE DAN MODULARISASI

I. TUJUAN
 Mengetahui Fungsi Dari Variable PHP
 Mengetahui cara membuat Kirim Data
 Membuat input Data dan Menampilkannya

II. PRAKTIKUM
 Predefined variable adalah variabel yang sudah digunakan oleh php dan tidak bisa
digunakan sebagai nama variabel lagi oleh programmer. Ada beberapa predefined
variable, diantaranya adalah:
1. Variable GET
Variabel $_GET berasal dari parameter url atau bisa juga berasal dari masukan
lewat formulir yang dikirim dengan method get. Kali ini kita akan membuat
kirim data yang dapat kita input dengan metode GET
Buat syntax dibawah dengan nama pra2getinput.php

Kemudian Buat syntax ke dua dengan nama pra2getoutput.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 27

Hasil Output:

2. Variable POST
Variable $_POST ini hampir sama dengan metode GET, namun metode ini
sering di gunakan untuk mengimpan defaulf variable seandainya sebuah form
tidak di definisikan nantinya.
Buat Syntax dengan nama pra2postinput.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 28

Buat syntax dengan nama pra2postoutput.php

Hasil Output

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 29

 Modularisasi
Modularisasi berarti program yang dibuat dengan php akan dibagi kedalam
beberapa modul. Setiap modul atau script dikembangkan secara terpisah dengan
tujuan dan fungsi khusus yang nantinya bisa digunakan kembali. Dengan begitu
maka proses
pengembangan aplikasi akan lebih cepat karena fungsi-fungsi atau operasi-operasi
tertentu tidak perlu ditulis secara berulang-ulang ditiap script ataupun ditiap
aplikasi yang berbeda.

1. Require
Require adalah request, sesuai dengan namanya, jika file yang di cari tidak di
temukan, maka halaman akan di berhentikan dan di berikan pesan eror.
Buatlah file berikut dengan nama pra3require1.php

Buat file berikut dengan nama pra3reuire2.php

Buat file berikut dengan nama pra3require3.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 30

Kemudian panggil di web file pra3require3.php maka akan tampil seperti

gambar di bawah:

2. Include
Fungsi dari include hampir sama dengan require, namun dengan menggunakan
include jika file yang di cari dan dimaksud tidak ada, maka hanya akan
menampilkan pesan warning saja, namun web tetap di tampilkan
File pra3include1.php

File pra3include2.php

File pra3include3.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 31

Hasil Output :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 32

PERCOBAAN IV
STRUKTUR KEPUTUSAN DAN PERULANGAN

I. TUJUAN
 Mengetahui Fungsi Dari Keputusan dan Perulangan
 Mengetahui cara membuat Struktur data web
 Membuat Perulangan dan pengambilan keputusan di web

II. PRAKTIKUM
 Struktur Keputusan
Yang dimaksud dengan struktur keputusan adalah suatu pernyataan bersyarat yang
mengendalikan urutan pernyataan untuk mendapatkan sebuah nilai. Struktur
keputusan yang akan kita gunakan adalah struktur keputusan IF ELSE dan IF
ELSEIF.
1. Struktur IF ELSE
Struktur keputusan if else hanya digunakan untuk 2 kemungkinan saja,
sehingga if else ini jarang di gunakan dalam sekala web base besar, contoh :
Jika keadaan di luar hujan, maka pakailah payung
Jika tidak hujan maka tidak perlu memakai payung
Kita dapat menuliskan code nya sebagai berikut :
If(luar==hujan){ echo ”pakai payung”;}
Else { echo “Tidak perlu memakai payung”; }

Contoh penerapan di web :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 33

Output :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 34

2. Struktur IF ELSEIF
Struktur ini digunakan untuk mengambil keputusan di antara banyak pilihan
pilihan, sehingga struktur ini banyak sekali digunakan untuk mengatasi
pemilihan percabangan di dalam sebuah web.
Contoh :
Jika nilai Andri 80 maka ia akan dapat A
Jika nilai Andri 70 maka ia akan dapat B
Jika nilai Andri 60 maka ia akan dapat C
Dapat kita tuliskan dalam struktur web seperti:
If(nilai==80){ echo “A”; }
Ifelse(nilai==70){ echo “B”; }
Ifelse(nilai==60){ echo “C”; }

Contoh penerapan pada Web :

Hasil :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 35

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 36

 STRUKTUR PERULANGAN
Yang dimaksud dengan pengulangan atau looping, yaitu suatu proses perputaran
suatu nilai dari nilai yang tertinggi sampai terendah atau sebaliknya dari nilai
terendah menuju nilai tertinggi. Misalnya perputaran nilai dari angka 1 dampai 10.
Yang termasuk struktur pengulangan, diantaranya adalah : For, While, do..while
dan foreach.

Contoh :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 37

PERCOBAAN V
KONEKSI PHP KE DATABASE

I. TUJUAN
 Mengetahui Fungsi Dari Database
 Mengetahui cara membuat Database
 Membuat Pemanggilan dari database

II. PRAKTIKUM
 Membuat Database di XAMPP
Untuk membuat sebuah database yang nantinya akan kita hubungkan dengan
system maka diperlukan dahulu data yang akan kita olah atau akan kita input,
dalam kasus kali ini kita akan membahas data buku, dengan perencanaan sebagai
berikut :
NAMA DATABASE : PERPUS
tabel_buku :

kode_buku judul_buku pengarang

K001 PEMROGRAMAN WEB Susilo
K002 SISTEM JARINGAN Kamal
K003 ROBOT MODERN Ismail

Dari tabel di atas kita dapat membuat sebuah penampung data yang nantinya
berinteraksi dengan web atau grafis, dan data nantinya akan dapat di input dan di
hapus. Pertama kita definisikan dahulu jenis tipe data dan panjang data.
Aturan Data :

FIELD Jenis Data Panjang Data

kode_buku Varchar 4
judul_buku Varchar 100
pengarang Varchar 50

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 38

Setelah di definisikan maka sekarang kita dapat menerapkan kerangka data ke

database, akses database dengan menggunakan web browser, kali ini saya
menggunakan Google Chroome dan tuliskan pada address bar alamat :
http://localhost/phpmyadmin/

Kemudian buatlah sebuah database dengan nama : PERPUS

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 39

Kemudian masuk ke database dengan cara klik nama Database nya

Kemudian buatlah nama tabel dengan tabel_buku dan jumlah kolom adalah 3 buah
kemudian klik GO.

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 40

Isi data sesuai tabel atau seperti gambar di bawah

Saat ini kita telah berhasil membuat dan menyediakan database untuk web.

 Membuat Koneksi Ke Database

Untuk dapat menghubungkan web ke database SQL kita harus membuat beberapa
file agar nantinya web dapat terhubung dengan data data yang akan di simpan,
karena secara normal web atau HTML bukanlah di desain untuk menyimpan data,
dari itu maka web perlu adanya integrasi agar data dapat di olah dan di simpan.
Buatlah sebuah folder baru dengan nama perpus di dalam htdocs dan kemudian
buatlah file syntax di bawah dan simpan dengan nama : koneksi.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 41

Kemudian panggil dengan web browser dan pastikan tidak ada pesan apapun
muncul seperti tampilan di bawah:

Sejauh ini web kita sudah dapat terhubung ke server.

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 42

PERCOBAAN VI
MEMBUAT HALAMAN INPUT DATA

I. TUJUAN
 Mengetahui Fungsi Input
 Mengetahui cara membuat Input Data
 Membuat Form Input Data

II. PRAKTIKUM
Input data berfungsi agar nantinya web yang kita gunakan dapat langsung di Input
datanya tanpa harus di input melalui database SQL, berdasarkan tabel data yang telah
kita buat pada percobaan sebelumnya, maka dapat kita rancang sebagai berikut:

INPUT DATA BUKU

Kode Buku

Judul Buku

Pengarang

SUBMIT RESET

Setelah di rancang maka kita akan menuliskan script untuk input data tersebut,
silahkan simpan dengan nama inputbuku.php :

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 43

Membuat Proses dari input buku :

Setelah tampilan kita selesaikan maka langkah selanjutnya adalah membuat proses
setelah tombol SUBMIT di tekan agar data yang di Inputkan dapat masuk kedalam
database.
Buatlah sebuah file baru dengan nama prosesinputbuku.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 44

Input sebuah data kemudian Lakukan Submit,

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 45

PERCOBAAN VII
MEMBUAT HALAMAN TAMPIL DATA

I. TUJUAN
 Mengetahui Penampil
 Mengetahui cara membuat Tampil Data
 Membuat Form Tampil Data

II. PRAKTIKUM
Tampil data berfungsi agar data yang sudah ada di dalam database dapat kita lihat dan
nantinya dapat kita hapus dan serta dapat kita edit, sesuai tabel di percobaan
sebelumnya maka kita akan membuat beberapa tampilan yaitu :

No kode_buku judul_buku pengarang Action

1 K001 PEMROGRAMAN WEB Susilo Edit Delete
2 K002 SISTEM JARINGAN Kamal Edit Delete
3 K003 ROBOT MODERN Ismail Edit Delete

Setelah kita buat perancangan datanya maka hal selanjutnya adalah menuliskan kode,
tuliskan syntax di bawah dan simpan dengan nama lihatbuku.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 46

Syntax editbuku.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 47

Syntax proseseditbuku.php

Syntax hapusbuku.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 48

PERCOBAAN VIII
MEMBUAT LOGIN

I. TUJUAN
 Mengetahui Cara login
 Mengetahui cara membuat login

II. PRAKTIKUM
1. Buatlah Table baru pada database perpus dengan nama table user.

2. Kemudian Isi field seperti berikut

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 49

3. Input sebuah data untuk membuat login data

Kemudian klik Go Atau Save

Maka akan muncul seperti gambar di atas, user yang telah saya input yaitu dengan
kode:u01 Nama:Dara Username:dara Password:123

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 50

4. Syntax login simpan dengan nama index.php

5. Syntax proses, simpan dengan nama proseslogin.php

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 51

Membuat Tombol Keluar(logout) simpan syntax di bawah dengan nama logout.php

Buka file lihatbuku.php kemudian edit syntax dan kemudian pilih simpan

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM

 P a g e | 52

Membuat cek Sesion, agar website tidak dapat langsung di buka di saat user belum
melakukan login.
Buatlah sebuah file dengan nama cek.php

Kemudian edit setiap halaman kecuali index.php dan proseslogout.php dan tuliskan
syntax seperti contoh di bawah.

Thanks to View..!!

Modul By : Safarul Ilham S.Kom

Do Not Reupload

MK PEMROGRAMAN WEB II | Oleh : SAFARUL ILHAM S.KOM