DEV Community: fadilxcoder

Codeigniter 4 with Docker on AWS Cloud9

fadilxcoder — Sun, 26 Apr 2020 11:57:30 +0000

Hey devs 💻, I've been spending my days during lockdown trying get familiar with Docker & Amazon Web Services (AWS) Cloud9.

As a PHP developer, I once was using Codeigniter 3 for developing applications. Then it came to my attention that Codeigniter 4 (CI4) was released.

So I decided to combine these 3 and by using AWS - Ubuntu Server 18.04 LTS Platform, I will use Docker and have CI4 working on it.

My AWS environment settings are as follows :

Environment type : EC2
Platform : Ubuntu Server 18.04 LTS

Let the trip begin 😎

In your bash terminal on AWS, just to check the php version, we won't be using this one though.

ubuntu:~/environment $ php -v

Normally you should see php version 7.2,
PHP version

I actually spent couple of days trying to built a nice Docker Environment comprising of

nginx
php-pfm
database

It is available on Github

fadilxcoder / docker-env

Docker Environment Configuration

NGINX / APACHE / PHP-FPM / ADMINER

PHP Extension installer : https://github.com/mlocati/docker-php-extension-installer (Git repo)
NOTE : Replace with : https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions

Example :

FROM php:7.2-cli

ADD https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions /usr/local/bin/

RUN chmod +x /usr/local/bin/install-php-extensions && \
    install-php-extensions gd xdebug

To verify if extension is present, use command : php -m|grep mysql for example
Connect to App Terminal : docker exec -it fx_php_fpm ash
Verify if container is UP : docker ps

NOTES

Docker Apache : https://github.com/fadilxcoder/docker-env/tree/master-apache
Docker symfony : https://github.com/fadilxcoder/docker-env/tree/symfony
BUILD / UP : docker-compose up --build -d
UP : docker-compose up
DOWN : MySQL version - docker-compose down --remove-orphans

DETAILS

PHP : 8.1.5
NGINX : nginx/1.21.6
MySQL version : 10.7.3-MariaDB-1:10.7.3+maria~focal

URL

URL : http://localhost:8881/
PHPINFO : http://localhost:8881/phpinfo.php
ADMINER : http://localhost:8881/adminer.php
- Server : database
- Username : myuser
- Password : secret
- Database : mydb

View on GitHub

Clone the repository and move the files to the root of your project.

ubuntu:~/environment $ git clone https://github.com/fadilxcoder/docker-env.git
ubuntu:~/environment $ mv docker-env/{*,.*} ./
ubuntu:~/environment $ rmdir docker-env/

AWS

Okay, from here i'll explain to you the file structure.

In src folder, we will add only the application codes. It can be html, js, css, php files or assets (images / favicon). Overall , our codes goes in this folder.
In docker folder, it consist of a docker-compose file where we have the configuration parameters for docker and other Dockerfile each for an image. Depending on your application, you might need to updated these files before building it.

Now we will get CI4 working!

Let the trip continue 👽

You will have to edit the Dockerfile in php-fpm as CI4 uses the intl php extension.

RUN chmod uga+x /usr/local/bin/install-php-extensions && sync && \
    install-php-extensions gd xdebug mysqli intl

Ans also in docker-compose.yml, change port as AWS by default uses port 8080.

    ports:
      - "8080:80"

AWS Environment does not have docker-compose command by default, you will need to install it by running sudo apt install docker-compose.

Once installed, go to docker repository and run :

ubuntu:~/environment/docker $ docker-compose up --build

It might take some time as it will have to download the image if it is not present.

Open up another terminal in your AWS and check the container status whether it is up and running,

ubuntu:~/environment/docker $ docker ps

AWS Docker Container

Now you will need to connect to your container terminal,

ubuntu:~/environment $ docker exec -it fx_php_fpm ash
/var/www/html # composer create-project codeigniter4/appstarter ci4

The installation will start...

CI4 in Docker Container

95% complete 😁

In the src folder, uncomment the phpinfo(); save the file and the preview your application.

php version 7.4.5

To preview your CI4 application,

URL : http://xxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.us-east-2.amazonaws.com/ci4/public/

Codeigniter 4

One problem that you might come across is that you may not be able to edit the code of the codeigniter app.

But no worry 😃

Use the 2 commands below to change files ownership & group.

