Di susun oleh B S I

(1)

Akademi Manajemen Informatika & Komputer

BINA SARANA INFORMATIKA

Jakarta

(2)

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT, yang telah memberikan rahmat

dan hidayahnya sehingga modul Web Programming II ini dapat terselesaikan dengan baik.

Selanjutnya modul ini disusun untuk memberikan gambaran bagi mahasiswa yang

mempelajari Web Programming. Dengan menggunakan metode “Belajar Cepat Dan Menyenangkan” karena modul ini disertai contoh kasus, sehingga lebih memudahkan anda

dalam memahami pembuatan web.

Akhir kata penulis berharap semoga modul Web Programming II ini dapat

dipergunakan sebaik-baiknya dan dapat dijadikan referensi untuk mahasiswa umum yang

ingin mempelajari pembuatan web. Tak lupa penulis mengucapkan banyak terima kasih

kepada semua pihak yang telah membantu dengan tenaga dan pikirannya, terima kasih juga

kepada rekan–rekan instruktur, dosen dan semuanya yang tidak bisa disebutkan satu

persatu, yang selalu mendukung penulis sehingga modul ini sehingga dapat selesai sesuai

yang kita inginkan semua.

Penulis menyadari masih banyak kekurangan dalam penyusunan modul ini. Untuk

itu saran dan kritik yang membangun sangat penulis harapkan guna perbaikan dan

pengembangan modul ini kedepan.

Jakarta, April 2010

(3)

DAFTAR ISI

Kata Pengantar ………. 2

Daftar Isi………... 3

BAB I PENGENALAN MYSQL……… 7

1.1 Menjalankan MySQL……….………. 7

1.2 Database……… 7

1.3 Tabel……… 8

BAB II PENGENALAN DATABASE……….……… 15

2.1. Pembuatan Database dengan phpmyadmin ……… 15

2.2. Perintah Membuat table…….. ……… 16

BAB III MENGENAL DREAMWEAVER………..…………. 19

3.1. Pengertian Dreamweaver………. 19

3.1.1. Menjalankan Pertama Kali Dreamweaver……… 3.1.2. Mengenal Bagian Dreamweaver……… 3.1.3. Halaman Kerja Dreamweaver……… 3.1.4. Properti Pengaturan Data Objek………... 3.2. Tools dalam dreamweaver….. ……… 20

(4)

BAB IV SKRIP PHP DALAM DREAMWEAVER..……… 23

4.1.Pengenalan Skrip PHP ………. 23

4.1.1. Teknik Menuliskan skrip

4.1.2. Pemakaian perintah echo

4.1.3. Penggabungan Operasi Angka dan Teks

4.2.Bekerja dengan teks heading……….………... 24

BAB V FORM……….……….. 31

5.1. Pengenalan Form…..……….. 31

5.1.1. Perancangan Awal Form dengan Tabel

5.1.2. Menggunakan Objek Text Field

5.1.3. Menggunakan Objek Hidden Field

5.1.4. Menggunakan Objek Text Area

5.1.5. Menggunakan Objek Check Box

5.1.6. Menggunakan Objek Radio Button

5.1.7. Menggunakan Objek List Menu/ Drop List

5.1.8. Menggunakan Objek File Field/ Media Upload

BAB VI TABEL DAN MODIFIKASI TABEL…………...35

6.1.Pembuatan Tabel...………..35

6.1.1. Menambahkan Kolom dan Baris

6.1.2. Memblok dan Menseleksi Tabel

6.2.Penggunaan Properties Di Dalam Tabel……… 43

6.2.1. Menambahkan Kolom dan Baris

6.2.2. Tata Letak dan Perataan Tabel

6.2.3. Pengaturan Spacing dan Padding

6.2.4. Merge Cell Untuk Menggabungkan Data

(5)

6.2.6. Mengubah Ukuran Tabel

6.2.7. Membuat Tabel Di dalam Tabel

BAB VII KONEKSI DATABASE……….. 49

7.1. Koneksi database……… 49

7.1.1. Mengaktifkan database 7.2. Skrip Dalam Database……… 50

7.2.1. Menampilkan Isi Data dari Database 7.2.2. Membuat Program Masukan Data Anggota 7.2.3. Membuat Program Simpan Data Anggota 7.2.4. Membuat Program Hapus Data Anggota 7.2.5. Membuat Program Ubah Data Anggota BAB VIII STUDI KASUS I DATABASE PENJUALAN DAN TABEL….. 54

8.1. Membuat Database...………... 54

8.2. Pembuatan Tabel...……... 56

8.2.1. Tabel admin 8.2.2. Tabel member 8.2.3. Tabel barang 8.2.4. Tabel pemesanan 8.2.5. Tabel pemesanan_detail 8.2.6. Tabel kantong BAB IX STUDI KASUS II MEMBUAT FORM MASTER...…. 58

9.1. Membuat Form Barang……….. … 58

9.2. Membuat Form Anggota ……… 59

BAB X MODOFIKASI FORM MASTER……….. 61

10.1. Menghapus dan Mengedit Data Barang ……….……… 61

(6)

10.1.2.Mengedit Data Barang

10.2. Menampilkan & Menghapus Form Anggota……… 61

BAB XI STUDI KASUS III MEMBUAT FORM LOGIN……… 69

11.1. Membuat Form Login Admin……..….……… 69

A. Membuat Form Home Admin

BAB XII MEMBUAT FORM LOGIN LANJUTAN………..……… 74

12.1. Membuat Form Login User………..………….. 74

12.2. Membuat

File Untuk Memeriksa Status Login Anggota... 76

