PHB_Tegal_2024 Modul PemWeb3_Sem5

MODUL
PROJECT PEMROGRAM WEB 3
SEMESTER 5

Disusun Oleh:
Abdul Wahab, S.Kom, M.M

POLITEKNIK HARAPAN BERSAMA TEGAL

Jl. Mataram Margadana Kota Tegal
2024

Page | 1
PHB_Tegal_2024 Modul PemWeb3_Sem5

Kata Kunci: Pemrograman web, PHP, MySQL, Aplikasi website

PENDAHULUAN
Selama era kemajuan teknologi digital saat ini, Globalisasi telah membuka pintu bagi
konektivitas yang lebih luas dan cepat (Sinlae, 2024). Pada saat ini, website sangat berguna
sebagai gerbang utama menuju informasi dan interaksi. Hampir semua organisasi dan individu
mempunyai sebuah website untuk menampilkan informasi, menawarkan produk, atau
membangun sebuah komunitas. Website terus berkembang, dari statis dan pasif menjadi
dinamis dan interaktif, mengikuti kebutuhan pengguna yang semakin kompleks. Pemrograman
website berperan penting dalam evolusi ini. Dengan menguasai bahasa pemrograman dan
teknologi web, kita dapat membangun website yang informatif, fungsional dan menarik. Salah
satu kombinasi yang populer untuk membangun sebuah website dinamis , menggunakan PHP
dan MySQL.
HTML(Hyper Text Markup Language)HTML adalah suatu bahasa yang menggunakan
tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang dapat ditafsirkan oleh browser
agar halaman tersebut dapat ditampilkan secara benar(Mufti Prasetiyo et al. n.d. 2022). Pada
dasarnya, HTML bukanlah sebuah bahasa pemrograman, tetapi markup language atau bahasa
penandaan yg terdiri dari banyaknya kumpulan tag, biasanya hanya menyatakan bahwa bagian
tertentu dari sebuah halaman web adalah isi yang harus ditampilkan oleh browser. Penyusunan
HTML, menggunakan kode atau symbol khusus yang ditulis dalam file atau dokumen untuk
membangun struktur halaman web. Hal ini memungkinkan halaman web yang ditampilkan
dilayar komputer dan juga dipahami oleh pengguna
CSS(Cascading Style Sheet) merupakan aturan untuk mengatur tata rias website,
mengatur berbagai elemen agar terstruktur dan seragam. Dengan CSS, kita bisa mengatur jenis
huruf, warna tulisan, dan latar belakang halaman, menentukan tampilan format websitesesuai
dengan keinginan atau kebutuhan, mempercepat proses halaman web, mempermudah
pengolahan kode HTML, membuat website lebih rapih dan banyak variasi tampilan, membuat
website dapat menyesuaikan disemua ukuran layar.
JavaScript adalah bahasa scripting yang digunakan oleh klien. Komputer user akan
melakukan pemrosesan script dengan sendirinya. JavaScript biasanya dapat digunakan untuk
membuat animasi dan elemen interaktif lainnya pada halaman web. Ini ditunjukkan oleh
banyaknya library JavaScript yang dapat dipakai oleh programmer untuk membuat halaman
web yang dibuat menjadi lebih interaktif. Untuk menjalankan kode JavaScript, kita
membutuhkan browser yang mendukung dan dapat menggunakan JavaScript.
Struktur Query Language (SQL) adalah bahasa khusus domain yang digunakan untuk
mengolah data dalam sistem manajemen basis data hubungan . Aplikasi RDBMS (Relational
Database Management Sistem) yang paling umum digunakan oleh programmer aplikasi web
untuk mengolah basis data mereka adalah MySQL. Fungsi-fungsi dalam Bahasa pemrograman
PHP biasanya digunakan untuk membuat, membaca, mengubah, atau menghapus data dalam
SQL, yang kemudian dapat ditampilkan di halaman web.
PHP, atau Hypertext Preprocessor, adalah bahasa pemrograman server-side yang
memungkinkan website untuk berinteraksi dengan database dan menghasilkan konten
dinamis.PHP merupakan bahasa scripting yang menyatu dengan HTML dan dijalankan pada
server side. Artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan pada server
sedangkan yang dikirimkan ke browser hanya hasilnya saja(Anon n.d.2003 ).Untuk SQL,
merupakan sistem manajemen basis data relasional yang menyimpan data terstruktur website
.Dengan menggabungkan Bahasa pemrograman PHP dan MySQL, kita dapat membangun
website yang Menyimpan dan menampilkan data secara terstruktur, seperti daftar produk,
profil pengguna, atau artikel berita, menyediakan interaksi dengan pengguna, seperti formulir

