JOBSHEET

Koneksi PHP dan MySQL Mapel Desain Multimedia Interaktif

Kelas XII Mulimedia
Sub Materi:

1. Perintah koneksi antara basisdata dan php

2. Perintah SQL memasukkan data dari web ke dalam basisdata

Persiapan :

1. Persiapkan XAMPP dan pastikan bahwa Apache berjalan.

2. Persiapkan folder belajar_koneksi yang tersimpan di dalam folder xampp\htdocs
3. Persiapkan dreamweaver
4. Persiapkan Web browser

Langkah Praktikum:

A. Membuat file koneksi antara basis data dengan php

1. Buka dreamweaver > pilih php
2. Hapus semua skrip HTML, kemudian ketikan skrip koneksi berikut:

3. Simpan dengan nama koneksi.php di folder belajar_koneksi

4. Untuk mengecek apakah koneksi berhasil atau tidak, ketikkan pada address bar:

5. Koneksi berhasil jika dia tidak ada tulisan apa-apa

6. Coba jika $db_name diganti dengan nama database lain yang tidak ada.
Misal, “si_rumahsakit”, kemudian Save

Zubaidi, ST
 7. Refresh localhost/belajar/belajar_koneksi/koneksi.php

Hal tersebut terjadi karena tidak ada database “si_rumahsakit” dalam

server localhost.
8. Jangan lupa! Kembalikan file koneksi.php seperti semula
$db_name = “si_perpustakaan” kemudian Save.

B. Membuat file tampilan untuk memasukkan data ke dalam database

1. Buka dreamweaver > pilih php
2. Sekarang kita akan membuat tampilan web seperti di bawah ini

3. Pertama, buat terlebih dahulu form. Klik simbol seperti ini

Atau klik menu insert form form

4. Ketikkan NIS pada design, kemudian masukkan textfield dengan cara klik
Atau klik menu insert form text field klik OK

5. Ketikkan Nama pada design, kemudian masukkan textfield dengan cara klik
Atau klik menu insert form text field klik OK
6. Ketikkan Jenis Kelamin, kemudian masukkan select (list/menu) dengan cara klik

Atau klik menu insert form select (list/menu) klik OK

7. Ketikkan Alamat pada design, kemudian masukkan textarea dengan cara

klik Atau klik menu insert form textarea klik OK

8. Terakhir, masukkan tombol submit dengan cara klik

Atau klik menu insert form button klik OK

Zubaidi, ST
Setelah semua dibuat, tinggal atur setiap atribut nama setiap inputan.

9. Split tampilan dreamweaver, sehingga dapat melihat code dan design

10. Klik inputan yang berada di pinggir NIS, kemudian ganti name di code dengan
NIS

11. Klik inputan yang berada di pinggir Nama, kemudian ganti name di code dengan
nama

12. Klik inputan yang berada di pinggir Jenis Kelamin

13. Kemudian klik List Value yang berada di bawah (di bagian properties)

14. Tambahkan seperti di bawah

Untuk menambahkan baris, klik tanda tambah.

15. Klik OK
16. Ganti name dalam code dengan jk

17. Klik inputan yang berada di pinggir Alamat, kemudian ganti name di code
dengan alamat

18. Terakhir, klik <form> yang berada di bagian bawah code

Zubaidi, ST
 19. Ganti Action= “tambahsiswa.php” dan method=”post”

20. Save di folder belajar_koneksi dengan nama siswa.php

C. Membuat file aksi untuk menambahkan data ke basisdata

1. Buat halaman php baru
2. Buat tampilan dreamweaver menjadi code
3. Hapus semua skrip HTML
4. Ketikkan skrip berikut

5. Masih disimpan di folder belajar_koneksi dengan nama tambahsiswa.php

6. Masuk ke web browser, ketikkan di address bar :
Localhost/belajar_koneksi/siswa.php
7. Masukkan data siswa, Ingat jangan sampai ada NIS sama yang dimasukkan!

8. Klik Submit
9. Jika berhasil, maka tidak ada tulisan apapun.

Zubaidi, ST
 10. Untuk mengecek apakah sudah masuk atau belum datanya, lihat
di Localhost/phpmyadmin

11. Pilih si_perpustakaan tabel siswa

12. Maka ada tambahan data yang dimasukkan melalui webbrowser

Tugas:
Buatlah seperti web di atas untuk memasukkan data di tabel buku!

Cumungut eaa ceman-ceman..

Zubaidi, ST