12.3. Membuat

Status Akses………. 78

12.4. Membuat File Librari

12.5. Membuat Cascading Style Sheet

BAB XIII STUDI KASUS IV MEMBUAT FORM PENJUALAN……… 81

13.1 Membuat Form Penjualan………. 81

BAB XIV MODIFIKASI FORM PENJUALAN I ……… 117

14.1. Membuat Ubah Penjualan

14.2. Membuat Konfirmasi Data Anggota Untuk

Pengiriman Barang...

BAB XV MODIFIKASI FORM PENJUALAN II……….. 121

15.1. Menyimpan Konfirmasi Ulang Data Anggota………… 121

BAB XVI MERANCANG WEB PENJUALAN…….……….. 124

16.1. Merancang halaman utama/ Membuat

halaman index………

(7)

17.1.Membuat Form Profil

17.2. Membuat Form Info Anggota

17.3. Membuat Form Kontak Kami

17.4. Membuat Form Cara Pembayaran

17.5. Membuat Banner Menggunakan Flash MX

atau Flash 8

BAB XVIII HOSTING WEB………..

(8)

BAB I Pengenalan

MySQL

!

"

# $ % &

'

( )

% & %

& % * * * * * + *

, &

& ,

*,!-*

! "# $ %&''(

) * +, -.$/%''

01 + 12 1

012

! ,& ' &

(9)

3 2

. . & .

/ !

% 4

! (

4 5 4 6

& 4

3 2 4 4 6

% !

' 0 1

7 8 4

&

4 5 4 ) 5 *6

&

5 4 6

3 2 4 6

& 2

(10)

' 0 " 3 "45# & "45# &

"655# & " 3 ##1

(11)

BAB II Pengenalan

Database

.

% ! &

+( +

% 4 4 + ,

&

. & 77 7

. .

9 4 % + .

+ . & 8

.

6 $ & .

4 " 9 # .

(12)

9 4 % % !

. &

9 4 % 7!

% % , 4 4

(13)

6 .

%

. %

; < & 9 %

9 4 % :

% & . % .

&

9 4 % $ 8

4 .

(14)

9 > ?

&

9 4 % & @

< % & .

(15)

;<; === +

>

7 + >

! ) " ) A& ) B& ) 55< ) C#

D

! &

& DE >DE9

"D E > D E 9 #

7 >

! ) C

! .

& % 8

6 . , + , ,

> .

F ! )

& .

. . .

! % &

" # :

4 % ! " #

&

(16)

9 4 7 @

< 9 ! C&

& . + " #

%

7 % + ; + >

%

& % ! &

C& .

!

> 7

@ :

, G

(17)

9 4 7 %

7 7 ? @ >

= !

9 4 7 7

7 : + 4

$ % &

! " #

% %

$ %

?

% &

2 H ! I

,

(18)

9 4 7 : ,

9 %

$ &

&

! ) C : %

9 4 7 $ ,

7 % 8 >

! ! ) C&

&

?

,

$ H

H @ @

@

G 7 D @

7!

? :

@

@ @ ,

7 @

= ,

> , ? = : D

: 9

(19)

D

. ! ) C

$ = : 8

%

& & =

> 7 > 7 @ : $

H

9 4 7 & !

7 % + 8 ;

@ : 8

&

! $ %

!

(20)

9 4 7 A> 8

H 8 ,

8 4 7 > ,

= B @ +

! " #

! %

/ +

. $

@ $

> ! @ . & .

,

@

,

> !

&

!

H H

Email Link

Anchor Hyperlink

Tabel

Insert Div Tag

Group Image Date

Media Server Side Include Command

(21)

! $

, .

% % 7

"= #

@ !

@ , $

! & .

?

7 % % + 8 ;

@ :

, & %

!

9 4 7 .> 8

@ &

8 4 7 %>

= B @ +

@ >

, &

> ! . & .

Insert Div Tag

Table Draw layer Layout Table

Draw Layout Cell

(22)

@ ,

!

& .

!

& .

: 8

8 4 7 7>

= B @ +

@

% &

! , ! &

%

H ! &

%

(23)

9 4 7 - ,

7 % 7 + 8 ; C

H %

& ! ) I ! C

% :

9 4 7 ' :

7 % : + 8 ; C

! ! . 8

(24)

9 4 7 :

> 8 % . > &

H : 8 H %

8 4 7 : >

= B @ +

H .

@ + H : %

H :

@ + . : %

%

, : + %

J : : % .

%

J 9 = J

: !

? !

> H !

Form Hidden Field

Text Field Radio Button

Check Box Text area

Jump Menu List Menu

Radio Group

Button

(25)

H H ! %

: ! " #

" #

!

7 % $ + 8 ; 8 D

@ : @ +

$

& !

@ +

9 4 7 %! +

! @ + & %

: %

8 4 7 $ % @ +

= B @ +

H @ F %

:

>

Format teks Bold, Italic, Strong

Membuat Heading H1, H2 dan H3

(26)

: , %

H @ +

& 6

$

!

! @

7 % & + 8 ; ?

H

9 4 7 7 8

> 8 % . >

: 8 %

$J G

H G

G

, G

> J

(27)

8 4 7 &>

= B @ +

H G *KL M3 / @NO1 L0*

$J G * KL M39F@NO1 L0 *

G * KL M3 F >/2NO1 L0 *

, G * KL M3,//=>FNO1 L0 *

> * KL "#1 L0 *

J ' * KL ' "#1 L0 *

F * 3 3 "P (CCQR(6P#1

3 3 "P (CCQR(6P#1 *

