LABORATORIUM SISTEM INFORMASI MANAJEMEN

PROGRAM STUDI TEKNIK INDUSTRI

FAKULTAS TEKNIK
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
JAWA TIMUR

MODUL III
DREAMWEAVER

I. Pendahuluan
A. Latar Belakang
Sistem informasi manajemen adalah sistem perencanaan bagian dari
pengendalian internal suatu bisnis yang meliputi pemanfaatan manusia, dokumen,
teknologi, dan prosedur oleh akuntansi manajemen untuk memecahkan masalah
bisnis seperti biaya produk, layanan, atau suatu strategi bisnis. Sistem informasi
manajemen dibedakan dengan sistem informasi biasa karena sistem informasi
manajemen digunakan untuk menganalisis sistem informasi lain yang diterapkan
pada aktivitas operasional organisasi. Secara akademis, istilah ini umumnya
digunakan untuk merujuk pada kelompok metode informasi yang bertalian dengan
otomasi atau dukungan terhadap pengambilan keputusan manusia, misalnya sistem
pendukung keputusan, sistem pakar, dan sistem informasi eksekutif.
Dreamweaver merupakan perangkat lunak yang ditujukkan untuk membuat
sebuah situs web. Dreamweaver merupakan program penyunting halaman web
keluaran Adobe System yang dulu dikenal dengan Macromedia Dreamweaver.
Dreamweaver menyediakan fitur WYSIWYG (What You See is What You Get)
yang dalam bahasa kesehariannya adalah Design View. Jadi dengan menggunakan
software Dreamweaver kita tidak perlu menguasai berbagai macam bahasa
pemrograman seperti HTML, CSS, PHP, Java Script, dan lain-lain melainkan kita
hanya harus mengetahui dasar-dasarnya saja. Untuk itu program ini banyak
digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan
kemudahan penggunaannya.
Dalam laporan praktikum ini membahas tentang suatu sistem dreamweaver
untuk peminjaman buku di Perpustakaan. Dimana hal ini digunakan untuk
mengetahui bagian-bagian apa saja yang ada pada sistem informasi peminjaman
buku di Perpustakaan. Hal ini juga dapat digunakan untuk memudahkan kita dalam
membuat suatu web dan memudahkan untuk mendesain web tersebut.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
B. Rumusan Masalah
Adapun rumusan masalah praktikum modul 3 ini adalah sebagai berikut :
“Bagaimana langkah-langkah dalam membuat situs web menggunakan
aplikasi dreamweaver untuk peminjaman buku di perpustakaan?”
C. Tujuan Praktikum
Adapun tujuan dari praktikum modul 3 ini adalah:
1. Untuk mengetahui tampilan-tampilan apa saja yang ada pada web sistem
informasi peminjaman buku menggunakan aplikasi dreamweaver.
2. Untuk mengetahui komponen apa saja yang ada dalam pembuatan sistem
informasi peminjaman buku dengan dreamweaver
3. Untuk mengetahui fungsi aplikasi dreamweaver pada pembuatan sistem
informasi peminjaman buku di perpustaakan.

II. Tinjauan Pustaka

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
A. Sistem Informasi
Teknologi informasi banyak membawa perubahan dalam organisasi dan
proses bisnis. Teknologi informasi merupakan suatu kebutuhan bagi organisasi
yang dapat membantu kinerja organisasi dan individu. Sistem informasi akan
membantu perusahaan untuk menyajikan laporan keuangan ke dalam bentuk
informasi yang akurat dan terpercaya, sehingga banyak pihak yang memanfaatkan
sistem informasi akuntansi untuk mencapai keunggulan bagi perusahaan. Sistem
informasi adalah komponen dan elemen dari suatu organisasi yang menyediakan
informasi bagi pengguna dengan pengolahan peristiwa keuangan.
Tujuan dari sistem informasi adalah menghasilkan informasi. Informasi
adalah data yang diolah menjadi bentuk yang berguna bagi para pemakainya. Untuk
dapat berguna maka informasi harus didukung oleh tiga pilar sebagai berikut: tepat
kepada orangnya atau relevan, tepat waktu dan tepat nilainya atau akurat. Keluaran
yang tidak didukung oleh tiga pilar ini tidak dapat dikatakan sebagai informasi yang
berguna. Untuk menjadi sistem informasi, maka hasil dari sistem itu harus berupa
informasi yang berguna, yaitu harus memenuhi ketiga kriteria: relevan, tepat waktu
dan akurat.
Semua organisasi membutuhkan aliran informasi yang membantu manajer
untuk mengambil bermacam keputusan yang dibutuhkan. Aliran informasi ini
diatur dan diarahkan dalam suatu sistem informasi. Sistem informasi berperan
dalam proses pengambilan keputusan operasional harian sampai perencanaan
jangka panjang. Sebelum komputer ada, sistem informasi sudah menjadi kebutuhan
organisasi. Ini berarti sistem informasi tidak selamanya berbasis komputer. Namun
dengan berkembangnya fungsi komputer, sistem informasi saat ini umumnya
didukung penuh oleh komputer. Sistem informasi organisasi digunakan untuk
mendukung aktifitas-aktifitas organisasi berkembang dari masa-ke masa. Tingkat
keterlibatan sistem informasi organisasi makin lama makin luas dan dalam. (Nanda,
2018).
Manfaat adanya sistem informasi dalam suatu instansi yaitu:
1. Menyajikan suatu pusat informasi guna yaitu mendukung pengambilan suatu
keputusan.
2. Menyajikan informasi yang guna mendukung operasi harian.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
3. Menyajikan sebuah informasi yang berkenaan dengan kepengurusan.
Beberapa komponen pada sistem informasi yang dapat diklasifikasikan
sebagai :
1. Perangkat keras yaitu (hardware) dan perangkat lunak yaitu (software) yang
berfungsi sebagai mesin.
2. Manusia (people) dan prosedur (procedures) yang merupakan manusia dan
tata cara menggunakan mesin.
3. Data merupakan jembatan penghubung antara manusia dan mesin agar terjadi
suatu proses pengolahan data. (Agusvianto, 2017)
B. Pentingnya Sistem Informasi Manajemen
Keberhasilan suatu organisasi dalam mencapai tujuannya sangat tergantung
pada kemampuan orang yang mengelola organisasi tersebut. Manajemen sebagi
suatu metode yang mengatur, mengelola organisasi dapat diartikan sebagai seni
melaksanakan sesuatu melalui orang. Jika manajemen suatu organisasi baik maka
akan meningkatkan kemakmuran suatu negara.
Dalam menjalankan tugasnya, para manajer memerlukan informasi, karena
adanya perbedaan tugas maka informasi yang diperlukan juga akan berbeda.
Perbedaan tersebut disebabkan oleh adanya periode waktu, tingkat ketidakpastian,
tipe informasi, dasar kebutuhan informasi dan bentuk pelaporan. Sehingga dapat
dikategorikan bahwa informasi adalah salah satu jenis sumberdaya utama, dan
termasuk dalam kategori sumber daya konseptual.
Jenis sumberdaya utama lainnya, dalam kategori sumberdaya fisik, yaitu;
manusia, material, mesin (termasuk fasilitas dan energi) dan uang. Sumberdaya
fisik yang berada pada organisasi biasanya terbatas dan bisa habis atau punah.
Sedangkan sumberdaya informasi bersifat “tidak” akan pernah habis. Sehingga
semua sumberdaya, baik fisik maupun konseptual harus disinergikan. Oleh karena
itu tugas dari manajer adalah mengarahkan penggunaan semua sumber daya agar
dapat dimanfaatkan secara efektif (Purnama, 2016).
Dengan semakin majunya perkembangan zaman sekarang, mengharuskan
kita selalu update informasi secara cepat dan tepat, serta dapat mengikuti
perkembangan zaman (agar tidak tertinggal) terutama untuk suatu organisasi atau
perusahaan. Untuk lebih mudah mengikuti perkembangan zaman dan dapat

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
bertahan di era yang sangat maju ini, maka kita perlu mempelajari Sistem Informasi
Manajemen (SIM), sehingga kita dapat mengelola informasi yang didapat dengan
baik dan tepat.
Apa sih Sistem Informasi Manajemen (SIM) itu? SIM adalah sistem
perencanaan bagian dari pengendalian internal suatu bisnis yang meliputi
pemanfaatan manusia, dokumen, teknologi, dan prosedur oleh akuntansi
manajemen untuk memecahkan masalah bisnis seperti biaya produk, layanan, atau
suatu strategi bisnis. Sistem informasi manajemen dibedakan dengan sistem
informasi biasa karena SIM digunakan untuk menganalisis sistem informasi lain
yang diterapkan pada aktivitas operasional organisasi. Secara akademis, istilah ini
umumnya digunakan untuk merujuk pada kelompok metode manajemen informasi
yang bertalian dengan otomasi atau dukungan terhadap pengambilan keputusan
manusia, misalnya sistem pendukung keputusan, sistem pakar, dan sistem informasi
eksekutif. Informasi yang diberikan oleh SIM menjelaskan perusahaan atau salah
satu sistem utamanya dilihat dari apa yang telah terjadi di masa lalu, apa yang
sedang terjadi, dan apa yang kemungkinan akan terjadi di masa depan.
• Manfaat dari mempelajari sistem informasi manajemen, antara lain:
• Dapat mengetahui berbagai macam informasi dengan lebih cepat dan akurat.
• Menambah pengetahuan kita terkait dengan teknologi informasi saat ini.
• Memudahkan dalam pengambilan keputusan manajemen perusahaan
• Dapat mengembangkan strategi perusahaan dalam bersaing dengan
perusahaan lain
• Memudahkan adanya transaksi antara perusahaan dengan pemasoknya.
Dilihat dari manfaat di atas, sistem informasi manajemen sangatlah penting
bagi suatu organisasi atau perusahaan, agar lebih memudahkan suatu perusahaan
mengambil keputusan yang tepat dan akurat, yang akhirnya dapat mengurangi
risiko yang mungkin akan didapatkan perusahaan tersebut. Serta dapat
meningkatkan produktivitas suatu perusahaan dan membuat perusahaan tersebut
terus berkembang tanpa tertinggal informasi, sehingga dapat memberikan
pelayanan yang terbaik kepada konsumennya. Dan memudahkan perusahaan
tersebut bersaing dengan perusahaan lain (Nanda, 2018).

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
 Supaya informasi yang dihasilkan oleh sistem informasi dapat berguna bagi
