DEV Community: Nachiket Panchal

Angular in Few Words

Nachiket Panchal — Thu, 19 Aug 2021 17:48:43 +0000

Angular is a TypeScript-based open-source front-end framework for single-page applications developed by Google.

Where to develop Angular App?

We can install Angular using Nodejs into our Windows/Linux/macOS machine.

Which are the important concepts of Angular?

Here are some important concepts of Angular you must learn to be a good angular developer.

Components, Interpolation, Property Binding, Class Binding, Style Binding, Event Binding, Template Reference Variables, Two-way Data Binding, ngFor Directive, ngIf Directive, ngSwitch Directive, Pipes, Routes, Wild Card Routes, Routing Parameters, Forms

I hope now you know What is angular, Where to develop it, and Which are the most important concepts to be understood while learning Angular. You can learn the full Angular Tutorial at errorsea.com

How to Compress Image Size Without Losing Quality in PHP

Nachiket Panchal — Mon, 23 Mar 2020 15:46:46 +0000

PHP provides the ability to compress images without losing the quality of it. Even more, we can resize images in PHP to generate thumbnails and lightweight web images.

PHP provides some default functions to compress images and to resize them. Many popular Core-PHP frameworks and CMS use default function to generate thumbnail and images without losing image quality.

Image Compression in PHP

Here we are going to learn how to compress an image in PHP without losing its quality in just 2 easy steps.

STEP 1: Create an HTML form

First, we have to create a simple HTML form to upload an image file.



<!DOCTYPE html>
<html>

<head>
    <title>How to compress an image without losing quality in PHP</title>
</head>

<body>
    <form action='' method='POST' enctype='multipart/form-data'>
        <input name="image_file" type="file" accept="image/*">
        <button type="submit">SUBMIT</button>
    </form>
</body>

</html>

Note: enctype=”multipart/form-data” is compulsory for image upload precess via post method in form.

STEP 2: Add below PHP code at the top of PHP file



<?php

if ($_SERVER['REQUEST_METHOD'] == "POST")

{

    $file_name = $_FILES["image_file"]["name"];

    $file_type = $_FILES["image_file"]["type"];

    $temp_name = $_FILES["image_file"]["tmp_name"];

    $file_size = $_FILES["image_file"]["size"];

    $error = $_FILES["image_file"]["error"];

    if (!$temp_name)

    {

        echo "ERROR: Please browse for file before uploading";

        exit();

    }

    function compress_image($source_url, $destination_url, $quality)

    {

        $info = getimagesize($source_url);

        if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source_url);

        elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source_url);

        elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source_url);

        imagejpeg($image, $destination_url, $quality);

        echo "Image uploaded successfully.";

    }

    if ($error > 0)

    {

        echo $error;

    }

    else if (($file_type == "image/gif") || ($file_type == "image/jpeg") || ($file_type == "image/png") || ($file_type == "image/pjpeg"))

    {

        $filename = compress_image($temp_name, "uploads/" . $file_name, 80);

    }

    else

    {

        echo "Uploaded image should be jpg or gif or png.";

    }

} ?>

Explanation

In the second step first, we checked for the form request method. For File and Image upload POST method is compulsory.

After that, we defined some variables related to the uploaded file. Like, File Name , File Type , File Size , Temporary Location of Uploaded File , and Error in File Upload Process if any.

Next, we created a compress_image() function to upload and compress the image. In this function, we passed three variables of the uploaded file.

$source_url: It is the temporary location in our case of file upload.
$destination_url: It is the destination path where we want to upload our Image.
$quality: It is the rate of Image quality we want to maintain from 1 to 100. If we want to maintain 100% quality we can simply apply 100 or we can pass 80 if we want to compress and lose the image quality by 20%.

In the compress_image() function we first found for image specifications by using getimagesize() function and checked for its mime type.

