TNR FONT 14 BOLD MODUL V DREAMWEAVER TNR 12pt Line spacing 1,5 I. Pendahuluan Bahasa Asing Italic Before After 0 A. Latar Belakang Margin 4333 - Paragraf 1, Pengertian SIM secara global - Paragraph 2 pengertian dreamweaver - Paragraph 3, permasalahan B. Rumusan Masalah Adapun rumusan masalah praktikum xxx adalah sebagai berikut :..? C. Tujuan Praktikum Tujuan dari praktikum modul V ini adalah: 1. 2. 3. dst II. Tinjauan Pustaka (min 5 lembar) III. Langkah - Langkah Pengerjaan A. Tugas Praktikum Seorang pengusaha mempunyai keinginan membuka sebuah sistem persediaan barang dimana memiliki sistem informasi yang dapat diakses
melalui web. Hal tersebut dilakukan karena untuk mempermudah dalam pengecekan dan pembahasan setiap data serta mengetahui ketersediaan barang yang ada di gudang. Pada sistem informasi tersebut sebagai database memiliki lima entitas yaitu entitas gudang (atribut kode_distributor, no_gudang, tanggal dan keterangan), entitas distributor (atribut kode_petugas, nama_distributor, dan kota), entitas barang (atribut kode_petugas, nama_barang, stock dan harga), entitas pengawas (kode_petugas dan nama_petugas ), entitas meminta (atribut no_gudang dan kode_barang). Untuk mempermudah sistem informasi pada perusahaan, maka buatlah pemrograman web dengan bahasa PHP. Langkah-Langkah Pengerjaan 1. Aktifkan PHP, Apache dan MySQL dengan membuka XAMPP Control Panel dan klik Start pada Apache dan MySQL. Gambar 3.1 Aktifkan PHP, Apache dan MySQL pada XAMPP
2. Buka Macromedia Dreamweaver. Gambar 3.2 Buka Dreamweaver 3. Buka database yang telah dibuat pada local host PHP dengan membuka http:/localhost/phpmyadmin menggunakan browser Google Chrome. Gambar 3.3 Buka Local Host
4. Buatlah site baru dengan Menu Site>New Site. Pada Category-Local Info, site name diisi nama sesuai database. Gambar 3.4 Membuat Site Baru 5. Kemudian pada local root folder, klik pilih xampp - htdoc - (buat new folder (sesuai nama database)) - select. Pada HTTP address tuliskan localhost. Gambar 3.5 Isi Local Root Folder dan HTTP address
6. Dalam Category-Remote Info, pada access pilih local/network. Sedangkan remote folder klik database). pilih xampp - htdoc - (nama Gambar 3.6 Isi Access dan Remote Folder 7. Pada Category - Testing Server, server model pilih PHP MySQL - Access pilih Local/Network - URL prefix isikan kolom dengan nama sesuai database, di akhir kata diakhiri dengan (/). Klik OK. Gambar 3.7 Isi Server Model, Access dan URL Prefix
8. Klik file - new - dynamic page - PHP - create. Gambar 3.8 Buat Dynamic Page - PHP 9. Klik insert table. Pada Table size isi sesuai dengan keinginan. Klik OK. Gambar 3.9 Buat Tabel dengan Ukuran Tersebut 10. Pada properties, pilih Align - center. Gambar 3.10 Pilih Align - Center
11. Blok baris pertama dan ketiga pada kolom pertama dan kedua. Klik kanan - table - merge cell. Gambar 3.11 Merge Cell Baris Pertama dan Ketiga 12. Klik tabel yang ingin diberi warna. Pada properties klik Bg (Background colour). Pilih warna sesuai map masing-masing RGBnya. Gambar 3.12 Beri Warna Pada Tabel
13. Isikan tampilan awal sesuai dengan tema database beserta atribut yang diinginkan. Gambar 3.13 Isi Tampilan Awal Sesuai Tema Database 14. Jika atribut sudah terbuat. Blok kata yang ingin dijadikan link dengan cara pada properties - kolom link - isikan sesuai home -home.php, login - login.php. Gambar 3.14 Buat Kata yang Ingin Dijadikan Link
15. Save file. Gambar 3.14 Save File 16. Save as - ganti nama sesuai atribut baru yaitu login.php. 17. Buka file-home.php. Gambar 3.16 Save As File Gambar 3.17 Buka File-Index.php
18. Kemudian klik application-database-pilih tanda (+) klik MySQL Connection. Gambar 3.18 Pilih MySQL connection 19. Lalu mengisi pada MySQL Connection sebagai berikut: Name : koneksi MySQL Server : localhost User name : root Gambar 3.19 Isi MySQL Connection sesuai petunjuk
20. Pilih database sesuai dengan nama database yang telah dibuat (persediaan), lalu klik Ok. Gambar 3.20 Isi Nama Database 21. Pilih bindings, klik tanda (+) - recordset query. Gambar 3.21 Pilih Recordset Query
22. Pada kotak recordset, isikan data name: barang, connection pilih koneksi, klik Ok. Gambar 3.22 Isi Recordset sesuai petunjuk 23. Klik insert - application objects - dynamic data - dynamic table. Gambar 3.23 Pilih Dynamic Table
24. Isikan data pada dynamic table, untuk recordset show - pilih All Records - isi border (1) - cell padding (4) - cell spacing (0), klik Ok. Gambar 3.24 Isi Dynamic Table 25. Kemudian lakukan save di file index.php. Gambar 3.25 Save File
26. Buka file login.php - ubah tampilan sesuai keinginan. Gambar 3.26 Buka File login.php 27. Pilih bindings, klik tanda (+) - recordset query. Pada kotak recordset, isikan data name: petugas, connection pilih koneksi, tables: pengawas klik Ok. Gambar 3.27 Isi Recordset sesuai petunjuk
28. Klik insert form text field ubah label menjadi username klik OK. Lakukan hal yang sama pada dan ubah label menjadi password. Gambar 3.28 Pilih Form Text Field 29. Klik insert form button - kosongkan label klik OK Gambar 3.29 Isikan Data Pada Record Insertion Form
30. Ganti Button Name nya menjadi Log In. Ganti type password text field menjadi password. Gambar 3.30 Tampilan log in 31. Klik insert - application objects user authentication Log In User. Gambar 3.31 Pengaturan Log In User
32. Pada tabel Log In User isi sesuai dengan petunjuk. Gambar 3.32 Pengisian Log In User 33. Kemudian lakukan save di file login.php Gambar 3.33 Save File 34. Lalu isi keterangan Maaf Data Anda Salah di sebelah Log In. Gambar 3.34 Tulisan Jika Data Salah
35. Kemudian lakukan save as dengan nama file gagal.php 36. Buat tampilan web seperti berikut Gambar 3.35 Save File Gambar 3.36 Tampilan Web
37. Jika atribut sudah terbuat. Blok kata yang ingin dijadikan link dengan cara pada properties - kolom link - isikan sesuai home - sukses.php, input barang inputbarang.php, data barang databarang.php, dst kecuali log out- home.php. 38. Ubah tampilan seperti berikut Gambar 3.37 Link Atribut 39. Save as dengan nama sukses.php Gambar 3.38 Tampilan Web Gambar 3.39 Save File
40. Kosongkan tampilan dalam. Pilih bindings, klik tanda (+) - recordset query. Gambar 3.40 Pilih Recordset Query 41. Pada kotak recordset, isikan data name: barang, connection pilih koneksi, table: barang, klik Ok. Gambar 3.41 Isikan Data Pada Kotak Recordset
42. Klik insert - application objects - insert record - record insertion from wizard. Gambar 3.42 Pilih Record Insertion Form Wizard 43. Lalu isikan data dengan connection (koneksi) - table (barang). Pada after inserting isikan databarang.php. Pada form lalu pada label klik kode_petugas, pada display as pilih (menu). Gambar 3.43 Isi Record Insertion Form Sesuai Petunjuk
44. Pada menu properties ubah recordset menjadi barang. Get label dan Get Values ganti kode_barang. Klik OK. Gambar 3.44 Pengaturan Atribut Barang Get Label dan Get Values 45. Pada properties ubah value menjadi input barang. Klik Enter. Gambar 3.45 Tampilan Value Input Barang
46. Lakukan save as dengan nama file inputbarang.php. Gambar 3.46 Save File 47. Kosongkan tampilan web. Lalu Klik insert - application objects - dynamic data - dynamic table. Gambar 3.47 Pilih Dynamic Table
48. Isikan data pada dynamic table, untuk recordset barang - pilih All Records - isi border (1) - cell padding (10) - cell spacing (2), klik Ok. Gambar 3.48 Isi Dynamic Table 49. Kemudian lakukan save as dengan nama file databarang.php. Gambar 3.11 Save as File
50. Kosongkan tampilan dalam. Pilih bindings, klik tanda (+) - recordset query. Gambar 3.50 Pilih Recordset Query 51. Pada kotak recordset, isikan data name: gudang, connection pilih koneksi, table: gudang, klik Ok. Dan juga lakukan pada database meminta. Gambar 3.51 Isikan Data Pada Kotak Recordset
52. Klik insert - application objects - insert record - record insertion from wizard. Gambar 3.52 Pilih Record Insertion Form Wizard 53. Lalu isikan data dengan connection (koneksi) - table (meminta). Pada after inserting isikan datapemesanan.php. Pada form lalu pada label klik kode_barang dan no_gudang, pada display as pilih (menu). Gambar 3.53 Isi Record Insertion Form Sesuai Petunjuk
54. Pada menu properties ubah recordset menjadi barang. Get label dan Get Values ganti kode_barang. Klik OK. Begitu juga dengan No_Gudang Gambar 3.54 Pengaturan Properties pada Barang dan Gudang 55. Pada properties ganti values pesan. Gambar 3.55 Tampilan Value Pesan
56. Lakukan save as dengan nama file pemesanan.php. Gambar 3.56 Save File 57. Kosongkan tampilan web. Lalu Klik insert - application objects - dynamic data - dynamic table. Gambar 3.57 Pilih Dynamic Table
58. Isikan data pada dynamic table, untuk recordset meminta - pilih All Records - isi border (1) - cell padding (10) - cell spacing (2), klik Ok. Gambar 3.58 Isi Dynamic Table 59. Kemudian lakukan save as dengan nama file datapemesanan.php. Gambar 3.59 Save as File 60. Buka localhost/persediaan pada browser. Gambar 3.60 Tampilan localhost/persediaan pada Browser B. Tugas Laporan Resmi (Idem semua file harus ada)
IV. Hasil dan Pembahasan A. Tugas Praktikum Adapun output program pada sistem informasi pemrograman web toko barang online adalah sebagai berikut: Gambar 4.1 Tampilan Menu home.php Gambar 4.2 Tampilan Menu Login.php Gambar 4.3 Tampilan Menu sukses.php
Gambar 4.4 Tampilan Menu gagal.php Gambar 4.5 Tampilan Menu inputbarang.php Gambar 4.6 Tampilan Menu databarang.php Idem sampai dengan datapengawas.php
Gambar 4.13 Tampilan Menu pemesanan.php Gambar 4.14 Tampilan Menu datapemesanan.php B. Analisa Output Tugas Praktikum Berdasarkan output sistem informasi pemrograman web sistem persediaan diatas dapat diketahui bahwa gambar 4.1 merupakan tampilan menu home.php terdiri dari tabel entitas data barang pada database sistem persediaan. Berdasarkan gambar tersebut dapat diketahui pula bahwa tabel entitas data barang memiliki empat atribut yaitu kode_barang, nama_barang, stock, dan harga. Masing-masing atribut memiliki data yang telah dimasukkan sebelumnya. Gambar 4.2 sampai selesai (Idem menyesuaikan isi gambar) C. Tugas Laporan Resmi D. Analisa Output Laporan Resmi V. Kesimpulan dan Saran A. Kesimpulan Berdasarkan hasil analisa diatas didapatkan kesimpulan sebagai berikut: Tugas Praktikum
Tugas Laporan Resmi B. Saran (minimal 5) VI. Daftar Pustaka Anonim. 2015. MySQL. https://id.wikipedia.org/wiki/mysql. Darmawan, Deni. 2013. Sistem Informasi Manajemen. Jakarta : Rosda. Narendra, Vicky. 2013. Tutorial Dreamweaver. http://mistertica.blogspot.co.id/2013/10/tutorial-dreamweaver.html. Penyusun. 2017. Modul Praktikum Sistem Informasi Manajemen. Surabaya : Laboratorium Manajemen Industri. Yoga, Prima. 2012. Pengertian dan Kegunaan MySQL. http://infokah.com/pengertian-dan-kegunaan-mysql.