manajamen, maka analis sistem harus mengetahui kebutuhan-kebutuhan informasi
yang dibutuhkannya, yaitu dengan mengetahui kegiatan - kegiatan untuk masing-
masing tingkat (level) manajemen dan tipe keputusan yang diambilnya.
Berdasarkan pada uraian di atas, maka terlihat bahwa tujuan dibentuknya Sistem
Informasi Manajemen atau SIM adalah supaya organisasi memiliki informasi yang
bermanfaat dalam pembuatan keputusan manajemen, baik yang meyangkut
keputusan - keputusan rutin maupun keputusan - keputusan yang strategis.
Sehingga SIM adalah suatu sistem yang menyediakan kepada pengelola
organisasi data maupun informasi yang berkaitan dengan pelaksanaan tugas-tugas
organisasi.
Beberapa manfaat atau fungsi sistem informasi antara lain adalah sebagai
berikut:
1. Meningkatkan aksesibilitas data yang tersaji secara tepat waktu dan akurat
bagi para pemakai, tanpa mengharuskan adanya prantara sistem informasi.
2. Menjamin tersedianya kualitas dan keterampilan dalam memanfaatkan
sistem informasi secara kritis.
3. Mengembangkan proses perencanaan yang efektif.
4. Mengidentifikasi kebutuhan-kebutuhan akan keterampilan pendukung
sistem informasi.
5. Menetapkan investasi yang akan diarahkan pada sistem informasi.
6. Mengantisipasi dan memahami konsekuensi-konsekuensi ekonomis dari
sistem informasi dan teknologi baru.
7. Memperbaiki produktivitas dalam aplikasi pengembangan dan
pemeliharaan sistem.
8. Organisasi menggunakan sistem informasi untuk mengolah transaksi-
transaksi, mengurangi biaya dan menghasilkan pendapatan sebagai salah satu
produk atau pelayanan mereka.
9. Bank menggunakan sistem informasi untuk mengolah cek – cek nasabah
dan membuat berbagai laporan rekening koran dan transaksi yang terjadi (Purnama,
2016).

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
C. Data, Informasi Dan Knowledge
Informasi tidak hanya sekedar produk sampingan, namun sebagai bahan
yang menjadi faktor utama yang menentukan kesuksesan atau kegagalan, oleh
karena itu informasi harus dikelola dengan baik. Informasi adalah data yang diolah
menjadi bentuk yang lebih berguna, lebih berarti dan bermanfaat bagi penggunanya.
• Data
Data adalah fakta-fakta dan gambar mentah yang akan di proses menjadi
informasi (Williams dan Sawyer, 2007:39). Connolly dan Begg (2010:70),
mendefinisikan data adalah komponen yang paling penting dalam database
management system (DBMS), berasal dari sudut pandang end-user. Data berperan
sebagai penghubung antara mesin dengan pengguna. Sedangkan menurut Romney
(2009:27), data adalah fakta-fakta yang dikumpulkan, dicatat, disimpan dan
diproses oleh system informasi. Data biasanya mewakili observasi atau pengukuran
aktifitas bisnis yang penting bagi pengguna system informasi. Jadi, data adalah fakta
mentah yang belum mempunyai arti yang nanti akan dikumpulkan dan diolah
menjadi informasi.
Data menggambarkan kenyataan suatu kejadian dan kesatuan yang nyata.
Data dapat diartikan pula sebagai representasi dunia nyata yang mewakili suatu
objek tertentu seperti manusia, hewan, peristiwa, konsep, keadaan dan lain-lain,
yang direkam kedalam bentuk angka, huruf, simbol, teks, gambar, bunyi atau
kombinasinya. Sebelum menjadi informasi, data yang berkualitas, kemudian diolah
melalui suatu model untuk menghasilkan informasi. Model yang digunakan untuk
mengolah data tersebut disebut model pengolahan data atau dikenal dengan siklus
pengolahan data (siklus informasi). Seiring dengan perkembangan teknologi
informasi, ribuan bahkan jutaan laporan, makalah, artikel majalah, buku yang
dihasilkan ilmuwan tersedia di Perpustakaan, Pusat Informasi dan Dokumentasi
(Pusdokinfo) bahkan di Internet dapat digunakan untuk memberikan layanan
informasi kepada pengguna. Terjadinya banjir informasi, menyebabkan pengguna
kesulitan untuk memilih dan mendapatkan informasi yang sesuai dengan
kebutuhannya. Oleh karena itu, pengguna menuntut layanan informasi yang
berkualitas.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Informasi
Informasi adalah data yang sudah di bentuk menjadi sebuah bentuk yang
mamiliki arti dan berguna bagi manusia (Keneth dan Laudon, 2008:14). Widayana
(2009:13), mendefinisikan Informasi merupakan data yang telah disusun dan
disertai dengan referensi terhadap suatu hubungan (konteks) yang mempunyai arti
untuk pengambilan keputusan. Hasugian (2009:5) berpendapat, informasi adalah
sebuah konsep yang universal dalam jumlah muatan yang besar, meliputi banyak
hal dalam ruang lingkupnya masingmasing dan terekam pada sejumlah media. Dari
ketiga teori tersebut dapat disimpulkan bahwa Informasi adalah kumpulan data
yang telah diolah, diproses, dan dimodifikasi sehingga data tersebut memiliki arti
atau makna bagi penggunanya.
Kualitas informasi tergantung pada empat hal yaitu akurat, tepat waktu,
relevan dan ekonomis, yaitu:
a. Akurat
Informasi harus bebas dari kesalahan-kesalahan dan tidak menyesatkan bagi
pengguna yang menerima dan memanfaatkan informasi tersebut. Akurat juga
berarti informasi harus jelas mencerminkan maksudnya. Dalam prakteknya,
mungkin dalam penyampaian suatu informasi banyak terjadi gangguan (noise) yang
dapat merubah atau merusak isi dari informasi tersebut. Informasi dikatakan akurat
jika mengandung komponen:
Completeness, berarti informasi yang dihasilkan atau dibutuhkan harus
memiliki kelengkapan yang baik, karena bila informasi tidak lengkap akan
mempengaruhi dalam pengambilan keputusan.
Correctness, berarti informasi yang dihasilkan atau dibutuhkan harus
memiliki kebenaran.
Security, berarti informasi yang dihasilkan atau dibutuhkan harus memiliki
keamanan.
b. Tepat waktu
Informasi yang diterima harus tepat pada waktunya, informasi yang usang
(terlambat) tidak mempunyai nilai yang baik bagi pengguna tertentu, sehingga bila
digunakan sebagai dasar dalam pengambilan keputusan akan berakibat fatal. Saat
ini mahalnya nilai informasi disebabkan harus cepatnya informasi tersebut didapat,

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
sehingga diperlukan teknologi-teknologi mutakhir untuk mendapatkannya,
mengolah dan mengirimkannya.
c. Relevan
Informasi harus mempunyai relevansi atau manfaat bagi si pengguna.
Relevansi informasi untuk satu pengguna tertentu dengan yang lainnya berbeda.
d. Ekonomis
Informasi yang dihasilkan mempunyai manfaat yang lebih besar
dibandingkan dengan biaya mendapatkannya. Sebagian besar informasi tidak dapat
tepat ditaksir keuntungannya dengan satuan nilai uang tetapi dapat ditaksir nilai
efektivitasnya.
• Knowledge
Knowledge adalah informasi dilengkapi dengan pemahaman pola hubungan
dari informasi disertai pengalaman, baik individu maupun kelompok dalam
perusahaan. Knowledge merupakan penerapan informasi yang diyakini dapat
langsung digunakan untuk mengabil keputusan dalam bertindak (Widayana,
2009:13). Setiadi (2011:8), mengemukakan didalam organisasi knowledge bukan
hanya data-data yang tersimpan di dalam komputer, namun juga terdapat di dalam
proses, rutinitas kerja, selain knowledge dan informasi serta pengalaman yang
tersimpan dalam kepala manusia. Definisi lain mengenai knowledge adalah
pengetahuan yang terdapat dalam pikiran tiap manusia secara personal (Kristanti
dan Pamela, 2011:89). Dari teori diatas dapat disimpulkan bahwa, knowledge
merupakan kumpulan informasi yang dimiliki oleh individu dan dijadikan sebagai
keahlian mereka serta digunakan untuk menyelesaikan masalah atau mengambil
tindakan yang lebih efektif.
• Jenis Knowledge
Dilihat dari jenisnya, Knowledge dibagi atas 2 bagian:
1. Tacit knowledge adalah knowledge yang terletak pada otak atau melekat di
dalam diri seseorang dan diperoleh melalui pengalaman namun sangat sulit
dikodifikasi.
2. Explicit knowledge adalah segala bentuk knowledge yang sudah direkam,
dan didokumentasikan dalam penyerapan KM sehingga lebih mudah
didistribusikan dan dikelola (Tobing, 2007:9). Dalkir (2011:9), menegaskan tacit

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
knowledge sulit untuk diungkapkan dengan kata kata, tulisan, maupun gambar.
Sebaliknya explicit knowledge berwujud segala suatu hal yang sudah terekam dalam
bentuk tulisan, rekaman suara, maupun gambar. Selain itu tacit knowledge biasanya
tersimpan dalam otak individu yang memilikinya, sedangkan explicit knowledge
biasanya tersimpan pada objek yang kongkrit. Tacit knowledge tidak semudah itu
disampaikan ke orang lain, karena hal yang orang lain anggap mudah belum tentu
mudah untuk orang lain. Apa yang mudah diartikulasikan oleh satu orang mungkin
sangat sulit untuk mengeksternalisasi oleh orang lain. Contohnya, jika ada seorang
yang sudah sangat ahli dan berpengalaman belum tentu bisa menjelaskan dengan
mudah ke orang lain pengetahuan yang ia miliki, sedangkan orang yang masih
amatir atau pemula bisa dengan mudah menjelaskan pengetahuan kepada orang lain
karena ia memiliki kemampuan verbal yang lebih baik ataupun ia mengikuti
petunjuk manual yang ada (Purnama, 2016).
D. Dreamweaver
Adobe Dreamweaver merupakan sebuah HTML editor Profesional untuk
mendesain secara visual dan mengelola situs web beserta halaman-web. Saat ini
terdapat software dari group Macomedia yang banyak digunakan untuk mendesain
situs web. Adobe Dreamweaver 3 merupakan versi lama yang menjadi web
authoring terbaik pada tahun 2000. Di tahun 2001, Macromedia meluncurkan
Adobe Dreamweaver 4 yang lebih baik dan lebih canggih. Setahun kemudian
muncul release terbaru dengan sebutan AdobeDreamweaver 2002 atau dikenal
dengan Dreamweaver MX. Dan saat ini, sudah beredar update yang terbaru yakni
Adobe Dreamweaver MX2004. Pada Dreamweaver MX 2004 terdapat beberapa
kemampuan bukan hanya sebagai software untuk desain web saja tetapi juga
untuk menyunting kode serta pembuatan aplikasi web dengan menggunakan
berbagai bahasa pemrograman web base, antara lain PHP, JSP, ASP dan
ColdFusion.
Dreamweaver merupakan software populer yang digunakan oleh web
designer maupun web programmer guna mengembangkan sebuah situs web.
Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan
produktivitas dan efektivitas dalam desain dan maintain sebuah web. Dreamweaver
juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
Fasilitas penyuntingan secara visual dari Dreamweaver MX 2004 membuat anda
dapat menambah desain dan fungsionalitas halaman web tanpa perlu menulis satu
baris kode pun (Retnosari, 2016).
Macromedia Dreamweaver merupakan sebuah software yang menangani
tata letak (layout) halaman web. Macromedia Dreamweaver adalah program
aplikasi professional untuk merubah HTML secara visual dan mengelola Website
serta pages. Karena tampil secara visual, aplikasi Macromedia Dreamweaver 8
mudah di operasikan. Program ini menyediakan banyak perangkat yang dapat
meningkatkan kemampuan user didalam membuat web (Susanto, 2020).
Adobe Dreamweaver CC merupakan website builder sekaligus web deploy
tool yang populer. Aplikasi ini dianggap sebagai perpaduan sempurna antara
WYSIWYG dan HTML editor yang lebih konvesional. Dreamweaver pertama kali
dikembangkan oleh Macromedia, tapi kemudian diakuisisi oleh Adobe Inc, di tahun
2005.
Pada mulanya Dreamweaver menawarkan perpetual license, metode
pembayaran sekali seumur hidup untuk menjalankan software ini. Namun kini
Dreamweaver beralih ke layanan berbasis langganan atau subscription dengan
menggunakan struktur Adobe Creative Cloud.
Adobe Dreamweaver CC merupakan software integrated development
environment (IDE), yang artinya aplikasi ini menyediakan berbagai tool dan
bantuan untuk pengembangan web. Terlebih lagi, dengan fitur Creative Cloud,
Anda dapat menginstal software Adobe yang lainnya untuk meningkatkan
produktivitas Anda.
Dengan Dreamweaver, Anda bisa membuat dan mengatur tampilan website
menggunakan metode drag-and-drop di dashboard, yaitu memindahkan sejumlah
elemen yang dibutuhkan. Bahkan Dreamweaver juga dapat digunakan sebagai
editor kode konvesional – mengatur kode hanya dengan teks, lalu mengupload
website langsung ke server.
Ada banyak material dan sumber pembelajaran serta forum komunitas
Adobe yang dapat menjawab semua pertanyaan Anda mengenai produk software
ini. Aplikasi ini juga telah dilengkapi dengan 15 pilihan bahasa. Selain itu, jika ingin
membaca tutorial Dreamweaver, Anda bisa mencarinya dengan mudah di internet.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
 Semua kelebihan dan keunggulan yang telah disebutkan di atas mampu
