cejobelo/hamtaro-starter

Start your Hamtaro application with hamtaro-starter.

v1.2.1 2022-05-14 02:44 UTC

Requires

• cejobelo/hamtaro: ^1
• michelf/php-markdown: ^1.9

MIT

• Phil'dy Jocelyn Belcou

• hamtaro
• hamtaro-starter

README

• About
• Technologies
• Controllers
• Components
• Commands
• Front-end development
• Getting Started

About

Hamtaro is the new web framework for front-end / back-end development using Php and Javascript.
Create your modern and stable web application in a strict, simplified and organized environment.

Do yourself a favor : use Hamtaro 🐹

Technologies

Php | Javascript | Composer | Npm | Node.js | Webpack | Babel | Sass | Twig | Bootstrap | jQuery | Json

Controllers

Ctrl means controller identifier inside your Hamtaro application, it helps to identify the namespace and the filepath of your controller.

• AbstractAjaxRequest is extended by your ajax requests.
• AbstractForm is extended by your forms.
• AbstractModal is extended by your modals.
• AbstractPage is extended by your pages.

All controllers allowed to be loaded must be defined in src/main.php with the controllers property.

Components

Component means graphic item inside your Hamtaro application.

AbstractForm, AbstractModal and AbstractPage extending AbstractComponent, create your own component type doing the same.

A component is composed of 4 files and identified with its Ctrl.

• Ctrl.js - Front-end configuration extending AbstractForm, AbstractModal, AbstractPage or AbstractComponent.

• Ctrl.php - Back-end configuration extending AbstractForm, AbstractModal, AbstractPage or AbstractComponent.

• Ctrl.sass - Component's stylesheet

• Ctrl.twig - Component's view. Pug support is coming.

Hamtaro identifies your components in the DOM with these types of selectors :

• .hamtaro-component[data-ctrl="Header"]
• .hamtaro-form[data-ctrl="Identification/Reset"]
• .hamtaro-modal[data-ctrl="Newsletter"]
• .hamtaro-page[data-ctrl="About"]

Commands

Using composer scripts, improve your workflow and save considerable time during development.

{
    "scripts": {
        "ajax": "Hamtaro\\Command\\CreateAjaxRequest::run",
        "component": "Hamtaro\\Command\\CreateComponent::run",
        "form": "Hamtaro\\Command\\CreateForm::run",
        "modal": "Hamtaro\\Command\\CreateModal::run",
        "page": "Hamtaro\\Command\\CreatePage::run",
        "event": "Hamtaro\\Command\\CreateEvent::run"
    }
}

For example, composer run form Login create your form component to src/Controller/Form/Login.

Front-end development

Use hamtaro.js for your front-end development.

The default webpack configuration supporting the following assets : .js|.sass|.scss|.css

• npm run assets Build your assets public/main.min.js and public/main.min.css.

• npm run assets:dev Your assets are monitored and built dynamically, just write bars and reload your browser to see the changes.

Getting started

Your work environment is already ready.

composer create-project cejobelo/hamtaro-starter my_project && cd my_project && composer install && npm install

Enjoy 🐹