Create Instagram Clone with Laravel (Part 2): Project Overview and Introduction to Artisan, Blade and View

As I mentioned in the previous post, I decided to make a post based on what I've learned from freeCodeCamp's full course video. If you search "Laravel" on YouTube, this video came up first. This is more like a notes for myself so I don't quite recommend people to take this as guide, if you found my blog in google search. But if you follow the same course as me, only then this maybe could help you out a little bit.

I kinda take a risk here for choosing that video to learn because it was uploaded in May 2019, still on Laravel 5 when there's already Laravel 8 now but one user's comment caught my attention:

For anyone who is starting this project and you are wondering if it is worth it ? It is 100 % worth it - Alex Fancy

In a heartbeat, I choose to proceed. I don't know if I'm too easy to convince or just lazy to search for other video. I thought I would just Googled any error I will come across. Perhaps I will gained extra knowledge from doing that. By the way, I'm going to really take my time in learning this framework. Watch some bits and immediately make notes because I really really want to truly understand it, rather than just following whatever the instructor do blindly. In my experience, knowledge don't stay long with me if I do the latter.

Oh God, that's a long introduction.

In this post, I covered from minute 0:00 until 11:00 of this video.

In the course, we're going to create an Instagram clone, a 100% from scratch while also learning the basics. To me, it's like killing two birds with one stone. The project will be able to:

1. Follow/unfollow user
2. Edit profile and change profile image
3. Resize image from scratch using Intervention
4. Add a new post and insert caption
5. Authentication such as login, logout, forgot password and register

Sounds super interesting! 

The instructor doesn't teach you how to install all the required programs but I already have covered it in previous post. He also assuming that you have the general knowledge of PHP. 

First and foremost, we're going to create the header:

Before we could do anything, we have to create a new project first. To create a new Laravel project, use the command laravel new YOUR_PROJECT_NAME. This will create YOUR_PROJECT_NAME directory containing a fresh Laravel installation with all of Laravel's dependencies already installed. I created and named my project MySite. The installation is going to take some time.

When it's finished, you can enter your project directory with cd YOUR_PROJECT_NAME. A LOT of files were created in the directory and it seems really daunting. But the instructor ensured this will become your second nature overtime. I hope so!

The first file in the folder that we got to know is the composer.json, located in the root directory. This file holds our project assets. It means, when we are using dependency manager which is the Composer, the Composer itself also needs instructions. And that is what this file is for. But we will probably never touched a lot of the stuff in the file.

Now, we go back to command line. To do a ton of different things to your application, we will use Artisan. Artisan is a command line tool that ships with Laravel. We could also interact with the entire Laravel application through it using Tinker. I don't know what Tinker is but the instructor said we will get to that later.

Now try to run php artisan (make sure that you are inside your project directory). After you run it, you will see a bunch of list. These list is all the command you can use to do all the different things to our application like was said earlier. To give you the better idea of it, run command php artisan serve. It will then output an address. Copy this address and try open it in your browser.

Laravel has a built-in php server which you can use using that command. To keep your project serve in the browser, don't close the terminal, just let it run in the background. Open a new command prompt to do other things. For my convenience, I downloaded Windows Terminal from Microsoft Store so there will be only 1 window, but multiple tabs of console.

Now we're back to the project. Where we could find anything related to HTML? Where's the automatically generated homepage is stored inside our project directory? It's fairly simple. It's in resources > views. The homepage file name is welcome.blade.php. 

What is Blade? Blade is a rendering template that allows you to thrown in snippets of PHP in your views without making it feel like you're hacking away at your views because views are primarily be composed  of HTML markup. In the view, there should be no reason for you to be computing, fetching database queries or anything. For those things, we'll use Controller that will be learn later. Try making some changes in the view and refresh the page in the browser!

That is all for now! I spend days to write this, I thought I wrote a lot but the post is only long because of photos! 😭 Due to it being lengthy, I still need to stop here. I really don't know how many parts this is going to take if I continue with this pace... the video still has 4 hours left to watch. 😱 No matter how long it will take, hopefully I'm still able to finish it!

---

Highlights ⚡

• laravel new YOUR_PROJECT_NAME for starting a new project
• php artisan for command list
• php artisan serve to start development server
• Anything HTML-related is saved in view
• View is stored in resources > views with .blade.php extension
• View does not contain computation or fetching
• Blade does not restrict you from using plain PHP code in view