What are we going to build? and Who needs this?
If you are a tech-savvy entrepreneur 👨💼with limited budget💰, and you love to try out coding 👨💻 on PHP/HTML/CSS/JS without paying any single cent to Web Design Agency. Then you are in the right place! We will build a fully customizable CSM (Content Management System) Website — which can Publish Blog Posts, Customizable Page Content, Membership System, and more…
You will not pay anything throughout the journey until you are ready to publish your website (If your site is for Commercial use!) For non-profit, student projects, personal projects, and hobbies, you are free to use the Laravel Backpack — the Admin Panel package which saves hundreds of hours of your web development journey.
Prerequisite
- ✅ Setup Laravel Development with Laravel Sail (Tutorial)
- ✅ VS Code with Laravel helper plugins (My Plugin List)
- ✅ Version Control — Git
- ✅ Version Control GUI — SourceTree
- ✅ DB Management GUI — HeidiSQL
- ✅ Follow me for upcoming episodes
- ✅ Basic knowledge of programming is required, but feel to comment about your queries…
- ✅ Complete Laravel Course from Laracast — Highly Recommended!!!
What are we going to cover this round?
✴️ The Starting Point
✴️ Get Ready on Laravel
✴️ Get Ready on the Admin Panel
✴️ Separate Tables for User/Admin Authentication
✴️ Separate User/Admin Password Reset Tables
✴️ Client (User) Authentication
🌐 The Starting Point
A basic guide for the related tools installation, you can easily find the in-depth tutorial on the Internet.
1. Git
Generally, just follow the installation wizard (accept the default options) and complete the installation.
2. Generate your SSH Key
SSH Key will be used when you are pushing your repository to Github.
Note: Skip this step, if you have created your SSH key-pair previously.
Use the RSA algorithm, for better compatibilities across the different systems.
Open Git Bash, then execute this command:ssh-keygen -t rsa -b 4096 -C “your_email@example.com”
The passphrase is highly recommended, but do not forget it😉
3. Your Website Template
The “Admin-Facing” interface will be handled by Backpack. However, you still need a “Client-Facing” interface to fit your needs. Here is the list for you to pick the most suitable one for your case (all are FREE!):
- 📌 Tailwind Toolbox
- 📌 Landmark by DevDojo
- 📌 SaaS Landing Page (👈 I picked this for this tutorial)
💡 You might notice the templates are using Tailwind CSS. I choose the same stack as Laravel Starter Kit (Laravel Breeze), so you do not need to load extra libraries. However, you are free to use any CSS framework like Bootstrap.
🌐 Get Ready on Laravel
You should be able to make your Laravel up and running by following the tutorial.
I created my project under the Linux User director for optimal performance.
(i.e. \\wsl$\Ubuntu\home\kidd\code\pro-site)
1. Make your first commit
Always make a git commit if you’re not confident about the upcoming modification.
First, click-right in the folder located in the \\wsl$, then select “Git Bash Here”. Execute the command git init to make it become a valid git repo.
You should see all the new files from the Laravel 8 fresh installation…
2. Connect the Database
Execute the command to initialize the migration table
sail artisan migrate:installProvide the IP, User (sail), and Password (password), then Save it and Open.
migration” table in your database.🌐 Get Ready on the Admin Panel
Once your Laravel is up and running, we can configure the Admin-Facing side with Laravel Backpack.
1. Require Laravel Backpack & CRUD generator
sail composer require backpack/crud:"4.1.*"
sail composer require --dev backpack/generatorsCRUD is the core of the Laravel Backpack, it stands for Create, Read, Update, and Delete. This is how users interacting with each entry in the database.
2. Start the Installation
sail artisan backpack:install3. Git Commit after Installation
The installation creates a lot of files, it might take a while for staging.
4. Backpack Login
You should be able to access the Backpack login via http://localhost/admin
Don’t worry about the register, it appears only in the local environment. You can check out
config/backpack/base.phpto change this and other preferences.
Click Register and fill the registration form. Now, you are ready to log in.
🌐 Separate Tables for User/Admin Authentication
Backpack’s authentication backend is completed separated from Laravel default authentication, but it uses App\Models\User model. The following steps will guide you to create App\Models\Admin model which is solely for Admin.
1. Star VS Code via WSL
Execute code . to start the VS Code.
2. Clone User Eloquent Model and Migration
We just need to clone and modify the content of the User model.
cp app/Models/User.php app/Models/Admin.phpModify the model’s name and remove some unused traits…
Migration of the table is required too.
cp database/migrations/2014_10_12_000000_create_users_table.php database/migrations/2014_10_12_000000_create_admins_table.phpReplace the users become admins...
3. Update Backpack’s config
Change the line in the Authentication section in config/backpack/base.php
'user_model_fqn' => App\Models\Admin::class,4. Re-run the migrations
Drop all and re-run the migrations with the command
sail artisan migrate:fresh5. Register your Admin account again
Go to http://localhost/admin and register the admin account again.
Check the HeidiSQL, you should see your account is in the admins table but not the users table anymore.
Finally, don’t forget to Git commit your changes.
🌐 Separate User/Admin Password Reset Tables
We’re using two separate tables for users and admins respectively for registration and authentication, but the reset password still sharing the password_resets table. Let’s make it in two tables to avoid conflicting emails.
1. Modify Existing password_resets Table
Change the class name and append user_ to differentiate with the admin.
2. Copy and Modify to admin_password_resets Table
Clone the file we modified above,
cp database/migrations/2014_10_12_100000_create_user_password_resets_table.php database/migrations/2014_10_12_100000_create_admin_password_resets_table.phpThen, modify to “admin” edition.
3. Configure the config/auth.php
We have to configure the tables for both user and admin, find the section “Resetting Passwords” in config/auth.php
4. Re-run the migrations
Since there is not useful data yet, drop all and re-run the migrations with the command:
sail artisan migrate:fresh5. Configure Email Settings
You need a proper SMTP configuration to test the password reset, configure your .env in the project root folder.
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=<get-from-your-mailtrap>
MAIL_PASSWORD=<get-from-your-mailtrap>
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=dummy@pro-site.com
MAIL_FROM_NAME="${APP_NAME}"You can sign-up Mailtrap for free to simulate the email send/receive with user-friendly interface.
6. (Optional) Test out the forgot password
Once your SMTP is configured properly, you can start testing it out. User and Admin are using two separate tables now!
🌐 Client (User) Authentication
We will use the starter kit provided by Laravel which is called Laravel Breeze. Basically, it gives you all that you need from login, registration, password reset, email verification, and password confirmation.
1. Install Laravel Breeze
sail composer require laravel/breeze --devOnce the Composer complete the installation, execute:
sail artisan breeze:installsail npm install
sail npm run dev
2. Register a User account
You should notice the “Log in” and “Register” appear on the top-right corner on the http://localhost/
Once the user is created successfully, you can verify it appears in the users table.
Next episode, we will discuss the Admin Role & Permission, Page, and Post Publication. Please follow me to get the updates! Thank you.
If you like my article, please clap, follow and share my article (or you could ☕ buy me a coffee ☕ ). Take care and see you soon!