Dosen Pemrograman Web : Guntur Gunawan, M.

Kom

Pertemuan I: (Menginstal PHP Triad, Mengenal perintah HTML) Instalasi PHP Triad PHP Triad merupakan kumpulan dari berbagai software yaitu : PHP ( plikasi PHP) My!"l ( plikasi database My!"l ser#er) pa$he ( plikasi %ebser#er) PHP My dmin ( dministrasi database) &' !ilahkan download aplikasi phptriad http:((sour$eforge'net(pro)e$ts(phptriad( *' +alankan( e,ekusi file instalasinya a' Lisensi aggrement, sebaiknya diba$a dulu tidak )uga tidak apa-apa di

b' .lik I gree untuk melan)utkan' tau klik /an$el )ika anda ingin membatalkan' Pastilah yang anda pilih adalah I gree $' Tampilan-tampilan ketika proses instalasi berlangsung'

d' Terlihat bahwa PHPTriad akan membuat folder pa$he pada dri#e /'

&

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

e' Proses instalasi telah selesai'

f' .lik show details untuk melihat lebih detail proses instalasi' 0isa dilihat proses apa sa)a yang ter)adi saat instalasi'

1' Men)alankan PHP Triad : a' !ebagai webser#er !tart 2 ll Program 2 PHP Triad 2 pa$he /onsole 2 !tart pa$he'

Tampilan apa$he ketika ber)alan'

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Ingat tampilan ini )angan ditutup, tetapi hanya di Minimize kan' b' !ebagai 3atabase My!"l' !tart 2 ll Program 2 PHP Triad 2 Mys"l 2 My!"l-3-4T

Mys"l-3 digunakan untuk sistem operasi %in 56, %in !7 dan lain-lain yang sele#el, Mys"l-3-4T digunakan untuk sistem operasi %in 8p, %in 9 3an lain-lain yang sele#el' :' Tampilan pertama kali ketika 0rowser dipanggil' .etik http:((lo$alhost atau http:((&*9';';&

Mengenal HTML &' <ntuk men)alankan HTML kita menggunakan 4otepad yang sudah ada di sediakan' !tart 2 ll Program 2 $$esories 2 4otepad' 0erikut tampilan 4otePad

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

*' !ilahkan anda ketik sebagai berikut :

.eterangan : &' 4omor & 3iantara =body> dengan =(body> merupakan bagian utama program *' 4omor * Merupakan bagian headher( kepala' 1' 4omor 1 Merupakan +udul dari halaman situs kita' 1' !elan)utnya prsoses penyimpanan'

