Cara Membuat Jam Digital dengan JQuery

Kali ini kita akan buat jam digital dengan jQuery, saya tidak menggunakan library jQuery untuk jam digital, tetapi menggunakan script manual, buat 1 file dengan nama jamdigital.html berikut adalah Script nya :

<html>
<head>
<title>jam digital</title>
<style>
/* style jam digital */
.time-now{
    font-size:40px;
    font-weight:bold;
    text-align:center;
    color:rgb(255, 230, 0);
}
.date-now{
    font-size:25px;
    font-weight:600;
    color:rgb(197, 197, 197);
    text-align:center;
}
.area-datetime{
    margin-top:15px;
    padding:10px;
    width:300px;
    height:auto;
    background-color: black;
}
</style>
</head>
<body>
<!-- output -->
<div class="area-datetime">
    <p class="date-now" id="datenow"></p>
    <p class="time-now" id="timenow"></p>
 </div>
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
<script>
    //intital tanggal dan waktu dari id
    var dateDisplay = document.getElementById("datenow");
    var timeDisplay = document.getElementById("timenow");
    //fungsi
    function refreshTime() {
      var dateString = new Date().toLocaleString("id-ID", {timeZone: "Asia/Jakarta"}); //gettime
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1;
      var yyyy = today.getFullYear();
      if (dd < 10) {
        dd = '0' + dd;
      }
      if (mm < 10) {
        mm = '0' + mm;
      }
      var todayy = dd + '/' + mm + '/' + yyyy;
      var formattedString = dateString.replace(",","-");

      dateDisplay.innerHTML = todayy; // date

      var splitarray = new Array();
      splitarray= formattedString.split(" ");
      var splitarraytime = new Array();
      splitarraytime= splitarray[1].split(".");
      timeDisplay.innerHTML = splitarraytime[0]+':'+splitarraytime[1]+':'+splitarraytime[2]; // time
    }
    //panggil ulang otomatis fungsi
    setInterval(refreshTime, 1000);
  </script>
</body>
</html>

Selesai.

Buat Form Konek ke Googlesheet dengan WPFroms di WordPress

Kali ini saya akan share bagaiamana cara membuat form otomatis konek ke Googlesheet dengan WPForms di wordpress, teknik yang saya gunakan yaitu dengan sebuah plugin wordpress namanya WPForms , hal ini pastinya sangat diperlukan agar data yang di input pengguna web dapat lagsung terekap dengan rapi di googlesheet, jadi jika anda mempunyai sebuah situs web berbasis wordpress yang Fitur ini bisa anda gunakan sebagai solusi untuk kebutuhan tersebut.

Langsung saja langkah pertama kita download dan active kan terlebih dahulu plugin WPFroms nya di web wordpress anda :

Masuk ke menu WPForms Lalu kita buat new Form, dengan pilih menu Add New seperti ini :

di tahap ini silahkan untuk membuat form sesuai kebutuhan anda, kalo disini saya membuat form order seperti ini, di WPForms caranya mudah tinggal drag & drop jenis inputan yang diperlukan seperti ini :

dan untuk merubah nama form, nama button ada di menu setting :

Jika sudah jangan lupa klik tombol SAVE, setelah itu kita pasang form di page / postingan web nya dengan copykan Shortcode nya seperti ini :

terdapat berbagai cara untuk pasang form di webnya, bisa cara manual seperti di atas, atau jika menggunakan elementator hanya tinggal drag & drop element WPForms WordPress nya lalu pilih nama form nya, dll, saya tidak bahas di sini.
setelah itu kita install plugin tambahan untuk mengkonekan WPForms kita ke Googlesheet nya , install dan aktifkan plugin dengan nama WPForms GSheetConnector :

jika sudah aktif, buka plugin itu di menu WPForms > Google sheet, lalu sekarang lakukan setting integration nya dengan masuk ke tab integration lalu klik tombol Get Code :

nanti akan diarahkan ke gmail aktif yang akan dipakai, untuk dapatkan kode nya dengan copy kode dari google nya :

