Panduan Ringkas:

1. Download file di Email

2. setelah download selesai, Extract file

3. Edit file config/index.js dengan cara:

- Klik kanan file index.js pilih open with notepad++

4. Copy lisensi dari email.

5. Paste dibagian lisensi (di dalam file index.js)

6. Silakan sesuaikan yang mau diedit, semua di dalam file index.js

7. Mau lihat perubahan hasil editan? klik dua kali file login.html (dalam folder hasil ekstrak)

- link download rusak? template kami sudah di download ratusan pembeli.

- itu kemungkinan dari provider internet yang ngeblokir, pakai provider lain buat download.

1. Buka Folder

- Masuk ke lokasi file template

- File template dalam bentuk .zip (saya tandai warna merah )

- Klik kanan file zip, extract here (ini saya pakai linux, di windows mungkin beda caranya.)

- Hasil extract merupakan sebuah folder, saya tandai warna biru

1. Buka Folder Hasil Extract tadi

- Copy lisensi dari EMAIL

- Paste di bagian lisensi

const configData = {
    
    lisensi: "GANTI_INI_DG_LISENSI",

}

const configData = {

    lisensi: "U2FsdGVkX1/uMsAt4utMHtGt/rSrsmXN7XdhvjK6X4On=
    ", // salah, petik dua turun

}

Yang benar, jadi seperti ini:

const configData = {

    lisensi: "U2FsdGVkX1/uMsAt4utMHtGt/rSrsmXN7XdhvjK6X4On=", // benar, petik dua sejajar.

}

- untuk mengganti logo, cari wifi_logo:

- di bawah ini, pengaturan bawaan.

const configData = {
    
    wifi_logo: {
		status: 0, /* 0 atau 1, ubah 1 untuk pakai logo sendiri */
		url: "./public/img/logo.png", /* copy logo Anda ke folder public/img */
		width: 	'auto', /* auto, full */
		height: 'auto', /* auto, full */
		align: 'left', /* left, center */
	},

}

- untuk mengganti nama wifi, cari wifi:

- di bawah ini, pengaturan bawaan.

const configData = {
    
    wifi: {
		status: 1, /* 0 atau 1 */
		nama: "Meta Hotspot",
		slogan: "Internet Cepat, Unlimited.",
	},

}

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    header: 1, /* logo, nama wifi & slogan */
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
},

- Tanggal, waktu mundur dan jam itu sudah otomatis.

Q: kok tanggal Jawa dan waktu mundur bulan Ramadhan nya gak berubah ya?

A: itu tanggal Hijriah, bukan Jawa.

sudah dibilang semua otomatis berubah, gak mungkin gak berubah.

berubahnya kapan?, dimulai waktu Maghrib, berbeda dengan masehi berubahnya jam 12 Malam.

Q: oh iya benar berubah, tapi kecepatan, seharunya 10 Jumadil Awal

A: nanti kita bahas di menu Jadwal Sholat

Q: waktu mundur bulan ramadhannya keliru tu.

A: tinggal ubah, di index.js cari countdown_ramadhan:

countdown_ramadhan: {
    adjust: -1, // mengurangi 1 hari
    text_days: 'Hari',
    text_hours: 'Jam',
    text_minutes: 'Menit',
    text_seconds: 'Detik',
    text_to_ramadhan: 'lagi menuju Ramadhan',
    text_ramadhan_month: 'Marhaban Ya Ramadhan', // ketika masuk bulan ramadhan keterangannya ini.
},

kurangi atau tambahi bagian adjust

-1 artinya mengurangi 1 hari

1 artinya menambah 1 hari

2 artinya menambah 2 hari

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    ---
    tgl_masehi: 1,
    tgl_hijriah: 1,
    countdown_ramadhan: 1,
    jam: 1,
    ---
    ---
    ---
    ---
    ---
    ---
},

- Bang, saya non muslim, jadwal sholatnya bisa dihilangkan? jawabannya Bisa, langsung lihat ke bawah aja, Fitur on / off.

- Bang, jadwal sholatnya otomatis?, ya iyalah, emangnya gak capek jika ubah manual 😃

- untuk setting jadwal sholat, cari prayTimes:

prayTimes: { /* sesuaikan waktu sholat */
    /*
        Dapatkan Latitude dan Longitude di sini.
        https://eriksanjaya.com/app/koordinat.html

        jika muncul pop up, klik Allow

        aktifkan GPS terlebih dahulu, jika via smartphone.
    */
    
    latitude: -6.9238784,
    longitude: 107.6166656,
    gmt: 7, /* WIB = 7, WITA = 8, WIT = 9 */
    hijriahNama: 1, /* 0 atau 1 */
    hijriahTambah: -1, /* menambah atau mengurangi tanggal hijriah, cth. -2 (mengurangi tgl hijriah sekarang dengan 2) */
    method: "Egypt", /* MWL, ISNA, MF, Egypt, Makkah, Karachi, Tehran, Jafari, JAKIM */
    adjust: { // menyesuaikan jadwal sholat (tambah / kurangi)
        subuh: -1,
        dzuhur: 1,
        ashar: 1,
        maghrib: 2,
        isya: 3,
    },
},

Anda cukup ubah, bagian ini:

latitude: -6.9238784,
longitude: 107.6166656,
gmt: 7, /* WIB = 7, WITA = 8, WIT = 9 */

dapatkan latitude dan longitude dari mana?, klik tombol Get Koordinat di bawah.

jika muncul pop up, klik Allow

aktifkan GPS terlebih dahulu, jika via smartphone.

Get Koordinat

Yang nanya tanggal Hijriah nya kecepatan atau kelambatan, begini cara ubahnya.

kok tanggal 11 Jumadil Awal, seharusnya tanggal 10

Jika kecepatan 1 hari, maka -1 jadikan -2 (mengurangi tgl hijriah)

kok tanggal 11 Jumadil Awal, seharusnya tanggal 12

Jika lambat 1 hari, maka -1 jadikan 0 (menambah tgl hijriah)

hijriahTambah: -1,

untuk menyesuaikan jadwal sholat, cepat atau lambatnya:

satuannya menit, misal subuh jam 04:26

tapi di jadwal sholat jam 04:27, maka kurangi saja jadi:

subuh: -1

adjust: { // menyesuaikan jadwal sholat (tambah / kurangi)
    subuh: -1, // artinya mengurangi 1 menit
    dzuhur: 1,
    ashar: 1,
    maghrib: 2,
    isya: 3, // tambah 3 menit
},

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    ---
    ---
    ---
    ---
    ---
    jadwal_sholat: 1,
    ---
    ---
    ---
    ---
    ---
},

- Untuk gambar slide, gak ada batas, mau 1 juta gambar juga bisa, bisa lemot 😆

- di bawah ini, pengaturan bawaan.

const configData = {
    
    slide: {
		delay: 5000, /* 5000 = 5 detik */
		data: [
			{ // ini contoh file dari luar mikrotik
				file: "https://eriiksanjaya.github.io/public/img/musim-hujan-1.png"
			},
			{ // ini contoh file gambar dari local (mikrotik)
				file: "./public/img/musim-hujan-1.png"
			},
		]
	},

}

{
    file: "https://eriiksanjaya.github.io/public/img/musim-hujan-1.png"
},
{
    file: "./public/img/musim-hujan-1.png"
},

{
    file: "https://eriiksanjaya.github.io/public/img/musim-hujan-1.png"
},
{
    file: "./public/img/musim-hujan-1.png"
},
{
    file: "./public/img/slide-2.jpg"
},

{
    file: "https://eriiksanjaya.github.io/public/img/musim-hujan-1.png"
},
{
    file: "./public/img/musim-hujan-1.png"
},, //salah, komanya cukup satu aja.
{
    file: "./public/img/slide-2.jpg"
},

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    ---
    ---
    ---
    ---
    ---
    ---
    slide: 1,
    ---
    ---
    ---
    ---
},

untuk pengaturan form login, silakan cari login:

- di bawah ini, pengaturan bawaan.

const configData = {

	login: {
		default: 0, /* 0 = voucher atau 1 = member */
		option: 1, /* 0  atau 1 */
		voucher: {
			value: "default", /* default / toUpperCase / toLowerCase */
		},
		member: {
			value: "default", /* default / toUpperCase / toLowerCase */
		}
	},

}

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    trial: 1, /* login trial */
    login_qrcode: 1, /* login via qrcode */
    ---
    ---
},

untuk pengaturan paket harga wifi, silakan cari paket:

- di bawah ini, pengaturan bawaan.

