Modul Pemrograman Web i Rpl
Diunggah oleh
MUjiono TrisusiloModul Pemrograman Web i Rpl
Diunggah oleh
MUjiono TrisusiloModul
Praktikum
Pemrograman Web I
Oleh :
Mujiono Tri Susilo, SE
Rekayasa Perangkat Lunak
(RPL)
SMK Nusa Bangsa
Mranggen
2024
Modul Praktikum Pemrograman Web I
DAFTAR ISI
MODUL I HTML ................................................................................................................3
MODUL II CSS ....................................................................................................................12
MODUL III STRUKTUR DASAR PHP............................................................................ . 20
MODUL IV PERNYATAAN KONDISI............................................................................. 29
MODUL V PERNYATAAN PERULANGAN.................................................................. . 33
MODUL VI ARRAY........................................................................................................... 37
MODUL VII FORM ............................................................................................................ 42
MODUL VIII FUNCTION.................................................................................................. 52
MODUL IX SESSION DAN COOKIES............................................................................. 55
MODUL X DATABASE DALAM PHP............................................................................. 62
MODUL XI LANJUTAN DATABASE DALAM PHP...................................................... 69
MODUL XII LANJUTAN DATABASE DALAM PHP..................................................... 74
MODUL XIII PEMROGRAMAN BERORIENTASI OBYEK DALAM PHP.................. 83
Rekayasa Perangkat Lunak (RPL) 3
Modul Praktikum Pemrograman Web I
MODUL I
HTML
(Pertemuan 1)
Tujuan :
1. Siswa dapat mengenal dasar-dasar HTML
2. Siswa dapat menguasai dasar-dasar HTML
3. Siswa dapat mengenal dan memahami blok program HTML
4. Siswa dapat memahami setiap object sebagai dasar pembuatan interface pada
halaman browser
5. Siswa dapat membuat halaman web sederhana dengan HTML
Dasar Teori
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun
dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-
tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
1. Penamaan Dokumen HTML
Penamaan dokumen dapat dilakukan pada saat melakukan penyimpanan, pada saat mengetikkan
nama dile, maka file diberikan ekstensi .html, contoh : namafile.html.
2. Struktur Dokumen HTML
Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen
HTML yaitu HTML,HEAD dan BODY. Tag HTML berfungsi untuk menyatakan suatu dokumen
HTML, tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan tag BODY
berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen
HTML.Elemen yang terdapat pada sebuah dokumen HTML terbagi atas dua bagian yaitu Head dan
Body.
a. Bagian Head
Bagian header dari dokumen HTML diapit dengan tag <HEAD>....</HEAD> di dalam bagian
ini biasanya dimuat tag <TITLE>....</TITLE> yang menampilkan judul dari halaman pada
browser.
b. Bagian Body
Dokumen body diapit dengan tag <BODY>....</BODY>, bagian body digunakan untuk
menampilkan text, image, link dan semua yang akan ditampilkan pada web page.
Contoh Penulisan Struktur HTML :
Rekayasa Perangkat Lunak (RPL) 4
Modul Praktikum Pemrograman Web I
<!doctype html>
<html>
Bagian Head
<head>
<title>Disini Judul Dokumen HTML </title>
</head>
<body> Bagian Body
Disini Penulisan Informasi Web
</body>
</html>
Penjelasan :
<! Doctype html>
Adalah tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser
bahwa dokumen yang sedang dibuka adalah dokumen HTML.
<html>......</html>
Awal dari isi dokumen HTML, semua kode HTML yang dibuat akan ditulis dalam tag ini.
<head>......</head>
Tag head digunakan untuk menyimpan informasi tentang dokumen HTML.
<title>.......</title>
Salah satu contoh informasi yang terdapat didalam tag HEAD adalah title. Title akan
menampilkan teks pada judul browser atau pada tab browser.
<body>......</body>
Merupakan tag pembuka dari badan dokumen HTML.
3. Elemen dan Tag Pada Dokumen HTML
Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML
dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang
dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan
oleh browser, seperti paragraf, list(daftar), tabel dan lain‐lain. Sedangkan tag dinyatakan dengan tanda
lebih kecil “ < “ (tag awal ) dan tanda lebih besar “ > “ (tag akhir). Dalam penggunaannya sebagian
besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag>
dan diakhiri dengan </namatag> (terdapat tanda "/").
Dokumen HTML terdiri dari elemen-elemen yang saling berkaitan untuk membentuk suatu
dokumen HTML yang utuh, antara lain elemen HTML, elemen Head, elemen Body yang masing-
masing dapat diapit tanda yang disebut delimeter(<....>).
Elemen yang telah diapit dengan tanda delimeter disebut dengan Tag.
Contoh penulisan :
<nama elemen>
Misalnya : <html>
Rekayasa Perangkat Lunak (RPL) 5
Modul Praktikum Pemrograman Web I
Perlu diingat juga bahwa pada setiap elemen atau tag harus selalu diakhiri atau ditutup dengan
menuliskan kembali tag dan menambahkan tanda garis miring “/”.
Cara penulisan :
</nama elemen>
Misalnya : </html>
Tag HTML dasar
Berikut adalah tag HTML dasar :
Tag Deskripsi
<html> Mendefinisikan sebuah dokumen HTML
<body> Mendefinisikan bagian body dokumen
HTML
<h1> sampai <h6> Mendefinisikan header 1 sampai 6
<p> Mendefinisikan paragraph
<br> Menambahkan line break (spasi baru)
<hr> Membuat garis datar (horizontal)
<!--> Mendefinisikan komentar
- Heading dan Paragraph
Heading digunakan untuk memberikan penjudulan pada suat dokumen HTML. Untuk
melakukan format heading maka menggunakan tag <h1>....</h1> untuk judul utama dan
untuk judul sub bab dapat menggunakan tag <h2>....</h2> sampai dengan
<h6>....</h6>.
Untuk membuat sebuah paragraph dalam dokumen HTML maka digunakan tag
<p>...</p>.
- Link
Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag
<a>....</a> serta atribut href agar link tersebut dapat menyimpan alamat web yang akan
dituju ketika link diklik. Sehingga sintaks link adalah :
<a href=’alamat web yang dituju’</a>
- List
Dalam dokumen HTML suatu daftar atau list adalah suatu kumpulan item tertentu, daftar item
dapat ditulis secara berurutan atau tidak. Jenis list dalam HTML adalah :
1. Ordered list
Ordered list dapat dibuat dengan menggunakan tag <ol>....</ol> dan untuk setiap listnya
menggunakan tag <li>....</li>.
2. Unordered list
Rekayasa Perangkat Lunak (RPL) 6
Modul Praktikum Pemrograman Web I
Unordered list dapat dibuat dengan menggunakan tag <ul>....</ul> dan untuk setiap
listnya menggunakan tag <li>....</li>.
- Image
Dalam dokumen HTML kita dapat memuat dan menampilkan gambar. Untuk memuat gambar
menggunakan tag <img> untuk menentukan file gambar maka digunakan atribut src.
Sehingga sintaks image adalah :
<img src =’nama file gambar.jpg’>
- Form
Sebuah form dalam dokumen HTML dapat memiliki bermacam kontrol, mulai dari text input,
combo box, button dan lain sebagainya. Pembuatan sebuah form diawali dengan menggunakan
tag :
<form>....</form>
Berikut beberapa kontrol form yang biasa digunakan dalam HTML:
a. Label
Label digunakan untuk memberikan keterangan pada setiap input yang ada. Sintaks form label
adalah :
<label for=’nama’>keterangan input</label>
b. Text
Kontrol input ini dapat diisi dengan teks yang memiliki panjang kata terbatas, biasa digunakan
dalam form pencarian, nama dan lainnya. Sintaks form text adalah :
<input type=’text’ name=’nama’>
c. Combobox
Combobox adalah kontrol yang memiliki pilihan ketika diklik. Sintaks form combobox
adalah :
<select>
<option value=”name value 1></option>
<option value=”name value 2></option>
<option value=”name value 3></option>
</select>
- Tabel
Untuk menampilkan data dengan tipe tabel dalam HTML, dapat menggunakan tag :
<table>...</table>
Sedangkan untuk menampilkan baris tabel maka digunakan tag :
<tr>...</tr>
Sedangkan untuk menentukan banyaknya kolom maka menggunakan tag :
<td>...</td>
- Div
Rekayasa Perangkat Lunak (RPL) 7
Modul Praktikum Pemrograman Web I
Penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan
struktur lainnya. dalam struktur HTML terdapat bebrapa bagian antara lain :
a. Header
Bagian kepala website yang berisi logo, nama, slogan, menu dan lainnya. Sintaks <div>
untuk footer adalah :
<div id=’header’>......</body>
b. Content
Berisi isi website itu sendiri, contoh content berisi postingan terbaru atau informasi
lainnya. sintaks <div> untuk content adalah :
<div id=’content’>......</body>
c. Sidebar
Berada disamping content dan biasanya berisi iklan, kategori artikel dan widget dan
lainnya. Sintaks <div> untuk sidebar adalah :
<div id=’sidebar’>......</body>
d. Footer
Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut,
misalnya copyright©2018 by me. Sintaks <div> untuk footer adalah :
<div id=’footer’>......</body>
KEGIATAN PRAKTIKUM
1. Membuat Heading dan Paragraph
Langkah-langkah praktikum
Buka direktori C > xampp > htdocs, kemudian buat folder dan beri nama “praktikum_web”
Buka editor Notepad++ atau Sublime Text
Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N
Tuliskan coding berikut
Rekayasa Perangkat Lunak (RPL) 8
Modul Praktikum Pemrograman Web I
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Belajar Membuat Heading dan Paragraph</title>
</head>
<body>
<h1>Heading ke-1</h1>
<h2>Heading ke-2</h2>
<h3>Heading ke-3</h3>
<h4>Heading ke-4</h4>
<h5>Heading ke-5</h5>
<h6>Heading ke-6</h6>
<p> <strong>ini adalah contoh paragraph</strong></p>
</body>
</body>
</html>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
dengan “prak1.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik
Save.
Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada
modul Apache dan MySQL.
Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/prak1.html
Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 9
Modul Praktikum Pemrograman Web I
2. Praktikum membuat List, salin koding dibawah ini :
<!doctype html>
<html>
<head>
<title>List</title>
</head>
<body>
<h3>Membuat Unordered List</h3>
<strong><i><u>Bahan-bahan Memasak Telur Goreng</u></i></strong>
<ul>
<li>Telur 3 butir</li>
<li>Margarin (1 sdm)</li>
<li>Batang Daun bawang</li>
<li>Bawang merah (2 butir)</li>
<li>cabai merah keriting(2 buah)</li>
<li>lada 1/4 sdt</li>
<li>garam 1/4 sdt</li>
</ul>
<h3>Membuat Ordered List</h3>
<strong><i><u>Cara Memasak Telor Goreng</u></i></strong>
<ol>
<li>Campur semua bahan di atas</li>
<li>Kocok semua bahan hingga merata</li>
<li>Panaskan margarin</li>
<li>Goreng dan dadar hingga kuning keemasan (matang)</li>
<li>Selesai dan masakan di hidangkan</li>
</ol>
</body>
</html>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
dengan “prak2.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik
Save.
Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada
modul Apache dan MySQL.
Rekayasa Perangkat Lunak (RPL) 10
Modul Praktikum Pemrograman Web I
Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/prak2.html
Maka pada browser akan muncul hasil sebagai berikut:
3. Praktikum gambar dan tabel, salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 11
Modul Praktikum Pemrograman Web I
<!doctype html>
<html>
<head>
<title>Image & Table</title>
</head>
<body>
<h3>Daftar Barang</h3>
<table border="1">
<caption>Tabel Harga Produk</caption>
<tr>
<th>Kode Produk</th>
<th>Nama Produk</th>
<th>Harga</th>
<th>Gambar</th>
</tr>
<tr>
<td>P001</td>
<td>Kipas Angin</td>
<td>400.000</td>
<td><img src="kipasangin.jpg" width="145" height="150"></td>
</tr>
<tr>
<td>P002</td>
<td>Lemari Es</td>
<td>1700.000</td>
<td><img src="lemari_es.jpg" width="145" height="150"></td>
</tr>
<tr>
<td>P003</td>
<td>Mesin Cuci</td>
<td>2000.000</td>
<td><img src="mesincuci.jpg" width="145" height="150"></td>
</tr>
</table>
</body>
</html>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
dengan “prak3.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik
Save.
Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada
modul Apache dan MySQL.
Rekayasa Perangkat Lunak (RPL) 12
Modul Praktikum Pemrograman Web I
Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/prak3.html
Maka pada browser akan muncul hasil sebagai berikut:
TUGAS
1. Buatlah tampilan website Foodcourt dengan ketentuan:
- Header berisikan Nama foodcourt, Gambar
- Konten berisikan daftar menu makanan, harga dan gambar makanan dalam bentuk tabel
- Link untuk mengakses Foodcourt
- Footer yang berisikan Copyright nama anda
Rekayasa Perangkat Lunak (RPL) 13
Modul Praktikum Pemrograman Web I
MODUL II
CSS
(Pertemuan 2)
Tujuan :
1. Siswa dapat mengenal dasar-dasar CSS
2. Siswa dapat menguasai dasar-dasar CSS
3. Siswa dapat memahami setiap object sebagai dasar pembuatan interface pada halaman
browser
4. Siswa dapat membuat halaman web sederhana dengan CSS
DASAR TEORI
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk memperindah tampilan HTML
atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks
atau background dan lainnya. Berikut adalah sintak dasar dari CSS :
Penjelasan :
- Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Kita dapat menuliskan langsung nama tag
yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS diatas kita akan memberi
style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, dapat menuliskan nama ID tersebut dengan diawali
tanda kress (#). Contoh :
#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik
(.) diikuti dengan nama class. Contoh :
.artikel
Jika hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat
dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag
h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :
.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat
di dalam class artikel (atau - h1 yang merupakan child dari class artikel).
Rekayasa Perangkat Lunak (RPL) 14
Modul Praktikum Pemrograman Web I
Kita dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika anda memiliki dua
atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :
h1{ background-color: #666666; }
{ background-color: #666666; }
a { background-color:
kita dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi
style.
h1, p, a { background-color: #66666; }
- Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background,
jarak antar elemen, garis pinggir dan lainnya.
Untuk memberikan nilai value pada property digunakan tanda titik dua ( : ). Setiap property diakhiri dengan
tanda koma (;).
1. Penulisan CSS
Ada 3 cara penulisan kode CSS yaitu inline, internal, dan external.
Inline
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi
style dengan menggunakan atribut style, seperti contoh berikut :
<h1 style=”color : red”> Judul Web </h1>
Internal
Penulisan kode CSS dengan metode internal yaitu ditulis didalam tag style yang ditempatkan pada
tag head, seperti contoh berikut :
<html>
<head>
<title>Judul HTML</title>
<style>
h1 {
color : red;
}
</style>
</head>
...
External
Metode external yaitu dengan membuat file CSS dan dipanggil didalam tag head. File CSS memiliki
ekstensi misalnya namafile.css, seperti contoh berikut :
<html>
<head>
<title>Judul HTML</title>
<link rel=”stylesheet” href=”namafile.css”/>
</head>
...
2. Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar
<div> dan tag-tag HTML lainnya. Sebagai contoh, buatlah file HTML dengan kode berikut:
<div class=’box‛>
Box ke satu
</div>
<div class=’box’>
Rekayasa Perangkat Lunak (RPL) 15
Modul Praktikum Pemrograman Web I
Box ke dua
</div>
Lalu tambahkan tag style dalam tag head, dan ketikkan kode CSS berikut :
.box{
background-color:green;
color: yellow;
width:100px;
height:100px;
margin-bottom:50px;
}
Berikut adalah tampilan yang akan anda dapatkan :
Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita menambahkan margin bawah
(margin-bottom) sebesar 50px.Untuk melihat perbedaan ketika kita memberikan margin atau tidak,
anda dapat menghapus property margin-bottom dan perhatikan perbedaannya.Anda juga dapat
memberikan jarak dari kanan (right), kiri (left) dan atas (top). Misalnya :
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
3. Padding
Property padding digunakan untuk memberikan jarak antara konten elemen. Property padding
digunakan untuk memberikan ruang di dalam border di sekeliling atas, kanan, bawah dan kiri
isi/elemen. Seperti halnya margin, property padding dapat ditulis langsung dengan cara disingkat
(Shorthand) untuk keempat sisi tersebut, atau bisa satu per satu (Individual Sides) yang dibagi menjadi
padding‐top, padding‐right, padding‐bottom, dan padding‐left. Penulisan nilai pada padding sama
seperti dengan margin. Contoh penulisan padding :
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
4. Border
Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property
yang harus anda set, yaitu color, style dan width.
border-color : black;
border-style : solid;
Rekayasa Perangkat Lunak (RPL) 16
Modul Praktikum Pemrograman Web I
border-width : 5px;
5. Background
Background atau latar belakang adalah sebuah elemen utama untuk menentukan bagaimana sebuah
obyek ditampilkan. Ada beberapa properti dalam backround seperti berikut :
- background-color
Properti background-color ini adalah untuk menentukan warna background dari sebuah element.
Contoh penggunaannya yaitu seperti dibawah ini :
body {
background-color: #b0c4de;
}
Di dalam CSS, warna ditentukan oleh:
HEX value – seperti “#ff0000”
RGB value – seperti “rgb(255,0,0)”
Nama Warna – seperti “red”
Untuk detail dan nama warna yang bisa digunakan bisa dicek disini
- background-image
Properti background-color ini adalah untuk menentukan background berupa gambar. Contoh
penggunaan nya yaitu :
body {
background-image: url(“paper.gif”);
background-color: #cccccc;
}
- background-repeat
Secara default, properti background-repeat mengulang gambar secara horizontal dan vertikal.
Gambar dapat diulang dengan menggunakan repeat-x atau repeat-y.
body {
background-image: url(“paper.gif”);
background-repeat: repeat-y;
}
- background-attachment
Properti ini menentukan bagaimana gambar terlihat, apakah fixed (tidak bergerak ketika discroll)
atau scroll (bergerak ketika discroll). Value yang dapat digunakan yaitu scroll (mengikuti elemen),
fixed (tidak mengikuti elemen), local, initial, dan inherit. Contoh penggunaannya yaitu:
body {
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
}
- background-position
Digunakan menentukan posisi background, value yang dapat digunakan antara lain : left top, left
center, left bottom,right top, right center, right bottom, center top, center center, center bottom
Contoh penggunaannya yaitu seperti dibawah ini :
Rekayasa Perangkat Lunak (RPL) 17
Modul Praktikum Pemrograman Web I
body {
background-image: url(‘smiley.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
6. Positioning (static,relative, Absolut, Fixed)
Dalam CSS kitapun dapat memposisikan (Positioning) elemen sesuai kehendak kita. Hal ini membuat
desain web dengan CSS lebih fleksibel karena kita bisa menempatkan elemen-elemen HTML sesuai
dengan keinginan kita atau tuntutan desain web. Beberapa position dalam CSS yaitu :
- Static
Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya kita belum bisa/tidak
dapat menentukan posisi elemen tersebut. Ketika kita ingin merubah posisi dari elemen tersebut maka
harus memberikan position:relative dan selanjutnya dapat menggunakan property top, right, bottom, dan
left untuk menentukan posisi elemen yang bersangkutan. Sebagai contoh perhatikan kode HTML dan
CSS berikut :
<div id=’box’></div>
Berikut kode CSSnya.
#box{
width : 300px;
height : 300px;
}
Ketika tidak memberikan nilai pada property position, maka secara default, #box memiliki position:static,
jadi anda tidak dapat menggunakan property top, right, bottom dan left untuk menentukan posisi #box
tersebut :
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
}
Maka hasilnya sebagai berikut :
- Relative
Rekayasa Perangkat Lunak (RPL) 18
Modul Praktikum Pemrograman Web I
Sekarang cobalah untuk menambahkan position:relative pada #box dan perhatikan bahwa box tersebut
bergeser 100px dari atas dan 200px dari kiri.
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
position:relative;
}
Maka hasilnya sebagai berikut :
- Absolut
Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen
dan dibatasi oleh parent yang memiliki positioning relative. Buatlah markup HTML seperti berikut :
<div id=’box’>
<div id=’box2’></div>
</div>
Lalu berilah style seperti berikut :
#box{
width:300px;
height:300px;
background:green;
}
#box2{
width:50px;
height:50px;
background:yellow;
Maka hasilnya sebagai berikut :
Rekayasa Perangkat Lunak (RPL) 19
Modul Praktikum Pemrograman Web I
KEGIATAN PRAKTIKUM
Langkah-langkah praktikum
Buka direktori C > xampp > htdocs, kemudian buat folder dan beri nama “belajarCSS”
Buka editor Notepad++ atau Sublime Text
Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N
Tuliskan coding berikut
Rekayasa Perangkat Lunak (RPL) 20
Modul Praktikum Pemrograman Web I
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="box">
<div id="header" align="center">
<h1>STMIK STIKOM Indonesia</h1>
Jalan Tukad Pakerisan No 97 Panjer, Denpasar
</div>
<div id="menubar" align="center">
<a href="" class="teksmenu">Home</a> | <a href="">Beranda</a>
| <a href="">Produk</a>
</div>
<div id="konten">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
finibus urna massa, vel varius lectus ullamcorper nec. Vivamus ornare
massa non odio faucibus vehicula. Sed luctus nisi ut laoreet interdum.
Sed eu sem ut felis tristique commodo. Morbi nec egestas orci. Donec
ornare rhoncus facilisis. Suspendisse lacinia justo sit amet enim
lobortis, sed blandit sapien ultricies. Donec pharetra tincidunt libero
vel tincidunt. Phasellus rhoncus condimentum augue, ullamcorper gravida
enim ultricies molestie. Aenean arcu enim, maximus feugiat semper ut,
blandit eget ex. Integer eget sollicitudin risus, id varius est. Nam ac
interdum nisi. Nam sit amet dui vel dui sagittis posuere. Sed pulvinar
tortor nec nisi placerat semper. Praesent neque lacus, dictum quis nisi
id, tempus gravida turpis. Ut sit amet vulputate elit.
</p>
</div>
<div id="footer" align="center">
Web Programming I <br> 2018
</div>
</div>
</body>
</html>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > belajarCSS, dan beri nama file dengan
“index.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik Save.
Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N, kemudian salin
koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 21
Modul Praktikum Pemrograman Web I
html, body{
margin: 0;
padding: 0;
}
p{
text-align: justify;
}
#box{
width: 1000px;
height: auto;
margin: auto;
}
#header{
background-color: #dfd5d5;
padding: 20px;
}
#menubar{
background-color: #e4e4e4;
margin: auto;
}
.teksmenu{
text-decoration: none;
}
#konten{
padding: 20px;
}
#footer{
background-color: #999494;
padding: 20px;
}
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > belajarCSS, dan beri nama file dengan
“style.css” atau pilih “Cascade Style Sheets File” pada Save as type, klik Save.
Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada modul
Apache dan MySQL.
Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/index.html
Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 22
Modul Praktikum Pemrograman Web I
TUGAS PRAKTIKUM
Gunakan CSS untuk memperindah tampilan tugas pada modul 1
Rekayasa Perangkat Lunak (RPL) 23
Modul Praktikum Pemrograman Web I
MODUL III
Struktur Dasar PHP
(Pertemuan 4)
Tujuan :
1. Siswa dapat memahami struktur dasar php dan dapat mengaplikasikannya dalam pembuatan
program sederhana.
2. Siswa dapat mengetahui blok program php dan memulai pembuatan program php.
3. Siswa dapat memahami dan mengaplikasikan pembuatan variabel di PHP.
4. Siswa dapat memahami penggunaan tipe data yang ada di PHP dan mampu mengaplikasikannya.
5. Siswa dapat memahami dan mengaplikasikan pembuatan konstanta
DASAR TEORI
Bahasa pemprograman PHP adalah bahasa pemprograman yang bekerja dalam sebuah web
server. Script-script yang telah dibuat hasus tersimpan dalam sebuah server dan dieksekusi adau
diproses dalam server tersebit. Penggunaan program PHP memungkinkan sebuah website menjadi
lebih interaktif dan dinamis.
Adapun struktur dasar dalam PHP akan dijelaskan sebagai berikut :
1. Blok Program PHP
Pada Pemprograman PHP, penulisan syntak dalam PHP harus diapit oleh simbol sebagai
berikut:
<? dan ?>
<?PHP dan ?>
Simbol-simbol di atas berfungsi sebagai tanda bahwa sintak tersebut ialah termasuk
bahasa pemprograman PHP.
Contoh :
<? echo “Selamat Belajar PHP”; ?>
atau,
<?PHP echo “Selamat Belajar PHP”; ?>
Rekayasa Perangkat Lunak (RPL) 24
Modul Praktikum Pemrograman Web I
2. Variabel
Variable adalah sebuah bentuk pendeklarasian suatu nama yang meniliki value(nilai), data
atau informasi dengan tipe data tertentu. Setiap pendeklarasian variabel pada pemprograman PHP
diawali dengan tanda $ (dolar). Bentuk penulisan pendeklarasian variabel ialah sebagai berikkut:
$(nama variabel) = (nilai variabel);
Misal
$nama = “Joni‟;
$nilai = 90;
3. Tipe Data
Ada beberapa tipe data yang dikenal dalam script PHP, diantaranya antara lain :
String
String adalah sebuah tipe data yang terdiri dari kata, bisa berupa kata tunggal ataupun
kalimat. Penulisan string harus diapit oleh tanda petik tunggal („ ‟) atau tanda petik
ganda (“ “).
Integer
Integer adalah tipe data yang berisi bilangan bulat, bukan bilangan desimal. Besar range
integer dalam pemprograman PHP ialah dari -2,147,483,648 sampai +2,147,483,647 pada
platform 32 bit. Apabila data ada di luar kisaran tersebut, maka PHP akan secara otomatis
mengkonversi data tersebut dari integer ke floating point.
Floating Point
Floating Point ialah tipe data yang berisi bilangan pecahan atau bilangan desimal.
Kisran data floating adalah antara 1.7E-308 sampai 1.7E+308.
Array
Array ialah tipe data yang yang mengandung beberapa data di dalamnya dan di-index atau
dibaca berdasarkan data numeric atau string.
Object
Tipe data object bisa berupa bilangan, variabel, ataupun fungsi. Tipe data tersebut dapat
membantu programmer untuk membuat sebuah program. Data itu dapat disertkan dalam
program sehingga meringkas beberapa fungsi dan dapat memperkecil ukuran file. Semakin
kecil ukuran file, semakin singkat waktu yang dibutuhkan untuk mengakses file tersebut.
Rekayasa Perangkat Lunak (RPL) 25
Modul Praktikum Pemrograman Web I
Dalam script PHP, tipe data suatu variabel tidak didifinisikan oleh progremer, akan tetapai
akan secara otomatis dikonversikan sesuai karakternya.
4. Konstanta
Konstanta adalah sebuah variabel yang memiliki nilai yang tidak berubah-ubah. Dalam
mendeklarasikan konstanta tidak memerlukan tanda $ (dolar) akan tetapi menggunakan define()
dengan penulisan:
define({nama konstanta},{nilai konstanta})
Contoh :
define(“Nama”, “Joni”);
define(“Nilai”, 90);
maka dari pendefinisian di atas konstanta Nama memiliki value (nilai) Indra dan Nilai
memiliki value (nilai) 90.
5. Operator
Operator adalah simbol atau tanda yang jika diletakkan pada dua buah operand dapat
menghasilkan sebuah hasil. Penggunaan operator dalam bahasa pemprograman berfungsi untuk
memanipulasi nilai dari sebuah variabel agar lebih interaktif dan dinamis. Adapun operator yang
dikenal dalam PHP ialah sebagai berikut:
Operasi Operator Contoh Keterangan
Matematika * $a * $b $a dikalikan dengan $b
/ $a / $b $a dibagi dengan $b
+ $a + $b $a ditambah dengan $b
- $a - $b $a dikurangi dengan $b
% $a % $b Sisa hasil $a dibagi $b
Increment dan ++ ++$a $a ditambah satu, lalu
Decrement operasi dijalankan
++ $a++ Operasi dijalankan, lalu
$a ditambah satu
-- --$a $a dikurangi satu, lalu
operasi dijalankan
-- $a-- Operasi dijalankan, lalu
$a dikurangi satu
String . $a . $b Penggabungan String $a
Rekayasa Perangkat Lunak (RPL) 26
Modul Praktikum Pemrograman Web I
dan $b
Perbandingan > $a > $b True jika $a lebih besar
dari $b
< $a < $b True jika $a lebih kecil
dari $b
>= $a >= $b True jika $a lebih besar
atau sama dengan $b
<= $a <= $b True jika $a lebih kecil
atau sama dengan $b
== $a == $b True jika $a sama
dengan $b
!= $a != $b True jika $a tidak sama
dengan $b
Logika And atau && ( $a and $b ) Menghasilkan nilai True
Atau jika $a dan $b bernilai
( $a && $b ) Benar
Or atau || ( $a or $b ) Menghasilkan nilai True
Atau jika $a atau $b bernilai
( $a || $b ) Benar atau keduanya
bernilai benar
xor $a xor $b Menghasilkan nilai True
jika salah satu dari $a
atau $b
! !$a Menghasilkan nilai True
jika $a bernilai salah
6. Komentar
Komentator adalah script PHP yang tidak akan dibaca ketika dijalankan. Komentator
berfungsi sebagai dokumentasi dari script PHP atau penjelasan terhadap script yang kita tulis.
Dalam menulis komentar dapat digunakan beberapa simbol antara lain :
/* dan */
//
#
/* {komentar} */
// {komentar}
# {komentar}
KEGIATAN PRAKTIKUM
Langkah-langkah praktikum
4. Buka direktori C > xampp > htdocs, kemudian buat folder dan beri nama “praktikum_web”
5. Buka editor Notepad++ atau Sublime Text
Rekayasa Perangkat Lunak (RPL) 27
Modul Praktikum Pemrograman Web I
6. Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N
7. Tuliskan coding berikut
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar PHP</title>
</head>
<body>
<?php
// tanda untuk memberikan komentar satu baris
echo "<h1>Selamat Datang..</h1>";
echo "Program PHPku yang pertama<br>";
/*
tanda untuk memberikan komentar
komentar ini lebih dari satu baris
*/
?>
</body>
</html>
8. Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
dengan “pertama.php” atau pilih “PHP Hypertext Preprocessor File” pada Save as type, klik
Save.
9. Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada modul
Apache dan MySQL.
Rekayasa Perangkat Lunak (RPL) 28
Modul Praktikum Pemrograman Web I
10. Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/latihan.php
Maka pada browser akan muncul hasil sebagai berikut:
11. Selesai
LATIHAN PRAKTIKUM
1. Buka notepad++,, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$nim = '1710110989';
$nama = 'Maria Mercedes;
$alamat = 'Jl. Gajah Mada No.4';
$nilai = 80;
echo "NIM : ", $nim, "<br>";
echo "Nama : ", $nama, "<br>";
echo "Alamat : ", $alamat, "<br>";
echo "Nilai : $nilai";
?>
Penting!
Simpan program tersebut dengan memilih menu File lalu Save As pada notepad++, simpan file
dengan nama biodata.php tersebut di dalam folder htdocs/praktikum_web pada file sistem XAMPP
dan jalankan aplikasi XAMPP apabila belum aktif, lalu lalu klik tombol start pada modul Apache dan
MySQL. Setelah itu buka browser anda dan jalankan program yang telah di buat tersebut dengan
cara mengetik nama file program contoh http://localhost/praktikumweb/latihan2.php dan jalankan.
Setelah selesai mengetik coding di atas, maka simpan dengan nama latihan2.php dan jalankan
di browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 29
Modul Praktikum Pemrograman Web I
2. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$a="5";
$b="2.5";
$komentar="Selamat Datang";
echo ("Nilai variabel a adalah = $a <br>");
//variabel bertipe integer
echo ("Nilai variabel b adalah = $b <br>");
//variabel bertipe real
echo ("Nilai variabel komentar adalah = $komentar<br>");
//variabel bertipe string
$tambah= $a + $b;
//rumus pengurangan
$kurang = $a - $b;
//rumus perkalian
$kali = $a * $b;
//rumus pembagian
$bagi = $a / $b;
echo ("Hasil penjumlahan a dan b adalah = $tambah <br>");
echo ("Hasil pengurangan a dan b adalah = $kurang<br>");
echo ("Hasil perkalian a dan b adalah = $kali <br>");
echo ("Hasil pembagian a dan b adalah = $bagi <br>");
$nama = "STIKI";
$garis= "=====================================";
echo "<p>";
echo $garis."<br>";
echo $komentar. " Di Lab ". $nama. "<br>Selamat Belajar Pemrograman
Web <br>";
echo $garis."<br>";
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama latihan3.php dan jalankan
di browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 30
Modul Praktikum Pemrograman Web I
TUGAS
1. Jika ada seorang nasabah bank yang menabung di bank X dengan saldo awal Rp.2000.000,-.
Bank X memberikan kebijakan bunga 3% perbulan dari saldo awal tabungan. Hitunglah jumlah
saldo akhir nasabah tersebut setelah 11 bulan. Lengkapi script berikut ini untuk mengerjakan :
<?php
$saldoAwal = 1000000;
$bunga = 0.03;
$bulan = 11;
$saldoAkhir = ........;// lengkapi pada perhitungan $saldo akhir
echo "Saldo akhir setelah ".$bulan." bulan adalah : Rp. ".
$saldoAkhir. ",-";
?>
2. Buatlah program (dalam satu file) untuk menghitung bangun ruang kerucut dengan rumus seperti
berikut:
- Luas alas = π r 2
- Luas permukaan = π r 2 + π r s
Rekayasa Perangkat Lunak (RPL) 31
Modul Praktikum Pemrograman Web I
MODUL IV
Pernyataan Kondisi
(Pertemuan 4)
Tujuan
1. Siswa dapat memahami dan membuat pernyataan kondisi dalam bahasa pemrograman php dan
dapat mengaplikasikannya dalam pembuatan program php.
2. Siswa dapat memahami dan mengaplikasikan pernyataan kondisi If dalam pemrograman PHP.
3. Siswa dapat memahami dan mengaplikasikan pernyataan kondisi If-Else dalam pemrograman
PHP.
4. Siswa dapat memahami dan mengaplikasikan pernyataan kondisi Switch-Case dalam
pemrograman PHP.
DASAR TEORI
Dalam pemprograman PHP terdapat beberapa pernyataan kondisi yang berfungsi sebagai
percabangan apabila terdapat beberapa kondisi yang berbeda. Adapun pernyataan kondisi tersebut
antara lain:
Pernyataan kondisi if
Fungsi pernyataan kondisi if ialah sebagai pernyataan dalam memilih salah satu operasi
percabangan yang akan dilaksanakan sesuai syarat atau pernyataan tertentu yang telah ditetapkan.
Adapun bentuk penulisan kondisi if dalam pemprograman PHP ialah sebagai berikut:
If (syarat /pernyataan){
Operasi;
}
Pada formula diatas menjelaskan bahwa apabila kondisi sesuai dengan syarat / pernyataan maka
operasi di dalam formula akan dieksekusi dan apabila kondisi tidak sesuai makan formula akan
dilewati tanpa mengeksekusi operasi yang terdapat di dalamnya.
2. Pernyataan kondisi if-Else
Fungsi dari pernyataan kondisi if-Else hampir sama dengan kondisi if yang telah dijelaskan di atas,
akan tetapi pada kondisi if-Else digunakan untuk operasi percabangan yang terdiri dari dua atau lebih
pernyataan yang berbeda. Adapun bentuk penulisan kondisi if-Else dalam pemprograman PHP, ialah
sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 32
Modul Praktikum Pemrograman Web I
If (syarat /pernyataan 1){
Operasi1;
}else if (syarat / pernyataan 2){
Operasi2;
} else if (…….){
………
}else {
Operasi x;
Pada ula di atas menjelaskan bahwa apabila kondisi sesuai dengan syarat / pernyataan 1 maka
jalankan Operasi1, jika tidak maka akan dilanjutkan kesyarat/pernyataan 2 apabila kondisi sesuai
makan Operasi 2 akan dieksekusi, dan apabila tidak sesuai maka akan dilanjutkan sampaik kondisi
yang ada sesuai dengan syarat/pernyataan sehingga apabila tidak terdapat pernyataan yang sesuai
makan program akan mengeksekusi Operasi x.
3. Pernyataan kondisi Switch-Case
Fungsi dari pernyataan kondisi Switch-Case ialah membandingkan variabel yang memiliki
beberapa nilai yang berbeda. Fungsi ini hampir sama dengan pernyataan kondisi if hanya saja
kondisinya ditulis berulang-ulang. Adapun bentuk penulisan kondisi Switch-Case dalam
pemprograman PHP, ialah sebagai berikut:
Switch ($variabel_kondisi)
Case “nilai 1”;
Operasi 1;
Break;
Case “nilai 2”;
Operasi 2;
Break;
…………
}
Pada formula di atas menjelaskan bahwa apabila value/nilai dari vasiabel $variabel_kondisi
sesuai dengan nilai 1 maka operasi 1 dijalankan, dan jika tidak maka apabila value/nilai dari variabel
$variabel_kondisi sesuai dengan nilai 2 maka operasi 2 dijalankan dan seterusnya.
KEGIATAN PRAKTIKUM
1. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$nilai = 70;
if ($nilai >= 60) {
echo "Anda Lulus dengan Nilai $nilai";
}
?>
Rekayasa Perangkat Lunak (RPL) 33
Modul Praktikum Pemrograman Web I
Setelah selesai mengetik coding di atas, maka simpan dengan nama kondisi.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Pada program di atas apabila nilai lebih besar atau sama dengan 60 maka akan muncul string “anda
lulus dengan nilai (70)” apabila nilai tidak lebih besar atai sama dengan 60 maka di browser tidak
akan muncul apa-apa.
2. Buka notepad++, buat file baru New atau Ctrl+N , kemudian Salin coding di bawah ini:
<?php
$username = "Roman Picisan";
if ($username = "Roman Picisan")
echo "Anda Berhasil Login, Roman";
else
echo "Username Anda Salah";
?>
Setelah selesai mengetik koding diatas, maka simpan dengan nama kondisi_1.php.
3. Buka notepad++, buat file baru New atau Ctrl+N , kemudian Salin coding di bawah ini:
<?php
$nilai = 80;
if($nilai >= 90){
echo "Nilai Memuaskan";
}elseif ($nilai >= 80){
echo "Nilai Bagus";
}elseif($nilai >=50){
echo "Nilai Kurang";
}else{
echo "Nilai Sangat Kurang";
}
?>
Setelah selesai mengetik koding diatas, maka simpan dengan nama kondisi_2.php.
Rekayasa Perangkat Lunak (RPL) 34
Modul Praktikum Pemrograman Web I
4.<?php
Buka notepad++, buat file baru New atau Ctrl+N , kemudian Salin coding di bawah ini:
$bln = date("M");
switch($bln)
{
case "Jan" : $namaBln = "Januari";
break;
case "Feb" : $namaBln = "Februari";
break;
case "Mar" : $namaBln = "Maret";
break;
case "Apr" : $namaBln = "April";
break;
case "May" : $namaBln = "Mei";
break;
case "Jun" : $namaBln = "Juni";
break;
case "Jul" : $namaBln = "Juli";
break;
case "Aug" : $namaBln = "Agustus";
break;
case "Sep" : $namaBln = "September";
break;
case "Oct" : $namaBln = "Oktober";
break;
case "Nov" : $namaBln = "Nopember";
break;
case "Dec" : $namaBln = "Desember";
break;
}
echo "Nama bulan sekarang adalah : ".$namaBln;
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama kondisi_3.php dan jalankan
di browser.
TUGAS PRAKTIKUM
1. Terdapat suatu kondisi dimana pada tempat fotocopy kampus, harga fotocopy per lembar
disesuaikan dengan berapa jumlah fotocopy, dengan ketentuan sebagai berikut.
Jika fotocopy kurang dari 100 lembar maka harganya Rp. 150,-/lembar
Jika fotocopy sebanyak 100-200 lembar dapat harga Rp. 100,-/lembar
Tapi jika fotocopy lebih dari 200 maka harganya Rp. 80,-/lembar. Berapa biaya harus dibayar jika
asumsi pelanggan akan fotocopy sejumlah 158 lembar? . Buat script dengan menggunakan
kondisi If-Else untuk menampilkan biaya fotocopy.
2. Buatlah keterangan dari grade nilai dengan menggunakan If Else dan Switch-Case!
Mata
Hari Kuliah Keterangan
90 – 100 A Baik Sekali
76 -89 B Baik
60 - 75 C Cukup
50 - 59 D Hampir Cukup
0 - 49 E Kurang
3. Dengan menggunakan Switch-Case, buatlah script untuk membaca bulan saat ini dan tampilkan
jumlah hari dalam bulan tersebut.
Rekayasa Perangkat Lunak (RPL) 35
Modul Praktikum Pemrograman Web I
Rekayasa Perangkat Lunak (RPL) 36
Modul Praktikum Pemrograman Web I
MODUL V
Pernyataan Perulangan
(Pertemuan 5)
Tujuan :
1. Siswa dapat memahami dan membuat pernyataan perulangan dalam bahasa pemrograman php
dan dapat mengaplikasikannya dalam pembuatan program php.
2. Siswa dapat memahami dan mengaplikasikan pernyataan perulangan For dalam pemrograman
PHP.
3. Siswa dapat memahami dan mengaplikasikan pernyataan perulangan While dalam pemrograman
PHP.
DASAR TEORI
Dalam pemprograman PHP terdapat tiga kondisi perulangan (looping) dimana prulangan
tersebut berfungsi sebagai sintak untuk melakukan operasi / proses yang berulang. Adapun
kondisi perulangan tersebut antara lain :
1. Perulangan While
Fungsi dari perulangan while ialah untuk menjalankan operasi secara berulang-ulang hingga
ditemukan kondisi untuk menghentikannya. Adapun penulisan kondisi perulangan while pada
pemprograman PHP ialah sebagai berikut :
while (Kondisi){
Operasi;
}
Pada formula di atas dapat dijelaskan bahwa apabila kondisi bernilai false maka eksekusi operasi
sehingga kondisi yang telah ditetapkan menjadi true. Pada formula while program akan mengecek
kondisi terlebih dahulu apakah false atau true, apabila false maka operasi di jalanan dan apabila true
operasi berhenti dijalankan.
2. Perulangan For
Fungsi dari perulangan for ialah untuk menjalankan operasi secara berulang-ulang sesuai
dengan jumlah perulangan yang telah ditentukan. Adapun penulikan kondisi perulangan for
pada pemrograman php adalah :
for (nilai_awal; nilai_akhir; penambahan atau pengurangan nilai){
Operasi;
}
Rekayasa Perangkat Lunak (RPL) 37
Modul Praktikum Pemrograman Web I
Pada formula di atas dapat dijelaskan pada perulangan for program akan menset nilai sesuai
dengan nilai_awal lalu mengecek nilai tersebut apakah telah mencapai nilai_akhir, apabila tidak
maka operasi akan dijalankan setelah itu akan terjadi pengubahan pada nilai apakah itu ditambahkan
atau dikurangi kemudian dilakukan kembali proses dari pengecekan dan seterusnya hingga nilai
mencapai ke nilai_akhir, apabila nilai mencapai nilai_akhir maka proses perulangan akan dihentikan.
3. Perulangan Do-While
Fungsi dari perulangan do-while hampir sama dengan perulangan while, perbedaan antara
keduanya terletak pada urutan prosesnya saja. Pada perulangan do-while proses dimulai dari
menjalankan operasi lalu pengecekan kondisi, sedangkan pada perulangan while proses dimulai
dari melakukan pengcekan kondisi lalu menjalankan operasi. Adapun penulikan kondisi
perulangan do-while pada pemprograman PHP ialah sebagai berikut :
do{
Operasi;
}while(Kondisi);
Dari formula diatas dapat dijelaskan program akan menjalankan operasi lalu mengecek apakah
kondisi true atau false, apabila false maka proses akan diulang kembali sehingga kondisi
menjadi true dan proses do-while berhenti.
KEGIATAN PRAKTIKUM
1. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$bila = 1;
while($bil <= 3){
echo "Nilai Sekarang adalah $bil <br>";
$bil++;
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
2. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
Rekayasa Perangkat Lunak (RPL) 38
Modul Praktikum Pemrograman Web I
<?php
$bil = 1;
Setelah selesai
while mengetik
($bil <= 3)coding di atas, maka simpan dengan nama perulangan_2.php dan jalankan
{
di browser.
echo $bil. "<br />";
$bil++;
3. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
}
echo "Nilai bilangan sekarang adalah:".$bil;
?>
<?php
$bil = 5;
Setelah selesai
while mengetik
($bil coding di atas, maka simpan dengan nama perulangan_3.php dan jalankan
<= 100)
{
di browser.
if ($bil % 10 == 0) echo $bil. "<br />";
$bil++;
4. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
}
?>
<?php
$bil = 5;
Setelah selesai
while mengetik
($bil coding di atas, maka simpan dengan nama perulangan_3.php dan jalankan
<= 100)
{
di browser.
if ($bil % 10 == 0) echo $bil. "<br />";
$bil++;
5. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
}
?>
<?php
$bilangan = 0;
Setelah
forselesai
($a=1;mengetik
$a<=5;coding di atas, maka simpan dengan nama perulangan_5.php dan jalankan
$a++){
di browser.
echo "Bilangan Sekarang adalah $bilangan <br>";
$bilangan
6. Buka = $bilangan
notepad++, + New
buat file baru $a; atau Ctrl+N, kemudian Salin Koding Dibawah ini :
}
?>
Rekayasa Perangkat Lunak (RPL) 39
Modul Praktikum Pemrograman Web I
<?php
for ($a = 1; $a <=3; $a++)
Setelah
{ selesai mengetik coding di atas, maka simpan dengan nama perulangan_5.php dan jalankan
for ($b = 1; $b <= 2; $b++)
di browser.
{
echo "Nilai a = ".$a. " Nilai b = ".$b. "<br />";
}
7. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
}
?>
<?php
$d = 1;
Setelah
do{selesai mengetik coding di atas, maka simpan dengan nama perulangan_6.php dan jalankan
di browser.
echo "Perulangan ke-$d <br>";
$d++;
TUGAS}while($d <= 5);
1.?> Buatlah program menggunakan pernyataan perulangan untuk menampilkan bilangan bulat 5 s/d
100 yang berkelipatan 10.
2. Buatlah program menggunakan pernyataan perulangan untuk menjumlahkan bilangan 2 s/d 50.
3. Buatlah program menggunakan pernyataan perulangan untuk mencari banyaknya bilangan bulat
mulai dari 3 s/d 127 yang merupakan kelipatan 6.
Rekayasa Perangkat Lunak (RPL) 40
Modul Praktikum Pemrograman Web I
MODUL VI
Array
(Pertemuan 6)
Tujuan
1. Mahasiswa dapat memahami dan mengaplikasikan array dalam PHP dalam pemrograman web.
2. Mahasiswa dapat mengetahui cara pendeklarasian array menggunakan bahasa pemrograman PHP
dan mengaplikasikannya dalam pembuatan web.
3. Mahasiswa dapat memahami dan melakukan pengolahan data array menggunakan bahasa
pemrograman PHP.
4. Mahasiswa dapat mengetahui dan menggunakan fungsi-fungsi array yang ada dalam bahasa
pemrograman PHP.
DASAR TEORI
Array merupakan suatu tipe data yang terstruktur dan dapat digunakan untuk menyimpan data yang
memiliki tipe data yang sama. Array berfungsi untuk mengidentifikasi variabel yang memiliki jumlah
data yang lebih dari satu, tapi memiliki nama variabel yang sama. Bagian yang menyusun array
disebut elemen array, yang masing-masing elemen dapat diakses melalui index array. Index array
dapat berupa bilangan integer atau string.
1. Deklarasi Array
Cara pendeklarasian sebuah array ialah sebagai berikut :
$nama_variabel = array();
key1 => value,
key2 => value,
key3 => value,
Penjelasan :
komponen array terdiri dari pasangan kunci (key) dan nilai (value). Key adalah penunjuk
posisi dimana value disimpan. Tanda panah (=>) untuk memberikan nilai kepada key.
Pengaksesan nilai dari array dapat dilakukan dengan menggunakan kombinasi
$nama_variabel dan nilai-key, dengan penulisan sebagai berikut :
$nama_variabel[key];
2. Jenis-jenis Array
- Array berindeks (indexed array)
Array berindeks adalah array yang diindeks menggunakan angka/nomor maupun karakter
yang sifatnya berurutan. Ada dua cara membuat array berindeks yaitu indeks yang diberikan
secara otomatis (selalu dimulai dari indeks ke-0), contohnya : '
$mobil = array("Volvo", "BMW", "Toyota");
Atau bisa dengan indeks yang diberikan secara manual, contohnya :
Rekayasa Perangkat Lunak (RPL) 41
Modul Praktikum Pemrograman Web I
$mobil[0] = "Volvo";
$mobil[1] = "BMW";
$mobil[2] = "Toyota";
- Array assosiatif (Assosiative Array)
Array assosiatif adalah array yang diindeks berdasarkan nama tertentu. Ada dua cara membuat
array assosiatif , contohnya :
$umur = array("MangJorge"=>"29","Jennifer"=>"28"=,"Romeo"=>"33");
Atau
$umur['MangJorge'] = "29";
$umur['Jennifer'] = "28";
$umur['Romeo'] = "33";
3. Fungsi-fungsi Array
Dalam pemprograman PHP terdapat banyak fungsi-fungsi yang dapat digunakan untuk
memanipulasi data array. Adapun di antaranya ialah:
Array_push()
Berfungsi untuk menambah isi dari sebuah data array, yang memungkinkan isi data array
bisa disusun dengan susunan yang baru.
Array_merge()
Berfungsi untuk menggabungkan data array dengan beberapa array sekaligus.
Array_shift()
Berfungsi untuk menghapus data pertama dari sebuah array.
Sort()
Berfungsi untuk mengurutkan isi data array
Count()
Berfungsi untuk menghitung jumlah element/data dari sebuah array.
Untuk fungsi-fungsi array, lebih lengkapnya dapat anda lihat pada website PHP di link
http://ca.php.net/manual/en/ref.array.php
4. Perulangan dalam Array
Perulangan dapat digunakan untuk mengakses elemen array. Perulangan dalam array ditujukan
apabila isi data array banyak maka akan lebih efektif untuk menggunakan perulangan dalam
mengakses elemen array sehingga data yang ada dalam array akan ditampilkan seluruhnya.
Perulangan yang paling sering digunakan adalah perulangan Foreach. Contoh sintaks
perulangan array :
foreach ($umur as $data => $nama)
Penjelasan :
foreach digunakan untuk mengakses semua elemen yang ada di dalam array $umur. Pada
setiap elemen yang sedang dibaca, kunci (key) atau nama indeks array akan ditampung dalam
variabel $data, sedangkan nilainya ditampung ke dalam variabel $nama.
5. Mengurutkan (Sorting) Array
Salah satu fungsi array yaitu adalah sorting yaitu mengurutkan elemen array. Dalam
mengurutkan array juga terdapat beberapa fungsi-fungsi antara lain :
Rekayasa Perangkat Lunak (RPL) 42
Modul Praktikum Pemrograman Web I
- Sort ( )
Fungsi sort ( ) akan mengurutkan array berdasarkan nilai elemennya. Dalam proses
pengurutan ini, yang diurutkan hanya nilainya saja. Contoh sintaks pengurutan sort ( ) yaitu :
sort($nama_array);
- Asort ( )
Contoh sintaks pengurutan asort ( ) yaitu :
asort ( $nama_array);
- Ksort ( )
Digunakan untuk mengurutkan elemen array berdasarkan kunci (key) dan indeksnya. Contoh
sintaks pengurutan ksort ( ) yaitu :
ksort ($nama_array);
- Rsort ( )
Digunakan untuk mengurutkan array secara descending. Contoh sintaks pengurutan rsort ( )
yaitu :
rsort ($nama_array);
- Arsort ( )
Contoh sintaks pengurutan arsort ( ) yaitu :
arsort ($nama_array);
- Krsort ( )
Contoh sintaks pengurutan krsort ( ) yaitu :
Sort ($nama_array);
KEGIATAN PRAKTIKUM
1. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$kelompok1 =
array("Andi","Budi","Chika","David",
"Erna"); echo "Nama Kelompok
1 :<br />";
for ($i=0; $i<=4; $i++){
echo " + ",$kelompok1[$i],"<br/>";
}
echo"<br /><br />";
$kelompok2[] = "Fera";
$kelompok2[] = "Gani";
$kelompok2[] = "Hery";
$kelompok2[] = "Intan";
$kelompok2[] = "Jaka";
echo "Nama Kelompok 2 :<br />";
for ($i=0; $i<=4; $i++){
echo " + ",$kelompok2[$i],"<br/>";
}
?>
Rekayasa Perangkat Lunak (RPL) 43
Modul Praktikum Pemrograman Web I
Setelah selesai mengetik coding di atas, maka simpan dengan nama array1.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
2. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$array1 = array
("Arman","Bayu","Feri"
); echo"array awal
ialah:<br/>";
for ($i=0; $i<count($array1); $i++){
echo"data ke-",$i," : ",$array1[$i],"<br/>";
}
echo "<br/>Setlah ditambahkan \"Herni, Gita
& Dewi\" menggunakan fungsi
array_push():<br/>";
array_push($array1,"He
rni","Gita","Dewi");
for ($i=0;
$i<count($array1); $i+
+){
echo"data ke-",$i," : ",$array1[$i],"<br/>";
}
echo "<br/>Setlah bagian awal array
dihapus menggunakan fungsi
array_shift():<br/>";
array_shift($array1);
for ($i=0; $i<count($array1); $i++){
echo"data ke-",$i," : ",$array1[$i],"<br/>";
}
echo "<br/>Dan setelah isi array
diurutkan menggunakan fungsi sort():<br/>";
sort($array1);
for ($i=0; $i<count($array1); $i++){
echo"data ke-",$i," : ",$array1[$i],"<br/>";
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama array2.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 44
Modul Praktikum Pemrograman Web I
3. Buka notepad++, buat file baru New atau Ctrl+N, kemudian salin koding dibawah ini :
<?php
$pegawai = array("lina", "arni", "jona", "punjabi",
"marcus", "marlin");
echo "<strong>Sebelum diurutkan</strong><br />";
foreach($pegawai as $data => $nama){
echo "$data: $nama"."<br />";
}
sort($pegawai);
echo "<strong>Setelah diurutkan</strong><br />";
foreach($pegawai as $data => $nama){
echo "$data: $nama"."<br />";
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama array3.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
TUGAS
1. Buatlah array assosiatif ,kemudian lakukan semua fungsi pengurutan.
2. Cari dan gunakan 5 fungsi array (selain yang di atas) dan implementasikan 5fungsi
array tersebut ke array yang telah anda buat!
Rekayasa Perangkat Lunak (RPL) 45
Modul Praktikum Pemrograman Web I
MODUL VII
Form
(Pertemuan 9)
Tujuan
1. Mahasiswa dapat memahami dan mengaplikasikan form dalam pemrograman web dan dapat
melakukan pengolahan data menggunakan bahasa pemrograman PHP.
2. Mahasiswa dapat memahami dan mengaplikasikan form input type text, radio, check box, combo
box, text area dan melakukan pengolahan inputan data menggunakan bahasa pemrograman PHP.
DASAR TEORI
Dalam pemprograman web form ialah suatu tools dalam membatu interaksi aplikasi web dengan user,
dengan adanya form user dapat memanipulasi jalannya sistem sesuai dengan keinginan. Dalam form,
dibutuhkan pembuka dan penutup tag form untuk menampung untuk menampung input yang ada.
Adapun pembuka dan penutup tag form ialah sebagai berikut:
<form action="action.php" method="GET/POST">
{Jenis input}
</form>
Pada form biasnya dibutuhkan minimal dua atribut yaitu action dan method. Action berisi halaman
atau file tujuan untuk memproses inputan dalam form, sedangkan method berisi tentang metode
pengiriman data yang akan digunakan (GET atau POST).
Terdapat dua metode pengiriman data yang digunakan dalam form, yaitu metode GET dan POST.
Metode GET berarti input user dikirim ke halaman atau file action melalui address bar, sedangkan
metode POST berarti input user tidak dikirim melalui address bar.
Adapun beberapa jenis input pada form, diantaranya ialah sebagai berikut :
1. Form Input Type Text
Text berate input merupakan string biasa satu bari. Adapun syntak type text ialah:
<input type = “text” name=”nama_input_text”/>
2. Form Input Type Radio
Type radio ialah tipe inputan yang memberikan user pilihan, namun user hanya dapat
memilih salah satu saja dari beberapa pilihan tersebut. Biasanya digunakan untuk
pilihan agama, jenis kelamin dan lainnya yang bersifat diskrit. Apapun syntaknya type
radio ialah:
<input type="radio" name="JK" value="Pria" /> Pria </b>
3. Form Input Type Check Box
Type check box ialah tipe inputan yang memberikan user pilihan, namun user dapa
memilih lebih dari satu pilihan atau tidak memilih sama sekali. Adapun contoh syntak
type check box ialah:
<input type="checkbox" name="hobby" value="Joging" /> Joging </b>
Rekayasa Perangkat Lunak (RPL) 46
Modul Praktikum Pemrograman Web I
4. Form Input Type Combo Box
Combo box biasanya digunakan untuk membuat user memilih salah satu dari banyak
pilihan, fungsi combo box sama dengan radio akan tetapi tampilan menunya yang
berbeda. Adapun contoh syntak type combo box ialah:
<select name="hari">
<option
value="senin">Senin</option>
<option
value="selasa">Selasa</option>
<option value="rabu">Rabu</option>
<option
value="kamin">Kamis</option>
<option
value="jumat">Jumat</option>
<option
value="sabtu">Sabtu</option>
<option
wvalue="minggu">Minggu</option>
</select>
5. Form Input Type Text Area
Type text area biasanya digunakan untuk kalimat-kalimat yang cukup panjang seperti
alamat. Adapun contoh syntak type text area ialah:
<textarea name="alamat"></textarea>
6. Mengupload file
Pada pemprograman berbasis website seperti PHP fasilitas upload file sangat lumrah
dibutuhkan, file-file yang disimpan dalam server dari proses upload dapat membantu
dalam sebuah website. Adapun fungsi-fungsi yang dapat digunakan untuk mengupload
file ialah:
Is_uploaded_file()
Berfungsi untuk untuk konfirmasi ada atau tidaknya proses terjadinya upload file.
Contoh penulisan:
Is_uploaded_file($_FILES [„file‟][„tmp_name‟]);
move_uploaded_file()
Dimana fungsi dari fungsi ini ialah untuk melakukan pengcopy-an pada path
distionasion ke bagian server. Contoh:
$dirktori = „upload/‟;
$uploadfile = $dirktori . $_FILES[„file‟][„tmp_name‟];
move_uploaded_file($_FILES [„file‟][„tmp_name‟], $uploadfile);
pada sintak di atas fungsi move_uploaded_file ialah memindahkan file ke dalam
direktori atau folder yang sudah ditentukan contoh folder upload yang telah disediakan.
Adapun variabel gloabal $_files upload yang dapatdigunakan antara lain:
Rekayasa Perangkat Lunak (RPL) 47
Modul Praktikum Pemrograman Web I
Variabel Keterangan
$_ FILES[„$file_nama‟][„name‟] Menampilkan nama file
$_ FILES[„$file_nama‟][„type‟] Menampilkan tipe file
$_ FILES[„$file_nama‟][„size‟] Menampilkan ukuran file dalam byte
$_ FILES[„$file_nama‟][„tmp_name‟] Menampilkan nama temporary file
$_ FILES[„$file_nama‟][„error‟] Menampilkan kode error pada upload
* $file_name adalah nama variabel yang bererisi file yang diupload.
KEGIATAN PRAKTIKUM
1. Program Form Input Text, Salin coding di bawah ini:
<html>
<head>
<title>Form Input Text</title>
</head>
<body>
<form id="form_text" name="form_text" method="POST"
action="Proses_text.php">
<p>NIM <input type="text" name="nim"
id="nim" /></p> <p>Nama <input
type="text" name="nama"
id="nama"/></p> <p><input
type="submit" name="Button"
id="Button"
value="Tampil"/></p>
</form>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama form_text.php dan buka
file baru dan salin coding di bawah ini :
<?php
$nim = $_POST['nim'];
$nama = $_POST['nama'];
echo "NIM : $nim <br>";
echo "Nama : $nama <br>";
?>
Simpan file baru tersebut dengan nama roses_text.php dan letakkan di folder yang sama dengan
form_text.php. Lalu jalankan form_text.php di browser, Maka pada browser akan muncul hasil
sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 48
Modul Praktikum Pemrograman Web I
Bila tombol tampil di tekan, maka muncul hasil :
2. Program Form Input Radio, Salin Koding dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator sederhana</title>
</head>
<body>
<form id="form_text" name="form_text" method="POST"
action="proses_hitung.php">
<table width="400" cellspacing="0" cellpading="3">
<tr>
<td>Angka 1</td>
<td>: <input type="text" name="angka1" /></td>
</tr>
<tr>
<td>Operator</td>
<td><input type="radio" name="operator" value="tambah"> +
<input type="radio" name="operator" value="kurang"> -
<input type="radio" name="operator" value="kali"> *
<input type="radio" name="operator" value="bagi"> /
<input type="radio" name="operator" value="modulo"> % </td>
</tr>
<tr>
<td>Angka 2</td>
<td>: <input type="text" name="angka2" /></td>
</tr>
<tr>
<td></td>
<td><br><input name="submit" type="submit" value="Hitung">
<input name="Reset" type="reset" value="CLEAR"></td>
</tr>
</table>
</form>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama kalkulator.html dan buka
file baru dan salin coding di bawah ini :
Rekayasa Perangkat Lunak (RPL) 49
Modul Praktikum Pemrograman Web I
<?php
$angka1=$_POST['angka1'];
$angka2=$_POST['angka2'];
$operator=$_POST['operator'];
if($operator=="tambah"){
$hasil=$angka1+$angka2;
}else if ($operator=="kurang"){
$hasil=$angka1-$angka2;
}else if ($operator=="kali"){
$hasil=$angka1*$angka2;
}else if ($operator=="bagi" && $angka2!=0){
$hasil=$angka1/$angka2;
}else if ($operator=="bagi" && $angka2==0){
$hasil="<b>Error Pembagi 0</b>";
}else if ($operator=="modulo" && $angka2!=0){
$hasil=$angka1%$angka2;
}else if ($operator=="modulo" && $angka2==0){
$hasil="<b>Error Pembagi 0</b>";
}
echo"<br> Hasil dari $angka1 di$operator $angka2 = $hasil";
?>
Simpan file baru tersebut dengan nama proses hitung.php dan letakkan di folder yang sama dengan
kalkulator.html. Lalu jalankan kalkulator.html di browser, Maka pada browser akan muncul hasil
sebagai berikut:
Bila tombol Hitung di tekan, maka muncul hasil :
3. Program Form Input CheckBox, Salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 50
Modul Praktikum Pemrograman Web I
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Input Checkbox</title>
</head>
<body>
<p>Pilih Game yang disukai</p>
<FORM NAME="form_checkbox" METHOD="POST"
ACTION="proses_checkbox.php">
<input type="checkbox" name="game1" value="Dota 2"> Dota 2<br>
<input type="checkbox" name="game2" value="Mobile Legend"> Mobile
Legend<br>
<input type="checkbox" name="game3" value="Counter Strike"> Counter
Strike<br>
<input type="checkbox" name="game4" value="Tidak Menyukai Game"> Tidak
ada<br>
<input type="submit" name="Pilih" value="Pilih"> </FORM>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama form_checkbox.html dan buka
file baru dan salin coding di bawah ini :
<?php
echo "Hobi Anda Adalah :<br>";
if (isset($_POST['game1'])) {
echo "+ " . $_POST['game1'] . "<br>";
}
if (isset($_POST['game2'])) {
echo "+ " . $_POST['game2'] . "<br>";
}
if (isset($_POST['game3'])) {
echo "+ " . $_POST['game3'] . "<br>";
}
if (isset($_POST['game4'])) {
echo "+ " . $_POST['game4'] . "<br>";
}
?>
Simpan file baru tersebut dengan nama proses_checkbox.php dan letakkan di folder yang sama
dengan form_checkbox.html. Lalu jalankan form_checkbox.html di browser, Maka pada browser
akan muncul hasil sebagai berikut:
Bila tombol Proses di tekan, maka muncul hasil :
Rekayasa Perangkat Lunak (RPL) 51
Modul Praktikum Pemrograman Web I
4. Program Form Input ComboBox, salin koding dibawah ini :
<html>
<head>
<title>Form Input ComboBox</title>
</head>
<body>
<p>Binatang apa yang Anda suka?</p>
<form id="form_combobox" name="form_combobox" method="POST"
action="Proses_combobox.php">
<select name="favorit">
<option value="Kucing">Kucing</option>
<option value="Anjing">Anjing</option>
<option value="Burung">Burung</option>
<option value="Sapi">Sapi</option>
<option value="Kambing">Kambing</option>
</select>
<p></p>
<p><input type="submit" name="button" value="Tampil"/></p>
</form>
Setelah selesai mengetik coding di atas, maka simpan dengan nama form_combobox.php dan buka
file baru dan salin coding di bawah ini :
<?php
$binatang = $_POST['favorit'];
echo "Binatang yang anda sukai ialah $binatang";
?>
Simpan file baru tersebut dengan nama proses_combobox.php dan letakkan di folder yang sama
dengan form_combobox.php. Lalu jalankan form_combobox.php di browser, Maka pada browser
akan muncul hasil sebagai berikut:
Bila tombol Proses di tekan, maka muncul hasil :
Rekayasa Perangkat Lunak (RPL) 52
Modul Praktikum Pemrograman Web I
5. Program Form Input TextArea, buka file baru dan salin koding dibawah ini:
<html>
<head>
<title>Form Input Text
Area</title> </head>
<body>
<p>Masukkan komentar atau pendapat anda!</p>
<form id="form_area" name="form_area" method="POST"
action="Proses_area.php">
<textarea name="komen"></textarea><br/>
<p></p>
<p><input type="submit" name="button" value="Tampil"/></p>
</form>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama form_radio.php dan buka file
baru dan salin coding di bawah ini :
<?php
$komentar = $_POST['komen'];
echo "Komentar atau Pendapat
Anda :<br/>"; echo "$komentar";
?>
Simpan file baru tersebut dengan nama proses_radio.php dan letakkan di folder yang sama dengan
form_radio.php. Lalu jalankan form_radio.php di browser, Maka pada browser akan muncul hasil
sebagai berikut:
Bila tombol Proses di tekan, maka muncul hasil :
Rekayasa Perangkat Lunak (RPL) 53
Modul Praktikum Pemrograman Web I
6. Program Upload File, salin koding dibawah ini :
<html>
<head>
<title>Form Upload File</title>
</head>
<body>
<FORM ENCTYPE="multipart/form-data" METHOD="POST"
ACTION="proses_upload.php">
<p>Pilih File : <input type="file"
name="file"></p> <input type="submit"
name="Button" value="Upload">
</FORM>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama form_upload.php dan buka file
baru dan salin coding di bawah ini :
<?php
$dir_upload = "files/";
$uploadfile = $dir_upload . $_FILES['file']['name'];
if (is_uploaded_file($_FILES['file']['tmp_name'])) {
$kirim = move_uploaded_file ($_FILES['file']
['tmp_name'], $uploadfile);
if ($kirim) {
echo "File berhasil diupload ke server pada folder
<b>$uploadfile</b>";
} else {
echo "File gagal diupload";
echo "error : ", $_FILES['file']['error'];
}
}
?>
Simpan file baru tersebut dengan nama proses_upload.php dan letakkan di folder yang sama dengan
form_upload.php. Lalu jalankan form_upload.php di browser, Maka pada browser akan muncul
hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 54
Modul Praktikum Pemrograman Web I
Untuk mencari file yang akan diupload kita harus menekan tombol choose file... , setelah
menekan tombol choose file… maka akan muncul jendela windows untuk memilih file yang
akan diupload.
Setelah memilih file, tekan tombol Upload file. Maka akan muncul hasil seperti berikut :
TUGAS
1. Buatlah program tampil biodata menggunakan 5 form input di atas!
2. Buatlah form login sederhana!
Rekayasa Perangkat Lunak (RPL) 55
Modul Praktikum Pemrograman Web I
MODUL VIII
Function
(Pertemuan 9)
Tujuan :
1. Mahasiswa dapat memahami dan mengaplikasikan fungsi dalam pembuatan web
menggunakan bahasa pemrograman PHP.
2. Mahasiswa dapat mengetahui cara pendeklarasian array menggunakan bahasa
pemrograman PHP dan mengaplikasikannya dalam pembuatan web.
3. Mahasiswa dapat memahami dan melakukan pengolahan data array menggunakan
bahasa pemrograman PHP
4. Mahasiswa dapat mengetahui dan menggunakan fungsi-fungsi array yang ada dalam
bahasa pemrograman PHP.
DASAR TEORI
Fungsi (function) adalah kumpulan beberapa statement yang dibuat untuk menyelesaikan
suatu tugas tertentu yang dapat dipanggil sesara berulang. Fungsi juga digunakan untuk
mencegah script dieksekusi pada saat halaman web diload, karena untuk mengeksekusinya kita
harus memanggil fungsi tersebut.
1. Deklarasi fungsi
untuk mendeklarasikan fungsi terdapat beberapa hal yang harus diperhatikan :
nama fungsi (nama dari fungsi yang berfungsi untuk memanggilan fungsi
tersebut untuk dieksekusi)
parameter (nilai tertentu yang dimasukkan ke dalam fungsi. dapat juga diisi
dengan variabel)
baris perintah (perintah yang dijalankan saat fungsi dipanggil)
contoh:
function nama_fungsi (parameter1, parameter2,…..){
baris_perintah;
}
2. Fungsi tanpa parameter
Pada saat mendeklarasikan sebuah fungsi adakalanya kita dapat mendeklarasikan tanpa
memberikan parameter. Contoh :
function nama_saya (){
echo “Indra Saputra”;
}
3. Fungsi dengan parameter
Saat kita mendeklarasikan sebuah fungsi yang memiliki parameter, maka parameter
tersebut menjadi sebuah inputan yang akan diproses dalam fungsi tersebut. contoh:
Function tambah ($x, $y){
$z = $x
+$ y;
Rekayasa Perangkat Lunak (RPL) 56
Modul Praktikum Pemrograman Web I
echo
$z;
}
KEGIATAN PRAKTIKUM
1. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini
<?php
function tampil_ganjil(){
for ($i =1; $i<=10; $i++){
if ($i % 2 == 1){
echo "$i ";
}
}
}
//pemanggil fungsi
echo "Bilanggan ganjil
dari 1-10 :<br/>";
tampil_ganjil();
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama function.php dan jalankan
di browser. Maka pada browser akan muncul hasil sebagai berikut:
2. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
?php
function volume($luas,$tinggi){
$volume = $luas * $tinggi;
echo "Volume ialah : $volume cm";
}
function luas_persegi($p, $l, $t){
$luas = $p * $l;
echo "Luas Persegi
ialah : $luas
cm<br/>";
volume($luas, $t);
}
$panjang = 20;
$lebar = 10;
$tinggi = 5;
echo "Panjang Persegi : $panjang cm<br />";
echo "Lebar Persegi : $lebar cm<br/>";
echo "Tinggi Persegi :
$tinggi cm<br/><br/>";
luas_persegi($panjang,
$lebar, $tinggi);
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama function1.php dan jalankan
di browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 57
Modul Praktikum Pemrograman Web I
TUGAS PRAKTIKUM
Buatlah script untuk menghitung jumlah bilangan ganjil antara 10 sampai 123456. Gunakan function
untuk mengecek apakah suatu bilangan termasuk bilangan ganjil atau tidak.
Rekayasa Perangkat Lunak (RPL) 58
Modul Praktikum Pemrograman Web I
MODUL IX
Session dan Cookies
(Pertemuan 10)
Tujuan :
1. Mahasiswa dapat memahami dan mengaplikasi penggunaan session dan cookies dalam
pembuatan web menggunakan bahasa pemrograman PHP.
2. Mahasiswa dapat memahami dan mengaplikasikan pembuatan, penggunaan dan penghapusan
session dalam pemrograman PHP.
3. Mahasiswa dapat memahami dan mengaplikasikan pembuatan, penggunaan dan penghapusan
cookies dalam pemrograman PHP.
DASAR TEORI
1. Session
Session adalah sebuah tools dalam pemprograman web yang memungkinkan server menyimpan
data informasi user secara semi-permanen, dimana selama masa tertentu informasi tersebut akan
disimpan di server. Biasanya session digunakan dalam proses login sebuah website, misal saat kita
ingin melihat suatu halaman pada suatu website yang mengharuskan kita untuk login sebagai user
terlebih dahulu, dalam proses login akan terjadi pembuatan sebuah session yang akan dipakai user
pada setiap pembuakaan halaman pada website tersebut. Pada saat pebukaan suatu halaman di
website tersebut maka session tersebut akan diperiksa, apabila session benar maka halaman yang
ingin dibuka tersebut akan tampin dan apabila session salah atau tidak terbaca maka website akan
menampilakan kembali halaman login dan meminta user untuk melakukan login kembali.
Dengan session, sebuah halaman pada suatu website dapat dibuka oleh lebih dari satu user yang
berbedan karena setiap user memiliki session yang berbeda.
Fungsi Keterangan
Session_start() Untuk memulai/membuat session.
Session_destroy() Untuk mengakhiri/menghapus session.
Session_id() Untuk mengambil atau menentukan identitas sebuah session (session id).
2. Cookies
Hampir sama dengan session, cookies adalah data yang berisi tentang informasi user yang
dikirim oleh server ke clien dan disimpan di remout browser client sehingga memudahkan
penelusuran identitas user. Adapun fungsi yang digunakan untuk membuat cookiest ialah setcookie(),
dan penulisannya ialah:
Setcookie(“Nama”,”Isi”,”Usia”);
Dimana Nama adalah nama dari cookies tersebut sedangkan isi adalah data yang akan dimasukan
kedalam cookies tersebut dan usia adalah berapa lamakah cookies tersebuat akan aktif. Untuk usia
cookies dibaca dalam detik, misal apabila kita memasukan nilai 10 maka cookies akan aktif selama
10 detik dan akan terhapus apabila telah telah mencapai waktu tersebut. Dan untuk menghapus
cookies, kita hanya perlu untuk menset cokies tersebut denga isi dan usia yang kosong.
Rekayasa Perangkat Lunak (RPL) 59
Modul Praktikum Pemrograman Web I
KEGIATAN PRAKTIKUM
1. Program Login Session, salin koding dibawah ini :
<?php
session_start();
if(isset($_POST['Login'])){
if(($_POST['nama']=="") && ($_POST['pass']=="")) { echo "User Name
dan Password masih kosong"; session_destroy();
}else{
// user = “johan” & password = “bengbeng123”
if(($_POST['nama']=="johan") and ($_POST['pass']=="bengbeng123")){
$_SESSION['login']=1;
$_SESSION['username']=$_POST['nama'];
if ((isset($_SESSION['login'])) and ($_SESSION['login']==1))
{ header("location: submit_formlogin.php");
exit();
}
}
}
?>
<html>
<head>
<title>Session</title>
</head>
<body>
<form name="session" method="POST" action=""> <p>Form Login</p>
<p>User Name <input type="text" name="nama"/></p> <p>Password <input
type="password" name="pass" /></p> <input type="submit" name="Login"
value="Login" />
</form>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama proses_login.php dan buka file
baru dan salin coding di bawah ini :
Rekayasa Perangkat Lunak (RPL) 60
Modul Praktikum Pemrograman Web I
<?php
session_start();
if ( (isset($_GET['aksi'])) and ($_GET['aksi']=="logout") ){
session_destroy();
header("refresh;3;proses_radio.php");
}
if(isset($_SESSION['login'])){
$nama = $_SESSION['username'];
echo"<center>";
echo"<p>Selamat Datang <b>".$nama."</b></p>";
echo"<p>Berikut ini menu navigasi anda</p>";
echo"<p><a href='menu1.php'>Menu 1 </a><a
href='menu2.php'>Menu 2 </a><a href='menu3.php'>Menu
3 </a></p>";
?>
<a href="?aksi=logout">Logout</a> </body>
</center>
<?php
}else{
header("location:proses_login.php");
}
?>
Simpan file baru tersebut dengan nama submit_formlogin.php dan letakkan di folder yang sama
dengan proses_login.php. Lalu jalankan proses_login.php di browser, Maka pada browser akan
muncul hasil sebagai berikut:
Setelah itu masukan “johan” pada user name dan “bengbeng123” pada password, kemudian akan
muncul :
Apabila kita menekan Menu 1 maka akan muncul tampilan :
Rekayasa Perangkat Lunak (RPL) 61
Modul Praktikum Pemrograman Web I
Apabila kita menekan Menu 2 maka akan muncul tampilan :
Apabila kita menekan Menu 3 maka akan muncul tampilan :
Apabila kita menekan “Logout” maka kita akan diarahkan kembali ke tampilan form login.
2. Program Cookies, salin koding dibawah ini :
<?PHP
$expire = time()+10;
setcookie('netter',1,$expire);
?>
<html>
<head>
<title>Cookies</title>
</head>
<body>
<?PHP
if(isset($_COOKIE['netter'])){
echo "Selamat Datang Kembali";
}else{
echo "Selamat Datang, Ini Kunjungan Anda
Pertama Kalinya";
}
?>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama cookie.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Apabila kita merefresh browser kembali sebelum 10 detik maka akan muncul :
Rekayasa Perangkat Lunak (RPL) 62
Modul Praktikum Pemrograman Web I
TUGAS
1. Buatlah autentifikasi user dari suatu aplikasi web menggunakan konsep SESSION. Adapun
username-username yang boleh mengakses aplikasi ini adalah
USERNAME PASSWORD
Ali password1
Bona password2
Charlie password3
Dede password4
Emon password5
Username dan password di atas harus disimpan dalam sebuah ARRAY.
2. Buatlah aplikasi seperti berikut:
Terlebih dahulu buatlah sebuah desain halaman web dengan layout seperti di bawah ini:
TITLE
KONTEN
FOOTER
Selanjutnya, bagi-bagilah layout tersebut ke dalam modul header.php dan footer.php Untuk halaman
utama, tampilkan form login untuk user.
TITLE
Silakan Login
Username
Password
[ SUBMIT ]
FOOTER
Rekayasa Perangkat Lunak (RPL) 63
Modul Praktikum Pemrograman Web I
Selanjutnya bila login berhasil tampilkan halaman berikut ini (munculkan link navigasi) :
TITLE
Username : XXX
Link 1 | Link 2 | Link 3 | Logout
Anda telah berhasil login
FOOTER
Keterangan:
Login dikatakan berhasil bila password yang dimasukkan oleh seorang user melalui form login
sama dengan password yang tersimpan dalam aplikasi (dalam hal ini password yang ada dalam
array).
XXX adalah username yang sukses login.
Untuk setiap halaman Link 1, 2, dan 3 berikut ini tampilannya
TITLE
Username : XXX
Link 1 | Link 2 | Link 3 | Logout
Ini adalah isi dari halaman Link 1
FOOTER
Catatan:
1. Aplikasi yang dibuat harus bisa menghandle apabila login salah, misalnya muncul keterangan
“Password yang dimasukkan salah” bila username terdaftar namun passwordnya salah, atau
“Username tidak terdaftar” bila usernamenya tidak terdaftar dalam aplikasi.
Bila password login salah atau user tidak terdaftar, maka menu link navigasi tidak
ditampilkan
2. Aplikasi yang dibuat harus bisa menghandle adanya penyusup yang ingin langsung masuk ke
halaman Link 1, 2 dan 3 tanpa melalui login (autentifikasi).
3. Aplikasi yang dibuat harus bisa menghandle proses logout.
Rekayasa Perangkat Lunak (RPL) 64
Modul Praktikum Pemrograman Web I
MODUL X
Database dalam PHP
(Pertemuan 11)
Tujuan :
1. Mahasiswa dapat memahami dan mengaplikasi pembuatan web yang menggunakan database
MySQL.
2. Mahasiswa dapat memahami dan melakukan koneksi database MySQL dengan web
menggunakan bahasa pemrograman PHP
3. Mahasiswa dapat menampilkan record data menggunakan bahasa pemrograman PHP
4. Mahasiswa dapat menambah, mengubah dan menghapus record data dalam database
menggunakan bahasa pemrograman PHP.
DASAR TEORI
Penyimpanan data yang fleksibel dan mudah diakses sangatlah dibutuhkan dalam website yang
interaktif dan dinamis. Jenis database yang sangat popular dan digunakan pada banyak website di
internet sebagai bank data adalah MySQL. Dalam PHP terdapat beberapa fungsi-fungsi yang dapat
digunakan untuk berinteraksi dengan MySQL yaitu Create Read Update Delete (CRUD).
1. Koneksi PHP dan MySQL
Dalam php untuk melakukan koneksi ke database MySQL kita dapat menggunakan fungsi
Mysql_connect() agar database yang terdapat pada MySQL dapat diakses melalui PHP, adapun bentuk
penulisannya ialah:
Mysqli_ connect(nama_host, nama_user, password);
Dimana host ialah sebagai alamat letak database tersimpan sedangkan user adalah nama user untuk
mengakses database dan password adalah password yang digunakan untuk verifikasi keamanan
database. Biasanya kita juga dapat menggunakan koneksi default ke computer local denga
memasukkan “localhost” pada host, serta untuk user kita masukan “root” dan mengkosongkan
password, contoh:
Mysqli_connect(“localhost”,”root”,””);
Mysqli_query()
Inilah fungsi yang dapat membantu kita untuk memasukkan query perintah untuk memberikan
perintah ke database MySQL, seperti mebuat dan menghapus tabel, menambah, mengupdat
dan menghapus data pada tabe. Adapun bentu penulisannya ialah:
Mysqli_query(perintah);
Dimana printah adalah string yang berisi query printah dalam databes MySQL.
2. Menambah, mengubah, dan menghapus data
Dalam PHP tidak memiliki fungsi khusus untuk menangani field-field beserta data-datanya
sehingga untuk memanipuasi field digunkan bentuk penulisa perintah dari MySQL itu sendiri selaku
Rekayasa Perangkat Lunak (RPL) 65
Modul Praktikum Pemrograman Web I
database managemen sistem. pemberian sebuah perintah ke MySQL dapat dioperasikan
menggunakan fungsi mysql_query(). Adapun penulisannya ialah:
Mysqli_query(perintah);
Keterangan :
perintah adalah string yang berisi query printah dalam database MySQL.
Sebelum memasuki materi memadipulasi data dalam field, terlebih dahulu kita harus mengetahui
bagai mana cara untuk menciptakan sebuah database, tabel dan field dengan menggunakan fungsi
mysql_query(). Adapun printah query yang digunakan untuk menciptakan database dan tabel baru
ialah:
Pembuatan database baru
Untuk membuat database baru, kita dapat menggunakan perintah query SQL sebagai
berikur:
CREATE DATABASE nama_db;
Dimana nama_db ialah nama yang akan diberikan pada database yang akan diciptakan.
Pembuatan tabel baru
Untuk membuat tabel baru , kita dapat menggunakan perintah query SQL sebagai berikut :
Create tabel nama_tabel(field1, field2, … );
Dimana nama_tabel ialah nama yang akan diberikan untuk tabel yang akan dibuat. Sedangkan
field1, field2, … ialah field-field yang akan dimiliki oleh tabel yang akan dibuah. Contoh:
Create tabel mahasiswa(nim char(7), nama varchar(20), nilai int(),…);
Dari query di atas membuat perintah untuk membuah tabel bernama mahasiswa dengan field
nim bertipe data char dengan panjang 7 charakter, nama bertipe data varchar dengan panjang 20
charakter, nilai bertipe data integer dan seterusnya.
Setelah membuat sebuah database dan tabel baru maka kita dapat memanipulasi isi tabel
tersebut dengan fungsi mysql_query() dan perintah query sebagai berikut:
Insert into
Insert into adalah Perintah query untuk menambah data pada tabel tertentu. Adapun bentuk
penulisannya ialah:
INSERT INTO Nama_Tabel (field1, field2,….) VALUES (data1, data2, … );
Dimana Nama_Tabel ialah nama dari tabel yang akan diisi oleh data tersebut, sedangkan
field1, field2,… ialah nama field atau kolom dari tabel yang akan diisikan data baru, sedangkan
data1, data2,… ialah nilai atau data yang akan dimasukkan ke dalam field atau kolom . contoh:
INSERT INTO mahasiwa (nim, nama, nilai, … ) VALUES (“1112134”,
“Dewi”, 90, …);
Update
Update adalah printah query SQL untuk memodifikasi atau merubah data pada database.
Adapun bentuk penulisannya ialah:
Rekayasa Perangkat Lunak (RPL) 66
Modul Praktikum Pemrograman Web I
UPDATE Nama_Tabel SET field1 = nilai_baru, field2 = nilai_baru, … WHERE
syarat;
Dimana Nama_Tabel ialah nama tabel dari data yang akan diupdate, sedangkan field1, field2,
… adalah nama field atau kolom dari data yang akan dirubah, sedangkan nilai_baru ialah data
yang akan menggantikan data yang akan diganti dan syarat ialah ketentuan yang harus dipenuhi
dalam mengubah data. Contoh :
UPDATE mahasiswa SET nama = 'Ayu‟, nilai = 95 … WHERE nim = '1112134‟;
Delete from
Delete from adalah perintah query SQL untuk menghapus data pada database. Adapun
bentuk penulisannya ialah :
DELETE FROM Nama_Tabel WHERE syarat;
Dimana nama_tabel adalah nama tabel dari data yang akan dihapus, sedangkan syarat ialah
ketentuan data yang akan dihapus. Contoh:
DELETE FORM mahasiswa WHERE nim = „1112134‟;
3. Menampilkan data
Untuk menampilkan data dari database MySQL, kita dapat mengunakan fungsi query SELECT
untuk memilih apa saja data yang akan ditampilkan. Adapun bentuk penulisannya ialah:
SELECT field1, field2, … FORM nama_tabel WHERE syrat;
Dimana field1, field2, … adalah nama field atau kolom dalam tabel yang datanya akan
ditampilkan, sedangkan nama_tabel adalam nama tabel yang akan ditampilkan datanya, dan syarat
ialah ketentuan data yang akan ditampilkan. Contoh:
SELECT nama, nilai, … FROM mahasiswa WHERE nim = „1112134‟;
Selain menggunaan query SELECT, kita juga dapat menggunakan fungsi mysql_fetch_row() atau
mysql_fetch_array() yang berfungsi untuk mengambil data dari hasil query SELECT secara baris per
baris. Pengambilan pertama adalah baris data yang paling atas dan data yang diambil berbentuk array.
Adapun bentuk penulisannya ialah :
Mysqli_fetch_row(variabel); dan
Mysqli_fetch_array(variabel);
Dimana variabel adalah variabel yang berisi hasil pelaksanaan perintah query untuk mengakses
database.
KEGIATAN PRAKTIKUM
1. Program koneksi MySQL, salin koding dibawah ini :
<?php
//Koneksi Ke MySQL
$cnn = mysqli_connect('localhost','root','');
if(!$cnn){
echo "Koneksi Gagal";
}else{
echo "Koneksi Berhasil";
}
?>
Rekayasa Perangkat Lunak (RPL) 67
Modul Praktikum Pemrograman Web I
Setelah selesai mengetik coding di atas, maka simpan dengan nama koneksi.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
2. Program koneksi MySQL, salin koding dibawah ini :
<?php
$conn = mysqli_connect('localhost','root');
if(mysqli_connect_errno()){
echo"koneksi ke sever gagal";
}
$sql = "CREATE DATABASE db_kampus";
if(mysqli_query($conn, $sql))
{ echo "Database Berhasil dibuat";
} else{ echo "Gagal membuat Database :".mysqli_error($conn); }
mysqli_close($conn);
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama koneksi_db.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
3. Program Membuat Tabel, salin koding dibawah ini :
<?php
$dbname='db_kampus';
$host='localhost';
$password='';
$username='root';
//Koneksi Ke MySQL
$cnn = mysqli_connect($host,$username,$password,$dbname);
//Membuat Koneksi
if(!$cnn){
die("Koneksi Failed : ".mysqli_connect_error()); }
//Membuat Tabel
$sql ="CREATE TABLE mahasiswa (
nim CHAR(10) NULL,
nama VARCHAR(25) Null,
alamat VARCHAR(50) Null,
telp VARCHAR(15) Null,
constraint pk_datasiswa primary key(nim)
)";
if (mysqli_query($cnn, $sql)){
echo "Table Berhasil di Buat";
} else {
echo "Table Gagal di Buat :".mysqli_error($cnn); }
mysqli_close($cnn);
?>
Rekayasa Perangkat Lunak (RPL) 68
Modul Praktikum Pemrograman Web I
Setelah selesai mengetik coding di atas, maka simpan dengan nama buat_tabel.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
4. Program Tambah Data, salin koding dibawah ini :
<?php
$cnn = mysqli_connect('localhost','root','');
if(!$cnn){
echo "Koneksi Gagal";
}else{
echo "Koneksi Berhasil<br/>";
mysqli_select_db($cnn,"db_kampus");
}
$nim = "10101111";
$nama = "Bona Boni";
$alamat = "Jl. Tukad Pakerisan No. 97";
$telp = "087655333333";
$query = "select * from mahasiswa";// memilih mengakses db_kampus
$sql = "INSERT INTO mahasiswa (nim,nama,alamat,telp) VALUES
('$nim','$nama','$alamat','$telp')";
$hasil = mysqli_query($cnn,$sql);
if(mysqli_query($cnn,$sql)){
echo "Data GAGAL Disimpan <br/>";
}else{
echo "Data BERHASIL Disimpan <br/>";
echo "NIM : $nim <br/>";
echo "Nama : $nama <br/>";
echo "Alamat : $alamat <br/>";
echo "Telp : $telp <br/>";
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama tambah_data.php dan jalankan
di browser. Maka pada browser akan muncul hasil sebagai berikut:
5. Program Update Data, salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 69
Modul Praktikum Pemrograman Web I
<?php
$cnn = mysqli_connect('localhost','root','','db_kampus');
if(!$cnn){
echo "Koneksi Gagal <br/>";
}else{
echo "Koneksi Berhasil <br/>";
}
mysqli_select_db($cnn,"db_kampus");
$sql = "UPDATE mahasiswa set nama='Rona Roni', telp = '081657775987',
alamat = 'Jalan Gowokwaru' where nim = '10101111';";
$update = mysqli_query($cnn,$sql);
if (!$update){
echo "Data GAGAL Dirubah <br/>";
}else{
echo "Data BERHASIL Dirubah <br/>";
Setelah selesai mengetik coding di atas, maka simpan dengan nama update_data.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
6. Program Menampilkan Data, salin koding dibawah ini :
<?php
$cnn = mysqli_connect('localhost','root','','db_kampus');
if(!$cnn){
echo "Koneksi Gagal <br/>";
}else{
echo "Koneksi Berhasil <br/>";
}
mysqli_select_db($cnn,"db_kampus");
$sql = "SELECT nim, nama, alamat, telp FROM mahasiswa;";
$tampil = mysqli_query($cnn,$sql);
while ($data = mysqli_fetch_array($tampil)){ echo "NIM : ".
$data['nim']."<br/>"; echo "Nama : ". $data['nama']."<br/>"; echo
"Alamat : ". $data['alamat']."<br/>"; echo "Telp : ".
$data['telp']."<br/>"; echo "<br/>";
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama tampil.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 70
Modul Praktikum Pemrograman Web I
7. Program Delete Data, salin koding dibawah ini :
<?php
$cnn = mysqli_connect('localhost','root','','db_kampus');
if(!$cnn){
echo "Koneksi Gagal <br/>";
}else{
echo "Koneksi Berhasil <br/>";
}
mysqli_select_db($cnn,"db_kampus");
$sql = "DELETE FROM mahasiswa where nim ='10101111';";
$hapus = mysqli_query($cnn,$sql);
if (!$hapus){
echo "Data GAGAL Dihapus <br/>";
}else{
echo "Data BERHASIL Dihapus <br/>";
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama delete.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
TUGAS
1. Buatlah CRUD sederhana untuk menampilkan 5 nama teman anda di kelas
Rekayasa Perangkat Lunak (RPL) 71
Modul Praktikum Pemrograman Web I
MODUL XI
Lanjutan Database dalam PHP
(Pertemuan 12)
Tujuan :
1. Mahasiswa dapat memahami dan mengaplikasi pembuatan web yang menggunakan database
MySQL.
2. Mahasiswa dapat memahami dan melakukan koneksi database MySQL dengan web
menggunakan bahasa pemrograman PHP
3. Mahasiswa dapat menampilkan record data menggunakan bahasa pemrograman PHP
4. Mahasiswa dapat menambah, mengubah dan menghapus record data dalam database
menggunakan bahasa pemrograman PHP.
KEGIATAN PRAKTIKUM
1. Buka direktori C > xampp > htdocs, kemudian buat folder dan beri nama “bukutamu”.
2. Program koneksi MySQL, salin koding dibawah ini :
<?php
$dbname='db_tamu';
$host='localhost';
$password='';
$username='root';
//Koneksi Ke MySQL
$conn = mysqli_connect($host,$username,$password,$dbname);
if(mysqli_connect_errno()){
echo "Koneksi Gagal.";
exit();
}
?>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > bukutamu, dan beri nama file dengan
“koneksi.php”, klik Save.
3. Membuat database, salin koding dibawah ini :
<?php
$conn = mysqli_connect('localhost','root');
if(mysqli_connect_errno()){
echo"koneksi ke sever gagal";
}
$sql = "CREATE DATABASE db_tamu";
if(mysqli_query($conn, $sql))
{ echo "Database Berhasil dibuat";
} else{ echo "Gagal membuat Database :".mysqli_error($conn); }
mysqli_close($conn);
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama buat_db.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 72
Modul Praktikum Pemrograman Web I
4. Program Membuat Tabel, salin koding dibawah ini :
<?php
$dbname='db_tamu';
$host='localhost';
$password='';
$username='root';
//Koneksi Ke MySQL
$cnn = mysqli_connect($host,$username,$password,$dbname);
//Membuat Koneksi
if(!$cnn){
die("Koneksi Failed : ".mysqli_connect_error()); }
//Membuat Tabel
$sql ="CREATE TABLE bukutamu (
id integer not null auto_increment,
nama varchar(25),
email varchar(50),
url varchar(100),
komentar text,
constraint pk_bukutamu primary key(id)
)";
if (mysqli_query($cnn, $sql)){
echo "Table Berhasil di Buat";
} else {
echo "Table Gagal di Buat :".mysqli_error($cnn); }
mysqli_close($cnn);
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama buat_tb.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
5. Membuat Buku Tamu, salin koding dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Buku Tamu</title>
</head>
<body>
<h2>Buku Tamu</h2>
<strong>Menu:</strong>
<ul>
<li> <a href="tambah_data.php">Isi Buku Tamu</a></li>
<li><a href="tampil_data.php">Lihat Daftar Komentar</a></li>
</ul>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama index.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 73
Modul Praktikum Pemrograman Web I
6. Tambah buku tamu, salin koding dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Buku Tamu</title>
</head>
<body>
<h2>Form Pencatatan Buku Tamu</h2>
Silahkan Masukkan Komentar Anda
<br/><br/>
<form action="proses_tambah.php" method="post">
<table>
<tr>
<td>Nama</td>
<td><input type="textfield" name="nama" maxlength="50" size="50" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="textfield" name="email" maxlength="50" size="50"
/></td>
</tr>
<tr>
<td>URL</td>
<td><input type="textfield" name="url" maxlength="100" size="50" /></td>
</tr>
<tr>
<td valign="top">Komentar</td>
<td>
<textarea name="komentar" cols="50" rows="6"></textarea>
</td>
</tr>
<td> </td>
<td><input type="submit" name="kirim" value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama tambah_data.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
7. Proses Menambahkan Data, salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 74
Modul Praktikum Pemrograman Web I
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Buku Tamu</title>
</head>
<body>
<?php
if(isset($_POST["kirim"])){
$nama = $_POST["nama"];
$email = $_POST["email"];
$url = $_POST["url"];
$komentar = $_POST["komentar"];
require("koneksi.php");
$sql="insert into bukutamu(nama,
email,"."url,komentar)"."values('$nama','$email','$url',"."'$komentar')";
mysqli_query($conn,$sql);
$num=mysqli_affected_rows($conn);
if ($num > 0){
?>
<h2>Terima Kasih</h2>
<strong><?php echo $nama; ?></strong>,
komentar anda telah tersimpan.<br/>
[<a href="tampil_data.php">Lihat Daftar Komentar</a>]
<br/> <br/>
<?php
}else{
?>
<hr>error<h2>
Proses pencatatan bukutamu gagal. Silahkan Ulangi!
<br/>
[<a href="tambah_data.php">Kembali ke Form Pencatatan Buku Tamu</a>]
<?php
}
}
?>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama proses_tambah.php dan isikan
form pencatatan buku tamu, kemudian klik kirim, maka pada browser akan muncul hasil sebagai
berikut:
8. Menampilkan Daftar Komentar Tamu, salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 75
Modul Praktikum Pemrograman Web I
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Buku Tamu</title>
</head>
<body>
<h2>Daftar Komentar dalam Buku Tamu</h2>
<?php
require("koneksi.php");
$sql="select nama,email,url,komentar"." from bukutamu";
$result=mysqli_query($conn,$sql);
$num=mysqli_num_rows($result);
if($num > 0){
?>
<table>
<tr bgColor="#ddcc45">
<th width="140">Nama</th>
<th width="200">Emal</th>
<th width="200">URL</th>
<th width="250">Komentar</th>
</tr>
<?php
while(list($nama,$email,$url,$komentar)=mysqli_fetch_array($result)){
?>
<tr>
<td Valign="top"><?php echo $nama; ?></td>
<td Valign="top"><?php echo $email; ?></td>
<td Valign="top"><a href="?php echo $url; ?>"><?php echo $url; ?>
<a/>
</td>
<td Valign="top"><?php echo $komentar; ?></td>
</tr>
<?php
}
?>
</table>
<?php
}else{
?>
<i>Belum ada komentar.</i>
<?php
}
?>
<br/><br/>
<div align="center">
[<a href="tambah_data.php">Isi Buku Tamu</a>]
</div>
</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama tampil_data.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Tugas Praktikum
1. Modifikasi Halaman CRUD Siswa dengan HTML dan CSS, serta gunakan form untuk tambah, ubah
dan hapus, implementasikan HTML dan CSS.
2. Tugas Project
Rekayasa Perangkat Lunak (RPL) 76
Modul Praktikum Pemrograman Web I
MODUL XII
Lanjutan Database dalam PHP
(Pertemuan 13,14)
Tujuan :
1. Mahasiswa dapat memahami dan mengaplikasi pembuatan web yang menggunakan database
MySQL.
2. Mahasiswa dapat memahami dan melakukan koneksi database MySQL dengan web
menggunakan bahasa pemrograman PHP.
3. Mahasiswa dapat menampilkan record data menggunakan bahasa pemrograman PHP.
4. Mahasiswa dapat menambah, mengubah dan menghapus record data dalam database
menggunakan bahasa pemrograman PHP.
KEGIATAN PRAKTIKUM
Membuat CRUD data siswa
1. Buka direktori C > xampp > htdocs, kemudian buat folder dan beri nama “siswa”.
2. Membuat database db_siswa, salin koding dibawah ini :
<?php
$conn = mysqli_connect('localhost','root');
if(mysqli_connect_errno()){
echo"koneksi ke sever gagal";
}
$sql = "CREATE DATABASE db_siswa";
if(mysqli_query($conn, $sql))
{ echo "Database Berhasil dibuat";
} else{ echo "Gagal membuat
Database :".mysqli_error($conn); }
mysqli_close($conn);
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“buat_db.php”, klik Save. Jalankan di browser, pada browser akan muncul hasil sebagai berikut:
3. Membuat koneksi mysql, salin koding dibawah ini :
<?php
$host = "localhost"; // Nama hostnya
$username = "root"; // Username
$password = ""; // Password (Isi jika menggunakan password)
$database = "db_siswa"; // Nama databasenya
$connect = mysqli_connect($host, $username, $password,
$database); // Koneksi ke MySQL
?>
Rekayasa Perangkat Lunak (RPL) 77
Modul Praktikum Pemrograman Web I
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“koneksi.php”, klik Save.
4. Membuat tabel datasiswa, salin koding dibawah ini :
<?php
$dbname='db_kampus';
$host='localhost';
$password='';
$username='root';
//Koneksi Ke MySQL
$cnn = mysqli_connect($host,$username,$password,$dbname);
//Membuat Koneksi
if(!$cnn){
die("Koneksi Failed : ".mysqli_connect_error()); }
//Membuat Tabel
$sql ="CREATE TABLE datasiswa (
nim CHAR(10) NULL,
nama VARCHAR(25) Null,
alamat VARCHAR(50) Null,
telp VARCHAR(15) Null,
constraint pk_datasiswa primary key(nim)
)";
if (mysqli_query($cnn, $sql)){
echo "Table Berhasil di Buat";
} else {
echo "Table Gagal di Buat :".mysqli_error($cnn); }
mysqli_close($cnn);
?>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“buat_tabel.php”, klik Save. Jalankan di browser, pada browser akan muncul hasil sebagai
berikut:
Rekayasa Perangkat Lunak (RPL) 78
Modul Praktikum Pemrograman Web I
5. Membuat halaman index, salin koding dibawah ini :
<html>
<head>
<title>CRUD Data Siswa</title>
</head>
<body>
<h1>Data Siswa</h1>
<a href="form_simpan.php">Tambah Data</a><br><br>
<table border="1" width="100%">
<tr>
<th>Foto</th>
<th>NIS</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Telepon</th>
<th>Alamat</th>
<th colspan="2">Aksi</th>
</tr>
<?php
// Load file koneksi.php
include "koneksi.php";
$query = "SELECT * FROM datasiswa"; // Query untuk menampilkan
semua data siswa
$sql = mysqli_query($connect, $query); // Eksekusi/Jalankan
query dari variabel $query
while($data = mysqli_fetch_array($sql)){ // Ambil semua data
dari hasil eksekusi $sql
echo "<tr>";
echo "<td><img src='images/".$data['foto']."' width='100'
height='100'></td>";
echo "<td>".$data['nis']."</td>";
echo "<td>".$data['nama']."</td>";
echo "<td>".$data['jenis_kelamin']."</td>";
echo "<td>".$data['telp']."</td>";
echo "<td>".$data['alamat']."</td>";
echo "<td><a href='form_ubah.php?nis=".
$data['nis']."'>Ubah</a></td>";
echo "<td><a href='proses_hapus.php?nis=".
$data['nis']."'>Hapus</a></td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“index.php”, klik Save. Jalankan di browser, pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 79
Modul Praktikum Pemrograman Web I
6. Membuat form tambah data, salin koding dibawah ini :
<html>
<head>
<title>CRUD Data Siswa</title>
</head>
<body>
<h1>Tambah Data Siswa</h1>
<form method="post" action="proses_simpan.php" enctype="multipart/form-
data">
<table cellpadding="8">
<tr>
<td>NIS</td>
<td><input type="text" name="nis"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
</td>
</tr>
<tr>
<td>Telepon</td>
<td><input type="text" name="telp"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="alamat"></textarea></td>
</tr>
<tr>
<td>Foto</td>
<td><input type="file" name="foto"></td>
</tr>
</table>
<hr>
<input type="submit" value="Simpan">
<a href="index.php"><input type="button" value="Batal"></a>
</form>
Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“index.php”, klik Save. Jalankan di browser atau klik tambah data, pada browser akan muncul hasil
sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 80
Modul Praktikum Pemrograman Web I
7. Membuat proses simpan, salin koding dibawah ini :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil Data yang Dikirim dari Form
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;
// Proses upload
if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil
diupload atau tidak
// Proses simpan ke Database
$query = "INSERT INTO datasiswa VALUES('".$nis."', '".$nama."', '".
$jenis_kelamin."', '".$telp."', '".$alamat."', '".$fotobaru."')";
$sql = mysqli_query($connect, $query); // Eksekusi/ Jalankan query
dari variabel $query
if($sql){ // Cek jika proses simpan ke database sukses atau tidak
// Jika Sukses, Lakukan :
header("location: index.php"); // Redirect ke halaman index.php
}else{
// Jika Gagal, Lakukan :
echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke
database.";
echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
}
}else{
// Jika gambar gagal diupload, Lakukan :
echo "Maaf, Gambar gagal untuk diupload.";
echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
}
?>
Simpan coding pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“proses_simpan.php”, klik Save. Jalankan di browser atau klik simpan, pada browser akan muncul
hasil sebagai berikut:
8. Membuat form ubah, salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 81
Modul Praktikum Pemrograman Web I
<html>
<head>
<title>CRUD Data Siswa</title>
</head>
<body>
<h1>Ubah Data Siswa</h1>
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data NIS yang dikirim oleh index.php melalui URL
$nis = $_GET['nis'];
// Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
$query = "SELECT * FROM datasiswa WHERE nis='".$nis."'";
$sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query
dari variabel $query
$data = mysqli_fetch_array($sql); // Ambil data dari hasil eksekusi
$sql
?>
<form method="post" action="proses_ubah.php?nis=<?php echo $nis; ?>"
enctype="multipart/form-data">
<table cellpadding="8">
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value="<?php echo $data['nama'];
?>"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<?php
if($data['jenis_kelamin'] == "Laki-laki"){
echo "<input type='radio' name='jenis_kelamin' value='laki-
laki' checked='checked'> Laki-laki";
echo "<input type='radio' name='jenis_kelamin'
value='perempuan'> Perempuan";
}else{
echo "<input type='radio' name='jenis_kelamin' value='laki-
laki'> Laki-laki";
echo "<input type='radio' name='jenis_kelamin'
value='perempuan' checked='checked'> Perempuan";
}
?>
</td>
</tr>
<tr>
<td>Telepon</td>
<td><input type="text" name="telp" value="<?php echo $data['telp'];
?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="alamat"><?php echo $data['alamat'];
?></textarea></td>
</tr>
Rekayasa Perangkat Lunak (RPL) 82
Modul Praktikum Pemrograman Web I
Lanjutan script diatas :
<tr>
<td>Foto</td>
<td>
<input type="checkbox" name="ubah_foto" value="true"> Ceklis
jika ingin mengubah foto<br>
<input type="file" name="foto">
</td>
</tr>
</table>
<hr>
<input type="submit" value="Ubah">
<a href="index.php"><input type="button" value="Batal"></a>
</form>
</body>
</html>
Simpan coding pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“form_ubah.php”, klik Save.
9. Membuat proses ubah, salin koding dibawah ini :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data NIS yang dikirim oleh form_ubah.php melalui URL
$nis = $_GET['nis'];
// Ambil Data yang Dikirim dari Form
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
// Cek apakah user ingin mengubah fotonya atau tidak
if(isset($_POST['ubah_foto'])){ // Jika user menceklis checkbox yang ada
di form ubah, lakukan :
// Ambil data foto yang dipilih dari form
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;
// Proses upload
if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil
diupload atau tidak
// Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
$query = "SELECT * FROM datasiswa WHERE nis='".$nis."'";
$sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query
dari variabel $query
$data = mysqli_fetch_array($sql); // Ambil data dari hasil eksekusi
$sql
// Cek apakah file foto sebelumnya ada di folder images
if(is_file("images/".$data['foto'])) // Jika foto ada
unlink("images/".$data['foto']); // Hapus file foto
sebelumnya yang ada di folder images
Rekayasa Perangkat Lunak (RPL) 83
Modul Praktikum Pemrograman Web I
Lanjutan script diatas :
// Proses ubah data ke Database
$query = "UPDATE datasiswa SET nama='".$nama."', jenis_kelamin='".
$jenis_kelamin."', telp='".$telp."', alamat='".$alamat."', foto='".
$fotobaru."' WHERE nis='".$nis."'";
$sql = mysqli_query($connect, $query); // Eksekusi/ Jalankan query
dari variabel $query
if($sql){ // Cek jika proses simpan ke database sukses atau tidak
// Jika Sukses, Lakukan :
header("location: index.php"); // Redirect ke halaman
index.php
}else{
// Jika Gagal, Lakukan :
echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan
data ke database.";
echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
}
}else{
// Jika gambar gagal diupload, Lakukan :
echo "Maaf, Gambar gagal untuk diupload.";
echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
}
}else{ // Jika user tidak menceklis checkbox yang ada di form ubah,
lakukan :
// Proses ubah data ke Database
$query = "UPDATE datasiswa SET nama='".$nama."', jenis_kelamin='".
$jenis_kelamin."', telp='".$telp."', alamat='".$alamat."' WHERE nis='".
$nis."'";
$sql = mysqli_query($connect, $query); // Eksekusi/ Jalankan query
dari variabel $query
if($sql){ // Cek jika proses simpan ke database sukses atau tidak
// Jika Sukses, Lakukan :
header("location: index.php"); // Redirect ke halaman index.php
}else{
// Jika Gagal, Lakukan :
echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke
database.";
echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
}
}
?>
Simpan coding pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“proses_ubah.php”, klik Save. Jalankan di browser atau klik aksi ubah, pada browser akan muncul hasil
sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 84
Modul Praktikum Pemrograman Web I
10. Melakukan proses hapus, salin koding dibawah ini :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data NIS yang dikirim oleh index.php melalui URL
$nis = $_GET['nis'];
// Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
$query = "SELECT * FROM datasiswa WHERE nis='".$nis."'";
$sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari
variabel $query
$data = mysqli_fetch_array($sql); // Ambil data dari hasil eksekusi $sql
// Cek apakah file fotonya ada di folder images
if(is_file("images/".$data['foto'])) // Jika foto ada
unlink("images/".$data['foto']); // Hapus foto yang telah diupload
dari folder images
// Query untuk menghapus data siswa berdasarkan NIS yang dikirim
$query2 = "DELETE FROM datasiswa WHERE nis='".$nis."'";
$sql2 = mysqli_query($connect, $query2); // Eksekusi/Jalankan query dari
variabel $query
if($sql2){ // Cek jika proses simpan ke database sukses atau tidak
// Jika Sukses, Lakukan :
header("location: index.php"); // Redirect ke halaman index.php
}else{
// Jika Gagal, Lakukan :
echo "Data gagal dihapus. <a href='index.php'>Kembali</a>";
}
?>
Simpan coding pada direktori C > xampp > htdocs > siswa, dan beri nama file dengan
“proses_hapus.php”, klik Save. Jalankan di browser atau klik aksi hapus, pada browser akan muncul
halaman index dan data siswa kosong, sehinga anda bisa melakukan kembali proses tamba, ubah data.
TUGAS PRAKTIKUM
1. Buatlah Login untuk Siswa
2. Modifikasi Halaman CRUD Siswa dengan HTML dan CSS, serta gunakan form untuk tambah, ubah
dan hapus, implementasikan HTML dan CSS.
3. Tugas Project
MODUL XIII
Pemrograman Berorientasi Obyek dalam PHP
(Pertemuan 15)
Tujuan :
1. Mahasiswa dapat memahami pemrograman berorientasi objek dalam pemrograman PHP dan
dapat mengaplikasikannya dalam pembuatan web.
2. Mahasiswa dapat memahami object dan class dan dapat mengaplikasikannya dalam
pembuatan web menggunakan bahasa pemrograman PHP
Rekayasa Perangkat Lunak (RPL) 85
Modul Praktikum Pemrograman Web I
3. Mahasiswa dapat memahami properti dan method yang ada di pemprograman PHP
berorientasi objek dan dapat mengaplikasikannya dalam pembuatan web.
DASAR TEORI
Pemprograman berorientasi objek atau object-oriented progreming (OOP) adalah pemprograman
yang didasarkan pada objek dunia nyata. Objek-objek dalam OOP memiliki proses yang berbeda-beda.
Adapun konsep dasar OOP ialah:
Encapsulation (pengkapsulan) adalah penyatuan antara proses-proses yang terjadi dan
sejumlah data yang dikelola kedalam suatu bentuk kelompok tertentu.
Inheritance (pewaris) adalah merupakan konsep dimana suatu objek memiliki sejumlah
perilaku yang dimiliki oleh objek lain dalam suatu hirarki tertentu.
Polymorphism adalah konsep dimana beberapa objek dapat memiliki metode yang sama
dengan aksi yang berbeda.
1. Object dan Class
Object biasanya adalah suatu benda yang dikenai pekerjaan bisa berupa orang, rumah, benda dan
lain sebagainya. Object juga bisa berupa benda abstrak seperti accont bank, file, data atau variabel
yang dapat diproses. Contoh:
$andi = new nama_class();
Sedangkan class adalah penjelasan atau deskripsi dari object, andaikan bila objec adalah sebuah
variabel maka class adalah sebuah tipedata. Di dalam class, terdapat penjelasan tentang suatu object
termasuk properties yang dimiliki serta kelakuan atau method yang bisa dilakukan oleh object. Dalam
pemprograman PHP class didescripsikan sebagai berikut:
Class nama_class
{
//Sintak deklarasi dan definisi properties dan method
}
2. Properti dan Method
Setiap objek memiliki properties yang kadang disebut juga dengan attribut. Contoh sebuah mobil
memiliki warna, merk, jenis dan sebagainya. Property di letakkan di dalam class, dimana poperties
dinyatakan dengan sebuah variabel dan diawali dengan visibility keyword (seperti “public”,
“protected”, “private”) atau kata “var”, misal $warna, $merk, $jenis dan sebagainya. Contoh:
Class Mobil{
Var $warna;
Var $merk;
Var $jenis;
}
Rekayasa Perangkat Lunak (RPL) 86
Modul Praktikum Pemrograman Web I
Sedangkan method merupakan suatu kemampuan yang dimikiki sebuah objek untuk melaksanakan
tugas, contoh sebuah mobil dapa bergerak maju, bergerak mundur, mengisi bensin dan sebagainya.
Contoh:
Class Mobil{
Var $bensin;
function maju(){
$this->bensin = $this->bensin - 2; // menseting properti
}
function mundur(){
$this->bensin = $this->bensin - 1; // menseting properti
}
function isibensin($tambah){
$this->bensin = $this->bensin + $tambah;
}
function sisabensin(){
return $this->bensin;
}
}
Untuk memanggil method dari sebuah kelas, kita hanya perlu menggunakan tanda ->. Contoh :
$mobil1 = new Mobil
$mobil1->isibensin(6); // memanggil method isibensin()
$mobil1->maju(); // memanggil method maju()
$mobil1->mundur(); // memanggil method mundur()
Dengan adanya pemprograman berorientasi objec atau OOP dalam PHP, kita dapat lebih mudah
berbagi teknik progreming. Kita dapat membuat suatu class dan progremer lain dapat dengan mudah
menggunakannya tanpa perlu mengetahui proses jalannya class tersebut.
KEGIATAN PRAKTIKUM
1. Program Class Mobil, salin koding dibawah ini :
Rekayasa Perangkat Lunak (RPL) 87
Modul Praktikum Pemrograman Web I
<?php
class Mobil{
var $bensin;
function maju(){
//aksi maju menghabiskan 2 liter
$this->bensin = $this->bensin - 2;
}
function mundur(){
//aksi mundur menghabiskan 1 liter
$this->bensin = $this->bensin - 1;
}
function isibensin($tambah){
$this->bensin = $this->bensin + $tambah;
}
function sisabensin(){
return $this->bensin;
}
}
$mobil1 = new Mobil();
$mobil1->isibensin(6);
echo "Mobil melakukan isi bensin. Sisa bensin : ",
$mobil1->sisabensin()," Liter<br/>";
$mobil1->maju();
echo "Mobil melakukan aksi Maju. Sisa Bensin : ",
$mobil1->sisabensin()," Liter<br/>";
$mobil1->mundur();
echo "Mobil melakukan aksi Mundur. Sisa Bensin : ",
$mobil1->sisabensin()," Liter<br/>";
$mobil1->isibensin(6);
echo "Mobil melakukan isi bensin. Sisa bensin : ",
$mobil1->sisabensin()," Liter<br/>";
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama class_mobil.php dan jalankan di
browser. Maka pada browser akan muncul hasil sebagai berikut:
Rekayasa Perangkat Lunak (RPL) 88
Modul Praktikum Pemrograman Web I
2. Program Class Biodata, salin koding dibawah ini :
<?php
class Biodata{
var $nama;
function setnama($namamhs){
$this->nama = $namamhs;
}
function getnama(){
echo "Nama : ", $this->nama;
}
function setnim($nimmhs){
$this->nim = $nimmhs;
}
function getnim(){
echo "NIM : ", $this->nim;
}
function setalamat($alamatmhs){
$this->alamat = $alamatmhs;
}
function getalamat(){
echo "Alamat : ",$this->alamat;
}
function settgllahir($tgllahirmhs){
$this->tgllahir = $tgllahirmhs;
}
function gettgllahir(){
echo "Tanggal Lahir : ", $this->tgllahir;
}
}
$mhs1 = new Biodata();
$mhs1->setnama("Dwi Putri Rahayu");
echo $mhs1->getnama()."</br>";
$mhs1->setnim("10101259");
echo $mhs1->getnim()."</br>";
$mhs1->setalamat("Jl.Raya Pemogan");
echo $mhs1->getalamat()."</br>";
$mhs1->settgllahir("21 Januari 1992");
echo $mhs1->gettgllahir()."</br>";
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama class_biodata.php dan jalankan
di browser. Maka pada browser akan muncul hasil sebagai berikut:
TUGAS
Buatlah program yang didalamnya terdapat class untuk membuat form input sederhana mengenai daftar
mahasiswa dikelas anda.
Rekayasa Perangkat Lunak (RPL) 89
Anda mungkin juga menyukai
- Bagian 6 - Pemrograman Web Dan Perangkat BergerakBelum ada peringkatBagian 6 - Pemrograman Web Dan Perangkat Bergerak8 halaman
- Modul Interaksi Manusia Dan KomputerBelum ada peringkatModul Interaksi Manusia Dan Komputer49 halaman
- Modul Praktikum 03 - Dasar Pemrograman WebBelum ada peringkatModul Praktikum 03 - Dasar Pemrograman Web10 halaman
- Modul 2 Menerapkan Format Pada Teks Pada Halaman Web PDFBelum ada peringkatModul 2 Menerapkan Format Pada Teks Pada Halaman Web PDF3 halaman
- Belajar Dasar Dasar Dan Contoh Pada HTMLBelum ada peringkatBelajar Dasar Dasar Dan Contoh Pada HTML23 halaman
- Bahasa Pemrograman HTML & JS - Modul 2Belum ada peringkatBahasa Pemrograman HTML & JS - Modul 225 halaman
- Panduan Lengkap Belajar HTML untuk Pemula 2024Belum ada peringkatPanduan Lengkap Belajar HTML untuk Pemula 202410 halaman
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakBelum ada peringkatMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak9 halaman
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakBelum ada peringkatMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak9 halaman
- Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0Dari EverandMari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
- Modul 2 Menerapkan Format Pada Teks Pada Halaman Web PDFModul 2 Menerapkan Format Pada Teks Pada Halaman Web PDF
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak
- Membuat Aplikasi Bisnis Menggunakan Visual Studio Lightswitch 2013Dari EverandMembuat Aplikasi Bisnis Menggunakan Visual Studio Lightswitch 2013