kode yang didapat pastekan di kolom Google Access Code lalu tekan tombol Save & Authenticate , sampai tampil pesan connected seperti ini :

sekarang masuk ke tab GoogleSheet Form Setting lalu pilih nama form yang sudah dibuat, dan lakukan konfigurasi seperti ini :
catatan* :pastikan nama di googlesheet tidak ada spasi

jika sudah di isi semua klik tombol Submit Data.
dan untuk nama kolom di google sheet nya pastikan sama dengan dama label di masing masing inputan, dan untuk kolom pertama di isi dengan date seperti ini :

Konfigurasi sampai disitu aja, sekarang tinggal testing,
hasilnya seperti ini :

Semoga membantu.

Membuat Restful API di Codeigniter 4 (CRUD)

Di sini saya akan membuat Restful API berupa CRUD master kategori sederhana menggunakan Framework Codeigniter 4,

biasanya restful API sendiri digunakan untuk para backend developer dan fullstack developer untuk membuat sebuah res server API agar data dapat diakses / dikonsumsi oleh aplikasi frontend melalui API.

Tutorial ini bersumber dari dokumentasi langsung Codeigniter 4 https://codeigniter.com/user_guide/incoming/restful.html dan https://codeigniter.com/user_guide/outgoing/api_responses.html

Untuk penjelasan dasar apa itu API mungkin sudah banyak tersedia di blog lainnya, saya akan langsung ke praktek saja, sebelum masuk ke tahapan, saya paparkan dulu fitur CI 4 apa saja yang digunakan, saya menggunakan fitur (Validation & Routes, juga menngunakan 1 model dengan konsep 1 model 1 database) dalam proses CRUD.

EndPoint RESTful API menggunakan HTTP verbs, dan yang umum digunakan adalah GET, POST, PUT, dan DELETE berikut table penjelasan nya :

METHODENDPOINTDESCRIPTION
GET/categoryList of Category
GET/category/{id}View a Category
POST/categoryCreate New Category
PUT/category/{id}Update a Category
DELETE/category/{id}Delete a Category

oke langsung saja berikut tahapan nya :

(STEP 01) Buat database dengan nama db_cobaapi, dan buat juga 1 tabel dengan nama t_category:

CREATE DATABASE db_cobaapi;
CREATE TABLE t_category(
id INT(5) PRIMARY KEY AUTO_INCREMENT,
kode_kategori INT(5),
nama_kategori VARCHAR(200)
)ENGINE=INNODB;
INSERT INTO t_category(kode_kategori,nama_kategori) VALUES
('1','Makanan'),
('2','Minuman');

(STEP 02) install Codeigniter 4, jika belum ada file CI 4 atau belum tau cara instal CI 4 nya bisa lihat tutorial ini cara install codeigniter 4 via composer , dan jika sudah terinstall CI 4 nya bisa langsung lakukan konfigurasi database sesuai database dan table yang barusan kita buat si step 1 :

rename juga file env menjadi .env , lalu buka file .env dan ubah sebagian script di dalamnya seperti berikut :

#CI_ENVIRONMENT = production

ubah menjadi

CI_ENVIRONMENT = development

lalu sesuaikan database

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi
# database.default.DBPrefix =

ubah menjadi

database.default.hostname = localhost
database.default.database = db_cobaapi
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi
database.default.DBPrefix =

(STEP 03) buat routes dan model, untuk routes bisa dibuka file nya di folder app/config/Routes.php dan isikan script seperti ini :

$routes->resource('master_category');

script itu dimaksudkan untuk menyingkat dari banyak nya route jika manual di tuliskan, seperti penjelasan di dokumentasi ci 4 nya . untuk master_category sendiri adalah sesuai nama controller yang akan kita buat nanti.

lalu buat model dengan nama M_master_category.php di folder app/models/ dan isikan script di bawah ini :

<?php
namespace App\Models;

use CodeIgniter\Model;
use Exception;

class M_master_category extends Model
{
    protected $table = 't_category';
    protected $primaryKey = 'id';
    protected $allowedFields = ['kode_kategori','nama_kategori'];
	protected $useTimestamps = false;

