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

Laravel #1 | Intro + Install (w/o composer)

Composer

A composer is a dependency manager.

A dependency manager, for example, if we want to create a login system, we want to use the already existing library and not do anything from scratch. A composer helps us manage, install and load the library into our text editor (VSCode/Sublime etc.). We can use PHP Monolog in the composer library to create the login system.

We can install as many as we want and composer will help manage them.

Try to run Composer

• In VSCode > Open any project > Terminal menu > New Terminal > type composer then click enter.
• You'll see something like this:

There are 2 ways of using Laravel, first, we use a composer to create a Laravel project. Second, we use the composer to install the Laravel. It is better to install Laravel (latter) and use it without the composer.

• In the terminal, type, composer global require laravel/installer. Hit enter.

Now, we can start using it.

• Try creating a new project. Type, laravel new test-project.

• Go into your project folder, cd test-project. Then, run php artisan serve.
• Copy the link provided, go to your preferred browser and paste them. You'll see the Laravel page as below:

Environment Variables

• In VSC, open .env file. (ctrl+p to search). By default, it will generate this file.
• For all of the projects that you make, you'll find .env.example file.
• .env is a private file (contains secret key etc.) and we do not want to share that info. We are not going to commit this file into repo.
• We'll commit .env.example instead. Others can see the example but will not know the real value that we have in .env .
• Let's say if we introduce a new variable, we'll make the changes in .env.example and commit that file. Others can just copy the changes from .env.example that they get (pull), and paste to their own .env file.

Rollback

• To be used if you no longer wish to add the changes you made. (revert/down)
• Type in php artisan migrate:rollback.

Routes

• In VSCode > ctrl+p > search routes/web > click web.php.
• By default, there are 4 different types of routes (see explorer bar).
• We have API (usually we open our API for other people to connect. They're going to consume, while we provide some data.) and SPA/WEB (backend/frontend. In web, they're combined. In spa, they work separately.).

HTTP Method

• HEAD
• GET = to fetch data. Read, not write.
• POST = write. To insert.
• PUT = write. To update. More common than patch.
• PATCH = write. To update.
• DELETE = write.
• OPTIONS = write. To update, but with attachments.

To test, again in VSCode > web.php > type in:

Route::get('/me', function () {

    return "Hello World!";

});

Then, go to your browser and add '/me' to the (previously opened) Laravel page url bar.

PHP Callback Functions

• A function that is passed as an argument into another function.
• Any existing function can be used as a callback function.
• Used for easy implementation (instead of controller), for example, to redirect.

Models and Migration

• In the terminal, try typing in php artisan. We're not going to use all of the commands. It depends on what you're trying to make.
• To create a model, type php artisan make:model --help. Every command that we want to run, it'll have --help, -h, /? or ?.
• You can also do php artisan make:model ModelName. Hit enter.
• For controller, type php artisan make:controller ContName and hit enter.

• Open the file. ctrl+p > ModelName.php.
• You can explore more on PHP traits.

Namespace

• As you can see in the ModelName.php, there is App\Models;

• namespace is like a path. If we require the files, we need to specify the path.
• Try creating a new folder in app > "Service/Admin". (skip this part if you want).
• Then, create a new file inside Servic/Admin > AdminService.php.
• The namespace will be:

• Try typing in as shown below:

Now, we're going to try with the database (I use SQLyog).

• In SQLyog, create a new database. Database > create database.
• In .env.example, put your database name:

• In the database that you just created, open table 'User' (right click and refresh, if you can't find it) and add dummy values (just for testing). Don't forget to save them.
• Go back to your routes, web.php. (*Note that we don't need any functions). Add use App\Models\User after use Illuminate\Support\Facades\Routes.
• Also add:

• Now, refresh your browser and you'll see something like this:

Done! Try and explore more 👋

Install and Run Laravel - Composer and Xampp

Make sure you already have Xampp installed.

Install Composer

• Can go to >1< or >2< to download a Composer for Windows.
• Install the composer.setup. Click Next and it will automatically detect your PHP file. Click Next, then Install.

• Click Finish and that's about it.

Setting Up with Command Prompt

• Open cmd, type in cd c:/
• Type, composer global require laravel/installer 
• Type, cd C:\xampp\htdocs
• Then, composer create-project --prefer-dist laravel/laravel app(you can change this).
• Wait until it is done and successful. After that, type in cls.
• Try typing in, php artisan serve. It could not open input file because we are not in the right directory.
• Now head into the folder that you've created by typing, cd app
• Now type in, php artisan serve. 
• Next, open your browser and type in 127.0.0.1:8000(port number given) and a Laravel page will show.

*Note that every time you want to do this after you type in 'php artisan serve', a new port number will show up. So, use it to open Laravel.

Done!

Download and Setting Up PHP 7.4.xx

What is Laravel?

Laravel is a free, open-source PHP web framework for the development of web applications following the MVC architectural pattern and based on Symfony (a web app PHP framework that also relies on the MVC pattern).

Download PHP > 7.4 (Windows 10/8/7)

How to download and install manually:

• Launch your preferred browser, click >here< and click Downloads on the top menu bar.
• Click Windows Download for the Old Stable PHP 7.4.xx version.
• Check your system type, 32-bit or 64-bit.
• Under thread safe section, click the zip link to start downloading for your specific system.
• Once complete, unzip the PHP folder.
• Copy the unzipped folder and paste in your desired drive (C or D). Rename the folder if you want to.
• Open the PHP folder and look for "php.ini-development". Make a copy of this file and rename it as "php.ini".
• Open php.ini file with your preferred text editor (VSCode/Sublime etc).
• Search for "extension_dir" and uncomment like below:

• Now, open the command prompt, and type in 'php'. "not recognized" message will appear. PHP is not yet set to the system's path.
• Go to C/D drive (wherever you pasted the PHP folder). Open it and copy the location.
• Go to Start menu, type "variable".

• Go to Advanced > Environment Variables > Select 'Path' > Edit > New > Paste the PHP folder location path > ok > ok > ok. (Do this for both path, top and bottom window).
• Now, restart the command prompt. Type php -version.

• Type as below.
• The 'code .' let you open in VS Code. Use 'subl .' to open in Sublime.

• Try typing:

Done.