Page | 2
PHB_Tegal_2024 Modul PemWeb3_Sem5

login, komentar, atau keranjang belanja menyesuaikan konten website berdasarkan kebutuhan
pengguna, seperti rekomendasi produk berdasarkan preferensi pengguna atau tampilan website
yang berbeda untuk perangkat mobile.

METODE
Dalam penulisan modul ini, penulis menggunakan metode SDLC(System Life
Development Cycle). Metode SDLC ini terdiri dari beberapa tahap dimulai dari tahap
perencanaan. Dimana pada tahap ini dilakukan perencanaan mengenai pembuatan website
dengan mempelajari HTML, CSS, dan Bahasa pemograman PHP, serta yang lainya yang
menunjang kebutuhan pembuatan website sederhana ini. Tahap selanjutnya adalah tahap
analisis, dimana ditahap ini dilakukan pengumpulan komponen mengenai apa yang dibutuhkan
pada pembuatan website sederhana ini.

HASIL DAN PEMBAHASAN

Langkah-langkah untuk pembuatan website sederhana ini tentunya kita sudah tauterlebih
dahulu dasar dasar penggunaan syntax syntax seperti HTML, dan CSS. Lalu dilanjutkan dengan
pemahaman dasar Bahasa pemrograman PHP. Untuk database kali ini memakai sebuah
database MySql.
1. INSTALASI SOFTWARE
1) XAMPP/WAMP
Install XAMPP atau WAMP untuk menyediakan server lokal, php, dan MySql.

2) TEKS EDITOR
Gunakan teks editor seperti visual code studio, sublime text, atau yang lainnya

3) MULAI SERVER
Jalankan server , APACHE dan MySql dicontrol panel XAMPP atau WAMPP

2. BUAT DATABASE DAN TABEL DI MYSQL

Klik admin pada MySql, untuk menuju ke database Mysql seperti gambar dibawah ini

Gambar 1: Control panel XAMPP

Buat database baru. Klik new, lalu create database, contoh: “belanja”

Gambar 2: Create New Database

Page | 3
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 3: nama database

Jika sudah, kik create, lalu akan seperti Digambar bawah ini. Pada tabel name, namai
tabel dengan “tabel_belanja”, lalu create

Gambar 4: Create Table Name

Jika sudah akan muncul gambar seperti ini:

Gambar 5: Structure database

Setelah pembuatan nama database, dan tabel di database. Diperlukan setidaknya 5 file
PHP untuk pembuatan web aplikasi sederhana. Diantaranya index.php, koneksi.php,
insert.php, edit.php, delete.php. pastikan 5 file tadi, berada dalam 1 folder yang tersimpan
dibagian file htdocs. Langkah langkahnya sebagai berikut:
1. Buka file manager, pilih kebagian penyimpanan, lalu ke windows:C

Page | 4
PHB_Tegal_2024 Modul PemWeb3_Sem5

2. Cari file xampp,

Gambar 6: folder xampp

3. Cari file htdocs

Gambar 7: folder htdocs

4. Buat 1 folder, yang nantinya terdiri dari index.php, koneksi.php, insert.php, edit.php,
delete.php. beri nama sesuai keinginan.

Gambar 8: folder test_crud

Tujuan dibuatnya 1 folder didalam htdocs untuk menjaga kemudahan pengelolaan,

menjaga keteraturan, dan mudah diakses.
5. Untuk mengakses web aplikasi yang sedang dibangun, dapat dilihat dengan cara
mengakses di browser atau chrome. Jika menamai foldernya test_crud. Maka aplikasi
dapat diakses melalui http://localhost/test_crud.
6. Selanjutnya ialah sebelum mengakses, pastikan pada control panel xampp, apache dan
mysql, sudah aktif.

Setelah mengikuti Langkah Langkah diatas, masuk pada proses penulisan script atau
kode. Buka teks editor, disini penulis menggunakan teks editor sublime text, buat new file atau
ctrl+n, lalu save, pastikan di simpan pada peyimpanan seperti diatas tadi, windows:c – xampp
– htdocs – nama_folder – lalu namai file dengan koneksi.php untuk koneksi ke database. Jika
sudah, mulailah pengkodean Seperti contoh script dibawah ini:

Page | 5
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 9: koneksi.php

Setelah selesai membuat file koneksi.php, selanjutnya buat file dengan nama index.php.
untuk scriptnya, seperti contoh script dibawah ini.

Gambar 10: index.php

Gambar 11: index.php

Page | 6
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 12: index.php

Gambar 13: index.php

Page | 7
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 14: index.php