mengantarkan Dreamweaver sebagai sebuah aplikasi yang memadukan Sistem
Manajemen Konten (CMS) dan editor kode.
E. Fitur-fitur Dreamweaver
Dengan menjadi bagian dari Adobe Creative saja sudah membedakan
Dreamweaver dari kode editor berbasis visual lainnya. Dreamweaver memiliki
banyak fitur dan kelebihan yang hanya bisa ditawarkan oleh Adobe. Berikut dua
fitur Dreamweaver yang paling dominan:
• Antarmuka Visual yang Ramah Pemula
Adobe Dreamweaver CC mudah digunakan, tapi di saat bersamaan juga
sulit untuk dipelajari. Bagus atau tidaknya website tergantung pada kemampuan
Anda. Artinya, meskipun software ini menawarkan banyak fitur untuk
pengembangan website, Anda tidak bisa memaksimalkannya jika pengetahuan
dasar yang dimiliki sangatlah terbatas.
Walaupun demikian, para pemula tetap bisa membuat website dengan
menggunakan visual editornya. Ada fitur drag-and-drop untuk memasukkan
elemen HTML, dan Anda bisa langsung melihat perubahan yang diterapkan ke
website.
Aplikasi Dreamweaver juga menyediakan tutorial singkat untuk membantu
Anda dalam memahami setiap bagiannya. Bahkan tutorial tersebut juga seolah
memberi tahu mengenai area yang sedang Anda kelola saat ini. Sebagai contoh,
ketika mengklik judul, maka kode terkait akan muncul di tool editor.
• Code Editor Bawaan yang Serbaguna
Keunggulan lain dari aplikasi ini adalah code editor bawaannya yang
serbaguna. Jika developer profesional ingin mengeksekusi kode pada text editor,
mereka dapat melakukannya dengan fitur ini. Beberapa kegunaan utamanya adalah:
• Syntax highlighting. Fitur ini akan menyoroti berbagai elemen, seperti
variabel, ID, class, dan lain-lain, untuk mempermudah pembacaan kode.
• Code completion. Selesaikan pekerjaan Anda dengan mengaktifkan code
completion otomatis. Misalnya, ketik img dan tekan tombol tab di keyboard
untuk menambahkan <img src=””alt””>.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• CSS documentation. Saat Anda memerlukan beberapa referensi untuk CSS
properties, ada fitur Quick Docs yang akan muncul dengan informasi terkait
pada code editor.
Selain itu, fitur penting lainnya adalah sebagai berikut:
• Bootstrap 4. Versi terbaru dari framework HTML, CSS, dan JavaScript
untuk membuat website yang responsif
• Git support. Melakukan operasi Git yang umum dilakukan termasuk Push,
Pull, Commit, dan Fetch dari dashboard Dreamweaver.
• Preview browser real-time. Melihat perubahan website sembari mengubah
susunannya secara real-time
• Creative Cloud Libraries. Mengakses warna, grafis, dan berbagai tool
kreativitas di database
• Chromium Embedded Framework (CEF). Membantu developer untuk
menempatkan browser untuk digunakan di aplikasi pihak ketiga
F. Kekurangan Dreamweaver
Diatas semua itu, Adobe Dreamweaver CC juga memiliki kekurangan.
Seperti yang dijelaskan sebelumnya bahwa software ini bekerja sebatas skill Anda.
Jadi, walaupun antarmuka live-nya memudahkan pemula untuk membangun sebuah
website, Anda mungkin memerlukan waktu lebih untuk membuat website yang
betul-betul memukau.
Selain itu, Dreamweaver masih merupakan kurva belajar yang curam.
Dalam artian, Anda perlu meluangkan banyak waktu untuk menguasai semua
fiturnya. Jadi, jika Anda berharap bisa menjadi seorang developer pro berbekal dari
tutorial saja – mungkin Anda akan kecewa.
Ditambah lagi, software ini merupakan layanan berbayar yang mahal. Jadi,
bisa dikatakan Dreamweaver kurang sesuai untuk developer berasaskan hobi.
G. Membuat Website
1. Membuat Situs Baru
Buka Site -> New Site pada dashboard Adobe Dreamweaver CC Anda lalu jendela
akan muncul.
Langkah pertama yang perlu dilakukan adalah menamai website Anda dan
menyimpannya dalam satu folder. Cara ini dapat membantu Anda untuk mengelola

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
file dan mempermudah Anda untuk melakukan proses unggah.
Jika Anda ingin memasukkan gambar ke situs Anda, klik Advanced Settings
-> Local Info untuk melakukannya. Folder gambar akan dibuat dalam folder situs.
Klik Save jika sudah selesai.
2. Membuat File Homepage
Anda akan mendapatkan lembar kerja kosong. Tapi, Anda bisa mendapati
file situs di bagian panel kanan atas. Sekarang, Anda dapat membuat homepage dari
nol.
Buka File -> New lalu pilih New Document. Pilih HTML sebagai tipe
dokumen lalu klik Create. Anda tidak harus memberi judul dokumen.
Anda akan diarahkan kembali pada lembar kerja dan lembar kerja ANda
akan berwarna putih dengan beberapa baris kode HTML. Sebenarnya, lembaran itu
merupakan tampilan website Anda secara live. Simpanlah file HTML sebagai
index.html, dan letakkan dalam folder situs.
3. Membuat Header
Pada langkah ini, Anda akan membuat header website. Biasanya header
akan diisi oleh logo dan nama situs Anda.
Klik halaman putih atau pilih bagian tertentu dengan elemen <body> pada
editor. Klik Insert pada kanan atas panel. Langkah ini akan menampilkan daftar dari
elemen HTML umum yang dapat ditambahkan pada halaman Anda.
Cari elemen Header.
Klik atau drag and drop elemen tersebut ke lembar kerja Anda, dan dalam
sekejap elemen tersebut akan ditambahkan pada website Anda beserta kodenya.
Setelah itu, ubah header menjadi heading dengan tag <H1>…</H1>. Hal
ini dilakukan agar website Anda SEO-friendly dan menginformasikan tentang situs
Anda kepada mesin pencari. Tandai teks di bagian tersebut lalu buka panel Insert.
Cari dan klik Heading: H1.
Setelah itu, ubah teks tersebut menjadi jduul website Anda. Judul website
Anda harus deskriptif dan mewakili topik Anda. Disini, kami akan menggunakan
nama “Welcome to The Development Site.”
4. Tambah Navigasi Home
Anda perlu menambah baris setelah header untuk menambah tombol

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
navigasi home. Sekarang masuk pada menu panel Insert dan cari elemen Navigation
. Ketika Anda klik elemen tersebut, jendela akan muncul. Lalu, tulis navigation
sebagai ID dan klik OK.
Cara ini akan menambah elemen navigasi ke editor. Ketika Anda berada
pada elemen konten, carilah Hyperlink pada panel Insert. Klik dan isi detailnya
seperti contoh berikut:

Gambar 2.1 Hyperlink

Link tersebut akan mirip dengan halaman yang akan Anda navigasikan ke
website. Saat ini, kami hanya menggunakan hashtag untuk mengisi kolom yang
kosong.
Ketika Anda telah selesai, klik OK. Sekarang, tombol home dapat diklik dan
memiliki lebih banyak baris kode di editor.
5. Menambahkan Deskripsi Website
Kami akan menambahkan header sekunder (sub-header), paragraf, dan
beberapa bullet point sebagai deskripsi website.
Tambahkan baris setelah kode navigasi san klik Header: H2 dan Paragraph
pada panel Insert. Langkah ini akan menambahkan tag <h2> dan <p> pada editor.
Setelah itu, sikan konten Anda di dalamnya.
Sekarang, Anda bisa menambah bullet points. Untuk menambahkannya,
tambahkan baris di bawah kode paragraf. Buka pane Insert dan klik Unordered List.
Tag <ul> dapat ditemukan pada editor. Sementara itu, klik List Item pada panel
Insert dan proses ini akan menambahkan tag <li> ke dalam tag <ul>

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
 Hal yang perlu digaris bawahi pada list HTML adalah Anda harus
menambah beberapa tag secara manual sesuai dengan jumlah poin. Milik kami akan
terlihat seperti berikut

