Tutorial Pembuatan Aplikasi Kasir (Codeigniter)

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