Materi Web I Jadi

Pemrograman Web (PHP, MySQL & Dreamweaver)

Membuat DatabaseBuka browser anda, pada modul ini Kita menggunakan Mozilla Firefox

Pada Address ketikkan http://localhost/phpmyadmin/

STMIK Pringsewu

1


Maka akan tampil seperti dibawah ini

Buat database baru dengan nama dbbelajar

Hasilnya :

Buat Table Baru berita klik tombol Go

STMIK Pringsewu

2


Buatlah seperti dibawah ini

Klik tombol Simpan atau Save

Kemudian buat juga table seperti dibawah ini

STMIK Pringsewu

3


Membuat Halaman Web1.

Membuat Koneksi Situs

Buka Dreamweaver, dari menu [Site]>[Manage Site]

Klik tombol New pilih Site

STMIK Pringsewu

4


Ketikkan Property seperti dibawah ini Pilihan Local Info

.......... ..........

1 2

..........

3

Keterangan 1. Site Name Digunakan untuk mengisikan Nama Site, diisi bebas dan boleh ada spasi misal Website Ku 2. Local Root Folder Lokasi tempat penyimpanan data-data, ini akan tersimpan pada folder ...\xampp\htdocs, jadi isikan folder yang akan digunakan untuk menyimpan web kita. Misal : webdata jadi diisikan : C:\xampp\htdocs\webdata 3. HTTP Address Alamat pemanggilan sites, jika nama folder seperti pada no.2 diatas maka diketikan : http://localhost/webdata

STMIK Pringsewu

5


Pilihan Remote Info

1..........

2

Keterangan : 1. Acces Jenis database yang digunakan, pada pilihan ini kita menggunakan database lokal sehingga kita pilih : Local/Network 2. Remote Data Lokasi folder dari database, ada pada ...\xampp\mysql\data\.....

STMIK Pringsewu

6


Pilihan Testing Server

1 2..........

3

..........

4

Keterangan 1. Server Model Server yang digunakan dalam pembuatan web, kita pilih PHP MySQL 2. Acces Akses database yang dipakai, pilih Local/Network 3. Testing Server folder Folder database, tersimpan pada ...\xampp\mysql\data\..... 4. URL Prefix Alamat URL yang bisa dipanggil untuk membuka web, http://localhost/.....

STMIK Pringsewu

7


Hasilnya :

..........

Klik tombol Done Setelah langkah diatas sudah sukses dilaksanakan maka pada panel File akan tampil seperti dibawah ini

2.

Membuat Koneksi Database

Untuk membuat koneksi database, minimal ada satu file yang sudah dibuka pada site ini. Untuk itu buat file baru dengan nama index.php dengan cara Klik kanan pilih New File

Buat file dengan nama index.php

STMIK Pringsewu

8


Buka file index.php dengan cara klik 2x pada file tersebut

Buka Panel Application pilih Tab Databases, klik tanda (+) kemudian pilih MySQL Connection

Buat koneksi seperti dibawah ini

Klik tombol ini

.......

Hasilnya :

STMIK Pringsewu

9


3.

Merancang halaman-halaman web

Buka Dreamweaver, masuk ke dalam panel Files seperti dibawah ini

Klik kanan pada Site pilih New File

Beri nama file yang beru dibuat dengan nama : Kop.php

STMIK Pringsewu

10


Lakukan langkah yang sama seperti sebelumnya buat file seperti dibawah ini

Serta buat sebuah folder dengan nama gambar, untuk meletakkan semua gambar yang akan digunakan pada web ini

Hasilnya :

STMIK Pringsewu

11


4. Membuat halaman Index.phpKlik ganda halaman index.php, maka akan tampil seperti dibawah ini

Tentukan pengaturan halaman dari dengan cara klik tombol Page Properties atau dari menu [Modify] > [Page Properties]

STMIK Pringsewu

12


Atur propertinya seperti dibawah ini

STMIK Pringsewu

13


Setelah sukses mengatur pengaturan halaman, ubah perataan halaman ini menjadi Rata tengah.

Tambahkan table dari [Insert] > [Table] dengan property seperti dibawah ini

