Kamis, 08 Oktober 2015

Aplikasi Tiket MetroMini PHP

Aplikasi Manajemen Tiket MetroMini Dengan PHP & MySQL



Hallo semuanya! apa kabar para kerabat kodok yang berbahagia! gimana kabarnya nih, pada sehat semua apa malah lagi pada galau mikirin kerjaan, deadline, atau tugas yang bejibun dari kampus :D Apa jangan-jangan malah lagi semangat-semangatnya kerja nih. #cieee

Ya, Jumpa lagi bersama saya Mas Kodook dalam acara #Ngumpul_Tugas_UTS. Pada artikel kali ini, saya akan memberikan tutorial tentang pembuatan Aplikasi Manajemen Tiket MetroMini dengan PHP & MySQL. Kurang lebihnya, saya akan membeberkan beberapa step pembuatannya. Tapi inget! Mas Kodook ga bakalan ngejelasin tentang basic-basic PHP diartikel ini, contohnya ya kayak apa itu fungsi, apa itu mysql_query, $_GET, $_POST, dan lain-lain yang pastinya bisa kalian tanya sama mbah bing google :D

Jadi intinya, Mas Kodook di suruh pak Agus selaku Kaprodi dan Dosen mata kuliah Pemrograman Web untuk mengerjakan soal UTS kali ini, terus harus di posting di blog masing-masing. Gimana? Penasaran kan sama bentuk soalnya? nih Mas Kodook post juga disini biar makin kece.

Nah, itu dia soal yang diberikan oleh pak Agus, jadi program yang dibuat boleh menggunakan bahasa pemrograman seperti ASP, PHP atau JAVA. Kemudian harus terkoneksi dengan database SQL Server atau MySQL. Setelah itu, didalam program harus terdapat fungsi-fungsi seperti aritmatika, if else if, for, while dll.

Oke baiklah! Tanpa banyak basa-basi lagi, mari kita mulai saja bagaimana Mas Kodook mengerjakan soal tersebut! cekidot!

Penjelasan Program Yang Dibuat

Nama Program : Aplikasi Manajemen Tiket MetroMini dengan PHP & MySQL
Tujuan : Program ini bertujuan untuk mempermudah manajemen  pembelian tiket metromini, mengelola data angkutan umum, user, dan juga tarif metromini.
Fitur-Fitur : 
  • 1. Program ini Menggunakan Konsep Modular (Prosedural PHP Programming)
    Jadi siapa saja yang baru belajar PHP & MySQL bisa mempelajari alur program ini. Bahkan dapat mengembangkannya.
  • 2. Memiliki Modul Manajemen Tiket
  • 3. Memiliki Modul Manajemen Angkot
  • 4. Memiliki Modul Manajemen User
  • 5. Memiliki Modul Setting Tarif
  • 6. File dan folder dibuat terstruktur
  • 7. Memiliki fungsi Pagination Search untuk semua modul
  • 8. Memiliki Fungsi Tambah, Edit, Delete, Cari, Lihat Detail
  • 9. Validasi Data
  • 10. Include fungsi-fungsi yang terdapat didalam soal seperti (while, for, if else if, switch, dll)
  • 11. Memiliki relasi antar tabel (tabel tiket_order dan tabel tiket_angkot) INNER JOIN
  • 12. Implementasi Penggunaan $_GET dan $_POST
  • 13. Switch case digunakan untuk controller ?page= dan &action=
  • 14. Menggunakan Database MySQL
  • 15. Dan masih banyak lagi :D silahkan di oprek sendiri nanti ya.

Persiapan Pembuatan

Sebelum kita masuk ke tahap pembuatan program, anda harus menyiapkan beberapa alat perang terlebih dahulu:

1. Server Lokal (localhost), anda bisa menggunakan XAMPP atau AppServ yang bisa anda download pada link berikut : http://prdownloads.sourceforge.net/appserv/appserv-win32-2.5.10.exe?download