const configData = {

	paket: {
		kolom: 2, /* 1, 2, 3, 4 */
		data: [ /* kode warna ambil di sini https://colorhunt.co */
			{
				waktu: "1 Jam",
				harga: "Rp2000",
				warna: "#3b82f6",
			},
			{
				waktu: "3 Jam",
				harga: "Rp3000",
				warna: "#facc15",
			},
			{
				waktu: "1 Hari",
				harga: "Rp5000",
				warna: "#10b981",
			},
			{
				waktu: "7 Hari",
				harga: "Rp15.000",
				warna: "#ef4444",
			},
		],
	},

}

{
    waktu: "7 Hari",
    harga: "Rp15.000",
    warna: "#ef4444",
},

{
    waktu: "7 Hari",
    harga: "Rp15.000",
    warna: "#ef4444",
},
{
    waktu: "15 Hari",
    harga: "Rp35.000",
    warna: "#f6f7f8",
},

{
    waktu: "7 Hari",
    harga: "Rp15.000",
    warna: "#ef4444",
},, //salah, komanya cukup satu aja.
{
    waktu: "15 Hari",
    harga: "Rp35.000",
    warna: "#f6f7f8",
},

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    paket: 1,
    ---
},

- Berapa jumlah produk?, gak ada batas, mau 1 juta produk juga bisa, bisa lemot 😆

letak produk ada dua tempat.

1. di halaman home / login, dalam bentuk slide (paling bawah, setelah paket harga wifi).

2. di menu produk.

- di bawah ini, pengaturan bawaan.

const configData = {
    
    produk: {
		pemesanan: { // ganti no wa di bawah
			status: 1, /* 0 atau 1 - untuk non aktifkan tombol order jadikan 0 */
			label: 'Order Lewat Sini',
			link: `https://wa.me/628950000000?text=Halo%2C+mau+pesan+dong.`,
		},
		kolom: 2, /* 1, 2, 3*/
        slide: 6, /* idealnya 1 sampai 6 - di halaman home, paling bawah */
        data: [
			{
				image: "./public/img/galon.png",
				nama: "Aqua",
				harga: "Rp13.000",
			},
			{
				image: "./public/img/lpg.png",
				nama: "Lpg 3Kg",
				harga: "Rp27.000",
			},
			{
				image: "./public/img/lpg-5.png",
				nama: "Lpg 5Kg",
				harga: "Rp75.000",
			},
        ]
    },

}

{
    image: "./public/img/lpg-5.png",
    nama: "Lpg 5Kg",
    harga: "Rp75.000",
},

{
    image: "./public/img/lpg-5.png",
    nama: "Lpg 5Kg",
    harga: "Rp75.000",
},
{
    image: "./public/img/beras-10kg.jpg",
    nama: "Beras Pandan 10Kg",
    harga: "Rp150.000",
},

{
    image: "./public/img/lpg-5.png",
    nama: "Lpg 5Kg",
    harga: "Rp75.000",
},, //salah, komanya cukup satu aja.
{
    image: "./public/img/beras-10kg.jpg",
    nama: "Beras Pandan 10Kg",
    harga: "Rp150.000",
},

pemesanan: {
    status: 1, /* 0 atau 1 */
    label: 'Order Lewat Sini',
    link: `https://wa.me/628950000000?text=Halo%2C+mau+pesan+dong.`,
},
kolom: 2, /* 1, 2, 3*/
slide: 6, /* idealnya 1 sampai 6 - di halaman home, paling bawah */

fitur: { /* 0 atau 1 ( aktif dan non aktifkan fitur ) */
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    ---
    produk: 1,
},

menu: {
    status: 1, /* 0 atau 1, jika dijadikan 0, semua menu hilang! */
    data: [
        {
            ---
            ---
            ---
            ---
        },
        { 
            ---
            ---
            ---
            ---
        },
        {
            icon: './public/icon/produk.svg',
            nama: 'Produk',
            link: 'produk',
            status: 1, /* 0 atau 1 - non aktikan menu produk jadikan 0 */
        },
        {
            ---
            ---
            ---
            ---
        },
        {
            ---
            ---
            ---
            ---
        }
    ]
},

untuk pengaturan menu info, silakan cari info:

- di bawah ini, pengaturan bawaan.