Gambar 2.2 List HTML

Anda telah berhasil membuat struktur dasar homepage. Anda juga dapat
menambah beberapa konten lain seperti form, video, gambar, dan lainnya. Namun,
sebagai permulaan, berhasil membuat struktur dasar saja sudah cukup.
Walaupun terlihat polos, Anda bisa menambahkan style sheet untuk
membuatnya lebih menarik.
6. Membuat File CSS
Cascading Style Sheet (CSS) digunakan untuk memodifikasi elemen pada
HTML dan akan selalu digunakan oleh developer ketika membuat website. Ibarat
HTML adalah struktur tubuh dari website, maka CSS adalah bagian estetika yang
membuat tubuh tersebut terlihat indah.
Sekarang, yang perlu dilakukan pertama kali adalah memberi header Anda
sebuah ID. Arahkan kursor Anda ke kanan bawah dari panel Dreamweaver ini lalu
pilih panel DOM. Anda akan melihat struktur situs Anda secara keseluruhan disini.
Klik Header, dan Anda akan menyadari bahwa header Anda ditandai
dengan warna biru, bersamaan dengan label dan tanda plus.
Klik tanda plus dan ketikkan #header. Hashtag tersebut memberikan ID
kepada elemen tersebut. Setelah itu tekan return atau enter. Pada menu

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
selanjutnya, pilih source: Create a New CSS file.
Jendela baru akan muncul. Pilih Browse dan cari folder situs Anda.
Ketikkan style.css dan sklik save. Lalu, klik OK.
Anda akan mendapati style.css yang baru, muncul di atas live view dan
elemen link baru pada code editor.
Lakukan cara yang sama untuk semua elemen yang memerlukan
stylization. Saat ini, daripada membuat file CSS baru, simpan dimana file style.css
berada.
Sekarang, Anda dapat menggunakan CSS selector untuk styling.
7. Buat CSS Selector untuk Judul Website
Kami akan mengganti font dan memposisikan judul website kami ke
tengah. Tandai H1 dibawah header dari panel DOM. Lalu, pilih CSS Designer
dari panel di atas.
Klik tanda plus di belakang Selectors. Secara otomatis nama #header h1
akan muncul, setelah itu tekan return.
Catatan: Ini berarti bahwa Anda hanya menargetkan elemen bernama h1 di
dalam elemen #header. Dengan cara ini, styling hanya akan berlaku untuk teks
tertulis (judul situs web Anda) dan bukan elemen tajuk itu sendiri.
8. Mengganti Font Judul
Pastikan selector berada pada #header h1.
Klik Properties dan hilangkan centang pada Show Set untuk mengaktifkan
opsi Layout, Text, Border, Background, and More.
Klik opsi Text dan arahkan kursor pada font-family dan klik default font.
Anda bisa memilih diantara banyak opsi yang diberikan.
Ditambah lagi, menu Manage Fonts akan memberi Anda hamparan opsi
lain dari database Adobe Edge Web Fonts.
Pilih font yang Anda inginkan dengan meng-kliknya. Pada contoh dibawah
ini, kami menggunakan font bernama Karla. Ketika Anda selesai, font judul
website Anda akan berganti dan akan ada tambahan kode penting pada Source
Code dan style.css.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
9. Arahkan Judul ke Tengah
Pada opsi Text, arahkan kursor text-align dan klik center. Anda akan
menyadari ada perubahan dan juga kode tambahan pada style.css.
Buat lah perubahan-perubahan yang diperlukan untuk konten website
Anda. Pada tutorial ini, kami juga menambahkan konten dan style pada situs
Anda. Inilah hasil akhirnya:

Gambar 2.3 Tampilan website

H. Membuat Situs Web dengan Template Dreamweaver
Anda juga dapat membuat situs web dengan template premade dari
Dreamweaver. Dengan template premade ini, Anda akan selangkah lebih maju dan
mendapatkan keuntungan berupa melihat bagaimana tampilan final situs akan
terlihat bersama dengan kode yang digunakan.
Mari kita pelajari tutorial Dreamweaver yang satu ini dan pelajari cara
menggunakan template:
1. Pilih Template
Untuk melakukannya, buka File -> New. Pilih Starter Template -> Basic
Layouts. Kami akan menggunakan satu halaman untuk tutorial ini. Untuk
memulainya, klik Create.
Dreamweaver telah memberi berbagai struktur dan style yang diperlukan
untuk situs web Anda. Yang tersisa hanyalah menyesuaikan konten dan
menyesuaikan style sesuai kebutuhan Anda.
Dalam tutorial ini, kami hanya akan melakukan perubahan mendasar seperti
mengedit judul dan mengubah deskripsi situs web, dan juga mengubah beberapa

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
bagian warna latar belakangnya.
2. Ubah Logo dan Teks Judul
Untuk mengubah logo teks, klik h4 .logo di panel DOM. Langkah ini akan
menandai code line pada editor, dan Anda dapat mengubahnya ke nama apa pun
yang diinginkan.
Atau, Anda juga dapat mengklik dua kali pada kotak logo di live view dan
mengubah teksnya dari sana. Lakukan hal yang sama untuk header situs web dan
tagline. Kami mengubahnya menjadi seperti ini.

Gambar 2.4 Header situs web

3. Ubah Warna Latar Header
Untuk mengubah warna latar belakang header, bukalah file .css dan cari
elemen header. Dalam hal ini, elemen tersebut adalah .hero. Cari baris kode warna
latar belakang, dan Anda akan melihat nomor cryptic tertentu.
Angka itu sebenarnya adalah kode warna HTML. Setiap warna memiliki
representasi nomornya sendiri, dan Anda juga dapat memeriksanya di sini.
Hal yang menarik tentang Dreamweaver adalah Anda tidak perlu ke tempat
lain untuk mencari tahu kode warna. Cukup blok nomor tersebut, klik dua kali, dan
pilih Quick Edit. Langkah ini akan memunculkan jendela untuk memilih warna, dan
Anda dapat menyesuaikannya dari jendela ini.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
 Gambar 2.5 Edit warna
Kami memilih warna seperti contoh berikut.

Gambar 2.6 Tampilan akhir

Tentu saja, Anda masih memiliki beberapa hal yang harus dilakukan. Ada
konten yang perlu Anda tambahkan dan juga perlu disesuaikan. Tutorial ini hanya
memberikan perubahan dasar yang dapat Anda lakukan dengan template.
Setelah situs web berhasil melalui banyak penyesuaian, Anda dapat
mengunggahnya ke server. Anda akan belajar bagaimana melakukannya dalam satu
menit (Nadia, 2020).

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
III. Langkah-Langkah Pengerjaan
Seorang petugas perpustakaan yang kelelahan akibat mendata setiap
mahasiswa yang meminjam buku dengan cara manual. Hal ini dinilai oleh petugas
perpustakaan kurang tepat karna membuang-buang waktu dan sering terjadi
kesalahan dalam input data. Karenanya, sebuah Perpustakaan kampus melakukan
pembaharuan sistem untuk memperoleh informasi data peminjaman buku oleh
mahasiswa setiap bulan dengan system basis data agar informasi yang didapat lebih
cepat, efisien, efketif, dan akurat. Dalam pembuatan proses system basis data
diperlukan Dreamweaver agar pembuatan system basis data menjadi lebih mudah.
Berikut Langkah-langkah pengerjaan dalam menggunakan Dreamweaver :
1. Aktifkan Apache dan MySQL di XAMPP

Gambar 3.1 XAMPP Control Panel

2. Buat folder dengan nama sesuai nama pada database di htdocs. Dan buat
folder “gambar” didalam database tersebut.

Gambar 3.2 Folder Gambar pada Folder htdocs

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
3. Buka database yang telah dibuat di localhost, lalu klik menu privileges, dan
klik add user

Gambar 3.3 Add User pada Menu Privileges

4. Dalam add user, isi username dengan peminjamanbuku, host pilih local, dan
password isi 123456. Lalu, check all global privileges, klik go

Gambar 3.4 Pengisian add user

5. Buka aplikasi dreamweaver, klik PHP

Gambar 3.5 Halaman Awal Aplikasi Dreamweaver

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
6. Ubah tampilan design menjadi classic

Gambar 3.6 Mengubah Tampilan design menjadi classic

7. Klik site -> new site, isi site name sesuai database -> local site folder pilih
folder dalam htdocs

Gambar 3.7 Memilih local site folder

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
8. Klik server -> klik tanda (+) isi data sebagai berikut:
Server name: sesuai nama database
Connect using pilih local/network
Server pilih folder sesuai nama database di htdocs

Gambar 3.8 Menambahkan server

9. Klik advance pada server, dan ganti server model dengan PHP MySQL. Lalu
save dan centang testing

Gambar 3.9 Klik advance pada server

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
10. Klik advanced setting, pilih default image folder dengan folder gambar pada
folder database, lalu save

Gambar 3.10 Klik advance setting

11. Klik (+) pada database, dan klik MySQL conncection.
Connection name : koneksi
MySQL server : localhost
Username : root
Database : pilih folder database
Test, lalu ok