Hasilnya:

Ubah nilai tinggi dari tabel tersebut menjadi 30

STMIK Pringsewu

14


Pilih tampilan menjadi Split sehingga akan tampil dua buah tampilan desaign dan code

Ketikkan kode dibawah ini

Hasilnya :

Pada table akan tampak seperti ini

STMIK Pringsewu

15


Tambahkan table kembali dengan property seperti dibawah ini

Hasilnya :

Ubah ukuran lebar cell sebelah kiri = 250 dan sebelah kanan =550 dan tinggi masing-masing adalah 30

W= 250 H = 30

W= 550 H = 30

Klik pada Cell sebelah kiri, kemudian pilih tampilan Split dan ketikkan kode seperti dibawah ini

Klik di cell kiri ini STMIK Pringsewu 16


Hasilnya :

Tambahkan kembali satu buah Table dengan properties seperti dibawah ini

Hasilnya :

STMIK Pringsewu

17


Ubah ukuran tinggi menjadi 30

Ubah juga backgroundnya seperti dibawah ini

Hasilnya :

Tambahkan kode seperti dibawah ini

STMIK Pringsewu

18


Hasilnya :

STMIK Pringsewu

19


5.

Membuat halaman Kop.php

Klik ganda halaman kop.php, maka akan tampil seperti dibawah ini

Masukkan sebuah gambar, dengan cara klik menu [Insert] > [Image]

STMIK Pringsewu

20


Buka lokasi tempat penyimpanan gambar, pilih gambar yang akan dimasukkan kedalam halaman kita sebagai kop.

Dalam contoh ini Kita menggunakan gambar yang digunakan sebagai Kop dengan ukuran gambar misal 800x150 pixel. Seperti dibawah ini

Jika sudah sampai pada langkah diatas, simpan kembali halaman ini dengan cara [File] > [Save]

Catatan :

Sampai disini kita sudah membuat file kop.php yang nantinya akan di Include sebagai Kop atas pada halaman index.php

STMIK Pringsewu

21


Untuk melihat hasilnya, jalankan Mozilla http://localhost/belajarweb kemudian enter

Firefox

pada

address

ketikkan

STMIK Pringsewu

22


6. Membuat halaman Bawah.phpKlik ganda halaman bawah.php, maka akan tampil seperti dibawah ini

Karena halaman bawah.php adalah berisi informasi pembuat web ini sebagai contoh ketikkan kalimat seperti dibawah ini

Simpan kembali file tersebut, dari [File] > [Save]

Catatan :

Halaman ini hanya digunakan untuk menampilkan informasi dari pembuat website, halaman ini juga nantinya akan di Include sebagai Kop atas pada halaman index.php

STMIK Pringsewu

23



Firefox

pada

address

ketikkan

STMIK Pringsewu

24


7. Membuat halaman Kiri.phpKlik ganda halaman kiri.php, maka akan tampil seperti dibawah ini

Tambahkan Tabel kedalam halaman ini dengan cara dari menu [Insert] > [Table]

Tentukan preperti table sebagai berikut

STMIK Pringsewu

25


Hasilnya :

Blok semua cell pada table, kemudian tentukan tinggi dari masing-masing cell tersebut sebesar 30 px

Blok semua cell pada tabel Tentukkan tingginya sebesar 30

Hasilnya :

Catatan :

Dengan mengubah tinggi dari setiap cell maka akan tampak lebih lebar, untuk ukuran tinggi ini bisa anda tentukan sesuai selera anda

STMIK Pringsewu

26


Klik pada Cell yang pertama, ubah backgroundnya menjadi seperti dibawah ini

Klik pada Cell yang pertama Tentukan Backgroundnya seperti ini

Pada Cell ke-2 dan ke-3 ubah warna backgrounnya seperti dibawah ini

Klik pada Cell yang ke-2 dan ke-3

Tentukan warna Backgroundnya seperti ini

Lakukan hal yang sama seperti diatas, buat sehingga menjadi seperti dibawah ini

STMIK Pringsewu

27


Beri judul untuk masing-masing cell serta atur format teksnya seperti dibawah ini,