const configData = {

	info: {
		data: [
			{
				foto: "./public/icon/user-circle.svg",
				nama: "Admin",
				waktu: "12 Juli 2022 10:27",
				konten: `Yuk Order, kami juga menyediakan makanan dan minuman.`,
			},
			{
				foto: "./public/icon/user-circle.svg",
				nama: "Admin",
				waktu: "10 Juli 2022 09:21",
				konten: 
				`Selamat Hari Raya Idul Adha 1443H

				تَقَبَّلَ اللَّهُ مِنَّا وَمِنْكُمْ
				`,
			},
		],
	},

}

{
    foto: "./public/icon/user-circle.svg",
    nama: "Admin",
    waktu: "10 Juli 2022 09:21",
    konten: 
    `Selamat Hari Raya Idul Adha 1443H

    تَقَبَّلَ اللَّهُ مِنَّا وَمِنْكُمْ
    `,
},

{
    foto: "./public/icon/user-circle.svg",
    nama: "Admin",
    waktu: "10 Juli 2022 09:21",
    konten: 
    `Selamat Hari Raya Idul Adha 1443H

    تَقَبَّلَ اللَّهُ مِنَّا وَمِنْكُمْ
    `,
},
{
    foto: "./public/icon/user-circle.svg",
    nama: "Admin",
    waktu: "23 Juli 2022 07:05",
    konten: `Mohon maaf, untuk tanggal 27 Juli 2022 nanti, kami akan melakukan maintenance.`,
},

{
    foto: "./public/icon/user-circle.svg",
    nama: "Admin",
    waktu: "10 Juli 2022 09:21",
    konten: 
    `Selamat Hari Raya Idul Adha 1443H

    تَقَبَّلَ اللَّهُ مِنَّا وَمِنْكُمْ
    `,
},, //salah, komanya cukup satu aja.
{
    foto: "./public/icon/user-circle.svg",
    nama: "Admin",
    waktu: "23 Juli 2022 07:05",
    konten: `Mohon maaf, untuk tanggal 27 Juli 2022 nanti, kami akan melakukan maintenance.`,
},

menu: {
    status: 1, /* 0 atau 1, jika dijadikan 0, semua menu hilang! */
    data: [
        {
            ---
            ---
            ---
            ---
        },
        {
            icon: './public/icon/info.svg',
            nama: 'Info',
            link: 'info',
            status: 1, /* 0 atau 1 */
        },
        { 
            ---
            ---
            ---
            ---
        },
        {
            ---
            ---
            ---
            ---
        },
        {
            ---
            ---
            ---
            ---
        }
    ]
},

Menu Bayar ini hanya menampilkan gambar.

tidak ada proses order / penjualan otomatis dalam template ini.

banyak yang mengira, ketika orang beli voucher, dan melakukan pembayaran, kode vouchernya otomatis terkirim ke orang yang beli.

tidak begitu ya, semua manual, anda kirim lagi, lewat apa? ya terserah Anda, mau lewat sms, wa, atau dibisikin ke telinga orangnya 😆

untuk pengaturan menu bayar, silakan cari scan:

- di bawah ini, pengaturan bawaan.

const configData = {

	scan: {
		kolom: 1, /* 1, 2, 3 */
		data: [
			{				
				image: "./public/img/qris-bca.jpg",
				nama: "QRIS BCA",
			},
		],
	},

}

{				
    image: "./public/img/qris-bca.jpg",
    nama: "QRIS BCA",
},

{				
    image: "./public/img/dana.jpg",
    nama: "DANA",
},
{				
    image: "./public/img/qris-bca.jpg",
    nama: "QRIS BCA",
},

{				
    image: "./public/img/dana.jpg",
    nama: "DANA",
},, //salah, komanya cukup satu aja.
{				
    image: "./public/img/qris-bca.jpg",
    nama: "QRIS BCA",
},

menu: {
    status: 1, /* 0 atau 1, jika dijadikan 0, semua menu hilang! */
    data: [
        {
            ---
            ---
            ---
            ---
        },
        { 
            ---
            ---
            ---
            ---
        },
        { 
            ---
            ---
            ---
            ---
        },
        {
            icon: './public/icon/card.svg',
            nama: 'Bayar',
            link: 'bayar',
            status: 1, /* 0 atau 1 */
        },
        {
            ---
            ---
            ---
            ---
        }
    ]
},

untuk pengaturan menu kontak, silakan cari kontak:

- di bawah ini, pengaturan bawaan.

