laporan praktikum basis data modul vi-membuat website
TRANSCRIPT
BAB I
PENDAHULUAN
1.1 CSS
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web
untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word
yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer,
images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa
berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman
web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks,
warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over,
spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan
parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur
tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan
halaman yang sama dengan format yang berbeda.
1.2 Kelebihan dan Kekurangan CSS
CSS atau yang merupakan kepanjangan dari Cascading Style Sheet,
merupakan suatu bahasa yang dibuat pada halaman web untuk mempercantik
tampilan web, namun selain memiliki kelebihan, CSS juga memiliki kekurangan,
kekurangan dan kelebihan itu antara lain :
Kelebihan :
1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain seefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css
saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.
7. dan masih banyak lagi :)
Kekurangan :
1. Tampilan pada browser berbeda-beda.
2. Kadang juga terdapat browser yang tidak support CSS (browser lama).
3. Harus tahu cara menggunakannya.
4. Dibutuhkan waktu lebih lama dalam membuatnya.
5. Belum lagi ada bug/error dalam CSS.
1.3 Jenis-Jenis CSS
Inline CSS
Yaitu kode CSS yang dituliskan langsung ke dalam tag HTML, penulisan dengan cara ini tidak memerlukan selector dalam CSS.
Contoh :
<p style=“color:blue;“>
Isi paragraph. </p>
Embedded CSS
1
2
Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara tag <body> dan </body>
Contoh :
<head>
<style type=”text/css”>
P{color:blue;}
</style>
</head>
Import CSS file
Yaitu kode CSS yang dituliskan pada file tersendiri berekstensi .css, untuk cara penggunaannya menggunakan tag <link>
Contoh :
<head>
<link rel=“stylesheet“ typcss“ media=“screen” href=”style.css”>
3
</head>
Keterangan :
Pada kode href merujuk pada file CSS, yaitu berada pada folder css dengan nama file “style.css”.
BAB II
DISKRIPSI KERJA
Pada praktikum kali ini, praktikan diminta untuk membuat script dari ketiga
jenis CSS dimana didalam website harus memuat form yang dapat dikoneksikan
kedalam database yang telah dibuat. Berikut merupakan langkah kerja praktikan
untuk menyelesaikan kasus tersebut :
1. Aktifkan apache melalui apache console dan juga aktifkan MySQL. Buka
internet browser seperti Mozilla firefox kemudian ketikkan didalamnya
http://localhost/phpMyAdmin, maka akan tampak halaman seperti berikut :
Gambar 2.1 JendelaphpMyAdmin
2. Pada “Create new database”, isikan nama database yang diinginkan, pada
praktikum ini praktikan akan mengcreate sebuah database dengan nama
“db_lelelicious” kemudian klik tombol “Create” seperti berikut :
Gambar 2.2 Create database
3. Perhatikan pada kolom “Create new table on database db_lelelicious”, isikan
nama tabel, misalkan “saran” dengan jumlah field adalah 4 seperti berikut :
Gambar 2.3 Create table saran
5
4
4. Kemudian praktikum menuliskan field yang dibutuhkan seperti pada Gambar
2.4. Dan memilih save untuk menyimpan field seperti gambar berikut :
Gambar 2.4 Memgisi field yang dibutuhkan
5. Apabila tabel berhasil maka keluar syntax seperti pada Gambar 2.5 berikut :
Gambar 2. 5 Syntax membuat tabel
6. Buka program Adobe Dreamweaver pada program dengan cara mengetik dengan
kata kunci “Adobe Dreamweaver” pada kolom pencarian yang terletak di home
windows8 kemudian tekan tombol enter.
5
Gambar 2.6 Membuka program Adobe Dreamweaver
7. Buka folder htdocs di Apache2triad, kemudian pilih folder lelelicious.com
8. Buka semua file script dengan Adobe dreamweaver
Gambar 2.8 Folder lelelicious
9. Kemudian muncul tampilan semua file yang ada di Adobe Dreamweaver.
Gambar 2.9 File yang ada di Adobe Dreamweaver
10. Selanjutnya praktikan membuka koneksi.php dan mengubah syntax $dbnm
menjadi “db_lilicious”. Kemudian praktikan menyimpannya.
6
Gambar 2.10 Mengubah syntax $database
11. Kemudian praktikan membuka folder css dan buka file style.css seperti pada
Gambar 2.11 berikut :
Gambar 2.11 Menuliskan file style.css
12. Kemudian praktikan membuka index.html dan menuliskan syntax yang ada
didalam index.html sampai seperti pada Gambar 2.12
9
Gambar 2.12 Menuliskan syntax index.html
10
13. Setelah selesai merubah file ¸kemudian praktikan membuka localhost/ pada web
browser dan pilih lelelicious.com seperti gambar berikut :
Gambar 2.13 Tampilan localhost/
14. Apabila berhasil dibuka , maka akan muncul tampilan dari tampilan awal
lelelicious.com
Gambar 2.19 Tampilan awal lelelicious.com
15. Kemudian praktikan memilih “Contact Us” dan praktikan mengisi form sesuai
data yang benar seperti gambar berikut :
Gambar 2.19 Form data pegawai
12
Gambar 2.15 Tampilan contact us
16. Apabila berhasil maka data yang diiputkan ke dalam form akan masuk kedalam
database db_lelelicious dan muncul di tabel saran seperti berikut :
Gambar 2.16 Tampilan data pada tabel yang sudah diinputkan
BAB III
PEMBAHASAN
Pada kasus yang telah disebutkan pada bagian bab deskripsi kerja, selanjutnya praktikkan akan membahas mengenai langkah kerja yang telah dipaparkan di bab sebelumnya.
Langkah pertama praktikan membuat database terlebih dulu pada localhost/phpMyadmin ( praktikan menggunakan Mozilla firefox ) dengan nama database db_lelelicious seperti pada gambar berikut :
Gambar 3.1 Mengcreate sebuah database
Sebelumnya telah diketahui cara membuat tabel beserta atributnya pada laporan sebelumnya, jadi praktikan langsung saja menampilkan akhir dari pembuatan databasenya yang telah ada tabel beserta atributnya. Praktikkan membuat sebuah tabel dengan nama saran, dimana atribut yang ada ditabel database db_lelelicious ini ada no
dengan tipe data int dan untuk otomatis pengisian angka menggunakan auto
increment dengan panjang maksimal 4 karakter, nama dengan tipe data varchar
dengan maksimal 30 karakter, email dengan tipe data varchar dengan maksimal 30
karakter dan pesan dengan tipe data varchar dengan maksimal 500 karakter.
Praktikkan membuat sebuah database dengan tujuan bahwa database tersebut
akan digunakan untuk pengisian form yang ada dibagian contact us pada website
lelelicious.com. Pada website yang dibuat ini praktikan mendownload sebuah template yang sesuai keinginan, sehingga praktikan hanya perlu mengedit tulisan, gambar, alamat hyperlink. Pada bagian halaman home memuat informasi penjualan ikan lele berkualitas terbaik, agar para costumer mengetahui bahwa pada halaman ini merupakan tempat penjualan ikan lele dan juga mengetahui kegunaan/kandungan apa saja jika mengkonsumsi ikan lele ini. Dan untuk halaman utama/home (index) pada pembuatan script di dreamweaver dapat dilihat pada Gambar 3.2 berikut :
12
13
14
Gambar 3.2 Script untuk tampilan home
Pada halaman index.html terdapat syntax untuk menghubungkan file css
dengan file html yang memiliki kemampuan untuk menyambung atau berpindah ke
dokumen yang lainnya (link) ditandai dengan syntax <a href=’’...”</a> seperti
Gambar 3.3 dibawah ini :
Gambar 3.3 syntax khusus pada html
Cara kerjanya adalah menggunakan suatu link yang penulisannya diletakkan
pada head. Link yang dituju adalah file css tersebut untuk dapat mengakses style-style
yang ada pada file css. Hasilnya sama seperti program sebelumnya, yang
membedakan adalah penggunaan pendekatan linked yang prinsipnya file dokumen
dan CSS diletakkan terpisah menggunakan tag link. Penulisan tag link : <link
rel=”stylesheet” href=”style.css” type=”text/css” />. Setelah
mengetikkan kode program untuk membuat dokumen HTML dan simpan dengan
nama eksistensi file .html agar dapat memanggil Cascade Style Sheet yang telah
dibuat terpisah tadi.
Syntax khusus
15
selector
Gambar 3.4 Script file style.css
Gambar 3.4 diatas merupakan script dari Cascade Style Sheet yang telah
dibuat terpisah tadi dengan file html. Script diatas hanya sebagian dari yang dibuat.
Ibaratnya seperti kehidupan manusia, jika manusia ingin tampil lebih cantik dan
ganteng, biasanya manusia akan pergi ke salon untuk menghias diri mereka. Jika di
dunia pemrograman web, CSS tersebut merupakan salon dari HTML tersebut. Jadi
kalo halaman web tampil lebih cantik atau ganteng gunakan dengan CSS. CSS
tersebut digunakan untuk mengatur tata letak object (layout) pada sebuah halaman
web.
Penulisan css terbagi menjadi dua bagian yaitu selector dan declaration.
Selector merupakan kode yang umumnya berupa satu huruf yang berguna untuk
memanggil serangkaian pengaturan dari halaman html. Dari Gambar 3.4 diatas
diketahui bahwa “P” merupakan selector. Declaration terdiri dari property dan value.
Property berisi bagian yang ingin diatur dalam html misalkan warna huruf, jenis
huruf. Sedangkan value adalah nilai yang diinginkan atas properti.
Padding digunakan untuk menentukan jarak antara border dengan konten.
Sehingga dengan penggunaan padding, jarak akan bisa lebih diatur sehingga menjadi
lebih rapi.
body
{ font: Tahoma;
color: #000;
background: transparent #FFF repeat;}
Untuk memulainya dimulai dengan pengetikan body. Hasil dari CSS tersebut
adalah teks yang diatur menjadi berwarna hitam (#000) dengan jenis huruf tahoma.
Background tersebut bersifat transparan dan menghasilkan gambar berulang-ulang.
Selanjutnya untuk mengetahui adanya pemesanan masuk maka harus menyambung ke database, jadi perlu digunakan koneksi antara database dengan website ini dengan menggunakan format php. Praktikkan merubah syntax $database menjadi syntax $database
= “db_lelelicious” karena halaman koneksi.php ini digunakan untuk menyambungkan inputan data di form pada halaman contact us ke database db_lelelicious yang telah praktikan buat. Maksud dari
praktikan merubah $database adalah menyesuaikan database yang telah dibuat
pada localhost/phpmyadmin. Berikut script koneksi.phpnya dapat dilihat pada Gambar 3.4 berikut:
Gambar 3.4 Script halaman koneksi.php
Kemudian buka localhost/ dari web browser dengan menggunakan Mozilla firefox dan pilih folder lelelicious.com seperti pada gambar dibawah :
Gambar 3.5 Tampilan localhost/
Apabila berhasil dibuka , maka akan muncul tampilan dari tampilan awal website
lelelicious.com. Disinilah praktikan akan mencoba semua pilihan yang telah dibuat.
Gambar 3.6 Tampilan home
Gambar 3.7 Penginputan data pada form di halaman contact us
Gambar 3.6 dan Gambar 3.7 diatas merupakan hasil semua tampilan pada masing-masing halaman website lelelicious.com.
Gambar 3.16 Hasil data masuk di database db_lelelicious
Gambar diatas merupakan daftar pemesan lele yang telah menginputkan data mereka pada form yang ada di halaman contact us dimana terdapat nama pemesan “ddd” yang berarti data pemesanan sudah
berhasil masuk dalam database db_lelelicious
BAB IV
PENUTUP
Pada bagian penutup ini praktikan dapat menyimpulkan terkait tema laporan
praktikum sistem informasi manajemen yaitu “CSS”. Praktikkan dapat
menyimpulkan bahwa :
1. Kode CSS harus ditulis diantara tag <head> dan </head>
2. Kode CSS harus di awali dengan tag <style>
3. Di awali dengan tanda kurung buka "{" dan di akhiri dengan tanda kurung
tutup "}"
4. Bila ingin menuliskan property lebih dari 1 gunakan tanda titik koma
";"Keika menuliskan script untuk koneksi antara website dengan database dalam format php maka harus sama ada kesesuaian antara script dengan data database, jika tidak sesuai meskipun satu variabel saja maka tidaka akan terkoneksi.
5. Variabel yang kita buat harus sesuai dengan tema yang di buat.
6. Website lelecious.com ini berfungsi untuk mempermudah dalam pencarian atau pembelian secara online ikan lele, karena jarang sekali website yang yang menjual ikan lele yang secara online.