From mime type, we checked the image is valid or not and create a related replica of image in PHP according to jpeg, png, gif using imagecreatefromjpeg(), imagecreatefrompng(), imagecreatefromgif() respectively and saved it in $image variable.

Finally, we created a jpeg image with the help of a $image variable by using imagejpeg() function.

imagejpeg() function is basically image creator function from raw image data. There are three arguments we passed in imagejpeg() function.

$image: Raw image data we created and stored in $image variable
$destination_url: Destination Folder/Directory path where we want to create a new image
$quality: The rate of image quality we want to maintain

In the end, we checked for error in the upload process and used our compress_image() function to handle compression of the uploaded image.

Note: Change the destination directory according to your config. Here we have set the destination path to uploads/ in our working directory.

Conclusion

In the above article, we learned a complete process of image upload and compression with necessary validations.

Happy Programming

The post How to Compress Image Size Without Losing Quality in PHP appeared first on errorsea.

How to Add Unlimited Fields in Form Using JavaScript and Store Into Database With PHP

Nachiket Panchal — Thu, 19 Mar 2020 20:07:23 +0000

Sometimes we need to add unlimited fields into our form for better user experience. At that time, we can put an ADD FIELD button into the page for dynamic field generation on a webpage.

Creating unlimited fields in the form is effortless using JavaScript and jQuery. In addition, saving the data into a database is also easy to handle with PHP.

Adding Unlimited Fields Using JS and Saving Using PHP

Here we are going to use JavaScript to add new fields and PHP to save data into the database.

Step: Create a form and add a function to add new dynamic fields

<!DOCTYPE html>
<html>
    <body>
        <form id="form" method="POST" action="save_data.php">
            <input type="text" name="text_field[]">
            <button type="submit">SUBMIT</button>
        </form>
        <button onclick="add_field()">ADD FIELD</button>
        <script>
            function add_field(){

                var x = document.getElementById("form");
                // create an input field to insert
                var new_field = document.createElement("input");
                // set input field data type to text
                new_field.setAttribute("type", "text");
                // set input field name 
                new_field.setAttribute("name", "text_field[]");
                // select last position to insert element before it
                var pos = x.childElementCount;

                // insert element
                x.insertBefore(new_field, x.childNodes[pos]);
            }
        </script>
    </body>
</html>

Explanation

Here we created a function named add_field to append a text field at the second last position in the form.

Note: Here, we set every field name as text_field[], which submits all text field data as an array.

Step 2: Create a save_data.php file to store the data to the database

<?php
    $conn = mysqli_connect("localhost","USER_NAME","PASSWORD","DATABASE_NAME");

    $data = $_POST['text_field'];
    $data = implode(",",$data);

    $query = "INSERT INTO `test`(`data`) VALUES ('$data')";
    if(mysqli_query($conn,$query)){
        echo "Success: Data successfully inserted";
    }else{
        echo "Error: Could not insert data into table";
    }
?>

Explanation

Here we first stored the submitted array data in a PHP array variable named $data.
After that, we used an inbuilt PHP function implode(), which converts an array into a PHP string.
Finally, we saved our string data to our data table.

DOWNLOAD CODE

Conclusion

Creating unlimited dynamic fields is very easy using JavaScript. Even more, we learned a way to store that dynamic data into a database using some simple functions of PHP.

I hope now you have a complete understanding of dynamic field insertion and data storing techniques.

Enjoy Coding

The post Add Unlimited Fields in Form Using JavaScript and PHP appeared first on errorsea.

How to Change Button Color on Hover Using CSS

Nachiket Panchal — Sun, 08 Mar 2020 08:45:31 +0000

Every element on a website is considered to be important in terms of user experience. In addition, website representation is also another kind of factor which has a significant impact on uses. That’s why buttons and other clickable elements should be user friendly and nice looking.

Changing the color of buttons on hover looks quite impressive and feels upmarket rather than single color buttons. So here, we are going to discuss how to change the background color of the button using simple CSS. We should also choose the color of the button related to our website color. Even more, the color should be material, so it looks elegant to our users.

