Modul Pertemuan 8: Memperbaharui Halaman Beranda dan Checkout Toko Online Mini pada

Web Hos ng.

Tujuan:

Pada pertemuan ini, siswa akan memperbaiki dan/atau memperbaharui pembuatan halaman
beranda untuk toko online mini penjualan peralatan dan bahan pertanian yang sudah di upload di
web hos ng.

Halaman Beranda :

Sebelum melanjutkan ke pembuatan Admin ada beberapa perubahan pada halaman beranda website toko
online sebagaimana berikut :

let rupiah = new Intl.NumberFormat('id-ID', {

style: 'currency',
currency: 'IDR',
});

Tambahkan syntax tersebut javascript agar kita dapat membuat tampilan berupa format uang (currency)
rupiah.

Ubah pe variabel pada keranjang dari const ke let , seper berikut

const keranjang = [] menjadi seper berikut let keranjang = [];

tambahkan sebuah fungsi pada proses reload, agar ke ka pelanggan sudah memilih barang dan menekan
(baik sengara maupun dak sengaja) refresh/reload/F5, tampilan di bagian checkout dak berubah.
document.addEventListener('DOMContentLoaded', function () {
let keranjangDariStorage = sessionStorage.getItem('keranjangBelanja');
keranjang = JSON.parse(keranjangDariStorage);
updateKeranjang(); // Perbarui tampilan keranjang setelah memuat data
});

Terakhir ubah syntax pada fungsi updateKeranjang() untuk memberikan format rupiah serta penambahan
jumlah atau pengurangan jumlah pada masing-masing item barang. Jadi pelanggan dapat mengurangi
jumlah pembelian atau bahkan menghapus item barang yang akan dibelinya.

function updateKeranjang(){
const daftarKeranjang = document.getElementById('daftar-keranjang');
const totalBelanjaElem = document.getElementById('total-belanja');
daftarKeranjang.innerHTML = '';
let total = 0;
keranjang.forEach((produk, index) => {
 const item = document.createElement('li');
item.innerHTML = `
# ${produk.nama} |
<button class="btn" onclick="kurangiJumlah(${index})">-</button>
<span id="jumlahItem${index}">${produk.jumlah}</span>
<button class="btn" onclick="tambahJumlah(${index})">+</button> |
${rupiah.format(produk.harga)} |
${rupiah.format(produk.jumlah * produk.harga)} ||
`;
daftarKeranjang.appendChild(item);
total += (produk.jumlah * produk.harga);
});
totalBelanjaElem.textContent = `${rupiah.format(total)}`;
//masukkan ke dalam session storage
sessionStorage.setItem('keranjangBelanja', JSON.stringify(keranjang));
}

Tambahkan fungsi berikut untuk menyesuaikan dengan tombol – dan + yang sudah disematkan pada
tampilan checkout belanja.
function tambahJumlah(index) {
keranjang[index].jumlah++;
updateKeranjang();
}

function kurangiJumlah(index) {
if (keranjang[index].jumlah > 1) {
keranjang[index].jumlah--;
} else {
// Jika jumlah sudah 1, hapus barang dari keranjang
keranjang.splice(index, 1);
}
updateKeranjang();
}

Sehingga tampilan pada halaman index akan seper ini:

Halaman Checkout :
Pada modul berikutnya kita akan memanfaatkan fitur dari rajaongkir.com untuk diterapkan pada alamat
pengiriman dan juga penentuan berapa ongkos kirimnya. Pada modul ini saya tentukan bahwa alamat toko
adalah di kota pekalongan, sehingga kita hanya cukup menentukan kota tujuannya saja untuk di dapatkan
ongkos kirimnya. Ubah halaman checkout.html.
Tampilan sebelumnya seper ini.

Ubah syntax pada bagian informasi pengiriman sebagai berikut :

<h2>Informasi Pengiriman</h2>
<label for="nama">Nama Lengkap:</label>
<input type="text" name="nama" id="nama" required><br>

<label for="alamat">Alamat Pengiriman:</label>

<textarea id="alamat" name="alamat" required rows="3" cols="60"></textarea><br>
 <label for="rt">RT/RW:</label>
<input type="number" id="rt" name="rt" required> /
<input type="number" id="rw" name="rw" required><br>

<label for="desa">Provinsi:</label>
<select name="provinsi" id="provinsi" required>
<option> -- Pilih Provinsi -- </option>
</select><br>

<label for="kota">Kota/Kabupaten:</label>
<select name="kota" id="kota" required>
<option> -- Pilih Kota -- </option>
</select><br>

<label for="kecamatan">Kecamatan:</label>
<select name="kecamatan" id="kecamatan" required>
<option> -- Pilih Kecamatan -- </option>
</select>

<label for="desa">Desa:</label>
<input type="text" id="desa" name="desa" required><br>

<label for="berat">Berat:</label>
<input type="number" id="berat" name="berat" required><br>

<label for="ekspedisi">Ekspedisi:</label>
<select name="ekspedisi" id="ekspedisi" required>
<option> -- Pilih Paket -- </option>
<option value="jne">JNE</option>
<option value="pos">POS Indonesia</option>
<option value="tiki">TIKI</option>
</select><br>

<label for="paket">Paket:</label>
<select name="paket" id="paket" required>
<option> -- Pilih Paket -- </option>
</select><br>

