CSS Cascading Style Sheet Perancangan Sistem Data Flow Diagram DFD

Macromedia Dreamweaver merupakan sebuah editor HTML profesional untuk men desain secara visual dan mengolah situs web maupun halaman web . Macromedia Dreamweaver 8 adalah salah satu produk dari vendor Macromedia Inc . Dimana Macromedia Dreamweaver 8 ini memiliki kemampuan untuk menyunting kode dengan lebih baik, serta mampu menggabungkan layout site dengan programming web . Aplikasi pada Dreamweaver juga dapat membuat sebuah aplikasi dinamis dengan database menggunakan bahasa server seperti CFML, ASP.NET, ASP, JSP, dan PHP. CSS atau Cassading Style adalah sebuah dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat Kurniawan, 2008.

2.9 CSS Cascading Style Sheet

CSS digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML, sebagai contoh, kode HTML murni tidak memungkinkan untuk untuk mengatur ukuran font yang diterapkan pada setiap sel dan bahkan tag BASEFONT pun tak berpengaruh pada sel-sel tabel Abdul, 2003. Universitas Sumatera Utara BAB 3 PERANCANGAN SISTEM

3.1 Perancangan Sistem

Perancangan sistem merupakan upaya perusahaan untuk memulai memiliki sistem baik yang lama maupun yang baru. Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang harus dilakukan. Desain sistem secara umum mengidentifikasikan komponen-komponen sistem e-Commerce yang akan didesain secara terinci.

3.2 Data Flow Diagram DFD

Data Flow Diagram DFD adalah gambaran sistem secara logika. Digunakan untuk mengambarkann aliran data informasi dan transformasi proses dari data. Dimulai dari pemasukan data sampai menghasilkan keluaran output data. Universitas Sumatera Utara

3.2.1 Simbol-simbol DFD dan Flowcart

Tabel 3.1 Simbol-simbol DFD dan Flowcart No Gambar Nama Fungsi 1 Kesatuan Luar External Entity Merupakan kesatuan luar di lingkungan luar Sistem yang akan memberikan input atau menerima output dari sistem. 2 Proses Process Kegiatan dari hasil suatu arus data yang masuk dalam proses untuk dihasilkan arus data yang akan keluar atau untuk mengubah input menjadi output 3 Aliran Data Data Flow Data mengalir melalui sistem, dimulai dengan sebagian input dan diubah atau diproses menjadi input Universitas Sumatera Utara 4 Penyimpanan Data Data Storage Data disimpan untuk keperluan berikutnya. 5 Awal Proses Program Start Awal untuk memulai suatu program. 6 Perintah Dasar Petunjuk untuk setiap aplikasi program. 7 Proses Data Proses data dari aplikasi yang tersedia. 8 Aplikasi Program Aplikasi-aplikasi yang terdapat pada website tersebut. 9 Database Tempat penyimpanan semua data. Universitas Sumatera Utara

3.2.2 Diagram Level Konteks

Category Product Shop Config - order Produk - contact us Produk Gambar 3.1 DFD Level Konteks Sistem e-Commerce pada Toko Roti Ganda Pematangsiantar Costumer Sistem e-Commerce Admin Deliver Universitas Sumatera Utara

3.2.3 Data Flow Diagram level nol

Data Category Category Produk Data Produk Information shop Shop config Costumer comment Contact us Costumer order produk order Gambar 3.2 DFD Level Nol Sistem e-Commerce pada Toko Roto Ganda Pematangsiantar Costumer Admin Input category Input Produk Shop Config Contact us order Deliver F4 F5 F3 F2 F1 Universitas Sumatera Utara

3. 3 Perancangan Database

Database merupakan kumpulan dari data yang saling berhubungan satu dengan lainnya, tersimpan di simpanan luar komputer dan digunakan perangkat lunak tertentu untuk memanipulasinya. Database merupakan salah satu komponen yang penting dalam sistem informasi yang berbasis e-Commerce , karena berfungsi sebagai basis penyedia informasi bagi para pemakainya. Karena database merupakan kumpulan dari beberapa file , dalam hal ini file-file tersebut dikelompokkan secara terstruktur dalam beberapa tabel sesuai dengan informasi yang terkandung didalamnya. Berikut ini adalah langkah-langkah perancangan database yang penulis gunakan untuk membangun sistem e-Commerce ini :

3.3.1 Field Name Tabel 3.2 Tabel dalam database

No Table Name 1 Tbl_cart 2 Tbl_category 3 Tbl_currency 4 Tbl_inbox 5 Tbl_order 6 Tbl_order_item 7 Tbl_product 8 Tbl_shop config 9 Tbl_user Universitas Sumatera Utara

3.3.2 Field Table Tabel 3.3 Field Table dalam database

