Lift Stuff! The js- Prefix

Edit on GitHub

Guys, get ready to pump up... on your JavaScript skills! No, no, I'm not talking about the basics. Look, I get it: you know how to write JavaScript, you're a ninja and a rock star all at once with jQuery. That's awesome! In fact, it's exactly where I want to start. Because in this tutorial, we're going to flex our muscles and start asking questions about how things - that we've used for years - actually work.

And this will make us more dangerous right away. But, but but! It's also going to lead us to our real goal: building a foundation so we can learn about ridiculously cool things in future tutorials, like module loaders and front-end frameworks like ReactJS. Yep, in a few short courses, we're going to take a traditional HTML website and transform it into a modern, hipster, JavaScript-driven front-end. So buckle up.

The Project: Pump Up!

As always, please, please, please, do the heavy-lifting and code along with me. By the way, in 30 seconds, I promise you'll understand why I'm making all these amazing weight-lifting puns. I know, you just can't... weight.

Anyways, download the course code from any page and unzip it to find a start/ directory. That will have the same code that you see here. Follow the details in the README.md file to get your project set up.

The last step will be to open a terminal, move into your project and do 50 pushups. I mean, run:

./bin/console server:run

to start the built-in PHP web server. Now, this is a Symfony project but we're not going to talk a lot about Symfony: we'll focus on JavaScript. Pull up the site by going to http://localhost:8000.

Welcome... to Lift Stuff: an application for programmers, like us, who spend all of their time on a computer. With Lift Stuff, they can stay in shape and record the things that they lift while working.

Let me show you: login as ron_furgandy, password pumpup. This is the only important page on the site. On the left, we have a history of the things that we've lifted, like our cat. We can lift many different things, like a fat cat, our laptop, or our coffee cup. Let's get in shape and lift our coffee cup 10 times. I lifted it! Our progress is saved, and we're even moving up the super-retro leaderboard on the right! I'm coming for you Meowly Cyrus!

Setting up the Delete Link

But, from a JavaScript standpoint, this is all incredibly boring, I mean traditional! Our first job - in case I fall over my keyboard while eating a donut and mess up - is to add a delete icon to each row. When we click that, it should send an AJAX request to delete that from the database, remove the row entirely from the page, and update the total at the bottom.

Right now, this entire page is rendered on the server, and the template lives at app/Resources/views/lift/index.html.twig:

            
            60 lines
            
            app/Resources/views/lift/index.html.twig
        
            {% extends 'base.html.twig' %}
        
            {% block body %}
        
                <div class="row">
        
                    <div class="col-md-7">
        
                        <h2>
        
                            Lift History
        
                            <a href="#list-stuff-form" class="btn btn-md btn-success pull-right">
        
                                <span class="fa fa-plus"></span> Add
        
                            </a>
        
                        </h2>
        
                        <table class="table table-striped">
        
                            <thead>
        
                            <tr>
        
                                <th>What</th>
        
                                <th>How many times?</th>
        
                                <th>Weight</th>
        
                                <th>&nbsp;</th>
        
                            </tr>
        
                            </thead>
        
                            <tbody>
        
                            {% for repLog in repLogs %}
        
                                <tr>
        
                                    <td>{{ repLog.itemLabel|trans }}</td>
        
                                    <td>{{ repLog.reps }}</td>
        
                                    <td>{{ repLog.totalWeightLifted }}</td>
        
                                    <td>
        
                                        &nbsp;
        
                                    </td>
        
                                </tr>
        
                            {% else %}
        
                                <tr>
        
                                    <td colspan="4">Get liftin'!</td>
        
                                </tr>
        
                            {% endfor %}
        
                            </tbody>
        
                            <tfoot>
        
                                <tr>
        
                                    <td>&nbsp;</td>
        
                                    <th>Total</th>
        
                                    <th>{{ totalWeight }}</th>
        
                                    <td>&nbsp;</td>
        
                                </tr>
        
                            </tfoot>
        
                        </table>
        
                        {{ include('lift/_form.html.twig') }}
        
                    </div>
        
                    <div class="col-md-5">
        
                        <div class="leaderboard">
        
                            <h2 class="text-center"><img class="dumbbell" src="{{ asset('assets/images/dumbbell.png') }}">Leaderboard</h2>
        
                            {{ include('lift/_leaderboard.html.twig') }}
        
                        </div>
        
                    </div>
        
                </div>
        
            {% endblock %}

