PHP & Web Development Blogs

Showing 11 to 15 of 48 blog articles.
2171 views · 7 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.

994 views · 7 months ago

![Why I joined Nomad PHP](https://images.ctfassets.net/vzl5fkwyme3u/7oJGUxDKa39FTdHwxSibd/4e15709c86e793073874d1b70fce2d0a/AdobeStock_235654924.jpeg?h=250)

**I've been using PHP since 1996. I've been paid to use PHP for the last 12 years.**

I am a big fan of the language and it's amazing to see just how much it's changed in the last 24 years.

> I finally joined NomadPHP because in the current climate, I feel like I need to give back to the community, and share some of the things that I've learned over the years.

In my current role, I’m working with a large pool of developers from many different backgrounds and skill levels to maintain a large pool of php based tools for a web hosting company.

These tools range from in house tools for support and sales, to customer facing tools for automation and quality of life applications.

I’m a big fan of frameworks, specifically Laravel. I discovered Laravel 4.0, decided to give it a try and immediately realized how valuable it could be as a way to prototype quickly. It has since grown to a tool in my toolbox I use regularly for medium and small applications simply as a time saver.

Please feel free to reach out to me if you have any questions, or what to pick my brain. I can’t promise I know it all, but over the years I’ve learned how to solve problems and find answers.

Thank you, and I look forward to what may come.

Chris.

2037 views · 1 years ago

![New Beta: Transcriptions and Closed Captioning](https://images.ctfassets.net/vzl5fkwyme3u/3Cz2r74iChZbJyAFS2ydPo/f67d7369647247806bbacb8f48c9fd98/captions.png)

With the mission of making technology more accessible, I'm pleased to announce a beta of transcriptions and closed captioning on select videos.

This beta offers a more in-depth look into videos before watching them, the ability to dig into the video's text afterwards for review, and the ability to watch the video with closed captioning assistance.

Closed Captioning may be enabled on the video player by clicking the [cc] icon and selecting your preferred language (at this time, only English is supported). You may also find a transcription of the talk below the description for more insight into the talk before watching, or to find specific information/ sections afterwards for review.

![Example of Captions and Transcriptions](https://images.ctfassets.net/vzl5fkwyme3u/6O6eSdVYuCslcsrRzfmGbl/24c598e80195d4839662f2833c1cfa3c/captions-example2.png)

As our first attempt at transcriptions and closed captions, it won't be perfect, but if it is beneficial this is something we hope to bring to all future videos, and selectively add closed captioning to past videos based on demand and availability.

.

#### Today the following videos are available to watch with closed captioning:

* [Data Lakes in AWS](https://nomadphp.com/video/239/data-lakes-in-aws)

* [The Dark Corners of the SPL](https://nomadphp.com/video/234/the-dark-corners-of-the-spl)

* [Git Legit](https://nomadphp.com/video/233/git-legit)

* [Advanced WordPress Plugin Creation](https://nomadphp.com/video/224/advanced-wordpress-plugin-creation)

* [The Faster Web Meets Lean and Mean PHP](https://nomadphp.com/video/216/the-faster-web-meets-lean-and-mean-php)

.

#### Closed Captioning for Live Events

Unfortunately, at this time we are not able to offer closed captioning for live events including our monthly meetings, workshops, and streamed conferences. This is an area we are continuing to look into, and working on identifying partners to make possible in the future.

.

#### Providing Feedback/ Requesting Closed Captioning

If you have a specific request for a video you would like to see closed captioned, please let us know using the [Nomad PHP feedback form](https://nomadphp.com/feedback).

.

#### Next on the Roadmap

Also look for these new features coming over the next several months:

* Lightning talks

* Team management for team account owners

* Mobile Apps for Android/ iOS with offline viewing

5480 views · 1 years ago

![Why Cloudways is the Perfect Managed Hosting for PHP Applications](https://images.ctfassets.net/vzl5fkwyme3u/3VLCUBagZPfSLyxyt1AvvP/89e3b904a450454545eb885e2e0e76b4/cloudways.jpg?w=1000)

#### The following is a sponsored blogpost by [Cloudways](https://www.cloudways.com/en/?id=431739)

Developing an application is not the sole thing you should bank on. You must strive to find the best hosting solution to deploy that application also. The application’s speed is dependent on the hosting provider, that is why I always advise you to go for the best hosting solution to get the ultimate app performance.

Now a days, it is a big challenge to choose any web hosting, as each hosting has its own pros and cons which you must know, before considering it finally for the deployment. I don’t recommend shared hosting for PHP/Laravel based applications, because you always get lot of server hassles like downtime, hacking, 500 errors, lousy support and other problems that are part and parcel of shared hosting.

For PHP applications, you must focus on more technical aspects like caching, configs, databases, etc. because these are essential performance points for any vanilla or framework-based PHP application. Additionally, if the app focuses on user engagement (for instance, ecommerce store), the hosting solution should be robust enough to handle spikes in traffic.

Here, I would like to introduce Cloudways [PHP server hosting](https://www.cloudways.com/en/php-cloud-hosting.php?id=431739) to you which provides easy, developer and designer friendly managed hosting platform. With Cloudways, you don't need to focus on PHP hosting, but must focus on building your application. You can easily launch cloud servers on five providers including DigitalOcean, Linode, Vultr, AWS and GCE.

### Cloudways ThunderStack

Being a developer, you must be familiar with the concept of stack - an arrangement of technologies that form the underlying hosting solution.

To provide a blazing fast speed and a glitch-free performance, Cloudways has built a PHP stack, known as ThunderStack. This stack consists of technologies that offer maximum uptime and page load speed to all PHP applications. Check out the following visual representation of ThunderStack and the constituent technologies:

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/5v08m0nwsFPv7niXjmRX0M/ca3aba8d814578baf676bd58c3933dc8/cloudways_image1.png?w=1000)

As you can see, ThunderStack comprises of a mix of static and dynamic caches with two web servers, Nginx and Apache. This combination ensures the ultimate experience for the users and visitors of your application.

### Frameworks and CMS

The strength and popularity of PHP lies in the variety of frameworks and CMS it offers to the developers. Realizing this diversity, Cloudways offers a hassle-free installation of major PHP frameworks including Symfony, Laravel, CakePHP, Zend, and Codeigniter. Similarly, popular CMS such as WordPress, Bolt, Craft, October, Couch, and Coaster CMS - you can install these with the 1-click option. The best part is that if you have a framework or CMS that is not on the list, you can easily install it through Composer.

### 1-Click PHP Server & Application Installation

Setting up a stack on an unmanaged VPS could take an entire day!

When you opt for Cloudways managed cloud hosting, the entire process of setting up the server, installation of core PHP files and then the setup of the required framework is over in a matter of minutes.

Just [sign up at Cloudways](https://www.cloudways.com/en/?id=431739), choose your desired cloud provider, and select the PHP stack application.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/2Dp11Kg9FOkHkFbjUub7Tj/f0c4c125a8c683c51a548fdd287c8330/cloudways_image2.png?w=1000)

As you can see, your LAMP stack is ready for business in minutes.

Many PHP applications fail because essential services are either turned off or not set up properly. Cloudways offers a centralized location where you can view and set the status of all essential services such as:

* Apache

* Elasticsearch

* Memcached

* MySQL

* PHP-FPM

* Nginx

* New Relic

* Redis

* Varnish

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/1zvZI0b7zuPbBacp4ALAax/a5150babfbe2972c96beca3ac71395f2/cloudways_image3.png?w=1000)

Similarly, you can manage SMTP add-ons without any fuss.

### Staging Environment

With Cloudways, you can test your web applications for possible bugs and errors before taking it live.

Using the staging feature, developers can first deploy their web sites on test domains where they can analyze the applications performance and potential problems. This helps site administrators to fix those issues timely and view the application performance in real-time.

A default sub domain comes pre-installed with the newly launched application, making it easy for the administrators to test the applications on those testing subdomains. Overall, it's a great feature which helps developers know about the possible errors that may arise during the live deployment.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/5gTrIsw9KjhocjtZMWVePB/a8274899ee55d7068329c551af362fdf/cloudways_image4.png?w=1000)

### Pre-Installed Composer & Git

PHP development requires working with external libraries and packages. Suppose you are working with Laravel and you need to install an external package. Since Composer has become the standard way of installing packages, it comes preinstalled on the Cloudways platform. Just launch the application and start using Composer in your project.

Similarly, if you are familiar with Git and maintain your project on GitHub or BitBucket, you don’t need to worry about Git installation. Git also comes pre-configured on Cloudways. You can start running commands right after application launch.

### Cloudways MySQL Manager

When you work with databases in PHP, you need a database manager. On the Cloudways platform, you will get a custom-built MySQL manager, in which you can perform all the tasks of a typical DB manager.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/415qced8tKK8FWEsWGPhAm/ec1947d0b21ac8cd572613d0a1fa88dc/cloudways_image5.png?w=1000)

However, if you wish to install and use another database manager like PHPMyAdmin, you can install it by following this simple guide on installing [PHPMyadmin](https://www.cloudways.com/blog/installation-phpmyadmin/?id=431739).

### Server & Application Level SSH

If you use Linux, you typically use SSH for accessing the server(s) and individual applications. A third-party developer requires application and server level access as per the requirements of the client. Cloudways offers SSH access to fit the requirements of the client and users.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/1IpSR4TrckMFJjYQ1m5upz/030f71f106b7db97ce16de10aba2c17b/cloudways_image6.png?w=1000)

### PHP-FPM, Varnish & Cron Settings

Cloudways provides custom UI panel to set and maintain PHP-FPM and Varnish settings. Although the default configuration is already in place, you can easily change all the settings to suit your own, particular development related requirements. In Varnish settings, you can define URL that you want to exclude from caching. You can also set permissions in this panel.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/2W8XQvGa3CZAPBwUY4sqca/8a6b041c6dc850cc2715bb19eb17a464/cloudways_image7.png?w=1000)

Cron job is a very commonly used component of PHP application development process. On Cloudways platform, you can easily set up Cron jobs in just a few clicks. Just declare the PHP script URL and the time when the script will run.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/32fN2IkC1X3HEC2Ly685nz/6fb9607bab9beaa81bff1b7fe4061edf/cloudways_image8.png?w=1000)

### Cloudways API & Personal Assistant Bot

Cloudways provides an internal API that offers all important aspects of the server and application management. Through Cloudways API, you can easily develop, integrate, automate, and manage your servers and web apps on Cloudways Platform using the RESTful API. Check out some of the [use cases developed](https://www.cloudways.com/blog/category/use-cases/api/?id=431739) using Cloudways API. You just need your API key and email for authentication of the HTTP calls on API Playground and custom applications.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/5Uxx5XySaV2um2AnJjvbcg/0a4e997995d6644aa90c850a41db2720/cloudways_image9.png?w=1000)

Cloudways employs a smart assistant named CloudwaysBot to notify all users about server and application level issues. CloudwaysBot sends the notifications on pre-approved channels including email, Slack and popular task management tools such as Asana and Trello.

### Run Your APIs on PHP Stack

Do you have your own API which you want to run on the PHP stack? No problem, because you can do that, too with Cloudways! You can also use REST API like [Slim](https://www.cloudways.com/blog/simple-rest-api-with-slim-micro-framework/?id=431739&utm_source=phpjabber&utm_medium=referral), [Silex](https://www.cloudways.com/blog/create-rest-api-silex/?utm_source=phpjabber&utm_medium=referral&id=431739), [Lumen](https://www.cloudways.com/blog/creating-rest-api-with-lumen/?utm_source=phpjabber&utm_medium=referral&id=431739), and others. You can use APIs to speed up performance and require fast servers with lots of resources. So, if you think that your API response time is getting slower due to the large number of requests, you can easily scale your server(s) with a click to address the situation.

### Team Collaboration

When you work on a large number of applications with multiple developers, you need to assign them on any specific application. Cloudways provides an awesome feature of team collaboration through which you can assign developers to specific application and give access to them. You can use this tool to assign one developer to multiple applications. Through team feature, you can connect the team together and work on single platform. Access can be of different type; i.e. billing, support and console. You can either give the full access or a limited one by selecting the features in Team tab.

![alt_text](https://images.ctfassets.net/vzl5fkwyme3u/3Yn7GSeHrLvSbPf42RTR2n/269328c371e80f3ac87984cf46b6e9ac/cloudways_image10.png?w=1000)

### Final Words

Managed cloud hosting ensures that you are not bothered by any hosting or server related issues. For practical purposes, this means that developers can concentrate on writing awesome code without worrying about underlying infrastructure and hosting related issues. Do [sign up](https://www.cloudways.com/en/?id=431739) and check out Cloudways for the best and the most cost-effective cloud hosting solution for your next PHP project!

8852 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.

SPONSORS