Categories
Web Development

Symfony 5+ how to make a form field hidden from display

This is easier than it sounds, but I am writing this in case I need to remember what the answer is.

At first I wasn’t paying attention to all of the many different Symfony form types in this long list.  I totally didn’t see the HiddenType in the list or I didn’t notice it.

I tried to simply add a class using attr in the definition. This kind of worked. It just showed the name of the field in a label, which wouldn’t work for my design and use.

HiddenType works exactly like what I needed.

When building a form in a FormType class you can create hidden fields like this one which hides a nonce for AJAX request validation.

->add('ajaxString', HiddenType::class, [
    'mapped' => false,
    'attr' => ['class' => 'hidden-field', 'value' => $secretString]
])

Always add ‘mapped’ false for any field you want to tell Symfony to ignore, like this field used for processing AJAX requests. $secretString is just a random 32 character string I am storing in a session on the backend and sending with the AJAX request to make sure the request is coming from my app.

Categories
Web Development

How to change the id for a form input in Symfony 5+

If you create your forms with classes in Symfony 5+ then changing the ID of the form fields is something you are not allowed to do apparently. LOL You can add/change the class and other attributes but not the id. For some reason Symfony ONLY lets you change the id inside the template. I don’t know why.

Yes I am serious

To start with what got me even interested in trying to use attr and row_attr is when I was messing around with some of my forms, I was copying and pasting and moving parts in the template. This lead to issues as I would miss pieces or get things wrong some how. So I started trying to do the whole thing inside the FormType definition class using the methods below.

It has been pointed out that some feel it is better to define class, id etc. in the template. But as I pointed out above, I had issues with that. So below is what I found.

What doesn’t work

If you are like me then you have probably tried changing the ID by using the attr or row_attr attributes of the Type right? That seems logical right?

These two methods  are not even consistent. First off row_attr only accepts some attributes, which ones I have no idea, it ignores placeholder and id apparently. So then I tried attr, it works with placeholder but ignores ID.

Makes sense right?

It sure would be nice if those didn’t ignore the values you sent to them wouldn’t it. This problem is nearly 10 years old. Later I may look over the code update it and do a PR.

If you are like me you are using Javascript to read hidden fields from the form for various reasons. Otherwise the standard naming of ID’s works flawlessly. I had not discovered this until I had this unique use case.

What does work

So it appears the only way to do this is inconsistentYou have to do it in the form rendering code inside the template. Like this

{{ form_row(registrationForm.ajaxString, { 'id': 'ajaxString'}) }}

You can also change/add other attributes this way, but you can ONLY CHANGE THE ID THIS WAY.

Otherwise Symfony takes it upon itself to name the field for you and ignore your request.

Dictating like…

It would be much easier and consistent if I could just add the ID in the FormType definition class instead of having to add it to the template. Class and other attributes can be added/changed like this, but not id. Just a little confusing that is all.

Categories
Software Development Web Development

Symfony 5+ Twig templates don’t forget to call the parent

