Laporan Praktikum Basis Data Modul VI-Membuat Website

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

http://localhost/phpMyAdmin

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

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.

Laporan Praktikum Basis Data Modul VI-Membuat Website

Education

Transcript of Laporan Praktikum Basis Data Modul VI-Membuat Website