Inside, we're looping over something I call a repLog to build the table:

            
            60 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... lines 1 - 2
                            
            {% block body %}
        
                <div class="row">
        
                    <div class="col-md-7">
        
                                                    ... lines 6 - 12
                            
                        <table class="table table-striped">
        
                                                    ... lines 14 - 22
                            
                            {% for repLog in repLogs %}
        
                                <tr>
        
                                    <td>{{ repLog.itemLabel|trans }}</td>
        
                                    <td>{{ repLog.reps }}</td>
        
                                    <td>{{ repLog.totalWeightLifted }}</td>
        
                                    <td>
        
                                        &nbsp;
        
                                    </td>
        
                                </tr>
        
                                                    ... lines 32 - 35
                            
                            {% endfor %}
        
                                                    ... lines 37 - 45
                            
                        </table>
        
                                                    ... lines 47 - 49
                            
                    </div>
        
                                                    ... lines 51 - 57
                            
                </div>
        
            {% endblock %}

Each repLog represents one item we've lifted, and it's the only important table in the database. It has an id, the number of reps that we lifted and the total weight:

            
            200 lines
            
            src/AppBundle/Entity/RepLog.php
        
                                                    ... lines 1 - 8
                            
            /**
        
             * RepLog
        
             *
        
             * @ORM\Table(name="rep_log")
        
             * @ORM\Entity(repositoryClass="AppBundle\Repository\RepLogRepository")
        
             */
        
            class RepLog
        
            {
        
                                                    ... lines 17 - 27
                            
                /**
        
                 * @var integer
        
                 *
        
                 * @Serializer\Groups({"Default"})
        
                 * @ORM\Column(name="id", type="integer")
        
                 * @ORM\Id
        
                 * @ORM\GeneratedValue(strategy="AUTO")
        
                 */
        
                private $id;
        
                /**
        
                 * @var integer
        
                 *
        
                 * @Serializer\Groups({"Default"})
        
                 * @ORM\Column(name="reps", type="integer")
        
                 * @Assert\NotBlank(message="How many times did you lift this?")
        
                 * @Assert\GreaterThan(value=0, message="You can certainly life more than just 0!")
        
                 */
        
                private $reps;
        
                /**
        
                 * @var string
        
                 *
        
                 * @Serializer\Groups({"Default"})
        
                 * @ORM\Column(name="item", type="string", length=50)
        
                 * @Assert\NotBlank(message="What did you lift?")
        
                 */
        
                private $item;
        
                /**
        
                 * @var float
        
                 *
        
                 * @Serializer\Groups({"Default"})
        
                 * @ORM\Column(name="totalWeightLifted", type="float")
        
                 */
        
                private $totalWeightLifted;
        
                                                    ... lines 64 - 198
                            
            }

Adding the Delete link and js- class

To add the delete link, inside the last <td> add a new anchor tag. Set the href to #, since we plan to let JavaScript do the work. And then, give it a class: js-delete-rep-log:

            
            72 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... lines 1 - 2
                            
            {% block body %}
        
                <div class="row">
        
                    <div class="col-md-7">
        
                                                    ... lines 6 - 12
                            
                        <table class="table table-striped">
        
                                                    ... lines 14 - 22
                            
                            {% for repLog in repLogs %}
        
                                <tr>
        
                                                    ... lines 25 - 27
                            
                                    <td>
        
                                        <a href="#" class="js-delete-rep-log">
        
                                                    ... line 30
                            
                                        </a>
        
                                    </td>
        
                                </tr>
        
                                                    ... lines 34 - 37
                            
                            {% endfor %}
        
                                                    ... lines 39 - 47
                            
                        </table>
        
                                                    ... lines 49 - 51
                            
                    </div>
        
                                                    ... lines 53 - 59
                            
                </div>
        
            {% endblock %}
        
                                                    ... lines 62 - 72

Inside, add our cute little delete icon:

            
            72 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... lines 1 - 2
                            
            {% block body %}
        
                <div class="row">
        
                    <div class="col-md-7">
        
                                                    ... lines 6 - 12
                            
                        <table class="table table-striped">
        
                                                    ... lines 14 - 22
                            
                            {% for repLog in repLogs %}
        
                                <tr>
        
                                                    ... lines 25 - 27
                            
                                    <td>
        
                                        <a href="#" class="js-delete-rep-log">
        
                                            <span class="fa fa-trash"></span>
        
                                        </a>
        
                                    </td>
        
                                </tr>
        
                                                    ... lines 34 - 37
                            
                            {% endfor %}
        
                                                    ... lines 39 - 47
                            
                        </table>
        
                                                    ... lines 49 - 51
                            
                    </div>
        
                                                    ... lines 53 - 59
                            
                </div>
        
            {% endblock %}
        
                                                    ... lines 62 - 72

