Praktikum Salsadewinta 1213018

PRAKTIKUM PEMBUATAN FORM WEBSITE DENGAN
KONSEP MVC
Laporan Praktikum
Disusun untuk memenuhi persyaratan tugas mata kuliah Pemrograman Web
Disusun Oleh:
Salasa Dewinta (1213018)
PROGRAM DIPLOMA III TEKNIK INFORMATIKA

POLITEKNIK POS INDONESIA
BANDUNG
2022
BAB I
PENDAHULUAN
Pada praktikum ini penulis akan membuat sebuah form yang bisa menginputkan data yang
sudah terkoneksi dengan database dan setelah itu data tersebut akan tampil pada halaman web
tanpa harus membuka phpmyadmin. Adapun Form tersebut berisikan field NPM,Nama,Kelas dan
alamat. Pada form ini dilengkapi tombol kirim untuk mengirim data databse dan cancel untuk
mereset bila mana data tidak jadi diinputkan.
Adapun tampilan tabel data mahasiswa sebagai tampilan dari data yang sudah diinputkan
dari halaman form. Pada halaman ini disertai dengan hyperlink back agar bisa Kembali ke menu
index (form.php).
1
BAB II
LANGKAH- LANGKAH
A. Membuat Database
B. Membuat Form
1. Hasil
2
2. Script code
<html>
<head>
<title>Form</title><!—jdl halaman website→
</head>
<body>
<!—Script Css agar tampilan form terlihat menarik→
<style> /* tag pembuka css */
form{
width: 300px; /*ukuran lebar form 300px*/
height: 150px; /*ukuran tinggi form 150px*/
padding: 20px; /*ukuran padding(ruang antar spasi) form 20 px*/
background: rgb(18,18, 158); /*warna latar belakang biru tua*/
}
table{
color: white; /*warna huruf yang berada di dalam table warna putih*/
}
a{
color: white; /*warna huruf yang berada di hyperlink warna putih*/
}
</style><!—tag penutup css→
<center> <!—agar form berada ditengah→
<h2>Input Data Mahasiswa</h2> <!—header→
<form action=”tambah.php” method=”post”> <!—tag pembuka form dengan aksi
penyimpanan data
akan dieksekusi di tambah php
dengan metode post →
<Table> <!—tag pembuka table→
<tr> <!—tab pembuka table row→
<!—table data→
<td>NPM</td>
<td>:</td>
<td><input type=”number” name=”npm”></td> <!—isian form dengan
tipe nomor→
</tr> <!—tab pentutp table row→
<tr>
<td>Nama</td>
<td>:</td>
<td> <input type=”text” name=”nama”></td><!—isian form dengan
tipe teks→
</tr>
<tr>
<td>kelas</td>
<td>:</td>
3
<td> <input type=”text” name=”kelas”> </td><!—isian form dengan
tipe teks→
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td> <input type=”text” name=”alamat”></td><!—isian form dengan
tipe teks→
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type=”submit” name=”kirim” value=”kirim”><!—tombol kirim→
<input type=”reset” name=”cancel” value=”cancel”><!—tombol
cabncel→
<a href=”view.php”>lihat</a><!—hyper link ke view.php→
</td>
</tr>
</Table><!—tag penutup table→
</form> <!—tag penutup form→
</center>
</body>
</html>
3. Penjelasan setiap baris code

Code Penjelasan
<style> Ini merupakan Bahasa pemrograman css,
form{ Adapun penjelasan selectornya:
width: 300px; 1. Form : disini pendeklarasian
height: 150px; tentang lebar 300 px dan tinggi 150
padding: 20px; px dengan jaraknya 200 px.
background-color: rgb(18,18, Didalam form ini diberi warna latar
158); belakang berwarna biru tua.
} 2. Table : disini pendeklarasian
table{ tentang warna huruf berwarna putih
color: white; yang digunakan dalam table
} 3. a :, disini pendeklarasian tentang
a{
warna huruf berwarna putih yang
color: white;
digunakan dalam hyperlink
}
}
</style>
4
<form action=”tambah.php” method=”post”> Ini adalah tag pembuka pada form dengan
aksi penyimpanan data akan dieksekusi di
tambah.php dengan metode post
<Table> Pada syntax ini terdadap table row dengan
<tr> tabel datanya npm dan pada tabel data
<td>NPM</td> uratan ketiga menunjukan kepada sebuah
<td>:</td> isian npm yang bertipekan nomor
<td><input type=”number”
name=”npm”></td>
</tr
<tr> Pada syntax ini terdadap table row dengan
<td>Nama</td> tabel datanya nama dan pada tabel data
<td>:</td> uratan ketiga menunjukan kepada sebuah
<td> <input type=”text” isian nama yang bertipekan teks.
name=”nama”></td
</tr>