nda arahkan ke /:(apa$he(httdo$s

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

?ang perlu anda ingat-ingat semua file HTML atau file PHP harus disimpan dalam folder atau direktori yang sama, maka disarankan anda membuat folder lagi di httdo$s'

3idalam folder nama anda masing-masing, anda simpan dengan mengikuti $ara sebagai berikut:

Hasil akhirnya file latihan&'html akan tersimpan di : /:( pa$he(Httdo$s(4ama@anda(latihan&'html :' <ntuk men)alankannya silahkan anda buka webbrowser anda yaitu MoAilla, internet 7,plorer dan lain-lain, dengan $ara mengeikan pada address bar nya atau alamat http:((lo$alhost(nama@anda(latihan&'html atau http:((&*9';';'&(nama@anda(latihan&'html B' Hasilnya adalah sebagai berikut : 3engan $atatan apa$he sudah di)alankan dengan $ara : Start | All Program | PHP Triad | Apache Console | Start Apache. .emudian Diminimize.

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Ck mahasiswa, untuk pertemuan pertama ini sampai disini silahkan anda lakukan lagi hal yang sama di rumah anda' .un$i !ukses adalah .er)a .eras' !elan)utnya buat halaman baru simpan dengan nama latihan*'html yang disimpan dalam folder yang sama sebelumnya'

.eterangan : &' =body bg$olorDEF//////E> : Membuat latar men)adi berwarna' *' =font siAeDEGE $olorDEredE fa$e DE rialE> : =font $olor D EHedE> : %arna Huruf =font fa$e D E rialE> : 0entuk tulisan arial 1' =$enter> =($enter> menengahkan tulisan' :' =br> Menurunkan baris selan)utya (7nter) B' =img sr$DEguntur')pgE widthDE&B;E heightDE&*;E> menampilkan gambar pada halaman situs diikuti dengan lebar (width) dan tinggi (height)' ?ang perlu diperhatikan file gambar harus diletakan pada folder yang sama' Hasilnya sebagai berikut:

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pertemuan II : (Mengenal tag hiperlink dan Tag HTML standar lainnya) Pada Modul .e 3ua ini kita $oba menggunakan link antara file satu dengan yang lainnya' nda ingat file anda kemarin yang bernama latihan*'html, dalam file tersebut ada tambahan perintah untuk meng-ling-kan pada file lainnya

.eterangan : G' =body bg$olorDEF//////E> : Membuat latar men)adi berwarna' 9' =font siAeDEGE $olorDEredE fa$e DE rialE> : =font $olor D EHedE> : %arna Huruf =font fa$e D E rialE> : 0entuk tulisan arial 6' =$enter> =($enter> menengahkan tulisan' 5' =br> Menurunkan baris selan)utya (7nter) &;' =img sr$DEguntur')pgE widthDE&B;E heightDE&*;E> menampilkan gambar pada halaman situs diikuti dengan lebar (width) dan tinggi (height)' ?ang perlu diperhatikan file gambar harus diletakan pada folder yang sama' 11. <a hre !"contac#.html"$Contac# %S <&a$ ' (nt(# lin# #e ile )ang mana nama ile terse*(t contac#.html+ Hasilnya sebagai berikut:

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

!ilahkan buat file baru dengan nama $onta$k'html, simpan dalam folder yang sama dengan file yang lainnya' /onta$k'html

Pada saat klik $onta$k'html maka akan menampilkan halaman berikut:

Latihan : &' !ilahkan anda tambahkan =mar"uee dire$tion D IleftI beha#iorDIalternateI s$roll amountDIBI>=(mar"uee> dinatara Profil' Pen)elasan : Mar"uue dire$tion : te,t running, dengan arah dari leftDkiri, rightDkanan 0eha#ior : bentuk runing te,t, alternate Dkiri dan kanan' s$roll amountDIBI untuk ke$epatan running te,t' *' ganti =body bg$olor>=body ba$kgroundDIguntur')pgI>, Latar belakang gambar

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Tag HTML lainnya : Pengat(ran Te#s <ntuk mendapatkan halaman web yang baik nda harus melakukan pengaturan terhadap teks seperti memilih )enis dan ukuran huruf, perataan, dll' Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks : Headers' <Hn$..<&Hn$ 3igunakan untuk mengatur ukuran huruf pada header' EnE mempunyai nilai antara & - G atau antara =H&> sampai =HG>, dengan =H&> merupakan ukuran terbesar dan =HG> merupakan ukuran terke$il' /ontoh : =H*>Tutorial Html=(H*> Hasilnya akan terlihat seperti : T(torial Html Paragraph ,ar(' <P$ 3igunakan untuk pindah alinea atau paragraf' Tag ini bisa diberi akhiran =(P> tapi )uga bisa tidak diberi' Line ,rea#' <,-$ 3igunakan untuk pindah ke baris baru' .o Line ,rea#' <./,-$ 0ila digunakan tag ini maka teks yang pan)ang tidak se$ara otomatis pindah baris bawahnya bila baris pertama sudah terlalu pan)ang' 0ont <0/.T$ <ntuk mendefinisikan berbagai attribut JC4T, yaitu : !IK7, J /7, /CLCH' SI12' <kuran font yang digunakan, berkisar antara & - 9 dengan & merupakan ukuran terke$il dan 9 merupakan ukuran terbesar' 0AC2' +enis atau nama font' nda bisa memilih maksimal 1 )enis font yang masingmasing dipisahkan oleh koma' 0ila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( @ )' 3alam memilih )enis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita)' Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan sa)a font standar' Tapi bila nda ingin menggunakan font yang sedikit EanehE nda bisa menggunakan graphi$' C/L/-' %arna font, didefinisikan dengan menggunakan nilai HL0(H78 atau bisa )uga langsung menggunakan nama warna (red misalnya)' /ontoh : =JC4T !IK7D: J /7DEMerdana, rial, Hel#eti$aE /CLCHDEFJJ;;;;E>/ontoh teks yang berwarna merah=(JC4T>

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Hasilnya akan terlihat seperti : /ontoh teks yang berwarna merah /ontoh lainnya : =JC4T !IK7D* J /7DETimes@4ew@HomanE /CLCHDEF;;GG//E> ,ase 0ont' <,AS20/.T$ 3igunakan untuk mendefinisikan Edefault te,tE' ttribut sama dengan attribut JC4T' Tag JC4T akan mengoverwrite setting pada 0 !7JC4T' /ontoh : =0 !7JC4T !IK7D* J /7DE rial,Hel#eti$aE /CLCHDEFJJ;;;;E> !elain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu : Perhatian ' !emua tag di bawah ini membutuhkan tap penutup' <,$ ,old te3t <I$ Italic text <%$ <nders$ore <TT$ Typewriter <S$ !trikeout - draws a line through the te,t <P-2$ Preformatted Te,t <D0.$ Definition <,LI.4$ Te,t berkedip (lebih baik )angan digunakan) <ST-/.5$ Strong <ADD-2SS$ Italic <CIT2$ Digunakan untuk quoting text <C/D2$ Monospa$ed font (digunakan bila nda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML nda) <SAMP$ Monospa$ed font (digunakan bila nda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML nda) <4,D$ Monospa$ed font (digunakan bila nda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML nda) <,I5$ <kuran teks akan lebih besar satu ukuran <SMALL$ <kuran teks akan lebih ke$il satu ukuran <S%P$ Membuat tekssupers$ript <S%,$ membuat tekssub s$ript <A,,-26$ bbre#iations <AC-/.7M$ <ntuk akronim <P2-S/.$ 3igunakan untuk inde,ing <8$ Membuat short inline "uotation <6A-$ Membuat variable name, selalu alam italics.

&;

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Lists Terdapat tiga tipe list yang dapat digunakan, yaitu : %nordered Lists' <%L$ <ntuk membuat daftar item dengan tanda bullet' List entries didefinisikan dengan tag =LI>' /ontoh : =<L> =LI> Item nomer & =LI> Item nomer * =LI> Item nomer 1 =(<L> Hasil dari kode di atas adalah:

Item nomer & Item nomer * Item nomer 1

3engan atribut T?P7 nda dapat mendefinisikan bentuk dis$, $ir$le atau s"uare bullet point' /ontoh : =<L /CMP /T T?P7Ds"uare> N /rdered Lists' </L$ +uga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi' List entries )uga didefinisikan dengan =LI> tag' /ontoh : =CL T?P7DI> =LI> Item nomer & =LI> Item nomer * =LI> Item nomer 1 =(CL> Hasil dari kode di atas adalah : &' Item nomer & *' Item nomerr * 1' Item nomerr 1 <ntuk T?P7 nda dapat )uga menggunakan : &- 3efault numbers, &, *, 1, et$' - Huruf besar' , 0, /, et$' a- Huruf ke$il' a, b, $, et$'

