TUTORIAL PENERAPAN

APLIKASI WEB PROJECT MANAGEMENT SYSTEM

LOCALHOST MENGGUNAKAN XAMPP

Sekarang saatnya kita belajar bagaimana membuat database di XAMPP dan cara menerapkan
aplikasi web berbasis php & MySQL di localhost. Artinya kita menginstal aplikasi web di komputer
kita sendiri atau menginstal secara offline.

Sebelum kita memasuki tahap demi tahap penerapan aplikasinya, terlebih dahulu memastikan
XAMPP telah berjalan dengan baik. Buka XAMPP melalui start windows, pilih all programs, pilih
XAMPP, lalu klik XAMPP Control Panel.

Jika instalasi XAMPP berjalan dengan mulus maka akan muncul aplikasi tersebut, klik start pada
menu Apache dan MySQL, seperti gambar dibawah;

Tampilan/gambar berikut, adalah XAMPP sudah berjalan dan siap untuk diimplementasikan sesuai
fungsinya.
Diasumsikan Anda sudah bisa menjalankan aplikasi XAMPP. Sehingga sekarang komputer Anda
sudah bisa dijadikan server. Oya, jangan lupa untuk memastikan bahwa aplikasi XAMPP bisa
berjalan dengan baik ya. Cek kembali dengan mengetik http://localhost/xampp di browser, lalu
cek status. Detailnya bisa dilihat pada gambar di bawah ini.

Bahan-bahan yg digunakan alam penerapan aplikasi web:

1. PC/Laptop dengan OS WINDOWS (rekomended win xp atau win 7 / WIN 10 )
2. XAMPP (xampp-win32-1.8.2-0-VC9-installer / xampp-win32-5.6.15-1-VC11-installer)
tersedia dalam paket.
3. Notepad (recommended notepad++ / npp.7.3.Installer.x32bit) tersedia dalam paket.
Membuat Database dan User di XAMPP
Sebelum kita menginstall aplikasi web, kita harus membuat database dan user terlebih dahulu. Hal
tersebut harus kita lakukan karena aplikasi web ini merupakan aplikasi website yang membutuhkan
database untuk menyimpan data-data yang kita gunakan.
1. Pertama-tama kita harus masuk ke phpmyadmin di XAMPP. Ketik di browser
alamat http://localhost/phpmyadmin sehingga muncul tampilan seperti ini..

2. Pada menu Database, silahkan masukkan nama database yang diinginkan, kemudian klik
Create. Ingat-ingat nama database tersebut ya, karena kita akan menggunakannya nanti.
Jika perlu, tuliskan di aplikasi notepad supaya mudah bagi kita untuk mengingatnya.

NB: Di sini saya menggunakan nama database “masena“. Setelah database dibuat, nama
database yang dibuat disamping secara otomatis muncul pada menu disamping. Klik nama
database tersebut yakni masena untuk pengelolaan lebih lanjut.
3. Sekarang saatnya kita menambahkan nama user untuk database yang baru saja kita buat.
Silahkan masuk ke database yang sudah dibuat, Anda bisa menemukannya di bagian sebelah
kiri. Begitu masuk, lihat menu Privileges. Kemudian klik Add user.

4. Begitu Anda klik Add User maka akan muncul form pembuatan user baru.
Isikan username, Anda bisa mengisikannya dengan nama apapun teserah Anda, yang
penting Anda hafal pada tutorial ini saya mengisikan user_dbase. Kemudian isikan
juga host, gunakan use text field saja, lalu isikan dengan localhost. Selanjutnya isikan
password 2 kali dan harus sama contoh yang saya terapkan adalah user123. Terakhir,
centang grant all privileges on database. Lalu klik go pada menu paling bawah…

Eits, tunggu dulu, belum selesai. Scroll ke bawah, dan Anda akan menemukan opsi Global
Privileges guna memberikan hak akses kepada user untuk mengelola semua database,
klik Check All saja. Setelah itu, pencet tombol Add User.
5. Sampai disini kita telah membuat database dan user di XAMPP (SQL/phpmyadmin), namun
database tersebut masih dianggap kosong, agar managemen applikasi web nantinya sinkron
dengan database yang kita buat, selanjutnya kita mengimpor file SQL (db.sql) yang sudah
include dalam paket ini. Tepatnya terdapat dalam folder masena.
Cara mengimpor file SQL, klik menu impor, lalu pilih browser, sorot file SQL (db.sql) yang
terdapat dalam folder, lalu pilih open. Lihat gambar dibawah.

Selanjutnya, execusi perintah tersebut dengan mengklik go yang terdapat pada menu bawah.
Ya, langkah membuat database dengan XAMPP dan user di phpmyadmin sudah selesai.
Secara default, aplikasi XAMPP mempunyai default user bernama “root” dan tanpa
password. Jika kita hendak menggunakan user tersebut juga tidak masalah. Namun ada
baiknya kita gunakan user sendiri yang telah dibuat sebelumnya.