Gambar 3.11 Penambahan database

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
12. Insert table, isi rows dan columns 4, lalu ok. Pilih center pada align, dan buat
ukuran dan bentuk table sesuai yang dikehendaki. Kemudian merge table
sesuai design, blok table dan ganti dengan warna sesuai warna map.

Gambar 3.12 Design Table

13. Buat tampilan awal, dengan kalimat pembuka dan link halaman terakhir
dengan cara block text dan cantumkan “namalink”.php, cantumkan gambar
dengan membuka folder gambar, lalu drag ke table. Save as dengan nama
index.php dan save as lagi dengan nama home.php

Gambar 3.13 Membuat Tampilan Home

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
14. Klik bindings, lalu (+) -> recordest (query). Isi nama dengan mahasiswa,
connection dengan koneksi, dan table dengan mahasiswa. Ok. Lakukan
langkah yang sama untuk entitas lain.

Gambar 3.14 Recordset (Query)

15. Buat halaman login dengan cara insert -> form -> form, text field -> isi tabel
dengan username dan password. Lalu insert -> form button -> ok. Beri nama
disetiap kolom. Ganti nama submit menjadi login, ganti type kolom password
dengan password.

Gambar 3.15 Halaman Tampilan Login

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
16. Klik insert -> data object -> user authentication -> login user
Validate using connection : koneksi
Table : mahasiswa
Username : nama_mahasiswa
Passoword : NPM
If login suceeds : sukses.php
If login fails : gagal.php
Save as login.php

Gambar 3.16 Login User

17. Buat tampilan gagal login dengan menambahkan kata “login anda tidak
berhasil!”. Dan save menjadi gagal.php

Gambar 3.17 Halaman Gagal Login

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
18. Buat halaman sukses login, serta cantumkan setiap link dan save menjadi
sukses.php

Gambar 3.18 Halaman Sukses Login

19. Buat tampilan input gudang dengan cara insert -> data object -> insert record
-> record insertion form wizard.
Connection : koneksi
Table : buku
After inserting go to : databuku.php
Ok, ganti value submit dengan input, save as inputbuku.php
Lakukan langkah yang sama untuk entitas lain

Gambar 3.19 Tampilan Input buku

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
20. Untuk entitas yang memiliki atribut dengan tampilan menu di database
xampp, ubah display as menu untuk setiap atribut, pilih populate menu items
dengan from database, pilih recordest sesuai entitas, ok

Gambar 3.20 Menu Properties

21. Buat tampilan data dengan insert -> data object -> dynamic data -> dynamic
table
Recordest : buku, show pilih all records, ok. Save as databuku.php lakukan
langkah yang sama untuk entitas lain

Gambar 3.21 Dynamic Table

22. Buat tampilan logout dengan klik insert -> data object -> user authentication
-> logout user -> when done go to isi dengan home.php

Gambar 3.22 Membuat Tampilan Logout

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
IV. Hasil dan Pembahasan
A. Output Program Sistem Informasi Peminjaman Buku di Perpustakaan
Adapun output program pada sistem informasi peminjaman buku di
perpustakaan adalah sebagai berikut:
• Tampilan home.php

Gambar 4.1 Tampilan home.php

• Tampilan login.php

Gambar 4.2 Tampilan login.php

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Tampilan gagal.php

Gambar 4.3 Tampilan gagal.php

• Tampilan sukses.php

Gambar 4.4 Tampilan sukses.php

• Tampilan inputbuku.php

Gambar 4.5 Tampilan inputbuku.php

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Tampilan databuku.php

Gambar 4.6 Tampilan databuku.php

• Tampilan inputkartu.php

Gambar 4.7 Tampilan inputkartu.php

• Tampilan datakartu.php

Gambar 4.8 Tampilan datakartu.php

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Tampilan inputmahasiswa.php

Gambar 4.9 Tampilan inputmahasiswa.php

• Tampilan datamahasiswa.php

Gambar 4.10 Tampilan datamahasiswa.php

• Tampilan inputpegawai.php

Gambar 4.11 Tampilan inputpegawai.php

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Tampilan datapegawai.php

Gambar 4.12 Tampilan datapegawai.php

• Tampilan inputperpustakaan.php

Gambar 4.13 Tampilan inputperpustakaan.php

• Tampilan dataperpustakaan.php

Gambar 4.14 Tampilan dataperpustakaan.php

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Tampilan about.php

Gambar 4.15 Tampilan about.php

• Tampilan help.php

Gambar 4.16 Tampilan help.php

• Tampilan logout.php