    public function findById($id)
    {
        $data = $this->find($id);
        if($data)
        {
            return $data;
        }
        return false;
    }
}

(STEP 04) buat controller dengan nama Master_category.php di folder app/controllers/ dan isikan script di bawah ini :

<?php

namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;
use CodeIgniter\API\ResponseTrait;

class Master_category extends BaseController
{
    /*model*/
    protected $M_master_category;
    /*db*/
    protected $db;
	use ResponseTrait;
    
    public function __construct()
    {
        $this->mdl = new \App\Models\M_master_category();
        $this->validation = \Config\Services::validation();
        $this->db = \Config\Database::connect();
    }

    public function index()
    {
        $data = $this->mdl->findAll();
        return $this->respond($data, 200);
    }

	// get single show
    public function show($id = null)
    {
        $data = $this->mdl->findById($id);
        if($data){
            return $this->respond($data);
        }else{
            return $this->failNotFound('No Data Found with id '.$id);
        }
    }

	// create a data
    public function create()
    {
		$kode_kategori = $this->request->getPost('kode_kategori');
		$nama_kategori = $this->request->getPost('nama_kategori');
        $data = [
			'kode_kategori' => $kode_kategori,
            'nama_kategori' => $nama_kategori
        ];
		$validate = $this->validation->run($data, 'create_master_category');
		$errors = $this->validation->getErrors();

        if($errors){
            return $this->fail($errors);
        }

        $this->mdl->insert($data);
        $response = [
            'status'   => 201,
            'error'    => null,
            'messages' => [
                'success' => 'Data Saved'
            ]
        ];
         
        return $this->respondCreated($data, 201);
    }

	// update a data
	public function update($id = null)
    {
        $data = $this->request->getRawInput();
        $data['id'] = $id;
        $validate = $this->validation->run($data, 'update_master_category');
        $errors = $this->validation->getErrors();

        if($errors){
            return $this->fail($errors);
        }

        if(!$this->mdl->findById($id))
        {
            return $this->fail('id tidak ditemukan');
        }

		$this->mdl->update($id, $data);
        $response = [
            'status'   => 200,
            'error'    => null,
            'messages' => [
                'success' => 'Data Updated'
            ]
        ];
        return $this->respond($response);
    }

	// delete a data
    public function delete($id = null)
    {
        if(!$this->mdl->findById($id))
        {
            return $this->fail('id tidak ditemukan');
        }

        if($this->mdl->delete($id)){
            return $this->respondDeleted(['id'=>$id.' Deleted']);
        }
    }
}

(STEP 05) buat validation di folder app/config/Validation.php dan buat script menjadi seperti ini :

<?php

namespace Config;

use CodeIgniter\Validation\CreditCardRules;
use CodeIgniter\Validation\FileRules;
use CodeIgniter\Validation\FormatRules;
use CodeIgniter\Validation\Rules;

class Validation
{
    //--------------------------------------------------------------------
    // Setup
    //--------------------------------------------------------------------

    /**
     * Stores the classes that contain the
     * rules that are available.
     *
     * @var string[]
     */
    public $ruleSets = [
        Rules::class,
        FormatRules::class,
        FileRules::class,
        CreditCardRules::class,
    ];

    /**
     * Specifies the views that are used to display the
     * errors.
     *
     * @var array<string, string>
     */
    public $templates = [
        'list'   => 'CodeIgniter\Validation\Views\list',
        'single' => 'CodeIgniter\Validation\Views\single',
    ];

    //--------------------------------------------------------------------
    // Rules
    //--------------------------------------------------------------------
    public $create_master_category = [
		'kode_kategori' => [
			'rules' => 'required|max_length[5]|is_natural|is_unique[t_category.kode_kategori]',	
		],
		'nama_kategori' => [
			'rules' => 'required',
		]
	];
    public $update_master_category = [
		'kode_kategori' => [
			'rules' => 'required|max_length[5]|is_natural|is_unique[t_category.kode_kategori,id,{id}]',	
		],
		'nama_kategori' => [
			'rules' => 'required',
		]
	];
}