ubuntu:~/environment/src $ sudo chown -R ubuntu ci4/
ubuntu:~/environment/src $ sudo chgrp -R ubuntu ci4/

File permission

Trip's over ✨✨✨ 👊 ❤️ ✌️ ✨✨✨

Now we have a fully functional docker container with Codeigniter on AWS C9 and you can code on it anytime/ anywhere...

PHP 7 on Amazon Web Services (AWS) Cloud9

fadilxcoder — Sat, 14 Dec 2019 14:06:55 +0000

Hello guys,

On thing that I've noticed when working with AWS cloud9 is that by default, it has PHP 5 installed. My question was what if I want to use PHP 7 for development ?

So in this post, I will explain to you how to setup your PHP 7 environement on AWS.

I am assuming that your AWS settings are as follows :

Environment type : EC2
Platform : Amazon Linux

Let's get started.

In your bash terminal on AWS, check your current PHP version,

ec2-user:~/environment $ php -v

Normally you should see,
PHP version

In order to do these changes, you will need to connect as root, so just type sudo su followed by yum update :

ec2-user:~/environment $ sudo su
[root@ip-172-31-30-164 environment]# yum update

Update packages

The process might take couple of minutes. Then remove any existing PHP packages.

[root@ip-172-31-30-164 environment]# yum remove php*

PHP packages removal

Note : If you already have Apache 2.4, you don't need to remove your web server but if you have an older version, then remove it and install Apache 2.4,

[root@ip-172-31-30-164 environment]# yum remove httpd*

[root@ip-172-31-30-164 environment]# yum install httpd24

If everything is working fine till now, you did a great job.

Now it's time to install PHP 7. As you know, there are multiple versions, i.e : php7.0, php7.1, php7.2...

Below are the command for different php version you want to install.

PHP 7.0

[root@ip-172-31-30-164 environment]# yum install php70 php70-mysqlnd php70-imap php70-pecl-memcache php70-pecl-apcu php70-gd

PHP 7.1

[root@ip-172-31-30-164 environment]# yum install php71 php71-mysqlnd php71-imap php71-pecl-memcache php71-pecl-apcu php71-gd

PHP 7.2

[root@ip-172-31-30-164 environment]# yum install php72 php72-mysqlnd php72-imap php72-pecl-memcache php72-pecl-apcu php72-gd

Let's say we want to have PHP 7.2

PHP 7.2

And here you have it..

PHP version

You can easily work with PHP 7 on AWS now.

As a Developer, I did my first Web Penetration Testing

fadilxcoder — Tue, 15 Oct 2019 11:21:20 +0000

Hello Dev peeps,

I was on Facebook, scrolling on my News Feed and I came across an Ads regarding an online music web application that was just released. So I decided to visit the website and explored it. There were some free tracks & some premium tracks.

While exploring, something came across my mind, "Is this site really secured ?". This is where my journey started..

A journey of a thousand miles begins with a single step

I did not know exactly how to proceed but the first step was to examine the website through Google Chrome - DevTools.

So I click on a random premium song to see what is going on in the Network tab in the DevTools.

Music App URL

When clicking on the play icon, I was checking the Network and I found 2 interesting URL,

Network tab in DevTools

get-song-info?hash_id=40f65e3dad2b5d1....
get-track.php?id=I6OTPf15O79FuKg&hash=b28ee5...

Eventually I clicked on both URL, The first one redirect me to a JSON formatted webpage where all the data of the particular song were displayed.

JSON data

Whereas the second URL show only Access denied

Access denied

After spending sometime analyzing the situation, I said let's figure out a way to download one premium song without buying it.

My guess was that the Music App Developer use a call to action that trigger a PHP script via an API, when a user click the play icon and this script was returning a "content-type: audio/mpeg".

In other words, the URL that was showing Access denied web page cannot be called directly by copying & pasting the URL in your web browser. It should be called by an API.

I used API TESTER to simulate the test and as expected..

Bad news ! It did not work !

I noticed that in the Network tab in the DevTools, there were other parameters sent as Request Header.

Request Header

After many trials and errors, I was able to simulate it by adding some of those Request Header

API TESTER - simulation

And 💥, I got the Response.. BUT in an unexpected format 😖

Response Body

But it was not a big deal, I clicked on the eye icon on top-right and the premium song open in another tab in my browser and I was able to listen to it freely without having to buy it.