Twig templates use inheritance and allows you to create named sections like this.


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel='icon' href="{{ asset('images/favicon.ico') }}" type='image/x-icon' >
    {% block head_extra %}{% endblock %}
    <title>{% block title %}{{ title }}{% endblock %}</title>
    {% block stylesheets %}
        {# 'app' must match the first argument to addEntry() in webpack.config.js #}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>
<body>

<main>
    <div class="container">
       {% block navbar %}{{ include('_nav_bar.html.twig') }}{% endblock %}
        {% block body %}{% endblock %}
        {% block javascripts %}
            {# these files are needed for getting url routes in javascript  #}
            <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
            <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}

        {% block javascript_extra %}{% endblock %}
    </div>
</main>
</body>
</html>

And then you can reuse/inherit this template in another template like this.

{% extends 'base.html.twig' %}
{% block title %}Register{% endblock %}

{% block stylesheets %}
{{ parent() }}

{% endblock %}
{% block body %}

{{ form_start(registrationForm) }}
{{ form_errors(registrationForm) }}
{{ form_row(registrationForm.email) }}
{{ form_row(registrationForm.emailMatch) }}
{{ form_row(registrationForm.plainPassword) }}
{{ form_row(registrationForm.passwordMatch) }}
{{ form_row(registrationForm.userAlias) }}
{{ form_row(registrationForm.agreeTerms) }}

{{ form_end(registrationForm) }}

{% endblock %}
{% block javascript_extra %}

{{ encore_entry_script_tags('registration') }}

{% endblock %}

Notice the extends keyword and notice this section

{% block stylesheets %}
{{ parent() }}

{% endblock %}

Notice the use of the “parent” keyword here.

{% block stylesheets %} {{ parent() }} {% endblock %}

Any other css code you want included must come after the parent call like this.


{% block stylesheets %}
    {# 'app' must match the first argument to addEntry() in webpack.config.js #}
    {{ parent() }}
    {{ encore_entry_link_tags('editAboutUser') }}
    {{ encore_entry_link_tags('sogiDraw') }}
{% endblock %}

If I didn’t call “parent()” above then only the CSs for editAboutUser and sogiDraw would be included app would not be included. The CSS for app which is called in the base template in the stylesheets section would not be included without the call to parent().

So if some of your CSS is not working, then the reason is you probably forgot to call parent. This call to parent is saying “Include what was in the parent stylesheet section”. Otherwise without the call you will be missing Styles and be saying WTF?

Don’t forget to call parent
Categories
Web Development

Symfony 5+ how to include page specific javascript or css when using Webpack encore and SASS

In this article I will cover how to do this with Webpack in Symfony with CSS and SASS. This is slightly confusing.

Symfony has it’s own Webpack configuration called encore. Read that documentation article if you need more info, more links at the bottom of the page.

Webpack Config

First lets checkout the file app\webpack.config.js

Mine currently looks like this.


const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.scss) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    .addEntry('modalAction', './assets/js/modal-call-to-action.js')
    .addEntry('registration', './assets/js/registration.js')
    .addEntry('featuredImage','./assets/js/featured-image.js')
    .addEntry('editAboutUser','./assets/js/edit-about-user.js')
    .addEntry('sogiDraw', './assets/js/sogi-draw.js')
    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

See each of the addEntry() lines. Each one of those is including  the processing of the Javascript files. If you need some CSS for example on every page you would put a line like the following inside the app.js file at the top to import the CSS.

import {DrawingForm} from "../javascript/templates/drawing-form";
import {DrawingActions} from "../javascript/objects/DrawingActions";
import '/assets/css/dialog/styles.scss';

In the last line here I am including styles.scss with an import statement. The .scss indicates the file is a SASS file.

This mixing of JS and CSS imports gets to be REALLY confusing. You see just importing the CSS into the Javascript is not enough. Nope you must also include the CSS and the Matching Javascript files with tags.

If you just link to the Javascript that is not enough and you will see your JS elements don’t have any related CSS. Importing the CSS just tells Webpack to process it and create another file.

homer simpson meme
Many baby steps to get to your CSS

So the import statement inside the Javascript file for the .scss file tells webpack to take that import along with any other .scss imports it finds and combine them all into one .css file. If there are no .scss inports there will be no matching .css file created.

All of this is supposed to make web development easier.

Modern web development keeps getting easier by the day
Look at the SASS files

Now lets look inside the styles.css really quick to see what it is doing.

@import 'variables';
@import 'dialog-search-form';
//@import 'grids';
@import 'forms';
@import 'overlay';
@import 'dialog';
@import 'canvas-color-picker';
@import 'editor-canvas';
@import 'image-selector';

.content {
    margin: 55px auto 0 auto;
    background-color: #fff;
    width: 95%;
    height: auto;
}
.hidden {
    display: none;
}

.clear-fix:after {
    content: "";
    display: table;
    clear: both;
}

#drawingCanvas{
    background-color: #fff;

}
.canvas-border, #drawingCanvas {
    border: 2px solid #000;
    margin: 0px auto;
    display: block;
}
.center-image {
    text-align: center;
    margin: 0px auto;
}

Notice all of the import statements. This is because I am using SASS. Each of those files contains a small amount of SCSS and Webpack uses SASS to compile it all into a  single file in the end. The import statement lets Webpack do tree shaking and remove unused code.