&&

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

I- Homawi huruf besar' I, II, III, et$' i- Homawi huruf ke$il , i, ii, iii, et$' De inition Lists' <DL$ /ontoh : =3L> =3T> Item pertama' =33> Pen)elasan tentang item pertama' =3T> Item kedua' =33> Pen)elasan tentang item kedua =(3L> Hasil dari kode di atas adalah : Item pertama' Pen)elasan tentang item pertama' Item kedua' Pen)elasan tentang item kedua

&*

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pertemuan III: (Membuat tabel pada halaman %ebsite) Pada Pertemuan III ini kita akan men$oba membahas menggunakan tabel untuk mendesain halaman website( situs'

Pen)elasan : 4omor & 4omor * 4omor 1

: : :

4omor : 4omor B

: :

0agian headher( bagian kepala Tag untuk membentuk tabel dan diakhiri dengan =(table> pada bagian bawah' =tr>''=(tr> untuk membentuk baris =td>'''=(td> untuk membentuk kolom, .alau anda lihat pada bagian ini ada & pasangan =tr> menun)ukan & baris, ada tiga pasangan=td> menun)ukan 1 kolom' Menun)ukan baris kedua yang )uga memiliki 1 kolom Menun)ukan baris ketiga yang )uga memiliki 1 kolom'

Hasilnya kalau anda )alankan di webbrowser :

&1

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Tag

anda (*ah men9adi

Tag

anda (*ah men9adi

Tag

ubah men)adi

Tag

ubah men)adi

!etelah anda lakukan perubahan hasilnya men)adi :

&:

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pen)elasan : Tag : tabel dengan border D & lebar tabel D &;;O dan tinggi tabel D &;;O' Tag : menggabungkan 1 buah kolom men)adi & kolom' Tag : mengabungkan * baris men)adi & baris' 0erarti kita sudah membuat kerangka untuk mendesain website kita' !elan)utnya anda bisa membuat website sesuai dengan keinginan anda'

&B

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pertemuan IM, M : (Mengenal perintah-perintah Mys"l) pabila PHP Triad sudah di install dan di)alankan, selan)utnya peserta pelatihan bela)ar menggunakan perintah-perintah My!"l' <ntuk menggunakan perintah My!"l kita harus men)alankan /ommand Pronp karena perintah My!"l ini menggunakan /ommand Line' <ntuk masuk ke /ommand Promp : !tart 2 ll Program 2 ssesories 2 /ommand Prompt 4i untuk melihat #isualisainya N

.alau /ommand Prompt sudah di)alankan, maka aplikasinya seperti dibawah ini :

/atatan yang perlu anda perhatikan adalah posisi direktori anda di I/P3o$uments and !ettingP ToshibaI' Ingat direktori ini tergantung pada komputer anda masing-masing' <ntuk login ke dalam database My!"l direktorinya berada pada I/:P pa$hePmys"lP0inI' 4ah oleh karena itu kita harus berpindah kedirektori I/:P pa$hePmys"lP0inI' /aranya : .etikan perintah /d P 7nter maka se$ara otomatis akan berpindah ke 3irektori I/:PI

&G

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

!elan)utnya dengan mengetikan perintah I$d apa$he(mys"l(bin 7nterI

Maka sekarang anda berada pada direktori /:Papa$hePMys"lP0inII

<ntuk login kedalam database My!"l menggunakan perintah sebagai berikut tetapi pastikan Mys"l 3-4T sudah di)alankan sebelumnnya : Login tanpa menggunakan pasword

Login menggunakan password

.eterangan : -u root -p My!"l Tampilan kalau login berhasil tampilannya sebagai berikut : : : : Mariabel untuk user <ser tertinggi yang ada didalam database My!"l Mariabel untuk menggunakan password untuk login ke

4ah '''''' syukur ahamdulillah sudah berhasil tapi )angan senang dulu karena ini baru permulaan, selan)utnya barulah kita bela)ar menggunakan perintah-perintah My!"l' Q ---------------------C. kita lan)utkan

&9

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Perintah untuk membuat databases :

