MuhamadFadil/PWA-Dashboard-Template

PWA project with CodeIgniter 4 + Grocery Crud+ Admin LTE in Web Apps

Dashboard Template - PWA-CI4-AdminLTE-GroceryCRUD

CodeIgniter 4 Development

ScreenShoot | Layout

Admin username and password:

• Username: admin@admin.com
• pass: 123456

Output:

Client username and password

• Username: test@client.com
• pass:123456

Output:

Kemudahan yang diberikan

Fitur pada proyek Dashboard Template

• Fitur Progresive Web Apps (PWA)
• Dapat diunduh pada perangkat smartphone (Android dan iOS)
• Mode Offline
• Push Notification
• Sistem caching yang handal
• Aplikasi yang diunduh dapat berjalan seperti aplikasi native

CodeIgniter 4 & AdminLTE 3

Memudahkan anda untuk menggunakan proyek ini, tanpa harus mengintegrasikan kembali AdminLTE pada CodeIgniter 4.

Documentation CI4 | Documentation AdminLTE3

Grocery CRUD versi 2.0.0

Ditambah sudah integrasikan juga Grocery CRUD untuk memudahkan Create Read Update Delete.

Documentation GroceryCRUD

Progresive Web Apps (PWA)

Aplikasi Web sudah dintegrasikan juga dengan teknologi web PWA.

Documentation PWA

Struktur Program

├── admin
│   ├── css
│   ├── framework
│   ├── module
│   ├── starter
│   ├── userguide
|   ├── README.md
|   ├── ...
│   └── workflow.md
├── app
│   ├── Config
│   │   ├── App.php
│   │   ├── Autoload.php
│   │   ├── ...
│   │   ├── GroceryCrud.php
│   │   ├── ...
│   │   ├── Format.php
│   │   ├── Honeypot.php
│   │   ├── ...
│   │   └── View.php
│   ├── Controllers
│   │   ├── BaseController.php
│   │   ├── ...
│   │   └── Home.php
│   ├── Database
│   ├── Libraries
│   │   ├── ...
│   │   ├── GroceryCrud.php
│   │   ├── Image_moo.php
│   │   ├── ...
│   │   └── Template.php
│   ├── Models
│   │   ├── Grocery_crud_model.php
│   │   ├── GroceryCrudModel.php
│   │   ├── PushModel.php
│   │   └── UsersModel.php
│   ├── ThirdParty
│   ├── Views
│   │   ├── errors
│   │   ├── parts
│   │   ├── ...
│   │   └── welcome_message.php
|   ├── .htaccess
|   ├── Common.php
│   └── index.html
├── public
│   ├── assets
│   │   ├── bootstrap
│   │   ├── plugins
│   │   ├── uploads
│   │   ├── ...
│   │   └── yarn.lock
│   ├── grocery-crud
│   │   ├── config
│   │   ├── css
│   │   ├── fonts
│   │   ├── js
│   │   ├── language
│   │   ├── texteditor
│   │   ├── themes
│   │   ├── ...
│   │   └── license-mit.txt
│   ├── images
│   ├── scripts
│   ├── connected.php
│   ├── ...
│   ├── manifest.json
│   ├── pwabuilder-sw.js
│   ├── index.php
│   ├── favicon.ico
│   ├── index.php
│   └── robots.txt
├── systems
├── writable
└── spark

Requirements

• CodeIgniter >= 4.0
• PHP versi >= 7.0
• Grocery CRUD 2.0.0
• XAMPP
• Code Editor (dalam tutorial ini menggunakan Visual Studio Code)

Installing Guide

Link Tutorial Instalilasi

<<<<<<<link: dalam proses pembuatan>>>>>>>>

Unduh File Repositori

1. Mengunduh file repositori

• Unduh secara langsung
  • Unduh file repositori dalam bentuk zip
• Dengan git
  • copy link berikut :

  https://github.com/MuhamadFadil/PWA-Dashboard-Template.git

  • Letakan sesuai dengan repositori yang diinginkan, lebih baik diletakan pada file C:/xampp/htdocs

Siapkan XAMPP & Code Editor

1. Download XAMPP -- Downlod XAMMP
2. Download Visual Studio Code (VS Code) -- Download VS Code

Instalisasi Dashboard Template

1. Extract file zip pada htdocs (pada folder XAMPP)
2. Buat nama folder proyek (pada turioal diberi nama PWADashboard)
3. Buka aplikasi XAMPP, kemudian lakukan konfigurasi berikut

   • Pada config, pilih httpd.conf

   • Ubah isi file

     DocumentRoot "C:/xampp/htdocs"
     <Directory "C:/xampp/htdocs">

     ke

     DocumentRoot "C:/xampp/htdocs/PWADashboard"
     <Directory "C:/xampp/htdocs/PWADashboard">

   • Tentukan port yang diinginkan (secara default port:8080)

   • Kemudian, start pada Apache dan MySQL

4. Jalankan http://localhost:8080/
5. Jalankan kode berikut pada terminal VS code

   php spark serve

Membuat Database

1. Jalankan MySQL admin atau klik http://localhost:8080/phpmyadmin/
2. Buat database baru
3. Beri nama databse (pada tutorial diberi nama pwadashboard_tb)
4. Import data SQL pada folder PWADashboard ke database yang dibuat

Mengatur .env

1. Buka VS Code
2. Buka folder proyek PWADashboard
3. Membuka file .env, kemudian ubah isi file .env

• Environment

CI_ENVIRONMENT = development
#CI_ENVIRONMENT = production

• Base URL Apps

app.baseURL = 'http://localhost:8080/'

• Database

database.default.hostname = localhost
database.default.database = pwadashboard_db
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

4. Melakukan penyesuaian pada file kode yang membutuhkan database, berikut file yang harus disesuaikan dengan databasenya:
   • /public
     • connected.php
   • app/Controller
     • Setting.php
     • Users.php
   • app/Models
     • PushNotif.php
     • UsersModel.php

License

This package is free software distributed under the terms of the MIT license.