materi web i jadi
Post on 12-Jul-2015
831 Views
Preview:
TRANSCRIPT
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Maka akan tampil seperti dibawah ini
Buat database baru dengan nama dbbelajar
Hasilnya :
Buat Table Baru berita klik tombol Go
STMIK Pringsewu
2
Pemrograman Web (PHP, MySQL & Dreamweaver)
Buatlah seperti dibawah ini
Klik tombol Simpan atau Save
Kemudian buat juga table seperti dibawah ini
STMIK Pringsewu
3
Pemrograman Web (PHP, MySQL & Dreamweaver)
Membuat Halaman Web1.
Membuat Koneksi Situs
Buka Dreamweaver, dari menu [Site]>[Manage Site]
Klik tombol New pilih Site
STMIK Pringsewu
4
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Atur propertinya seperti dibawah ini
STMIK Pringsewu
13
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Hasilnya :
Tambahkan kembali satu buah Table dengan properties seperti dibawah ini
Hasilnya :
STMIK Pringsewu
17
Pemrograman Web (PHP, MySQL & Dreamweaver)
Ubah ukuran tinggi menjadi 30
Ubah juga backgroundnya seperti dibawah ini
Hasilnya :
Tambahkan kode seperti dibawah ini
STMIK Pringsewu
18
Pemrograman Web (PHP, MySQL & Dreamweaver)
Hasilnya :
STMIK Pringsewu
19
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Untuk melihat hasilnya, jalankan Mozilla http://localhost/belajarweb kemudian enter
Firefox
pada
address
ketikkan
STMIK Pringsewu
22
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Untuk melihat hasilnya, jalankan Mozilla http://localhost/belajarweb kemudian enter
Firefox
pada
address
ketikkan
STMIK Pringsewu
24
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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 :
Pada Kode ketikkan :
Pada Kode ketikkan :
STMIK Pringsewu
28
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Ganti dengan kode dibawah ini
Kemudian simpan kembali file tersebut, [File] > [Save]
STMIK Pringsewu
32
Pemrograman Web (PHP, MySQL & Dreamweaver)
9. Membuat User OnlineSebelum membuat file online.php kita harus membuat terlebih dahulu file online.txt, buka notepad dari Start > All Programs > Accecories > Notepad
Maka akan tampil seperti dibawah ini
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
STMIK Pringsewu
36
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
11. Membuat Link BeritaBuka kembali file kiri.php
Buka panel Application, pilih tab Bindings
STMIK Pringsewu
39
Pemrograman Web (PHP, MySQL & Dreamweaver)
Klik tanda (+) pilih Recordset (Query)
Ketikkan seperti dibawah ini
......
Pilih Connection sesuai dengan koneksi yang dibuat
Klik tombol Avdanced
STMIK Pringsewu
40
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Pilih toolbar Application
Klik Tabel yang baru dibuat, pada panel Application pilih Repeat Region
Klik Repeat Region
Tentukan property sebagai berikut
Maka akan tampil seperti dibawah ini
Angka ini menunjukkan berapa banyak data yang akan ditampilkan
STMIK Pringsewu
43
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Tarik Field id_berita pada panel Binding
Tarik id_berita ke sini
Hasilnya :
Untuk melihat hasilnya, jalankan Mozilla http://localhost/belajarweb kemudian enter
Firefox
pada
address
ketikkan
STMIK Pringsewu
45
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Klik tombol (+) pilih Recordset (Query)
Atur propertinya seperti dibawah ini
hasilnya:
STMIK Pringsewu
48
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Untuk melihat hasilnya, jalankan Mozilla http://localhost/belajarweb kemudian enter
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
13.
Membuat Tampilan Berita Terbaru
Buka kembali File index.php
Buka panel Application, pilih tab Bindings
STMIK Pringsewu
52
Pemrograman Web (PHP, MySQL & Dreamweaver)
Klik tombol (+) pilih Recordset (Query)
Atur propertinya seperti dibawah ini
id_berita di Sortir secara Descending bermaksud bahwa berita yang ditampilkan adalah yang terakhir diinputkan
Hasilnya :
STMIK Pringsewu
53
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
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
Pemrograman Web (PHP, MySQL & Dreamweaver)
Hasilnya akan tampil seperti dibawah ini
Untuk melihat hasilnya, jalankan Mozilla Firefox pada address ketikkan http://localhost/belajarweb kemudian enter
STMIK Pringsewu
57
top related