Modul Kelas 6 Revisi
Diunggah oleh
RAS E-SportModul Kelas 6 Revisi
Diunggah oleh
RAS E-SportModul Praktikum Kelas 6
MODUL I
HTML
Tujuan :
1. Murid dapat mengenal dasar-dasar HTML
2. Murid dapat menguasai dasar-dasar HTML
3. Murid dapat mengenal dan memahami blok program HTML
4. Murid dapat memahami setiap object sebagai dasar pembuatan interface
pada halaman browser
5. Murid 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
SD Islam Al Azhar 30 Bandung 1
Modul Praktikum Kelas 6
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 :
<!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 "/").
SD Islam Al Azhar 30 Bandung 2
Modul Praktikum Kelas 6
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>
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>.
SD Islam Al Azhar 30 Bandung 3
Modul Praktikum Kelas 6
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
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>
SD Islam Al Azhar 30 Bandung 4
Modul Praktikum Kelas 6
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
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
SD Islam Al Azhar 30 Bandung 5
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 6
Modul Praktikum Kelas 6
<!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.
SD Islam Al Azhar 30 Bandung 7
Modul Praktikum Kelas 6
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:
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
SD Islam Al Azhar 30 Bandung 8
Modul Praktikum Kelas 6
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.
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 :
SD Islam Al Azhar 30 Bandung 9
Modul Praktikum Kelas 6
<!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.
SD Islam Al Azhar 30 Bandung 10
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 11
Modul Praktikum Kelas 6
MODUL II
CSS
Tujuan :
1. Murid dapat mengenal dasar-dasar CSS
2. Murid dapat menguasai dasar-dasar CSS
3. Murid dapat memahami setiap object sebagai dasar pembuatan interface pada
halaman browser
4. Murid 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
SD Islam Al Azhar 30 Bandung 12
Modul Praktikum Kelas 6
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).
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 :
SD Islam Al Azhar 30 Bandung 13
Modul Praktikum Kelas 6
<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’>
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 :
SD Islam Al Azhar 30 Bandung 14
Modul Praktikum Kelas 6
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;
SD Islam Al Azhar 30 Bandung 15
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 16
Modul Praktikum Kelas 6
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 :
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
SD Islam Al Azhar 30 Bandung 17
Modul Praktikum Kelas 6
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
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;
SD Islam Al Azhar 30 Bandung 18
Modul Praktikum Kelas 6
}
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 :
SD Islam Al Azhar 30 Bandung 19
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 20
Modul Praktikum Kelas 6
<!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.
SD Islam Al Azhar 30 Bandung 21
Modul Praktikum Kelas 6
Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N, kemudian
salin koding dibawah ini :
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.
SD Islam Al Azhar 30 Bandung 22
Modul Praktikum Kelas 6
Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/index.html
TUGAS PRAKTIKUM
Gunakan CSS untuk memperindah tampilan tugas pada modul 1
SD Islam Al Azhar 30 Bandung 23
Modul Praktikum Kelas 6
MODUL III
Struktur Dasar PHP
Tujuan :
1. Murid dapat memahami struktur dasar php dan dapat mengaplikasikannya dalam
pembuatan program sederhana.
2. Murid dapat mengetahui blok program php dan memulai pembuatan program php.
3. Murid dapat memahami dan mengaplikasikan pembuatan variabel di PHP.
4. Murid dapat memahami penggunaan tipe data yang ada di PHP dan mampu
mengaplikasikannya.
5. Murid 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”; ?>
SD Islam Al Azhar 30 Bandung 24
Modul Praktikum Kelas 6
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.
SD Islam Al Azhar 30 Bandung 25
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 26
Modul Praktikum Kelas 6
operasi dijalankan
-- $a-- Operasi dijalankan, lalu
$a dikurangi satu
Penggabungan String
String . $a . $b $a
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
SD Islam Al Azhar 30 Bandung 27
Modul Praktikum Kelas 6
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
6. Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N
7. Tuliskan coding berikut
SD Islam Al Azhar 30 Bandung 28
Modul Praktikum Kelas 6
<!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.
SD Islam Al Azhar 30 Bandung 29
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 30
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 31
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 32
Modul Praktikum Kelas 6
MODUL IV
Pernyataan Kondisi
Tujuan
1. Murid dapat memahami dan membuat pernyataan kondisi dalam bahasa pemrograman
php dan dapat mengaplikasikannya dalam pembuatan program php.
2. Murid dapat memahami dan mengaplikasikan pernyataan kondisi If dalam pemrograman
PHP.
3. Murid dapat memahami dan mengaplikasikan pernyataan kondisi If-Else dalam
pemrograman PHP.
4. Murid 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:
SD Islam Al Azhar 30 Bandung 33
Modul Praktikum Kelas 6
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 :
SD Islam Al Azhar 30 Bandung 34
Modul Praktikum Kelas 6
<?php
$nilai = 70;
if ($nilai >= 60) {
echo "Anda Lulus dengan Nilai $nilai";
}
?>
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.
SD Islam Al Azhar 30 Bandung 35
Modul Praktikum Kelas 6
4. Buka notepad++, buat file baru New atau Ctrl+N , kemudian Salin coding di bawah ini:
<?php
$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 sekolah, 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
SD Islam Al Azhar 30 Bandung 36
Modul Praktikum Kelas 6
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.
SD Islam Al Azhar 30 Bandung 37
Modul Praktikum Kelas 6
MODUL V
Pernyataan Perulangan
(Pertemuan 5)
Tujuan :
1. Murid dapat memahami dan membuat pernyataan perulangan dalam bahasa
pemrograman php dan dapat mengaplikasikannya dalam pembuatan program php.
2. Murid dapat memahami dan mengaplikasikan pernyataan perulangan For dalam
pemrograman PHP.
3. Murid 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 :
SD Islam Al Azhar 30 Bandung 38
Modul Praktikum Kelas 6
for (nilai_awal; nilai_akhir; penambahan atau pengurangan nilai){
Operasi;
}
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:
SD Islam Al Azhar 30 Bandung 39
Modul Praktikum Kelas 6
2. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$bil = 1;
while ($bil <= 3)
{
echo $bil. "<br />";
$bil++;
}
echo "Nilai bilangan sekarang adalah:".$bil;
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan_2.php dan
jalankan di browser.
3. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$bil = 5;
while ($bil <= 100)
{
if ($bil % 10 == 0) echo $bil. "<br />";
$bil++;
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan_3.php dan
jalankan di browser.
4. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$bil = 5;
while ($bil <= 100)
{
if ($bil % 10 == 0) echo $bil. "<br />";
$bil++;
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan_3.php dan
jalankan di browser.
SD Islam Al Azhar 30 Bandung 40
Modul Praktikum Kelas 6
5. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$bilangan = 0;
for ($a=1; $a<=5; $a++){
echo "Bilangan Sekarang adalah $bilangan <br>";
$bilangan = $bilangan + $a;
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan_5.php dan
jalankan di browser.
6. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
for ($a = 1; $a <=3; $a++)
{
for ($b = 1; $b <= 2; $b++)
{
echo "Nilai a = ".$a. " Nilai b = ".$b. "<br />";
}
}
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan_5.php dan
jalankan di browser.
7. Buka notepad++, buat file baru New atau Ctrl+N, kemudian Salin Koding Dibawah ini :
<?php
$d = 1;
do{
echo "Perulangan ke-$d <br>";
$d++;
}while($d <= 5);
?>
Setelah selesai mengetik coding di atas, maka simpan dengan nama perulangan_6.php dan
jalankan di browser.
TUGAS
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.
SD Islam Al Azhar 30 Bandung 41
Modul Praktikum Kelas 6
3. Buatlah program menggunakan pernyataan perulangan untuk mencari banyaknya
bilangan bulat mulai dari 3 s/d 127 yang merupakan kelipatan 6.
SD Islam Al Azhar 30 Bandung 42
Modul Praktikum Kelas 6
MODUL VI
Array
Tujuan
1. Murid dapat memahami dan mengaplikasikan array dalam PHP dalam pemrograman
web.
2. Murid dapat mengetahui cara pendeklarasian array menggunakan bahasa pemrograman
PHP dan mengaplikasikannya dalam pembuatan web.
3. Murid dapat memahami dan melakukan pengolahan data array menggunakan bahasa
pemrograman PHP.
4. Murid 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)
SD Islam Al Azhar 30 Bandung 43
Modul Praktikum Kelas 6
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 :
$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
SD Islam Al Azhar 30 Bandung 44
Modul Praktikum Kelas 6
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 :
- 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 ( )
SD Islam Al Azhar 30 Bandung 45
Modul Praktikum Kelas 6
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/>";
}
?>
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 :
SD Islam Al Azhar 30 Bandung 46
Modul Praktikum Kelas 6
<?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:
SD Islam Al Azhar 30 Bandung 47
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 48
Modul Praktikum Kelas 6
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!
SD Islam Al Azhar 30 Bandung 49
Modul Praktikum Kelas 6
MODUL VII
Form
Tujuan
1. Murid dapat memahami dan mengaplikasikan form dalam pemrograman web dan dapat
melakukan pengolahan data menggunakan bahasa pemrograman PHP.
2. Murid 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:
SD Islam Al Azhar 30 Bandung 50
Modul Praktikum Kelas 6
<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>
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()
SD Islam Al Azhar 30 Bandung 51
Modul Praktikum Kelas 6
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:
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.
SD Islam Al Azhar 30 Bandung 52
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 53
Modul Praktikum Kelas 6
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 :
SD Islam Al Azhar 30 Bandung 54
Modul Praktikum Kelas 6
<?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 :
SD Islam Al Azhar 30 Bandung 55
Modul Praktikum Kelas 6
<!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:
SD Islam Al Azhar 30 Bandung 56
Modul Praktikum Kelas 6
Bila tombol Proses di tekan, maka muncul hasil :
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:
SD Islam Al Azhar 30 Bandung 57
Modul Praktikum Kelas 6
Bila tombol Proses di tekan, maka muncul hasil :
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:
SD Islam Al Azhar 30 Bandung 58
Modul Praktikum Kelas 6
Bila tombol Proses di tekan, maka muncul hasil :
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'];
}
}
?>
SD Islam Al Azhar 30 Bandung 59
Modul Praktikum Kelas 6
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:
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!
SD Islam Al Azhar 30 Bandung 60
Modul Praktikum Kelas 6
MODUL VIII
Function
Tujuan :
1. Murid dapat memahami dan mengaplikasikan fungsi dalam pembuatan web
menggunakan bahasa pemrograman PHP.
2. Murid dapat mengetahui cara pendeklarasian array menggunakan bahasa
pemrograman PHP dan mengaplikasikannya dalam pembuatan web.
3. Murid dapat memahami dan melakukan pengolahan data array menggunakan
bahasa pemrograman PHP
4. Murid 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
SD Islam Al Azhar 30 Bandung 61
Modul Praktikum Kelas 6
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;
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 :
SD Islam Al Azhar 30 Bandung 62
Modul Praktikum Kelas 6
?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:
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.
SD Islam Al Azhar 30 Bandung 63
Modul Praktikum Kelas 6
MODUL IX
Session dan Cookies
Tujuan :
1. Murid dapat memahami dan mengaplikasi penggunaan session dan cookies dalam
pembuatan web menggunakan bahasa pemrograman PHP.
2. Murid dapat memahami dan mengaplikasikan pembuatan, penggunaan dan
penghapusan session dalam pemrograman PHP.
3. Murid 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.
Untuk mengambil atau menentukan identitas sebuah session
Session_id() (session id).
2. Cookies
SD Islam Al Azhar 30 Bandung 64
Modul Praktikum Kelas 6
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.
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>
SD Islam Al Azhar 30 Bandung 65
Modul Praktikum Kelas 6
Setelah selesai mengetik coding di atas, maka simpan dengan nama proses_login.php dan
buka file baru dan salin coding di bawah ini :
<?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 :
SD Islam Al Azhar 30 Bandung 66
Modul Praktikum Kelas 6
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{
SD Islam Al Azhar 30 Bandung 67
Modul Praktikum Kelas 6
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 :
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:
SD Islam Al Azhar 30 Bandung 68
Modul Praktikum Kelas 6
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
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
SD Islam Al Azhar 30 Bandung 69
Modul Praktikum Kelas 6
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.
SD Islam Al Azhar 30 Bandung 70
Modul Praktikum Kelas 6
MODUL X
Database dalam PHP
(Pertemuan 11)
Tujuan :
1. Murid dapat memahami dan mengaplikasi pembuatan web yang menggunakan
database MySQL.
2. Murid dapat memahami dan melakukan koneksi database MySQL dengan web
menggunakan bahasa pemrograman PHP
3. Murid dapat menampilkan record data menggunakan bahasa pemrograman PHP
4. Murid 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,
SD Islam Al Azhar 30 Bandung 71
Modul Praktikum Kelas 6
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
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 berikut:
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 murid(nim char(7), nama varchar(20), nilai int(),…);
SD Islam Al Azhar 30 Bandung 72
Modul Praktikum Kelas 6
Dari query di atas membuat perintah untuk membuah tabel bernama murid
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 murid (nis, nama, nilai, … ) VALUES (“1112134”, “Dewi”, 90, …);
Update
Update adalah printah query SQL untuk memodifikasi atau merubah data pada
database.
Adapun bentuk penulisannya ialah:
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 murid 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 murid WHERE nim = „1112134‟;
SD Islam Al Azhar 30 Bandung 73
Modul Praktikum Kelas 6
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 murid 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";
}
?>
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 :
SD Islam Al Azhar 30 Bandung 74
Modul Praktikum Kelas 6
<?php
$conn = mysqli_connect('localhost','root');
if(mysqli_connect_errno()){
echo"koneksi ke sever gagal";
}
$sql = "CREATE DATABASE db_sekolah";
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_sekolah';
$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 murid (
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);
?>
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:
SD Islam Al Azhar 30 Bandung 75
Modul Praktikum Kelas 6
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_sekolah");
}
$nim = "10101111";
$nama = "Bona Boni";
$alamat = "Jl. Tukad Pakerisan No. 97";
$telp = "087655333333";
$query = "select * from murid";// memilih mengakses db_sekolah
$sql = "INSERT INTO murid (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:
SD Islam Al Azhar 30 Bandung 76
Modul Praktikum Kelas 6
5. Program Update Data, salin koding dibawah ini :
<?php
$cnn = mysqli_connect('localhost','root','','db_sekolah');
if(!$cnn){
echo "Koneksi Gagal <br/>";
}else{
echo "Koneksi Berhasil <br/>";
}
mysqli_select_db($cnn,"db_sekolah");
$sql = "UPDATE murid 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 :
SD Islam Al Azhar 30 Bandung 77
Modul Praktikum Kelas 6
<?php
$cnn = mysqli_connect('localhost','root','','db_sekolah');
if(!$cnn){
echo "Koneksi Gagal <br/>";
}else{
echo "Koneksi Berhasil <br/>";
}
mysqli_select_db($cnn,"db_sekolah");
$sql = "SELECT nim, nama, alamat, telp FROM murid;";
$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:
7. Program Delete Data, salin koding dibawah ini :
<?php
$cnn = mysqli_connect('localhost','root','','db_sekolah');
if(!$cnn){
echo "Koneksi Gagal <br/>";
}else{
echo "Koneksi Berhasil <br/>";
}
mysqli_select_db($cnn,"db_sekolah");
$sql = "DELETE FROM murid where nim ='10101111';";
$hapus = mysqli_query($cnn,$sql);
if (!$hapus){
echo "Data GAGAL Dihapus <br/>";
}else{
echo "Data BERHASIL Dihapus <br/>";
}
?>
SD Islam Al Azhar 30 Bandung 78
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 79
Modul Praktikum Kelas 6
MODUL XI
Lanjutan Database dalam PHP
Tujuan :
1. Murid dapat memahami dan mengaplikasi pembuatan web yang menggunakan
database MySQL.
2. Murid dapat memahami dan melakukan koneksi database MySQL dengan web
menggunakan bahasa pemrograman PHP
3. Murid dapat menampilkan record data menggunakan bahasa pemrograman PHP
4. Murid 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 :
SD Islam Al Azhar 30 Bandung 80
Modul Praktikum Kelas 6
<?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:
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 :
SD Islam Al Azhar 30 Bandung 81
Modul Praktikum Kelas 6
<!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:
6. Tambah buku tamu, salin koding dibawah ini :
SD Islam Al Azhar 30 Bandung 82
Modul Praktikum Kelas 6
<!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 :
SD Islam Al Azhar 30 Bandung 83
Modul Praktikum Kelas 6
<!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 :
SD Islam Al Azhar 30 Bandung 84
Modul Praktikum Kelas 6
<!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:
SD Islam Al Azhar 30 Bandung 85
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 86
Modul Praktikum Kelas 6
MODUL XII
Lanjutan Database dalam PHP
Tujuan :
1. Murid dapat memahami dan mengaplikasi pembuatan web yang menggunakan database
MySQL.
2. Murid dapat memahami dan melakukan koneksi database MySQL dengan web
menggunakan bahasa pemrograman PHP.
3. Murid dapat menampilkan record data menggunakan bahasa pemrograman PHP.
4. Murid 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 :
SD Islam Al Azhar 30 Bandung 87
Modul Praktikum Kelas 6
<?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
?>
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_sekolah';
$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:
SD Islam Al Azhar 30 Bandung 88
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 89
Modul Praktikum Kelas 6
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>
</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 atau klik tambah data, pada browser akan muncul
hasil sebagai berikut:
SD Islam Al Azhar 30 Bandung 90
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 91
Modul Praktikum Kelas 6
8. Membuat form ubah, salin koding dibawah ini :
SD Islam Al Azhar 30 Bandung 92
Modul Praktikum Kelas 6
<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>
SD Islam Al Azhar 30 Bandung 93
Modul Praktikum Kelas 6
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 :
SD Islam Al Azhar 30 Bandung 94
Modul Praktikum Kelas 6
<?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
SD Islam Al Azhar 30 Bandung 95
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 96
Modul Praktikum Kelas 6
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.
SD Islam Al Azhar 30 Bandung 97
Modul Praktikum Kelas 6
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
SD Islam Al Azhar 30 Bandung 98
Modul Praktikum Kelas 6
MODUL XIII
Pemrograman Berorientasi Obyek dalam PHP
Tujuan :
1. Murid dapat memahami pemrograman berorientasi objek dalam pemrograman PHP
dan dapat mengaplikasikannya dalam pembuatan web.
2. Murid dapat memahami object dan class dan dapat mengaplikasikannya dalam
pembuatan web menggunakan bahasa pemrograman PHP
3. Murid 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:
SD Islam Al Azhar 30 Bandung 99
Modul Praktikum Kelas 6
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;
}
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()
SD Islam Al Azhar 30 Bandung 100
Modul Praktikum Kelas 6
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 :
<?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:
SD Islam Al Azhar 30 Bandung 101
Modul Praktikum Kelas 6
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:
SD Islam Al Azhar 30 Bandung 102
Modul Praktikum Kelas 6
TUGAS
Buatlah program yang didalamnya terdapat class untuk membuat form input sederhana
mengenai daftar murid dikelas anda.
SD Islam Al Azhar 30 Bandung 103
Modul Praktikum Kelas 6
MODUL XIII
Broadcasting
Tujuan
1. Murid dapat melakukan kegiatan yang bermanfaat dalam menggunakan internet secara
produktif
2. Murid dapat menjadi content creator/live streamer atau podcaster dengan membuat sebuah
channel/program pada platform digital seperti YouTube dsb.
3. Murid memiliki kemampuan tampil di depan umum dan meningkatkan kepercayaan diri
4. Mampu mendatangkan keuntungan finansial dengan memanfaatkan internet untuk kegiatan
yang produktif
Dasar Teoiri
BROADCASTING MENGGUNAKAN APLIKASI OBS STUDIO
Aplikasi OBS Studio dapat digunakan untuk melakukan Broadcasting untuk kebutuhan belajar
mengajar. OBS Studio merupakan aplikasi video recording dan live streaming yang gratis serta
open source. Gratis artinya aplikasi ini bebas kita download dan kita gunakan. Open source
artinya aplikasi ini dilengkapi dengan source code-nya sehingga kita dapat berkontribusi untuk
melakukan pengembangan.
Keunggulan OBS adalah:
1. Performa yang baik melakukan capture dan mixing video atau audio secara real time.
Membuat scenes yang terdiri dari banyak sumber termasuk capture window, images, text,
browser windows, webcam, capture card dan lain lain.
2. Jumlah scene yang tidak dibatasi dan dapat dialihkan dari satu scene ke scene yang lain
dengan mulus menggunakan transisi khusus.
SD Islam Al Azhar 30 Bandung 104
Modul Praktikum Kelas 6
3. Audio mixer yang dapat menfilter suara seperti noise gate, noise suppression, dan gain. Dan
dapat mengendalikan secara penuh dengan dukungan plugin VST.
4. Opsi konfigurasi yang powerful dan mudah digunakan. Menambah Sources baru,
menduplikasi yang sudah ada, dan mengatur propertiesnya dengan mudah.
5. Panel Pengaturan yang Efisien memberi Anda akses ke beragam opsi konfigurasi untuk
mengubah setiap aspek siaran (broadcast) atau rekaman Anda.
6. UI ‘Dock’ modular memungkinkan Anda mengatur ulang tata letak persis seperti yang Anda
inginkan. Anda bahkan dapat mengeluarkan setiap Dock individual ke jendelanya sendiri.
SD Islam Al Azhar 30 Bandung 105
Modul Praktikum Kelas 6
Penggunaan OBS STUDIO untuk Live Streaming.
1. Buka aplikasi OBS dan game yang ingin kamu mainkan.
• Kamu juga bisa membuka game nanti ketika mau memilih sumber tayangan (langkah
no. 11).
• Untuk memudahkan perpindahan antar aplikasi, mungkin kamu bisa memilih tampilan
game dengan setelan ‘window‘ atau ‘windowed fullscreen‘ di dalam game.
2. Buat ‘Profile’ baru: Klik Profile > New di bilah Menu atas OBS, lalu beri nama ‘Profile’ baru
itu. Profile berguna untuk membedakan setelan untuk keperluan berbeda.
3. Pilih ‘Optimize for streaming, recording is secondary’ pada bagian ‘Usage Information’.
Artinya kamu mengutamakan proses OBS untuk melakukan streaming (ya, kamu bisa
streaming dan merekam/recording sekaligus).
SD Islam Al Azhar 30 Bandung 106
Modul Praktikum Kelas 6
4. Tentukan besar resolusi kanvas dan FPS (frame per second) dari pilihan yang ada. Kanvas
merupakan bidang yang tampak saat streaming.
5. Pilih layanan media untuk streaming (Twitch, YouTube, Facebook Live, dll). Untuk tutorial ini
kami memakai Facebook Live sebagai contoh. Kamu akan diminta memasukkan ‘stream key‘
dari Facebook-mu.
SD Islam Al Azhar 30 Bandung 107
Modul Praktikum Kelas 6
6. Sekarang kamu buka halaman Facebook Live Producer di profil atau halaman bisnis milikmu.
• Personal: facebook.com/live/producer; Halaman bisnis: Buka halaman bisnis di
Facebook > Buat Siaran Langsung
• Di bagian Penyiapan Siaran Langsung (Live Stream Setup), salin kode yang ada di Stream
Key.
SD Islam Al Azhar 30 Bandung 108
Modul Praktikum Kelas 6
7. Masukkan Stream Key di OBS.
8. OBS akan menguji koneksi ke Facebook Live dengan mengunggah video acak (gambar putih
dengan noise). Kalau koneksi Stream Key benar, kamu juga akan melihatnya di jendela
preview live stream di Facebook.
SD Islam Al Azhar 30 Bandung 109
Modul Praktikum Kelas 6
9. Jika semua lancar, klik ‘Apply Setting’. Tambahkan ‘Scene’ baru dengan klik tanda [+] di
kotak kiri bawah. Lalu beri nama.
10. Pilih sumber input media dari kotak ‘Sources’.
• Input media ini bisa berupa tampilan game di layar, kamera webcam atau eksternal,
microfon eksternal, dll (di sini kami hanya memakai webcam dan microfon bawaan
laptop).
• Untuk layar game, kamu bisa memilih:
SD Islam Al Azhar 30 Bandung 110
Modul Praktikum Kelas 6
• Display Capture – Berdasar monitor/layar. Berguna kalau kamu punya monitor/layar
lain.
11. Pilih jendela dan nama aplikasi/game.
• Tentukan ‘Mode’ – Pilih ‘Capture specific window’ untuk menangkap jendela aplikasi
tertentu.
• Pilih game yang kamu mainkan. Di sini kami coba dengan Valorant.
SD Islam Al Azhar 30 Bandung 111
Modul Praktikum Kelas 6
12. Jika berhasil, kamu akan melihat tampilan game di preview OBS.
13. Jika kamu ingin menampilkan wajahmu di layar streaming, kamu bisa mengulang langkah
nomor 11. Tapi kali ini kamu memilih ‘Video Capture Device’ sebagai sumber. Pilih webcam
laptop sebagai sumber.
• Kamu bisa mengubah ukuran tampilan dengan menggeser sudut dan sisi tampilan.
• Kalau mau crop (misal bikin bentuk kotak), klik kanan ‘Video Capture Device’ >
Transform >Edit Transform. Lalu masukan besar potongan di kotak crop.
SD Islam Al Azhar 30 Bandung 112
Modul Praktikum Kelas 6
14. Seharusnya tanpa memasukkkan sumber suara OBS sudah memakai audio dan mikrofon
dari laptop secara otomatis. Tapi kalau kamu mau mengaturnya, kamu bisa melakukan
pilihan ini:
• Klik ikon gerigi (setelan) pada masing-masing pilihan (‘Desktop Audio’ dan ‘Mic/Aux’)
pada bagian ‘Audio Mixer’.
• Tekan tombol ‘Setting’ pada kotak ‘Controls’ di sebelah kanan bawah.
15. Mulai streaming (tapi belum publikasi/posting).
• Klik ‘Start Streaming’ di kotak ‘Control’
• Jika setelan benar, maka kamu akan melihat preview di Facebook Live Producer.
16. Sekarang kamu tinggal memberi judul, deskripsi, dan setelan lain untuk publikasi di
Facebook.
17. Jika sudah, klik ‘Go Live’ dan mulailah live streaming game
SD Islam Al Azhar 30 Bandung 113
Anda mungkin juga menyukai
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakBelum ada peringkatMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak9 halaman
- Modul Ajar Praktikum Pemprograman Web20250312101001 1741749001Belum ada peringkatModul Ajar Praktikum Pemprograman Web20250312101001 174174900199 halaman
- Modul Web Programming I - Esty Purwaningsih - 2Belum ada peringkatModul Web Programming I - Esty Purwaningsih - 247 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
- Laporan Praktikum Pemrograman Web: A.Mika Ilhami 0701202064Belum ada peringkatLaporan Praktikum Pemrograman Web: A.Mika Ilhami 070120206419 halaman
- HTML (Hypertext Markup Language) Merupakan Bahasa Pemrograman Web Yang Digunakan Untuk Membuat Halaman SitusBelum ada peringkatHTML (Hypertext Markup Language) Merupakan Bahasa Pemrograman Web Yang Digunakan Untuk Membuat Halaman Situs4 halaman
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakBelum ada peringkatMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak9 halaman
- Bagian 6 - Pemrograman Web Dan Perangkat BergerakBelum ada peringkatBagian 6 - Pemrograman Web Dan Perangkat Bergerak8 halaman
