Develovers

Pemrosesan ServerSide DataTables dengan PHP dan MySQL

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Mon, 21 Mar 2022 19:50:00 +0000

DataTables adalah perpustakaan jQuery yang menampilkan catatan daftar dalam tabel HTML menggunakan antarmuka yang intuitif. Ini menawarkan fitur seperti pencarian, pagination, dan sort.

Dalam artikel sebelumnya, kami melihat kode khusus yang memungkinkan pencarian dan pagination catatan. Selain itu, DataTables akan memungkinkan kita untuk membatasi jumlah record yang ditampilkan pada sebuah halaman.

Ekstensi DataTables mendukung pemrosesan sisi klien dan sisi server. Artikel ini akan menunjukkan kepada Anda hasil database menggunakan pemrosesan sisi server DataTables.

File PHP memanggil kelas domain dengan mengirimkan tabel, kolom, dan detail konfigurasi ke fungsi. Kelas domain mengeksekusi kueri dan mengembalikan larik hasil. Format JSON mengkodekan array yang dihasilkan dan akan dikirim sebagai respons terhadap program AJAX DataTables .

Kode Pendefinisian DataTable

Kode ini mendefinisikan kode HTML untuk DataTable. Kode ini membutuhkan pustaka CSS dan JavaScript. Tag HTML tabel berisi atribut id yang digunakan untuk mendefinisikan dan menetapkan tabel sebagai DataTable.

MySQL Database Live Search with PHP and AJAX

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Tue, 08 Jun 2021 12:02:00 +0000

In this tutorial you'll learn how to create a live MySQL database search feature using PHP and Ajax.

Ajax Live Database Search

You can create a simple live database search functionality utilizing the Ajax and PHP, where the search results will be displayed as you start typing some character in search input box.

In this tutorial we're going to create a live search box that will search the countries table and show the results asynchronously. But, first of all we need to create this table.

Step 1: Creating the Database Table

Execute the following SQL query to create the countries table in your MySQL database.

Example

Download

CREATE TABLE countries (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);

After creating the table, you need to populate it with some data using the SQL INSERT statement. Alternatively, you can download the prepopulated countries table by clicking the download button and import it in your MySQL database.

Please check out the tutorial on SQL CREATE TABLE statement for the detailed information about syntax for creating tables in MySQL database system.

Step 2: Creating the Search Form

Now, let's create a simple web interface that allows user to live search the names of countries available in our countries table, just like an autocomplete or typeahead.

Create a PHP file named "search-form.php" and put the following code inside of it.

Example

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style>
    body{
        font-family: Arail, sans-serif;
    }
    /* Formatting search box */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search country..." />
        <div class="result"></div>
    </div>
</body>
</html>

Every time the content of search input is changed or keyup event occur on search input the jQuery code (line no-47 to 67) sent an Ajax request to the "backend-search.php" file which retrieves the records from countries table related to the searched term. Those records later will be inserted inside a <div> by the jQuery and displayed on the browser.

Step 3: Processing Search Query in Backend

And here's the source code of our "backend-search.php" file which searches the database based on query string sent by the Ajax request and send the results back to browser.

Example

Procedural Object Oriented PDO