borat nice meme
Very nice!!!

So to include a page specific CSS you should create a javascript file inside any folder, this is what gets confusing.( you can use an existing JS file) I keep mine in assets\css\ sometimes in further folders like Dialog or Overlay etc. Then inside that file you import the CSS file like this

import ‘/assets/css/dialog/styles.scss’;

replacing styles.scss with your stylesheet or SASS file name.

But that is not all. You still need to include the final css file that webpack creates and saves in public\build\ folder in your template.

If you imported anything in the .scss file webpack compiles it and includes it in the matching .css file. Webpack will create a matching JS and CSS file based on your addEntry() method calls and store them in the build folder.

So you never make changes, EVER to the files in public\build you store all of your files in the assets folder and add an entryPoint definition in the Webpack Encore file.

So to get your CSS working, (actually included in the page) you need to add a line like this in the template. In your templates head section add  a line to include the CSS file like this.

{{ encore_entry_link_tags('styles') }}

That line is in my base.html.twig file which is the main page template that all of my other page templates inherit from.  So public\build\app.css will be available to every page in my app. Notice it does not include the file type. Twig template knows what to do since encore_entry_link_tags is a twig function.

Page specific CSS only.

So to summarize. If you wanted a CSS file included in only one page of your app, you would do the following. This is a dialog I want to include in only one page of my application.

Step #1 create the css

Create a css file in app\assets\css\dialog\dialog.scss directory for example. In my case I will be using SASS so I will create app\assets\css\dialog\dialog.scss Inside there I import the other tiny SASS .scss files I need.

Step #2 create the javascript

Create a Javascript file or import the css in an existing Javascript file. This is just how Webpack works, you need to include your CSS in your JS files and it does everything else (tree shaking), at least for now. So I create the Javascript file app\assets\js\dialog.js Inside that file I import the css like this

import '/assets/css/dialog/dialog.scss';

Now with this in place, Webpack will compile both the css and the javascript from that file and save it in app\public\build\dialog.css and app\public\build\dialog.js These are the files we must include with template specific functions, not the .scss files. (show below) Webpack will take all .scss import calls and do tree shaking to only include the code that is used.

Step #3 register the Entry point

Now you must register dialog.js (whatever your Javascript file name is) inside the webpack.encore.js file shown above add a line like this.

.addEntry('my-page', './assets/js/dialog.js')

Now restart webpack. In my case I am running webpack with watch so I use the following after I ctrl + c to stop the current watch

yarn run encore dev --watch

Webpack Encore will now create the new Javascript and CSS imported in it to the matching file names inside the public\build\ directory.

Now you must include both the Javascript and the CSS files. This is what tripped me up. I was like WTF why is the related CSS not working but the javascript is?

Uhm, wait… what?

Step #4 include the CSS file

So this is one of the most important steps. You have to include the CSS file located in the public\build\ directory, in the head area of your Twig template like this.

{{ encore_entry_link_tags('dialog') }}

Notice there is no .css it is just the name of the file. also note encore_entry_link_tags is used for the CSS only and javascript has it’s own function covered next. This CSS file was created by Webpack thanks to it being imported in dialog.js. The addEntry() function will create the Javascript file plus a CSS file for each import statement it finds. It stores all the imported scss in a single file that matches the javscript file name but with .css tile type.

Step #5 include the Javascript

Now you must include the matching Javascript that uses the imported CSS file. This is the Javascript Webpack Encore created due to the addEntry() line in the Webpack configuration above.

{{ encore_entry_script_tags('dialog') }}

This should be placed in the section where you include all of your Javascripts, mine are included before the closing body tag. Notice this looks exactly the same as including the CSS, except for the function name is now encore_entry_script_tags

I only have a few page specific Javascripts.  Which is why I can never remember this process.

Next up “Don’t forget to call your templates parent” More fun I discovered while using Twig templates.

Links

Learn how to activate SASS in Symfony webpack encore.

Managing CSS and Javascript from Symfony Documentation.

How to activate CSS preprocessors in Symfony documentation.

Categories
Web Development

How to make AJAX requests to Symfony 5+ controllers