For your info, I got into contact with the Owner of the Online Music Application to report the issue. I don't know if they fixed it yet

JQuery Mobile App development by using XML, JSON, PhoneGap and PHP

fadilxcoder — Sun, 14 Apr 2019 16:40:17 +0000

Hello folks,

During these couple of days, I was developing a basic mobile application that's only functionality was to display some data that it retrieves somewhere on the web. I named it "RSS FEED"

Here is how it looks like !

App Icon

App landing page

App landing page (scrolling a bit down)

Clicking on an article & it pop up

Let's get to the core of what's exactly happening !

So, there is this website NETWORK WORLD FROM IDG that has an RSS. As usual, they are in XML format.

So what am doing is, I am using these XML, converting them into JSON by a PHP script hosted on my server and sending those JSON to the JQuery Mobile App and displaying them there and when a user click on a particular article's title, the whole article pop up so they can read it.

Any updates that is made is the XML file will update the mobile app in real time.

How did I work it out ?

Advice

To work on this, I used PhoneGap, which you can use to easily create mobile app in HTML, CSS & JavaScript. I also used WampServer as I was working on localhost during development. And finally you will need a Hosting & Domain.

Pssst, you can use free 000Webhost web hosting

Start PhoneGap and build a blank project
Checking the JQuery Mobile Demos in order to know which element to use to develop the mobile app front-end.
Build an Static Mobile App according to the design's wireframing.

After this part was completed, It was time to work with the XML. My only reason why I choose to work with JSON and not XML was simply because I feel more at ease with JSON.

I used a PHP Script that convert XML to JSON. Then I uploaded it on my server and it's done. It is returning JSON formatted data.

saqueib / qrss

PHP API class for parsing RSS feed and returning JSON http://www.qcode.in/build-complete-rss-feed-reader-app-php-rss-json-api/

qrss

An API Class to parse the RSS feed into json with cache option.

Getting Start

Grab the QRss class and use require it in your php file.

require 'src/QRss.php';

// To fetch an RSS feed as json use
(new Qrss('https://news.google.com/?output=rss'))->json();

// For fresh copy you can use fresh() which will ignore cache
(new Qrss('https://news.google.com/?output=rss'))->fresh()->json()

// Get the feed ignoring validation adding novalidate()
(new QRss('https://en.blog.wordpress.com/feed/'))->novalidate()->json();

// There is also an option to get data in plain text using text() instead of json()
(new Qrss('https://news.google.com/?output=rss'))->text();

Override Parser

You can also extend the parse method to customize the output.

