PHP & Web Development Blogs

Search Results For: system
Showing 1 to 5 of 21 blog articles.
682 views · 1 months ago

![Laravel Eloquent Relationship Part 2](https:/ /images.ctfassets.net/vzl5fkwyme3u/3gY1sugUC3gTUtfgbhgNi5/410818aed6a8d4ea08e0ec796477291c/laravel_blog.png?w=1000)

As you all know, Laravel Eloquent Relationships are powerful and easy methods introduced by Laravel for helping developers to reduce the complexity when connecting with multiple tables. While connecting with multiple tables, this method is very easy for developers for creating the application

Here you can see the next three methods of the eloquent relationships:

1. Has Many Through Relationship

2. One to Many Polymorphic

3. Many to many Polymorphic

## HAS MANY THROUGH ELOQUENT RELATIONSHIP

Has many through is a little bit complicated while understanding. I will provide a shortcut method to provide access data of another mode relationship. We will create a user table, post table, and country table and they will be interconnected with each other.

Here we will see Many through relationship will use `hasManyThrough()` for the relation

### Create Migrations

**Users table**

```

Schema::create('users', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('email')->unique();

$table->string('password');

$table->integer('country_id')->unsigned();

$table->rememberToken();

$table->timestamps();

$table->foreign('country_id')->references('id')->on('countries')

->onDelete('cascade');

});

```

**Posts table**

```

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->integer('user_id')->unsigned();

$table->timestamps();

$table->foreign('user_id')->references('id')->on('users')

->onDelete('cascade');

});

```

**Countries table**

```

Schema::create('countries', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->timestamps();

});

```

### Create Models

**Country Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Country extends Model

{

public function posts(){

return $this->hasManyThrough(

Post::class,

User::class,

'country_id', / / Foreign key on users table...

'user_id', / / Foreign key on posts table...

'id', / / Local key on countries table...

'id' / / Local key on users table...

);

}

}

```

**Now we can retrieve records by**

```

$country = Country::find(1);

dd($country->posts);

```

## ONE TO MANY POLYMORPHIC RELATIONSHIP

One to many polymorphic relationships used one model belongs to another model on a single file. For example, we will have tweets and blogs, both having the comment system. So we need to add the comments. Then we can manage both in a single table

Here we will use sync with a pivot table, create records, get all data, delete, update, and everything related to one too many relationships.

Now I will show one too many polymorphic will use `morphMany()` and `morphTo()` for relation.

### Create Migrations

**Posts table**

```

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

```

**Videos Table**

```

Schema::create('videos', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

```

**Comments Table**

```

Schema::create('comments', function (Blueprint $table) {

$table->increments('id');

$table->string("body");

$table->integer('commentable_id');

$table->string("commentable_type");

$table->timestamps();

});

```

## Create Models

**Post Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

/ **

* Get all of the post's comments.

*/

public function comments(){

return $this->morphMany(Comment::class, 'commentable');

}

}

```

**Video Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Video extends Model{

/ **

* Get all of the post's comments.

*/

public function comments(){

return $this->morphMany(Comment::class, 'commentable');

}

}

```

**Comment Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model{

/ **

* Get all of the owning commentable models.

*/

public function commentable(){

return $this->morphTo();

}

}

```

### Create Records

```

$post = Post::find(1);

$comment = new Comment;

$comment->body = "Hi Harikrishnan";

$post->comments()->save($comment);

/ / Video

$video = Video::find(1);

$comment = new Comment;

$comment->body = "Hi Harikrishnan";

$video->comments()->save($comment);

```

Now we can retrieve records

```

$post = Post::find(1);

dd($post->comments);

$video = Video::find(1);

dd($video->comments);

```

## MANY TO MANY POLYMORPHIC RELATIONSHIPS

Many to many polymorphic is also a little bit complicated like above. If we have a tweet, video and tag table, we need to connect each table like every tweet and video will have multiple persons to tag. And for each and every tag there will be multiple tweet or videos.

Here we can understand the creating of many to many polymorphic relationships, with a foreign key schema of one to many relationships, use sync with a pivot table, create records, attach records, get all records, delete, update, where condition and etc..

Here `morphToMany()` and `morphedByMany()` will be used for many to many polymorphic relationships

### Creating Migrations

**Posts Table**

```

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

```

**Videos Table**

```

Schema::create('videos', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

```

**Tags table**

```

Schema::create('tags', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

```

**Taggables table**

```

Schema::create('taggables', function (Blueprint $table) {

$table->integer("tag_id");

$table->integer("taggable_id");

$table->string("taggable_type");

});

```

### Creating Models

**Post Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

/ **

* Get all of the tags for the post.

*/

public function tags(){

return $this->morphToMany(Tag::class, 'taggable');

}

}

```

**Video Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Video extends Model

{

/ **

* Get all of the tags for the post.

*/

public function tags(){

return $this->morphToMany(Tag::class, 'taggable');

}

}

```

**Tag Model**

