Laravel Episode 4: Models, Migration, and Database


episode 4

Episode 4: Models, Migration, and Database
  • Look at the /config/database.php file
  • Use sqlite for demo database
touch storage/database.sqlite
  • Look at migration files
  • Explain naming convention
php artisan migrate
  • Explain migration, rollback, and refresh
  • Explain up() and down()
  • Explain what timestamps() is
  • Create a default record for user
  • Create a migration for roles table

Laravel Episode 3: Controllers and More Views


episode 3

Episode 3: Controllers and Move Views
  • Refer to topics covered in Episode 2
  • Adding assets locally using Node – jQuery and Bootstrap
  • Continue editing the Bootstrap layouts
  • How Controllers are used with Views
  • How to apply active CSS class for controlling style of navbar
  • Adding notification section

Laravel Episode 2: Views, Layouts, and Elixir


episode 2

Episode 2: Views, Layouts, and Elixir

 

Introduction

  • Get episode2 branch from Github.
  • The V in MVC is View. Views are what is being displayed to the user.
  • Views are found in the /resources/views directory.
  • Show how the default is displayed by explaining the routes file and the view file.
  • Show example of .gitignore file.

Use Bootstrap Example

  • Copy and replace the default view file with Bootstrap.

Elixir

  • You need to have Node and Gulp installed.
  • Explain the following files
  • app.less
  • app.css

Laravel Episode 1: Starting A New Project

My first time streaming on livecoding.tv. I wanted to share with people how I use the Laravel framework. I decided to create a fictious project and call it Storedemo. It’s pretty much a demo of an online store. I chose this because it will provide different case studies. Being my first time, I ran into some technical difficulties. Fortunately, a support staff joined the room and was able to provide assistance. I had to cut the stream. That’s why you’ll see two episodes/videos. Below are the links where you can watch them. Hopefully in the future I can embed them.

episode1

Episode 1 Part 1
episode1 part2

Episode 1 Part 2

Here is a summary of what I discussed in the videos.

Introduction

  • Why am I doing this?
    • To give an example of how someone develops in Laravel.
    • Help give a direction to newcomers of the framework.
    • Not meant to be a “best practice” or “this is how you should…”

Development Environment

  • OS X Version
  • Homebrew
    • PHP
    • PHP Mcrypt
    • MySQL
    • Composer
    • Git
  • Describe the directory structure
    • ~/apps/laravel/project_name
  • Laravel 5.1.x LTS
  • IDE
    • Sublime Text 3
    • PHPStorm
  • Sequel Pro

Create A New Project

composer create-project laravel/laravel=5.1 storedemo
php artisan --version
php artisan

Project Directory Structure

Talk about different directories and files of interests.

Using PHP Built-in Webserver

php artisan serve

Show how the route and views work.

The Nexus 6P Is Near Perfect

My experience with the Samsung S6 has been a shaky one. I went through 3 different ones before nearly switching back to iOS. I tried out the S6 Edge for a few weeks then I returned it. It took great photos but battery life and the device got a bit warm for my taste. Not to mention the very unstable OS. One of the features that made me try Samsung again was the ability to disable and/or uninstall unwanted apps – I really don’t like TouchWiz. I guess by disabling many of the apps, it created a very unstable experience… what’s the point? Next, I decided to get a regular Samsung S6. The OS felt lighter because it didn’t have apps for the “edge” screen. It was great for a few months then it kept crashing. I was able to replace it for another one but in a different color. Sadly, the lack of Android updates and timely patches put me over the edge again. Luckily, the new Nexus was announced and I pre-ordered it.

If the 5X only had a 5P version I would’ve ordered that one. I was mainly after the build quality and resolution. I guess my phablet phase is gone but no choice on this one, I had to get the larger of the two.

Comes with USB3 charger cable and AC adapter.

##My Likes

Being that it’s a Nexus, Android is pretty much stock. Maybe this is a big reason why the OS is responsive and fast compared to skinned Android. There are times that the OS is a bit “boring” but if the trade off is a timely update to security and features, I feel it’s worth it. Another advantage is that the Nexus is unlocked with no carrier bloatware. This also means the carrier doesn’t have to approve patches. If you noticed with the Samsung S6, there are different release schedules depending on your carrier. Those that are using the international and unlocked versions tend to get updates first. I even tested it on my Samsung S6. I haven’t used my S6 for a few weeks now and I know there’s an update. I power it on and connect it to the wifi. No updates can be found. As soon as I put my Verizon sim card in, a few minutes later, updates were found. This doesn’t happen on iOS devices. Apple has so much influence over carriers – good for them.

