0% menganggap dokumen ini bermanfaat (0 suara)
24 tayangan15 halaman

Modul Pemrograman Web

modul praktikum web

Diunggah oleh

herrii182
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
24 tayangan15 halaman

Modul Pemrograman Web

modul praktikum web

Diunggah oleh

herrii182
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

MODUL

Oleh: Zunny Hidayatulloh, S.Kom

MEMBUAT SISTEM INFORMASI


PENDAFTARAN SISWA BARU
BERBASIS WEB
MENGGUNAKAN PHP & MYSQL
CRUD (CREATE, READ, UPDATE, DELETE).

UJI SERTIFIKASI KOMPETENSI (USK)


KLASTER:
PEMROGRAMAN WEB.

KOMPETENSI KEAHLIAN
REKAYASA PERANGKAT LUNAK
SMK MUHAMMADIYAH PEKALONGAN
Jl. AMD No. 1 Pasirkratonkramat, Pekalongan Barat, Kota Pekalongan
2021
PENDAHULUAN

PHP dan MySQL dapat saling berhubungan melalui perantara API


(Application Programming Interface).
Ada tiga jenis API MySQL yang disediakan di PHP:
1. mysql API ini sudah tidak didukung/dikembangkan lagi (kadalwarsa).
2. mysqli (mysql improvement) peningkatan dari API mysql
3. PDO (PHP Data Object)

API yang pertama sudah tidak didukung lagi sejak PHP versi 5.5.x dan digantikan
dengan mysqli yang lebih canggih. Karena mysqli dapat digunakan secara Object
Oriented Programming (OOP) dan prosedural.
Sedangkan API PDO digunakan untuk menghubungkan PHP dengan vendor
database yang lainnya. Jadi tidak hanya untuk MySQL saja.

Menyiapkan Database
Pertama, mari kita membuat database mengunakan phpMyAdmin. Pada
gambar dibawah ini, klik New kemudian pilih Create database dengan nama
pendaftaran_siswa lalu klik tombol Create.

Setelah itu, buatlah tabel di dalam database pendaftaran_siswa, di jendela


sebelah kanan muncul Create table dan ketik dengan nama calon_siswa dan
Number of coloumns: 6.

Perhatikan gambar di bawah ini:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Kemudian isikan sesuai dengan gambar berikut beserta tipe data dan index
nya seperti dibawah ini.

Setelah itu klik Save.

Kemudian kita coba isi dengan sebuah data, klik Insert.

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Silahkan isi seperti berikut:

Klik Go untuk menyimpan.

Menyiapkan Direktori
Membuat Direktori di C:\xampp\htdocs\ dengan nama pendaftaran dan
nantinya akan kita isikan file sebagai berikut:
 config.php — untuk menyimpan konfigurasi database;
 index.php — halaman utama;
 list-siswa.php — halaman untuk menampilkan data siswa;
 form-daftar.php — halaman formulir pendaftaran;
 proses-pendaftaran.php — skrip yang memproses pendaftaran;
 form-edit.php — form untuk edit data siswa;
 proses-edit.php — skrip untuk memproses edit/update;
 hapus.php — skrip untuk menghapus data dari database;

Membuat Koneksi ke Dabase MySQL


Buka file config.php, silahkan isi dengan kode berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Untuk menghubungkan PHP dengan MySQL, kita menggunakan fungsi
mysqli_connect() dengan parameter alamat server, user, password, dan
nama database.

Jika koneksi gagal, variabel $db akan bernilai false. Karena itu, kita bisa
mengeceknya dengan ekspresi if.
if( !$db ){
die("Gagal terhubung dengan database: " .
mysqli_connect_error());
}

Membuat Halaman Indeks


Rencananya kita akan menaruh dua link di halaman indeks. Link pertama untuk
menuju ke formulir pendaftaran dan link yang kedua untuk menuju ke halaman
data siswa yang sudah mendaftar.
Konsep gambaran webnya seperti dibawah ini:

form-daftar.php

Formulir Pendaftaran

Index.php Nama ___________


Alamat ___________
Jenis Kelamin : Laki-laki / Perempuan
Agama : list box
Pendaftaran Siswa Baru
SMK Mudikal Daftar
Menu:
Daftar Baru list-siswa.php
Pendaftar

Siswa yang sudah mendaftar

Tambah baru

No Nama ...
Edit | Hapus
Edit | Hapus

Gambar diatas terdiri dari menu utama ( index.php ) berisi Daftar Baru dan
Pendaftar. Bila di klik Daftar Baru, maka akan tampil halaman form-
daftar.php. Apabila di klik Pendaftar, maka akan tampil halaman list-
siswa.php dan didalamnya terdapat tombol/link Tambah baru, maka akan
masuk ke halaman form-daftar.php.

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Sekarang, kita akan membuat file index.php dengan kode berikut:

Maka tampilan awal index.php akan seperti ini:

Menampilkan Data Tabel MySQL


Silahkan buka list-siswa.php dan isi dengan kode berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Pertama kita membutuhkan koneksi ke database, maka kita harus mengimpor
file config.php agar variabel $db dapat dibaca.
<?php include("config.php"); ?>
Setelah itu, kita melakukan query untuk mengambil data siswa pada
tabel calon_siswa.
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);

