DIVI Builder #4 | Install DIVI themes into WordPress

Let us now look at how to install and use Divi by eleganthemes.com on WordPress.

Log in to your eleganthemes.com account. From the top menu bar, click Account and choose 'Product Downloads'. Click 'Download the Divi Theme'. Yes you need to download it first. You'll get a zip file.

Now head back to your WordPress site.

From your left menu bar, find themes. Then find a button that says install a new theme or anything near that. Now try uploading that Divi zip file you downloaded earlier.

...

okay now hold your horses. Do you get this error?

It's okay, that is why this post right here exist so that I can show you what to do.

Now, time to adjust some settings. 

Go to cPanel > MultiPHP INI Editor > choose your site > change "post_max_size" and "upload_max_filesize" to any number/size bigger than your Divi file (eg: 20MB)

Ok now try uploading that Divi file again and pray for it to work.

Ok proceed people. Now that you have this (YES!), you need to activate it to start using it. At the same themes page, just click activate on Divi. You'll see it and you'll get what I mean.

Appearance > Theme. You'll see Divi! Click Activate! You are done! We rock! We made a mistake but we still rock.

That's it. bye. Have fun editing!

DIVI Builder #3 | Introduction to Visual Builder

 Enabling the Visual Builder

Open WordPress dashboard > Pages > navigate to any page > Edit > Enable Visual Builder.

This is a drag-and-drop page builder.

The Basics

1. Sections

Used to create large groups of content.

3 types: Regular, Specialty & Full-Width.

Regular: made up of rows and columns.

Specialty: have advanced sidebar layouts.

2. Rows

Sits inside sections.

3. Modules

DIVI Builder #2 | How to Install into WordPress Theme

Go to elegantthemes.com > login.

Account > Product Downloads > Download the Divi theme > you'll get Divi.zip file.

To upload theme, go to WordPress dashboard.

Appearance > Themes > Add New > Upload Theme > upload Divi.zip file.

After the theme has been fully uploaded, click "Activate" to start activate and using the theme.

No one knows.

cr: Valentin on Pixabay

 

Assalamualaikum wbt.

    It's 11:11~ It's just me and my soft, comfy playlists. I was listening to one of Stray Kids' songs just now and it just hit me how uncertain the world actually is. Like, everything, everyone, just 'living' itself is so uncertain. No one actually knows what they're doing. We're all experiencing this moment, this age, this,, you know, whatever we're doing right now, we're all experiencing it for the first time. Isn't it amazing? How we choose to keep on living without knowing what's gonna happen, what's there for us, what bad or good things life has in hand for us?

    I'm in my 20s right now and I mentioned this a lot, how I'm afraid of adulting and all of the responsibilities that will come with it. I still am. But tbh if we actually looked at it, even people who are in their 40s, or 50s, are still afraid of what's to come. Cuz again, they have no idea what's gonna happen too. Nobody knows. We're literally living, holding on to our faith in Him.

    And for that, I feel like I should say this to myself and to anyone who's reading this blog right now, if you, we, I, us (LOL), have anything that we wish to do, go and give it a try. At least give it a try. Right now we're at the oldest we can be and also the youngest we'll ever be again. Say you're 30 right now and suddenly felt like you wanted to ride a horse (Idk where this comes from), then go for it. Cuz why not right?

    We only have one shot at life. Why don't we just go all out yknow. YOLO hahaha. As for me, personally, I have A LOT of stuff that I wanted to try. I'm the curious type so even for things as simple as crochet, for example, I really want to try that. Just, literally, try everything that exists in this world.

    I hope everyone gets to do what they love and live the life they dream of. That includes me of course. Let's keep on fighting people! hahahha what a crappy ending. That's it for now. Good night!

Are we back?

cr: Kumar on Pixabay

 

Assalamualaikum.

    

    Hey~ wow that was awkward. Let's skip the whole hi hello intro part and get right into the main context (do I even prepare one?).

    Well anyways, I realized that the last time I actually wrote about stuff/stories/etc on this blog was months ago. September 2020 to be exact. Serious tak sangka dah selama itu. Oh and pardon me if I switched from English to Malay every now and then cuz that's how I am. A queen of inconsistency. You can probably tell from how NOT often I updated this blog. Hey at least I put the effort to change the theme. It's gotten a lot simpler now. The blog is in full white and I like it. Simple and minimal.    

    Ok, life update. Nothing much going on. Alhamdulillah aku dah selesaikan last semester aku which is my internship, dengan jayanya. And with that, maka tamatlah degree aku yeay! Alhamdulillah habis dah degree. Sekejap je rasa. Lagi2 sebab degree aku fully ODL sebab Covid-19. Tbh, I still can't digest the fact that I have finished my studies and am now working. Yes gurl, I am now working!!! My 9 years old self would be super proud.    

    I'm currently working for a software development company as their Marketing Executive. Yeah I know most will probably question, how in the world did I go from multimedia computing to marketing. The answer is, I don't know. I simply have no idea. But hey, life is full of surprises. We just gotta let it flow~     

    It is indeed a bit hard to adjust to that position since marketing is not really my cup of tea but it's okay. I'm fine as long as there's something new for me to learn. I'm a passionate learner (cehh kauuu hahah).    

    Ok that's enough updates about me. As for this blog, I'll try to be diligent, try to think of various topics to share with everyone and I'll also post stuff related to my life of course. This blog is mainly created because I wanted to write and store my memories. Till then~ Have a good day.

Livewire | How To Install

Installing Livewire

1. Open your Laravel project.
2. Open new terminal.
3. Type in composer require livewire/livewire.
4. In any of your .blade.php files, include the livewire front-end assets.
5. Put @livewireStyles in <head> tag.
6. Put @livewireScripts at the end of the <body> tag.

