Question 382492 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – what additions should be made to this text file with helpful symfony husky

Symfony Installation:

Created a Symfony project using Composer with the symfony/skeleton package.
Added the webapp package using Composer.



composer create-project symfony/skeleton:"7.0.*" symfony_test_app
composer require webapp

Database Setup:

Configured the database URL with credentials.
Created the database schema using Symfony's Doctrine commands.

DATABASE_URL="mysql://username:password@host:port/database_name?serverVersion=10.4.28-MariaDB&charset=utf8mb4"
php ./bin/console doctrine:database:create
php bin/console doctrine:schema:update –force

Symfony Packages Installation:

Installed essential Symfony packages like symfony/orm-pack, symfony/form, symfony/maker-bundle, and symfony/framework-bundle.
Generated migrations, entities, forms, user authentication, etc., using Symfony's console commands.

composer require symfony/orm-pack
composer require symfony/form
composer require symfony/maker-bundle --dev
composer require symfony/framework-bundle
php bin/console make:migration
php bin/console make:entity
php bin/console make:form PersonType Person
php bin/console make:user
php bin/console make:auth

Front-end Dependencies:

Included Bootstrap and jQuery CDN links for styling and client-side scripting.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Front-end Script:

Added JavaScript code to filter items based on categories using Bootstrap's button groups.

<script>
    $(document).ready(function(){
        $(".filter-button").click(function(){
            var value = $(this).attr('data-filter');

            if(value === "all") {
                $('.filter').show('1000');
            } else {
                $(".filter").not('.'+value).hide('slow');
                $('.filter').filter('.'+value).show('slow');
            }

            $(".filter-button").removeClass("active");
            $(this).addClass("active");
        });
    });
</script>

Symfony Controller:

Created a Symfony controller named RegistrierungController for handling user registration.
Defined a route /registrierung for accessing the registration form.

<?php

namespace AppController;

use AppEntityUser;
use DoctrineORMEntityManagerInterface;
use SymfonyComponentFormExtensionCoreTypePasswordType;
use SymfonyComponentFormExtensionCoreTypeRepeatedType;
use SymfonyComponentFormExtensionCoreTypeSubmitType;
use SymfonyComponentFormExtensionCoreTypeTextType;
use SymfonyComponentHttpFoundationRequest;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentPasswordHasherHasherUserPasswordHasherInterface;
use SymfonyComponentRoutingAnnotationRoute;

class RegistrierungController extends AbstractController
{
    #[Route('/registrierung', name: 'app_registrierung')]
    public function reg(Request $request, EntityManagerInterface $entityManager, UserPasswordHasherInterface $passwordHasher): Response
    {
        // Form handling logic here...
    }
}

Twig Template:

Utilized Twig templating engine to render the registration form.
Extended the base template to maintain consistency across pages.
Rendered the registration form using Symfony's form rendering functions.

twig

{% extends 'base.html.twig' %}

{% block title %}Hello RegistrierungController!{% endblock %}

{% block body %}

<h1>RegistrierungController</h1>

{{ form_start(regform) }}
{{ form_widget(regform) }}
{{ form_end(regform) }}

{% endblock %}

Front-end Component:

Implemented a carousel component using Bootstrap's Carousel to display car details.
Dynamically populated car details using Twig's loop syntax.
Linked each carousel item to a detailed view page using Symfony's routing system.

<section>
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000">
        <div class="carousel-inner">
            {% for car in cars %}
                <div class="carousel-item {% if loop.first %}active{% endif %}">
                    <h2>{{ car.getModel() }}</h2>
                    <img class="carousel-image" src="{{ asset('images/' ~ car.getImage()) }}" alt="{{ car.getBrand() }}">
                    <br>
                    <a class="details-button" href="{{ path('car_details', {'id': car.getId()}) }}">Click here for more details</a>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

This setup provides a comprehensive guide for setting up a Symfony application with user registration and front-end components like filtering buttons and carousels for displaying data.

Tags:

4

Answers


  1. 0 
    here would be the register controller logic

<?php

namespace AppController;