```

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Tag extends Model

{

/ **

* Get all of the posts that are assigned this tag.

*/

public function posts(){

return $this->morphedByMany(Post::class, 'taggable');

}

/ **

* Get all of the videos that are assigned this tag.

*/

public function videos(){

return $this->morphedByMany(Video::class, 'taggable');

}

}

```

**Creating Records**

```

$post = Post::find(1);

$tag = new Tag;

$tag->name = "Hi Harikrishnan";

$post->tags()->save($tag);

$video = Video::find(1);

$tag = new Tag;

$tag->name = "Vishnu";

$video->tags()->save($tag);

$post = Post::find(1);

$tag1 = new Tag;

$tag1->name = "Kerala Blasters";

$tag2 = new Tag;

$tag2->name = "Manajapadda";

$post->tags()->saveMany([$tag1, $tag2]);

$video = Video::find(1);

$tag1 = new Tag;

$tag1->name = "Kerala Blasters";

$tag2 = new Tag;

$tag2->name = "Manajappada";

$video->tags()->saveMany([$tag1, $tag2]);

$post = Post::find(1);

$tag1 = Tag::find(3);

$tag2 = Tag::find(4);

$post->tags()->attach([$tag1->id, $tag2->id]);

$video = Video::find(1);

$tag1 = Tag::find(3);

$tag2 = Tag::find(4);

$video->tags()->attach([$tag1->id, $tag2->id]);

$post = Post::find(1);

$tag1 = Tag::find(3);

$tag2 = Tag::find(4);

$post->tags()->sync([$tag1->id, $tag2->id]);

$video = Video::find(1);

$tag1 = Tag::find(3);

$tag2 = Tag::find(4);

$video->tags()->sync([$tag1->id, $tag2->id]);

```

Now we can retrieve records

```

$post = Post::find(1);

dd($post->tags);

$video = Video::find(1);

dd($video->tags)

$tag = Tag::find(1);

dd($tag->posts);

$tag = Tag::find(1);

dd($tag->videos);

```

Hence we completed all the relationships. In the above blog how has many through relationship, one to many polymorphic relationships and many to many polymorphic are working. This feature is introduced from Laravel 5.0 onwards and till the current version. Without the model, we can’t able to do this relationship. If we are using an eloquent relationship it will be very useful while developing an application.

1043 views · 1 months ago

![](https:/ /cdn.filestackcontent.com/ZriVX3EQNqmKgVF9FEdy)

#### Welcome back!, if you’re new please be sure to read [Part 1 here](https:/ /nomadphp.com/blog/1925/code-with-me-challenge-custom-cms-development-with-php-and-mysql).

This tutorial will focus primarily on Security and will touch on how to plan functionality.

Planning out an application and seeing progress regularly is a good strategy as you are most likely to complete your tasks in a timely fashion with this approach.

Ready?, ok let’s jump into it!

### DISCLAIMER

> We highly recommend that you follow these tutorials on a localhost testing server like Uniserver. Read through [Part 1 here](https:/ /nomadphp.com/blog/1925/code-with-me-challenge-custom-cms-development-with-php-and-mysql) to look at our recommendations. These tutorials follow a phased approach and it is highly recommended that you do not make snippets of code live prior to completing this tutorial series.

## Where we left off – the serious stuff.

In the previous tutorial we saved variables to the database.

It’s important to note that further steps are needed to ensure that data transactions to / from the database are secure.

A great first step is to ensure that all POST data (data transmitted after a user clicks a form’s submit button) is sanitized.

## What we’re trying to prevent

One of the most common exploits is SQL Injection, an attack most commonly used to insert SQL into db queries. POST data that’s not sanitized leaves a huge security hole for malicious exploits. In some cases SQL injection can be leveraged to rage an all out assault on a server’s operating system.

A few examples of a basic version of what this might look like can be seen below.

![](https:/ /cdn.filestackcontent.com/GdjoE6bPRQOT582LSGNQ)

#### OUTCOME

This might delete your database table

![](https:/ /cdn.filestackcontent.com/MlAzWxaJQWqsy7MjFQiM)

#### OUTCOME

This might provide access to the entire user table and the password protected area/dashboard.

***Please note that there are various types of SQL injection techniques and I will delve into this during the course of this series.***

## So what exactly is sanitization and what does it do?

When sanitizing POST data, we are essentially looking for any special characters that are often used in SQL injection attacks.

In many ways, this tiny piece of code is the unsung superhero of many database driven applications.

## Let’s secure that POST data!

Navigate to your backend folder and open index.php

Locate the following line of code:

```

$sql = "INSERT INTO content(title,content,author)VALUES ('".$_POST["title"]."', '".$_POST["content"]."', '".$_POST["author"]."')";

```

Ok, let’s get to work.

Based on what I mentioned a few moments ago, it’s clear that our SQL statement is vulnerable so we need to sanitize the POST data pronto!

The method I will focus on first is $mysqli->real_escape_string. This will escape any special characters found in the POST data.

Add the following just above your $sql.