6. Agar dapat mengakses halaman Aplikasi Web dari browser, maka anda harus menempatkan
folder/file PHP di dalam folder khusus yang merupakan folder home dari web server. Pada
aplikasi XAMPP, folder tersebut adalah folder htdocs yang berada di dalam folder instalasi
XAMPP. Jika anda tidak mengubah tempat instalasi XAMPP menjadi c:\xampp (jika
mengikuti tutorial sebelumnya), maka folder tersebut seharusnya berada di
c:\xampp\htdocs.

Anda bisa meletakkan folder aplikasi web langsung di dalam folder ini, atau agar
memudahkan pencarian file, buatlah sebuah folder baru di dalam folder htdocs ini. Untuk
tutorial Aplikasi web ini, saya akan membuat folder “masena” anda dapat merubahnya
sesuai yang diinginkan. Folder masena inilah di dalamnya terdapat file-file aplikasi tersebut
yakni berupa file php, html, js, css, dan lain-lain. Dalam CD/DVD, copy semua folder ke
dalam computer anda. Lalu Extract file appweb.zip, Copy/salin folder hasil extract masena
di dalam c:\xampp\htdocs (sesuai gambar di atas). Saatnya kita mencoba membuka
aplikasi web melalui web browser, kali saya menggunakan web browser Mozilla dengan
mengetikkan alamat link http://localhost/masena,
 Jika muncul tampilan seperti terlihat pada gambar di bawah, berarti database belum
terkoneksi dengan system PHP (applikasi web) yang kita miliki.

7. Jika database belum terkoneksi, buka windows explorer tempat kita menyimpan folder
masena tadi (C:\xampp\htdocs\masena\config\koneksi.php). Buka file koneksi.php lalu
buka/open dengan notepad atau notepad++, edit file tersebut lalu save seperti gambar
dibawah. Setelah diinput, buka kembali browser dengan alamat http://localhost/masena/

Jika muncul tampilan seperti gambar dibawah, berarti anda telah berhasil mengsinkronkan database
dengan aplikasi web berbasis php & MySQL, seperti yang kami tampilkan dilapak.

Tahap selanjutnya adalah mengatur website anda sesuai keinginan atau tujuan website ini dibuat.
Silahkan login di halaman admin pada link dibawah:
http://localhost/masena/login.php
username : admin
password : admin

Sekian….!!! Lihat Tutorial Aplikasi Web secara ONLINE di hosting

pada halaman selanjutnya….
 TUTORIAL PENERAPAN
APLIKASI WEB PROJECT MANAGEMENT SYSTEM
SECARA ONLINE DI HOSTING

Setelah selesai mengimplementasikan website secara offline melalui aplikasi XAMPP, langkah selanjutnya
adalah mengupload website tersebut ke account hosting yang telah Anda dapatkan. Yang dinamakan dengan
upload ini adalah proses memindahkan file-file dari komputer Anda ke server hosting sehingga nantinya bisa
diakses oleh banyak orang di seluruh dunia.
Untuk teknik upload website dihosting tidak berbeda jauh dengan cara offline yang telah kita lakukan
sebelumnya. Adapun tahapannya sebagai berikut:

1. Login pada layanan hosting

Pada sesi ini saya asumsikan anda sudah memiliki hosting namun jika belum ada beberapa penyedia
hosting kegemaran saya sejak tahun 2012 yang sudah tentu hasil terbaik (berkualitas, terjamin, up to
date, murah, fast respon, serta professional) dari beberapa hosting yang pernah saya alami, yakni
Niagahoster. Pada gambar dibawah adalah halaman login pada cpanel (hosting) yang telah anda
miliki/sewa. Silahkan login terlebih dahulu dengan username dan password yang anda dapatkan dari
penyedia hosting.

2. Membuat subdomain
Mungkin anda bertanya, apa itu subdomain? Terlebih dahulu kita perlu mengetahui apa itu domain?
Domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web
server atau email server di jaringan komputer ataupun internet. Nama domain ini juga dikenal sebagai
sebuah kesatuan dari sebuah situs web/alamat utama dari suatu website seperti contohnya
"kampus.ac.id". Sedangkan Subdomain adalah bagian dari domain. Subdomain biasanya digunakan
sebagai pembagian area dari sebuah website. Misalnya stik.kampus.sch.id. Namun kali ini sy
menggunakan dari domain sy yakni polman.web.id. Setelah login, pilih icon / menus subdomains, seperti
gambar dibawah.
Setelah memilih icon subdomains, maka tampil gambar seperti dibawah, pada tahap ini saya akan
membuat subdomains appweb dari domain utamanya polman.web.id, sedangkan dokumen root
adalah folder yang akan kita gunakan nantinya untuk upload file aplikasi web. Lalu klik create
untuk membuat.