Download

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "demo");
 
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
if(isset($_REQUEST["term"])){
    // Prepare a select statement
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = mysqli_prepare($link, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        // Set parameters
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            
            // Check number of rows in the result set
            if(mysqli_num_rows($result) > 0){
                // Fetch result rows as an associative array
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
     
    // Close statement
    mysqli_stmt_close($stmt);
}
 
// close connection
mysqli_close($link);
?>

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$mysqli = new mysqli("localhost", "root", "", "demo");
 
// Check connection
if($mysqli === false){
    die("ERROR: Could not connect. " . $mysqli->connect_error);
}
 
if(isset($_REQUEST["term"])){
    // Prepare a select statement
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = $mysqli->prepare($sql)){
        // Bind variables to the prepared statement as parameters
        $stmt->bind_param("s", $param_term);
        
        // Set parameters
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if($stmt->execute()){
            $result = $stmt->get_result();
            
            // Check number of rows in the result set
            if($result->num_rows > 0){
                // Fetch result rows as an associative array
                while($row = $result->fetch_array(MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
     
    // Close statement
    $stmt->close();
}
 
// Close connection
$mysqli->close();
?>

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
    $pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
    // Set the PDO error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
    die("ERROR: Could not connect. " . $e->getMessage());
}
 
// Attempt search query execution
try{
    if(isset($_REQUEST["term"])){
        // create prepared statement
        $sql = "SELECT * FROM countries WHERE name LIKE :term";
        $stmt = $pdo->prepare($sql);
        $term = $_REQUEST["term"] . '%';
        // bind parameters to statement
        $stmt->bindParam(":term", $term);
        // execute the prepared statement
        $stmt->execute();
        if($stmt->rowCount() > 0){
            while($row = $stmt->fetch()){
                echo "<p>" . $row["name"] . "</p>";
            }
        } else{
            echo "<p>No matches found</p>";
        }
    }  
} catch(PDOException $e){
    die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
 
// Close statement
unset($stmt);
 
// Close connection
unset($pdo);
?>

The SQL SELECT statement is used in combination with the LIKE operator (line no-16) to find the matching records in countries database table. We've implemented the prepared statement for better search performance as well as to prevent the SQL injection attack.

Note: Always filter and validate user input before using it in a SQL statement. You can also use PHP mysqli_real_escape_string() function to escape special characters in a user input and create a legal SQL string to protect against SQL injection.

Import and Export CSV File using PHP and MySQL

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 22 Apr 2021 16:34:00 +0000

Import and Export feature is very useful for the data management section. The Import functionality allows the user to upload and insert multiple data in the database. Using the Import feature, the bulk data can be inserted in the database on a single click. The export functionality allows the user to download the table data list and save in a file for offline use. Using the Export feature, multiple records can be downloaded in a file format.

Mostly, the CSV file format is used to import and export data in the web application. CSV (comma-separated values) file stores the data in plain text format and helps to move data between programs. The import and export functionality can be easily implemented with a CSV file using PHP and MySQL. Import CSV file data in database / Export data to CSV file both can be integrated with PHP and MySQL. In this tutorial, we will show you how to import and export CSV file data in database using PHP and MySQL.

In the example import and export script, the following functionality will be implemented.

Fetch the member’s data from the database and listed in the webpage.
Import CSV file data into MySQL database using PHP.
Export data to CSV using PHP and MySQL.

Create Database Table

To store the member’s data, a table needs to be created in the database. The following SQL creates a members table with some basic fields in the MySQL database.

CREATE TABLE `members` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `phone` varchar(15) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` enum('Active','Inactive') COLLATE utf8_unicode_ci NOT NULL DEFAULT 'Active',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CSV File Format

Based on the database table structure, the CSV file should have these fields – Name, Email, Phone, and Status. To import CSV file data in the database, the CSV file format will similar to the following screen.

When the data export to CSV file, the downloaded format will look like the following screen.

Database Configuration (dbConfig.php)

The dbConfig.php is used to connect the database. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "codexworld";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

CSV File Upload and Download (index.php)

Initially, the member’s data is listed in the HTML table with import and export option.

Existing members data are fetched from the database and listed in a tabular format.
An Import button is placed at the top of the list.
- By clicking the Import button, a CSV file upload form appears.
- On submission, the form is submitted to the importData.php file for importing the CSV file data to the database.
- formToggle() – This JavaScript function is used to Show/Hide the CSV upload form and it triggered when the Import button is clicked.
If the CSV file import request already submitted, the status message is retrieved from the URL and the import status is displayed on the web page.
An Export button is placed at the top of the list.
- The Export link navigates to the exportData.php file for exporting table data to CSV file.

<?php
// Load the database configuration file
include_once 'dbConfig.php';

// Get status message
if(!empty($_GET['status'])){
    switch($_GET['status']){
        case 'succ':
            $statusType = 'alert-success';
            $statusMsg = 'Members data has been imported successfully.';
            break;
        case 'err':
            $statusType = 'alert-danger';
            $statusMsg = 'Some problem occurred, please try again.';
            break;
        case 'invalid_file':
            $statusType = 'alert-danger';
            $statusMsg = 'Please upload a valid CSV file.';
            break;
        default:
            $statusType = '';
            $statusMsg = '';
    }
}
?>

<!-- Display status message -->
<?php if(!empty($statusMsg)){ ?>
<div class="col-xs-12">
    <div class="alert <?php echo $statusType; ?>"><?php echo $statusMsg; ?></div>
</div>
<?php } ?>

<div class="row">
    <!-- Import & Export link -->
    <div class="col-md-12 head">
        <div class="float-right">
            <a href="javascript:void(0);" class="btn btn-success" onclick="formToggle('importFrm');"><i class="plus"></i> Import</a>
            <a href="exportData.php" class="btn btn-primary"><i class="exp"></i> Export</a>
        </div>
    </div>
    <!-- CSV file upload form -->
    <div class="col-md-12" id="importFrm" style="display: none;">
        <form action="importData.php" method="post" enctype="multipart/form-data">
            <input type="file" name="file" />
            <input type="submit" class="btn btn-primary" name="importSubmit" value="IMPORT">
        </form>
    </div>

    <!-- Data list table --> 
    <table class="table table-striped table-bordered">
        <thead class="thead-dark">
            <tr>
                <th>#ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
        <?php
        // Get member rows
        $result = $db->query("SELECT * FROM members ORDER BY id DESC");
        if($result->num_rows > 0){
            while($row = $result->fetch_assoc()){
        ?>
            <tr>
                <td><?php echo $row['id']; ?></td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['email']; ?></td>
                <td><?php echo $row['phone']; ?></td>
                <td><?php echo $row['status']; ?></td>
            </tr>
        <?php } }else{ ?>
            <tr><td colspan="5">No member(s) found...</td></tr>
        <?php } ?>
        </tbody>
    </table>
</div>

<!-- Show/hide CSV upload form -->
<script>
function formToggle(ID){
    var element = document.getElementById(ID);
    if(element.style.display === "none"){
        element.style.display = "block";
    }else{
        element.style.display = "none";
    }
}
</script>

This example code uses Bootstrap 4 library to styling the HTML Table, Form, and Links. You can omit it to include if you don’t want to use Bootstrap structure. Otherwise, include the Bootstrap library file and custom stylesheet file (if any).

<!-- Bootstrap library -->
<link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">

<!-- Stylesheet file -->
<link rel="stylesheet" href="assets/css/style.css">

Import CSV Data to Database (importData.php)

The importData.php file handles the CSV file upload and data import process with PHP and MySQL.

Validate the submitted file whether a valid CSV file.
Check the CSV file upload status using PHP is_uploaded_file() function.
Open the CSV file using PHP fopen() function.
Parse data from the CSV file using PHP fgetcsv() function.
Insert or Update data into the database based on the member’s email.

<?php
// Load the database configuration file
include_once 'dbConfig.php';

if(isset($_POST['importSubmit'])){
    
    // Allowed mime types
    $csvMimes = array('text/x-comma-separated-values', 'text/comma-separated-values', 'application/octet-stream', 'application/vnd.ms-excel', 'application/x-csv', 'text/x-csv', 'text/csv', 'application/csv', 'application/excel', 'application/vnd.msexcel', 'text/plain');
    
    // Validate whether selected file is a CSV file
    if(!empty($_FILES['file']['name']) && in_array($_FILES['file']['type'], $csvMimes)){
        
        // If the file is uploaded
        if(is_uploaded_file($_FILES['file']['tmp_name'])){
            
            // Open uploaded CSV file with read-only mode
            $csvFile = fopen($_FILES['file']['tmp_name'], 'r');
            
            // Skip the first line
            fgetcsv($csvFile);
            
            // Parse data from CSV file line by line
            while(($line = fgetcsv($csvFile)) !== FALSE){
                // Get row data
                $name   = $line[0];
                $email  = $line[1];
                $phone  = $line[2];
                $status = $line[3];
                
                // Check whether member already exists in the database with the same email
                $prevQuery = "SELECT id FROM members WHERE email = '".$line[1]."'";
                $prevResult = $db->query($prevQuery);
                
                if($prevResult->num_rows > 0){
                    // Update member data in the database
                    $db->query("UPDATE members SET name = '".$name."', phone = '".$phone."', status = '".$status."', modified = NOW() WHERE email = '".$email."'");
                }else{
                    // Insert member data in the database
                    $db->query("INSERT INTO members (name, email, phone, created, modified, status) VALUES ('".$name."', '".$email."', '".$phone."', NOW(), NOW(), '".$status."')");
                }
            }
            
            // Close opened CSV file
            fclose($csvFile);
            
            $qstring = '?status=succ';
        }else{
            $qstring = '?status=err';
        }
    }else{
        $qstring = '?status=invalid_file';
    }
}

// Redirect to the listing page
header("Location: index.php".$qstring);

Export Data to CSV (exportData.php)

The exportData.php file handles the data export process using PHP and MySQL.

Fetch the records from the database.
Create and open a file with writing-only mode using PHP fopen() function.
Set header columns, format as CSV and write it to the opened file using PHP fputcsv() function.
Output data from the database, format as CSV and write it to file.
Force browser to download data as CSV format in a file.

<?php 
// Load the database configuration file 
include_once 'dbConfig.php'; 
 
$filename = "members_" . date('Y-m-d') . ".csv"; 
$delimiter = ","; 
 
// Create a file pointer 
$f = fopen('php://memory', 'w'); 
 
// Set column headers 
$fields = array('ID', 'Name', 'Email', 'Phone', 'Created', 'Status'); 
fputcsv($f, $fields, $delimiter); 
 
// Get records from the database 
$result = $db->query("SELECT * FROM members ORDER BY id DESC"); 
if($result->num_rows > 0){ 
    // Output each row of the data, format line as csv and write to file pointer 
    while($row = $result->fetch_assoc()){ 
        $lineData = array($row['id'], $row['name'], $row['email'], $row['phone'], $row['created'], $row['status']); 
        fputcsv($f, $lineData, $delimiter); 
    } 
} 
 
// Move back to beginning of file 
fseek($f, 0); 
 
// Set headers to download file rather than displayed 
header('Content-Type: text/csv'); 
header('Content-Disposition: attachment; filename="' . $filename . '";'); 
 
// Output all remaining data on a file pointer 
fpassthru($f); 
 
// Exit from file 
exit();

Export HTML Table Data to CSV using JavaScript

Conclusion

Our example script helps you to easily add the import and export feature to the data list using PHP and MySQL. To make the data management section user-friendly, the export and import functionality is a great option. Also, you can enhance our import CSV file and export data to CSV script with PHP and MySQL as per your needs.

Save Content from WYSIWYG Editor using PHP and MySQL

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 22 Apr 2021 16:32:00 +0000

The WYSIWYG editor allows the user to insert the HTML formatted text in the input field. You can easily add WYSIWYG HTML editor to textarea using jQuery plugin. There are many jQuery plugins are available to add WYSIWYG editor to texarea. CKEditor and TinyMCE editor is the most popular plugin to add rich text editor on the web page.

Once the WYSIWYG editor content is submitted, the value needs to be stored for later use. Generally, in the web application, the database is used to store the input content. To save the WYSIWYG editor content, the input HTML value needs to be inserted in the database. PHP $_POST method is the easiest way to get HTML editor value and save WYSIWYG Editor content in the database. In this tutorial, we will show you how to insert and save HTML content of WYSIWYG editor in the database using PHP and MySQL.

Create Database Table

To store the HTML editor content, a table needs to be created in the database. The following SQL creates an editor table with some basic fields in the MySQL database.

CREATE TABLE `editor` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Add WYSIWYG HTML Editor to Textarea with CKEditor

Database Configuration (dbConfig.php)

The dbConfig.php file is used to connect the database using PHP and MySQL. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your database credentials.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "codexworld";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

WYSIWYG HTML Editor Form

At first, create an HTML form with textarea input field to allow the user to add content and submit data.

<form method="post" action="submit.php">
    <textarea name="editor" id="editor" rows="10" cols="80">
    This is my textarea to be replaced with HTML editor.
    </textarea>
    <input type="submit" name="submit" value="SUBMIT">
</form>

To accept HTML content from the user, the textarea element needs to be converted in WYSIWYG Editor. You can use any WYSIWYG editor plugin (CKEditor or TinyMCE) to add HTML editor to textarea input field.
Add WYSIWYG editor with CKEditor:
Include the JS library file of CKEditor plugin.

<script src="ckeditor/ckeditor.js"></script>

Use CKEDITOR.replace() method to replace the textarea field with WYSIWYG editor.

<script>
CKEDITOR.replace('editor');
</script>

Add WYSIWYG editor with TinyMCE:
Include the JS library file of TinyMCE editor plugin.

<script src="tinymce/tinymce.min.js"></script>

Use tinymce.init() method to replace the textarea field with WYSIWYG editor.

<script>
tinymce.init({
    selector: '#editor'
});
</script>

Save HTML Editor Content in the Database

Once the form is submitted, the editor’s content is posted to the server-side script (submit.php) for inserting the HTML formatted content in the database.

Retrieve the editor content from the posted form data using the $_POST method in PHP.
Insert the HTML content in the database using PHP and MySQL.
Display the status message to the user.

<?php
// Include the database configuration file
require_once 'dbConfig.php';

$editorContent = $statusMsg = '';

// If the form is submitted
if(isset($_POST['submit'])){
    // Get editor content
    $editorContent = $_POST['editor'];
    
    // Check whether the editor content is empty
    if(!empty($editorContent)){
        // Insert editor content in the database
        $insert = $db->query("INSERT INTO editor (content, created) VALUES ('".$editorContent."', NOW())");
        
        // If database insertion is successful
        if($insert){
            $statusMsg = "The editor content has been inserted successfully.";
        }else{
            $statusMsg = "Some problem occurred, please try again.";
        } 
    }else{
        $statusMsg = 'Please add content in the editor.';
    }
}
?>

Conclusion

Not only the CKEditor and TinyMCE editor content, but you can also use the example code to insert any HTML editor content in the database. This code snippet is very useful for the CRUD application where the WYSIWYG editor is used for insert HTML content. You can easily enhance our script functionality to add additional input fields with WYSIWYG editor and save all the content in the database using PHP and MySQL.

Compress Image Before Upload using PHP

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 22 Apr 2021 16:23:00 +0000

The large size image takes more time to load a web page. If you want to load a large image without affecting the page load time, the image needs to be optimized to reduce the size. Image compression is very helpful to reduce the size of the image. Generally, the user does not optimize the image when uploading through the website. In this case, compress image before upload to optimize the image.

Compress/optimize image before upload can be easily implemented using PHP. In the image compress functionality, the file size is reduced before upload. The compressed image helps to reduce the uses of the server’s storage and load the web page faster. In this tutorial, we will show you how to compress image before upload using PHP.

File Upload Form

Create an HTML form with a file input field and a submit button. Make sure the <form> tag contains the following attributes.

method="post"
enctype="multipart/form-data"

<form action="upload.php" method="post" enctype="multipart/form-data">
    <label>Select Image File:</label>
    <input type="file" name="image">
    <input type="submit" name="submit" value="Upload">
</form>

After the form submission, the file data is submitted to the upload.php file for further processing.

Compress and Upload Image with PHP

In the upload.php file handles the image compression and upload operations.

compressImage() is a custom function that helps to compress and save image on the server using PHP.
If the file is submitted,
- Retrieve the file info using the PHP $_FILES method.
- Compress size and upload image using compressImage() function.
- Render the image upload status.

<?php 
 
/* 
 * Custom function to compress image size and 
 * upload to the server using PHP 
 */ 
function compressImage($source, $destination, $quality) { 
    // Get image info 
    $imgInfo = getimagesize($source); 
    $mime = $imgInfo['mime']; 
     
    // Create a new image from file 
    switch($mime){ 
        case 'image/jpeg': 
            $image = imagecreatefromjpeg($source); 
            break; 
        case 'image/png': 
            $image = imagecreatefrompng($source); 
            break; 
        case 'image/gif': 
            $image = imagecreatefromgif($source); 
            break; 
        default: 
            $image = imagecreatefromjpeg($source); 
    } 
     
    // Save image 
    imagejpeg($image, $destination, $quality); 
     
    // Return compressed image 
    return $destination; 
} 
 
 
// File upload path 
$uploadPath = "uploads/"; 
 
// If file upload form is submitted 
$status = $statusMsg = ''; 
if(isset($_POST["submit"])){ 
    $status = 'error'; 
    if(!empty($_FILES["image"]["name"])) { 
        // File info 
        $fileName = basename($_FILES["image"]["name"]); 
        $imageUploadPath = $uploadPath . $fileName; 
        $fileType = pathinfo($imageUploadPath, PATHINFO_EXTENSION); 
         
        // Allow certain file formats 
        $allowTypes = array('jpg','png','jpeg','gif'); 
        if(in_array($fileType, $allowTypes)){ 
            // Image temp source 
            $imageTemp = $_FILES["image"]["tmp_name"]; 
             
            // Compress size and upload image 
            $compressedImage = compressImage($imageTemp, $imageUploadPath, 75); 
             
            if($compressedImage){ 
                $status = 'success'; 
                $statusMsg = "Image compressed successfully."; 
            }else{ 
                $statusMsg = "Image compress failed!"; 
            } 
        }else{ 
            $statusMsg = 'Sorry, only JPG, JPEG, PNG, & GIF files are allowed to upload.'; 
        } 
    }else{ 
        $statusMsg = 'Please select an image file to upload.'; 
    } 
} 
 
// Display status message 
echo $statusMsg; 
 
?>

Preview and Rotate Image Before Upload using jQuery and PHP

Conclusion

Generally, the move_uploaded_file() function is used to upload file in PHP. But, if you want to compress the image before upload, our custom PHP function (compressImage()) is very useful. The example code helps you to compress the image file without using any compression library. With our compression script, you can compress different types of an image file (JPG, JPEG, PNG, and GIF).

Live username availability check in PHP AJAX

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 14 Jan 2021 17:42:00 +0000

Here we using 2 file for Live username availability check in PHP AJAX

index.php

check_availability.php

index.php


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div id="frmCheckUsername">
			<label>Check Username:</label>
			<input name="username" type="text" id="username" class="demoInputBox" onBlur="checkAvailability()"><span id="user-availability-status"></span>    
		</div>
		<p><img src="loder.gif" id="loaderIcon" style="display:none" /></p>
	</div>
</div>

<script type="text/javascript">
function checkAvailability(){
	$("#loaderIcon").show();
	
	$.ajax({
		type:"POST",
		url:"check_availability.php",
		cache:false,
		data:{
			type:1,
			username:$("#username").val(),
		},
		success:function(data){
			$("#user-availability-status").html(data);
			$("#loaderIcon").hide(1000);
		}
	});
}
</script>
</body>
</html>

check_availability.php

/* Related Posts Middle by igniel.com */
.ignielRelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
.ignielRelatedMiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}
.ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;}
.ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.ignielRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}

Menampilkan Menu Ketika Scrool ke Bawah

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 16 Jul 2020 17:31:00 +0000

Cara Geser Bar ke Bawah
Langkah 1) Tambahkan HTML:
Buat bilah navigasi:

Contoh

<div id="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

</div>

Langkah 2) Tambahkan CSS:
Gaya bilah navigasi:

Contoh

#navbar {

  background-color: #333; /* Black background color */

  position: fixed; /* Make it stick/fixed */

  top: -50px; /* Hide the navbar 50 px outside of the top view */

  width: 100%; /* Full width */

  transition: top 0.3s; /* Transition effect when sliding down (and up) */

}



/* Style the navbar links */

#navbar a {

  float: left;

  display: block;

  color: white;

  text-align: center;

  padding: 15px;

  text-decoration: none;

}



#navbar a:hover {

  background-color: #ddd;

  color: black;

}

Langkah 3) Tambahkan JavaScript:
Contoh

// When the user scrolls down 20px from the top of the document, slide down the navbar

// When the user scrolls to the top of the page, slide up the navbar (50px out of the top view)

window.onscroll = function() {scrollFunction()};



function scrollFunction() {

  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

    document.getElementById("navbar").style.top = "0";

  } else {

    document.getElementById("navbar").style.top = "-50px";

  }

}

Membuat Website Responsive dengan 3 Langkah Mudah

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 16 Jul 2020 15:48:00 +0000

Saat ini, situs web tidak hanya harus terlihat bagus di layar desktop, tetapi juga di tablet dan ponsel cerdas.

Sebuah situs web responsif jika mampu beradaptasi dengan layar klien.

Desain web responsif sangat penting saat ini dan sebenarnya merupakan salah satu teknik yang perlu Anda kuasai sebagai pengembang web atau desainer web.

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana membangun situs responsif dengan mudah dan bagaimana menerapkan teknik desain responsif pada halaman web yang ada dalam tiga langkah mudah.

Ketika membangun situs web responsif, atau membuat situs responsif, hal pertama yang harus dilihat adalah tata letaknya.

Ketika saya membangun situs web yang responsif, saya selalu memulai dengan membuat tata letak yang tidak responsif, ditetapkan pada ukuran standar. Misalnya, lebar default CatsWhoCode.com adalah 1100px.

Ketika saya senang dengan tata letak yang tidak responsif, saya menambahkan pertanyaan media dan sedikit perubahan pada CSS saya untuk membuat situs yang responsif. Ketika datang ke desain web, itu jauh lebih mudah untuk fokus pada satu tugas pada suatu waktu.

Situs Di Perangkat Seluler
Ketika Anda selesai dengan tata letak yang tidak responsif, hal pertama yang harus dilakukan adalah menempelkan baris berikut di dalam tag <head> dan </head> pada halaman HTML Anda.

<meta name = "viewport" content = "width = lebar perangkat, skala awal = 1, skala maksimum = 1, skala pengguna = tidak ada">
<meta http-equiv = "Kompatibel dengan X-UA" content = "IE = edge, chrome = 1">
<meta name = "HandheldFriendly" content = "true">

Ini akan mengatur tampilan pada semua layar pada rasio aspek 1 × 1 dan menghapus fungsi default dari iPhone dan perangkat seluler lainnya yang membuat situs web pada tampilan penuh dan memungkinkan pengguna untuk memperbesar tata letak dengan menjepit.

Sekarang saatnya untuk menambahkan beberapa pertanyaan media. Menurut situs W3C , Queries Media terdiri dari jenis media dan nol atau lebih ekspresi yang memeriksa kondisi fitur media tertentu. Dengan menggunakan kueri media, presentasi dapat disesuaikan dengan rentang perangkat output tertentu tanpa mengubah kontennya sendiri.

Dengan kata lain, kueri media memungkinkan situs web Anda terlihat bagus di semua jenis tampilan, dari ponsel cerdas hingga layar besar. Inilah yang disebut desain web responsif .

Kueri media bergantung pada tata letak situs web Anda, jadi cukup sulit bagi saya untuk memberi Anda cuplikan kode yang siap digunakan. Namun, kode di bawah ini adalah titik awal yang baik untuk sebagian besar situs web. Dalam contoh ini, #primaryadalah area konten utama, dan #secondarybilah samping.

Dengan melihat kode, Anda dapat melihat bahwa saya menetapkan dua ukuran: Yang pertama memiliki lebar maksimum 1060px dan dioptimalkan untuk tampilan lanskap tablet. #primarymenempati 67% dari wadah induknya, dan #secondary30%, ditambah margin kiri 3%.

Ukuran kedua dirancang untuk potret tablet dan ukuran yang lebih kecil. Karena ukuran layar smartphone yang kecil, saya memutuskan untuk memberikan #primarylebar 100%. #secondaryjuga memiliki lebar 100%, dan akan ditampilkan di bawah #primary.

Seperti yang sudah saya katakan, Anda mungkin harus menyesuaikan sedikit kode ini agar sesuai dengan kebutuhan spesifik situs web Anda. Tempel di .cssfile situs Anda .

/ * Pertanyaan Media: Lansekap Tablet * /
Layar @ media dan (max-width: 1060px) {
#primary {width: 67%; }
#secondary {width: 30%; margin-kiri: 3%;}
}

/ * Pertanyaan Media: Potret Tabled * /
Layar @ media dan (max-width: 768px) {
#primary {width: 100%; }
#secondary {width: 100%; margin: 0; perbatasan: tidak ada; }
}
Setelah selesai, mari kita lihat seberapa responsif tata letak Anda. Untuk melakukannya, saya menggunakan alat luar biasa yang dibuat oleh Matt Kersley. Anda tentu saja dapat memeriksa hasilnya di perangkat seluler Anda sendiri.

2 - Media

Tata letak yang responsif adalah langkah pertama menuju situs web yang sepenuhnya responsif. Sekarang, mari kita fokus pada aspek yang sangat penting dari situs web modern: media, seperti video atau gambar .

Kode CSS di bawah ini akan memastikan bahwa gambar Anda tidak akan pernah lebih besar dari wadah induknya. Ini sangat sederhana dan berfungsi untuk situs web yang paling responsif. Agar berfungsi dengan benar, cuplikan kode ini harus dimasukkan ke dalam stylesheet CSS Anda.

img {max-width: 100%; tinggi: otomatis; }

Meskipun teknik di atas efisien, kadang-kadang Anda mungkin perlu memiliki kontrol lebih besar atas gambar dan menampilkan gambar yang berbeda sesuai dengan ukuran tampilan klien.

Ini adalah teknik yang dikembangkan oleh Nicolas Gallagher . Mari kita mulai dengan html:

Cara Membuat Situs Web Responsif dalam 3 Langkah Mudah 1
Seperti yang Anda lihat, kami menggunakan data-*atribut untuk menyimpan url gambar pengganti. Sekarang, mari gunakan kekuatan penuh CSS3 untuk mengganti gambar default dengan salah satu gambar pengganti yang ditentukan jika min-device-widthkondisinya cocok:

@ media (lebar perangkat minimum: 600px) {

    img [data-src-600px] {

        konten: attr (data-src-600px, url);

    }

}



@ media (lebar perangkat minimum: 800px) {

    img [data-src-800px] {

        konten: attr (data-src-800px, url);

    }

}

Mengesankan, bukan? Sekarang mari kita lihat media lain yang sangat penting di situs web hari ini: video.

Karena sebagian besar situs web menggunakan video dari situs pihak ketiga seperti YouTube atau Vimeo, saya memutuskan untuk fokus pada teknik video elastis oleh Nick La . Teknik ini memungkinkan Anda untuk membuat video yang tertanam responsif.

HTML:

Dan sekarang, CSS:

.video-container {

 posisi: relatif;

 padding-bottom: 56,25%;

 padding-top: 30px;

 tinggi: 0;

 overflow: disembunyikan;

}



.video-wadah iframe,

.video-objek kontainer,

.video-container embed {

 posisi: absolut;

 atas: 0;

 kiri: 0;

 lebar: 100%;

 tinggi: 100%;

}

Setelah Anda menerapkan kode ini ke situs web Anda, video yang disematkan sekarang responsif.

3 - Tipografi

Langkah terakhir dari tutorial ini jelas penting, tetapi seringkali diabaikan oleh pengembang ketika datang ke situs web responsif: Tipografi.

Sampai saat ini, sebagian besar pengembang menggunakan piksel untuk menentukan ukuran font. Meskipun piksel baik-baik saja ketika situs web Anda memiliki lebar tetap, situs web responsif harus memiliki font yang responsif. Ukuran font situs Anda harus terkait dengan lebar wadah induknya, sehingga dapat beradaptasi dengan layar klien dan mudah dibaca pada perangkat seluler.

Spesifikasi CSS3 termasuk unit baru bernama rems. Mereka bekerja hampir identik dengan emunit, tetapi relatif terhadap htmlelemen, yang membuatnya jauh lebih mudah digunakan daripada ems.

Karena remssifatnya relatif terhadap htmlelemen, jangan lupa mengatur ulang htmlukuran font:

html {ukuran font: 100%; }

Setelah selesai, Anda dapat menentukan ukuran font responsif seperti yang ditunjukkan di bawah ini:

@ media (lebar minimum: 640px) {body {ukuran font: 1rem;}}

@ media (lebar minimum: 960px) {body {ukuran font: 1.2rem;}}

@ media (lebar minimum: 1100px) {body {ukuran font: 1.5rem;}}

Untuk informasi lebih lanjut tentang remunit ini, saya sarankan Anda artikel yang bermanfaat ini . Pastikan juga untuk memeriksa panduan teknik desain web responsif ini .

Cara Mudah Mengganti Style ActionBar Android

noreply@blogger.com (...:::HiToKiRi.rEd:::...) — Thu, 23 Oct 2014 17:53:00 +0000

Deskripsi:

Secara bawaan, ActionBar sudah ada pada Android dengan tiga type, yakni Holo, Dark dan
Transparan. Untuk membuat aplikasi yang kita rancang tampil beda dari biasanya dalam hal ini saya contohkan aplikasi ActionBar dengan tampilan seperti Facebook, maka tambahkan kode berikut ini pada file ***.java yang terletak pada folder src/nama_package.

Langkah 1: Masukkan kode berikut ke dalam file ***.java

public class Develovers extends Activity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.dashboard_layout);
       

     // mengganti ActionBar (ganti background dan sembunyikan icon)

  getActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#3b5998")));

Langkah 2: Perbaiki kode yang salah

Apabila Anda meng-copy paste kode di Atas, maka akan ada kode yang bermasalah, cara memperbaikinya arahkan kursor ke baris kode yang bermasalah dan ketik Ctrl+1

Jangan lupa berikan komentar Anda apabila mengalami kesulitan pada tutorial ini. :)