<label for="ongkir">Kurir:</label>
<input type="text" id="kurir" name="kurir" required readonly><br>

<label for="ongkir">Ongkos Kirim:</label>

<input type="text" id="ongkir" name="ongkir" required readonly><br>

Sehingga tampilannya akan menjadi seper ini:

Selanjutnya kita akan memulai mengambil data provinsi dari fasilitas yang ada di rajaongkir.com.
1. Masuk ke panel halaman rajaongkir kalian masing-masing. Kemudian ke menu API key, pas kan ada key
disitu.

2. Menu Integrasi > Dokumentasi API > Starter

3. Menuju ke menu cost > Province > contoh request > PHP

4. Copy script pada bagian tersebut.

5. Paste-kan pada bagian berikut :

Note : itu pada bagian CURLOPT-URL, hilangkan ?id=12 nya ya. Yang pada bagian akhir itu.
6. Ubah pada bagian akhir seper berikut :
echo $response;
menjadi :
 //echo $response;
$data = json_decode($response);
7. Oiya jangan lupa beri penutup tag php pada bagian akhir copyan syntax dari rajaongkir tadi ya.
Yang kayak gini ya ?>.
8. Ubah atau masukkan API key yang ada di panel rajaongkir ke key.

=>
9. Tambahkan looping foreach untuk menampilkan data provinsi yang sudah d h prequest dari rajaongkir
dalam bentuk php.
<label for="desa">Provinsi:</label>
<select name="provinsi" id="provinsi" required>
<option> -- Pilih Provinsi -- </option>
<?php
forEach ($data->rajaongkir->results as $provinsi){
echo '<option value="'.$provinsi->province_id.'">'.$provinsi-
>province.'</option>';
}
?>
</select><br>
10. Terakhir rename file checkout.html menjadi checkout.php. Jangan lupa sesuaikan pula link file yang ada
index.php. yang ini ya

11. Silahkan di coba

Berikutnya kita akan manfaatkan rajaongkir untuk menampilkan data kota/kabupaten, sesuai dengan
data provinsi yang dipilih sebelumnya.
1. Masuk ke web rajaongkir, lalu menu Integrasi > Dokumentasi API > Starter > City > Contoh request
> PHP
2. Copy to Clipboard
3. Kembali ke File Manager di infinity, dan buat sebuah file baru, dan beri nama carikota.php.
4. Paste di file baru tersebut hasil copy an tadi.

5. Buat variabel untuk menampung data provinsi, lalu masukkan ke dalam CURLOPT_URL. Seper
berikut :
 6. Jangan lupa masukkan juga API key nya.
7. Ubah echo $response, menjadi seper berikut :

Jangan lupa penutup pada tag PHP nya ya.

8. Tambahkan looping untuk menampilkan data kota/kabupatennya sebelum tag penutup PHP.
foreach($data->rajaongkir->results as $kota){
echo '<option value="'.$kota->city_id.'"> '.$kota->city_name.' </option>';
}
9. Kita tambahkan fungsi cari kota pada file checkout.php tersebut. Diletakkan pada bagian akhir saja.
function carikota(id_provinsi){

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("kota").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "carikota.php?idp="+id_provinsi, true);
xmlhttp.send();
}
10. Tambahkan method onchange pada bagian combo pilihan provinsi agar ke ka pilihan provinsi
diubah, pilihan kota/kabupaten juga ikut berubah dan menyesuaikan.

11. Silahkan di coba.

Selanjutnya kita akan dapatkan data kecamatan menyesuaikan dari data provinsi dan data kota yang sudah
di pilih sebelumnya. Langkah-langkahnya sebagai berikut :
1. Dikarenakan data kecamatan dak disediakan oleh rajaongkir, maka kita akan menggunakan database
yang lain. Kita lakukan pencarian pada google, ke k saja cahyadsn rajaongkir. Lalu klik link yang
pertama.
2. Klik menu Code > Download ZIP

3. Ekstrak hasil download tersebut, yang nan akan kita ambil file .sql nya.

4. Masuk ke phpmyadmin database website untuk melakukan impor ng mysql. Menu Impor > Choose file
> pilih file database (.sql) yang akan kita impor > Open. Kemudian klik kirim/go.
 Jika berhasil akan tampil seper berikut :

5. Perha kan pada database kita, maka akan bertambah tabelnya.

Untuk website ini tabel yang akan

kita pergunakan adalah
to_ro_subdistricts.

6. Ubah tag html pada bagian

combo kota, untuk menambahkan
method onchange seper berikut:

7. Tambahkan fungsi carikecamatan pada bagian akhir seper berikut :

8. Buat file baru dan beri nama carikecamatan.php, dan ke kkan syntax berikut :
<?php
include 'dbkonek.php';
$idk = $_GET['idk'];
$sql = $conn->query("SELECT * FROM tb_ro_subdistricts WHERE city_id='$idk' ");
while($data = $sql->fetch_assoc()){
?>
<option value="<?php echo $data['subdistrict_id'] ?>"><?php echo
$data['subdistrict_name'] ?></option>
<?php
}
?>
9. Silahkan di uji coba

Untuk menentukan desa akan kita kembangkan nan nya lebih lanjut, karena harus membuat
tabel/databasenya terlebih dahulu.

