Panduan Belajar Website PHP MySQL dengan Dreamweaver

1

Koleksi Buku dari Penerbit GAVAMEDIA , Yogyakarta Penulis : Bunafit Nugroho , dan Indah Indriyanna

Harga: Rp. 57.500,-

Harga: Rp. 65.500,-

Harga: Rp. 36.500,-

Harga: Rp. 67.500,-

Harga: Rp. 66.500,-

Harga: Rp. 49.500,-

2

Harga: Rp. 49.500,-

Harga: Rp. 33.500,-

Iklan : di atas adalah 3 Buku Cetak bertema Panduan Tugas Akhir(TA) dan Skripsi, terbitan Penerbit Alif Media, Penulis Indah Indriyanna dan Bunafit N, dan sudah beredar di Gramedia .............ssst,....kami punya buku baru lhoo..., cekiDot:

3

Penerbit MediaKita, Jakarta

Terbitan Penerbit ANDI, Yogyakarta

4

Terbitan Alif Media, Yogya

5

Dasar Website PHP – MySQL dengan Editor Dreamweaver ( Penulis: Bunafit Nugroho )

Membuat Form Manjemen Data Siswa Pendahuluan Pada bab ini merupakan dasar dan langkah awal dalam menggunakan program PHP untuk mengakses database MySQL. Bagi para pembaca awam, maka didalam bab ini Anda akan mendapatkan pelajaran yang sangat berarti dalam belajar pemrograman PHP dan MySQL, terutama penggunaan Dreamweaver MX atau 8 sebagai editor pembuatnya.

