Web Application Development based on MVC with CodeIgniter FrameworkAndi R. Hermawan 2211100032Joko Priambodo 2211100054

AdvisorReza Fuad Rachmadi, S.T, M.T.

Internship ReportParahita Diagnostic CenterOctober, 6 2014 - Desember, 6 2014

Agenda1. Introduction about Parahita Diagnostic Center

2. Parahita’s Products & Service

3. Literature Review

4. Company Assignment

5. Conclusion

1. Introduction❖ Parahita Diagnostic Center is a Clinical Laboratory at Jalan

Dharmawangsa no 66, Surabaya.

❖ As a Clinical Laboratory, Parahita Diagnostic Center utilize online system for doctor and patients.

❖ The internship was taken in Parahita Diagnostic Center, which is responsible for co-creating Parahita’s internal information system .

2. Preface❖ Parahita’s Service Schematic

2.1 Parahita’s Website

❖ This Website was made for people to access all information about Parahita’s Products and Services.

(picture 2.1 Screenshot from www.labparahita.com)

2.2 Online Diagnostic Sevice

❖ This Service was made for Parahita’s patients to check their medical diagnostic from their own Internet Browser.

(picture 2.2 Screenshot from www.labparahita.com/web/hasil)

2.3 Information System❖ This Service built

for employee and employer in Parahita to manage their own Information

❖ Local Network Web Apps based on MVC and built with CodeIgniter

(picture 2.3 Screenshot from localhost/absensi project)

3.1 Web App Definition❖ Application that runs in browser. ❖ Does not require a download or the installation of extra

software❖ Can be accessed on any device that has a Internet browser: ❖ Always using the most up-to-date version.

(picture 3.1 Web Apps Illustration)

3.1 Web App Definition

❖ Website with only information that we can read is not web app.

❖ Websites where you can log in, use a tools, upload picture, search for information, or upload a file, is a web app.

example : Google Docs, Microsoft Office Online, Facebook dll

3.2 MVC Definition

MVC stands for Model View Controller❖ Model - It has something to do with data and database❖ View - What end user sees❖ Controller - Gets the data from model and sends to the view

and vice versa

(picture 3.2 MVC model)

3.3 Code Igniter Framework ❖ MVC Framework for quick Web development❖ using PHP❖ Lightweight in server-side❖ Relatively easy to learn

(picture 3.3 CodeIgniter Folder Structure)

3.4. Ext Js Framework❖ a powerful framework for user interface development❖ desktop class web-apps interface and can implement complex

user interface in short time like grid, data store, panels, tab panels etc

❖ based on Javascript

(picture 3.4 MVC Ext Js Work with PHP based Frameworks diagram)

3.5 Other Definitions❖ PHP : Scripting Language for server-side programming. PHP is

a powerful tool for making dynamic, interactive web pages and handling big Database

❖ MySql : relational database management system (RDBMS). We can use it as a way to store, retrieve, and manage data for websites

❖ PHPmyAdmin : let us administer our databases and its tables, triggers, views, perform database operations like renaming database and table, etc. simply put, it brings us a GUI for our databases

❖ ….

3.5 Other Definitions❖ AJAX : is not a programming language or a tool, but a concept.

Ajax is a client-side script that communicates to and from a server/database without the need for a ppostback or a complete refresh

❖ JavaScript : Client-side scripting language. this means that browser is responsible to interpret this script. Generally used for improving user interaction experience.

4. Company AsignmentDuring internship, we got 3 task, there are :❖ Some Feature in Gaji Web Application❖ SDMsystem Web Application❖ Apotek Web Application❖ Web Siprama (for Front Office)

4.1 Overview❖ Here is Overview that our intership do

(picture 4.2 overview)

4.2 Workflow❖ Our workflow for all web app development in this internship is

illustrated below :

(picture 4.1 workflow)

4.3 Gaji Web ApplicationThis application is saving any updates of employee’s salary. Salary divided into two, “gaji pokok” and “gaji ijin”.

4.3.1 Design Application❖ Database :

Dt_gapok for gaji pokok.Dt_SetIjin for gaji ijin.

❖ Controller PHP : basic CRUD❖ Model PHP: connection with

database❖ Controller Ext Js: function for UI❖ View Ext Js: design model form

and table

(picture 4.3 database for Gaji Web App)

4.3.2 Relational Table

Dt_gapok-Tgl buat-Gaji pokok-Tunj. Resiko-Tunj. Lokasi-Bulan berlaku

Dt_bulan-Id_bulan-nama_bulan

(picture 4.4 relational table for Gaji Web App)

4.3.3 Result

(picture 4.5 result for Gaji Web App)

4.4 SDMsystem Web AppThis application is saving all Parahita’s branch salary. First, Salary according Parahita’s Branch and the second, salary according how long their job.

4.4.1 Design Application❖ Database :

Dt_cabang .Dt_jabatan .Dt_gapokTunjab .

❖ Controller PHP : basic CRUD❖ Model PHP: connection with

database❖ Controller Ext Js: function for UI❖ View Ext Js: design model cell

editing

(picture 4.6 database for SDMsystem Web App)

4.4.2 Relational Table

Dt_cabang- id_cabang- nama_cabang

Dt_jabatan- id_jabatan- nama_jabatan

Dt_gapokTunjab- id_gapok- id_cabang- id_jabatan- nominal- approve

(picture 4.7 relational table for SDMsystem Web App)

4.4.3 Result

(picture 4.8 Screenshot for GajiPokok Parahita’s Branch)

(picture 4.9 Screenshot for GajiTunjangan)

4.5 Apotek Web AppThe purpose of this app not only for supply-chain management in the Parahita’s apotek. It’s also saving all patient drugs history, their drugs and who are their doctor.

4.5.1 Design Application❖ Database :

- trx_jual for main table- trx_jual_detail for

secondary table and look up table

- dt_pasien for look up table- dt_dokter for look up table- dt_racikan for look up table

❖ Controller PHP : basic CRUD❖ Model PHP: connection with

database❖ Controller Ext Js: function for UI❖ View Ext Js: design(picture 4.10 database for Apotek Web App)

4.5.2 Relational Table

Trx_jual-jual_id-jual_pasien_id-jual_dokter_id-jual_netto-simpan_status

Trx_jual_detil-juald_id-juald_jual_id-juald_racikan_id-juald_qty-juald_netto

Dt_dokter-md_iddokter-md_namadokter-md_gelar-md_alamat

Dt_pasien-mp_idpasien-mp_is_member-mp_is_karyawan-mp_namapasien

Dt_jenisracikan-id-mjr_nama-mjr_kemasan-mjr_satuan(picture 4.7 relational table

for Apotek Web App)

4.5.3 Result

(picture 4.8 Screenshot for Apotek Web App)

5. Conclusion

1. Using web app for Parahita can make software maintenance cost more cheaper compared with native desktop application management software.

2. Framework Codeigniter make faster creating this project.3. Codeigniter have a great documentation, it make easy for constructing

software.4. Size of its file is small and well structured compared if we make this web

apps from scratch.5. Ext Js can be integrated with Codeigniter. Using ext js for web aplication,

made the web app more user friendly for Parahita’s employee.

Thank You

Andi Rokhman H. 2211100032Joko Priambodo 2211100054

Internship ReportParahita Diagnostic CenterOctober, 6 2014 - Desember, 6 2014