const configData = {

	kontak: {
		deskripsi: `Meta Hotspot adalah perusahaan yang bergerak di bidang Internet Service Provider dan IT Solution di Bandung.`,
		hp: "0895-xxxx-xxxx", /* cukup kosongkan jika tidak ingin ditampilkan */
		email: "halo@meta.net", /* cukup kosongkan jika tidak ingin ditampilkan */
		alamat: "Kp. Cimuncang Rt 13 / Rw 01, Kontrakan No. 8", /* cukup kosongkan jika tidak ingin ditampilkan */
	},

}

kontak: {
    deskripsi: `Meta Hotspot adalah perusahaan yang bergerak di bidang Internet Service Provider dan IT Solution di Bandung.`,
    hp: "",
    email: "",
    alamat: "",
},

menu: {
    status: 1, /* 0 atau 1, jika dijadikan 0, semua menu hilang! */
    data: [
        {
            ---
            ---
            ---
            ---
        },
        { 
            ---
            ---
            ---
            ---
        },
        { 
            ---
            ---
            ---
            ---
        },
        {
            ---
            ---
            ---
            ---
        },
        {
            icon: './public/icon/user-circle.svg',
            nama: 'Kontak',
            link: 'kontak',
            status: 1, /* 0 atau 1 */
        }
    ]
},

ingin menampilkan expired User Mikhmon di status.html ?

untuk pengaturan expired user mikhmon, silakan cari expired_user:

- di bawah ini, pengaturan bawaan.

const configData = {

    expired_user: {
        status: 0, /* 0 atau 1 */
        session_name: `namasesi`, /* Session Name dapat dilihat di Session Settings (Settings->Session Settings). */
        url: "http://192.168.1.10/status/status.php?name=", /* sesuaikan dengan ip mikhmon kamu */
    }
    
}

url: "http://10.10.10.1/status/status.php?name=",

url: "http://10.10.10.1:8080/status/status.php?name=",

url: "https://mymikhmonku.com/status/status.php?name=",

Ingin ubah nama label.

silakan cari label:

di bawah ini, pengaturan bawaan.

const configData = {

    label: { /* ubah nama label */
		produk: "yuk order",
		produk_lihat: "lihat semua",
		kembali: "Kembali",
		info: "informasi",
		kontak: "kontak",
		paket: "paket",
		login_as: "Login",
		login: "Masuk",
		logout: "Keluar",
		free_trial: "Trial",
		login_qrcode: "Login Qrcode",
		pembayaran: "Pembayaran",
		form_login: {
			voucher_label: "Voucher",
			voucher_placeholder: "Voucher",
			
			member_label: "Username",
			member_placeholder: "Username",

			password_label: "Password",
			password_placeholder: "Password",
		}
	},
    
}

Bosan dengan warna tema? Anda bisa berkreasi sendiri, ubah sesuai selera.

silakan cari STYLE:

di bawah ini, pengaturan bawaan.

const configData = {

    /* STYLE */

	background: [
		"#424874", // warna pertama
		"#424874", // warna kedua, jika ingin ada gradient / gradasi, bedakan warnanya.
	],

	color: "#f6f7f8", /* warna teks body */
	
	bgOpacity: "rgba(0, 0, 0, 0.2)", /* cukup ubah bagian akhir, 0.1 sampai 0.9 */
	
	button: [
		"#f472b6", // warna pertama
		"#fb7185", // warna kedua, jika ingin ada gradient / gradasi, bedakan warnanya.
	],

	form_input: {
		background: "rgba(255, 255, 255, 0.1)",
		color: "#f6f7f8" /* warna teks form */
	},
	
	/* END STYLE */
    
}

"#f6f7f8",

"rgba(255, 255, 255)",

"rgba(255, 255, 255, 0.1)",

bagi Anda yang menggunakan file erik-hotspot-7-a

Tambahkan script berikut di MikroTik via Terminal:

caranya:

- copy script di atas

- buka terminal di mikrotik

- klik kanan paste, lalu ENTER.

- untuk file erik-hotspot-7-b, tidak perlu menambahkan script di atas.

- kecuali Anda menggunakan fitur Login Via Qrcode, maka perlu menambahkan script walled-garden di atas.

kamu tanya? script di atas fungsinya buat apa?

buat bypass url, BIAR Templatenya BISA DIPAKAI !