The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Modul Web Programming SMA

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by unggul al, 2021-12-14 04:12:12

Web Programming

Modul Web Programming SMA

LATIHAN Menghapus data dan searching data

1. Edit dan modifikasi file php alamat.teman.php untuk menambahkan form pencarian
berdasarkan nama. Script ada dibawah ini
<html>
<head>
<title>Menampilkan data</title>
<style type="text/css">
<!--
.style1 {font-style: italic}
-->
</style>
</head>
<body>
<br/>
<style type="text/css">
<!--
.style1 {
font-size: 18px;
font-weight: bold;
}
-->
</style>
<form action="alamat.teman.php" method="get">
<label>Cari Nama :</label>
<input type="text" name="cari">
<input type="submit" value="Cari">
</form>

<p>
<?php

if(isset($_GET['cari'])){
$cari = $_GET['cari'];
echo "<b>Hasil pencarian Nama : ".$cari."</b>"."<br>";

}
?>
</p>
<p><a class="tombol" href="inputdata.html">+ Tambah Data Baru</a>
</p>
<p class="style1">Menampilkan data Alamat Teman</p>
<table width="698" border="1" cellpadding="0" cellspacing="0">
<tr>

PEMROGRAMAN BERBASIS WEB 98

<th width="42">No</th>
<th width="110">Nama</th>
<th width="117">Email</th>
<th width="104">No Telp</th>
<th width="203">Alamat</th>
<th colspan="2">Action</th>
</tr>

<?php
include "koneksi.php";
?>