Adorable! Ok, first! Why did we add this js-delete-rep-log class? Well, there are only ever two reasons to add a class: to style that element, or because you want to find it in JavaScript.

Our goal is the second, and by prefixing the class with js-, it makes that crystal clear. This is a fairly popular standard: when you add a class for JavaScript, give it a js- prefix so that future you doesn't need to wonder which classes are for styling and which are for JavaScript. Future you will... thank you.

Copy that class and head to the bottom of the template. Add a block javascripts, endblock and call the parent() function:

            
            72 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... lines 1 - 62
                            
            {% block javascripts %}
        
                {{ parent() }}
        
                                                    ... lines 65 - 70
                            
            {% endblock %}

This is Symfony's way of adding JavaScript to a page. Inside, add a <script> tag and then, use jQuery to find all .js-delete-rep-log elements, and then .on('click'), call this function. For now, just console.log('todo delete!'):

            
            72 lines
            
            app/Resources/views/lift/index.html.twig
        
                                                    ... lines 1 - 62
                            
            {% block javascripts %}
        
                {{ parent() }}
        
                <script>
        
                    $('.js-delete-rep-log').on('click', function() {
        
                        console.log('todo delete!');
        
                    });
        
                </script>
        
            {% endblock %}

Resolving External JS in PHPStorm

But hmm, PhpStorm says that $ is an unresolved function or method. Come on! I do have jQuery on the page. Open the base layout file - base.html.twig - and scroll to the bottom:

            
            97 lines
            
            app/Resources/views/base.html.twig
        
            <!DOCTYPE html>
        
            <html lang="en">
        
                                                    ... lines 3 - 19
                            
            <body>
        
                                                    ... lines 21 - 90
                            
            {% block javascripts %}
        
                <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
            {% endblock %}
        
            </body>
        
            </html>

Both jQuery and Bootstrap should be coming in from a CDN. Oh, but this note says that there is no locally stored library for the http link. Aha! Tell PhpStorm to download and learn all about the library by pressing Option+Enter on a Mac - or Alt+Enter on Linux or Windows - and choosing "Download Library". Do the same thing for Bootstrap.

Et voilà! The error is gone, and we'll start getting at least some auto-completion.

Using .on() versus .click()

Oh, and I want you to notice one other thing: we're using .on('click') instead of the .click() function. Why? Well, they both do the same thing. But, there are an infinite number of events you could listen to on any element: click, change, keyup, mouseover or even custom, invented events. By using .on(), we have one consistent way to add a listener to any event.

It's a small start, but already when we refresh, open the console, and click delete, it works! Now, let's follow the rabbit hole deeper.

Leave a comment!

106

Maz | posted 6 months ago

Hi there,
For resolution this error:
`[TypeError]

Argument 1 passed to Symfony\Component\Process\Process::__construct() must                      
be of the type array, string given`

In my case its necesary change composer version: composer self-update 2.2.9

1 Reply

Alexandre C. | posted 3 years ago

Hi there,

Can you just up to date the repo of this project for not having spent time to fix problems with the latest version of php and the parameters.yml file ? or at least update readme to avoid some problems, please, thank you.

1 Reply

MolloKhan | SFCASTS | Alexandre C. | posted 3 years ago

Besides what Ryan said. Can you re-try installing it please? This tutorial already got upgraded and it's working for me but I'd like to know if it's working for you as well :)

weaverryan | SFCASTS | Alexandre C. | posted 3 years ago | edited

Hey Alexandre C.!

Yea, PHP 7.4 added some warnings that cause an error in some of our tutorials due to some older version of some dependencies. We've been updating the tutorial code across the site to avoid that so that things run smoothly. What problem did you have with parameters.yml? That might be something different...

Cheers!

TomaszGasior | posted 4 years ago

3:00 — from HTML semantic perspective you should use <button type="button"> instead of (a href="#"). (a) should not be used with senseless href="" value.
(For some reason Discuss does not escape "A" html tag in comments.)

1 Reply

Victor | SFCASTS | TomaszGasior | posted 4 years ago

Hey Tomasz,

Are you talking about "I lifted it" button? That's exactly what we press at 3:00 in the video, and it is a button tag. But anyway, using "a" tag with href="#" is totally OK as for me, because it has a valid HTML syntax. Why don't you like it?

Cheers!

TomaszGasior | Victor | posted 4 years ago

Thank you for your response.

Sorry! I was talking about "delete" button on each row. But I given you wrong time stamp. It should be around 4:30.

Hyperlinks have to be used to indicate URL change. Buttons (<button type="button">) should be used if URL is not changed and action is fired on JavaScript side. This is important for a11y. Please look at this articles:
* https://blogs.ancestry.com/...
* https://marcysutton.com/lin...