2. Code Editor, seperti Notepad++, Notepad biasa, Sublime Text atau bisa juga menggunakan Adobe Dreamweaver

3. Siapkan juga source code aplikasi program yang telah saya upload di Github, Sebagai bahan contekan jika anda lupa atau bingung mau ngetik apaan tau :D download or clone here: https://github.com/maskodok/aplikasi-manajemen-tiket-metromini

Langkah-Langkah Pembuatan

Note: Saya tidak mengetik codingannya satu persatu dikarenakan pasti akan memakan banyak waktu di artikel ini. jadi saya jelaskan saja proses pembuatannya dari mulai buat file apa, folder apa dan lain sebagainya. *just copas :) you can type a beautiful codes on your own PC*

1. Pertama-tama, buat terlebih dahulu databasenya. Berikut spesifikasi tabel-tabel yang terdapat didalam database tiket.

Tabel: tiket_angkot
primary key: id_angkot (auto_increment)






Tabel: tiket_order
Primary key: id_order (auto_increment)
Foreign key: id_angkot




















Tabel: tiket_user
Primary key: id (auto_increment)







Tabel: tiket_setting
Primary key: id_setting




Note: jika anda males buat database atau hanya sekedar ingin testing, silahkan create database baru, kemudian import file tiket.sql yang sudah penulis sertakan di file source code :D

2. Setelah membuat database, buat folder baru di server lokal anda /www atau /htdocs, kemudian buat file koneksi.php isilah dengan code konfigurasi database sebagai berikut:












3. Selanjutnya buat beberapa folder untuk meletakan file .css, file image (gambar), dan juga module.







4. Next, buat file index.php yang nantinya akan kita gunakan untuk halaman Login. kemudian isi dengan code berikut:


























5. Selanjutnya, buat file style.css kemudian letakkan didalam folder /css. Maka struktur file dan foldernya akan terlihat sebagai berikut:
/css
--- style.css
/img
/module
koneksi.php
index.php

6. Setelah itu isi file style.css dengan code berikut ini, (kode hanya sebagian saja yang saya screenshot, dikarenakan terlalu panjang). Untuk kode lengkapnya bisa menuju ke link berikut: https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/css/style.css



























7. Sekarang kita coba buka tampilan halaman login yang sudah kita styling dengan .css, ketikan http://localhost/nama_folder_aplikasi_tiket, (contoh: http://localhost/tiket) maka akan muncul tampilan yang sangat ciamik sebagai berikut:
















8. Next step, agar login dapat bekerja dengan baik, pastinya kita harus memproses form login tersebut. Disini saya menggunakan session untuk meregistrasikan username dan password kita ke session php yang ada di server.

9. Buat file dengan nama cek_login.php untuk memproses form yang ada diatas, kemudian isi dengan code berikut:




























Jika gambarnya kurang jelas, teman-teman bisa langsung copas pada link berikut: https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/cek_login.php

10. Ok, Sekarang apakah form login sudah bisa diproses? jawabannya ada 2. (Ya) jika anda sudah melakukan insert data admin di tabel tiket_user dan (Tidak) jika anda belum melakukan insert data. namun jika anda sudah mengimport file tiket.sql, saya rasa tidak ada masalah :D

11. Eiit! tapi masih ada masalahnya. "Fikiran Programmer itu harus banyak IF dan ELSE nya", jadi maksudnya gini. OK lah, form login sudah bisa di proses dengan file cek_login.php namun setelah itu kita akan di arahkan kemana hayooo :D Yak! tentu saja kita harus membuat halaman untuk mengelola data-data yang ada di database, yaitu halaman administrator.

12. Selanjutnya buat beberapa file berikut:
a. admin.php = digunakan sebagai template untuk halaman admin. Jadi setelah berhasil login, file cek_login.php akan mengarahkan kalian ke halaman admin.php

b. admin_menu.php = digunakan sebagai tempat untuk meletakkan menu navigasi admin. Jadi didalam admin.php, file admin_menu.php akan di include. *puyeng2 lo :v wkwkkw

