⟡ Knowledge I gained ⟡

Monday, June 6, 2022

Livewire | How To Install

Installing Livewire

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

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

Wednesday, May 11, 2022

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

Tuesday, May 10, 2022

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

Friday, April 22, 2022

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 👋

Thursday, April 21, 2022

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.

Wednesday, April 13, 2022

Git #2: Setting Up Git Using VS Code + GitLab

Install and Set-Up

Download Git Bash and install. > download here <
Git Bash looks like cmd. Open it on your windows.
Try typing "git" and hit enter. To know if git has been properly installed, other commands will appear.

Generating SSH Key

Type the code below in Git Bash command window.

ssh-keygen -t rsa -b 4096 -C “your email”

Change the red text with your email.
Then, just click 'Enter' until you get the key's randomart image.
To check, go to C: (pc) > Users > DELL (pc name) > .ssh > open id_rsa (mic publisher) using VS Code.
You'll see a long code starting with ssh-rsa and ending with your email. Copy everything and go to GitLab.
Go to profile icon (on top right) and click Edit Profile.
From the left menu bar, click SSH Keys.
Paste the code you copied earlier into the Key column. Change the title to 'pc key' or anything you prefer. Click Add Key button.
Now go to any of your existing projects on GitLab and click Clone with SSH.

Open Git Bash, type " cd htdocs " (make sure you're in xampp) and click enter.
Then type, " git clone " + paste the SSH that you copied, and click enter. If there appear a message, type in "yes".
In the Git Bash, type " git config --global user.name Nur Farizah(your username in gitlab) ". Hit enter,
Then, " git config --global user.email yourEmail ". Hit enter.

Connecting with VS Code

Open the project folder in VS Code. VSC > Open Folder > C: > xampp > htdocs > your project folder > Open Folder.
To know if you're already in the folder, you'll see the name of your project folder at the top of the VSC window.

To Push

VSC > File > New File. Create a simple HTML. Save the file name.php.
Click the '+' button to stage changes.

We'll commit/push the one added into the Staged Changes section.
Add any message about your changes in the box above it, and click the Commit button.

Go to the bottom left, where you can see a turning arrow button. Click on it. If a message appears, click OK. (This button will do pull, then push. It'll check if there's any conflict).

Creating A Branch

Click the button (branch button) next to the turning arrow button earlier.
Choose Create a new branch...
Enter any name you want. (Can use format like, F(initial)-Add-Changes).
Click Publish Branch, and proceed to clicking the same arrow button.

Create New Merge Request in GitLab

Open GitLab > Choose your project > click Merge Request menu.
Click Create Merge Request.

Enter the title, and you can choose to set the Assignee to yourself or any person in charge.
Click Create Merge Request button.

Done!

Git #1: What is Git?

What is Git and Why Use It?

Basically, Git is a commonly used version control system (VCS) that helps developers keep track of changes they made so that there are records of what has been done. You can also revert or go back (undo) to any specific versions if needed.

Git helps make collaboration between developers easier by allowing multiple changes to be merged into one source.

Git runs locally which means your files and their history are stored on your pc.

VCS Generation

1st Generation

The first generation VCS were intended to track changes for individual files and checked-out files could only be edited locally by one user at a time.
Weakness: Code can be edited by one user at a time.
SCCS (Source Code Control System), RCS (Revision Control System).

2nd Generation

Allowed multiple users to check out and work with the code at the same time, but they would all be committing back to the same central repository.
Weakness: network access was required to make commits.
Example: CVS (Concurrent Versions System), SVN (Apache Subversion).

3rd Generation

The third generation comprises the distributed VCS.
Example: Git, Mercurial, Bazaar.
The difference is, that it has a server repository (in pc).
SCM > VCS > Git > Github, Gitlab (git provider).

Git Workflow

Terms When Using Git

1. Clone

Like a 'pull', where we take the source code from 'Remote' into our PC. (first code).

2. Commit

Choose which file to be committed.
When we choose to commit, it will save the changes to the local repository. Then, will push to the remote repository. (here is where our base code lies. So, need to be careful).
"Commit changes".

3. Push

4. Pull

Take the changes and insert them into the local repository.

5. Merge