An open API service indexing awesome lists of open source software.

https://github.com/rougin/fortem

Simple form templates in PHP.
https://github.com/rougin/fortem

html-form php-form php-ui-kit

Last synced: 3 days ago
JSON representation

Simple form templates in PHP.

Awesome Lists containing this project

README

          

# Fortem

[![Latest Version on Packagist][ico-version]][link-packagist]
[![Software License][ico-license]][link-license]
[![Build Status][ico-build]][link-build]
[![Coverage Status][ico-coverage]][link-coverage]
[![Total Downloads][ico-downloads]][link-downloads]

A collection of form templates for PHP with full support for [alpinejs](https://alpinejs.dev/) properties.

``` php


= $form->label('Name')->asRequired() ?>
= $form->input('name')->asModel() ?>


= $form->label('Description')->asRequired() ?>
= $form->input('detail')->asModel() ?>


= $form->button('Update')->onClick('update(id)') ?>

```

## Installation

Install the package using [Composer](https://getcomposer.org/):

``` bash
$ composer require rougin/fortem
```

## Basic usage

> [!NOTE]
> All elements below use [Bootstrap](https://getbootstrap.com/) classes by default. Use the `noStyling` method to opt out, or see [Restyling elements](#restyling-elements) to apply a custom CSS framework.

The `FormHelper` class provides an interface for creating labels, inputs, buttons, select dropdowns, and error messages:

``` php
// index.php

use Rougin\Fortem\Helpers\FormHelper;

$form = new FormHelper;

echo $form->label('Name');
```

``` html
Name
```

> [!NOTE]
> See the next sections for the documentation of the abovementioned elements.

The `LinkHelper` class helps in generating and checking URLs to the template:

``` php
use Rougin\Fortem\Helpers\LinkHelper;

$server = array();
$server['HTTP_HOST'] = 'localhost';
$server['REQUEST_URI'] = '/';

$link = new LinkHelper($server);

echo $link; // http://localhost/
```

Use the `isActive` method to check if a given link is the current URL:

``` php
$current = $link->isActive('/'); // true
```

If `HTTP_HOST` is not available, the `setBase` method can be used:

``` php
use Rougin\Fortem\Helpers\LinkHelper;

$data = /** instaceof $_SERVER */;

$link = new LinkHelper($data);

$link->setBase('roug.in')

echo $link; // http://roug.in/
```

## Labels

To create a `` element, the `label` method is used:

``` php
echo $form->label('Name');
```

``` html
Name
```

Additional CSS classes can be appended using `withClass`:

``` php
echo $form->label('Name')->withClass('text-uppercase');
```

``` html
Name
```

To remove the default styling, use the `noStyling` method:

``` php
echo $form->label('Name')->noStyling();
```

``` html
Name
```

A label can also be marked as required, which adds a red asterisk:

``` php
echo $form->label('Name')->asRequired();
```

``` html
Name *
```

## Inputs

To create an `` element, the `input` method is used. By default, it creates a `text` input:

``` php
echo $form->input('name');
```

``` html

```

Additional CSS classes can be appended using `withClass`:

``` php
echo $form->input('name')->withClass('is-invalid');
```

``` html

```

The input type can be changed using the `withType` method or the convenient `asEmail` and `asNumber` methods:

``` php
echo $form->input('email')->asEmail();
```

``` html

```

``` php
echo $form->input('age')->asNumber();
```

``` html

```

## Buttons

To create a `` element, the `button` method is used:

``` php
echo $form->button('Submit');
```

``` html
Submit
```

Additional CSS classes can be appended using `withClass`:

``` php
echo $form->button('Submit')->withClass('btn-primary');
```

``` html
Submit
```

The button type can be changed using the `withType` method:

``` php
echo $form->button('Submit')->withType('submit');
```

``` html
Submit
```

## Select dropdowns

To create a `` element, the `select` method is used:

``` php
$items = array('Male', 'Female');

echo $form->select('gender', $items);
```

``` html

Please select
Male
Female

```

An associative array with `id` and `name` keys can also be provided:

``` php
$items = [ array('id' => 'm', 'name' => 'Male') ];
$items[] = array('id' => 'f', 'name' => 'Female');

echo $form->select('gender', $items);
```

``` html

Please select
Male
Female

```

## Error messages

The `error` method is used to create a placeholder for validation error messages:

``` php
echo $form->error('error.name');
```

``` html

```

> [!NOTE]
> This is only works when integrated in `alpinejs`.

## Using `alpinejs`

`Fortem` provides methods for seamless integration with [alpinejs](https://alpinejs.dev/).

For `Input` and `Select` classes, the `asModel` method adds an `x-model` attribute to the element, binding its value to its variable:

``` php
echo $form->input('name')->asModel();
```

``` html

```

``` php
echo $form->select('gender', $items)->asModel();
```

``` html
...
```

In all elements, the `disablesOn` method adds the `:disabled` attribute, allowing an element to be disabled based on its condition:

``` php
echo $form->input('name')->disablesOn('loading');
```

``` html

```

For the `Button` class, the `onClick` method adds the `@click` attribute to a button, executing its function on click:

``` php
echo $form->button('Submit')->onClick('submitForm');
```

``` html
Submit
```

## Scripts

The `script` method helps create a JavaScript object from PHP which is useful for initializing data for `alpinejs`:

``` php
echo $form->script('data')
->with('name', 'John Doe')
->with('age', 30)
->withLoading()
->withError();
```

``` html

let data = {"name":"John Doe","age":30,"loading":false,"error":{}};

```

## Restyling elements

The default styling uses Bootstrap 5 classes. To use a different CSS framework, implement the `StyleInterface` and pass it to the form helper:

``` php
namespace Rougin\Test\Styles;

use Rougin\Fortem\StyleInterface;

class TailwindStyle implements StyleInterface
{
public function button()
{
return 'rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500';
}

public function error()
{
return 'mt-1 text-sm text-red-600';
}

public function input()
{
return 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm';
}

public function label()
{
return 'block text-sm font-medium leading-6 text-gray-900';
}

public function required()
{
return 'text-red-500';
}

public function select()
{
return 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm';
}
}
```

``` php
use Rougin\Fortem\Helpers\FormHelper;
use Rougin\Test\Styles\TailwindStyle;

$form = new FormHelper;

// Apply the custom style to all elements ---
$form->useStyling(new TailwindStyle);
// ------------------------------------------

// All elements now use the custom style ---
$form->label('Name')->asRequired();
$form->input('name');
$form->button('Submit')->withClass('btn-primary');
$form->select('gender', array('Male', 'Female'));
$form->error('error.name');
// -----------------------------------------

// Opt out the default styling per element ---
$form->input('name')->noStyling();
// -------------------------------------------
```

## Changelog

Please see [CHANGELOG][link-changelog] for recent changes and latest updates.

## Contributing

See [CONTRIBUTING][link-contributing] on how to contribute to the project.

## License

The MIT License (MIT). Please see [LICENSE][link-license] for more information.

[ico-build]: https://img.shields.io/github/actions/workflow/status/rougin/fortem/build.yml?style=flat-square
[ico-coverage]: https://img.shields.io/codecov/c/github/rougin/fortem?style=flat-square
[ico-downloads]: https://img.shields.io/packagist/dt/rougin/fortem.svg?style=flat-square
[ico-license]: https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square
[ico-version]: https://img.shields.io/packagist/v/rougin/fortem.svg?style=flat-square

[link-build]: https://github.com/rougin/fortem/actions
[link-changelog]: https://github.com/rougin/fortem/blob/master/CHANGELOG.md
[link-contributing]: https://github.com/rougin/fortem/blob/master/CONTRIBUTING.md
[link-coverage]: https://app.codecov.io/gh/rougin/fortem
[link-downloads]: https://packagist.org/packages/rougin/fortem
[link-license]: https://github.com/rougin/fortem/blob/master/LICENSE.md
[link-packagist]: https://packagist.org/packages/rougin/fortem