```php

$title = $letsconnect -> real_escape_string($_POST['title']);

$content = $letsconnect -> real_escape_string($_POST['content']);

$author = $letsconnect -> real_escape_string($_POST['author']);

```

Did you notice the use of `$letsconnect`? This was used because of our db connection defined in conn.php.

Our new query will look like this:

```

$sql = "INSERT INTO content (title,content,author) VALUES ('".$title."', '".$content."', '".$author."')";

```

Go ahead and replace the old `$sql`.

Phew!, we can breathe easy now.

## Next, let’s lighten things up a bit by focusing on functionality and aesthetics.

A phased approach is the best way to tackle projects of any size.

I tend to jot this down on paper before creating a more legible professional spec!.

Typically the phased approach lends itself to logical progression.

For example, over the next several days I will go over the following:

* Account Access

* The login process

* The registration process

* The password recovery process

* Frontend

* The look and feel

* Menus

* Sidebars

*Main Content

*Footer

* Backend

* Content Management

* Add/Edit/Delete

* Security

This will give us a good springboard to delve into more complex functionality.

The aesthetic I have in mind will be barebones at first with clean CSS practices (this will make life a whole lot easier when we have to make changes down the line!).

## Challenge :

Plan out your own CMS, think about the user interface and design choices you’d like to implement, and create a phased approach.

## Conclusion

I hope this tutorial encouraged you to think about security and understand one of the most common exploits. During the course of this series, you will receive the tools necessary to beef up security while maintaining your sanity!

#### Next up

##### CodeWithMe – Let’s go templating.

1423 views · 2 months ago