I couldn’t find anything in the documentation about this and there is little on the internet about it too.  There is probably a Bundle somewhere for this or some Symfony way, but I didn’t find anything.

I did find this SymfonyCast about submitting a whole form. If you need to test your Controller route read this. If you want to know more read this in the docs about Browserkit.

But what if you need to just send a simple AJAX request to a controller route? Well that is what this is about. This is very basic, there are settings you can add to the request for mime type for example and more.

How to send a simple AJAX request?

First you need the javascript to make a request to your controller endpoint. To do this you will need access to your routes, in your javascript. Read my article How to get URL Routes in your Javascript in Symfony 5+   to find out how.

Once you have your routing setup and you understand how that works you need to build your AJAX request. I use a custom class I built called EzAjax.js which is a wrapper around the jquery ajax function shown below.

The AJAX solution
import {Utils} from "./Utils";

class EZAjax {
    /**
     *
     * @param errorCallback
     * @param successCallback
     * @param requestUrl
     * @param data
     * @param ajaxOptions
     */
    constructor(errorCallback, successCallback, requestUrl, data, ajaxOptions = {}) {

        this.ajaxObj = null;
        this.ajaxOptionsObj = ajaxOptions;
        this.attempts = 0;
        this.delay = 300;
        this.errorCallback = errorCallback;
        this.successCallback = successCallback;
        //add the settings to the ajaxOptions
        this.ajaxOptionsObj.url = requestUrl;
        this.ajaxOptionsObj.data = data;
        this.ajaxOptionsObj.error = this.ajaxError.bind(this);
        this.ajaxOptionsObj.success = this.ajaxSuccess.bind(this);

    }

    ajaxError(jqXHR, errorString, errorThrown) {
        console.log('error string ' + errorString + ' error thrown ' + errorThrown);
        if (this.attempts <= 3) {
            console.log('attempts is ' + this.attempts + ' delay ' + this.delay);
            setTimeout(() => {
                this.performRequest();
            }, this.delay *= 2);
        } else {
            this.errorCallback(jqXHR, errorString, errorThrown);
        }
    }

    ajaxSuccess(response) {
        this.successCallback(response);
    }

    performRequest() {

        this.attempts++;
        console.log('performing request ' + this.attempts);
        //prevent multiple requests
        if (this.ajaxObj) {
            this.ajaxObj.abort();
        }
        console.log('the ajax options ' + JSON.stringify(this.ajaxOptionsObj));
        this.ajaxObj = $.ajax(this.ajaxOptionsObj);
    }

}

export {EZAjax};

This makes it easier to work with. I just create a simple fail and success function and pass the names in like this.

let ezAjax = new EZAjax(emailExistsError, emailExistsSuccess, checkEmailUrl, data);
ezAjax.performRequest();
Testing inside Javascript

The below code goes inside a class you place inside app\assets\javascript\ directory I called mine registration.js  Below is a snippet of the code for checking if the email exists.


//code for comparing email fields before submit and make sure the email doesn't exist
$(emailMatchField).focusout(function (event) {
    let email = $(emailField).val();
    let emailConfirm = $(emailMatchField).val();

    if (email !== emailConfirm) {

        $('#noEmailMatch').remove();
        $(emailMatchField).css('background-color', redBgColor);
        let matchHtml = '<small id=' + emailMatchErrorId + '" class="red-text" >Email fields must match</small>';
        $(emailMatchField).after(matchHtml);

    }
  if (email === emailConfirm) {
        let data = {"email" : email};
        // if the email fields match make sure the email does not exist in the system
        let checkEmailUrl = Routing.generate( 'email_exists');
        let ezAjax = new EZAjax(emailExistsError, emailExistsSuccess, checkEmailUrl, data);
        console.log('the route is ' + checkEmailUrl);
        ezAjax.performRequest();
        $('#noEmailMatch').remove();
        $(emailMatchField).css('background-color', whiteBgColor);
    }
});

The first if statement checks if the fields match if not it shows an error. The second if statement checks if the email exists only if both fields match first.

