Modul Tutorial

Pembuatan Aplikasi
Kasir
PERSIAPAN
1. Mengaktifkan Server Web
Server Web adalah sofware yang menjadi tulang belakang dari World Wide Web(www).
Server web menunggu permintaan dari client yang menggunakan browser sepert modzila,
chrom, Internet Explorer, Opera mini, dan browser lainnya. Jika ada permintaan dari browser,
maka server web akan memproses pemintaan itu kemudian memberikan hasil prosesnya berupa
data yang diinginkan kembali ke browser. Kami menggunakan software XAMPP. XAMPP
adalah sebuah sofware free yang telah menggabungkan web server, PHP dan MySQL kedalam
satu program. Sehingga ketika XAMPP digunakan, kita tdak perlu lagi menginstall PHP,
MySQL dan Apache. Jika dikomputer anda belum ada XAMPP maka anda bisa
mengakses http://www.apachefriends.org. Dan melakukan download sesuai dengan
spesifkasi komputer anda, apakah itu Windows, Mac OS, atau Linux
 Buka aplikasi XAMPP yang ada dikomputer anda
 Maka muncul seperti gambar dibawah ini

 Klik Start Apache dan Mysql

2. Framework
Pembuatan website di tugas besar ini kami menggunakan framework yaitu CodeIgniter,
oleh karena itu kita harus mempersiapkan CodeIgniter. Jika belum ada anda bisa mengakses
di http://www.codeigniter.com untuk mendownload framework codeigniternya.
 Letakkan file yang telah di download pada folder C:/xampp/htdocs lalu extract file tersebut
 Agar lebih mudah boleh mengganti nama folder codeigniternya contoh pada pembuatan web ini
kami mengubah nama folder menjadi TugasBesar
 Buka foldernya kemudian cari folder applicaton
 Lihat tiga folder mvc yang ada: Models, Views, Controllers

MVC adalah teknik atau konsep yang memisahkan komponen utama menjadi tiga komponen
yaitu model, view, dan controller
 Model
Model merupakan bagian penangan yang berhubungan dengan pengolahan atau manipulasi
database. Seperti mengambil data dari database, menginput dan pengolahan database lainnya.
Semua intruksi yang berhubungan dengan pengolahan database di letakkan di dalam model.
 View
View merupakan bagian yang menangani halaman user interface atau halaman yang muncul
pada user. Tampilan dari user interface dikumpulkan pada view untuk memisahkannya dengan
 controller dan model sehingga memudahkan web design dalam melakukan pengembangan
tampilan halaman website
 Controller
Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan view. Jadi, user
tidak akan berhubungan dengan model secara langsung.
3. Bootstrap
Bootstrap merupakan sebuah library framework CSS yang di buat khusus untuk bagian
pengembangan front-end website. Bootstrap merupakan salah satu framework HTML, CSS
dan JavaScript yang paling popular di kalangan web developer. Pada saat ini hamper semua
web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih
mudah dan sangat cepat, karena anda hanya perlu menambahkan class-class tertentu misalnya
membuat tombol, grid, navigasi dan lainnya.
 Download bootstrap
 Buat sebuah folder baru dengan nama assets pada folder codeigniter tadi yang diberi nama
TugasBesar(xampp/htdocs/TugasBesar)
 Copy folder bootstrap yang anda download, lalu simpan di dalam folder assets yang tadi anda
buat (xampp/htdocs/TugasBesar/assets).

4. Html2pdf
Membuat laporan PDF, kebanyakan beberapa website bisnis atau e-commerce ada fitur
mencetak laporan untuk mengevaluasi kinerja perusahaan kersebut. Saat ini sudah banyak
pengembang pemograman website yang membuat plugin untuk membuat atau mencetak
laporan pdf seperti Html2Pdf, Mpdf, Fpdf, dan lainnya. Pada tugas besar, kami menggunakan
Html2Pdf sebagai plugin untuk membuat atau mencetak laporan pdfnya
Instalasi
 Download plugin Html2Pdf. Pada tugas besar, kami menggunakan Html2Pdf v4.03
 Jika belum ada folder assets di folder codeigniter, maka anda harus membuat sebuah folder
baru dengan nama assets pada folder codeigniter tadi yang diberi nama
TugasBesar(xampp/htdocs/TugasBesar)
 Copy dan Ekstrak file Html2Pdf yang Anda download, lalu simpan di dalam folder assets yang
tadi anda buat (xampp/htdocs/TugasBesar/assets).

5. JQuery
JQuery merupakan suatu framework (library) JavaScript dan cara baru dalam menuliskan kode
JavaScript. JavaScript sendiri adalah bahasa pemograman yang dapat bekerja di sebagian besar
browser seperti Google Chrome, Mozilla Firefox, Safari, Internet Explorer, Opera mini dan
lainnya. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
JQuery digunakan untuk mempermudah cara penulisan library JavaScript sehingga dengan
menggunakan JQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan
event (event handling), pembuatan animasi didalam web.