use AppEntityUser;
use DoctrineORMEntityManagerInterface;
use SymfonyComponentFormExtensionCoreTypePasswordType;
use SymfonyComponentFormExtensionCoreTypeRepeatedType;
use SymfonyComponentFormExtensionCoreTypeSubmitType;
use SymfonyComponentFormExtensionCoreTypeTextType;
use SymfonyComponentHttpFoundationRequest;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentPasswordHasherHasherUserPasswordHasherInterface;
use SymfonyComponentRoutingAttributeRoute;

class RegistrierungController extends AbstractController
{
    #[Route('/registrierung', name: 'app_registrierung')]
    public function reg(Request $request, EntityManagerInterface $entityManager, UserPasswordHasherInterface $passwordHasher): Response
    {

        $regform = $this->createFormBuilder()
            ->add('username', TextType::class, ['label' => 'Mitarbeiter'])
            ->add('password', RepeatedType::class, [
                'type' => PasswordType::class,
                'required'=> true,
                'first_options' => ['label' => 'Passwort'],
                'second_options' => ['label'=> 'Passwort wiederholen']
            ])
            ->add('registrieren', SubmitType::class)
            ->getForm();

        $regform->handleRequest($request);

        //wurde der Submit-Button gedrückt!
        if($regform->isSubmitted() && $regform->isValid()){
            $eingabe  = $regform->getData();
            dump($eingabe);

            $user = new User();
            $user->setUsername(($eingabe['username']));
            $user->setPassword($passwordHasher->hashPassword($user, $eingabe['password']));

            $entityManager->persist($user);
            $entityManager->flush();

            return $this->redirect($this->generateUrl('car_home'));
        }


        return $this->render('registrierung/index.html.twig', [
            'regform' => $regform->createView(),
        ]);
    }
}
    Login or Signup to reply.
  2. 0

    Dropdown

    Action
    Another action

    Something else here

    Login or Signup to reply.
  3. 0

    How to make the pictures displayed:

    Im Type --> bei bild -->  
, FileType:class, ['mapped' => false])

Controller --> 
$bild = $request->files->get('car')['bild'];
        if ($bild) {
            $dateiname = md5(uniqid()) . '.' . $bild->guessClientExtension();
        }
        $bild->move(
            $this->getParameter('bilder_ordner'), $dateiname
        );
        $car->setBild($dateiname);


services.yaml -->
parameters:
    bilder_ordner: '%kernel.project_dir%/public/bilder/'

    Something more for the register controller:
    In der index.html.twig
    delete the stuff in the div and add the following:

    <h2>Regestrierung</h2>

{{ form(regform) }}

    Jetzt einen beliebigen User erstellen und sehen, ob er in der DB gespeichert wird

    In CustemAuthenticator
    In the Function: onAuthenticationSuccess
    The Row with „throw“ comment out and in the following to paste:

    return new RedirectResponse($this->urlGenerator->generate('gericht.index'));

    security.yaml
    In the file “config/packages/security.yaml” the folliwing to paste in:
    At the subpoint „firewall“:

    logout:
    path: app_logout
    target: app_login

    And at the extra subpoint

    access_control:
    - { path: ^/login, roles: PUBLIC_ACCESS }
    - { path: ^/gericht, roles: ROLE_USER }
    - { path: ^/reg, roles: ROLE_USER }

    A Menu for public and one only for logged in User

    Login or Signup to reply.
  4. 0

    #[Route(‘/car/new’, name: ‘car_new’, methods: [‘GET’, ‘POST’])]
    public function new(Request $request, EntityManagerInterface $entityManager): Response
    {

        $car = new Car();
    $form = $this->createForm(CarType::class, $car);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $image = $form->get('image')->getData();

        if ($image) {
            $filename = md5(uniqid()) . '.' . $image->guessExtension();
            $image->move(
                $this->getParameter('image_folder'),
                $filename
            );
            $car->setImage($filename);
        }
        $entityManager->persist($car);
        $entityManager->flush();

        return $this->redirectToRoute('car_new');
    }

    return $this->render('car/index.html.twig', [
        'form' => $form->createView(),
    ]);
}

    for picture

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search