, : * KL L0 *

F * KL L0 *

, * 7S S7 *

> * KL L0 *

F * KL L0 *

@ $

7 7 , , >

Script html sederahana yang akan digunakan adalah, bagaimana cara membuat table.

1. Dengan menggunakan editor Dreamweaver, buatlah halaman baru menggunakan tipe HTML.

2. Pada halaman desain, tambahkan objek table ( ), dengan ketentuan berikut:

(28)

3. Setelah table dibuat, desainlah kerangka table tersebut sebagai berikut:

Gambar 3.12. Tampilan Tabel

4. File di atas simpan C:\xampp\htdocs\nim\coba.html.

5. Berikut skrip lengkapnya:

coba.html

</head> <body>

<td width="186">Azuka Sausan </td> </tr>

<tr>

<tr>

<td>Kelas</td>

<td>Manajemen Informatika</td> </tr>

(29)

;<; =#

, >

: + ?

? &

& 1

+ > %

,

/

? %

J &

D

& %

T *

: 8

! &

& .

• KL . L0

• KU . U0

• K ,J> @ ;* *0 . K7 ,J> @0

(30)

6 F

& 3

"EF , & #

"F2#

4 !

% &

"T > *#1

" #1

T T1

< "6#

*. >= : > *&

EF

P. >= : > P1

F2

Q "G#

. >= : >

EF ,

M ; *. >= : > *1

*2 M *1

(31)

A "HI# "IH#

,

EF ,

7S

% S7

*2 . >= : > *1

F2

"HI#& %

"HH#&

%

EF ,

77

*2 . >= : > *1

F2

B @

"J# "K#

, %

& @ K:/!E

;*V55RRAA*0& % &

% K:/!E ;V55RRAA0 ,

EF ,

*K:/!E ;V55RRAA0*1

* L*1

(32)

: % , ,

: 4

• 8 0

! & .

"J#

EF ,

* *1

F2

• 8 %0

= & .

:

EF ,

<1

< S Q1

F2

• 8 70

( @ & .

"J + , J# ,

EF ,

*K 0*1

*K 60 6 K7 601

(33)

: 7 ++ 4 + < + 8

Dalam penulisan suatu paragrap dalam kode HTML sebenarnya telah ada tag khusus untuk memberikan macam - macam ukuran dari judul

paragraph tersebut. Disebut dengan text heading. Berikut skrip lengkapnya dari text heading:

heading.html :

</head> <body>

<H1>Ini menggunakan Heading 1</H1> <H2>Ini menggunakan Heading 2</H2> <H3>Ini menggunakan Heading 3</H3> <H4>Ini menggunakan Heading 4</H4> <H5>Ini menggunakan Heading 5</H5> <H6>Ini menggunakan Heading 6</H6> </body>

</html>

(34)

;<; #

C

H

%

$ + C

$ & = %

= & =

&

$ + < C + 8 4

% &

6 . % ! &

@

@ % H " #& = C C

% 8

(35)

4 % H & .

%

% &

9 4 $ %

! %

• C B &

• <

• , & .

. / @

• 8 + % &

% : %

"3 #

< 8 " #

(36)

9 4 $ 7@ %

$ % ++ 4 8 D C

/ % @ + H %

$ %

6 . %

! & % @

% H " # % . = C

C

4 : % H %

Q

(37)

9 4 $ :

Q ! H & . / % @ + H

= C 8 D C

A % @ + H " # & % @ +

H %

9 4 $ $ % @ + H

! %

• 8 D C %

& %

@ + H 6& @ + H & W %

%

• D , " #

@ + H

• , , @ + &

+ ,

• + @ + H

& =

%

(38)

• :

&

% !

"S#

• = # = &

B $ % % H &

%

8 4 $ H .

@ B

@ + H 6 2 @+

, D 65

+ , A

= >

@ + H 2 @+

, D 4Q

+ , 4Q

= 2

C H , - +

5 ++ ,

$ 7 ++ 4 ? C

/ % H % &

(39)

$ % 8

6 $ % " #

C = C ?

= % $ &

%

.

9 4 $ &

$ : ++ 4 8 D <

/ % @ + %

: &

$ % 8

6 H H

/

3 /

! H & . % @ + H

" # = C 8 D C

4 % & %

@ + . " # = C 8 D <

(40)

8 4 $ % H .

@ B

@ + . 2 @+

, D Q5

2

= .

< $ % @ + . & .

% :

9 4 $ A@ @ + .

Q % & . %

(41)

$ $ ++ 4 , ; D

, : +

6 : % ! & %

@

% % . = C C

H " #

4 H & H *.

. L*&

< % % , : + H

, : + " #& = C , ; D

Q & " & &

& & & #

.

9 4 $ .H

A % , + &

", #

(42)

9 4 $ - +

$ & ++ 4 ;

? % , + % .

& J : % % .

%

! &

, , % &

& % &

6 H C

3

@ % J : H " #

= C ;

4 @ & D &

(43)

9 4 $ 'H . J :

< ! % & .

% :

8 4 $ 7 H .

@ B

J : 6 2 J

, G

> $

=

J : 2 J

, G D

> $

= D

Q % & . %

% & C % >

(44)

• Radio Button : Kolom ini digunakan untuk menentukan variabel kelompok Radio, di dalam satu kelompok pilihan Anda harus memberi nilai variabel yang sama.

• Checked Value : Kolom ini digunakan untuk membedakan antara Radio satu

dengan yang lain, setiap Radio harus diberikan nilai yang berbeda (disesuaikan dengan bentuk pilihannya).

• Inisial State : Kolom ini merupakan kondisi Radio, apabila memilih Checked meka pada radio tersebut akan dalam keadaan terpilih dan apabila Unchecked akan dipasang dalam keadaan tidak terpilih.

$ A ++ 4 H

/ % , : +&

J : & / % %

%

!

& 8

6 : % ! & %

@

% % . = C C

H " #

4 H & H *.

L*

< % % H

" #& = C

(45)

9 4 $ % 7

Q ! % &

$ & .

% #

A , % # & . % &

# " # %

9 4 $ %

B X " # 8

(46)

9 4 $ 7 G

C $ .

?

C %

$ . ++ 4 C C H L

/ % H H " #

& $ $

.

6 : % ! & %

@

% % . = C C

H " #

4 H & H

* *

< % H H H " #&

= C C C

(47)

Q % H H

& .

9 4 $ $ H H

Pada gambar di atas dapat dijelaskan:

• File Field name : digunakan untuk mendefinisikan nama variabel pada File Field.

• Char width : digunakan untuk menentukan lebar objek.

• Max char : digunakan untuk memberi batasan panjang file data yang

dimasukan, batasan ini berdasarkan jumlah karakter alamat.

A , & C %

&

9 4 $ &@

B &

(48)

9 4 $ A

C & .

@ .

% H

(49)

;<; #=

8 4 8 4

@ % &

&

% 8 %

& 4 8 4

$ ) ! C&