Berikutnya kita akan menampilkan pada bagian paket berdasarkan pilihan ekspedisi yang kita tentukan.
Langkah-langkahnya sebagai berikut :
1. Ubah pada bagian combo ekspedisi dengan menambahkan method onchange caripaket, seper
berikut :

2. Pada javascript kita tambahkan fungsi cari paket seper berikut :

 function caripaket(id_paket){
var kota = document.getElementById("kota").value;
var berat = document.getElementById("berat").value;

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("paket").innerHTML = this.responseText;
}
}
xmlhttp.open("GET",
"caripaket.php?kota="+kota+"&berat="+berat+"&kurir="+id_paket, true);
xmlhttp.send();
}
3. Buat sebuah file baru dan beri nama caripaket.php, kemudian masukkan syntax berikut :
<?php
$kota = $_GET['kota'];
$berat = $_GET['berat'];
$kurir = $_GET['kurir'];

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.rajaongkir.com/starter/cost",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS =>
"origin=349&destination=".$kota."&weight=".$berat."&courier=".$kurir,
CURLOPT_HTTPHEADER => array(
"content-type: application/x-www-form-urlencoded",
"key: 0d06c4041826c0806b8759d573432841"
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
//echo $response;
$data = json_decode($response);
}

foreach($data->rajaongkir->results[0]->costs as $paket){
 echo '<option value="'.$kurir.':'.$paket->service.':'.$paket->cost[0]-
>value.'"> Paket: '.$paket->service.'; Ongkos: '.$paket->cost[0]->value.';
Est: '.$paket->cost[0]->etd.' hari </option>';
}
?>
4. Selanjutnya kita berikan method pada combo paket, agar ke ka customer memilih paket, akan
terkonfirmasi paket yang dipilih ke textbox Kurir dan ongkos kirim ke textbox Ongkos Kirim.

5. Buatkan fungsi ongkirnya di javascriptnya

function ongkirnya(paket){
var kurir = paket.split(":");
var ongkiry = document.getElementById("ongkir");
var kuriry = document.getElementById("kurir");

kuriry.value = kurir[0].toUpperCase() + ' - ' + kurir[1];

ongkiry.value = kurir[2];
}
6. Silahkan dicoba.

Manfaatkan fungsi sama pada modul sebelumnya untuk memformat tampilan currency (rupiah).
1. Tambahkan script berikut pada awal javascript.

2. Ubah beberapa script pada javascript berikut.

3. Ubah juga pada script yang berikut :

4. Termasuk script pada textbox ongkos kirim juga

5. Hasilnya adalah sebagai berikut :

Modul Pertemuan 9: Memperbaharui Halaman Invoice serta Menambahkan validasi
user/pelanggan Website Toko Online Mini.

Tujuan:
Pada pertemuan ini, siswa akan memperbaiki dan/atau memperbaharui halaman invoice serta
melakukan validasi user/pelanggan ke ka melaksanakan proses pembelian pada toko online mini
penjualan peralatan dan bahan pertanian yang sudah di upload di web hos ng.

Pada modul ini, kita akan memproses data yang di input di dalam form pada halaman checkout ke dalam
halaman invoice. Ada 2 perubahan yang akan kita rombak dalam halaman checkout dan invoice ini.

1. Pengiriman data yang sebelumnya menggunakan session storage di javascript, akan kita ubah
menggunakan PHP.
2. Nan nya sebelum masuk ke halaman checkout akan kita cek terlebih dahulu perihal login dari
pelanggan, jika pelanggan belum login, maka akan kita arahkan terlebih dahulu ke halaman login.

Baiklah akan kita mulai dari perubahan pertama :

1. Kita hapus fungsi selesaikan-pembayaran yang ada di checkout.php

2. Ubah juga bu on selesaikan pembayarannya, seper berikut :

3. Ubah nama file invoice.html menjadi invoice.php

4. Jangan lupa, ubah pula ac on yang ada di formulir pada halaman checkout, seper berikut:

5. Berikutnya kita ubah file invoice.php

6. Kita buat beberapa variabel di php untuk menampung data yang dikirimkan formulir dari checkout.php
di bawah div hero ya.

<?php
$nama = $_POST["nama"];
$alamat = $_POST["alamat"];
$rt = $_POST["rt"];
$rw = $_POST["rw"];
$desa = $_POST["desa"];
$kecamatan = $_POST["kecamatan"];
$kota = $_POST["kota"];
$provinsi = $_POST["provinsi"];
$kodepos = $_POST["kode-pos"];
$kurir = $_POST["kurir"];
$ongkir = $_POST["ongkir"];
$email = $_POST["email"];
$telepon = $_POST["telepon"];
$bank = $_POST["bank"];
$norek = $_POST["nomor-rekening"];
$namaRekening = $_POST["nama-rekening"];
$cabang = $_POST["cabang"];
$cabang = $_POST["cabang"];

//pergunakan switch case untuk menentukan transfer dengan nama bank yang sama
switch ($bank) {
case 'bca':
$namaBank = 'Bank BCA';
$rekeningInfo = 'Bank BCA : 238 080 156 4';
break;
case 'bni':
$namaBank = 'Bank BNI';
$rekeningInfo = 'Bank BNI : 9871 2776 143';
break;
case 'mandiri':
$namaBank = 'Bank Mandiri';
$rekeningInfo = 'Bank Mandiri : 231 412 138 753 2';
break;
case 'bri':
$namaBank = 'Bank BRI';
$rekeningInfo = 'Bank BRI : 0069-01-076521-56-0';
break;
default:
$namaBank = 'Lainnya';
$rekeningInfo = 'Bank Lain : Nomor Rekening Lain';
}
?>
7. Masukkan seluruh informasi tersebut ke dalam tampilan di invoice, seper berikut :
 Dan script lengkapnya adalah sebagai berikut :