c. admin_page.php = digunakan sebagai file controller. Jadi file ini merupakan file dimana halaman-halaman lain akan di Include dan ditampilkan berdasarkan request $_GET['page']. *jangan bingung dulu plis*

d. admin_dashboard.php = digunakan untuk menampilkan halaman awal setelah kita login. File ini bersifat statis, jadi anda bisa mengedit file ini sesuka hati.

e. Maka struktur file dan foldernya akan berubah lagi menjadi seperti ini pemirsah:













13. Sekarang kita isi file-file yang sudah kita sebutkan diatas satu persatu.

admin.php

































Source Code Lengkap:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/admin.php

admin_menu.php


Source Code Lengkap:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/admin_menu.php

admin_page.php


Source Code Lengkap:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/admin_page.php

admin_dashboard.php


Source Code Lengkap:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/admin_dashboard.php


13. OK Sip, setelah itu buatlah file dengan nama class.paging.php, file ini berfungsi sebagai class pembantu (helper) untuk membuat data-data yang jumlahnya ada banyak menjadi beberapa halaman. Di Paginasi bahasa gaulnya.

14. Dikarenakan file class.paging.php isinya sangat banyak, maka saya berikan saja source code lengkapnya pada link berikut ini: https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/class.paging.php

15. Selanjutnya buat file logout.php, fungsinya ya untuk logout lah masa untuk fesbukan :D xixixi






16. Nah, Sekarang kita sudah bisa login dan masuk ke halaman admin (dashboard). Tapi tunggu dulu, jangan lupa sertakan file gambar berikut ini kedalam file /img: download gambarnya disni aja:

a. Background:
https://raw.githubusercontent.com/maskodok/aplikasi-manajemen-tiket-metromini/master/img/bg.png

b. Logo:
https://raw.githubusercontent.com/maskodok/aplikasi-manajemen-tiket-metromini/master/img/logo.png

16. Dan akhirnya, struktur file dan foldernya akan berubah lagi seperti ini:
/css/
----> style.css
/img/
----> bg.png
----> logo.png
/module/
admin.php
admin_dashboard.php
admin_menu.php
admin_page.php
cek_login.php
class.paging.php
index.php
koneksi.php
logout.php

17. Sekarang waktunya kita test login. Untuk login, silahkan masukan username: admin dan password: admin , maka akan muncul tampilan halaman dashboard sebagai berikut:


18. Oh iya, jangan lupa juga buat file .htaccess, file ini berfungsi untuk mendenied direktori yang tidak ada isinya jika kita access lewat browser. ya intinya semacam memberikan pengamanan atau security untuk sistem yang kita buat. Walaupun ada pepatah yang mengatakan "tidak ada sistem yang aman didunia ini" :D berikut isi dari file .htaccess tersebut, letakkan sejajar dengan file-file lainnya.
Options All -Indexes

19. Next, kita akan membuat yang namanya MODULE. Modul-modul ini akan berisi file-file yang nantinya dapat memanajemen dan memanipulasi tabel. Pada umumnya, saya menggunakan standar CRUD (Create, Read, Update, Delete) + Cari untuk Modul yang akan dibuat.

20. Ok, langsung saja. pertama-tama kita awali dengan membuat modul angkot. modul angkot ini berfungsi untuk memanajemen data angkutan umum (metromini). Data yang dimanipulasi adalah kode_angkot, dan tujuan. (example: kode_angkot 075, berarti tujuannya Blok M - Mampang)

21. Buat folder baru dengan nama angkot didalam folder /module. setelah itu buat beberapa file didalam folder angkot, file-file ini nantinya akan digunakan untuk pengoprasian database, yaitu:

a. index.php
File ini berfungsi sebagai controller. index.php akan mengontrol request $_GET['action'] yang diminta oleh client. index.php berperan sebagai pondasi file-file lainnya, karena jika tidak ada file ini maka file-file lainnya tidak dapat di panggil atau di include dengan request $_GET['action'].