lalu setting CORS di folder app/config/Filters.php seperti ini :

<?php

namespace Config;

use CodeIgniter\Config\BaseConfig;
use CodeIgniter\Filters\CSRF;
use CodeIgniter\Filters\DebugToolbar;
use CodeIgniter\Filters\Honeypot;

//for api
use App\Filters\Cors;

class Filters extends BaseConfig
{
    /**
     * Configures aliases for Filter classes to
     * make reading things nicer and simpler.
     *
     * @var array
     */
    public $aliases = [
        'csrf'     => CSRF::class,
        'toolbar'  => DebugToolbar::class,
        'honeypot' => Honeypot::class,
        //for api
        'cors'     => Cors::class, 
    ];

    /**
     * List of filter aliases that are always
     * applied before and after every request.
     *
     * @var array
     */
    public $globals = [
        'before' => [
            // 'honeypot',
            // 'csrf',
            'cors'
        ],
        'after' => [
            'toolbar',
            // 'honeypot',
        ],
    ];

    /**
     * List of filter aliases that works on a
     * particular HTTP method (GET, POST, etc.).
     *
     * Example:
     * 'post' => ['csrf', 'throttle']
     *
     * @var array
     */
    public $methods = [];

    /**
     * List of filter aliases that should run on any
     * before or after URI patterns.
     *
     * Example:
     * 'isLoggedIn' => ['before' => ['account/*', 'profiles/*']]
     *
     * @var array
     */
    public $filters = [];
}

dan buat file dengan nama Cors.php dan simpan di folder app/Filters dengan isi script ini :

<?php namespace App\Filters;
 
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;
 
Class Cors implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if ($method == "OPTIONS") {
        die();
        }
    }
 
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
      // Do something here
    }
}

selesai sekarang coba jalankan xampp nya, lalu coba test Restfull API apakah sudah berjalan, berikut hasil testing di localhost menggunakan tools postman, lalu jalankan aplikasi ci4 kita dengan ketika php spark serve di CMD, dan akses API di browser bisa langsung ketikan http://localhost:8080/master_category
jika di akses di browser :

kita coba dengan menampilkan seluruh data dengan method GET dengan alamat url http://localhost:8080/master_category :

lalu coba tampilkan single data dengan method GET dengan alamat URL http://localhost:8080/master_category/1 :

kita coba sekarang create data dengan method POST dengan alamat URL http://localhost:8080/master_category :

lalu kita coba update data dengan method PUT dengan alamat URL http://localhost:8080/master_category/1 :

dan terakhir kita coba delete data dengan method DELETE dengan alamat URL http://localhost:8080/master_category/2 :

Finish selamat mencoba.

Aplikasi Pendataan Desa SDGs

Kebutuhan akan data sekarang ini sudah menjadi sebuah kewajiban yang harus dimiliki untuk setiap instansi pemerintah khususnya pemerintah di level desa dan kecamatan, sumber data sebelum ada di tingkat kabupaten tentunya harus di rapihkan secara sistematis dan terstruktur dimulai dari tingkat desa.

Pada tahun 2021 Kementerian Desa mengeluarkan kebijakan perihal mewajibkan semua desa di seluruh indonesia untuk melakukan pendataan dengan konsep SDGs, namun pada pelaksanaanya ada beberapa desa khususnya di kabupaten tempat saya tinggal memang katanya ada kendala teknis saat penginputan, akhirnya ada beberapa form quisioner yang terbengkalai, untuk atasi hal tersebut ada inisiatif dari tim PaduliDesa yang ditunjuk dan dipercaya pihak desa terkait untuk memberikan sebuah solusi, akhirnya dengan bekerjasama dengan zai.web.id konsep aplikasi pendataan desa dengan quisioner SDGs dapat terealisasi.

Apa itu aplikasi Pendataan Desa SDGs ?