1 Reply

weaverryan | SFCASTS | TomaszGasior | posted 4 years ago | edited

Hey TomaszGasior!

Yep, you're totally right - that was lazy on my part :). Thanks for the comment - I'll pay closer attention to this in the future!

Cheers!

Victor | SFCASTS | TomaszGasior | posted 4 years ago

Hey Tomasz,

Ah, now I see... Yeah, makes sense, and it good to know! Thanks for pointing us about it.

Cheers!

sandeep sangole | posted 5 years ago

Hi there , I have just started course , downloaded source code and setup the application. While adding to lift history I am getting below error ,

[Warning] jQuery.Deferred exception: JSON Parse error: Unrecognized token '<' (2) (jquery-3.1.1.min.js, line 2)

parse

(anonymous function) — RepLogApp.js:126

j — jquery-3.1.1.min.js:1349

(anonymous function) — jquery-3.1.1.min.js:1356

undefined

1 Reply

weaverryan | SFCASTS | sandeep sangole | posted 5 years ago | edited

Hey sandeep sangole!

Hmmm. Can you post your RepLogApp.js? Exactly how far through the tutorial are you? I'm asking because we don't create the RepLogApp.js file until chapter 12 of this tutorial (https://knpuniversity.com/s..., so I need to know exactly where you are :).

But, I also think that I recognize the error. Near the end of the tutorial (https://knpuniversity.com/s..., we update our code to make an AJAX request to an API and we *expect* our API endpoint to return JSON. We then use JSON.parse() to parse that JSON, so we can handle it.

I believe the error is coming from there. Specifically, for some reason, your API endpoint is NOT returning JSON - it's probably returning HTML, maybe an error page. And so, RepLogApp.js throws an error when it tries to parse this as JSON. The "Unrecognized token '<'" is because it is seeing an HTML tag, instead of JSON.

So, check your AJAX request and see why it's not returning JSON :).

Cheers!

sandeep sangole | posted 5 years ago

What is the best way to get help on below issues ??

1 Reply

Victor | SFCASTS | sandeep sangole | posted 5 years ago

Hey Sandeep,

You can easily edit your comments, so no need to write a several comments if you forgot some details in the previous message ;) Also, we're tracking each Disqus comment, so do not need to duplicate the question in direct message. But yeah, Disqus comments is the best way to get help from us, and it's also may be useful for other people who will see comments, they may find already answered questions. Unfortunately, we do not able to answer your questions immediately, so we may reply back to you with some delay, please, keep in mind it. Thanks for understanding.

Cheers!

Gompali | posted 5 years ago

I'm discouraged that it's showing bad practices. jQuery IS a bad practice. Why the heck should I import 10k rows of stuffed code to do something I can do in 10 rows ?

1 Reply

MolloKhan | SFCASTS | Gompali | posted 5 years ago | edited

Hey Gompali

I'm sorry that you are feeling that way. It has been never our intention to teach any bad practices, but when we do (because we are not aware of, or maybe the technology just evolved) we like to be told so. Anyways, this tutorial is not about JQuery, we used JQuery because is a handy library for doing a lot of common stuff, but, you can use any library you want, or even pure JS if you like.

If you have any question or feedback, don't hesitate to contact us. Cheers!

Ludovic B. | posted 1 year ago

The command composer update doesn't work for me. I have PHP 8.1.

Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Root composer.json requires php ^7.2.0 but your php version (8.1.3) does not satisfy that requirement.
Problem 2
- Root composer.json requires twig/twig 2.10.* -> satisfiable by twig/twig[v2.10.0].
- twig/twig v2.10.0 requires php ^7.0 -> your php version (8.1.3) does not satisfy that requirement.
Problem 3
- symfony/symfony[v3.1.7, ..., v3.1.10] require twig/twig ~1.28|~2.0 -> satisfiable by twig/twig[v2.10.0].
- symfony/symfony v3.1.6 requires twig/twig ~1.27|~2.0 -> satisfiable by twig/twig[v2.10.0].
- symfony/symfony v3.1.5 requires twig/twig ~1.26|~2.0 -> satisfiable by twig/twig[v2.10.0].
- symfony/symfony[v3.1.0, ..., v3.1.4] require twig/twig ~1.23|~2.0 -> satisfiable by twig/twig[v2.10.0].
- twig/twig v2.10.0 requires php ^7.0 -> your php version (8.1.3) does not satisfy that requirement.
- Root composer.json requires symfony/symfony 3.1.* -> satisfiable by symfony/symfony[v3.1.0, ..., v3.1.10].

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

Victor | SFCASTS | Ludovic B. | posted 1 year ago

Hey Ludovic,

Yeah, unfortunately, this course has legacy code base that does not work in PHP 8. We show a warning with a tooltip when you download the course code. The best option would be to install a legacy 7.4 PHP on your local machine or downgrade your current PHP version temporarily. Or you can try to set up this project using Docker where use the required PHP version.

If you still want to follow this course in PHP 8 - you would need to do more work. First of all, you would need to change that PHP version to yours in composer.json under "require.php". And also upgrade the dependencies, but it may require bumping some installed dependencies constraints and so require some changes in the code base.

I hope this helps!

Cheers!

Johnny | posted 2 years ago

For people who are not using PhpStorm could you mention how to include those two libraries inside the project ?

weaverryan | SFCASTS | Johnny | posted 2 years ago

Hey @Johnny!

Nice to chat with you :). Regardless of what editor you're using, the two libraries are already included in your project. What I mean is, because we're linking to external files (e.g. https://code.jquery.com/jqu..., when we load the page, these will be downloaded and everything will work. What I did in PhpStorm was just something to help PhpStorm *understand* my code. Since the jquery and bootstrap files weren't physically in my project, it didn't give me autocompletion when I used those libraries in my code. The trick i did told PhpStorm to download those into its own, internal storage so that it can help me in that way.

Does that help? Let me know :).