Hasil dari query tersetbut, kemudian kita ubah menjadi array dengan
fungsi mysqli_fetch_array() dan hasilnya disimpan dalam
variabel $siswa.
$siswa = mysqli_fetch_array($query)

Perulangan while akan mengulang selama masih ada isi dalam tabel. Kemudain,
selama perulangan…kita tampilkan datanya.
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
echo "<td>".$siswa['id']."</td>";
echo "<td>".$siswa['nama']."</td>";
echo "<td>".$siswa['alamat']."</td>";
echo "<td>".$siswa['jenis_kelamin']."</td>";
echo "<td>".$siswa['agama']."</td>";
echo "<td>".$siswa['sekolah_asal']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'>
Edit</a> | ";
echo "<a href='hapus.php?id=".$siswa['id']."'>
Hapus</a>";
echo "</td>";
echo "</tr>";
}

Perhatikan array $siswa, indeksnya sesuai dengan nama kolom pada database
dan bersifat case sensitive. Dan apabila kita menampilkan total data yang ada di
dalam tabel dengan fungsi mysqli_num_rows().
echo mysqli_num_rows($query);

Maka hasilnya adalah sebagai berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Menambahkan Data ke Tabel MySQL
Ada dua file yang kita butuhkan untuk menambahkan data ke MySQL.
1. form-daftar.php halaman untuk form input;
2. proses-pendaftaran.php skrip untuk memproses data yang diinputkan.

Silahkan buka file form-daftar.php dan isi dengan kode berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Perhatikan pada tag pembuka <form>, di sana kita menggunakan atribut
action dan method.
<form action="proses-pendaftaran.php" method="POST">
...

Atribut action digunakan untuk menentukan skrip mana yang akan memproses
data inputan. Sedangkan atribut method untuk menentukan metode pengiriman
datanya. Pada input-nya, disana ada atribut name. Atribut ini untuk menentukan
kunci indeks dari array $_POST dan $_GET.

Maka jika dijalankan akan muncul tampilan sebagai berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Selanjutnya silahkan isi file proses-pendaftaran.php dengan kode berikut:

Pertama kita ambil data yang dikirim dari formulir, semuanya tersimpan pada
variabel $_POST. Karena tadi kita menggunakan method POST pada form.

Kemudian kita buat query penyimpanan. Lalu melakukan pengecekan, apakah


query-nya berhasil atau gagal.
Untuk menampilkan pesan berhasil dan gagal pada halaman index.php,
silahkan tambahkan kode berikut di bawah tag <nav> pada file index.php:
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses'){
echo "Pendaftaran siswa baru berhasil!";
} else {
echo "Pendaftaran gagal!";
}
?>
</p>
<?php endif; ?>

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Hasilnya:

Sekarang kita sudah punya dua data.

Menghapus Data dari Tabel MySQL


Kita membutuhkan id untuk menentukan data yang akan dihapus. Karena itu,
kita mengirimkan id melalui query string.
Contoh:
http://localhost/pendaftaran-siswa/hapus.php?id=1
Query string-nya adalah ?id=1. Query string akan tersimpan dalam
variabel $_GET.
Untuk lebih jelasnya, silahkan buka file hapus.php dan isi dengan kode berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Sekarang coba klik link hapus, maka datanya akan langsung terhapus.
Sebenarnya cara ini tidak aman, karena kita tidak meberikan konfirmasi kepada
user. Misalnya seperti mananyakan ‘Apakah yakin akan menghapus?’

Update Data di Tabel MySQL


Konsepnya hampir sama dengan hapus. Pertama kita ambil id data yang akan
di-edit. Setelah itu kita melakukan query untuk mengambil data dari database
dan menampilkannya ke dalam form.
Setelah di-edit, selanjutnya melakukan query update untuk menyimpan
Perubahan.
Sekarang kita buat file form-edit.php dan isi dengan kode berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web
Ada beberapa hal yang perlu diperhatikan dalam kode tersebut.
Pertama kita mengubah data dari hasil query menjadi array dengan
menggunakan fungsi mysqli_fetch_assoc().
Kenapa menggunakan fungsi tersebut? Karena data yang akan kita ambil adalah
satu baris dan agar indeks array-nya menggunakan nama kolom.

Contoh hasilnya seperti ini:


Array
(
[id] => 1
[nama] => Lia
[alamat] => Jl. Mangga No. 3, Mataram
[jenis_kelamin] => perempuan
[agama] => Islam
[sekolah_asal] => SMPN 1 Pekalongan
)

Kemudian data tersebut kita tampilkan untuk menjadi nilai default pada form.
Jangan lupa untuk membuat input id dengan tipe hidden untuk
menyimpan id data yang akan di-update.
<input type="hidden" name="id" value="<?php echo
$siswa['id'] ?>" />

Untuk input radio dan select, kita menggunakan operator ternary agar bisa
membuat atribut checked dan selected.

Setelah itu, silahkan isi file proses-edit.php dengan kode berikut:

Modul: Membuat Sisfo Pendaftaran Siswa Berbasis Web Klaster: Pemrograman Web

Anda mungkin juga menyukai