The emailExistsError function will open a dialog to inform the user the email they entered exists and give them a login link instead. emailExistsSuccess does nothing I could just put function() in it’s place if I wanted.

Notice this line though

let data = {"email" : email};

That is the data we send via the EzAJAX class. That is the value we need in the controller.

The Symfony controller

Now we need to be able to work with the values sent in the request.

public function checkEmailExists(Request $request)
{
    $json = array();

    if ($request->isXmlHttpRequest()) {
        //check if the email exists
        $email = $request->query->get('email');
        $email = DataSanitizer::sanitizeEmail($email);
        $exists = $this->getDoctrine()->getRepository(User::class)->checkEmailExists($email);
        if($exists){
            $loginUrl = $this->generateUrl('app_login');
            $linkAttr = array(
                AnchorTagAttributes::HREF_ATTRIBUTE => $loginUrl,
                GlobalHtmlAttributes::CLASS_ATTRIBUTE => 'h5'
            );
            $loginLink = AnchorTag::getAnchorTag('login', $linkAttr);
            $json['error'] = "A user with this email exists. Please $loginLink instead. Or use another email.";
        }
    } else {
        $json['error'] = $this->illegalRequest;
    }
    return new JsonResponse($json);
}

To get the value sent via AJAX in the controller I use:

$email = $request->query->get(’email’);

Which matches the value I sent in the data JSON object to this controller.

As you can see in the javascript I am passing a value for email and in the controller I am fetching that value. I didn’t add any mime type info to the request, so the default for jquery ajax is 'application/x-www-form-urlencoded; charset=UTF-8'. To change the MIME type set the contentType on the ajax method.

Also note that this way of working with an Ajax request in the controller is not secured. Anyone from any IP can send a request to this, which can flood the server or allow them access to things they shouldn’t be allowed to access.

Soon I will dig into how to best secure the Symfony Contoller routes and write an article about that.

Categories
rants

Why Amazon search sucks and how it can be fixed

A while back Amazon search used to work really well. But now it sucks. Why? Well a video is worth more than 1,000,000 words.

First off note the difference in result count, 658 vs 3000  when I choose to sort by price low to high. It seems like 3000 is a hard coded random number not an actual real result.

You will never ever be able to view 3,000 products, this search is FAKE.

Also notice once I switch to lowest to highest, all of the  sellers with their unrelated garbage pops up. So now you get page after page after page of non-relevant garbage results.

awesome sauce meme
Isn’t this just awesome

So if you don’t filter you get pages of randomly priced items. That is never helpful to me on any site EVER. That pretends like the price doesn’t matter. How can anyone find what they are looking for if they don’t compare prices? As prices go up, objects often get more features. Plus what kind of sense does it make to have $38 next to or after $299 or vice versa?

And WTF is with letting all the unrelated items that have nothing to do with dehumidifiers? Do you really think I am looking for shirts and plugs and random crap when I type “dehumidifier”?

amazon search meme
Amazons search algorithm is all like

And don’t you just love how it stops at page 7? THAT IS 100% TOTALLY AWESOME PROGRAMMING THERE AMAZON. So now you get less results than if you didn’t filter, and the results you get are 100% UTTER SHIT. Hell even if you don’t choose any of the filters, you get 7 pages of results. THAT IS IT. WTF? WOW REALLY GUYS?

Searching on Amazon is fun
How to fix this

I have no idea how Amazon is designed. It is probably a technological mess of one piece added onto another in a patch quilt type manner. Their programmers are not that great. Any developer that tries AWS services will tell you working with that mess is a nightmare. You get moronic error messages and much more. High school kids could do better at this point.

It would be nice though if they could get these features working, since they have no real competition. I mean more than 7 pages of search results would be nice. Why show 3k search results but only allow pagination of 7 pages for a total of less than 400 products?

Makes sense right?

 

Categories
Software Development

How to list all stopped and running Docker containers

I often need to do this but forget exactly how to do this. I don’t know if this has changed. I could swear it has changed.

You will probably find crap all over the internet telling you to use

docker ps

But that only lists running containers. Same story for

docker container ls

So how do you get docker to list all the damn containers?

docker ps -a
homer simpson meme
You got to strangle docker for the truth about containers
Categories
Web Development