<h3>Informasi Pengiriman</h3>
<table class="datapem">
<tr >
<td width="150px">Nama Pelanggan</td>
<td>:</td>
<td width="450px"><?php echo $nama; ?></td>
</tr>
<tr>
<td>Alamat Pengiriman</td>
<td>:</td>
<td><?php echo $alamat.' RT/RW '.$rt.'/'.$rw.' Desa '.$desa.' Kecamatan
'.$kecamatan.' Kota/Kab '.$kota.' Provinsi '.$provinsi.'
Kode Pos '.$kodepos; ?></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><?php echo $email; ?></td>
</tr>
<tr>
<td>No. Telepon</td>
<td>:</td>
<td><?php echo $telepon; ?></td>
</tr>
</table>
<br/>
<h3>Data Pembayaran</h3>
<table class="datapem">
<tr>
<td width="150px" >Nama Lengkap</td>
<td>:</td>
<td width="450px"><?php echo $namaRekening ?></td>
</tr>
<tr>
<td>Nomor Rekening</td><td>:</td>
<td><?php echo $norek; ?></td>
</tr>
<tr>
<td>Bank</td>
<td>:</td>
<td><?php echo $namaBank; ?>; Kantor Cabang: <?php echo $cabang; ?></td>
</tr>
</table>
8. Ubah pula pada tampilan bagian ongkos kirim.
9. Berikutnya kita hapus javascript yang sudah dak dibutuhkan.
Script berikut yang kita hapus.
// Mengambil data dari sessionStorage
const namaPelanggan = JSON.parse(sessionStorage.getItem('namaPelanggan'));
const alamat = JSON.parse(sessionStorage.getItem('alamat'));
const rt = JSON.parse(sessionStorage.getItem('rt'));
const rw = JSON.parse(sessionStorage.getItem('rw'));
const desa = JSON.parse(sessionStorage.getItem('desa'));
const kecamatan = JSON.parse(sessionStorage.getItem('kecamatan'));
const kota = JSON.parse(sessionStorage.getItem('kota'));
const provinsi = JSON.parse(sessionStorage.getItem('provinsi'));
const kodepos = JSON.parse(sessionStorage.getItem('kodepos'));
const email = JSON.parse(sessionStorage.getItem('email'));
const telepon = JSON.parse(sessionStorage.getItem('telepon'));
const kurir = JSON.parse(sessionStorage.getItem('kurir'));
const ongkir = JSON.parse(sessionStorage.getItem('ongkir'));
const bank = JSON.parse(sessionStorage.getItem('bank'));
let rekeningInfo; // Variabel untuk menyimpan informasi rekening
let namaBank;

const norek = JSON.parse(sessionStorage.getItem('norek'));

const namaRekening = JSON.parse(sessionStorage.getItem('namaRekening'));
const cabang = JSON.parse(sessionStorage.getItem('cabang'));
// Menampilkan data di elemen HTML
let alamatPengiriman =
document.getElementById('invoice-nama').textContent = namaPelanggan;
document.getElementById('invoice-alamat').textContent = alamatPengiriman;
document.getElementById('invoice-email').textContent = email;
document.getElementById('invoice-telepon').textContent = telepon;
document.getElementById('invoice-rekening').textContent = rekeningInfo;
document.getElementById('invoice-bank').textContent = namaBank;
document.getElementById('invoice-rek').textContent = norek;
document.getElementById('invoice-pengirim').textContent = namaRekening;
document.getElementById('invoice-cabang').textContent = cabang;
document.getElementById('invoice-ongkir').textContent = `${rupiah(ongkir)}`;

10. Silahkan di coba.

11. Berikutnya kita akan mengatasi permasalahan pada ongkos kirim, yang berimbas pada total
pembayaran.
12. Yaitu dengan menambahkan session storage pada fungsi caripaket, seper berikut :
Ingat fungsi ini ada di file checkout.php ya.

13. Selanjutnya kita pada invoice kita tambahkan script berikut :

const ongkos = JSON.parse(sessionStorage.getItem('ongkos'));
14. Sesuaikan juga yang ada di baris ini.

15. Silahkan d coba

Ternyata pada tampilan alamat pengiriman pada bagian Kecamatan, Kota, Provinsi masih berbentuk ID nya,
belum nama daerahnya. Oke mari kita perbaiki.

16. Kita akan memanfaatkan tabel tb_ro_ci es, tb_ro_provinces dan tb_ro_subdistricts yang sudah kita
import sebelumnya.