Sistem informasi yang dirancang dan dibuat khusus untuk kebutuhan pendataan penduduk desa, sistem ini dibuat dengan konsep quisioner SDGs sehingga pemerintah desa mempunyai bank data penduduk sendiri kedepannya, dan setiap perubahan data penduduk akan tercatat di sistem ini.

Sistem ini berbasis web, dapat diakses secara online maupun offline melalui browser dan support untuk semua device baik PC, Laptop, Smartphone, dan Tablet.

Apa saja Fitur dari aplikasi Pendataan Desa SDGs ?

Sistem ini mempunyai fitur – fitur yang dibutuhkan seperti :

  1. Pendataan data dasar keluarga

Fitur ini untuk input data dasar keluarga, dari mulai no kk, nama kepala keluarga, alamat, sampai kontak.

  1. Pendataan data anggota keluarga

Fitur ini untuk input data anggota keluarga, dari mulai identitas kepala keluarga, identitas anggota keluarga, termasuk kontak dan media sosial.

  1. Pendataan quisioner SDGs

Fitur ini untuk input sesuai quisioner SDGs baik quisioner yang berkaitan dengan data keluarga seperti kategori Pemukiman, dan yang berkaitan dengan data anggota keluarga yaitu kategori Deskripsi pekerjaan,Deskripsi kesehatan, dan Deskripsi pendidikan.

  1. Data dasar keluarga

Fitur ini untuk mengelola data dasar keluarga yang telah di input, user dapat melakukan filter berdasarkan wilayah sampai dengan tingkat RT, dapat melakukan edit, dan hapus data

  1. Data anggota keluarga

Fitur ini untuk mengelola data anggota keluarga yang telah di input, user dapat melakukan filter berdasarkan wilayah sampai dengan tingkat RT, dapat melakukan edit, dan hapus data

  1. Evaluasi data dasar keluarga

Fitur ini untuk mengelola perbaikan data dasar keluarga yang telah di input, dimana user dapat melakukan filter data berdasarkan wilayah dan item-item lain yang berhubungan dan dapat menampilkan data – data yang belum lengkap dan dapat langsung memperbaikinya.

  1. Evaluasi data anggota keluarga

Fitur ini untuk mengelola perbaikan data anggota keluarga yang telah di input, dimana user dapat melakukan filter data berdasarkan wilayah dan item-item lain yang berhubungan dan dapat menampilkan data – data yang belum lengkap dan dapat langsung memperbaikinya.

  1. Dashboard sistem

Fitur ini untuk menampilkan rekapitulasi dari data-data yang telah diinput di aplikasi, diantaranya rekapitulasi total KK, total Jiwa, Grafik penduduk per jenis kelamin, Total punya KK dan tidak punya KK, total punya NIK dan tidak punya NIK,Total peserta jamsos ketenagakerjaan dan kesehatan, dll., dan data dapat ditampilkan berdasarkan wilayah sampai tingkat RT.

  1. Report Statistik Kependudukan

Fitur ini untuk menampikan statisktik berupa grafik dan table yang dipecah berdasarkan jenis kelamin, dimana menampilkan statistik kependudukan berdasarkan :

    • Rentang Umur
    • Kategori Umur
    • Pendidikan Tertinggi
    • Kondisi Pekerjaan
    • Pekerjaan Utama
    • Status Perkawinan
    • Agama
    • Jenis Kelamin
    • Kewarganegaraan
    • Kempilikan NIK

Untuk semua report dapat dicetak/diprint langsung dari aplikasi, dan dapat juga di download format excel dan pdf, dapat langsung di copy di aplikasi.

  1. Report Grafik sesuai quisioner SDGs

Fitur ini untuk menampikan statisktik berupa grafik dan table sesuai quisioner SDGs baik yang berkaitan dengan data keluarga, maupun data anggota kelurga, dimana menampilkan statistik sebagai berikut :