No Table Name Field Name 1 Tbl_cart - ct_id - pd_id - ct_qty - ct_session_id - ct_date 2 Tbl_category - cat_id - cat_parent_id - cat_name - cat_description - cat_image 3 Tbl_currency - cy_id - cy_code - cy_symbol 4 Tbl_inbox - id - name - email - comment - replay - time_replay - date 5 Tbl_order - od_id - od_date - od_last_update - od_status - od_memo - od_shipping_first_name - od_shipping_last_name - od_shipping_address1 - od_shipping_address2 - od_shipping_phone - od_shipping_city - od_shipping_state - od_shipping_postal_code - od_shipping_cost Universitas Sumatera Utara - od_payment_first_name - od_payment_last_name - od_payment_address1 - od_payment_address2 - od_payment_phone - od_payment_city - od_payment_state - od_payment_postal code 6 Tbl_order_item - od_id - pd_id - od_qty 7 Tbl_product - pd_id - cat_id - pd_name - pd_description - pd_price - pd_qty - pd_image - pd_thumbnail - pd_date - pd_last_update 8 Tbl_shop config - sc_name - sc_address - sc_phone - sc_email - sc_shipping_cost - sc_currency - sc_order_email 9 Tbl_user - user_id - user_name - user_password - user_regdate - user_last_login Universitas Sumatera Utara

3.3.3 Describtion Field Table a table_cart

Tabel 3.4 Describtion table_cart No Field Name Type Width Description 1 ct_id int 10 Id chart 2 pd_id int 10 Id product 3 ct_qty madiumint 8 Jumlah product 4 ct_session_id char 32 Kode id session pengguna 5 ct_date datetime - waktu b table_category Tabel 3.5 Describtion table_category No Field Name Type Width Descreption 1 cat_id int 10 Id kategory 2 cat_parent_id int 11 Id kategory 3 cat_name varchar 50 Nama kategory 4 cat_description varchar 200 Deskripsi kategori 5 cat_image varchar 255 Nama gambar dari kategory Universitas Sumatera Utara c table_currency Tabel 3.6 Describtion table_currency No Field Name Type Width Descreption 1 cy_id int 10 Id currency 2 cy_code char 3 kode currency 3 cy_symbol varchar 8 Simbol currency d table_inbox Tabel 3.7 Describtion table_inbox No Field Name Type Width Descreption 1 Id int 5 Id inbox 2 Name varchar 35 Nama pemgunjung 3 Email varchar 35 Email pengunjung 4 comment text - Komentar pengunjung 5 Replay text - Balasan 6 time_replay datetime - Waktu pesan di balas 7 Date datetime - Waktu pesan masuk Universitas Sumatera Utara e table_order Tabel 3.8 Describtion table_order No Field Name Type Width Descreption 1 od_id Int 10 Id order 2 od_date datetime - Waktu memesan 3 od_last_update datetime - Waktu memesan diperbaharui 4 od_status Enum - Status dari pesanan dikirim atau belum 5 od_memo varchar 255 Pesan singkat 6 od_shipping_first_name varchar 50 Nama awal pemesan 7 od_shipping_last_name varchar 50 Nama akhir pemesan 8 od_shipping_address1 varchar 100 Alamat I pemesan 9 od_shipping_address2 varchar 100 Alamat II pemesan 10 od_shipping_phone varchar 32 No telepon pemesan 11 od_shipping_city varchar 100 Kota pemesan 12 od_shipping_state varchar 32 Provinsi pemesan 13 od_shipping_postal_code varchar 10 Kode pos pemesan 14 od_shipping_cost decimal 5,2 Biaya yang dikeluarkan 15 od_payment_first_name varchar 50 Nama awal pembayar 16 od_payment_last_name Varchar 50 Nama akhir pembayar 17 od_payment_address1 Varchar 100 Alamat I pembayar 18 od_payment_address2 Varchar 100 Alamat II pembayar 19 od_payment_phone Varchar 32 No telepon pembayar Universitas Sumatera Utara 20 od_payment_city Varchar 100 Kota pembayar 21 od_payment_state Varchar 32 Provinsi pembayar 22 od_payment_postal code Varchar 10 Kode pos pembayar f table_order_item Tabel 3.9 Describtion table_order_item No Field Name Type Width Descreption 1 od_id Int 10 Id order 2 pd_id Int 10 Id produk 3 od_qty Int 10 jumlah order yang di pesan g table_product Tabel 3.10 Describtion table_product No Field Name Type Width Descreption 1 pd_id int 10 Id produk 2 cat_id int 10 Id kategory 3 pd_name varchar 100 Nama produk 4 pd_description text - Deskripsi produk 5 pd_price decimal 9,2 Harga 6 pd_qty smallint 5 Jumlah yang tersedia 7 pd_image varchar 200 Nama gambar 8 pd_thumbnail varchar 200 Nama icon gambar kecil Universitas Sumatera Utara 9 pd_date datetime - Waktu data produk di terima 10 pd_last_update datetime - Waktu data produk di update h table_shop_config Tabel 3.11 Describtion table_shop_config No Field Name Type Width Descreption 1 sc_name varchar 50 Nama toko 2 sc_address varchar 100 Alamat toko 3 sc_phone varchar 30 No telepon toko 4 sc_email varchar 30 E-mail toko 5 sc_shipping_cost decimal 5,2 Baiya yang dikeluarkan 6 sc_currency int 10 Mata uang yang digunakan 7 sc_order_email enum - Pengiriman data dengan email i table_user Tabel 3.12 Describtion table_user No Field Name Type Width Descreption 1 user_id int Id user 2 user_name varchar 20 Nama user 3 user_password varchar 32 Password user 4 user_regdate datetime - Waktu 5 user_last_login datetime - Waktu terakhir user login Universitas Sumatera Utara Ket: adalah sebagai sombol Primary Key adalah sebagai simbol Forgen key

3.4 Relationship Table