How to add placeholder text to a Symfony 5+ form row

If you are using the Symfony forms system, which I assume you are if you are here, then this post is for you. Otherwise you figure it out. LOL

you need to figure it out meme
This is only for symfony forms otherwise…

There is more than one way to do this. However, I am going to show the way I prefer and that is right in the form type definition class.

When you build a form by way of creating a form type class, then it is easy to set all of the options and values you need in one location..

By looking at the documentation one would think the following would work for the HTML placeholder attribute


->add('userAlias', TextType::class, [
            'mapped' => false,
            'constraints' => new Length([
                'min' => 2,
                // max length allowed by Symfony for security reasons
                'max' => $userAliasObj->getColumnLength(UserAliasTable::ALIAS)
            ]),
            'row_attr' => ['placeholder' => $this->aliasPlaceholder]
        ])

BUT …. SURPRISE IT DOESN’T WORK. Why? Who knows? Docs need updating, something changed? We might never know.

It even says the following in the docs for row_attr

An associative array of the HTML attributes added to the element which is used to render the form type row:

Uhm, wait… what?

I am guessing all of the other HTML attributes will work with row_attr? Maybe they do not consider the placeholder attribute as an attribute?

 

However, I did discover that plain “attr” works with the placeholder attribute like so.


->add('userAlias', TextType::class, [
            'mapped' => false,
            'constraints' => new Length([
                'min' => 2,
                // max length allowed by Symfony for security reasons
                'max' => $userAliasObj->getColumnLength(UserAliasTable::ALIAS)
            ]),
            'attr' => ['placeholder' => $this->aliasPlaceholder]
        ])

The docs say the following about attr

If you want to add extra attributes to an HTML field representation you can use the attr option. It’s an associative array with HTML attributes as keys. This can be useful when you need to set a custom class for some widget:

Dear Symfony, placeholder is not an extra attribute it is a valid html attribute.

symfony meme
Say what?

Keeping things together

better together meme
Keeping your form pieces together is better later.

Keeping all of the form related stuff in one location makes it easier to find and make changes. Some people may argue that you should do this in the template so that non programmers can make changes. I argue if you can learn HTML you can learn to read the docs and articles like this and figure it out. LOL

The interesting thing is the field definitions in your FormType class do not have to be in the order you want them displayed in the browser. This is actually done in the template. This makes it easy to move the small pieces around by copy and paste and it means you get much fewer html bugs. That is another reason I argue if you hire someone who knows only html they should learn this simple system.

My FormType definition for the registration form, for my app contains quite a few fields. However, I can quickly redesign it with confidence by moving a line or two of code instead of hundreds of lines.


{{ form_row(registrationForm.userAlias) }}
        {{ form_start(registrationForm) }}
        {{ form_errors(registrationForm) }}
        {{ form_row(registrationForm.email) }}
        {{ form_row(registrationForm.emailMatch) }}
        {{ form_row(registrationForm.plainPassword) }}
        {{ form_row(registrationForm.passwordMatch) }}
        {{ form_row(registrationForm.agreeTerms) }}

See how making changes to the forms layout is super easy this way.

symfony forms meme
Symfony forms made easy.
Categories
Web Development

How to access Doctrine in Symfony 5+ services

Scroll down to the answer part if you just want the answer.

From what I can tell the Symfony documentation only shows how to access doctrine in your controllers( I am sure it is somewhere). But what if you need to access it in a service?

Services are any class within a folder inside the src folder, Repository folder for example. In Symfony 5+ every folder within src directory is considered a service folder, meaning the classes inside are services.

My current app has a very complex registration system and other forms. Not all of the fields are saved, and some go to different tables after processes are applied. For example the user alias is turned into a URL safe string to be used as their profile page.

So I started with all of the code I needed directly in the controller method, but that was a few hundred lines. Usually when I have a complex form that needs specific processing I create a processing class and save it in a folder called FormProcessors. Much of this same code can later be used with RabbitMq for example.

Inside the form processors I have public and private methods. I call the public methods from the controller methods to process the forms. You could split the code up within your controller class using private methods. I do that sometimes as I am building the form, I then move it to the form processors.