Kategori Pemukiman

    • Grafik Tempat tinggal yang ditempati
    • Grafik Status lahan tempat tinggal yang ditempati
    • Grafik Jenis lantai tempat tinggal terluas
    • Grafik Dinding sebagian besar rumah
    • Grafik Jendela
    • Grafik Atap
    • Grafik Penerangan Rumah
    • Grafik Energi untuk memasak
    • Grafik Sumber kayu bakar
    • Grafik Tempat pembuangan sampah
    • Grafik Fasilitas MCK
    • Grafik Sumber air mandi terbanyak
    • Grafik Fasilitas buang air besar
    • Grafik Sumber Air Minum terbanyak
    • Grafik Tempat pembuangan limbah cair
    • Grafik Rumah berada di bawah SUTET/SUTT/SUTTAS
    • Grafik Rumah di bantaran sungai
    • Grafik Rumah di lereng bukit/gunung
    • Grafik Kondisi rumah secara keseluruhan
    • Grafik Akses Pendidikan terdekat
    • Grafik Akses Fasilitas Kesehatan terdekat
    • Grafik Akses tenaga kesehatan terdekat
    • Grafik Akses Prasarana dan Sarana Transportasi
    • Grafik Pemanfaat/penerima program pemerintah

Kategori Deskripsi Pendidikan

    • Grafik Kondisi Pekerjaan
    • Grafik Pekerjaan Utama
    • Grafik Jaminan sosial ketenagakerjaan
    • Grafik Penghasilan setahun terakhir

Kategori Deskripsi Kesehatan

    • Grafik Penyakit yang diderita setahun terakhir
    • Grafik Fasilitas kesehatan didatangi setahun terakhir untuk pengobatan/perawatan
    • Grafik Jaminan sosial Kesehatan
    • Grafik Disabilitas

Kategori Deskripsi Pendidikan

    • Grafik Pendidikan tertinggi yang ditamatkan
    • Grafik Lainnya

Untuk semua report dapat dicetak/diprint langsung dari aplikasi, dan dapat juga di download format excel dan pdf, dapat langsung di copy di aplikasi.

  1. Report data dasar keluarga

Fitur ini untuk menampikan rekapitulasi berbentuk table untuk data dasar keluarga, di dalamnya user dapat melakukan filter data berdasarkan wilayah, dan mendownload data dalam format excel.

  1. Report data anggota keluarga

Fitur ini untuk menampikan rekapitulasi berbentuk table untuk data anggota keluarga, di dalamnya user dapat melakukan filter data berdasarkan wilayah, dan mendownload data dalam format excel.

  1. Dashboard control operator

Fitur ini digunakan admin untuk melakukan control harian pada semua operator saat kegiatan penginputan ke aplikasi dimulai.

  1. CMS sistem

Fitur ini digunakan superadmin untuk manajemen User, manajemen Hak akses, manajemen menu, manajemen aplikasi, manajemen Log user.

Berikut Screenshot dari aplikasi pendataan desa SDGs :

Aplikasi ini masih bisa dikembangkan sesuai kebutuhan desa.
JIKA ANDA BERMINAT UNTUK MENGGUNAKAN APLIKASI PENDATAAN DESA INI, SILAHKAN KONSULTASIKAN DENGAN SAYA ZAI (085220969224)

Solusi Error XAMPP MySQL shutdown unexpectedly

Untuk anda yang mengalamai error seperti ini saat menyalakan service mysql di xampp :

12:57:02 AM  [mysql] 	Status change detected: stopped
12:57:02 AM  [mysql] 	Error: MySQL shutdown unexpectedly.
12:57:02 AM  [mysql] 	This may be due to a blocked port, missing dependencies, 
12:57:02 AM  [mysql] 	improper privileges, a crash, or a shutdown by another method.
12:57:02 AM  [mysql] 	Press the Logs button to view error logs and check
12:57:02 AM  [mysql] 	the Windows Event Viewer for more clues
12:57:02 AM  [mysql] 	If you need more help, copy and post this
12:57:02 AM  [mysql] 	entire log window on the forums