<td>kelas</td> tabel datanya kelas dan pada tabel data
<td> <input type=”text” isian kelas yang bertipekan teks.
name=”kelas”> </td><!—isian form dengan
tipe teks→
</tr>

<td>Alamat</td> tabel datanya alamat dan pada tabel data
<td> <input type=”text” isian alamat yang bertipekan teks.
name=”alamat”></td>
</tr>
<tr> Isi dari table row ini berisikan tombol,

<td></td> Adapun penjelasan setiap tombol:
<td></td> 1. input type=”submit” : digunakan
<td> untk meyimpan data yang telah
<input type=”submit” diisikan oleh pengguna di form
name=”kirim” value=”kirim akan dikirim ke database
<input type=”reset” 2. input type=”reset” : digunakan
name=”cancel” value=”cancel> untuk mengset ulang data yang
<a href=”view.php”>lihat</a> telah diisikan oleh pengguna di
</td> form
</tr> 3. a href =”view.php” digunakan
sebagai hyper link ke halaman
website yang lainnya, pada syntax
5
ini hyper link tujuan kami akan
berpindah ke view.php.
C. Mengkoneksikan database
1. Script Code
<?php
# koneksi ke database
$koneksi = mysqli_connect(‘localhost’,’root’,’’,’dbkmps’);
# cek koneksi
if (mysqli_connect_errno())
{
echo “koneksi gagal”.mysqli_connect_error();
}
?>
2. Penjelasan
Code Penjelasan
$koneksi = Script kode ini digunakan untuk
mysqli_connect(‘localhost’,’root','','dbkmps'); menghubungkan ke data base
menggunakan mysqli_connect,
dengan: localhost sebagai host
name server, root sebagai username
server, ‘’ password dari server yang
mana penulis tidak memakai kata
sandi, jadi tidak diisikan apapun,
dan dbkmps adalah nama database
yang digunakan sebagai tempat
penyimpanan data mahasiswa.
if (mysqli_connect_errno()) Script kode ini digunkan sebagai

{ pengecekan koneksi, jika script
echo "koneksi tidak berhasil mengkoneksikan ke
gagal".mysqli_connect_error(); data base maka akan tampil
} notifikasi koneksi gagal, jika data
?> berhasil dikoneksikan maka akan
tampil kosong.
6
D. Tambah data
1. Script code
<?php
include 'koneksi.php';
$npm = $_POST['npm'];
$nama = $_POST['nama'];
$kelas = $_POST['kelas'];
$alamat = $_POST['alamat'];
mysqli_query($koneksi, "INSERT INTO tbl_mahasiswa

VALUES('$npm','$nama','$kelas','$alamat')");
echo "<script>
alert('Data berhasil ditambahkan');
document.location.href = 'form.php';
</script>";
?>
2. Penjelasan syntax code setiap baris
Code Penjelasan
include 'koneksi.php'; Untuk memasukan data ke koneksi.php
$npm = $_POST['npm']; Variable post dignakan untuk

$nama = $_POST['nama']; mengumpulkan nilai dari bentuk
$kelas = $_POST['kelas']; dikirim dengan methods = “post” (yang
$alamat = $_POST['alamat']; mana metode ini digunakan pada from
methods di form.php) sehingga data
yang telah diinputkan akan dikirim ke
file yang bernama tujuan.
mysqli_query($koneksi, "INSERT INTO Script query sql ini digunakan untuk
tbl_mahasiswa menambah data dari form.php ke
VALUES('$npm','$nama','$kelas','$alamat')"); tbl_mahasiswa pada dbkmps
echo "<script> Untuk menampilkan data java script

alert('Data berhasil ditambahkan'); dalam bentuk notifikasi bar sebagai
document.location.href = 'form.php'; verifikasi bahwa data berhasil
</script>"; ditambahkan dan jika notifikasi ditekan
tombol oke, halaman akan berpindah ke
halaman utama yaitu form.php
7
Notifikasi
E. Menampilkan data ke website
1. Hasil
8
2. Script Code
<html>
<head>
<title>Lihat</title>
</head>
<body>
<center>
<h2>Data Mahasiswa</h2>
<style>/* tag pembuka css */
table{ width: 50%; /*ukuran lebar form 50%*/
border-collapse: collapse; /*border disatukan*/
text-align: center; /*posisi huruf berada ditengah*/
font-size: 12px;/*ukuran huruf 12 px%*/
font-family: calibri; /*jenis huruf calibr*/
background-color: beige; /*warna latar belakang table beige*/
margin: 100 px auto; /*ruang atar elemen luar 100px*/
padding: 15 px; /*jarak antar spasi 15 px*/
}
th{
background-color: rgb(18,18, 158); /*warna latar belakang table
header ]berwarna dark ble*/
color: white; /*warna huruf pada table header berwarna putih*/
}
tr,td,th{
border: 1px solid gray; /*ukuran border tabel qpx warna abu abu*/
padding: 3px;}/*jarak antar spasi tabel 3 pxr*/
</style> 
<Table>
<tr>

<th>NPM</th>
<th>Nama</th>
<th>Kelas</th>
<th>Alamat</th>
</tr>
<?php
#koneksi php
include "koneksi.php";
#mengambil data table dari tbl_mahasiswa
$data = mysqli_query($koneksi,"SELECT * FROM tbl_mahasiswa");
#pengulangan
while($d = mysqli_fetch_array($data)){
?>
9
<tr>

<td><?php echo $d['npm'] ?></td>
<td><?php echo $d['nama'] ?></td>
<td><?php echo $d['kelas'] ?></td>
<td><?php echo $d['alamat'] ?></td>
</tr>
<?php
}
?>
</Table>
</td><a href="form.php">Back</a>
</center>
</body>
</html>
3. Penjelasan code
Code Penjelasan
<style> Ini merupakan Bahasa pemrograman css,
table{ width: 50%; Adapun penjelasan selectornya:
border-collapse: collapse; 1. table: disini pendeklarasian tentang
text-align: center; ukuran table 50%. Border pada table
font-size: 12px; disatukan, ukuran 12 px dengan jenis
font-family: calibri; clibr dengan jarak ruang antar elemen
margin: 100 px auto; luar 100 px dan jarang anatar elemen
padding: 15 px; dalam 15 px.
} 2. th: disini pendeklarasian tentang latar
th{ warna pada table header berwarna
background-color: biru tua dan warna huruf berwarna
rgb(18,18, 158);
putih.
color: white;
3. Tr,td,th : disini pendeklarasian tentang
border dengan ukuran 1 px berwarna
}
abu-abu dan ruang antar elemen
tr,td,th{
dalamnya 3 px.
border: 1px solid gray;
padding: 3px
</style>
include "koneksi.php"; Untuk menyertakan file php lain ke dalam

suatu program PHP
$data = mysqli_query($koneksi,"SELECT Untuk mengambil data dari tbl_mahasiswa

* FROM tbl_mahasiswa");
10
while($d = Untuk melakukan pengulangan terhadap
mysqli_fetch_array($data)){ kondisi Array.
?>
<tr>

<td><?php echo $d['npm']
?></td>
<td><?php echo $d['nama']
?></td>
<td><?php echo $d['kelas']
?></td>
<td><?php echo $d['alamat']
?></td>
</tr>
<?php
}
?>
</Table>
<tr> Menampilkan data field dari tbl_mahasiswa

<td><?php echo $d['npm']
?></td>
<td><?php echo $d['nama']
?></td>
<td><?php echo $d['kelas']
?></td>
<td><?php echo $d['alamat']
?></td>
</tr>
11

Praktikum Salsadewinta 1213018

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum Salsadewinta 1213018

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM PEMBUATAN FORM WEBSITE DENGAN

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

3. Penjelasan setiap baris code

<tr> Pada syntax ini terdadap table row dengan

<tr> Pada syntax ini terdadap table row dengan

<tr> Isi dari table row ini berisikan tombol,

if (mysqli_connect_errno()) Script kode ini digunkan sebagai

mysqli_query($koneksi, "INSERT INTO tbl_mahasiswa

$npm = $_POST['npm']; Variable post dignakan untuk

echo "<script> Untuk menampilkan data java script

E. Menampilkan data ke website

include "koneksi.php"; Untuk menyertakan file php lain ke dalam

$data = mysqli_query($koneksi,"SELECT Untuk mengambil data dari tbl_mahasiswa

<tr> Menampilkan data field dari tbl_mahasiswa

Anda mungkin juga menyukai