# 上益 Laravel 2021-06-03-課程共筆
---

## Laravel環境設定
#### 前置需安裝軟體（需照順序）
1. xampp
2. nodejs
3. composer
4. heidiSQL

---

## 安裝
* ### xampp
用於架設簡易伺服器。
安裝：<font color="#249E13"> ->一直下一步</font>

* ### nodejs
用於管理套件用。
安裝：<font color="#249E13"> ->一直下一步</font>
>nodejs就是一個可以執行 JavaScript 的環境是一個，在server端運行，也可說是一個後端框架讓js也可以直接跟伺服器溝通，也有人直接用node.js寫後端。

* ### composer
套件管理工具。
安裝：<font color="#249E13"> ->==注意安裝過程中，COMPOSER的PHP路徑指向要打勾==
打勾後，剩下的一直按下一步就好</font>
>後端框架無法像前端直接使用外部連結而需要整包下載，而composer就是管理這一包包的框架，有需要的框架可直接使用他呼叫。
>


* ### heidiSQL
資料庫的UI管理介面。

OS沒有heidiSQL這套軟體，可使用sequelpro。
https://www.sequelpro.com/

![Uploading file..._q9i4dr38q]()

---

## 環境測試
開啟cmd(快捷鍵Win+R)輸入以下指令：
測試是否有安裝成功 <font color="#249E13">-></font> ==每一個都需抓到==
* node -v
* npm -v
* php -v
* composer -v
* 開啟XAMPP <font color="#249E13">-></font>點MYSQL <font color="#249E13">-></font>==start要顯示綠燈 (check port 3306)==
* 再開HeidiSQL <font color="#249E13">-></font>新增工作階段 <font color="#249E13">-></font>按開啟

==composer安裝成功畫面==

==XAMPP開啟畫面==

==HeidiSQL開啟畫面==

---

## VSCODE part
### VSCODE要安裝的套件
>套件安裝原則：選最多人安裝的
* Laravel Extension Pack(Laravel安裝包)
* PHP Extension Pack(PHP安裝包)
* PHP Namespace Resolver
* Material Icon Theme(呈現icon圖示，方便檔案管理)
* Bracket Pair Colorizer

---

* ### 安裝composer＆npm
#### Open Folder選專案父層資料夾
==資料夾要是空的==
>專案資料夾清空(假若是手動刪除資料夾內容，記得隱藏資料夾也要一併清除）

#### 將TERMIAL(快捷鍵 CTRL+~ )叫出，輸入指令：
`composer global require laravel/installer`
<font color="#249E13">意思是 ->透過composer創建環境，基本上輸入過一次就好</font>
>

`composer create-project --prefer-dist laravel/laravel projectname "7.*"`
<font color="#249E13">意思是 ->創建專案，projectname=你的專案資料夾名稱， <font color="#FF5E5E">"7.*“ =>版本號</font></font>

>若還是報錯，可另開一個全新的父層資料夾（乾淨的＝資料夾內無任何檔案），便可正常安裝。

==Ex: <font color="#FF5E5E">project directory "D:\@GitHub\first-laravel" is not empty.</font>==


#### Open folder選剛剛用指令創建出來的資料夾(projectname）

將TERMIAL(快捷鍵 CTRL+~ )叫出，輸入指令：

composer install
npm install

---

* ### HeidiSQL新增一個新的資料庫並命名
![Uploading file..._cev5znfb5]()

---

* ### VScode

Open folder選擇專案資料夾<font color="#249E13"> -></font>修改專案資料夾內.env  裡面的==DB_DATABASE== 要和剛剛新建的資料庫中名稱一致，才能正確地連結到資料庫。

![Uploading file..._l53w80z40]()

>※NodeJS安裝的插件，都在Node_Modules裡，可用來管理套件。
>※Composer安裝PHP相關檔案，都在vender裡面，是用來管理PHP的。

---

* ### 啟動Laravel伺服器
將TERMIAL(快捷鍵 CTRL+~ )叫出，輸入指令：

`php artisan serve`
<font color="#249E13">-> 將啟動Laravel</font>

按著Ctrl點擊IP (http://127.0.0.1:8000) 就可以打開網頁
>啟動時無法給指令，必須要暫停關掉，或是再開一個terminal

`在terminal 下按 ctrl + c `
<font color="#249E13">-> 可停止Laravel</font>
><font color="#249E13">-></font> 網址是http://127.0.0.1:8000
><font color="#249E13">-></font> 網頁出現Laravel的頁面
><font color="#249E13">-></font> 代表成功安裝Laravel



---

* ### GitHub檔案上傳／下載

#### 上傳
Git Hub desktop<font color="#249E13"> -></font>選擇加入現有專案 add existing repository（選擇創建好的資料夾）==如檔名重複，需到網頁版將原有檔名刪除==


Git ignore<font color="#249E13"> -></font>選擇Laravel<font color="#249E13"> -></font>然後create repository
==避免傳送過大的檔案到github上==


#### 下載
在push Laravel時，github不會把vendor與node_modules推上去，因為檔案太大。
在異地電腦使用github下載Lavarel檔之後，要重新安裝composer跟npm才能使用完整Lavarel檔。
>往上滑 ==安裝composer＆npm==

#### env檔設定
1. <font color="#249E13"> -></font>展開vendor資料夾
1. <font color="#249E13"> -></font>複製貼上env.example
1. <font color="#249E13"> -></font>更改copy後的檔名為.env
1. <font color="#249E13"> -></font>更改DB_DATABASE資料庫名稱
1. <font color="#249E13"> -></font>重產一個APP_KEY（TERMINAL輸入：php artisan key:gen）
1. <font color="#249E13"> -></font>在TERMINAL輸入指令：` php artisan serve`