The previous Nexus models have had a sub par camera. I’m actually content with the camera on this phone. It’s an improvement from the Nexus 6. I am able to take better photos in low light conditions compared to the iPhone 6 Plus. Now of course this is subjective but from experience, I prefer the results on the Nexus 6P. However, it does not compete with the Samsung S6 camera. The S6 is one of the best cameras I’ve used on a smart phone. Along with the Google Photos app, it makes the experience even better.

Doze is a great feature in Marshmallow. It really does help save battery life. I can go on a full day without worrying to charge my phone. The difference between the Samsung S6 and the Nexus 6P is night and day – though keep in mind the Nexus 6P does have a larger battery. But I feel it does a better job at conserving and using battery. I wake up in the morning to find on average 1-2% battery consumption on the Nexus 6P versus on the Samsung S6 at an average of 12%. I would say the Nexus 6P, when left unused overnight, is comparable to my iPhone 6 Plus on battery consumption.

The one feature I was very excited about the Google Now On Tap. But ironically, it’s the least used feature from Marshmallow for me. I thought it would be something I used daily based on the demos I’ve seen but I can’t seem to integrate it with my day to day use. I usually forget it’s there. By the time I remember, I already have the information I needed using the usual method.

There isn’t really much to say on the hardware except it’s the latest, fast performing, hardware to match a clean and great experience with Android.

My Dislikes

  1. Being a Verizon subscriber I’m very happy with the Nexus supporting the service once again. Unfortunately, there is no app for voice mail, at least not one that is free. I have to do it the old-fashion way where you hold down the 1 on the dial pad and listen for the audio instructions. I don’t get voice mail much but enough that it makes me want to change the default greeting and say “Please don’t leave a voice mail. Either text me or email me”. I don’t believe this is the phone’s fault.
  2. The fingerprint scanner isn’t as accurate or fast with a case on. I am using the Spigen Rugged case. Great case by the way. Again, not the phone’s fault but I wanted to mention it for those who considered getting a case.
  3. The default keyboard isn’t that great. I wouldn’t say I’m an expert or fast typist on smart phones but I tend to press the B or V keys rather than pressing the spacebar. It’s a bit annoying and I have yet to find a keyboard that doesn’t want access to my contacts, camera, microphone, etc. I may try Swiftkey again. I had it on previous Android phones. Actually, the Samsung keyboard on the S6 wasn’t bad. Wonder if I can use that as well as the emojis.
  4. According to Phone Arena, the Nexus 6P uses Bluetooth 4.2. I am having a lot of issues with it. I’m not sure if it has something to do with the version on the phone – that it’s the latest, or if it has something to do with my 2011 vehicle which uses an older version. They really need to add flashing of firmware for bluetooth in vehicles during maintenance. You can replace phones and have the latest bluetooth version but it’s not practical to buy a new car every time a new bluetooth version comes out.
  5. Still no way to restart. You have to shutdown the phone then turn it back on. Is it really that difficult to implement?

I really do like the phone. I just wish it came in a smaller form factor. The Nexus 5X would’ve been the choice for me had it been the “Nexus 5P”. Later this year, Apple will announce and release the iPhone 7. I’ll probably switch back to iOS unless there’s something compelling with Android N or a smaller form factor of the high-end Nexus phone.

Upgrading to Jekyll 3

On October 26, 2015, Jekyll 3.0 was released. You can check out the blog post athttp://jekyllrb.com/news/2015/10/26/jekyll-3-0-released/. I decided to try it out but I ran into a few issues. One big one that many may face is the built-in pagination feature. In version 3, it is now deprecated. You can still use it but you must install it separately. You can do this in two ways:

  1. Create a Gemfile and add gem 'jekyll-paginate'. Then run bundle.
  2. Just install it with gem install jekyll-paginate.

If you create a Gemfile, make sure you add it to the exclude array in your config file. Also, add Gemfile.lock.

I also ran into an error with kramdown and jekyll-watch. I solved it the same way I did jekyll-paginate.

In one of my other websites built with Jekyll 2.5.3, I ran into issues with plugins. Be prepared for that as well, many will be broken. I’d like to get that fixed because it’s a site with over 300 posts. I want to see if Jekyll 3 has improved the speed of compiling.

If you are using permalink, make sure you have a trailing /. I was getting 404 errors on newly published files before I added the / in my permalink values. I’m not sure if it’s related to caching or just a weird bug I ran in to.

Finally, the last thing I noticed with version 3 is it includes the year of post date as part of the categories array. I’m not sure if that’s intensional, a bug, or I’m using old code.

Good luck with version 3. I’m glad for the new version but it has its headaches. I just have to be more patient and learn new things.

Developing on OSX Yosemite

I shared how I configured Windows 10 for my web development needs. In this post, I will share how I configured OSX Yosemite 10.10.5. I will be using Homebrew to install everything I need. This is a great package manager available on OSX that’s similar to apt-get on Debian and yum on Red Hat. So let’s get started.