17. Kita include kan dulu file dbkonek.php. Ke kkan script berikut pada bagian awal PHP ya:
include 'dbkonek.php';
18. Data Kecamatan dahulu. Tambahkan script berikut untuk mengambil data nama kecamatan dari tabel
tb_ro_subdistrics.
//ambil data kecamatan
$sqlkec = $conn->prepare("SELECT * FROM tb_ro_subdistricts WHERE subdistrict_id
= ?");
$sqlkec->bind_param("s", $kecamatan);
$sqlkec->execute();
$namakec = $sqlkec->get_result()->fetch_assoc();
$namakecamatan = $namakec["subdistrict_name"];
$sqlkec->close();
19. Selanjutnya Data Kota/Kabupaten. Tambahkan script berikut untuk mengambil nama kota/kabupaten
dari tabel tb_ro_ci es.

20. Berikutnya Data Provinsi. Tambahkan script berikut untuk mengambil nama Provinsi dari tabel
tb_ro_provinces.

21. Kita ubah pada tampilan alamatnya menjadi seper berikut :

<td><?php echo $alamat." RT. ".$rt." RW. ".$rw." Desa ".$desa." Kecamatan
".$namakecamatan." ".$namakota." Provinsi ".$namaprovinsi." Kode Pos
".$kodepos; ?></td>
22. Hasilnya akan seper ini.
Berikutnya pada permasalahan yang kedua, yaitu validasi login pelanggan/user.

1. Kita ubah terlebih dahulu tabel pelanggan pada database, yaitu dengan menambahkan dua kolom,
username dan password.
Buka database > pilih tabel Pelanggan > Tambahkan 2 kolom > setelah nama_pelanggan > kirim

Isikan ketentuan kolom sebagai berikut :

Setelah itu klik kirim

Jika berhasil akan tampil seper ini :

2. Tambahkan pada baris awal pada file checkout.php menjadi sebagai berikut:
Yang tadinya ini :
<?php
session_start(); // Mulai sesi untuk menggunakan $_SESSION

include 'dbkonek.php';

// Validasi apakah pelanggan sudah login

if (!isset($_SESSION['pelanggan_id'])) {
// Jika tidak, arahkan ke halaman login atau lakukan tindakan lain
header("Location: login.php"); // Ganti 'login.php' dengan halaman login Anda
exit();
} else{
//jika ternyata sudah login, maka ambil datanya ditampilkan di checkout.php
//variabel untuk penanda sudah login atau belum
$login = true;

//query untuk mengambil data pelanggan dari database

$sqlpel = $conn->prepare("SELECT * FROM pelanggan WHERE id_pelanggan = ?");
$sqlpel->bind_param("s", $_SESSION['pelanggan_id']);
$sqlpel->execute();
$datapel = $sqlpel->get_result()->fetch_assoc();

//masing-masing data dimasukkan dalam variabel masing-masing untuk mempermudah

$namapelanggan = $datapel["nama_pelanggan"];
$alamatpelanggan = $datapel["alamat"];
$rtpelanggan = $datapel["rt"];
$rwpelanggan = $datapel["rw"];
$desapelanggan = $datapel["desa"];
$kecamatanpelanggan = $datapel["kecamatan"];
$kotapelanggan = $datapel["kota"];
$provinsipelanggan = $datapel["provinsi"];
$kodepospelanggan = $datapel["kodepos"];
$emailpelanggan = $datapel["email"];
$hapepelanggan = $datapel["hape"];
}
?>
3. Tambahkan script berikut untuk menampilkan data pada masing-masing tag input, seper misal :
value="<?php echo isset($namapelanggan) ? $namapelanggan : ' '; ?>"
Script tersebut di tambahkan ke dalam tag input nama pelanggan, sehingga secara lengkap tag input
nama pelanggan akan seper berikut :

Akan menampilkan nama pelanggan apabila kondisinya sudah login.

Terapkan hal tersebut ke data input yang lain.
4. Khusus untuk data provinsi, kota, kecamatan lakukan hal sebagai berikut.
Tambah script untuk cek kondisi login pada request provinsi dari raja ongkir, seper berikut :
if(!$login){
Jangan lupa tag tutup } pada bagian akhir.
Fungsinya sebagai penanda kondisi, apabila dak login, maka script php di dalamnya akan di jalankan.

Untuk yang di file carikota.php dan carikecamatan.php, dak perlu di ubah ya, karena dak sifatnya
dipanggil, dak langsung di eksekusi seper yang di provinsi.
5. Ubah script pada combo provinsi sebagai berikut :
<option> -- Pilih Provinsi -- </option>
<?php
if($login){
$sqlprov = $conn->query("SELECT * FROM tb_ro_provinces");
while($dataprov = $sqlprov->fetch_assoc()){
$slcprov = $dataprov['province_id'] == $provinsipelanggan ? "selected" : "";
echo '<option value="'.$dataprov['province_id'].'"
'.$slcprov.'>'.$dataprov['province_name'].'</option>';
}
}else{
forEach ($data->rajaongkir->results as $provinsi){
echo '<option value="'.$provinsi->province_id.'">'.$provinsi-
>province.'</option>';
}
}
?>
Fungsinya yaitu apabila dalam kondisi login, maka akan mengambil data dari tabel di database kita
sendiri, yaitu tabel tb_ro_provinces, dan akan terpilih provinsi yang sesuai data pelanggan customer.
Namun jika sebaliknya, yaitu maka akan mengambil data dari rajaongkir.
6. Hal yang sama di berlakukan pada pengambilan data kota/kabupaten, sebagai berikut:
<option> -- Pilih Kota -- </option>
<?php
if($login){
$sqlkota = $conn->query("SELECT * FROM tb_ro_cities WHERE province_id =
'$provinsipelanggan' ");
while($datakota = $sqlkota->fetch_assoc()){
$slckota = $datakota['city_id'] == $kotapelanggan ? "selected" : " ";
echo '<option value="'.$datakota['city_id'].'"
'.$slckota.'>'.$datakota['city_name'].'</option>';
}
}
?>
Ar nya apabila dalam kondisi login maka akan mengambil data sesuai dengan yang ada dalam database
dan data kota/kabupaten yang sesuai dengan data pelanggan customer, yang akan di tampilkan.
7. Hal yang sama di berlakukan pada pengambilan data kecamatan, sebagai berikut :
<option> -- Pilih Kecamatan -- </option>
<?php
if($login){
 $sqlkec = $conn->query("SELECT * FROM tb_ro_subdistricts WHERE city_id =
'$kotapelanggan' ");
while($datakec = $sqlkec->fetch_assoc()){
$slckec = $datakec['subdistrict_id'] == $kecamatanpelanggan ? "selected" : " ";
echo '<option value="'.$datakec['subdistrict_id'].'"
'.$slckec.'>'.$datakec['subdistrict_name'].'</option>';
}
}
?>
Kondisi sama dengan kota, apabila login maka yang akan tampil adalah nama kecamatan yang sesuai
dengan data di tabel pelanggan.
Kegunaan script tambahan tersebut adalah juga sebagai konversi dari ID ke nama daerah, misal
province_id 10, maka yang muncul adalah Jawa Tengah.
8. Berikut kita buat sebuah halaman untuk login, yaitu dengan membuat sebuah file login.php
9. Copy saja dari salah satu file yang sudah ada, semisal file invoice.php, dan nan kita ubah pada bagian
content nya. Saya anggap kalian sudah copy file invoice.php dan kalian beri nama login.php ya.
10.Ubah pada beberapa bagian. Yang pertama ubah pada bagian <body> HTML nya, seper berikut :
<body>
<div class="container">
<div class="header">
<div class="menuKiri">
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Mitra Kami</a></li>
<li><a href="#">Mulai Berjualan</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
<div class="judulKanan">
<h1 class="judul">Toko Pertanian</h1>
</div>
</div>
<div class="hero"></div>
<div class="content cf" id="cetakke">
<div class="main-invoice">
<h2>LOGIN</h2>
<div class="container-login">
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button class="login">LOG IN</button>
<button type="submit" class="signup"><a href="signup.php">SIGN
UP</a></button>
</form>
<div id="error-message"></div>
</div>
</div>
 <div class="sidebar">
<!--Keranjang Belanja-->
<br/><br/>
<div class="keranjang">
<h3></h3>
</div>
</div>
</div>
<div class="footer">
<p class="copyright">Copyright 2023. Toko Pertanian.</p>
</div>
</div>

<script src="script.js"></script>
</body>

11.Ubah CSS yang ada pada halaman tersebut ke script berikut :

<style type="text/css">
/* CSS Invoice */
.main-invoice {
width: 600px;
padding: 20px;
box-sizing: border-box;
float: left;
font-size: 14px;
}
.main-invoice h2{
font-size: 20px;
font-weight: bold;
}
.container-login {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.container-login label {
display: block;
margin-bottom: 10px;
}
.container-login input[type="text"], input[type="password"] {
width: 95%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #33cc33;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(60,179,113,0.3);
}
.container-login .login{
 width: 45%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.container-login .signup {
margin-left: 35px;
width: 45%;
padding: 10px;
background-color: #6495ED;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.container-login a {
text-decoration: none;
color: white;
text-align: center;
}

#error-message {
color: red;
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>

12.Untuk menangani data atau proses oten fikasi data pelanggan, berupa username dan password, berikut
proses-proses penyertanya, maka tambahkan script PHP berikut pada bagian awal file login tersebut.
<?php
session_start();

include 'dbkonek.php';

// Cek apakah user sudah login atau belum

if (isset($_SESSION['pelanggan_id'])) {
header("Location: checkout.php"); // Sesuaikan dengan halaman setelah login
exit();
}

// Simpan halaman sebelum ke login.php

if (!isset($_SESSION['previous_url'])) {
$_SESSION['previous_url'] = $_SERVER['HTTP_REFERER'];
}
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];

// Cari user berdasarkan username

$sql = $conn->prepare("SELECT * FROM pelanggan WHERE username = ?");
$sql->bind_param("s", $username);
$sql->execute();
$result = $sql->get_result();

if ($result->num_rows > 0) {
// Ambil data user
$row = $result->fetch_assoc();
$storedHashedPassword = $row["password"];

// Verifikasi password
if (password_verify($password, $storedHashedPassword)) {
// Password cocok, user berhasil login
$_SESSION['pelanggan_id'] = $row["id_pelanggan"];
$_SESSION['nama_pelanggan'] = $row["nama_pelanggan"];
$_SESSION['username'] = $row["username"];

// Redirect atau lakukan hal lain sesuai kebutuhan

$redirect_url = isset($_SESSION['previous_url']) ?
$_SESSION['previous_url'] : "checkout.php";
header("Location: $redirect_url");
exit();
} else {
echo "<script>alert('Password salah');</script>";
}
} else {
echo "<script>alert('Username tidak ditemukan');</script>";
}
$sql->close();
}
?>
13.Kita juga harus buat form untuk penda aran pelanggan (sign up).
14.Karena link/tombol untuk mengakses halaman signup sudah kita buat pada script di atas.
15.Sebelum pembuatan halaman signup kita perbaharui dahulu tabel pelanggan dengan menambahkan
informasi mengenai bank, seper berikut :
16.Buat sebuah file baru dan beri nama signup.php, dan berikan script berikut :

<?php
session_start();

include 'dbkonek.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Ambil data dari form signup
$nama = $_POST["nama"];
$username = $_POST["username"];
$password = $_POST["password"];
$alamat = $_POST["alamat"];
$rt = $_POST["rt"];
$rw = $_POST["rw"];
$desa = $_POST["desa"];
$kecamatan = $_POST["kecamatan"];
$kota = $_POST["kota"];
$provinsi = $_POST["provinsi"];
$kodepos = $_POST["kode-pos"];
$email = $_POST["email"];
$telepon = $_POST["telepon"];
$bank = $_POST["bank"];
$norek = $_POST["nomor-rekening"];
$namaRekening = $_POST["nama-rekening"];
$cabang = $_POST["cabang"];

// Validasi password (minimal satu huruf dan satu angka)

if (!preg_match('/^(?=.*[a-zA-Z])(?=.*\d).+$/', $password)) {
echo "<script>alert('Password harus mengandung setidaknya satu huruf dan
satu angka');</script>";
exit;
}

// Hash password
// Password akan seperti di enkripsi agar tidak mudah dijebol
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);

// SQL Injection prevention menggunakan prepared statement

$sqlpelanggan = $conn->prepare("INSERT INTO pelanggan (nama_pelanggan,
username, password, alamat, rt, rw, desa, kecamatan, kota, provinsi, kodepos,
email, hape, bank, norekening, namarekening, cabang) VALUES (?, ?, ?, ?, ?, ?, ?,
?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
$sqlpelanggan->bind_param("sssssssssssssssss", $nama, $username,
$hashedPassword, $alamat, $rt, $rw, $desa, $kecamatan, $kota, $provinsi,
$kodepos, $email, $telepon, $bank, $norek, $namaRekening, $cabang);

if ($sqlpelanggan->execute()) {
echo "<script>alert('Data Berhasil disimpan');</script>";
$sqlpelanggan->close();
 // Set session ID dengan ID pelanggan yang baru saja didaftarkan
$_SESSION['pelanggan_id'] = $conn->insert_id;
$_SESSION['nama_pelanggan'] = $nama;
$_SESSION['username'] = $username;
header("Location: checkout.php"); // Sesuaikan dengan halaman setelah daftar

} else {
echo "<script>alert('Mohon Maaf, Data gagal disimpan');</script>";
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toko Pertanian</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="menuKiri">
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Mitra Kami</a></li>
<li><a href="#">Mulai Berjualan</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
<div class="judulKanan">
<h1 class="judul">Toko Pertanian</h1>
</div>
</div>
<div class="hero"></div>
<div class="content cf">
<div class="main">
<h2>PENDAFTARAN PELANGGAN</h2>
<br><br>
<!--Formulir Pendaftaran-->
<form action="" id="formulir-daftar" method="post">
<h2>Informasi Pengiriman</h2>
<label for="nama">Nama Lengkap:</label>
<input type="text" name="nama" id="nama" required><br>

<label for="username">Username:</label>
<input type="text" name="username" id="username" required><br>

<label for="password">Password:</label>
 <input type="password" name="password" id="password"
required><br>

<label for="alamat">Alamat </label>

<textarea id="alamat" name="alamat" required rows="3"
cols="60"> </textarea><br>

<label for="rt">RT/RW:</label>
<input type="number" id="rt" name="rt" required > /
<input type="number" id="rw" name="rw" required ><br>

<?php
$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.rajaongkir.com/starter/province",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"key: 0d06c4041826c0806b8759d573432841"
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
//echo $response;
$data = json_decode($response);
}
?>
<label for="desa">Provinsi:</label>
<select name="provinsi" id="provinsi" required
onchange="carikota(this.value)">
<option> -- Pilih Provinsi -- </option>
<?php
forEach ($data->rajaongkir->results as $provinsi){
echo '<option value="'.$provinsi-
>province_id.'">'.$provinsi->province.'</option>';
}
?>
</select><br>
 <label for="kota">Kota/Kabupaten:</label>
<select name="kota" id="kota" required
onchange="carikecamatan(this.value)">
<option> -- Pilih Kota -- </option>
</select><br>

<label for="kecamatan">Kecamatan:</label>
<select name="kecamatan" id="kecamatan" required>
<option> -- Pilih Kecamatan -- </option>
</select>

<label for="desa">Desa:</label>
<input type="text" id="desa" name="desa" required ><br>

<label for="kode-pos">Kodepos:</label>
<input type="number" id="kode-pos" name="kode-pos" required
><br>

<h2>Informasi Kontak</h2>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required ><br>

<label for="telepon">Nomor Telepon:</label>

<input type="tel" id="telepon" name="telepon" required ><br>

<h2>Informasi Pembayaran (Rekening Bank)</h2>

<label for="bank">Bank:</label>
<select id="bank" name="bank" required><option value="bca">BCA
(Bank Central Asia)</option>
<option value="bni">BNI (Bank Negara Indonesia)</option>
<option value="mandiri">Mandiri (Bank Mandiri)</option>
<option value="bri">BRI (Bank Rakyat Indonesia)</option>
<!-- Tambahkan bank-bank lainnya sesuai kebutuhan -->
</select><br>

<label for="nomor-rekening">Nomor Rekening:</label>

<input type="text" id="nomor-rekening" name="nomor-rekening"
required><br>

<label for="nama-rekening">Nama Pemegang Rekening:</label>

<input type="text" id="nama-rekening" name="nama-rekening"
required><br>

<label for="cabang">Cabang Bank (opsional):</label>

<input type="text" id="cabang" name="cabang"><br>
<button id="selesaikan-pembayaran" type="submit"
name="simpandata" form="formulir-checkout">SIMPAN DATA</button>
</form>

</div>
<div class="sidebar">
 <h3>Sign Up</h3>
<div class="kategori-pilihan">

</div>
<!-- Awal Mula Keranjang Belanja-->
<br><br>
<div class="keranjang">
</div>

</div>
</div>
<div class="footer">
<p class="copyright">Copyright. 2023. Toko Pertanian</p>
</div>
</div>
<script>
function carikota(id_provinsi){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("kota").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "carikota.php?idp="+id_provinsi, true);
xmlhttp.send();
}

function carikecamatan(id_kota){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("kecamatan").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "carikecamatan.php?idk="+id_kota, true);
xmlhttp.send();
}
</script>
</body>
</html>

17.Oiya kita sesuaikan tampilan dari data yang ada di data pelanggan ke form yang ada d checkout.php ya,
karena ada perubahan pada tabel pelanggan ya, kita masukkan dulu data dari tabel ke variabel agar nan
lebih mudah di aplikasikan, sebagai berikut :
18.Kita pergunakan switch case untuk menentukan op on combo pilihan bank yang terpilih, sebagai
berikut:
<?php
switch ($bank) {
case 'bca':
$slc1 = "selected";
$slc2 = "";
$slc3 = "";
$slc4 = "";
break;
case 'bni':
$slc1 = "";
$slc2 = "selected";
$slc3 = "";
$slc4 = "";
break;
case 'mandiri':
$slc1 = "";
$slc2 = "";
$slc3 = "selected";
$slc4 = "";
break;
case 'bri':
$slc1 = "";
$slc2 = "";
$slc3 = "";
$slc4 = "selected";
break;
default:
$slc1 = "";
$slc2 = "";
$slc3 = "";
$slc4 = "";
}
?>
19.Terapkan ke dalam combo pilihan bank
<option value="bca" <?php echo $slc1; ?>>BCA (Bank Central Asia)</option>
<option value="bni" <?php echo $slc2; ?>>BNI (Bank Negara Indonesia)</option>
<option value="mandiri" <?php echo $slc3; ?>>Mandiri (Bank Mandiri)</option>
<option value="bri" <?php echo $slc4; ?>>BRI (Bank Rakyat Indonesia)</option>
20.Masukkan info bank yang lain ke no rekening, nama rekening dan cabang.
 <input type="text" id="nomor-rekening" name="nomor-rekening" required
value="<?php echo isset($norek) ? $norek : ''; ?>"><br>

<input type="text" id="nama-rekening" name="nama-rekening" required value="<?php

echo isset($namarekening) ? $namarekening : ''; ?>"><br>

<input type="text" id="cabang" name="cabang" value="<?php echo isset($cabang) ?

$cabang : ''; ?>"><br>

Berikutnya kita akan memberikan tanda apabila sudah melaksanakan login

1. Kita harus menentukan informasi apa yang akan ditampilkan dan diletakkan di bagian mana.
2. Dalam hal ini informasi berupa nama pelanggan dan username yang akan saya tampilkan dan saya
letakkan pada bagian menu kiri untuk Username dan nama pelanggan pada bagian sidebar, di atas
judul Kategori.
3. Ingat ya, kedua informasi itu kita ambil dari cookies ya (di php menggunakan fungsi $_SESSION), dan
kita masukkan informasi tersebut ke cookies pada saat proses login atau signup.
$_SESSION['nama_pelanggan'] = $nama;
$_SESSION['username'] = $username;
4. Pada ap file pada bagian masing-masing kita ubah sebagai berikut :
<li><?php echo isset($_SESSION['username']) ? $_SESSION['username'] : " "; ?></li>
Tampilannya seper ini :

5. Untuk nama pelanggan sebagai berikut :

<h3><?php echo isset($_SESSION['nama_pelanggan']) ? "Selamat
Datang,<br>".$_SESSION['nama_pelanggan'] : " "; ?></h3><br>
Tampilannya seper ini:

6. Jangan lupa untuk menambahkan proses untuk logout, yaitu pertama kita buat tombol logoutnya dulu.
Kita ubah saja pada bagian tampilan informasi login username, sebagai berikut :
<li><a href="logout.php"><?php echo isset($_SESSION['username']) ? "LOGOUT:
".$_SESSION['username'] : " "; ?></a></li>
7. Ada perubahan tampilan, dan pada saat ini saya hapus menu ‘Mulai Berjualan’.
8. Berikutnya kita buat sebuah file logout.php, untuk menjalankan proses logout
9. Proses yang dilakukan pada proses logout adalah men-delete cookies (di php $_SESSION), kemudian di
redirect ke halaman index.php.
10. Kita buat file logout.php
11. Ke kkan script berikut pada file tersebut.
<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php"); // Ganti dengan halaman yang sesuai setelah logout
exit;
?>