b. lihat.php
File ini berfungsi untuk menampilkan semua data-data yang terdapat didalam tabel. (tabel tiket_angkot)

c. cari.php
File ini berfungsi untuk menampilkan hasil pencarian.

d. cari_redirect.php
File ini berfungsi untuk meredirect request $_POST yang terdapat didalam form pencarian, kemudian mengkonversinya kedalam $_GET['q'] untuk pencarian yang lebih dinamis.

d. tambah.php
File ini berfungsi untuk menampilkan form Input (tambah data)

e. proses_tambah.php
File ini berfungsi untuk memproses form tambah yang terdapat didalam file tambah.php

f. ubah.php
File ini berfungsi untuk menampilkan form ubah data.

g. proses_ubah.php
File ini berfungsi untuk memproses form ubah.php

h. hapus.php
File ini berfungsi untuk melakukan hapus data sesuai dengan data yang ingin kita hapus


22. Berikut ini merupakan isi (source code) dari beberapa file diatas:

- Path: /module/angkot/index.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/index.php














































- Path: /module/angkot/lihat.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/lihat.php


- Path: /module/angkot/cari.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/cari.php


- Path: /module/angkot/cari_redirect.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/cari_redirect.php


- Path: /module/angkot/tambah.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/tambah.php


- Path: /module/angkot/proses_tambah.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/proses_tambah.php


- Path: /module/angkot/ubah.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/ubah.php


- Path: /module/angkot/proses_ubah.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/proses_ubah.php


- Path: /module/angkot/hapus.php
- Source Code:
https://github.com/maskodok/aplikasi-manajemen-tiket-metromini/blob/master/module/angkot/hapus.php















23. Nah, sekarang kita bisa melakukan manajemen data angkot dengan file-file diatas :D Jika anda ingin mencobanya, silahkan login ke halaman administrator, setelah itu klik menu "Manajemen Angkot".

24. Hmmm.. mungkin saya rasa artikelnya akan jadi panjang kalau semua modul beserta file-filenya saya cantumkan disini screenshotnya :D oleh karena itu, silahkan teman-teman cek sendiri aja ya disini: https://github.com/maskodok/aplikasi-manajemen-tiket-metromini . Intinya saya sudah menjelaskan untuk apa file-file tersebut beserta fungsinya.

25. Finally, ini adalah hasil akhir dari Aplikasi Manajemen Tiket MetroMini Sederhana dengan PHP & MySQL. Berikut Screenshotnya, cekidot!

Manajemen Angkot

a. Tampilan list data angkot


b. Tampilan tambah data angkot


c. Tampilan ubah data angkot

Manajemen Tarif

a. Tampilan Setting Tarif

Manajemen User

a. Tampilan list data user


b. Tampilan tambah user


c. Tampilan ubah user


d. Tampilan ganti password user

Manejemen Tiket

a. Tampilan list data order tiket


b. Tampilan tambah data order tiket


c. Tampilan ubah data order tiket


d. Tampilan detail informasi order tiket






Oke, mungkin cukup sekian saja postingan saya kali ini. Intinya saya disini hanya menjelaskan bagaimana proses pembuatannya. Nah, jika teman-teman semua memang ingin tau lebih dalam lagi, kalian bisa mengobrol dengan saya melalui akun sosial media saya, di email, dan sebagainya.

Tidak lupa saya ucapkan terimakasih kepada semua rekan-rekan STMIK Eresha semester 6 yang mengambil mata kuliah ini. Kepada sahabat saya yang selalu menemani saya kapanpun dan dimanapun "M. Rian Pradana" dan juga "Achfas Faisal Kharis".

Download Source Code: https://github.com/maskodok/aplikasi-manajemen-tiket-metromini

Saya Akhiri, Salam Olahraga! dan Jangan lupa cari jodoh! \m/
- See more at: http://stringlabs.blogspot.co.id/2015/05/tugas-kuliah-aplikasi-manajemen-tiket.html#sthash.2lbpXUqi.dpuf
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)