Ingat kalau mun$ul kata kata IRuery C., & row affe$ted (;'1: se$) berarti suksesI <ntuk membuktikan kalau database pelatihan sudah berhasil di buat, gunakan perintah :

.alau berhasil, database IpelatihanI akan terlihat'

!ekarang tugas kita adalah membuat tabel didalam database IpelatihanI' Ingat yang perlu diperhatikan database didalam Mys"l bukan database IpelatihanI sa)a melainkan ada database lainnya' 4ah supaya tabel ItamuI yang akan kita buat didalam database IpelatihanI sukses, maka kita harus mengaktifkan terlebih dahulu database IpelatihanI dengan menggunakan perintah :

.alau mun$ul kata-kata 3atabase /hanged maka kita berhasil mengaktifkan database IpelatihanI' +angan lupa u$apkan I!l"am ulilla"I' Ingat perhatikan lagi pen)elasan Instruktur nda : ?aitu 0apak Luntur Lunawan, M'.om' Q------ 4ah sekarang kita buat tabel dalam database pelatihan, dengan menggunakan perintah sebagai berikut :

.eterangan : /reate table tamu : : 0uat tabel tabel dengan nama tabel ItamuI' 4ama field( kolom yang diikuti dengan pan)ang karakter yang ada dalam tabel ItamuI' Id(&;), nama(:B), tempatlahir(:B), tgllahir, alamat(:B), email, pesan

&6

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

/har, #ar$har, date, te,t uto@in$rement

: :

Menun)ukan tipe data (lebih )elasnya lihat referensi lain)' re$ord yang ada dalam field id otomatis akan bertambah sesuai dengan bertambahnya )umlah re$ord'

4ot null Primary .ey

: :

data harus disi, tidak boleh kosong' Menun)ukan field I3 sebagai Jield .un$i, maksudnya re$ordnya berbeda beda'

<ntuk melihat tabel tamu sudah di buat dengan mengguakan perintah :

4ih hasilnya'''

<ntuk melihat lebih )elasnya se$ara detail, gunakan perintah :

4ih hasilnya '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

0agaimana S masih bersemangat kan '''''', Lah iyalah ITetepI' Lan)utkan T (seperti pemilihan ketua !T I4 a)a)' Q 4ah sekarang kita lan)utkan perintah !"l untuk menginputkan data ke dalam tabel menggunakan perintah insert'

Penggunaan perintah insert ini ada kombinasi yang lain, silahkan lihat referensi di Internet'

&5

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Misal kalau kita hanya menginputkan re$ord yang mengisi hanya field nama dan pesan dengan mengunakan perintah :

!elan)utnya kita menggunakan perintah I!ele$tI' Perintah ini digunakan untuk menampilkan data( re$ord yang ada didalam tabel' /ontohnya seperti dibawah ini' He$ordnya banyak karena sudah dinputkan berulang-ulang'

<ntuk menampikan re$ord tertentu dengan kriteria tertentu kita menggunakan perintah Isele$tI diikuti dengan perintah seleksi IwhereI' Misal' Menampilkan re$ord dengan id D U1UV bisa di$oba dengan id yang lain'

----------------------------------0atas----------------------------------------------Menampilkan re$ord dengan tempatlahirDU/urupUV bisa $oba dengan tempatahir lain'

*;

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

--------------------------------------0atas----------------------------------------------------------Menamplkan field-field tertentu, seperti hanya field nama, tempatlahir dan pesan'

Menampilkan field-field tertentu, seperti hanya field nama, tempatlahir dan pesan dengan namaDUdafaUV

Lmana masih bersemangatS Perintah insert sudah, sekarang perintah updateT !iap ''' Perintah (pdate digunakan untuk mengubah( mengedit re$ord atau data keseluruhan' Q---------------------Perintah <pdate' <ntuk mengupdate nama W3afaU men)adi W3afa LunawanU dengan idDU1UV Ingat

#riteria :here har(s digunakan karena hanya field dan re$ord tertentu yang akan
diubah'

Hasilnya nama U3afaU berubah men)adi U3afa LunawanU'

<ntuk mengupdate nama UHohimU men)adi UHohimaU dan tempatlahir U.epahiangU men)adi UTebat .araiU yang memiliki idDUBUV'

*&

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Lihat hasilnya '

Ck, gimanaS insert, sele$t dan update sudah, masih semangatS Lah iyalah wong pintar'' !elan)utnya perintah Delete. Perintah delete digunakan untuk menghapus re$ord tertentu )uga keseluruhan data' ?ang perlu diperhatikan )uga kriteria where harus digunakan, kalau tidak maka seluruh re$ord( data sem(an)a te:as ata( le*ih tepatn)a menghilang. Q--------------Perintah 3elete <ntuk menghapus nama UHohim U yang memiliki idDU9UV

0isa )uga mengguakan kriteria lain, tapi ingat kalau ada kriteria yang sama maka semua kriteria yang sama akan tewas' Misal menghapus dengan kriteria tempatlahirDU/urupUV

!ekarang kita lan)utkan pada perintah !"l yang lain seperti perintah drop database dan 3rop table' Perintah 3rop pada intinya untuk menghapus tabel didalam database dan menghapus database itu sendiri' /ontohV 3rop table tamuV 3rop database kursusV

**

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pertemuan MI (Mendesain halaman web menggunakan Ma$romedia 3reamwea#er 6'; dan mengenal s$ript $onfig'php)' <ntuk men)alankan aplikasi ma$romedia: !tart 2 ll Program 2 Ma$romedia 2 Pilih Ma$romedia 3reamwea#er 6'; 4ah ini tampilan Ma$romedia 3reamwea#er 6';

?ang perlu diperhatikan pada lembar ker)a Ma$romedia adalah