One added benefit of using the form processors is the logic can be copied over to new classes used with something like RabbitMQ when I move to an Event based system or microservices etc.

So I needed to figure out how to get to the dang doctrine orm inside my form processors, which is a service.

The answer

The answer is to type hint your Service class constructors with EntityManagerInterface like this(there are probably other ways too)

class RegistrationProcessor
{
    private Form $form;
    private array $errors;
    private array $filtered;
    private EntityManagerInterface $entityManager;
    private MysqlConnection $mysqlConnection;
    private UserPasswordEncoderInterface $passwordEncoder;

    public function __construct( EntityManagerInterface $entityManager,
                                 MysqlConnection $mysqlConnection,
                                 UserPasswordEncoderInterface $passwordEncoder,
                                 Form $form)
    {
        $this->entityManager = $entityManager;
        $this->form = $form;
        $this->filtered = array();
        $this->errors = array();
        $this->mysqlConnection = $mysqlConnection;
        $this->passwordEncoder = $passwordEncoder;
    }

Then to use it, you do this where you need it.

public function saveUserAlias( User $user, string $alias, DateTimeInterface $dateTimeObject){
       $userAlias = new UserAlias();
       $userAlias->setUser($user);
       $userAlias->setAlias($alias);
       $userAlias->setDatetimeAdded($dateTimeObject);
       $this->entityManager->persist($userAlias);
       $this->entityManager->flush();
   }

Notice it is as simple as two calls to entityManager. You don’t have to even get the Repository. However you may get an error if you do not have your Repositories defined in your entities.

 

Categories
Software Development Web Development

How to create 100+ Symfony 5+ Doctrine 2 or 3 Repositories

Scroll to the bottom to view a video of this Repository maker in action. I make about 100 Repositories in less than 2 minutes. You can go faster by just hitting enter really fast. LOL

So you need to make a lot of basic Doctrine repositories for your Symfony 5 app? I needed to do the same thing. That is why I created a Doctrine Repository maker for Symfony 5+ or any version that contains the Maker Bundle and uses the src/Repository and src/Entity directory structure.

What happened is I was not very familiar with Doctrine and EXACTLY how it wants entities to be structured. And figuring out the EXACT Syntax this ORM requires was a major pain.

I knew exactly how to design a database. But I didn’t feel like wasting time to learn everything about Doctrine ORM just to be able to make queries and use migrations.

Honestly I am not a big fan or ORMs because all of them are specific and take time to learn. I’ve spent over a decade with SQL thank you very much. Plus I code in so many languages, I don’t have time to learn everything about every ORM… and that is why SQL was invented.

too many words meme
Not enough time to read it all.

So I have this seriously complex app I am building. It needs several hundred tables. I had well over 100 tables already created via MySQL Workbench. I love workbench because it is a nice UI that makes creating tables and making changes super fast and easy. Much faster than typing all of that mess into an Entity directly.

So what I did is I used Doctrine to reverse engineer my database and create the mapping to the Entity Annotations. That was a pain, but still faster than learning EVERYTHING about Doctrine and typing all that stuff in.

too fast meme
As a lazy programmer I like to go fast. LOL

The main problems with reverse engineering with  Doctrine is it doesn’t create the repositories for the entities. And in order to use Doctrine with Symfony you need a Repository for each Entity, especially if you need custom queries/methods.

Another issue I had is if you do reverse engineer your database like this and you do create the repositories, you must then go into each Entity and add the Repository imports.

In order to create the Repositories for my new Entities, I created a maker. The maker gets a list of all of the Entities and existing Repositories. It then loops through each of the Entities that does not have a Repository and asks you if you would like to create one.

If you go with the naming path of the Repository maker it can overwrite files so be careful.

I also created an Entity clone maker, which I’ll talk about and share soon. Many of my Database tables were very similar, so I created an Entity cloner which can be used with Doctrine migrations and the Repository Maker to quickly finish building my app.

The Entity cloner also loops through entities and asks if you want to clone it. Very helpful.

wow dog meme
Entity Cloner is very helpful too…

Repository Maker in action

 

See also Why I hate ORM’s