<?php
if(isset($_GET['cari'])){
$cari = $_GET['cari'];
$d = mysql_query("select * from tbl_alamat where nama_teman like
'%".$cari."%'");
}else{
$d = mysql_query("select * from tbl_alamat");
}
$no = 1;
while($data = mysql_fetch_array($d)){
?>

<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $data['nama_teman']; ?></td>
<td><?php echo $data['email']; ?></td>
<td><?php echo $data['no_telp']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td width="54">
<div align="center"><a href="edit.php?id=<?php echo $data['no']; ?>"
class="edit"><em>Edit</em></a> </div></td>
<td width="54"> <div align="center"><a href="hapus.php?id=<?php echo
$data['no']; ?>" class="edit"><em>Hapus</em></a> </div></td>
</tr>
<?php } ?>
</table>
</body>
</html>
2. Modifikasi file alamat.teman.php sehingga bisa membuat form pencarian berdasrkan no
telp. Simpan dengan nama alamat.teman2.php. Tunjukan dan jelaskan kepada guru
pembimbing kalian.

PEMROGRAMAN BERBASIS WEB 99

PERTANYAAN Menghapus data dan searching data

1. Tuliskan perintah SQL untuk mengahapus data dalam tabel database!
2. Jelaskan maksud fungsi script dibawa ini

<form action="alamat.teman.php" method="get">
3. Jelaskan fungsi pencarian data yang kalian ketahui!
4. Jelaskan maksud dari script dibawah ini

$d = mysql_query("select * from tbl_alamat where nama_teman like
'%".$cari."%'");
5. Jelaskan Script PHP untuk membuat form pencarian data

PEMROGRAMAN BERBASIS WEB 100

14 Membuat Aplikasi Form Pada Website

Indikator Hasil Belajar :
1. Siswa dapat membuat form login untuk masuk ke halaman utama.
2. Siswa dapat membuat script php untuk proses input login.
4. Siswa dapat menggunakan perintah SQL tentang CRUD (Create. Raed, Update,

Delete)
5. Siswa dapat membuat menu Login dan prosesnya.

Membuat Form Aplikasi Login

Pada saat kita berinteraksi dengan jejaring internet, terkadang kita dihadapkan dengan login.
Semisal untuk cek e-mail maupun masuk ke media sosial. Login bisa dikatakan sebagai log
masuk. Kata login ini juga sering disebut dengan log in, log on, dan sign in. Meski mengetahui
login berarti log masuk, masih ada banyak orang termasuk admin jasa penulis artikel sendiri
yang masih belum mengetahui arti login sebenarnya.

Selain login, ada juga istilah logout. Logout ini sering disebut dengan sign out. Login dan
logout adalah satu kesatuan proses yang saling berkaitan. Disamping itu, banyak pula orang
yang mempertanyakan istilah sign up. Meski saling berkaitan, sign up ini berbeda dengan login
dan logout. Tak hanya artinya saja yang berbeda, ketiga istilah tersebut juga memiliki fungsi
yang berbeda satu sama lain. Untuk lebih jelasnya, anda simak saja arti login, logout, dan sign
up berikut ini.

Arti Login
Arti login dan sign in memiliki maksud yang sama, yakni menu yang digunakan untuk masuk
dalam suatu aplikasi atau web dan lain sebagainya. Apabila anda sudah melakukan proses sign
up, anda bisa masuk ke aplikasi ataupun web dengan cara memasukan email ataupun
usernamae di kolom email. Selain itu, anda juga perlu menuliskan password di kolom
password.

Dikatakan juga, login merupakan proses masuk ke jaringan komputer dengan cara
memasukkan identitas akun yang minimal terdiri dari username atau akun pengguna dan
password guna mendapatkan hak akses. Baik username maupun password, keduanya harus
tepat jangan sampai terdapat salah ketik ketika digunakan untuk login. Username dan password
ini saling terkait sehingga tidak bisa dipisahkan. Pada umumnya, username tidak pernah
diubah. Hal ini dikarenakan username digunakan sebagai identitas unik. Akan tetapi untuk
password atau kata sandi bisa diubah sesuai keperluan guna menjaga keamanan akun.

Arti Logout

PEMROGRAMAN BERBASIS WEB 101

Logout atau log out memiliki pengertian sama dengan sign out. Logout adalah proses keluar
dari sebuah halaman web ataupun aplikasi yang hanya bisa diakses oleh seseorang yang
mempunyai user id dan password. Bisa dikatakan log out ini adalah menu yang digunakan
untuk keluar dari sebuah aplikasi, web, dan lain sebagainya. Anda tidak bisa melakukan logout
jika sebelumnya tidak melakukan login. Dengan melakukan logout, anda terbebas dari kinerja
web ataupun aplikasi yang anda gunakan sebelumnya.

Arti Sign Up
Lain halnya dengan sign up. Sign up merupakan menu yang digunakan untuk mendaftar
menjadi anggota ataupun member dari sebuah web, aplikasi, dan lain sebagainya. Dalam proses
pendaftaran ini, anda diharuskan untuk mengisi sebuah formulir mengenai identitas anda secara
tepat. Adapun identitas tersebut seperti halnya akun e-mail, nama depan, nama belakang, no
hp, password, dan masih banyak lagi lainnya. Apabila data identitas yang anda masukkan
terbukti benar, maka proses sign up yang anda lakukan akan cepat selesai. Setelah anda
melakukan sign up, anda bisa login dengan username dan password yang anda daftarkan
sebelumnya.

Login, logut, dan sign up memang saling berhubungan. Hanya saja, ketiganya memiliki fungsi
atau kegunaan yang berbeda-beda. Dengan mengetahui arti ketiga istilah tersebut, anda bisa
lebih mudah membedakannya serta mengaplikasikan dalam sub kategory cara membuat
website. Jangan sampai anda salah sebut dan membuat anda malu sendiri. Ketiga istilah
tersebut sangatlah umum sehingga wajib diketahui, terutama untuk anda yang menekuni dunia
internet
Langkah – langkah membuat login dan autentikasi adalah sebagai berikut:

• Membuat tabel untuk form pendaftaran/ sign Up yang isi tabelnya harus ada username
dan password untuk login

• Membuat form pendaftaran dan login
• Membuat script untuk memproses data form pendaftran yang di input
• Membuat script untuk data proses form login yang di input
• Membuat script untuk logout

Membuat Tabel

Untuk menyimpan data - data dari form Sign UP/ pendaftaran harus membuat struktur tabel

sbagai berikut.

Kolom/field Tipe date

Id_anggota Int (10), not null, PK, AUTO_INCREMENT
Nama_anggota Varchar (255)
Username Varchar (100)
password Varchar (255)
Jenis_kelamin Varchar (100)
No_hp Char(15)
Alamat Varchar (100)

PEMROGRAMAN BERBASIS WEB 102

Untuk membuat tabel jalankan utilitas phpMyAdmin dari internet browser dengan alamat
address : http://localhost/phpmyadmin/
Klk pada pilihan database kalian misal db_fauzi, kemudian pada create table :
Isikan pada kotak name : anggota dan kotak fields 7 seperti gambar di bawah ini, kemudian
klik tombol Go/Kirim

Akan tampil menu form untuk meninput struktur tabel yang akan dibuat. Isikan form dengan
fields yang sudah di tentukan sebelunya, kemudian klik tombol save.seperti tampak dibawah
ini.

Setelah melakukan penyimpanan/ save, maka tabel sudah siap untuk di proses dan digunkan.
Hasilnya seperti gambar dibawah ini.

PEMROGRAMAN BERBASIS WEB 103

Membuat Form Sign up/ pendaftaran Anggota
Sebelum melakukan proses login terlebih dahulu kita akan membuat tampilan form anggota.
Field-field yang di tampilkan pada form ini seperti yang sudah kita buat pada tabel database
anggota. Tampilan form seperti di bawah ini

Membuat Form Login
Langkah selanjutnya membuat form login yang bertujuan untuk autentikasi dari nama user
yang sudah mendaftarkan menjadi anggota. Bisa user/anggota memasukkan username dan
password dengan benar maka user/anggota tersebut bisa masuk ke halaman utama website
dan sebaliknya jika salah maka akan tampil pesan anda tidak bisa masuk halaman website
ini.tampilan form login seperti gambar di bawah ini. login.html

PEMROGRAMAN BERBASIS WEB 104

Setelah membuat form login.html langkah selanjutnya adalah membuat proses login. Proses
login berfungsi untuk autentikasi dari username dan password yang digunakan pada form
login diatas. Berikut contoh script php untuk proses login. File di simpan dengan nama :
plogin.php

<?php

include("koneksi.php");
$username = $_POST['username'];
$password = $_POST['password'];
$query = mysql_query("select * from anggota where username='".$username."' and
password='".$password."'");
$rows = mysql_num_rows($query);

if ($rows == 1) {
$_SESSION['login_user']=$username; // Membuat Sesi/session
header("location: home.php"); // Mengarahkan ke halaman profil
} else {
echo "Username atau Password belum terdaftar atau salah </a>";

}
?>

PEMROGRAMAN BERBASIS WEB 105

Tampilan menu login:
• Jika login yang di inputkan sesuai dengan username dan password yang terdaftar
maka tampilannya seperti dibawah ini:

• Jika login yang di inputkan tidak sesuai dengan username dan password yang
terdaftar maka tampilannya seperti dibawah ini:

Membuat Script untuk Log Out
Setelah melakukan proses login berhasil dan proses melakukan kegiatan yang berada di
halaman website selesai langkah selanjutnya yaitu membuat file log out. Yang bertujuan
baik admin dan anggota yang selesai melakukan login di website tersebut dengan akun
pribadi bisa lebih aman datanya.
File script php untuk logout : simpan file dengan nama logout.php
<?php

session_start();
PEMROGRAMAN BERBASIS WEB 106

unset($_SESSION['login']);
session_destroy();
header("Location: login.html");
?>

LATIHAN Membuat Sign UP, Login, Logout

1. Buatlah Form Sign UP, login dan halaman utama untuk admin yang didalamnya

ada link logout beserta prosesnya untuk bisa masuk kehalaman utama admin,

tunjukkan dan presentasikan kepada guru pembimbing kalian hasil dari pembuatan

form tersebut.

Struktur tabel database. Create tabel database dengan nama admin

Kolom/field Tipe date

Id Int (10), not null, PK, AUTO_INCREMENT
Nama_admin Varchar (255)
Username Varchar (25)
Password Varchar (25)
Jabatan Char(25)
Jenis_kelamin Varchar (100)
Email Char(25)
No_Hp Char(25)
Alamat Varchar (100)

PERTANYAAN Membuat Sign UP, Login, Logout

1. Jelaskan arti login menurut kalian!
2. Langkah – langkah pembuatan login dan autentikasi adalah sebagai berikut:
3. Jelaskan arti logout menurut kalian!
4. Jelaskan cara untuk membuat tabel database baru dengan nama Anggota !

PEMROGRAMAN BERBASIS WEB 107

15 Project Website Dinamis Menggunakan
PHP MySQL

Indikator Hasil Belajar :
1. Siswa dapat menggunakan fitur-fitur adobe dreameaver CS3 untuk membuat

aplikasi PHP yang terkoneksi database MySQL
2. Siswa dapat merancang sistem informasi menggunakan PHP dan database MySQL
3. Siswa dapat menggunakan fungsi CRUD (Create, Read, Update dan Delete)dalam

merancang pembuatan website dinamis

Uraian Project

Pada saat ini, pengguaan website semakin hari semakin bertambah banyak hal ini terjadi
karena kemajuan teknologi dan tuntutan hidup pada jaman sekarang. Website yang
dalam bahasa Indonesia berarti situs web, merupakan suatu halaman web yang pada
dasarnya berupa sebuah berkas baik itu berupa berkas gambar, tulisan, video dan lain
sebagainya
Akan tetapi membangun suatu website sama seperti merancang suatu aplikasi peranti
lunak (software). Ada tahapan-tahapan yang harus dilakukan untuk membuat suatu
situs.
Berikut adalah #6 Tahapan yang harus diketahui dan dilakukan untuk membangun
website :
1. Planning (Perencanaan)
Rencana, dalam proses pembuatan sistem situs dimulai dengan proses perencanaan.
Pada tahap ini Anda menentukan tujuan dari situs yang akan dibuat. Anda juga
melakukan analisa dan pengumpulan data yang diperlukan oleh situs, kemudian
menempatkan beberapa kebutuhan tersebut ke dalam situs yang akan dikembangkan.
Untuk bekerja lebih profesional, Anda harus membuat jadwal kerja. Pada tahap ini
Anda sudah mulai melakukan perancangan terhadap draft atau arsitektur situs.
2. Design (Desain)
Desain, dari informasi dan data yang dikumpulkan pada tahap perencanaan, tahap
berikutnya Anda melakukan desain terhadap tampilan halaman depan dan halaman
dalam situs. Desain diperlukan untuk memberikan keindahan situs Anda. Hal ini dapat
berupa kombinasi warna-warna unik, tata letak, jenis huruf yang membuat isi situs
Anda akan sangat memikat dan mudah untuk dibaca. Desain situs Anda juga harus
memberikan imej yang tak terlupakan yang akan membedakan situs Anda dengan
saingan-saingan lainnya. Keputusan tentang bagaimana situs Anda harus berinteraksi
dengan para pengunjung sehingga memudahkan mereka bernavigasi di situs Anda dan
bagaimana informasi dikategorikan sehingga para pengunjung dapat mengakses
informasi yang mereka kehendaki secepat mungkin ditentukan dalam tahap ini.

PEMROGRAMAN BERBASIS WEB 108

3. Scripting (Pemrograman)
Pemrograman, tahap ini merealisasikan ide-ide dari tahap-tahap sebelumnya ke situs
Anda. Produksi meliputi teknologi yang digunakan untuk menjadikan ide-ide dalam
tahap desain tersebut ke realitas. Dari gambaran yang diperoleh dari tahap desain,
selanjutnya Anda dapat melakukan scripting dari hasil desain tersebut ke dalam bahasa
web sehingga bisa diluncurkan di Internet.
4. Testing (Uji Coba)
Uji Coba, pengujian dilakukan untuk meyakinkan jikalau semua halaman situs telah
terhubung dengan benar dan semua link eksternal situs web terjaga. Tahap ini menguji
fungsionalitas dari formulir-formulir interaktif dan validasi penginputan data oleh
pengunjung. Tahap ini dikatakan sebagai kontrol pengujian kualitas, baik di server lokal
maupun di server hosting terhadap file-file yang sudah diupload.
5. Maintenance (Pemeliharaan)
Pemeliharaan, dan tak kalah penting setelah situs diluncurkan, maka diperlukan tahap
pemeliharaan terhadap situs tersebut. Pemeliharaan menjaga kesegaran situs Anda
dengan isi-isi yang terbaru. Anda perlu secara konstan meninjau dan memperbaiki situs
Anda. Tambahlah informasi-informasi terbaru untuk menarik para pengunjung. Server
yang digunakan juga harus terus dipelihara agar keamanan situs Anda terjaga dari
serangan-serangan hacker. Pada tahap ini juga meliputi pengubahan struktur situs yang
ada atau penambahan fitur-fitur baru sesuai dengan perkembangan teknologi untuk
menambah ketertarikan para pengunjung terhadap situs Anda. Pembangunan dan
pengembangan sebuah situs yang sukses tidak pernah bisa selesai..

Dalam pembuatan aplikasi website dinamis di perlukan di bedakan menjadi 2 yaitu:
FrondEnd diperuntukan untuk anggota,user/ publik yang dalam mengakses sistem informasi
hanya bisa melihat:
Contoh :

- Form pendaftaran user/anggota
- Fitur atau artikel
- Form melakukan transaksi

BackEnd di peruntukan untuk admin, selain bisa mengakses, juga bisa melakukan semua
proses yang ada di dalam sistem informasi tersebut misal menambah, mengedit, dan
menghapus isi dari tabel database yang tersedia.
Contoh :

- Form edit pegawai/ anggota
- Form hapus
- Form input barang atau stok

PEMROGRAMAN BERBASIS WEB 109

Latihan Project Pembuatan Website
Sebagai tugas akhir dari materi Web desain dinamis ini ada sebuah project yang harus
dikerjakan oleh siswa dengan tema bisa memilih salah satu yang sudah disediakan atau dengan
tema yang kalian miliki :

1. Website dinamis sistem infomasi sekolah
2. Website dinamis sistem informasi perpustakaan
3. Website dinamis Berita
4. Website dinamis sistem informasi belanja online
5. Website dinamis Instasi atau perusahaan
6. Website lainnya
Dalam Pembuatan Website dinamis harus memiliki ketentuan Sbb:
1. Minimal membuat 3 tabel database dalam pembuatan website.
2. Minimal membuat 3 From input, edit. Lihat data dan hapus dalam pembuatan website
3. Terdapat form login untuk admin /user
4. Terdapat form Registrasi untuk user baru
5. Terdapat Video
Petunjuk Pembuatan
1. Konsultasikan dengan guru pembimbing jika mengalami kesulitan dalam pembuatan
2. Kerjakan dengan sungguh - sungguh dalam setiap halaman yang akan dibuat
3. Uji kompentesikan ke depan guru penguji kalian mengenai hasil dari proses pembuatan

dan keunggulan dari website kaliak

PEMROGRAMAN BERBASIS WEB 110

Contoh - contoh halaman website dinamis
Web Dinamis Berita Olahraga

Web absensi

PEMROGRAMAN BERBASIS WEB 111

Web Sistem Informasi Sekolah
Web dinamis E-Commerce

PEMROGRAMAN BERBASIS WEB 112

Web Informasi labhouse
PEMROGRAMAN BERBASIS WEB 113

Web Informasi Wisata
PEMROGRAMAN BERBASIS WEB 114

DAFTAR PUSTAKA

Andi. Aplikasi Program PHP & MySQL untuk Membuat Website Interaktif. Yogyakarta: Madcoms
Sugono Galih Aprianto. Panduan Praktis Pemrograman PHP Untuk Pemula.
Achmad Solichin, S.Kom. Pemrograman Web dengan PHP dan MySQL.Jakarta
Loka Dwiartara. Menyelam dan menaklukan samudra PHP
https://www.jejaring.web.id/lebih-dalam-mengenal-post-dan-get-untuk-keamanan-web/
http://script-rahasia.blogspot.com/2016/06/pengertian-tipe-data-array-pada-php-dan.html
https://www.warungbelajar.com/mengenal-array-pada-php.html
https://rachmat.id/articles
https://jagongoding.com/web/php/web-dinamis/
https://www.malasngoding.com/

PEMROGRAMAN BERBASIS WEB 115


Click to View FlipBook Version