Cheers!

Phil C. | posted 2 years ago

Hi,

I just ran thru the setup and all went well until I attempted to connect to the db via the php bin/console doctrine:database:create command. I get this error: [Doctrine\DBAL\Driver\PDOException]
SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

However I can connect just fine using TablePlus so I don't know how to fix this, any info appreciated.

weaverryan | SFCASTS | Phil C. | posted 2 years ago | edited

Hey Phil C.!

Ah, I know this error, and it's super annoying :/ - it has to do with a change in how MySQL does authentication. Check out here - https://stackoverflow.com/q... - and let me know if it helps!

Cheers!

Дмитрий | posted 2 years ago

Hi, guys!
I get error [Symfony\Component\Console\Exception\LogicException] An option named "connection" already exists, when runnin any php bin/console commands. How to solve this problem?

weaverryan | SFCASTS | Дмитрий | posted 2 years ago | edited

Hey Дмитрий!

Sorry about the trouble, but I *do* know this error! Did you get this error using the course code? Did you run composer update or anything? I'm just asking because you should *not* have any errors if you use the course code directly, and I want to make sure that's ok :).

Here's a conversation about the issue: https://symfonycasts.com/sc...

Basically, somehow, your versions of doctrine/migrations and doctrine/doctrine-migrations-bundle have gotten in a conflicting state. Updating them, or removing and re-adding should do the trick. But let me know :).

Cheers!

Bastian | posted 2 years ago

Hey everyone,
are there any plans to update this series using just modern JS?
Getting into more advanced javascript on the back of jQuery feels pretty outdated to me.
Cheers.

MolloKhan | SFCASTS | Bastian | posted 2 years ago | edited

Hey Bastian

We have newer JavaScript tutorials where you can see all the modern things being applied. For example, you can see your new course about Vue.js or React
https://symfonycasts.com/sc...
or, if you're interested in learning ES6 specifically, you can watch this tutorial https://symfonycasts.com/sc...

Cheers!

Hajer G. | posted 2 years ago

i'm getting this " [InvalidArgumentException]
Unable to find file "@FrameworkBundle/Resources/config/router_dev.php". "

weaverryan | SFCASTS | Hajer G. | posted 2 years ago | edited

Hey @hajer!

Hmm, that's odd! Do you get that when you download the course code? Or are you using your own project? This is a file that's used by the built-in web server - the server that runs when you call ./bin/console server:run. This file should be downloaded when you run composer install... I can't think of any reason why it wouldn't be there.

Cheers!

Juan-Etxenike | weaverryan | posted 2 years ago

Hi, I am too, getting this error, so far on composer install I read : WARNING Framework Bundle (Method/Error) copy. ! [NOTE] Some assets were installed via copy. If you make changes to these assets you have to run this command again.

But when I run php bin/console server:run I get the error. After that I have managed to get to the site installing it via xampp on my Windows 10 machine, but yet it would fall on the production mode and not on the dev mode. I managed to fix it changing app.php to app_dev.php in .htaccess

weaverryan | SFCASTS | Juan-Etxenike | posted 2 years ago | edited

Hey Juan E.!

Thanks for posting - and sorry for the very late reply. First, I'm glad you got it working :). Though, the cause is still a mystery!

> WARNING Framework Bundle (Method/Error) copy. ! [NOTE]

