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.

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

SQLyog #1 | Setting up

 SQLyog

• One of the tools that will be used for development.
• It is a database manager used to get access.
• Download > here < .

• Open Xampp and run Apache and MySQL.
• The default port is 3306.
• Add database and table, as usual, to start using.

Adding New Database

• From the database menu tab, choose 'Create Database'.
• Add database name.

Adding New Table

• From the table menu tab, choose 'Create Table'.
• Or, right-click on your database name (on the left nav bar) > table > 'Create Table'.

• Fill in the column name, and other columns. Don't forget to set PK (Primary Key).

• Click Save.

Done!

DIVI Builder #1: Sticky Menu Bar

Here's how to create a sticky top menu bar for your WordPress website using DIVI Builder. You'll have to also set your menu in WordPress. Follow along:

Create A New Menu Bar

1. Create a new fullwidth section. Fullwidth (section) > Fullwidth menu (module).

Fullwidth Menu Settings

1. Content: Primary Menu.

2. Add Logo if needed.

3. Add links if needed:

4. Choose and change any settings as wanted and click Save.

Put CSS ID For Every Section Title (Only the ones you want to have on the menu bar)

1. Section settings > Advanced > CSS ID & Classes > CSS ID.

Set Primary Menu

1. Go to Appearance > Menus > Set menu name to "Primary Menu".

2. Custom Links > Add each CSS ID declared earlier one by one.

3. Click Save Menu.

Deleting Divi Default Menu

You'll realize there's 2 menu bars by now. Delete Divi default menu by doing so:

1. Go to Divi > Theme Options > Scroll down till Custom CSS part and write the code as below:

2. Click Save Changes.

Sticky Top Menu Bar

1. Click on the section settings for the menu bar created earlier.

2. Section settings > Advanced > Scroll Effects.

3. Choose either top, bottom, or both for the Sticky Position.

4. Click Save.

Now, when you scroll down the page, the menu bar will still be visible and stick to the position you choose.

Done.

MVC (Model View Controller)

 CodeIgniter Overview MVC

Model - View - Controller
Databases - Web pages - Functions

View

• A page that we're seeing can be a view.
• In charge of presenting the HTML code. (what we see like header or any webpage).

Model

• Say if that page (mentioned in view) has a button and if we click on that button, that act could mean communicating with a model and also controller.
• Model is a folder in the framework that contains all the classes (communicate with the database). We'll have functions in those classes.
• The model separates these classes from view classes and controller classes.

Controller

• The 'middle-man'. Controls both View and Model.
• Say if we want to look at a page (View), but at the same time, we also want to get some information (Model), and then transfer it back to View. So, the Controller is going to control that.

Basically, separation of our code into these 3 different categories.

CodeIgniter3 #1 | Introduction + How to Install

As an introduction and not to complicate things, CodeIgniter is a framework. A file with a bunch of classes and functions that make things easier for us. Those functions are predefined for us.

    CI is another file that we can use with many other classes, properties, objects, etc that we can use with PHP to write code a lot easier. To make code more flexible and secure. CI is based on the Model-View-Controller development pattern.

How to install or setup CodeIgniter 3:

1. Go to https://codeigniter.com/download and download CodeIgniter 3.
2. Extract the downloaded files and rename it. For example:

3. Keep in mind that you need to first have xampp installed.

4. Browse through your xampp folder and search for a folder named 'htdocs'. Place your CodeIgniter files inside it, as such:

5. Get into your CI folder and search for PHP 'config' file.

6. Open it with Visual Studio Code and change the URL base name according to your CI folder name.

7. Save the changes made.

8. Open your browser and type in " http://localhost/CodeIgniter3/ "

9. It will open up a page that says "Welcome to CodeIgniter".

Done and ready to code!