Berikut ini, solusi untuk atas error di atas :

  1. Rename folder c:\xampp\mysql\data menjadi c:\xampp\mysql\data_old (atau bebas mengganti dengan nama lainnya).
  2. Buat folder baru c:\xampp\mysql/data.
  3. Copy semua folder atau file yang ada di mysql\backup ke folder yang baru saja dibuat yaitu mysql\data.
  4. Copy semua folder database yang ada di mysql\data_old ke mysql\data (skip untuk mysqlperformance_schema, dan phpmyadmin folders dari data_old).
  5. Terakhir, copy file ibdata1 dari mysql\data_old dan replace di dalam folder mysql\data.
  6. Start MySQL dari XAMPP control panel.
  7. Selesai.

Aplikasi Buku Tamu notif WA

di awal tahun 2022 saya membuat sebuah aplikasi sederhana, aplikasi ini saya buat bukan orderan dari siapapun, ini karna saya terinspirasi dari beberapa pabrik yang suka saya kunjungi, saya melihat untuk pencatatan tamu masih menggunakan buku tamu manual tulis tangan, dan saya iseng ngobrol dengan pak satpam, tamu yang datang dari buku itu datanya di apakan, ternyata mereka harus merekapnya untuk laporan. padahal di jaman sekarang hal seperti itu bisa dibuatkan aplikasinya agar serba otomatis, jadi sambil isi waktu luang juga saya coba buatkan aplikasi bukutamu yang terintegrasi dengan webcam dan whatsapp.

Konsepnya sederhana tiap tamu yang datang mereka isi form buku tamu di laptop, lalu pejabat yang ditujukan akan menerima notif bahwa ada tamu si A keperluanya apa, dari jam berapa sampai jam berapa, dan jika harus ada approve dari satpam perusahaan petugas satpam tinggal approve saja maka notif wa akan terkirim.

Fiturnya sendiri :
1. Module Form Buku Tamu + webcam
2. Module pengelolaan data tamu + rekap
3. Module pengelolaan data Pegawai
4. Dashboard
5. Konfigurasi pengaturan API WA

Berikut screenshootnya :

Jika ada ide lain untuk mengembangkan aplikasi ini, WA saja ke nomor saya : +6285220969224 (Zai), kalo mu order aplikasi ini juga bisa.

Menghilangkan Public di URL Codeigniter 4

Tutorial ini untuk anda programmer CI 4 yang ingin running project nya di web server Xampp atau lainnya tanpa local server bawaan CI 4 / via php spark, caranya diringkas disini :

Langkah pertama



Buka file App.php di root folder App/Config/App.php

public $baseURL = 'http://localhost:8080/';

rubah menjadi :

public $baseURL = 'http://localhost/nama_project/';


public $uriProtocol = 'REQUEST_URI';

rubah menjadi

public $uriProtocol = 'PATH_INFO';



di folder public Copy file .htaccess dan index.php dan pastekan di luar folder public

lalu di file index.php yang ada di luar folder public :

$pathsConfig = FCPATH . '../app/Config/Paths.php';

rubah menjadi

$pathsConfig = FCPATH . 'app/Config/Paths.php';

lalu di file .htaccess yang ada di luar folder public buat jadi seperti ini :

DirectoryIndex index.php
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
RewriteRule !^(public/|index\.php) [NC,F]

lalu ubah semua load file javascript, css, dan file image atau dok yang ada di template layout menjadi <?= base_url ?>/public/filetujuan.

sudah itu semua tinggal testing apakah project CI 4 kita berhasil di tampilkan atau tidak.

selesai.


Silahkan komen jika ada cara lain yang lebih simple.

Cara install Driver SQL Server di Xampp PHP 8

Untuk menggunakan database SQL server di project PHP kita butuh malakukan konfigurasi driver terlebih dahulu di web server localhost kita, berikut adalah tutorial Cara install Driver SQL Server di Xampp PHP 8,
langkah pertama tentu kita butuh file driver nya terlebih dahulu, dapat langsung download disini
nanti akan terdownload file seperti dibawah ini :

lalu anda klik kanan run as administrator :
lalu pilih browse : ini adalah folder tujuan tempat untuk extract file driver SQL server nya
sehingga jika sudah di extract hasilnya seperti ini :
laptop saya ini windows 10 64 bit dan menggunakan xampp untuk PHP 8, jadi dari gambar di atas saya tandai/block 2 file yang akan saya gunakan , yaitu :
1. php_pdo_sqlsrv_80_ts_x64.dll
2. php_sqlsrv_80_ts_x64.dll