Isikan kode php pada cell Kalender, User Online dan Pengunjung seperti dibawah ini

Pada Kode ketikkan :



STMIK Pringsewu

28


8. Membuat KalenderBuka panel Files kembali, tambahkan file baru dengan nama, calender.php

Buat file calender.php dengan cara klik kanan pilih New File

Klik ganda pada file calender.php tersebut maka akan tampil seperti dibawah ini

Masuk kedalam tampilan kode, hapus semua kode yang ada

Hapus semua kode ini

STMIK Pringsewu

29


Ganti dengan kode dibawah ini

Kemudian simpan kembali file tersebut, [File] > [Save]

STMIK Pringsewu

32


9. Membuat User OnlineSebelum membuat file online.php kita harus membuat terlebih dahulu file online.txt, buka notepad dari Start > All Programs > Accecories > Notepad


Biarkan saja kosong isinya, simpan file tersebut dengan nama online.txt

Catatan :

Yang perlu diingat disini adalah pada saat menyimpan file tersebut harus disimpan di lokasi yang sama dengan file yang lain dalam buku ini contonya adalah C:\XAMPP\htdocs\belajarweb

STMIK Pringsewu

33


Buka panel Files kembali, tambahkan file baru dengan nama, online.php

File online.txt yang telah dibuat dan disimpan dalam lokasi yang sama

Buat file online.php dengan cara klik kanan pilih New File

Klik ganda file tersebut, kemudian masuk ke dalam tampilan kode isikan kode dibawah ini Simpan kembali file tersebut, [File] > [Save] = explode("\n",$users_online); = count($users_online)-1;

STMIK Pringsewu

35


STMIK Pringsewu

36


10.

Membuat Counter atau Jumlah Pengunjung

Buka panel Files kembali, tambahkan file baru dengan nama, counter.php

Buat file counter.php dengan cara klik kanan pilih New File

Klik ganda file tersebut, lalu pada tampilan kode ketikan kode seperti dibawah ini Simpan kembali file tersebut, [File] > [Save]

STMIK Pringsewu

37


Supaya pada tampilan jumlah pengunjung terdapat gambar maka kita harus membuatkan folder yang digunakan untuk menyimpan data gambar tersebutAngka ditampilkan dengan gambar

Langkahnya, buka kembali panel Files, buat folder baru dengan nama digit

Buat folder dengan nama digit dengan cara klik kanan pilih New Folder

Isikan file dengan format Gif dengan nama 0.gif, 1.gif sampai dengan 9.gif dengan ukuran 16x21 pixel

Contoh gambar

File-file gambar ini bisa dibuat dengan menggunakan photoshop

STMIK Pringsewu

38


11. Membuat Link BeritaBuka kembali file kiri.php

Buka panel Application, pilih tab Bindings

STMIK Pringsewu

39


Klik tanda (+) pilih Recordset (Query)

Ketikkan seperti dibawah ini

......

Pilih Connection sesuai dengan koneksi yang dibuat

Klik tombol Avdanced

STMIK Pringsewu

40


Ketikkan seperti dibawah ini, klik OK

SELECT * FROM berita ORDER BY RAND()

Catatan :

Rumus diatas mempunyai maksud bahwa kita akan menampilkan berita yang ditampilkan secara acak

Tampilkan toolbar dengan pilihan kategori Application

STMIK Pringsewu

41


Letakkan kursor kedalam Cell ke2 dibawah Pilihan berita

Letakkan kursor anda disini

Insertkan tabel baru, [Insert] > [Table]

Klik [Insert] > [Table]

Atur seperti dibawah ini

Tarik Field Judul yang ada pada Panel Binding ke Tabel yang telah kita buat

STMIK Pringsewu

42


Pilih toolbar Application

Klik Tabel yang baru dibuat, pada panel Application pilih Repeat Region

Klik Repeat Region

Tentukan property sebagai berikut


Angka ini menunjukkan berapa banyak data yang akan ditampilkan

STMIK Pringsewu

43


Letakkan kursor pada cell didepan judul masukkan sebuah gambar, dari menu [Insert] > [Image]Masukkan gambar pada cell ini, tetapi gambar yang dimasukkan maximal berukuran 16x16 pixel