Persiapan Database dan Tabel Pada subbab ini Kita masih akan menggunakan database lama yang telah Kita buat sebelumnya, yaitu data_sekolahdb. Database ini telah dibuat apabila Anda mempelajari pembahasan dasar MySQL pada Bab4. Apabila belum memiliki database tersebut, maka Anda dapat membuatnya dengan menuliskan peirntah berikut: mysql> CREATE DATABASE data_sekolahdb; Query OK, 1 row affected (0.08 sec) Dari perintah diatas, apabila telah mendapatkan parameter “ Query OK, 1 row affected (0.08 sec ” maka database yang dibuat telah sukses dibuat, sedangkan apabila Anda mendapatkan hasil :

6

mysql> CREATE DATABASE data_sekolahdb; ERROR 1007 (00000): Can't create database 'data_sekolahdb'. Database exists Perintah diatas menandakan Anda telah memiliki database didalam server MySQL. Untuk memastikan keberadaan database data_sekolahdb didalam server, Anda dapat menggunakan peirntah “SHOW DATABASES”.

Sekarang aktifkan database tersebut dengan menuliskan perintah USE seperti berikut: mysql> USE data_sekolahdb; Database changed Membuat Tabel Siswa Tabel siswa digunakan untuk merekam data siswa. Pada latihan ini, kami menggunakan beberapa data dengan tipe data yang berbeda, sehingga dapat menjadi pengembangan pemahaman Anda. Rancangan dari tabel ini dapat dilihat pada struktur tabel berikut:

7

Tabel 1 Rancangan pembuatan tabel siswa Kolom Tipe Lebar Keterangan nis CHAR 4 PRIMARY KEY nama VARCHAR 35 kelamin ENUM (‘P’,’W’) almt_asal VARCHAR 60 almt_tinggal VARCHAR 60 tmpt_lahir VARCHAR 25 tgl_lahir DATE agama VARCHAR 15 Dari rancangan tabel siswa diatas, kita dapat mengimplementasikannya didalam MySQL dengan menjalankan perintah: CREATE TABLE siswa ( nis char(4) NOT NULL, nama varchar(35) NOT NULL, kelamin enum('P', 'W'), almt_asal varchar(60) NOT NULL, almt_tinggal varchar(60) NOT NULL, tmpt_lahir varchar(25) NOT NULL, tgl_lahir date NOT NULL, agama varchar(15) NOT NULL, PRIMARY KEY (nis) ); Hasil perintah diatas dapat dilihat dengan perintah DESC, berikut hasilnya:

8

Gambar Deskripsi tabel siswa

Membuat Program Manajemen Data Setelah database dan tabel selesai dibuat, maka langkah selanjutnya adalah membuat program untuk memasukan data. Untuk membuatnya, Anda dapat mengikuti langkah-langkah berikut. Membuat File Koneksi Server MySQL File koneksi digunakan untuk menghubungkan program pada server MySQL. Didalam file program ini terdapat fungsi koneksi server dan fungsi pengaktifkan database. Dengan membuat program koneksi yang disimpan dalam file tersendiri, maka kita dapat menggunakan program kon eksi ini untuk program yang lainnya. Untuk membuatnya, Anda dapat mengikuti langkah berikut: 1. Sekarang Kita sudah mulai menggunakan editor Dreamweaver MX untuk menuliskan semua kode program yang dibahas, untuk itu bukalah aplikasi Dreamweaver MX yang telah terinstal dalam komputer Anda. 2. Bukalah dokumen baru dengan jenis halaman PHP, yaitu melalui menu File, pilih menu New, kemudian pada halaman New Document dapat memilih tombol Dynamic Pages dan PHP.

9

Gambar Membuka halaman editor untuk PHP 3. Pada bab ini Kita akan mengunakan folder Bab7 sebagai penyimpanan semua latihan. Untuk itu, buatlah subfolder bernama Bab7 pada folder root server, kemudian simpanlah halaman baru ini dengan menggunakan nama inc.koneksi.php. 4. Selanjutnya, masuklah pada halaman kode, caran ya adalah melalui menu View, kemudian pilih menu Code. Cara lain adalah dengan mengklik tab Code yang ada pada bagian kiri atas halaman kerja.

Gambar Mengaktifkan halaman kerja bentuk kode 5. Setelah berada pada halaman kode, hapuslah semua tag HTML yang telah ada sebelumnya, karena pada pembuatan kode PHP Kita tidak memerlukannya. 6. Setelah semua tag dihapus, maka status halaman kerja Anda menjadi kosong. Pada halaman tersebut Anda dapat menuliskan skrip PHP yang hendak dibuat, berikut contohnya. 10

Gambar 7 Tampilan halaman kode dengan skrip PHP 7. Untuk membuat program koneksi database, Anda dapat menuliskan skrip lengkap seperti dibawah. Listing Program Bab7/inc.koneksi.php 11

Akhir Listing

Keterangan Program : 

$sever : Adalah alamat host di mana anda menjalankan program anda , buatlah localhost jika anda menjalankan program ini pada komputer local . localhost di sini di maksutkan untuk melakukan koneksi ke dalam server database MySQL



$username : Adalah nama user MySQL yang Kita miliki, apabila belum ada, maka Kita harus membuatnya terlebih dahulu. Untuk menggunakan username anonymouse, maka Kita dapat mengosongkan isi username-nya.



$passwrod : Adalah pasword untuk user yang Kita gunakan. Disini kita akan menuliskan paswword yang tidak terenkripsi, jadi berhati hatilah dalam membuat file ini jangan sampai diketahui oleh orang lain, hal ini karena sangat berkaitan dengan keamanan data yang Anda miliki.



$database : Adalah nama database yang akan dikoneksikan, database ini menjadi pusat penyimpanan data pada program yang akan dibuat.



mysql_connect() : Perintah ini berguna untuk melakukan koneksi terhadap server MySQL.



mysql_select_db() : Adalah fungsi untuk dapat membuka akses database yang ada pada server MySQL.



Or die () : Perintah ini digunakan untuk menampilkan pesan saat perintah yang dijalankan terjadi kesalahan, perlu Anda ketahui bahwa pesan yang ditampilkan berkaitan dengan perintah yang terdapat parameter ini.

12

Selain penjelasan beberapa perintah diatas, Anda dapat lebih memahami perjalanan setiap kode program seperti penjelasan berikut: $server $username $password $database

="localhost"; =" "; =" "; ="data_sekolahdb";

Untuk mendefinisikan alamat komputer ser ta user database yang digunakan untuk login server. Apabila hendak menggunakan user tamu (anonymouse), maka Anda dapat menuliskan kodenya sebagai berikut: $server $username $password $database

="localhost"; =""; =""; ="data_sekolahdb";

Untuk instalasi MySQL standar, Anda juga dapat menggunakan jenis koneksi root seperti berikut: $server $username $password $database

="localhost"; ="root"; =""; ="data_sekolahdb";

Sedangkan fungsi konek servernaya adalah: $konek =mysql_connect ($server, $username, $password) or die ("Gagal konek ke server MySQL".mysql_error()); pada perintah diatas, apabila terjadi kegagalam koneksi, maka program akan menampilkan pesan kesalahan yang berbunyi “ Gagal konek ke 13

server MySQL”. Sedangkan apabila berhasil konek, maka program a kan segera membuka database bernama data_sekolahdb dengan menjalankan script berikut: $bukadb=mysql_select_db($database) or die ("Gagal membuka database $database".mysql_error()); pada perintah diatas apabila terjadi kesalahan juga akan menampilkan pesan, yaitu “Gagal membuka database data_sekolahdb ”. Program Tambah Data Siswa Setelah file program koneksi selesai dibuat, maka Kita sudah dapat melanjutkan pelajaran untuk membuat program simpan data. Pada bagian ini Anda akan kami bimbing untuk membuat pr ogram simpan secara mudah dengan memanfaatkan editor Dreamweaver MX tentunya. Untuk membuat program tambah atau simpan data, Kita paling tidak akan memerlukan dua file program. Kedua file program tersebut yang pertama adalah program yang berisi form masuk an data, dan yang kedua adalah program yang berisi skrip penyimpan data. Bentuk penggambaran lengkapnya dapat dilihat pada gambar berikut:

Gambar Penggambaran dan aliran program simpan

14

Seperti yang telah digambarkan diatas, maka pada latihan ini Kita ak an membuat dua file program, yaitu FmSiswaIn.php sebagai formulir masukan, dan file FmSiswaSim.php sebagai program penyimpan. Untuk lebih jelasnya, ikutilah langkah-langkah berikut.  Langkah 1 : Membuat Formulir Masukan Data Pada langkah pertama ini kita a kan membuat program utama masukan data, yaitu file bernama FmSiswaIn.php. Program ini berisi formulir masukan yang nantinya tempat anda untuk entri data. Berikut langkahnya: 1. Buatlah kembali dokumen baru dengan jenis halaman PHP, yaitu melalui menu File, pilih menu New, kemudian pada halaman New Pages dapat memilih tombol Dynamic Pages dan PHP. 2. Untuk dapat membuat form, Anda dapat mengaktifkan komponen ikon form pada halaman kerja.

Gambar Mengaktifkan komponen Form 3. Untuk membuat formulir, pertama Anda har us menambahkan objek form kedalam halaman kerja. Caranya adalah dengan mengklik ikon form ( ) pada jendela ikon, atau melalui menu Insert, pilih Form, kemudian pilih Form lagi. Anda akan segera mendapatkan objek form bergaris merah pada halaman kerja.

Gambar Objek form telah terbuat dalam halaman kerja 15

4. Perhatikan pada jendela Properties yang ada pada bagian bawah halaman, sekarang masukan alamat file penyimpanan program yang nanti akan dibuat, Anda apat menuliskan alamat FmSiswaSim.php pada kolom Action, dan memberikan nilai POST pada Method. Berikut contohnya:

Gambar Memberikan alamat penyimpanan pada Form 5. Sampai saat ini Anda masih didalam objek objek Tabel ( ) kedalam halaman kerja form). Seperti pelajaran yang lalu, bahwa kerangka formulir. Tabel dibuat dengan kolom=2. berikut contoh desainnya:

form, sekarang buatlah (masih didalam objek tabel digunakan untuk banyak baris=11 dan

Gambar Desain tabel untuk formulir siswa 6. Pada pembuatan tabel diatas, kolom yang dibuat adalah sebanyak 2, pada bagian kiri akan digunakan sebaga label keterangan, dan kolom sebelah kanan akan dijadikan sebagai tempat objek masukan.

16

Gambar Tampilan form awal 7. Sekarang tambahkan objek form lengkap dan desainlah setiap komponen formnya beserta keterangan yang sesu ai dengan struktur database siswa yang hendak diinput. 8. Kemudian aturlah setiap objek form yang dimasukan melaui jendela Properties, bentuk pengaturannya dapat melihat pada tabel berikut.

Gambar Pengaturan objek formulir Berikut daftar pengaturan lengk apnya: Tabel Pengaturan form masukan data siswa Komponen Properti Nilai Text Field1 TextField FmNis Name Char With 6 Max Char 4 Keterangan Nis Text Field2 TextField FmNama Name Char With 30 17

Radio Button1

Radio Button2

Text Field3

Text Field4

Text Field5

Text Field6

Max Char Keterangan RadioButton Name Checked Value Initial State Keterangan RadioButton Name Checked Value Initial State TextField Name Char With Max Char Keterangan TextField Name Char With Max Char Keterangan TextField Name Char With Max Char Keterangan TextField Name Char With Max Char

35 Nama Siswa RbKelamin P Checked Kelamin RbKelamin W Unchecked FmAlamatAsl 40 60 Alamat Asal FmAlamatTgl 40 60 Alamat Tinggal FmTempatLhr 25 25 Tempat Lahir FmTgl 2 2 18

Text Field7

Text Field8

Radio Button1

Radio Button2

Radio Button3

Button

Keterangan TextField Name Char With Max Char TextField Name Char With Max Char RadioButton Name Checked Value Initial State Keterangan RadioButton Name Checked Value Initial State RadioButton Name Checked Value Initial State Button Name Value

Tanggal Lahir FmBln 2 2 FmThn 4 4 RbAgama Islam Checked Agama RbAgama Hindu Unchecked RbAgama Buda Unchecked simpan Simpan

9. Setelah selesai menambahkan objek form kedalam kerangka tabel, dan semya objek telah selesai diatur nilai propertie -nya, maka Anda seharusnya mendapatkan hasil seperti gambar berikut:

19

Gambar Hasil desain formulir masukan data siswa Catatan: Pada bagian judul tabel, Anda dapat menggunakan fasilitas Merger Cell untuk menggabungkan dua sell data. 10. Setelah selesai melakukan pengaturan tata letak objek form, Anda dapat menyimpan kedalam file bernama FmSiswaIn.php, simpanlah kedalam folder Bab7. 11. Dari kesemua langkah yang telah dilakukan diatas, apabila Anda masuk pada halaman kode, maka Anda akan mendapatkan hasil dari setiap langkah tersebut berupa tag -tag HTML. Berikut adalah listingnya: Sumber Buku : Latihan Membuat Aplikasi Website dengan PHP – MySQL dan Editor Dreamweaver 8/Cs, Penerbit Gava Media, Yogyakarta 20

Listing Program Bab7/FmSiswaIn.php Form masukan data siswa Masukan Data Siswa Nis : Nama Siswa : Kelamin : 21

Pria Wanita Alamat Asal : Alamat Tinggal : Tempat Lahir : Tanggal Lahir : 22

Agama : Islam Hindu Buda Kristen   Akhir Listing 23

12. Listing program FmSiswaIn.php diatas dapat buat langsung pada halaman kode apabila Anda mengalami kesulitan dalam mengikut i langkah desain. Setelah selesai, apabila dijalankan, hasil yang diperoleh adalah:

Gambar Hasil formulir masukan dengan contoh data  Langkah 2 : Membuat Program Simpan Data Pada langkah 4 diatas Kita telah membuat nama file FmSiswaSim.php sebagai alamat program eksekusi penyimpanan data, untuk itu sekarang Kita akan membuat program tersebut. 1. Sekarang buatlah halaman baru dari Dreamweaver MX Anda. 2. Masuklah kedalam halaman kode, cara melalui menu View, pilih menu Code. Atau dapat mengklik tab Code pada halaman kerja. 24

3. Hapuslah semua kode HTML yang ada pada halaman kode. 4. Kemudian tuliskan semua kode penyimpanan pada halaman kode, skrip lengkapnya seperti listing program berikut: Listing Program Bab7/FmSiswaSim.php