Gambar 15: index.php

Page | 8
PHB_Tegal_2024 Modul PemWeb3_Sem5

Pada penulisan kode diatas, penulis menggabungkan styling CSS dalam 1 file index.php
seperti pada kode diatas.
Jika ingin melihat hasil dari script diatas, pergi ke browser atau chrome, akses melalui
http://localhost/test_crud. Jika tidak ada error, tampilan nya akan seperti dibawah ini:

Gambar 16: tampilan website

Jika sudah membuat file index.php, selanjutnya membuat file insert.php untuk
mendapatkan hasil dari pengguna yang menginput data seperti ketentuan yang ada didalam
tabel. Berikut script untuk insert.php

Gambar 17: insert.php

Sama seperti Langkah tadi, lalu buatlah file edit.php. dan scriptnya seperti dibawah ini:

Page | 9
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 18: edit.php

Gambar 19: edit.php

Page | 10
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 20: edit.php

Gambar 21: edit.php

Page | 11
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 22: edit.php

Terakhir, untuk menghapus data, beri nama delete.php. untuk script nya, seperti
gambar dibawah ini

Page | 12
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 23: delete.php

Ketika ke 5 file tadi sudah dibuat, pastikan untuk pengkoneksian ke database tidak ada
kesalahan, baik kesalahan penulisan kode, ataupun yang lainnya. Jika semuanya berjalan lancar
dan tidak ada erorr, maka tampilannya akan seperti ini.

Gambar 24: tampilan web

Page | 13
PHB_Tegal_2024 Modul PemWeb3_Sem5

Gambar 25: tampilan web

KESIMPULAN

Berdasarkan pembahasan diatas, terdapat kesimpulan bahwa dengan menggunakan

HTML, CSS, MySql dan Bahasa pemrograman PHP, dapat membuat sebuah aplikasi web
sederhana. Menginput, membaca, mengedit, dan menghapus suatu data, yang terhubung
dalamdatabase yang diakses melalui localhost. Penggunaan HTML untuk membuat kerangka
dari suatu tampilan aplikasi websitenya, CSS, untuk mengatur tampilan, layout, dan juga gaya
dariaplikasi website tersebut, PHP untuk menjalankan proses input, edit, dan delete suatu data,
dan Mysql, sebagai databasenya. Data yang berhasil di input akan ditampilkan di website,
dalam bentuk tabel. Program ini dapat dikembangkan lagi untuk menyelesaikan permasalahan
permasalahan yang lebih kompleks, sesuai kebutuhan pengguna. Dengan penulisan modul ini,
diharapakan membantu pembaca, untuk memulai membuat program aplikasi web sederhana,
yang nantinya dapat dikreasikan atau dikembangkan oleh pembaca, untuk membuat program
yang sesuai dengan kebutuhan.

REFERENSI
(Ramadhan et al., n.d 2022.) Edukasi Pemograman Web Fundamental Sebagai Ilmu Wajib Era
Industri 4.0
(Prasetyo et al., 2020 Pembahasan Mengenai Front-End Web Developer Dalam Ruang Lingkup
Web Development)
(Sari et al., 2022 Perancangan Sistem Informasi Penginputan Database Mahasiswa Berbasis
Web)
(Noviana, n.d. PEMBUATAN APLIKASI PENJUALAN BERBASIS WEB MONJA STORE
MENGGUNAKAN PHP DAN MYSQL )
Page | 14
PHB_Tegal_2024 Modul PemWeb3_Sem5

(Noe’man et al., n.d 2021.) Pelatihan Pembuatan Website Dalam Menghadapi

Perkembangan Teknologi Bagi Siswa Di SMK Galajuara Bekasi
(Esirgapovich et al., 2022 THE EASIEST RECOMMENDATIONS FOR CREATING A
WEBSITE)
(Permana, 2013 Aplikasi CRUD Sederhana Dengan PHP dan MySql)
(Ramadhana et al., 2022 Edukasi Pemrograman WEB Fundamental Sebagai Ilmu Wajib Era
Industri 4.0)
(Almais, 2018 Modul Praktikum Web Programming)
(Zen et al., 2022 PEMROGRAMAN WEB UNTUK PEMULA HINGGA MAHIR)
(Tinambunan et al., 2023 BUKU AJAR PEMROGRAMAN WEB MENGGUNAKAN PHP
& MySQL)
(Erawan, 2015 PEMROGRAMAN WEB)
(Widigdo 2023 Dasar Pemrograman PHPdan MySQL)
(Sinlae, 2024 PERKEMBANGAN CYBER DI ERA GLOBALISASI)

Page | 15