HTML, CSS, JavaScript, PHP___________________________________________________________
MODUL PEMROGRAMAN WEB
SMK Negeri 1 Purbalingga
Deni Priyanto, S.ST
Pemrograman Web________________________________________________Deni Priyanto, S.ST
DAFTAR ISI
HTML (HYPERTEXT MARKUP LANGUAGE)....................................................................1
1. ELEMEN DASAR HTML............................................................................................1
2. <BR>..............................................................................................................................1
3. <P></P>.........................................................................................................................1
4. <HR>.............................................................................................................................2
5. <FONT></FONT> ........................................................................................................3
6. <H1></H1> …. <H6></H6>.........................................................................................5
7. <B></B> atau <STRONG></STRONG>.....................................................................6
8. <I></I> atau <EM></EM>............................................................................................6
9. <U></U>........................................................................................................................7
10. <IMG>.......................................................................................................................7
11. <TABLE></TABLE>................................................................................................8
12. <A></A>....................................................................................................................9
13. <DIV></DIV>.........................................................................................................11
14. <SPAN></SPAN>...................................................................................................12
15. <OL></OL>.............................................................................................................13
16. <UL></UL>.............................................................................................................13
17. <FRAMESET></FRAMESET>..............................................................................14
18. <FORM></FORM>.................................................................................................15
19. ELEMENT PADA FORM.......................................................................................16
CSS (CASCADING STYLE SHEET) ....................................................................................23
1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE.........................................23
2. PENULISAN PADA HEAD.......................................................................................23
3. PENULISAN DENGAN CLASS................................................................................24
4. PENULISAN DENGAN ID........................................................................................25
JAVASCRIPT..........................................................................................................................26
1. PENULISAN PADA TAG..........................................................................................26
2. PENULISAN DENGAN TAG <SCRIPT>.................................................................27
3. TIPE DATA.................................................................................................................27
4. VARIABEL.................................................................................................................27
5. OPERATOR, IF DAN PERULANGAN.....................................................................28
PHP (Hypertext Preprocessor).................................................................................................31
1. DASAR PENULISAN PHP........................................................................................31
2. VARIABEL.................................................................................................................31
3. TANDA SAMBUNG ..................................................................................................32
4. OPERATOR MATEMATIKA....................................................................................32
5. OPERATOR PERSAMAAN.......................................................................................33
6. OPERASI PERBANDINGAN....................................................................................34
7. OPERATOR LOGIKA................................................................................................34
8. IF..................................................................................................................................34
9. PERULANGAN..........................................................................................................36
10. ARRAY....................................................................................................................37
11. PHP DENGAN FORM............................................................................................38
12. MEMBUAT DATABASE DENGAN NAVICAT..................................................40
13. MEMBUAT TABEL...............................................................................................41
HTML, CSS, JavaScript, PHP___________________________________________________________
14. MEMBUAT USER DATABASE BARU...............................................................42
15. KONEKSI KE SERVER MYSQL..........................................................................43
16. KONEKSI KE DATABASE MYSQL....................................................................44
Pemrograman Web________________________________________________Deni Priyanto, S.ST
17. MENUTUP KONEKSI............................................................................................44
18. MEMBERI PERINTAH KE DATABASE DENGAN QUERY.............................44
19. SKRIP MENAMPILKAN DATA...........................................................................46
20. SKRIP MENAMBAHKAN DATA DENGAN FORM..........................................49
21. SKRIP UPDATE DATA DENGAN FORM...........................................................50
22. SKRIP HAPUS DATA............................................................................................53
23. MENAMPILKAN DATA PER HALAMAN..........................................................55
LAMPIRAN.............................................................................................................................57
1. SETTING HOME SITE+ 5.5......................................................................................57
2. XAMPP........................................................................................................................61
3. NAVICAT 2004...........................................................................................................65
HTML, CSS, JavaScript, PHP___________________________________________________________
BAB I.
HTML (HYPERTEXT MARKUP LANGUAGE)
2. <BR>
1. ELEMEN DASAR HTML
Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan
diabaikan.
Contoh:
3. <P></P>
Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti
menggunakan 2 kali <br>
Atribut:
align
Pemrograman Web________________________________________________Deni Priyanto, S.ST
4. <HR>
Contoh:
Horizontal Line (Garis horizontal)
Atribut:
Width
Align
Contoh:
HTML, CSS, JavaScript, PHP___________________________________________________________
5. <FONT></FONT>
Tag ini dapat digunakan untuk mengatur ukuran, warna dan jenis huruf
Atribut:
Size
Color
Face
Contoh:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
HTML, CSS, JavaScript, PHP___________________________________________________________
6. <H1></H1> …. <H6></H6>
Contoh:
Untuk membuat heading yang memberikan baris baru
Pemrograman Web________________________________________________Deni Priyanto, S.ST
7. <B></B> atau <STRONG></STRONG>
Membuat huruf tebal.
Contoh:
8. <I></I> atau <EM></EM>
Membuat huruf miring
Contoh:
HTML, CSS, JavaScript, PHP___________________________________________________________
9. <U></U>
Membuat huruf dengan garis bawah
Contoh:
10. <IMG>
Menampilkan gambar
Atribut:
src (letak file gambar) align (perataan gambar)
width (lebar gambar dlm persen atau pixel)
height (tinggi gambar dlm persen atau pixel)
alt (keterangan gambar)
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Contoh:
11. <TABLE></TABLE>
Membuat table
Atribut pada <table></table>
border align (perataan
table) width height
bgcolor
Atribut pada <tr></tr>
align
bgcolor
width
height
Atribut pada <td></td>
align
bgcolor
width
height
Contoh:
HTML, CSS, JavaScript, PHP___________________________________________________________
12. <A></A>
Untuk membuat link
Atribut:
href name
Contoh:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Contoh Anchor:
HTML, CSS, JavaScript, PHP___________________________________________________________
13.
1. Klik link Ke atas 2. Maka akan tampil
bagian atas
<DIV></DIV>
Membuat blok paragraph dengan baris baru pada akhir paragraf (pengganti
<p>, digunakan pada css)
Atribut:
align (perataan paragraf) nilai left, right, center, justify
Contoh:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
14. <SPAN></SPAN>
Digunakan pada css untuk memberikan format pada teks yang diblok, tanpa
membuat baris baru
Contoh:
HTML, CSS, JavaScript, PHP___________________________________________________________
15. <OL></OL>
Order list (biasa dikenal dengan numbering)
Atribut:
Type (jenis numbering), nilai: 1, A, a, I, i
Contoh
16. <UL></UL>
Unorder List, biasa kita kenal dengan Bullet
Atribut:
type (jenis bullet), nilai: disc, square, circle
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Contoh:
17. <FRAMESET></FRAMESET>
Membagi satu halaman web menjadi beberapa halaman, halaman yang dibagi
masih bisa dibagi lagi.
Contoh:
- buat file dengan nama framset.html
HTML, CSS, JavaScript, PHP___________________________________________________________
- buat file dengan nama halaman1.html
- buat file dengan nama halaman2.html
18. <FORM></FORM>
jalankan framset.html
Digunakan sebagai blok dari elemen-elemen form seperti text,texarea.
Atribut:
- name (nama form)
- action (file tujuan dimana form dikirim, digunakan pada server side)
- method (metode pengiriman, digunakan pada server side) nilai post, get
Pemrograman Web________________________________________________Deni Priyanto, S.ST
19. ELEMENT PADA FORM
<INPUT>
Tag ini teletak didalam blok tag form
Atribut:
- Type (jenis input) nilai text, checkbox, radio, hidden, button,
submit, reset, file, image
- Name (nama elemen)
- Value (nilai isian)
Contoh:
Radio
HTML, CSS, JavaScript, PHP___________________________________________________________
Checkbox
Pemrograman Web________________________________________________Deni Priyanto, S.ST
HTML, CSS, JavaScript, PHP___________________________________________________________
Hidden
Button
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Reset
Submit
HTML, CSS, JavaScript, PHP___________________________________________________________
Select
Textarea
Pemrograman Web________________________________________________Deni Priyanto, S.ST
HTML, CSS, JavaScript, PHP___________________________________________________________
BAB II
CSS (CASCADING STYLE SHEET)
1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE
Contoh:
2. PENULISAN PADA HEAD
Pemrograman Web________________________________________________Deni Priyanto, S.ST
3. PENULISAN DENGAN CLASS
HTML, CSS, JavaScript, PHP___________________________________________________________
4. PENULISAN DENGAN ID
Pemrograman Web________________________________________________Deni Priyanto, S.ST
BAB III
JAVASCRIPT
1. PENULISAN PADA TAG
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
2. PENULISAN DENGAN TAG <SCRIPT>
Contoh:
3. TIPE DATA
Tipe-tipe data pada javascript yaitu: string, number, boolean, null, object dan
function
4. VARIABEL
Dengan variabel kita dapat menyimpan informasi pada memori dan dapat kita
pergunakan berkali-kali. Untuk membuat variabel ketik awalan var atau bisa
juga langsung dengan nama variabel tersebut.
Contoh:
var namaKu = “Fansyah” atau
namaKu = “Fansyah”
HTML, CSS, JavaScript, PHP___________________________________________________________
5. OPERATOR, IF DAN PERULANGAN
Operator pada javascritp mirip dengan operator pada php, lihat
pada bagian PHP untuk mempelajari operator matematika,
perbandingan dan logika. Begitu juga dengan sintak if dan
perulangan.
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Contoh operator matematika:
Contoh if:
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh perulangan dengan for:
Contoh penulisan function:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
BAB IV
PHP (Hypertext Preprocessor)
1. DASAR PENULISAN PHP
2. VARIABEL
Penulisan php diawali oleh boleh diletakkan dimana saja pada halaman html.
Penulisan lazimnya ditulis diantara blok <?php… ?>
Dengan variabel kita dapat menyimpan nilai atau informasi kedalam memori.
Variabel dapat kita gunakan berkali-kali sesuai kebutuhan dan nilainya dapat
kita ganti. Nama variable diawali tanda $. Misal $nama, $alamat. Nama
variable case sensitif (tidak mengenal perbedaan huruf besar dan kecil). $A
tidak sama dengan $a. Jenis variable bisa berupa bolean (true atau false)
string (huruf, angka dan karakter), integer (angka bulat), float atau double
(angka desimal/pecahan), array, object, NULL. Variabel string bisa diapit
HTML, CSS, JavaScript, PHP___________________________________________________________
tanda petik dua, atau petik satu.
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Variabel angka
Untuk menyambung antara variabel yang satu dengan yang lain, atau
menggabungkan teks gunkan tanda titik.
3. TANDA SAMBUNG
Operato
Keterangan Contoh Hasil
r
4. OPERATOR MATEMATIKA
x=2
+ Penambahan 4
x+2
x=2
- Pengurangan 3
5-x
x=4
* Perkalian 20
x*5
HTML, CSS, JavaScript, PHP___________________________________________________________
15/5 3
/ Pembagian
5/2 2.5
5%2 1
% Modulus (sisa pembagian) 10%8 2
10%2 0
x=5
++ Increment (penambahan dengan 1) x=6
x++
x=5
-- Decrement (pengurangan dengan 1) x=4
x--
5. OPERATOR PERSAMAAN
Operato
Contoh Sama dengan
r
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
Pemrograman Web________________________________________________Deni Priyanto, S.ST
/= x/=y x=x/y %= x%=y x=x%y
/= x/=y x=x/y
%= x%=y x=x%y
6. OPERASI PERBANDINGAN
Operato
Keterangan Contoh
r
== Sama dengan 5==8 hasil false
!= Tidak sama dengan 5!=8 hasil true
> Lebih besar 5>8 hasil false
< Legih kecil 5<8 hasil true
>= Lebih besar sama dengan 5>=8 hasil false
<= Lebih kecil sama dengan 5<=8 hasil true
7. OPERATOR LOGIKA
Operato
Keterangan Contoh
r
x=6
y=3
&& And (dan)
(x < 10 && y > 1) hasil true
x=6
y=3
|| Or (atau)
(x==5 || y==5) hasil false
x=6
y=3
! Not (tidak)
!(x==y) hasil true
8. IF
Dengan if kita dapat menjalankan kondisi sesuai dengan yang kita harapkan.
Misal kita dapat menentukan alur program untuk yang mengisi password
dengan benar dan alur program untuk mengisi password yang salah.
Penulisan if dengan 1 statemen:
if (kondisi/ekpresi)
else kode ini/statemen ini akan dijalankan jika kondisi benar;
kode ini/statemen ini akan dijalankan jika kondisi salah;
Penulisan if dengan lebih dari 1 statemen:
if (kondisi/ekpresi) {
kode ini/statemen ini akan dijalankan jika kondisi benar; kode ini/statemen ini akan
} else dijalankan jika kondisi benar;
{
} kode ini/statemen ini akan dijalankan jika kondisi salah; kode ini/statemen ini akan
dijalankan jika kondisi salah;
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh:
Contoh:
IF dengan lebih dari 2 kemungkinan
IF dengan 2 kemungkinan
Pemrograman Web________________________________________________Deni Priyanto, S.ST
9. PERULANGAN
Perulangan berfungsi untuk mengulang alur program, misal kita bisa
membuat nomor dari 1 sampai 100 dengan perulangan tanpa mengetikan
satu persatu. Ada beberapa macam perulangan yaitu for, while, do..while,
foreach
Contoh perlulangan for:
HTML, CSS, JavaScript, PHP___________________________________________________________
10. ARRAY
Contoh perlulangan while:
Dengan array, kita bisa membuat variabel dengan tipe yang dinamis, dimana
kita bisa menyimpan banyak data dalam satu variabel array.
Contoh:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
11. PHP DENGAN FORM
Contoh dengan kotak text:
Buatlah file dengan nama data01.php dengan skrip:
Kemudian jalankan file data01.php, isikan pada kotak nama dengan nama
Buatlah file dengan nama data02.php dengan skrip:
anda, kemudian klik tombol submit. Hasilnya akan tampil seperti gambar
dibawah ini.
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh dengan checkbox:
Buatlah file dengan nama data03.php dengan skrip:
Buatlah file dengan nama data04.php dengan skrip:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
12. MEMBUAT DATABASE DENGAN NAVICAT
- Klik kanan localhost
- Pilih New Database
- Ketik nama database misal sekolah
HTML, CSS, JavaScript, PHP___________________________________________________________
13. MEMBUAT TABEL
o Pilih database sekolah, klik New Table
o Isikan field2
id, smalint,6, auto increament
nama, varchar, 50
Pemrograman Web________________________________________________Deni Priyanto, S.ST
alamat, varchar, 255
umur, tinyint, 4
o Simpan dan beri nama guru
14. MEMBUAT USER DATABASE BARU
Klik tombol Manage User
Klik tombol Add User
HTML, CSS, JavaScript, PHP___________________________________________________________
Isikan User name, Host (alamat server mysql, biasanya localhost), password
Selanjutnya tentukan Privileges (hak istimewa) user. Pilih user, lalu pilih
privilages yang sesuai, untuk memberikan semua frivilages, klik Grant All,
lalu klik tombol Set Priv dan Flush Priv
15. KONEKSI KE SERVER MYSQL
Pemrograman Web________________________________________________Deni Priyanto, S.ST
localhost: server dimana database mysql berada
fansyah: user name fans2006: password
16. KONEKSI KE DATABASE MYSQL
sekolah: nama database yang dikoneksikan
$koneksi: nama koneksi
17. MENUTUP KONEKSI
18. MEMBERI PERINTAH KE DATABASE DENGAN QUERY
Ada beberapa perintah query
- Melakukan perubahan pada data seperti:
insert into, update, delete
o INSERT INTO
Contoh:
insert into guru values(‘Rina’,’Jakarta’,25) insert into
guru(nama,umur) values(‘Rina’,25)
o UPDATE
Contoh:
update guru set nama=’Tuti’,alamat=’Yogyakarta’,umur=20 where
id=1
HTML, CSS, JavaScript, PHP___________________________________________________________
o DELETE
Contoh:
delete from guru where id=1
- Tidak melakukan perubahan pada data yaitu select.
o SELECT
Contoh:
select * from guru select * from guru where kota=’jakarta’ and
umur>20
Lihat hasilnya dengan membuka tabel guru
Contoh skrip dengan query update:
Contoh skrip dengan query insert into:
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Klik tombol refresh, untuk melihat hasil perubahan
Contoh skrip dengan query delete:
19. SKRIP MENAMPILKAN DATA
Sebelum membuat skrip ini, tambahkan beberapa data pada tabel guru
HTML, CSS, JavaScript, PHP___________________________________________________________
Buat file tampil_data1.php
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Kemudian buatlah file tampil_data2.php, berbeda dengan tampil_data1.php,
tampilan data guru disini menggunakan tabel.
HTML, CSS, JavaScript, PHP___________________________________________________________
20. SKRIP MENAMBAHKAN DATA DENGAN FORM
Lalu buat pula file form_tambah2.php
Buat file form_tambah1.php
Jalankan form_tambah1.php, isikan nama, alamat dan umur, lalu klik tombol
Submit
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Jika berhasil akan tampil
21. SKRIP UPDATE DATA DENGAN FORM
Ubah tampil_data2.php dengan menambahkan link edit disebelahnya.
HTML, CSS, JavaScript, PHP___________________________________________________________
Terakhir buat file form_update3.php
Kemudian buat file form_update2.php
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Jalankan tampil_data2.php, klik salah satu yang akan diupdate
Lakukan perubahan, lalu klik tombol submit
Jika berhasil, akan tampil
Klik OK, lalu refresh tampilan awal (file tampil_data2.php) untuk melihat hasil
perubahan.
HTML, CSS, JavaScript, PHP___________________________________________________________
22. SKRIP HAPUS DATA
Ubah tampil_data2.php dengan menambahkan link hapus disebelahnya.
Pemrograman Web________________________________________________Deni Priyanto, S.ST
Jalankan tampil_data2.php, Klik hapus pada salah satu data
Buat file form_hapus2.php
HTML, CSS, JavaScript, PHP___________________________________________________________
Jalankan berhasil dihapus akan tampil
Klik OK, lalu refresh tampilan awal (file tampil_data2.php) untuk melihat
hasil perubahan.
23. MENAMPILKAN DATA PER HALAMAN
Pemrograman Web________________________________________________Deni Priyanto, S.ST
HTML, CSS, JavaScript, PHP___________________________________________________________
LAMPIRAN
1. SETTING HOME SITE+ 5.5
MEMBUKA DAN MENUTUP TAMPILAN FOLDER DAN FILE
(RESOURCE TAB)
Tampilan Resource Tab:
Tekan tombol F9 atau klik tombol Resouce Tab untuk menampilkan
atau menyembunyikan.
Pemrograman Web________________________________________________Deni Priyanto, S.ST
MEMBUAT FOLDER BARU
1. Pilih Drive atau Folder dimana folder baru akan dibuat
3. Ketikan nama folder baru
2. Klik kanan pada Resource Tab bagian bawah, pilih Create Folder
MENAMPILKAN NOMOR BARIS
HTML, CSS, JavaScript, PHP___________________________________________________________
MENGAKTIFKAN WORD WRAP (PENURUNAN BARIS SECARA
OTOMATIS)
MENENTUKAN EKTENSI FILE YANG SERING DIGUNAKAN
1. Buka menu Options, Settings lalu pilih Extention Manager pada
Default Extention, isikan file ekstensi yang diinginkan misal .html
Pemrograman Web________________________________________________Deni Priyanto, S.ST
MEMBUAT CODE TEMPLATE (KODE/SKRIP YANG SERING
DITULISKAN)
1. Buka menu Options, Settings lalu pilih Code Templates, klik tombol
Add, kemudian isikan Keyword, Description dan Value
Misal anda ingin membuat pembuka dan penutup dari skrip php:
2. Untuk menggunakan Code Template yang sudah kita buat, tekan
ctrl + j
HTML, CSS, JavaScript, PHP___________________________________________________________
2. XAMPP
XAMPP merupakan php instaler kit yaitu program yang mampu mengiistall
php, mysql dan komponen-komponen lain menjadi satu kesatuan. XAMPP bisa
didapatkan di http://www.apachefriends.org
INSTALL XAMPP
2. Pilih bahasa Indonesia pada Installer Language
1. Jalankan file installer xampp
3. Klik Next, pada jendela Selamat datang…
Pemrograman Web________________________________________________Deni Priyanto, S.ST
HTML, CSS, JavaScript, PHP___________________________________________________________
MENJALANKAN APACHE DAN MYSQL DARI XAMPP
CONTROL PANEL
2. Klik tombol start pada Apache dan MySql
1. Double Click XAMPP Control Panel pada desktop
Pemrograman Web________________________________________________Deni Priyanto, S.ST
MENGECEK APACHE
1. Pada browser buka http://localhost
Jika tampil halaman xampp, berarti apache sudah jalan.
Klik English untuk masuk ke pengaturan xampp
HTML, CSS, JavaScript, PHP___________________________________________________________
3. NAVICAT 2004
NAVICAT 2004 adalah program MySql Database Client. Anda bisa
mendapatkan NAVICAT di http://www.navicat.com/
o MEMBUAT KONEKSI KE SERVER DATABASE MYSQL
1. Buka Menu file, New Connection
2. Pada Tab General Setting, isikan Connection Name, Host
name/IP Address, User name dan Password Untuk koneksi awal, secara default, mysql server
mempunyai koneksi dengan username: root dan tanpa password, untuk Host name isikan
localhost
Pemrograman Web________________________________________________Deni Priyanto, S.ST