This should be ok: when you run composer install, Symfony symlinks public files (e.g. CSS files, JS files) from the bundle into your public/bundles folder. On Windows, symlinks don't work - so it copies those files, which is totally fine, and shouldn't impact the error anyways. But, good eye noticing this ;)

> After that I have managed to get to the site installing it via xampp on my Windows 10 machine, but yet it would fall on the production mode and not on the dev mode. I managed to fix it changing app.php to app_dev.php in .htaccess

Good workaround! When you use a real web server, and you want to access it in "dev" mode (on the version of Symfony used in this tutorial), you're supposed to put app_dev.php in your URL - so like http://localhost/app_dev.php. Hitting the app in production probably failed (this is just a guess) because you typically need to clear the Symfony cache before hitting that environment.

Anyways, I hope these explanations shed some light on things - but I still can't imagine what would be causing the router_dev.php error - that's just a physical file that sits in your vendor directory.

Cheers!

Hajer G. | posted 2 years ago

I'm getting this error " PHP Parse error: syntax error, unexpected 'var' (T_VAR) in C:\Users\hajer\start\bin\console on line 14

Parse error: syntax error, unexpected 'var' (T_VAR) in C:\Users\hajer\start\bin\console on line 14 "

Victor | SFCASTS | Hajer G. | posted 2 years ago

Hey hajer,

That's interesting... What PHP version do you use? Did you do any changes in that bin/console file? How do you run that console command? Could you try to run it via PHP interpreter like:
$ php bin/console

Does it works for you?

Cheers!

Contabexpress L. | posted 3 years ago

I'm trying to setup the database following the readme.md and I'm getting this:

[Doctrine\DBAL\Exception\ConnectionException]
An exception occurred in driver: SQLSTATE[HY000] [1045] Access denied for user 'root'@'loc
alhost' (using password: NO)

[Doctrine\DBAL\Driver\PDOException]
SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

[PDOException]
SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

MolloKhan | SFCASTS | Contabexpress L. | posted 3 years ago | edited

Hey Contabexpress L.

After you install composer you need to update the Database URL string to use your credentials inside app/config/parameters.yml. If you haven't created any MySql user yet, you will have to create one first

Cheers!

Contabexpress L. | MolloKhan | posted 3 years ago | edited

Hi MolloKhan

and how can I create that or check if I have one?

Tks for the help

MolloKhan | SFCASTS | Contabexpress L. | posted 3 years ago | edited

The first thing to check is if you already have MySql installed on your computer (unless you want to use Docker or something similar)
Run mysql -v it should print info about Mysql if installed
If you don't have it installed follow this guide https://linuxize.com/post/how-to-install-mysql-on-ubuntu-18-04/ it seems ok
after that you should be ready to rock ;)

Contabexpress L. | MolloKhan | posted 3 years ago

It's alredy installed and running. It had and password that i didn't remembered, now I've updated the parameters.yml and it worked. Thanks for the help!

1 Reply

Akavir S. | posted 3 years ago | edited

Hello,

I cant .bin/console server:run

PHP Warning: require(/var/www/html/javaScriptProject/app/../vendor/autoload.php): failed to open stream: No such file or directory in /var/www/html/javaScriptProject/app/autoload.php on line 7<br />PHP Fatal error: require(): Failed opening required '/var/www/html/javaScriptProject/app/../vendor/autoload.php' (include_path='.:/usr/share/php') in /var/www/html/javaScriptProject/app/autoload.php on line 7<br />

Victor | SFCASTS | Akavir S. | posted 3 years ago

Hey Virgile,

It looks like you forgot to install Composer dependencies, try to run "composer install" in project root directory first. Actually, you need to do a few more required steps, see README.md in downloaded course code and follow the steps from there to bootstrap the project locally.

Cheers!

Akavir S. | Victor | posted 3 years ago | edited

Hey again Victor,

This is because i encounter an error when doing composer install

`
An error occurred when executing the "'cache:clear --no-warmup'" command:

PHP Fatal error: Uncaught Symfony\Component\Debug\Exception\ClassNotFoundException: Attempted to load class "DOMDocument" from the global namespace.
Did you forget a "use" statement? in /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/Config/Util/XmlUtils.php:52
Stack trace:
#0 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/DependencyInjection/Loader/XmlFileLoader.php(263): Symfony\Component\
Config\Util\XmlUtils::loadFile()
#1 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/DependencyInjection/Loader/XmlFileLoader.php(41): Symfony\Component\D
ependencyInjection\Loader\XmlFileLoader->parseFileToDOM()
#2 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Bundle/FrameworkBundle/DependencyInjection/FrameworkExtension.php(64): Symfony\
Component\DependencyInjection\Loader\XmlFileLoader->load()
#3 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/DependencyInjection/Compiler/MergeExtensionConfigurationPass in /var/
www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/Config/Util/XmlUtils.php on line 52 `