.

, > ,

0

6 : % % : & .

@

$ & = 8 4 & %

%

(50)

9 4 &

< = % : % 8

• & .

" #

•

&

" #

• , % &

655 "U# %

" #&

+ " +#&

• ; & .

(51)

• + % %

• +

Q @ % , % 4

J & . %

/= :

9 4 & % 4

A & .

0

6 > & .

,

. , &

= ! . @

(52)

& 4 , @ ;

@ " #& .

!

" % # & =

.

% " # .

6 @ &

% & %

&

9 4 & 7

4 % %

&

(53)

& % 4 8 4

" & &

& # %

. %

; , 8 4

:

6 $

" #

. &

& &

9 4 & $

; @ 8 4

&

& =

%

6 . " # & .

&

(54)

9 4 & & =

; ; 8 4

& %

6 .

= &

9 4 & A

& % ++ 8 4

& % 4 , @ ;

" % # &

(55)

6 $ & .

" # &

&

%

9 4 & .

4 % % "J #

", # % &

9 4 & - % %

& % % 8 8 4

@ &

(56)

$ &

. %

6 7

= % .

9 4 & '

& % 7 + + +

: , &

% , %

& % %

& . ,

$ % .

(57)

, ,

% &

" # , ,

& % : + L ++ 4 +

&

% ?

% %

% :

6 @ %

9 4 & %

%

8 4 +

4 & % %

$ %

= +

(58)

< ,

% &

? + %

9 4 & :

& % $ L 4 +

, % , &

% " & # %

E , % ,

, & $ %

6 $ % &

&

% & @

,

4 % " # %

&

< ! " #& %

(59)

9 4 & $ ? % ,

% %

• $ ,

• B 4 . %

, & , %

Q $ 4 2 J

, , = /=

9 4 & & %

(60)

9 4 & A

& % & + 4 , L 8 4

. % %

,

% % & %

& .

&

9 4 & &

! ,

&

(61)

& % A 4 8 4 8 4

! & , %

! & &

& .

, :

9 4 & . , @

(62)

;<; #== @

4

$ &

. >

%

. > /!:, H

8 ' 3 "#& ' 3 3 "#&

A @ 4

.

%

. '

! & .

H

' 3 "#

; L 0

mysql_connect(”server host”, ”user”,”password”)

@ + 0

• 3

• $ .

• .

(63)

<?php

$koneksi=mysql_connect(“localhost”,”root”,”password”) or die (“Gagal konek

server”.mysql_error());

If($koneksi) {

echo “Koneksi berhasil”; }

?>

= "

#& =