Change Button Background Color on Hover Using CSS

We have :hover attribute to manage hover events of HTML elements via CSS.

Syntax

.class\_name:hover{
/* CSS lines */
}

Example 1

<!DOCTYPE html>
<html>
   <head>
      <title>Change Button Color on Hover Using CSS - errorsea</title>
      <style> .myButton{ padding: 10px 20px; background-color: #1E88E5; border: 0px; color: #fff; } .myButton:hover{ background-color: #fff; border: 1px solid #1E88E5; color: #1E88E5; } </style>
   </head>
   <body> <button class="myButton">Hover Me</button></body>
</html>

We can also add some transition effects to make it more fluid and user friendly.

Example 2

In this example, we have added a little transition effect on hover to make the background color changing process more smooth and meaningful.

<!DOCTYPE html>
<html>
   <head>
      <title>Change Button Color on Hover Using CSS - errorsea</title>
      <style> .myButton{ padding: 10px 20px; background-color: #1E88E5; border: 0px; color: #fff; transition: 0.25s linear; } .myButton:hover{ background-color: #fff; border: 1px solid #1E88E5; color: #1E88E5; } </style>
   </head>
   <body> <button class="myButton">Hover Me</button></body>
</html>

Enjoy Designing

The post How to Change Button Color on Hover Using CSS appeared first on errorsea.

How to Create a Simple PHP REST API

Nachiket Panchal — Wed, 04 Mar 2020 05:43:11 +0000

REST(RESTful) API is the most used method of data transfer. However, there are several other ways to transfer data transfer, but REST is popular among them, so let’s know a little bit about REST APIs.

What is the REST API?

REST API is known as RESTful API is a universal method of data transfer, and it becomes more popular due to its flexibility.

It returns data in JSON format which is supported by all languages. REST API can be integrated with all development platforms.

Here we are going to discuss how to create a simple REST API in Core PHP.

REST API in PHP

PHP is a popular back-end language in web programming. In addition, it can handle simple to complex APIs. Let’s look at an example about REST API in Core PHP.

PHP has an inbuilt function json_encode() to convert PHP objects into JSON format.

Example

<?php
$object = ['Name' => 'Nachiket Panchal', 'Link' => 'errorsea.com', 'data' => ['Key1' => 'Value1', 'Key2' => 'Value2', 'Key3' => 'Value3']];
header("content-type: application/json");
echo json_encode($object); ?>

Explanation

First, we define a PHP object named $object.
Next, we set a header of content-type: application/json to provide content information to the receiver.
Finally, we convert our $object variable into json with json_encode() function and echo it.

We can also use a database to create a dynamic API for high-end application development.

Conclusion

We have now learned the most basic REST API development using PHP. We can also develop a more advanced API using PHP.

The post How to Create a Simple PHP REST API appeared first on errorsea.

JQuery Interview Questions

Nachiket Panchal — Tue, 03 Mar 2020 20:31:22 +0000

Q What is Jquery?

Ans. JQuery is not a programming language, but it is a well-written form of Javascript language.

Q What are the features of Jquery?

Ans. Jquery provides the features as follow:

Fast Execution
Less Coding
AJAX support
DOM Selection
Changing CSS
Event Handling
Easily implementation of animations and effects

Q Enlist the different types of selectors in Jquery?

Ans. Jquery has three types of selectors.

Custom Selector
CSS Selector
XPath Selector

C++ Interview Questions

Nachiket Panchal — Sun, 01 Mar 2020 12:52:56 +0000

Q What is C++?

Ans. It is an object-oriented programming language developed in 1985. Bjarne Stroustrup created it.

C++ language is the updated version of C language with having classes and objects.

It was called “C language with class”. After sometimes, it was known as C++ language.

You can use Turbo C++ to run C and C++ programs.