Maybe you know why this happens ?

Victor | SFCASTS | Akavir S. | posted 3 years ago

Hey virgile,

This is the error *after* Composer was installed its dependencies. Do you see the same "Failed opening required '/var/www/html/javaScriptProject/app/../vendor/autoload.php" error even after executing "composer install"? If so, please, try to remove vendor/ dir with "rm -rf vendor/" command and re-install dependencies again with "composer install". The error about "autoload.php" should gone.

Let me know if it does not.

About the second error - it looks like the project required XML PHP extension that is missing in your system. Please, try to install XML extension and try again.

Cheers!

Akavir S. | Victor | posted 3 years ago

All hail Victor ! Your on fire !

I followed the steps and now it works !

Thanks a lot :)

Victor | SFCASTS | Akavir S. | posted 3 years ago

Hey Virgile,

Perfect! Thanks for confirming those steps helped you :)

Cheers!

Yan patrick L. | posted 3 years ago

Hi there,

I follow the steps of README.md file.
1. I set up the parameters.yml
2. I ran : composer install

The install begins until :

Updating the "app/config/parameters.yml" file
> Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::buildBootstrap
> Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::clearCache

and after I have this error :

[Symfony\Component\Debug\Exception\ContextErrorException]
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"?

Script Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::clearCache handling the symfony-script

[RuntimeException]
An error occurred when executing the ""cache:clear --no-warmup"" command:

[Symfony\Component\Debug\Exception\ContextErrorException]
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"?

I need some help.

Thanks

Victor | SFCASTS | Yan patrick L. | posted 3 years ago

Hey Anshen,

This sounds like an incompatibility of your PHP version with Composer's installed dependencies versions. What version of PHP do you use? You can see it running "php --version" in your terminal.

As a possible fix, you can try to do "composer update" instead of "composer install" - Composer will try to pull a new version of packages that most probably already contain the fix.

I hope this helps!

Cheers!

GregRamos | Victor | posted 3 years ago | edited

Hi Victor!
I get another error message after composer update:
<br />PHP<br />Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 4096 bytes) in phar:///usr/local/bin/composer/src/Composer/DependencyResolver/Solver.php on line 223Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 4096 bytes) in <br />phar:///usr/local/bin/composer/src/Composer/DependencyResolver/Solver.php on line 223<br />
It's weird because I maxed out the memory!!!! If I made this CMD :
<br />php -r "echo ini_get('memory_limit').PHP_EOL;"<br />
I get this :
2048M

Thank you for helping me!

MolloKhan | SFCASTS | GregRamos | posted 3 years ago | edited

Hey GregRamos

Sometimes you can fix that problem by updating composer to its latest version, if that's not the case what you can do is to remove the memory limit (inside your php.ini file) and then run composer install like this:
COMPOSER_MEMORY_LIMIT=-1 composer update

Let me know if it worked. Cheers!

1 Reply

GregRamos | MolloKhan | posted 3 years ago | edited

Hi Diego,Thanks for the answer.
As I said, the problem comes after 'composer update' and I already maxed out the memory (2048M in php.ini).
I try your CMD line, but after that I have this error:
<br /> [Symfony\Component\Config\Definition\Exception\InvalidConfigurationException] <br /> The child node "from_email" at path "fos_user" must be configured. <br />

GregRamos | GregRamos | posted 3 years ago

It works after configuring config.yml > from_email and reload cmd :

COMPOSER_MEMORY_LIMIT=-1 composer update

Thanks!

Yan patrick L. | Victor | posted 3 years ago

Hi Victor,

My php version is 7.3.1
I already tried "composer update"

Updating the "app/config/parameters.yml" file
> Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::buildBootstrap
> Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::clearCache

and after,I have this error message :

[Symfony\Component\Config\Definition\Exception\InvalidConfigurationException]
The child node "from_email" at path "fos_user" must be configured.

Script Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::clearCache handling the symfony-scripts event terminated with an exception

[RuntimeException]
An error occurred when executing the ""cache:clear --no-warmup"" command:

[Symfony\Component\Config\Definition\Exception\InvalidConfigurationException]
The child node "from_email" at path "fos_user" must be configured.

Thanks for your help

Victor | SFCASTS | Yan patrick L. | posted 3 years ago | edited

Hey Anshen,

Yeah, you need to set up the "from_email" to suppress the error, it was made as required config option:


fos_user:
    # ...
    from_email:
        address: "your email here..."
        sender_name: "your sender name here..."

Cheers!

2 Reply

Load more comments

This tutorial uses an older version of Symfony... but since it's a JavaScript tutorial, the concepts are still ? valid!

Symfony 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.1.*", // v3.1.10
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.0
        "symfony/monolog-bundle": "^2.8", // 2.12.0
        "symfony/polyfill-apcu": "^1.0", // v1.2.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.1
        "symfony/phpunit-bridge": "^3.0" // v3.1.6
    }
}

Edit on GitHub

TRACK

JavaScript Fundamentals >

COURSE

JavaScript for PHP Geeks

Lift Stuff! The js- Prefix

Video not working?

The Project: Pump Up!

Setting up the Delete Link

Adding the Delete link and js- class

Resolving External JS in PHPStorm

Using .on() versus .click()

Leave a comment!

What PHP libraries does this tutorial use?

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

	{% block body %}
	<div class="row">
	<div class="col-md-7">
	<h2>
	Lift History
	<a href="#list-stuff-form" class="btn btn-md btn-success pull-right">
	<span class="fa fa-plus"></span> Add
	</a>
	</h2>

	<table class="table table-striped">
	<thead>
	<tr>
	<th>What</th>
	<th>How many times?</th>
	<th>Weight</th>
	<th> </th>
	</tr>
	</thead>
	<tbody>
	{% for repLog in repLogs %}
	<tr>
	<td>{{ repLog.itemLabel\|trans }}</td>
	<td>{{ repLog.reps }}</td>
	<td>{{ repLog.totalWeightLifted }}</td>
	<td>

	</td>
	</tr>
	{% else %}
	<tr>
	<td colspan="4">Get liftin'!</td>
	</tr>
	{% endfor %}
	</tbody>
	<tfoot>
	<tr>
	<td> </td>
	<th>Total</th>
	<th>{{ totalWeight }}</th>
	<td> </td>
	</tr>
	</tfoot>
	</table>

	{{ include('lift/_form.html.twig') }}

	</div>
	<div class="col-md-5">
	<div class="leaderboard">
	<h2 class="text-center"><img class="dumbbell" src="{{ asset('assets/images/dumbbell.png') }}">Leaderboard</h2>

	{{ include('lift/_leaderboard.html.twig') }}
	</div>
	</div>
	</div>
	{% endblock %}

	... lines 1 - 2
	{% block body %}
	<div class="row">
	<div class="col-md-7">
	... lines 6 - 12
	<table class="table table-striped">
	... lines 14 - 22
	{% for repLog in repLogs %}
	<tr>
	<td>{{ repLog.itemLabel\|trans }}</td>
	<td>{{ repLog.reps }}</td>
	<td>{{ repLog.totalWeightLifted }}</td>
	<td>

	</td>
	</tr>
	... lines 32 - 35
	{% endfor %}
	... lines 37 - 45
	</table>
	... lines 47 - 49
	</div>
	... lines 51 - 57
	</div>
	{% endblock %}

	... lines 1 - 8
	/**
	* RepLog
	*
	* @ORM\Table(name="rep_log")
	* @ORM\Entity(repositoryClass="AppBundle\Repository\RepLogRepository")
	*/
	class RepLog
	{
	... lines 17 - 27
	/**
	* @var integer
	*
	* @Serializer\Groups({"Default"})
	* @ORM\Column(name="id", type="integer")
	* @ORM\Id
	* @ORM\GeneratedValue(strategy="AUTO")
	*/
	private $id;

	/**
	* @var integer
	*
	* @Serializer\Groups({"Default"})
	* @ORM\Column(name="reps", type="integer")
	* @Assert\NotBlank(message="How many times did you lift this?")
	* @Assert\GreaterThan(value=0, message="You can certainly life more than just 0!")
	*/
	private $reps;

	/**
	* @var string
	*
	* @Serializer\Groups({"Default"})
	* @ORM\Column(name="item", type="string", length=50)
	* @Assert\NotBlank(message="What did you lift?")
	*/
	private $item;

	/**
	* @var float
	*
	* @Serializer\Groups({"Default"})
	* @ORM\Column(name="totalWeightLifted", type="float")
	*/
	private $totalWeightLifted;
	... lines 64 - 198
	}

	... lines 1 - 62
	{% block javascripts %}
	{{ parent() }}
	... lines 65 - 70
	{% endblock %}

	<!DOCTYPE html>
	<html lang="en">
	... lines 3 - 19
	<body>
	... lines 21 - 90
	{% block javascripts %}
	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	{% endblock %}
	</body>
	</html>