da tiga menu yaitu /ode, !plit dan 3esain' .alau kita klik /ode tampilan men)adi seperti di bawah ini :

Pada tampilan /ode ini merupakan kumpulan s$ript-s$ript PHP dan HTML'

*1

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

.alau kita klik 3esain, tampilan men)adi seperti ini :

Halaman desain ini digunakan hanya untuk meran$ang( mendeasin tampilan website dan form' !emua yang kita disain se$ara otomatis s$ript php atau HTML nya ada pada halaman /ode' .alau klik !plit, tampilan men)adi seperti ini :

.ombinasi dari halaman /ode dan 3esain' !ekarang kita akan mendesain Jom buku tamu dan merubah pada bagian tertentu' /aranya : Masukan tabel

Pilih Hows &; dan /oloum 1, yang lain biarkan default sa)a' .emudian klik C.'

*:

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

<ntuk mendesain )uga kita membutuhkan menu properties seperti dibawah ini

.alau menu ini tidak ada silahkan lakukan seperti ini :

.emudian desain se$ara manual ' sehingga men)adi seperti ini :

<ntuk

memasukan

Te,tfield

$aranya

<ntuk memasukan 0utton

<ntuk masukan Te,tarea

*B

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pada waktu te,tfield kita masukan ke lembar ker)a kita se$ara otomatis s$ript nya akan mun$ul pada bagian $ode ' Pada nama diubah men)adi

Pada

Tempat

Lahir

Pada Tanggal Lahir Pada 7mail Pada lamat 0egitu )uga pada waktu te,tarea kita masukan $odenya seperti ini : 3iubah men)adi 0egitu )uga pada waktu 0utton kita masukan $odenya seperti ini : 3iubah Men)adi

+adi /ode se$ara keseluruhan

<*od)$ <ta*le :idth!;<=>; *order!;1;$ <tr$ <td colspan!;?;$<di@ align!;center; class!;st)le1;$,%4% TAM% <&di@$<&td$ <&tr$ <tr$ <td :idth!;A?>;$.ama<&td$ <td :idth!;B>;$'<&td$ <td :idth!;C?>;$<inp(t t)pe!;te3t; name!;t3tnama; :idth!;1==; &$<&td$ <&tr$ <tr$ <td$Tempat Lahir <&td$ <td$'<&td$ <td$<la*el$ <inp(t t)pe!;te3t; name!;t3ttempatlahir; :idth!;1D=; &$ <&la*el$<&td$ <&tr$ <tr$ <td$Tanggal Lahir <&td$ <td$'<&td$ <td$<inp(t t)pe!;te3t; name!;t3ttgllahir; &$<&td$ <&tr$ <tr$

*G

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

<td$2mail<&td$ <td$'<&td$ <td$<inp(t t)pe!;te3t; name!;t3temail;&$<&td$ <&tr$ <tr$ <td$Alamat<&td$ <td$'<&td$ <td$<inp(t t)pe!;te3t; name!;t3talamat; :idth!;A==; &$<&td$ <&tr$ <tr$ <td height!;?AC;$Pesan<&td$ <td$'<&td$ <td$<la*el$ <te3tarea name!;t3tpesan; cols!;D=; ro:s!;A=;$<&te3tarea$ <&la*el$<&td$ <&tr$ <tr$ <td$En*spF<&td$ <td$En*spF<&td$ <td$<la*el$<&la*el$<&td$ <&tr$ <tr$ <td$En*spF<&td$ <td$En*spF<&td$ <td$<inp(t t)pe!;s(*mit; name!;S(*mit; @al(e!;Simpan; &$<&td$ <&tr$ <&ta*le$ <&*od)$

Langkah selan)utnya masukan form a$tion dengan $ara

/oding nya : ?ang perlu diatur dipindahkan dibawah =0ody> dan dipindahkan tepat diatas =(0ody>' !elan)utnya yang perlu diubah lagi men)adi adalah tepat

Pen)elasannya s$ript ini yang akan menghubungkan file bukutamu'php dengan file simpantamu'php yang mana pada file simpantamu'php berisi sript untuk menginputkan data kedalam database' !$ript lengkapnya men)adi : *9

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