* * ( . &

9 4 A

(64)

9 4 A %

A + 4

= =

% =

' 3 3 "# &

$ F & .

4 ,

<?php

$koneksi=mysql_connect(“localhost”,”root”,”password”) or die (“Gagal konek server”.mysql_error());

If($koneksi) {

mysql_select_db(”buku”,$koneksi)

or die (”Database gagal dibuka”.mysql_error());

echo “Koneksi berhasil”; }

?>

0$ & .

. .

(65)

@ + 0

&

mysql_select_db(buku,$koneksi)

= % &

*

or die (”Database gagal dibuka”.mysql_error());

. &

9 4 A 7 =

&

(66)

9 4 A : =

A % 4

A % = 4

& . % ' .

,

' 3' "# $ &

= '

F F,@ % &

$ ' &

' 3 3 "# ! &

(67)

,

<?php

$koneksi=mysql_connect(“localhost”,”root”,”password”) or die (“Gagal konek server”.mysql_error());

If($koneksi) {

mysql_select_db(”buku”,$koneksi)

or die (”Database gagal dibuka”.mysql_error());

’Menjalankan Query

$sql=mysql_query(”SELECT * FROM anggota”, $koneksi) or die (“Query Gagal”.mysql_error());

while ($data=mysql_fetch_array($sql)){ echo “ID : $data[id_anggota]<br>”; echo “Nama : $data[nm_anggota]<br>”; echo”Alamat : $data[alamat]<br>”; echo”Kelamin : “;

echo ($data[‘kelamin’]==”P”)?”Pria”:”Wanita”<br><hr>”; }

while ($data=mysql_fetch_array($permintaan)){

…

}

! & .

" M #

(68)

echo “ID : $data[id_anggota]<br>”; echo “Nama : $data[nm_anggota]<br>”; echo”Alamat : $data[alamat]<br>”; echo”Kelamin : “;

0

echo ($data[‘kelamin’]==”P”)?”Pria”:”Wanita”;

! !

& * *& =

* * *D* = *D *

0

while ($data=mysql_fetch_array($sql)){ echo “ID : $data[id_anggota]<br>”; echo “Nama : $data[nm_anggota]<br>”; echo”Alamat : $data[alamat]<br>”; echo”Kelamin : “;

(69)

9 4 A $

A % % 4 + < ++

. % >2 FJ@

: =

> 8

6 ! ! &

& % H " #

4 . %

% H & * *

Gambar 7.6. Properties Form

< % " 8

#& % @ " #&

Gambar 7.7. Ketentuan ukuran tabel

(70)

Gambar 7.8. Form masukan data anggota

6. Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap objek form dengan melihat tabel berikut:

Tabel 7.1. Ketentuan objek

7. Simpan file di atas di C:\apache2triad\htdocs\nim\masukanform.php

8. Berikut adalah skrip lengkap yang didapat dari desain form masukan di atas:

,

</head> <body>

<td colspan="3"><strong>Masukan Data Anggota</strong> </td> </tr>

Komponen Properti Nilai

Text Field TextFieldName txtid Char Width 10 Max Char 6

Keterangan ID Anggota Text Field TextFieldName txtnama

Char Width 35 Max Char 35 Keterangan Nama Text Field TextFieldName txtalamat

Char Width 35 Max Char 60 Keterangan Alamat Radio Button Name rbgender

Checked Value P

Radio Button Name rbgender Checked Value W

(71)

<tr>

<td width="95">ID Anggota </td> <td width="3">:</td>

</tr> <tr>

</tr> <tr>

<td>Alamat</td> <td>:</td>

<input name="rbgender" type="radio" value="P" checked/> Pria

<input name="rbgender" type="radio" value="W" checked/> Wanita</label></td>

(72)

0

! >!

0

!

0

!

0

<input name="rbgender" type="radio" value="P" checked>Pria <input name="rbgender" type="radio" value="W" checked>Wanita

! % & % =

0

!

(73)

9 4 A - H

A % 7 4 + < ++

& .

(74)

. &

$koneksi=mysql_connect("localhost","root","password")or die ("Gagal konek server".mysql_error());

if($koneksi){

mysql_select_db("buku",$koneksi)or die ("Database gagal dibuka".mysql_error());

$txtid=$_POST['txtid'];

$txtnama=$_POST['txtnama']; $txtalamat=$_POST['txtalamat']; $rbgender=$_POST['rbgender'];

$sql="INSERT INTO anggota(id_anggota,nm_anggota,alamat,kelamin) VALUES('$txtid','$txtnama','$txtalamat','$rbgender')";

mysql_query($sql,$koneksi)or die("Gagal query disimpan".mysql_error()); echo"Data berhasil disimpan";

}

$txtid=$_POST['txtid'];

!

(75)

0

$sql="INSERT INTO anggota(id_anggota,nm_anggota,alamat,kelamin) VALUES('$txtid','$txtnama','$txtalamat','$rbgender')";

mysql_query($sql,$koneksi)or die("Gagal query disimpan".mysql_error());

= &

! " #&

&

:

(76)

9 4 A %

A % : 4 + ? < ++

$ &

=

= " #

& =

$ % & .

6 ! ! &

% " 8

#& % @ " #&

Gambar 7.13. Ketentuan Ukuran Tabel Tampil Data Hapus Anggota

(77)

Gambar 7.14. Form Tampilan Data Hapus anggota

4. Simpan file di atas di C:\apache2triad\htdocs\nim\tampilhapus.php

5. Berikut adalah skrip lengkap yang didapat dari desain form tampil hapus;

Skrip tampilhapus.php:

<title>Untitled Document</title> </head>

<body>

<td colspan="4" bgcolor="#99CC66"><div align="center"><strong>TAMPIL DATA ANGGOTA </strong></div></td>

</t> <t>

<div align="center"><strong>Alamat</strong></div></td> <td width="74" bgcolor="#99FFCC">

<div align="center"><strong>Tombol</strong></div></td> </t>

<?php

$koneksi=mysql_connect("localhost","root","password") or die("Koneksi Gagal".mysql_error());

if($koneksi){

mysql_select_db("buku",$koneksi)or die ("Database gagal dibuka ".mysql_error()); //Mejalankan Query

$sql=mysql_query("SELECT * FROM anggota",$koneksi) or die("Query Gagal".mysql_error());

while($data=mysql_fetch_array($sql)){ ?>

<tr>

(78)

<a href="hapusdata.php?ID=<?php

echo $data['id_anggota'];?>">Hapus</a></td> </tr>

<a href="hapusdata.php?ID=<?php

echo $data['id_anggota'];?>">Hapus</a></td> </tr>

<?php }} ?>

0

(79)

!

& %

$J >! 3

%

9 4 A $ >

, , 0

<html> <body> <?php

$koneksi=mysql_connect("localhost","root","password")ordie("Gagal konek".mysql_error());

if($koneksi){

mysql_select_db("buku",$koneksi)or die("Database gagal dibuka".mysql_error()); $ID=$_GET['ID'];

$sql="DELETE FROM anggota WHERE id_anggota='$ID'";

$qry=mysql_query($sql,$koneksi)or die("Query Gagal".mysql_error()); if($qry){

(80)

} else

echo "Gagal menghapus"; exit;

} ?> </body> </html>

0

&

: %

0

$ID=$_GET['ID'];

! $J

0

$sql="DELETE FROM anggota WHERE id_anggota='$ID'";

$qry=mysql_query($sql,$koneksi)or die("Query Gagal".mysql_error());

>!( ! >! $J

0

if($qry){

echo "Data berhasil dihapus"; include "hapustampil.php"; }

else

(81)

' &

T! *

9 4 A & @

A % $ 4 + L4 , < ++

$ & =

E

&

+ , 0

& =

& .

" @ #& $ @

= &

? L4 ,

9 % $ H

$ H

6 ! ! &

% " 8

(82)

9 4 A A = $ @ @ ! $ .

4

9 4 A . H @ ! $

< 01 , % 1, 1 1 4 , ,

Q : 1

Skrip ubahtampil.php:

<td colspan="4" bgcolor="#99CC66"><div align="center"><strong>TAMPIL DATA ANGGOTA </strong></div></td>

</tr> <tr>

<div align="center"><strong>Alamat</strong></div></td> <td width="74" bgcolor="#99FFCC">

<div align="center"><strong>Tombol</strong></div></td> </tr>

<?php

(83)

If($koneksi){

mysql_select_db("buku",$koneksi)

or die("Database gagal dibuka ".mysql_error()); //Mejalankan Query

while($data=mysql_fetch_array($sql)){ ?>

<tr>

</tr> <?php }} ?> </table>

</body> </html>

& E

+ , @ 0

. & $ &

(84)

9 4 A - !

& & >! .

:

4 , ,

<html> <body> <?php

$koneksi=mysql_connect("localhost","root","password") or die("Koneksi Gagal".mysql_error());

if($koneksi){

or die("Database gagal dibuka ".mysql_error()); $ID=$_GET['ID'];

//Mejalankan Query

$sql="select * from anggota where id_anggota='$ID'";

$qry=mysql_query($sql,$koneksi)or die("Query Gagal".mysql_error()); $data=mysql_fetch_array($qry);

$ID=$data['id_anggota']; $nama=$data['nm_anggota']; $alamat=$data['alamat']; if($data['kelamin']=="P"){ $cekp="checked";

(85)

$cekp="";

$cekw="checked";} }

?>

<tr>

<td colspan="2">Ubah Data Anggota </td> </tr>

<tr>

<td width="103">ID Anggota </td> <td width="231">

<input name="txtid" type="text" id="txtid" size="10" value="<?echo"$ID";?>" maxlength="6" disabled/>

</tr> <tr>

<input type="text" name="txtnama" size="30" value="<?echo"$nama";?>" maxlength="35" /></td>

</tr> <tr>

<td>Alamat</td>

<td><input type="text" name="txtalamat" size="30" value="<?echo"$alamat";?>" maxlength="60"/></td> </tr>

<tr>

<td>Jenis Kelamin </td> <td><label>

<input name="rbgender" type="radio" value="P" <?echo"$cekp";?> /> Pria

<input name="rbgender" type="radio" value="W" <?echo"$cekw";?>/> Wanita</label></td>

</tr> <tr>

(86)

0

! & &

&

:

0

$ID=$_GET['ID'];

! $J

0

$sql="select * from anggota where id_anggota='$ID'";

$qry=mysql_query($sql,$koneksi)or die("Query Gagal".mysql_error());

! &

>! . $ &

>!

0

$data=mysql_fetch_array($qry); $ID=$data['id_anggota'];

$nama=$data['nm_anggota']; $alamat=$data['alamat'];

! 3 & &

0

if($data['kelamin']=="P"){ $cekp="checked";

$cekw="";} else{ $cekp="";

(87)

!

:

0

<input name="rbgender" type="radio" value="P" <?echo"$cekp";?>/>Pria <input name="rbgender" type="radio" value="W" <?echo"$cekw";?>/> Wanita

0

<input name="txtid" type="text" id="txtid" size="10" value="<?echo"$ID";?>" maxlength="6" disabled/>

! 3 % @ + H =

" # & @ + H

0

<input type="text" name="txtnama" size="30" value="<?echo"$nama";?>" maxlength="35" />

<input type="text" name="txtalamat" size="30" value="<?echo"$alamat";?>" maxlength="60"/>

! &

% =

(88)

Skrip ubahsimpan.php:

<html> <body> <?php

$koneksi=mysql_connect("localhost","root","password") or die ("Gagal konek server".mysql_error());

if($koneksi){

or die ("Database gagal dibuka".mysql_error()); $IDH=$_POST['IDH'];

$sql="update anggota set nm_anggota='$txtnama',

alamat='$txtalamat',kelamin='$rbgender' where id_anggota='$IDH'";

$qry=mysql_query($sql,$koneksi)or die("Gagal Query ubah :".mysql_error()); echo "Data berhasil diubah";

include "ubahtampil.php"; }?>

$sql="update anggota set nm_anggota='$txtnama',

alamat='$txtalamat',kelamin='$rbgender' where id_anggota='$IDH'";

(89)

(90)

;<; #===

@ = 4 8 4

. .

8 % =

. .

? &

, % $ & .

. 4 4

&

. & 77 7

= % >>

= %

+ . & 8

.

( $ & .

4 " 9 # .

% & &

. % 4 8 4

= .

8

(91)

. % 8 4

$ & =

= &

.

8 4 . =

C 8 M

3 G.J, .J 45 =

3 G.J, .J 45

. % % 8 4 ++

$ & = ++ :

8 4 . % =

C 8 M N

3 >2@ 65 . 3 =

G.J, .J 5

G.J, .J C

G.J, .J 45

G.J, .J Q5

G.J, .J 45

% G.J, .J Q5

(92)

. % 7 8 4 4 +

$ & = 4 + :

8 4 . 7 =

C 8 M N

3 >2@ Q . 3 =

3 G.J, .J Q5

G.J, .J Q5

G.J, .J 45

G.J, .J Q5

G.J, .J 4

G.J, .J Q5

. % : 8 4

$ % & = :

8 4 . : =

C 8 M

3 , .J C =

G.J, .J 45

!.@F

% @> F

(93)

. % $ 8 4 5

$ & = 3 %

: 5

8 4 . 7 = 3

C 8 M

3 >2@ <

3 , .J C

3 >2@ Q

% >2@ Q

G.J, .J 45

. % & 8 4 +

$ & =

:

8 4 . 7 =

C 8 M

3 >2@ Q

% >2@ 4

!.@F

% @> F

(94)

;<; =!

@ == 4 C

&

( &

& =

,

, 0

<?

$host="localhost"; $username="root"; $password="password"; $databasename="onlinetoko";

$koneksi=mysql_connect($host,$username,$password) or die ("Data Base Error"); mysql_select_db($databasename,$koneksi);

?>

01D 1, 1 1 1 4 1 ,

- 4 C ; +

% & % & =

!

1. Dengan menggunakan editor Dreamweaver, buatlah halaman baru menggunakan tipe PHP.

2. Pada halaman desain, tambahkan objek Form ( ).

(95)

Gambar 9.1. Ketentuan ukuran tabel tambah barang

4. Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir sesuai data pertanyaan yang akan dimasuki.

Gambar 9.2. Form masukan data barang

8 4 - = %

Text Field TextFieldName Nm_barang Char Width 50

Max Char 50

Keterangan Nama Barang Text Field TextFieldName harga

Char Width 30 Max Char 30 Keterangan Harga List/ Menu ListFieldName status

Type Menu

List Value Masukan, Keluaran, Penyimpanan, Lain - lain Keterangan Status

Text Area TextAreaName spesifikasi Char Width 30

Num Lines 8

Keterangan Spesifikasi List/ Menu ListFieldName status

Type Menu

(96)

Keterangan Keterangan File FileFieldName gambar

Keterangan Gambar Text Field TextFieldName Stok

Char Width 2 Max Char 2 Keterangan Stok Button 1 Label Simpan

Button Name Submit Action Submit Button 2 Label Batal

Button Name Reset Action Reset

6. Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\admin\ tambah_barang.php

7. Berikut adalah skrip lengkap yang didapat dari desain form tambah barang di atas:

(97)

4 ,54 + ,

/admin.css" rel="stylesheet" type="text/css" /> </head>

<body>

<td bgcolor="#FFFF99" class="style4">Nama Barang </td>

<tr>

<td bgcolor="#FFFF99" class="style4">Harga</td> <td><input name="harga" type="text" id="harga"></td> </tr>

<tr>

<td width="168" bgcolor="#FFFF99"><span class="style4">Status</span></td> <td width="306"><select name="status" id="status">

<option>masukan</option> <option>keluaran</option> <option>penyimpanan</option> <option>lain-lain</option>

</select></td> </tr>

<tr>

<td bgcolor="#FFFF99" class="style4">Spesifikasi</td>

</tr> <tr>

<td bgcolor="#FFFF99" class="style4">Keterangan</td> <td><select name="keterangan" id="keterangan"> <option></option>

(98)

<tr>

<td bgcolor="#FFFF99" class="style4">Gambar</td>

<tr>

<tr>

<tr>

</table> </form> </body> </html>

H &

01 , % 1, 1 1 1 1 4 ,54 + , .

= & =

(99)

Skrip konf_tambah_barang.php:

</head> <body> <?

include ('../librari/inc.koneksi.php'); $gambar = $_FILES['gambar']['name'];

$sqlstr="INSERT INTO barang values('$kd_barang', '$nm_barang','$spesifikasi' ,'$harga','$gambar','$stok','$status','$keterangan')";

copy($HTTP_POST_FILES['gambar']['tmp_name'], "../produk/".$_FILES['gambar']['name']);

(mysql_query($sqlstr)) ?>

(100)

- % 4 C < ++

=

!

3. Pastikan kursor berada di dalam kalang objek formulir (garis putus – putus merah), sekarang tambahkan objek Tabel ( ), dengan ketentuan berikut:

Gambar 9.4. Ketentuan ukuran tabel tambah anggota

Gambar 9.5. Form masukan data anggota

(101)

8 4 - % = %

6. Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\ new_member.php

Text Field TextFieldName Uname Char Width 6 Max Char 6

Keterangan User Name Text Field TextFieldName pswd

Char Width 6 Max Char 6

Keterangan Password Text Field TextFieldName nama

Char Width 30 Max Char 30 Keterangan Nama Text Area TextFieldName alamat

Char Width 30 Num Lines 3 Keterangan Alamat Text Field TextFieldName Kota

Char Width 50 Max Char 50 Keterangan Kota Text Field TextFieldName tlp

Char Width 30 Max Char 30 Keterangan Telepon Text Field TextFieldName email

Char Width 30 Max Char 30 Keterangan E - Mail Text Field TextFieldName pekerjaan

Char Width 50 Max Char 50

Keterangan Pekerjaan Button Label Simpan

Action Submit Button Label Batal

(102)

Berikut adalah skrip lengkap yang didapat dari desain form tambah barang di atas:

5 4 , 0

</head> <body>

<td width="426"><div align="center"><span class="style19">Masukkan Data anda Selengkap - lengkapnya.</span></div></td>

</tr> </table>

<td colspan="3"><span class="style10"> <strong> Data Login</strong> </span></td>

</tr> <tr>

<td bgcolor="#FFFF99" class="style19">  Username</td> <td bgcolor="#FFFFCC"> </td>

</tr> <tr>

<td bgcolor="#FFFF99" class="style19">  Password</td> <td bgcolor="#FFFFCC"> </td>

</tr>

(103)

<td height="18" colspan="3"><span class="style10"><span class="style19"> <strong> </strong></span><strong>Data

Member</strong> </span></td> </tr>

<tr>

</tr> <tr>

<td bgcolor="#FFFF99" class="style19">  Alamat</td> <td class="style19" bgcolor="#FFFFCC">:</td>

</tr> <tr>

<tr>

<td bgcolor="#FFFF99" class="style19">  Telepon/Hp</td> <td class="style19" bgcolor="#FFFFCC">:</td>

<tr>

<tr>

(104)

</tr> </table>

</form></td> </tr>

</head> <body>

<p align="center" class="style13"> <?

include ('../librari/inc.koneksi.php');

$perintah="select * from member where uname='$uname'"; $query=mysql_query($perintah);

$hasil=mysql_num_rows($query); $row=mysql_fetch_array($query); if($uname==$row[1]) {

echo "Data Sudah Ada Silahkan Ganti Dengan user yang lain<br>";

echo "<a href='../onlinetoko/?page=daftar' align='center'>Kembali Ke Pendaftaran</a>";

(105)

$sqlstr="INSERT INTO member values('$kd_member','$uname','$pswd', '$nama','$alamat','$kota','$tlp','$email','$pekerjaan','$status_pesan')";

if (!empty($uname) and !empty($pswd) and !empty($nama) and !empty($alamat) and !empty($kota) and !empty($tlp) and !empty( $email) and !empty($pekerjaan) )

{ $hasil=mysql_query($sqlstr);

echo "Data Anda Sudah disimpan silahkan login terlebih dahulu untuk membeli";} else {

echo "Data Anda Masukan Masih Ada Yang Kosong <br>";

echo "<a href='../onlinetoko/?page=daftar' align='center'>Kembali Ke

Pendaftaran</a>"; }

include ('../librari/inc.koneksi.php');

!

0

$perintah="select * from member where uname='$uname'"; $query=mysql_query($perintah); !empty($kota) and !empty($tlp) and !empty($email) and !empty($pekerjaan))

(106)

$hasil=mysql_query($sqlstr);

echo "Data Anda Sudah disimpan silahkan login terlebih dahulu untuk membeli"; }

else {

echo "Data Anda Masukan Masih Ada Yang Kosong"; }

!

. &

0

$sqlstr="INSERT INTO member values('$kd_member','$uname','$pswd',

'$nama','$alamat','$kota','$tlp','$email','$pekerjaan','$status_pesan')";

(107)

;<; ! C

& =

= $ &

= ! & =

& $ $

( &

' +, + ; +

$ &

3. Pastikan kursor berada di dalam kalang objek formulir (garis putus – putus merah), sekarang tambahkan objek Tabel ( ), dengan ketentuan berikut:

Gambar 10.1. Ketentuan ukuran tabel 1

4. Kemudian letakkan kursor di baris ke 2 di dalam tabel, ), sekarang tambahkan objek Tabel ( ), dengan ketentuan berikut:

(108)

5. Kemudian letakkan kursor di baris ke 1 kolom ke 2 di tabel yang kedua, sekarang tambahkan objek Tabel, dengan ketentuan berikut:

6. Kemudian letakkan kursor di luar tabel1, sekarang tambahkan objek Tabel ( ), dengan ketentuan berikut:

(109)

9. Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\admin\ barang.php

10. Berikut skrip lengkap dari disain form di atas:

4 + , 0

<title>Tampil Barang</title> </head>

<body>

<td width="100%" align="center"> <?php

include ('../librari/inc.koneksi.php'); $batas=3;

$posisi=($halaman-1)*$batas; }

// SQL Statements

$tampil = "select * from barang LIMIT $posisi,$batas"; $hasil = mysql_query($tampil);

Image Scr ../produk/<? echo $gambar; ?> Widht 100

(110)

while ($row=mysql_fetch_array($hasil)) {

$kd_barang=$row['kd_barang']; $nm_barang=$row['nm_barang']; $spesifikasi=$row['spesifikasi']; $harga=$row['harga'];

$gambar=$row['gambar']; $stok=$row['stok']; $status=$row['status'];

$keterangan=$row['keterangan']; ?>

<td width="100" height="70"><img src="../produk/<? echo $gambar; ?>" width="100" height="100" border="1" ></td>

(111)

<td><div align=center><a

href="?page=hapusbarang&kode=<?=$row['kd_barang'];?>">[ Hapus ]</a> </div></td> </tr>

</table> </div>

<td width="401" class="style4"> <?

echo "<br>Halaman : ";

$tampil2 = "select * from barang"; $hasil2 = mysql_query($tampil2); $jmldata = mysql_num_rows($hasil2); $jmlhalaman = ceil($jmldata/$batas); for ($i = 1; $i <= $jmlhalaman; $i++) if ($i != $halaman)

{

echo " <a href=?page=tampilbarang&halaman=$i>$i</A>| "; } else {

<td class="style4"><a href="?page=tambahbarang">[ Tambah Produk ] </a></td> </tr>