That's it! Completely installed and ready to be used.

Blade Template #3 | Extract partials + Paste a list of data

Extract Partial

• Open app.blade.php.
• Imagine you want to extract the below code into a navigational partial.

• Cut out that exact part of the code from app file and create a new file under views named nav.blade.php.
• Paste the code inside nav.
• How to bring navigation inside app? Use a keyword: @include.
• In app body part, write down @include('nav') :

• Refreshing your browser will get you the exact same thing.
• If you want to use the same navigation, simply include the keyword.

Paste a List of Data

• For the routes, make sure to use controller as such:

• Then in HelloController.php, make a fake variable (just to test):

• Don't forget to add compact as the second string.
• Then, in service.blade.php, we only need to use php:

• For this method, you need to make sure service (the variable) actually exist.
• If there is no content in function service (in controller), instead of using @foreach, we can use @forelse.
• forelse allows us to add a new section which is @empty:

• Whatever you put in between @empty and @endforelse will get output if there are no services.
• You can put list item or paragraph that says "No services available".

End

Blade Template #2 | Set Navigation

Simple Navigation (unordered)

• Type the following code inside the body in app.blade.php.

• These 2 routes don't exist yet. Head to web.php and type:

• In controller (prev HelloController.php), create 2 functions about() and service().
• In browser, you'll get something like this:

Now you have navigation, without any repetition.

Side Note

If you have a route that has a get method and hits controller, and inside of that controller, the only thing you are doing is returning a view with no any other actions, there is a shortcut for that.

• In the route, you can do this instead:

• Refresh your browser and everything works well. Except now you don't have to use a controller.

This is a shortcut to get a view in your page right away.

End

Note | Laravel + Blade Template #1

What is routes?

• How we tell Laravel, how to respond to different addresses.
• In VS Code > Directories > routes > web.php (only interested in this).

The slash '/' meaning nothing or no route is returning the view 'welcome'.

What is views?

• This is a helper function.
• As shown in pic above, to know how 'welcome' translates to a whole html, go to resources > views. You'll see welcome.blade.php.
• Views need to labeled as so.
• Use bladder to make it simple.

What is controller?

• To pull all codes from web.php, into a dedicated file (controller).
• Like a conductor of an orchestra. Doesn't play any instrument, and conducts upfront, everybody follows him and does what needs to be done. Didn't play any part, but knows when it is someone's turn to play their part. He cues them.
• Type php artisan make:controller ExController to create new controller.
• The directory: app > Http > Controllers.
• Can use new naming for action in web.php (route), App\Http\Controllers\ExController@index (change function).

What is Blade?

• A templating engine that comes with Laravel.
• Can be used to compose all views.

Let's do an intro exercise to look at how it functions.

1. resources > views > delete all existing files and create a new one named app.blade.php.

2. In web.php (route), notice that we're still using HelloController.

3. app > Http > Controllers > HelloController.php. Change the contact of index() function as below:

4. Open app.blade.php, write a simple <h1> and run php artisan serve.

5. Open in browser. Sure enough, it's working.

Now, we'll focus in app.blade.php created earlier. In the file, type '!' and click enter. You'll get basic HTML coding. If you put <h1> or <p>, by right nothing changes and it still is just a basic HTML page. If you create another blade (eg: about.blade.php), you'll have to generate the HTML all over gain.

There's a way not to have us generate the same HTML over and over for every single page. We'll make one of the view page (app.blade.php) as a TEMPLATE.

Blade Template

• A way to tell Laravel that that view can be extended.
• Need to designate certain areas where the user would be able to customize the text. Eg, the title. We don't want the title to be hard-coded. To do that, we'll use the @yield keyword.

@yield

• Inside this, we need to pass a key to target where.
• In app.blade.php, try typing as below:

• To make about.blade.php look at app, we'll write @extends('app'). About page will contain everything in app.
• To change/customize the title, add @section('title', 'About Us').
• To test it out, in our controller, change the view to about.
• Go to browser, refresh, and you'll notice that the title is now changed but the content is the same as the one written in app page.
• To check, you can view page source.
• Another section that'd make sense is the body area. Inside body tag, place @yield('content') as so:

• Here is where the key @section in blade page will be different.

@section and @endsection

• It does not make sense to put html codes in the second string of @section. Hence why we can use @endsection.
• Here's an example of about page:

• app.blade.php is now simply our template file.
• Try refreshing your browser and see the result.

End

Note | Taskman (create tags)

1. Clone taskman (follow previous tutor) from GitLab.

2. Open folder taskman (cloned. in xampp htdocs).

3. Terminal > New Terminal > Install dependencies, type composer install.

4. Wait until finish.

5. Copy .env files. Type cp .env.example .env.

6. Serve the app. Type php artisan serve. Can copy http link and paste in the browser.

7. New terminal, type as below, to create model and controller:

8. Add route at web.php.

9. Create migration. ctrl+p search migrate. Create a new file. Set the name as the date when you created the file and what you want to do.

10. Under resources/views/tags, add form.blade.php and list.blade.php. Form for creating new tags and list for listing out all tags created.

Merge

1. Click branch (bottom left icon) > Create new branch > put initial (z). Check bottom left if branch is created.

2. Source Control menu > Stage changes (Click now new 'U' ones created or 'M' changes) that you made > add Message (same as branch name) > click Commit icon (right icon).

3. Open GitLab and create a new merge request (in the project GitLab). Assign to PIC. Uncheck delete branch and check whether the changes to commit are correct.

Correction (10/5)

• TagsController > add() to create() (standardized function name).
• TagsController > add_process() to store().
• form.blade.php > tags.add_process to tags.store.
• web.php > add_process to store.
• web.php > add to create.

End