Installing Homebrew

Make sure you are not using MAMP or something similar. It could affect the environment. Remove it before continuing. Ruby is used to install Homebrew. Ruby should already be installed by default on your Mac.

# install Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# run update and upgrade
brew update
brew upgrade

# check installation
brew doctor

If you haven’t done any development on your Mac, it may ask you to install the command line developer tools. I would not only install but get Xcode as well just in case you’ll be using Xcode for other things. So click on the Get Xcode button to install both Xcode and the developer tools.

command line dev tools

This will open the App Store. Once installed, open XCode for the first time. It will ask you to agree to the terms and it will ask you to enter your password. If you don’t do this, it will ask you when you run your brew command until you do so. Afterwards, go back to terminal and press Return or run the process over. It will prompt you for your password. Hopefully you don’t have any errors when running brew doctor.

Installing PHP56

Homebrew does not have a default formula for PHP. A formula is what a repository is called in Homebrew. We need to add two.

brew tap homebrew/dupes
brew tap homebrew/php

With this, we can install PHP along with other options like PHP for Apache or Nginx. You can view the options with the following command.

brew options php56

I want to install PHP with the Mysql driver so I will use the following command. I’m not going to need a web server at the moment. PHP56 has a built-in one I can use.

brew install --without-apache --without-fpm --with-mysql php56

For some reason it wasn’t installing PHP56 so I had to run the install as follow.

brew install php56

If you read the long description after you install it, it explains more steps to set it up. I will also note it below.

Next we will update our $PATH so that we can use php command in terminal.

# bash
echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.bash_profile

# allow for PHP CLI to use version from Homebrew
export PATH="$(brew --prefix homebrew/php/php56)/bin:$PATH"

. ~/.bash_profile

# very that php is running from /usrl/local/bin/php
which php

# check the version
php -v

If you don’t have a ~/.bash_profile, create one or use whatever file you’re using as the initialization file. It could be .bash_login or .bashrc.

Let’s set up a launch agent so that things will start automatically. We will create a folder in your Library folder called LaunchAgents. Then create symbolic links.

# create LaunchAgent folder
mkdir -p ~/Library/LaunchAgents

# create symbolic link for php
ln -sfv /usr/local/opt/php56/homebrew.mxcl.php56.plist ~/Library/LaunchAgents/

# autostart
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.php56.plist

This is optional but if you’re going to develop using Laravel, then you will need mcrypt and composer.

# install mcrypt
brew install php56-mcrypt

# check/view modules and make sure mcrypt is there
php -m

# install composer
brew install composer

# check composer is installed
composer about

Install MySQL

Here are the commands to install MySQL using Homebrew.

# install mysql
brew install mysql

# set up autostart
ln -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents/

# start the server
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist

# run secure install, just follow the prompts
mysql_secure_installation

Install Node and NPM

It’s really easy to install node and npm via homebrew.

# install node and npm
brew install node

# check the version of node and npm, also checks to see if it's installed
node -v
npm -v

Install RVM for Ruby

But Ruby is already installed with OSX. Yes it is but sometimes Apple will release newer versions at a later time and you may not be able to use new features. So to make things as flexible as possible, we’ll use rvm to handle different versions of Ruby. You can also use rbenv but this article we’ll be install rvm.

# you can append ruby=[version#] as well if you know the version # ahead of time
curl -L https://get.rvm.io | bash -s stable --auto-dotfiles --autolibs=enable

It may give you a warning about .profile not existing (unless it already does) but if you’ve been using .bash_profile, make sure you add the contents of .profile into .bash_profile. It may look like this.

export PATH="$PATH:$HOME/.rvm/bin" # Add RVM to PATH for scripting

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session$

# don't forget to source it
source ~/.bash_profile

# install ruby using rvm install [version]
rvm install 2.2

# select version and use it if it didn't do it automatically
rvm use --default 2.2

# check version and which one - should be in your home directory inside the .rvm directory
ruby -v
which ruby

# check which gem, should be inside .rvm using same version as selected above
which gem

# update gem and install bundler
gem update
gem install bundler

# install jekyll if you will use it
gem install jekyll

That’s pretty much what I do to get an development environment going on OSX. Of course I didn’t include all the tools I use for deployment – that’s another post in the future. Why go through all the trouble when there’s MAMP or packaged environments? Well, I tried MAMP and purchased a pro license a few years back. I just didn’t have the same control as I do with this setup. Maybe it has changed now but this works for me. I also played with Vagrant. I don’t really like Virtualbox much. Hopefully this helps some of you. Please check outhttp://blog.frd.mn/install-nginx-php-fpm-mysql-and-phpmyadmin-on-os-x-mavericks-using-homebrew/. I got some of the commands off this post.

