Cara membuat localhost website dan databases

Sebelum membuat localhost website, yaitu dibutuhkan yaitu Software XAMPP – Tools yang
berfungsi sebagai web server pada local environment. Kemudian, install XAMPP di komputer
Anda.
Kemudian, mengikuti cara 6 langkah berikut:
1. Menjalankan XAMPP
2. Membuat Database 
3. Membuat Folder di htdocs
4. Menyiapkan File Website
5. Menghubungkan Database dengan Website
6. Mengakses Localhost Website 

1. Menjalankan XAMPP
Untuk membuat website di localhost, langkah pertama yang harus Anda lakukan
adalah menjalankan XAMPP. Caranya, buka aplikasi XAMPP, kemudian klik tombol Start pada
module Apache dan MySQL sebagai berikut:

Apache merupakan web server yang harus dijalankan agar website Anda bisa diakses di
localhost. Sedangkan MySQL diperlukan bagi website yang memiliki fitur manajemen database
di dalamnya. 
2. Membuat Folder di htdocs
Agar website localhost XAMPP bisa diakses, Anda perlu menyimpan folder project website
Anda di direktori C:\xampp\htdocs. Pada tutorial cara membuat website di localhost ini, kami
membuat folder dengan nama webproject.
3. Membuat Database
Selanjutnya, bukalah web browser Anda, dan akses localhost/phpmyadmin. Nantinya, Anda
akan melihat tampilan seperti ini:
Pada halaman tersebut, buatlah database baru yang digunakan untuk projek website Anda.
Caranya, klik New seperti terlihat pada gambar berikut:

Kemudian, masukkan nama database pada kolom yang tersedia. Pada tutorial ini, kami
menggunakan nama db_webproject. Jika Anda sudah memutuskan nama database yang akan
dibuat, klik tombol Create.

Anda akan diarahkan ke halaman untuk membuat tabel pada database baru. Kami membuat tabel
bernama absensi yang memiliki 4 kolom. 
Selanjutnya, masukkanlah empat atribut berikut ini pada tabel absensi:
id – Untuk menyimpan id database yang diinput. Pilih INT sebagai type database, beri tanda
ceklis pada bagian A_I (Auto Increment).
nama – Untuk menyimpan nama. Pilih VARCHAR sebagai type database, masukkan angka 500
pada Length/Values.
divisi – Untuk menyimpan nama divisi. Pilih VARCHAR sebagai type database, masukkan
angka 100 pada Length/Values.
waktu_kehadiran – Untuk menyimpan data waktu user melakukan absensi.
Pilih TIMESTAMP sebagai type database.

Setelah menentukan atribut tersebut, klik tombol Save untuk membuat tabel.

Nah, sekarang Anda sudah memiliki database baru yang berfungsi untuk menyimpan data
catatan kehadiran untuk website absensi sederhana. 
4. Menyiapkan File Website
Pada langkah sebelumnya, Anda sudah membuat database. Sekarang, Anda perlu menyiapkan
file project website Anda. 
Caranya, bukalah folder yang telah Anda buat di htdocs sebelumnya dengan menggunakan code
editor. Kemudian, buat file dengan nama index.php di folder tersebut dan salinlah kode berikut
ini: (SILAHKAN LIAT SOURCE CODE YANG SUDAH DIBERIKAN)

5. Menghubungkan Database dengan Website

Meski file website Anda sudah siap, masih akan ada pesan error terkait dengan database. Sebab,
website belum dihubungkan dengan database yang Anda buat di localhost/phpmyadmin.

Untuk membuat koneksi database dengan website, buatlah file baru bernama koneksi.php.
Kemudian, salinlah kode berikut ini:

1<?php
2  
3$dbHost = 'localhost';
4$dbName = 'db_webproject'; //ubah dengan nama database Anda
5$dbUsername = 'root';
6$dbPassword = '';
7  
8$mysqli = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
9?>

Silakan ubah nilai dari baris kode $dbName dengan nama database yang Anda miliki. Jangan
lupa, simpan perubahan file dengan klik tombol CTRL + S pada keyboard.

6. Mengakses Localhost Website

Nah, untuk melihat website absensi yang telah dibuat, Anda hanya perlu
mengakses localhost/namafolder di browser. 

Sesuaikan dengan nama folder yang Anda buat, ya. Di tutorial ini, website bisa diakses pada
URL localhost/webproject. 

SELESAI
MEMBUAT APLIKASI ANDROID DENGAN WEBVIEW
Untuk membuat aplikasi WebView, silahkan buka Android Studio dan buatlah proyek baru
dengan cara memilih Menu File -> New -> New Project. Pada proyek ini saya berikan nama
project Hospital. Untuk nama Company Domain nya saya menganturnya seperti
ini puskesmassidamulya.site Kemudian pilih lokasi penyimpanan proyek yang dibuat,
selanjutnya silahkan pilih Next. Pada bagian penentuan minimum SDK, silahkan pilih sesuai
yang diinginkan.

Pada pilihan Activity, silahkan pilih Blank Activity kemudian pilih Next. Selanjutnya akan
muncul tampilan seperti di bawah ini. Biarkan saja tetap pada default-nya, untuk menyelesaikan
pembuatan proyek silahkan tekan tombol Finish.
#1 activity_main.xml
Klik folder res >> layout >> klik activity_main.xml, kemudian pilih WebView yang berada pada
Palette. Kemudian klik dan seret pada tampilan Android seperti dibawah ini.
Untuk Menyisipkan ProgessBar silahkan sisipkan code ini 
Jadi code lengkap pada activity_main.xml sbb: 
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<WebView
 android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:id="@+id/webView"

/>

<ProgressBar

style="?android:attr/progressBarStyle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="110dp"

android:id="@+id/progressBar2"

/>

</RelativeLayout>

#2 MainActivity.java
Setelah itu, saya akan mendefinisikan situs web yang akan ditampilan pada class WebView.
Untuk memasukan URL nya silahkan buka MainActivity.java yang terdapat pada folder java.
Tambahkan kode seperti di bawah ini 
package com.app.hospital;
import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;

import android.os.Bundle;

import android.view.KeyEvent;

import android.view.View;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

WebView webView;

ProgressBar progressBar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webView = (WebView) findViewById(R.id.webView);

progressBar=(ProgressBar) findViewById(R.id.progressBar2);

webView.setWebViewClient(new myWebclient());

webView.getSettings().setJavaScriptEnabled(true);
 webView.loadUrl("http://hospital.nawadwipa.id");

public class myWebclient extends WebViewClient{

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

progressBar.setVisibility(View.GONE);

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

super.onPageStarted(view, url, favicon);

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return super.shouldOverrideUrlLoading(view, url);

}
 @Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){

webView.goBack();

return true;

return super.onKeyDown(keyCode, event);

Baris kode dibawah digunakan Untuk Back Ke Webview ketika kita sudah membuka konten
yang terdapat pada website.
@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){

webView.goBack();

return true;

return super.onKeyDown(keyCode, event);

#3 Style.xml
Hilangkan actionbar webview dengan kode dibawah (letaknya di dalam folder values) 
 <!-- Base application theme. -->

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<!-- Customize your theme here. -->

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

</style>

#4 AndroidManifest.xml
Android secara default tidak memiliki permission. Saat aplikasi perlu menggunakan fitur-fitur
khusus yang ada di perangkat (misalnya mengakses kamera, mengirim SMS, membaca kontak,
internet dll.) mereka perlu diberikan permission dari user agar tujuannya tercapai. 

untuk membuat APK nya anda tinggal meng-generate project ini di Build >> Generate Signed
Bundle/APK