Gambar 4.17 Tampilan logout.php

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
B. Analisa Output
• Analisa output Tampilan Home
Pada tampilan home.php menampilkan tampilan awal dari website yang
dibuat. Apabila kita melakukan “klik” pada home, maka akan muncul
tampilan “selamat datang di sistem informasi peminjaman buku”.
• Analisa output Tampilan Login
Pada tampilan login.php terdapat kolom username dan password dari
mahasiswa untuk masuk ke sistem peminjaman buku. Mahasiswa melakukan
login dengan menggunakan username dan password yang terdapat di data
localhost. Apabila telah mengisi username dan password, mahasiswa bisa
klik submit.
• Analisa output Perbedaan Tampilan Sukses dan Gagal
Pada tampilan sukses dan gagal sama-sama login menggunakan username
dan password. Perbedaannya terdapat pada Ketika klik “submit”. pada
tampilan gagal apabila tidak berhasil login akan muncul “login anda tidak
berhasil” sedangkan pada tampilan sukses apabila berhasil login maka akan
terdapat input dan data yang terdiri dari buku, kartu, mahasiswa, pegawai dan
perpustakaan.
• Analisa output Tampilan input buku
Pada tampilan input buku terdapat beberapa kolom yang harus melakukan
proses input. Diantaranya adalah kolom No. buku, NIK, Judul buku, Penerbit,
Tahun terbit, Pengarang.
• Analisa output Tampilan data buku
Pada tampilan data buku diperoleh hasil data pada kolom input buku. pada
No. Buku 01, NIK 1121, Judul buku pengetahuan bahan teknik, Penerbit
Gramedia, Tahun 2002 oleh Pengarang Dewi. Dan pada No. Buku 02, NIK
1122, Judul buku manajemen lingkungan, Penerbit Airlangga, Tahun terbit
2000 oleh Pengarang Surya.
• Analisa output Tampilan input kartu
Pada tampilan input kartu terdapat beberapa kolom yang harus melakukan
proses input data. Diantaranya adalah kolom No. Kartu, No. Perpustakaan
NIK, nama peminjam, tanggal dan tanggal kembali.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Analisa output Tampilan data kartu
Pada tampilan data kartu diperoleh hasil data pada kolom input kartu. Pada
No. Kartu TI02 terdapat No. Perpustakaan FT10. NIK 1122, Nama Peminjam
Sugeng, tanggal maret 2021 dan tanggal Kembali 7 maret 2021. Sedangkan
pada No. Kartu TI 07 terdapat No. perpustakaan FT1, NIK 1121, Nama
peminjam Ilham, tanggal 1 maret 2021 dan tanggal kembali 6 maret 2021.
• Analisa output Tampilan input mahasiswa
Pada tampilan input mahassiwa terdapat beberapa kolom yang harus
melakukan proses input data. Diantaranya adalah kolom NPM, No.
perpustakaan, Nama mahasiswa, Alamat mahasiswa, Jurusan, dan No. telp
mahasiswa.
• Analisa output Tampilan data mahasiswa
Pada tampilan data maahasiswa diperoleh hasil data pada kolom input
mahasiswa. Pada NPM 19001 terdapat data No. perpustakaan FT1, Nama
mahasiswa Bella, Alamat mahasiswa Magetan, Jurusan TI, dan No. telp
mahasiswa 081234248222. Sedangkan pada NPM 19002 terdapat data No.
perpustakaan FT10, Nama mahasiswa Shania, Alamat mahasiswa
Bojonegoro, Jurusan Tekkim, dan No. telp mahasiswa 081234567890.
• Analisa output Tampilan input pegawai
Pada tampilan input pegawai terdapat beberapa kolom yang harus melakukan
proses input data. Diantaranya adalah kolom NIK, Nama pegawai, No. telp
pegawai.
• Analisa output Tampilan data pegawai
Pada tampilan data pegawai diperoleh hasil data pada kolom input pegawai.
Pada NIK 1121 terdapat Nama pegawai Betty dan No. telp pegawai
081336798099. Sedangkan pada NIK 1122 terdapat nama pegawai Ilham dan
No. telp pegawai 081805203978.
• Analisa output Tampilan input perpustakaan
Pada tampilan input perpustakaan terdapat beberapa kolom yang harus
melakukan proses input data. Diantaranya adalah kolom No. perpustakaan,
Nama perpustakaan dan Alamat perpustakaan.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
• Analisa output Tampilan data perpustakaan
Pada tampilan data pegawai diperoleh hasil data pada kolom input pegawai.
Hasil data tersebut menunjukkan No. perpustakaan FTI, Nama perpustakaan
PerpusTI dan Alamat perpustakaan Surabaya serta No. perpustakaan FT10,
Nama perpustakaan PerpusTI dan Alamat perpustakaan Surabaya.
• Analisa output Tampilan About
Pada tampilan about.php menampilkan tampilan about dari website yang
dibuat. Apabila kita melakukan “klik” pada about, maka akan muncul
tampilan “Perpustakaan UPN Veteran Jawa Timur telah membuat sistem
informasi peminjaman buku untuk memudahkan pegawai dalam mengakses
data sistem informasi peminjaman buku”.
• Analisa output Tampilan Help
Pada tampilan help.php menampilkan tampilan help dari website yang dibuat.
Apabila kita melakukan “klik” pada help, maka akan muncul tampilan
“Apabila pengunjung perpustakaan mengalami kendala silahkan hubungi
nomor dibawah ini : Hp 081929879800”.
• Analisa output Tampilan Logout
Pada tampilan logout.php menampilkan tampilan logout dari website yang
dibuat. Apabila kita melakukan “klik” pada logout, maka akan muncul
tampilan “Terimakasih telah meminjam buku di perpustakaan UPN Veteran
Jawa Timur. Selamat berkunjung kembali”.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
V. Kesimpulan dan Saran
A. Kesimpulan
Berdasarkan hasil analisa diatas didapatkan kesimpulan sebagai berikut :
1. Pada hasil pembuatan web dengan menggunakan dreamweaver terdapat 17
tampilan. Tampilan tersebut terdiri dari tampilan home, tampilan login,
tampilan gagal login, tampilan sukses login, tampilan input buku, tampilan
data buku, tampilan input kartu, tampilan data kartu, tampilan input
mahasiswa, tampilan data mahasiswa, tampilan input pegawai, tampilan data
pegawai, tampilan input perpustakaan, tampilan data perpustakaan, tampilan
help, tampilan about, dan tampilan logout.
2. Terdapat komponen-kompenen yang terlibat dalam pembuatan sistem
informasi peminjaman buku menggunakan dreamweaver yaitu Menu Bar,
Document Window, Document Toolbar, Panel Groups, CSS Styles Panel,
Property Inspector.
3. Fungsi aplikasi dreamweaver terhadap adalah membuat desain dan developer
web pada system informasi peminjaman buku dikarenakan kemudahan dalam
penggunaanya serta kelengkapan fiturnya dan juga dukungannya terhadap
teknologi terkini.
B. Saran
Adapun saran yang diberikan untuk laporan modul III ini adalah :
1. Sebaiknya penjelasan materi pada modul lebih rinci lagi agar mempermudah
praktikan dalam belajar.
2. Sebaiknya disediakan aplikasi untuk beberapa komputer dengan versi yang
berbeda.
3. Sebaiknya penjelasan mengenai langkah-langkah penggunaan aplikasi
Dreamweaver dapat dipaparkan secara lebih detail agar praktikan paham dan
mudah mengerjakan studi kasus. Pada tampilan sukses dan gagal sama-sama
login menggunakan username dan password.

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24
VI. Daftar Pustaka
Agusvianto,Hendra. (2017).” Sistem Informasi Inventori Gudang Untuk
Mengontrol Persediaan Barang Pada Gudang Studi Kasus : PT.Alaisys
Sidoarjo”. Journal Information Engineering and Educational Technology,
Volume 01 Nomor 012017
Nadia, A. (2020). “Tutorial Dreamweaver Lengkap”. (https://www.hostinger.
co.id/tutorial/tutorial-dreamweaver). Diakses pada 23 April 2021 pukul 21.00
Nanda, N. (2018). “Alasan Pentingnya Sistem Informasi Manajemen (SIM)”.
(http://annyoengnanda.blogspot.com/2018/04/alasan-pentingnya-sistem-inf
ormasi_2.html). Diakses pada 23 April 2021 pukul 21.40
Purnama, C. 2016. “Sistem Informasi Manajemen”. Mojokerto: Insan Global
Retnosari, D., Haris, M. (2016). “Implementasi Sistem Jasa Pembangunan Dan
Desain Rumah Menggunakan Adobe Dreamweaver”. (https://ojs.uniska-
bjm.ac.id/index.php/JST/article/download/649/566). Diakses pada 23 April
2021 pukul 21.00
Susanto, Yunita A. (2020). “Merancang Media Pembelajaran Berbasis Web
Menggunakan Aplikasi Dreamweaver Pada SMAN 1 Kapoiala. SIMKOM. 5.
9-18”.(https://www.neliti.com/id/publications/328105/merancang-media-
pembelajaran-berbasis-web-menggunakan-aplikasi-dreamweavera). Diakses
pada 24 April 2021 pukul 08.00

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

MODUL III (DREAMWEAVER)
KAMIS 1 / 24