Using SSL Certificate for Websites hosted in AWS S3

I have been hosting static websites on Amazon’s S3 service for a few years now and it’s been great. It’s affordable, simple, and fast. But what about if you want to use SSL certificates? I found a nice article on how to configure SSL with Cloudfront from https://bryce.fisher-fleig.org/blog/setting-up-ssl-on-aws-cloudfront-and-s3/. It worked until recently. I started running into errors with browsers on Android devices. I found that the error is related to how chained my SSL certificate. Here’s a good reference to what some people were experiencehttp://stackoverflow.com/questions/27892873/ssl-cert-err-cert-authority-invalid-on-mobile-chrome-only/30943304. I will share what I did, but will not go into detail. Please refer to the bryce.fisher-fleig.org article I mentioned above for more details.

Generate A CSR

I will be doing this on a OSX, the instructions should be similar on Linux. Windows users, well, please Google it. The command to generate a CSR is the following.

openssl req -nodes -newkey rsa:2048 -sha256 -keyout mydomain.key -out mydomain.csr

When you run this command, you will be asked a few questions.

  • Country Name
  • State or Province Name
  • Locality Name (eg, city)
  • Organization Name (eg, company)
  • Organizational Unit Name (eg, section)
  • Common Name (e.g. server FQDN or YOUR name)
  • Email Address
  • A challenge password
  • An optional company name

Provide CSR to SSL provider

You will need to provide the generated CSR file to the place where you bought your SSL certificate. I purchased mine from namecheap.com. It asks me to select the web server. I choose nginx for my sites hosted in S3. Then I copy and paste the contents of my csr file. I used the cat command to copy and paste.

cat file_name.csr

It will display the contents of the file. Copy and paste including the line where it says –BEGIN– and –END–.

Check your email

This part of the process may be different depending on what type of SSL certificate you purchased. I will share the process that I go through. I purchased a Comodo PositiveSSL.

The first email you will receive contains a verification link. Click on it to verify and wait for the next email. When the verification is complete, they will email with files you need to compile so it can be installed in your server.

  • AddTrustExternalCARoot.crt
  • COMODORSAAddTrustCA.crt
  • COMODORSADomainValidationSecureServerCA.crt
  • mydomain.crt

Compile the files

I would unzip the files in a directory to keep it all in one place. Open terminal and go to that directory. I used the following code to compile the files together.

cat COMODORSADomainValidationSecureServerCA.crt COMODORSAAddTrustCA.crt AddTrustExternalCARoot.crt > ssl-bundle.crt

That command should have created a file called ssl-bundle.crt or whatever name you want to call it that contains all of the files listed in the command.

Install certificate in Cloudfront

You will need to use Cloudfront to install the SSL certificate. I will be using AWSCLI to install it. Here is the command to use to install the certificate in Cloudfront.

aws iam upload-server-certificate --server-certificate-name name_to_display_in_cloudfront --certificate-body file://mydomain.crt --private-key file://mydomain.key --certificate-chain file://ssl-bundle.crt --path /cloudfront/mydomain/

If you AWSCLI is using multiple profiles and the default profile doesn’t have appropriate IAM privileges, you can use the –profile profile_name option. If all goes well, you will see a JSON formatted data in your terminal screen.

Cloudfront configuration

If you haven’t already done so, create a new distribution for your website.

  • Select Web
  • Origin Settings
  • Origin Domain Name: When you click on the box, select the S3 bucket you wish to use. It may give you the wrong entry such as bucketname.s3.amazonaws.com. This is inaccurate because it doesn’t contain the region your bucket is in. Instead, you should have something like bucketname.s3-website-myregion.amazonaws.com.
  • Origin Path: leave blank
  • Origin ID: Enter whatever you like or use the same as Origin Domain Name.
  • Leave default settings for the reset of this section.
  • Default Cache Behavior Settings: I left everything default here but I did change the following setting.
  • Viewer Protocol Policy: Redirect HTTP to HTTPS. This option redirects all http request to https. The default “HTTP and HTTPS” means it will use both but it’s up to the user visiting your website to the http or https. Please click on the information links to the right of each option if you wish to know more about them.
  • Distribution Settings
  • Alternate Domain Names (CNAMEs): mydomain.com http://www.mydomain.com (enter on each line)
  • SSL Certificate: Custom SSL Certificate (stored in AWS IAM) and select your name_to_display_in_cloudfront from the dropdown. It’s up to you on what you choose on the rest. I left the rest as default.

Route 53 configuration

You may need to visit your Route 53 configurations. It may still be pointing to your S3 bucket. It really should be pointing to your Cloudfront distribution. You may need to wait until Cloudfront finishes deploying. You can check in your Distribution list and see if the Status is Deployed. Otherwise, it may not show up in Route 53 as an alias target.