Setelah sukses membuat subdomain appweb.polman.web.id, kita kembali ke menu home. Lalu
pilih icon file manager untuk proses upload aplikasi web yang sudah ada.
3. Upload aplikasi web berbasis PHP & MySQL.
Anda sudah masuk pada file manager, dipanel kanan pilih folder public_html, maka akan
tampil pada folder yang telah dibuat tadi saat membuat subdomains, lihat di panel bagian kanan
pada gambar di bawah ini.

Lanjut… masuk lagi di folder appweb dengan double klik folder tersebut seperti pada gambar di
atas, hasilnya lihat gambar di bawah. Lalu pilih menu upload untuk langkah selanjutnya.
Klik select file, maka muncul kotak dialog, selanjutnya pilih file appweb.zip lalu klik open.

Proses upload aplikasi web ke hosting, sudah selesai. Kita kembali ke halaman sebelumnya dengan
mengklik tulisan “go back to…” seperti gambar dibawah.

Extract file hasil upload tadi, dengan memilih file appweb.zip, lalu pilih menu extract yang berada
di pojok atas, setelah muncul dialog box, pilih extract files seperti gambar dibawah. Jika sdh
selesai, klick close.
Selanjutnya, buka browser anda, ketikkan alamat url subdomains yang telah dibuat, yakni
appweb.polman.web.id, jika muncul tampilan seperti dibawah, berarti database belum terkoneksi.

MEMBUAT DATABASE
Kembali di menu home cpanel, pilih dan klik icon MySQL Databases untuk proses pembuatan
database yang akan disinkronkan dengan aplikasi web.
Masukkan nama database yang anda inginkan, pada tutorial ini saya beri contoh database lalu klik
create database.

Tampilan dibawah adalah hasil pembauatan database baru dengan nama u2969893_database sukses
dibuat.
Setelahsukses klik tulisan “go back” untuk proses pembuatan user

Seperti pada implementasi offline, dihosting juga kita akan membuat user database . Ketikkan nama
user database MySQL yang anda inginkan. Pada tutorial ini saya berikan contoh dengan nama
user_db dan passwordnya user123. Setelah itu klik create user.
Muncul tampilan seperti gambar dibawah jika user database MySQL sukses/berhasil dengan nama
u2969893_user_db. Lalu kembali klik tulisan go back.

Database dan usernya sudah kita buat, pada sesi selanjutnya adalah mengsinkronkan antara database
dan user tersebut dengan cara pada kolom user, pilih nama user (u2969893_user_db) yang barusan
dibuat, lalu pada kolom databases, pilih nama databases (u2969893_database) yang sebelumnya
dibuat. Lalu klik add.
Jika muncul tampilan seperti gambar dibawah, beri checklist all privileges. Lalu klik make changes
yang terdapat di bagian bawah.

Setelah selesai, klik menu home yang berada di pojok kiri atas, untuk mengimpor isi database yang
terdapat dalam paket anda.
Anda sudah kembali berada pada menu home cpanel anda. Sekarang pilin icon phpMyAdmin
seperti gambar dibawah.

Pada kolom menu dibagian kanan, pastikan anda sudah memilih database yang telah anda buat
sebelumnya, lalu pilih menu import, lalu klik browse, dan selanjutnya mengambil file
dayabase.sql dari computer anda, lalu klik open. Terakhir jangan lupa klik go yang berada dibagian
bawah.
Setelah selesai mengimport file database.sql anda, kita lanjut ke tahap berikutnya yakni dengan
menginputkan nama databse serta usernya di file php aplikasi web. Dengan cara kembali pada
halam utama (home) cpanel anda, lalu pilih icon File manager.

Selanjutnya buka file koneksi.php yang terdapat di dalam folder config, atau tepatnya di
appweb/konfigurasi, dengan mengklik menu edit dibagian atas. Jika muncul kotak dialog, klik
edit.
Tampilannya seperti gambar dibawah, sorot kursor ke bagian bawah halaman, lalu input/rubah
nama database, username, serta password sesuai yang anda buat sebelumnya, lihat gambar di
bawah. Lalu simpan perubahan tersebut dengan klik save dan lalu close yang berada dipojok kanan
atas.

Buka kembali browser anda, lalu masukkan url/domain yang sudah dibuat, jika configurasi anda
berhasil maka aplikasi web anda akan muncul seperti gambar dibawah.
HALAMAN LOGIN

username : admin
password : admin

HALAMAN ADMIN

TERIMAKASIH