6. Perancangan Entity Relationship Diagram

 Penjelasan tentang diagram :
a. Entitas : user , barang
b. Atribut
 user : id_user, nama_user, username, password, level, Is_blokir
 barang : kode, nama, harga, stok, gambar
 transaksi : jam, tanggal, jumlah, total
c. Relationship : transaksi
d. Cardinality : Many-to-Many
Relational Scheme
Karena Kardinaltas many-to-many maka relationship transaksi menjadi tabel baru dan
mengambil primary key dari tabel yang terhubung dengannya seperti mengambil primary key
dari tabel user yaitu id_user dan mengambil primary key dari tabel barang yaitu kode.

 user : id_user, nama_user, username, password, level, Is_blokir

 barang : kode, nama, harga, stok, gambar
 transaksi : id_user, kode_barang, jam, tanggal, jumlah, total

7. Perancangan Database

 Nama Database : kasir

 Nama Tabel
1. barang
2. transaksi
3. user
 Struktur masing-masing tabel
1. barang
Field Type Null Key Default Extra
kode Varchar(10) No Primary Key Null
nama Varchar(50) No Null
harga Int(11) No Null
 stok Int(11) No Null
gambar Varchar(100) Yes Null
2. transaksi
Field Type Null Key Default Extra
id_user Int(11) No Primary Key Null
tanggal Date No Primary Key Null
jam Varchar(11) No Primary Key Null
kodebarang Varchar(10) No Primary Key Null
jumlah Int(11) No Null
total Int(11) No Null
3. user
Field Type Null Key Default Extra
id_user Varchar(10) No Primary Key 0
nama_user Varchar(100) No Null
username Varchar(30) No Null
password Varchar(50) No Null
level Varchar(30) No Null
is_blokir Varchar(10) No Null
8. Langkah pembuatan aplikasi kasir
(File disimpan di xampp/htdocs/TugasBesar/application/models)
Login_model.php
(File disimpan di xampp/htdocs/TugasBesar/application/controllers)
Login.php

(File disimpan di xampp/htdocs/TugasBesar/application/views)

login_form.php
(File disimpan di xampp/htdocs/TugasBesar/application/models)
aksi_login.php

(File disimpan di xampp/htdocs/TugasBesar/application/views)

aksi_login.php
Tampilan Form Login

(File disimpan di xampp/htdocs/TugasBesar/application/controllers)

Home.php
(File disimpan di xampp/htdocs/TugasBesar/application/views)
index.php
Tampilan Home

(File disimpan di xampp/htdocs/TugasBesar/application/models)

Kasir_Model.php
(File disimpan di xampp/htdocs/TugasBesar/application/controllers)
Kasir.php
(File disimpan di xampp/htdocs/TugasBesar/application/views/barang)
tampil.php

(File disimpan di xampp/htdocs/TugasBesar/application/views/barang)

tambah.php
(File disimpan di xampp/htdocs/TugasBesar/application/views/barang)
ubah.php

Tampilan barang
(File disimpan di xampp/htdocs/TugasBesar/application/models)

Penjualan_Model.php

(File disimpan di xampp/htdocs/TugasBesar/application/controllers)

Penjualan.php

(File disimpan di xampp/htdocs/TugasBesar/application/views/transaksi)

tampil.php
Tampilan Penjualan

(File disimpan di xampp/htdocs/TugasBesar/application/models)

Transaksi_Model.php
(File disimpan di xampp/htdocs/TugasBesar/application/controllers)
Transaksi.php
(File disimpan di xampp/htdocs/TugasBesar/application/views/transaksi)
tambah.php
Tampilan Transaksi

(File disimpan di xampp/htdocs/TugasBesar/application/views)

template.php
(File disimpan di xampp/htdocs/TugasBesar/application/views)
header.php

(File disimpan di xampp/htdocs/TugasBesar/application/views)

footer.php

(File disimpan di xampp/htdocs/TugasBesar/application/views)

content.php
(File disimpan di xampp/htdocs/TugasBesar/application/views)
navbar.php

(File disimpan di xampp/htdocs/TugasBesar/application/views)

sidebar.php

(File disimpan di xampp/htdocs/TugasBesar/application/models)

Laporan_Model.php
(File disimpan di xampp/htdocs/TugasBesar/application/controllers)
Laporan.php

(File disimpan di xampp/htdocs/TugasBesar/application/views/laporan)

penjualan.php
Tampilan tampilkan laporan

(File disimpan di xampp/htdocs/TugasBesar/application/views/laporan)

Penjualan_pdf.php
Tampilan cetak laporan