class MyQrss extends QRss {
     protected function parse($xml)
     {
         // you have all the xml elements as SimpleXMLElement object
         //

…

View on GitHub

How to make them talk ?

For this I use AJAX. So when you open the application on your mobile, it trigger the AJAX which send a request to the server. The server responds with the JSON.

All I had to do was to loop over the JSON and append them to the List View of my application in order for it to display.

Deploy APK

I used Adobe PhoneGap Build for compiling the files and generate the APK, hence I downloaded the APK and installed it on my mobile phone.

Done !!! Works completely fine..

Below is the link of the app, just in case someone wants to check it.

Google Drive Link

Using codeigniter 3 CAPTCHA helper in forms

fadilxcoder — Thu, 17 Jan 2019 11:06:59 +0000

Hi,

I will show you a very simple way to use codeigniter 3 CAPTCHA helper when submitting a form in your web application.

So... Ready, Set, Code !

For this, we will be using Welcome controller and welcome_message view. So the first step is to edit the code in the "index" method in "Welcome" controller and add 3 things.

$this->load->library('form_validation');
$this->load->helper('captcha');
$this->load->library('session');

We load the form validation library in order validate the data when the user submit a form on the webpage.
We load the captcha helper that we will configure afterwards.
We will be using the session library in order to store the captcha value.

Now we will have to configure the CAPTCHA helper


$vals = array(
'word'          => rand(1,999999),
'img_path'      => './assets/captcha/images/',
'img_url'       => base_url('assets').'/captcha/images/',
'font_path'     => base_url('assets').'/captcha/fonts/XYZ.ttf',
'img_width'     => '150',
'img_height'    => 30,
'word_length'   => 8,
'colors'        => array(
               'background'     => array(255, 255, 255),
               'border'         => array(255, 255, 255),
               'text'           => array(0, 0, 0),
               'grid'           => array(255, 75, 100)
            )
        );

IMPORTANT NOTICE !

I forgot to mention before, you will have to set your project file structure as below if your configuration is like above.

your_ci_project
│
└───application
│
└───system
│
└───tests
│
└───index.php
│
└───.htaccess
│
└───assets
    │
    └───captcha
           │
           └───images
           │
           └───fonts
                 │
                 └───XYZ.ttf

You can find more details on Codeigniter User Guide .

After configuring it, call the function that will create the captcha and finally sending it to the "welcome_message.php" view.

$data['captcha'] = create_captcha($vals);
$this->load->view('welcome_message',$data);

To see the captcha in your view, just add this piece of code.

echo $captcha['image']

I hope everything is okay till now.

Time to validate !

In this part we will code the part where the user click on a submit button on the webpage and the controller will validate the captcha.

Let say we have a form in our view with a button in it.

<?php echo $captcha['image'] ?>
<input type="text" name="captcha">
<input type="hidden" value="<?php echo $captcha['word'] ?>" name="code">
<button name="submit_contact">Send</button>

As you can see in the above code, I have a input tag of type hidden whereby I stored the captcha string and when submitting the form, this data is also sent to the controller.

In order to avoid creating multiple methods, I will use the index one but will add an if/else conditional statement to check if a user submit a form. After that we will process the data.


if(isset($_POST['submit_contact'])):
   $this->session->set_userdata('captcha_answer',$this->input->post('code'));
   $this->form_validation->set_rules('captcha', 'Captcha', 'required|integer|callback_check_captcha');
   if($this->form_validation->run() == TRUE):
      $this->session->set_flashdata('positive','CAPTCHA VALIDATED SUCCESSFULLY');
      redirect(site_url());
   endif;
endif;

As you can see above, there is a callback for the submitted captcha in order to check whether it is the same or not as in the image.


public function check_captcha($string)
{
   if($string != $this->session->userdata('captcha_answer')):
      $this->form_validation->set_message('check_captcha', 'captcha incorrect');
      return false;
   else:
      return true; 
   endif;
}

After that, if you want you can destroy the session for captcha_answer.

That's it!

Adding multi-language functionality in a website developed in laravel.

fadilxcoder — Sat, 05 Jan 2019 16:58:38 +0000

Hello Everyone,
Today I will share with you how do add multi language to a website that was developed in laravel, my version is 5.6 but it will work on 5.7 as well.

So...here we go!

First of all, I assume that you already have a working version of laravel. Navigate to that particular folder and open your terminal or command prompt.

Run the following command in order to create the required middleware.

$ php artisan make:middleware Localization

Then open it. The file should be in "project_name/app/Http/Middleware/Localization.php"

Update the code that is present with the one below :

public function handle($request, Closure $next)
{
   if(\Session::has('locale'))
   {
       \App::setlocale(\Session::get('locale'));
   }
   return $next($request);
}

Lets say you want your website to be in English and French.

Go to "project_name/resources/lang/en/"
Create a file name "messages.php"
Create folder "fr" in "project_name/resources/lang/"
Create a file name "messages.php" in "project_name/resources/lang/fr/"

Open "messages.php" in both folder and insert the following codes.

"messages.php" in 'en' folder.


return [
    'welcome'       => 'Welcome to our application'
];

"messages.php" in 'fr' folder.


return [
    'welcome'       => 'Bienvenue sur notre application'
];

Most important...

Add the below codes in "project_name/app/Http/Kernel.php" in "protected $middlewareGroups section".

\App\Http\Middleware\Localization::class,

So your codes should be like this :

protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\Localization::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

Now all this code in the route, "project_name/routes/web.php" on top of other defined routes.

Route::get('locale/{locale}', function ($locale){
    Session::put('locale', $locale);
    return redirect()->back();
});

So in order to know the language that is being use, you can simply use :


<html lang="{{ app()->getLocale() }}">

Changing language en/fr

To change the language, just create an anchor tag in html like the following :


<li><a href="{{ url('locale/en') }}" ><i class="fa fa-language"></i> EN</a></li>

<li><a href="{{ url('locale/fr') }}" ><i class="fa fa-language"></i> FR</a></li>

To call the desired text :


<h1>{{ __('messages.welcome') }}</h1>