setelah itu buka xampp, klik kanan tombol config yang sejajar dengan apache dan pilih php.ini
atau dapat buka file php.ini di direktori Xampp/php/php.ini

lalu buat baris di jajaran extension seperti ini :

extension=php_pdo_sqlsrv_80_ts_x64.dll
extension=php_sqlsrv_80_ts_x64.dll


dan silahkan save file php.ini, lalu restart apache xampp nya, untuk melakukan pengecekan apakah driver SQL server sudah terinstall di xampp kita, buka browser dan akses URL http://localhost/dashboard/phpinfo.php
lalu lakukan pencarian atau Ctrl+F dengan keyword sqlsrv
jika hasilnya sudah muncul pdo_sqlsrv seperti gambar di bawah, maka installasi berhasil dilakukan.

selanjutnya anda dapat melakukan conection ke SQL server dari projet PHP nya,
selesai.

Cara install codeigniter 4 via composer

kali ini kita akan melakukan install awal framewok codeigniter dengan menggunakan bantuan dari composer, jika masih bingung composer itu apa berikut penjelasanya :

Composer merupakan sebuah program  yang digunakan untuk manajemen dependensi PHP. Jadi, dengan menggunakan Composer dimudahkan dalam hal mendownload library yang dibutuhkan, cukup dengan menggunakan script di terminal, kita dapat mendownload dan meng-update library tersebut. Cukup dengan mengubah isi dari composer.json, jalankan perintah composer update pada command line untuk mengupdate semua library yang terdapat pada project yang sedang kita kembangkan.

Untuk tahap awal kita coba download dan install terlebih dahulu sebuah composer di laptop kita, pastikan laptop kita terhubung ke internet karna installasi dilakukan secara online,
anda dapat download di sini composer : Composer-Setup.exe *link ini dari sumber nya langsung yah.
situs resmi composer ada di : https://getcomposer.org/
jika sudah terdownload Composer-Setup.exe silahkan double click filenya, next next saja sampai finish.

untuk mengetahui composer berhasil terinstal di laptop kita atau tidak silahkan buka terminal / CMD lalu ketikan :
composer -v jika di layar kalian tampil seperti ini artinya composer berhasil terinstall


selanjutnya kita dapat langsung install CI 4 nya, namun sebelum itu perlu diketahui di situs resmi https://codeigniter.com/ untuk Server Requirements katanya ci4 ini dapat berjalan di PHP 7.3 ke atas, jadi pastikan web server/ XAMPP kalian support untuk PHP versi yang dibutuhkan, dan saya sendiri menggunakan xampp di PHP 8

lalu dibutuhkan juga konfigurasi kecil di file php.ini yang ada di xampp untuk extension *intl*  dan *mbstring* pastikan terinstall seperti ini , (cukup buka ; di depan extension )

setelah itu semua dilakukan barulah kita bisa langsung intall CI 4 nya :
informasinya CI 4 ini sudah include local server sendiri jadi lokasi folder project tidak harus ada di dalam htdoct,
misal kita mau install CI 4 ini di directori D: maka pastikan di terminal lokasi kita sudah di D: seperti ini

lalu ketikan composer create-project codeigniter4/appstarter namaproject lalu tekan enter dan tunggu proses installasi berjalan, maka project kita otomatis dibuatkan oleh ci nya di direktori tujuan

jika sudah terinstall, maka project CI4 kita siap develop

Struktur folder CI 4 seperti ini :

untuk menjalankan projcet kita pastikan di terminal kita sudah masuk ke dalam folder project lalu ketikan php spark serve
jika sudah jalan seperti di atas, silahkan masuk ke browser dan akses project kita di http://localhost:8080
maka tampilan CI4 seperti ini di browser

Selesai, terimakasih, sudah mengikuti tulisan ini, selamat ngoding …