Author: admin

Twitter Socialite App

  1. Go to https://apps.twitter.com/ twitter-appThen click ‘Create New App’
  2. Fill out the form for ‘Socialite’ Apptwitter-create-socialite-appNOTE:
    If you get an error like “Error
    You must add your mobile phone to your Twitter profile before creating an application. Please read https://support.twitter.com/articles/110250-adding-your-mobile-number-to-your-account-via-web1.5k for more information” THEN go to https://twitter.com/settings/add_phone (you must logged in first) OR Settings->Mobile THEN ADD YOUR MOBILE PHONE!
    If you get an error like “Error
    The client application failed validation: Socialite is already taken for Name.” THEN CHANGE THE APP NAME. AT LAST I USED ‘Advcha Socialite’
  3. If everything is okay, here is the app details (https://apps.twitter.com/app/13139442)twitter-advcha-socialite2SORRY, ONLY ADMIN CAN SHOW THIS!

Google APIs

Ref: Create Project in Google Developer Console

  1. Open Google Developer Console. Here is the screengoogle-dev-console
  2. To create a new project, Click Project -> Create Projectgoogle-create-project
    Here is the new projectgoogle-my-project
  3. I want to use Social APIs google+ API, so click ‘Google+ API’google-plus-api
  4. The url would be like this: https://console.developers.google.com/apis/api/plus/overview?project=my-first-project-150703. Then click ‘Enable’ google-plus-api-enableThis will enable the Google+ API
  5. Then click ‘Go to credential’google-plus-api-create-credentialsI have to create the credential first!
  6. Here is the credential settinggoogle-plus-api-credentialsThen click ‘What credentials do I need?’
  7. Create the oauth 2.0 settinggoogle-plus-api-credentials-idClick ‘Create client ID’
  8. Then set the product name ‘Socialite’google-plus-api-credentials-product
  9. Then I got my credential for google+google-plus-api-client-id2Then click ‘Done’. We’re finished!
  10. Here is the dashboard for my appgoogle-plus-api-oauth2
  11. To see the credential details like Client ID and Client Secret for ‘Socialite’ app, click ‘Socialite’ appgoogle-plus-api-socialite2SORRY, ONLY ADMIN CAN SHOW THIS!

Laravel Socialite

Source: https://github.com/laravel/socialite

I want to practice ‘socialite’ app given by Laravel 5.3 documentation. Installation:

  1. Open hosts file and Add a new domain ‘socialite.app’ at the file

    Add this line in the file:
  2. Edit ‘Homestead.yaml’ file in ~/.homestead/ to add the new domain ‘socialite.app’ and set the mapping
  3. Start vagrant with ‘vagrant up’ or if it already started up, refresh it with ‘vagrant provision’ then go into the ssh with ‘vagrant ssh’
  4. Go into ‘Code’ directory then create a new laravel project ‘socialite’
  5. Test it at our browser with http://socialite.app/. If the laravel screen is showed up, we are on the right path.
  6. Go into the new project ‘socialite’ root directory then add a dependency ‘laravel/socialite’

     
  7. Configuration
    After installing the Socialite library, register the Laravel\Socialite\SocialiteServiceProvider in your config/app.php configuration file:

    Also, add the Socialite facade to the aliases array in your app configuration file:

     
  8. You will also need to add credentials for the OAuth services your application utilizes. These credentials should be placed in your config/services.php configuration file, and should use the key facebook, twitter, linkedin, google, github or bitbucket, depending on the providers your application requires. For example for facebook credentials:

    we will use env file (.env) to store facebook credentials.

    SORRY, ONLY ADMIN CAN SHOW THIS!
    REMEMBER ‘http://socialite.app/auth/facebook/callback’ IS CALLBACK URL (AFTER THE SUCCESSFUL LOGIN ON FACEBOOK). ALSO IT MUST MATCH WITH ROUTE ‘auth/facebook/callback’ IN /routes/web.php LATER!
  9. Basic Usage
    Next, you are ready to authenticate users! You will need two routes: one for redirecting the user to the OAuth provider, and another for receiving the callback from the provider after authentication. We will access Socialite using the Socialite facade. Please create a new controller file ‘AuthController.php’ in /app/Http/Controllers/Auth/ to work with facebook login:

    NOTE: DONT FORGET TO ADD ‘use App\Http\Controllers\Controller;’ BEFORE ‘use Socialite;’ BECAUSE I GOT AN ERROR ABOUT IT!
  10. Creating Views. Create two new blade files. They are /resources/views/home.blade.php and /resources/views/master.blade.php:
    master.blade.php:

    home.blade.php:

    url(‘/auth/facebook’) would redirect the page to facebookpage!
  11. Set the routes. Edit /routes/web.php like this:

    We set the root (‘/’) url would open the home page (home.blade.php)
  12. Test it! http://socialite.app/
    Here is the screensocialite-homeIf we click ‘Facebook’ link, it would redirect us to facebook page. The url would be like this: https://www.facebook.com/v2.8/dialog/oauth?client_id=166568033366882&redirect_uri=http%3A%2F%2Fsocialite.app&scope=email&response_type=code&state=es6ub834Woh7xDxTvdqru84U7kwiRJkftD83HFz7
    If I get this pagesocialite-fb-page Then I need to modify my facebook app to add this domain (http://socialite.app/) at ‘Site URL’ box. To do it, Open your app from https://developers.facebook.com/apps, then Click your app. Then at Settings->Basic->at Site Url fill with this domain name: http://socialite.app/. Then Save and fix any error.
    SORRY, ONLY ADMIN CAN SHOW THIS!
    Here is the oauth2 output from facebook for successful login:
    SORRY, ONLY ADMIN CAN SHOW THIS!
    Here is the callback result the successful facebook loginsocialite-fb-callback
  13. How to add the others social links (twitter, github, google plus and linkedin)?
    Please read Complete Laravel 5 Socialite tutorial to find out how to do it.
    You need to setup your apps for the above social app to get the credentials like Client ID and Client Secret and the redirect URL.
    To setup Google+ app, please read Google APIs
    To setup twitter app, please read Twitter Socialite App
    To setup github app, please read Github App
    To setup linkedin app, please read Linkedin Oauth2 App
    Then modify .env file to include above credentials:
    SORRY, ONLY ADMIN CAN SHOW THIS!
  14. Here I want to make the redirect URL to be uniform like this:

    So modify our social routes in /routes/web.app like this:

     
  15. Modify /config/services.php to get all the credentials from .env file

     
  16. Modify /resources/views/home.blade.php to include all the social app
  17. Modify /app/Http/Controllers/Auth/AuthController.php to add a parameter $provider
  18. Run on your browsersocialite-home-mutiLogin via Facebook RUN WELL LIKE BEFORE!
    Login via Twitter, For the first time we are needed to authorize the applicationsocialite-twitter-autorizeClick ‘Authorize app’. If nothing wrong, here is the callback resultsocialite-twitter-callbackSORRY, ONLY ADMIN CAN SHOW THIS!
    Login via Google, For the first time we are needed to authorize the applicationsocialite-google-autorizeClick ‘Izinkan’. If nothing wrong, here is the callback resultsocialite-google-callback SORRY, ONLY ADMIN CAN SHOW THIS!
    Login via Github, For the first time we are needed to authorize the applicationsocialite-github-autorizeClick ‘Authorize application’. If nothing wrong, here is the callback resultsocialite-github-callbackSORRY, ONLY ADMIN CAN SHOW THIS!
    Login via Linkedin, For the first time we are needed to authorize the applicationsocialite-linkedin-autorizeClick ‘Allow’. If nothing wrong, here is the callback resultsocialite-linkedin-callbackSORRY, ONLY ADMIN CAN SHOW THIS!
  19. OKAY! EVERYTHING RUN WELL. THE NEXT STEP IS TO USE DATABASE/SESSION TO SAVE THE LOGIN INFORMATION!
    For this, please read : Laravel 5.2 Socialite Facebook Login and Using Github authentication for login with Laravel Socialite.

Laravel Homestead VirtualBox Vagrant

Url: https://laravel.com/docs/5.3/homestead
       Quick Tip: Get a Homestead Vagrant VM Up and Running
       Getting Started with Laravel Homestead

Introduction
Laravel strives to make the entire PHP development experience delightful, including your local development environment. Vagrant provides a simple, elegant way to manage and provision Virtual Machines.

Laravel Homestead is an official, pre-packaged Vagrant box that provides you a wonderful development environment without requiring you to install PHP, a web server, and any other server software on your local machine. No more worrying about messing up your operating system! Vagrant boxes are completely disposable. If something goes wrong, you can destroy and re-create the box in minutes!

Homestead runs on any Windows, Mac, or Linux system, and includes the Nginx web server, PHP 7.0, MySQL, Postgres, Redis, Memcached, Node, and all of the other goodies you need to develop amazing Laravel applications.

Installation:

  1. Install VirtualBox (https://www.virtualbox.org/wiki/Linux_Downloads)
  2. Install Vagrant (https://www.vagrantup.com/downloads.html)
  3. Installing The Homestead Vagrant Box

     
  4. Installing Homestead

    Please check ‘Homestead’ directory at Home (/home/teddy)
  5. Once you have cloned the Homestead repository, run the bash init.sh command from the Homestead directory to create the Homestead.yaml configuration file. The Homestead.yaml file will be placed in the ~/.homestead hidden directory:


     
  6. Configuring Homestead. Setting Your Provider
    The provider key in your ~/.homestead/Homestead.yaml file indicates which Vagrant provider should be used: virtualbox, vmware_fusion, or vmware_workstation. You may set this to the provider you prefer:

    Here is the file content looks like:

     
  7. Configuring Shared Folders
    I prefer to let it as is (please see ‘folders’ in ~.homestead/Homestead.yaml file above) –> DON’T DO THIS, IF ‘map’ VALUE STILL ‘~/Code’, PLEASE MODIFY IT (CHECK YOUR WEB DIRECTORY IS BETTER) BECAUSE I GOT THIS ERROR:

    MODIFY IT TO ‘~/Documents/works/laravel’ LIKE THIS:
  8. Configuring Nginx Sites
    I prefer to let it as is (please see ‘sites’ in ~.homestead/Homestead.yaml file above)
    If you change the sites property after provisioning the Homestead box, you should re-run vagrant reload –provision to update the Nginx configuration on the virtual machine.
  9. Configure SSH Key (IF NOT EXIST IN /home/teddy/.ssh/)
  10. The Hosts File
    You must add the “domains” for your Nginx sites to the hosts file on your machine. The hosts file will redirect requests for your Homestead sites into your Homestead machine. On Mac and Linux, this file is located at /etc/hosts.

    Add this line in the file:

    Make sure the IP address listed is the one set in your ~/.homestead/Homestead.yaml file. Once you have added the domain to your hosts file and launched the Vagrant box you will be able to access the site via your web browser:
  11. Launching The Vagrant Box
    Once you have edited the Homestead.yaml to your liking, run the vagrant up command from your Homestead directory. Vagrant will boot the virtual machine and automatically configure your shared folders and Nginx sites.

    BUT I GOT THIS ERROR:

    SOLUTION: (ref: Problem launching vagrant on Homestead)
    From this error

    I didn’t find ‘id_rsa’ file in /home/teddy/.ssh/ directory. I need to configure my SSH location like this:

    SEE MY MODIFICATION AT #9.
    Then I run ‘vagrant up’ again. BUT GOT ANOTHER ERROR:

    SOLUTION: (ref: Vagrant: The host path of the shared folder is missing)
    SEE MY MODIFICATION AT #7 ABOVE!
    RUN ‘vagrant up’ again! SUCCESS:

    WE CAN SEE VAGRANT INSTALLED ALSO PHP, NGINX, MYSQL, POSTGRESQL,ETC.
    Or you can see it from VirtualBox (Open Applications -> System Tools -> Oracle VM VirtualBox)vagrant-vmTHIS GUI MORE CONVENIENT. I CAN ‘START’, ‘PAUSE’ OR ‘CLOSE->POWER OFF’ THE VIRTUAL MACHINE!
    NOTE: START MUST BE FROM TERMINAL BY TYPING ‘vagrant up’. I CAN USE GUI TO START IT UP BECAUSE IT’S ALWAYS ASK FOR LOGIN AND PASSWORD THAT I DONT KNOW!
    USE ‘vagrant provision’ TO RELOAD/REFRESH VM!
    TO SHUTDOWN THE VM (NO! USE SUSPEND INSTEAD. SEE BELOW), PLEASE TYPE ‘vagrant destroy –force’
    READ (https://www.vagrantup.com/docs/cli/destroy.html): “The destroy command does not remove a box that may have been installed on your computer during vagrant up. Thus, even if you run vagrant destroy, the box installed in the system will still be present on the hard drive. To return your computer to the state as it was before vagrant up command, you need to use vagrant box remove.”
    USE SUSPEND INSTEAD OF SHUTDOWN (ref:https://scotch.io/tutorials/getting-started-with-laravel-homestead)

    SOMETIMES I FORGOT TO SUSPEND THE VM BEFORE HIBERNATING MY LAPTOP. IT’D MAKE MY LAPTOP VERY SLOW. THE TERMINAL WOULD NOT RESPOND ANYMORE FOR ANYKEY BUT I CAN OPEN THE NEW ONE OR NEW TAB. USUALLY THE VM STATUS IS PAUSED.

    I HAVE TO OPEN THE VirtualBox GUI AND DO Close -> Save State MANUALLY TO STOP THE CURRENT PROCESS!

     
  12. Use SSH to get into the VM (ref: https://www.sitepoint.com/quick-tip-get-homestead-vagrant-vm-running/)

    It seems vagrant INSTALLED ubuntu 16.04 AS VM!
    I can check the PHP version like this:

    I can browse the files and directories in it:
  13. Run http://homestead.app
    But before we do this, WE NEED TO ADD A FEW DIRECTORIES AND FILE. BECAUSE WE KNOW THE WEB ROOT FOR OUR VM IS ‘/home/vagrant/Code’ IS MAPPED TO ‘~/Documents/works/laravel’ (SEE ~/.homestead/Homestead.yaml). FOR ‘homestead.app’ (IS MAPPED TO ‘/home/vagrant/Code/Laravel/public’), ADD A NEW DIRECTORY ‘Laravel’ in /Documents/works/laravel/, THEN ADD ‘public’ DIRECTORY IN IT. THEN ADD A NEW FILE ‘index.php’ IN IT. SO THE FULL PATH IS ‘/Documents/works/laravel/Laravel/public/index.php’. In the PHP file, just add a line of code:

    THEN RUN http://homestead.app/ IN OUR BROWSER!vagrant-phpinfoI can see I’m using NGINX as a webserver instead of Apache
    vagrant-nginx
    HOW TO RUN MYSQL DATABASE???
    SOLUTION:
    REMEMBER: VAGRANT MUST BE IN ‘UP’ MODE FOR THIS SITUATION!
    Login to ssh (‘vagrant ssh’) then check the mysql location with ‘which mysql’

    From ~/.homestead/Homestead.yaml, here is the databases:

    To connect to mysql server at VM, use default user:


    So MYSQL Server version is 5.7.16
    For better for myself to connect to the mysql server, I tried to install the latest mysql client ‘MySQL Workbench’ from https://dev.mysql.com/downloads/workbench/.
    <OLD>
    Currently the version is 6.3.8. But when I installed it, I got dependenci error “Dependency is not satisfiable: libatkmm-1.6-1v5 (>=2.24.0)”. I checked again the downloaded file (mysql-workbench-community-6.3.8-1ubu1604-amd64.deb), IT’S APPARENTLY FOR UBUNTU 16.04!
    </OLD>
    <NEW>
    Ref: http://elementaryos.stackexchange.com/questions/6779/cant-install-mysql-workbench-dependency-is-not-satisfiable
    Download MySQL Workbench for Ubuntu 14.04 here http://cdn.mysql.com//archives/mysql-workbench/mysql-workbench-community-6.3.6-1ubu1404-amd64.deb THEN INSTALL. SUCCESS!
    </NEW>
    CONFIGURE MySQL Worbench TO CONNECT MySQL Server AT VM:

    vagrant-mysql-connectionvagrant-mysql-openNow I can see the database ‘homestead’. I also can create any table!

    WHERE IS NGINX CONFIGURATION FILE???
    SOLUTION:
    Use ‘vagrant ssh’ TO GET INTO THE HOME DIRECTORY OF VM. THEN GO TO THE ROOT DIRECTORY


    THE NGINX CONF FILE IN /etc/nginx/nginx.conf

    USE ‘nano’ TO OPEN/EDIT THE FILE

    Here is the file content:

    TIPS FOR USING NANO:
    TO ‘COPY’ THE TEXT AT THE TERMINAL, JUST USE MOUSE & DRAG THEN Edit->Copy
    TO ‘EXIT’  THE TERMINAL, PRESS ‘Ctrl+X’
    use CTRL-O to Save/overwrite the changes then ENTER
  14.  HOW TO CREATE NEW PROJECT ON VAGRANT???
    OK!. Make sure to run the VM (‘vagrant up’) and go to the ssh (‘vagrant ssh’). I want to clone the laravel 5 project here (Please read Install Laravel 5 On Ubuntu 14.04) For the first time, check our git and composer:

    GO TO ‘/Code’ DIRECTORY FIRST!

    NOTE: THIS IS A REMAINDER! I MADE A MISTAKE FOR THE FIRST TIME SO I HAVE TO MOVE THE LARAVEL PROJECT INTO ‘/Code’ DIRECTORY!

    OK. Create the Laravel project with name ‘laravelvagrant’

    CHECK THE NEW PROJECT ‘laravelvagrant’!

    We want to run this new project, BUT we need to modify ‘Homestead.yaml’ file first to map ‘homestead.app’ to our new project ‘laravelvagrant’. Here is the modification:

    We changed from ‘/home/vagrant/Code/Laravel/public’ to ‘/home/vagrant/Code/laravelvagrant/public’
    THEN WE NEED TO REFRESH OUR VM WITH ‘vagrant provision’! (exit from ssh first!). Then IT’S READY TO RUN homestead.app (http://homestead.app/) ON OUR BROWSER! HERE IS THE WELCOME SCREENvagrant-laravel
  15. I have a test from interviewed.com (https://upwork.interviewed.com/candidate/interviews/905600) from upwork.com about my understanding for PHP things to go into the enterprise level!. Here is the description:
    “This project assumes your computer is already set up with minimal development tools including Git, Vagrant, Composer, etc. If you don’t already have these installed, you may want to switch to the computer that you normally develop on or follow these instructions.This project uses Laravel 5.3, PHP 7.0, and SQLite (so that database is portable without seeds).Download the project and start your server:
    https://github.com/prehire/php-23093023909ad09a09
    View the project in your browser and click around: http://homestead.appMost people allocate about 1 hour to this project, but you can invest up to 4 hours if you want to. Because the project has a time limit, you can’t pause once you’ve started.”
    OK! I already setup vagrant and virtualbox
    Run the VM and go into the ssh
    Then clone the project ‘https://github.com/prehire/php-23093023909ad09a09.git’

    Go into the project ‘php-23093023909ad09a09’ then install the dependencies via composer

    Now we want to test it on our browser BUT REMEMBER TO MODIFY ‘Homestead.yaml’ FIRST!

    THEN EXIT FROM SSH & REFRESH OUR VM WITH ‘vagrant provision’!
    REFRESH OUR BROWSER (http://homestead.app/). HERE IS THE HOMEPAGE SCREEN!vagrant-project-testThe App with 4 top menu: Homework (http://homestead.app/booking OR http://homestead.app/ –> HOMEPAGE), Booking (http://homestead.app/booking), Customer (http://homestead.app/customer) and Cleaner (http://homestead.app/cleaner). Here are the screens for each of them:
    Bookingproject-test-bookingCustomerproject-test-customerCleanerproject-test-cleanerOK. THE SETUP IS OKAY. WHAT IS THE TASK FOR THIS PROJECT???
    USE PDO INSTEAD OF MYSQL!!! SETUP IT FIRST OR TRY THE AVAILABLE PROJECT IN http://myprojects.advchaweb.com/index.php/2017/01/11/cleaner-booking/ TO MAKE SURE PDO WORK IN HOMESTEAD!

Laravel CRUD With MaterializeCSS

Source: Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part I
& Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part II
MaterializeCSS source: http://materializecss.com/getting-started.html (I don’t use sass, so download the newest version http://materializecss.com/bin/materialize-v0.97.7.zip)

  1. Create a new laravel project named ‘crud-materialize’

     
  2. Download materialize from the above link if haven’t downloaded it. Then extract the file. Here is how the folders and files look after extractingmaterializeOnly 3 folders (css, fonts and js) and 2 files.
    Then copy/cut the above folders and file into ‘public’ in our laravel project directory (/crud-materialize/public/). It’ll merge the css and js folders.
  3. Go into the project directory ‘crud-materialize’ then create a controller with name ‘CrudController’

    We can look up the new file CrudController.php in /app/Http/Controllers/ directory.
  4. Modify CrudController.php then edit ‘index’ function to call our view. It’d be like this:

     
  5. Modify /routes/web.php to change the default route (welcome) to call index function in CrudController:
  6. It’s time to mess with the views. Create a new directory ‘layouts’ in /resources/views/. Then in it (layouts), create two blades files: index.blade.php and header.blade.php. Also create a new blade file show.blade.php in /resources/views/:
    /resources/views/layouts/index.blade.php:

    /resources/views/layouts/header.blade.php:

    /resources/views/show.blade.php:

     
  7. Turn on the server (‘php artisan serve’) and see the look (http://localhost:8000/)crud-laravel-materializecss
  8. Setting database! Modify .env file in /crud-materialize/ directory to set the database setting:

    Now we’re not going to use phpmyadmin to create the database. We’ll do it by ‘php artisan migrate’ command I dont know how to do it and it seems more complicated than I expected so I create the database ‘crud-materialize’ (collation: utf8-general-ci) through phpmyadmin.
  9. Create a new table ‘crud’

    Check /database/migrations/ directory for the script to create ‘crud’ table (2016_10_29_030815_create_crud_table.php). It’d also create two more scripts to create ‘users’ (2014_10_12_000000_create_users_table.php) and ‘password_reset’ table (2014_10_12_100000_create_password_resets_table.php) automatically (if they are not existed yet!). It’s safe to remove its or leave its because we only focus on the ‘crud’ table.
  10. Edit 2016_10_29_030815_create_crud_table.php to add two more fields (‘title’ and ‘content’).
    Defaultly, there are two fields available in the file, they are ‘id’ and timestamps. Just insert the above two more fields between them
  11. Migrate (push) the tables to our database

    Check those tables in ‘crud-materialize’ database.
  12. Create a new model ‘Crud’

    Check a new file ‘Crud.php’ in /app/ directory!
  13. Modify Crud.php like this:

    Then create a new data in ‘crud’ table via phpmyadmin:
    ‘title’: ‘Title 1’
    ‘content’: ‘Content 1 Content 1 Content 1 Content 1 Content 1’
  14. Retrieve the new data through CrudController

    We’ll throw the ‘data’ into our view ‘show’.
  15. Modify show.blade.php in /resources/views/ to get and show the data from CrudController above

    We use ‘foreach’ loop, so just use one ‘row’ class and remove the others two.
  16. Test!crud-materializecss-show
  17. Now we want to make the Add, Edit and Delete buttons can be functioned properly. For the Add function, modify /app/Http/Controllers/CrudController.php at ‘create’ function to view ‘add’:

    Then create a new route for this in /routes/web.app:

    Create a new blade file ‘add.blade.php’ in /resources/views/ to show the form:

    In ‘show.blade.php’ we can add an url to ‘add’ route when anyone click the ‘add’ button:

    OK. Here is the add form when we click the add (+) button (http://localhost:8000/add)crud-materializecss-addNow we’re going to make ‘Submit’ button work. First, add a new route for ‘store’ in /routes/web.app. ATTENTION! Here we use POST (Route::post) NOT GET (Route::get):

    Then modify ‘store’ function in /app/Http/Controllers/CrudController.php to validate and store the form:

    OK. Try to add a new data (http://localhost:8000/add)crud-materializecss-add-dataHere is the resultcrud-materializecss-show-data
  18. Show individual data. We want to show the data if anyone click ‘Readmore’ button.
    Add a new route ‘read’ that need ‘id’ parameter in /routes/web.app:

    Apply the route at ‘Readmore’ link in /resources/views/show.blade.php:

    Modify ‘show’ function in /app/Http/Controllers/CrudController.php to get the data based on id and show the data by throwing it to our new view ‘showdata’:

    Create a new blade file ‘showdata.blade.php’ in /resources/views/ like this:

    OK. Test it by clicking ‘Readmore’ or directly by url like http://localhost:8000/read/2crud-materializecss-show-data-idI added a new ‘Back’ button. please see the complete materialize icon. Click ‘Back’ button to redirect back to the homepage.
  19. Pagination. To show the pagination,  we need to add more data. Just use ‘add’ button. Now we want to show just two data per page. So modify ‘index’ function in /app/Http/Controllers/CrudController.php like this:

    To show the pagination counter and the pages, modify /resources/views/show.blade.php to add ‘{{$data->render()}}’ just before @endsection:

    Here is the result (the url would be like http://localhost:8000/?page=1):crud-materializecss-pagination
  20. Edit data.
    Create two new routes in /routes/web.php. the first to edit the data and the last to update the changes:

    Modify ‘edit’ and ‘update’ function in /app/Http/Controllers/CrudController.php:

    Then create a new blade file ‘edit.blade.php’ in /resources/views/. this file basically same with ‘add.blade.php’ but the form url and the input values are different:

    Dont forget to modify ‘Edit’ button/link in ‘show.blade.php’ to add the ‘edit’ route:

     
  21. Delete data.
    Create a new route ‘delete’ in /routes/web.php:

    Then modify ‘destroy’ function in /app/Http/Controllers/CrudController.php to delete the data:

    Modify ‘Delete’ button/link in /resources/views/show.blade.php to apply the delete route and give javascript confirmation about the deletion:

    FINISH!
    NEXT: Add User authentication and comment section!
  22. User Authentication.
    Use default scaffolding ‘auth’

    Like I said before, it’ll create user authentication (login, register, password, etc) automatically. Please check the views in /resources/views/auth/ directory!
    Also check the routes in /routes/web.php. It’ll create two new routes:

    About this route ‘Auth::routes()’, from http://stackoverflow.com/questions/39196968/laravel-5-3-new-authroutes/39197278#39197278, it said

    More read https://laracasts.com/discuss/channels/laravel/laravel-53-routing-as-authroutes?page=1.
  23. Modify /resources/views/layouts/header.blade.php, to add new links ‘login’ and ‘register’:

    Here is the lookscrud-materializecss-authClick ‘Login’ link, it’d display the login page. But we can see the layout (header, color, etc) is different with our homepage.
  24. Edit /resources/views/auth/login.blade.php.
    Replace the first line ‘@extends(‘layouts.app’)’ with ‘@extends(‘layouts.index’)’. When we refresh our website, the header show the same layout with our homepage. But the others element are still different. ‘auth’ scaffolding create the views based on bootstrap css but we use materialize css for homepage.crud-materializecss-auth-loginModify login.blade.php to add some elements like validation, error,etc like this: NOTE: somehow {!! csrf_field() !!} DIDN’T WORK (verifycsrftoken error) SO I WRITE {{ csrf_field() }}

    The validations need jquery-validation library, so download and put the jquery files (jquery.validate.min.js and additional-methods.min.js) in /public/js/. Then link them in /resources/views/layouts/index.blade.php also write the jquery validation (here i changed the jquery to the newer version 1.11.2). Please read Forms Validation to learn more about the validation form for materialize css.

    We also need to create a new css file ‘style.css’ in /public/css/ to style the error messages:

    Don’t forget to link the css in /resources/views/layouts/index.blade.php

    Here is the result (http://localhost:8000/login)crud-materializecss-login-errorTo find out the materialize icons, see https://material.io/icons/.  Note: the naming for displaying the icon for materialize css is pretty tricky. For example to show icon for name/username like ‘account box’, we have to write it with underscore (_). so it should be ‘account_box’:

     
  25. Do the same for ‘Register’ link.
    Here is the modification for /resources/views/auth/register.blade.php

    Here is the lookscrud-materializecss-auth-regWe need to modify a few things like the page redirection after the log in and the register. I also notice the dropdown menu to show the logged in user still not correct. For modifying the redirection page, it’s simple. Modify the controllers (LoginController.php and RegisterController.php) in /app/Http/Controllers/Auth/ directory. Set $redirectTo variable to the homepage (‘/’) instead of ‘/home’ like this:

    Then for the dropdown menu, we need to modify /resources/views/layouts/header.blade.php like this:

    To find out the complete dropdown function for materialized css, please see http://materializecss.com/dropdown.html and http://demo.geekslabs.com/materialize/v3.1/ui-navbar.html.
    I also need to make a slightly modification in /public/css/style.css to make the dropdown display the correct font color:

    Here is the looks:crud-materializecss-dropdown
  26. Now, we want to restrict some functions like ‘Add’, ‘Edit’ and ‘Delete’ can only be proceeded when the user is logged in. So we’re going to check the logged in user (‘Auth::check()’) in /app/Http/Controllers/CrudController.php for some functions ‘create’, ‘edit’ and ‘destroy’ like this: (ref: Authentication and Check if user is logged in):

    OK. When we click the Add, edit and delete icon/buttons, it’d redirect us to the login page if we haven’t logged in!
    NEXT: User access/level, go to / proceed to the aim page after logging in, admin panel and comments!

Fast CRUD With Laravel 5

Source: https://gilacoding.com/read/membuat-crud-laravel-hanya-dengan-5-menit

  1. Create a new laravel project named ‘latihan-crud’
    Type this command: composer create-project –prefer-dist laravel/laravel latihan-crud

     
  2. Modify .env file in /laravel/latihan-crud/ directory  to set the database setting:
  3. Create the new database ‘latihan-crud’ on phpmyadmin
  4. Install new package ‘crud-generator’ from ‘appzcoder’: composer require appzcoder/crud-generator
    DONT FORGET TO GO INTO ‘latihan-crud’ DIRECTORY FIRST!

    Look up ‘appzcoder’ directory in /latihan-crud/vendor/
  5. Add the new package ‘Appzcoder\CrudGenerator\CrudGeneratorServiceProvider::class’ in /config/app.php in ‘providers’

     
  6. Install another package ‘laravelcollective/html’

    Then do the same with #5 to add the new package ‘Collective\Html\HtmlServiceProvider::class,’ in /config/app.php in ‘providers’:

     
  7. In the same file (app.php), add the new facades ‘Form’ and ‘HTML’ (????) in ‘aliases’ section:
  8. Do ‘composer update’ to update the dependencies
  9. Then publish our files and setting
  10. Create a new class ‘Posts’ for our crud generator with two fields ‘title’ and
    <OLD>

    BUT I GOT THIS ERROR:

    </OLD
    <NEW>
    From this https://packagist.org/packages/appzcoder/crud-generator, I found the source of the error, I supposed to use ‘;’ (“title#string; body#text”) instead of ‘,’ (“title#string, body#text”) between the fields like this (DONT USE THIS COMMAND. THIS IS ONLY JUST A CORRECT COMMAND)

    USE THIS COMMAND INSTEAD TO MAKE IT CONSISTENT WITH THE ORIGINAL TUTORIAL:

    </NEW>
    The script for the table migration would be exist in /database/migrations/ directory (IF YOU FIND MORE THAN ONE SCRIPT WITH SAME TABLE ‘Posts’ LIKE ‘2016_10_22_081014_create_posts_table.php’ AND ‘2016_10_22_074719_create_posts_table.php’, PLS REMOVE THE OLD ONE FIRST! OR WE’D GET THIS ERROR: “Cannot declare class CreatePostsTable, because the name is already in use”)
  11. Push the table script to our database with ‘php artisan migrate’

    Check our database to make sure the new table ‘posts’ is already created! SOMEHOW THE OTHERS TABLES ‘migrations’, ‘users’ AND ‘password_resets’ ARE CREATED ALSO!
  12. Test on the browser. Start the server: ‘php artisan serve’ then open on our browser : http://localhost:8000/ –> It shows the laravel welcome page!
    Remember, A new route ‘posts’ is already created automatically from previous step, so to see the CRUD in action, pls go to http://localhost:8000/postsposts
  13. Add new data.
    Click the ‘+’ blue icon create-newthen fill the form with the fields ‘Title’ and ‘Body’. Then press ‘Create’ Buttonnew-postBut I got this error:

    I found the solution! In ‘Post’ class in /app/Post.php, at ‘$fillable’ variable, It’s only has ‘title’ field But there is no ‘body’ field!

    So add ‘body’ field like this:

    Then repeat the creation of new data! Here is the expected resultpostsMembuat Login Laravel 5 2 dengan username dan Hak akses
  14. At the right top of the page, there are two links ‘login’ and ‘register’ but none of them are working. To make them work, we need to create the authentication to create users like this: php artisan make:auth

    Dont forget to stop the server first by clicking CTRL+C!
    The above command would create some views for login, register, password, etc. Please check them in /resources/views/auth/ directory!
    This also create automatically a few new routes in /routes/web.php
  15. Now we can try them on our browser
    Remember, we dont need to create/migrate the user table because we already did this at the previous step (#11) when we did the first migration!
    Now the links ‘login’ and ‘register’ are working!
    Here is the register page: http://localhost:8000/registerregisterI use password: satria. Successful registration would be redirected to http://localhost:8000/homelogged-inThe links ‘login’ and ‘register’ also be showed up on the initial page http://localhost:8000/
  16. Change/set default route ‘/’
    In /routes/web.php, the default route for http://localhost:8000/ would go to the welcome page in /resources/views/welcome.blade.php. Here is the default route

    We want to change it to go to our login page! We have the login page in /resources/views/auth/login.blade.php. So here is the modified route

    Now each our homepage http://localhost:8000/ is opened, it’d open the login page!
    If we want to set the default route to the post page, please modify /routes/web.php like this:

    Now, if we open http://localhost:8000/, it’d show the list of the post page!
    LEARN ALSO THIS:
    Laravel Admin Panel
    An admin panel for managing users, roles, permissions & crud.

OSClass First Plugin Tutorial

OSCLASS PLUGIN TUTORIAL
1. Create a new directory in any directory. name it ‘my_firstplugin’.
2. Create a new file in the directory. name it ‘index.php’.
3. open the file and add these lines in it :
/*
Plugin Name: My First Plugin
Short Name: my_firstplugin
Plugin URI: –
Description: A first osclass plugin for tutorial purpopse.
Version: 1.00
Author: Satria
Author URI: –
*/
above is ‘plugin info’
4. to make the plugin installable, add this function : osc_register_plugin. so

/**
* (hook: install) Make installation operations
*         It creates the database schema and sets some preferences.
* @returns void.
*/
function my_firstplugin_install() {

}
osc_register_plugin(osc_plugin_path(__FILE__), ‘my_firstplugin_install’);

then add two hooks to initialize (load/init) the plugin and to uninstall the plugin, respectively :

/**
* (hook: init) Registers scripts and styles.
* @returns void.
*/
function my_firstplugin_load() {

}
osc_add_hook(‘init’, ‘my_firstplugin_load’);

/**
* (hook: uninstall) Make un-installation operations
*         It destroys the database schema and unsets some preferences.
* @returns void.
*/
function my_firstplugin_uninstall() {

}
osc_add_hook(osc_plugin_path(__FILE__) . ‘_uninstall’, ‘my_firstplugin_uninstall’);

5. those are the minimum requirement (install, uninstall and load) to create an osclass plugin. Zip the directory (so it’ll be my_firstplugin.zip) then open the oc-admin page and add the plugin from the zip file.
if there is an error “There was a problem adding the plugin” when installing the plugin then just copy and paste the plugin directory in oc-content/plugins/ directory

6. From admin page, we can install/uninstall and enable/disable our plugin but this plugin dont have any functionality yet. we will add some scripts so we can display the links/menu in admin page to configure the plugin. In the index.php file, add this hook ‘admin_menu’ so it’ll be :
/**
* (hook: admin_menu) Display the admin menu
* @returns html.
*/
function my_firstplugin_admin_menu() {
echo ‘<h3><a href=”#”>My First Plugin</a></h3>
<ul>
<li><a href=”‘ . osc_admin_render_plugin_url(osc_plugin_folder(__FILE__) . ‘/admin/link1.php’) . ‘”>&raquo; ‘ . __(‘Link 1’, ‘my_firstplugin’) . ‘</a><li>
<li><a href=”‘ . osc_admin_render_plugin_url(osc_plugin_folder(__FILE__) . ‘/admin/link2.php’) . ‘”>&raquo; ‘ . __(‘Link 2’, ‘my_firstplugin’) . ‘</a></li>
</ul>’;
}
osc_add_hook(‘admin_menu’, ‘my_firstplugin_admin_menu’);

EDIT : if we have osclass version higher than 320 then we better to edit the above function like this :
/**
* (hook: admin_menu) Display the admin menu
* @returns html.
*/
function my_firstplugin_admin_menu() {
if(osc_version()<320) {
echo ‘<h3><a href=”#”>My First Plugin</a></h3>
<ul>
<li><a href=”‘ . osc_admin_render_plugin_url(osc_plugin_folder(__FILE__) . ‘/admin/link1.php’) . ‘”>&raquo; ‘ . __(‘Link 1’, ‘my_firstplugin’) . ‘</a><li>
<li><a href=”‘ . osc_admin_render_plugin_url(osc_plugin_folder(__FILE__) . ‘/admin/link2.php’) . ‘”>&raquo; ‘ . __(‘Link 2’, ‘my_firstplugin’) . ‘</a></li>
</ul>’;
}else{
osc_add_admin_submenu_divider(‘plugins’, __(‘My First Plugin’, ‘my_firstplugin’), ‘my_firstplugin_divider’, ‘administrator’);
osc_add_admin_submenu_page(‘plugins’, ‘&raquo; ‘.__(‘Link 1’, ‘my_firstplugin’), osc_admin_render_plugin_url(osc_plugin_folder(__FILE__) . ‘/admin/link1.php’), ‘my_firstplugin_link1’, ‘administrator’);
osc_add_admin_submenu_page(‘plugins’, ‘&raquo; ‘.__(‘Link 2’, ‘my_firstplugin’), osc_admin_render_plugin_url(osc_plugin_folder(__FILE__) . ‘/admin/link2.php’), ‘my_firstplugin_link2’, ‘administrator’);
}
}
//osc_add_hook(‘admin_menu’, ‘my_firstplugin_admin_menu’);
if(osc_version()<320) {
osc_add_hook(‘admin_menu’, ‘my_firstplugin_admin_menu’);
} else {
osc_add_hook(‘admin_menu_init’, ‘my_firstplugin_admin_menu’);
}

dont forget to add a new directory ‘admin’ in the plugin. then add two new files in it : link1.php and link2.php. the files will display the html content. you can add any html file in its.

7. Ok. great. then how to add any content on the front page by our plugin? Without any plugin we can add any content in oc-content/themes/your-theme/main.php. ‘your-theme’ is curent activated theme, it could be ‘bender’ (default theme). we can insert any html/php code in main.php file like <p>TEST</p> or <?php echo “Great”; ?>. If we want to make it better, we can include any php/html file and add this code <?php osc_current_web_theme_path(‘your_file.php’) ; ?> dont forget to add the new file your_file.php and fill it with any html/php code.

8. Ok. now we want to connect to database and pull some data to be displayed in the admin page.
in index.php file below the plugin info, add a line :
require_once ‘model/myfirstplugin_model.php’;
then add a new directory ‘model’ and a file ‘myfirstplugin_model.php’ in it.
we want to display all city in a table t_city on link1.php file. so add these lines in myfirstplugin_model.php file :
<?php

/**
* Data Access Object (DAO) for messages.
*    Performs operations on database.
* @author Satria
* @package my_firstplugin
* @subpackage Model
* @since 1.00
*/
class MyFirstPluginModel extends DAO {

function __construct() {
parent::__construct();
}

/**
* Singleton.
*/
private static $instance;

/**
* Singleton constructor.
* @return an MadhouseMessengerDAO object.
*/
public static function newInstance() {
if(!self::$instance instanceof self) {
self::$instance = new self;
}
return self::$instance;
}

/**
* Return table name city
* @return string
*/
public function getTable_City()
{
return DB_TABLE_PREFIX.’t_city’;
}

/**
* Get all city
*
* @return array
*/
public function getAllCity()
{
$this->dao->select();
$this->dao->from( $this->getTable_City() ) ;
$this->dao->orderBy(‘s_name’, ‘ASC’) ;

$results = $this->dao->get();
if( !$results ) {
return array() ;
}

return $results->result();
}
}

then edit link1.php file so it’ll be :

<div id=”settings_form” style=”border: 1px solid #ccc; background: #eee; “>
<div style=”padding: 20px;”>
<div>
<fieldset>
<legend><?php _e(‘My First Plugin Link 1 : All City Name’); ?></legend>
<!–p>
<?php _e(‘Congratulation. This is a link 1 content’, ‘my_firstplugin’); ?>
</p–>
<?php
$city = MyFirstPluginModel::newInstance()->getAllCity();
foreach($city as $c){
echo $c[‘s_name’].'<br>’;
}
?>
<p>
<?php _e(‘Created by Satria Faestha. Osclass version : ‘.osc_version(), ‘my_firstplugin ‘); ?>
</p>
</fieldset>
</div>
</div>
</div>

then open link1.php on admin page. All city name will be displayed on the page.
You can play with the query like just show 5 top city, etc.

9. Now we want to add our own table so when we install the plugin, our table will be created and ready to be used. otherwise if we want to uninstall the plugin, the tables will be deleted.
Add these two sql file in sql directory (create a new directory ‘sql’). they are myfirstplugin.sql and add_data.sql
in myfirstplugin.sql :
CREATE TABLE /*TABLE_PREFIX*/t_my_firstplugin (
pk_i_id INT(2) UNSIGNED NOT NULL AUTO_INCREMENT,
s_name VARCHAR(255),

PRIMARY KEY (pk_i_id)
) ENGINE=InnoDB DEFAULT CHARACTER SET ‘UTF8’ COLLATE ‘UTF8_GENERAL_CI’;

in add_data.sql :
INSERT INTO /*TABLE_PREFIX*/t_my_firstplugin (pk_i_id, s_name) VALUES (1,’Satria Faestha’);
INSERT INTO /*TABLE_PREFIX*/t_my_firstplugin (pk_i_id, s_name) VALUES (2,’Ermillya Roza’);
INSERT INTO /*TABLE_PREFIX*/t_my_firstplugin (pk_i_id, s_name) VALUES (3,’Sarah Almahyrah’);
INSERT INTO /*TABLE_PREFIX*/t_my_firstplugin (pk_i_id, s_name) VALUES (4,’Alim Alhikmah’);

in myfirstplugin_model.php add these lines :
/**
* Import sql file
* @param type $file
*/
public function import($file)
{
$path = osc_plugin_resource($file) ;
$sql = file_get_contents($path);

if(! $this->dao->importSQL($sql) ){
throw new Exception( “Error importSQL::MyFirstPluginModel<br>”.$file ) ;
}
}
/**
* Remove data and tables related to the plugin.
*/
public function uninstall()
{
$this->dao->query(sprintf(‘DROP TABLE ‘.DB_TABLE_PREFIX.’t_my_firstplugin’) ) ;
}

then in index.php file edit these functions :
function my_firstplugin_install() {
MyFirstPluginModel::newInstance()->import(‘my_firstplugin/sql/myfirstplugin.sql’);
MyFirstPluginModel::newInstance()->import(‘my_firstplugin/sql/add_data.sql’);
}
osc_register_plugin(osc_plugin_path(__FILE__), ‘my_firstplugin_install’);

and

function my_firstplugin_uninstall() {
MyFirstPluginModel::newInstance()->uninstall();
}
osc_add_hook(osc_plugin_path(__FILE__) . ‘_uninstall’, ‘my_firstplugin_uninstall’);

then do uninstall (if our plugin still installed) and install the plugin. you can see the new table t_my_firstplugin in our database. you can add new function in the model file to pull the content :
public function getMyFirstPluginData()
{
$this->dao->select();
$this->dao->from( $this->getTable_MyFirstPlugin() ) ;
//$this->dao->orderBy(‘s_name’, ‘ASC’) ;
$this->dao->orderBy(‘pk_i_id’, ‘ASC’) ;

$results = $this->dao->get();
if( !$results ) {
return array() ;
}

return $results->result();
}

then in link2.php file, edit the content so it’ll be :
<div id=”settings_form” style=”border: 1px solid #ccc; background: #eee; “>
<div style=”padding: 20px;”>
<div>
<fieldset>
<legend><?php _e(‘My First Plugin Link 2’); ?></legend>
<p>
<?php
$data = MyFirstPluginModel::newInstance()->getMyFirstPluginData();
foreach($data as $d){
echo $d[‘s_name’].'<br>’;
}
?>
</p>
</fieldset>
</div>
</div>
</div>

10. We also want the data in our table can be added, edited and/or deleted.

Docker Installation

For linux, download from http://docs.docker.com/engine/installation/linux/. For Ubuntu, read and follow the step here.

  1. Check the kernel machine. The kernel should be newer than 3.1. Also docker requires 64-bit Ubuntu.

    My kernel version is 4.4.0-38 (PASS)
  2. Update APT source
    Update system

    Update package information, ensure that APT works with the https method, and that CA certificates are installed.

    Add the new GPG key

    Then Open the /etc/apt/sources.list.d/docker.list file in your favorite editor. If the file doesn’t exist, create it.

    Make sure the file is empty or remove any existing entries. Add this on file for Ubuntu Trusty 14.04 (LTS)

    Save and close the file.
    Update the system

    Purge the old repo if it exists.

    Verify that APT is pulling from the right repository.

    CONT….

Another My Ubuntu 14.04 Installation, Problem and Solutions

When I want to update my system,

I got this error on my terminal

Solution:
For

from “GPG error:The following signatures were invalid: KEYEXPIRED”, It’s safe to IGNORE the GPG error. From this How can I fix a 404 Error when using a PPA or updating my package lists?, I CAN LEARN ABOUT THE PPA, HOW TO HANDLE THE ERROR AND DELETE/REMOVE PPA.
For

from “GPG error: Release: The following signatures were invalid: BADSIG” and How can i rebuild my ubuntu package lists??, It said to backup my current ppa list then do clean update??? BUT I HAVEN’T DONE IT YET!!! BUSY WITH ANOTHER THING

PHP/Apache error??
I got this message when I’m trying to repair the software update (I got my linux package broken in order to make upwork time tracker software working)

I got this error

when trying to access another disk (sdb3).
Solution: Start to windows 10 then restart/shutdown it. It took a few minutes to completely restart/shutdown windows 10. If I didn’t patient enough, the above error would be displayed again when I use ubuntu and try to access another partition. If I dont want to do the above (restart to windows again), I can use a trick from this http://askubuntu.com/questions/462381/cant-mount-ntfs-drive-the-disk-contains-an-unclean-file-system. but i never try it!

Installation of Cinnamon 2.8 Linux Desktop Environment (DE)
I need to install this DE because I see my screen pixel has black horizontal line and it’s growing everyday. I suspected it’s caused by the bottom panel bar of my Gnome classic DE can’t be hidden (auto hide) so the panel always appear and the black  line precisely at the border between the panel and the rest of screen.–> I DECIDED TO NOT INSTALL THIS DE RIGHT NOW, MAY BE SOMEDAY LATER. I FOUND A WAY TO AUTO HIDE THE BOTTOM (AND THE TOP) PANEL OF GNOME BY SELECTING ‘GNOME FLASHBACK (METACITY)’ INSTEAD OF ‘GNOME FLASHBACK (COMPIZ)’ I OFTEN TO USE WHEN I LOG IN MY UBUNTU MACHINE. BASED ON THIS LINK auto-hide bottom panel using classic gnome ?, I CAN USE ‘Alt + right click or Super Key + Alt + right click in an open panel area.’ THEN CLICK ‘Properties’ THEN CHECK ‘Autohide’. DONE!

When I update my system via ‘sudo apt-get update’ or via Software Updater, I got this error:

Solution: (ref: https://chrisjean.com/fix-apt-get-update-the-following-signatures-couldnt-be-verified-because-the-public-key-is-not-available/)
So add the key ’37BBEE3F7AD95B3F’ like this:

 

OSClass Sub Domain Setting

First try to install the newest osclass version. Here I use 3.6.1 version. Install it locally. It works! here is the url : http://localhost/works/osclass361. user and password for the admin page (/oc-admin/) is ‘admin’ and ‘admin’.

Setup the virtualhost

Here is the content

Then enable the website and reload Apache service using below command

Then register the above local site. open

Then type

Then restart apache

Then set the permalink for SEF url in the admin page on Show more -> Settings -> permalinks (http://localhost/works/osclass361/oc-admin/index.php?page=settings&action=permalinks) then Check ‘Enable friendly urls’ then Save Changes! It’ll create .htaccess file

Then modify config.php file. Edit these two lines

to

Test the site on your browser: http://www.osclass361.dev/ or just osclass361.dev/ Here is how it looks osclass361 Because I still have a little listing available, I need to post some of them. NOW it is time to setup the subdomain. I want to use ‘City’ as the subdomain based and use wildcard * to make it simpler. From this article Use categories, countries, regions or cities as subdomains, I’ll follow the guidelines:
1. go to admin Show More -> Settings -> Advanced (http://www.osclass361.dev/oc-admin/index.php?page=settings&action=advanced) then set:

2. Use DNS wildcard

modify from

to

3. Modify virtualhost. use *.osclass361.dev instead of www.osclass361.dev on ServerAlias

4. Restart apache

5. changes on config.php. Modify from

to

6. Add cookies configuration on config.php

7. Modify .htaccess to be like this

8. Test!

9. Open the site with the subdomain (city) like: http://abbeville.osclass361.dev/
AND IT WORKS!!! IT CAN OPEN THE OTHERS PAGES WITH THE SUBDOMAIN BUT I THINK IT NEED TO BE LIMITED WHICH PAGE CAN BE OPENED BY THE SUBDOMAIN FOR EXAMPLE ONLY FOR ITEMS PAGE AND SHOW THE ITEMS FROM THE CITY!
A FEW ERRORS ENCOUNTER:

WHEN TRYING TO ACCESS ANOTHER LINK LIKE http://www.osclass361.dev/user/login. SO IT ONLY CAN OPEN THE HOMEPAGE!
SOLUTION: It happened because I didn’t modify .htaccess file, Modify it like #7 above!
IT’S WORKS NOW BUT SLOW TO OPEN ANYPAGE (WHEN COOKIES IS ALREADY DELETED)!!!