Laravel 8 Livewire Tutorial (Building a Simple CMS) : Create Operation using Jetstream Modal (part2)
HTML-код
- Опубликовано: 8 сен 2024
- In this laravel 8 livewire tutorial series, we will build a simple CMS (Content Management System) using laravel 8 with livewire. This video covers the basic create operation using jetstream modal as part of the crud operations that we will build using laravel 8. We will create a CRUD operation to generate dynamic pages using laravel 8 with livewire. This laravel 8 livewire tutorial series will help you understand the process of building real-world applications using laravel 8 with livewire. You will be surprised how simple and straightforward it is to build such an amazing but seemingly complicated web application such as a content management system using laravel 8 with livewire. This laravel 8 livewire tutorial series will help you build a simple CMS (Content Management System) using laravel 8.
Versions:
Laravel 8
Livewire 2
Timeline:
0:53 - Publish jetstream views
1:21 - Prepare Page model
2:20 - Prepare livewire Pages Component
2:34 - Prepare livewire Frontpage Component
2:52 - Add Laravel Trix WYSWYG editor
3:53 - Update the routes
8:57 - Use the jetstream button
9:18 - Using PHPDoc Comment extension for documentation
10:52 - Adding the Jetstream Modal
12:21 - Adding form elements to Jetstream Modal content body
14:33 - Add Trix markup to your Jetstream Modal
15:18 - Update app.css for some styling
16:56 - Add the create functionality for the pages
20:24 - Add the rules validation in your livewire component
22:31 - Add action for specific livewire hook (updated) for public property/variable
23:07 - Add generate slug function base on the title (bonus)
Previous Video: Installation (part1)
• Laravel 8 Livewire Tut...
Next Video: Read, Update, Delete w/ Jetstream Modal (part3)
• Laravel 8 Livewire Tut...
Github Repo:
github.com/jac...
Download VS Code:
code.visualstu...
Tailwind:
tailwindcss.com
Sound: www.bensound.com
#laravelLivewire #laravel8 #livewire
![[Live-coding] Laravel Livewire: Parent-Child Form Example](http://i.ytimg.com/vi/iuIEqOcQi6g/mqdefault.jpg)
I have to come back and say that this tutorial has saved me a crazy amount of time. I thought I knew Laravel but no, this cut down a crazy amount of hours of development from how I use to do things. Unbelievable I am mad that I waisted so much time in the past and I wish I had found this earlier.
Hi Vitu! Thank you so much for your kind feedback! I really appreciate it!
To tell you the truth, you didn't exactly waste your time. You just happened to learn it in a different approach. Sometimes you become wiser when you do it the hard way and that is still a great way of learning things!
Thank you so much! Kudos and keep coding!
Wow. I just noticed you also include the Timeline. You are very organized.
Hi No One! Yes, the timeline is really needed so that you can skip freely if you want to re-watch the video as a reference. Thank you so much for your kind words! Kudos and keep coding! :)
from malaysia
This tutorial are really valid and useful if you watch it while do it in the same time. I tried and easy to understand
I have to say that I love that he is going through the explorer menu to files and not using some shortcut like most tutorials do. Please always keep this tactic.
Yes Vi Tu! It is very crucial that anyone who's following along with the tutorial should know where the files are! Thank you so much for mentioning that!
Muchas gracias por tomarse el tiempo de subir un material de calidad. Saludos desde Paraguay!
De nada, Julio! Me alegra ayudar!
why got 5 dislike?? this laravel livewire serial tuts are awesome. I enjoy learning from these videos much better than any tuts about laravel livewire.
Thank you so much. This is 100% what I needed right now. Appreciate your videos a lot!
You are welcome Tobias! Glad to help! Kudos to you! :)
Wow, the best tutorial I've ever seen. Thank you for your great videos.
Thank you. Looking forward to the next part!
Thank you so much Daniel! Kudos and keep coding!
I really enjoyed this video! Thank you!
Glad you enjoyed it bro! Kudos and keep coding!
Man! This will help me deliver a project that is 3 months past deadline + help me survive a online test for a job appliance
Thats so much dude!
Can you please do something like that on Jetstream INERTIA???
Thanks your great video. I am following your video step by step. At modal-form, for slug input field, tag was used instead . It works in your case but didn't for me. Only after adding type="text" to tag, I could see the beautiful form as yours.
Hi Jinwon!
Thank you so much and you are welcome as well! There's no problem using because if you look at the source code, it uses html input. They're basically the same! Kudos and keep coding!
Amazing good job. Thank you so much!
Thank you so much Minh Phan for the support and you are welcome as well! Kudos and keep coding!
Thanks, great tutorial
You are welcome Jose! Kudos!
Thanks so much. I wish you will make a tutorial how to create a woocomerce website full project with laravel 8 and livewire 2 soon. One more thanks so much
Thank you so much Tan! We will try to touch e-commerce in the future! Stay tuned!
😍🔥
Está super genial el video
Muchas gracias Juan!
Thank you so much but your Trix editor doesn't work properly you can not even save bold text in database would you please fix this problem as well?
Great tutorial! I follow what you did but I replace the generateSlug function with this one
public function checkSlug($value)
{
$slugged = SlugService::createSlug(Page::class, 'slug', $value);
$this->slug = $slugged;
}
Using the Eloquent Sluggable package to generate the slug and check if it's already used. Configured the model as the package indicate and adding this use Cviebrock\EloquentSluggable\Services\SlugService; to the component.
Can't wait to see the next video of this series!
Hi Pawana! That's a great library for creating slugs! Thank you so much for sharing! Kudos and keep coding!
can you please tell how updatedTitle method is automatically called when we type in title input ?
Hi Sarthak!
The updatedTitle is part of the livewire lifecycle hooks. To put it simply, if you concatenate the word "updated" and "Title" (which is a variable inside our Livewire class) and create a function out of it, livewire automatically detects it and runs the function everytime the value of the "$title" variable changes.
public $title;
function updatedTitle($value) {
// if the $title variable changes, everything inside this function runs...
}
See: laravel-livewire.com/docs/2.x/lifecycle-hooks
I like the course it just need updating "Please" The modal form is out dated the new one is nothing like yours, please update to Laravel 8.63.0 and Jetstream v2.0.4 .
This so good!! However, am having a problem when it comes to trix-editor. the "content" column is not filled but other columns are filled. what could be the issue? I am aware that this CMS is created in laravel 8 but Laravel 9 is quite nice with the new advancements. i need to do trix-editor in laravel 9
The Trix Editor might probably have a new implementation in Laravel 9.
How to implement image upload, or the attachments adding feature with trix editor?
The package te7a-houdini/laravel-trix isn't compatible with PHP 8. On installation I get this error message:
[InvalidArgumentException]
Package te7a-houdini/laravel-trix has a PHP requirement incompatible with your PHP version, PHP extensions and Composer version
Hi Stefan! Yes! Unfortunately, most of the current existing libraries haven't fully switched to php8 version just yet. Most of the stable releases are still running on php7+.
I am not clear regarding the generating slug from title. How you define updatedTitle($value) function
Hi -- Laravel 9 | Jet | Livewire (Tall Stack) -- my slug returns `null` in the DB view.. please advise?
Great tutorial, keep it up! really enjoying the journey :)
have a small question, you are setting a higher debounce (100000ms) to the content, so that the value of content variable never bounce back and override the content section, am I right?
Yes, that is to avoid too many network requests! But you can change it depending on your preference!
Thank you so much for the support Candy! Kudos and keep coding!
did you forget about mysql migration? and add some codes to migration?
Amazing video. This will help me complete a four months projects before deadline. I am stuck at using trix-editor for my model content (I named this field "desc" in the model). Following the create operation using jetstream modal,
desc field did not submit to db. while other fields submitted. how do I resolve this please?
I used mass assignment function $guarded and also tried listing all the fields in fillable function in the model. Both did not work.
This project is written in Laravel 8. Please make sure you're using Laravel 8 and the previous version of Livewire
@@sentgine ok.thanks.
Hello Jack of traits, im following the tutorial but even till the end it gives me (Undefined type 'Livewire\Component'.intelephense(1009)) and (Undefined method 'validate'.intelephense(1013)) on the Pages.php in Http/Livewire. But it does seem to be working. What am i doing wrong or what am i missing?
Hi great video. But can you please tell what does that middleware verified means in routes file.?? Thanks in advance
Hi Tarunk!
The "verified" in the middleware is just an alias of the actual middleware class file. You can find their registration setup in the /app/Http/Kernel.php file. In the $routeMiddleware property.
Everytime you add a Middleware, you need to register that in the Kernel file to be able to use it in your routes file.
Hope the helps!
👏👏👏👏👏
Thank you so much Fernando! Keep coding!
Has anyone gotten the attachments functionality working yet? The content as text is stored just fine. I think that the upload functionality should be written in modelData() maybe using the livewire fileuploads, but how is this then passed into the table. I feel like it needs to generate a URL and then store it in the storage disk somehow.
I think that the attachments can be disabled also and then just create a new migration to add a new column for the image file separately??? In this case there could be multiple uploads. That may require a seperate table tho. Which would then require some relationships to be built in the Model. HMMM!
I have a problem with LifeCycle hook,
I already have an life validator that tells me the error instantly but wen i enable a second updated function doesnt work the validator, only one function can run at the time is it possible to run together?
the code
// public function updated($propertyName)
// {
// $this->validateOnly($propertyName);
// }
public function updatedPlate($value)
{
$this->upper($value);
}
public function upper($value){
$process = strtoupper($value);
$this->plate=$process;
}
can you update your GitHub repository I can't git it to work the composer install or the composer update will not work. !
having an issue with the generateSlug its not adding the - in the spaces any suggestions to get it to work also the form-fields don't clear
update managed to get the slug working
Hi Bradleigh! You can use Laravel string helper kebab!
laravel.com/docs/8.x/helpers#method-kebab-case
trim(Str::kebab('fooBar test'));
instead of using @error ... you should try :
19:09
Hello, i try to save the title, slug and content only the title saves? any ideas on how to sort this?
they save as null both the slug and content?
Could you explain more about updatedTitle function ? Where is the $value coming from ? I lost this part
Hi เอกลักษณ์ พงษ์ศรีหดุลชัย!
The "updated" function is a livewire function or hook that runs only when a livewire public property/variable has changed.
In our case, we have a public property called >>
"public $title;".
The "updated" function can also be used to a specific public property. Since we wanted to run something when the $title property is updated, we used the updated function like this "updatedTitle($value)" in which the value is the current value of the $title property.
If we want to use the "updated" function for the $slug property, we just do it like this >>>
public function updatedSlug($value) {
// the rest of your code here.
}
The format goes like this >>>> "updated" + "$the_name_of_your_variable_that_starts_in_a_capital_letter".
Hope that helps!
@@sentgineOMG that is livewire specific function. Just knew that now...
Yes! That is another way that you can easily manipulate your public properties!
You are using a computer voice that uses some modern technology to emulate a human voice, right? :))
Dear sir, would you please make tutorial on multistep registration with progress bar. user
can also complete these steps other time when user need and completed step page dont show
agin when user login. Thank You
Hi Chandra! Thank you so much for that amazing suggestion! We will try to include that in another laravel series in the future! Stay tuned!
@@sentgine will be waiting sir and thanks for reply for your valueable time
@@ChandraShekhar-rg9uy You are welcome Chandra! Kudos and keep coding!
Hi, i have a problem. When I save, the content only save null? what is the problem here? any ideas, I have followed the steps in the videos and I use laravel 9.
did you mange to fix this? I am currently having this issue
me also getting same issue
Hey guys, there might be changes in the codebase of Laravel 9.. please use Laravel 8 for this
@@sentgine I’ll try that thank you
I'm not sure what I'm doing wrong. I follow this tutorial up to 10:46 and when I click the create button the Modal does not show up. I did the whole thing twice thinking I might of done something wrong. Same result. The Modal does not show.
Hi Sheerios! You can follow these steps:
1.) Make sure that your modal and every markup is inside 1 div element. See this example 👇👇👇
// The rest of your code here
// The rest of your code here
Livewire cannot keep track of the states if you don't wrap your elements in 1 div element.
2.) Make sure you add "wire:model" in your modal. See this example 👇👇👇
// the rest of your code here
Hope that helps! Kudos and keep coding!
@@sentgine I found the issue. I found out that Laravel should always be served out of the root of the "web directory" for Livewire to work, and I wasn't. I was using XAMMP and I was using localhost/laravel-cms/public to do the testing. When I did "php artisan serve" then 127.0.0.1:8000 to test, that worked. Thanks.
That is amazing Sheerios! I'm glad you resolved the issue! Awesome! Kudos to you! 🙂
that is six months ago, the livewire now, is not as it was, the modal doesnt work now with the same coding as you explained in your tutorial, like creating a property with the name of the modal and setting its value true , false. There should be something else to control the modal opening and closing , I think
Unable to locate publishable resources.
i got error
how to solve this?
Hi Jomarie, try running ---> php artisan jetstream:install livewire
@@sentgine nice nice it work :)
@@jomariemeguiso8358 You're welcome! Kudos and keep coding!
is this livewire tutorial?
why don't show text editor?
Hi Artificial! I'm not so sure what you mean. Can you explain further so that I can assist you?
6:32
please create and update content with images , trix editor
Hi Lord! We'll try to see the trix documentation with regards to that!
@@sentgine ohh , you are so kind billy , you are best 💪
No worries Lord! I'll try my best to respond. I've been getting too many messages recently that it became so hard to keep track haha!
@@sentgine keep up the spirit billy , maybe i will be your fan hahahaha
@@sentgine Any chance that you already got some "intel" on how to make it happen? :)
i would really appreciate that, that's the only thing i'm kinda "missing" :)
I suggest that you remove the background music.
Hi تعلم معي الإنجليزية! Thank you so much for your generous feedback! We will work that out on the succeeding videos! Kudos and keep coding!
@@sentgine i like the music. is better the complete silence when you are not speaking
@@ang-p6d Yes! Thank you Angelo for understanding! I admit that there are some parts of the video that don't require a voice-over so I add background music to cover them up.
Bro I'm losing my mind, I find it difficult to follow.
Mind telling me which part where you're confused at? I might be able to help.
Perhaps you can slow down the video a bit.
@@sentgine I just find it a lot of information, I'm only able to process so much at a time.
You see, I am making my own software business which requires laravel and PHP.
Using just that without any packages or libraries works fine, and I could do stuff like login system, user profile, chat, etc.. by hand, but it would take a long time, and livewire with jetstream could take that away from me, but learning it also takes a lot of time.
What do you suggest I'd do: learn it anyway or do it by hand the old way?
@@danielk.3017 If you already know the PHP fundamentals, then it would be a waste of time doing it by hand the old way.
Just give Livewire and Jetstream a chance. On the other hand, you could also try Breeze. Regardless of what you choose, you will always have to spend time learning them. It's just the way it is, and that's okay :)
@@sentgine Thank you
Kindly record it in your own voice
Hi Muhammad! Thank you so much for your appreciation! We will work that out in future videos! Kudos and keep coding!
@@sentgine thanks for your kind response. This will going to be more fun if it is your own voice ...
@@muhammadjawad7604 Thank you so much Muhammad! We will try to do that sometime in the future! Stay tuned!
Livewire is such a horrible framework. I have no idea why they're pushing it on everyone.
compared to what? it got me page 1 on every google site I made so far? I can build websites that load only what i need for google with amazing seo. Where vue was a total pain in the butt to even get seo correctly.
@@someguytu Okay, good for you. But using livewire just because of SEO is an XY problem. Enjoy.
@@someguytu Yes Vitu! That is because you are able to manipulate the power of server-side rendering on your sites while also keeping the reactive stuff that most frontend frameworks do (thanks to livewire). Google search indexes your site effectively if the page is rendered from the server-side. On the other side of the coin, Vue and React can be effectively used for Admin Panels where you don't really require SEO stuff. But you also use Livewire for Admin Panels as well, it's all about preferences.
@@klex3905 Hi Klex! For SEO, having a WordPress website is also great!
@@sentgine you both don't understand. SEO is not a framework problem. 🤦🏻♂️