DAF - GetStarted

Intro Download & Install Create your app Run your app Create NiceMsg Add NiceMsg to home Create About Add Route Create Navbar Global Using Summary

Intro

Purpose

Build your first web app with DAF.

Prerequisites

php v8.0 <-> v8.2 and set as environment variable.

Time to Complete

15-20 minutes + download/installation time.

Scenario

Create, use, and modify a

NiceMsg Component
Navbar Component
About Page/Component
Global Using

Let's get started

Download & Install

To start building DAF apps, download daf SDK zip.

Mac Intel Mac Apple silicon Win (64bit)

After downloading, extract the zip file and add the daf app to the environment variables.

Check everything installed correctly

Once you've installed, open a new terminal and run the following command:

Terminal

daf --version

If the installation succeeded, you should see version 1.0.0 or higher outputted:

Terminal

1.0.0

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Create your app

Open a new folder named "HelloWorldApp" where you like.
Open terminal in your folder, run the following command to create your app:

Terminal

daf new

This command creates your new DAF Web App project and places it inside your current location.
also use the folder name as the project name

Take note of the -t flag: it defines the app template.
options: [ empty , basic ], default is basic

creates a new app with:

empty - an empty structure.
basic - base structure for create MVC and API apps.

Take a quick look at the contents of the directory.

Mac

Terminal

Win

Terminal

dir

Several files were created in the directory, to give you a simple DAF app that is ready to run.

index.php is the entry point for the app that starts the server and where you configure the app services, routes and middlewares.
{App Name} is HelloWorldApp it will store the necessary files for the project
- ApplicationEx is the main app class that extends from \DafCore\Application.
- The Views directory contains some example web page and basic components for the app.
public directory: contains all the public assets for your project.
vendor directory: contains all the dependencies for your project.

Take note of the {App Name} directory path as you will use it later in the tutorial.

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Run your app

In your terminal, run the following command:

Terminal

daf watch

The daf watch command will start the app, and then update the app whenever you make code changes. You can stop the app at any time by selecting Ctrl+C.

Wait for the app to display that it's listening on http://localhost: and for the browser to launch at that address.

Once you get to the following page, you have successfully run your first DAF app!

The displayed page is defined by the index.php file located inside the root directory. This is what its contents look like:

PHP

<?php
namespace HelloWorldApp;
require_once 'vendor/autoloader.php';

$app = new ApplicationEx();

$app->Router->Get("/" , "Pages/Home");

$app->Run();

It already contains the code that sets the homepage and displays the text "Hello world!."

The displayed page is defined by this line in the index.php file.
for request with GET method with path / , it will render the {App Name}/Views/Pages/Home.php Component.

PHP

// minimal load
$app->Router->Get("/" , "Pages/Home");
// or minimal load with endpoint before render
$app->Router->Get("/" , fn(IViewManager $vm) => $vm->RenderView("Pages/Home"));
$app->Router->Get("/" , function(IViewManager $vm) {
return $vm->RenderView("Pages/Home");
});
// or load by register a controller.

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Create NiceMsg Component

In your terminal, run the following command:

Terminal

daf g vc Components/NiceMsg

The command will create a new view component file located in {App Name}/Views/Components/NiceMsg.php.

Take note all the views/component need to be under the views root folder.
Take note of the g / generate command: it will generate file base template at provided location.
daf generate {type} {path} [options]

Types:

model | m
class | cl
controller | c
api-controller | ac
class-component | cc
dbset | ds -m|--model {Model Name}

Here is the file content that generated:

PHP

<?php
/** @var DafCore\Component $this */
?>

<h1>Hello From NiceMsg ViewComponent!</h1>

The top 3 lines are just for Component class intellisense.

Now edit the file content to:

PHP

<?php
/** @var DafCore\Component $this */
$msg = $this->RequiredParameter("Text");
?>

<div class="alert alert-success">
<?=$msg?>
</div>

the RequiredParameter("Text") function are make the component to require the "Text" Parameter.

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Update Home Component file located in {App Name}/Views/Pages/Home.php to the following code.

PHP

<?php use HelloWorld\Views\Components; ?>

<h1>Hello World!</h1>

<NiceMsg Text="Hello From DAF Component :-)." />

the use keyword adds the namespace to the components namespaces.

Make sure the file is saved.!!!

This the content you need to see.

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Create About Component

In your terminal, run the following command:

Terminal

daf g vc Pages/About

The command will create a new view component file located in {App Name}/Views/Pages/About.php.

Here is the file content that generated:

PHP

<?php
/** @var DafCore\Component $this */
?>

<h1>Hello From About ViewComponent!</h1>

The top 3 lines are just for Component class intellisense.

Remove the top 3 lines we don't need them yet.

Now the file content need to look like this:

PHP

<h1>Hello From About ViewComponent!</h1>

Make sure the file is saved.!!!

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Add Route

Open the main index.php file and add the following code before $app->Run(); line.

PHP

$app->Router->Get("/About", "Pages/About");

Or

PHP

// minimal load
$app->Router->Get("/About", "Pages/About");
// or minimal load with endpoint before render
$app->Router->Get("/About" , fn(IViewManager $vm) => $vm->RenderView("Pages/About"));
$app->Router->Get("/About" , function(IViewManager $vm) {
return $vm->RenderView("Pages/About");
});

Make sure the file is saved.!!!

Now manually navigate to /About to see the About page.

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Create ,Add Navbar Component

In your terminal, run the following command:

Terminal

daf g vc _Layouts/NavBar

The command will create a new view component file located in {App Name}/Views/_Layouts/NavBar.php.

Edit the file content that generated to this new content:

PHP

<nav>
<a href="/">Home</a>
<a href="/About">About</a>
</nav>

Make sure the file is saved.!!!

Update MainLayout Component file located in {App Name}/Views/_Layouts/MainLayout.php to the following code.

PHP

<?php
use HelloWorld\Views\_Layouts;
/** @var DafCore\Component $this */
?>

<main class="container-md pt-3">
    <Navbar />
    <?= $this->RenderChildContent() ?>
</main>

Make sure the file is saved.!!!

This the content you need to see.

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Global Using

One file to add usage for certain components that need to be available in all your view components.

In your terminal, run the following command:

Terminal

daf g vc _GlobalUsing

The command will create a new view component file located in {App Name}/Views/_GlobalUsing.php.

Update _GlobalUsing Component content to the following code.

PHP

<?php
use HelloWorld\Views\_Layouts;
use HelloWorld\Views\Components;

The * mark is for include all the components in the folder.

Update MainLayout Component content to the following code.

PHP

<main class="container-md pt-3">
    <Navbar />
    <?= $this->RenderChildContent() ?>
</main>

Update Home Component content to the following code.

PHP

<h1>Hello World!</h1>

<NiceMsg Text="Hello From DAF Component :-)." />

If everything looks good, select the Continue button below to go to the next step.

Continue I ran into issue

Summary

Congratulations! You have successfully created your first DAF app.

In this tutorial, you have learned how to:

Install DAF
Create a new DAF app
Create, Add Components
Create, Add Minimal Routes
Hot Reload - daf watch
Run the app