![](https://images.ctfassets.net/vzl5fkwyme3u/2onKLFlXK4GStdtncTzZiT/9b0b6c5c45bacad4b107264875514180/codewithme.png)

It took me quite some time to settle on my first blog post in this series and I found myself thinking about the most requested functionality in my career – The good ‘ol Custom CMS – typically geared towards clients that want a straight forward, secure solution that can be expanded upon in a modular format and that’s their IP.

This will be our starting point. A blank slate to build something epic with clean code and even cleaner design. And in the spirit of building from scratch, I will refrain from using classes or a framework. The main reasoning behind this is to truly get everyone acquainted with and excited about PHP development.

Join me as I transform rudimentary code into something extraordinary that can be morphed into just about any Content, PHP, and MySQL driven project. So without further ado, let’s jump into it!

### The bare necessities

If you’re just getting started with development, there’s a nifty bite sized server called [UniformServer](https://www.uniformserver.com/) that will be your best friend throughout your coding career. [PHPMyAdmin](https://www.phpmyadmin.net/) (an awesome visual db management tool) comes built in so if you’re looking for a work right out of the box solution, this is it.

Alternatively, you can opt for [XAMPP](https://www.apachefriends.org/index.html) or use an alternative server of your choice.

### Now here’s where the exciting stuff begins, mapping things out.

I don’t see this done/encouraged often enough. Feel free to grab a piece of paper to logically map out your steps or produce a rough draft of where you’d like this project to go.

In this tutorial, I would like to achieve the following:

![](https://cdn.filestackcontent.com/D0KhE3hEQbClPDYqChUm)

### DB, DB, Set up your DB.

This requires a bit of planning but let’s start of with the basic structure we need to see this through.

We are going to need a user table and a content table and are a few ways to tackle this.

If you’re using the PHPMyAdmin tool you can create your database, add user permissions (Click on Permissions after creating your database), and create a table with ease.

![](https://cdn.filestackcontent.com/PiEKcelYTFitGkAOuHhf)

If you’re like me and prefer to look at good ‘ol SQL then writing an SQL statement is the preferred approach.

```

CREATE TABLE `mydbname`.`content` ( `ID` INT(11) NOT NULL AUTO_INCREMENT , `title` VARCHAR(100) NOT NULL , `content` LONGTEXT NOT NULL , `author` VARCHAR(50) NOT NULL , PRIMARY KEY (`ID`)) ENGINE = MyISAM COMMENT = 'content table';

```

Understanding the SQL statement

In a nutshell we are creating a table with important fields. Namely:

#########################

ID | Title | Content | Author

#########################

The ID field is our unique identifier.

Now we can move on to the file structure.

### Everything has a place in the file structure game

You can use a structure that speaks to your coding style / memory.

I tend to use the following:

![](https://cdn.filestackcontent.com/ZhJPGlmGQGKYM1WNsipR)

Choose a name for your CMS, which should be placed at the webroot of your localhost/server.

Replicate the folder structure as per the above example.

### Next, we’re going to create a basic connection file.

You can create a `conn.php` file in your root/includes folder.

The connection file will provide crucial information to connect to the database.

Type the following into your `conn.php` file, remember to include your own database credentials.

```

<?php

$letsconnect = new mysqli("localhost","dbuser","dbpass","dbname");

?>

```

### Let’s go to the homepage (index.php)

Create a file called `index.php` at the root of your CMS folder.

I will be adding comments in my code to help you understand what each line does.

Comments are a useful tool for developers to add important notes private to their code.

We need to pull information from the database so it’s imperative that we include our connection file.

```

<?php

include('includes/conn.php');

if ($letsconnect -> connect_errno) { echo "Error " . $letsconnect -> connect_error;

}else{

$getmydata=$letsconnect -> query("SELECT * FROM content");

foreach($getmydata as $mydata){ echo "Title: "; echo $mydata['title']; echo "<br/>"; echo "Content: "; echo $mydata['content']; echo "<br/>"; echo "Author: "; echo $mydata['author']; echo "<br/>"; echo "<br/>";

}

}

$letsconnect -> close();

?>

```

### Let’s get a (very) basic backend up and running

Create a file called `index.php` in your backend folder.

We need to create a basic form to capture our data.

Let’s code some HTML!

```

<html>

<head><title>Backend - Capture Content</title></head>

<body>

<form action="<?php $_SERVER[‘PHP_SELF’];?>" method="post">

<input type="text" name="title" placeholder="Content Title here" required/>

<textarea name="content">Content Here</textarea>

<input type="text" name="author" placeholder="Author" required/>

<input type="submit" value="Save My Data" name="savedata"/>

</form>

</body>

</html>

```

### Next, we need to process the form data.

Type the following just above the ```<form> ``` tag.

```

<?php

if(isset($_POST['savedata'])){

include('../includes/conn.php');

if ($letsconnect->connect_error) {

die("Your Connection failed: " . $letsconnect->connect_error);

}else{

$sql = "INSERT INTO content(title,content,author)VALUES ('".$_POST["title"]."', '".$_POST["content"]."', '".$_POST["author"]."')";

if (mysqli_query($letsconnect, $sql)) {

echo "Your data was saved successfully!";

} else { echo "Error: " . $sql . "" . mysqli_error($letsconnect);

} $letsconnect->close();

}

}

?>

```

> Note, this is a basic MySQL query to insert data. However, before using this in production it's important to add proper escaping and security to prevent SQL injections. This will be covered in the next article.

### Congrats you made it to the end of tutorial 1!

Test out your creation, modify your content, and play around.

Go to your sitename/index.php to see your frontend after capturing data via sitename/backend/index.php

### Next Up:

#codewithme Now With Security, Functionality, and Aesthetics in mind.

### Conclusion

Coding doesn’t have to be daunting and it’s my aim to divide a complex system into bitesized tutorials so you can truly use the knowledge you’ve acquired in your own projects.

6260 views · 1 years ago

![PHP CHAT WITH SOCKETS](https://images.ctfassets.net/vzl5fkwyme3u/71dBtxsZPdBnAn8UgQTyRR/75ca0c2ab27af41ffc82b17d1be264d7/AdobeStock_265642631.jpeg?w=1000)

Hey Friends,

I am sharing a very interesting blog on how to create a chat system in php without using ajax. As we all know ajax based chat system in php is not a good solution

because it **increases the server load and redundant xhr calls** on our server.

Instead, I am going to use sockets for incoming messages from and send messages to another user. So lets try them out using the following steps:

### Step 1: Cross check in php.ini that sockets extension is enabled

```

;extension=sockets

/ /remove semicolon from very start of the extension like

extension=sockets

```

### Step 2: Create `server.php` file

This file will handle the incoming and outgoing messages on sockets, Add following variables in top of the file:

```php

$host = 'localhost'; / /host

$port = '9000'; / /port

$null = NULL; / /null var

```

### Step 3: After it add helper methods

The following code for handshake with new incoming connections and encrypt and decrypt messages incoming and outgoing over sockets:

```php

function send_message($msg)

{

global $clients;

foreach($clients as $changed_socket)

{

@socket_write($changed_socket,$msg,strlen($msg));

}

return true;

}

/ /Unmask incoming framed message

function unmask($text) {

$length = ord($text[1]) & 127;

if($length == 126) {

$masks = substr($text, 4, 4);

$data = substr($text, 8);

}

elseif($length == 127) {

$masks = substr($text, 10, 4);

$data = substr($text, 14);

}

else {

$masks = substr($text, 2, 4);

$data = substr($text, 6);

}

$text = "";

for ($i = 0; $i < strlen($data); ++$i) {

$text .= $data[$i] ^ $masks[$i%4];

}

return $text;

}

/ /Encode message for transfer to client.

function mask($text)

{

$b1 = 0x80 | (0x1 & 0x0f);

$length = strlen($text);

if($length <= 125)

$header = pack('CC', $b1, $length);

elseif($length > 125 && $length < 65536)

$header = pack('CCn', $b1, 126, $length);

elseif($length >= 65536)

$header = pack('CCNN', $b1, 127, $length);

return $header.$text;

}

/ /handshake new client.

function perform_handshaking($receved_header,$client_conn, $host, $port)

{

$headers = array();

$lines = preg_split("/

/", $receved_header);

foreach($lines as $line)

{

$line = chop($line);

if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))

{

$headers[$matches[1]] = $matches[2];

}

}

$secKey = $headers['Sec-WebSocket-Key'];

$secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));

/ /hand shaking header

$upgrade = "HTTP/1.1 101 Web Socket Protocol Handshake

" .

"Upgrade: websocket

" .

"Connection: Upgrade

" .

"WebSocket-Origin: $host

" .

"WebSocket-Location: ws:/ /$host:$port/php-ws/chat-daemon.php

".

"Sec-WebSocket-Accept:$secAccept

";

socket_write($client_conn,$upgrade,strlen($upgrade));

}

```

### Step 4: Now add following code to create bind and listen tcp/ip sockets:

```php

/ /Create TCP/IP stream socket

$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

/ /reuseable port

socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);

/ /bind socket to specified host

socket_bind($socket, 0, $port);

/ /listen to port

socket_listen($socket);

/ /create & add listning socket to the list

$clients = array($socket);

```

Ok now a endless loop that will use for handeling incominga nd send messages:

```php

/ /start endless loop, so that our script doesn't stop

while (true) {

/ /manage multiple connections

$changed = $clients;

/ /returns the socket resources in $changed array

socket_select($changed, $null, $null, 0, 10);

/ /check for new socket

if (in_array($socket, $changed)) {

$socket_new = socket_accept($socket); / /accpet new socket

$clients[] = $socket_new; / /add socket to client array

$header = socket_read($socket_new, 1024); / /read data sent by the socket

perform_handshaking($header, $socket_new, $host, $port); / /perform websocket handshake

socket_getpeername($socket_new, $ip); / /get ip address of connected socket

$response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' connected'))); / /prepare json data

send_message($response); / /notify all users about new connection

/ /make room for new socket

$found_socket = array_search($socket, $changed);

unset($changed[$found_socket]);

}

/ /loop through all connected sockets

foreach ($changed as $changed_socket) {

/ /check for any incomming data

while(socket_recv($changed_socket, $buf, 1024, 0) >= 1)

{

$received_text = unmask($buf); / /unmask data

$tst_msg = json_decode($received_text, true); / /json decode

$user_name = $tst_msg['name']; / /sender name

$user_message = $tst_msg['message']; / /message text

$user_color = $tst_msg['color']; / /color

/ /prepare data to be sent to client

$response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color)));

send_message($response_text); / /send data

break 2; / /exist this loop

}

$buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);

if ($buf === false) { / / check disconnected client

/ / remove client for $clients array

$found_socket = array_search($changed_socket, $clients);

socket_getpeername($changed_socket, $ip);

unset($clients[$found_socket]);

/ /notify all users about disconnected connection

$response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));

send_message($response);

}

}

}

/ / close the listening socket

socket_close($socket);

```

So you are ready with server side socket program, Now its time to move on front side where we will implement w3c provided client side Web Socket Apis,

### Step 5: create a file named index.php for frontend usage with following initial code

```php

$host = 'localhost'; / /host

$port = '9000'; / /port

$subfolder = "php_ws/"; / /project subfolder name, you may change it with project directory or make it blank

/ /#add trail slash if there is any subfolder defined otherrwise make it blank

$colors = array('#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00');

$color_pick = array_rand($colors);

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<div class="chat-wrapper">

<div id="message-box"></div>

<div class="user-panel">

<input type="text" name="name" id="name" placeholder="Your Name" maxlength="15" />

<input type="text" name="message" id="message" placeholder="Type your message here..." maxlength="100" />

<button id="send-message">Send</button>

</div>

</div>

</body>

</html>

```

Now add some basic styling in the head section using following code:

```html

<style type="text/css">

.chat-wrapper {

font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;

background: #00a6bb;

padding: 20px;

margin: 20px auto;

box-shadow: 2px 2px 2px 0px #00000017;

max-width:700px;

min-width:500px;

}

#message-box {

width: 97%;

display: inline-block;

height: 300px;

background: #fff;

box-shadow: inset 0px 0px 2px #00000017;

overflow: auto;

padding: 10px;

}

.user-panel{

margin-top: 10px;

}

input[type=text]{

border: none;

padding: 5px 5px;

box-shadow: 2px 2px 2px #0000001c;

}

input[type=text]#name{

width:20%;

}

input[type=text]#message{

width:60%;

}

button#send-message {

border: none;

padding: 5px 15px;

background: #11e0fb;

box-shadow: 2px 2px 2px #0000001c;

}

</style>

```

Ok Style is all set now need to add a jquery script and create web socket object and handle all events on it as following code need to add before closing of bosy tag:

```html

<script src="https:/ /ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script language="javascript" type="text/javascript">

/ /create a new WebSocket object.

var msgBox = $('#message-box');

var wsUri = "ws:/ /".$host.":".$port."/php-ws/server.php";

websocket = new WebSocket(wsUri);

websocket.onopen = function(ev) { / / connection is open

msgBox.append('<div class="system_msg" style="color:#bbbbbb">Welcome to my "Chat box"!</div>'); / /notify user

}

/ / Message received from server

websocket.onmessage = function(ev) {

var response = JSON.parse(ev.data); / /PHP sends Json data

var res_type = response.type; / /message type

var user_message = response.message; / /message text

var user_name = response.name; / /user name

var user_color = response.color; / /color

switch(res_type){

case 'usermsg':

msgBox.append('<div><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="user_message">' + user_message + '</span></div>');

break;

case 'system':

msgBox.append('<div style="color:#bbbbbb">' + user_message + '</div>');

break;

}

msgBox[0].scrollTop = msgBox[0].scrollHeight; / /scroll message

};

websocket.onerror = function(ev){ msgBox.append('<div class="system_error">Error Occurred - ' + ev.data + '</div>'); };

websocket.onclose = function(ev){ msgBox.append('<div class="system_msg">Connection Closed</div>'); };

/ /Message send button

$('#send-message').click(function(){

send_message();

});

/ /User hits enter key

$( "#message" ).on( "keydown", function( event ) {

if(event.which==13){

send_message();

}

});

/ /Send message

function send_message(){

var message_input = $('#message'); / /user message text

var name_input = $('#name'); / /user name

if(message_input.val() == ""){ / /empty name?

alert("Enter your Name please!");

return;

}

if(message_input.val() == ""){ / /emtpy message?

alert("Enter Some message Please!");

return;

}

/ /prepare json data

var msg = {

message: message_input.val(),

name: name_input.val(),

color : '<?php echo $colors[$color_pick]; ?>'

};

/ /convert and send data to server

websocket.send(JSON.stringify(msg));

message_input.val(''); / /reset message input

}

</script>

```

Ok All set, Now need to run the server.php file using following php-cli utility,make sure you have php cli utility installed in your system:


```

php -q c:\xampp\htdocs\php-ws\server.php

```

Now you may access the front index.php file via the browser url like following and see a chatbox and connection status, you may use the same url or different browser to check the chat system is working or not.

5929 views · 1 years ago

![Introduction to Gitlab CI for PHP developers](https://images.ctfassets.net/vzl5fkwyme3u/5EUoVwcn2inEG3LsNJFAYp/14e5c704d91665c0de6ffd506a283ec3/AdobeStock_90389954.png?w=1000)

As a developer, you've probably at least heard something about [CI - Continuous integration](https://en.wikipedia.org/wiki/Continuous_integration). And if you haven't - you better fix it ASAP, because that's something awesome to have on your skill list and can get extremely helpful in your everyday work. This post will focus on CI for PHP devs, and specifically, on CI implementation from [Gitlab](https://docs.gitlab.com/ee/ci/README.html). I will suppose you know the basics of [Git](https://git-scm.com/), [PHP](https://php.net/), [PHPUnit](https://phpunit.de/), [Docker](https://www.docker.com/) and unix shell. Intended audience - intermediate PHP devs.

Adding something to your workflow must serve a purpose. In this case the goal is to automate routine tasks and achieve better quality control. Even a basic PHP project IMO needs the following:

* [linter](https://en.wikipedia.org/wiki/Lint_(software)) checks (cannot merge changes that are invalid on the syntax level)

* Code style checks

* Unit and integration tests

All of those can be just run eventually, of course. But I prefer an automated CI approach even in my personal projects because it leads to a higher level of discipline, you simply can't avoid following a set of rules that you've developed. Also, it reduces a risk of releasing a bug or regression, thus improving quality.

Gitlab is as generous as giving you their CI for free, even for your private repos. At this point it is starting to look as advertising, therefore a quick comparison table for [Gitlab](https://about.gitlab.com/pricing/), Github, [Bitbucket](https://bitbucket.org/product/pricing). AFAIK, Github does not have a built-in solution, instead it is easily integrated with third parties, of which [Travis CI](https://github.com/marketplace/travis-ci/plan/MDIyOk1hcmtldHBsYWNlTGlzdGluZ1BsYW43MA==#pricing-and-setup) seems to be the most popular - I will therefore mention Travis here.

### Public repositories (OSS projects). All 3 providers have a free offer for the open-source community!

| Provider | Limits |

|---|---|

| Gitlab | 2,000 CI pipeline minutes per group per month, shared runners |

| Travis | Apparently unlimited |

| Bitbucket| 50 min/month, max 5 users, File storage <= 1Gb/month |

### Private repositories

| Provider | Price | Limits |

|---|---|---|

| Gitlab | Free | 2,000 CI pipeline minutes per group per month, shared runners |

| Travis | $69/month | Unlimited builds, 1 job at a time |

| Bitbucket| Free | 50 min/month, max 5 users, File storage <= 1Gb/month |

## Getting started

I made a small project based on Laravel framework and called it "ci-showcase". I work in Linux environment, and the commands I use in the examples, are for linux shell. They should be pretty much the same on Mac and nearly the same on Windows though.

```sh

composer create-project laravel/laravel ci-showcase

```

Next, I went to gitlab website and created a new public project: https://gitlab.com/crocodile2u/ci-showcase. Cloned the repo and copied all files and folders from the newly created project - the the new git repo. In the root folder, I placed a `.gitignore` file:

```

.idea

vendor

.env

```

Then the `.env` file:

```

APP_ENV=development

```

Then I generated the application encryption key: `php artisan key:generate`, and then I wanted to verify that the primary setup works as expected: `./vendor/bin/phpunit`, which produced the output `OK (2 tests, 2 assertions)`. Nice, time to commit this: `git commit && git push`

[At this point](https://gitlab.com/crocodile2u/ci-showcase/tree/step-1), we don't yet have any CI, let's do something about it!

### Adding .gitlab-ci.yml

Everyone going to implement CI with Gitlab, is strongly encouraged to bookmark this page: https://docs.gitlab.com/ee/ci/README.html. I will simply provide a short introduction course here plus a bit of boilerplate code to get you started easier.

First QA check that we're going to add is PHP syntax check. PHP has a built-in linter, which you can invoke like this: `php -l my-file.php`. This is what we're going to use. Because the `php -l` command doesn't support multiple files as arguments, I've written a small wrapper shell script and saved it to `ci/linter.sh`:

```sh

#!/bin/sh

files=`sh ci/get-changed-php-files.sh | xargs`

last_status=0

status=0

# Loop through changed PHP files and run php -l on each

for f in "$files" ; do message=`php -l $f` last_status="$?" if [ "$last_status" -ne "0" ]; then # Anything fails -> the whole thing fails echo "PHP Linter is not happy about $f: $message" status="$last_status" fi

done

if [ "$status" -ne "0" ]; then echo "PHP syntax validation failed!"

fi

exit $status

```

Most of the time, you don't actually want to check each and every PHP file that you have. Instead, it's better to check only those files that have been changed. The Gitlab pipeline runs on every push to the repository, and there is a way to know which PHP files have been changed. Here's a simple script, meet `ci/get-changed-php-files.sh`:

```sh

#!/bin/sh

# What's happening here?

#

# 1. We get names and statuses of files that differ in current branch from their state in origin/master.

# These come in form (multiline)

# 2. The output from git diff is filtered by unix grep utility, we only need files with names ending in .php

# 3. One more filter: filter *out* (grep -v) all lines starting with R or D.

# D means "deleted", R means "renamed"

# 4. The filtered status-name list is passed on to awk command, which is instructed to take only the 2nd part

# of every line, thus just the filename

git diff --name-status origin/master | grep '\.php$' | grep -v "^[RD]" | awk '{ print $2 }'

```

These scripts can easily be tested in your local environment ( at least if you have a Linux machine, that is ;-) ).

Now, as we have our first check, we'll finally create our `.gitlab-ci.yml`. This is where your pipeline is declared using [YAML notation](https://yaml.org/):

```yml

# we're using this beautiful tool for our pipeline: https://github.com/jakzal/phpqa

image: jakzal/phpqa:alpine

# For this sample pipeline, we'll only have 1 stage, in real-world you would like to also add at least "deploy"

stages: - QA

linter:

stage: QA

# this is the main part: what is actually executed

script: - sh ci/get-changed-php-files.sh | xargs sh ci/linter.sh

```

The first line is `image: jakzal/phpqa:alpine` and it's telling Gitlab that we want to run our pipeline using a PHP-QA utility by [jakzal](https://github.com/jakzal). It is a docker image containing PHP and a huge variety of QA-tools. We declare one stage - QA, and this stage by now has just a single job named `linter`. Every job can have it's own docker image, but we don't need that for the purpose of this tutorial. Our project reaches [Step 2](https://gitlab.com/crocodile2u/ci-showcase/tree/step-2). Once I had pushed these changes, I immediately went to the [project's CI/CD page](https://gitlab.com/crocodile2u/ci-showcase/pipelines). Aaaand.... the pipeline was already running! I clicked on the `linter` job and saw the following happy green output:

```

Running with gitlab-runner 11.9.0-rc2 (227934c0) on docker-auto-scale ed2dce3a

Using Docker executor with image jakzal/phpqa:alpine ...

Pulling docker image jakzal/phpqa:alpine ...

Using docker image sha256:12bab06185e59387a4bf9f6054e0de9e0d5394ef6400718332c272be8956218f for jakzal/phpqa:alpine ...

Running on runner-ed2dce3a-project-11318734-concurrent-0 via runner-ed2dce3a-srm-1552606379-07370f92...

Initialized empty Git repository in /builds/crocodile2u/ci-showcase/.git/

Fetching changes...

Created fresh repository.

From https://gitlab.com/crocodile2u/ci-showcase * [new branch] master -> origin/master * [new branch] step-1 -> origin/step-1 * [new branch] step-2 -> origin/step-2

Checking out 1651a4e3 as step-2...

Skipping Git submodules setup

$ sh ci/get-changed-php-files.sh | xargs sh ci/linter.sh

Job succeeded

```

It means that our pipeline was successfully created and run!

### PHP Code Sniffer.

[PHP Code Sniffer](https://github.com/squizlabs/PHP_CodeSniffer) is a tool for keeping app of your PHP files in one uniform code style. It has a hell of customizations and settings, but here we will only perform simple check for compatibilty with [PSR-2](https://www.php-fig.org/psr/psr-2/) standard. A good practice is to create a configuration XML file in your project. I will put it in the root folder. Code sniffer can use a few file names, of which I prefer `phpcs.xml`:

```xml

<?xml version="1.0"?>

/resources

```

I also will append another section to `.gitlab-ci.yml`:

```yml

code-style: stage: QA script: # Variable $files will contain the list of PHP files that have changes - files=`sh ci/get-changed-php-files.sh` # If this list is not empty, we execute the phpcs command on all of them - if [ ! -z "$files" ]; then echo $files | xargs phpcs; fi

```

Again, we check only those PHP files that differ from master branch, and pass their names to `phpcs` utility. That's it, [Step 3](https://gitlab.com/crocodile2u/ci-showcase/tree/step-3) is finished! If you go to see the pipeline now, you will notice that `linter` and `code-style` jobs run in parallel.

## Adding PHPUnit

Unit and integration tests are essential for a successful and maintaiable modern software project. In PHP world, [PHPUnit](https://phpunit.de/) is de facto standard for these purposes. The PHPQA docker image already has PHPUnit, but that's not enough. Our project is based on [Laravel](https://laravel.com/), which means it depends on a bunch of third-party libraries, Laravel itself being one of them. Those are installed into `vendor` folder with [composer](https://getcomposer.org/). You might have noticed that our `.gitignore` file has `vendor` folder as one of it entries, which means that it is not managed by the Version Control System. Some prefer their dependencies to be part of their Git repository, I prefer to have only the `composer.json` declarations in Git. Makes the repo much much smaller than the other way round, also makes it easy to avoid bloating your production builds with libraries only needed for development.

Composer is also included into PHPQA docker image, and we can enrich our `.gitlab-ci.yml`:

```yml

test: stage: QA cache: key: dependencies-including-dev paths: - vendor/ script: - composer install - ./vendor/bin/phpunit

```

PHPUnit requires some configuration, but in the very beginning we used `composer create-project` to create our project boilerplate. **laravel/laravel** package has a lot of things included in it, and `phpunit.xml` is also one of them. All I had to do was to add another line to it:

```xml

```

APP_KEY enironment variable is essential for Laravel to run, so I generated a key with `php artisan key:generate`.

`git commit` & `git push`, and we have all three jobs on the **QA** stage!

## Checking that our checks work

In [this branch](https://gitlab.com/crocodile2u/ci-showcase/tree/failing-checks) I intentionally added changes that should fail all three job in our pipeline, take a look at [git diff](https://gitlab.com/crocodile2u/ci-showcase/compare/step-4...failing-checks). And we have this out from the pipeline stages:

**Linter**:

```

$ ci/linter.sh

PHP Linter is not happy about app/User.php:

Parse error: syntax error, unexpected 'syntax' (T_STRING), expecting function (T_FUNCTION) or const (T_CONST) in app/User.php on line 11

Errors parsing app/User.php

PHP syntax validation failed!

ERROR: Job failed: exit code 255

```

**Code-style**:

```

$ if [ ! -z "$files" ]; then echo $files | xargs phpcs; fi

FILE: ...ilds/crocodile2u/ci-showcase/app/Http/Controllers/Controller.php

----------------------------------------------------------------------

FOUND 0 ERRORS AND 1 WARNING AFFECTING 1 LINE

---------------------------------------------------------------------- 13 | WARNING | Line exceeds 120 characters; contains 129 characters

----------------------------------------------------------------------

Time: 39ms; Memory: 6MB

ERROR: Job failed: exit code 123

```

**test**:

```

$ ./vendor/bin/phpunit

PHPUnit 7.5.6 by Sebastian Bergmann and contributors.

F. 2 / 2 (100%)

Time: 102 ms, Memory: 14.00 MB

There was 1 failure:

1) Tests\Unit\ExampleTest::testBasicTest

This test is now failing

Failed asserting that false is true.

/builds/crocodile2u/ci-showcase/tests/Unit/ExampleTest.php:17

FAILURES!

Tests: 2, Assertions: 2, Failures: 1.

ERROR: Job failed: exit code 1

```

Congratulations, our pipeline is running, and we now have much less chance of messing up the result of our work.

## Conclusion

Now you know how to set up a basic QA pipeline for your PHP project. There's still a lot to learn. Pipeline is a powerful tool. For instance, it can make deployments to different environments for you. Or it can build docker images, store artifacts and more! Sounds cool? Then spend 5 minutes of your time and leave a comment, you can also tell me if there is a pipeline topic you would like to be covered in next posts.

SPONSORS

Faster PHP Cloud Hosting