=body> (( Perubahan terakhir < orm id!; orm1; name!; orm1; method!;post; action!;simpantam(.php;$ =table widthDE5;OE borderDE&E> =tr> =td $olspanDE1E>=di# alignDE$enterE $lassDEstyle&E>0<.< T M< =(di#>=(td> =(tr> =tr> =td widthDE*1OE>4ama=(td> =td widthDE:OE>:=(td> =td widthDE91OE>=input typeDEte,tE nameDEt,tnamaE widthDE&;;E (>=(td> =(tr> =tr> =td>Tempat Lahir =(td> =td>:=(td> =td>=label> =input typeDEte,tE nameDEt,ttempatlahirE widthDE&B;E (> =(label>=(td> =(tr> =tr> =td>Tanggal Lahir =(td> =td>:=(td> =td>=input typeDEte,tE nameDEt,ttgllahirE (>=(td> =(tr> =tr> =td>7mail=(td> =td>:=(td> =td>=input typeDEte,tE nameDEt,temailE(>=(td> =(tr> =tr> =td> lamat=(td> =td>:=(td> =td>=input typeDEte,tE nameDEt,talamatE widthDE*;;E (>=(td> =(tr> =tr> =td heightDE1*9E>Pesan=(td> =td>:=(td> =td>=label> =te,tarea nameDEt,tpesanE $olsDEB;E rowsDE*;E>=(te,tarea> =(label>=(td> =(tr> =tr> =td>XnbspV=(td> =td>XnbspV=(td> =td>=label>=(label>=(td> =(tr> =tr> =td>XnbspV=(td> =td>XnbspV=(td> =td>=input typeDEsubmitE nameDE!ubmitE #alueDE!impanE (>=(td> =(tr> =(table> ((Perubahan Terakhir <& orm$ =(body>

!$ript PHP yang digunakan untuk koneksi : =Sphp

*6

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

(( !$ript koneksi Ydb@hostnameDE&*9';';'&EV Ydb@usernameDErootEV Ydb@passwordDEEV Ydb@nameDEpelatihanEV Y$onn D mys"l@$onne$t(Ydb@hostname, Ydb@username, Ydb@password) or die (Z!orry $annot $onne$t to the database be$ause: Z ' mys"l@error())V mys"l@sele$t@db(Ydb@name)V S> Pen)elasan : Ydb@hostnameDE&*9';';'&EV Ydb@usernameDErootEV My!"l' Ydb@passwordDEdafa196;EV Ydb@nameDEpelatihanEV && m#sql$connect%& b$"ostname, : : : Password yang digunakan untuk login ke dalam database' 4ama database yang digunakan yaitu pelatihan' Peryataan sesuda tanda (( tidak di e,ekusi' & b$'asswor ( berarti : : 4ama hosting komputer kita, bisa diganti dengan nama Ilo$alhostI' 4ama user tertinggi di dalam database

& b$username,

mengkoneksikan ke database dengan menggunakan %& b$"ostname, & b$username, & b$'asswor ( yang sudah dideklarasikan sebelummnya kemudian disimpan dalam #ariable &conn' .alau koneksi berhasil akan dilan)utkan )ika tidak pesan %)*orr# cannot connect to t"e atabase because: ) . m#sql$error%( akan mun$ul' Wa u" ca'ek +uga #a,.. -a'i ak masala" ingat kata 'e'ata" ./erakit0rakit ke"ulu berenang kete'ian bersakit sakit a"ulu senang kemu ian 1 !min.. 2ca'kan !l"am ulilla".

*5

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pertemuan MII: (!$ript php untuk memasukan data ke dalam database) Nama file :Simpantamu.php <?php
// Script untuk memanggil modul config.php

include "config.php";
//Script untuk mengambil variabel yang dikirimkan pada file simpantamu.php

t!tnama" #$%S&'(t!tnama(); t!ttmplahir" #$%S&'(t!ttmplahir(); t!ttgllahir" #$%S&'(t!ttgllahir(); t!temail" #$%S&'(t!temail(); t!talamat" #$%S&'(t!talamat(); t!tpesan" #$%S&'(t!tpesan(); if * conn+ , //Script mys-l untuk masukan data ke database bukutamu. tabel bukutamu. masuk""insert into tamu *nama. tempatlahir. tgllahir. email.alamat .pesan+ values *( t!tnama(.( t!ttmplahir(.( t!ttgllahir(.( t!temail(.( t!talamat(.( t!tpesan(+";
// "mysql_query" scrip untuk mengeksekusi perintah mysql yang disimpan dalam $masuk

hasil "mys-l#-uery* masuk. conn+; mys-l#close* conn+; if */ hasil+ , echo "<br0"; echo "<br0"; echo "<br0"; echo "<center01omentar &idak berhasil diinputkan</center0<br0"; 2else , echo "<br0"; echo "<br0"; echo "<br0"; echo "<center03nsert 4erhasil</center0<br0"; 2 2else , echo "Not 5esponse"; 2
// Kembali kehalaman bukutamu.php secara otomatis, Tergantung !"#$ $

1;

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

echo "<meta http6e-uiv"7"refresh7" content"7"8;95:"bukutamu.php7"0"; ?0 Nama ;ile :detail#edit#delete#tamu.php <? include "config.php"; echo "<table <idth"7"=>?7" border"7"87" cellpadding"7"87" cellspacing"7">7" align"center0"; echo "<tr align"center0"; echo "<td colspan"@0<font color"red siAe"B0Caftar &amu</td0"; echo "</tr0"; echo "<tr0"; echo "<td0No</td0"; echo "<td0Nama</td0"; echo "<td0&empat :ahir</td0"; echo "<td0&anggal :ahir</td0"; echo "<td0Dmail</td0"; echo "<td0Elamat</td0"; echo "<td0$esan</td0"; echo "<td01eterangan</td0"; echo "</tr0"; no" 8; s-l " mys-l#-uery*"select F from tamu"+; <hile* data " mys-l#fetch#array* s-l++ , echo "<tr0"; echo "<td0 no</td0"; echo "<td0 data'nama)</td0"; echo "<td0 data'tempatlahir)</td0"; echo "<td0 data'tgllahir)</td0"; echo "<td0 data'email)</td0"; echo "<td0 data'alamat)</td0"; echo "<td0 data'pesan)</td0"; echo"<td0<a href"7"edit#tamu.php?id" data'id)7"0DditGG<a href"7"delete#tamu.php?id" data'id)7"0Celete</a0"; echo "</tr0"; no HH; 2 echo "</table0"; ?0

1&

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

Pertemuan MIIIV (!$ript update, dan delete pada PHP) Mudah-mudahan malam minggu dan sepan)ang hari ini dapat kita manfaat untuk kehidupan kita' !elan)utnya kita akan membuat file edit' +adi pada saat kita klik 7dit maka akan menhubungkan dengan file edit'php, pada saat klik 3elete akan menghubungkan ke file delete'php' <ntuk membuat file edit'php sebagai berikut ' !upaya gampang kita harus mengedit file bukutamu'php' =form idDEform&E nameDEform&E methodDEpostE a$tionDEsimpantamu'phpE> =table widthDE5;OE borderDE&E> =tr> =td $olspanDE1E bg$olorDEF5511GGE>=di# alignDE$enterE $lassDEstyle&E>0<.< T M< =(di#>=(td> =(tr> =tr> =td widthDE*GOE bg$olorDEFJJ//JJE>=span $lassDEstyle*E>4 M =(span>=(td> =td widthDE1OE bg$olorDEFJJ//JJE>:=(td> =td widthDE9&OE bg$olorDEFJJ//JJE>=input typeDEte,tE nameDEt,tnamaE widthDE&B;E (>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>=span $lassDEstyle*E>T7MP T L HIH =(span>=(td> =td bg$olorDEFJJ//JJE>:=(td> =td bg$olorDEFJJ//JJE>=input typeDEte,tE nameDEt,ttmplahirE (>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>=span $lassDEstyle*E>T 4LL L L HIH =(span>=(td> =td bg$olorDEFJJ//JJE>:=(td> =td bg$olorDEFJJ//JJE>=input typeDEte,tE nameDEt,ttgllahirE (>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>=span $lassDEstyle*E>7M IL=(span>=(td> =td bg$olorDEFJJ//JJE>:=(td> =td bg$olorDEFJJ//JJE>=input typeDEte,tE nameDEt,temailE (>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>=span $lassDEstyle*E> L M T=(span>=(td> =td bg$olorDEFJJ//JJE>:=(td> =td bg$olorDEFJJ//JJE>=input typeDEte,tE nameDEt,talamatE (>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>=span $lassDEstyle*E>P7! 4=(span>=(td> =td bg$olorDEFJJ//JJE>:=(td> 1*

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

=td bg$olorDEFJJ//JJE>=te,tarea nameDEt,tpesanE>=(te,tarea>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>XnbspV=(td> =td bg$olorDEFJJ//JJE>XnbspV=(td> =td bg$olorDEFJJ//JJE>=input typeDEsubmitE nameDE!ubmitE #alueDE!impanE (>=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>XnbspV=(td> =td bg$olorDEFJJ//JJE>XnbspV=(td> =td bg$olorDEFJJ//JJE>XnbspV=(td> =(tr> =tr> =td bg$olorDEFJJ//JJE>XnbspV=(td> =td bg$olorDEFJJ//JJE>XnbspV=(td> =td bg$olorDEFJJ//JJE>XnbspV=(td> =(tr> =(table> =(form> 3iedit men)adi seperti ini : &' nda harus menambahkan =S 3an diakhiri dengan S> supaya men)adi s$ript php *' supaya s$rip HTML men)adi s$ript php maka anda harus tambahkan e$ho I=form''''''seterusnya dan diakir dengan V(Titik koma) setelah =(form>' 1' Tambahkan tanda P setiap tanda sebelum tanda kutip I' /ontoh

men)adi

0egitu seterusnya''''''''''''''

11

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

:' !elan)utnya anda tambahkan perintah dibawah tanda =S

B' !elan)tunya anda tambahkan )uga diatas S> Men)adi

G'

9' selan)utnya anda tambah men)adi begitu )uga dengan yang lain

sehingga lengkapnya

6' <ntuk men)alankan apa yang sudah kita lakukan yaitu dengan membuka file detail@edit@delete@tamu'php di web browser maka akan mun$ul seperti ini :

1:

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

.alau anda klik 7dit maka yang mun$ul seperti ini :

+adi selengkapnya file edit@tamu'php =S in$lude E$onfig'phpEV if(Y$onn) [ Y"ueryDmys"l@"uery(Esele$t Q from tamu where id D ZYidZE)V while (Ybaris Dmys"l@fet$h@array(Y"uery)) [ e$ho E=form idDPEform&PE nameDPEform&PE methodDPEpostPE a$tionDPEsimpantamu'phpPE> =table widthDPE5;OPE borderDPE&PE> =tr> =td $olspanDPE1PE bg$olorDPEF5511GGPE>=di# alignDPE$enterPE $lassDPEstyle&PE>0<.< T M< =(di#>=(td> =(tr> =tr> =td widthDPE*GOPE bg$olorDPEFJJ//JJPE>=span $lassDPEstyle*PE>4 M =(span>=(td> =td widthDPE1OPE bg$olorDPEFJJ//JJPE>:=(td> =td widthDPE9&OPE bg$olorDPEFJJ//JJPE>=input typeDPEte,tPE nameDPEt,tnamaPE widthDPE&B;PE #alue DZYbaris\nama]Z(>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>=span $lassDPEstyle*PE>T7MP T L HIH =(span>=(td> 1B

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

=td bg$olorDPEFJJ//JJPE>:=(td> =td bg$olorDPEFJJ//JJPE>=input typeDPEte,tPE nameDPEt,ttmplahirPE#alue DZYbaris\tempatlahir]Z(>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>=span $lassDPEstyle*PE>T 4LL L L HIH =(span>=(td> =td bg$olorDPEFJJ//JJPE>:=(td> =td bg$olorDPEFJJ//JJPE>=input typeDPEte,tPE nameDPEt,ttgllahirPE #alue DZYbaris\tgllahir]Z(>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>=span $lassDPEstyle*PE>7M IL=(span>=(td> =td bg$olorDPEFJJ//JJPE>:=(td> =td bg$olorDPEFJJ//JJPE>=input typeDPEte,tPE nameDPEt,temailPE #alue DZYbaris\email]Z(>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>=span $lassDPEstyle*PE> L M T=(span>=(td> =td bg$olorDPEFJJ//JJPE>:=(td> =td bg$olorDPEFJJ//JJPE>=input typeDPEte,tPE nameDPEt,talamatPE #alue DZYbaris\alamat]Z(>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>=span $lassDPEstyle*PE>P7! 4=(span>=(td> =td bg$olorDPEFJJ//JJPE>:=(td> =td bg$olorDPEFJJ//JJPE>=te,tarea nameDPEt,tpesanPE>Ybaris\pesan]=(te,tarea>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =td bg$olorDPEFJJ//JJPE>=input typeDPEsubmitPE nameDPE!ubmitPE #alueDPEPerubahanPE (>=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =(tr> =tr> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =td bg$olorDPEFJJ//JJPE>XnbspV=(td> =(tr> =(table> =(form>EV ^ ^else

1G

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

[ e$ho E!er#er 4ot HesponEV ^ S> Limana, saya rasa sangat )elas sekali, kalau belum )elas tanyakan lagi sama pak guntur, 4gak masalah kok, yang penting Heepiiiiiiiiiii' !eperti iklan rokok a)a' 4ah selan)utnya pada saat anda tekan tombol : maka ada a$tion ke file prosessimpantamu'php, supaya ada a$tion ingat perhatikan s$ript ini : ' 4ah maka selan)untnya kita buat lagi file baru dengan nama prosessimpantamu'php

Jile prosessimpantamu'php
=Sphp in$lude E$onfig'phpEV if(Y$onn) [ e$ho E=table widthDPE6;OPE borderDPE;PE alignD$enter>EV e$ho E=tr>EV e$ho E=td>4ama=(td> =td>:=(td> =td>Yt,tnama=(td>EV e$ho E=(tr>EV e$ho E=tr>EV e$ho E=td>Tempat Lahir=(td> =td>:=(td> =td>Yt,ttmplahir=(td>EV e$ho E=(tr>EV e$ho E=tr>EV e$ho E=td>Tanggal Lahir=(td> =td>:=(td> =td>Yt,ttgllahir=(td>EV e$ho E=(tr>EV e$ho E=tr>EV e$ho E=td>7mail=(td>=td>:=(td> =td>Yt,temail=(td>EV e$ho E=(tr>EV e$ho E=tr>EV e$ho E=td> lamat=(td> =td>:=(td> =td>Yt,talamat=(td>EV e$ho E=(tr>EV e$ho E=tr>EV e$ho E=td>Pesan=(td> =td>:=(td> =td>Yt,tpesan=(td>EV e$ho E=(tr>EV Ys"lstr D Eupdate tamu set nama DZYt,tnamaZ, tempatlahirDZYt,ttmplahirZ, tgllahirDZYt,ttgllahirZ, emailDZYt,temailZ, alamatDZYt,talamatZ, pesanDZYt,tpesanZ where id D ZYidZEV 19

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

YhasilDmys"l@"uery(Ys"lstr,Y$onn)V mys"l@$lose(Y$onn)V if(TYhasil) [ e$ho E7dit LagalEV ^else [ e$ho E0erhasil di perbaharui=br>=br>EV ^ ^else [ e$ho Eser#er not respondingEV ^ e$ho E=br>EV S> !etelah melakukan pengeditan di web browser maka hasilnya seperti ini

!elan)utnya ''

Jile delete@tamu'php
=S in$lude E$onfig'phpEV if(Y$onn) [ Y"ueryDmys"l@"uery(Esele$t Q from tamu where idDZYidZE)V Ys"lstrDEdelete from tamu where idDZYidZEV YhasilDmys"l@"uery(Ys"lstr,Y$onn)V mys"l@$lose(Y$onn)V if(TYhasil) [e$ho EHapus gagalEV^ 7lse [e$ho E0erhasilEV ^ ^ else [ e$ho E!er#er not responEV ^ e$ho E=meta http-e"ui#DPErefreshPE $ontentDPE&V<HLDdetail@edit@delete@tamu'phpPE>EV 16

Dosen Pemrograman Web : Guntur Gunawan, M.Kom

S> lhamdullilah'''

15