Hasilnya :

Membuat Link Buat link pada judul, dengan cara blok judul kemudian pada properties Link isikan seperti dibawah ini detil_berita.php?id_berita=

Hasilnya:

Setelah dilakukan seperti diatas, Buka pilihan Split

STMIK Pringsewu

44


Tarik Field id_berita pada panel Binding

Tarik id_berita ke sini

Hasilnya :


Firefox

pada

address

ketikkan

STMIK Pringsewu

45


Membuat NavigasiLetakkan kursor didalam cell baris ke3 pada table.

Letakkan kursor disini

Pada Toolbar Application pilih Recordset Navigation Bar

Pilih option Image jika muncul dialog dan klik OK

Hasilnya :

STMIK Pringsewu

46


12. Membuat Halaman Detil BeritaHalaman ini digunakan untuk menampilkan berita secara detil ketika kita memilih pilihan berita yang ada pada index. Buka kembali file index.php

Simpan ulang [File] > [Save As] file tersebut dengan nama detil_berita.php

Buka panel Application dan pilih Tab Bindings

STMIK Pringsewu

47


Klik tombol (+) pilih Recordset (Query)


hasilnya:

STMIK Pringsewu

48


Masukkan kursor pada kolom sebelah kanan

Tambahkan table dengan property seperti dibawah ini

Masukkan kursor ke kolom ini

Hasilnya :

Ubah tinggi masing-masing cell tersebut menjadi 30

Ubah tinggi masingmasing cell menjadi 30

STMIK Pringsewu

49


Buka panel application, klik tanda (+) sehingga tampil semua field yang ada

Masukkan field-field tersebut pada table yang sudah kita buat, seperti dibawah ini

Klik field disamping kemudian tarik dan masukkan kedalam table seperti diatas

Tambahkan teks Ke Home dengan isi Link : index.php

Tambahkan teks ini dan buat Link dengan tujuan Index.php jika diklik nantinya akan kembali ke halaman depan

STMIK Pringsewu

50



Firefox

pada

address

ketikkan

Sebagai contoh klik link disini maka akan ditampilkan detil berita seperti dibawah ini

Jika di klik pada salah satu pilihan Berita maka akan tampil seperti dibawah ini.

STMIK Pringsewu

51


13.

Membuat Tampilan Berita Terbaru

Buka kembali File index.php

Buka panel Application, pilih tab Bindings

STMIK Pringsewu

52


Klik tombol (+) pilih Recordset (Query)


id_berita di Sortir secara Descending bermaksud bahwa berita yang ditampilkan adalah yang terakhir diinputkan

Hasilnya :

STMIK Pringsewu

53


Masukkan kursor kekolom sebelah kanan

Tambahkan table baru dengan ketentuan sebagai berikut

Masukkan kursor disini

Hasilnya :

Ubah ukuran tinggi table tersebut menjadi 30

Blok ke2 baris tersebut ubah tingginya menjadi 30

Pada baris pertama isikan teks : Berita Terupdate hari ini

STMIK Pringsewu

54


Klik dan masukkan kursor pada baris ke2Masukkan kursor disini

Tambahkan tabel baru dengan property sebagai berikut

Tarik field Judul seperti dibawah ini

Letakkan kursor diaris berikutnya

Masukkan kursor disini

Ubah tampilan ke dalam Split, ketikkan kode php dibawah ini

STMIK Pringsewu

55


Tambahkan teks lanjut

Tambahkan teks Lanjut

Blok teks lanjut kemudian pada properties Link isikan Seperti dibawah inidetil_berita.php?id_berita=

Lakukan hal yang sama untuk Judul

Klik Tabel yang telah dibuat, dari toolbar application pilih Repeat Region

Atur property seperti dibawah ini

STMIK Pringsewu

56


Hasilnya akan tampil seperti dibawah ini

Untuk melihat hasilnya, jalankan Mozilla Firefox pada address ketikkan http://localhost/belajarweb kemudian enter

STMIK Pringsewu

57

Materi Web I Jadi

Documents

Transcript of Materi Web I Jadi